/* Ostja töölaud: adminiga ühine palett tokens.css-is, iseseisev paigutus.
   Laetakse kõigil app/* lehtedel, sh sisenemine ja võrguühenduseta vaade. */
.app-ui {
  /* Kitsal töölauabrauseril võtab kerimisriba osa 320px vaate laiusest. */
  min-width: 0;
  --bar-bg: var(--dashboard-surface-soft);
  --bar-text: var(--text);
  --bar-text-2: var(--text-3);
  --pad-mobile: var(--dashboard-page-pad);
}

.page--app {
  width: 100%;
  max-width: var(--app-max);
  padding: 0 var(--pad-mobile) calc(var(--app-nav-height) + var(--app-gap) + env(safe-area-inset-bottom));
}

.app-ui h2 { line-height: 1.2; }
.app-ui :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.app-ui .app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  gap: var(--app-gap);
  margin-bottom: var(--app-gap);
  padding-block: 16px;
  box-shadow: var(--dashboard-shadow);
}

.app-topbar__heading { min-width: 0; }
.app-ui .app-topbar__title {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.app-ui .app-topbar__subtitle { margin-top: 5px; }
.app-ui .app-topbar__account {
  flex-shrink: 0;
  min-height: var(--touch-target);
  padding: 10px 12px;
  border: var(--line-w-weak) solid var(--line-weak);
}
.app-ui .app-topbar__account[aria-current] {
  color: var(--text);
  border-color: var(--accent);
  background: var(--dashboard-accent-tint);
}

.app-ui .bottom-nav {
  position: fixed;
  z-index: 30;
  inset: auto 0 0;
  margin: 0;
  box-shadow: var(--dashboard-shadow);
}
.app-ui .bottom-nav a {
  min-width: 0;
  min-height: var(--app-nav-height);
  border-bottom: 3px solid transparent;
  padding: 12px 4px;
  font-size: clamp(10px, 2.5vw, 12px);
  letter-spacing: 0.06em;
}
.app-ui .bottom-nav a[aria-current] {
  border-bottom-color: var(--accent);
  background: var(--dashboard-accent-tint);
}

.app-panel,
.app-ui .hero-drop,
.app-ui .month-excerpt,
.app-ui .recent {
  min-width: 0;
  padding: var(--dashboard-panel-pad);
  border: var(--line-w-weak) solid var(--line-weak);
  background: var(--surface);
}
.app-panel h2 { margin-bottom: 20px; }
.app-ui .hero-drop { padding: 0; overflow: hidden; }
.app-ui .hero-drop__text { padding: var(--dashboard-panel-pad); }
.app-ui .hero-drop__text h2 {
  margin: 8px 0;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.app-ui .hero-drop__media img { height: auto; aspect-ratio: 4 / 3; }
.app-ui .button-row { gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.app-ui .button-row .button { flex: 1 1 130px; }
.app-ui .button { gap: 12px; }
.app-ui .button--secondary { border-width: var(--line-w-weak); background: var(--dashboard-surface-raised); }
.app-ui .button--secondary:hover { opacity: 1; border-color: var(--text-3); }
.app-ui .next-unlock {
  min-width: 0;
  padding: 16px;
  margin-block: 16px;
  border-left: var(--line-w-strong) solid var(--accent);
  background: var(--dashboard-accent-tint);
  color: var(--text-2);
  line-height: 1.6;
}
.next-unlock__mark { flex-shrink: 0; }
.app-ui .today-desktop {
  display: grid;
  gap: var(--app-gap);
  background: transparent;
}
.app-ui :is(.today-desktop__main, .today-desktop__side) { min-width: 0; padding: 0; background: transparent; }
.app-ui .recent { margin-top: var(--app-gap); }
.app-ui .recent__title { margin-bottom: 12px; color: var(--text-2); }
.app-ui .recent__row { padding-block: 14px; align-items: baseline; }
.app-ui .recent__row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.app-ui .recent__row:hover { color: var(--text-2); }
.app-ui .month-excerpt > .muted:first-child { margin-bottom: 20px; color: var(--text-2); }
.app-ui .month-excerpt > .muted:last-child { margin-top: 16px; }
.app-ui .today-empty h2 { margin: 12px 0 24px; font-size: clamp(24px, 3vw, 36px); }

.month-panel { max-width: var(--app-detail-max); margin-inline: auto; }
.app-ui .month-nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.app-ui :is(.calendar-grid, .weekday-row) { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.app-ui .weekday-row { margin-bottom: 10px; color: var(--text-3); font-size: 11px; }
.app-ui .day { border: var(--line-w-weak) solid var(--line-weak); }
.app-ui .day--void { border-color: transparent; }
.app-ui .day--open { background: var(--dashboard-surface-raised); }
.app-ui .day--stage { border-color: var(--accent); }
.app-ui .day__num { font-size: clamp(10px, 1.2vw, 13px); }
.app-ui .legend { flex-wrap: wrap; gap: 10px 16px; }

.settings-layout { display: grid; align-items: start; gap: var(--app-gap); }
.settings-form, .settings-sidebar { min-width: 0; }
.settings-sidebar { display: grid; gap: var(--app-gap); }
.settings-email { overflow-wrap: anywhere; margin-bottom: 16px; }
.settings-sidebar .inline-link--danger { display: inline-block; margin-top: 16px; }
.app-ui .form-field { margin-bottom: 20px; }
.app-ui .form-field :is(input, textarea, select) {
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
  background: var(--dashboard-surface-soft);
  border-width: var(--line-w-weak);
}
.app-ui .form-field label { font-size: 11px; letter-spacing: 0.1em; }
.app-ui .form-field .muted { margin-top: 8px; }
.app-ui .segmented { margin-top: 24px; min-width: 0; }
.app-ui .segmented__track { grid-auto-columns: minmax(0, 1fr); }
.app-ui .segmented__opt { min-width: 0; }
.app-ui .segmented__opt span { height: 100%; overflow-wrap: anywhere; letter-spacing: 0.02em; }
.app-ui .toggle__text { min-width: 0; }
.app-ui .admin-section { margin-block: 24px; }
.app-ui .alert--ok { color: var(--dashboard-ok); border-color: var(--dashboard-ok); background: var(--dashboard-ok-tint); }

.app-ui .collection-grid { gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 24px; }
.app-ui .collection-cell { border: var(--line-w-weak) solid var(--line-weak); }
.app-ui .collection-cell__name { font-size: 12px; padding: 8px; background: var(--overlay-bg); inset: auto 0 0; }
.app-ui .guide-filter { padding: var(--dashboard-panel-pad); background: var(--surface); border: var(--line-w-weak) solid var(--line-weak); }
.app-ui .guide-filter .form-field { margin-bottom: 0; }
.app-ui .guide-list { display: grid; gap: 12px; border: 0; margin-bottom: 16px; }
.app-ui .guide-list li { min-width: 0; }
.app-ui .guide-row { padding: 14px; height: 100%; border: var(--line-w-weak) solid var(--line-weak); background: var(--surface); }
.guide-row__text { min-width: 0; overflow-wrap: anywhere; }
.app-ui .guide-row__dot { margin-left: auto; }
.app-ui .guide-chip { min-height: var(--touch-target); border-width: var(--line-w-weak); }
.app-ui .guide-chip--active { background: var(--dashboard-accent-tint); }
.app-ui .submission { flex-wrap: wrap; padding: var(--dashboard-panel-pad); background: var(--surface); margin-bottom: 12px; }
.app-ui .submission > div { min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere; }
.app-ui .drop-back { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
.app-ui .drop-media img { max-height: 640px; object-fit: contain; background: var(--dashboard-surface-soft); }
.app-ui .drop-body { font-size: 17px; }
.app-ui .facts-grid__cell { min-width: 0; background: var(--surface); overflow-wrap: anywhere; }
.page--app-detail > :not(.app-topbar):not(.bottom-nav) { max-width: var(--app-detail-max); margin-inline: auto; }

.page--app-auth {
  max-width: var(--app-auth-max);
  min-height: auto;
  margin: clamp(24px, 7vh, 80px) auto;
  padding: var(--dashboard-panel-pad);
  background: var(--surface);
  border: var(--line-w-weak) solid var(--line-weak);
  border-top: var(--line-w-strong) solid var(--accent);
  box-shadow: var(--dashboard-shadow);
}
.page--app-auth h1 { font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.04em; }
.page--app-auth form > .muted { margin-bottom: 20px; }
.page--app-auth :is(form + .muted, .activate > .muted) { margin-top: 24px; }

.login-sent__status { text-align: center; }
.login-sent__status .kicker { margin-bottom: 18px; }
.login-sent__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: var(--line-w-strong) solid var(--accent);
  background: var(--dashboard-accent-tint);
  color: var(--accent);
  font-size: 32px;
}
.login-sent__status h1 { margin-top: 20px; }
.login-sent__intro { color: var(--text-2); font-size: 17px; }
.login-sent__email {
  margin-top: 10px;
  color: var(--text);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.login-sent__check {
  margin-top: 24px;
  padding: 18px;
  border: var(--line-w-strong) solid var(--accent);
  background: var(--dashboard-accent-tint);
  text-align: left;
}
.login-sent__check h2 { color: var(--text); font-size: 18px; line-height: 1.2; }
.login-sent__check p { margin-top: 8px; color: var(--text-2); }
.login-sent__validity { margin-top: 18px; color: var(--text-3); font-size: 13px; }
.login-sent__help {
  margin-top: 28px;
  padding-top: 20px;
  border-top: var(--line-w-strong) solid var(--line-strong);
}
.login-sent__help h2 { font-size: 16px; }
.login-sent__help form { margin-top: 12px; }
.login-sent__help > .muted { margin-top: 14px; }

@media (min-width: 700px) {
  .app-ui .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-ui .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .page--app { padding-bottom: 48px; }
  .app-ui .app-topbar { padding-block: 20px; }
  .app-ui .desktop-nav { flex-shrink: 0; gap: 4px; }
  .app-ui .desktop-nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 10px 12px; border: var(--line-w-weak) solid transparent; font-size: 11px; letter-spacing: 0.08em; }
  .app-ui .desktop-nav a:hover { background: var(--dashboard-surface-raised); color: var(--text); }
  .app-ui .desktop-nav a[aria-current] { border-color: var(--accent); background: var(--dashboard-accent-tint); }
  .app-ui .today-desktop { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .settings-layout { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .app-ui .collection-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .page--app-auth { width: calc(100% - 32px); }
  .app-ui .month-panel { padding: 12px; }
  .app-ui .month-panel .calendar-grid { gap: 3px; }
  .app-ui .settings-form .segmented__track { grid-auto-flow: row; grid-template-columns: 1fr; }
}