/* CSS Variables for theming */
:root {
  --background: #000000;
  --foreground: #ffffff;
  --secondary: #404040;
  --primary: #D52B1E;
  --text-muted: #a3a3a3;
  --border: #333333;
  --footer-bg: #000000;
  --footer-border: #333333;
  --primary-hover: #b91c1c;
  --card-bg: #404040;
  --card-hover: #4a4a4a;
}

[data-theme="light"] {
  --background: #ffffff;
  --foreground: #000000;
  --secondary: #f5f5f5;
  --primary: #D52B1E;
  --text-muted: #666666;
  --border: #e5e5e5;
  --footer-bg: #f5f5f5;
  --footer-border: #e5e5e5;
  --primary-hover: #b91c1c;
  --card-bg: #f0f0f0;
  --card-hover: #e8e8e8;
}

/* Navbar Styles - Ensure fixed positioning */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--background) !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 1000 !important;
    transition: background-color 0.3s ease !important;
  }
  
  .secondary-navbar {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 999 !important;
    transition: background-color 0.3s ease !important;
  }

.pay-bill-btn {
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}

.pay-bill-btn:hover {
  background: var(--primary-hover);
}

  .container {
    min-height: 100vh;
    background: var(--background);
    color: var(--foreground);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
  }
  
  /* Sidebar */
  .sidebar {
    position: fixed;
    top: 140px; /* 64px (main navbar) + 48px (secondary navbar) */
    left: 0;
    width: 240px;
    height: calc(100vh - 112px);
    background: var(--hero-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: background-color 0.3s, border-color 0.3s;
  }
  
  .sidebarHeader {
    padding: 1.5rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.3s ease;
  }
  
  .userProfile {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .avatar {
    width: 48px;
    height: 48px;
    background: rgb(94, 91, 91);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.3s ease;
  }
  
  .userInfo {
    flex: 1;
  }
  
  .userName {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .userRole {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    transition: color 0.3s ease;
  }
  
  .sidebarNav {
    padding: 1.5rem 0;
    flex: 1;
  }
  
  .navItem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
  }
  
  .navItem:hover {
    background: var(--border);
    color: var(--foreground);
  }
  
  .navItem.active {
    background: var(--primary);
    color: white;
    border-left-color: var(--primary-hover);
  }
  
  .navItem svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  .payBillButton {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    background: linear-gradient(135deg, var(--primary) 0%, #b91c1c 100%);
    margin: 1rem 2rem;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  }
  
  .payBillButton:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  }
  
  .payBillButton svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  /* Main Content */
  .mainContent {
    flex: 1;
    margin-left: 240px;
    margin-top: 112px; /* 64px + 48px */
    padding: 1rem;
    background: var(--background);
    min-height: calc(100vh - 112px);
    transition: background-color 0.3s;
    width: calc(100vw - 240px);
    max-width: 1400px;
  }
  
  /* Top Bar */
  .topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.3s ease;
  }
  
  .breadcrumb {
    display: flex;
    flex-direction: column;
  }
  
  .pageTitle {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 2rem;
    padding-top: 2.5rem;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .ubtitle {
    font-size: 1.4rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    transition: color 0.3s ease;
  }
  
  .topBarActions {
    display: flex;
    gap: 1rem;
  }
  
  .actionButton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--hero-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  /* Dark mode specific background for action buttons */
  [data-theme="dark"] .actionButton {
    background: rgb(94, 91, 91);
  }
  
  .actionButton:hover {
    background: var(--border);
    border-color: var(--text-muted);
  }
  
  /* Stats Grid */
  .statsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .statCard {
    background: var(--hero-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .statCard:hover {
    transform: translateY(-2px);
    background: var(--card-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .statIcon {
    width: 36px;
    height: 36px;
    background: rgb(94, 91, 91);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.3s ease;
  }
  
  .statValue {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .statLabel {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    transition: color 0.3s ease;
  }
  
  /* Dashboard Grid */
  .dashboardGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .dashboardCard {
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .dashboardCard:hover {
    transform: translateY(-2px);
    background: var(--card-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .cardTitle {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .upgradeButton {
    background: linear-gradient(135deg, var(--primary) 0%, #b91c1c 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  }
  
  .upgradeButton:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4);
  }
  
  /* Plan Details */
  .planDetails {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .planName {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .planDescription {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
    transition: color 0.3s ease;
  }
  
  .planFeatures {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-muted);
  }
  
  .feature {
    font-size: 1rem;
    color: var(--foreground);
    transition: color 0.3s ease;
  }

  .planFeatures .feature {
    background: var(--hero-bg);
  }
  
  .planPrice {
    text-align: right;
  }
  
  .price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    transition: color 0.3s ease;
  }
  
  .period {
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }
  
  /* Pay Now Button */
  .payNowSection {
    margin-bottom: 1.5rem;
  }
  
  .payNowButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary) 0%, #b91c1c 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  }
  
  .payNowButton:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  }
  
  .payNowButton:active {
    transform: translateY(0);
  }
  
  .payNowButton svg {
    width: 20px;
    height: 20px;
  }
  
  /* Usage Analytics */
  .timeSelect {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    transition: all 0.3s ease;
  }
  
  .usageChart {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
  }
  
  .chartPlaceholder {
    text-align: center;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }
  
  .chartPlaceholder svg {
    margin-bottom: 0.5rem;
  }
  
  .usageStats {
    display: flex;
    justify-content: space-between;
  }
  
  .usageStat {
    text-align: center;
  }
  
  .usageLabel {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
  }
  
  .usageValue {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .viewAllLink {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  
  .viewAllLink:hover {
    color: var(--primary-hover);
  }
  
  .billsList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .billItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--hero-bg);
    border-radius: 8px;
    transition: background-color 0.3s ease;
  }
  
  .billItem:hover {
    background: var(--card-hover);
  }
  
  .billMonth {
    font-size: 1rem;
    font-weight: 600;
    margin: 10px;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .billDate {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding-top: 10px;
    margin: 0.25rem 0 0 0;
    transition: color 0.3s ease;
  }
  
  .billAmount {
    padding-top: 10px;
    text-align: right;
  }
  
  .amount {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    transition: color 0.3s ease;
    padding-bottom: 10px;
  }
  
  .status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .status.paid {
    color: #166534;
  }
  
  .status.unpaid {
    color: #dc2626;
  }
  
  .quickActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .quickAction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--hero-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .quickAction:hover {
    background: var(--card-hover);
    border-color: var(--primary);
    transform: translateY(-1px);
  }
  
  .serviceStatus {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .serviceItem {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--hero-bg);
    border-radius: 8px;
    transition: background-color 0.3s ease;
  }
  
  .serviceItem:hover {
    background: var(--card-hover);
  }
  
  .serviceIcon {
    width: 40px;
    height: 40px;
    background: rgb(94, 91, 91);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.3s ease;
  }
  
  .serviceName {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    color: var(--foreground);
    transition: color 0.3s ease;
  }
  
  .status.online {
    color: #059669;
    font-weight: 500;
  }
  
  /* Responsive Design */
  @media (max-width: 1100px) {
    .statsGrid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
  }
  
  @media (max-width: 900px) {
    .dashboardGrid {
      grid-template-columns: 1fr;
    }
    
    .statsGrid {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
  }
  
  @media (max-width: 1024px) {
    .sidebar {
      position: fixed;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      top: 70px;
      height: calc(100vh - 70px);
      left: 0;
      width: 220px;
    }
    
    .sidebar.open {
      transform: translateX(0);
    }
    
    .mainContent {
      margin-top: 70px;
      min-height: calc(100vh - 70px);
      margin-left: 0;
      width: 100vw;
      padding: 0.75rem;
      max-width: 100%;
    }
    
    .statsGrid {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 0.75rem;
    }
  }
  
  @media (max-width: 768px) {
    .mainContent {
      padding: 0.5rem;
    }
    
    .pageTitle {
      font-size: 1.5rem;
      padding-top: 2rem;
      margin-top: 1rem;
    }
    
    .statsGrid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
    
    .statCard {
      padding: 0.5rem;
    }
    
    .dashboardCard {
      padding: 0.5rem;
    }
    
    .planDetails {
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .planPrice {
      text-align: left;
    }
    
    .usageStats {
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .quickActions {
      grid-template-columns: 1fr;
    }
    
    .topBarActions {
      flex-direction: column;
      gap: 0.5rem;
    }
  }
  
  @media (max-width: 480px) {
    .pageTitle {
      font-size: 1.25rem;
      padding-top: 2rem;
    }
    
    .statCard {
      padding: 1rem;
    }
    
    .dashboardCard {
      padding: 1rem;
    }
    
    .actionButton {
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
    }
  }