/*
 * EmlogStudio daylight layout refinement.
 *
 * Deliberately limited to the application shell, workspace rhythm and the
 * left navigation rail. Load after day-mode.css. No page cards, articles or
 * personal-centre selectors live here.
 */

html[data-theme="light"] {
  --em-day-layout-canvas: #f5faff;
  --em-day-layout-surface: #ffffff;
  --em-day-layout-surface-hover: #f0f9fc;
  --em-day-layout-active: #e5f5f5;
  --em-day-layout-ink: #11394c;
  --em-day-layout-muted: #5b7d8e;
  --em-day-layout-line: #d7e8ef;
  --em-day-layout-line-strong: #a9d6de;
  --em-day-layout-accent: #007d70;
  --em-day-layout-shadow: 0 12px 28px rgba(20, 90, 122, .10);
}

html[data-theme="light"] body {
  background: var(--em-day-layout-canvas);
}

/* Desktop rhythm: all routes start with the same 16px breathing room. */
@media (min-width: 1281px) {
  html[data-theme="light"] .app-shell {
    grid-template-columns: 196px minmax(0, 1fr) 284px;
    gap: 16px;
    width: min(1560px, calc(100% - 32px));
    min-height: calc(100dvh - 32px);
    margin: 16px auto;
  }

  html[data-theme="light"] .app-shell.wide-view {
    grid-template-columns: 196px minmax(0, 1fr);
  }

  html[data-theme="light"] .app-shell > .sidebar {
    top: 16px;
    left: max(16px, calc((100vw - 1560px) / 2));
    width: 196px;
    height: calc(100dvh - 32px);
    min-height: 0;
  }
}

/* Compact desktop retains the icon rail, but its grid and fixed rail use the
 * same 14px rhythm so PJAX route changes do not visibly jump. */
@media (min-width: 821px) and (max-width: 1280px) {
  html[data-theme="light"] .app-shell {
    grid-template-columns: 76px minmax(0, 1fr) 264px;
    gap: 14px;
    width: min(calc(100% - 28px), 1240px);
    min-height: calc(100dvh - 28px);
    margin: 14px auto;
  }

  html[data-theme="light"] .app-shell.wide-view {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  html[data-theme="light"] .app-shell > .sidebar {
    top: 14px;
    left: max(14px, calc((100vw - 1240px) / 2));
    width: 76px;
    height: calc(100dvh - 28px);
    min-height: 0;
  }
}

@media (min-width: 821px) and (max-width: 1080px) {
  html[data-theme="light"] .app-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}

html[data-theme="light"] .workspace {
  min-height: 0;
  padding: 8px 0 32px;
}

html[data-theme="light"] .route-view.active {
  min-height: 0;
  padding-top: 16px;
}

html[data-theme="light"] .content-page {
  padding: 16px 0 32px;
}

/* Persistent left navigation ------------------------------------------------ */
html[data-theme="light"] .sidebar {
  background: var(--em-day-layout-surface);
  border-color: var(--em-day-layout-line);
  box-shadow: var(--em-day-layout-shadow);
}

html[data-theme="light"] .sidebar::after {
  background: #dff3f5;
  opacity: .42;
}

html[data-theme="light"] .brand-mark {
  color: var(--em-day-layout-ink);
  text-shadow: none;
}

html[data-theme="light"] .brand-name {
  color: var(--em-day-layout-muted);
}

html[data-theme="light"] .nav-list {
  gap: 8px;
  margin-top: 24px;
}

html[data-theme="light"] .nav-item {
  min-height: 44px;
  color: #477388;
  background: transparent;
  border-color: transparent;
}

/* All navigation states deliberately use solid colours, not gradients. */
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item:focus-visible {
  color: #075d69;
  background: var(--em-day-layout-surface-hover);
  border-color: #cae4e9;
  outline: none;
  transform: translateX(2px);
}

html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .nav-item[aria-current="page"] {
  color: #075d69;
  background: var(--em-day-layout-active);
  border-color: var(--em-day-layout-line-strong);
  box-shadow: inset 3px 0 0 var(--em-day-layout-accent);
}

html[data-theme="light"] .nav-item.active .nav-icon,
html[data-theme="light"] .nav-item[aria-current="page"] .nav-icon,
html[data-theme="light"] .nav-item.active .nav-arrow {
  color: var(--em-day-layout-accent);
}

html[data-theme="light"] .nav-item.is-pjax-pending {
  color: #075d69;
  background: #eaf7f4;
  border-color: #c2e4dc;
}

html[data-theme="light"] .workspace-switcher {
  border-color: var(--em-day-layout-line);
}

html[data-theme="light"] .switcher-label {
  color: var(--em-day-layout-muted);
}

html[data-theme="light"] .switcher {
  color: var(--em-day-layout-ink);
  background: #f8fcfe;
  border-color: var(--em-day-layout-line);
}

html[data-theme="light"] .switcher:hover,
html[data-theme="light"] .switcher:focus-visible {
  color: #075d69;
  background: #edf9f8;
  border-color: var(--em-day-layout-line-strong);
  outline: none;
}

/* Mobile keeps the same compact 12px shell without changing page cards. */
@media (max-width: 820px) {
  html[data-theme="light"] .app-shell {
    width: min(calc(100% - 24px), 720px);
    min-height: calc(100dvh - 24px);
    margin: 12px auto;
  }

  html[data-theme="light"] .workspace {
    padding: 4px 0 24px;
  }

  html[data-theme="light"] .route-view.active,
  html[data-theme="light"] .content-page {
    padding-top: 12px;
  }

  html[data-theme="light"] .content-page {
    padding-bottom: 24px;
  }

  html[data-theme="light"] .sidebar {
    inset: 12px auto 12px 12px;
    width: min(224px, calc(100vw - 36px));
    height: auto;
    border-color: var(--em-day-layout-line);
    box-shadow: 0 18px 42px rgba(18, 82, 110, .20);
  }

  html[data-theme="light"] .sidebar.open {
    transform: translateX(0);
  }

  html[data-theme="light"] .sidebar-overlay {
    background: rgba(10, 48, 67, .32);
  }

  html[data-theme="light"] .mobile-menu {
    color: #3f7084;
    background: var(--em-day-layout-surface);
    border-color: var(--em-day-layout-line);
    box-shadow: 0 4px 12px rgba(23, 97, 128, .06);
  }

  html[data-theme="light"] .mobile-menu:hover,
  html[data-theme="light"] .mobile-menu:focus-visible {
    color: #006f70;
    background: #edf9fa;
    border-color: var(--em-day-layout-line-strong);
    box-shadow: 0 0 0 3px rgba(0, 125, 112, .09);
    outline: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] :is(.nav-item, .mobile-menu, .sidebar) {
    transition: none;
  }
}