body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif !important;
  background-color: #f1f1f1 !important;
}

.navbar {
  width: 100% !important;
  background-color: #28a745 !important; /* Keeping the green navbar as requested */
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.navbar-brand {
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 60px !important;
}

.navbar-collapse {
  flex-grow: 1 !important;
  justify-content: start !important;
}

.navbar-nav {
  display: flex !important;
  justify-content: start !important;
  gap: 10px !important;
}

.navbar-light .navbar-nav .nav-link {
  white-space: nowrap !important;
  text-align: center !important;
  font-size: large !important;
  font-weight: 500 !important;
  text-wrap: none !important;
  background-color: #dff2ff !important; /* Blue nav buttons */
  color: black !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 15px !important;
  text-decoration: none !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  background-color: #4c83bd !important; /* Darker blue on hover */
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.container-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.btn-primary {
  color: #fff !important;
  background-color: #28a745 !important; /* Matching navbar green */
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  margin-top: 10px;
  margin-right: 15px;
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  background-color: #218838 !important; /* Darker green on hover */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.btn-secondary {
  color: #fff !important;
  background-color: #e74c3c !important; /* Modern red */
  border: none !important; 
  border-radius: 6px !important;
  padding: 8px 16px !important;
  margin-top: 10px;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover {
  background-color: #c0392b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Keep border utilities */
.border-top {
  border-top: 1px solid #e5e5e5 !important;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5 !important;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05) !important;
}

.footer {
  text-align: center !important;
  height: 25px !important;
  line-height: 25px !important;
  clear: both !important;
  color: #555 !important;
}

.header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-bottom: 20px !important;
}

.table {
  width: 100% !important;
  max-width: 1200px !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.table th, .table td {
  padding: 12px !important;
  text-align: center !important;
  border: 1px solid #e9ecef !important; /* Lighter border */
  vertical-align: middle !important;
}

.table th {
  background-color: #28a745 !important; /* Green header to match navbar */
  color: #fff !important;
  font-weight: 500 !important;
}

.table td.time-cell {
  white-space: nowrap !important;
}

.table tr:nth-child(even):not(.alert-condition-red):not(.ice-condition-blue) {
  background-color: #ffffff !important; /* Pure white */
}

.table tr:nth-child(odd):not(.alert-condition-red):not(.ice-condition-blue) {
  background-color: #f1f8e9 !important; /* Very light green tint */
}

.table-container {
  display: flex !important;
  justify-content: center !important;
  margin: 15px 0 !important;
}

.table tbody tr.region-border {
  border-bottom: 2px solid #bacaba !important; /* Light green-gray border */
}

.status-cell, .vertical-center {
  vertical-align: middle !important;
}

.table-responsive {
  overflow-x: auto;
  border-radius: 8px !important;
}

.sticky-column {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: 600 !important;
  background-color: inherit;
  border: 1px solid #e9ecef;
}

.sticky-column-f {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  border: 1px solid #e9ecef;
}

.badge-online {
  background-color: #28a745 !important; /* Matching navbar green */
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

.badge-offline {
  background-color: #e74c3c !important; /* Modern red */
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

.alert-condition-yellow {
  background-color: #f1c40f !important; /* Modern yellow */
  color: #2c3e50 !important; /* Darker text for contrast */
}

.alert-condition-red td {
  background-color: #e74c3c !important; /* Modern red */
  color: white !important;
}

.ice-condition-light-blue {
  background-color: #a9cce3 !important; /* Modern light blue */
  color: #2c3e50 !important;
}

.ice-condition-blue td {
  background-color: #3498db !important; /* Modern blue */
  color: white !important;
}

thead .sticky-column {
  background-color: #28a745 !important; /* Match green headers */
  color: white;
}

/* Media queries for iPad view */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar {
        padding: 10px !important; /* Increase padding */
        font-size: medium !important; /* Adjust font size */
    }
    .navbar-brand {
        padding-left: 30px !important; /* Adjust padding */
        padding-right: 30px !important; /* Adjust padding */
    }
    .navbar-nav .nav-link {
        font-size: medium !important; /* Adjust font size */
        padding: 10px 15px !important; /* Adjust padding */
    }
    .table, .container-fluid {
        padding: 0 15px !important; /* Adjust padding */
    }
    .table th, .table td {
        padding: 10px !important; /* Adjust padding */
        font-size: medium !important; /* Adjust font size */
    }
    .header {
        padding-bottom: 15px !important; /* Adjust padding */
    }
    .subscription-form {
        margin: 15px !important; /* Adjust margin */
    }
    .table-responsive {
        overflow-x: auto !important; /* Ensure horizontal scrolling */
    }
    .nav-item {
        margin-bottom: 15px !important; /* Adjust margin */
    }
    .navbar {
        flex-direction: row !important; /* Ensure horizontal layout */
        align-items: center !important; /* Center align items */
    }
}

/* Media queries for mobile view */
@media (max-width: 768px) {
    .navbar-brand, .navbar-nav, .navbar-nav .nav-link {
        padding: 5px !important;
        font-size: medium !important;
    }
    .table, .container-fluid {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table th, .table td {
        padding: 5px !important;
        font-size: small !important;
    }
    .header {
        padding-bottom: 10px !important;
    }
    .subscription-form {
        margin: 10px !important;
    }
    .table-responsive {
        overflow-x: auto !important;
    }
    .nav-item {
        margin-bottom: 10px !important;
    }
    .navbar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}