/* ==================================================
COMMON UI STYLESHEET
Purpose: Shared styles across multiple pages
Structure: Tokens → Base → Utilities → Components → Pages
================================================== */

/* ==================================================
1. DESIGN TOKENS (CSS VARIABLES)
   ================================================== */

   /*  */
body.v1-modal-open-lock {
    padding-right: 14px !important;
}

   :root {
    /* Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #364153;
    --gray-900: #111827;
    --amber-100: #fef3c6;
    --amber-200: #fee685;
    --amber-500: #fe9a00;
    --amber-600: #f59e0b;
    --amber-800: #973c00;
    

    --blue-50: #eff6ff;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1447e6;
    --indigo-400: #818cf8;
    --indigo-300: #9ab4ff;
    --green-600: #059669;
    --green-500: #22c55e;
    --green-100: #D1FAE5;
    --green-50: #ECFDF5;
    --red-500: #ef4444;
    --red-600: #dc2626;

    --success-bg: #ecfdf5;
    --warning-bg: #fffbeb;
    --danger-bg: #fef2f2;

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1);
}


@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes scaleIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================================================
2. GLOBAL / BASE STYLES
================================================== */
body:has(.v1-page .bg-new-design) {
    background-color: var(--gray-100);
}

.v1-page h1,
.v1-page h2,
.v1-page h3,
.v1-page h4,
.v1-page h5,
.v1-page h6,
.v1-page .h1,
.v1-page .h2,
.v1-page .h3,
.v1-page .h4,
.v1-page .h5,
.v1-page .h6 {
    margin: 0;
    line-height: normal;
}

.v1-page .row {
    margin-left: -12px;
    margin-right: -12px;
}

/* ==================================================
3. UTILITIES
================================================== */

/* Flex */
.v1-page .flex { display: flex; }
.v1-page .flex-col { flex-direction: column; }
.v1-page .flex-1 { flex: 1 1 0%; }
.v1-page .items-center { align-items: center; }
.v1-page .items-start { align-items: flex-start; }
.v1-page .justify-between { justify-content: space-between; }
.v1-page .shrink-0 { flex-shrink: 0; }
.v1-page .min-w-0 { min-width: 0; }

/* Spacing */
.v1-page .p-1 { padding: 0.25rem; }
.v1-page .px-1 { padding-inline: 0.25rem; }
.v1-page .py-px { padding-block: 1px; }
.v1-page .mt-0\.5 { margin-top: 0.125rem; }
.v1-page .mb-6 { margin-bottom: 1.5rem; }
.v1-page .gap-1 { gap: 0.25rem; }
.v1-page .gap-2 { gap: 0.5rem; }
.v1-page .gap-3 { gap: 0.75rem; }
.v1-page .gap-4 { gap: 1rem; }

/* Sizing */
.v1-page .w-full { width: 100%; }
.v1-page .w-20 { width: 80px; }
.v1-page .max-w-100 { max-width: 100% !important; }
.v1-page .h-px { height: 1px; }
.v1-page .w-5 { width: 20px; }
.v1-page .h-5 { height: 20px; }
.v1-page .w-6 { width: 24px; }
.v1-page .h-6 { height: 24px; }
.v1-page .w-12 { width: 48px; }
.v1-page .h-12 { height: 48px; }
.v1-page .w-10 { width: 40px; }
.v1-page .h-10 { height: 40px; }
.width-138 {
    width: 138px;
}
.height-138 {
    height: 138px;
}

.v1-page .min-h-232 { min-height: 232px; }
.v1-page .min-h-488 { min-height: 488px; }

/* Typography */
.v1-page .text-xs { font-size: 0.75rem; }
.v1-page .text-sm { font-size: 0.875rem; }
.v1-page .text-lg { font-size: 1.125rem; }
.v1-page .text-xl { font-size: 1.25rem; }
.v1-page .text-2xl { font-size: 1.5rem; }
.v1-page .text-3xl { font-size: 1.875rem; }
.v1-page .text-4xl { font-size: 2.25rem; }
.v1-page .text-right { text-align: right; }
.v1-page .uppercase { text-transform: uppercase; }
.v1-page .whitespace-nowrap { white-space: nowrap; }
.v1-page .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v1-page .w-8 { width: 32px; }
.v1-page .h-8 { height: 32px; }
.v1-page .justify-center { justify-content: center; }
.v1-page .font-medium { font-weight: 500; }
.v1-page .font-semibold { font-weight: 600; }
.v1-page .font-bold { font-weight: 700; }

/* Colors */
.v1-page .text-gray-400 { color: var(--gray-400); }
.v1-page .text-gray-500 { color: var(--gray-500); }
.v1-page .text-gray-600 { color: var(--gray-600); }
.v1-page .text-gray-700 { color: var(--gray-700); }
.v1-page .text-gray-900 { color: var(--gray-900); }
.v1-page .text-gray-50 { color: var(--blue-50); }
.v1-page .text-blue-500 { color: var(--blue-500); }
.v1-page .text-rose-600 { color: #ec003f; }
.v1-page .text-rose-700 { color: rgb(199, 0, 54); }
.v1-page .text-red-500 { color: var(--red-500); }
.v1-page .text-red-600 { color: var(--red-600); }
.v1-page .text-emerald-600 { color: #10b981; }
.v1-page .text-green-600 { color: var(--green-600); }
.v1-page .text-green-500 { color: var(--green-500); }
.v1-page .text-green-100 { color: var(--green-100); }
.v1-page .text-blue-600 { color: var(--blue-600); }
.v1-page .text-blue-700 { color: var(--blue-700); }

.v1-page .bg-rose-600 { background-color: #ec003f; }
.v1-page .bg-rose-700 { background-color: rgb(199, 0, 54); }
.v1-page .bg-emerald-600 { background-color: #10b981; }
.v1-page .bg-amber-500 { background-color: var(--amber-500); }
.v1-page .bg-blue-500 { background-color: var(--blue-500); }
.v1-page .bg-blue-50 { background-color: var(--blue-50); }
.v1-page .bg-green-600 { background-color: var(--green-600); }
.v1-page .bg-green-500 { background-color: var(--green-500); }
.v1-page .bg-green-100 { background-color: var(--green-100); }
.v1-page .bg-green-50 { background-color: var(--green-50); }
.v1-page .bg-blue-700 { background-color: var(--blue-700); }
.v1-page .bg-gray-50 { background-color: var(--gray-50); }
.v1-page .bg-gray-100 { background-color: var(--gray-100); }
.v1-page .bg-gray-400 { background-color: var(--gray-400); }
.v1-page .bg-gray-600 { background-color: var(--gray-600); }
.v1-page .bg-gray-50\/50 { background-color: rgba(249,250,251,.5); }
.v1-page .bg-rose-50\/50 { background-color: rgb(255 241 242 / 50%) !important; }
.v1-page .bg-rose-100\/50 { background-color: rgba(199, 0, 53, 0.100) !important; }
.v1-page .border-rose-100 { border-color: rgb(254 202 202) !important; }
.v1-page .bg-amber-100 {
    background-color: var(--amber-100);
}
.v1-page .text-amber-600 {
    color: var(--amber-600);
}
.v1-page .text-amber-800 {
    color: var(--amber-800);
}

.v1-page .border-green-100 { border-color: var(--green-100); }

/* Borders */
.v1-page .rounded { border-radius: var(--radius-sm); }
.v1-page .rounded-md { border-radius: var(--radius-md); }
.v1-page .rounded-lg { border-radius: var(--radius-lg); }
.v1-page .rounded-xl { border-radius: var(--radius-xl); }
.v1-page .rounded-full { border-radius: 50%; }

.v1-page .underline{ text-decoration: underline;}
.v1-page .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.v1-page .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.v1-page .shared-user-card {  width: 100%; }
.v1-page .top-20 {
    top: 20px;
}
.v1-page .right-20 {
    right: 20px;
}
/* shadow */
.v1-page .shadow-sm { box-shadow: var(--shadow-sm); }
.v1-page .shadow-md { box-shadow: var(--shadow-md); }
.v1-page .shadow-lg { box-shadow: var(--shadow-lg); }
.v1-page .shadow-xl { box-shadow: var(--shadow-xl); }

/* ==================================================
4. COMPONENTS
================================================== */

/* Cards */
.v1-page .metric-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s;
    border: none;
}
.v1-page .metric-card:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Tabs */
.v1-page .nav-tabs-clean { position: relative; }
.v1-page .nav-tabs-clean .nav-link {
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0 0.5rem 1rem;
    margin-right: 1rem;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: flex-start;
}
.v1-page .nav-tabs-clean .nav-link.active { color: #0d6efd; }
.v1-page .nav-tabs-clean .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #0d6efd;
}

.v1-page .tab-count-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: #f3f4f6;
    color: #6b7280;
    margin-left: 8px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    transition: all 0.2s ease;
}

.v1-page .nav-link.active .tab-count-badge {
    background-color: #eff6ff !important;
    color: #3b82f6 !important;
}

/* Badges */
.v1-page .tag-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
    border: 1px solid #e5e7eb;
}
.v1-page .badge-gray {
  padding: 2px 6px;            
  border-radius: 4px;            
  font-size: 10px;               
  font-weight: bold;             
  background-color: #f3f4f6;     
  color: #6b7280;                
  border: 1px solid #e5e7eb;     
  text-transform: uppercase;     
  letter-spacing: 0.05em;       
  display: inline-block;         
}

.v1-page .badge-status {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.v1-page .badge-active,
.v1-page .badge-available {
    background: #ecfdf5;
    color: #10b981;
    border-color: #d1fae5;
}
.v1-page .badge-invited,
.v1-page .badge-charging {
    background: #eff6ff;
    color: #3b82f6;
    border-color: #d1e9ff;
}
.v1-page .badge-shared {
    background: #f5f3ff;
    color: #8b5cf6;
    border-color: #ddd6fe;
}
.v1-page .badge-suspended,
.v1-page .badge-suspendedev,
.v1-page .badge-suspendedevse {
    background: #fffbeb;
    color: #f59e0b;
    border-color: #fef3c7;
}
.v1-page .badge-faulted,
.v1-page .badge-offline {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fee2e2;
}

/* ==================================================
5. FORMS & CONTROLS
================================================== */

/* Search Input */
.v1-page .search-input-wrapper { position: relative; }
.v1-page .search-input-wrapper svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}
.v1-page .search-input {
    padding-left: 36px;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    height: 38px;
    font-size: 0.875rem;
    width: 100%;
    max-width: 384px;
}
.v1-page .search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Toggle */
.v1-page .toggle-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    background: #e5e7eb;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    outline: none;
}
.v1-page .toggle-switch:checked { background: #3b82f6; }
.v1-page .toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.v1-page .toggle-switch:checked::after { transform: translateX(16px); }

/* Table Styles */
.v1-page .table-responsive {
    max-width: calc(100vw - 345px);
    overflow-x: auto;
    overflow-y: auto;
}

/* ===============================
   With Padding
================================= */
.v1-page .table-responsive.table-with-padding,
.v1-page .bg-white .card-body.p-4 .p-0 .table-responsive {
    max-width: calc(100vw - 385px);
}

/* ===============================
   Full Width حالات (Modal / Expanded)
================================= */
.v1-page.new-modal .table-responsive,
.enlarge-menu .v1-page .table-responsive,
.modal-fullscreen-rfid .table-responsive,
.v1-page .modal-fullscreen-rfid .table-responsive,
.v1-page .full-table-responsive {
    max-width: 100% !important;
}

@media (max-width: 1024px) {    
    .v1-page .table-responsive.table-with-padding,
    .enlarge-menu .v1-page .table-responsive,
    .v1-page.new-modal .table-responsive,
    .v1-page .bg-white .card-body.p-4 .table-responsive{
        max-width: calc(100% - 0px) !important;
    }
}
.v1-page .table-custom th {
    background-color: #f9fafb;
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #f6f3f4 !important;
    border-top: none !important;
    padding: 12px 16px;
}
.v1-page .table-custom td {
    vertical-align: middle;
    padding: 16px;
    border-bottom: 1px solid #f6f3f4;
    background: white;
    transition: background-color 0.2s ease;
}
.v1-page .table-custom tr:last-child td { border-bottom: none; }
.v1-page .table-custom tbody tr:hover td {
    background-color: #f9fafb;
    cursor: pointer;
}

/* Sticky columns for charger tables */
.v1-page .table-sticky-columns {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
}
.v1-page .table-sticky-columns th,
.v1-page .table-sticky-columns td {
    white-space: nowrap;
}
.v1-page .table-sticky-columns .sticky-col {
    position: sticky;
    z-index: 5;
}
.v1-page .table-sticky-columns thead .sticky-col {
    z-index: 6;
}
.v1-page .table-sticky-columns thead .sticky-col {
    background-color: #f9fafb;
}
.v1-page .table-sticky-columns tbody .sticky-col {
    background-color: #ffffff;
}

/* Left sticky columns */
.v1-page .table-sticky-columns .sticky-col-left-1 {
    left: 0;
    /* box-shadow: 2px 0 4px rgba(42, 46, 57, 0.06); */
}
.v1-page .table-sticky-columns .sticky-col-left-2 {
    left: 80px;
    border-right: 1px solid #f6f3f4;
    /* box-shadow: 2px 0 4px rgba(42, 46, 57, 0.06); */
}

/* Right sticky column */
.v1-page .table-sticky-columns .sticky-col-right {
    right: 0;
    border-left: 1px solid #f6f3f4;
    /* box-shadow: -2px 0 4px rgba(42, 46, 57, 0.06); */
}

.v1-page .btn-action-start {
    color: #008236;
    background: #f0fdf4;
    border: 1px solid #b9f8cf;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 2px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.v1-page .btn-action-stop {
    color: #e7000b;
    background: #fef2f2;
    border: 1px solid #ffc9c9;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 2px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.v1-page .btn-action-disabled {
    color: #9ca3af;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 2px 12px;
}

/* ==================================================
6. PAGE-SPECIFIC OVERRIDES
================================================== */
.v1-page #dateRangeModal .modal-content {
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

/* Indicators */
.v1-page .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Icon Box */
.v1-page .icon-box {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

/* Misc */
.v1-page .inline-block { display: inline-block; }
.v1-page .transition-colors {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Premium Custom Select/Dropdown */
.v1-page .custom-select-wrapper { position: relative; }
.v1-page .custom-select-btn {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: .375rem .75rem;
    min-height: 38px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.v1-page input.form-control {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: .375rem .75rem;
    min-height: 38px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.v1-page .custom-select-btn:hover,
.v1-page .custom-select-btn[aria-expanded="true"],
.v1-page input.form-control:focus {
    border-color: #d1d5db;
    background-color: #f9fafb;
}
.v1-page .custom-select-btn[aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
}
.v1-page .custom-select-btn .arrow-icon {
    transition: transform 0.2s ease;
    color: #9ca3af;
}

/* Dropdown Menu Styling */
.v1-page .custom-dropdown-menu {
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 6px;
    margin: 1px 0px;
    min-width: 180px;
    transform-origin: top left;
    animation: scaleIn 0.15s ease-out forwards;
    display: none;
}
.v1-page .custom-dropdown-menu.show { display: block; }


.v1-page .custom-dropdown-item {
    display: flex;
    padding: 8px 12px;
    font-size: 14px;
    color: #4b5563;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s;
    margin-bottom: 2px;
}
.v1-page .custom-dropdown-menu .dropdown-submenu .dropdown-item.px-12,
.v1-page .custom-dropdown-menu .dropdown-submenu .dropdown-item.px-3{
    padding: 12px !important;
}
.v1-page .custom-dropdown-item:last-child { margin-bottom: 0; }
.v1-page .custom-dropdown-item:hover {
    background-color: #f3f4f6;
    color: #1f2937;
    text-decoration: none;
}

/* Active State (Blue) */
.v1-page .custom-dropdown-item.active {
    background-color: #eff6ff;
    color: #3b82f6;
    font-weight: 500;
}

.v1-page .icon-btn-soft {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #f8f9fa;
    color: #6b7280;
    transition: all 0.2s;
}
.v1-page .icon-btn-soft:hover {
    background-color: #e5e7eb;
    color: #111827;
}

.v1-page .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.v1-page .chart-legend-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    font-size: 14px;
    max-width: 280px;
    width: 100%;
}

/* Option Card Hover */
.v1-page .option-card:hover {
    border-color: #3b82f6 !important;
    background-color: #eff6ff;
}

/* Toggle Switch generic */
.v1-page .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.v1-page .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.v1-page .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.v1-page .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}
.v1-page input:checked + .slider { background-color: #2196F3; }
.v1-page input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
.v1-page input:checked + .slider:before { transform: translateX(20px); }

/* Rounded sliders */
.v1-page .slider.round { border-radius: 34px; }
.v1-page .slider.round:before { border-radius: 50%; }

/* Premium Filter Chip Checkboxes */
.v1-page .filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background-color: transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    border: 1px solid transparent;
}

/* Hover state for unchecked */
.v1-page .filter-chip:hover { background-color: #fbf9fa; }

/* Hide default checkbox */
.v1-page .filter-chip input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Custom Checkbox Square */
.v1-page .filter-chip .checkmark-box {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Checkmark Icon */
.v1-page .filter-chip .checkmark-box::after {
    content: "";
    display: none;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

/* Text Styling */
.v1-page .filter-chip .chip-text {
    font-size: 0.9rem;
    color: #4b5563;
    font-weight: 500;
}

/* Checked State */
.v1-page .filter-chip:has(input:checked) { background-color: #eff6ff; }
.v1-page .filter-chip.active { background-color: #eff6ff; }

.v1-page .filter-chip input:checked ~ .checkmark-box {
    background-color: #4D79F6;
    border-color: #4D79F6;
}

.v1-page .filter-chip input:checked ~ .checkmark-box::after { display: block; }

.v1-page .filter-chip input:checked ~ .chip-text {
    color: #4D79F6;
    font-weight: 600;
}

/* Global blue checkbox */
.v1-page .custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.v1-page .custom-checkbox-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.v1-page .custom-checkbox-box {
    height: 18px;
    width: 18px;
    border-radius: 6px;
    border: 2px solid #e5e7eb;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.v1-page .custom-checkbox-box::after {
    content: "";
    /* display: none; */
    opacity: 0;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.v1-page .custom-checkbox-input:checked + .custom-checkbox-box {
    background-color: #4D79F6;
    border-color: #4D79F6;
}
.v1-page .custom-checkbox-input:checked + .custom-checkbox-box::after {
    /* display: block; */
    opacity: 1;
}
/* .v1-page .custom-checkbox:hover .custom-checkbox-box {
    border-color: #d1d5db;
    background-color: #f9fafb;
}
 */
.v1-page .custom-checkbox-input:focus-visible + .custom-checkbox-box {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}
.v1-page .custom-checkbox-input:disabled + .custom-checkbox-box {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.v1-page .custom-checkbox-input:disabled ~ .chip-text {
    color: #9ca3af;
    cursor: not-allowed;
}
.v1-page input.form-control:disabled,.v1-page .custom-select-btn:disabled {
    background-color: #e5e7eb;
    pointer-events: none;
}
.v1-page .custom-checkbox .chip-text {
    font-size: 0.9rem;
    color: #4b5563;
    font-weight: 500;
}

/* Ensure native checkboxes use theme blue where custom pattern is not used */
.v1-page input[type="checkbox"].form-check-input,
.v1-page input[type="checkbox"].custom-control-input {
    accent-color: #4D79F6;
}

/* Premium Dropdown Menu Items (Bulk Settings) */
.v1-page .dropdown-menu-xl {
    min-width: 320px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.v1-page .dropdown-item-premium {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.v1-page .dropdown-item-premium:hover { background-color: #f9fafb; }

.v1-page .dropdown-item-premium .icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}

/* Icon Colors */
.v1-page .bg-blue-light { background-color: #eff6ff; color: #3b82f6; }
.v1-page .bg-purple-light { background-color: #f5f3ff; color: #8b5cf6; }
.v1-page .bg-orange-light { background-color: #fff7ed; color: #f97316; }

.v1-page .dropdown-item-premium .content { flex-grow: 1; }

.v1-page .dropdown-item-premium .title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
    line-height: 1.25;
}

.v1-page .dropdown-item-premium .subtitle {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
}

/* new modal */
.new-modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.new-modal .modal-header { background-color: #fff; }
.new-modal .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}
.new-modal .modal-body { background-color: #fff; }
.new-modal .modal-footer { background-color: #fff; }
.new-modal .close {
    opacity: 1;
    color: #9ca3af;
    font-size: 1.5rem;
}
.new-modal .close:hover { color: #6b7280; }
.new-modal .modal-footer-center {
    justify-content: center;
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

.new-modal .modal-footer-center > * { width: 100%; }
.new-modal .modal-footer-center .btn,
.new-modal .modal-footer .btn {
    box-shadow: none;
    border-radius: 12px;
    font-size: 14px;
    padding: 8px 24px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.new-modal .modal-footer-center .btn-danger {
    background-color: #ec003f;
    color: #fff;
}
.new-modal .modal-footer-center .btn-danger:hover {
    background-color: rgb(199, 0, 54);
}
.new-modal .modal-footer-center .btn-primary {
    background-color: #3b82f6;
    color: #fff;
}
.new-modal .modal-footer-center .btn-primary:hover {
    background-color: #2563eb;
}
.new-modal .modal-footer-center .btn-outline-transparent , .new-modal .modal-footer .btn-outline-transparent {
    border: 1px solid #e5e7eb;
    background-color: transparent;
    color: #364153;
}
.new-modal .modal-footer-center .btn-outline-transparent:hover,
.new-modal .modal-footer .btn-outline-transparent:hover {
    background-color: #e5e7eb;
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease-out;
    pointer-events: none;
    max-width: 400px;
    width: 100%;
}

.notification-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#surveillanceSettingsModal .notification-item {
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

#surveillanceSettingsModal .notification-item:hover {
    border-color: #bfdbfe;
}

#surveillanceSettingsModal .notification-item:hover .delete-icon-btn {
    opacity: 1;
}

#surveillanceSettingsModal .delete-icon-btn {
    opacity: 0;
    min-width: 34px;
    min-height: 34px;
    transition: all 0.2s;
    color: #9ca3af;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#surveillanceSettingsModal .delete-icon-btn:hover {
    color: #dc3545;
    background-color: #fef2f2;
}

/* custom scrollbar */
.v1-page .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: 4px;
}
.v1-page .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.v1-page .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(224, 229, 241);
}
.v1-page .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgb(224, 229, 241);
}

/* ==================================================
   CUSTOM TOGGLE SWITCH
   ================================================== */
.v1-page .custom-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.v1-page .custom-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.v1-page .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: 0.3s;
    border-radius: 24px;
}

.v1-page .toggle-slider:before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.v1-page .custom-toggle input:checked + .toggle-slider {
    background-color: #4D79F6;
}

.v1-page .custom-toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.v1-page .custom-toggle input:focus + .toggle-slider {
    box-shadow: 0 0 1px #4D79F6;
}



/* Charger Overview dashboard css */
.charger-filter-btn-saved {
    color: #4b5563;
    font-weight: 500;
    border-radius: 999px;
    border-color: #e5e7eb;
}
.charger-filter-btn-saved:hover { background: #f9fafb; border-color: #d1d5db; }
.charger-saved-filters-menu { min-width: 200px; }
.charger-saved-filters-menu.min-w-280 { min-width: 200px; }
.charger-saved-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
    color: #374151;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.charger-saved-filter-item:hover { background-color: #f3f4f6; }
.charger-saved-filter-item.is-active { background-color: #eff6ff; color: #2563eb; font-weight: 500; }
.charger-saved-filter-item .charger-saved-filter-name { flex: 1; margin-right: 8px; cursor: pointer; }
.charger-saved-filter-item .charger-saved-filter-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.charger-saved-filter-item .charger-saved-filter-actions .btn-icon { padding: 4px; border: none; background: transparent; color: #6b7280; cursor: pointer; border-radius: 6px; line-height: 0; }
.charger-saved-filter-item .charger-saved-filter-actions .btn-icon:hover { color: #374151; background: #e5e7eb; }
.btn-icon { padding: 4px; border: none; background: transparent; color: #6b7280; cursor: pointer; border-radius: 6px; line-height: 0; }
.btn-icon:hover { color: #374151; background: #e5e7eb; }
.charger-filter-chip-fav svg.star-icon,
.charger-saved-filter-item .charger-saved-filter-actions .btn-icon.star-filled { color: #eab308; }
.charger-filter-chip-fav {
    background: #f9fafb;
    color: #4b5563;
    border-color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.charger-filter-chip-fav:hover { background: #f3f4f6; border-color: #d1d5db; }
.charger-filter-chip-fav.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
    font-weight: 500;
}
.charger-filter-chip-fav.active svg.star-icon {
    color: #3b82f6;
}
.charger-filter-chip-fav .chip-close-icon {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.charger-filter-chip-fav .chip-close-icon:hover {
    opacity: 1;
}
.charger-filter-chip-fav.active .chip-close-icon {
    display: inline-flex;
}
.charger-filter-applied-bar {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

/* My Places fixed dropdowns (charger kebab, contact role): menu is position:fixed in v1.js */
.dropdown-myplaces-charger-row .dropdown-menu,
.dropdown-myplaces-contact-role .dropdown-menu {
    max-height: min(70vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.charger-show-box-dropdown-menu .charger-dropdown-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.charger-dropdown-icon-blue { color: #2563eb; }
.charger-dropdown-icon-red { color: #dc2626; }
.charger-dropdown-icon-purple { color: #7c3aed; }
.charger-show-box-dropdown-menu .dropdown-submenu { position: relative; }
.charger-show-box-dropdown-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: auto;
    right: 100%;
    margin-right: 0px;
    display: none;
}
.charger-show-box-dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
.charger-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.charger-modal-chip {
    background: #fff;
    color: #6a7282;
    border-color: #e5e7eb;
    font-weight: 500;
    border-radius: 12px;
}
.charger-modal-chip:hover { border-color: #d1d5db; background: #f9fafb; }
.charger-modal-chip.active, .charger-modal-chip.active-outline {
    background: #eff6ff;
    border-color: #bedbff;
    color:#1447e6;
}
/* .charger-filter-checkbox-label {
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    color: #4b5563;
    font-weight: 500;
}
 */
.charger-filter-checkbox-label .charger-filter-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.charger-filter-checkbox-label .checkmark-box {
    height: 20px;
    width: 20px;
    min-width: 20px;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.charger-filter-checkbox-label .checkmark-box::after {
    content: "";
    display: none;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.charger-filter-checkbox-label input:checked ~ .checkmark-box {
    background-color: #4D79F6;
    border-color: #4D79F6;
}
.charger-filter-checkbox-label input:checked ~ .checkmark-box::after { display: block; }
.charger-filter-checkbox-label input:checked ~ .chip-text {
    color: #4D79F6;
    font-weight: 600;
}
.charger-modal-chip-custom-range {
    background: #fff !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}
.charger-modal-chip-custom-range:hover { background: #fef2f2 !important; }
.charger-modal-chip-custom-range.active,
.charger-modal-chip-custom-range.active-outline {
    background: #eff6ff !important;
    border-color: #bedbff !important;
    color: #1447e6 !important;
}
.charger-filter-offline-range {
    background: #f5f5f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    width: 100%;    
    max-width: 300px;
}
.charger-filter-offline-range .charger-offline-input {
    width: 100%;
    display: inline-block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.charger-filter-offline-range .charger-offline-sep {
    flex-shrink: 0;
}
.charger-filter-performance-range {
    height: 24px;
}
.charger-filter-performance-range .charger-perf-range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    background: #e5e7eb;
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
}
.charger-filter-performance-range .charger-perf-range-fill {
    position: absolute;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    background: #3b82f6;
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
    left: 0;
    right: 0;
}
.charger-filter-performance-range .charger-perf-range {
    position: absolute;
    width: 100%;
    height: 24px;
    margin: 0;
    top: 0;
    left: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 3;
}
.charger-filter-performance-range .charger-perf-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
}
.charger-filter-performance-range .charger-perf-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
}
.charger-accordion-header,.accordion-header {
    cursor: pointer;
}

.charger-accordion-header td,.accordion-header td {
    vertical-align: middle;
    padding-top: 14px;
    padding-bottom: 14px;
}

.charger-row-expander,.row-expander {
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;

}

.charger-accordion-header.is-open .charger-row-expander,.accordion-header.is-open .row-expander {
    color: #1f2937;
    border-color: #d1d5db;
    background: #f9fafb;
}

.charger-row-expander svg,.row-expander svg {
    transition: transform 0.2s ease;
}

.charger-accordion-header.is-open .charger-row-expander svg,.accordion-header.is-open .row-expander svg {
    transform: rotate(90deg);
}

.charger-accordion-detail-row td,.accordion-detail-row td {
    border-top: 0 !important;
    background: #ffffff;
}

.charger-header-cell,.header-cell {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.charger-place-name {
    font-size: 13px;
    color: #111827;
    font-weight: 600;
}

.charger-place-address {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
    min-width: 140px;
}

.charger-id-line {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.charger-id-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    background: #22c55e;
}


.important-stats-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: 0.75rem;
}

.important-stat-title {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
}

.important-stat-value {
    font-size: 12px;
    color: #111827;
    font-weight: 600;
    line-height: 1.25;
}

.important-stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.charger-action-cell {
    min-width: 122px;
}

.charger-accordion-panel {
    border-top: 1px solid #f3f4f6;
    background: #fcfcfd;
    padding: 1.25rem 1.5rem 1.5rem;
}

.charger-info-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111827;
    letter-spacing: 0.04em;
}

.charger-info-label {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 0;
}

.charger-info-value {
    font-size: 14px;
    color: #111827;
    font-weight: 600;
}

.basic-info-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: start;
    gap: 10px;
    margin-bottom: 8px;
}

.basic-info-row .charger-info-value {
    font-size: 12px;
    line-height: 1.45;
}

.basic-connectors .charger-info-value {
    margin-bottom: 1px;
}

.basic-connectors .charger-info-value:last-child {
    margin-bottom: 0;
}

.check-availability-btn {
    height: 28px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 500;
    color: #4b5563;
    border-radius: 6px;
    border-color: #e5e7eb;
}

.session-card {
    border: 1px solid #edf1f5;
    border-radius: 12px;
    background: #f8fafc;
    padding: 14px 16px;
}

.session-progress-track {
    height: 5px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
@media (min-width: 992px) {
    .border-right-lg {
        border-right: 1px solid #f3f4f6;
    }
}

.session-progress-value {
    height: 100%;
    width: 0%;
    background: #ef4444;
}

.session-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
}
.availability-chart-container {
    background: #fcfcfd;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 10px;
}
.availability-bar div {
    min-height: 100%;
    transition: opacity 0.2s ease;
}

.availability-bar div:hover {
    opacity: 0.8;
}
.session-metric-col {
    padding: 0 12px;
}

.session-metric-col:first-child {
    padding-left: 0;
}

.session-metric-col:last-child {
    padding-right: 0;
}

.session-metric-col + .session-metric-col {
    border-left: 1px solid #e5e7eb;
}

.session-metric-col .charger-info-label {
    margin-bottom: 4px;
}

.session-metric-col .charger-info-value {
    font-size: 24px;
    line-height: 1.2;
}

.session-metric-col .session-sub-value {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: #111827;
    word-break: break-word;
}

.public-access-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.public-access-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
}

.public-access-actions svg {
    width: 12px;
    height: 12px;
}
.max-w-1135 {
    max-width: 1135px;
}
.max-width-350 {
    max-width: 350px;
}
.max-w-170 {
    max-width: 170px;
}
.max-width-40 {
    width: 40px;
    max-width: 40px;
}
.qr-box{
    padding: 6px;
    border: 1px solid #0000001A;
    border-radius: 8px;
    background: #FFFFFF;
    max-width: 190px;
}

/* detail header */
.v1-page .detail-header{
    margin: 0px -22px;
    min-width: calc(100% + 44px);
    border-left: 1px solid #0000001a;
}
.v1-page .charger-image-upload-box:hover .charger-image-hover-overlay {
    opacity: 1 !important;
}

.v1-page .charger-accordion-header.is-open svg,
.v1-page .no-accordion-toggle.is-open svg {
    transform: rotate(90deg);
}
.v1-page .charger-accordion-header svg {
    transition: transform 0.2s ease-in-out;
}
.v1-page .tab-count-badge {
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}

/* Status badge */
.v1-page .badge-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* 7px dot */
.v1-page .indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Day toggle button */
.v1-page .pricing-day-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 0;
    cursor: pointer;
    text-align: left;
}
.v1-page .pricing-day-header:focus {
    outline: none;
    box-shadow: none;
}

/* Chevron rotate */
.v1-page .chevron-icon {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    color: #9ca3af;
}
.v1-page .pricing-day-header[aria-expanded="true"] .chevron-icon {
    transform: rotate(90deg);
}

/* Slots collapsible */
.v1-page .pricing-day-slots {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.v1-page .pricing-day-slots.open {
    max-height: 1200px;
}

/* Table-like grid head */
.v1-page .pricing-table-head {
    display: grid;
    grid-template-columns: 160px repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Slot grid row */
.v1-page .pricing-slot {
    display: grid;
    grid-template-columns: 160px repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
}
.v1-page .pricing-slot:last-child {
    margin-bottom: 0;
}

/* Pill for blocking */
.v1-page .pricing-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    font-weight: 700;
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
}

.v1-page .hover-bg-gray-50:hover {
    background-color: #f9fafb;
}

.v1-page .modal-fullscreen-rfid {
    max-width: 100%;
    margin: 0;
    height: 100%;
}
.v1-page .modal-fullscreen-rfid .modal-header {
    cursor: default !important;
}

.v1-page .modal-fullscreen-rfid .modal-content {
    height: 100%;
    border-radius: 0;
}

.v1-page .invite-method-card {
    cursor: pointer;
    border-color: #e5e7eb;
    max-width: 350px;
}

.v1-page .invite-method-card .check-icon {
    opacity: 0;
}

.v1-page .invite-method-card.active {
    border-color: #4D79F6;
    box-shadow: 0 0 0 1px #4D79F6;
    background-color: #eff6ff;
}

.v1-page .invite-method-card.active .check-icon {
    opacity: 1;
}

.v1-page .invite-method-card .method-icon {
    width: 36px;
    height: 36px;
    background-color: #eef2ff;
    color: #4D79F6;
}

.v1-page .assign-contact-item {
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.v1-page .assign-contact-item.active {
    border-color: #4D79F6;
    box-shadow: 0 0 0 1px #4D79F6;
    background-color: #eff6ff;
}

.v1-page .assign-contact-item.active .assign-contact-check {
    opacity: 1 !important;
}

/* Locations overview card hover */
.v1-page .location-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    z-index: 10;
}
.v1-page .location-card-img {
    transition: transform 0.25s ease;
}
.v1-page .location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    z-index: 15;
}
.v1-page .location-card:hover .location-card-img {
    transform: scale(1.03);
}
.v1-page .location-card-footer-text,
.v1-page .location-card-footer-icon {
    transition: color 0.18s ease;
}
.v1-page .location-card:hover .location-card-footer-text,
.v1-page .location-card:hover .location-card-footer-icon {
    color: #2563eb !important;
}

@media (max-width: 991px) {
    .v1-page .important-stats-wrap {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
        gap: 0.5rem;
    }

    .v1-page .charger-accordion-panel {
        padding: 1rem;
    }

    .v1-page .session-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    .v1-page .session-metric-col {
        padding: 0 10px;
    }

    .v1-page .session-metric-col:nth-child(2n + 1) {
        padding-left: 0;
        border-left: 0;
    }

    .v1-page .session-metric-col:nth-child(2n) {
        padding-right: 0;
    }

    .v1-page .session-metric-col:nth-child(n + 3) {
        border-top: 1px solid #e5e7eb;
        padding-top: 8px;
    }
    .v1-page .pricing-table-head,
    .v1-page .pricing-slot {
        grid-template-columns: 1fr;
    }
    .v1-page .pricing-table-head > div:not(:first-child) {
        display: none;
    }
    .v1-page .invite-method-card {
        max-width: 100%;
    }
}

/* Location Hierarchy tree */
.v1-page .location-hierarchy-tree {
    --level-indent: 24px;
}

.v1-page .location-node-row:hover {
    background-color: #f9fafb;
}
.v1-page .location-chevron {
    transition: transform 0.2s ease;
}
.v1-page .location-node-children {
    border-left: 1px solid #e5e7eb;
    margin-left: 30px;
    padding-left: 20px;
}
.v1-page .location-node-row {
    transition: background-color 0.15s ease;
    border-radius: 8px;
}
.v1-page .location-node-children .location-node-row {
    position: relative;
}
.v1-page .location-node-children .location-node-row::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    width: 20px;
    height: 1px;
    background-color: #e5e7eb;
    margin-left: -20px;
}
.v1-page .loc-filter-children.show { display: block; }
.v1-page .loc-filter-chevron {
    transition: transform 0.2s ease;
}
.v1-page .loc-filter-toggle:hover .loc-filter-chevron polyline {
    stroke: #6b7280;
}
.v1-page .custom-checkbox-input:indeterminate + .custom-checkbox-box {
    background-color: #4D79F6;
    border-color: #4D79F6;
}
.v1-page .custom-checkbox-input:indeterminate + .custom-checkbox-box::after {
    opacity: 1;
    width: 8px;
    height: 0;
    border: solid #ffffff;
    border-width: 0 0 2px 0;
    transform: none;
    margin-top: 1px;
}
/* DataTable Styles */
.v1-page .table.dataTable{
    margin-top: 0px !important;
    margin-bottom: 24px !important;
    position: relative !important;
    width: 100% !important;
}
.v1-page div.dataTables_wrapper div.dataTables_info{
    width: 30% !important;
    display: inline-block !important;
    padding: 0px 0px 16px 16px !important;
}
.v1-page div.dataTables_wrapper div.dataTables_paginate{
    width: 70% !important;
    display: inline-block !important;
    margin-left: auto !important;
    padding: 0px 16px 0px 0px !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 16px !important;
}
.v1-page div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link{
    border-radius: 8px !important;
    margin-left: 4px;
}
.v1-page div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link{
    box-shadow:  0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a !important;
}
.v1-page div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link:hover,
.v1-page div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link:focus{
    outline: none !important;
    box-shadow: none !important;
}












/* SweetAlert2 — confirmation dialogs only (cancel + confirm), aligned with .new-modal / RFID reference */
body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: #fff;
    font-family: inherit;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-header {
    padding: 0;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-title {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    line-height: 1.25;
    text-transform: none;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-content,
body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-html-container,
body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) #swal2-content {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-600);
    text-align: center;
    line-height: 1.5;
}

/* Restore classic SweetAlert2 icon ring geometry on v1 pages (modal alerts only; toasts keep plugin toast rules). */
body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-icon {
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    line-height: 5em;
    box-sizing: content-box;
}

/* Keep success ring/check in native geometry */
body:has(.v1-page) .swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    line-height: 5em;
    box-sizing: content-box;
}


body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-icon.swal2-warning {
    border-color: #f8bb86;
    background-color: transparent;
    color: #f8bb86;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-icon.swal2-question {
    border-color: #87adbd;
    background-color: transparent;
    color: #87adbd;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-icon.swal2-error {
    border-color: #f27474;
    background-color: transparent;
    color: #f27474;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-close {
    color: var(--gray-400);
    transition: color 0.15s ease-out;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-close:hover {
    color: var(--gray-500);
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-actions {
    display: grid;
    white-space: nowrap;
    flex-wrap: nowrap;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: none;
    margin: 1.5rem 0 0;
    justify-content: stretch;
    align-items: stretch;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-cancel {
    order: 1;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-confirm {
    order: 2;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled {
    margin: 0;
    width: 100%;
    box-shadow: none;
    border-radius: 12px;
    font-size: 14px;
    padding: 8px 24px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: none;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-actions:not(.swal2-loading) .swal2-styled:active {
    background-image: none;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled.swal2-confirm {
    background-color: var(--blue-500);
    color: #fff;
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled.swal2-confirm:hover {
    background-color: var(--blue-600);
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled.swal2-confirm:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(59, 130, 246, 0.35);
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled.swal2-cancel {
    background-color: transparent;
    color: var(--gray-700);
    border-color: var(--gray-200);
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled.swal2-cancel:hover {
    background-color: var(--gray-200);
}

body:has(.v1-page) .swal2-popup:not(.swal2-toast):has(button.swal2-cancel) .swal2-styled.swal2-cancel:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(107, 114, 128, 0.35);
}

canvas#donutChart,.place-donut-chart-wrap canvas{
    position: relative;
    z-index: 9;
}