/* Hassette Web UI — custom overrides */

/* Layout: sidebar + main */
.ht-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
.ht-sidebar {
  width: 220px;
  background: #1a1a2e;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  flex-shrink: 0;
  transition: width 0.25s ease;
  overflow: hidden;
  z-index: 30;
}

/* Icon rail: collapsed sidebar shows icons only */
.ht-sidebar:not(.is-open) {
  width: 56px;
}

.ht-sidebar:not(.is-open) .ht-sidebar-brand {
  justify-content: center;
  padding: 0.75rem 0 1.5rem;
}

.ht-sidebar:not(.is-open) .ht-brand-text,
.ht-sidebar:not(.is-open) .ht-sidebar-footer,
.ht-sidebar:not(.is-open) .ht-sidebar-toggle {
  display: none;
}

.ht-sidebar:not(.is-open) .menu-list a {
  justify-content: center;
  padding: 0.6rem 0;
}

.ht-sidebar:not(.is-open) .menu-list a span:not(.icon) {
  display: none;
}

.ht-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.ht-brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.ht-brand-link:hover {
  opacity: 0.85;
}

.ht-sidebar .menu-list a {
  color: #b0b0c0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.ht-sidebar .menu-list a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ht-sidebar .menu-list a.is-active {
  background: rgba(72, 199, 142, 0.15);
  color: #48c78e;
  font-weight: 600;
}

.ht-sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
}

/* Sidebar hamburger toggle — hidden by default, shown on mobile */
.ht-sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: #b0b0c0;
  cursor: pointer;
  margin-left: auto;
  padding: 0.25rem;
  font-size: 1.1rem;
}

.ht-sidebar-toggle:hover {
  color: #fff;
}

/* Sidebar backdrop overlay (mobile only — hidden on desktop) */
.ht-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
}

/* Hamburger menu toggle — always visible */
.ht-menu-toggle {
  display: inline-flex;
  background: none;
  border: none;
  color: #4a4a4a;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.1rem;
}

.ht-menu-toggle:hover {
  color: #1a1a2e;
}

/* Main content area */
.ht-main {
  flex: 1;
  background: #f5f5f5;
  overflow-y: auto;
  min-width: 0;
}

/* Status bar */
.ht-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  gap: 0.75rem;
}

.ht-ws-indicator {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ht-ws-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.is-connected .ht-ws-dot { background: #48c78e; }
.is-disconnected .ht-ws-dot { background: #f14668; }

/* Compact table rows */
.table.is-compact td,
.table.is-compact th {
  padding: 0.4em 0.6em;
}

/* Log level badges */
.ht-log-debug { color: #7a7a7a; }
.ht-log-info { color: #3e8ed0; }
.ht-log-warning { color: #ffe08a; background: #946b00; }
.ht-log-error { color: #fff; background: #f14668; }
.ht-log-critical { color: #fff; background: #cc0f35; font-weight: 700; }

/* App status badges — stopped, disabled, blocked */
.ht-status-stopped {
  color: #946b00;
  background: #ffe08a;
}

.ht-status-disabled {
  color: #666;
  background: #e0e0e0;
}

.ht-status-blocked {
  color: #6b3fa0;
  background: #e8d5f5;
}

/* Entity state badges */
.ht-entity-on {
  color: #fff;
  background: #48c78e;
}

.ht-entity-off {
  color: #363636;
  background: #dbdbdb;
}

.ht-entity-unavailable {
  color: #fff;
  background: #f14668;
}

/* Override Bulma's red <code> color */
code {
  color: #4a4a4a;
}

/* Links wrapping code use blue link color */
a code {
  color: #3e8ed0;
}

a:hover code {
  text-decoration: underline;
}

/* Live update pulse animation */
@keyframes ht-pulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.ht-live-pulse {
  animation: ht-pulse 0.6s ease-in-out;
}

/* =====================================================
   Responsive: tablet & mobile (max-width: 768px)
   ===================================================== */
@media screen and (max-width: 768px) {
  /* Sidebar: fixed icon rail, expands to full overlay when open */
  .ht-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .ht-sidebar.is-open {
    width: 260px;
  }

  /* Show hamburger toggle inside sidebar when expanded on mobile */
  .ht-sidebar.is-open .ht-sidebar-toggle {
    display: inline-flex;
  }

  /* Show backdrop when sidebar is fully open */
  .ht-sidebar-backdrop {
    display: block;
  }

  /* Offset main content for the icon rail */
  .ht-main {
    margin-left: 56px;
  }

  .ht-status-bar {
    padding: 0.4rem 1rem;
  }

  /* Main content: reduce section padding on mobile */
  .ht-main .section {
    padding: 1rem;
  }

  /* Tables: horizontal scroll on mobile */
  .table-container,
  .box > .table,
  .box > div > .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dashboard columns: stack vertically on mobile */
  .columns.is-multiline .column.is-half {
    flex: none;
    width: 100%;
  }

  /* Bulma .level: wrap on mobile */
  .level {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .level-left,
  .level-right {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Tabs: scroll horizontally if too many */
  .tabs ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs li {
    flex-shrink: 0;
  }

  /* Field groups: stack vertically */
  .field.is-grouped {
    flex-wrap: wrap;
  }

  .field.is-grouped .control {
    margin-bottom: 0.5rem;
  }

  /* Page titles: smaller on mobile */
  .title.is-4 {
    font-size: 1.1rem;
  }

  .title.is-5 {
    font-size: 1rem;
  }
}

/* =====================================================
   Responsive: small phones (max-width: 480px)
   ===================================================== */
@media screen and (max-width: 480px) {
  .ht-main .section {
    padding: 0.75rem;
  }

  .box {
    padding: 0.75rem;
  }
}
