/* ============================================================
   VIA GIT — global component re-skin (loaded via custom/header.tmpl)
   Restyles Forgejo's Fomantic-UI surfaces to our system.
   ============================================================ */
:root{
  --vg-bg:#0b0c12; --vg-bg2:#0f111a; --vg-surface:#12141f; --vg-surface2:#171a26;
  --vg-line:#1e2233; --vg-line2:#2a2f42; --vg-ink:#dfe6f5; --vg-muted:#96a0ba; --vg-bright:#eaf0fc;
  --vg-teal:#39c5bb; --vg-cyan:#95dfde; --vg-pink:#f4a6c6;
  --vg-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

/* ---- refined app background: subtle radial glow + faint grid ---- */
body{background:var(--vg-bg)!important}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(78% 55% at 88% -8%,#39c5bb16,transparent 60%),radial-gradient(66% 50% at -4% 106%,#bb9af710,transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:52px 52px;
  -webkit-mask:radial-gradient(85% 60% at 50% 0%,#000 25%,transparent 82%);mask:radial-gradient(85% 60% at 50% 0%,#000 25%,transparent 82%)}

/* ---- z-index scale: header + its dropdowns above all content blocks ---- */
#navbar{position:relative!important;z-index:300!important}
/* round the header mascot logo */
#navbar img[src*="logo"],#navbar .item.brand img,#navbar>.item:first-child img{border-radius:50%!important;box-shadow:0 0 0 1.5px #39c5bb55}
#navbar .menu,#navbar .dropdown-menu,#navbar [class*="menu"]{z-index:320!important}
.ui.dropdown .menu{z-index:310}
.ui.modals,.ui.dimmer{z-index:900}
.tippy-box,[data-tippy-root]{z-index:900!important}
/* our content blocks must stay below the header */
.vg-hero2,.vg-dash .secondary-nav,.page-content.dashboard{z-index:1;position:relative}

/* ---- dropdowns & popup menus (space switcher, user menu, all dropdowns) ---- */
.ui.dropdown .menu,.ui.menu .ui.dropdown .menu,.tippy-box{
  background:var(--vg-surface2)!important;border:1px solid var(--vg-line2)!important;border-radius:12px!important;
  box-shadow:0 20px 55px -18px #000d,0 0 0 1px #39c5bb1a!important;padding:.35rem!important;margin-top:.45rem!important;overflow:hidden}
.ui.dropdown .menu>.item{border-radius:8px!important;color:var(--vg-ink)!important;padding:.55rem .7rem!important;font-family:var(--vg-mono);transition:background .12s,color .12s}
.ui.dropdown .menu>.item:hover,.ui.dropdown .menu>.active.item{background:#39c5bb18!important;color:var(--vg-teal)!important}
.ui.dropdown .menu>.divider{border-top:1px solid var(--vg-line)!important;margin:.3rem .2rem!important}
.ui.dropdown .menu>.header{color:var(--vg-teal)!important;font-family:var(--vg-mono);font-size:.7rem!important;text-transform:none!important;letter-spacing:.03em;padding:.5rem .6rem .3rem!important}
.ui.dropdown .menu .item>.image,.ui.dropdown .menu .item>img{border-radius:6px!important}

/* ---- cards / segments / boxes ---- */
.ui.segment,.ui.card,.ui.attached.segment,.repository .ui.segment,.ui.comments .comment .content,.markup{
  background:var(--vg-surface)!important;border-color:var(--vg-line)!important;box-shadow:none!important}
.ui.segment,.ui.card{border-radius:14px!important}
.ui.segments{border-radius:14px!important;overflow:hidden;border-color:var(--vg-line)!important}
.ui.attached.header{background:var(--vg-bg2)!important;border-color:var(--vg-line)!important}

/* ---- buttons ---- */
.ui.button{border-radius:10px!important;font-family:var(--vg-mono);font-weight:600;transition:transform .1s,box-shadow .2s,background .18s}
.ui.button:hover{transform:translateY(-1px)}
.ui.button:active{transform:translateY(0)}
.ui.primary.button,.ui.primary.buttons .button{background:var(--vg-teal)!important;color:#04211f!important;box-shadow:0 7px 22px -11px var(--vg-teal)!important}
.ui.primary.button:hover{background:#4dd6cc!important;box-shadow:0 11px 30px -10px var(--vg-teal)!important}
.ui.basic.button{box-shadow:inset 0 0 0 1px var(--vg-line2)!important;color:var(--vg-ink)!important;background:transparent!important}
.ui.basic.button:hover{box-shadow:inset 0 0 0 1px var(--vg-teal)!important;color:var(--vg-teal)!important}

/* ---- inputs / forms ---- */
.ui.input>input,.ui.form input:not([type=checkbox]):not([type=radio]),.ui.form textarea,.ui.selection.dropdown,.ui.action.input>input{
  background:var(--vg-bg2)!important;border:1px solid var(--vg-line2)!important;border-radius:10px!important;color:var(--vg-ink)!important;font-family:var(--vg-mono)}
.ui.input>input:focus,.ui.form input:focus,.ui.form textarea:focus,.ui.selection.dropdown:focus{border-color:var(--vg-teal)!important;box-shadow:0 0 0 3px #39c5bb26!important}
::placeholder{color:#6f7a95!important}

/* ---- tabs / menus / active states ---- */
.ui.tabular.menu .active.item,.ui.secondary.pointing.menu .active.item{border-color:var(--vg-teal)!important;color:var(--vg-teal)!important}
.ui.menu .active.item{color:var(--vg-teal)!important;background:transparent!important}
.ui.tabular.menu{border-bottom:1px solid var(--vg-line)!important}

/* ---- labels / tags ---- */
.ui.label{border-radius:7px!important;font-family:var(--vg-mono);font-weight:600}

/* ---- tables / lists ---- */
.ui.table{background:var(--vg-surface)!important;border:1px solid var(--vg-line)!important;border-radius:12px!important;overflow:hidden}
.ui.table thead th{background:var(--vg-bg2)!important;color:var(--vg-muted)!important;font-family:var(--vg-mono);border-color:var(--vg-line)!important}
.ui.table td{border-color:var(--vg-line)!important}
.repo-list .item,.flex-item{border-color:var(--vg-line)!important}

/* ---- Telegram OAuth button: proper Telegram logo (openidConnect uses generic icon) ---- */
.oauth-login-link.telegram>svg,.oauth-login-link.telegram>img,a.telegram.ui.button>svg{display:none!important}
.oauth-login-link.telegram::before{content:"";width:26px;height:26px;flex:0 0 26px;margin-right:.5rem;background:url("/assets/img/telegram.svg") no-repeat center/contain}

/* ---- links ---- */
.markup a,a.primary{color:var(--vg-cyan)}
a:hover{filter:brightness(1.12)}

/* ---- scrollbar ---- */
*{scrollbar-color:#2c3346 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2c3346;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--vg-teal)}

/* ---- code / diff subtle ---- */
.file-header,.diff-file-header,.repository .header-wrapper{background:var(--vg-bg2)!important}

@media(prefers-reduced-motion:reduce){.ui.button:hover{transform:none}}