@import url("./variables.css");

/*
 * Suski GitLab Theme
 * Functional phase 1 implementation.
 * GitLab structure and behaviour remain unchanged.
 */

html,
body {
    font-family: var(--suski-font-ui) !important;
}

body {
    background: var(--suski-ivory) !important;
    color: var(--suski-charcoal) !important;
}

/* Top navigation */

.gl-top-bar,
header.navbar,
.navbar-gitlab {
    background: var(--suski-red-dark) !important;
    border-bottom: 1px solid rgb(201 162 39 / 35%) !important;
}

.gl-top-bar a,
header.navbar a,
.navbar-gitlab a,
.gl-top-bar button,
header.navbar button {
    color: var(--suski-white) !important;
}

.gl-top-bar .gl-search-box-by-type,
.gl-top-bar input[type="search"],
.gl-top-bar input[type="text"] {
    background: rgb(255 255 255 / 12%) !important;
    border-color: rgb(255 255 255 / 24%) !important;
    color: var(--suski-white) !important;
}

.gl-top-bar input::placeholder {
    color: rgb(255 255 255 / 68%) !important;
}

/* Sidebar */

.super-sidebar,
.super-sidebar-nav,
.nav-sidebar {
    background: var(--suski-white) !important;
    border-right: var(--suski-border) !important;
}

.super-sidebar .active,
.nav-sidebar .active,
.sidebar-sub-level-items .active {
    background: rgb(179 32 37 / 8%) !important;
    color: var(--suski-red) !important;
    border-left-color: var(--suski-red) !important;
}

.super-sidebar a:hover,
.nav-sidebar a:hover {
    background: var(--suski-ivory) !important;
    color: var(--suski-red) !important;
}

/* Main surfaces */

.layout-page,
.content-wrapper,
.page-with-contextual-sidebar,
.gl-bg-subtle {
    background: var(--suski-ivory) !important;
}

/* Links */

a:not(.gl-button):not(.btn) {
    color: var(--suski-red);
}

a:not(.gl-button):not(.btn):hover {
    color: var(--suski-red-hover);
}

/* Primary buttons */

.btn-confirm,
.gl-button.btn-confirm,
.gl-button.gl-button-primary,
.gl-button.gl-button-confirm,
button[data-variant="confirm"] {
    background: var(--suski-red) !important;
    border-color: var(--suski-red) !important;
    color: var(--suski-white) !important;
    border-radius: var(--suski-radius-sm) !important;
}

.btn-confirm:hover,
.gl-button.btn-confirm:hover,
.gl-button.gl-button-primary:hover,
.gl-button.gl-button-confirm:hover,
button[data-variant="confirm"]:hover {
    background: var(--suski-red-hover) !important;
    border-color: var(--suski-red-hover) !important;
}

/* Secondary buttons */

.btn-default,
.gl-button.gl-button-default {
    background: var(--suski-white) !important;
    border-color: var(--suski-gray-300) !important;
    color: var(--suski-charcoal) !important;
    border-radius: var(--suski-radius-sm) !important;
}

.btn-default:hover,
.gl-button.gl-button-default:hover {
    border-color: var(--suski-red) !important;
    color: var(--suski-red) !important;
}

/* Cards and panels */

.card,
.gl-card,
.content-block,
.settings-content,
.detail-page-description,
.project-card,
.issue-card,
.merge-request-card {
    background: var(--suski-white) !important;
    border: var(--suski-border) !important;
    border-radius: var(--suski-radius) !important;
    box-shadow: var(--suski-shadow-sm) !important;
}

/* Forms */

.form-control,
.gl-form-input,
.gl-form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background: var(--suski-white) !important;
    border-color: var(--suski-gray-300) !important;
    border-radius: var(--suski-radius-sm) !important;
    color: var(--suski-charcoal) !important;
}

.form-control:focus,
.gl-form-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--suski-red) !important;
    box-shadow: 0 0 0 3px rgb(179 32 37 / 14%) !important;
    outline: none !important;
}

/* Tables and repository lists */

table,
.tree-table,
.repository-files {
    background: var(--suski-white) !important;
}

table tbody tr:hover,
.tree-item:hover,
.repository-file:hover {
    background: var(--suski-ivory) !important;
}

/* Tabs */

.gl-tabs-nav-item-active,
.nav-tabs .active,
.nav-links .active {
    color: var(--suski-red) !important;
    border-bottom-color: var(--suski-red) !important;
}

/* Statuses */

.badge-success,
.gl-badge-success {
    background: var(--suski-success) !important;
    color: var(--suski-white) !important;
}

.badge-warning,
.gl-badge-warning {
    background: var(--suski-warning) !important;
    color: var(--suski-charcoal) !important;
}

.badge-danger,
.gl-badge-danger {
    background: var(--suski-danger) !important;
    color: var(--suski-white) !important;
}

.badge-info,
.gl-badge-info {
    background: var(--suski-info) !important;
    color: var(--suski-white) !important;
}

/* Accessibility */

:focus-visible {
    outline: 3px solid var(--suski-gold) !important;
    outline-offset: 2px !important;
}

/* SUSKI GITLAB LOGIN START */

html.suski-gitlab-login,
html.suski-gitlab-login body {
    min-height: 100%;
}

html.suski-gitlab-login body {
    background:
        radial-gradient(
            circle at 12% 14%,
            rgb(179 32 37 / 16%),
            transparent 34%
        ),
        radial-gradient(
            circle at 93% 18%,
            rgb(179 32 37 / 20%),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fffafa 0%,
            #fff7f7 48%,
            #f8dcdc 100%
        ) !important;
}



html.suski-gitlab-login .login-page,
html.suski-gitlab-login .omniauth-container,
html.suski-gitlab-login main,
html.suski-gitlab-login footer {
    position: relative;
    z-index: 1;
}

html.suski-gitlab-login .login-page {
    width: min(100%, 560px) !important;
    margin: 0 auto !important;
    padding-top: clamp(54px, 8vh, 110px) !important;
}

html.suski-gitlab-login .suski-gitlab-login-logo {
    width: 92px;
    height: 108px;
    margin: 0 auto 20px;
    background:
}

html.suski-gitlab-login .brand-logo,
html.suski-gitlab-login .brand-logo img,
html.suski-gitlab-login .signin-logo,
html.suski-gitlab-login .tanuki-logo,
html.suski-gitlab-login svg[data-testid="tanuki-logo"],
html.suski-gitlab-login .gitlab-logo {
    display: none !important;
}

html.suski-gitlab-login h1,
html.suski-gitlab-login h2,
html.suski-gitlab-login .login-page-title {
    color: #8f151a !important;
    text-align: center !important;
    font-weight: 700 !important;
}

html.suski-gitlab-login .login-page h1,
html.suski-gitlab-login .login-page h2 {
    margin-bottom: 42px !important;
}

html.suski-gitlab-login .login-page label {
    color: #721216 !important;
    font-weight: 600 !important;
}

html.suski-gitlab-login .login-page input[type="text"],
html.suski-gitlab-login .login-page input[type="email"],
html.suski-gitlab-login .login-page input[type="password"] {
    min-height: 54px !important;
    border: 1px solid #cf7377 !important;
    border-radius: 8px !important;
    background: rgb(255 255 255 / 82%) !important;
    color: #222222 !important;
}

html.suski-gitlab-login .login-page input:focus {
    border-color: #b32025 !important;
    box-shadow: 0 0 0 3px rgb(179 32 37 / 14%) !important;
}

html.suski-gitlab-login .btn-confirm,
html.suski-gitlab-login button[type="submit"],
html.suski-gitlab-login input[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #c7252b, #a9161b) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.suski-gitlab-login .btn-confirm:hover,
html.suski-gitlab-login button[type="submit"]:hover,
html.suski-gitlab-login input[type="submit"]:hover {
    background: linear-gradient(180deg, #ae1c21, #891115) !important;
}

html.suski-gitlab-login a {
    color: #a9161b !important;
}

html.suski-gitlab-login .omniauth-container,
html.suski-gitlab-login .omniauth-providers {
    margin-top: 28px !important;
}

html.suski-gitlab-login .omniauth-container .gl-button,
html.suski-gitlab-login .omniauth-providers .gl-button,
html.suski-gitlab-login a[href*="openid_connect"] {
    width: 100% !important;
    min-height: 50px !important;
    border: 1px solid #d7cfd0 !important;
    border-radius: 8px !important;
    background: rgb(255 255 255 / 88%) !important;
    color: #721216 !important;
    font-weight: 600 !important;
}

html.suski-gitlab-login .divider,
html.suski-gitlab-login .omniauth-container .gl-display-flex {
    color: #721216 !important;
}

html.suski-gitlab-login footer {
    border-top: 1px solid rgb(179 32 37 / 20%) !important;
    background: rgb(255 255 255 / 20%) !important;
}

html.suski-gitlab-login footer a {
    color: #9b171c !important;
}

html.suski-gitlab-login .suski-hidden-login-method {
    display: none !important;
}

@media (max-width: 800px) {
    html.suski-gitlab-login body::after {
        display: none;
    }

    html.suski-gitlab-login .login-page {
        width: calc(100% - 32px) !important;
        padding-top: 38px !important;
    }
}

/* SUSKI GITLAB LOGIN END */

/* Hide GitLab logo and title, fix password eye button */

html.suski-gitlab-login .brand-logo,
html.suski-gitlab-login .brand-logo img,
html.suski-gitlab-login .signin-logo,
html.suski-gitlab-login .tanuki-logo,
html.suski-gitlab-login svg[data-testid="tanuki-logo"],
html.suski-gitlab-login .gitlab-logo,
html.suski-gitlab-login .login-page-title,
html.suski-gitlab-login h1,
html.suski-gitlab-login h2 {
    display: none !important;
}

html.suski-gitlab-login .login-page {
    padding-top: clamp(36px, 6vh, 72px) !important;
}

html.suski-gitlab-login .suski-gitlab-login-logo {
    margin-bottom: 34px !important;
}

/* Password field group */
html.suski-gitlab-login .gl-form-input-group,
html.suski-gitlab-login .input-group {
    display: flex !important;
    width: 100% !important;
    align-items: stretch !important;
}

html.suski-gitlab-login .gl-form-input-group input,
html.suski-gitlab-login .input-group input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 8px 0 0 8px !important;
}

/* Eye button */
html.suski-gitlab-login .password-toggle,
html.suski-gitlab-login button[data-testid="password-toggle"],
html.suski-gitlab-login .gl-form-input-group-append button,
html.suski-gitlab-login .input-group-append button {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #cf7377 !important;
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important;

    background: #ffffff !important;
    color: #721216 !important;
    box-shadow: none !important;
}

html.suski-gitlab-login .password-toggle svg,
html.suski-gitlab-login button[data-testid="password-toggle"] svg,
html.suski-gitlab-login .gl-form-input-group-append button svg,
html.suski-gitlab-login .input-group-append button svg {
    width: 22px !important;
    height: 22px !important;
    color: #721216 !important;
    fill: currentColor !important;
}

/* Hide GitLab logo image */
body > div.gl-h-full.gl-flex.gl-flex-wrap > div.container.gl-self-center > main > div.gl-my-5 > div.col-sm-12.gl-text-center > img {
    display: none !important;
}

/* Password eye button */
#__BVID__15 > div > div > button {
    width: 15% !important;
    height: 93% !important;
    margin: 2px !important;
}


/* Make login container full width */
@media (min-width: 576px) {
    body > div.gl-h-full.gl-flex.gl-flex-wrap > div.container.gl-self-center > main > div.gl-my-5 > div.gl-w-full.gl-ml-auto.gl-mr-auto.bar.sm\:gl-w-1\/2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}


/* Refine right-side eagle watermark */
html.suski-gitlab-login body::after {
    top: 10% !important;
    right: -8% !important;
    width: min(52vw, 820px) !important;
    height: 78vh !important;

    opacity: 0.075 !important;

    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    mix-blend-mode: multiply !important;
    filter:
        grayscale(1)
        sepia(1)
        saturate(3)
        hue-rotate(315deg)
        contrast(0.65)
        brightness(1.35) !important;
}


/* ----------------------------------------------------------
   Suski Login Background
---------------------------------------------------------- */

html.suski-gitlab-login body{
    background:
        linear-gradient(
            rgba(255,248,248,.18),
            rgba(255,248,248,.18)
        ),
        url("https://assets.suski.io/s_overrides/img/gitlab-login-background.jpg")
        center center / cover
        no-repeat
        fixed !important;
}


/* SUSKI WORK ITEM LAYOUT START */

/* Reduce the excessive space above the work item */
.work-item-detail,
.issuable-details,
.js-issue,
[data-testid="work-item-detail"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep the page content aligned and remove the cramped right side */
.work-item-detail .gl-container,
.issuable-details .gl-container,
.work-item-detail .container-fluid,
.issuable-details .container-fluid {
  width: 100% !important;
  max-width: none !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Main work-item card */
.work-item-detail .work-item-attributes-wrapper,
.work-item-detail .work-item-overview,
.issuable-details .issuable-main-view,
.issuable-details .detail-page-description {
  margin-top: 0 !important;
}

/* Reduce the gap underneath the GitLab top navigation */
.content-wrapper .content,
.page-with-contextual-sidebar .content-wrapper {
  padding-top: 8px !important;
}

/* Prevent nested elements from creating additional horizontal overflow */
.work-item-detail,
.issuable-details,
.detail-page,
.detail-page-body {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* SUSKI WORK ITEM LAYOUT END */

/* SUSKI ISSUE CONTENT PADDING */
.issue-details .js-issuable-description-wrapper,
.issue-details .js-issue-widgets {
    padding: 10px !important;
}