/* ============================================================
   SutraHub — APPLICATION-WIDE design system.
   Applies to every page: org, user, explore, admin, settings,
   notifications, issues, packages, repo. Loaded after the theme
   and before the repo-specific layout.
   ============================================================ */

/* ---------- 1. PAGE SHELL: one container rhythm everywhere ---------- */
.page-content {
  padding-bottom: 56px;
}
.page-content > .ui.container,
.page-content .ui.container:not(.fluid) {
  max-width: 1360px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}
/* the repo page runs its own grid; opt it out of the generic container */
.page-content.repository > .ui.container { max-width: 1180px !important; }

/* ---------- 2. BUTTONS ----------
   Forgejo emits BOTH `.ui.primary.button` and bare `.primary.button`.
   Cover every combination or pages disagree with each other. */
.ui.button,
button.ui.button,
.button:not(.sh-nav-item):not(.sh-act-btn) {
  border-radius: 8px !important;
  font-weight: 500;
  transition: transform 140ms cubic-bezier(0.23,1,0.32,1),
              background-color 140ms ease,
              border-color 140ms ease !important;
}
.ui.button:active, .button:active { transform: scale(0.97); }

/* primary / green — one accent across the app */
.ui.primary.button, .primary.button,
.ui.green.button, .green.button,
.ui.positive.button {
  background: #238636 !important;
  border-color: transparent !important;
  color: #fff !important;
}
.ui.primary.button:hover, .primary.button:hover,
.ui.green.button:hover, .green.button:hover {
  background: #2ea043 !important;
}

/* secondary / basic */
.ui.basic.button, .secondary.button, .ui.secondary.button {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  color: var(--sh-text) !important;
  box-shadow: none !important;
}
.ui.basic.button:hover, .secondary.button:hover, .ui.secondary.button:hover {
  background: var(--sh-surface-2) !important;
  border-color: var(--sh-violet) !important;
}

/* destructive */
.ui.red.button, .ui.negative.button {
  background: #b62324 !important; border-color: transparent !important; color: #fff !important;
}

/* ---------- 3. CARDS / PANELS ---------- */
.ui.segment, .ui.attached.segment, .ui.card,
.flex-list, .repo-list, .ui.attached.header,
.ui.attached.table, .dashboard .ui.segment {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.ui.attached.header + .ui.attached.segment,
.ui.top.attached + .ui.attached { border-top: none !important; border-radius: 0 0 12px 12px !important; }
.ui.top.attached { border-radius: 12px 12px 0 0 !important; }

/* panel headers (Members / Teams / etc.) */
.ui.attached.header, .ui.segment > h4.ui.header:first-child {
  background: var(--sh-surface-2) !important;
  color: var(--sh-text) !important;
  font-size: 14px !important; font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--sh-border) !important;
}

/* ---------- 4. LISTS (repos, issues, members, notifications) ---------- */
.flex-list { padding: 0 !important; overflow: hidden; }
.flex-list > .flex-item {
  padding: 14px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--sh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: background-color 140ms ease;
}
.flex-list > .flex-item:last-child { border-bottom: none !important; }
.flex-list > .flex-item:hover { background: var(--sh-surface-2) !important; }
.flex-item-title { font-size: 15px; font-weight: 600; }
.flex-item-title a { color: var(--sh-text) !important; }
.flex-item-title a:hover { color: var(--sh-accent) !important; }
.flex-item-body { color: var(--sh-text-dim); font-size: 13px; }

/* ---------- 5. TAB BARS (org profile, user profile, settings) ---------- */
.ui.tabular.menu, .ui.secondary.pointing.menu {
  border-bottom: 1px solid var(--sh-border) !important;
  gap: 2px;
}
.ui.tabular.menu .item, .ui.secondary.pointing.menu .item {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--sh-text-dim) !important;
  font-weight: 500;
  padding: 10px 14px !important;
  transition: color 140ms ease, background-color 140ms ease !important;
}
.ui.tabular.menu .item:hover, .ui.secondary.pointing.menu .item:hover {
  background: var(--sh-surface-2) !important; color: var(--sh-text) !important;
}
.ui.tabular.menu .active.item, .ui.secondary.pointing.menu .active.item {
  background: transparent !important;
  color: var(--sh-text) !important;
  font-weight: 600;
  border-bottom: 2px solid transparent !important;
  position: relative;
}
.ui.tabular.menu .active.item::after,
.ui.secondary.pointing.menu .active.item::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--sh-gradient);
}
/* counts inside tabs */
.ui.tabular.menu .item .ui.label, .ui.secondary.pointing.menu .item .ui.label {
  background: var(--sh-surface-2) !important;
  border: none !important; color: var(--sh-text-dim) !important;
  font-size: 12px !important; padding: 2px 7px !important;
}

/* ---------- 6. INPUTS & DROPDOWNS ---------- */
input, textarea, select,
.ui.input > input, .ui.form input, .ui.form textarea {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 8px !important;
  color: var(--sh-text) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}
input:focus, textarea:focus, .ui.input > input:focus {
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-accent) 20%, transparent) !important;
  outline: none !important;
}
.ui.dropdown .menu {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--sh-shadow) !important;
  transform-origin: top;
  animation: sh-pop 150ms cubic-bezier(0.23,1,0.32,1) both;
}
.ui.dropdown .menu > .item:hover { background: var(--sh-surface-2) !important; }
@keyframes sh-pop {
  from { opacity: 0; transform: scale(0.97) translateY(-3px) }
  to   { opacity: 1; transform: none }
}

/* ---------- 7. LABELS / CHIPS ---------- */
.ui.label, .ui.basic.label {
  border-radius: 999px !important;
  background: var(--sh-surface-2) !important;
  border: 1px solid var(--sh-border) !important;
  color: var(--sh-text-dim) !important;
  font-weight: 500 !important;
}

/* ---------- 8. TABLES ---------- */
.ui.table {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.ui.table thead th {
  background: var(--sh-surface-2) !important;
  color: var(--sh-text-dim) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--sh-border) !important;
}
.ui.table tbody td { border-top: 1px solid var(--sh-border) !important; }
.ui.table tbody tr:hover { background: var(--sh-surface-2) !important; }

/* ---------- 9. PROFILE HEADERS (org + user) ---------- */
.page-content.organization .ui.container > .tw-flex:first-child,
.page-content.user.profile #profile-avatar-card {
  gap: 18px;
}
.page-content.organization img.ui.avatar,
.page-content.organization .ui.avatar img { border-radius: 14px !important; }

/* ---------- 10. FOOTER: same on every page ---------- */
.page-footer {
  max-width: 1360px; margin: 0 auto;
  padding: 18px 24px !important;
  border-top: 1px solid var(--sh-border);
  display: flex; align-items: center; gap: 18px;
  font-size: 13px; color: var(--sh-text-dim);
}
.page-footer .right-links { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.page-footer a { color: var(--sh-text-dim); }
.page-footer a:hover { color: var(--sh-text); }

/* ---------- 11. MOTION + A11Y ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; transition-duration: 1ms !important;
  }
}
:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 768px) {
  .ui.button, .ui.menu .item { min-height: 44px; }
  .page-content > .ui.container { padding-inline: 16px !important; }
}

/* ---------- autofilled inputs ----------
   Chrome paints autofilled fields with its own opaque light background that
   `background` cannot override — only a large inset shadow covers it, and the
   text colour must go through -webkit-text-fill-color. Without this, autofilled
   credentials render as light text on a light box, i.e. invisible.

   Lives here rather than in the theme files because this loads on every page in
   both themes, and the rule is written against theme tokens so it follows.
   ponytail: the 1e8s transition delay is the standard trick to stall Chrome's
   own repaint — there is no real API for this. */
/* Fomantic (bundled in Forgejo's index.css) hardcodes light autofill
   backgrounds — `ivory`, `#fffaf0`, `#f0faff` — behind the doubled-class
   specificity hack `.ui.form .field.field input:-webkit-autofill` (0,3,1),
   all marked !important. A bare `input:-webkit-autofill` (0,1,1) loses to it
   regardless of load order, which is why the fields stayed light.
   These selectors match or exceed that specificity. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill,
.ui.form .field.field input:-webkit-autofill,
.ui.form .field.field input:-webkit-autofill:hover,
.ui.form .field.field input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill:active,
.ui.form .error.error input:-webkit-autofill,
.ui.form .info.info input:-webkit-autofill,
.ui.form .success.success input:-webkit-autofill,
.ui.form .warning.warning input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sh-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--sh-surface) inset !important;
  -webkit-text-fill-color: var(--sh-text) !important;
  caret-color: var(--sh-text) !important;
  border-color: var(--sh-border) !important;
  transition: background-color 1e8s ease-in-out 0s !important;
}
input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill:focus {
  border-color: var(--sh-accent) !important;
}