﻿/* ===============================
   Bootstrap + jQuery UI Coverage
   Dent Estimators Orange/Black
   =============================== */

:root {
    --de-orange: #ff6a00;
    --de-orange-dark: #d95500;
    --de-black: #111;
    --de-dark: #222;
    --de-gray: #f5f5f5;
    --de-border: #ddd;
    --de-text: #222;
    --de-white: #fff;
}

/* Global */
body,
.ui-widget {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--de-text);
}

a {
    color: var(--de-orange);
}

    a:hover {
        color: var(--de-orange-dark);
    }

/* Bootstrap buttons */
.btn-primary,
.btn-success,
.btn-warning,
.btn-info,
.btn-de {
    background: linear-gradient(180deg, #ff7f1f, #ff5e00);
    border-color: var(--de-orange-dark);
    color: #fff;
}

    .btn-primary:hover,
    .btn-success:hover,
    .btn-warning:hover,
    .btn-info:hover,
    .btn-de:hover {
        background: linear-gradient(180deg, #ff9447, #ff6a00);
        border-color: var(--de-orange);
        color: #fff;
    }

.btn-secondary,
.btn-dark {
    background: var(--de-black);
    border-color: var(--de-dark);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-warning,
.btn-outline-info {
    color: var(--de-orange);
    border-color: var(--de-orange);
}

    .btn-outline-primary:hover,
    .btn-outline-warning:hover,
    .btn-outline-info:hover {
        background: var(--de-orange);
        color: #fff;
    }

/* Forms */
.form-control,
.form-select,
.input-group-text,
textarea,
select,
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="search"],
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
    border-radius: 10px;
    border: 1px solid var(--de-border);
    min-height: 44px;
}

    .form-control:focus,
    .form-select:focus,
    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--de-orange);
        box-shadow: 0 0 0 .25rem rgba(255,106,0,.2);
        outline: none;
    }

label,
.form-label {
    font-weight: 600;
    color: var(--de-black);
}

/* Tables */
.table thead,
.table-dark,
.ui-widget-header {
    background: var(--de-black);
    color: #fff;
}

.table-hover tbody tr:hover {
    background: rgba(255,106,0,.08);
}

/* Cards / modals */
.card,
.modal-content,
.dropdown-menu,
.ui-dialog,
.ui-datepicker,
.ui-autocomplete {
    border-radius: 14px;
    border: 1px solid var(--de-border);
    box-shadow: 0 8px 22px rgba(0,0,0,.15);
}

.card-header,
.modal-header,
.offcanvas-header,
.ui-dialog-titlebar,
.ui-datepicker-header {
    background: linear-gradient(90deg, #111, #222);
    color: #fff;
    border: none;
}

/* Navbar */
.navbar,
.navbar-de {
    background: linear-gradient(90deg, #111, #222);
}

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: #fff !important;
    }

        .navbar .nav-link:hover,
        .dropdown-item:hover {
            color: var(--de-orange) !important;
        }

/* Alerts */
.alert-primary,
.alert-warning,
.alert-info {
    background: rgba(255,106,0,.12);
    border-color: rgba(255,106,0,.35);
    color: #111;
}

/* Badges */
.badge.bg-primary,
.badge.bg-warning,
.badge.bg-info {
    background: var(--de-orange) !important;
    color: #fff;
}

/* Pagination */
.page-link {
    color: var(--de-orange);
}

.page-item.active .page-link {
    background: var(--de-orange);
    border-color: var(--de-orange);
}

/* List groups */
.list-group-item.active {
    background: var(--de-orange);
    border-color: var(--de-orange);
}

/* Progress */
.progress-bar,
.ui-progressbar-value {
    background: linear-gradient(90deg, #ff7f1f, #ff5e00);
}

/* jQuery UI buttons */
.ui-button,
.ui-widget button {
    background: linear-gradient(180deg, #ff7f1f, #ff5e00);
    border: 1px solid var(--de-orange-dark);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
}

    .ui-button:hover,
    .ui-widget button:hover {
        background: var(--de-orange);
        color: #fff;
    }

/* jQuery UI datepicker */
.ui-datepicker td a {
    border-radius: 8px;
    text-align: center;
    color: #222;
}

    .ui-datepicker td a:hover {
        background: rgba(255,106,0,.15);
        color: var(--de-orange);
    }

.ui-datepicker .ui-state-active {
    background: var(--de-orange) !important;
    color: #fff !important;
    border: none !important;
}

/* Tabs */
.ui-tabs .ui-tabs-nav {
    background: var(--de-black);
    border: none;
    border-radius: 12px 12px 0 0;
}

    .ui-tabs .ui-tabs-nav li {
        background: transparent;
        border: none;
    }

        .ui-tabs .ui-tabs-nav li a {
            color: #fff;
        }

        .ui-tabs .ui-tabs-nav li.ui-tabs-active {
            background: var(--de-orange);
            border-radius: 8px;
        }

/* Accordion */
.ui-accordion .ui-accordion-header {
    background: var(--de-black);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
}

.ui-accordion .ui-accordion-header-active {
    background: var(--de-orange);
}

/* Menu / autocomplete */
.ui-menu-item-wrapper {
    padding: 10px 12px;
    border-radius: 8px;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    background: var(--de-orange) !important;
    border-color: var(--de-orange) !important;
    color: #fff !important;
}

/* Close buttons */
.btn-close,
.ui-dialog-titlebar-close {
    filter: none;
}

/* Mobile safe buttons */
.mobile-action-btn {
    position: fixed;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 9999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--de-orange);
    color: #fff;
    border: none;
    box-shadow: 0 5px 18px rgba(0,0,0,.3);
}

    .mobile-action-btn.left {
        left: 15px;
    }

    .mobile-action-btn.right {
        right: 15px;
    }

/* Utility */
.de-bg-dark {
    background: var(--de-black);
    color: #fff;
}

.de-bg-orange {
    background: var(--de-orange);
    color: #fff;
}

.de-text-orange {
    color: var(--de-orange);
}

.de-border-orange {
    border-color: var(--de-orange) !important;
}
