/*
 * PluginPip Git v1.4
 * Final polish pass for Gitea 1.27.x.
 * Brand tokens: PluginPip-Branding.
 */

:root {
  --pp-navy: #07143A;
  --pp-navy-deep: #020A20;
  --pp-blue: #0066FF;
  --pp-cyan: #00D4FF;
  --pp-sky: #25B9FF;
  --pp-light: #F6F9FF;
  --pp-white: #FFFFFF;
  --pp-slate: #60708F;
  --pp-charcoal: #111318;
  --pp-silver: #C8D0DC;

  --pp-border: rgba(96, 112, 143, .20);
  --pp-border-blue: rgba(0, 102, 255, .17);
  --pp-shadow-sm: 0 4px 16px rgba(7, 20, 58, .055);
  --pp-shadow-md: 0 12px 34px rgba(7, 20, 58, .085);
  --pp-radius-sm: 8px;
  --pp-radius: 12px;
  --pp-radius-lg: 16px;
}

html, body {
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  background: #fff;
  color: var(--pp-charcoal);
}

/* ==========================================================
   1. MAIN PLUGINPIP HEADER
   ========================================================== */

#navbar {
  min-height: 54px !important;
  background: var(--pp-navy) !important;
  border-bottom: 1px solid rgba(0, 212, 255, .34) !important;
  box-shadow: 0 5px 20px rgba(2, 10, 32, .16) !important;
}

#navbar > .navbar-left,
#navbar > .navbar-right {
  min-height: 54px !important;
  align-items: stretch !important;
}

#navbar > .navbar-left > .item,
#navbar > .navbar-right > .item,
#navbar .navbar-left > a.item,
#navbar .navbar-right > a.item {
  color: rgba(255,255,255,.92) !important;
  border-radius: 0 !important;
  font-weight: 550;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

#navbar > .navbar-left > .item:hover,
#navbar > .navbar-right > .item:hover,
#navbar .navbar-left > a.item:hover,
#navbar .navbar-right > a.item:hover {
  color: var(--pp-cyan) !important;
  background: rgba(0,212,255,.072) !important;
}

#navbar .item.active {
  color: #fff !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: inset 0 -2px 0 var(--pp-cyan) !important;
}

#navbar-logo {
  width: auto !important;
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 18px !important;
  padding-right: 19px !important;
}

#navbar-logo img {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0, 102, 255, .20));
}

#navbar-logo::after {
  content: "PluginPip Git";
  color: #fff;
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -.012em;
  white-space: nowrap;
}

#navbar svg {
  color: currentColor !important;
}

#navbar .ui.dropdown .menu,
#navbar .user-menu {
  border: 1px solid var(--pp-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--pp-shadow-md) !important;
}

#navbar .ui.dropdown .menu .item,
#navbar .user-menu .item {
  color: var(--pp-charcoal) !important;
}

#navbar .ui.dropdown .menu .item:hover,
#navbar .user-menu .item:hover {
  color: var(--pp-blue) !important;
  background: rgba(0, 102, 255, .065) !important;
}

/* ==========================================================
   2. LIGHT SECONDARY BAR / REPOSITORY NAV
   ========================================================== */

.secondary-nav,
.dashboard-navbar,
.page-header {
  background: linear-gradient(180deg, #fbfdff 0%, var(--pp-light) 100%) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--pp-border-blue) !important;
  box-shadow: 0 2px 10px rgba(7, 20, 58, .025) !important;
}

.secondary-nav > .ui.container,
.dashboard-navbar > .ui.container,
.page-header > .ui.container {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.secondary-nav .repo-header {
  min-height: 42px;
}

.secondary-nav .ui.secondary.pointing.menu,
.secondary-nav overflow-menu.ui.secondary.pointing.menu {
  margin-top: 3px !important;
  margin-bottom: 0 !important;
  min-height: 38px !important;
}

.secondary-nav .ui.secondary.pointing.menu .item,
.secondary-nav overflow-menu .item {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-weight: 600 !important;
  color: #33415f !important;
}

.secondary-nav .ui.secondary.pointing.menu .active.item,
.secondary-nav overflow-menu .active.item,
.dashboard-navbar .active.item,
.ui.secondary.pointing.menu .active.item,
.ui.tabular.menu .active.item {
  color: var(--pp-navy) !important;
  border-color: var(--pp-cyan) !important;
}

.secondary-nav .ui.tabs.divider {
  margin: 0 !important;
  border-color: transparent !important;
}

/* ==========================================================
   3. DASHBOARD CONTRIBUTION AREA
   ========================================================== */

.page-content.dashboard,
.page-content.user.profile {
  padding-top: 14px !important;
}

.contribution-graph,
.user.profile .heatmap,
.dashboard .heatmap,
.activity-heatmap {
  border-radius: var(--pp-radius) !important;
}

svg.js-calendar-graph-svg,
.contribution-graph svg {
  border-radius: 10px;
}

.contribution-graph .total-contributions,
.contribution-graph .legend,
.user.profile .heatmap .total-contributions {
  color: var(--pp-slate) !important;
}

.contribution-graph,
.user.profile .heatmap,
.dashboard .heatmap {
  padding: 13px 14px 10px !important;
  border: 1px solid rgba(0, 102, 255, .10) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 4px 16px rgba(7,20,58,.035) !important;
}

/* ==========================================================
   4. DASHBOARD REPOSITORY CARDS / PANELS
   ========================================================== */

.dashboard-repos,
.dashboard-orgs,
.dashboard.feeds .news,
.ui.segment,
.ui.card,
.ui.attached.segment {
  border-color: var(--pp-border) !important;
}

.dashboard-repos,
.dashboard-orgs {
  border-radius: var(--pp-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--pp-shadow-sm) !important;
  background: #fff !important;
}

.dashboard-repos .ui.top.attached.header,
.dashboard-orgs .ui.top.attached.header,
.ui.top.attached.header {
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-navy) !important;
  font-weight: 720 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.dashboard-repos .ui.attached.segment,
.dashboard-orgs .ui.attached.segment {
  box-shadow: none !important;
}

.dashboard-repos .repo-list .item,
.dashboard-repos .repo-list a.item,
.dashboard-repos .repository-list .item {
  min-height: 34px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border-radius: 7px !important;
  transition: background .14s ease, color .14s ease !important;
}

.dashboard-repos .repo-list .item:hover,
.dashboard-repos .repo-list a.item:hover,
.dashboard-repos .repository-list .item:hover {
  background: rgba(0, 102, 255, .045) !important;
}

.dashboard-repos .ui.tabular.menu,
.dashboard-repos .ui.secondary.menu {
  min-height: 36px !important;
  margin-bottom: 8px !important;
}

.dashboard-repos .ui.tabular.menu .item,
.dashboard-repos .ui.secondary.menu .item {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Feed items are less loose and more deliberate. */
.dashboard.feeds .news {
  padding: 10px 0 !important;
}

.dashboard.feeds .news .ui.avatar {
  margin-top: 2px !important;
}

/* Generic cards / content panels */
.ui.segment,
.ui.card,
.ui.attached.segment {
  border-radius: var(--pp-radius-sm) !important;
}

.ui.card {
  box-shadow: var(--pp-shadow-sm) !important;
}

/* ==========================================================
   5. FORMS / SEARCH / ACTIONS
   ========================================================== */

.ui.form input:not([type="checkbox"]),
.ui.form textarea,
.ui.form select,
.ui.input > input {
  border-radius: var(--pp-radius-sm) !important;
  border-color: rgba(96, 112, 143, .28) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.input > input:focus {
  border-color: var(--pp-sky) !important;
  box-shadow: 0 0 0 3px rgba(37, 185, 255, .12) !important;
}

.ui.primary.button,
.ui.green.button,
.ui.button.primary,
button.primary {
  background: var(--pp-blue) !important;
  border-color: var(--pp-blue) !important;
  color: #fff !important;
  border-radius: var(--pp-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, .12) !important;
}

.ui.primary.button:hover,
.ui.green.button:hover,
.ui.button.primary:hover,
button.primary:hover {
  background: #0059df !important;
  border-color: #0059df !important;
}

.ui.basic.primary.button {
  color: var(--pp-blue) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui.blue.label,
.ui.primary.label {
  background: var(--pp-blue) !important;
}

a {
  text-underline-offset: .14em;
}

/* ==========================================================
   6. POLISHED SIGN-IN PAGE
   ========================================================== */

.page-content.user.signin {
  position: relative;
  min-height: calc(100vh - 112px);
  padding: 58px 20px 64px !important;
  background:
    radial-gradient(circle at 16% 14%, rgba(0, 212, 255, .09), transparent 27%),
    radial-gradient(circle at 84% 10%, rgba(0, 102, 255, .08), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%) !important;
}

.page-content.user.signin .ui.middle.very.relaxed.page.grid {
  margin: 0 auto !important;
}

.page-content.user.signin .column {
  max-width: 460px !important;
}

.page-content.user.signin .column::before {
  content: "PluginPip Git";
  display: block;
  margin: 0 auto 8px;
  color: var(--pp-navy);
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.page-content.user.signin .column::after {
  content: "Private software development infrastructure";
  order: -1;
  display: block;
  margin: 0 auto 22px;
  color: var(--pp-slate);
  text-align: center;
  font-size: 13px;
  letter-spacing: .012em;
}

.page-content.user.signin h4.ui.top.attached.header {
  padding: 16px 20px !important;
  border: 1px solid var(--pp-border) !important;
  border-bottom: 0 !important;
  border-top: 4px solid var(--pp-cyan) !important;
  border-radius: var(--pp-radius-lg) var(--pp-radius-lg) 0 0 !important;
  background: #fff !important;
  color: var(--pp-navy) !important;
  font-size: 17px !important;
  font-weight: 740 !important;
  box-shadow: 0 -3px 18px rgba(7,20,58,.025) !important;
}

.page-content.user.signin h4.ui.top.attached.header + .ui.attached.segment {
  padding: 22px !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 0 0 var(--pp-radius-lg) var(--pp-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--pp-shadow-md) !important;
}

.page-content.user.signin .ui.form .field > label {
  color: #33415f !important;
  font-weight: 650 !important;
}

.page-content.user.signin .ui.primary.button {
  min-height: 42px;
  font-weight: 720 !important;
}

.page-content.user.signin .divider.divider-text {
  color: var(--pp-slate) !important;
}

.page-content.user.signin a {
  color: var(--pp-blue) !important;
}

/* ==========================================================
   7. INTENTIONAL PLUGINPIP FOOTER
   ========================================================== */

footer {
  min-height: 42px !important;
  padding: 8px 16px !important;
  border-top: 1px solid var(--pp-border-blue) !important;
  background: linear-gradient(180deg, #fbfdff 0%, var(--pp-light) 100%) !important;
  color: var(--pp-slate) !important;
  box-shadow: 0 -2px 10px rgba(7,20,58,.02) !important;
}

footer .ui.container {
  min-height: 26px !important;
  align-items: center !important;
  font-size: 12px !important;
}

footer a {
  color: #37517f !important;
  font-weight: 560 !important;
}

footer a:hover {
  color: var(--pp-blue) !important;
}

footer a[href="https://pluginpip.co.uk"] {
  color: var(--pp-navy) !important;
  font-weight: 760 !important;
  position: relative;
  padding-left: 18px !important;
}

footer a[href="https://pluginpip.co.uk"]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--pp-cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.11);
}

footer .item {
  margin-left: 7px !important;
  margin-right: 7px !important;
}

/* De-emphasise implementation metadata without removing it. */
footer a[href*="gitea"],
footer a[href*="/licenses"],
footer a[href*="/api"],
footer .version,
footer .page,
footer .template {
  opacity: .72;
}

/* ==========================================================
   8. AVATARS / RESPONSIVE
   ========================================================== */

.avatar,
.ui.avatar.image,
.navbar-avatar img {
  border-radius: 8px !important;
}

.navbar-avatar img {
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}

@media (max-width: 900px) {
  #navbar-logo {
    padding-left: 12px !important;
    padding-right: 9px !important;
  }

  #navbar-logo::after {
    display: none;
  }

  .page-content.user.signin {
    padding-top: 32px !important;
  }
}

@media (max-width: 767px) {
  footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .secondary-nav > .ui.container {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}