/* Workspace dashboard. Colours come from the CSS variables below.
   Your requested names are aliases of the project's existing tokens, so they follow light and dark mode
   automatically. Change the right-hand side of an alias to re-theme the dashboard. */
/* Workspace theme tokens. Dark values are the WorkBeat dark spec; light values are their light counterparts.
   Applied on <html>, so the dashboard and the bottom tab bar share them.
   Dark: system dark (no data-theme) or data-theme="dark". Light: everything else. */
:root {
  --bg-main: #F4F6F8;
  --bg-card: #FFFFFF;
  --color-accent: #2F7A5F;
  --color-border: #E2E5E9;
  --text-primary: #0C0D0E;
  --text-secondary: #6B7280;
  --focus-bg: #E7F3EE;
  --bar-muted: #D9DDE3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-main: #0C0D0E;
    --bg-card: #141619;
    --color-accent: #368B6E;
    --color-border: #22252A;
    --text-primary: #FFFFFF;
    --text-secondary: #7A818C;
    --focus-bg: #1A2E27;
    --bar-muted: #2A2E34;
  }
}
:root[data-theme="dark"] {
  --bg-main: #0C0D0E;
  --bg-card: #141619;
  --color-accent: #368B6E;
  --color-border: #22252A;
  --text-primary: #FFFFFF;
  --text-secondary: #7A818C;
  --focus-bg: #1A2E27;
  --bar-muted: #2A2E34;
}

/* ---------- Greeting ---------- */
#view-dashboard { background: var(--bg-main); color: var(--text-primary); }
#view-dashboard .dashboard-hero { padding: 16px 16px 0; }
#view-dashboard .dashboard-hero-row { display: flex; flex-direction: column; gap: 8px; }
#view-dashboard .dashboard-hero-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#view-dashboard .dashboard-greeting { display: grid; gap: 2px; min-width: 0; text-align: left; justify-items: start; }
#view-dashboard .dash-greeting-title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
#view-dashboard .dash-date { color: var(--text-secondary); font-size: 14px; }
#view-dashboard .web-theme-control { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; margin-top: 6px; }

/* ---------- Focus block ---------- */
#view-dashboard .dash-focus {
  margin: 16px 16px 0;
  padding: 16px;
  display: grid;
  gap: 12px;
  background: var(--focus-bg);
  border: 1px solid var(--color-accent);
  border-radius: 16px;
}
#view-dashboard .dash-focus[hidden] { display: none; }
#view-dashboard .dash-focus-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
#view-dashboard .dash-focus-body { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 16px; }
#view-dashboard .dash-gauge { position: relative; width: 116px; height: 116px; }
#view-dashboard .dash-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#view-dashboard .dash-gauge-track { stroke: var(--color-border); }
#view-dashboard .dash-gauge-arc { stroke: var(--color-accent); stroke-linecap: round; transition: stroke-dasharray 320ms ease; }
#view-dashboard .dash-gauge-value { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 22px; font-weight: 700; color: var(--text-primary); }
#view-dashboard .dash-gauge-value small { margin-top: -2px; font-size: 11px; font-weight: 500; color: var(--text-secondary); }
#view-dashboard .dash-focus-copy h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
#view-dashboard .dash-focus-copy p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
#view-dashboard .dash-focus-link { margin-top: 10px; padding: 0; background: none; border: 0; color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Workspace grid ---------- */
#view-dashboard .dashboard-grid { margin: 8px 16px 0; gap: 8px; grid-template-columns: 1fr 1fr; align-items: start; }
#view-dashboard .dashboard-grid > :nth-child(even) { margin-top: 24px; }
@media (max-width: 760px) {
  #view-dashboard .dashboard-grid > [data-dashboard-view="attendance"] { order: -4; }
  #view-dashboard .dashboard-grid > [data-dashboard-view="mytasks"] { order: -3; }
  #view-dashboard .dashboard-grid > [data-dashboard-view="reimbursements"] { order: -2; }
  #view-dashboard .dashboard-grid > [data-dashboard-view="projects"] { order: -1; }
}
#view-dashboard .dashboard-card {
  min-height: 118px;
  padding: 14px;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--text-primary);
}
#view-dashboard .dashboard-card b { color: var(--text-primary); }
#view-dashboard .dashboard-card small { color: var(--text-secondary); }
#view-dashboard .dashboard-card-primary { background: var(--bg-card); border-color: var(--color-border); }
#view-dashboard .dashboard-card-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  color: var(--color-accent);
  background: transparent;
}
#view-dashboard .dashboard-card-illustrated { position: relative; isolation: isolate; overflow: hidden; min-height: 148px; }
#view-dashboard .dashboard-card-illustrated::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 92%, transparent) 36%, transparent 100%); }
#view-dashboard .dashboard-card-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 38%; }
#view-dashboard .dashboard-card-illustrated > :not(.dashboard-card-background) { position: relative; z-index: 2; }

/* ---------- Discover carousel ---------- */
#view-dashboard .dash-discover { margin: 28px 0 0; padding: 0 16px; }
#view-dashboard .dash-discover > h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
#view-dashboard .dash-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px 4px;
}
#view-dashboard .dash-carousel::-webkit-scrollbar { display: none; }
#view-dashboard .dash-carousel > .dashboard-panel {
  flex: 0 0 86%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
#view-dashboard .dash-carousel > .dashboard-panel:empty { display: none; }
#view-dashboard .dash-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
#view-dashboard .dash-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--text-secondary); opacity: .5; transition: width 200ms ease, opacity 200ms ease; }
#view-dashboard .dash-dots span.on { width: 18px; background: var(--color-accent); opacity: 1; }
@media (max-width: 760px) {
  /* Keep short carousel cards compact instead of stretching them to match the activity card. */
  #view-dashboard .dash-carousel { align-items: flex-start; }
  #view-dashboard .dash-carousel > .dashboard-panel { align-self: flex-start; height: auto; max-height: 280px; overflow-y: auto; }
}

/* ---------- Bottom tab bar: five vertical columns ---------- */
.mobile-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
  background: var(--bg-main);
}
.mobile-bottom-nav .mobile-tab,
.mobile-bottom-nav > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 4px;
  background: none;
  border: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
}
.mobile-bottom-nav .mobile-tab .icon,
.mobile-bottom-nav > button .icon { width: 22px; height: 22px; }
.mobile-bottom-nav .mobile-tab.active,
.mobile-bottom-nav > button.active { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  #view-dashboard .dash-gauge-arc,
  #view-dashboard .dash-dots span { transition: none; }
}
@media (min-width: 761px) {
  #view-dashboard .dash-carousel { margin: 0; padding: 0 0 4px; }
  #view-dashboard .dash-carousel > .dashboard-panel { flex: 1 1 0; }
  #view-dashboard .dash-discover { padding: 0; }
  #view-dashboard .dashboard-hero,
  #view-dashboard .dash-focus,
  #view-dashboard .dashboard-grid,
  #view-dashboard .dash-discover,
  #view-dashboard .dashboard-task-metrics,
  #view-dashboard .dashboard-summary,
  #view-dashboard .dashboard-project-section { max-width: 760px; margin-left: auto; margin-right: auto; }
  #view-dashboard .dashboard-hero { padding-left: 0; padding-right: 0; }
}

/* ---------- Global search ---------- */
#view-dashboard .dash-search { margin: 16px 16px 0; position: relative; }
#view-dashboard .dash-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px 0 40px;
  background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A818C' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 13px center / 18px 18px;
  color: var(--text-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
}
#view-dashboard .dash-search input::placeholder { color: var(--text-secondary); }
#view-dashboard .dash-search input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#view-dashboard .dash-search-results {
  margin-top: 8px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 6px;
}
#view-dashboard .dash-search-results.hidden { display: none; }
#view-dashboard .dash-search-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
#view-dashboard .dash-search-item,
#view-dashboard .dash-search-all {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
#view-dashboard .dash-search-item small { color: var(--text-secondary); font-size: 12px; }
#view-dashboard .dash-search-item:hover,
#view-dashboard .dash-search-item:focus-visible,
#view-dashboard .dash-search-all:hover,
#view-dashboard .dash-search-all:focus-visible { background: color-mix(in srgb, var(--color-accent) 10%, transparent); outline: none; }
#view-dashboard .dash-search-all { color: var(--color-accent); font-weight: 600; border-top: 1px solid var(--color-border); border-radius: 0 0 8px 8px; margin-top: 4px; }
#view-dashboard .dash-search-empty { padding: 12px 10px; color: var(--text-secondary); font-size: 14px; }
#view-dashboard .dash-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 761px) {
  #view-dashboard .dash-search { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ---------- Task overview slide (vertical bars) ---------- */
#view-dashboard .dash-task-bars { display: grid; gap: 12px; }
#view-dashboard .dash-task-bars h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
#view-dashboard .dash-task-bars .dash-bar-meta { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
#view-dashboard .dash-bar-chart { height: 96px; display: flex; align-items: flex-end; gap: 10px; }
#view-dashboard .dash-bar { flex: 1; display: grid; gap: 6px; justify-items: center; align-items: end; height: 100%; }
#view-dashboard .dash-bar i { display: block; width: 100%; max-width: 40px; min-height: 4px; border-radius: 6px 6px 3px 3px; background: var(--bar-muted); }
#view-dashboard .dash-bar.is-done i { background: var(--color-accent); }
#view-dashboard .dash-bar.is-alert i { background: var(--text-primary); opacity: .85; }
#view-dashboard .dash-bar b { font-size: 13px; font-weight: 700; color: var(--text-primary); }
#view-dashboard .dash-bar span { font-size: 11px; color: var(--text-secondary); text-align: center; line-height: 1.2; }
#view-dashboard .dash-bar-chart i { transition: height 320ms ease; }
@media (prefers-reduced-motion: reduce) { #view-dashboard .dash-bar-chart i { transition: none; } }

/* ---------- Top bar theme icon: cycles System, Light and Dark. Matches the top bar buttons. ---------- */
.topbar-theme-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: var(--text-primary, #ffffff);
  border: 1px solid var(--color-border, #22252a);
  border-radius: 12px;
  cursor: pointer;
}
.topbar-theme-btn .topbar-theme-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.topbar-theme-btn:focus-visible { outline: 2px solid var(--color-accent, #10b981); outline-offset: 2px; }
.topbar-theme-btn { gap: 6px; width: auto; min-width: 40px; padding: 0 10px; }
.topbar-theme-text { font-size: 13px; font-weight: 600; }
.topbar-theme-btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; height: 40px; }
.topbar-theme-btn .topbar-theme-icon { width: 18px; height: 18px; }

/* Desktop: the three Discover cards share one width and one height, like the other cards.
   Long content (such as recent activity) scrolls inside its card instead of stretching it. */
@media (min-width: 761px) {
  #view-dashboard .dash-carousel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  #view-dashboard .dash-carousel > .dashboard-panel {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 340px;
    overflow: auto;
    box-sizing: border-box;
  }
}

/* The bottom tab bar is for phones only. On desktop the sidebar does this job. */
@media (min-width: 761px) {
  .mobile-bottom-nav { display: none !important; }
}

/* Sync indicator: hidden when everything is saved. When shown, it reads as a pending button. */
#sync-indicator[hidden] { display: none !important; }
#sync-indicator { cursor: pointer; font-weight: 600; }

/* Web (desktop): the home screen fills the window in a wide grid of tiles, like the workspace dashboard,
   instead of one narrow column with uneven gaps. Phones keep the layout above. */
@media (min-width: 900px) {
  #view-dashboard .dashboard-hero,
  #view-dashboard .dash-focus,
  #view-dashboard .dashboard-grid,
  #view-dashboard .dash-discover,
  #view-dashboard .dashboard-task-metrics,
  #view-dashboard .dashboard-summary,
  #view-dashboard .dashboard-project-section,
  #view-dashboard .dash-search { max-width: 1180px; }
  #view-dashboard .dash-search { margin-top: 16px; }
  #view-dashboard .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  /* No staggered offset on alternate tiles, which left empty gaps. */
  #view-dashboard .dashboard-grid > :nth-child(even) { margin-top: 0; }
  #view-dashboard .dashboard-card { min-height: 128px; }
  #view-dashboard .dash-carousel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}