:root {
  color-scheme: light;
  --bg: #f7f7f4;
  --panel: #ffffff;
  --panel-muted: #efeee9;
  --text: #1d252c;
  --muted: #65717b;
  --line: #d8d7d0;
  --accent: #176b5d;
  --accent-strong: #0f5045;
  --danger: #a43a3a;
  --shadow: 0 12px 30px rgb(29 37 44 / 10%);
  --topbar-bg: #1a3a5c;
  --topbar-text: #ffffff;
  --topbar-border: rgba(255, 255, 255, 0.1);
  --topbar-control-border: rgba(255, 255, 255, 0.28);
  --topbar-control-hover-bg: rgba(255, 255, 255, 0.12);
  --topbar-control-hover-border: rgba(255, 255, 255, 0.55);
  --sidebar-bg: #274f7a;
  --sidebar-text: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.12);
  --sidebar-active-bg: rgba(255, 255, 255, 0.2);
  --sidebar-divider: rgba(255, 255, 255, 0.15);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-strong);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111614;
  --panel: #19211e;
  --panel-muted: #222b27;
  --text: #f2f4ef;
  --muted: #aeb8b0;
  --line: #35413b;
  --accent: #7cc9b3;
  --accent-strong: #a0d9c9;
  --danger: #e08a8a;
  --shadow: 0 12px 30px rgb(0 0 0 / 25%);
  --topbar-bg: #101820;
  --topbar-text: #f2f4ef;
  --topbar-border: rgba(255, 255, 255, 0.1);
  --topbar-control-border: rgba(255, 255, 255, 0.25);
  --topbar-control-hover-bg: rgba(124, 201, 179, 0.16);
  --topbar-control-hover-border: rgba(124, 201, 179, 0.6);
  --sidebar-bg: #1d2a31;
  --sidebar-text: #f2f4ef;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-hover-bg: rgba(124, 201, 179, 0.14);
  --sidebar-active-bg: rgba(124, 201, 179, 0.24);
  --sidebar-divider: rgba(255, 255, 255, 0.14);
}

:root[data-theme="ocean"] {
  color-scheme: light;
  --bg: #eef8fa;
  --panel: #ffffff;
  --panel-muted: #dceff2;
  --text: #102a35;
  --muted: #54717a;
  --line: #bdd6dc;
  --accent: #0f766e;
  --accent-strong: #0b5d56;
  --danger: #a43a3a;
  --shadow: 0 12px 30px rgb(16 42 53 / 10%);
  --topbar-bg: #064663;
  --topbar-text: #ffffff;
  --sidebar-bg: #0b7285;
  --sidebar-text: #ffffff;
}

:root[data-theme="solarized"] {
  color-scheme: light;
  --bg: #fdf6e3;
  --panel: #fffaf0;
  --panel-muted: #eee8d5;
  --text: #073642;
  --muted: #657b83;
  --line: #d8cfb1;
  --accent: #268bd2;
  --accent-strong: #1d6fa8;
  --danger: #dc322f;
  --shadow: 0 12px 30px rgb(7 54 66 / 10%);
  --topbar-bg: #073642;
  --topbar-text: #fdf6e3;
  --sidebar-bg: #586e75;
  --sidebar-text: #fdf6e3;
}

:root[data-theme="github-light"] {
  color-scheme: light;
  --bg: #f6f8fa;
  --panel: #ffffff;
  --panel-muted: #eaeef2;
  --text: #24292f;
  --muted: #57606a;
  --line: #d0d7de;
  --accent: #0969da;
  --accent-strong: #0550ae;
  --danger: #cf222e;
  --shadow: 0 12px 30px rgb(36 41 47 / 10%);
  --topbar-bg: #24292f;
  --topbar-text: #ffffff;
  --sidebar-bg: #57606a;
  --sidebar-text: #ffffff;
}

:root[data-theme="atom-one-light"] {
  color-scheme: light;
  --bg: #fafafa;
  --panel: #ffffff;
  --panel-muted: #e5e5e6;
  --text: #383a42;
  --muted: #696c77;
  --line: #d7dae0;
  --accent: #4078f2;
  --accent-strong: #2f5fc7;
  --danger: #ca1243;
  --shadow: 0 12px 30px rgb(56 58 66 / 10%);
  --topbar-bg: #383a42;
  --topbar-text: #ffffff;
  --sidebar-bg: #4f5666;
  --sidebar-text: #ffffff;
}

:root[data-theme="catppuccin-latte"] {
  color-scheme: light;
  --bg: #eff1f5;
  --panel: #ffffff;
  --panel-muted: #dce0e8;
  --text: #4c4f69;
  --muted: #6c6f85;
  --line: #ccd0da;
  --accent: #8839ef;
  --accent-strong: #6c2bc2;
  --danger: #d20f39;
  --shadow: 0 12px 30px rgb(76 79 105 / 10%);
  --topbar-bg: #4c4f69;
  --topbar-text: #eff1f5;
  --sidebar-bg: #6c6f85;
  --sidebar-text: #eff1f5;
}

:root[data-theme="nord"] {
  color-scheme: dark;
  --bg: #2e3440;
  --panel: #3b4252;
  --panel-muted: #434c5e;
  --text: #eceff4;
  --muted: #c7ceda;
  --line: #4c566a;
  --accent: #88c0d0;
  --accent-strong: #a3d4df;
  --danger: #bf616a;
  --shadow: 0 12px 30px rgb(0 0 0 / 25%);
  --topbar-bg: #242933;
  --topbar-text: #eceff4;
  --sidebar-bg: #3b4252;
  --sidebar-text: #eceff4;
}

:root[data-theme="dracula"] {
  color-scheme: dark;
  --bg: #282a36;
  --panel: #343746;
  --panel-muted: #44475a;
  --text: #f8f8f2;
  --muted: #c9c9bf;
  --line: #56596f;
  --accent: #bd93f9;
  --accent-strong: #d3b7ff;
  --danger: #ff5555;
  --shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --topbar-bg: #191a21;
  --topbar-text: #f8f8f2;
  --sidebar-bg: #44475a;
  --sidebar-text: #f8f8f2;
}

:root[data-theme="gruvbox"] {
  color-scheme: dark;
  --bg: #282828;
  --panel: #32302f;
  --panel-muted: #3c3836;
  --text: #fbf1c7;
  --muted: #d5c4a1;
  --line: #665c54;
  --accent: #d79921;
  --accent-strong: #fabd2f;
  --danger: #fb4934;
  --shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --topbar-bg: #1d2021;
  --topbar-text: #fbf1c7;
  --sidebar-bg: #3c3836;
  --sidebar-text: #fbf1c7;
}

:root[data-theme="catppuccin"] {
  color-scheme: dark;
  --bg: #1e1e2e;
  --panel: #242437;
  --panel-muted: #313244;
  --text: #cdd6f4;
  --muted: #a6adc8;
  --line: #45475a;
  --accent: #cba6f7;
  --accent-strong: #ddb6f2;
  --danger: #f38ba8;
  --shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --topbar-bg: #181825;
  --topbar-text: #cdd6f4;
  --sidebar-bg: #313244;
  --sidebar-text: #cdd6f4;
}

:root[data-theme="rose-pine"] {
  color-scheme: dark;
  --bg: #191724;
  --panel: #1f1d2e;
  --panel-muted: #26233a;
  --text: #e0def4;
  --muted: #908caa;
  --line: #403d52;
  --accent: #c4a7e7;
  --accent-strong: #d8beff;
  --danger: #eb6f92;
  --shadow: 0 12px 30px rgb(0 0 0 / 30%);
  --topbar-bg: #120f1d;
  --topbar-text: #e0def4;
  --topbar-border: rgba(224, 222, 244, 0.08);
  --topbar-control-border: rgba(224, 222, 244, 0.22);
  --topbar-control-hover-bg: rgba(196, 167, 231, 0.16);
  --topbar-control-hover-border: rgba(196, 167, 231, 0.55);
  --sidebar-bg: #26233a;
  --sidebar-text: #e0def4;
  --sidebar-border: rgba(224, 222, 244, 0.08);
  --sidebar-hover-bg: rgba(196, 167, 231, 0.12);
  --sidebar-active-bg: rgba(196, 167, 231, 0.22);
  --sidebar-divider: rgba(224, 222, 244, 0.12);
}

:root[data-theme="rose-pine-dawn"] {
  color-scheme: light;
  --bg: #faf4ed;
  --panel: #fffaf3;
  --panel-muted: #f2e9de;
  --text: #575279;
  --muted: #797593;
  --line: #dfdad9;
  --accent: #907aa9;
  --accent-strong: #74668d;
  --danger: #b4637a;
  --shadow: 0 12px 30px rgb(87 82 121 / 10%);
  --topbar-bg: #575279;
  --topbar-text: #faf4ed;
  --topbar-border: rgba(250, 244, 237, 0.1);
  --topbar-control-border: rgba(250, 244, 237, 0.28);
  --topbar-control-hover-bg: rgba(250, 244, 237, 0.12);
  --topbar-control-hover-border: rgba(250, 244, 237, 0.55);
  --sidebar-bg: #797593;
  --sidebar-text: #faf4ed;
  --sidebar-border: rgba(250, 244, 237, 0.1);
  --sidebar-hover-bg: rgba(250, 244, 237, 0.12);
  --sidebar-active-bg: rgba(250, 244, 237, 0.22);
  --sidebar-divider: rgba(250, 244, 237, 0.15);
}

:root[data-theme="cute-pink"] {
  color-scheme: light;
  --bg: #fff0f5;
  --panel: #ffffff;
  --panel-muted: #fce4ee;
  --text: #4a1942;
  --muted: #9e6080;
  --line: #f5c6d6;
  --accent: #e91e8c;
  --accent-strong: #c0157a;
  --danger: #d32f2f;
  --shadow: 0 12px 30px rgb(74 25 66 / 10%);
  --topbar-bg: #880e4f;
  --topbar-text: #ffffff;
  --topbar-border: rgba(255, 255, 255, 0.1);
  --topbar-control-border: rgba(255, 255, 255, 0.28);
  --topbar-control-hover-bg: rgba(255, 255, 255, 0.12);
  --topbar-control-hover-border: rgba(255, 255, 255, 0.55);
  --sidebar-bg: #ad1457;
  --sidebar-text: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.12);
  --sidebar-active-bg: rgba(255, 255, 255, 0.22);
  --sidebar-divider: rgba(255, 255, 255, 0.15);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Bootstrap card theming — apply our design tokens to all .card components */
.card {
  --bs-card-bg: var(--panel);
  --bs-card-border-color: var(--line);
}

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 12px 24px;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-border);
}

.brand-link {
  min-width: 0;
}

.brand-logo {
  display: block;
  width: min(185px, 36vw);
  height: auto;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.icon-button,
.signin-button,
.user-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  color: var(--text);
}

.icon-button:hover,
.icon-button:focus-visible,
.signin-button:hover,
.signin-button:focus-visible,
.user-button:hover,
.user-button:focus-visible {
  color: var(--text);
  background: var(--panel-muted);
  border-color: var(--accent);
}

.signin-button,
.user-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-weight: 700;
}

.user-button {
  max-width: min(260px, 42vw);
}

.user-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-muted);
}

.user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--panel);
  background: var(--accent);
  font-size: 0.82rem;
  line-height: 1;
}

.user-button-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signin-button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

/* Button overrides for the dark topbar */
.site-topbar .icon-button,
.site-topbar .signin-button,
.site-topbar .user-button {
  background: transparent;
  border-color: var(--topbar-control-border);
  color: var(--topbar-text);
}

.site-topbar .icon-button:hover,
.site-topbar .icon-button:focus-visible,
.site-topbar .signin-button:hover,
.site-topbar .signin-button:focus-visible,
.site-topbar .user-button:hover,
.site-topbar .user-button:focus-visible {
  background: var(--topbar-control-hover-bg);
  border-color: var(--topbar-control-hover-border);
  color: var(--topbar-text);
}

.site-topbar .user-avatar {
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Page layout ── */

#app {
  min-height: calc(100vh - 72px); /* fill viewport below topbar */
}

.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1;
  padding: 32px 32px 40px;
}

.app-content:focus {
  outline: none;
}

/* ── Sidebar ── */

.app-sidebar {
  flex-shrink: 0;
  width: 240px;
  position: sticky;
  top: 72px; /* topbar height */
  height: calc(100vh - 72px);
  overflow-y: auto;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
}

/* Sidebar header */
.sidebar-header {
  color: var(--sidebar-text);
}

.sidebar-header i {
  color: var(--sidebar-text);
}

.sidebar-header i.app-color--write    { color: var(--app-write);    }
.sidebar-header i.app-color--tasks    { color: var(--app-tasks);    }
.sidebar-header i.app-color--recipes  { color: var(--app-recipes);  }
.sidebar-header i.app-color--calendar { color: var(--app-calendar); }
.sidebar-header i.app-color--settings { color: var(--app-settings); }
.sidebar-header i.app-color--admin    { color: var(--app-admin);    }
.sidebar-header i.app-color--weather  { color: var(--app-weather);  }
.sidebar-header i.app-color--contacts { color: var(--app-contacts); }
.sidebar-header i.app-color--files    { color: var(--app-files);    }
.sidebar-header i.app-color--inbox    { color: var(--app-inbox);    }
.sidebar-header i.app-color--stock    { color: var(--app-stock);    }

/* Theme Bootstrap nav-pills for the dark blue sidebar */
.app-sidebar .nav-link {
  color: var(--sidebar-text);
  font-size: 0.92rem;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus-visible {
  color: var(--sidebar-text);
  background-color: var(--sidebar-hover-bg);
}

.app-sidebar .nav-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-text);
}

.app-sidebar hr {
  border-color: var(--sidebar-divider);
}

@media (max-width: 767px) {
  .app-sidebar {
    display: none;
  }
}

.public-landing {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.public-landing-logo {
  display: block;
  width: min(520px, 82vw);
  height: auto;
}

.public-landing p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.16rem);
}

.authenticated-landing {
  min-height: calc(100vh - 72px - 120px);
}

.admin-page {
  display: grid;
  gap: 18px;
}

.admin-document {
  display: block;
  min-width: 0;
  overflow-x: hidden;
}

.admin-document h1,
.admin-document h2,
.admin-document h3,
.admin-document h4,
.admin-document p,
.admin-document ul,
.admin-document ol,
.admin-document pre,
.admin-document table {
  margin-top: 0;
}

.admin-document h1,
.admin-document h2,
.admin-document h3,
.admin-document h4 {
  margin-bottom: 10px;
  letter-spacing: 0;
}

.admin-document p,
.admin-document li {
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
}

.admin-document a {
  color: var(--accent);
  font-weight: 700;
}

.admin-document code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel);
}

.admin-document pre {
  padding: 12px;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Mermaid diagram containers (Design doc). Override the generic <pre> box so
   the rendered SVG sits on a clean, centered, horizontally-scrollable surface. */
.admin-document pre.mermaid {
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  white-space: normal;
  word-break: normal;
  overflow-x: auto;
  text-align: center;
  color: var(--text);
}
/* Hide the raw diagram source only while a render is in flight; the JS clears
   this attribute in a finally block so content is never permanently hidden. */
.admin-document pre.mermaid[data-mermaid-pending] {
  color: transparent;
}
.admin-document pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

.admin-document table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background: var(--panel);
}

.admin-document th,
.admin-document td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
}

.admin-document th {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.admin-users-table {
  margin: 0;
  color: var(--text);
}

.admin-users-table th,
.admin-users-table td {
  border-color: var(--line);
}

.admin-users-table thead th {
  background: var(--sidebar-bg);
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-bottom: 1px solid var(--sidebar-border);
  white-space: nowrap;
  user-select: none;
}

.admin-users-table thead th:hover {
  color: var(--sidebar-text);
}

.admin-users-table thead th.admin-sort-active {
  color: var(--sidebar-text);
}

.admin-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-weight: 600;
}

.admin-user-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-muted);
}

.admin-user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--panel);
  background: var(--accent);
  font-weight: 800;
}

/* Status pill — Bootstrap .badge + .rounded-pill handles display/size/shape */
.admin-status-pill {
  background-color: var(--panel-muted);
  color: var(--text);
  border: 1px solid var(--line);
  text-transform: capitalize;
}

.admin-status-pill[data-status="admin"] {
  color: #ffffff;
  background-color: var(--accent);
  border-color: var(--accent);
}

.admin-status-pill[data-status="banned"] {
  color: #ffffff;
  background-color: var(--danger);
  border-color: var(--danger);
}

.settings-page {
  display: grid;
  gap: 18px;
}

/* Settings tabbed layout */
.settings-content {
  display: grid;
  gap: 16px;
}

.settings-section-header {
  padding-bottom: 2px;
}

.settings-section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.settings-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* Profile card */
.settings-profile-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.settings-profile-avatar-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sidebar-bg);
  position: relative;
}

.settings-profile-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.settings-profile-initials {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: absolute;
  inset: 0;
}

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

.settings-profile-name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.settings-profile-email {
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

.settings-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-profile-since {
  font-size: 0.75rem;
}

.settings-fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.settings-section-title {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

.settings-theme-group {
  margin-bottom: 20px;
}

.settings-theme-group:last-child {
  margin-bottom: 0;
}

.settings-theme-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}

.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.settings-theme-card {
  display: flex;
  gap: 10px;
  min-height: 154px;
  padding: 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.settings-theme-card:hover,
.settings-theme-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.settings-theme-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.settings-theme-card .form-check-input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.settings-theme-card-body,
.settings-theme-card-heading,
.settings-theme-swatches {
  display: flex;
}

.settings-theme-card-body {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.settings-theme-card-heading {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-theme-name {
  font-weight: 800;
}

.settings-theme-description {
  color: var(--muted);
  font-size: 0.9rem;
}

.settings-theme-swatches {
  gap: 5px;
  margin-top: auto;
}

.settings-theme-swatch {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--swatch-color);
}

.settings-actions {
  min-height: 40px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── App colour tokens ───────────────────────────────────────────────────── */

:root {
  --app-write:    #1a73e8;
  --app-tasks:    #1e8e3e;
  --app-recipes:  #e8710a;
  --app-calendar: #0891b2;
  --app-settings: #c2185b;
  --app-admin:    #9334e6;
  --app-weather:  #0369a1;
  --app-contacts: #6366f1;
  --app-inbox:    #64748b;
  --app-stock:    #16a34a;
  --app-files:    #d97706;
}

/* Icon colour — used in sidebar headers and anywhere else the icon appears */
.app-color--write    { color: var(--app-write);    }
.app-color--tasks    { color: var(--app-tasks);    }
.app-color--recipes  { color: var(--app-recipes);  }
.app-color--calendar { color: var(--app-calendar); }
.app-color--settings { color: var(--app-settings); }
.app-color--admin    { color: var(--app-admin);    }
.app-color--weather  { color: var(--app-weather);  }
.app-color--contacts { color: var(--app-contacts); }
.app-color--inbox    { color: var(--app-inbox);    }
.app-color--stock    { color: var(--app-stock);    }
.app-color--files    { color: var(--app-files);    }

/* ─── Apps grid dropdown ──────────────────────────────────────────────────── */

.apps-grid-menu {
  min-width: 220px;
  padding: 0 !important;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 10px;
}

.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.13s;
  cursor: pointer;
}

.app-card:hover {
  background: var(--panel-muted);
  text-decoration: none;
  color: var(--text);
}

.app-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: #fff;
  flex-shrink: 0;
}

/* Card icon backgrounds */
.app-card-icon.app-color--write    { background: var(--app-write);    }
.app-card-icon.app-color--tasks    { background: var(--app-tasks);    }
.app-card-icon.app-color--recipes  { background: var(--app-recipes);  }
.app-card-icon.app-color--calendar { background: var(--app-calendar); }
.app-card-icon.app-color--settings { background: var(--app-settings); }
.app-card-icon.app-color--admin    { background: var(--app-admin);    }
.app-card-icon.app-color--weather  { background: var(--app-weather);  }
.app-card-icon.app-color--contacts { background: var(--app-contacts); }
.app-card-icon.app-color--inbox    { background: var(--app-inbox);    }
.app-card-icon.app-color--stock    { background: var(--app-stock);    }
.app-card-icon.app-color--files    { background: var(--app-files);    }

/* Override the colour rule so icon stays white inside the card */
.app-card-icon.app-color--write    i,
.app-card-icon.app-color--tasks    i,
.app-card-icon.app-color--recipes  i,
.app-card-icon.app-color--calendar i,
.app-card-icon.app-color--settings i,
.app-card-icon.app-color--admin    i,
.app-card-icon.app-color--contacts i,
.app-card-icon.app-color--inbox    i,
.app-card-icon.app-color--stock    i,
.app-card-icon.app-color--files    i { color: #fff; }

.app-card-label {
  font-size: 0.72rem;
  text-align: center;
  line-height: 1.2;
  color: var(--text);
}

.page-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 32px 14px;
}

.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.78rem;
  box-shadow: var(--shadow);
}

.environment-badge {
  padding: 1px 6px 2px;
  color: #ffffff;
  background: var(--accent);
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.4;
}

/* ── Write ── */

.write-page {
  display: grid;
  gap: 18px;
}

.write-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.write-header-back {
  justify-content: space-between;
}

.btn-accent {
  color: #ffffff;
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  color: #ffffff;
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.write-badge-published {
  background-color: var(--accent) !important;
  color: #ffffff;
}

.write-list {
  display: grid;
  gap: 12px;
}

.write-note-title {
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  letter-spacing: 0;
}

.write-content {
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}

.write-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.write-content h1,
.write-content h2,
.write-content h3,
.write-content h4 {
  letter-spacing: 0;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

.write-content p {
  margin-top: 0;
}

.write-content a {
  color: var(--accent);
  font-weight: 700;
}

.write-content code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-muted);
}

.write-content pre {
  padding: 14px;
  overflow: auto;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.write-content pre code {
  background: none;
  padding: 0;
}

.write-card-footer {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* Note card header — matches sidebar/table header colour across all apps */
.write-list .card-header {
  background: var(--sidebar-bg);
  border-bottom-color: var(--sidebar-border);
  border-radius: 7px 7px 0 0;
}

.write-list .card-header .write-note-title {
  color: var(--sidebar-text);
}

.write-list .card-header .text-muted {
  color: color-mix(in srgb, var(--sidebar-text) 60%, transparent) !important;
}

/* Action buttons in the dark header: use transparent/light style */
.write-list .card-header .btn-outline-secondary,
.write-list .card-header .btn-outline-primary {
  background: transparent;
  border-color: color-mix(in srgb, var(--sidebar-text) 35%, transparent);
  color: color-mix(in srgb, var(--sidebar-text) 75%, transparent);
}

.write-list .card-header .btn-outline-secondary:hover,
.write-list .card-header .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--sidebar-text);
  color: var(--sidebar-text);
}

.write-list .card-header .btn-outline-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.write-list .card-header .btn-outline-danger:hover {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

/* Tag pills sit on the dark header — use white-based styling for contrast */
.write-list .card-header .write-note-tag {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}
.write-list .card-header .write-note-tag:hover,
.write-list .card-header .write-note-tag.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.write-editor-heading {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  border-left: 3px solid var(--app-write);
  padding-left: 0.65rem;
}

.write-save-status {
  color: var(--muted);
  font-size: 0.88rem;
}

.write-editor-form {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Shared edit-form toolbar — heading accent row with visibility toggle + action buttons */
.form-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.write-title-input {
  font-size: 1.1rem;
  font-weight: 700;
}



/* Self-hosted Google Fonts (SIL Open Font License 1.1) */

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/dancing-script/dancing-script.woff2') format('woff2');
}

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/pacifico/pacifico.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/caveat/caveat.woff2') format('woff2');
}

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/bangers/bangers.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/fredoka-one/fredoka-one.woff2') format('woff2');
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/bebas-neue/bebas-neue.woff2') format('woff2');
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/alfa-slab-one/alfa-slab-one.woff2') format('woff2');
}

@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/permanent-marker/permanent-marker.woff2') format('woff2');
}

@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/special-elite/special-elite.woff2') format('woff2');
}

@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/lobster/lobster.woff2') format('woff2');
}

@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/righteous/righteous.woff2') format('woff2');
}

/* Quill font family classes — applied to editor content and rendered post HTML */

/* Font ids are hyphen-free (a Quill ClassAttributor requirement). Legacy
   hyphenated selectors are kept so notes saved before the rename still render
   in the read-only view. */
.ql-font-arial { font-family: Arial, sans-serif; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-font-georgia { font-family: Georgia, 'Times New Roman', serif; }
.ql-font-timesnewroman,
.ql-font-times-new-roman { font-family: 'Times New Roman', Times, serif; }
.ql-font-couriernew,
.ql-font-courier-new { font-family: 'Courier New', Courier, monospace; }
.ql-font-dancingscript,
.ql-font-dancing-script { font-family: 'Dancing Script', cursive; }
.ql-font-pacifico { font-family: 'Pacifico', cursive; }
.ql-font-caveat { font-family: 'Caveat', cursive; }
.ql-font-bangers { font-family: 'Bangers', cursive; }
.ql-font-fredokaone,
.ql-font-fredoka-one { font-family: 'Fredoka One', cursive; }
.ql-font-bebasneue,
.ql-font-bebas-neue { font-family: 'Bebas Neue', sans-serif; }
.ql-font-alfaslabone,
.ql-font-alfa-slab-one { font-family: 'Alfa Slab One', serif; }
.ql-font-permanentmarker,
.ql-font-permanent-marker { font-family: 'Permanent Marker', cursive; }
.ql-font-specialelite,
.ql-font-special-elite { font-family: 'Special Elite', cursive; }
.ql-font-lobster { font-family: 'Lobster', cursive; }
.ql-font-righteous { font-family: 'Righteous', cursive; }

/* Font picker dropdown labels and preview */

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Default'; }

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=arial]::before {
  content: 'Arial';
  font-family: Arial, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=verdana]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=verdana]::before {
  content: 'Verdana';
  font-family: Verdana, Geneva, sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=georgia]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=georgia]::before {
  content: 'Georgia';
  font-family: Georgia, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=timesnewroman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=timesnewroman]::before {
  content: 'Times New Roman';
  font-family: 'Times New Roman', Times, serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=couriernew]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=couriernew]::before {
  content: 'Courier New';
  font-family: 'Courier New', Courier, monospace;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=dancingscript]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=dancingscript]::before {
  content: 'Dancing Script';
  font-family: 'Dancing Script', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=pacifico]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=pacifico]::before {
  content: 'Pacifico';
  font-family: 'Pacifico', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=caveat]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=caveat]::before {
  content: 'Caveat';
  font-family: 'Caveat', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=bangers]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=bangers]::before {
  content: 'Bangers';
  font-family: 'Bangers', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=fredokaone]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=fredokaone]::before {
  content: 'Fredoka One';
  font-family: 'Fredoka One', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=bebasneue]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=bebasneue]::before {
  content: 'Bebas Neue';
  font-family: 'Bebas Neue', sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=alfaslabone]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=alfaslabone]::before {
  content: 'Alfa Slab One';
  font-family: 'Alfa Slab One', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=permanentmarker]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=permanentmarker]::before {
  content: 'Permanent Marker';
  font-family: 'Permanent Marker', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=specialelite]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=specialelite]::before {
  content: 'Special Elite';
  font-family: 'Special Elite', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=lobster]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=lobster]::before {
  content: 'Lobster';
  font-family: 'Lobster', cursive;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=righteous]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=righteous]::before {
  content: 'Righteous';
  font-family: 'Righteous', cursive;
}

/* Delete-confirm inline group — hidden until the Delete button is clicked */
.write-note-delete-confirm {
  display: none;
}

/* ── Write tag chips (editor form) ── */
.write-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 0;
}

.write-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 2px 8px 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-write) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-write) 40%, transparent);
  color: var(--app-write);
  white-space: nowrap;
}

.write-tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 1px;
  font-size: 0.7rem;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  line-height: 1;
}
.write-tag-chip-remove:hover { opacity: 1; }

.write-tag-input {
  font-size: 0.85rem;
}

/* ── Write note card tag pills ── */
.write-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.write-note-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-write) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-write) 30%, transparent);
  color: var(--app-write);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.write-note-tag:hover,
.write-note-tag.active {
  background: color-mix(in srgb, var(--app-write) 22%, transparent);
  border-color: var(--app-write);
}

/* ── Write sidebar tag filter ── */
.write-sidebar-tag-select {
  width: 100%;
  font-size: 0.83rem;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.write-sidebar-tag-select:focus {
  outline: none;
  border-color: var(--app-write);
  background: rgba(255, 255, 255, 0.15);
}
.write-sidebar-tag-select option {
  background: var(--sidebar-bg);
  color: #fff;
}

/* ── Text alignment (Quill align format) ── */
/* Quill's snow.css handles these inside .ql-editor; these extend them to
   rendered write note content outside the editor. */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

/* ── Image float / text wrap ── */
.ql-float-left {
  float: left;
  margin: 4px 16px 8px 0;
}
.ql-float-right {
  float: right;
  margin: 4px 0 8px 16px;
}

/* Clearfix so containers properly enclose floated images. */
.write-content::after,
.ql-editor::after {
  content: "";
  display: table;
  clear: both;
}

/* ── Image float toolbar (appears above selected image) ── */
.ql-image-float-toolbar {
  position: absolute;
  display: none;
  gap: 3px;
  padding: 4px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  z-index: 1001;
}

.ql-float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
}

.ql-float-btn:hover {
  background: var(--panel-muted);
  border-color: var(--line);
}

.ql-float-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* Quill font size classes — applied to editor content and rendered post HTML */

.ql-size-10px { font-size: 10px; }
.ql-size-12px { font-size: 12px; }
.ql-size-14px { font-size: 14px; }
.ql-size-16px { font-size: 16px; }
.ql-size-18px { font-size: 18px; }
.ql-size-20px { font-size: 20px; }
.ql-size-24px { font-size: 24px; }
.ql-size-28px { font-size: 28px; }
.ql-size-32px { font-size: 32px; }
.ql-size-36px { font-size: 36px; }
.ql-size-48px { font-size: 48px; }
.ql-size-64px { font-size: 64px; }

/* Size picker dropdown labels */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Size';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value);
}

.write-quill-wrapper {
  min-height: 0; /* prevent grid-item height overflow from ql-container height:100% */
}

/* Override Quill's height:100% so the container sizes to its content inside the grid */
.write-quill-wrapper .ql-container.ql-snow {
  height: auto;
}

.write-quill-wrapper .ql-editor {
  min-height: 320px;
  max-height: min(65vh, 640px);
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text) !important;
}

.write-quill-wrapper .ql-toolbar.ql-snow,
.write-quill-wrapper .ql-container.ql-snow {
  border-color: var(--line);
  background: var(--panel);
}

.write-quill-wrapper .ql-toolbar.ql-snow {
  border-radius: 8px 8px 0 0;
}

.write-quill-wrapper .ql-container.ql-snow {
  border-radius: 0 0 8px 8px;
}

.write-quill-wrapper .ql-editor.ql-blank::before {
  color: var(--muted);
  font-style: normal;
}

/* ── Quill theme integration — icon strokes, fills, pickers, and tooltip ──
   quill.snow.css is injected dynamically and lands after main.css in the
   cascade. Quill inserts .ql-toolbar as a sibling before the editor
   container, so .write-quill-wrapper (the common parent of both) is used
   as the selector prefix. This gives 0,3,0 specificity vs snow.css's
   0,2,0, reliably overriding the hardcoded #444 / #06c values.           */

/* Toolbar icon stroke and fill — idle state */
.write-quill-wrapper .ql-snow .ql-stroke,
.write-quill-wrapper .ql-snow .ql-stroke-miter {
  stroke: var(--text);
}

.write-quill-wrapper .ql-snow .ql-fill,
.write-quill-wrapper .ql-snow .ql-stroke.ql-fill {
  fill: var(--text);
}

/* Picker text — idle state */
.write-quill-wrapper .ql-snow .ql-picker {
  color: var(--text);
}

/* Picker dropdown background */
.write-quill-wrapper .ql-snow .ql-picker-options {
  background-color: var(--panel);
  border-color: var(--line);
}

/* Picker expanded-label dim and border */
.write-quill-wrapper .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--muted);
  border-color: var(--line);
}
.write-quill-wrapper .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: var(--muted);
}
.write-quill-wrapper .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: var(--muted);
}
.write-quill-wrapper .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: var(--line);
}

/* Hover / focus / active — map hardcoded #06c to theme accent (text) */
.write-quill-wrapper .ql-snow.ql-toolbar button:hover,
.write-quill-wrapper .ql-snow .ql-toolbar button:hover,
.write-quill-wrapper .ql-snow.ql-toolbar button:focus,
.write-quill-wrapper .ql-snow .ql-toolbar button:focus,
.write-quill-wrapper .ql-snow.ql-toolbar button.ql-active,
.write-quill-wrapper .ql-snow .ql-toolbar button.ql-active,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--accent);
}

/* Hover / focus / active — fill */
.write-quill-wrapper .ql-snow.ql-toolbar button:hover .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar button:hover .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar button:focus .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar button:focus .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar button.ql-active .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar button.ql-active .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: var(--accent);
}

/* Hover / focus / active — stroke */
.write-quill-wrapper .ql-snow.ql-toolbar button:hover .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar button:hover .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar button:focus .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar button:focus .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar button.ql-active .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.write-quill-wrapper .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.write-quill-wrapper .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.write-quill-wrapper .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.write-quill-wrapper .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.write-quill-wrapper .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: var(--accent);
}

/* Link tooltip popup */
.write-quill-wrapper .ql-snow .ql-tooltip {
  background-color: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}

.write-quill-wrapper .ql-snow .ql-tooltip input[type=text] {
  background: var(--bg);
  border-color: var(--line);
  color: var(--text);
}

.write-quill-wrapper .ql-snow .ql-tooltip a.ql-action::after {
  border-right-color: var(--line);
}

/* Links and blockquote inside the editor */
.write-quill-wrapper .ql-snow a {
  color: var(--accent);
}

.write-quill-wrapper .ql-snow .ql-editor blockquote {
  border-left-color: var(--line);
}

/* Inline code background */
.write-quill-wrapper .ql-snow .ql-editor code {
  background-color: var(--panel-muted);
  color: var(--text);
}

/* Image resize handle — floats over the selected image's bottom-right corner. */
.ql-image-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: se-resize;
  display: none;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Blue outline on the image currently being resized / selected. */
.ql-editor img.ql-image-active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* AI polish toolbar button */
.write-quill-wrapper .ql-ai-polish {
  width: auto !important;
  padding: 0 6px !important;
  color: var(--accent);
  font-size: 0.85rem;
}
.write-quill-wrapper .ql-ai-polish:hover {
  color: var(--accent-dark, var(--accent));
  opacity: 0.85;
}
.write-quill-wrapper .ql-ai-polish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tasks ─────────────────────────────────────────────────────────────── */

.tasks-page {
  padding: 16px;
  max-width: 720px;
}

/* List view */

/* Expand All / Collapse All toolbar — top-right above the card grid */
.tasks-bulk-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.tasks-bulk-btn {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border: 1px solid var(--sidebar-bg);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: opacity 0.15s;
  line-height: 1.4;
}
.tasks-bulk-btn:hover {
  opacity: 0.85;
}

.tasks-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start;
}

/* Column containers — JS assigns cards to the shorter column */
.tasks-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Full-width items: empty state text and inline new-task row */
.tasks-list > p,
.tasks-list > .tasks-new-top-level {
  grid-column: 1 / -1;
}

@media (max-width: 500px) {
  .tasks-list {
    grid-template-columns: 1fr;
  }
}

/* Task cards — each top-level task + its subtasks in one card */

.tasks-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* Top-level (depth-0) row: card "header" — matches sidebar/table header colour */
.tasks-card > .tasks-list-item--top {
  background: var(--sidebar-bg);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
  padding-left: 12px;
}

/* All interactive and text elements inside the dark header row */
.tasks-card > .tasks-list-item--top .tasks-expand-btn,
.tasks-card > .tasks-list-item--top .tasks-check-btn {
  color: var(--sidebar-text);
}
.tasks-card > .tasks-list-item--top .tasks-expand-btn.tasks-item-done {
  color: color-mix(in srgb, var(--sidebar-text) 55%, transparent);
}
.tasks-card > .tasks-list-item--top .tasks-list-item-desc,
.tasks-card > .tasks-list-item--top .tasks-location-badge {
  color: color-mix(in srgb, var(--sidebar-text) 65%, transparent);
}
.tasks-card > .tasks-list-item--top .tasks-due-badge {
  background: color-mix(in srgb, var(--sidebar-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--sidebar-text) 25%, transparent);
  color: color-mix(in srgb, var(--sidebar-text) 80%, transparent);
}
/* Action buttons revealed on header row hover */
.tasks-card > .tasks-list-item--top .tasks-row-action-btn {
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
}
.tasks-card > .tasks-list-item--top:hover .tasks-row-action-btn,
.tasks-card > .tasks-list-item--top:focus-within .tasks-row-action-btn {
  border-color: color-mix(in srgb, var(--sidebar-text) 45%, transparent);
  color: var(--sidebar-text);
}
.tasks-card > .tasks-list-item--top:hover .tasks-row-action-btn--danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 15%, transparent);
}

/* Children rows: card "body" — keep depth-based left indent, just add top border */
.tasks-card > .tasks-list-item:not(.tasks-list-item--top),
.tasks-card > .tasks-quick-add {
  border-top: 1px solid var(--line);
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Action button group — sits as one flex item at the right of the read-only row */
.tasks-row-actions {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  gap: 2px;
}
/* Action buttons: hidden by default, revealed as grey outlined buttons on row hover */
.tasks-row-action-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s, background-color 0.12s;
  cursor: pointer;
  line-height: 1.4;
}
/* Reveal on row hover/focus — grey outlined button */
.tasks-list-item:hover .tasks-row-action-btn,
.tasks-list-item:focus-within .tasks-row-action-btn {
  opacity: 1;
  pointer-events: auto;
  border-color: var(--muted);
}
/* Insert button individual hover → accent colour */
.tasks-list-item:hover .tasks-row-action-btn:not(.tasks-row-action-btn--danger):hover,
.tasks-list-item:focus-within .tasks-row-action-btn:not(.tasks-row-action-btn--danger):hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Delete button individual hover → danger colour */
.tasks-list-item:hover .tasks-row-action-btn--danger:hover,
.tasks-list-item:focus-within .tasks-row-action-btn--danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 10%, transparent);
}
/* Hide the whole group while the inline edit panel is open */
.tasks-list-item--editing .tasks-row-actions {
  display: none;
}

/* List view — flat checklist style */

/* Collapse chevron — left side of card rows with subtasks */
.tasks-collapse-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  margin-top: 3px;
  width: 16px;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.tasks-collapse-btn:hover {
  color: var(--text);
}
/* Top-level card header has a dark (--sidebar-bg) background — use sidebar text color */
.tasks-card > .tasks-list-item--top .tasks-collapse-btn {
  color: color-mix(in srgb, var(--sidebar-text) 55%, transparent);
}
.tasks-card > .tasks-list-item--top .tasks-collapse-btn:hover {
  color: var(--sidebar-text);
}

/* Spacer keeps check-btn aligned on top-level rows without subtasks */
.tasks-collapse-spacer {
  flex-shrink: 0;
  width: 16px;
}

/* Hide subtask rows and quick-add rows when card is collapsed */
.tasks-card--collapsed .tasks-list-item:not(.tasks-list-item--top),
.tasks-card--collapsed .tasks-quick-add {
  display: none;
}

.tasks-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 4px;
  padding-left: calc(4px + var(--task-depth, 0) * 28px);
}

.tasks-check-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  margin-top: 1px;
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}

.tasks-check-btn:hover {
  color: var(--accent);
}

.tasks-check-btn:disabled {
  color: var(--accent);
  cursor: default;
}

.tasks-list-item-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.tasks-list-item--editing .tasks-list-item-body {
  cursor: default;
}

.tasks-expand-btn {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  display: block;
  width: 100%;
}

.tasks-expand-btn:hover {
  text-decoration: underline;
}

.tasks-list-item--top .tasks-expand-btn {
  font-weight: 700;
}

/* keep link-style titles in descendant / detail views */
.tasks-list-item-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}

.tasks-list-item-title:hover {
  text-decoration: underline;
  color: var(--text);
}

/* Inline edit panel — sits inside the flex row, to the right of the checkbox */

.tasks-inline-panel {
  display: none;
  flex: 1;
  min-width: 0;
}

.tasks-list-item--editing .tasks-inline-panel {
  display: block;
}

.tasks-inline-form {
  padding-top: 0;
}

.tasks-inline-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tasks-inline-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  padding-top: 5px;
  white-space: nowrap;
}

.tasks-inline-due-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tasks-inline-error {
  font-size: 0.85rem;
  color: var(--danger);
}

/* When edit panel is open, hide the static body */
.tasks-list-item--editing .tasks-list-item-body {
  display: none;
}

/* Inline quick-add row for new subtasks */
.tasks-check-btn--placeholder {
  pointer-events: none;
  opacity: 0.35;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text);
}

.tasks-quick-add {
  padding: 8px 4px 12px;
  padding-left: calc(4px + var(--task-depth, 0) * 28px);
  padding-right: 4px;
  border-top: 1px solid var(--line);
}

.tasks-quick-add-inner {
  padding-top: 4px;
}

.tasks-list-item-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.45;
  word-break: break-word;
}

.tasks-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.tasks-due-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--panel-muted);
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid var(--line);
}

.tasks-location-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.tasks-completed-date {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

.tasks-detail-location {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.tasks-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tasks-public-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  background: #1a6fb5;
  color: #ffffff;
  white-space: nowrap;
}

/* Status and visibility badges */

.tasks-badge-open {
  background-color: var(--accent);
  color: #fff;
}

.tasks-badge-done {
  background-color: var(--muted);
  color: #fff;
}

/* Detail view */

.tasks-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tasks-detail-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 12px;
}

.tasks-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Root task shown as an oversized list item */
.tasks-detail-root {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.tasks-detail-root .tasks-check-btn {
  font-size: 1.4rem;
  margin-top: 2px;
}

.tasks-check-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--muted);
  line-height: 1;
  margin-top: 2px;
}

.tasks-detail-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.tasks-item-done {
  text-decoration: line-through;
  color: var(--muted);
}

.tasks-detail-desc {
  white-space: pre-wrap;
}

.tasks-detail-meta {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 6px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}


/* Descendants — same list-item style, indented by depth */

.tasks-descendants {
  display: flex;
  flex-direction: column;
}

.tasks-descendant-item {
  padding-left: calc(28px + var(--task-depth, 0) * 28px);
}

/* Form */

.tasks-editor-heading {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  border-left: 3px solid var(--app-tasks);
  padding-left: 0.65rem;
}

.tasks-form-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tasks-description-input {
  resize: vertical;
  min-height: 96px;
}

.tasks-date-input {
  max-width: 220px;
}

/* Sidebar — scoped under .app-sidebar so all colors work against the dark blue background */

.app-sidebar .sidebar-section-label {
  letter-spacing: 0.05em;
  display: block;
  color: var(--sidebar-text);
}


.app-sidebar .tasks-completed-toggle-row {
  padding: 2px 8px;
}

.app-sidebar .tasks-completed-label {
  font-size: 0.83rem;
  color: color-mix(in srgb, var(--sidebar-text) 72%, transparent);
  user-select: none;
}

.app-sidebar .tasks-completed-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--sidebar-text) 35%, transparent);
  background: var(--sidebar-hover-bg);
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}

.app-sidebar .tasks-completed-toggle-btn:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text);
}

.app-sidebar .tasks-completed-toggle-btn--on {
  background: var(--accent, #3d8ef8);
  border-color: var(--accent, #3d8ef8);
  color: #ffffff;
}

.app-sidebar .tasks-completed-toggle-btn--on:hover {
  background: var(--accent-hover, #2b7de0);
  border-color: var(--accent-hover, #2b7de0);
  color: #ffffff;
}

/* Files: include-hidden-files toggle (bottom of sidebar) */
.app-sidebar .files-hidden-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 12px 2px;
}

.app-sidebar .files-hidden-label {
  font-size: 0.83rem;
  color: color-mix(in srgb, var(--sidebar-text) 80%, transparent);
  user-select: none;
}

.app-sidebar .files-hidden-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--sidebar-text) 35%, transparent);
  background: var(--sidebar-hover-bg);
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}

.app-sidebar .files-hidden-toggle-btn:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text);
}

.app-sidebar .files-hidden-toggle-btn--on {
  background: var(--accent, #3d8ef8);
  border-color: var(--accent, #3d8ef8);
  color: #ffffff;
}

.app-sidebar .files-hidden-toggle-btn--on:hover {
  background: var(--accent-hover, #2b7de0);
  border-color: var(--accent-hover, #2b7de0);
  color: #ffffff;
}

.app-sidebar .files-hidden-hint {
  padding: 0 12px 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--sidebar-text) 55%, transparent);
}

.app-sidebar .files-hidden-hint code {
  color: color-mix(in srgb, var(--sidebar-text) 75%, transparent);
}

@media (max-width: 680px) {
  .site-topbar {
    min-height: 64px;
    padding: 10px 12px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .icon-button {
    width: 40px;
  }

  .signin-button,
  .user-button {
    max-width: 112px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ─── Recipes App ─────────────────────────────────────────────────────────── */

.recipes-page {
  padding: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

/* ── List table ── */

.recipes-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
  margin-bottom: 12px;
}

.recipes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.recipes-table thead th {
  background: var(--sidebar-bg);
  padding: 7px 12px;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  border-bottom: 1px solid var(--sidebar-border);
  white-space: nowrap;
  user-select: none;
}

.recipes-table thead th.recipes-sort-active {
  color: var(--sidebar-text);
}

.recipes-table tbody tr {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}

.recipes-table tbody tr:last-child {
  border-bottom: none;
}

.recipes-table tbody tr:hover {
  background: var(--panel-muted);
}

.recipes-table td {
  padding: 7px 12px;
  color: var(--text);
  vertical-align: middle;
}

.recipes-table [data-sort] {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  width: 100%;
}

.recipes-table [data-sort]:hover {
  color: var(--app-recipes);
}

.recipes-list-row {
  /* row styling handled by tbody tr */
}

.recipes-list-row:hover {
  /* hover handled by tbody tr:hover */
}

.recipes-thumbnail {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.recipes-thumbnail-placeholder,
.recipes-thumbnail--empty {
  width: 52px;
  height: 36px;
  border-radius: 4px;
  background: var(--panel-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1rem;
}

/* ── Stars ── */
.recipes-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--muted);
  font-size: 0.85rem;
}

.recipes-stars .star-on {
  color: #e0a020;
}

.recipes-star-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
}

.recipes-star-btn:hover,
.recipes-star-btn--on {
  color: #e0a020;
}

.recipes-star-btn:hover {
  transform: scale(1.15);
}

/* ── Detail ── */
.recipes-detail {
  max-width: 700px;
}

.recipes-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}

.recipes-detail-header {
  margin-bottom: 1.25rem;
}

.recipes-detail-img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 1rem;
}

.recipes-detail-title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}

.recipes-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.recipes-section-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-recipes);
  margin: 1.5rem 0 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}

.recipes-ingredients-view {
  border-collapse: collapse;
  width: auto;
  margin: 0;
}

.recipes-ingredients-view tr {
  border-bottom: 1px solid var(--line);
}

.recipes-ingredients-view tr:last-child {
  border-bottom: none;
}

.recipes-ingredients-view td {
  padding: 0.3rem 0.75rem 0.3rem 0;
  vertical-align: top;
}

.recipes-ingredients-view .recipes-ingredient-qty {
  color: var(--muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.recipes-steps-view {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
}

.recipes-steps-view li {
  counter-increment: step-counter;
  padding: 0.6rem 0 0.6rem 2.5rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.recipes-steps-view li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Rating breakdown popup ── */
.recipes-breakdown-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  min-width: 210px;
  box-shadow: var(--shadow);
}

.recipes-breakdown-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}

.recipes-breakdown-row:last-child {
  margin-bottom: 0;
}

.recipes-breakdown-bar-bg {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--panel-muted);
  overflow: hidden;
}

.recipes-breakdown-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: #e0a020;
  transition: width 0.3s;
}

.recipes-breakdown-count {
  min-width: 1.5rem;
  text-align: right;
  color: var(--muted);
}

/* ── Form ── */
.recipes-editor-heading {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  border-left: 3px solid var(--app-recipes);
  padding-left: 0.65rem;
}

.recipes-form {
  max-width: 660px;
}

.recipes-form .recipes-ingredient-row,
.recipes-form .recipes-step-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  align-items: flex-start;
}

.recipes-form .recipes-ingredient-row input {
  flex: 1;
}

.recipes-form .recipes-ingredient-row .ingredient-qty-input {
  flex: 0 0 90px;
}

.recipes-form .recipes-step-row textarea {
  flex: 1;
  resize: vertical;
  min-height: 3rem;
}

.recipes-row-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.recipes-row-remove:hover {
  opacity: 1;
}

.recipes-header-preview-wrap {
  position: relative;
  display: inline-block;
}

.recipes-header-preview-wrap img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  display: block;
}

.recipes-filter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}

.recipes-min-rating-btn {
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
}

.recipes-min-rating-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.recipes-min-rating-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.recipes-alert {
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.recipes-alert--success {
  background: #d1e9e1;
  color: #1a5c42;
  border: 1px solid #9dd1be;
}

.recipes-alert--error {
  background: #f9e0e0;
  color: #7a1a1a;
  border: 1px solid #e8a6a6;
}

/* ─── Calendar ────────────────────────────────────────────────────────────── */

.calendar-app {
  padding: 1rem;
}

/* Toolbar */
.calendar-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-view-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.calendar-view-tab {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.calendar-view-tab:hover {
  background: var(--panel-border, var(--line));
}

.calendar-view-tab.active {
  background: var(--app-calendar);
  border-color: var(--app-calendar);
  color: #fff;
}

.calendar-new-btn {
  background: var(--app-calendar);
  border-color: var(--app-calendar);
  white-space: nowrap;
}

.calendar-new-btn:hover {
  filter: brightness(1.1);
}

/* Navigation bar */
.calendar-nav {
  flex-wrap: wrap;
}

.calendar-nav-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.calendar-nav-btn:hover {
  background: var(--panel-border, var(--line));
}

.calendar-nav-label {
  font-size: 1rem;
  color: var(--text);
}

/* Loading / empty */
.calendar-loading {
  color: var(--muted);
  padding: 2rem;
  text-align: center;
}

.calendar-empty-message {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 1.5rem 0;
  text-align: center;
}

/* All-day banner */
.calendar-all-day-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
}

.calendar-all-day-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Chips (all-day events) */
.calendar-chip {
  display: inline-block;
  background: var(--app-calendar);
  color: #fff;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Day view ─────────────────────────────────────────────────────────────── */

/* ── Day view time grid ──────────────────────────────────────────────────── */

.calendar-day-tgrid {
  display: flex;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden; /* clip to rounded corners */
  overflow-y: auto;
}

.calendar-day-tlabels {
  width: 56px;
  flex-shrink: 0;
  position: relative;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.calendar-day-tlabel {
  position: absolute;
  right: 8px;
  font-size: 0.7rem;
  color: var(--muted);
  transform: translateY(-50%);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

.calendar-day-tevents {
  flex: 1;
  position: relative;
  min-width: 0;
  background: var(--bg);
}

/* Transparent tint across the full time-grid column when an all-day event spans
   that day. Sits behind grid lines (z-index 0) and events (z-index 1). */
.calendar-allday-bg {
  position: absolute;
  inset: 0;
  background: var(--app-calendar, #3b82f6);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Double-click / double-tap to-add targets */
.calendar-day-tevents[data-cal-new-date],
.calendar-week-tcol[data-cal-new-date],
.calendar-month-cell[data-cal-new-date] {
  cursor: cell;
}
/* revert to pointer for event chips and day-nav labels */
.calendar-day-tevents [data-item-id],
.calendar-week-tcol [data-item-id],
.calendar-month-cell [data-item-id],
.calendar-month-cell [data-cal-goto-day] {
  cursor: pointer;
}

.calendar-day-thour {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  pointer-events: none;
}

.calendar-day-thour--half {
  border-top-color: color-mix(in srgb, var(--line) 50%, transparent);
  border-top-style: dashed;
}

/* "Now" indicator line */
.calendar-day-now-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid var(--danger, #dc3545);
  z-index: 2;
  pointer-events: none;
}
.calendar-day-now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger, #dc3545);
}

/* Positioned event blocks */
.calendar-day-tevent {
  position: absolute;
  background: var(--app-calendar);
  color: #fff;
  border-radius: 4px;
  padding: 3px 6px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: filter 0.1s;
  max-width: 50%; /* cap solo events at half-width so they don't span the full column */
}
.calendar-day-tevent:hover {
  filter: brightness(1.12);
}
.calendar-day-tevent.cal-task-event {
  background: var(--app-tasks, #6366f1);
}
.calendar-day-tevent.cal-birthday-event {
  background: var(--app-contacts, #ec4899);
}
.calendar-day-tevent-time {
  font-size: 0.68rem;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.calendar-day-tevent-title {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.calendar-day-tevent-desc {
  font-size: 0.72rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-day-tevent-loc {
  font-size: 0.68rem;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Week view (time-grid) ────────────────────────────────────────────────── */

/* Outer visual wrapper — provides border, radius, and clips the inner scroll
   area to rounded corners.  Does NOT scroll or control overflow itself. */
.calendar-week-tgrid {
  border: 2px solid var(--sidebar-bg);
  border-radius: 8px;
  overflow: hidden;
}

/* Single scroll container for BOTH axes.  Everything lives inside here so the
   header, all-day row, and time columns all share the same scroll context —
   no misalignment when scrolling horizontally on mobile. */
.calendar-week-scroll {
  overflow-y: auto;
  overflow-x: hidden; /* desktop: no h-scroll needed */
  max-height: 80vh;   /* includes sticky header height */
}

/* The one CSS grid that holds corner + header cells, optional all-day cells,
   time-label column, and 7 day columns.
   grid-template-columns: 56px label/spacer | 7 equal day columns          */
.calendar-week-layout {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
}

/* ── Corner spacer (top-left, sticky in both axes) ──────────────────────── */
.calendar-week-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  background: var(--sidebar-bg);
  border-bottom: 2px solid var(--sidebar-bg);
  border-right: 1px solid color-mix(in srgb, var(--sidebar-text) 20%, transparent);
}

/* ── Day header cells (sticky top, sidebar colour) ──────────────────────── */
.calendar-week-thead-day {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: center;
  padding: 0.4rem 0;
  background: var(--sidebar-bg);
  border-bottom: 2px solid var(--sidebar-bg);
  border-left: 1px solid color-mix(in srgb, var(--sidebar-text) 20%, transparent);
}

/* ── All-day label cell (sticky left) ───────────────────────────────────── */
.calendar-week-allday-label-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  font-size: 0.65rem;
  color: var(--muted);
  text-align: right;
  padding: 0.3rem 6px 0.3rem 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ── All-day event columns ──────────────────────────────────────────────── */
.calendar-week-allday-col {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2px 3px;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-week-allday-col:last-child {
  border-right: none;
}

/* ── Time-label column (sticky left) ────────────────────────────────────── */
.calendar-week-tlabels {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.calendar-week-tlabel {
  position: absolute;
  right: 8px;
  font-size: 0.7rem;
  color: var(--muted);
  transform: translateY(-50%);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

/* ── Individual day columns ─────────────────────────────────────────────── */
.calendar-week-tcol {
  position: relative;
  border-right: 1px solid var(--line);
  background: var(--bg);
  min-width: 0;
  box-sizing: border-box;
}

.calendar-week-tcol:last-child {
  border-right: none;
}

/* Events in week columns must fill their column (no 50% cap from day view) */
.calendar-week-tcol .calendar-day-tevent {
  max-width: 100%;
}

/* ── Hour / half-hour grid lines ────────────────────────────────────────── */
.calendar-week-thour {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  pointer-events: none;
}

.calendar-week-thour--half {
  border-top-color: color-mix(in srgb, var(--line) 50%, transparent);
  border-top-style: dashed;
}

/* ── Today column highlight ─────────────────────────────────────────────── */
.calendar-today-col {
  background: color-mix(in srgb, var(--app-calendar) 6%, transparent);
}

.calendar-day-nav-target {
  cursor: pointer;
  user-select: none;
}

.calendar-day-nav-target:hover {
  color: var(--app-calendar);
}

.calendar-month-nav-target {
  cursor: pointer;
  user-select: none;
}

.calendar-month-nav-target:hover {
  background: color-mix(in srgb, var(--app-calendar) 20%, transparent);
}

/* ── Today header cell ──────────────────────────────────────────────────── */
.calendar-today-label {
  background: var(--app-calendar);
}

.calendar-week-dow {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  letter-spacing: 0.04em;
}

.calendar-week-date {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sidebar-text);
}

.calendar-today-label .calendar-week-date {
  color: #fff;
}

.calendar-today-label .calendar-week-dow {
  color: rgba(255, 255, 255, 0.7);
}

.calendar-allday-event {
  background: color-mix(in srgb, var(--app-calendar) 70%, #000);
}

/* ── Task items inside calendar views ─────────────────────────────────────── */

/* Task chips in the all-day row of the day view */
.cal-task-chip {
  background: var(--app-tasks) !important;
}

/* ── Birthday items inside calendar views ────────────────────────────────── */

.cal-birthday-chip {
  background: #db2777 !important;
}

.cal-birthday-event {
  background: color-mix(in srgb, #db2777 85%, #000) !important;
}

.cal-birthday-detail-icon {
  color: #db2777;
  margin-right: 4px;
}

.cal-birthday-icon {
  color: #db2777;
}

/* Task event rows in week + month views */
.cal-task-event {
  background: color-mix(in srgb, var(--app-tasks) 85%, #000) !important;
}

/* Task detail modal icon */
.cal-task-detail-icon {
  color: var(--app-tasks);
  margin-right: 4px;
}

/* Status badge in the task detail modal */
.cal-task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 99px;
}
.cal-task-open {
  background: color-mix(in srgb, var(--app-tasks) 15%, transparent);
  color: var(--app-tasks);
}
.cal-task-done {
  background: var(--panel-muted);
  color: var(--muted);
  text-decoration: line-through;
}

.calendar-event-time-small {
  font-size: 0.7rem;
  opacity: 0.85;
  white-space: nowrap;
  flex-shrink: 0;
}

.calendar-event-title-small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── Month view ───────────────────────────────────────────────────────────── */

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 2px solid var(--sidebar-bg);
  border-radius: 8px;
  overflow: hidden;
}

.calendar-month-dow {
  text-align: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sidebar-text) 80%, transparent);
  padding: 0.4rem 0;
  background: var(--sidebar-bg);
  border-bottom: 2px solid var(--sidebar-bg);
  border-right: 1px solid color-mix(in srgb, var(--sidebar-text) 20%, transparent);
}

.calendar-month-dow:last-child {
  border-right: none;
}

.calendar-month-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 90px;
  padding: 0.2rem 0.3rem;
  background: var(--bg);
  vertical-align: top;
  overflow: hidden;
  min-width: 0;
}

/* remove the bottom border on the last row to avoid doubling with the container border */
.calendar-month-cell:nth-last-child(-n+7) {
  border-bottom: none;
}

.calendar-month-cell:nth-child(7n) {
  border-right: none;
}

.calendar-other-month {
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}

.calendar-other-month .calendar-month-date-num {
  opacity: 0.4;
}

.calendar-today-cell {
  background: color-mix(in srgb, var(--app-calendar) 6%, transparent);
}

.calendar-month-date-num {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  padding-right: 0.2rem;
  display: inline-block;
  width: 100%;
}

.calendar-today-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--app-calendar);
  color: #fff;
  font-weight: 700;
  float: right;
}

.calendar-month-events {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.2rem;
}

.calendar-month-event {
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  font-size: 0.72rem;
  background: var(--app-calendar);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  gap: 0.2rem;
  align-items: baseline;
}

.calendar-month-event:hover {
  filter: brightness(1.1);
}

/* Truncate the text inside flex chip containers */
.calendar-month-event > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* Keep icons from shrinking */
.calendar-month-event > i {
  flex-shrink: 0;
}

.calendar-month-overflow {
  font-size: 0.7rem;
  color: var(--muted);
  padding-left: 0.25rem;
}

/* ── Year view ────────────────────────────────────────────────────────────── */

.calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.cal-mini-month {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.cal-mini-name {
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--sidebar-bg);
}

.cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0.25rem;
  gap: 2px;
}

.cal-mini-dow {
  text-align: center;
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: 2px;
}

.cal-mini-cell {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text);
  padding: 2px 0;
  border-radius: 3px;
  cursor: pointer;
}

.cal-mini-cell:hover {
  background: var(--line);
}

.cal-mini-other {
  color: var(--muted);
  opacity: 0.5;
}

.cal-mini-today {
  background: var(--app-calendar);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}

.cal-mini-has-event {
  border-bottom: 2px solid var(--app-calendar);
}

/* ── Event detail modal ──────────────────────────────────────────────────── */

.calendar-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.calendar-detail-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 280px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  overflow: hidden;
}

.calendar-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
  border-radius: 7px 7px 0 0;
}

.calendar-detail-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-detail-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: color-mix(in srgb, var(--sidebar-text) 60%, transparent);
  cursor: pointer;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.calendar-detail-close:hover {
  color: var(--sidebar-text);
}

.calendar-detail-body {
  padding: 0.75rem 1rem;
}

.calendar-detail-time {
  font-size: 0.87rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.calendar-detail-recurrence {
  font-size: 0.82rem;
  color: var(--app-calendar);
  margin-bottom: 0.5rem;
}

.calendar-detail-desc {
  font-size: 0.9rem;
  color: var(--text);
  white-space: pre-wrap;
}

.calendar-detail-location {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.calendar-detail-map-link,
.tasks-detail-map-link {
  font-size: 0.75rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.calendar-detail-footer {
  padding: 0.5rem 1rem 0.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.5rem;
}

/* ── Form page ───────────────────────────────────────────────────────────── */

.calendar-form-page {
  max-width: 560px;
  padding: 1rem 0;
}

.calendar-form-heading {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  border-left: 3px solid var(--app-calendar);
  padding-left: 0.65rem;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  /* Week time-grid: one scroll container handles both axes.
     Columns have a 44px minimum so they stay legible when the grid is
     wider than the viewport (which triggers the horizontal scroll). */
  .calendar-week-scroll {
    overflow-x: auto;
  }
  .calendar-week-layout {
    grid-template-columns: 56px repeat(7, minmax(44px, 1fr));
  }
  /* Compact event blocks in week columns on mobile */
  .calendar-week-tcol .calendar-day-tevent-time {
    display: none;
  }
  .calendar-year-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .calendar-month-cell {
    min-height: 60px;
  }
}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */

.dashboard-root {
  padding: 0 4px;
}

.dashboard-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 0 4px;
}

/* Gridstack item content → card appearance */
.dashboard-widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.dashboard-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  background-color: var(--sidebar-bg);
  border-radius: 7px 7px 0 0; /* match widget card border-radius */
}

.dashboard-widget-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}

.dashboard-widget-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sidebar-text);
  white-space: nowrap;
}

.dashboard-widget-subtitle {
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  color: color-mix(in srgb, var(--sidebar-text) 55%, transparent);
  white-space: nowrap;
}

/* Icon colors stay as their app-color values — they look good on the sidebar bg */

.dashboard-widget-meta {
  /* Sits between the title group and the remove button; title-group's flex-grow
     pushes this to the right side of the header bar. */
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dashboard-widget-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--sidebar-text) 60%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
}
.dashboard-widget-remove:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--sidebar-text);
}

.dashboard-widget-settings {
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--sidebar-text) 60%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  font-size: 0.8125rem;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.dashboard-widget-settings:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--sidebar-text);
}

.dashboard-widget-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  min-height: 0;
}

.dashboard-widget-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 60px;
}

/* ── Weather widget ─────────────────────────────────────────────────────────── */

.dashboard-weather-current {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dashboard-weather-main-icon {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}

.dashboard-weather-temp {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.dashboard-weather-unit {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted);
}

.dashboard-weather-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-weather-condition {
  font-weight: 600;
  font-size: 1rem;
}

.dashboard-weather-meta {
  font-size: 0.8125rem;
}

.dashboard-weather-location {
  font-size: 0.75rem;
}

.dashboard-weather-forecast {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.dashboard-weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  min-width: 56px;
  flex-shrink: 0;
  text-align: center;
}

.dashboard-weather-day-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-weather-day-icon {
  font-size: 1.1rem;
  color: var(--app-weather);
  margin: 2px 0;
}

.dashboard-weather-day-hi {
  font-size: 0.875rem;
  font-weight: 600;
}

.dashboard-weather-day-lo {
  font-size: 0.8125rem;
  color: var(--muted);
}

.dashboard-weather-day-precip {
  font-size: 0.75rem;
  color: var(--app-calendar);
  min-height: 1em;
}

/* ── Write / Recipe widgets ─────────────────────────────────────────────────── */

.dashboard-item-link {
  color: inherit;
}
.dashboard-item-link:hover {
  color: var(--accent);
}

.dashboard-item-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.dashboard-item-preview {
  line-height: 1.5;
}

.dashboard-item-meta {
  font-size: 0.75rem;
}

.dashboard-recipe-thumb {
  width: 100%;
  max-height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* ── Tasks widget ───────────────────────────────────────────────────────────── */

.dashboard-task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.dashboard-task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dashboard-task-dot {
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.dashboard-task-content {
  flex: 1;
  min-width: 0;
}

.dashboard-task-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-task-due {
  font-size: 0.75rem;
  margin-top: 1px;
}

/* ── Calendar widget ────────────────────────────────────────────────────────── */

.dashboard-cal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.dashboard-cal-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid var(--app-calendar);
  background: color-mix(in srgb, var(--app-calendar) 6%, transparent);
}

.dashboard-cal-time {
  font-size: 0.75rem;
}

.dashboard-cal-title {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Shared footer link ─────────────────────────────────────────────────────── */

.dashboard-footer-link {
  display: block;
  text-decoration: none;
  font-size: 0.8125rem;
}
.dashboard-footer-link:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* ── Add widget panel ───────────────────────────────────────────────────────── */

.dashboard-add-widget-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Gridstack overrides ────────────────────────────────────────────────────── */

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  inset: 0;
}

/* Pad the content wrapper so widget cards have equal spacing on all four sides.
   Adjacent cards each contribute 12px → 24px visual gap, matching the column gaps. */
.dashboard-root .grid-stack > .grid-stack-item > .grid-stack-item-content {
  padding: 12px;
  box-sizing: border-box;
}

/* Show grab cursor on widget header when in Customize (drag-to-reorder) mode */
.grid-stack:not(.grid-stack-static) .dashboard-widget-header {
  cursor: grab;
}
.grid-stack:not(.grid-stack-static) .dashboard-widget-header:active {
  cursor: grabbing;
}

/* Hide Gridstack resize handles — sizes are code-defined, not user-adjustable */
.grid-stack .ui-resizable-handle {
  display: none !important;
}

/* ── Dashboard mini month calendar widget ────────────────────────────────── */

/* Centering wrapper — limits width so the grid doesn't spread full-widget-width */
.dmini-wrap {
  width: 100%;
  max-width: 194px;
  margin: 0 auto;
}

.dmini-month-label {
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
  margin-bottom: 3px;
  display: block;
  color: inherit;
  text-decoration: none;
}

.dmini-month-label-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.dmini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.dmini-header .dmini-dow {
  text-align: center;
  font-size: 0.57rem;
  font-weight: 700;
  color: var(--muted);
  padding: 1px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Cells: no aspect-ratio — height is set by the inner span circle */
.dmini-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.67rem;
  padding: 1px 0;
}

/* The circle indicator lives on the inner <span>, not the cell,
   so removing aspect-ratio doesn't break the round today highlight */
.dmini-cell span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  line-height: 1;
}

.dmini-empty {
  pointer-events: none;
}

.dmini-today span {
  background: var(--app-calendar);
  color: #fff;
  font-weight: 700;
}

.dmini-has-event {
  font-weight: 800;
  color: var(--app-calendar);
}

/* Today overrides has-event so the number stays white */
.dmini-today span.dmini-has-event {
  color: #fff;
}

/* Clickable day cells in dashboard mini calendar */
.dmini-cell-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.dmini-cell-link:hover span {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
/* Keep today's circle on hover */
.dmini-today.dmini-cell-link:hover span {
  background: var(--app-calendar);
  color: #fff;
}
.dmini-cell-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Widget title links ──────────────────────────────────────────────────────── */

.dashboard-widget-title-link {
  color: var(--sidebar-text);
  text-decoration: none;
  flex-grow: 1;
}
.dashboard-widget-title-link:hover {
  color: var(--sidebar-text);
  text-decoration: underline;
  opacity: 0.85;
}

/* Disable title link clicks while the grid is in drag/customize mode */
.grid-stack:not(.grid-stack-static) .dashboard-widget-title-link {
  pointer-events: none;
}

/* ── Compact weather widget (dw-) ───────────────────────────────────────────── */

/* Two-column layout for Weather Normal: left = conditions + forecast, right = today panel */
.dw-layout {
  display: flex;
  gap: 0;
  height: 100%;
}

.dw-left {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
}

.dw-right {
  width: 118px;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.dw-detail-title {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1px;
}

.dw-detail-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
}

.dw-detail-icon {
  width: 13px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.65rem;
}

.dw-detail-label {
  flex: 1;
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.dw-detail-val {
  font-weight: 600;
  font-size: 0.7rem;
  text-align: right;
  white-space: nowrap;
}

.dw-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.dw-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.dw-temp {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.dw-unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

.dw-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dw-condition {
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dw-meta {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dw-forecast {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dw-forecast::-webkit-scrollbar { display: none; }

.dw-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 36px;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.dw-day-label {
  color: var(--muted);
  font-size: 0.7rem;
}

.dw-day-icon {
  font-size: 0.875rem;
}

.dw-day-temps {
  font-weight: 600;
  font-size: 0.7rem;
  white-space: nowrap;
}

.dw-day-lo {
  font-weight: 400;
  color: var(--muted);
}

.dw-trivia {
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dw-trivia-icon {
  color: #f59e0b;
  margin-right: 5px;
  font-style: normal;
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* ── Weather Small widget (dws-) ────────────────────────────────────────────── */

.dws-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dws-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.dws-temp-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dws-temp {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.dws-unit {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
}

.dws-condition {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dws-meta {
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.dws-forecast {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.dws-forecast::-webkit-scrollbar { display: none; }

.dws-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
  font-size: 0.65rem;
}

.dws-day-label {
  color: var(--muted);
  font-size: 0.65rem;
}

.dws-day-icon {
  font-size: 0.8rem;
}

.dws-day-temps {
  font-weight: 600;
  font-size: 0.65rem;
  white-space: nowrap;
}

.dws-day-lo {
  font-weight: 400;
  color: var(--muted);
}

/* ── Inbox widget (dinbox-) ─────────────────────────────────────────────────── */

/* Scroll container — carries both dinbox-scroll-wrap and contacts-table-wrap classes
   on the same element so there is only ONE scroll ancestor. If they were nested,
   contacts-table-wrap's overflow-x: auto would silently promote overflow-y: auto too,
   trapping position: sticky inside an inner container that never scrolls. */
.dinbox-scroll-wrap {
  overflow-y: auto;
  height: 100%;
}
.dinbox-scroll-wrap::-webkit-scrollbar { width: 4px; }
.dinbox-scroll-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* Sticky header inside the scroll area */
.dinbox-scroll-wrap .contacts-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Column widths */
.dinbox-col-status  { width: 36px;  text-align: center; padding-left: 10px !important; padding-right: 4px !important; }
.dinbox-col-date    { width: 76px;  white-space: nowrap; }
.dinbox-col-from    { width: 26%;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dinbox-col-subject { width: auto;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Unread row — bold text, date uses full text color */
.dinbox-row--unread td               { font-weight: 600; }
.dinbox-row--read .dinbox-col-date   { color: var(--muted); }

/* Read/unread status dot */
.dinbox-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-inbox);
}
.dinbox-dot--read {
  background: transparent;
  border: 1.5px solid var(--line);
}

/* Header meta counts */
.dinbox-header-unread-count {
  color: var(--app-inbox);
  font-weight: 700;
  font-style: normal;
}

/* Active sort column header */
.dinbox-sort-active {
  color: var(--app-inbox) !important;
}

/* Sort direction icons inside column headers */
.dinbox-sort-icon {
  font-size: 0.58rem;
  margin-left: 3px;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  vertical-align: middle;
}
.dinbox-sort-icon--active {
  color: var(--app-inbox);
}

/* "Coming soon" footer note */
.dinbox-placeholder-note {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted);
  padding: 8px 0 4px;
  font-style: italic;
}

/* ── Write widget HTML preview (dwr-) ───────────────────────────────────────── */

/* ── Write widget — note list ───────────────────────────────────────────────── */

.dwr-list {
  display: flex;
  flex-direction: column;
}

.dwr-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.dwr-list-item:hover {
  background: var(--panel-muted);
}
.dwr-list-item:hover .dwr-list-title {
  color: var(--accent);
}

.dwr-list-icon {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.dwr-list-title {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.dwr-list-date {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.dwr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.dwr-page-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.75rem;
  line-height: 1.6;
  transition: background 0.15s;
}
.dwr-page-btn:hover:not(:disabled) { background: var(--panel-muted); }
.dwr-page-btn:disabled { opacity: 0.35; cursor: default; }

.dwr-page-indicator {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 40px;
  text-align: center;
}

/* Recipe title link */
.dashboard-item-title-link {
  color: var(--text);
  text-decoration: none;
  display: block;
}
.dashboard-item-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Compact recipe widget (dcp-) ───────────────────────────────────────────── */

.dcp-thumb {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ── Compact tasks widget (dct-) ────────────────────────────────────────────── */

.dct-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.dct-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.dct-item:last-child {
  border-bottom: none;
}

.dct-title {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dct-due {
  font-size: 0.7rem;
}

/* ── Compact today/calendar widget (dct-cal-) ───────────────────────────────── */

.dct-cal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.dct-cal-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
}

.dct-cal-item:last-child {
  border-bottom: none;
}

.dct-cal-time {
  font-size: 0.7rem;
}

.dct-cal-title {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dct-cal-type-icon {
  font-size: 0.7rem;
  flex-shrink: 0;
}

.dct-cal-item--task .dct-cal-time {
  font-style: italic;
}

/* Today widget: "fact of the day" empty state. Shown only when the user has
 * no events scheduled for today; styled to feel quieter than the event list. */
.dct-fact-of-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.dct-fact-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.dct-fact-icon {
  color: #f59e0b; /* amber — matches weather trivia */
}

.dct-fact-text {
  color: color-mix(in srgb, var(--text) 75%, transparent);
  margin: 0;
  line-height: 1.35;
}

/* ─── Contacts app ────────────────────────────────────────────────────────── */

.contacts-page {
  padding: 16px 20px 32px;
  max-width: 1100px;
}

/* ── Toolbar ── */

.contacts-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.contacts-toolbar-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  flex: 1 1 auto;
}

/* ── List table ── */

.contacts-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.contacts-table thead th {
  background: var(--sidebar-bg);
  padding: 7px 12px;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sidebar-text) 70%, transparent);
  border-bottom: 1px solid var(--sidebar-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.contacts-table thead th:hover {
  color: var(--sidebar-text);
}

.contacts-table thead th.contacts-sort-active {
  color: var(--sidebar-text);
}

.contacts-table tbody tr {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}

.contacts-table tbody tr:last-child {
  border-bottom: none;
}

.contacts-table tbody tr:hover {
  background: var(--panel-muted);
}

.contacts-table td {
  padding: 7px 12px;
  color: var(--text);
  vertical-align: middle;
}

/* Star column */
.contacts-star-cell {
  width: 36px;
  padding: 6px 4px 6px 10px !important;
  text-align: center;
  white-space: nowrap;
}

.contacts-star-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.1s;
}

.contacts-star-btn:hover {
  background: var(--panel-muted);
}

.contacts-star-icon {
  font-size: 0.95rem;
  color: var(--muted);
  transition: color 0.15s, transform 0.15s;
}

.contacts-star-icon--on {
  color: #f59e0b;
}

.contacts-star-btn:hover .contacts-star-icon:not(.contacts-star-icon--on) {
  color: #f59e0b;
  transform: scale(1.15);
}

.contacts-star-detail-btn .contacts-star-icon {
  font-size: 1rem;
}

.contacts-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contacts-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--app-contacts);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.contacts-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.contacts-avatar-initials {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.contacts-fullname {
  font-weight: 500;
}

/* Platform user column */
.contacts-platform-cell {
  width: 40px;
  padding: 6px 4px !important;
  text-align: center;
  white-space: nowrap;
}

.contacts-platform-icon {
  font-size: 0.8rem;
  color: var(--app-contacts);
  opacity: 0.85;
}

.contacts-linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-contacts) 15%, transparent);
  color: var(--app-contacts);
  font-weight: 600;
  margin-left: 6px;
}

.contacts-group-pill {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  color: var(--muted);
  margin: 1px 2px;
  white-space: nowrap;
}

.contacts-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}

.contacts-empty-icon {
  font-size: 2.5rem;
  color: var(--app-contacts);
  opacity: 0.4;
  margin-bottom: 12px;
}

/* ── Pagination ── */

.contacts-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Detail / form panels ── */

.contacts-detail,
.contacts-form-page {
  max-width: 700px;
}

.contacts-detail-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.contacts-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.contacts-detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--app-contacts);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.contacts-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.contacts-detail-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.contacts-detail-subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.contacts-detail-section {
  margin-bottom: 18px;
}

.contacts-detail-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-contacts);
  margin-bottom: 8px;
}

.contacts-detail-field {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.contacts-detail-field:last-child {
  border-bottom: none;
}

.contacts-detail-label {
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 80px;
  padding-top: 1px;
}

.contacts-detail-value {
  color: var(--text);
  word-break: break-word;
  flex: 1;
}

.contacts-detail-meta {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 6px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

/* ── Contact form ── */

.contacts-form-heading {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  border-left: 3px solid var(--app-contacts);
  padding-left: 0.65rem;
}

.contacts-fieldset-title,
.form-fieldset-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-contacts);
  margin: 20px 0 8px;
}
.form-fieldset-title:first-child { margin-top: 0; }

.calendar-form-page .form-fieldset-title { color: var(--app-calendar); }
.recipes-page       .form-fieldset-title { color: var(--app-recipes); }
.write-page         .form-fieldset-title { color: var(--app-write); }

.contacts-multivalue-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.contacts-multivalue-row select {
  width: auto;
  max-width: 105px;
}

.contacts-multivalue-row--address {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-muted);
}

.contacts-add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--app-contacts);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  margin-top: 4px;
}

.contacts-add-row-btn:hover {
  text-decoration: underline;
}

.contacts-remove-row-btn {
  background: none;
  border: none;
  color: var(--muted);
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1;
}

.contacts-remove-row-btn:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ── Sidebar extras ── */

.contacts-sidebar-section {
  padding: 10px 12px 6px;
}

.contacts-sidebar-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.contacts-sidebar-search {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 6px;
  font-size: 0.83rem;
  padding: 5px 9px;
  width: 100%;
}

.contacts-sidebar-search::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.contacts-sidebar-search:focus {
  outline: none;
  border-color: var(--app-contacts);
  background: rgba(255, 255, 255, 0.15);
}

.contacts-sidebar-import-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  font-size: 0.83rem;
  padding: 7px 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.contacts-sidebar-import-btn:hover {
  background: var(--sidebar-hover-bg);
  color: #fff;
}

/* ── Import modal ── */

.contacts-import-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 55%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.contacts-import-modal {
  background: var(--panel);
  border-radius: 14px;
  padding: 28px 28px 22px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow);
}

.contacts-import-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.contacts-import-textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  font-size: 0.78rem;
  font-family: monospace;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  color: var(--text);
  margin-bottom: 12px;
}

.contacts-import-result {
  font-size: 0.88rem;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.contacts-import-result--success {
  background: color-mix(in srgb, var(--app-tasks) 12%, transparent);
  color: var(--app-tasks);
  border: 1px solid color-mix(in srgb, var(--app-tasks) 25%, transparent);
}

.contacts-import-result--error {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

/* ── Stock widget (dstock-) ─────────────────────────────────────────────────── */

:root {
  --dstock-up:   #16a34a;
  --dstock-down: #dc2626;
}

/* Stock row list */
.dstock-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dstock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s;
}
.dstock-row:hover {
  background: var(--hover, rgba(255,255,255,0.06));
  text-decoration: none;
}

.dstock-symbol {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  width: 46px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dstock-sparkline {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.dstock-sparkline-svg {
  display: block;
  width: 100%;
  max-width: 56px;
}

.dstock-price-block {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}

.dstock-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.dstock-change {
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.dstock-change--up   { color: var(--dstock-up);   }
.dstock-change--down { color: var(--dstock-down);  }

/* Footer */
.dstock-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  padding-top: 2px;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}

/* Empty state */
.dstock-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  text-align: center;
  gap: 4px;
  padding: 8px 0;
}

.dstock-empty-icon {
  font-size: 1.75rem;
  color: color-mix(in srgb, var(--app-stock) 60%, transparent);
  margin-bottom: 4px;
}

.dstock-empty-msg {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.dstock-empty-hint {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  margin: 0;
}


/* ── Stocks App Page (stocks-) ───────────────────────────────────────────────── */

/* Sidebar symbol list */
.stocks-sidebar-symbols {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  gap: 2px;
}

.stocks-sym-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
  position: relative;
}
.stocks-sym-row:hover {
  background: var(--panel-muted);
}
.stocks-sym-row.active {
  background: color-mix(in srgb, var(--app-stock) 14%, transparent);
}

.stocks-sym-ticker {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  width: 44px;
  flex-shrink: 0;
}
.stocks-sym-row.active .stocks-sym-ticker {
  color: var(--app-stock);
}

.stocks-sym-price {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.stocks-sym-change {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.stocks-sym-change--up   { color: var(--dstock-up); }
.stocks-sym-change--down { color: var(--dstock-down); }

.stocks-sym-delete {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
  line-height: 1;
}
.stocks-sym-row:hover .stocks-sym-delete {
  opacity: 1;
  border-color: var(--border);
}
.stocks-sym-delete:hover {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  background: rgba(220,38,38,0.08) !important;
}

/* Add Symbol modal */
.stocks-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stocks-modal-backdrop[hidden] { display: none; }

.stocks-modal {
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  width: min(340px, 90vw);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  overflow: hidden;
}

.stocks-modal-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border, #333);
}

.stocks-modal-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.stocks-modal-body {
  padding: 16px 18px 8px;
}

.stocks-modal-input {
  width: 100%;
  background: var(--input-bg, #2a2a3c);
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  padding: 8px 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.15s;
}
.stocks-modal-input:focus { border-color: var(--accent, #7c3aed); }

.stocks-modal-error {
  min-height: 1.2em;
  font-size: 0.8rem;
  color: #dc2626;
  margin-top: 6px;
}

.stocks-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 18px 14px;
}

.stocks-modal-btn {
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.stocks-modal-cancel {
  background: none;
  color: var(--muted, #888);
}
.stocks-modal-cancel:hover {
  background: var(--hover, rgba(255,255,255,0.06));
  border-color: var(--muted, #888);
}

.stocks-modal-ok {
  background: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
  color: #fff;
}
.stocks-modal-ok:hover {
  background: var(--accent-hover, #6d28d9);
  border-color: var(--accent-hover, #6d28d9);
}

/* Main content area */
.stocks-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow-y: auto;
}

.stocks-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.stocks-symbol-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.stocks-price-display {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}

.stocks-change-display {
  font-size: 0.95rem;
  font-weight: 500;
}
.stocks-change-display--up   { color: var(--dstock-up); }
.stocks-change-display--down { color: var(--dstock-down); }

.stocks-updated-at {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Range picker */
.stocks-range-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.stocks-range-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.stocks-range-btn:hover {
  background: var(--panel-muted);
  color: var(--text);
}
.stocks-range-btn.active {
  background: color-mix(in srgb, var(--app-stock) 14%, transparent);
  color: var(--app-stock);
  border-color: color-mix(in srgb, var(--app-stock) 30%, transparent);
}

/* Chart container — fixed height so news section flows below */
.stocks-chart-wrap {
  flex-shrink: 0;
  height: 380px;
  padding: 0 20px 20px;
  position: relative;
}

.stocks-chart-inner {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Empty / placeholder states */
.stocks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: var(--muted);
  text-align: center;
  padding: 40px 20px;
}

.stocks-empty-icon {
  font-size: 2.5rem;
  color: color-mix(in srgb, var(--app-stock) 50%, transparent);
}

.stocks-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.stocks-empty-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.stocks-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.9rem;
  gap: 8px;
}

.stocks-sidebar-error {
  font-size: 0.75rem;
  color: #dc2626;
  padding: 4px 12px;
  min-height: 18px;
}

.stocks-chart-type-note {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0 20px 4px;
  flex-shrink: 0;
}

/* Session-expired toast (shown when a stale Google token is detected). */
.session-expired-notice {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  max-width: min(92vw, 420px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
}

.session-expired-notice i {
  color: var(--accent);
}

/* ── Files app ─────────────────────────────────────────────────────────────── */

.files-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.files-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.files-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.files-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  font-size: 0.95rem;
}

.files-crumb {
  color: var(--accent);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 6px;
  white-space: nowrap;
}

.files-crumb:hover { text-decoration: underline; }

.files-crumb--current {
  color: var(--text);
  font-weight: 600;
}

.files-crumb-sep {
  color: var(--text-muted, #888);
  opacity: 0.6;
  padding: 0 2px;
}

.files-newfolder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
}

.files-newfolder-row input { flex: 1; }

/* Drop zone */
.files-dropzone {
  position: relative;
  border: 2px dashed transparent;
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
  min-height: 200px;
}

.files-dropzone.files-dragover {
  border-color: var(--app-files);
  background: color-mix(in srgb, var(--app-files) 8%, transparent);
}

.files-drop-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  color: var(--app-files);
  font-weight: 600;
}

.files-drop-hint i { font-size: 2.4rem; }

.files-dropzone.files-dragover .files-drop-hint { display: flex; }

/* Listing table (reuses .contacts-table styling). Fixed layout so a long file
   name truncates instead of pushing the other columns off-screen. */
.files-table { table-layout: fixed; width: 100%; }
.files-table .files-col-check { width: 38px; text-align: center; padding-right: 0; }
.files-table .files-col-size { width: 84px; white-space: nowrap; }
.files-table .files-col-date { width: 116px; white-space: nowrap; }
.files-table .files-col-actions { width: 172px; white-space: nowrap; text-align: right; }
.files-table .files-col-path { width: 34%; color: var(--text-muted, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-table th[data-sort] { cursor: pointer; user-select: none; }

.files-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.files-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  text-decoration: none;
}

.files-name i { font-size: 1.05rem; width: 18px; text-align: center; }
.files-name--folder { font-weight: 600; }
.files-name:hover { color: var(--accent); text-decoration: underline; }

.files-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}

.files-action-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #888);
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}

.files-action-btn:hover {
  background: var(--panel-muted);
  color: var(--text);
  border-color: var(--line);
}

.files-action-danger:hover {
  color: #fff;
  background: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
}

/* Delete confirmation modal */
.files-confirm-dialog {
  width: min(440px, 100%);
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.files-confirm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.files-confirm-title i { color: var(--danger, #dc3545); }

.files-confirm-text {
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.files-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.files-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 16px;
  text-align: center;
}

.files-empty-icon { font-size: 2.6rem; opacity: 0.5; }

.files-search-header {
  font-size: 0.85rem;
  padding: 2px 2px 6px;
}

/* Upload progress panel */
.files-uploads {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.files-up-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.files-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.files-up-track {
  height: 6px;
  border-radius: 3px;
  background: var(--panel-muted);
  overflow: hidden;
}

.files-up-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--app-files);
  transition: width 0.2s;
}

.files-up-status { white-space: nowrap; color: var(--text-muted, #888); }

.files-up-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.files-up-title { font-weight: 600; }

.files-up-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.files-scan-detail {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  padding: 2px 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .files-table .files-col-date { display: none; }
  .files-up-row { grid-template-columns: minmax(0, 1fr) auto; }
  .files-up-track { display: none; }
}

/* ── Files preview overlay ─────────────────────────────────────────────────── */

.files-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
}

.files-preview-dialog {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  max-height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow, 0 12px 40px rgba(0, 0, 0, 0.35));
  overflow: hidden;
}

.files-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.files-preview-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.files-preview-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.files-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-muted);
  padding: 12px;
}

.files-preview-loading,
.files-preview-msg {
  padding: 40px;
  color: var(--text-muted, #888);
  text-align: center;
}

.files-preview-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

.files-preview-frame {
  width: 100%;
  height: 78vh;
  border: 0;
  background: #fff;
}

.files-preview-media {
  max-width: 100%;
  max-height: 78vh;
}

.files-preview-audio-wrap { width: 100%; padding: 24px; }
.files-preview-audio-wrap audio { width: 100%; }

.files-preview-text {
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}

/* ── Files: multiselect, move picker, zip ──────────────────────────────────── */

.files-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.files-row-icon { font-size: 1.05rem; width: 18px; text-align: center; flex-shrink: 0; }

.files-check { flex-shrink: 0; cursor: pointer; }

.files-name-cell .files-name {
  flex: 1 1 auto;
  min-width: 0;            /* allow the flex item to shrink so ellipsis kicks in */
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selection bar */
.files-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.files-selection-count { font-weight: 600; margin-right: auto; }

/* Move picker dialog */
.files-move-dialog {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.files-move-crumb {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.files-move-crumb .files-crumb {
  background: none;
  border: 0;
  cursor: pointer;
}

.files-move-list {
  flex: 1;
  min-height: 120px;
  overflow: auto;
  padding: 6px;
}

.files-move-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.files-move-row:hover { background: var(--panel-muted); }
.files-move-chev { margin-left: auto; opacity: 0.5; font-size: 0.8rem; }

.files-move-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.files-move-msg { margin-right: auto; font-size: 0.82rem; }

/* Zip progress dialog */
.files-zip-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, 100%);
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}

.files-zip-status { font-weight: 600; }