/*
 * GoreeCloud Code presentation layer for Forgejo 16.0.6.
 *
 * Runtime-only override, not a modification to GoreeCloud/code or Forgejo.
 * Keep this stylesheet and the corresponding template hooks versioned and
 * re-test them before upgrading Forgejo. No JavaScript is required.
 */

:root {
  --gc-canvas: #f3f6fc;
  --gc-surface: #ffffff;
  --gc-surface-alt: #f8faff;
  --gc-ink: #142442;
  --gc-muted: #5c6b84;
  --gc-border: #dae3f1;
  --gc-accent: #4d4ee5;
  --gc-accent-hover: #3c3fd1;
  --gc-focus: #a0a2ff;
  --gc-shadow: 0 12px 40px rgba(20, 42, 86, .08), 0 2px 8px rgba(20, 42, 86, .035);
  --color-primary: #4d4ee5;
  --color-primary-dark-1: #4d4ee5;
  --color-primary-dark-2: #3c3fd1;
  --color-primary-light-1: #6569f1;
  --color-primary-light-2: #7d83fb;
  --color-primary-contrast: #ffffff;
}

:root[data-theme*="dark"] {
  --gc-canvas: #0e1729;
  --gc-surface: #16243b;
  --gc-surface-alt: #1b2c47;
  --gc-ink: #edf3ff;
  --gc-muted: #bdcae1;
  --gc-border: #344563;
  --gc-accent: #9b9fff;
  --gc-accent-hover: #b4b7ff;
  --gc-focus: #a0a2ff;
  --gc-shadow: 0 18px 45px rgba(0, 0, 0, .22), 0 2px 9px rgba(0, 0, 0, .12);
  --color-primary: #9b9fff;
  --color-primary-dark-1: #9b9fff;
  --color-primary-dark-2: #777af6;
  --color-primary-light-1: #b4b7ff;
  --color-primary-light-2: #d1d3ff;
  --color-primary-contrast: #10213d;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme$="-auto"] {
    --gc-canvas: #0e1729;
    --gc-surface: #16243b;
    --gc-surface-alt: #1b2c47;
    --gc-ink: #edf3ff;
    --gc-muted: #bdcae1;
    --gc-border: #344563;
    --gc-accent: #9b9fff;
    --gc-accent-hover: #b4b7ff;
    --gc-focus: #a0a2ff;
    --gc-shadow: 0 18px 45px rgba(0, 0, 0, .22), 0 2px 9px rgba(0, 0, 0, .12);
    --color-primary: #9b9fff;
    --color-primary-dark-1: #9b9fff;
    --color-primary-dark-2: #777af6;
    --color-primary-light-1: #b4b7ff;
    --color-primary-light-2: #d1d3ff;
    --color-primary-contrast: #10213d;
  }
}

body {
  background: var(--gc-canvas);
}

/* Global navigation: a consistent GoreeCloud identity with native links. */
#navbar {
  min-height: 62px;
  background: linear-gradient(108deg, #0b1b36 0%, #153568 66%, #2056a5 100%);
  border-bottom: 1px solid rgba(186, 211, 255, .19);
  box-shadow: 0 4px 18px rgba(8, 27, 63, .16);
}

#navbar .ui.secondary.menu .item {
  color: #dce9ff !important;
  font-weight: 600;
  border-radius: 9px;
  margin-block: 7px;
  transition: background-color .16s ease, color .16s ease;
}

#navbar .ui.secondary.menu .item:hover,
#navbar .ui.secondary.menu .item.active,
#navbar .ui.secondary.menu .item:focus-visible {
  background: rgba(226, 237, 255, .15) !important;
  color: #ffffff !important;
}

#navbar-logo {
  order: -20;
}

#navbar-logo img {
  filter: none;
  border-radius: 8px;
}

#navbar .gc-code-brand {
  order: -19;
  gap: 7px;
  letter-spacing: -.025em;
  font-size: 1.03rem;
  font-weight: 730 !important;
  white-space: nowrap;
}

#navbar .gc-code-brand strong {
  color: #ffffff;
  font-weight: 750;
}

#navbar .gc-code-brand .gc-code-brand-suffix {
  color: #c0d8ff;
  font-weight: 550;
}

/* Semantic focus feedback and consistent control geometry. */
.ui.button,
.ui.input > input,
.ui.form input:not([type="checkbox"]),
.ui.form textarea,
.ui.selection.dropdown {
  border-radius: 10px !important;
}

.ui.button {
  font-weight: 590;
  transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ui.primary.button {
  background-color: var(--gc-accent) !important;
  color: var(--color-primary-contrast) !important;
}

.ui.primary.button:hover {
  background-color: var(--gc-accent-hover) !important;
}

.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-focus) 30%, transparent) !important;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--gc-focus);
  outline-offset: 2px;
}

.ui.popup,
.ui.dropdown .menu,
.ui.vertical.menu {
  border: 1px solid var(--gc-border);
  border-radius: 13px !important;
  box-shadow: var(--gc-shadow) !important;
}

/* A calm second tier for contexts, repositories and search. */
.secondary-nav {
  background: var(--gc-surface);
  border-bottom: 1px solid var(--gc-border) !important;
}

.secondary-nav .ui.secondary.menu .item.active,
.ui.secondary.pointing.menu .active.item {
  color: var(--gc-accent) !important;
  font-weight: 700;
}

.page-content .ui.segment,
.page-content .ui.card {
  border-color: var(--gc-border);
}

/* Signed-in dashboard: make zero-state information useful and readable. */
.page-content.dashboard > .ui.container.flex-container {
  gap: 24px;
  padding-block: 26px 46px;
}

.page-content.dashboard .flex-container-main,
.page-content.dashboard #dashboard-repo-list {
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: 20px;
  box-shadow: var(--gc-shadow);
}

.page-content.dashboard .flex-container-main {
  min-height: 430px;
  padding: 12px 24px;
}

.page-content.dashboard #dashboard-repo-list {
  padding: 12px;
  align-self: flex-start;
}

.page-content.dashboard #empty-feed {
  max-width: 620px;
  margin: 18px auto;
  padding: clamp(28px, 5vw, 60px) 24px !important;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gc-accent) 8%, transparent), transparent 64%), var(--gc-surface-alt);
}

.page-content.dashboard #empty-feed > svg {
  color: var(--gc-accent) !important;
  opacity: .85;
  margin-bottom: 8px;
}

.page-content.dashboard #empty-feed h2 {
  color: var(--gc-ink);
  font-size: clamp(1.55rem, 2.7vw, 2.05rem);
  letter-spacing: -.035em;
  margin-top: 12px;
}

.page-content.dashboard #empty-feed .help {
  color: var(--gc-muted);
  line-height: 1.65;
  max-width: 46ch;
  margin-inline: auto;
}

.page-content.dashboard #empty-feed a {
  color: var(--gc-accent);
  font-weight: 650;
  text-underline-offset: 3px;
}

/* Login: prioritize the real authentication workflow over stock marketing. */
.page-content.user.signin > .ui.page.grid {
  margin-top: clamp(28px, 7vh, 84px);
  margin-bottom: 58px;
}

.page-content.user.signin .column.tw-max-w-2xl {
  max-width: 480px;
}

.page-content.user.signin .ui.top.attached.header,
.page-content.user.signin .ui.attached.segment {
  background: var(--gc-surface);
  border-color: var(--gc-border);
}

.page-content.user.signin .ui.top.attached.header {
  padding: 24px 28px 20px;
  font-size: 1.45rem;
  font-weight: 750;
  color: var(--gc-ink);
  border-radius: 18px 18px 0 0;
  letter-spacing: -.025em;
}

.page-content.user.signin .ui.attached.segment {
  padding: 24px 28px 28px;
  border-radius: 0 0 18px 18px;
  box-shadow: var(--gc-shadow);
}

.page-content.user.signin .ui.form .field {
  margin-bottom: 18px;
}

.page-content.user.signin .ui.form .field label {
  color: var(--gc-ink);
  font-weight: 620;
}

.page-content.user.signin .ui.form input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 43px;
}

.page-content.user.signin .ui.primary.button {
  min-height: 46px;
  font-size: 1rem;
}

/* Explore and other empty pages get deliberate structure without fake data. */
.page-content.explore .ui.container,
.page-content.organization .ui.container,
.page-content.user.profile .ui.container {
  padding-top: 16px;
}

.page-content.explore .ui.input,
.page-content.issues .ui.input,
.page-content.milestones .ui.input {
  min-height: 42px;
}

/* A real, accessible visual boundary for empty search/list content. */
.page-content.explore .ui.container > .flex-list,
.page-content.user.profile .flex-list {
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: 18px;
  box-shadow: var(--gc-shadow);
  padding: 12px 20px;
  margin-top: 18px;
}

.page-content.explore .ui.container > .flex-list > div:not(.flex-item),
.page-content.user.profile .flex-list > div:not(.flex-item) {
  color: var(--gc-muted);
  text-align: center;
  font-size: 1.02rem;
  padding: clamp(38px, 7vw, 78px) 18px;
  line-height: 1.6;
}

.page-content.explore .flex-list .flex-item {
  padding: 18px 12px;
  border-radius: 12px;
}

.page-content.explore .flex-list .flex-item-title a {
  font-weight: 700;
  color: var(--gc-ink);
}

.page-content.explore .flex-list .flex-item-body {
  color: var(--gc-muted);
}

.page-content.user.profile #profile-avatar-card {
  border: 1px solid var(--gc-border);
  border-radius: 18px;
  box-shadow: var(--gc-shadow);
  overflow: hidden;
  background: var(--gc-surface);
}

.page-content.user.profile #profile-avatar-card .profile-avatar-name {
  color: var(--gc-ink);
  font-weight: 650;
}

.page-content.user.profile #profile-avatar-card > .content:first-child {
  background: radial-gradient(circle at 50% 30%, var(--gc-surface), var(--gc-surface-alt));
}

footer,
#footer {
  background: var(--gc-surface-alt);
  border-top: 1px solid var(--gc-border);
  color: var(--gc-muted);
}

@media (max-width: 800px) {
  #navbar {
    min-height: 56px;
  }

  #navbar .gc-code-brand {
    font-size: .92rem;
    margin-inline: 0;
  }

  .page-content.dashboard > .ui.container.flex-container {
    gap: 16px;
    padding: 16px 12px 32px;
  }

  .page-content.dashboard .flex-container-main {
    min-height: 280px;
    padding: 12px;
  }

  .page-content.dashboard #dashboard-repo-list {
    width: 100%;
  }
}

@media (max-width: 490px) {
  #navbar .gc-code-brand .gc-code-brand-suffix {
    display: none;
  }

  .page-content.user.signin .ui.top.attached.header {
    padding: 20px;
  }

  .page-content.user.signin .ui.attached.segment {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar .ui.secondary.menu .item,
  .ui.button {
    transition: none;
  }
}