:root {
      --primary-color: #4285F4; --primary-hover-color: #3367D6;
      --success-color: #34A853; --warning-color: #FBBC05; --danger-color: #EA4335;
      --light-bg: #f4f6f8; --dark-bg: #1c1e21;
      --card-bg-light: #ffffff; --card-bg-dark: #282a2d;
      --text-color-light: #1c1e21; --text-color-dark: #e4e6eb;
      --border-color-light: #e0e0e0; --border-color-dark: #383a3c;
      --muted-color-light: #5f6368; --muted-color-dark: #9aa0a6;
      --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --bs-body-line-height: 1.6; --bs-border-radius: .4rem; --bs-card-border-radius: .6rem;
      --navbar-height: 60px; 
      --bs-primary-rgb: 66,133,244; /* For rgba() background on charts */
      --bs-success-rgb: 52,168,83;
  }
  [data-bs-theme="light"] { --bs-body-color: var(--text-color-light); --bs-body-bg: var(--light-bg); --bs-tertiary-bg: #eef0f2; --card-bg: var(--card-bg-light); --bs-border-color: var(--border-color-light); --text-muted-custom: var(--muted-color-light); }
  [data-bs-theme="dark"] { --bs-body-color: var(--text-color-dark); --bs-body-bg: var(--dark-bg); --bs-tertiary-bg: #222427; --card-bg: var(--card-bg-dark); --bs-border-color: var(--border-color-dark); --text-muted-custom: var(--muted-color-dark); }
  body { min-height: 100vh; display: flex; flex-direction: column; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
  .navbar { background-color: var(--card-bg); transition: background-color 0.2s ease-in-out; height: var(--navbar-height); }
  .navbar-brand { color: var(--bs-body-color) !important; font-weight: 600;}
  .nav-link { color: var(--bs-body-color) !important; opacity: 0.9; font-weight: 500;}
  .nav-link:hover, .nav-link:focus { opacity: 1; color: var(--primary-color) !important; }
  .nav-link .bi, .btn .bi { vertical-align: -0.1em; } #languageToggler { min-width: 50px; text-align: center; }
  .footer { background-color: var(--card-bg); border-top: 1px solid var(--bs-border-color); padding: 1rem 0; font-size: 0.9em; color: var(--text-muted-custom); transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
  .footer a { color: var(--text-muted-custom); text-decoration: none; } .footer a:hover { color: var(--primary-color); }
  h1, h2, h3, h4, h5, h6 { color: var(--bs-body-color); font-weight: 600; }
  h2 { margin-bottom: 1.5rem; font-size: 1.85rem; }
  .card { background-color: var(--card-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-card-border-radius); box-shadow: 0 2px 10px rgba(0,0,0, .04); transition: all 0.25s ease-in-out; }
  [data-bs-theme="dark"] .card { box-shadow: 0 2px 10px rgba(0,0,0, .1); }
  .card-header { background-color: transparent; border-bottom: 1px solid var(--bs-border-color); padding: 0.85rem 1.25rem; font-weight: 500; }
  .table { color: var(--bs-body-color); } .table th { font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-custom); border-bottom-width: 1px; padding: 0.85rem 1rem;}
  .table td { font-size: 0.9rem; vertical-align: middle; padding: 0.85rem 1rem;}
  .sites-table tr:hover { background-color: var(--bs-tertiary-bg); }
  .badge { font-size: 0.82em; padding: 0.45em 0.7em; font-weight: 500; line-height: 1; }
  .bg-success { background-color: var(--success-color) !important; } .bg-danger { background-color: var(--danger-color) !important; }
  .bg-warning { background-color: var(--warning-color) !important; color: #212529 !important; } .bg-secondary { background-color: var(--text-muted-custom) !important; }
  
  .server-card {
      display: flex; flex-direction: column; /* For h-100 and internal flex behavior */
      transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  .server-card.details-visible { /* Applied on hover */
      transform: translateY(-5px) scale(1.01); /* Lift and slightly enlarge */
      box-shadow: 0 15px 35px rgba(0,0,0, .12);
      z-index: 10; /* Bring to front */
  }
  [data-bs-theme="dark"] .server-card.details-visible { box-shadow: 0 15px 35px rgba(0,0,0, .25); }
  
  .server-card .card-body { 
      padding: 1rem 1.25rem; 
      flex-shrink: 0; 
  }
  .server-card .card-title { font-size: 1.2rem; color: var(--bs-body-color); }
  .server-quick-stats { font-size: 0.9em; color: var(--text-muted-custom); }
  .server-quick-stats .bi { margin-right: 0.3rem; font-size: 1.05em; }
  .server-last-update-container { color: var(--text-muted-custom); font-size: 0.8em; }
  
  .server-details-section {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      border-top: 1px solid transparent;
      background-color: var(--bs-tertiary-bg);
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                  opacity 0.3s ease-in-out,
                  padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                  border-color 0.3s ease-in-out;
  }
  .server-card.details-visible .server-details-section {
      max-height: 800px; /* Increased to ensure all content fits */
      opacity: 1;
      padding-top: 1rem; 
      padding-bottom: 1rem;
      margin-top: 0; /* Details section is part of card, no top margin */
      border-top-color: var(--bs-border-color);
  }
  .server-details-content { padding-left: 1.25rem; padding-right: 1.25rem; }
  .details-section-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; text-align: center; color: var(--text-muted-custom); text-transform: uppercase; letter-spacing: 0.05em;}
  .server-text-details p { margin-bottom: 0.4rem; font-size: 0.875rem; }
  .server-text-details strong { font-weight: 500; color: var(--bs-body-color); }
  .server-resource-pies .col-4 { flex: 0 0 auto; width: 33.33333333%; }
  
  
  .chart-container { position: relative; height: 200px; width: 100%; }
  .chart-pie-wrapper { position: relative; height: 70px; width: 100%; margin: 0 auto 0.1rem auto; max-width: 80px; } /* Slightly smaller pie */
  .chart-line-container { position: relative; height: 160px; width: 100%; }
  
  .site-details-row td { padding: 1rem; background-color: var(--bs-tertiary-bg); }
  .history-bar-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; height: 20px; gap: 2px; min-width: calc(24 * (5px + 1px)); }
  .history-bar { width: 5px; height: 18px; border-radius: 1px; opacity: 0.85; transition: opacity 0.2s ease-in-out; } .history-bar:hover { opacity: 1; }
  .history-bar-up { background-color: var(--success-color); } .history-bar-down { background-color: var(--danger-color); } 
  .history-bar-pending { background-color: var(--text-muted-custom); }
  
  .fixed-alerts-container { position: fixed; top: calc(var(--navbar-height) + 1rem); right: 1rem; z-index: 1055; width: auto; max-width: 380px; }
  .fixed-alerts-container .alert { margin-bottom: 0.75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; border-radius: var(--bs-border-radius); }
  @media (max-width: 768px) { .fixed-alerts-container { left: 1rem; right: 1rem; max-width: none; width: calc(100% - 2rem); } }
  .placeholder-card { background-color: var(--card-bg) !important; opacity: 0.7; }
  .placeholder-glow .placeholder { background-color: var(--bs-tertiary-bg); border-radius: .25rem; }
  
  /* Modal and Admin page styles for modern look */
  .modal-content { border-radius: var(--bs-card-border-radius); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
  .modal-header { border-bottom: 1px solid var(--bs-border-color); }
  .modal-footer { border-top: 1px solid var(--bs-border-color); }
  .form-control, .form-select { border-radius: var(--bs-border-radius); }
  .btn { border-radius: var(--bs-border-radius); font-weight: 500; padding: .5rem 1rem; }
  .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
  .btn-primary:hover { background-color: var(--primary-hover-color); border-color: var(--primary-hover-color); }