/* Utility Classes based on Blueprint */

/* Logo Switcher (Theme-aware dark/light logos) */
.logo-dark {
    display: none !important;
}
.logo-light {
    display: inline-block !important;
}

[data-bs-theme="dark"] .logo-dark {
    display: inline-block !important;
}
[data-bs-theme="dark"] .logo-light {
    display: none !important;
}

.rounded-xl { border-radius: 15px !important; }
.rounded-2xl { border-radius: 20px !important; }
.rounded-lg { border-radius: 10px !important; }
.card-hover-translate { transition: transform 0.2s ease; }
.card-hover-translate:hover { transform: translateY(-5px); }

:root {
    --primary-bg: #4f46e5;
}

.bg-primary-bg { background: var(--primary-bg) !important; }
.bg-info-dim { background: rgba(13, 110, 253, 0.1) !important; }
.bg-warning-dim { background: rgba(255, 193, 7, 0.1) !important; }
.bg-success-dim { background: rgba(25, 135, 84, 0.1) !important; }
.bg-danger-dim { background: rgba(220, 53, 69, 0.1) !important; }

.card-tale { background: linear-gradient(135deg, #1e3a8a, #4c1d95) !important; color: white; }
.card-dark-blue { background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important; color: white; }
.card-light-danger { background: linear-gradient(135deg, #fca5a5, #ef4444) !important; color: white; }

.icon-md { font-size: 1.5rem !important; }
.hover-bg-light { transition: background 0.2s ease; }
.hover-bg-light:hover { background: #f8fafc !important; }
.transition-200 { transition: all 0.2s ease !important; }
.shadow-primary { box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.1) !important; }
.extra-small { font-size: 0.75rem !important; }
.fs-30 { font-size: 28px !important; font-weight: bold !important; }

/* Badge Premium */
.badge-premium {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    display: inline-block;
}
.badge-premium-green { background: #d1fae5; color: #065f46; border: 1px solid #10b981; }
.badge-premium-red { background: #fee2e2; color: #991b1b; border: 1px solid #ef4444; }
.badge-premium-blue { background: #dbeafe; color: #1e40af; border: 1px solid #3b82f6; }
.badge-premium-gray { background: #f3f4f6; color: #374151; border: 1px solid #9ca3af; }

/* Table Action Group */
.btn-action-group {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-action-edit { color: #3b82f6; }
.btn-action-edit:hover { background: #dbeafe; }
.btn-action-delete { color: #ef4444; }
.btn-action-delete:hover { background: #fee2e2; }

/* =========================================
   DataTables & Table Refinements
   ========================================= */

.dataTables_wrapper {
    padding: 1rem 0;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1.5rem;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #dfe5ef;
    border-radius: 7px;
    padding: 6px 12px;
    margin-left: 10px;
    outline: none;
    transition: all 0.2s;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 1.5rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 5px;
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item {
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe5ef !important;
    background: #fff !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover:not(.active) {
    background: #f6f9fc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
    background: #f8fafc !important;
    border-color: #f1f5f9 !important;
    color: #cbd5e1 !important;
    opacity: 0.6;
}

/* Ensure no double borders from DataTables default classes */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 1.5rem !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
}

table.dataTable thead th {
    background-color: #f6f9fc !important;
    border-bottom: 1px solid #dfe5ef !important;
    font-weight: 600 !important;
    color: #2a3547 !important;
    padding: 15px !important;
}

table.dataTable tbody td {
    padding: 15px !important;
    border-bottom: 1px solid #dfe5ef !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(var(--bs-primary-rgb), 0.02) !important;
}

/* Modal refinements */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.modal-header {
    border-bottom: 1px solid #f1f1f1;
    padding: 20px 25px;
}

.modal-footer {
    border-top: 1px solid #f1f1f1;
    padding: 15px 25px;
}

/* Gradient Add Button */
.btn-premium-add {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    color: white;
    font-weight: 600;
    border-radius: 12px;
}

.btn-premium-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5);
    color: white;
}

/* =========================================
   Premium Tab Navigation (Modernize Segmented Control)
   ========================================= */
.nav-pills.nav-fill {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 6px !important;
    border: 1px solid #ebf1f6 !important;
    box-shadow: rgba(145, 158, 171, 0.03) 0px 1px 3px 0px !important;
    display: flex !important;
    gap: 4px !important;
}

[data-bs-theme="dark"] .nav-pills.nav-fill {
    background: #1d1d1f !important;
    border: 1px solid #333336 !important;
    box-shadow: none !important;
}

.nav-pills.nav-fill .nav-link {
    color: #5a6a85 !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 20px;
    border-radius: 12px !important;
    transition: all 0.2s ease;
    border: none !important;
    background: transparent !important;
}

.nav-pills.nav-fill .nav-link.active {
    background: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.25) !important;
}

.nav-pills.nav-fill .nav-link:hover:not(.active) {
    background: rgba(0, 180, 216, 0.08) !important;
    color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .nav-pills.nav-fill .nav-link {
    color: #86868b !important;
}

[data-bs-theme="dark"] .nav-pills.nav-fill .nav-link.active {
    background: var(--bs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 180, 216, 0.4) !important;
}

[data-bs-theme="dark"] .nav-pills.nav-fill .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* =========================================
   Premium Modal & Form Styles
   ========================================= */
.modal-content {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #1d1d1f !important;
    border: 1px solid #424245 !important;
}

.modal-header {
    padding: 1.5rem 1.5rem 0.5rem !important;
    border-bottom: none !important;
}

.modal-footer {
    padding: 0.5rem 1.5rem 1.5rem !important;
    border-top: none !important;
}

.modal-title {
    font-size: 1.25rem;
    color: #1e293b;
    font-weight: 700;
}

[data-bs-theme="dark"] .modal-title {
    color: #f5f5f7 !important;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .form-label {
    color: #86868b !important;
}

.form-control, .form-select {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
    transition: all 0.2s !important;
    background-color: #f8fafc !important;
}

.form-control:focus, .form-select:focus {
    border-color: #4f46e5 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
    outline: none !important;
}

.card {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    border-radius: 1.25rem !important;
}

/* =========================================
   Setup Wizard Styles
   ========================================= */
body.setup-wizard-page { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }

.wizard-card {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 24px;
    border: 0;
    box-shadow: 0 32px 80px rgba(0,0,0,0.25);
    overflow: hidden;
}

/* Step Indicators */
.step-indicator {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0;
    margin-bottom: 2rem;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 100px;
}
.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}
.step-item.done:not(:last-child)::after { background: #4f46e5; }
.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.step-item.active .step-circle { background: #4f46e5; color: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,0.2); }
.step-item.done .step-circle { background: #10b981; color: #fff; }
.step-label { font-size: 0.65rem; margin-top: 4px; color: #94a3b8; font-weight: 600; text-align: center; }
.step-item.active .step-label { color: #4f46e5; }
.step-item.done .step-label { color: #10b981; }

/* Dynamic list inputs */
.input-tag-group { display: flex; flex-direction: column; gap: 8px; }
.input-row { display: flex; align-items: center; gap: 8px; }
.input-row input { flex: 1; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; transition: border-color 0.2s; }
.input-row input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.btn-remove { background: #fee2e2; border: 0; border-radius: 8px; padding: 8px; color: #dc2626; cursor: pointer; flex-shrink: 0; }
.btn-remove:hover { background: #fca5a5; }
.btn-add { background: #ede9fe; border: 1.5px dashed #a78bfa; border-radius: 10px; padding: 10px 16px; color: #7c3aed; font-weight: 600; font-size: 0.85rem; cursor: pointer; text-align: center; transition: all 0.2s; display: flex; align-items: center; gap: 6px; justify-content: center; }
.btn-add:hover { background: #ddd6fe; }

.step-panel { display: none; }
.step-panel.active { display: block; }

.step-header { border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.step-header .step-icon { width: 52px; height: 52px; border-radius: 16px; background: #ede9fe; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.step-header h5 { font-weight: 800; color: #1e293b; margin-bottom: 4px; }
.step-header p { color: #64748b; font-size: 0.875rem; margin: 0; }

.btn-wizard-next { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border: 0; border-radius: 12px; padding: 12px 32px; font-weight: 700; transition: all 0.2s; }
.btn-wizard-next:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79,70,229,0.4); color: #fff; }
.btn-wizard-prev { background: #f1f5f9; color: #64748b; border: 0; border-radius: 12px; padding: 12px 24px; font-weight: 600; }
.btn-wizard-prev:hover { background: #e2e8f0; }

/* =========================================
   Datepicker Premium Styles
   ========================================= */
.datepicker {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    padding: 12px !important;
    font-family: 'Inter', sans-serif;
}
.datepicker table tr td.active, 
.datepicker table tr td.active:hover, 
.datepicker table tr td.active.disabled, 
.datepicker table tr td.active.disabled:hover {
    background-image: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    background-color: #4f46e5 !important;
    color: #fff !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(79,70,229,0.3) !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: #f1f5f9 !important;
    background-image: none !important;
    color: #4f46e5 !important;
    font-weight: 700;
    border-radius: 8px !important;
}
.datepicker table tr td {
    border-radius: 8px !important;
    transition: all 0.2s;
}
.datepicker table tr td:hover {
    background: #ede9fe !important;
    color: #4f46e5 !important;
}
.datepicker .datepicker-switch:hover, 
.datepicker .prev:hover, 
.datepicker .next:hover, 
.datepicker tfoot tr th:hover {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
}

/* Theme-aware Datepicker styles for Dark Mode */
[data-bs-theme="dark"] .datepicker {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

[data-bs-theme="dark"] .datepicker table,
[data-bs-theme="dark"] .datepicker table tr,
[data-bs-theme="dark"] .datepicker table tr td,
[data-bs-theme="dark"] .datepicker table tr th {
    background: transparent !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .datepicker table tr td.day:hover,
[data-bs-theme="dark"] .datepicker table tr td.focused {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .datepicker table tr td.old,
[data-bs-theme="dark"] .datepicker table tr td.new {
    color: #64748b !important;
}

[data-bs-theme="dark"] .datepicker table tr td.active,
[data-bs-theme="dark"] .datepicker table tr td.active:hover {
    background-image: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    background-color: #4f46e5 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .datepicker table tr td.today,
[data-bs-theme="dark"] .datepicker table tr td.today:hover {
    background-color: rgba(79, 70, 229, 0.2) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .datepicker .datepicker-switch:hover,
[data-bs-theme="dark"] .datepicker .prev:hover,
[data-bs-theme="dark"] .datepicker .next:hover,
[data-bs-theme="dark"] .datepicker tfoot tr th:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .datepicker th.datepicker-switch,
[data-bs-theme="dark"] .datepicker th.prev,
[data-bs-theme="dark"] .datepicker th.next {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .datepicker table tr td.day.disabled {
    color: #475569 !important;
}

/* Span elements for Months and Years views */
[data-bs-theme="dark"] .datepicker table tr td span {
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .datepicker table tr td span:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

[data-bs-theme="dark"] .datepicker table tr td span.active,
[data-bs-theme="dark"] .datepicker table tr td span.active:hover,
[data-bs-theme="dark"] .datepicker table tr td span.active.disabled,
[data-bs-theme="dark"] .datepicker table tr td span.active.disabled:hover,
[data-bs-theme="dark"] .datepicker table tr td span.focused,
[data-bs-theme="dark"] .datepicker table tr td span.focused:hover {
    background-image: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    background-color: #4f46e5 !important;
    color: #fff !important;
    text-shadow: none !important;
}


[data-bs-theme="dark"] .datepicker table tr td span.old,
[data-bs-theme="dark"] .datepicker table tr td span.new {
    color: #64748b !important;
}



/* =========================================
   SmartHome — Style Reference Variables & Layouts
   ========================================= */
:root {
    --smart-obsidian: #1d1d1f;
    --smart-frost-white: #f5f5f7;
    --smart-pure-black: #000000;
    --smart-paper-white: #ffffff;
    --smart-carbon: #111111;
    --smart-platinum: #86868b;
    --smart-graphite: #333336;
    --smart-silver-mist: #cccccc;
    --smart-smoke: #424245;
    
    --smart-teal-nexus: #00b4d8;
    --smart-teal-link: #0096c7;
    --smart-teal-halo: #48cae4;
    
    --smart-amber-alert: #f59e0b;
    --smart-iris-violet: #8668ff;
    --smart-coral-warm: #ff6b6b;
}

/* Base Body Override for Landing */
body.smart-landing-page {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--smart-pure-black);
    color: var(--smart-frost-white);
    overflow-x: hidden;
}

/* Zero elevation policy */
body.smart-landing-page *, 
body.smart-landing-page .card, 
body.smart-landing-page .glass-card, 
body.smart-landing-page .btn {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Typography Scale */
.smart-hero-title {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.24px;
    color: var(--smart-frost-white);
}

.smart-display-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.84px;
    color: var(--smart-obsidian);
}
.smart-display-title.dark-theme {
    color: var(--smart-frost-white);
}

.smart-heading-lg {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.32px;
}

.smart-heading {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.17;
    letter-spacing: -0.24px;
}

.smart-heading-sm {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.21;
    letter-spacing: -0.28px;
}

.smart-body-copy {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: -0.22px;
    color: var(--smart-platinum);
}

.smart-caption {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.83;
    letter-spacing: -0.37px;
    color: var(--smart-platinum);
}

/* Color Overrides */
.smart-text-platinum { color: var(--smart-platinum) !important; }
.smart-text-frost { color: var(--smart-frost-white) !important; }
.smart-text-obsidian { color: var(--smart-obsidian) !important; }

/* Promotional Banner */
.smart-promo-banner {
    background-color: var(--smart-obsidian);
    color: var(--smart-frost-white);
    font-size: 12px;
    font-weight: 400;
    padding: 3px 0;
    text-align: center;
    border-radius: 0;
    border: none;
}
.smart-promo-banner a {
    color: var(--smart-teal-link);
    text-decoration: none;
    font-weight: 600;
}
.smart-promo-banner a:hover {
    text-decoration: underline;
}

/* Sticky Pill Navbar */
.smart-navbar-container {
    padding: 1.5rem 0;
    background-color: var(--smart-pure-black);
}
.smart-navbar-pill {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--smart-smoke);
    border-radius: 980px !important;
    padding: 10px 24px !important;
    max-width: 980px;
    margin: 0 auto;
    transition: all 0.3s ease;
}
.smart-navbar-pill.scrolled {
    background-color: rgba(29, 29, 31, 0.95) !important;
}

.smart-nav-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--smart-frost-white) !important;
    letter-spacing: -0.01em;
    padding: 6px 12px !important;
    transition: opacity 0.2s ease;
}
.smart-nav-link:hover {
    opacity: 0.8;
}

/* Responsive Sticky Pill Navbar */
@media (max-width: 991.98px) {
    .smart-navbar-container {
        padding: 0.75rem 1rem !important;
    }
    .smart-navbar-pill {
        border-radius: 28px !important;
        padding: 8px 16px !important;
        margin: 0 auto;
        max-width: 100%;
    }
    .smart-navbar-pill:has(.navbar-collapse.show),
    .smart-navbar-pill:has(.navbar-collapse.collapsing) {
        border-radius: 20px !important;
    }
    .smart-navbar-pill .navbar-toggler:focus {
        box-shadow: none !important;
        outline: none !important;
    }
    .smart-navbar-pill .navbar-collapse {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
    }
    .smart-navbar-pill .navbar-nav {
        align-items: center;
        padding-bottom: 10px;
        gap: 0.5rem !important;
        width: 100%;
        text-align: center;
    }
    .smart-navbar-pill .navbar-nav .nav-item {
        width: 100%;
    }
    .smart-navbar-pill .navbar-nav .nav-link {
        font-size: 14px;
        padding: 8px 16px !important;
        display: block;
        width: 100%;
    }
    .smart-navbar-pill .navbar-collapse .d-flex {
        flex-direction: column;
        justify-content: center;
        align-items: center !important;
        width: 100%;
        margin-top: 10px;
        padding-bottom: 5px;
        gap: 0.5rem !important;
    }
    .smart-navbar-pill .navbar-collapse .d-flex .btn {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }
    
    /* Responsive Typography Overrides to Prevent Overflow */
    .smart-hero-title {
        font-size: 38px !important;
        line-height: 1.1 !important;
    }
    .smart-display-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }
    .smart-heading-lg {
        font-size: 22px !important;
    }
    .smart-heading {
        font-size: 18px !important;
    }
    .smart-heading-sm {
        font-size: 16px !important;
    }
    
    /* Responsive Section & Card Padding Overrides */
    .smart-section-gap,
    .smart-light-section {
        padding: 48px 0 !important;
    }
    .smart-device-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }
    .smart-scene-card {
        padding: 20px 10px !important;
        border-radius: 20px !important;
        min-height: 140px !important;
    }
}

/* Categories Eyebrow Tags */
.smart-eyebrow-amber {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.19px;
    color: var(--smart-amber-alert);
    text-transform: none;
    margin-bottom: 8px;
    display: block;
}

/* Buttons */
.smart-btn-nexus-teal {
    background-color: var(--smart-teal-nexus) !important;
    color: var(--smart-paper-white) !important;
    border-radius: 36px !important;
    padding: 10px 20px !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.22px;
    border: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.smart-btn-nexus-teal:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.smart-btn-price-ghost {
    background-color: transparent !important;
    color: var(--smart-paper-white) !important;
    border-radius: 36px !important;
    padding: 10px 20px !important;
    font-size: 14px;
    font-weight: 400;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.smart-btn-secondary-graphite {
    background-color: var(--smart-graphite) !important;
    color: var(--smart-frost-white) !important;
    border-radius: 36px !important;
    padding: 10px 20px !important;
    font-size: 14px;
    font-weight: 600;
    border: none !important;
    transition: opacity 0.2s ease;
}
.smart-btn-secondary-graphite:hover {
    opacity: 0.9;
}

.smart-btn-outline {
    background-color: transparent !important;
    color: var(--smart-card-text) !important;
    border: 1px solid var(--smart-card-border) !important;
    border-radius: 36px !important;
    padding: 10px 20px !important;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.smart-btn-outline:hover {
    background-color: rgba(128, 128, 128, 0.1) !important;
}

/* Device Photo Card (Theme-Aware Stage) */
.smart-device-card {
    background-color: var(--smart-card-bg) !important;
    border-radius: 28px !important;
    padding: 28px !important;
    border: 1px solid var(--smart-card-border) !important;
    color: var(--smart-card-text) !important;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.smart-device-card.interactive:hover {
    border-color: var(--smart-active-color) !important;
}

/* SmartHome Cards & Elements */
.smart-summary-card {
    background-color: var(--smart-card-bg) !important;
    border-radius: 28px !important;
    border: 1px solid var(--smart-card-border) !important;
    color: var(--smart-card-text) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.smart-chart-card {
    background-color: var(--smart-card-bg) !important;
    border-radius: 28px !important;
    border: 1px solid var(--smart-card-border) !important;
    color: var(--smart-card-text) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.smart-summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}
[data-bs-theme="dark"] .smart-summary-icon {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--smart-frost-white) !important;
}
[data-bs-theme="light"] .smart-summary-icon {
    background-color: rgba(29, 29, 31, 0.08) !important;
    color: var(--smart-obsidian) !important;
}

.smart-summary-value {
    color: var(--smart-card-text) !important;
}
.smart-summary-value-online {
    color: var(--smart-active-color) !important;
}
.smart-summary-value-offline {
    color: var(--smart-badge-offline-color) !important;
}

/* Live Status Badge */
.smart-status-badge {
    border-radius: 980px !important;
    background-color: var(--smart-badge-bg) !important;
    border: 1px solid var(--smart-badge-border) !important;
    padding: 6px 12px !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.smart-status-badge.active { color: var(--smart-badge-active-color) !important; }
.smart-status-badge.warning { color: var(--smart-amber-alert) !important; }
.smart-status-badge.offline { color: var(--smart-badge-offline-color) !important; }

.smart-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}
.smart-status-dot.active { background-color: var(--smart-badge-active-color); }
.smart-status-dot.warning { background-color: var(--smart-amber-alert); }
.smart-status-dot.offline { background-color: var(--smart-badge-offline-color); }

/* Device Category Labels */
.smart-category-violet { color: var(--smart-iris-violet) !important; }
.smart-category-coral { color: var(--smart-coral-warm) !important; }
.smart-category-teal { color: var(--smart-teal-halo) !important; }

/* Light Section Content Block */
.smart-light-section {
    background-color: var(--smart-paper-white) !important;
    color: var(--smart-obsidian) !important;
    padding: 88px 0;
}
.smart-light-section-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Automation Scene Card */
.smart-scene-card {
    background-color: var(--smart-card-bg) !important;
    border-radius: 28px !important;
    padding: 28px !important;
    border: 1px solid var(--smart-card-border) !important;
    color: var(--smart-card-text) !important;
    min-height: 180px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}
.smart-scene-card.active {
    border: 1px solid var(--smart-teal-halo) !important;
    border-left: 4px solid var(--smart-teal-halo) !important;
}

/* Theme-aware Modal Content */
.smart-modal-content {
    background-color: var(--smart-card-bg) !important;
    color: var(--smart-card-text) !important;
    border-radius: 28px !important;
    border: 1px solid var(--smart-card-border) !important;
}

/* Theme-aware Inner Actions/Conditions Card */
.smart-inner-card {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
}
[data-bs-theme="dark"] .smart-inner-card {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--smart-smoke) !important;
}

/* Telemetry display */
.smart-sensor-readout {
    background-color: var(--smart-pure-black);
    color: var(--smart-teal-halo);
    font-size: 44px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 12px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border: 1px solid var(--smart-smoke);
}
.smart-sensor-unit {
    font-size: 20px;
    color: var(--smart-paper-white);
}

/* Section Gaps */
.smart-section-gap {
    padding: 88px 0;
}

/* Inline Feature Link */
.smart-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--smart-obsidian) !important;
    font-size: 17px;
    font-weight: 600;
    margin-top: 1rem;
}
.smart-feature-link-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--smart-obsidian);
    color: var(--smart-paper-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.device-pill-custom {
    background-color: var(--smart-carbon) !important;
    border: 1px solid var(--smart-smoke) !important;
    border-radius: 28px !important;
    padding: 20px !important;
    transition: all 0.3s ease;
}
.device-pill-custom.active {
    border-color: var(--smart-teal-halo) !important;
}

/* =========================================
   SmartHome — Admin Dashboard Theme Overrides
   ========================================= */

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --bs-body-bg: #000000 !important;
    --bs-body-color: #f5f5f7 !important;
    
    --bs-primary: #00b4d8 !important;
    --bs-primary-rgb: 0, 180, 216 !important;
    
    --bs-secondary: #333336 !important;
    --bs-secondary-rgb: 51, 51, 54 !important;
    
    --bs-warning: #f59e0b !important;
    --bs-warning-rgb: 245, 158, 11 !important;
    
    --bs-danger: #ff6b6b !important;
    --bs-danger-rgb: 255, 107, 107 !important;
    
    --bs-success: #48cae4 !important;
    --bs-success-rgb: 72, 202, 228 !important;
    
    --bs-card-bg: #1d1d1f !important;
    --bs-card-color: #f5f5f7 !important;
    --bs-card-border-color: #424245 !important;
    
    --bs-border-color: #424245 !important;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08) !important;
    
    --bs-gray-100: #111111 !important;
    --bs-light: #111111 !important;
    --bs-light-rgb: 17, 17, 17 !important;
    
    --bs-body-bg-rgb: 0, 0, 0 !important;

    --smart-card-bg: var(--smart-obsidian) !important;
    --smart-card-border: var(--smart-smoke) !important;
    --smart-card-text: var(--smart-frost-white) !important;
    --smart-active-color: var(--smart-teal-halo) !important;
    --smart-badge-bg: var(--smart-carbon) !important;
    --smart-badge-border: var(--smart-smoke) !important;
    --smart-badge-active-color: var(--smart-teal-halo) !important;
    --smart-badge-offline-color: var(--smart-coral-warm) !important;
    --smart-btn-inactive-bg: var(--smart-graphite) !important;
    --smart-btn-inactive-color: var(--smart-frost-white) !important;
}

/* Sidebar and Header background overrides for Dark Mode */
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .sidebar-nav {
    background-color: #1d1d1f !important;
    border-right: 1px solid #333336 !important;
    border-bottom: 1px solid #333336 !important;
}

[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .body-wrapper {
    background-color: #000000 !important;
}

[data-bs-theme="dark"] .card {
    background-color: #1d1d1f !important;
    border: 1px solid #333336 !important;
    border-radius: 20px !important;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 24px -4px !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #111111 !important;
    border: 1px solid #333336 !important;
    color: #f5f5f7 !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: #86868b !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #00b4d8 !important;
    background-color: #111111 !important;
    color: #f5f5f7 !important;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.15) !important;
}

/* Light Mode Overrides - Aligned with Modernize Theme Reference */
[data-bs-theme="light"] {
    --bs-body-bg: #f6f9fc !important; /* Soft, modern light background */
    --bs-body-color: #5a6a85 !important; /* Slate-blue main body text */
    
    --bs-primary: #00b4d8 !important; /* Teal Nexus Accent */
    --bs-primary-rgb: 0, 180, 216 !important;
    
    --bs-warning: #ffae1f !important;
    --bs-warning-rgb: 255, 174, 31 !important;
    
    --bs-danger: #fa896b !important;
    --bs-danger-rgb: 250, 137, 107 !important;
    
    --bs-success: #13deb9 !important;
    --bs-success-rgb: 19, 222, 185 !important;
    
    --bs-card-bg: #ffffff !important; /* White cards on light-gray background */
    --bs-card-border-color: #ebf1f6 !important; /* Thin, soft light borders */
    
    --bs-border-color: #ebf1f6 !important;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.05) !important;

    --smart-card-bg: #ffffff !important;
    --smart-card-border: #ebf1f6 !important;
    --smart-card-text: #2a3547 !important; /* Deep dark slate-gray for readability */
    --smart-active-color: #00b4d8 !important;
    --smart-badge-bg: #f6f9fc !important;
    --smart-badge-border: #ebf1f6 !important;
    --smart-badge-active-color: #00b4d8 !important;
    --smart-badge-offline-color: #fa896b !important;
    --smart-btn-inactive-bg: #f6f9fc !important;
    --smart-btn-inactive-color: #5a6a85 !important;
}

[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6,
[data-bs-theme="light"] .modal-title,
[data-bs-theme="light"] .card-title {
    color: #2a3547 !important; /* Deep dark slate headings for premium contrast */
}

[data-bs-theme="light"] .left-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #ebf1f6 !important;
}

[data-bs-theme="light"] .topbar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #ebf1f6 !important;
}

[data-bs-theme="light"] .page-wrapper,
[data-bs-theme="light"] .body-wrapper {
    background-color: #f6f9fc !important;
}

[data-bs-theme="light"] .card {
    background-color: #ffffff !important;
    border: 1px solid #ebf1f6 !important;
    border-radius: 20px !important;
    box-shadow: rgba(145, 158, 171, 0.05) 0px 1px 4px 0px, rgba(145, 158, 171, 0.08) 0px 8px 24px -4px !important;
}

[data-bs-theme="light"] .card-hover-translate:hover {
    box-shadow: rgba(145, 158, 171, 0.12) 0px 16px 32px -8px !important;
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    background-color: #ffffff !important;
    border: 1.5px solid #dfe5ef !important;
    color: #2a3547 !important;
    border-radius: 10px !important;
}

[data-bs-theme="light"] .form-control::placeholder,
[data-bs-theme="light"] .form-select::placeholder {
    color: #a1aab2 !important;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    border-color: #00b4d8 !important;
    background-color: #ffffff !important;
    color: #2a3547 !important;
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.1) !important;
}

[data-bs-theme="light"] .form-label {
    color: #2a3547 !important;
}

/* Table enhancements for Light Mode */
[data-bs-theme="light"] table.dataTable thead th {
    background-color: #f6f9fc !important;
    border-bottom: 1px solid #ebf1f6 !important;
    color: #2a3547 !important;
}

[data-bs-theme="light"] table.dataTable tbody td {
    border-bottom: 1px solid #ebf1f6 !important;
    color: #5a6a85 !important;
}

/* Breadcrumb Light mode */
[data-bs-theme="light"] .breadcrumb-item a {
    color: #5a6a85 !important;
}
[data-bs-theme="light"] .breadcrumb-item.active {
    color: #2a3547 !important;
}

/* Modernize-style Pills & Badges in Light Mode */
[data-bs-theme="light"] .badge-premium-green { background: #e6fffa !important; color: #02b3a6 !important; border: none !important; }
[data-bs-theme="light"] .badge-premium-red { background: #fbf2ef !important; color: #fa896b !important; border: none !important; }
[data-bs-theme="light"] .badge-premium-blue { background: #ecf2ff !important; color: #5d87ff !important; border: none !important; }
[data-bs-theme="light"] .badge-premium-gray { background: #f6f9fc !important; color: #5a6a85 !important; border: none !important; }

/* Fixed profile panel in Light Mode sidebar */
[data-bs-theme="light"] .fixed-profile {
    background-color: #ecf2ff !important;
    border: 1px solid #dfe5ef !important;
}
[data-bs-theme="light"] .fixed-profile .john-title h6 {
    color: #2a3547 !important;
}
[data-bs-theme="light"] .fixed-profile .john-title span {
    color: #5a6a85 !important;
}

/* Jetstream Modal Overrides for Light Mode */
[data-bs-theme="light"] .jetstream-modal > div:last-child {
    background-color: #ffffff !important;
    border: 1px solid #ebf1f6 !important;
    box-shadow: rgba(145, 158, 171, 0.15) 0px 10px 40px -10px !important;
}


/* Premium Buttons in Admin Dashboard */
.btn-primary {
    background-color: #00b4d8 !important;
    border-color: #00b4d8 !important;
    color: #ffffff !important;
    border-radius: 36px !important;
}
.btn-primary:hover {
    background-color: #0096c7 !important;
    border-color: #0096c7 !important;
    opacity: 0.9;
}

.btn-secondary {
    background-color: #333336 !important;
    border-color: #333336 !important;
    color: #f5f5f7 !important;
    border-radius: 36px !important;
}
.btn-secondary:hover {
    background-color: #424245 !important;
    border-color: #424245 !important;
}

.btn-danger {
    background-color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    color: #ffffff !important;
    border-radius: 36px !important;
    font-weight: 600 !important;
}
.btn-danger:hover {
    background-color: #e55a5a !important;
    border-color: #e55a5a !important;
    opacity: 0.9;
    color: #ffffff !important;
}

/* DataTables and Table enhancements */
[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable tbody td {
    border-bottom-color: #424245 !important;
    color: #f5f5f7 !important;
}
[data-bs-theme="dark"] table.dataTable thead th {
    background-color: #111111 !important;
}
[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: #1d1d1f !important;
}

/* Profile specific utility helpers */
.profile-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.5rem;
}
[data-bs-theme="light"] .profile-card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Jetstream Modal Overrides to match SmartHome */
.jetstream-modal > div:last-child {
    background-color: #1d1d1f !important;
    border: 1px solid #424245 !important;
    border-radius: 28px !important;
    box-shadow: none !important;
}

[data-bs-theme="light"] .jetstream-modal > div:last-child {
    background-color: #f5f5f7 !important;
    border: 1px solid #cccccc !important;
    border-radius: 28px !important;
    box-shadow: none !important;
}

.jetstream-modal input {
    border-radius: 12px !important;
}

/* =========================================
   Modernize Sidebar Active States Overrides
   ========================================= */

/* Dark Mode Sidebar Active State */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active {
    background-color: rgba(0, 180, 216, 0.15) !important;
    color: #00b4d8 !important;
}

[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active i,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active i,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link span,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active span {
    color: #00b4d8 !important;
}

/* Light Mode Sidebar Active State */
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item > .sidebar-link.active {
    background-color: rgba(0, 150, 199, 0.1) !important;
    color: #0096c7 !important;
}

[data-bs-theme="light"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active i,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item > .sidebar-link.active i,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link span,
[data-bs-theme="light"] .sidebar-nav ul .sidebar-item > .sidebar-link.active span {
    color: #0096c7 !important;
}

/* =========================================
   Audit Logs Theme-Aware Metadata & UA Styles
   ========================================= */

.smart-metadata-pre {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

[data-bs-theme="dark"] .smart-metadata-pre {
    background-color: #111111 !important;
    color: #f5f5f7 !important;
    border: 1px solid #333336 !important;
}

.smart-ua-box {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

[data-bs-theme="dark"] .smart-ua-box {
    background-color: #111111 !important;
    color: #86868b !important;
    border: 1px solid #333336 !important;
}

/* Hide default datatable filter search box on audit logs page */
.audit-log-page .dataTables_filter {
    display: none !important;
}

/* =========================================
   DateRangePicker Premium Theme Styling
   ========================================= */

.daterangepicker {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #dfe5ef !important;
    font-family: 'Inter', sans-serif !important;
}

[data-bs-theme="dark"] .daterangepicker {
    background-color: #1d1d1f !important;
    border: 1px solid #424245 !important;
    color: #f5f5f7 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table {
    background-color: #1d1d1f !important;
    border: none !important;
}

[data-bs-theme="dark"] .daterangepicker td.available {
    background-color: transparent !important;
    color: #f5f5f7 !important;
}

[data-bs-theme="dark"] .daterangepicker td.available:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #00b4d8 !important;
}

[data-bs-theme="dark"] .daterangepicker td.off {
    color: #424245 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #00b4d8 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker td.active,
[data-bs-theme="dark"] .daterangepicker td.active:hover {
    background-color: #00b4d8 !important;
    color: #ffffff !important;
}

.daterangepicker td.in-range {
    background-color: rgba(0, 180, 216, 0.1) !important;
    color: #0096c7 !important;
}

[data-bs-theme="dark"] .daterangepicker td.in-range {
    background-color: rgba(0, 180, 216, 0.15) !important;
    color: #48cae4 !important;
}

[data-bs-theme="dark"] .daterangepicker th {
    color: #f5f5f7 !important;
}

[data-bs-theme="dark"] .daterangepicker th.month {
    color: #f5f5f7 !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    outline: none !important;
    cursor: pointer !important;
}

[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect {
    border-color: #424245 !important;
    background-color: #111111 !important;
    color: #f5f5f7 !important;
}

.daterangepicker select.monthselect {
    margin-right: 6px !important;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid #dfe5ef !important;
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons {
    border-top: 1px solid #424245 !important;
    background-color: #1d1d1f !important;
}

[data-bs-theme="dark"] .daterangepicker .drp-selected {
    color: #86868b !important;
}

.daterangepicker .btn {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

/* DateRangePicker Select2 Dropdown Custom Styling (Fixed Height & Scrollable) */
.daterangepicker .select2-container {
    vertical-align: middle !important;
}

/* Sibling selectors to target specific Select2 containers and set proper widths */
.daterangepicker .calendar-table th select.monthselect + .select2-container {
    width: 95px !important;
    margin-right: 8px !important;
}

.daterangepicker .calendar-table th select.yearselect + .select2-container {
    width: 75px !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    display: none !important; /* Hide original select elements */
}

.daterangepicker .select2-container--default .select2-selection--single {
    height: 28px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
    outline: none !important;
    transition: border-color 0.2s, background-color 0.2s;
    vertical-align: middle !important;
    position: relative !important;
}

[data-bs-theme="dark"] .daterangepicker .select2-container--default .select2-selection--single {
    background-color: #111111 !important;
    border-color: #424245 !important;
}

.daterangepicker .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1e293b !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding-left: 0 !important;
    padding-right: 12px !important;
    /* line-height: normal !important; */
    display: block !important;
    text-align: left !important;
}

[data-bs-theme="dark"] .daterangepicker .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f5f5f7 !important;
}

.daterangepicker .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px !important;
    width: 20px !important;
    top: 0 !important;
    right: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.daterangepicker .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent !important;
    border-width: 4px 4px 0 4px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    position: static !important;
}

[data-bs-theme="dark"] .daterangepicker .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #86868b transparent transparent transparent !important;
}

/* Select2 Dropdown List container */
.daterangepicker .select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #dfe5ef !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

[data-bs-theme="dark"] .daterangepicker .select2-dropdown {
    background-color: #1d1d1f !important;
    border-color: #424245 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Fixed Height and Scrollable Options list */
.daterangepicker .select2-results__options {
    max-height: 160px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
}

/* Scrollbar styling */
.daterangepicker .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.daterangepicker .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.daterangepicker .select2-results__options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

[data-bs-theme="dark"] .daterangepicker .select2-results__options::-webkit-scrollbar-thumb {
    background: #424245;
}

/* Option List Items styling */
.daterangepicker .select2-results__option {
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: background-color 0.15s, color 0.15s;
}

[data-bs-theme="dark"] .daterangepicker .select2-results__option {
    color: #f5f5f7 !important;
}

/* Highlighted (hover/focus) item */
.daterangepicker .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #00b4d8 !important;
    color: #ffffff !important;
}

/* Selected item styling */
.daterangepicker .select2-results__option[aria-selected=true] {
    background-color: rgba(0, 180, 216, 0.1) !important;
    color: #00b4d8 !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .daterangepicker .select2-results__option[aria-selected=true] {
    background-color: rgba(0, 180, 216, 0.2) !important;
    color: #00b4d8 !important;
}

/* =========================================
   Firmware Editor Textarea
   ========================================= */
#firmware_code {
    background-color: #1e1e1e !important;
    color: #d4d4d4 !important;
    border: 1px solid #3c3c3c !important;
}
#firmware_code::placeholder {
    color: #757575 !important;
}

/* =========================================
   Premium Range Input (Dimmer) Override
   ========================================= */
.form-range {
    height: 1.5rem;
    padding: 0;
    background: transparent;
}

.form-range:focus {
    outline: none;
    box-shadow: none !important;
}

/* --- Webkit Browsers (Chrome, Safari, Edge, Opera) --- */
.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    transition: background 0.2s ease;
    border: none;
}

[data-bs-theme="light"] .form-range::-webkit-slider-runnable-track {
    background: rgba(0, 180, 216, 0.18) !important; /* Premium light-teal track in light mode */
}

[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.2) !important;
}

.form-range:hover::-webkit-slider-runnable-track {
    background: rgba(0, 0, 0, 0.18);
}

[data-bs-theme="light"] .form-range:hover::-webkit-slider-runnable-track {
    background: rgba(0, 180, 216, 0.28) !important;
}

[data-bs-theme="dark"] .form-range:hover::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.3) !important;
}

.form-range::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--smart-teal-nexus) !important;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
    border: 3px solid #ffffff !important; /* Float effect using white border */
    box-shadow: 0 2px 6px rgba(0, 180, 216, 0.4) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

[data-bs-theme="dark"] .form-range::-webkit-slider-thumb {
    border: 3px solid #1d1d1f !important; /* Match obsidian card bg in dark mode */
    box-shadow: 0 2px 8px rgba(0, 180, 216, 0.6) !important;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--smart-teal-halo) !important;
    box-shadow: 0 3px 10px rgba(0, 180, 216, 0.6) !important;
}

.form-range::-webkit-slider-thumb:active {
    transform: scale(1.3);
    background: var(--smart-teal-link) !important;
}

/* --- Mozilla Firefox --- */
.form-range::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    border: none;
    transition: background 0.2s ease;
}

[data-bs-theme="light"] .form-range::-moz-range-track {
    background: rgba(0, 180, 216, 0.18) !important;
}

[data-bs-theme="dark"] .form-range::-moz-range-track {
    background: rgba(255, 255, 255, 0.2) !important;
}

.form-range:hover::-moz-range-track {
    background: rgba(0, 0, 0, 0.18);
}

[data-bs-theme="light"] .form-range:hover::-moz-range-track {
    background: rgba(0, 180, 216, 0.28) !important;
}

[data-bs-theme="dark"] .form-range:hover::-moz-range-track {
    background: rgba(255, 255, 255, 0.3) !important;
}

.form-range::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--smart-teal-nexus) !important;
    cursor: pointer;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 180, 216, 0.4) !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

[data-bs-theme="dark"] .form-range::-moz-range-thumb {
    border: 3px solid #1d1d1f !important;
    box-shadow: 0 2px 8px rgba(0, 180, 216, 0.6) !important;
}

.form-range::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: var(--smart-teal-halo) !important;
    box-shadow: 0 3px 10px rgba(0, 180, 216, 0.6) !important;
}

.form-range::-moz-range-thumb:active {
    transform: scale(1.3);
    background: var(--smart-teal-link) !important;
}

.form-range::-moz-range-progress {
    background-color: var(--smart-teal-nexus) !important;
    height: 6px;
    border-radius: 999px;
}

/* =========================================
   SmartHome Notification Bell Style Refinements
   ========================================= */
.message-body {
    background-color: transparent !important;
}

.smart-notification-item {
    background-color: transparent !important;
    border-bottom: 1px solid #ebf1f6 !important;
    transition: background-color 0.2s ease;
}

.smart-notification-item:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

.smart-notification-title {
    color: #2a3547 !important;
}

[data-bs-theme="dark"] .smart-notification-item {
    border-bottom: 1px solid #333336 !important;
}

[data-bs-theme="dark"] .smart-notification-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .smart-notification-title {
    color: #f5f5f7 !important;
}

/* =========================================
   SmartDevice Title Hover Effect
   ========================================= */
.smart-device-title-link:hover .smart-device-title {
    color: var(--smart-teal-nexus) !important;
    text-decoration: underline !important;
}

/* =========================================
   Premium Interactive Toggle Switch
   ========================================= */
.smart-toggle-switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 36px;
}

.smart-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.smart-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 36px;
    border: 1.5px solid #ebf1f6;
}

[data-bs-theme="dark"] .smart-toggle-slider {
    background-color: #2d2d30;
    border-color: #333336;
}

.smart-toggle-slider:before {
    position: absolute;
    content: "";
    height: 28px;
    width: 28px;
    left: 3px;
    bottom: 2.5px;
    background-color: white;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.smart-toggle-switch input:checked + .smart-toggle-slider {
    background-color: var(--smart-teal-nexus);
    border-color: var(--smart-teal-nexus);
}

.smart-toggle-switch input:checked + .smart-toggle-slider:before {
    transform: translateX(28px);
}

/* Active pressing stretch effect */
.smart-toggle-switch:active .smart-toggle-slider:before {
    width: 32px;
}
.smart-toggle-switch input:checked:active + .smart-toggle-slider:before {
    transform: translateX(24px);
}

/* Hover glow effect */
.smart-toggle-switch:hover .smart-toggle-slider {
    box-shadow: 0 0 8px rgba(0, 180, 216, 0.2);
}

.smart-toggle-switch input:checked:hover + .smart-toggle-slider {
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.4);
}

/* =========================================
   Premium View Transitions (Polygon-Gradient)
   ========================================= */
:root {
    --expo-out: linear(
        0 0%, 0.1684 2.66%, 0.3165 5.49%,
        0.446 8.52%, 0.5581 11.78%,
        0.6535 15.29%, 0.7341 19.11%,
        0.8011 23.3%, 0.8557 27.93%,
        0.8962 32.68%, 0.9283 38.01%,
        0.9529 44.08%, 0.9711 51.14%,
        0.9833 59.06%, 0.9915 68.74%, 1 100%
    );
}

/* Disable default cross-fade transitions */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* New theme screenshot overlays on top of the old theme screenshot */
::view-transition-new(root) {
    /* Chrome & Safari Prefixed Masking */
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwSDQwTDAgNDBWMFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xNl8xNCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTZfMTQiIHgxPSIwIiB5MT0iMCIgeDI9IjIwLjUiIHkyPSIyMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz48c3RvcCBvZmZzZXQ9IjAuODQ1MDYiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAuOTkiLz48c3RvcCBvZmZzZXQ9IjAuOTUwNiIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==');
    -webkit-mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 0;
    -webkit-mask-origin: content-box;

    /* Standard Masking */
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwSDQwTDAgNDBWMFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xNl8xNCkiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTZfMTQiIHgxPSIwIiB5MT0iMCIgeDI9IjIwLjUiIHkyPSIyMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz48c3RvcCBvZmZzZXQ9IjAuODQ1MDYiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAuOTkiLz48c3RvcCBvZmZzZXQ9IjAuOTUwNiIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==');
    mask-position: top left;
    mask-repeat: no-repeat;
    mask-size: 0;
    mask-origin: content-box;

    animation: theme-reveal-scale 1.2s both;
    transform-origin: top left;
}

::view-transition-group(root) {
    animation-timing-function: var(--expo-out);
}

::view-transition-old(root) {
    animation: theme-reveal-scale 1.2s both;
    transform-origin: top left;
    z-index: -1;
}

@keyframes theme-reveal-scale {
    from {
        -webkit-mask-size: 0;
        mask-size: 0;
    }
    to {
        -webkit-mask-size: 350vmax;
        mask-size: 350vmax;
    }
}

/* Custom Tariff Category Badges */
.badge-tariff-subsidy {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: #28a745 !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
}

.badge-tariff-non-subsidy {
    background-color: rgba(108, 117, 125, 0.15) !important;
    color: #6c757d !important;
    border: 1px solid rgba(108, 117, 125, 0.3) !important;
}

[data-bs-theme="dark"] .badge-tariff-subsidy {
    background-color: rgba(72, 202, 228, 0.15) !important;
    color: #48cae4 !important;
    border: 1px solid rgba(72, 202, 228, 0.3) !important;
}

[data-bs-theme="dark"] .badge-tariff-non-subsidy {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ced4da !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}