/*
 * Cyber Garage Global Customer App
 * Green visual override
 */

:root {
    --cgg-dark: #041712;
    --cgg-panel: #09251d;
    --cgg-panel-alt: #0d3026;
    --cgg-green-dark: #0c6042;
    --cgg-green: #169b68;
    --cgg-green-bright: #24cf88;
    --cgg-green-light: #86efbd;
    --cgg-border: rgba(79, 224, 155, 0.58);
    --cgg-text: #ffffff;
    --cgg-muted: #bde7d3;
}

html,
body {
    background:
        radial-gradient(
            circle at top right,
            rgba(36, 207, 136, 0.18),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #020d0a,
            var(--cgg-dark)
        ) !important;
    color: var(--cgg-text) !important;
}

.content-wrapper,
.content-body,
.app-content,
.auth-wrapper {
    color: var(--cgg-text) !important;
}

.card,
.card-body,
.auth-inner > .card,
.dashboard-card,
.customer-card,
.repair-card,
.authorization-card,
.photo-card {
    border-color: var(--cgg-border) !important;
    background: var(--cgg-panel) !important;
    color: #ffffff !important;
}

.card-header,
.modal-header,
.page-header,
thead,
thead tr,
thead th {
    border-color: var(--cgg-border) !important;
    background:
        linear-gradient(
            110deg,
            var(--cgg-green-dark),
            var(--cgg-green),
            var(--cgg-green-bright)
        ) !important;
    color: #ffffff !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
strong,
.card-title,
.page-title,
.transaction-title {
    color: #ffffff !important;
}

p,
li,
small,
.text-muted,
.card-text,
.subtitle,
.form-text {
    color: var(--cgg-muted) !important;
}

a {
    color: var(--cgg-green-light) !important;
}

a:hover,
a:focus {
    color: #ffffff !important;
}

.btn-primary,
.btn-success,
button[type="submit"],
input[type="submit"],
.action-button {
    border-color: #67dda0 !important;
    background:
        linear-gradient(
            135deg,
            #0f704d,
            #24cf88
        ) !important;
    color: #ffffff !important;
    box-shadow:
        0 8px 22px rgba(22, 155, 104, 0.28) !important;
}

.form-control,
.form-select,
input,
select,
textarea {
    border-color: var(--cgg-border) !important;
    background: #061b15 !important;
    color: #ffffff !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--cgg-green-bright) !important;
    box-shadow:
        0 0 0 0.2rem rgba(36, 207, 136, 0.20) !important;
}

input::placeholder,
textarea::placeholder {
    color: #91baa8 !important;
}

table,
.table,
tbody,
tbody tr,
tbody td {
    border-color: rgba(79, 224, 155, 0.25) !important;
    background: var(--cgg-panel) !important;
    color: #ffffff !important;
}

tbody tr:nth-child(even),
.transaction-item:nth-child(even) {
    background: var(--cgg-panel-alt) !important;
}

.alert-success {
    border-color: #67dda0 !important;
    background: #18543c !important;
    color: #ffffff !important;
}

.navbar,
.navbar-header,
.main-menu,
.footer,
footer {
    border-color: var(--cgg-border) !important;
    background: #061b15 !important;
}

@media (max-width: 900px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .card,
    .dashboard-card,
    .customer-card,
    .repair-card,
    .authorization-card,
    .photo-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    input,
    select,
    textarea,
    button,
    .btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/*
 * ============================================================
 * CYBER GARAGE GLOBAL — FINAL GREEN BRAND OVERRIDE
 * ============================================================
 */

html body[class*="cg-us-customer-"],
html body[class*="cg-us-customer-"] .app-content,
html body[class*="cg-us-customer-"] .content-wrapper,
html body[class*="cg-us-customer-"] .content-body,
html body[class*="cg-us-customer-"] .auth-wrapper {
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(42, 210, 139, 0.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #020d09,
            #061b13 52%,
            #0a2c20
        ) !important;
    color: #ffffff !important;
}

html body[class*="cg-us-customer-"] .card,
html body[class*="cg-us-customer-"] .card-body,
html body[class*="cg-us-customer-"] .auth-inner > .card,
html body[class*="cg-us-customer-"] .transaction-item,
html body[class*="cg-us-customer-"] .table-responsive {
    border-color: rgba(70, 220, 148, 0.55) !important;
    background:
        linear-gradient(
            145deg,
            #08241a,
            #0c3023
        ) !important;
    color: #ffffff !important;
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(25, 177, 111, 0.10) !important;
}

html body[class*="cg-us-customer-"] .card-header,
html body[class*="cg-us-customer-"] .modal-header,
html body[class*="cg-us-customer-"] .page-header,
html body[class*="cg-us-customer-"] thead,
html body[class*="cg-us-customer-"] thead tr,
html body[class*="cg-us-customer-"] thead th {
    border-color: rgba(112, 238, 178, 0.62) !important;
    background:
        linear-gradient(
            110deg,
            #075338,
            #11875a 48%,
            #22c982
        ) !important;
    color: #ffffff !important;
}

html body[class*="cg-us-customer-"] h1,
html body[class*="cg-us-customer-"] h2,
html body[class*="cg-us-customer-"] h3,
html body[class*="cg-us-customer-"] h4,
html body[class*="cg-us-customer-"] h5,
html body[class*="cg-us-customer-"] h6,
html body[class*="cg-us-customer-"] label,
html body[class*="cg-us-customer-"] strong,
html body[class*="cg-us-customer-"] .card-title,
html body[class*="cg-us-customer-"] .transaction-title {
    color: #ffffff !important;
}

html body[class*="cg-us-customer-"] p,
html body[class*="cg-us-customer-"] li,
html body[class*="cg-us-customer-"] small,
html body[class*="cg-us-customer-"] .text-muted,
html body[class*="cg-us-customer-"] .card-text,
html body[class*="cg-us-customer-"] .subtitle {
    color: #c8ead9 !important;
}

html body[class*="cg-us-customer-"] .btn-primary,
html body[class*="cg-us-customer-"] .btn-success,
html body[class*="cg-us-customer-"] button[type="submit"],
html body[class*="cg-us-customer-"] input[type="submit"],
html body[class*="cg-us-customer-"] .action-button {
    border: 1px solid #77e8b2 !important;
    background:
        linear-gradient(
            135deg,
            #0e754d,
            #24ca83
        ) !important;
    color: #ffffff !important;
    box-shadow:
        0 8px 22px rgba(19, 164, 102, 0.32) !important;
}

html body[class*="cg-us-customer-"] .btn-primary:hover,
html body[class*="cg-us-customer-"] .btn-success:hover,
html body[class*="cg-us-customer-"] button[type="submit"]:hover,
html body[class*="cg-us-customer-"] input[type="submit"]:hover {
    border-color: #a4f3cc !important;
    background:
        linear-gradient(
            135deg,
            #139260,
            #31dd94
        ) !important;
}

html body[class*="cg-us-customer-"] .form-control,
html body[class*="cg-us-customer-"] .form-select,
html body[class*="cg-us-customer-"] input,
html body[class*="cg-us-customer-"] select,
html body[class*="cg-us-customer-"] textarea {
    border-color: rgba(86, 222, 156, 0.58) !important;
    background: #061a13 !important;
    color: #ffffff !important;
}

html body[class*="cg-us-customer-"] .form-control:focus,
html body[class*="cg-us-customer-"] .form-select:focus,
html body[class*="cg-us-customer-"] input:focus,
html body[class*="cg-us-customer-"] select:focus,
html body[class*="cg-us-customer-"] textarea:focus {
    border-color: #2bd68c !important;
    box-shadow:
        0 0 0 0.2rem rgba(43, 214, 140, 0.20) !important;
}

html body[class*="cg-us-customer-"] table,
html body[class*="cg-us-customer-"] .table,
html body[class*="cg-us-customer-"] tbody,
html body[class*="cg-us-customer-"] tbody tr,
html body[class*="cg-us-customer-"] tbody td {
    border-color: rgba(79, 220, 151, 0.28) !important;
    background-color: #09251b !important;
    color: #ffffff !important;
}

html body[class*="cg-us-customer-"] tbody tr:nth-child(even) {
    background-color: #0d3024 !important;
}

html body[class*="cg-us-customer-"] .main-menu,
html body[class*="cg-us-customer-"] .navbar,
html body[class*="cg-us-customer-"] .navbar-header,
html body[class*="cg-us-customer-"] .footer,
html body[class*="cg-us-customer-"] footer {
    border-color: rgba(79, 220, 151, 0.42) !important;
    background: #061a13 !important;
}

html body[class*="cg-us-customer-"] a {
    color: #82edba !important;
}

html body[class*="cg-us-customer-"] a:hover,
html body[class*="cg-us-customer-"] a:focus {
    color: #ffffff !important;
}

/*
 * ============================================================
 * GLOBAL CUSTOMER PORTAL LOGIN — LOGO AND GREEN TONES
 * ============================================================
 */

html body.cg-us-customer-login {
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(56, 211, 125, 0.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #010b07,
            #03150e 55%,
            #062218
        ) !important;
}

html body.cg-us-customer-login .auth-wrapper,
html body.cg-us-customer-login .auth-inner {
    background: transparent !important;
}

html body.cg-us-customer-login .auth-inner > .card {
    overflow: hidden !important;
    border: 1px solid rgba(77, 215, 136, 0.58) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(
            155deg,
            #0d1712,
            #07110d
        ) !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.48),
        0 0 36px rgba(43, 190, 112, 0.12) !important;
}

html body.cg-us-customer-login .auth-inner > .card::before,
html body.cg-us-customer-login .card-body::before,
html body.cg-us-customer-login .brand-logo::before,
html body.cg-us-customer-login .brand-logo::after {
    display: none !important;
    content: none !important;
}

html body.cg-us-customer-login .card-body {
    padding: 24px 40px 38px !important;
    background:
        linear-gradient(
            155deg,
            #101a15,
            #08110d
        ) !important;
}

/* Transparent Cyber Garage Global logo */
html body.cg-us-customer-login .brand-logo,
html body.cg-us-customer-login .card-body .brand-logo,
html body.cg-us-customer-login .auth-inner .card-body > .brand-logo {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.cg-us-customer-login .brand-logo img,
html body.cg-us-customer-login .card-body .brand-logo img,
html body.cg-us-customer-login .auth-inner .card-body > .brand-logo > img {
    display: block !important;
    width: 230px !important;
    height: 230px !important;
    max-width: 72% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 14px 24px rgba(0, 0, 0, 0.46))
        drop-shadow(0 0 13px rgba(61, 222, 120, 0.18)) !important;
}

/* Customer Portal green title section */
html body.cg-us-customer-login .card-title {
    margin: 0 -40px !important;
    padding: 20px 40px 8px !important;
    border-top: 1px solid rgba(72, 214, 137, 0.44) !important;
    background:
        linear-gradient(
            105deg,
            #0a422d,
            #126f49,
            #1da969
        ) !important;
    color: #ffffff !important;
    font-size: 25px !important;
    text-align: left !important;
}

html body.cg-us-customer-login .card-title + .card-text {
    margin: 0 -40px 26px !important;
    padding: 6px 40px 20px !important;
    border-bottom: 1px solid rgba(72, 214, 137, 0.44) !important;
    background:
        linear-gradient(
            105deg,
            #0a422d,
            #126f49,
            #1da969
        ) !important;
    color: #e0f8ea !important;
    text-align: left !important;
}

/* Green Exit button */
html body.cg-us-customer-login .cg-customer-login-exit {
    position: absolute !important;
    z-index: 20 !important;
    top: 18px !important;
    right: 18px !important;
    padding: 10px 18px !important;
    border: 1px solid #73e2a8 !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            135deg,
            #0d6945,
            #20b873
        ) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

html body.cg-us-customer-login .cg-customer-login-exit:hover,
html body.cg-us-customer-login .cg-customer-login-exit:focus {
    border-color: #adf4cf !important;
    background:
        linear-gradient(
            135deg,
            #118457,
            #2bd68a
        ) !important;
    color: #ffffff !important;
}

/* Green customer login fields */
html body.cg-us-customer-login .auth-login-form label {
    color: #ffffff !important;
}

html body.cg-us-customer-login .auth-login-form .form-control {
    border: 1px solid rgba(70, 211, 137, 0.68) !important;
    border-radius: 10px !important;
    background: #050e0a !important;
    color: #ffffff !important;
}

html body.cg-us-customer-login .auth-login-form .form-control:focus {
    border-color: #32db8e !important;
    box-shadow:
        0 0 0 3px rgba(50, 219, 142, 0.17) !important;
}

/* Green Sign In button */
html body.cg-us-customer-login .auth-login-form .btn-primary {
    border: 1px solid #72dfa7 !important;
    border-radius: 10px !important;
    background:
        linear-gradient(
            135deg,
            #0e714a,
            #25c77e
        ) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow:
        0 10px 24px rgba(21, 159, 96, 0.27) !important;
}

html body.cg-us-customer-login .auth-login-form .btn-primary:hover,
html body.cg-us-customer-login .auth-login-form .btn-primary:focus {
    border-color: #acf2ce !important;
    background:
        linear-gradient(
            135deg,
            #12875a,
            #30d990
        ) !important;
}

@media (max-width: 600px) {
    html body.cg-us-customer-login .card-body {
        padding: 20px 24px 30px !important;
    }

    html body.cg-us-customer-login .brand-logo img,
    html body.cg-us-customer-login .card-body .brand-logo img,
    html body.cg-us-customer-login .auth-inner .card-body > .brand-logo > img {
        width: 190px !important;
        height: 190px !important;
        max-width: 68% !important;
    }

    html body.cg-us-customer-login .card-title {
        margin-right: -24px !important;
        margin-left: -24px !important;
        padding: 18px 24px 7px !important;
        font-size: 22px !important;
    }

    html body.cg-us-customer-login .card-title + .card-text {
        margin-right: -24px !important;
        margin-left: -24px !important;
        padding: 6px 24px 18px !important;
    }

    html body.cg-us-customer-login .cg-customer-login-exit {
        top: 14px !important;
        right: 14px !important;
        padding: 8px 14px !important;
    }
}