/* Modern Group Management Styles */
.group-management-container {
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.group-management-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.header-title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.group-management-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.header-search-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-search {
    position: relative;
    width: 300px;
}

.header-search .search-input {
    width: 100%;
    padding: 8px 12px 8px 35px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    box-sizing: border-box;
}

.header-search .search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.8);
    background: white;
}

.header-search .search-input::placeholder {
    color: #666;
}

.header-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 12px;
}

.search-help-icon {
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.search-help-icon:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-primary-action {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.btn-warning-action {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #212529;
}

.btn-danger-action {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-info-action {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.btn-secondary-action {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.badge-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

/* Search Section */
.search-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.search-container {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 2px solid rgba(226, 232, 240, 0.6);
    border-radius: 25px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background: white;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
}

/* Table Styles */
.table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.table-responsive {
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    position: relative;
    flex: 1;
}

/* Scroll indicator for mobile */
.table-responsive::after {
    content: "← Scroll to see more →";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #6c757d;
    opacity: 0.7;
    display: none;
}

@media (max-width: 768px) {
    .header-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .header-search {
        width: 100%;
    }
    
    .table-responsive::after {
        display: block;
    }
}

.table {
    margin-bottom: 0;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
}

.table thead th {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: 1px solid #dee2e6;
    padding: 15px 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #dee2e6;
}

.table tbody tr:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.table tbody tr.hidden {
    display: none;
}

.table tbody td {
    padding: 15px 12px;
    vertical-align: middle;
    border: 1px solid #dee2e6;
}

/* Column width controls */
.table th:nth-child(1),
.table td:nth-child(1) {
    width: 18%;
}

.table th:nth-child(2),
.table td:nth-child(2) {
    width: 10%;
}

.table th:nth-child(3),
.table td:nth-child(3) {
    width: 15%;
}

.table th:nth-child(4),
.table td:nth-child(4) {
    width: 12%;
}

.table th:nth-child(5),
.table td:nth-child(5) {
    width: 12%;
}

.table th:nth-child(6),
.table td:nth-child(6) {
    width: 33%;
}

.group-name {
    font-size: 16px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 4px 0;
}

.sim-count {
    font-size: 12px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quota-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quota-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.plan-badge {
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 11px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.bundle-badge {
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bundle-badge.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%) !important;
    color: #212529 !important;
}

.bundle-badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: white !important;
}

.bundle-badge.bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: white !important;
}

.no-quotas {
    color: #6c757d;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.action-btn-small {
    padding: 5px 8px;
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.action-btn-small i {
    font-size: 10px;
}

.btn-view-small {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.btn-edit-small {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    color: white;
}

.btn-delete-small {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
}

.btn-collapse-small {
    background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
    color: white;
}

.btn-quota-small {
    background: linear-gradient(135deg, #343a40 0%, #23272b 100%);
    color: white;
}

.btn-bulk-small {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.btn-refresh-small {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
}

.btn-refresh-lines-small {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
    color: white;
}

.btn-autoload-small {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.btn-autoload-on {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}

.btn-autoload-off {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
}

.action-btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Status Toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%);
    transition: 0.4s;
    border-radius: 24px;
}

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

input:checked + .toggle-slider {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

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

/* Inactive toggle - red color */
.toggle-slider {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

/* No Results State */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    display: none;
}

.no-results.show {
    display: block;
}

.no-results-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-results h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #2d3748;
}

.no-results p {
    font-size: 14px;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .group-management-header {
        padding: 15px;
    }

    .group-management-header h3 {
        font-size: 20px;
    }

    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 600px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }

    .action-btn-small {
        width: 100%;
        justify-content: center;
        border-radius: 6px;
        margin-bottom: 2px;
    }

    .search-container {
        max-width: 100%;
    }

    /* Mobile table improvements */
    .table th,
    .table td {
        padding: 8px 6px;
        font-size: 12px;
    }

    .group-name {
        font-size: 14px;
    }

    .sim-count {
        font-size: 10px;
    }
}

/* Bootbox styling */
.bootbox .modal-body {
    color: #212529 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.bootbox .modal-body p {
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: #212529;
}

.bootbox .modal-body strong {
    font-weight: 700;
    color: #111;
}

.bootbox .modal-title {
    font-weight: 700;
    color: #111;
}

.bootbox .modal-footer .btn {
    font-weight: 600;
    font-size: 14px;
}

.bootbox .refresh-lines-confirm p:last-child {
    margin-bottom: 0;
}

.bootbox .form-control,
.bootbox option {
    color: #000 !important;
    background-color: #fff !important;
}

.bootbox.modal {
    z-index: 2080 !important;
}

.modal-backdrop.bootbox-backdrop {
    z-index: 2070 !important;
}

/* Dropdown menu fixes */
#mtnGroupManagement .mtn-share-more-options .dropdown-menu {
    min-width: min(200px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
}

#mtnGroupManagement .mtn-share-more-options .dropdown-item {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dropdown-menu {
    position: absolute !important;
    z-index: 1050 !important;
    min-width: 200px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.dropdown-item {
    padding: 8px 16px !important;
    transition: all 0.3s ease;
    border-radius: 6px;
    margin: 2px 8px;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    transform: translateX(4px);
}

/* Quota Modal Styles */
.remaining-quota {
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.remaining-quota h4 {
    color: #6c757d;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.remaining-quota h2 {
    color: var(--primary);
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.quota-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.quota-item:hover {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quota-counter {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
}

.btn-counter {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-counter:hover {
    background: var(--secondary);
    transform: scale(1.05);
}

.quota-display {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    min-width: 40px;
    text-align: center;
}

.allocation-summary {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.allocation-summary h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 10px;
}

.allocation-summary .row {
    margin: 0;
}

.allocation-summary .col-6 {
    padding: 0 8px;
}

.allocation-summary small {
    color: #6c757d;
    font-size: 12px;
}

.allocation-summary strong {
    color: var(--primary);
    font-weight: 700;
}
/* How It Works Component */
.fw-how-it-works { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.fw-hiw-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-weight: 600; font-size: 0.95em; color: #334155; text-decoration: none !important; cursor: pointer; transition: background 0.2s; }
.fw-hiw-toggle:hover { background: #f8fafc; color: #334155; }
.fw-hiw-toggle[aria-expanded="true"] .fw-hiw-arrow { transform: rotate(180deg); }
.fw-hiw-arrow { font-size: 0.75em; transition: transform 0.3s ease; color: #94a3b8; }
.fw-hiw-body { padding: 0 20px 20px; }
.fw-hiw-steps { display: flex; flex-direction: column; gap: 16px; }
.fw-hiw-step { display: flex; align-items: flex-start; gap: 14px; }
.fw-hiw-step-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.fw-hiw-step strong { display: block; font-size: 0.9em; color: #1e293b; margin-bottom: 2px; }
.fw-hiw-step p { margin: 0; font-size: 0.82em; color: #64748b; line-height: 1.5; }

/* Reuse tenant brand and the platform light/dark surface tokens. */
.group-management-container,.group-view-switch,.group-config-hub,.group-config-editor,.mtn-group-improved .fw-how-it-works {
 --group-primary:var(--primary,var(--bs-primary,#4680ff));
 --group-link:color-mix(in srgb, var(--group-primary) 60%, var(--group-text));
 --group-on-primary:var(--white,#fff);
 --group-surface:var(--bs-body-bg,#fff);
 --group-soft:var(--bs-tertiary-bg,#f3f5f7);
 --group-text:var(--bs-body-color,#212529);
 --group-muted:var(--bs-secondary-color,#5b6b79);
 --group-border:var(--bs-border-color,#e7eaee);
 --group-danger:var(--danger,var(--bs-danger,#dc3545));
 --group-warning:var(--warning,var(--bs-warning,#ffc107));
 --group-shadow:rgba(0,0,0,.16);
}
/* Improved view: scoped so the Original layout remains available. */
.group-view-switch {display:flex; justify-content:flex-end; margin:8px 0 16px; gap:0}
.group-view-switch[hidden] {display:none}
.group-view-switch button {border:1px solid var(--group-primary); background:var(--group-surface); color:var(--group-primary); padding:8px 16px; min-height:40px; font-family:inherit; font-size:13px; font-weight:600; line-height:1.4}
.group-view-switch button:first-child {border-radius:8px 0 0 8px}
.group-view-switch button:last-child {border-radius:0 8px 8px 0}
.group-view-switch button[aria-pressed=true] {background:var(--group-primary); color:var(--group-on-primary)}
.group-view-switch button:focus-visible,.group-ux-button:focus-visible,.group-ux-menu summary:focus-visible,.group-autoload-info summary:focus-visible {outline:3px solid var(--group-primary); outline-offset:3px}
.group-view-improved.group-management-container {container-type:inline-size; height:auto; min-height:0; overflow:visible; background:transparent; padding:0 0 40px; color:var(--group-text); gap:16px}
.group-view-improved .group-management-header {background:var(--group-surface); color:var(--group-text); box-shadow:none; border:1px solid var(--group-border); padding:20px; margin:0; border-radius:12px}
.group-view-improved .group-management-header h3 {font-family:inherit; font-size:21px; letter-spacing:-.4px}
.group-view-improved .header-title-section {flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.group-view-improved .header-search-container {flex:0 1 300px; min-width:0}
.group-view-improved .header-search {width:100%}
.group-view-improved .header-search .search-input {border:1px solid var(--group-border); border-radius:8px; color:var(--group-text); background:var(--group-soft); min-height:44px; font-size:14px}
.group-view-improved .header-search .search-input:focus {border-color:var(--group-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--group-primary) 15%, transparent)}
.group-view-improved .header-actions {margin:0; gap:0}
.group-ux-primary,.group-ux-row-actions {display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.group-ux-health {border-top:1px solid var(--group-border); margin-top:16px; padding-top:12px; display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.group-ux-health h4 {font-family:inherit; font-size:12px; font-weight:600; line-height:1.5; margin:0 8px 0 0; color:var(--group-muted)}
.group-view-improved .action-btn,.group-ux-primary>.btn-group>.btn {box-shadow:none; font-size:13px; border-radius:8px; padding:10px 12px; min-height:44px; width:auto; transform:none}
.group-ux-health .action-btn {min-height:36px; background:var(--group-soft); color:var(--group-muted); border:1px solid var(--group-border); padding:6px 10px; font-size:12px; gap:6px}
.group-ux-health .btn-danger-action {background:color-mix(in srgb, var(--group-danger) 9%, var(--group-surface)); color:var(--bs-danger-text-emphasis,var(--group-danger)); border-color:var(--group-border)}
.group-ux-health .btn-warning-action {background:color-mix(in srgb, var(--group-warning) 12%, var(--group-surface)); color:var(--group-text); border-color:var(--group-border)}
.group-ux-health .badge-count {background:transparent; color:inherit; padding:0; min-width:0; font-weight:700}
.group-ux-button,.group-ux-menu>summary {border:1px solid var(--group-border); background:var(--group-surface); color:var(--group-text); padding:10px 12px; min-height:44px; border-radius:8px; font-family:inherit; font-size:13px; font-weight:600; line-height:1.5; cursor:pointer; white-space:nowrap}
.group-ux-menu {position:relative; min-width:0}
.group-ux-menu[hidden] {display:none}
.group-ux-menu>summary {list-style:none}
.group-ux-menu>summary::-webkit-details-marker {display:none}
.group-ux-menu>summary::after {content:'⌄'; margin-left:10px; color:var(--group-muted)}
.group-ux-menu[open]>summary {background:var(--group-soft); border-color:var(--group-primary)}
.group-ux-menu-panel {position:absolute; z-index:20; top:calc(100% + 6px); right:0; width:260px; max-width:calc(100vw - 48px); background:var(--group-surface); border:1px solid var(--group-border); border-radius:10px; padding:6px; box-shadow:0 12px 32px var(--group-shadow); max-height:60vh; overflow:auto}
.group-ux-primary .group-ux-menu-panel {right:auto; left:0}
.group-view-improved .group-ux-menu-panel>button,.group-view-improved .group-ux-menu-panel>a {display:block!important; margin:0!important; width:100%; min-height:44px; text-align:left; white-space:normal; background:transparent; color:var(--group-text); border:0; box-shadow:none; padding:10px; border-radius:6px; font-size:13px}
.group-view-improved .group-ux-menu-panel>button:hover,.group-view-improved .group-ux-menu-panel>a:hover {background:var(--group-soft); transform:none}
.group-view-improved .group-ux-menu-panel>.btn-delete-small {color:var(--group-danger)}
.group-view-improved .group-ux-menu-panel>button:disabled {opacity:.45; cursor:not-allowed}
.group-view-improved .group-ux-menu-panel>.group-config-launcher {display:none!important}
.group-view-improved .table-container,.group-view-improved .table-responsive {overflow:visible; max-height:none; height:auto; flex:none; border:0; background:transparent; box-shadow:none; padding:0}
.group-view-improved #groupsTable {width:100%; min-width:0; table-layout:auto; border-collapse:separate; border-spacing:0; margin:0; background:var(--group-surface); border:1px solid var(--group-border); border-radius:12px}
.group-view-improved #groupsTable th {background:var(--group-soft); color:var(--group-muted); font-size:11px; letter-spacing:.5px; padding:12px; border:0; white-space:normal}
.group-view-improved #groupsTable td {padding:16px 12px; white-space:normal; height:auto; vertical-align:top; background:transparent; border:0; border-top:1px solid var(--group-border)}
.group-view-improved .group-name {font-size:15px; font-weight:650; white-space:normal; overflow-wrap:anywhere; max-width:none; color:var(--group-text); margin:0 0 4px}
.group-view-improved .group-name+.small {display:none}
.group-view-improved .sim-count {margin:0; font-size:12px; color:var(--group-muted)}
.group-view-improved .plan-badge,.group-view-improved .quota-badge,.group-view-improved .bundle-badge {background:var(--group-soft)!important; color:var(--group-muted)!important; box-shadow:none; white-space:normal; border-radius:5px; font-size:11px; padding:4px 7px; margin:0; border:0; line-height:1.5; letter-spacing:0}
.group-view-improved .quota-badges {gap:4px}
.group-view-improved .no-quotas {color:var(--group-muted); font-size:12px; font-style:normal}
.group-quota-period {display:block; margin-top:6px; font-size:11px; color:var(--group-muted)}
.group-view-improved .status-toggle {display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.group-status-label {font-size:12px; color:var(--group-muted)}
.status-toggle:has(input:checked) .group-status-off,.status-toggle:has(input:not(:checked)) .group-status-on {display:none}
.group-autoload-summary {margin-top:8px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}
.group-autoload-summary strong {font-size:11px; line-height:1.5; font-weight:500; color:var(--group-muted)}
.group-autoload-info {font-size:11px; color:var(--group-muted)}
.group-autoload-info summary {cursor:pointer; color:var(--group-primary)}
.group-autoload-info[open] {flex-basis:100%}
.group-autoload-info small {display:block; background:var(--group-soft); padding:8px; border-radius:6px; margin-top:6px; font-size:12px; line-height:1.6}
.group-view-improved .group-ux-row-actions .btn-view-small {width:auto; min-height:44px; padding:10px 12px; background:var(--group-primary); color:var(--group-on-primary); box-shadow:none; border:1px solid var(--group-primary); border-radius:8px; font-size:13px; transform:none; margin:0}
.group-view-improved .action-buttons:empty {display:none}
.group-config-nav {display:flex; flex-wrap:wrap; gap:8px; padding:16px; border-bottom:1px solid var(--group-border)}
.group-config-nav [aria-current=page] {background:var(--group-primary); color:var(--group-on-primary); opacity:1}
.group-config-summary {padding:16px; border-bottom:1px solid var(--group-border)}
.group-config-summary h6 {font-family:inherit; font-size:16px; font-weight:600; line-height:1.5}
.group-period-choice,.group-sharing-summary {display:none}
.mtn-group-improved .group-period-choice,.mtn-group-improved .group-sharing-summary {display:block}
.mtn-group-improved .modal .d-flex.align-items-center.gap-3.group-period-original {display:none!important}
body:not(.mtn-group-improved) .group-sharing-detail>summary {display:none}
body:not(.mtn-group-improved) .group-sharing-detail>p {display:block}

/* Use available content width, including when the application sidebar is open. */
@container (max-width:960px) {
 .group-view-improved #groupsTable thead {display:none}
 .group-view-improved #groupsTable,.group-view-improved #groupsTable tbody {display:block; background:transparent; border:0}
 .group-view-improved #groupsTable tr {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 12px; border:1px solid var(--group-border); border-radius:12px; background:var(--group-surface); overflow:visible}
 .group-view-improved #groupsTable td {display:block; border:0; min-width:0; width:auto; padding:10px 16px}
 .group-view-improved #groupsTable td[data-column="group-name"] {grid-column:1/-1; padding-top:16px}
 .group-view-improved #groupsTable td:last-child {grid-column:1/-1; padding:12px 16px; border-top:1px solid var(--group-border); margin-top:4px}
 .group-view-improved #groupsTable td:not([data-column="group-name"]):not(:last-child)::before {content:attr(data-label); display:block; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--group-muted); margin-bottom:6px}
 .group-view-improved .group-autoload-summary {margin-top:6px}
}
@container (max-width:560px) {
 .group-view-improved .group-management-header {padding:16px}
 .group-view-improved .header-title-section {gap:12px}
 .group-view-improved .header-search-container {flex-basis:100%; width:100%}
 .group-view-improved .group-management-header h3 {font-size:19px}
 .group-ux-primary {gap:6px}
 .group-ux-primary>* {flex:1 1 calc(50% - 6px)}
 .group-ux-primary>*,.group-ux-primary .group-ux-menu>summary {text-align:center; justify-content:center}
 .group-ux-primary .group-ux-menu-panel {left:auto; right:0}
 .group-ux-health h4 {width:100%; margin-bottom:2px}
 .group-view-improved #groupsTable tr {grid-template-columns:repeat(2,minmax(0,1fr))}
 .group-view-improved #groupsTable td {padding:8px 14px}
 .group-view-improved #groupsTable td[data-column="quotas"] {grid-column:auto}
 .group-view-improved #groupsTable td[data-column="group-name"] {padding:14px 14px 8px}
 .group-view-improved #groupsTable td:last-child {padding:12px 14px}
 .group-ux-row-actions {display:grid; grid-template-columns:1fr 1fr auto; gap:6px}
 .group-ux-row-actions>button {width:100%; font-size:12px!important; padding:10px 8px!important}
 .group-ux-row-actions .group-ux-menu>summary {font-size:12px; padding:10px 8px}
 .group-view-improved .group-name {font-size:16px}
}
@media(max-width:540px) {
 .group-view-switch {justify-content:flex-end; margin:8px 0 12px}
 .group-view-switch button {padding:8px 14px}
 .group-config-nav {gap:6px; padding:12px}
 .group-config-nav .group-ux-button {flex:1 1 auto; padding:8px}
 .group-config-summary {padding:12px}
}

.group-view-improved .table-responsive::after {display:none}

/* Bundle period is metadata; status leads the desktop table. */
.group-view-improved #groupsTable [data-column="bundle-group"] {display:none}
.group-card-title {display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin-bottom:4px}
.group-card-title .group-name {margin:0}
.group-card-title .bundle-badge {font-size:10px; font-weight:500; text-transform:none}
.group-view-improved .group-card-title+.small {display:none}
.group-card-reveal {display:none}
.group-view-improved #groupsTable [data-column="status"] {width:64px}
.group-view-improved #groupsTable [data-column="group-name"] {width:28%}
.group-view-improved #groupsTable [data-column="quotas"] {width:20%}
.group-view-improved #groupsTable [data-column="plan"] {width:auto}
.group-view-improved #groupsTable [data-column="actions"] {width:auto}
.group-view-improved .group-status-label {display:none}
@container (min-width:1200px) {
 .group-view-improved .group-status-label {display:inline}
 .group-view-improved #groupsTable [data-column="status"] {width:110px}
}
@container (max-width:960px) {
 .group-view-improved #groupsTable tr {position:relative; grid-template-columns:repeat(2,minmax(0,1fr))}
 .group-view-improved #groupsTable td[data-column] {width:auto}
 .group-view-improved #groupsTable td[data-column="status"] {position:absolute; right:14px; top:14px; padding:0; border:0}
 .group-view-improved #groupsTable td[data-column="status"]::before {display:none!important}
 .group-view-improved #groupsTable td[data-column="group-name"] {grid-column:1/-1; padding-right:76px}
 .group-view-improved .status-toggle {min-height:32px}
 .group-view-improved .status-toggle .toggle-switch {margin:0}
}
@container (max-width:560px) {
 .group-card-reveal {display:inline-flex; align-items:center; min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--group-primary); font-size:12px}
 .group-view-improved #groupsTable tr:not(.group-card-expanded) td[data-column="quotas"],
 .group-view-improved #groupsTable tr:not(.group-card-expanded) td[data-column="plan"],
 .group-view-improved #groupsTable tr:not(.group-card-expanded) .group-autoload-summary {display:none}
 .group-view-improved #groupsTable td[data-column="group-name"] {padding-bottom:0}
 .group-view-improved #groupsTable td:last-child {margin-top:0}
}

/* Dialogs share the page typography and theme, including Bootbox autoload. */
.mtn-group-improved .group-config-hub,.mtn-group-improved .group-config-editor {font-family:inherit; color:var(--group-text)}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) .modal-content {background:var(--group-surface); color:var(--group-text); border-color:var(--group-border)}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) .modal-header {background:var(--group-surface)!important; color:var(--group-text)!important; border-color:var(--group-border)}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) :is(h2,h4,h5,h6) {font-family:inherit!important; color:inherit; letter-spacing:normal}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) .modal-title {font-size:18px; font-weight:600}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) .text-muted {color:var(--group-muted)!important}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) :is(.form-control,.form-select) {background-color:var(--group-surface); color:var(--group-text)!important; border-color:var(--group-border); font-family:inherit}
.mtn-group-improved :is(.group-config-hub,.group-config-editor) .btn-close {filter:none}
.mtn-group-improved .group-config-hub .modal-body {padding:0}
.mtn-group-improved .group-config-hub .group-config-nav {position:sticky; top:0; z-index:1; background:var(--group-surface)}
.mtn-group-improved .group-config-summary:last-child {border-bottom:0}
.mtn-group-improved .group-config-summary p {line-height:1.6; margin-bottom:12px}
.mtn-group-improved .group-config-editor .quota-card,.mtn-group-improved .group-config-editor .allocation-summary {background:var(--group-soft); color:var(--group-text); border-color:var(--group-border)}
.group-view-improved .group-ux-primary>[data-bs-target="#addGroupModal"] {background:var(--group-primary); color:var(--group-on-primary)}
.group-view-improved .group-ux-primary>a {background:var(--group-soft); color:var(--group-text); border:1px solid var(--group-border)}
@container (min-width:561px) { .group-view-improved .group-ux-primary>* {flex:0 0 auto} }
/* The platform bottom bar otherwise covers the last dialog controls on phones. */
body.mtn-group-improved.modal-open #mobileBottomNav {visibility:hidden}
@media(max-width:575px) {
 .mtn-group-improved :is(.group-config-hub,.group-config-editor) .modal-dialog {margin:12px; max-width:calc(100% - 24px)}
 .mtn-group-improved .group-config-hub .modal-dialog {height:calc(100dvh - 24px)}
}

.group-view-switch button:not([aria-pressed=true]),.group-autoload-info summary,.group-card-reveal {color:var(--group-link)}
.group-view-improved .search-input::placeholder {color:var(--group-muted); opacity:1}
.group-view-improved .search-icon {color:var(--group-muted)}
.group-view-improved .group-ux-primary>.btn-group>.btn,.group-view-improved .group-ux-primary>button:not([data-bs-target]) {background:var(--group-soft); color:var(--group-text); border:1px solid var(--group-border)}
.mtn-group-improved .fw-how-it-works {background:var(--group-surface); border-color:var(--group-border)}
.mtn-group-improved .fw-hiw-toggle,.mtn-group-improved .fw-hiw-step strong {color:var(--group-text)}
.mtn-group-improved .fw-hiw-step p {color:var(--group-muted)}
[data-bs-theme="dark"] .mtn-group-improved :is(.group-config-hub,.group-config-editor) .btn-close,
body.mtn-group-improved[data-pc-theme="dark"] :is(.group-config-hub,.group-config-editor) .btn-close {filter:invert(1) grayscale(100%) brightness(200%)}

/* One compact toolbar; expanded help retains the full content width. */
.group-page-toolbar {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:12px}
.group-page-toolbar>.fw-how-it-works {display:contents}
.group-page-toolbar .fw-hiw-toggle {grid-column:1; grid-row:1; padding:8px; gap:8px; min-height:44px; font-size:12px; border-radius:8px; justify-content:flex-start}
.group-page-toolbar .group-view-switch {grid-column:2; grid-row:1; margin:0}
.group-page-toolbar .group-view-switch button {min-height:44px; padding:8px 12px}
.group-page-toolbar #hiwShareGroup {grid-column:1/-1; grid-row:2; border:1px solid var(--bs-border-color,#e7eaee); border-radius:8px; background:var(--bs-body-bg,#fff)}
.group-page-toolbar .fw-hiw-body {padding:16px}
.group-view-improved .group-card-title .bundle-badge {background:var(--group-soft)!important; background-image:none!important; color:var(--group-muted)!important; border:1px solid var(--group-border); box-shadow:none}

/* Make individual cards distinct from the surrounding page. */
.group-view-improved {--group-card-surface:#fff; --group-card-border:color-mix(in srgb, var(--group-border) 72%, var(--group-text)); --group-card-shadow:0 3px 10px rgba(0,0,0,.08)}
[data-bs-theme="dark"] .group-view-improved,body[data-pc-theme="dark"] .group-view-improved {--group-card-surface:var(--bs-secondary-bg,#343a40); --group-card-shadow:0 3px 12px rgba(0,0,0,.24)}
@container (max-width:960px) {
 .group-view-improved #groupsTable tbody tr {margin-bottom:18px; border:1px solid var(--group-card-border); background:var(--group-card-surface); box-shadow:var(--group-card-shadow)}
 .group-view-improved #groupsTable td[data-column="actions"] {background:color-mix(in srgb, var(--group-primary) 5%, var(--group-card-surface)); border-top:1px solid var(--group-card-border); border-radius:0 0 11px 11px}
}

.group-health-toggle {display:none}
@container (max-width:560px) {
 .group-health-toggle {display:block; width:100%; margin-top:12px; text-align:left; color:var(--group-link); background:var(--group-soft)}
 .group-view-improved .group-ux-health:not(.group-health-expanded) {display:none}
 .group-view-improved .group-ux-health {margin-top:8px; padding-top:8px; border-top:0}
 .group-view-improved .group-ux-health h4 {display:none}
}

/* Wide screens retain table alignment, with a separate outline per group. */
@container (min-width:961px) {
 .group-view-improved #groupsTable {border:0; border-radius:0; background:transparent; border-spacing:0 12px}
 .group-view-improved #groupsTable th {background:transparent; padding-top:0; padding-bottom:4px}
 .group-view-improved #groupsTable tbody tr {box-shadow:var(--group-card-shadow); border-radius:12px}
 .group-view-improved #groupsTable tbody td {background:var(--group-card-surface); border-top:1px solid var(--group-card-border); border-bottom:1px solid var(--group-card-border); vertical-align:middle}
 .group-view-improved #groupsTable tbody td:first-child {border-left:1px solid var(--group-card-border); border-radius:12px 0 0 12px}
 .group-view-improved #groupsTable tbody td:last-child {border-right:1px solid var(--group-card-border); border-left:1px solid var(--group-border); border-radius:0 12px 12px 0; background:color-mix(in srgb, var(--group-primary) 5%, var(--group-card-surface))}
}

/* Keep open menus above neighbouring rows without clipping their actions. */
.group-view-improved #groupsTable tbody tr {transform:none; transition:background-color .15s ease}
.group-view-improved #groupsTable tbody tr:has(.group-ux-menu[open]) {position:relative; z-index:30}
.group-view-improved .group-management-header:has(.group-ux-menu[open]) {position:relative; z-index:31}
.group-ux-menu-panel {overscroll-behavior:contain; box-sizing:border-box}

/* Feedback without movement or new stacking contexts around the action menus. */
.group-view-improved #groupsTable tbody tr {
 transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.group-view-improved #groupsTable tbody td {
 transition:background-color .16s ease, border-color .16s ease;
}
.group-view-improved :is(button,a,summary) {
 transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.group-view-improved :is(button,a,summary,input):focus-visible {
 outline:3px solid var(--group-primary);
 outline-offset:3px;
}
.group-view-improved #groupsTable tbody tr:has(:focus-visible) {
 --group-card-border:var(--group-primary);
 box-shadow:0 0 0 1px var(--group-primary),0 5px 16px var(--group-shadow);
}
@media (hover:hover) and (pointer:fine) {
 .group-view-improved #groupsTable tbody tr:hover {
  --group-card-border:color-mix(in srgb, var(--group-primary) 65%, var(--group-border));
  box-shadow:0 0 0 1px var(--group-card-border),0 5px 16px var(--group-shadow);
 }
 .group-view-improved :is(.action-btn,.action-btn-small,.group-ux-button,.group-view-switch button,.group-ux-menu>summary):not(:disabled):not([aria-disabled="true"]):hover {
  transform:none;
  box-shadow:inset 0 0 0 100px color-mix(in srgb, var(--group-primary) 12%, transparent);
 }
 .group-view-improved :is(.group-card-reveal,.group-autoload-info summary):hover {
  text-decoration:underline;
  text-underline-offset:3px;
 }
 .group-view-improved .group-ux-menu-panel>:is(button,a):not(:disabled):not([aria-disabled="true"]):hover {
  background:color-mix(in srgb, var(--group-primary) 10%, var(--group-surface));
  box-shadow:none;
 }
}
@media (prefers-reduced-motion:reduce) {
 .group-view-improved #groupsTable tbody :is(tr,td),
 .group-view-improved :is(button,a,summary) {transition:none}
}

/* Keep recovery accessible and destructive controls visually separated. */
.group-view-improved .group-ux-menu-panel>.btn-delete-small {border-top:1px solid var(--group-border); border-radius:0; margin-top:6px!important}