/* ═══════════════════════════════════════════════════════════════════════════
   AVI-SPL Lab — Gitea Custom Theme
   Brand: Nightshade #0A1D5F, Cobalt #0972CE, Turquoise #37C1CE
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Core brand ────────────────────────────────────────────────────── */
    --color-primary: #0972CE;
    --color-primary-dark-1: #0760AD;
    --color-primary-dark-2: #054F8C;
    --color-primary-light-1: #2B8BD8;
    --color-primary-light-2: #4DA4E2;

    /* ── Backgrounds — Nightshade spectrum ─────────────────────────────── */
    --color-body: #060F35;
    --color-box-body: #0A1D5F;
    --color-box-body-highlight: #0D2470;
    --color-secondary-dark-1: #0A1D5F;
    --color-secondary-dark-2: #060F35;
    --color-secondary-dark-3: #040A24;
    --color-secondary-dark-4: #030818;
    --color-secondary-dark-5: #020610;
    --color-secondary-dark-6: #010408;

    /* ── Accents — Turquoise + Cobalt ──────────────────────────────────── */
    --color-accent: #37C1CE;
    --color-small-accent: #37C1CE;

    /* ── Text ──────────────────────────────────────────────────────────── */
    --color-text: #E8ECF4;
    --color-text-light: #8B9DC3;
    --color-text-light-1: #8B9DC3;
    --color-text-light-2: #6B7FA3;
    --color-text-light-3: #4B6183;

    /* ── Borders ───────────────────────────────────────────────────────── */
    --color-secondary-dark-7: rgba(55, 193, 206, 0.12);
    --color-secondary-dark-8: rgba(55, 193, 206, 0.08);
    --color-secondary-dark-9: rgba(55, 193, 206, 0.06);
    --color-secondary-dark-10: rgba(55, 193, 206, 0.04);

    /* ── Buttons ───────────────────────────────────────────────────────── */
    --color-primary-contrast: #FFFFFF;
    --color-green: #37C1CE;
    --color-red: #F89021;
    --color-yellow: #F89021;
    --color-blue: #0972CE;

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --color-shadow: rgba(6, 15, 53, 0.6);
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.ui.secondary.pointing.menu,
#navbar,
.page-head,
.page-header,
header.navbar,
.gitea-navbar {
    background: rgba(6, 15, 53, 0.85) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(55, 193, 206, 0.12) !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* ── Page background ────────────────────────────────────────────────────── */
body {
    background: #060F35 !important;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Cards and containers ───────────────────────────────────────────────── */
.ui.segment,
.repository .repo-header,
.ui.attached.segment {
    background: rgba(10, 29, 95, 0.4) !important;
    border: 1px solid rgba(55, 193, 206, 0.12) !important;
    border-radius: 8px;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a {
    color: #37C1CE;
}

a:hover {
    color: #4DD4E0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ui.primary.button,
.ui.primary.buttons .button {
    background: #0972CE !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 6px;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
    background: #0760AD !important;
}

.ui.basic.button {
    border: 1px solid rgba(55, 193, 206, 0.2) !important;
    color: #E8ECF4 !important;
    background: transparent !important;
}

.ui.basic.button:hover {
    border-color: rgba(55, 193, 206, 0.4) !important;
    background: rgba(9, 114, 206, 0.1) !important;
}

.ui.negative.button,
.ui.red.button {
    background: #F89021 !important;
}

.ui.green.button,
.ui.positive.button {
    background: #37C1CE !important;
    color: #060F35 !important;
}

/* ── Form inputs ────────────────────────────────────────────────────────── */
input,
textarea,
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.selection.dropdown {
    background: rgba(6, 15, 53, 0.6) !important;
    border: 1px solid rgba(55, 193, 206, 0.15) !important;
    color: #E8ECF4 !important;
    border-radius: 6px;
}

input:focus,
textarea:focus,
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus {
    border-color: #0972CE !important;
    box-shadow: 0 0 0 2px rgba(9, 114, 206, 0.2) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.ui.table {
    background: rgba(10, 29, 95, 0.3) !important;
    border: 1px solid rgba(55, 193, 206, 0.1) !important;
    color: #E8ECF4 !important;
}

.ui.table thead th {
    background: rgba(6, 15, 53, 0.6) !important;
    color: #8B9DC3 !important;
    border-bottom: 1px solid rgba(55, 193, 206, 0.12) !important;
}

.ui.table tbody tr:hover {
    background: rgba(9, 114, 206, 0.08) !important;
}

/* ── Repository file list ───────────────────────────────────────────────── */
.repo-file-list .name a {
    color: #37C1CE !important;
}

/* ── Labels and tags ────────────────────────────────────────────────────── */
.ui.label {
    border-radius: 100px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer,
.page-footer {
    background: rgba(6, 15, 53, 0.85) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(55, 193, 206, 0.12) !important;
    color: #8B9DC3 !important;
}

/* ── Dropdown menus ─────────────────────────────────────────────────────── */
.ui.dropdown .menu,
.ui.selection.dropdown .menu,
.tippy-box[data-theme~='default'] {
    background: #0A1D5F !important;
    border: 1px solid rgba(55, 193, 206, 0.15) !important;
    border-radius: 8px;
    z-index: 9999 !important;
}

/* ── Ensure navbar dropdowns render above everything ───────────────────── */
#navbar .ui.dropdown,
#navbar .right.stackable.menu .ui.dropdown {
    position: relative;
    z-index: 9999 !important;
}

#navbar .ui.dropdown .menu {
    z-index: 10000 !important;
    position: absolute !important;
}

.ui.dropdown .menu > .item,
.ui.dropdown .menu > .item:hover {
    color: #E8ECF4 !important;
}

.ui.dropdown .menu > .item:hover {
    background: rgba(9, 114, 206, 0.15) !important;
}

/* ── Code blocks ────────────────────────────────────────────────────────── */
code,
pre,
.code-inner {
    background: rgba(6, 15, 53, 0.8) !important;
    border: 1px solid rgba(55, 193, 206, 0.08);
    border-radius: 4px;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #060F35;
}

::-webkit-scrollbar-thumb {
    background: rgba(55, 193, 206, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(55, 193, 206, 0.35);
}

/* ── Toasts and notifications ───────────────────────────────────────────── */
.ui.message {
    background: rgba(10, 29, 95, 0.6) !important;
    border: 1px solid rgba(55, 193, 206, 0.15) !important;
    color: #E8ECF4 !important;
    border-radius: 8px;
}

/* ── Sign-in page ───────────────────────────────────────────────────────── */
.page-content.user.signin .ui.card,
.page-content.user.signup .ui.card {
    background: rgba(10, 29, 95, 0.5) !important;
    border: 1px solid rgba(55, 193, 206, 0.15) !important;
    box-shadow: 0 8px 32px rgba(6, 15, 53, 0.4) !important;
    border-radius: 12px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.ui.tabular.menu .active.item {
    background: rgba(10, 29, 95, 0.4) !important;
    border-color: rgba(55, 193, 206, 0.12) !important;
    color: #37C1CE !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ui.pagination.menu .active.item {
    background: #0972CE !important;
    color: #FFFFFF !important;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.dashboard .news .ui.avatar,
.dashboard .news .commit-body {
    color: #8B9DC3 !important;
}

/* ── Empty states ───────────────────────────────────────────────────────── */
.empty.center {
    color: #8B9DC3;
}

/* ── Selection highlight ────────────────────────────────────────────────── */
::selection {
    background: rgba(9, 114, 206, 0.4);
    color: #FFFFFF;
}

/* ── Logo in navbar — AVI-SPL wordmark + "Lab Code" label ─────────────── */
#navbar-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    padding-right: 12px !important;
}

#navbar-logo img {
    width: auto !important;
    height: 28px !important;
    max-width: 170px !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
}

#navbar-logo::after {
    content: 'LAB CODE';
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #37C1CE;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Hide Gitea's default Explore/Help nav links ─────────────────────── */
#navbar .navbar-left > a.item:not(#navbar-logo),
#navbar .navbar-left > .navbar-mobile-right {
    display: none !important;
}

/* ── Landing/explore page logo ────────────────────────────────────────── */
.landing img.logo,
img.logo {
    width: 300px !important;
    height: auto !important;
    max-height: 55px !important;
    object-fit: contain !important;
}

/* ── Branded login page ──────────────────────────────────────────────── */
.avispl-login-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem 0.5rem;
}

.avispl-login-hero img {
    height: 50px;
    width: auto;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.avispl-login-hero h1 {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 0.5rem 0 !important;
}

.avispl-login-hero p {
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-size: 1rem !important;
    color: #8B9DC3 !important;
    max-width: 400px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Make login page look like the home page — no card, full-page hero */
.page-content.user.signin .column {
    max-width: 600px !important;
}

/* Hide Gitea's default "Sign In" header */
.page-content.user.signin .ui.top.attached.header.center {
    display: none !important;
}

/* Make the form card invisible */
.page-content.user.signin .ui.attached.segment {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Center the SSO button */
.page-content.user.signin #oauth2-login-navigator {
    display: flex !important;
    justify-content: center !important;
}

.page-content.user.signin #oauth2-login-navigator-inner {
    align-items: center !important;
}

/* Vertically center the whole page */
.page-content.user.signin .ui.middle.very.relaxed.page.grid {
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide username/password form fields — SSO only */
.page-content.user.signin .ui.form .required.field,
.page-content.user.signin .ui.form .inline.field,
.page-content.user.signin .ui.form .field:has(button.ui.primary.button) {
    display: none !important;
}

/* Hide the "or" divider */
.page-content.user.signin .divider.divider-text {
    display: none !important;
}

/* Hide passkey / webauthn section */
.page-content.user.signin .signin-passkey,
.page-content.user.signin #webauthn-error {
    display: none !important;
}

/* Style the SSO button full-width and prominent */
.page-content.user.signin #oauth2-login-navigator .oauth-login-link {
    background: #0972CE !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.75rem 2rem !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: background 0.2s !important;
}

.page-content.user.signin #oauth2-login-navigator .oauth-login-link:hover {
    background: #0760AD !important;
}

/* Hide the OpenID SVG icon in the SSO button */
.page-content.user.signin #oauth2-login-navigator .oauth-login-link .svg {
    display: none !important;
}