/* ============================================================
   Ubuntu 26.04 — Branch D utility apps
   Shared styles: Calculator, Clocks, Todo, Calendar, Weather, Disks
   All colors/radii via theme tokens; Yaru proportions.
   ============================================================ */

/* ---------- shared small-app toolbar ---------- */
.util-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--headerbar-bg);
  border-bottom: 1px solid var(--headerbar-border);
  flex: none;
  z-index: 1;
}
.util-toolbar .util-title {
  flex: 1; min-width: 0;
  font-size: var(--fs-l); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.util-toolbar .btn { min-height: 28px; padding: 0 12px; }

/* ============================================================
   Calculator (GNOME Calculator style)
   ============================================================ */
.calc-app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.calc-display {
  flex: none;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 12px 16px 10px;
  background: var(--window-bg);
  border-bottom: 1px solid var(--headerbar-border);
}
.calc-expr {
  text-align: right; color: var(--fg-dim); font-size: var(--fs-s);
  min-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.calc-result {
  text-align: right; font-size: var(--fs-xxl); font-weight: 700; color: var(--window-fg);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.calc-app.calc-error .calc-result { color: var(--error); font-size: var(--fs-l); }
.calc-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 10px;
}
.calc-btn {
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-s);
  background: var(--btn-bg);
  color: var(--window-fg);
  font-family: var(--font);
  font-size: var(--fs-l);
  display: flex; align-items: center; justify-content: center;
  cursor: default; min-height: 0;
  transition: background var(--speed-fast) var(--ease-out), border-color var(--speed-fast);
}
.calc-btn:hover { background: var(--btn-bg-hover); }
.calc-btn:active, .calc-btn.pressed { background: var(--btn-bg-active); }
.calc-btn.op { color: var(--accent); font-weight: 500; }
.calc-btn.fn { color: var(--fg-dim); }
.calc-btn.equal { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 500; }
.calc-btn.equal:hover { background: var(--accent-hover); }
.calc-btn.equal:active { background: var(--accent-active); }

/* ============================================================
   Clocks (GNOME Clocks style)
   ============================================================ */
.clocks-app { display: flex; flex: 1; min-height: 0; }
.clocks-side {
  width: 180px; flex: none;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--headerbar-border);
  display: flex; flex-direction: column;
}
.clocks-side .cs-title { padding: 14px 14px 4px; font-size: var(--fs-s); font-weight: 500; color: var(--fg-dim); }
.clocks-side .cs-count { padding: 0 14px 10px; font-size: var(--fs-xs); color: var(--fg-faint); }
.clocks-side .btn { margin: 0 10px 12px; justify-content: flex-start; }
.clocks-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clocks-world { flex: 1; min-height: 0; overflow: auto; }
.clock-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: var(--window-bg);
  border-bottom: 1px solid var(--headerbar-border);
}
.clock-card .cc-info { flex: 1; min-width: 0; }
.clock-card .cc-city { font-size: var(--fs-l); font-weight: 400; }
.clock-card .cc-offset { font-size: var(--fs-xs); color: var(--fg-dim); }
.clock-card .cc-time { font-size: var(--fs-xxl); font-weight: 300; letter-spacing: .5px; }
.clock-card .cc-remove {
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: transparent; color: var(--fg-faint);
  display: flex; align-items: center; justify-content: center;
  cursor: default; flex: none; opacity: 0;
  transition: opacity var(--speed-fast), background var(--speed-fast);
}
.clock-card:hover .cc-remove { opacity: 1; }
.clock-card .cc-remove:hover { background: var(--row-hover); color: var(--window-fg); }
.clock-card .cc-remove svg { width: 14px; height: 14px; }
.clock-card .cc-dial { width: 96px; height: 96px; flex: none; }
.picker-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-s); cursor: default;
}
.picker-row:hover { background: var(--row-hover); }
.picker-row .picker-name { flex: 1; }
.picker-row .picker-off { font-size: var(--fs-xs); color: var(--fg-dim); }

/* ============================================================
   Todo
   ============================================================ */
.todo-app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.todo-add { display: flex; gap: 8px; padding: 10px 12px; background: var(--window-bg); border-bottom: 1px solid var(--headerbar-border); flex: none; }
.todo-add .entry { flex: 1; min-width: 0; min-height: 34px; }
.todo-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.todo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-s); cursor: default;
}
.todo-row:hover { background: var(--row-hover); }
.todo-row .todo-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-row.done .todo-label { text-decoration: line-through; color: var(--fg-faint); }
.todo-row .todo-del {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; color: var(--fg-faint);
  display: flex; align-items: center; justify-content: center;
  cursor: default; flex: none; opacity: 0;
  transition: opacity var(--speed-fast), background var(--speed-fast);
}
.todo-row:hover .todo-del { opacity: 1; }
.todo-row .todo-del:hover { background: var(--row-hover); color: var(--window-fg); }
.todo-row .todo-del svg { width: 13px; height: 13px; }
.todo-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; flex: none;
  border-top: 1px solid var(--headerbar-border);
  background: var(--headerbar-bg);
  font-size: var(--fs-s); color: var(--fg-dim);
}
.todo-footer .tf-left { flex: 1; }

/* ============================================================
   Calendar app (Events)
   ============================================================ */
.calendar-app { display: flex; flex: 1; min-height: 0; }
.cal-month-view { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px; }
.cm-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px; }
.cm-month { flex: 1; font-size: var(--fs-l); font-weight: 500; }
.cm-grid { flex: 1; min-height: 0; overflow: auto; }
.cal-day-view {
  width: 264px; flex: none;
  border-left: 1px solid var(--headerbar-border);
  background: var(--window-bg);
  display: flex; flex-direction: column;
}
.cal-day-view .cd-head { padding: 12px 14px 6px; font-size: var(--fs-l); font-weight: 500; }
.cal-day-view .cd-sub { padding: 0 14px 10px; font-size: var(--fs-xs); color: var(--fg-dim); }
.cal-day-view .cd-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.cal-add-row {
  display: flex; gap: 8px; padding: 10px;
  border-top: 1px solid var(--headerbar-border);
  background: var(--headerbar-bg); flex: none;
}
.cal-add-row .entry { min-height: 32px; }
.cal-add-row .cd-time { width: 66px; flex: none; }
.cal-add-row .cd-title { flex: 1; min-width: 0; }
.cal-event-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-s); cursor: default;
}
.cal-event-row:hover { background: var(--row-hover); }
.cal-event-row .ce-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cal-event-row .ce-time { color: var(--fg-dim); font-size: var(--fs-xs); width: 40px; flex: none; }
.cal-event-row .ce-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event-row .ce-del {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; color: var(--fg-faint);
  display: flex; align-items: center; justify-content: center;
  cursor: default; flex: none; opacity: 0;
  transition: opacity var(--speed-fast), background var(--speed-fast);
}
.cal-event-row:hover .ce-del { opacity: 1; }
.cal-event-row .ce-del:hover { background: var(--row-hover); color: var(--window-fg); }
.cal-event-row .ce-del svg { width: 13px; height: 13px; }

/* ============================================================
   Weather
   ============================================================ */
.weather-app { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.weather-bg { position: absolute; inset: 0; z-index: 0; transition: background var(--speed-slow) var(--ease-out); }
.weather-bg.wx-clear  { background: linear-gradient(160deg, #9bd2ff 0%, #d3ecff 60%, #eaf6ff 100%); }
.weather-bg.wx-partly { background: linear-gradient(160deg, #8fbce8 0%, #cfe3f5 60%, #eef5fb 100%); }
.weather-bg.wx-cloudy { background: linear-gradient(160deg, #9aa6b2 0%, #c3cdd6 60%, #e4e9ee 100%); }
.weather-bg.wx-rain   { background: linear-gradient(160deg, #7d93a8 0%, #a9bdcc 60%, #d8e2ea 100%); }
.weather-bg.wx-storm  { background: linear-gradient(160deg, #5a6b7c 0%, #8495a5 60%, #b6c2cd 100%); }
.weather-bg.wx-snow   { background: linear-gradient(160deg, #c9d4e0 0%, #e6edf4 60%, #f4f7fb 100%); }
[data-theme="dark"] .weather-bg.wx-clear  { background: linear-gradient(160deg, #1c2b3d 0%, #24374d 60%, #1a2737 100%); }
[data-theme="dark"] .weather-bg.wx-partly { background: linear-gradient(160deg, #222c36 0%, #2b3947 60%, #202b36 100%); }
[data-theme="dark"] .weather-bg.wx-cloudy { background: linear-gradient(160deg, #23272c 0%, #2e333a 60%, #22262c 100%); }
[data-theme="dark"] .weather-bg.wx-rain   { background: linear-gradient(160deg, #202c38 0%, #2a3745 60%, #1f2a34 100%); }
[data-theme="dark"] .weather-bg.wx-storm  { background: linear-gradient(160deg, #171d24 0%, #202a33 60%, #171d24 100%); }
[data-theme="dark"] .weather-bg.wx-snow   { background: linear-gradient(160deg, #2a2f38 0%, #363c47 60%, #282d36 100%); }

.wx-toolbar { background: transparent; border-bottom: 1px solid var(--headerbar-border); position: relative; z-index: 2; }
.wx-select {
  font-family: var(--font); font-size: var(--fs-m);
  color: var(--window-fg); background: color-mix(in srgb, var(--entry-bg) 86%, transparent);
  border: 1px solid var(--entry-border); border-radius: var(--radius-s);
  padding: 4px 10px; min-height: 30px; max-width: 160px; outline: none;
}
.wx-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; z-index: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.wx-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--fg-dim); font-size: var(--fs-s); }
.wx-panel {
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-l);
  padding: 14px;
}
.wx-current { display: flex; align-items: center; gap: 18px; }
.wx-cur-icon { color: var(--accent); display: flex; flex: none; }
.wx-cur-icon svg { width: 56px; height: 56px; }
.wx-cur-temp { font-size: 46px; font-weight: 300; line-height: 1; }
.wx-cur-cond { color: var(--fg-dim); font-size: var(--fs-m); margin-top: 2px; }
.wx-details { margin-left: auto; display: grid; grid-template-columns: auto auto; gap: 4px 18px; font-size: var(--fs-s); color: var(--fg-dim); }
.wx-details b { color: var(--window-fg); font-weight: 500; }
.wx-hourly { display: flex; gap: 8px; overflow: hidden; }
.wx-h-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; border-radius: var(--radius-s);
}
.wx-h-item:hover { background: var(--row-hover); }
.wx-h-item .wh-time { font-size: var(--fs-xs); color: var(--fg-dim); }
.wx-h-item .wh-temp { font-size: var(--fs-m); font-weight: 500; }
.wx-h-item svg { width: 20px; height: 20px; color: var(--accent); }
.wx-days { display: flex; flex-direction: column; }
.wx-day {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 6px; border-radius: var(--radius-s);
}
.wx-day:hover { background: var(--row-hover); }
.wx-day .wd-name { width: 74px; flex: none; font-size: var(--fs-s); }
.wx-day .wd-icon { color: var(--accent); display: flex; flex: none; }
.wx-day .wd-icon svg { width: 18px; height: 18px; }
.wx-day .wd-low { width: 44px; text-align: right; font-size: var(--fs-s); color: var(--fg-dim); flex: none; }
.wx-day .wd-high { width: 44px; text-align: right; font-size: var(--fs-s); font-weight: 500; flex: none; }
.wx-day .wd-bar { flex: 1; height: 5px; background: var(--row-hover); border-radius: 3px; position: relative; overflow: hidden; }
.wx-day .wd-bar > i {
  position: absolute; top: 0; height: 100%;
  background: var(--accent); border-radius: 3px; opacity: .85;
}

/* ============================================================
   Disks
   ============================================================ */
.disks-app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.disks-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; flex: none;
  border-bottom: 1px solid var(--headerbar-border);
  background: var(--headerbar-bg);
  font-size: var(--fs-s); color: var(--fg-dim);
}
.disks-list { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.disk-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-l); padding: 14px;
  transition: opacity var(--speed-normal);
}
.disk-card.off { opacity: .55; }
.disk-card .dh-icon { color: var(--accent); display: flex; flex: none; }
.disk-card .dh-icon svg { width: 28px; height: 28px; }
.disk-card .dh-info { min-width: 0; }
.disk-card .dh-name { font-size: var(--fs-l); font-weight: 500; }
.disk-card .dh-kind { font-size: var(--fs-xs); color: var(--fg-dim); }
.disk-card .dh-mount { font-size: var(--fs-xs); color: var(--fg-faint); font-family: var(--font-mono); }
.disk-head { display: flex; align-items: center; gap: 12px; }
.disk-head .dh-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
.disk-head .dh-actions .btn { min-height: 28px; }
.disk-bar { margin-top: 12px; }
.disk-bar .bar { height: 8px; background: var(--row-hover); border-radius: 4px; overflow: hidden; }
.disk-bar .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.disk-bar .cap { display: flex; justify-content: space-between; margin-top: 5px; font-size: var(--fs-xs); color: var(--fg-dim); }
.disk-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-s); color: var(--fg-dim); }
.disk-part {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-s);
  background: var(--row-hover); font-size: var(--fs-xs);
}
.disk-part .dp-name { font-weight: 500; color: var(--window-fg); }
.disk-part .dp-fs { color: var(--fg-dim); }
.disk-part .dp-size { margin-left: auto; color: var(--fg-dim); }
.disk-smart {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 10px;
  background: var(--success-bg); color: var(--success);
  border-radius: var(--radius-s); font-size: var(--fs-xs);
}
.disk-smart svg { width: 14px; height: 14px; }