/*
 * Cyber Garage Global Technician Login
 * Green V3 — dedicated scoped design
 */

body.cg-tech-login {
    --cg-green: #63e329;
    --cg-green-dark: #36b913;
    --cg-green-deep: #1b7508;
    --cg-green-glow: rgba(99, 227, 41, 0.24);
    --cg-page: #080d0a;
    --cg-panel: #121914;
    --cg-panel-soft: #18211a;
    --cg-border: rgba(99, 227, 41, 0.24);
    --cg-text: #f4f8f2;
    --cg-muted: #aab7aa;

    min-height: 100vh !important;
    margin: 0 !important;
    color: var(--cg-text) !important;
    background:
        radial-gradient(circle at 50% 15%, rgba(64, 180, 24, 0.15), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(40, 120, 18, 0.10), transparent 25%),
        linear-gradient(145deg, #070b08 0%, #0d1410 52%, #080d0a 100%) !important;
}

/* Remove the old purple decorative blocks. */
body.cg-tech-login .auth-wrapper::before,
body.cg-tech-login .auth-wrapper::after,
body.cg-tech-login .authentication-wrapper::before,
body.cg-tech-login .authentication-wrapper::after,
body.cg-tech-login .auth-inner::before,
body.cg-tech-login .auth-inner::after {
    display: none !important;
    content: none !important;
}

body.cg-tech-login .auth-wrapper,
body.cg-tech-login .authentication-wrapper {
    min-height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    background: transparent !important;
}

body.cg-tech-login .auth-inner,
body.cg-tech-login .authentication-inner {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Main login card. */
body.cg-tech-login .auth-inner > .card,
body.cg-tech-login .authentication-inner > .card,
body.cg-tech-login .card {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--cg-text) !important;
    background:
        linear-gradient(160deg, rgba(27, 38, 29, 0.98), rgba(13, 20, 15, 0.99)) !important;
    border: 1px solid var(--cg-border) !important;
    border-radius: 22px !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(65, 205, 25, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.cg-tech-login .card-body {
    padding: 34px 42px 38px !important;
}

/* Use only the exact round transparent Global logo. */
body.cg-tech-login img[src*="cyber-garage-global-green-transparent"] {
    display: block !important;
    width: 190px !important;
    height: 190px !important;
    max-width: 190px !important;
    max-height: 190px !important;
    object-fit: contain !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.42)) !important;
}

body.cg-tech-login .brand-logo,
body.cg-tech-login .auth-logo,
body.cg-tech-login .app-brand {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* Typography. */
body.cg-tech-login h1,
body.cg-tech-login h2,
body.cg-tech-login h3,
body.cg-tech-login h4,
body.cg-tech-login h5 {
    color: var(--cg-text) !important;
    letter-spacing: -0.02em !important;
}

body.cg-tech-login h4,
body.cg-tech-login .welcome-title {
    margin: 3px 0 8px !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

body.cg-tech-login p,
body.cg-tech-login label,
body.cg-tech-login .form-label {
    color: var(--cg-muted) !important;
}

body.cg-tech-login .technician-portal,
body.cg-tech-login .portal-label,
body.cg-tech-login .eyebrow {
    color: var(--cg-green) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
}

body.cg-tech-login .form-label,
body.cg-tech-login label {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.cg-tech-login .mb-3 {
    margin-bottom: 18px !important;
}

/* Fields. */
body.cg-tech-login input[type="text"],
body.cg-tech-login input[type="password"],
body.cg-tech-login .form-control {
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    color: #f7fff4 !important;
    caret-color: var(--cg-green) !important;
    background: #0b110d !important;
    border: 1px solid #334137 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.cg-tech-login input:focus,
body.cg-tech-login .form-control:focus {
    color: #ffffff !important;
    background: #0b110d !important;
    border-color: var(--cg-green) !important;
    box-shadow: 0 0 0 4px var(--cg-green-glow) !important;
    outline: none !important;
}

body.cg-tech-login input[type="checkbox"] {
    accent-color: var(--cg-green) !important;
}

/* Primary Sign In button. */
body.cg-tech-login button[type="submit"],
body.cg-tech-login input[type="submit"],
body.cg-tech-login .cg-tech-login-button,
body.cg-tech-login .btn-primary {
    width: 100% !important;
    min-height: 49px !important;
    margin-top: 8px !important;
    color: #071005 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #7bf13e, #43ca1a) !important;
    border: 1px solid #82f54a !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(66, 202, 26, 0.20) !important;
}

body.cg-tech-login button[type="submit"]:hover,
body.cg-tech-login input[type="submit"]:hover,
body.cg-tech-login .cg-tech-login-button:hover,
body.cg-tech-login .btn-primary:hover {
    color: #030703 !important;
    background: linear-gradient(135deg, #8cff4d, #50dc20) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 13px 30px rgba(76, 220, 32, 0.28) !important;
}

/* App selector. */
body.cg-tech-login .other-apps-title,
body.cg-tech-login .app-selector-title {
    margin: 28px 0 11px !important;
    padding-top: 22px !important;
    color: #dce6dc !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-top: 1px solid rgba(99, 227, 41, 0.14) !important;
}

body.cg-tech-login .app-links,
body.cg-tech-login .other-apps,
body.cg-tech-login .app-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.cg-tech-login .app-link,
body.cg-tech-login .other-apps a,
body.cg-tech-login .app-selector a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #dfffd5 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: #162219 !important;
    border: 1px solid rgba(99, 227, 41, 0.32) !important;
    border-radius: 9px !important;
    transition: all 0.2s ease !important;
}

body.cg-tech-login .app-link:hover,
body.cg-tech-login .other-apps a:hover,
body.cg-tech-login .app-selector a:hover {
    color: #071005 !important;
    background: var(--cg-green) !important;
    border-color: var(--cg-green) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 560px) {
    body.cg-tech-login .auth-wrapper,
    body.cg-tech-login .authentication-wrapper {
        padding: 18px 14px !important;
    }

    body.cg-tech-login .card-body {
        padding: 26px 24px 30px !important;
    }

    body.cg-tech-login img[src*="cyber-garage-global-green-transparent"] {
        width: 155px !important;
        height: 155px !important;
        max-width: 155px !important;
        max-height: 155px !important;
        margin-bottom: 19px !important;
    }

    body.cg-tech-login h4,
    body.cg-tech-login .welcome-title {
        font-size: 25px !important;
    }
}

/* Cyber Garage muted-green button refinement */
body.cg-tech-login button[type="submit"],
body.cg-tech-login input[type="submit"],
body.cg-tech-login .cg-tech-login-button,
body.cg-tech-login .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #397d49, #28643a) !important;
    border-color: #4b9560 !important;
    box-shadow: 0 8px 20px rgba(25, 89, 47, 0.22) !important;
}

body.cg-tech-login button[type="submit"]:hover,
body.cg-tech-login input[type="submit"]:hover,
body.cg-tech-login .cg-tech-login-button:hover,
body.cg-tech-login .btn-primary:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #438f55, #327447) !important;
    border-color: #5ba66c !important;
    box-shadow: 0 10px 22px rgba(28, 100, 52, 0.27) !important;
}

body.cg-tech-login .app-link,
body.cg-tech-login .other-apps a,
body.cg-tech-login .app-selector a {
    color: #e7f3e8 !important;
    background: linear-gradient(135deg, #263f2d, #1c3223) !important;
    border-color: #3f684a !important;
    box-shadow: none !important;
}

body.cg-tech-login .app-link:hover,
body.cg-tech-login .other-apps a:hover,
body.cg-tech-login .app-selector a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #397d49, #28643a) !important;
    border-color: #4b9560 !important;
    box-shadow: 0 7px 16px rgba(25, 89, 47, 0.20) !important;
}

/* Spacing between Admin and Dealer buttons */
body.cg-tech-login .app-links,
body.cg-tech-login .other-apps,
body.cg-tech-login .app-selector,
body.cg-tech-login .btn-group {
    gap: 12px !important;
}

body.cg-tech-login .app-link + .app-link,
body.cg-tech-login .other-apps a + a,
body.cg-tech-login .app-selector a + a,
body.cg-tech-login .btn-group a + a {
    margin-left: 12px !important;
}

body.cg-tech-login .app-link,
body.cg-tech-login .other-apps a,
body.cg-tech-login .app-selector a,
body.cg-tech-login .btn-group a {
    border-radius: 9px !important;
}