/* KAB Weather Station Dashboard Styles */

/* =========================================
   Sidebar Styling
   ========================================= */

/* Reduce sidebar font size and width */
.bslib-sidebar-layout > .sidebar {
  font-size: 0.85rem !important;
  width: 250px !important; /* Reduced width */
}

.bslib-sidebar-layout > .sidebar .btn {
  font-size: 0.85rem !important;
}

.bslib-sidebar-layout > .sidebar .control-label {
  font-size: 0.85rem !important;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

/* =========================================
   Value Box Customization
   ========================================= */

/* =========================================
   Value Box Customization
   ========================================= */

/* Adjust Icon Size (Reduced) */
.bslib-value-box .showcase {
  font-size: 2.2rem !important; /* Smaller sized icon */
  opacity: 0.8;
  max-height: 100px; /* Prevent it from expanding the card too much */
}

/* Value Box Title */
.bslib-value-box .value-box-title {
  font-size: 1rem !important;
  font-weight: 600;
  margin-bottom: 0.2rem !important;
}

/* Value Box Value */
.bslib-value-box .value-box-value {
  font-size: 1.6rem !important;
  font-weight: 700;
}

/* Timestamp Text - Fix for cut-off */
.value-box-timestamp {
  font-size: 0.7rem !important;
  font-weight: 400;
  opacity: 0.9;
  
  /* Layout */
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  
  /* Text Wrapping is key to prevent cut-off */
  white-space: normal !important; 
  line-height: 1.1 !important;
  word-wrap: break-word !important;
}

/* =========================================
   Dashboard Layout & Cards
   ========================================= */

/* Compact properties */
.card {
  margin-bottom: 0.5rem !important;
}

.card-header {
  padding: 0.3rem 0.8rem !important;
  font-size: 0.9rem !important;
}

.card-body {
  padding: 0.5rem !important;
}


/* Reduce gap between grid items */
/* Note: bslib 0.6+ uses variables, this targets standard grid gaps */
.bslib-gap-spacing {
  gap: 0.5rem !important; 
}

/* =========================================
   Info Modal Styling
   ========================================= */

.modal-title {
  font-size: 1.2rem !important;
}

.modal-body h1 { 
  font-size: 1.4rem; 
  border-bottom: 1px solid #eee; 
  padding-bottom: 5px; 
  margin-top: 20px; 
}

.modal-body h2 { 
  font-size: 1.2rem; 
  margin-top: 15px; 
  color: #546e7a; 
}

.modal-body h3 { 
  font-size: 1.1rem; 
  margin-top: 10px; 
}

.modal-body p, 
.modal-body li { 
  font-size: 0.9rem; 
  line-height: 1.4; 
}

.modal-body img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 10px auto; 
  border-radius: 4px; 
}

/* =========================================
   Mobile Optimizations
   ========================================= */

@media (max-width: 768px) {
  /* Smaller title on mobile */
  .navbar-brand span {
    font-size: 1.2rem !important; 
  }
  
  /* Smaller header logos on mobile */
  .d-flex img {
    height: 40px !important; 
    margin-right: 5px !important;
  }
  
  /* Adjustments for sidebar toggle if needed */
}