/*////// START Fix DataTables search box alignment + visible border /////////*/
 .dataTables_wrapper .dataTables_filter{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.dataTables_wrapper .dataTables_filter label{display:flex;align-items:center;gap:.5rem;margin:0}
.dataTables_wrapper .dataTables_filter input{
    min-width:18rem;height:2.25rem;padding:.375rem .75rem;
    border:1px solid #e2e8f0;border-radius:.5rem;background:#fff;outline:none
}
.dark .dataTables_wrapper .dataTables_filter input{
    background:#0f172a;border-color:#475569;color:#e2e8f0
}
/* Lighten the "..." in DataTables pagination on dark theme */
/* Center & lighten DataTables pagination ellipsis */
.dataTables_wrapper .dataTables_paginate .ellipsis{
    display:inline-flex;            /* become a flex item */
    align-items:center;
    justify-content:center;         /* center the dots */
    padding:0 .45rem;               /* equal inset both sides */
    margin:0 .25rem;                /* equal outer space both sides */
    min-width:1.5rem;               /* gives it a button-like width */
    text-align:center;
}
.dark .dataTables_wrapper .dataTables_paginate .ellipsis{
    color:#e2e8f0 !important;       /* light text in dark mode */
    opacity:0.9;
}
/* Keep "Show {n} Entries" on one line (what you already added) */
.dataTables_length,
.dataTables_length label { white-space: nowrap; }
.dataTables_length select { display: inline-block; vertical-align: middle; }

/* Add breathing room between the controls row and the table */
.dataTables_wrapper .dt-head { margin-bottom: 12px; }  /* or 16px/1rem if you prefer */

/* (Optional) match spacing below the table body controls row */
.dataTables_wrapper .dt-foot { margin-top: 12px; }

/* allow horizontal scrolling for wide tables */
.dashcode-data-table { overflow-x: auto; }

/* when DataTables creates scroll containers, keep the bar visible */
.dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; }
.dataTables_wrapper .dataTables_scroll { overflow: visible; }
/* END Fix DataTables search box alignment + visible border */

/*////// START Dark style for active top-level sidebar links ///////*/
/* existing rule for light mode (keep this) */
.sidebar-menu > li > a.sidebar-link.active {
    background-color: #0f172a;
    color: #ffffff;
    /* and your icon/text color rules if you added them */
}

/* DARK & SEMI-DARK: single active items match dropdown background */
html.dark .sidebar-menu > li > a.sidebar-link.active,
html.semiDark .sidebar-menu > li > a.sidebar-link.active {
    background-color: #374151 !important;  /* lighter gray, like dropdown */
    color: #ffffff !important;
}

html.dark .sidebar-menu > li > a.sidebar-link.active .nav-icon,
html.dark .sidebar-menu > li > a.sidebar-link.active span,
html.semiDark .sidebar-menu > li > a.sidebar-link.active .nav-icon,
html.semiDark .sidebar-menu > li > a.sidebar-link.active span {
    color: #ffffff !important;
}
/* END Dark style for active top-level sidebar links */

/* Hide arrows in number inputs (Chrome, Edge, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.plan-info-box {
    background-color: #f8fafc;   /* light: slate-50 */
    border: 1px solid #e2e8f0;   /* light: slate-100 */
    color: #0f172a;              /* light: slate-900 */
}
.dark .plan-info-box {
    background-color: #020617;   /* dark: near slate-950 */
    border-color: #1e293b;       /* dark: slate-800 */
    color: #f9fafb;              /* dark: slate-50 */
}

.plan-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;              /* light: slate-400 */
}
.dark .plan-info-label {
    color: #cbd5f5;              /* dark-ish light text */
}

.plan-info-muted {
    color: #64748b;              /* light: slate-500 */
}
.dark .plan-info-muted {
    color: #cbd5f5;
}
.client-options-panel {
    background-color: #f8fafc;   /* light mode */
    border: 1px solid #e2e8f0;
}
.dark .client-options-panel {
    background-color: #020617;   /* dark mode panel bg */
    border-color: #1e293b;
}

.client-option-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;          /* px-3 py-2 */
    border-radius: 0.375rem;          /* rounded-md */
    font-size: 0.875rem;              /* text-sm */
    font-weight: 500;                 /* font-medium */
    color: #0f172a;                   /* slate-900 */
    background-color: transparent;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

/* light mode hover: slightly grey */
.client-option-link:hover {
    background-color: #e5e7eb;        /* slate-200-ish */
}

.dark .client-option-link {
    color: #f9fafb;
}

/* dark mode hover: slightly lighter than panel, not bright */
.dark .client-option-link:hover {
    background-color: #111827;        /* near slate-900 */
}

.client-option-icon {
    width: 1.25rem;                   /* w-5 */
    height: 1.25rem;                  /* h-5 */
    margin-right: 0.75rem;            /* mr-3 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;              /* text-lg */
    color: #6b7280;                   /* slate-500 */
}
.dark .client-option-icon {
    color: #cbd5f5;
}

 /* Show check icon on passed steps (match default wizard behavior) */
.wizard-step .number-box .no-icon { display: none; }
.wizard-step.passed .number-box .number { display: none; }
.wizard-step.passed .number-box .no-icon { display: inline-flex; }

/* Keep Next button fixed on the right even when Prev hidden */
.wizard-nav { display:flex; justify-content:space-between; align-items:center; }
.wizard-nav .prev-slot { min-width: 90px; }

/* Slot UI */
.slot-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    border-radius:.5rem;
}
.slot-btn.selected{
    border-color: rgb(15 23 42) !important;
    box-shadow: 0 0 0 2px rgba(15,23,42,.20);
    background: rgba(15,23,42,.04);
}
.dark .slot-btn.selected{
    border-color: rgb(226 232 240) !important;
    box-shadow: 0 0 0 2px rgba(226,232,240,.18);
    background: rgba(226,232,240,.06);
}

.slot-btn.unavailable{
    background: rgba(100,116,139,.10);
    border-color: rgba(100,116,139,.25) !important;
    color: rgba(100,116,139,.75);
    text-decoration: line-through;
}
.dark .slot-btn.unavailable{
    background: rgba(148,163,184,.08);
    border-color: rgba(148,163,184,.22) !important;
    color: rgba(148,163,184,.75);
}

.slot-skel {
    position: relative;
    overflow: hidden implying no repeatable; /* keeps shimmer visible */
}
.slot-skel::after{
    content:"";
    position:absolute;
    inset:0;
    transform: translateX(-100%);
    animation: shimmer 1.1s infinite;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,.35), transparent);
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}