/* ============================================================
   Misc apps — Clock, Image Viewer, System Monitor
   ============================================================ */
/* Clock */
.clock-layout{
  display:flex;flex-direction:column;height:100%;align-items:center;justify-content:center;
  padding:18px;gap:10px;background:var(--bg-window);
}
.clock-big{
  font-size:64px;font-weight:200;letter-spacing:2px;
  color:var(--text);
}
.clock-small{font-size:14px;color:var(--text-secondary)}
.clock-cities{
  margin-top:20px;display:flex;flex-direction:column;gap:8px;
  width:100%;max-width:300px;
}
.clock-city-row{
  display:flex;justify-content:space-between;
  padding:8px 14px;background:var(--bg-input);border-radius:8px;
  font-size:12.5px;
}
.clock-city-name{color:var(--text-secondary)}
.clock-city-time{font-weight:600;font-family:var(--font-mono)}

.clock-alarms{margin-top:18px;width:100%;max-width:300px}
.clock-alarms-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:6px}
.alarm-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.alarm-time{font-family:var(--font-mono);font-weight:600;font-size:14px}
.alarm-label{font-size:11px;color:var(--text-secondary)}

/* System monitor */
.monitor-layout{
  display:flex;flex-direction:column;height:100%;background:var(--bg-window);
}
.monitor-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--bg-window-alt);
}
.monitor-tab{
  background:transparent;border:0;color:var(--text-secondary);
  padding:9px 16px;font-size:12px;cursor:pointer;
  border-bottom:2px solid transparent;font-weight:500;
}
.monitor-tab:hover{color:var(--text)}
.monitor-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.monitor-page{display:none;flex:1;overflow-y:auto;padding:18px}
.monitor-page.active{display:block}
.monitor-chart{
  background:var(--bg-input);border:1px solid var(--border);border-radius:8px;
  margin-bottom:10px;overflow:hidden;position:relative;
}
.monitor-chart-title{
  padding:8px 12px;font-size:11px;color:var(--text-secondary);
  border-bottom:1px solid var(--border);display:flex;justify-content:space-between;
}
.monitor-chart-canvas{
  height:110px;width:100%;
}
.monitor-processes{
  width:100%;border-collapse:collapse;font-size:12px;
}
.monitor-processes th{
  text-align:left;padding:6px 10px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);
  border-bottom:1px solid var(--border);position:sticky;top:0;
  background:var(--bg-window);
}
.monitor-processes td{
  padding:5px 10px;border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.monitor-processes tr:hover{background:var(--bg-hover)}
.monitor-process-name{font-weight:500}
.bar-graph{
  height:14px;background:var(--bg-active);border-radius:7px;overflow:hidden;
}
.bar-graph .fill{height:100%;background:var(--accent);border-radius:7px;transition:width .4s var(--ease-out);display:block}
.bar-graph .fill.green{background:var(--yaru-green)}
.bar-graph .fill.yellow{background:var(--yaru-yellow)}
.bar-graph .fill.red{background:var(--yaru-red)}

/* Image viewer */
.viewer-layout{
  display:flex;flex-direction:column;height:100%;background:#180c12;color:#ddd;
}
.viewer-toolbar{
  height:38px;display:flex;align-items:center;gap:4px;padding:0 8px;
  background:#1f0f16;border-bottom:1px solid var(--border);flex-shrink:0;
}
.viewer-toolbar button{
  background:transparent;border:0;color:#ccc;padding:5px 9px;border-radius:6px;font-size:12px;
}
.viewer-toolbar button:hover{background:rgba(255,255,255,.08);color:#fff}
.viewer-toolbar .sep{width:1px;height:18px;background:var(--border);margin:0 2px}
.viewer-stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:linear-gradient(135deg,#1a0d14 0%,#20141b 100%);
  padding:20px;
}
.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 10px 30px rgba(0,0,0);transition:transform .2s;
  border-radius:2px;
}

/* spinner */
.spinner{
  display:inline-block;width:22px;height:22px;border:2px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;
}