/* === SHARED STYLES (auto-generated by build.sh — do not edit) === */
/* =============================================
   Homepage Shared Styles — All Devices
   Auto-included by dashboard/build.sh
   ============================================= */

/* --- Nav icons inside widget box (classes added by JS) --- */
#dashboard-nav-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
  flex-shrink: 0 !important;
}

.dash-nav-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  text-decoration: none;
  color: rgba(148, 163, 184, 0.5);
  transition: color 0.15s, background 0.15s;
}

.dash-nav-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.dash-nav-icon span {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: ui-monospace, monospace;
}

.dash-nav-icon:hover {
  color: rgba(6, 182, 212, 0.8);
  background: rgba(6, 182, 212, 0.05);
}

.dash-nav-icon.active {
  color: rgb(6, 182, 212);
  background: rgba(6, 182, 212, 0.1);
  border-bottom: 2px solid rgb(6, 182, 212);
}

/* --- Monitor counts under nav icons --- */
.monitor-counts {
  display: flex;
  gap: 0.2rem;
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1;
  font-family: ui-monospace, monospace;
}

.mc-up {
  color: #10b981;
}

.mc-down {
  color: #ef4444;
}

/* --- Search bar font --- */
.information-widget-search input[type="text"] {
  font-size: 0.75rem !important;
}

/* Compact text in stacked datetime/weather */
.information-widget-datetime .text-xl {
  font-size: 0.85rem !important;
}

.information-widget-openmeteo .widget-inner-text {
  font-size: 0.75rem !important;
}

.information-widget-openmeteo .widget-inner-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* --- Centered 1200px Layout: header + content + sidebar --- */
body #information-widgets {
  width: 100%;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

#layout-groups,
#services {
  width: 100% !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

#dashboard-wrapper {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#main-content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
  justify-content: center;
  gap: 0.75rem;
}

#side-content {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Group styling --- */
.services-group {
  padding: 0.5rem !important;
  margin-bottom: 0.25rem !important;
  flex: none !important;
}

.services-group h2 {
  font-size: 0.85rem !important;
  margin-bottom: 0.35rem !important;
  padding-bottom: 0.15rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* --- Compact Card Layout --- */
.service {
  min-height: auto !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
}

.service-card {
  min-height: auto !important;
  padding: 0.3rem 0.5rem !important;
}

/* Smaller service icons */
.service-icon {
  width: 2rem !important;
}

.service-icon img,
.service-icon div {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Compact service name */
.service-name {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  padding: 0.25rem 0.5rem !important;
}

/* --- Descriptions: hidden by default, reveal on hover --- */
p.service-description,
.service-card .service-description {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  font-size: 0.65rem !important;
  line-height: 0 !important;
  transition: max-height 0.2s ease, opacity 0.2s ease, line-height 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}

.service-card:hover p.service-description,
.service-card:hover .service-description {
  max-height: 1.5rem !important;
  opacity: 0.7 !important;
  line-height: 1.1 !important;
}

/* --- Compact group spacing --- */
.services-group .service {
  margin-bottom: 0 !important;
}

/* --- Docker status badge: compact --- */
.docker-status {
  font-size: 6px !important;
  padding: 0 4px !important;
  line-height: 1.4 !important;
}

/* --- Kuma widget: more breathing room --- */
#side-content .service-card {
  padding: 0.3rem 0.5rem !important;
}

#side-content .service {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

#side-content .service-icon img,
#side-content .service-icon div {
  width: 1rem !important;
  height: 1rem !important;
}

/* =============================================
   Responsive Breakpoints
   ============================================= */

/* --- Tablet (<=1024px) --- */
@media (max-width: 1024px) {
  #side-content {
    width: 200px;
  }
  #main-content {
    grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  }
}

/* --- Small tablet / large phone (<=768px) --- */
@media (max-width: 768px) {
  /* Hide ALL widgets except nav icons */
  #widgets-wrap > *:not(#dashboard-nav-icons) {
    display: none !important;
  }
  #information-widgets-right {
    display: none !important;
  }

  /* Nav icons fill header, bigger for touch */
  #dashboard-nav-icons {
    width: 100% !important;
    justify-content: space-around !important;
  }
  .dash-nav-icon svg {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }
  .dash-nav-icon span {
    font-size: 0.6rem !important;
  }
  .monitor-counts {
    display: none !important;
  }

  /* Stack main + sidebar vertically */
  #dashboard-wrapper {
    flex-direction: column !important;
  }

  /* Status fills full width on mobile */
  #side-content {
    width: 100% !important;
  }
  #side-content .services-group {
    width: 100% !important;
  }
  #side-content .service-card {
    padding: 0.3rem 0.5rem !important;
  }

  /* Services single column */
  #main-content {
    grid-template-columns: 1fr !important;
  }
}

/* --- Phone (<=480px) --- */
@media (max-width: 480px) {
  /* Even more compact on phones */
  .dash-nav-icon {
    padding: 0.25rem 0.3rem;
  }
  .dash-nav-icon span {
    font-size: 0.5rem !important;
  }
  .services-group h2 {
    font-size: 0.75rem !important;
  }
}

/* === DEVICE: mini-m4 === */
/* Mini M4 — No device-specific overrides */