/**
 * Shell only: login screen, sidebar, and utility bar.
 * Matches fielddocs.net (Space Grotesk, Source Sans 3, accent #0369a1).
 * Does not restyle inner office pages, buttons, tables, or custom icons.
 * Sidebar and utility chrome use theme tokens so light/dark both stay readable.
 */

/* ── Login ── */

#login-screen {
  --fd-font: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --fd-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --login-ink: #08090b;
  --login-ink-soft: #2a2d33;
  --login-muted: #5c616a;
  --login-accent: #0369a1;
  --login-accent-hover: #025887;
  --login-accent-soft: rgba(3, 105, 161, 0.1);
  --login-bg: #eceef1;
  --login-surface: #ffffff;
  --login-border: rgba(8, 9, 11, 0.1);
  --login-border-strong: rgba(8, 9, 11, 0.18);
  --login-radius-sm: 8px;
  --login-radius: 12px;
  --login-radius-lg: 1.15rem;
  --login-focus-ring: 0 0 0 3px rgba(3, 105, 161, 0.22);
  font-family: var(--fd-font);
  background: var(--login-bg);
  color: var(--login-ink);
}

#login-screen .login-brand-name,
#login-screen .login-title,
#login-screen .login-marketing-title,
#login-screen .login-btn-primary,
#login-screen .login-switch-btn {
  font-family: var(--fd-font-display);
}

#login-screen .login-logo-wrap {
  border-radius: 0.375rem;
  border-color: rgba(8, 9, 11, 0.1);
  background: #fff;
}

#login-screen .login-brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}

#login-screen .login-title {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

#login-screen .login-subtitle {
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(8, 9, 11, 0.55);
}

#login-screen .login-btn-primary,
#login-screen .login-social-btn {
  border-radius: 999px;
}

#login-screen .login-btn-primary {
  font-weight: 700;
  background: var(--login-accent);
}

#login-screen .login-btn-primary:hover {
  background: var(--login-accent-hover);
  box-shadow: none;
}

#login-screen .login-input {
  border-radius: 0.85rem;
  font-family: var(--fd-font);
}

#login-screen .login-lang-btn.is-active {
  background: var(--login-accent);
  color: #fff;
}

#login-screen .login-marketing {
  background: #08090b;
  color: #fff;
}

#login-screen .login-marketing::before {
  background-image: none;
}

#login-screen .login-marketing-title {
  font-size: clamp(1.85rem, 3.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

#login-screen .login-marketing-blurb {
  color: rgba(255, 255, 255, 0.62);
}

#login-screen .login-marketing-points svg {
  color: #0369a1;
}

#login-screen .login-marketing-visual {
  border-radius: 1.15rem;
  border-color: rgba(255, 255, 255, 0.12);
}

@media (min-width: 1024px) {
  #login-screen {
    background: var(--login-bg);
  }

  #login-screen .login-form {
    background: var(--login-bg);
  }

  #login-screen .login-divider span {
    background: var(--login-bg);
  }
}

/* ── Signed-in chrome: sidebar + utility bar only ── */

#app-shell .global-utility-bar {
  background: var(--fd-chrome-bg) !important;
  border-bottom: 1px solid var(--fd-chrome-border) !important;
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 768px) {
  #app-shell .side-nav {
    background: var(--fd-nav-bg) !important;
    border-right: 1px solid var(--fd-nav-border) !important;
  }

  #app-shell .side-nav .tab-btn,
  #app-shell .side-nav .side-utility-btn,
  #app-shell .side-nav .side-sign-out {
    color: var(--fd-nav-text);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    border-radius: 0.5rem;
  }

  #app-shell .side-nav .tab-btn:hover,
  #app-shell .side-nav .side-utility-btn:hover,
  #app-shell .side-nav .side-sign-out:hover {
    background: var(--fd-nav-hover);
    color: var(--fd-nav-text-active);
  }

  #app-shell .side-nav .tab-btn.active,
  #app-shell .side-nav .tab-btn.active:hover {
    background: var(--fd-nav-active) !important;
    color: var(--fd-nav-text-active) !important;
    font-weight: 700;
  }

  #app-shell .side-nav .side-footer {
    border-top-color: var(--fd-nav-divider);
  }

  #app-shell .side-nav .side-fielddocs-logo {
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
  }

  #app-shell .side-nav .side-powered-text {
    color: var(--fd-nav-group);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  }
}