/* KGPS Customer Portal Light Theme
   White / light gray portal body with dark readable text.
   Header/navbar colors are intentionally not overridden here.
*/

:root {
    --kgps-orange: #ffb500;
    --kgps-orange-dark: #d49400;
    --kgps-text: #1f2933;
    --kgps-muted: #5f6b7a;
    --kgps-border: #d7dce2;
    --kgps-page: #f4f5f7;
    --kgps-surface: #ffffff;
    --kgps-soft: #eef1f4;
    --kgps-dark: #222831;
}

html,
body {
    background: var(--kgps-page) !important;
    color: var(--kgps-text) !important;
}

body {
    min-height: 100vh;
}

main,
.container,
.container-fluid,
.content,
.page-content,
.portal-content {
    color: var(--kgps-text) !important;
}

.card,
.panel,
.box,
.dashboard-card,
.stat-card,
.record-card,
.customer-card,
.login-card,
.auth-card {
    background: var(--kgps-surface) !important;
    color: var(--kgps-text) !important;
    border: 1px solid var(--kgps-border) !important;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08) !important;
}

.card-header,
.panel-heading,
.box-header {
    background: var(--kgps-soft) !important;
    color: var(--kgps-text) !important;
    border-bottom: 1px solid var(--kgps-border) !important;
    font-weight: 700;
}

.card-body,
.card-footer,
.panel-body,
.box-body {
    color: var(--kgps-text) !important;
}

h1, h2, h3, h4, h5, h6,
label,
.form-label,
.fw-bold,
strong,
dt {
    color: var(--kgps-text) !important;
}

.text-muted {
    color: var(--kgps-muted) !important;
}

.table,
table,
.dataTable,
.datatable {
    background: #ffffff !important;
    color: #1f2933 !important;
    border-color: var(--kgps-border) !important;
}

.table thead th,
table thead th,
.dataTable thead th {
    background: #e9ecef !important;
    color: #111827 !important;
    border-color: var(--kgps-border) !important;
    font-weight: 800;
}

.table tbody tr,
table tbody tr,
.dataTable tbody tr {
    background: #ffffff !important;
    color: #1f2933 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
table.table-striped tbody tr:nth-of-type(odd),
.dataTable.stripe tbody tr.odd,
.dataTable.display tbody tr.odd {
    background-color: #f7f8fa !important;
    color: #1f2933 !important;
}

.table-hover > tbody > tr:hover > *,
table tbody tr:hover,
.dataTable.display tbody tr:hover {
    background-color: #fff3cd !important;
    color: #111827 !important;
}

.table td,
.table th,
table td,
table th,
.dataTable td,
.dataTable th {
    border-color: var(--kgps-border) !important;
    color: #1f2933 !important;
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate,
.dataTables_wrapper label {
    color: var(--kgps-text) !important;
}

.dataTables_wrapper input,
.dataTables_wrapper select {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid var(--kgps-border) !important;
}

.dataTables_wrapper .paginate_button {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid var(--kgps-border) !important;
    border-radius: 6px !important;
    margin: 0 2px;
}

.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
    background: var(--kgps-orange) !important;
    color: #111111 !important;
    border-color: var(--kgps-orange-dark) !important;
}

.form-control,
.form-select,
input,
select,
textarea {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd2d9 !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: var(--kgps-orange) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 181, 0, 0.22) !important;
}

::placeholder {
    color: #6b7280 !important;
}

.list-group-item,
.dropdown-menu,
.modal-content,
.alert-light {
    background: #ffffff !important;
    color: var(--kgps-text) !important;
    border-color: var(--kgps-border) !important;
}

.modal-header,
.modal-footer {
    background: var(--kgps-soft) !important;
    border-color: var(--kgps-border) !important;
}

.btn-primary,
.btn-warning,
.btn-kgps,
.btn-orange,
button[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):not(.btn-light):not(.btn-dark) {
    background-color: var(--kgps-orange) !important;
    border-color: var(--kgps-orange-dark) !important;
    color: #111111 !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-kgps:hover,
.btn-orange:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):not(.btn-light):not(.btn-dark):hover {
    background-color: var(--kgps-orange-dark) !important;
    border-color: var(--kgps-orange-dark) !important;
    color: #111111 !important;
}

.btn-outline-primary,
.btn-outline-warning {
    color: #111111 !important;
    border-color: var(--kgps-orange-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-warning:hover {
    background-color: var(--kgps-orange) !important;
    color: #111111 !important;
}

.badge.bg-warning,
.badge.bg-primary {
    background: var(--kgps-orange) !important;
    color: #111111 !important;
}

a {
    color: #8a6100;
}

a:hover {
    color: #5f4300;
}

.login-page,
.auth-page {
    background: var(--kgps-page) !important;
    color: var(--kgps-text) !important;
}

.login-box,
.auth-box {
    background: #ffffff !important;
    color: var(--kgps-text) !important;
    border: 1px solid var(--kgps-border) !important;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10) !important;
}

.customer-summary,
.customer-details,
.customer-info,
.customer-records,
.customer-page,
.view-customer {
    background: #ffffff !important;
    color: var(--kgps-text) !important;
    border-color: var(--kgps-border) !important;
}

.customer-summary .card,
.customer-details .card,
.customer-info .card,
.customer-records .card {
    background: #ffffff !important;
}

.service-photo,
.photo-card,
.image-card {
    background: #f1f3f5 !important;
    color: var(--kgps-text) !important;
}

/* FIXED COOKIE BANNER
   This prevents the cookie message from stretching/breaking the page.
   It supports common class/id names used in the portal.
*/
#cookieBanner,
#cookie-banner,
#cookieNotice,
#cookie-notice,
.cookie-banner,
.cookie-notice,
.cookie-consent,
.cookie-consent-banner {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 99999 !important;

    width: auto !important;
    max-width: 1180px !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;

    background: #ffffff !important;
    color: #1f2933 !important;
    border: 1px solid var(--kgps-border) !important;
    border-left: 6px solid var(--kgps-orange) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.22) !important;

    padding: 14px 16px !important;
    line-height: 1.35 !important;
    font-size: 14px !important;

    overflow: visible !important;
    transform: none !important;
}

#cookieBanner *,
#cookie-banner *,
#cookieNotice *,
#cookie-notice *,
.cookie-banner *,
.cookie-notice *,
.cookie-consent *,
.cookie-consent-banner * {
    color: inherit !important;
    max-width: 100% !important;
}

#cookieBanner p,
#cookie-banner p,
#cookieNotice p,
#cookie-notice p,
.cookie-banner p,
.cookie-notice p,
.cookie-consent p,
.cookie-consent-banner p {
    margin: 0 !important;
    color: #1f2933 !important;
}

#cookieBanner button,
#cookie-banner button,
#cookieNotice button,
#cookie-notice button,
.cookie-banner button,
.cookie-notice button,
.cookie-consent button,
.cookie-consent-banner button,
#acceptCookies,
.accept-cookies,
.cookie-accept {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    background: var(--kgps-orange) !important;
    color: #111111 !important;
    border: 1px solid var(--kgps-orange-dark) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

#cookieBanner a,
#cookie-banner a,
#cookieNotice a,
#cookie-notice a,
.cookie-banner a,
.cookie-notice a,
.cookie-consent a,
.cookie-consent-banner a {
    color: #755100 !important;
    text-decoration: underline !important;
}

@media (max-width: 700px) {
    #cookieBanner,
    #cookie-banner,
    #cookieNotice,
    #cookie-notice,
    .cookie-banner,
    .cookie-notice,
    .cookie-consent,
    .cookie-consent-banner {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
        font-size: 13px !important;
    }

    #cookieBanner button,
    #cookie-banner button,
    #cookieNotice button,
    #cookie-notice button,
    .cookie-banner button,
    .cookie-notice button,
    .cookie-consent button,
    .cookie-consent-banner button,
    #acceptCookies,
    .accept-cookies,
    .cookie-accept {
        width: 100% !important;
    }
}

@media print {
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .card,
    table,
    .table {
        box-shadow: none !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    #cookieBanner,
    #cookie-banner,
    #cookieNotice,
    #cookie-notice,
    .cookie-banner,
    .cookie-notice,
    .cookie-consent,
    .cookie-consent-banner {
        display: none !important;
    }
}