/* ---------------------------------------------------------------------------------------
   Device Activity dashboard — shows the JSON payload from DeviceActivityManager (Android),
   received over the "device_activity" RTCDataChannel (Firestore field as fallback). Lives
   inside the full-screen #appUsageScreen (see style.css for that screen's own chrome); this
   file only styles the dashboard content itself, so it doesn't care whether it's on that
   screen or embedded anywhere else. Uses the same CSS variables as style.css to match.
--------------------------------------------------------------------------------------- */

.device-activity-updated {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-on-surface-muted);
  white-space: nowrap;
}

/* Responsive: single column on phones, two columns from tablet width up (Today + Device side
   by side), with the App Usage list always spanning the full row via .da-section-wide. */
.device-activity-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 4px;
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .device-activity-body {
    grid-template-columns: 1fr 1fr;
  }

  .da-section-wide {
    grid-column: 1 / -1;
  }
}

.da-section {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.da-section-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-muted);
}

/* Each stat gets its own tile rather than a plain label/value row — reads more like a real
   dashboard, and reflows its column count with the available width instead of a fixed layout. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.stat-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: var(--color-surface-raised);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}

.stat-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.15);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 16px;
  height: 16px;
}

.stat-tile-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.stat-tile .device-activity-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stat-tile .device-activity-value {
  font-size: 15px;
  text-align: left;
}

.stat-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Diagrammatic 4-bar signal strength indicator next to the Signal stat's text value — see
   renderSignalBars() in device-dashboard.js for how the filled-bar count is derived. */
.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex-shrink: 0;
}

.signal-bars .signal-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--color-on-surface-muted);
  opacity: 0.35;
}

.signal-bars .signal-bar.filled {
  background: var(--color-primary);
  opacity: 1;
}

.signal-bars .signal-bar:nth-child(1) { height: 35%; }
.signal-bars .signal-bar:nth-child(2) { height: 58%; }
.signal-bars .signal-bar:nth-child(3) { height: 80%; }
.signal-bars .signal-bar:nth-child(4) { height: 100%; }

.device-activity-label {
  color: var(--color-on-surface-muted);
  white-space: nowrap;
}

.device-activity-value {
  font-weight: 700;
  /* Dynamic, device-reported text (current app name, etc.) — wraps instead of clipping with an
     ellipsis, since it must stay fully readable rather than being cut off. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.device-activity-unavailable {
  font-size: 13px;
  color: var(--color-on-surface-muted);
  text-align: center;
  padding: 6px 0;
  margin: 0;
}

.device-activity-offline {
  color: var(--color-error);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------------------
   App usage list — each row is app name / time, with a bar sized relative to the busiest app
   so relative usage reads at a glance instead of just as raw numbers.
--------------------------------------------------------------------------------------- */

.da-most-used {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-on-surface-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.da-most-used strong {
  color: var(--color-on-background);
  font-weight: 700;
}

.da-app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.da-app-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.da-app-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.da-app-row-top .da-app-time {
  flex-shrink: 0;
  padding-top: 1px;
}

.da-app-rank {
  color: var(--color-on-surface-muted);
  font-weight: 600;
  font-size: 11px;
  margin-right: 6px;
}

.da-app-name-block {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.da-app-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.da-app-package {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-on-surface-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.da-app-time {
  font-weight: 700;
  color: var(--color-on-surface-muted);
  white-space: nowrap;
}

.da-app-bar-track {
  height: 5px;
  border-radius: 3px;
  background: var(--color-surface-raised);
  overflow: hidden;
}

.da-app-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-primary);
}

.da-app-row:first-child .da-app-bar-fill {
  background: var(--color-live);
}

/* PREMIUM DASHBOARD POLISH */
.device-activity-body{gap:clamp(14px,2vw,22px)}
.da-section{position:relative;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(31,31,31,.96),rgba(25,25,25,.9));box-shadow:0 16px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)}
.da-section-title{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.62)}
.da-section-title::before{content:"";width:3px;height:13px;border-radius:999px;background:var(--color-primary);box-shadow:0 0 12px rgba(229,9,20,.5)}
.stat-tile{min-height:62px;border:1px solid rgba(255,255,255,.055);background:linear-gradient(145deg,rgba(48,48,48,.9),rgba(39,39,39,.84));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:transform .18s ease,border-color .18s ease}
.stat-tile:hover{transform:translateY(-2px);border-color:rgba(229,9,20,.2)}
.stat-icon{width:34px;height:34px;background:rgba(229,9,20,.11);border:1px solid rgba(229,9,20,.14);box-shadow:0 0 20px rgba(229,9,20,.07)}
.stat-tile .device-activity-value{font-size:clamp(14px,1.5vw,16px);letter-spacing:-.015em}
.da-most-used{padding:10px 12px;border:1px solid rgba(229,9,20,.13);border-radius:10px;background:rgba(229,9,20,.055)}
.da-app-list{max-height:min(48dvh,470px);overflow-y:auto;overflow-x:hidden;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(229,9,20,.65) rgba(255,255,255,.04)}
.da-app-list::-webkit-scrollbar{width:5px}.da-app-list::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}.da-app-list::-webkit-scrollbar-thumb{background:rgba(229,9,20,.65);border-radius:999px}
.da-app-row{padding:8px 10px;border:1px solid transparent;border-radius:10px;transition:background-color .18s ease,border-color .18s ease}
.da-app-row:hover{border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.025)}
.da-app-row:first-child{background:linear-gradient(90deg,rgba(70,211,105,.075),transparent)}
.da-app-rank{min-width:20px}.da-app-bar-track{height:6px;background:rgba(255,255,255,.065)}
.da-app-bar-fill{box-shadow:0 0 10px rgba(229,9,20,.22)}.da-app-row:first-child .da-app-bar-fill{box-shadow:0 0 10px rgba(70,211,105,.26)}
@media(hover:none){.stat-tile:hover{transform:none}}
@media(max-width:639px){.da-section{border-radius:18px}.da-app-list{max-height:min(44dvh,390px)}.da-app-row{padding-left:6px;padding-right:6px}}
@media(min-width:1024px){.da-section{border-radius:20px}.stat-tile{min-height:68px}}

/* FULL RESPONSIVE DASHBOARD HARDENING */
.device-activity-body,.da-section,.stat-grid,.stat-tile,.stat-tile-text,.stat-value-row,.da-app-row,.da-app-row-top,.da-app-name-block,.da-app-list{min-width:0;max-width:100%}
.da-section{overflow:hidden}
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.stat-tile{overflow:hidden}.stat-tile-text{flex:1 1 auto}
.device-activity-label,.device-activity-value,.da-app-name,.da-app-package{max-width:100%}
.stat-tile .device-activity-label{white-space:normal;overflow-wrap:anywhere}
.stat-tile .device-activity-value{line-height:1.3}
.da-app-row-top{min-width:0}.da-app-time{max-width:40%;text-align:right}
.da-app-bar-track{width:100%;max-width:100%}

@media(max-width:374px){
  .device-activity-body{gap:10px}
  .da-section{padding:12px;border-radius:14px}
  .stat-grid{grid-template-columns:1fr;gap:8px}
  .stat-tile{padding:9px 10px}
  .stat-icon{width:28px;height:28px}
  .da-app-row-top{gap:8px}
}

@media(min-width:375px) and (max-width:639px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:640px){
  .device-activity-body{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .da-section{height:100%}
  .da-section-wide{grid-column:1/-1}
}

@media(min-width:1024px){
  .device-activity-body{gap:20px}
  .da-section{padding:20px}
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:1440px){
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}