:root {
  /* Default Dark Mode Colors */
  --bg-primary: #0c0c0c;
  --bg-secondary: #141414;
  --bg-tertiary: #1a1a1a;
  --bg-sidebar: #000000;
  --bg-topbar: #0c0c0c;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border-color: #1f2937;

  /* UptimeBot Brand Color */
  --accent-color: #55E6F4;
  --accent-hover: #3dd8e8;
  --accent-text: #011C33;

  --modal-overlay: rgba(0, 0, 0, 0.85);
  --input-bg: #1a1a1a;
  --card-hover: rgba(255, 255, 255, 0.03);

  /* Card and container colors */
  --card-bg: #111111;
  --card-border: #1a1a1a;
  --card-bg-hover: #1a1a1a;

  /* Status colors */
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #3b82f6;
}

/* Light Mode - Applied when data-theme="light" is set on html element */
[data-theme="light"],
.light-mode {
  /* Light Mode Colors */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-sidebar: #ffffff;
  --bg-topbar: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;

  /* UptimeBot Brand Color - slightly darker for light mode */
  --accent-color: #2CC5D3;
  --accent-hover: #1AB5C3;
  --accent-text: #ffffff;

  --modal-overlay: rgba(15, 23, 42, 0.5);
  --input-bg: #f8fafc;
  --card-hover: rgba(0, 0, 0, 0.02);

  /* Card and container colors */
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-bg-hover: #f1f5f9;

  /* Status colors remain the same */
  --success-color: #16a34a;
  --warning-color: #d97706;
  --danger-color: #dc2626;
  --info-color: #2563eb;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Custom Scrollbar for the dark theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ============================================
   AUTH PAGES - Reusable Components
   ============================================ */

/* Auth Page Container */
.auth-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 2rem;
}

/* Auth Logo */
.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.logo-image {
  height: 5rem;
  width: auto;
  margin: 0 auto;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin: 0;
  letter-spacing: -0.025em;
}

.logo-text {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin: 0;
  letter-spacing: -0.025em;
}

/* Auth Card */
.auth-card {
  width: 100%;
  max-width: 56rem;
  /* max-w-4xl = 56rem */
  background-color: #111111;
  border: 1px solid #222;
  border-radius: 1.5rem;
  /* rounded-3xl = 1.5rem */
  padding: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.auth-card-simple {
  max-width: 56rem;
  /* Override to match max-w-4xl */
  padding: 2.5rem;
  /* p-10 = 2.5rem */
  border-radius: 1.5rem;
  /* rounded-3xl */
}

/* Auth Header */
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.auth-subtitle {
  color: #9ca3af;
  font-size: 1rem;
}

/* Login Header (inside card) */
.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

/* Form Elements */
.form-label {
  display: block;
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.form-input {
  width: 100%;
  background-color: #1c1c1c;
  border: 1px solid #333;
  color: white;
  border-radius: 0.5rem;
  /* rounded-lg */
  padding: 0.75rem 1rem;
  /* px-4 py-3 */
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.1);
}

.form-input::placeholder {
  color: #4b5563;
  /* placeholder-gray-700 */
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

/* Buttons */
.btn-primary {
  width: 100%;
  background-color: var(--accent-color);
  color: black;
  font-weight: 700;
  /* font-bold */
  padding: 0.875rem 1rem;
  /* py-3.5 */
  border-radius: 0.75rem;
  /* rounded-xl */
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.4);
}

.btn-primary:hover {
  background-color: #4dd3be;
  box-shadow: 0 0 20px rgba(94, 234, 212, 0.5);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.2);
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  background-color: #111;
  border: 1px solid #333;
  color: #d1d5db;
  /* text-gray-300 */
  border-radius: 0.75rem;
  /* rounded-xl */
  padding: 0.875rem 1.5rem;
  /* px-6 py-3.5 */
  cursor: pointer;
  transition: all 0.2s;
}

.btn-social:hover {
  background-color: #1a1a1a;
  color: white;
}

.btn-social svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.btn-social span {
  font-weight: 500;
  transition: color 0.2s;
}

.btn-social:hover span {
  color: white;
}

/* Links */
.link-primary {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.link-primary:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* Divider */
.auth-divider {
  position: relative;
  margin: 1.5rem 0;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #333;
}

.auth-divider-text {
  position: relative;
  display: inline-block;
  padding: 0 1rem;
  background-color: #111111;
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* Feature List */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.feature-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-color);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.feature-text {
  font-size: 0.875rem;
  color: #9ca3af;
}

/* Password Toggle */
.password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.password-toggle:hover {
  color: #9ca3af;
}

/* Responsive Grid */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .auth-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Helper Text */
.helper-text {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.helper-text-center {
  text-align: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing */
.space-y-6>*+* {
  margin-top: 1.5rem;
}

.gap-4 {
  gap: 1rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

/* Flexbox */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

/* Positioning */
.relative {
  position: relative;
}

/* Text */
.text-center {
  text-align: center;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-gray-300 {
  color: #d1d5db;
}

/* Font Weight */
.font-medium {
  font-weight: 500;
}

/* Sizing */
.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

.w-full {
  width: 100%;
}

.max-w-4xl {
  max-width: 56rem;
}

/* ============================================
   PORTAL PAGES - Dashboard Components
   ============================================ */

/* Page Layout */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-container-sm {
  max-width: 768px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 2.5rem;
}

.page-header-nav {
  margin-bottom: 2rem;
}

.portal-page-title {
  color: white;
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Back Link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  transition: color 0.2s;
}

.back-link:hover {
  color: white;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card-dark {
  background-color: #111;
  border: 1px solid #1a1a1a;
  border-radius: 0.75rem;
  overflow: hidden;
}

.form-card {
  background-color: #111;
  border: 1px solid #1a1a1a;
  border-radius: 1rem;
  padding: 2.5rem;
}

.groups-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.group-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* ============================================
   FORM ELEMENTS - Dark Theme
   ============================================ */

.form-section {
  margin-bottom: 2rem;
}

.form-label-upper {
  display: block;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input-dark {
  width: 100%;
  background-color: #0a0a0a;
  border: 2px solid #222;
  color: white;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.form-input-dark:focus {
  outline: none;
  border-color: var(--accent-color);
}

.form-input-dark::placeholder {
  color: #4b5563;
}

.form-select-dark {
  width: 100%;
  background-color: #0a0a0a;
  border: 2px solid #222;
  color: white;
  border-radius: 0.5rem;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.875rem;
  appearance: none;
  cursor: pointer;
}

.form-select-dark:focus {
  outline: none;
  border-color: var(--accent-color);
}

.select-wrapper {
  position: relative;
}

.select-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

.form-help {
  display: block;
  color: #6b7280;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

/* Range Slider */
.form-range-dark {
  width: 100%;
  height: 6px;
  background: #222;
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}

.form-range-dark::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--accent-color);
  border-radius: 50%;
  cursor: pointer;
}

.form-range-dark::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(94, 234, 212, 0.2);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.75rem;
}

/* ============================================
   RADIO & CHECKBOX CARDS
   ============================================ */

.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.radio-card {
  position: relative;
  cursor: pointer;
}

.radio-card input {
  position: absolute;
  opacity: 0;
}

.radio-card-content {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 2px solid #222;
  background-color: #0a0a0a;
  transition: all 0.2s;
}

.radio-card:hover .radio-card-content {
  border-color: #333;
}

.radio-card.selected .radio-card-content,
.radio-card input:checked+.radio-card-content {
  border-color: var(--accent-color);
  background-color: rgba(94, 234, 212, 0.05);
}

.radio-card-title {
  color: white;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.radio-card-desc {
  color: #6b7280;
  font-size: 0.75rem;
}

.checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid #222;
  border-radius: 0.75rem;
  background-color: #0a0a0a;
  cursor: pointer;
  transition: all 0.2s;
}

.checkbox-card:hover {
  border-color: #333;
}

.checkbox-card input {
  width: 18px;
  height: 18px;
  margin-top: 0.125rem;
  cursor: pointer;
  accent-color: var(--accent-color);
}

.checkbox-content {
  flex: 1;
}

.checkbox-title {
  display: block;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}

.checkbox-desc {
  display: block;
  color: #6b7280;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #d1d5db;
  font-size: 0.875rem;
}

.checkbox-inline input {
  accent-color: var(--accent-color);
}

/* ============================================
   BUTTONS - Portal
   ============================================ */

.btn-accent {
  padding: 0.75rem 1.5rem;
  background-color: var(--accent-color);
  color: black;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-accent:hover {
  background-color: #4dd3be;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 234, 212, 0.3);
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background-color: #1a1a1a;
  color: #d1d5db;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid #333;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background-color: #222;
}

.btn-cancel {
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  color: #ef4444;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-cancel:hover {
  color: #dc2626;
}

.btn-danger {
  padding: 0.75rem 1.5rem;
  background-color: #ef4444;
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background-color: #dc2626;
}

.btn-icon {
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
}

.btn-icon:hover {
  background-color: #222;
  color: #9ca3af;
}

.btn-icon.btn-danger {
  padding: 0.5rem;
  background: none;
}

.btn-icon.btn-danger:hover {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid #1a1a1a;
  margin-top: 2rem;
}

/* ============================================
   TABLE STYLES
   ============================================ */

.table-container {
  overflow-x: auto;
}

.table-scroll {
  min-width: 900px;
}

.table-header {
  display: grid;
  padding: 0.75rem 1.5rem;
  background-color: #0a0a0a;
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b7280;
  border-bottom: 1px solid #1a1a1a;
}

.table-row {
  display: grid;
  padding: 1rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid #1a1a1a;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #0a0a0a;
}

/* ============================================
   STATUS BADGES
   ============================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-up {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.status-up .status-dot {
  background-color: #22c55e;
}

.status-down {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-down .status-dot {
  background-color: #ef4444;
}

.status-paused {
  background-color: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.status-paused .status-dot {
  background-color: #9ca3af;
}

.status-warning {
  background-color: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

.status-warning .status-dot {
  background-color: #fbbf24;
}

/* ============================================
   FILTER BAR
   ============================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background-color: #111;
  border: 1px solid #1a1a1a;
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.filter-tabs {
  display: flex;
  background-color: #0a0a0a;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid #1a1a1a;
}

.filter-btn {
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.375rem;
  transition: all 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
}

.filter-btn.active {
  background-color: var(--accent-color);
  color: black;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
}

.filter-btn:not(.active):hover {
  color: white;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown select {
  background-color: #1a1a1a;
  border: 1px solid #333;
  color: #d1d5db;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  appearance: none;
  cursor: pointer;
}

.filter-search {
  flex: 1;
  position: relative;
  min-width: 200px;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.filter-search input {
  width: 100%;
  background-color: #1a1a1a;
  border: 1px solid #333;
  color: #d1d5db;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
}

.filter-search input:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* ============================================
   GROUP HEADER
   ============================================ */

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #1a1a1a;
}

.group-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.group-title {
  color: white;
  font-weight: 700;
  margin: 0;
}

.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background-color: #ef4444;
  border: 2px solid #111;
  border-radius: 50%;
  font-size: 8px;
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-new-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--accent-color);
  color: black;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-new-btn:hover {
  background-color: #4dd3be;
}

/* ============================================
   UPTIME BARS
   ============================================ */

.uptime-bars {
  display: flex;
  gap: 1px;
}

.uptime-bar {
  width: 6px;
  height: 24px;
  border-radius: 1px;
}

.uptime-bar.up {
  background-color: #22c55e;
}

.uptime-bar.down {
  background-color: #ef4444;
}

/* ============================================
   DOMAIN LINK
   ============================================ */

.domain-link {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s;
}

.domain-link:hover {
  color: var(--accent-color);
}

/* ============================================
   HEALTH STATUS
   ============================================ */

.health-status {
  font-weight: 600;
  font-size: 0.75rem;
}

.health-status.good {
  color: #22c55e;
}

.health-status.warn {
  color: #fbbf24;
}

.health-status.bad {
  color: #ef4444;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
  background-color: #111;
  border: 1px solid #1a1a1a;
  border-radius: 0.75rem;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-icon {
  margin-bottom: 1.5rem;
}

.empty-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.empty-description {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.btn-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--accent-color);
  color: black;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-empty:hover {
  background-color: #4dd3be;
}

.empty-row {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

.empty-row a {
  color: var(--accent-color);
}

/* ============================================
   MODALS
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-container {
  background-color: #111;
  border: 1px solid #1a1a1a;
  border-radius: 1rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-sm {
  max-width: 400px;
}

.modal-md {
  max-width: 600px;
}

.modal-lg {
  max-width: 800px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #1a1a1a;
}

.modal-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
}

.modal-close:hover {
  color: white;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1.5rem;
  border-top: 1px solid #1a1a1a;
}

.modal-message {
  color: #d1d5db;
  margin: 0;
}

/* ============================================
   RECIPIENTS LIST
   ============================================ */

.recipients-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.recipient-row {
  display: flex;
  gap: 0.5rem;
}

.recipient-row input {
  flex: 1;
}

/* ============================================
   MONITOR TABLE COLUMNS
   ============================================ */

.table-header.monitor-table,
.table-row.monitor-table {
  grid-template-columns: 100px 1fr 300px 100px 100px 160px;
}

.col-status,
.col-uptime,
.col-percentage,
.col-frequency,
.col-actions {
  display: flex;
  justify-content: center;
}

.col-frequency {
  color: var(--text-secondary);
}

/* Only apply larger font in row cells, not headers */
.monitor-grid-row .col-frequency {
  font-size: 0.875rem;
}

.col-actions {
  gap: 0.5rem;
  color: var(--text-muted);
}

/* Percentage Values */
.percentage-value {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* Status colors for percentage - these stay consistent across themes */
.percentage-value.good {
  color: #22c55e;
}

.percentage-value.warn {
  color: #fbbf24;
}

.percentage-value.bad {
  color: #ef4444;
}

/* Action Buttons */
.btn-action {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action.btn-primary {
  background-color: var(--accent-color);
  color: black;
}

.btn-action.btn-primary:hover {
  background-color: #4dd3be;
}

.btn-action.btn-secondary {
  background-color: #1a1a1a;
  color: #d1d5db;
  border: 1px solid #333;
}

.btn-action.btn-secondary:hover {
  background-color: #222;
}

/* ============================================
   HEALTH TABLE COLUMNS
   ============================================ */

.table-header.health-table,
.table-row.health-table {
  grid-template-columns: 40px 1fr 80px 80px 80px 80px 100px 120px 100px 100px;
}


.col-check,
.col-health {
  display: flex;
  justify-content: center;
}

.expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #6b7280;
  transition: transform 0.2s;
}

.expand-btn.expanded {
  transform: rotate(90deg);
}

.expand-btn:hover {
  color: #9ca3af;
}

/* Details Row */
.details-row {
  background-color: #0a0a0a;
  border-bottom: 1px solid #1a1a1a;
}

.details-content {
  padding: 1.5rem;
  margin-left: 40px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-label {
  color: #6b7280;
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
}

.detail-value {
  color: #d1d5db;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================
   INCIDENTS
   ============================================ */

.incidents-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.incident-card {
  background-color: #111;
  border: 1px solid #1a1a1a;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 100px 1fr 300px 120px;
  align-items: center;
  gap: 1.5rem;
  transition: background-color 0.2s;
}

.incident-card:hover {
  background-color: #0a0a0a;
}

.incident-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.incident-monitor a {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

.incident-monitor a:hover {
  color: var(--accent-color);
}

.incident-cause {
  color: #9ca3af;
  font-size: 0.75rem;
}

.incident-timing {
  display: flex;
  gap: 2rem;
}

.timing-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.timing-label {
  color: #6b7280;
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
}

.timing-value {
  color: #d1d5db;
  font-size: 0.75rem;
}

.timing-active {
  color: #ef4444;
}

.incident-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-view {
  padding: 0.375rem 0.75rem;
  background-color: #1a1a1a;
  color: #d1d5db;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
  border: 1px solid #333;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-view:hover {
  background-color: #222;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */

@media (max-width: 900px) {
  .table-scroll {
    min-width: 600px;
  }

  .table-header.monitor-table,
  .table-row.monitor-table {
    grid-template-columns: 80px 1fr 80px 80px;
  }

  .col-uptime,
  .col-frequency {
    display: none;
  }

  /* Health table responsive */
  .table-header.health-table,
  .table-row.health-table {
    grid-template-columns: 40px 1fr 60px 60px 60px 80px;
  }

  .health-table .col-check:nth-child(5),
  .health-table .col-check:nth-child(6),
  .health-table .col-check:nth-child(9) {
    display: none;
  }

  .details-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Incidents responsive */
  .incident-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .incident-timing {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .incident-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-tabs {
    width: 100%;
    justify-content: center;
  }

  .filter-search {
    min-width: unset;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer button {
    width: 100%;
  }
}

/* ============================================
   COMPONENT STYLES FROM TWIG FILES
   ============================================ */

/* Button Component Styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  border: none;
}

.btn-ghost {
  background: none;
  color: #9ca3af;
}

.btn-ghost:hover {
  color: var(--accent-color);
  background-color: #222;
}

/* Filter Bar Component Styles (duplicates removed, keeping for reference) */
.dropdown-arrow {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

/* Portal Layout Styles */
body {
  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Top Header Bar */
.top-header {
  height: 64px;
  width: 100%;
  background-color: #111;
  border-bottom: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  flex-shrink: 0;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.menu-toggle {
  padding: 0.5rem;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.menu-toggle:hover {
  background-color: #222;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-box {
  width: 40px;
  height: 32px;
  background-color: #1e293b;
  border: 2px solid var(--accent-color);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-accent {
  color: var(--accent-color);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.company-badge {
  display: none;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .company-badge {
    display: flex;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #9ca3af;
  border-left: 1px solid #222;
  padding-left: 1rem;
  margin-left: 0.5rem;
}

.icon-button {
  padding: 0.375rem;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.icon-button:hover {
  color: var(--accent-color);
  background-color: #222;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: black;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  border: 1px solid rgba(94, 234, 212, 0.5);
  box-shadow: 0 0 10px rgba(94, 234, 212, 0.3);
  cursor: pointer;
  transition: transform 0.2s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

/* Main Layout Body */
.main-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: 256px;
  background-color: #050505;
  border-right: 1px solid #1a1a1a;
  flex-shrink: 0;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: 80px;
}

.sidebar-nav {
  flex: 1;
  padding: 0 1rem;
  margin-top: 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #1a1a1a;
}

.nav-item.active {
  background-color: var(--accent-color);
  color: black;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
}

.sidebar:not(.collapsed) .nav-item {
  padding: 0 1rem;
  gap: 0.75rem;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
}

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

/* Main Content */
.main-content {
  flex: 1;
  overflow-y: auto;
  background-color: #0d0d0d;
  padding: 2.5rem;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #111;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Landing Page Styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

.col-3 {
  flex: 0 0 33.333%;
  padding: 0 15px;
}

.col-2 {
  flex: 0 0 50%;
  padding: 0 15px;
}

/* Navbar */
.navbar {
  background-color: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand img {
  height: 40px;
}

.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 30px;
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--accent-color);
}

/* Landing Page Buttons */
.btn-light {
  background-color: white;
  color: #000;
}

.btn-light:hover {
  background-color: #f0f0f0;
}

.btn-outline-light {
  background-color: transparent;
  color: white;
  border-color: white;
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn-lg {
  padding: 14px 40px;
  font-size: 1.1rem;
}

.btn-hero {
  padding: 12px 30px;
  margin-right: 10px;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--accent-color) 0%, #0ea5e9 100%);
  color: white;
  padding: 100px 0;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  opacity: 0.95;
}

.hero .row {
  align-items: center;
}

.hero-icon {
  text-align: center;
}

.hero-benefits {
  margin-top: 20px;
  opacity: 0.85;
}

/* Stats Section */
.stats-section {
  background-color: var(--bg-secondary);
  padding: 60px 0;
  border-bottom: 1px solid var(--border-color);
}

.stat-item {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-color);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-top: 10px;
}

/* Features Section */
.features-section {
  padding: 80px 0;
  background-color: var(--bg-primary);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background-color: var(--bg-tertiary);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(89, 232, 242, 0.1);
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-color), #0ea5e9);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-icon .material-icons {
  font-size: 32px;
  color: var(--accent-text);
}

.feature-card h4 {
  color: var(--text-primary);
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 1.25rem;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* CTA Section */
.cta-section {
  padding: 80px 0;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.cta-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.cta-section p {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

/* Footer */
footer {
  background-color: var(--bg-sidebar);
  color: white;
  padding: 60px 0 20px;
}

footer h5,
footer h6 {
  margin-bottom: 20px;
  color: white;
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 10px;
}

footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--accent-color);
}

.footer-divider {
  margin: 30px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* Onboarding Styles */
input[type="radio"]:checked+.monitor-type-card {
  border-color: var(--accent-color) !important;
  background-color: #1a1a1a !important;
}

.monitor-type-card:hover {
  border-color: #6b7280 !important;
}

/* Auth Base Styles */
.auth-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

.auth-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background: radial-gradient(circle at 50% 50%, var(--accent-color) 0%, transparent 50%);
}

.auth-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-logo {
  margin-bottom: 40px;
  text-align: center;
}

.auth-logo img {
  height: 50px;
  width: auto;
}

.auth-header {
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
}

.auth-title {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.auth-subtitle {
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.5;
}

.auth-link {
  color: var(--accent-color);
  text-decoration: none;
  transition: all 0.2s ease;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

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

.auth-form {
  width: 100%;
  background-color: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 40px;
  backdrop-filter: blur(10px);
}

.form-group {
  margin-bottom: 24px;
}

.btn-auth {
  width: 100%;
  padding: 14px 24px;
  background-color: var(--accent-color);
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn-auth:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 234, 212, 0.3);
}

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

.btn-auth-secondary {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-auth-secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider span {
  padding: 0 16px;
}

.auth-footer {
  margin-top: 48px;
  text-align: center;
  width: 100%;
}

.auth-footer-text {
  color: #6b7280;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}

.back-button:hover {
  color: white;
}

.back-button svg {
  width: 16px;
  height: 16px;
}

::selection {
  background-color: var(--accent-color);
  color: #000000;
}

/* Auth Page Specific Styles */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #d1d5db;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-social:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Group Header Component Styles */
.icon-btn {
  padding: 0.375rem;
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
}

.icon-btn:hover {
  background-color: #222;
  color: #9ca3af;
}

/* Responsive Styles */
@media (max-width: 768px) {

  .col-2,
  .col-3 {
    flex: 0 0 100%;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .nav-menu {
    flex-direction: column;
    gap: 15px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .auth-title {
    font-size: 2rem;
  }

  .auth-form {
    padding: 30px 24px;
  }
}

@media (min-width: 640px) {
  .auth-form {
    grid-template-columns: 2fr 1fr;
    gap: 40px;
  }
}

@media (min-width: 768px) {
  .auth-form {
    grid-template-columns: 1.5fr 1fr;
  }

  .auth-content {
    max-width: 900px;
  }
}

/* ============================================
   OTP INPUT STYLES
   ============================================ */

.otp-inputs-wrapper {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.otp-input {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  outline: none;
}

.otp-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.1);
  transform: scale(1.05);
}

.otp-input:not(:placeholder-shown) {
  border-color: var(--accent-color);
}

@media (max-width: 480px) {
  .otp-input {
    width: 2.5rem;
    height: 3rem;
    font-size: 1.25rem;
  }

  .otp-inputs-wrapper {
    gap: 0.5rem;
  }
}

/* ============================================
   MONITOR GRID & NOTIFICATIONS
   ============================================ */

/* Monitor Table Grid */
.monitor-grid-header {
  display: grid;
  grid-template-columns: 80px 1fr 300px 100px 100px 160px;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text-muted);
}

.monitor-grid-row {
  display: grid;
  grid-template-columns: 80px 1fr 300px 100px 100px 160px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.monitor-grid-row:hover {
  background-color: var(--bg-tertiary);
}

/* Status Icons */
.status-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.status-icon-wrapper.up {
  background-color: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.status-icon-wrapper.down {
  background-color: #ef4444;
  color: white;
}

.status-icon-wrapper.paused {
  background-color: #d97706;
  color: white;
}

.status-icon-wrapper.warning {
  background-color: #f59e0b;
  color: white;
}

/* Uptime Bars */
.uptime-bars-container {
  display: flex;
  gap: 2px;
  height: 24px;
  align-items: center;
  padding: 0 1rem;
}

.uptime-bar-pill {
  width: 4px;
  height: 100%;
  border-radius: 9999px;
  background-color: #374151;
  /* Default/Gray */
}

.uptime-bar-pill.green {
  background-color: #10b981;
}

.uptime-bar-pill.orange {
  background-color: #f59e0b;
}

.uptime-bar-pill.gray {
  background-color: #374151;
}

/* Action Buttons (Icons) */
.action-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: color 0.15s;
  padding: 0;
}

.action-icon-btn:hover {
  color: white;
}

.action-icon-btn.delete:hover {
  color: #ef4444;
}

/* Frequency Badge */
.frequency-badge {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border-color);
}

/* Modals */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-backdrop.flex {
  display: flex;
}

.modal-content-styled {
  width: 100%;
  background-color: #111;
  border: 1px solid #222;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: zoomIn 0.2s;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  color: white;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}

.modal-title-lg {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.modal-subtitle {
  color: #6b7280;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.modal-close-btn {
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.modal-close-btn:hover {
  color: white;
}

.modal-body-scroll {
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.modal-body-form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.modal-footer {
  padding: 1.5rem;
  background-color: #0a0a0a;
  border-top: 1px solid #222;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal-save-btn {
  background-color: var(--accent-color);
  color: black;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.625rem 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
}

.modal-save-btn:hover {
  background-color: #4dd3be;
}

.modal-footer-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
}

.modal-btn-cancel {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #9ca3af;
  background-color: #222;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.modal-btn-cancel:hover {
  color: white;
}

.modal-btn-submit {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: black;
  background-color: var(--accent-color);
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.modal-btn-submit:hover {
  background-color: #4dd3be;
}

.text-label-small {
  display: block;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.add-link-btn {
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Recipient Item Style */
.recipient-item {
  background-color: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Integration Item Style */
.integration-item {
  background-color: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* Utilities needed for Modals */
.text-red-500 {
  color: #ef4444;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.input-group-card {
  background-color: #0d0d0d;
  border: 1px solid #222;
  border-radius: 0.75rem;
  /* rounded-xl */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.slack-icon-bg {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #3F0E40;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

/* Modal Sizing utilities */
.max-w-2xl {
  max-width: 42rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

/* ============================================
   DOMAIN HEALTH UI
   ============================================ */

.domain-health-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background-color: #111;
  border: 1px solid #1a1a1a;
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.domain-search-input-wrapper {
  flex: 1;
  position: relative;
}

.domain-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #4b5563;
  width: 1rem;
  height: 1rem;
}

.domain-search-input {
  width: 100%;
  background-color: #1a1a1a;
  border: 1px solid #333;
  color: #d1d5db;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  transition: all 0.2s;
}

.domain-search-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.domain-select-wrapper {
  position: relative;
}

.domain-select {
  background-color: #1a1a1a;
  border: 1px solid #333;
  color: #d1d5db;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  appearance: none;
  cursor: pointer;
}

.domain-select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.domain-select-arrow {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
  width: 0.875rem;
  height: 0.875rem;
}

.domain-group-card {
  background-color: #111;
  border: 1px solid #1a1a1a;
  border-radius: 0.75rem;
  /* overflow: hidden; Removed to allow dropdowns */
  margin-bottom: 2rem;
}

.domain-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--card-bg);
}

.domain-table-container {
  overflow-x: auto;
}

.domain-grid-table {
  min-width: 1000px;
}

.domain-grid-header {
  display: grid;
  grid-template-columns: 40px 1fr 80px 80px 80px 80px 100px 120px 100px 100px;
  padding: 0.75rem 1.5rem;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid #1a1a1a;
  align-items: center;
}

.domain-grid-row {
  display: grid;
  grid-template-columns: 40px 1fr 80px 80px 80px 80px 100px 120px 100px 100px;
  padding: 1rem 1.5rem;
  align-items: center;
  border-bottom: 1px solid #1a1a1a;
  transition: background-color 0.2s;
  cursor: pointer;
}

.domain-grid-row:last-child {
  border-bottom: none;
}

.domain-grid-row:hover,
.domain-grid-row.expanded {
  background-color: #111;
}

.domain-expand-icon {
  color: #4b5563;
  transition: transform 0.2s;
}

.domain-grid-row.expanded .domain-expand-icon {
  transform: rotate(90deg);
}

.domain-stats-container {
  padding: 1.5rem 2.5rem;
  background-color: #111;
  border-bottom: 1px solid #1a1a1a;
}

.domain-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.domain-stat-card {
  background-color: #0a0a0a;
  border: 1px solid #222;
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}

.domain-stat-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.domain-stat-value {
  color: white;
  font-size: 1.125rem;
  font-weight: 700;
}

.notification-badge-wrapper {
  position: relative;
  display: inline-block;
}

.notification-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.875rem;
  height: 0.875rem;
  background-color: #ef4444;
  border: 2px solid #111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: white;
  font-weight: 700;
}

/* Status Colors */

.text-emerald-500 {
  color: #10b981;
}

.text-amber-500 {
  color: #f59e0b;
}

.text-red-500 {
  color: #ef4444;
}

.text-red-400 {
  color: #f87171;
}

.bg-emerald-500\/10 {
  background-color: rgba(16, 185, 129, 0.1);
}

.bg-red-500\/10 {
  background-color: rgba(239, 68, 68, 0.1);
}

/* Custom Menu Dropdown */
.custom-menu-dropdown {
  position: absolute;
  width: 10rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 50;
  padding: 0.25rem 0;
  overflow: hidden;
}

.dropdown-item {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #d1d5db;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-item:hover {
  background-color: #222;
}

.dropdown-item.danger {
  color: #f87171;
}

.dropdown-item.danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

/* ============================================
   AUTH FORM - TWO COLUMN LAYOUT
   ============================================ */

/* Two-column form layout for registration */
.auth-form.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .auth-form.two-column {
    grid-template-columns: 1.5fr 1fr;
    max-width: none;
  }

  .auth-content:has(.auth-form.two-column) {
    max-width: 900px;
  }
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.social-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: flex-start;
  padding-top: 0.5rem;
}

/* Password Input Wrapper */
.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: #9ca3af;
}

.password-toggle .icon-eye {
  width: 1.25rem;
  height: 1.25rem;
}

/* Social Icon Styles */
.social-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background-color: #111;
  border: 1px solid #333;
  border-radius: 0.75rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-social:hover {
  background-color: #1a1a1a;
  border-color: #444;
}

/* Disabled Button State */
.btn-auth:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* OTP Form Styles */
.otp-form {
  max-width: 28rem;
  margin: 0 auto;
}

.otp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.otp-inputs-wrapper {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.otp-input {
  width: 3.5rem;
  height: 4rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid #333;
  background-color: #1c1c1c;
  color: white;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  outline: none;
}

.otp-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.1);
}

.otp-input:not(:placeholder-shown) {
  border-color: var(--accent-color);
}

/* Email Quick Links */
.email-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.email-link {
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.email-link:hover {
  color: white;
}

/* Link Button (text that looks like a link but is a button) */
.link-button {
  background: none;
  border: none;
  color: var(--accent-color);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  transition: text-decoration 0.2s ease;
}

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

/* Helper Classes */
.center-text {
  text-align: center;
}

.accent-text {
  color: var(--accent-color);
}

/* Auth Footer Links */
.auth-footer-links {
  margin-top: 1.5rem;
  text-align: center;
}

/* Responsive OTP inputs */
@media (max-width: 480px) {
  .otp-input {
    width: 2.75rem;
    height: 3.25rem;
    font-size: 1.25rem;
  }

  .otp-inputs-wrapper {
    gap: 0.5rem;
  }
}

/* Forgot Password Link */
.forgot-password-link {
  margin-top: 1.5rem;
  text-align: center;
}

.forgot-password-link .auth-link {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Auth Footer Inline Text */
.auth-footer-text-inline {
  color: #9ca3af;
  font-size: 0.875rem;
}

.auth-footer-text-inline .auth-link {
  margin-left: 0.25rem;
}

/* ============================================
   ACCOUNT DASHBOARD MODAL
   ============================================ */

#account-dashboard-modal {
  z-index: 100;
}

.account-modal-container {
  width: 100%;
  max-width: 56rem;
  background-color: #111;
  border: 1px solid #222;
  border-radius: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: zoomIn 0.2s;
}

/* Modal Header */
.account-modal-header {
  padding: 2rem;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-modal-header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.account-modal-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* View Mode Toggle */
.view-mode-toggle {
  display: flex;
  background-color: #0a0a0a;
  padding: 0.25rem;
  border-radius: 0.75rem;
  border: 1px solid #222;
  gap: 5px;
}

.view-mode-btn {
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: #6b7280;
}

.view-mode-btn:hover {
  color: white;
}

.view-mode-btn.active {
  background-color: var(--accent-color);
  color: black;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
}

/* Modal Body Layout */
.account-modal-body {
  display: flex;
  min-height: 550px;
}

/* Sidebar */
.account-sidebar {
  width: 16rem;
  border-right: 1px solid #222;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.account-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.account-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: #6b7280;
  text-align: left;
}

.account-nav-item:hover {
  background-color: #1a1a1a;
  color: white;
}

.account-nav-item.active {
  background-color: var(--accent-color);
  color: black;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
}

.account-nav-item svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Logout Button */
.account-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: #ef4444;
  border-top: 1px solid #222;
  margin-top: 2rem;
  padding-top: 2rem;
}

.account-logout-btn:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.account-logout-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Main Content */
.account-content {
  flex: 1;
  padding: 2.5rem;
  background-color: #0a0a0a;
  overflow-y: auto;
  max-height: 550px;
}

/* Tab Content */
.account-tab-content {
  display: none;
  animation: fadeSlideIn 0.3s ease;
}

.account-tab-content.active {
  display: block;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.account-section-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 2rem 0;
}

/* Profile Card */
.account-profile-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.profile-avatar-large {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: black;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-info-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.profile-email-row {
  grid-column: span 2;
}

.account-field-label {
  display: block;
  color: #6b7280;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.account-field-value {
  color: white;
  font-weight: 500;
  margin: 0;
}

/* Security Tab Styles */
.account-section {
  margin-bottom: 1.5rem;
}

.section-header-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.section-header-with-icon svg {
  color: #6b7280;
}

.section-subtitle {
  color: #d1d5db;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}

.social-logins-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-login-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1a1a1a;
  border: 1px solid #222;
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.social-login-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-icon-box {
  width: 2rem;
  height: 2rem;
  background-color: black;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: white;
}

.social-name {
  color: #d1d5db;
  font-size: 0.875rem;
}

.social-status-btn {
  padding: 0.375rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  background-color: #222;
  color: #9ca3af;
}

.social-status-btn:hover {
  color: white;
}

.social-status-btn.connected {
  background-color: rgba(94, 234, 212, 0.1);
  color: var(--accent-color);
}

/* Verification Card */
.verification-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  padding: 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verification-title {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}

.verification-desc {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
}

/* Theme Toggle */
.theme-toggle-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  padding: 1.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-toggle-title {
  color: white;
  font-weight: 700;
  margin: 0;
}

.theme-toggle-desc {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
}

.theme-switch {
  width: 3rem;
  height: 1.5rem;
  border-radius: 999px;
  background-color: #333;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
}

.theme-switch.active {
  background-color: var(--accent-color);
}

.theme-switch-knob {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: white;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  transition: left 0.2s;
}

.theme-switch.active .theme-switch-knob {
  left: 1.75rem;
}

/* Organization Profile */
.org-profile-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.org-field {
  display: flex;
  flex-direction: column;
}

.org-company-name {
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0;
}

.org-links-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #222;
}

.org-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.org-link-label {
  color: #6b7280;
}

.org-link {
  color: #60a5fa;
  text-decoration: none;
}

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

.org-support-row {
  padding-top: 1rem;
  border-top: 1px solid #222;
}

/* Subscription Tab */
.subscription-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.subscription-section {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #222;
}

.subscription-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.subscription-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}

.subscription-label {
  color: #6b7280;
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.subscription-value {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}

.plan-status-badge {
  background-color: #222;
  color: white;
  font-size: 0.625rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 700;
}

.plan-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.plan-info-box {
  background-color: #0a0a0a;
  border: 1px solid #222;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  color: #d1d5db;
  font-size: 0.75rem;
}

.plan-change-section {
  margin-top: 1rem;
}

.plan-select {
  font-size: 0.75rem;
}

.plan-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.plan-save-btn {
  background-color: black;
  border: 1px solid #222;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.plan-save-btn:hover {
  background-color: #1a1a1a;
}

.promo-input-group {
  display: flex;
  gap: 0.5rem;
}

.promo-input {
  flex: 1;
}

.promo-apply-btn {
  background-color: black;
  border: 1px solid #222;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.add-payment-btn {
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  border: 1px solid #222;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s;
}

.add-payment-btn:hover {
  background-color: #111;
}

.payment-card-item {
  background-color: #0a0a0a;
  border: 1px solid #222;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-card-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.payment-card-icon {
  width: 2.5rem;
  height: 1.5rem;
  background-color: #222;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-card-icon svg {
  width: 2rem;
  height: 1rem;
  color: #6b7280;
}

.payment-card-name {
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0;
}

.payment-card-expiry {
  color: #4b5563;
  font-size: 0.625rem;
  margin: 0;
}

.payment-default-badge {
  font-size: 0.625rem;
  color: #6b7280;
  font-weight: 700;
  background-color: #1a1a1a;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

/* Members Tab */
.members-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.members-invite-section {
  padding-bottom: 2rem;
}

.invite-form {
  display: flex;
  gap: 0.5rem;
}

.invite-email-input {
  flex: 1;
}

.invite-role-select {
  width: 8rem;
}

.invite-role-select .form-select-dark {
  font-size: 0.75rem;
  padding: 0.625rem 2rem 0.625rem 0.75rem;
}

.invite-send-btn {
  background-color: black;
  border: 1px solid #222;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.current-members-section {
  padding-top: 0;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.member-item {
  background-color: #0a0a0a;
  border: 1px solid #222;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.member-item:hover .member-delete-btn {
  opacity: 1;
}

.member-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.member-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.member-avatar.emerald {
  background-color: #10b981;
}

.member-avatar.indigo {
  background-color: #6366f1;
}

.member-avatar.purple {
  background-color: #a855f7;
}

.member-avatar.amber {
  background-color: #f59e0b;
}

.member-name {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}

.member-email {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
}

.member-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.member-role-badge {
  background-color: #1a1a1a;
  color: #9ca3af;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #333;
}

.member-delete-btn {
  color: #4b5563;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
}

.member-delete-btn:hover {
  color: #ef4444;
}

.member-delete-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .account-modal-container {
    border-radius: 1.5rem;
  }

  .account-modal-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .account-modal-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .account-modal-body {
    flex-direction: column;
    min-height: auto;
  }

  .account-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #222;
    padding: 1rem;
  }

  .account-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-group {
    flex-direction: row;
  }

  .account-nav-item {
    white-space: nowrap;
    padding: 0.5rem 1rem;
  }

  .account-logout-btn {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .account-content {
    max-height: none;
    padding: 1.5rem;
  }

  .account-profile-card {
    flex-direction: column;
    text-align: center;
  }

  .profile-info-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .profile-email-row {
    grid-column: span 1;
  }

  .subscription-overview-grid,
  .plan-select-grid {
    grid-template-columns: 1fr;
  }

  .invite-form {
    flex-direction: column;
  }

  .invite-role-select {
    width: 100%;
  }
}

/* ============================================
   AGENCY AREA MODAL
   ============================================ */

#agency-area-modal {
  z-index: 100;
}

.agency-modal-container {
  width: 100%;
  max-width: 64rem;
  background-color: #111;
  border: 1px solid #222;
  border-radius: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: zoomIn 0.2s;
}

/* Modal Header */
.agency-modal-header {
  padding: 2rem;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agency-modal-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.agency-icon-box {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: rgba(94, 234, 212, 0.1);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agency-icon-box svg {
  width: 1.25rem;
  height: 1.25rem;
}

.agency-modal-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  margin-right: 1.5rem;
}

/* Modal Body Layout */
.agency-modal-body {
  display: flex;
  min-height: 600px;
}

/* Sidebar */
.agency-sidebar {
  width: 16rem;
  border-right: 1px solid #222;
  padding: 1.5rem;
  flex-shrink: 0;
}

.agency-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agency-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agency-nav-item {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: #6b7280;
}

.agency-nav-item:hover {
  background-color: #1a1a1a;
  color: white;
}

.agency-nav-item.active {
  background-color: var(--accent-color);
  color: black;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
}

/* Main Content */
.agency-content {
  flex: 1;
  padding: 2.5rem;
  background-color: #0a0a0a;
  overflow-y: auto;
  max-height: 600px;
}

/* Tab Content */
.agency-tab-content {
  display: none;
  animation: fadeSlideIn 0.3s ease;
}

.agency-tab-content.active {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Info Card */
.agency-info-card {
  background-color: #1a1a1a;
  border: 1px solid #222;
  border-radius: 1rem;
  padding: 1.5rem;
}

.agency-section-title {
  color: #d1d5db;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
}

.agency-info-list {
  display: flex;
  flex-direction: column;
}

.agency-info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #222;
}

.agency-info-item.no-border {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.agency-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.agency-info-content.full-width {
  width: 100%;
}

.agency-info-label {
  color: #6b7280;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.agency-info-value {
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
}

.agency-info-value.agency-link {
  color: var(--accent-color);
  cursor: pointer;
}

.agency-info-value.agency-link:hover {
  text-decoration: underline;
}

.agency-edit-btn {
  color: var(--accent-color);
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s;
}

.agency-edit-btn:hover {
  background-color: #222;
}

.agency-edit-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Invite Form */
.agency-invite-form {
  display: flex;
  gap: 0.5rem;
}

.agency-invite-input {
  flex: 1;
}

.agency-role-select {
  width: 8rem;
}

.agency-role-select .form-select-dark {
  font-size: 0.75rem;
  padding: 0.625rem 2rem 0.625rem 0.75rem;
}

.agency-invite-btn {
  background-color: var(--accent-color);
  color: black;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.agency-invite-btn:hover {
  background-color: #4dd3be;
}

/* Users List */
.agency-users-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agency-user-item {
  background-color: #0a0a0a;
  border: 1px solid #222;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agency-user-item:hover .agency-delete-btn {
  opacity: 1;
}

.agency-user-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.agency-user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.agency-user-avatar.emerald {
  background-color: #10b981;
}

.agency-user-avatar.indigo {
  background-color: #6366f1;
}

.agency-user-avatar.amber {
  background-color: #f59e0b;
}

.agency-user-name {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
}

.agency-user-email {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
}

.agency-user-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.agency-role-badge {
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
}

.agency-role-badge.admin {
  background-color: rgba(94, 234, 212, 0.1);
  color: var(--accent-color);
}

.agency-role-badge.member {
  background-color: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.agency-role-badge.editor {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.agency-delete-btn {
  color: #ef4444;
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 0.5rem;
  opacity: 0;
  transition: all 0.15s;
}

.agency-delete-btn:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

/* App Switch Form */
.agency-switch-app-form {
  display: flex;
  gap: 0.5rem;
}

.agency-app-select {
  flex: 1;
}

.agency-apply-btn {
  background-color: var(--accent-color);
  color: black;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.agency-apply-btn:hover {
  background-color: #4dd3be;
}

/* White Label Form */
.white-label-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.code-inputs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.code-input {
  height: 3rem;
  text-align: center;
}

.subdomain-hint {
  color: #9ca3af;
  font-size: 0.75rem;
  margin: 0;
  padding-left: 0.5rem;
}

.white-label-apply-btn {
  width: 100%;
  background-color: #222;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.875rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.white-label-apply-btn:hover {
  color: white;
}

.white-label-support {
  text-align: center;
  font-size: 0.625rem;
  color: #6b7280;
  margin: 0;
}

.accent-text {
  color: var(--accent-color);
}

/* Branding Tab */
.branding-title {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.branding-desc {
  color: #6b7280;
  font-size: 0.625rem;
  margin: 0 0 1rem 0;
}

.upload-zone {
  border: 2px dashed #222;
  border-radius: 0.75rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d0d0d;
}

.upload-btn {
  background-color: var(--accent-color);
  color: black;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.upload-btn:hover {
  background-color: #4dd3be;
}

.branding-settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.branding-setting-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.branding-value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0d0d0d;
  padding: 1rem;
  border-radius: 0.75rem;
}

.branding-current-value {
  color: #9ca3af;
  font-size: 0.875rem;
}

.terms-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.terms-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.terms-value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terms-link {
  color: var(--accent-color);
  font-size: 0.75rem;
  cursor: pointer;
  margin: 0;
}

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

/* Subscription Tab */
.stripe-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stripe-save-btn {
  width: fit-content;
  background-color: var(--accent-color);
  color: black;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.625rem 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

/* Client Search */
.client-search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.client-search-input-wrapper {
  flex: 1;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #4b5563;
}

.client-search-input {
  padding-left: 2.5rem;
  font-size: 0.75rem;
}

.client-status-select {
  width: 8rem;
}

.client-status-select .form-select-dark {
  font-size: 0.75rem;
}

/* Client Cards */
.client-cards-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.client-card {
  background-color: #0d0d0d;
  border: 1px solid #222;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.client-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.25rem;
}

.client-name-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.client-name {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
}

.client-status-badge {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  color: black;
}

.client-status-badge.agency {
  background-color: #f59e0b;
}

.client-status-badge.active {
  background-color: #10b981;
}

.client-status-badge.inactive {
  background-color: #ef4444;
}

.client-status-badge.trial {
  background-color: #f59e0b;
}

.client-edit-btn {
  background-color: var(--accent-color);
  color: black;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.375rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.client-edit-btn:hover {
  background-color: #4dd3be;
}

.client-account {
  color: #4b5563;
  font-size: 0.625rem;
  margin: 0 0 1.5rem 0;
}

.client-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.client-detail-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.client-detail-block.text-right {
  text-align: right;
}

.client-detail-label {
  color: #4b5563;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.client-detail-value {
  color: #d1d5db;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0;
}

.client-detail-sub {
  color: #4b5563;
  font-size: 0.5rem;
  margin: 0;
}

.client-price {
  color: white;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}

.stripe-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stripe-toggle-label {
  color: #6b7280;
  font-size: 0.5rem;
  font-weight: 700;
}

.stripe-toggle-switch {
  width: 2rem;
  height: 1rem;
  background-color: #222;
  border-radius: 999px;
  position: relative;
}

.stripe-toggle-knob {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #6b7280;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
}

/* Client Stats Summary */
.client-stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid #222;
}

.client-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.client-stat-label {
  color: #4b5563;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.client-stat-value {
  color: white;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
}

/* ============================================
   EDIT SUBSCRIPTION MODAL
   ============================================ */

#edit-subscription-modal {
  z-index: 110;
}

.edit-subscription-container {
  width: 100%;
  max-width: 56rem;
  background-color: #161616;
  border: 1px solid #222;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: zoomIn 0.2s;
}

.edit-subscription-header {
  padding: 2rem;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.edit-subscription-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.edit-subscription-subtitle {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.edit-subscription-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Pricing Plans Section */
.pricing-plans-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pricing-plans-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-plans-title {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.info-icon {
  color: #60a5fa;
}

.pricing-table-wrapper {
  background-color: #0a0a0a;
  border: 1px solid #222;
  border-radius: 0.75rem;
  overflow: hidden;
}

.pricing-table {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.pricing-table thead tr {
  border-bottom: 1px solid #222;
}

.pricing-table th {
  padding: 1rem 2rem;
  color: #6b7280;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pricing-table th.text-right {
  text-align: right;
}

.pricing-table tbody tr {
  border-bottom: 1px solid #222;
}

.pricing-table tbody tr:last-child {
  border-bottom: none;
}

.pricing-table tbody tr:hover {
  background-color: #111;
}

.pricing-table td {
  padding: 1rem 2rem;
}

.plan-name {
  color: white;
  font-weight: 700;
  margin: 0;
}

.plan-sub {
  color: #6b7280;
  font-size: 0.625rem;
  margin: 0;
}

.plan-staff {
  color: #9ca3af;
  font-weight: 500;
}

.plan-price-cell {
  text-align: right;
}

.price-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.currency-symbol {
  color: #6b7280;
}

.price-input {
  width: 6rem;
  background-color: #1a1a1a;
  border: 1px solid #222;
  color: white;
  text-align: right;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.price-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.pricing-save-row {
  display: flex;
  justify-content: flex-end;
}

.pricing-save-btn {
  background-color: #1a1a1a;
  border: 1px solid #222;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.5rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.pricing-save-btn:hover {
  background-color: #222;
}

/* Coupon Section */
.coupon-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.coupon-title {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.coupon-form {
  display: flex;
  gap: 0.5rem;
}

.coupon-input {
  flex: 1;
}

.coupon-submit-btn {
  background-color: #1a1a1a;
  border: 1px solid #222;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

/* Edit Subscription Footer */
.edit-subscription-footer {
  padding: 2rem;
  background-color: #0a0a0a;
  border-top: 1px solid #222;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.edit-cancel-btn {
  padding: 0.75rem 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #9ca3af;
  background-color: #1a1a1a;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.edit-cancel-btn:hover {
  color: white;
}

.edit-save-btn {
  padding: 0.75rem 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: black;
  background-color: var(--accent-color);
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(94, 234, 212, 0.2);
  transition: background-color 0.15s;
}

.edit-save-btn:hover {
  background-color: #4dd3be;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .agency-modal-container {
    border-radius: 1.5rem;
  }

  .agency-modal-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .agency-modal-header-left {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .agency-modal-body {
    flex-direction: column;
    min-height: auto;
  }

  .agency-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #222;
    padding: 1rem;
  }

  .agency-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .agency-nav-group {
    flex-direction: row;
  }

  .agency-nav-item {
    white-space: nowrap;
    padding: 0.5rem 1rem;
  }

  .agency-content {
    max-height: none;
    padding: 1.5rem;
  }

  .agency-invite-form {
    flex-direction: column;
  }

  .agency-role-select {
    width: 100%;
  }

  .agency-switch-app-form {
    flex-direction: column;
  }

  .code-inputs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-details {
    flex-direction: column;
    gap: 1rem;
  }

  .client-detail-block.text-right {
    text-align: left;
  }

  .client-stats-summary {
    grid-template-columns: 1fr;
  }

  .edit-subscription-container {
    border-radius: 1rem;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 0.75rem 1rem;
  }

  .coupon-form {
    flex-direction: column;
  }
}

/* ============================================
   LIGHT MODE OVERRIDES
   Applied when data-theme="light" is set on html element
   ============================================ */

/* Top Header Bar - Light Mode */
[data-theme="light"] .top-header,
.light-mode .top-header {
  background-color: var(--bg-topbar);
  border-bottom-color: var(--border-color);
}

/* Menu Toggle - Light Mode */
[data-theme="light"] .menu-toggle,
.light-mode .menu-toggle {
  color: var(--text-secondary);
}

[data-theme="light"] .menu-toggle:hover,
.light-mode .menu-toggle:hover {
  background-color: var(--bg-tertiary);
}

/* Logo - Light Mode */
[data-theme="light"] .logo-box,
.light-mode .logo-box {
  background-color: #e2e8f0;
  border-color: var(--accent-color);
}

[data-theme="light"] .logo-text,
.light-mode .logo-text {
  color: var(--text-primary);
}

/* Company Badge - Light Mode */
[data-theme="light"] .company-badge,
.light-mode .company-badge {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

/* Header Actions - Light Mode */
[data-theme="light"] .header-actions,
.light-mode .header-actions {
  color: var(--text-secondary);
  border-left-color: var(--border-color);
}

[data-theme="light"] .icon-button,
.light-mode .icon-button {
  color: var(--text-secondary);
}

[data-theme="light"] .icon-button:hover,
.light-mode .icon-button:hover {
  color: var(--accent-color);
  background-color: var(--bg-tertiary);
}

/* Sidebar - Light Mode */
[data-theme="light"] .sidebar,
.light-mode .sidebar {
  background-color: var(--bg-sidebar);
  border-right-color: var(--border-color);
}

[data-theme="light"] .nav-item,
.light-mode .nav-item {
  color: var(--text-secondary);
}

[data-theme="light"] .nav-item:hover,
.light-mode .nav-item:hover {
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .nav-item.active,
.light-mode .nav-item.active {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

/* Main Content - Light Mode */
[data-theme="light"] .main-content,
.light-mode .main-content {
  background-color: var(--bg-primary);
}

/* Cards - Light Mode */
[data-theme="light"] .card-dark,
.light-mode .card-dark,
[data-theme="light"] .form-card,
.light-mode .form-card,
[data-theme="light"] .group-card,
.light-mode .group-card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* Page Titles - Light Mode */
[data-theme="light"] .portal-page-title,
.light-mode .portal-page-title {
  color: var(--text-primary);
}

/* Table Styles - Light Mode */
[data-theme="light"] .table-header,
.light-mode .table-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="light"] .table-row,
.light-mode .table-row {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .table-row:hover,
.light-mode .table-row:hover {
  background-color: var(--bg-tertiary);
}

/* Filter Bar - Light Mode */
[data-theme="light"] .filter-bar,
.light-mode .filter-bar {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .filter-tabs,
.light-mode .filter-tabs {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .filter-btn,
.light-mode .filter-btn {
  color: var(--text-secondary);
}

[data-theme="light"] .filter-btn.active,
.light-mode .filter-btn.active {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

[data-theme="light"] .filter-btn:not(.active):hover,
.light-mode .filter-btn:not(.active):hover {
  color: var(--text-primary);
}

[data-theme="light"] .filter-dropdown select,
.light-mode .filter-dropdown select {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .filter-search input,
.light-mode .filter-search input {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Group Header - Light Mode */
[data-theme="light"] .group-header,
.light-mode .group-header {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .group-title,
.light-mode .group-title {
  color: var(--text-primary);
}

/* Form Elements - Light Mode */
[data-theme="light"] .form-input-dark,
.light-mode .form-input-dark {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .form-input-dark::placeholder,
.light-mode .form-input-dark::placeholder {
  color: var(--text-muted);
}

[data-theme="light"] .form-select-dark,
.light-mode .form-select-dark {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .form-label-upper,
.light-mode .form-label-upper {
  color: var(--text-secondary);
}

/* Radio and Checkbox Cards - Light Mode */
[data-theme="light"] .radio-card-content,
.light-mode .radio-card-content {
  border-color: var(--border-color);
  background-color: var(--input-bg);
}

[data-theme="light"] .radio-card:hover .radio-card-content,
.light-mode .radio-card:hover .radio-card-content {
  border-color: var(--text-muted);
}

[data-theme="light"] .radio-card-title,
.light-mode .radio-card-title {
  color: var(--text-primary);
}

[data-theme="light"] .checkbox-card,
.light-mode .checkbox-card {
  border-color: var(--border-color);
  background-color: var(--input-bg);
}

[data-theme="light"] .checkbox-card:hover,
.light-mode .checkbox-card:hover {
  border-color: var(--text-muted);
}

[data-theme="light"] .checkbox-title,
.light-mode .checkbox-title {
  color: var(--text-primary);
}

[data-theme="light"] .checkbox-inline,
.light-mode .checkbox-inline {
  color: var(--text-primary);
}

/* Buttons - Light Mode */
[data-theme="light"] .btn-secondary,
.light-mode .btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="light"] .btn-secondary:hover,
.light-mode .btn-secondary:hover {
  background-color: var(--border-color);
}

[data-theme="light"] .btn-icon:hover,
.light-mode .btn-icon:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Domain Link - Light Mode */
[data-theme="light"] .domain-link,
.light-mode .domain-link {
  color: var(--text-primary);
}

[data-theme="light"] .domain-link:hover,
.light-mode .domain-link:hover {
  color: var(--accent-color);
}

/* Empty State - Light Mode */
[data-theme="light"] .empty-state,
.light-mode .empty-state {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .empty-title,
.light-mode .empty-title {
  color: var(--text-primary);
}

/* Modals - Light Mode */
[data-theme="light"] .modal-overlay,
.light-mode .modal-overlay {
  background-color: var(--modal-overlay);
}

[data-theme="light"] .modal-container,
.light-mode .modal-container {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .modal-header,
.light-mode .modal-header {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .modal-title,
.light-mode .modal-title {
  color: var(--text-primary);
}

[data-theme="light"] .modal-close,
.light-mode .modal-close {
  color: var(--text-muted);
}

[data-theme="light"] .modal-close:hover,
.light-mode .modal-close:hover {
  color: var(--text-primary);
}

[data-theme="light"] .modal-footer,
.light-mode .modal-footer {
  border-top-color: var(--border-color);
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .modal-message,
.light-mode .modal-message {
  color: var(--text-primary);
}

/* Details Row - Light Mode */
[data-theme="light"] .details-row,
.light-mode .details-row {
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .detail-value,
.light-mode .detail-value {
  color: var(--text-primary);
}

/* Back Link - Light Mode */
[data-theme="light"] .back-link:hover,
.light-mode .back-link:hover {
  color: var(--text-primary);
}

/* Form Actions - Light Mode */
[data-theme="light"] .form-actions,
.light-mode .form-actions {
  border-top-color: var(--border-color);
}

/* Account Dashboard Modal - Light Mode */
[data-theme="light"] .modal-backdrop,
.light-mode .modal-backdrop {
  background-color: var(--modal-overlay);
}

[data-theme="light"] .account-modal-container,
.light-mode .account-modal-container {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .account-modal-header,
.light-mode .account-modal-header {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .account-modal-title,
.light-mode .account-modal-title {
  color: var(--text-primary);
}

[data-theme="light"] .view-mode-btn,
.light-mode .view-mode-btn {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

[data-theme="light"] .view-mode-btn.active,
.light-mode .view-mode-btn.active {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

[data-theme="light"] .account-sidebar,
.light-mode .account-sidebar {
  background-color: var(--bg-tertiary);
  border-right-color: var(--border-color);
}

[data-theme="light"] .account-nav-item,
.light-mode .account-nav-item {
  color: var(--text-secondary);
}

[data-theme="light"] .account-nav-item.active,
.light-mode .account-nav-item.active,
[data-theme="light"] .account-nav-item:hover,
.light-mode .account-nav-item:hover {
  color: var(--text-primary);
  background-color: var(--card-bg);
}

[data-theme="light"] .account-content,
.light-mode .account-content {
  background-color: var(--card-bg);
}

[data-theme="light"] .account-section-title,
.light-mode .account-section-title {
  color: var(--text-primary);
}

[data-theme="light"] .account-profile-card,
.light-mode .account-profile-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .account-field-label,
.light-mode .account-field-label {
  color: var(--text-secondary);
}

[data-theme="light"] .account-field-value,
.light-mode .account-field-value {
  color: var(--text-primary);
}

/* Social Login Items - Light Mode */
[data-theme="light"] .social-login-item,
.light-mode .social-login-item {
  border-color: var(--border-color);
}

[data-theme="light"] .social-name,
.light-mode .social-name {
  color: var(--text-primary);
}

/* Theme Toggle Card - Light Mode */
[data-theme="light"] .theme-toggle-card,
.light-mode .theme-toggle-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .theme-toggle-title,
.light-mode .theme-toggle-title {
  color: var(--text-primary);
}

/* Organization Profile - Light Mode */
[data-theme="light"] .org-profile-card,
.light-mode .org-profile-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .org-company-name,
.light-mode .org-company-name {
  color: var(--text-primary);
}

[data-theme="light"] .org-link-row,
.light-mode .org-link-row {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .org-link-label,
.light-mode .org-link-label {
  color: var(--text-secondary);
}

[data-theme="light"] .org-link,
.light-mode .org-link {
  color: var(--accent-color);
}

/* Subscription Card - Light Mode */
[data-theme="light"] .subscription-card,
.light-mode .subscription-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .subscription-section,
.light-mode .subscription-section {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .subscription-label,
.light-mode .subscription-label {
  color: var(--text-secondary);
}

[data-theme="light"] .subscription-value,
.light-mode .subscription-value {
  color: var(--text-primary);
}

[data-theme="light"] .plan-info-box,
.light-mode .plan-info-box {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Members Card - Light Mode */
[data-theme="light"] .members-card,
.light-mode .members-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .member-item,
.light-mode .member-item {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .member-name,
.light-mode .member-name {
  color: var(--text-primary);
}

[data-theme="light"] .member-email,
.light-mode .member-email {
  color: var(--text-secondary);
}

/* Verification Card - Light Mode */
[data-theme="light"] .verification-card,
.light-mode .verification-card {
  background-color: var(--input-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .verification-title,
.light-mode .verification-title {
  color: var(--text-primary);
}

/* Agency Modal - Light Mode */
[data-theme="light"] .agency-modal-container,
.light-mode .agency-modal-container {
  background-color: var(--card-bg);
}

[data-theme="light"] .agency-modal-header,
.light-mode .agency-modal-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .agency-modal-title,
.light-mode .agency-modal-title {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .agency-sidebar,
.light-mode .agency-sidebar {
  background-color: var(--bg-tertiary);
  border-right-color: var(--border-color);
}

[data-theme="light"] .agency-nav-item,
.light-mode .agency-nav-item {
  color: var(--text-secondary);
}

[data-theme="light"] .agency-nav-item.active,
.light-mode .agency-nav-item.active,
[data-theme="light"] .agency-nav-item:hover,
.light-mode .agency-nav-item:hover {
  color: var(--text-primary);
  background-color: var(--card-bg);
}

[data-theme="light"] .agency-content,
.light-mode .agency-content {
  background-color: var(--card-bg);
}

[data-theme="light"] .agency-section-title,
.light-mode .agency-section-title {
  color: var(--text-primary);
}

[data-theme="light"] .agency-form-input,
.light-mode .agency-form-input {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Notification Badge - Light Mode */
[data-theme="light"] .notification-badge,
.light-mode .notification-badge {
  border-color: var(--card-bg);
}

/* Incidents - Light Mode */
[data-theme="light"] .incident-card,
.light-mode .incident-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .incident-title,
.light-mode .incident-title {
  color: var(--text-primary);
}

[data-theme="light"] .incident-desc,
.light-mode .incident-desc {
  color: var(--text-secondary);
}

/* Range Slider - Light Mode */
[data-theme="light"] .form-range-dark,
.light-mode .form-range-dark {
  background: var(--border-color);
}

/* Auth Pages - Light Mode */
[data-theme="light"] .auth-container,
.light-mode .auth-container {
  background-color: var(--bg-primary);
}

[data-theme="light"] .auth-form,
.light-mode .auth-form {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .auth-title,
.light-mode .auth-title {
  color: var(--text-primary);
}

[data-theme="light"] .form-input,
.light-mode .form-input {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .auth-card,
.light-mode .auth-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .btn-social,
.light-mode .btn-social {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .btn-social:hover,
.light-mode .btn-social:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .auth-divider-text,
.light-mode .auth-divider-text {
  background-color: var(--card-bg);
  color: var(--text-muted);
}

/* Login Title - Light Mode */
[data-theme="light"] .login-title,
.light-mode .login-title {
  color: var(--text-primary);
}

/* Feature Text - Light Mode */
[data-theme="light"] .feature-text,
.light-mode .feature-text {
  color: var(--text-secondary);
}

/* Page Title - Light Mode */
[data-theme="light"] .page-title,
.light-mode .page-title {
  color: var(--text-primary);
}

/* Theme Toggle Switch - Light Mode (inactive state = light mode is ON) */
[data-theme="light"] .theme-switch:not(.active),
.light-mode .theme-switch:not(.active) {
  background-color: var(--accent-color);
}

/* ============================================
   PORTAL SUB-COMPONENTS - LIGHT MODE
   ============================================ */

/* Monitor Grid - Light Mode */
[data-theme="light"] .monitor-grid-header,
.light-mode .monitor-grid-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="light"] .monitor-grid-row,
.light-mode .monitor-grid-row {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .monitor-grid-row:hover,
.light-mode .monitor-grid-row:hover {
  background-color: var(--bg-tertiary);
}

/* Domain Grid - Light Mode */
[data-theme="light"] .domain-grid-header,
.light-mode .domain-grid-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="light"] .domain-grid-row,
.light-mode .domain-grid-row {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .domain-grid-row:hover,
.light-mode .domain-grid-row:hover {
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .domain-group-card,
.light-mode .domain-group-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .domain-group-header,
.light-mode .domain-group-header {
  border-bottom-color: var(--border-color);
}

/* Domain Stats - Light Mode */
[data-theme="light"] .domain-stats-container,
.light-mode .domain-stats-container {
  background-color: var(--bg-tertiary);
  border-top-color: var(--border-color);
}

[data-theme="light"] .domain-stat-card,
.light-mode .domain-stat-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .domain-stat-label,
.light-mode .domain-stat-label {
  color: var(--text-muted);
}

[data-theme="light"] .domain-stat-value,
.light-mode .domain-stat-value {
  color: var(--text-primary);
}

/* Group Header Title - Override inline styles */
[data-theme="light"] .domain-group-header h3,
.light-mode .domain-group-header h3,
[data-theme="light"] .domain-group-header [style*="color: white"],
.light-mode .domain-group-header [style*="color: white"] {
  color: var(--text-primary) !important;
}

/* Domain Text - Light Mode */
[data-theme="light"] .domain-grid-row span[style*="color: white"],
.light-mode .domain-grid-row span[style*="color: white"] {
  color: var(--text-primary) !important;
}

[data-theme="light"] .domain-link[style*="color"],
.light-mode .domain-link[style*="color"] {
  color: var(--text-primary) !important;
}

/* Dropdown Menus - Light Mode */
[data-theme="light"] .custom-menu-dropdown,
.light-mode .custom-menu-dropdown {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .dropdown-item,
.light-mode .dropdown-item {
  color: var(--text-primary);
}

[data-theme="light"] .dropdown-item:hover,
.light-mode .dropdown-item:hover {
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .dropdown-item.danger,
.light-mode .dropdown-item.danger {
  color: var(--danger-color);
}

/* Domain Health Filter Bar - Light Mode */
[data-theme="light"] .domain-health-filter-bar,
.light-mode .domain-health-filter-bar {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .domain-select,
.light-mode .domain-select {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .domain-search-input,
.light-mode .domain-search-input {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Action Buttons - Light Mode */
[data-theme="light"] .action-icon-btn,
.light-mode .action-icon-btn {
  color: var(--text-secondary);
}

[data-theme="light"] .action-icon-btn:hover,
.light-mode .action-icon-btn:hover {
  color: var(--accent-color);
}

[data-theme="light"] .action-icon-btn.delete:hover,
.light-mode .action-icon-btn.delete:hover {
  color: var(--danger-color);
}

/* Icon Buttons - Light Mode Override */
[data-theme="light"] .icon-button[style*="color: #6b7280"],
.light-mode .icon-button[style*="color: #6b7280"],
[data-theme="light"] .icon-button[style*="color: #4b5563"],
.light-mode .icon-button[style*="color: #4b5563"] {
  color: var(--text-secondary) !important;
}

/* Empty Row - Light Mode */
[data-theme="light"] .empty-row,
.light-mode .empty-row {
  color: var(--text-secondary);
}

[data-theme="light"] .empty-row a,
.light-mode .empty-row a {
  color: var(--accent-color);
}

/* Percentage Value - Light Mode */
[data-theme="light"] .percentage-value,
.light-mode .percentage-value {
  color: var(--text-primary) !important;
}

/* Frequency Badge - Light Mode */
[data-theme="light"] .frequency-badge,
.light-mode .frequency-badge {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Notification Badge Wrapper - Light Mode */
[data-theme="light"] .notification-badge-wrapper .icon-button,
.light-mode .notification-badge-wrapper .icon-button {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .notification-count,
.light-mode .notification-count {
  background-color: var(--danger-color);
  border-color: var(--card-bg);
}

/* Company Badge - Ensure text is visible */
[data-theme="light"] .company-badge span,
.light-mode .company-badge span {
  color: var(--text-secondary) !important;
}

/* Status Icon Wrapper backgrounds - Light Mode adjustments */
[data-theme="light"] .status-icon-wrapper.up,
.light-mode .status-icon-wrapper.up {
  background-color: rgba(22, 163, 74, 0.15);
}

[data-theme="light"] .status-icon-wrapper.down,
.light-mode .status-icon-wrapper.down {
  background-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .status-icon-wrapper.paused,
.light-mode .status-icon-wrapper.paused {
  background-color: rgba(100, 116, 139, 0.15);
}

[data-theme="light"] .status-icon-wrapper.warning,
.light-mode .status-icon-wrapper.warning {
  background-color: rgba(217, 119, 6, 0.15);
}

/* Uptime Bars - Light Mode */
[data-theme="light"] .uptime-bars-container,
.light-mode .uptime-bars-container {
  background-color: transparent;
}

/* Link Primary - Light Mode */
[data-theme="light"] .link-primary,
.light-mode .link-primary {
  color: var(--accent-color);
}

/* Domain Table Container - Light Mode */
[data-theme="light"] .domain-table-container,
.light-mode .domain-table-container {
  background-color: transparent;
}

/* Inline dark colors override - Force text colors in light mode */
[data-theme="light"] [style*="color: #d1d5db"],
.light-mode [style*="color: #d1d5db"] {
  color: var(--text-primary) !important;
}

[data-theme="light"] [style*="color: #9ca3af"],
.light-mode [style*="color: #9ca3af"] {
  color: var(--text-secondary) !important;
}

[data-theme="light"] [style*="color: #6b7280"],
.light-mode [style*="color: #6b7280"] {
  color: var(--text-muted) !important;
}

/* Override inline "color: white" for light mode */
[data-theme="light"] [style*="color: white"],
.light-mode [style*="color: white"] {
  color: var(--text-primary) !important;
}

/* Group Name - Workspace Header Style */
.group-name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0;
}

/* Domain Name in Health Grid */
.domain-name {
  color: var(--text-primary);
  font-weight: 500;
}

/* Btn Accent - Using UptimeBot Brand Color */
.btn-accent {
  background-color: var(--accent-color);
  color: var(--accent-text);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

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

/* Primary Button - Using UptimeBot Brand Color */
.btn-primary {
  background-color: var(--accent-color);
  color: var(--accent-text);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

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

/* Empty State Button */
.btn-empty {
  background-color: var(--accent-color);
  color: var(--accent-text);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-empty:hover {
  background-color: var(--accent-hover);
}

/* Smooth transitions for theme switching */
body,
.top-header,
.sidebar,
.main-content,
.card-dark,
.form-card,
.group-card,
.modal-container,
.filter-bar,
.table-row,
.table-header,
.domain-group-card,
.domain-grid-row,
.monitor-grid-row,
.custom-menu-dropdown,
.group-name {
  transition: background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* ============================================
   INCIDENTS PAGE - LIGHT MODE
   ============================================ */

/* Incidents Header Card */
[data-theme="light"] .incidents-header-card,
.light-mode .incidents-header-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .incidents-title,
.light-mode .incidents-title {
  color: var(--text-primary);
}

[data-theme="light"] .incidents-subtitle,
.light-mode .incidents-subtitle {
  color: var(--text-secondary);
}

/* Incidents Controls */
[data-theme="light"] .sort-select,
.light-mode .sort-select {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .filter-btn,
.light-mode .filter-btn {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="light"] .filter-btn:hover,
.light-mode .filter-btn:hover {
  color: var(--text-primary);
}

/* Incidents Table Container */
[data-theme="light"] .incidents-table-container,
.light-mode .incidents-table-container {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

/* Incidents Table */
[data-theme="light"] .incidents-table thead tr,
.light-mode .incidents-table thead tr {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .incidents-table th,
.light-mode .incidents-table th {
  color: var(--text-secondary);
}

[data-theme="light"] .incidents-table tbody tr,
.light-mode .incidents-table tbody tr {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .incidents-table tbody tr:hover,
.light-mode .incidents-table tbody tr:hover {
  background-color: var(--bg-tertiary);
}

[data-theme="light"] .status-text,
.light-mode .status-text {
  color: var(--text-secondary);
}

[data-theme="light"] .monitor-link,
.light-mode .monitor-link {
  color: var(--text-primary);
}

[data-theme="light"] .root-cause-message,
.light-mode .root-cause-message {
  color: var(--text-secondary);
}

[data-theme="light"] .timestamp-text,
.light-mode .timestamp-text {
  color: var(--text-secondary);
}

[data-theme="light"] .duration-text,
.light-mode .duration-text {
  color: var(--text-secondary);
}

[data-theme="light"] .view-notifications-btn,
.light-mode .view-notifications-btn {
  color: var(--text-muted);
}

[data-theme="light"] .view-notifications-btn:hover,
.light-mode .view-notifications-btn:hover {
  color: var(--accent-color);
}

/* Pagination */
[data-theme="light"] .pagination-container,
.light-mode .pagination-container {
  background-color: var(--bg-tertiary);
  border-top-color: var(--border-color);
}

[data-theme="light"] .pagination-btn,
.light-mode .pagination-btn {
  color: var(--text-secondary);
}

[data-theme="light"] .pagination-btn:hover,
.light-mode .pagination-btn:hover {
  color: var(--text-primary);
}

[data-theme="light"] .page-num,
.light-mode .page-num {
  color: var(--text-secondary);
}

[data-theme="light"] .page-num:hover,
.light-mode .page-num:hover {
  color: var(--text-primary);
}

[data-theme="light"] .page-num.active,
.light-mode .page-num.active {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

/* Empty State */
[data-theme="light"] .empty-state-centered,
.light-mode .empty-state-centered {
  background-color: var(--card-bg);
}

[data-theme="light"] .empty-icon-large,
.light-mode .empty-icon-large {
  color: var(--accent-color);
}

/* Notification Log Items (Incidents Modal) */
[data-theme="light"] .notification-log-item,
.light-mode .notification-log-item {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .notification-type,
.light-mode .notification-type {
  color: var(--text-secondary);
}

[data-theme="light"] .notification-target,
.light-mode .notification-target {
  color: var(--text-primary);
}

[data-theme="light"] .notification-times,
.light-mode .notification-times {
  color: var(--text-muted);
}

/* ============================================
   AGENCY MODAL - LIGHT MODE (Additional)
   ============================================ */

/* Agency Icon Box */
[data-theme="light"] .agency-icon-box,
.light-mode .agency-icon-box {
  background-color: var(--bg-tertiary);
  color: var(--accent-color);
}

[data-theme="light"] .view-mode-toggle,
.light-mode .view-mode-toggle {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

/* Agency Info Card */
[data-theme="light"] .agency-info-card,
.light-mode .agency-info-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .agency-info-item,
.light-mode .agency-info-item {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .agency-info-label,
.light-mode .agency-info-label {
  color: var(--text-secondary);
}

[data-theme="light"] .agency-info-value,
.light-mode .agency-info-value {
  color: var(--text-primary);
}

[data-theme="light"] .agency-edit-btn,
.light-mode .agency-edit-btn {
  color: var(--text-muted);
}

[data-theme="light"] .agency-edit-btn:hover,
.light-mode .agency-edit-btn:hover {
  color: var(--accent-color);
}

/* Agency User Items */
[data-theme="light"] .agency-user-item,
.light-mode .agency-user-item {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .agency-user-name,
.light-mode .agency-user-name {
  color: var(--text-primary);
}

[data-theme="light"] .agency-user-email,
.light-mode .agency-user-email {
  color: var(--text-secondary);
}

[data-theme="light"] .agency-delete-btn,
.light-mode .agency-delete-btn {
  color: var(--text-muted);
}

[data-theme="light"] .agency-delete-btn:hover,
.light-mode .agency-delete-btn:hover {
  color: var(--danger-color);
}

/* Agency Buttons */
[data-theme="light"] .agency-invite-btn,
.light-mode .agency-invite-btn {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

[data-theme="light"] .agency-apply-btn,
.light-mode .agency-apply-btn {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

/* Branding Section */
[data-theme="light"] .branding-title,
.light-mode .branding-title {
  color: var(--text-primary);
}

[data-theme="light"] .branding-desc,
.light-mode .branding-desc {
  color: var(--text-secondary);
}

[data-theme="light"] .branding-current-value,
.light-mode .branding-current-value {
  color: var(--text-primary);
}

[data-theme="light"] .terms-link,
.light-mode .terms-link {
  color: var(--accent-color);
}

[data-theme="light"] .upload-zone,
.light-mode .upload-zone {
  background-color: var(--input-bg);
  border-color: var(--border-color);
}

/* White Label Form */
[data-theme="light"] .subdomain-hint,
.light-mode .subdomain-hint {
  color: var(--text-secondary);
}

[data-theme="light"] .white-label-apply-btn,
.light-mode .white-label-apply-btn {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

[data-theme="light"] .white-label-support,
.light-mode .white-label-support {
  color: var(--text-secondary);
}

[data-theme="light"] .accent-text,
.light-mode .accent-text {
  color: var(--accent-color);
}

/* Client Cards (Subscription) */
[data-theme="light"] .client-card,
.light-mode .client-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .client-name,
.light-mode .client-name {
  color: var(--text-primary);
}

[data-theme="light"] .client-account,
.light-mode .client-account {
  color: var(--text-secondary);
}

[data-theme="light"] .client-detail-label,
.light-mode .client-detail-label {
  color: var(--text-muted);
}

[data-theme="light"] .client-detail-value,
.light-mode .client-detail-value {
  color: var(--text-primary);
}

[data-theme="light"] .client-detail-sub,
.light-mode .client-detail-sub {
  color: var(--text-secondary);
}

[data-theme="light"] .client-price,
.light-mode .client-price {
  color: var(--text-primary);
}

[data-theme="light"] .client-edit-btn,
.light-mode .client-edit-btn {
  color: var(--accent-color);
}

[data-theme="light"] .stripe-toggle-label,
.light-mode .stripe-toggle-label {
  color: var(--text-secondary);
}

/* Client Stats Summary */
[data-theme="light"] .client-stats-summary,
.light-mode .client-stats-summary {
  background-color: var(--input-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .client-stat-label,
.light-mode .client-stat-label {
  color: var(--text-secondary);
}

[data-theme="light"] .client-stat-value,
.light-mode .client-stat-value {
  color: var(--text-primary);
}

/* ============================================
   EDIT SUBSCRIPTION MODAL - LIGHT MODE
   ============================================ */

[data-theme="light"] .edit-subscription-container,
.light-mode .edit-subscription-container {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .edit-subscription-header,
.light-mode .edit-subscription-header {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .edit-subscription-title,
.light-mode .edit-subscription-title {
  color: var(--text-primary);
}

[data-theme="light"] .edit-subscription-subtitle,
.light-mode .edit-subscription-subtitle {
  color: var(--text-secondary);
}

[data-theme="light"] .pricing-plans-section,
.light-mode .pricing-plans-section {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .pricing-plans-title,
.light-mode .pricing-plans-title {
  color: var(--text-secondary);
}

[data-theme="light"] .pricing-table,
.light-mode .pricing-table {
  background-color: var(--card-bg);
}

[data-theme="light"] .pricing-table th,
.light-mode .pricing-table th {
  color: var(--text-secondary);
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .pricing-table td,
.light-mode .pricing-table td {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .plan-name,
.light-mode .plan-name {
  color: var(--text-primary);
}

[data-theme="light"] .plan-sub,
.light-mode .plan-sub {
  color: var(--text-secondary);
}

[data-theme="light"] .plan-staff,
.light-mode .plan-staff {
  color: var(--text-secondary);
}

[data-theme="light"] .price-input,
.light-mode .price-input {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .currency-symbol,
.light-mode .currency-symbol {
  color: var(--text-secondary);
}

[data-theme="light"] .coupon-section,
.light-mode .coupon-section {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .coupon-title,
.light-mode .coupon-title {
  color: var(--text-primary);
}

[data-theme="light"] .edit-subscription-footer,
.light-mode .edit-subscription-footer {
  border-top-color: var(--border-color);
}

[data-theme="light"] .edit-cancel-btn,
.light-mode .edit-cancel-btn {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Modal Content Styled - Light Mode */
[data-theme="light"] .modal-content-styled,
.light-mode .modal-content-styled {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .modal-header,
.light-mode .modal-header {
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .modal-footer,
.light-mode .modal-footer {
  border-top-color: var(--border-color);
}

[data-theme="light"] .modal-close-btn,
.light-mode .modal-close-btn {
  color: var(--text-muted);
}

[data-theme="light"] .modal-close-btn:hover,
.light-mode .modal-close-btn:hover {
  color: var(--text-primary);
}

/* Form Input Dark - Light Mode Override */
[data-theme="light"] .form-input-dark,
.light-mode .form-input-dark {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="light"] .form-select-dark,
.light-mode .form-select-dark {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Account Logout Button - Light Mode */
[data-theme="light"] .account-logout-btn,
.light-mode .account-logout-btn {
  color: var(--text-secondary);
  border-color: var(--border-color);
}

[data-theme="light"] .account-logout-btn:hover,
.light-mode .account-logout-btn:hover {
  color: var(--danger-color);
  border-color: var(--danger-color);
}

/* Section Subtitle - Light Mode */
[data-theme="light"] .section-subtitle,
.light-mode .section-subtitle {
  color: var(--text-primary);
}

/* Social Icon Box - Light Mode */
[data-theme="light"] .social-icon-box,
.light-mode .social-icon-box {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ============================================
   NOTIFICATIONS MODAL - LIGHT MODE
   ============================================ */

/* Modal Title Large */
[data-theme="light"] .modal-title-lg,
.light-mode .modal-title-lg {
  color: var(--text-primary);
}

/* Modal Subtitle */
[data-theme="light"] .modal-subtitle,
.light-mode .modal-subtitle {
  color: var(--text-secondary);
}

/* Text Label Small */
[data-theme="light"] .text-label-small,
.light-mode .text-label-small {
  color: var(--text-secondary);
}

/* Recipient Item */
[data-theme="light"] .recipient-item,
.light-mode .recipient-item {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .recipient-item .font-bold,
.light-mode .recipient-item .font-bold {
  color: var(--text-primary) !important;
}

/* Integration Item */
[data-theme="light"] .integration-item,
.light-mode .integration-item {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .integration-item .font-bold,
.light-mode .integration-item .font-bold {
  color: var(--text-primary) !important;
}

/* Modal Body Scroll */
[data-theme="light"] .modal-body-scroll,
.light-mode .modal-body-scroll {
  background-color: var(--card-bg);
}

/* Modal Body Form */
[data-theme="light"] .modal-body-form,
.light-mode .modal-body-form {
  background-color: var(--card-bg);
}

/* Add Link Button */
[data-theme="light"] .add-link-btn,
.light-mode .add-link-btn {
  color: var(--accent-color);
}

/* Action Icon Buttons in Light Mode */
[data-theme="light"] .action-icon-btn,
.light-mode .action-icon-btn {
  color: var(--text-secondary);
}

[data-theme="light"] .action-icon-btn:hover,
.light-mode .action-icon-btn:hover {
  color: var(--accent-color);
}

[data-theme="light"] .action-icon-btn.delete:hover,
.light-mode .action-icon-btn.delete:hover {
  color: var(--danger-color);
}

/* Input Group Card */
[data-theme="light"] .input-group-card,
.light-mode .input-group-card {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="light"] .input-group-card span,
.light-mode .input-group-card span {
  color: var(--text-primary) !important;
}

/* Modal Button Cancel */
[data-theme="light"] .modal-btn-cancel,
.light-mode .modal-btn-cancel {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Modal Save Button */
[data-theme="light"] .modal-save-btn,
.light-mode .modal-save-btn {
  background-color: var(--accent-color);
  color: var(--accent-text);
}

/* Page Title Light Mode */
[data-theme="light"] .page-title,
.light-mode .page-title {
  color: var(--text-primary);
}

[data-theme="light"] .portal-page-title,
.light-mode .portal-page-title {
  color: var(--text-primary);
}

/* Text Gray Classes Override for Light Mode */
[data-theme="light"] .text-gray-300,
.light-mode .text-gray-300 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-gray-600,
.light-mode .text-gray-600 {
  color: var(--text-secondary) !important;
}