/* =============================================================
   HiTech Brand Theme Override
   Palette: Black (#0b0b0d) / White (#ffffff) / HiTech Orange rgb(241, 89, 65)
   Applied on top of style2.css – keep this file at the END of the header.
   ============================================================= */

:root {
    --hitech-primary: rgb(241, 89, 65);
    --hitech-primary-rgb: 241, 89, 65;
    --hitech-primary-dark: rgb(205, 60, 40);
    --hitech-primary-soft: rgba(241, 89, 65, 0.08);
    --hitech-primary-soft-2: rgba(241, 89, 65, 0.18);
    --hitech-black: #0b0b0d;
    --hitech-surface: #ffffff;
    --hitech-surface-alt: #f7f7f9;
    --hitech-border: #ececee;
    --hitech-text: #16181c;
    --hitech-muted: #6f767e;
}

/* ---------- Global primary/theme overrides ---------- */
.default-theme {
    --primary-color: var(--hitech-primary) !important;
    --header-bg: #ffffff !important;
    --theme-bg: #ffffff !important;

    --ot-text-title: var(--hitech-text);
    --ot-bg-primary: var(--hitech-surface-alt);
    --ot-bg-secondary: var(--hitech-surface);
    --ot-border-primary: var(--hitech-border);

    --ot-bg-badge-primary: var(--hitech-primary);
    --ot-text-badge-light-primary: var(--hitech-primary);
    --ot-bg-badge-light-primary: var(--hitech-primary-soft);
    --ot-text-badge-deep-primary: var(--hitech-primary);
}

.dark-theme {
    --primary-color: var(--hitech-primary) !important;
    --ot-bg-badge-primary: rgba(var(--hitech-primary-rgb), 0.15);
    --ot-text-badge-primary: var(--hitech-primary);
}

/* ---------- Body background (subtle HiTech swirl) ---------- */
body.default-theme {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 247, 249, 0.92) 100%),
        url('/assets/hitech-bg.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    color: var(--hitech-text);
}

/* ---------- Buttons ---------- */
.btn-primary,
.ot-btn-primary,
.btn.btn-primary {
    background-color: var(--hitech-primary) !important;
    border-color: var(--hitech-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(var(--hitech-primary-rgb), 0.25) !important;
}

.btn-primary:hover,
.ot-btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.ot-btn-primary:focus {
    background-color: var(--hitech-primary-dark) !important;
    border-color: var(--hitech-primary-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--hitech-primary) !important;
    border-color: var(--hitech-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--hitech-primary) !important;
    color: #fff !important;
}

/* ---------- Badges ---------- */
.badge.bg-primary,
.badge-primary {
    background-color: var(--hitech-primary) !important;
    color: #fff !important;
}

.badge-light-primary {
    background-color: var(--hitech-primary-soft) !important;
    color: var(--hitech-primary) !important;
}

/* ---------- Links (sidebar overrides below use !important) ---------- */
a,
.text-primary {
    color: var(--hitech-primary);
}

a:hover {
    color: var(--hitech-primary-dark);
}

/* ---------- Sidebar: light grey / white, sharp black text, red active ---------- */
body.default-theme .sidebar,
body.default-theme #sidebar.sidebar {
    background-color: #f0f0f2 !important;
    background: #f0f0f2 !important;
    border-right: 1px solid #d9d9de !important;
    color: #0b0b0d !important;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

body.default-theme .sidebar .sidebar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e0e0e4 !important;
}

body.default-theme .sidebar .sidebar-menu {
    background: #f0f0f2 !important;
    font-size: 14px !important;
}

/* Section headings */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section-heading,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-section-heading {
    color: #374151 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #374151 !important;
}

/* Every menu row: black / near-black (undo gradient text-fill from style2) */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .parent-item-content,
body.default-theme .sidebar .sidebar-menu .sidebar-dropdown-menu li a,
body.default-theme .sidebar .sidebar-menu ol a,
body.default-theme .sidebar .sidebar-menu ul a,
body.default-theme .sidebar .child-menu-list a,
body.default-theme .sidebar .parent-menu-list a {
    color: #0b0b0d !important;
    -webkit-text-fill-color: #0b0b0d !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a span,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .parent-item-content span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

body.default-theme .sidebar .sidebar-menu i {
    color: #1f2937 !important;
}

/* Hover */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a:hover,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .parent-item-content:hover,
body.default-theme .sidebar .sidebar-menu .sidebar-dropdown-menu li a:hover {
    background: #e4e4e8 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a:hover i,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .parent-item-content:hover i {
    color: rgb(241, 89, 65) !important;
}

/* Active row: red bar + white text on red */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active > a,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item.mm-active > a,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item.active > a,
body.default-theme .sidebar .sidebar-menu .parent-item-content.active,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item > .sidebar-menu-item > .parent-item-content.active,
body.default-theme .sidebar .sidebar-menu li.mm-active > .parent-item-content {
    background-color: rgb(241, 89, 65) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 8px !important;
    border-left: 3px solid #0b0b0d !important;
    font-weight: 600 !important;
}

body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active > a i,
body.default-theme .sidebar .sidebar-menu .parent-item-content.active i,
body.default-theme .sidebar .sidebar-menu li.mm-active > .parent-item-content i {
    color: #ffffff !important;
}

/* Nested child active: light tint, black text */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .active > a,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active ul li.active > a {
    background: rgba(241, 89, 65, 0.12) !important;
    color: #0b0b0d !important;
    -webkit-text-fill-color: #0b0b0d !important;
    font-weight: 600 !important;
}

/* Open submenu strip */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-show,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active ul {
    background: #e8e8ec !important;
}

/* Half-collapsed flyouts */
body.default-theme #layout-wrapper.half-expand .sidebar ul.parent-menu-list > li > ul {
    background: #ffffff !important;
    border: 1px solid #d9d9de !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

body.default-theme #layout-wrapper.half-expand .sidebar ul.parent-menu-list > li > ul a {
    color: #0b0b0d !important;
    -webkit-text-fill-color: #0b0b0d !important;
}

body.default-theme #layout-wrapper.half-expand .sidebar .sidebar-header {
    background: #ffffff !important;
}

body.default-theme #layout-wrapper.half-expand .sidebar-dropdown-menu > li ul {
    background: #ffffff !important;
    border: 1px solid #d9d9de !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

body.default-theme #layout-wrapper.half-expand .sidebar-dropdown-menu > li ul a {
    color: #0b0b0d !important;
    -webkit-text-fill-color: #0b0b0d !important;
}

/* Chevrons */
body.default-theme .sidebar .parent-item-content.has-arrow::after,
body.default-theme .sidebar .has-arrow::after {
    border-color: #4b5563 !important;
    color: #4b5563 !important;
}

body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active > a.has-arrow::after,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .parent-item-content.has-arrow.active::after {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Row bullets */
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a::before,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .sidebar-menu-item a::before {
    background: #6b7280 !important;
}

body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .active > a::before,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active .has-arrow::before,
body.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .sidebar-menu-item.mm-active .has-arrow::before {
    background: rgb(241, 89, 65) !important;
}

/* Sidebar logo */
body.default-theme .sidebar .sidebar-logo {
    background: transparent !important;
    padding: 10px 8px !important;
}

body.default-theme .sidebar .sidebar-logo img.full-logo,
body.default-theme .sidebar .sidebar-logo img.half-logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* Mobile drawer */
@media (max-width: 992px) {
    body.default-theme .sidebar {
        background: #f0f0f2 !important;
    }
}

/* Dark theme app: keep sidebar light & crisp (same as default) */
body.dark-theme .sidebar {
    background: #f0f0f2 !important;
    border-right: 1px solid #d9d9de !important;
    -webkit-font-smoothing: auto;
}

body.dark-theme .sidebar .sidebar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e0e0e4 !important;
}

body.dark-theme .sidebar .sidebar-menu {
    background: #f0f0f2 !important;
    font-size: 14px !important;
}

body.dark-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a,
body.dark-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .parent-item-content {
    color: #0b0b0d !important;
    -webkit-text-fill-color: #0b0b0d !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

body.dark-theme .sidebar .sidebar-menu i {
    color: #1f2937 !important;
}

body.dark-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active > a,
body.dark-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active > a.has-arrow,
body.dark-theme .sidebar .sidebar-menu .parent-item-content.active {
    background: rgb(241, 89, 65) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.dark-theme .sidebar .sidebar-menu .sidebar-menu-section .mm-active ul {
    background: #e8e8ec !important;
}

body.dark-theme #layout-wrapper.half-expand .sidebar ul.parent-menu-list > li > ul {
    background: #ffffff !important;
    border: 1px solid #d9d9de !important;
}

/* ---------- Top navbar ---------- */
.header,
header.header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--hitech-border) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.header .profile-info h6 {
    color: var(--hitech-text) !important;
}

.sm-btn-with-radius.checkin-color {
    background: var(--hitech-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(var(--hitech-primary-rgb), 0.35);
}

.sm-btn-with-radius.checkout-color {
    background: #0b0b0d !important;
    color: #fff !important;
}

.sm-btn-with-radius.noti-color {
    background: #f3f4f6 !important;
    color: #0b0b0d !important;
}

/* ---------- Cards / containers ---------- */
.card,
.ot-card,
.card.card-with-shadow {
    background: #ffffff !important;
    border: 1px solid var(--hitech-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(15, 15, 30, 0.04) !important;
}

.card .card-title {
    color: var(--hitech-text) !important;
    font-weight: 600;
}

.card-admin {
    background: #ffffff !important;
    border: 1px solid var(--hitech-border) !important;
    border-radius: 14px !important;
    padding: 14px 18px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.card-admin:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(var(--hitech-primary-rgb), 0.18) !important;
    border-color: rgba(var(--hitech-primary-rgb), 0.35) !important;
}

/* ---------- Tables ---------- */
.table > thead th {
    color: var(--hitech-text) !important;
    background: #fafafb !important;
    border-bottom: 1px solid var(--hitech-border) !important;
}

.page-item.active .page-link {
    background-color: var(--hitech-primary) !important;
    border-color: var(--hitech-primary) !important;
    color: #fff !important;
}

.page-link {
    color: var(--hitech-primary) !important;
}

/* ---------- Form controls focus ring ---------- */
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--hitech-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--hitech-primary-rgb), 0.15) !important;
}

/* ---------- Dashboard hero / headings ---------- */
.dashboard-heading h3 {
    color: var(--hitech-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ---------- HiTech dashboard widgets ---------- */
.hitech-hero {
    background: linear-gradient(135deg, #0b0b0d 0%, #1a1a1f 100%);
    color: #fff;
    border-radius: 18px;
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.hitech-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at center, var(--hitech-primary) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.hitech-hero h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #fff;
}

.hitech-hero p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.hitech-hero .hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.hitech-hero .hero-actions a {
    background: var(--hitech-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .15s ease, background .15s ease;
}

.hitech-hero .hero-actions a.secondary {
    background: rgba(255, 255, 255, 0.10);
}

.hitech-hero .hero-actions a:hover {
    transform: translateY(-1px);
    background: var(--hitech-primary-dark);
}

.hitech-hero .hero-actions a.secondary:hover {
    background: rgba(255, 255, 255, 0.18);
}

.hitech-stat {
    background: #fff;
    border: 1px solid var(--hitech-border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}

.hitech-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--hitech-primary-rgb), 0.4);
    box-shadow: 0 12px 24px rgba(var(--hitech-primary-rgb), 0.14);
}

.hitech-stat .icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--hitech-primary);
    background: var(--hitech-primary-soft);
    flex: 0 0 52px;
}

.hitech-stat .icon.dark {
    background: var(--hitech-black);
    color: #fff;
}

.hitech-stat .label {
    font-size: 13px;
    color: var(--hitech-muted);
    margin: 0;
}

.hitech-stat .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--hitech-text);
    margin: 0;
    line-height: 1.1;
}

.hitech-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 16px 0;
}

.hitech-section-title h5 {
    margin: 0;
    font-weight: 600;
    color: var(--hitech-text);
}

.hitech-section-title .bar {
    width: 4px;
    height: 18px;
    background: var(--hitech-primary);
    border-radius: 4px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

/* Scrollbar */
.default-theme ::-webkit-scrollbar-thumb {
    background: rgba(var(--hitech-primary-rgb), 0.4);
}

.default-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--hitech-primary);
}

/* Switches / toggles */
.form-check-input:checked {
    background-color: var(--hitech-primary) !important;
    border-color: var(--hitech-primary) !important;
}

/* Tabs */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background: var(--hitech-primary) !important;
    color: #fff !important;
    border-color: var(--hitech-primary) !important;
}

/* DataTables search/length */
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--hitech-primary) !important;
    outline: none !important;
}

/* Login / guest pages ----------------------------------- */
.login-wrapper,
.ot-login-bg,
.auth-bg {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 249, 0.96)),
        url('/assets/hitech-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

.hitech-brand-footer {
    text-align: center;
    padding: 18px 0;
    color: var(--hitech-muted);
    font-size: 12px;
}