/* ── INFOTECH IoT Panel ── components.css ── */

/* ── View Header ── */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.view-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--md-on-bg);
  letter-spacing: -0.3px;
}

.view-subtitle {
  font-size: 13px;
  color: var(--md-on-surface-var);
  margin-top: 3px;
}

.section-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--md-on-surface-var);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-var);
  padding: 2px 7px;
  border-radius: 10px;
}

/* ── Device Status Badge ── */
.device-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.device-status-badge.online {
  background: var(--md-success-container);
  color: var(--md-success);
  border: 1px solid color-mix(in srgb, var(--md-success) 30%, transparent);
}

.status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Stats Bar ── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.stat-item {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--md-elevation-1);
}

.stat-icon {
  color: var(--md-primary);
  font-size: 22px;
  opacity: 0.8;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.stat-label {
  font-size: 11px;
  color: var(--md-on-surface-var);
  margin-top: 2px;
}

/* ── Sensor Cards Grid ── */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.sensor-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-lg);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--md-elevation-1);
  cursor: default;
}

.sensor-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sensor-color, var(--md-primary));
  opacity: 0.7;
}

.sensor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-elevation-2);
}

.sensor-card.status-warning {
  border-color: color-mix(in srgb, var(--md-warning) 28%, transparent);
  background: linear-gradient(135deg, var(--md-surface) 0%, color-mix(in srgb, var(--md-warning) 5%, transparent) 100%);
}

.sensor-card.status-alert {
  border-color: color-mix(in srgb, var(--md-error) 28%, transparent);
  background: linear-gradient(135deg, var(--md-surface) 0%, color-mix(in srgb, var(--md-error) 6%, transparent) 100%);
}

.sensor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sensor-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(var(--sensor-color, #4DDDC9), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--sensor-color, var(--md-primary)) 15%, transparent);
}

.sensor-icon-wrap .material-symbols-rounded {
  color: var(--sensor-color, var(--md-primary));
  font-size: 20px;
}

.sensor-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.sensor-status-dot.status-normal  { background: var(--md-success); }
.sensor-status-dot.status-warning { background: var(--md-warning); }
.sensor-status-dot.status-alert   { background: var(--md-error); box-shadow: 0 0 6px var(--md-error); }

.sensor-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.sensor-number {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--md-on-surface);
  line-height: 1;
  letter-spacing: -1px;
}

.sensor-unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--md-on-surface-var);
}

.sensor-label {
  font-size: 12px;
  color: var(--md-on-surface-var);
  margin-bottom: 8px;
}

.sensor-range {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--md-on-surface-var);
  opacity: 0.6;
  margin-bottom: 8px;
}

.sensor-spark-wrap {
  height: 36px;
}

/* ── Packets List ── */
.packets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.packet-row {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
  box-shadow: var(--md-elevation-1);
}

.packet-row:hover { border-color: var(--md-primary-border); }

.packet-row-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.packet-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--md-primary);
  background: var(--md-primary-container);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 64px;
  text-align: center;
}

.packet-info { flex: 1; min-width: 0; }

.packet-ts {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.packet-meta {
  font-size: 11px;
  color: var(--md-on-surface-var);
  margin-top: 2px;
}

.packet-readings-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--md-surface-2);
  color: var(--md-on-surface-var);
  border: 1px solid var(--md-outline);
  white-space: nowrap;
}

.packet-expand-icon {
  color: var(--md-on-surface-var);
  transition: transform var(--transition);
  font-size: 20px;
  flex-shrink: 0;
}

.packet-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1);
}

.packet-detail.open { max-height: 400px; }

.packet-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
  border-top: 1px solid var(--md-outline);
  padding-top: 14px;
}

.packet-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--md-surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.packet-detail-item .material-symbols-rounded { font-size: 18px; }

.detail-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.detail-lbl {
  font-size: 11px;
  color: var(--md-on-surface-var);
  margin-top: 1px;
}

/* ── Charts View ── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 16px;
}

.chart-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--md-elevation-1);
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.chart-card-period {
  font-size: 11px;
  color: var(--md-on-surface-var);
  margin-top: 2px;
}

.chart-stats {
  display: flex;
  gap: 14px;
}

.chart-stat {
  text-align: right;
}

.chart-stat span {
  display: block;
  font-size: 10px;
  color: var(--md-on-surface-var);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chart-stat strong {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--md-on-surface);
}

.chart-area {
  height: 180px;
  position: relative;
}

/* ── Settings ── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.settings-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--md-elevation-1);
}

.settings-card.full-width {
  grid-column: 1 / -1;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--md-surface-2);
  border-bottom: 1px solid var(--md-outline);
  font-size: 14px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.settings-card-header .material-symbols-rounded {
  color: var(--md-primary);
  font-size: 20px;
}

.settings-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-group.full { width: 100%; }

.input-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-on-surface-var);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.input-label.alert-low  { color: #EF5350; }
.input-label.warn-low   { color: #FFA726; }
.input-label.warn-high  { color: #FFA726; }
.input-label.alert-high { color: #EF5350; }

.md-input {
  background: var(--md-surface-2);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--md-on-surface);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}

.md-input:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-ring);
}

.md-input.sm {
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.md-select {
  cursor: pointer;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23BEC8C5' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.light-theme .md-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5C59' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.toggle-label {
  font-size: 14px;
  color: var(--md-on-surface);
  font-weight: 500;
}

.toggle-desc {
  font-size: 12px;
  color: var(--md-on-surface-var);
  margin-top: 2px;
}

.md-switch {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.md-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.switch-track {
  display: block;
  width: 52px;
  height: 28px;
  background: var(--md-surface-variant);
  border-radius: 14px;
  position: relative;
  transition: background var(--transition);
}

.switch-track::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--md-on-surface-var);
  transition: transform var(--transition), background var(--transition);
}

.md-switch input:checked + .switch-track {
  background: var(--md-primary);
}

.md-switch input:checked + .switch-track::after {
  transform: translateX(24px);
  background: var(--md-on-primary);
}

/* ── Threshold rows ── */
.threshold-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--md-outline);
}

.settings-threshold-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--md-outline-variant);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-threshold-row:last-child { border-bottom: none; }

.settings-threshold-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface);
}

.unit-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--md-surface-variant);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--md-on-surface-var);
}

.threshold-inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* ── Settings Actions ── */
.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 24px;
}

.md-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  letter-spacing: 0.1px;
}

.md-btn.filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.md-btn.filled:hover {
  background: var(--md-primary-dim);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--md-primary) 35%, transparent);
}

.md-btn.outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-primary);
}

.md-btn.outlined:hover {
  background: var(--md-primary-container);
}

.md-btn .material-symbols-rounded { font-size: 18px; }

/* ── About View ── */
.about-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}

.about-logo-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--md-elevation-1);
}

.about-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter:
    brightness(0) saturate(100%)
    invert(79%) sepia(40%) saturate(600%) hue-rotate(136deg) brightness(1.05)
    drop-shadow(0 4px 16px rgba(77,221,201,0.35));
  transition: filter 300ms ease;
}

.about-logo:hover {
  filter:
    brightness(0) saturate(100%)
    invert(82%) sepia(50%) saturate(700%) hue-rotate(136deg) brightness(1.15)
    drop-shadow(0 6px 24px rgba(77,221,201,0.55));
}

.light-theme .about-logo {
  filter:
    brightness(0) saturate(100%)
    invert(34%) sepia(68%) saturate(550%) hue-rotate(148deg) brightness(0.88)
    drop-shadow(0 4px 16px rgba(0,121,107,0.25));
}

.light-theme .about-logo:hover {
  filter:
    brightness(0) saturate(100%)
    invert(34%) sepia(68%) saturate(600%) hue-rotate(148deg) brightness(0.78)
    drop-shadow(0 6px 24px rgba(0,121,107,0.40));
}

.about-tagline {
  font-size: 13px;
  color: var(--md-on-surface-var);
  text-align: center;
  line-height: 1.5;
}

.about-version-badge {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--md-primary-container);
  color: var(--md-primary);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--md-primary-border);
}

.about-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.about-info-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--md-elevation-1);
}

.about-icon {
  font-size: 28px;
  color: var(--md-primary);
  margin-bottom: 10px;
}

.about-info-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-on-surface);
  margin-bottom: 6px;
}

.about-info-card p {
  font-size: 13px;
  color: var(--md-on-surface-var);
  line-height: 1.6;
}

/* ── Info Grid (device info) ── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.info-item {
  background: var(--md-surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.info-item span {
  display: block;
  font-size: 11px;
  color: var(--md-on-surface-var);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.info-item strong {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--md-on-surface);
  font-weight: 500;
}

/* ── Icon Button ── */
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-on-surface-var);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.icon-btn:hover {
  background: var(--md-surface-2);
  color: var(--md-on-surface);
}

/* ── Hamburger Icon Animation ── */
.hamburger-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.hamburger-icon .bar {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

/*
  Transition rules split by state so open/close each get their own
  staggered choreography:
  - Closing: top & bot spring back after a 50ms head-start (mid has already
    appeared), mid re-enters with a subtle overshoot spring.
  - Opening: mid vanishes first (0 ms delay), top & bot then cross into X
    at 100 ms, giving a "bars fold in then snap" feel.
*/
.hamburger-icon .bar-top,
.hamburger-icon .bar-bot {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.hamburger-icon .bar-mid {
  transition:
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) 0s,
    opacity   0.22s ease 0s;
}

.topbar-menu-btn.is-open .hamburger-icon .bar-top {
  transform: translateY(4.5px) rotate(45deg);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.topbar-menu-btn.is-open .hamburger-icon .bar-bot {
  transform: translateY(-4.5px) rotate(-45deg);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.topbar-menu-btn.is-open .hamburger-icon .bar-mid {
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 0.18s ease 0s,
    opacity   0.14s ease 0s;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--md-surface-3);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: transform 250ms cubic-bezier(0.2,0,0,1), opacity 250ms ease;
  box-shadow: var(--md-elevation-3);
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-success .material-symbols-rounded { color: var(--md-success); }
.toast-warning .material-symbols-rounded { color: var(--md-warning); }
.toast-error   .material-symbols-rounded { color: var(--md-error); }
.toast-info    .material-symbols-rounded { color: var(--md-primary); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-surface-variant); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-var); }

.light-theme ::-webkit-scrollbar-thumb { background: var(--md-surface-3); }
.light-theme ::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-var); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .charts-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .about-layout { grid-template-columns: 1fr; }
  .threshold-inputs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .sensor-grid { grid-template-columns: repeat(2, 1fr); }
  .packet-readings-preview { display: none; }
  .view-title { font-size: 22px; }
  .sensor-number { font-size: 22px; }
  .threshold-inputs { grid-template-columns: repeat(2, 1fr); }
}