/* Global modern UI utilities (inventory-inspired, reusable on any menu) */
:root {
    --modern-bg: #f4f7ff;
    --modern-surface: #ffffff;
    --modern-border: #d9e3f6;
    --modern-text: #858da6;
    --modern-subtext: #7483a4;
    --modern-accent: #4e73df;
    --modern-accent-strong: #3558c9;
    --modern-accent-light: #6f8ee6;
    --modern-accent-soft: #edf2ff;
    --modern-accent-softer: #f6f8ff;
    --modern-accent-rgb: 78, 115, 223;
    --modern-success-bg: #e9f8ef;
    --modern-success-text: #1d7a44;
    --modern-danger-bg: #fdecef;
    --modern-danger-text: #b3263a;
    --modern-warning-bg: #fff5e7;
    --modern-warning-text: #9c5d06;
    --modern-info-bg: #e8f4ff;
    --modern-info-text: #0f5f98;
    --modern-muted-bg: #f1f4f9;
    --modern-muted-text: #66738c;
}

.modern-shell {
    color: var(--modern-text);
}

/* Reusable glassmorphism utility */
.modern-shell .modern-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(247, 250, 255, 0.48) 100%);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Legacy bootstrap components inside modern-shell:
   keep existing markup but render with modern system style. */
.modern-shell .card:not(.modern-card):not(.kpi-card) {
    background: var(--modern-surface);
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.07);
    overflow: hidden;
}

.modern-shell .card:not(.modern-card):not(.kpi-card) > .card-header:not(.modern-card-header) {
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--modern-accent-softer) 100%);
    border-bottom: 1px solid var(--modern-border);
}

.modern-shell .card:not(.modern-card) > .card-header h6 {
    color: var(--modern-accent-strong);
}

.modern-shell .card:not(.modern-card):not(.kpi-card) > .card-body:not(.modern-card-body) {
    padding: 1rem;
    color: var(--modern-text);
}

.modern-shell .card:not(.modern-card):not(.kpi-card) > .card-footer {
    border-top: 1px solid var(--modern-border);
    background: #ffffff;
}

.modern-shell .table.table-hover:not(.table-modern) {
    margin-bottom: 0;
}

.modern-shell .table.table-hover:not(.table-modern) thead th {
    border-top: none;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--modern-text);
    background: var(--modern-accent-softer);
    border-bottom: 1px solid var(--modern-border);
}

.modern-shell .table.table-hover:not(.table-modern) td {
    vertical-align: top;
    border-top: 1px solid #edf2fb;
    color: var(--modern-text);
    font-size: 0.86rem;
}

.modern-shell .form-control,
.modern-shell .form-select,
.modern-shell select {
    border-radius: 10px;
    border-color: #d6deec;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    color: var(--modern-text);
}

.modern-shell .form-control:focus,
.modern-shell .form-select:focus,
.modern-shell select:focus {
    border-color: var(--modern-accent-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .btn.btn-icon-split {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border-radius: 10px;
    padding: 0.42rem 0.78rem;
    font-weight: 700;
}

.modern-shell .btn.btn-icon-split .text,
.modern-shell .btn.btn-icon-split .icon {
    background: transparent;
    padding: 0;
}

.modern-shell .btn.btn-primary:not(.btn-modern-primary) {
    border: none;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(var(--modern-accent-rgb), 0.24);
}

.modern-shell .btn.btn-primary:not(.btn-modern-primary):hover,
.modern-shell .btn.btn-primary:not(.btn-modern-primary):focus {
    color: #ffffff;
    filter: brightness(0.98);
}

.modern-shell .btn.btn-primary:not(.btn-modern-primary) .text,
.modern-shell .btn.btn-primary:not(.btn-modern-primary) .icon {
    color: #ffffff !important;
}

.modern-shell .btn.btn-secondary:not(.btn-modern-ghost) {
    border: 1px solid var(--modern-border);
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
    border-radius: 10px;
}

.modern-shell .btn.btn-secondary:not(.btn-modern-ghost):hover,
.modern-shell .btn.btn-secondary:not(.btn-modern-ghost):focus {
    color: var(--modern-accent-strong);
    background: #eef3ff;
}

.modern-shell .btn.btn-outline-secondary {
    border: 1px solid var(--modern-border);
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
    border-radius: 10px;
}

.modern-shell .btn.btn-outline-secondary:hover,
.modern-shell .btn.btn-outline-secondary:focus {
    color: var(--modern-accent-strong);
    background: #eef3ff;
    border-color: #c8d6f3;
}

.modern-shell .btn.btn-outline-primary {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.34);
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
    border-radius: 10px;
}

.modern-shell .btn.btn-outline-primary:hover,
.modern-shell .btn.btn-outline-primary:focus {
    color: var(--modern-accent-strong);
    background: rgba(var(--modern-accent-rgb), 0.16);
    border-color: rgba(var(--modern-accent-rgb), 0.45);
}

.modern-shell .btn.btn-outline-primary.active,
.modern-shell .btn.btn-outline-primary:active,
.modern-shell .btn-check:checked + .btn.btn-outline-primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(var(--modern-accent-rgb), 0.22);
}

.modern-shell .btn.btn-outline-danger {
    border: 1px solid rgba(220, 53, 69, 0.34);
    background: rgba(220, 53, 69, 0.1);
    color: #b42331;
    border-radius: 10px;
}

.modern-shell .btn.btn-outline-danger:hover,
.modern-shell .btn.btn-outline-danger:focus {
    background: rgba(220, 53, 69, 0.16);
    border-color: rgba(220, 53, 69, 0.48);
    color: #9d1f2b;
}

.modern-shell .btn.btn-light {
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--modern-text);
}

.modern-shell .btn.btn-warning,
.modern-shell .btn.btn-danger,
.modern-shell .btn.btn-info,
.modern-shell .btn.btn-success {
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.12);
}

.modern-shell .modal-content:not(.modern-form) {
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    overflow: hidden;
}

.modern-shell .modal-header:not(.modern-card-header) {
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modern-shell .modal-header .close {
    color: #ffffff;
    text-shadow: none;
    opacity: 0.92;
}

.modern-shell .modal-header .close:hover {
    color: #ffffff;
    opacity: 1;
}

.modern-shell .dt-buttons .btn:not(.btn-inv-export) {
    border-radius: 10px !important;
    box-shadow: 0 7px 16px rgba(15, 28, 64, 0.1);
    font-weight: 700;
}

.modern-card {
    background: var(--modern-surface);
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.07);
    overflow: hidden;
}

.modern-card-header {
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--modern-accent-softer) 100%);
    border-bottom: 1px solid var(--modern-border);
}

.modern-form-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.88rem;
    padding-bottom: 0.88rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(var(--modern-accent-rgb), 0.08) 100%);
}

.modern-form-header::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--modern-accent-rgb), 0.26), rgba(var(--modern-accent-rgb), 0));
    pointer-events: none;
}

.modern-form-header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    margin: 0;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--modern-accent-strong);
}

.modern-form-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--modern-accent-rgb), 0.12);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.26);
    color: var(--modern-accent-strong);
    flex-shrink: 0;
}

.modern-form-header-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.3);
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 0.32rem 0.58rem;
}

.modern-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--modern-text);
}

.modern-form-header .modern-form-header-title,
.modern-form-header .modern-card-title.modern-form-header-title {
    color: var(--modern-accent-strong);
}

.modern-card-subtitle {
    margin: 0.2rem 0 0;
    color: var(--modern-subtext);
    font-size: 0.82rem;
    font-weight: 500;
}

.modern-card-body {
    padding: 1rem;
}

.modern-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.modern-toolbar .left,
.modern-toolbar .right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.modern-shell .modern-card-tabs {
    border-bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.modern-shell .modern-card-tabs .nav-item {
    width: 100%;
    margin-bottom: 0;
}

.modern-shell .modern-card-tab-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 92px;
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, var(--modern-accent-softer) 100%);
    color: var(--modern-text);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transition: all 0.2s ease;
    text-decoration: none;
}

.modern-shell .modern-card-tab-link:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
    color: var(--modern-text);
    text-decoration: none;
}

.modern-shell .modern-card-tab-link.active,
.modern-shell .modern-card-tab-link.is-active {
    border-color: var(--modern-accent);
    background: linear-gradient(135deg, var(--modern-accent), var(--modern-accent-strong));
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(var(--modern-accent-rgb), 0.3);
}

.modern-shell .modern-card-tab-link.active .modern-card-tab-subtitle,
.modern-shell .modern-card-tab-link.is-active .modern-card-tab-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.modern-shell .modern-card-tab-title {
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modern-shell .modern-card-tab-subtitle {
    font-size: 0.76rem;
    color: var(--modern-subtext);
    line-height: 1.3;
    padding-right: 48px;
}

.modern-shell .modern-card-tab-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 32px;
    text-align: center;
    border-radius: 999px;
    font-weight: 700;
    padding: 0.35rem 0.55rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.modern-shell .modern-card-tab-link.active .modern-card-tab-badge,
.modern-shell .modern-card-tab-link.is-active .modern-card-tab-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-color: transparent;
}

.btn-modern-primary {
    border: none;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #fff;
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-weight: 700;
    font-size: 0.84rem;
    box-shadow: 0 6px 14px rgba(var(--modern-accent-rgb), 0.24);
}

.btn-modern-primary:hover,
.btn-modern-primary:focus {
    color: #fff;
    filter: brightness(0.98);
}

.btn-modern-ghost {
    border: 1px solid var(--modern-border);
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
    border-radius: 10px;
    padding: 0.42rem 0.75rem;
    font-weight: 700;
    font-size: 0.82rem;
}

.btn-modern-ghost:hover,
.btn-modern-ghost:focus {
    color: var(--modern-accent-strong);
    background: #eef3ff;
}

.btn-modern-primary,
.btn-modern-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    line-height: 1.2;
    transition: all 0.16s ease;
}

.btn-modern-sm {
    min-height: 32px;
    padding: 0.34rem 0.68rem !important;
    font-size: 0.76rem !important;
    border-radius: 10px !important;
}

.btn-modern-icon {
    width: 32px;
    min-width: 32px;
    padding: 0 !important;
}

.btn-modern-icon.dropdown-toggle {
    width: auto;
    min-width: 38px;
    padding-left: 0.56rem !important;
    padding-right: 0.56rem !important;
}

/* Reusable table action buttons for modern UI pages */
.btn-modern-action {
    --action-glow: var(--modern-accent-rgb);
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--action-glow), 0.26);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.08) 100%);
    color: var(--modern-accent-light);
    box-shadow: 0 4px 10px rgba(var(--action-glow), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.btn-modern-action:hover,
.btn-modern-action:focus {
    text-decoration: none;
    transform: translateY(-0.5px);
    border-color: rgba(var(--action-glow), 0.38);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.13) 100%);
    box-shadow: 0 8px 16px rgba(var(--action-glow), 0.2), 0 2px 8px rgba(15, 23, 42, 0.06);
    color: var(--modern-accent-light);
}

.btn-modern-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(var(--action-glow), 0.28);
}

.btn-modern-action-edit {
    --action-glow: 245, 158, 11;
    border-color: rgba(var(--action-glow), 0.3);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.1) 100%);
    color: #d09a19;
}

.btn-modern-action-edit:hover,
.btn-modern-action-edit:focus {
    border-color: rgba(var(--action-glow), 0.42);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.15) 100%);
    color: #c08a06;
}

.btn-modern-action-delete {
    --action-glow: 231, 74, 59;
    border-color: rgba(var(--action-glow), 0.3);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.1) 100%);
    color: #df6571;
}

.btn-modern-action-delete:hover,
.btn-modern-action-delete:focus {
    border-color: rgba(var(--action-glow), 0.42);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.15) 100%);
    color: #cf5561;
}

.btn-modern-action-view {
    --action-glow: var(--modern-accent-rgb);
    border-color: rgba(var(--action-glow), 0.36);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.1) 100%);
    color: var(--modern-accent-light);
    box-shadow: 0 6px 14px rgba(var(--action-glow), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.btn-modern-action-view:hover,
.btn-modern-action-view:focus {
    border-color: rgba(var(--action-glow), 0.46);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.16) 100%);
    color: var(--modern-accent-light);
    box-shadow: 0 10px 18px rgba(var(--action-glow), 0.22), 0 3px 10px rgba(15, 23, 42, 0.07);
}

/* Legacy ticketing management pages (survey, activation, maintenance, dismantle, outage) */
.modern-shell .ticketing-legacy-status .card {
    --legacy-rgb: 124, 147, 195;
    --legacy-ink: #5f6f91;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--modern-border) !important;
    border-left: 1px solid var(--modern-border) !important;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.modern-shell .ticketing-legacy-status .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(var(--legacy-rgb), 0.92);
}

.modern-shell .ticketing-legacy-status .card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--legacy-rgb), 0.42) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(var(--legacy-rgb), 0.1) 100%);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14), 0 6px 16px rgba(var(--legacy-rgb), 0.16);
}

.modern-shell .ticketing-legacy-status .card .card-body {
    padding: 0.9rem 1rem;
}

.modern-shell .ticketing-legacy-status .card .text-xs.font-weight-bold {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--legacy-ink) !important;
}

.modern-shell .ticketing-legacy-status .card .h5.mb-0.font-weight-bold.text-gray-800 {
    font-size: clamp(1.16rem, 1.45vw, 1.34rem);
    line-height: 1.06;
    color: #435271 !important;
}

.modern-shell .ticketing-legacy-status .card .col-auto i.fa-2x {
    color: rgba(var(--legacy-rgb), 0.44) !important;
    font-size: 1.6rem;
}

.modern-shell .ticketing-legacy-status .card.border-left-secondary {
    --legacy-rgb: 133, 135, 150;
    --legacy-ink: #5f6776;
}

.modern-shell .ticketing-legacy-status .card.border-left-warning {
    --legacy-rgb: 246, 194, 62;
    --legacy-ink: #8d6a00;
}

.modern-shell .ticketing-legacy-status .card.border-left-info {
    --legacy-rgb: 54, 185, 204;
    --legacy-ink: #0f7a8b;
}

.modern-shell .ticketing-legacy-status .card.border-left-success {
    --legacy-rgb: 28, 200, 138;
    --legacy-ink: #157b59;
}

.modern-shell .ticketing-legacy-status .card.border-left-danger {
    --legacy-rgb: 231, 74, 59;
    --legacy-ink: #b42331;
}

.modern-shell .ticketing-legacy-status .card[style*="rgb(255, 127, 7)"] {
    --legacy-rgb: 255, 127, 7;
    --legacy-ink: #a45300;
}

.modern-shell .ticketing-management-modern #dataTable tbody a.text-secondary.font-weight-bold {
    color: #2f5ec4 !important;
    font-weight: 700;
    text-decoration: none;
}

.modern-shell .ticketing-management-modern #dataTable tbody a.text-secondary.font-weight-bold:hover,
.modern-shell .ticketing-management-modern #dataTable tbody a.text-secondary.font-weight-bold:focus {
    color: #224abe !important;
    text-decoration: none;
}

.modern-shell .ticketing-management-modern .btn-modern-copy-code {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(78, 115, 223, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, rgba(78, 115, 223, 0.08) 100%);
    color: #4e73df;
    box-shadow: 0 6px 14px rgba(78, 115, 223, 0.12);
    outline: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.modern-shell .ticketing-management-modern .btn-modern-copy-code i {
    color: #4e73df;
    font-size: 0.84rem;
    transition: color 0.16s ease;
}

.modern-shell .ticketing-management-modern .btn-modern-copy-code:hover,
.modern-shell .ticketing-management-modern .btn-modern-copy-code:focus {
    color: #3558c9;
    transform: translateY(-1px);
    box-shadow: 0 10px 16px rgba(78, 115, 223, 0.18);
    text-decoration: none;
    outline: none;
}

.modern-shell .ticketing-management-modern .btn-modern-copy-code:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(78, 115, 223, 0.16),
        0 10px 16px rgba(78, 115, 223, 0.18);
}

.modern-shell .ticketing-management-modern .btn-modern-copy-code:hover i,
.modern-shell .ticketing-management-modern .btn-modern-copy-code:focus i {
    color: #3558c9;
}

.modern-shell .ticket-detail-page .ticket-detail-header {
    gap: 0.75rem;
}

.modern-shell .ticket-detail-page .modern-card-title {
    gap: 0.5rem;
}

.modern-shell .ticket-detail-page .me-1 {
    margin-right: 0.25rem !important;
}

.modern-shell .ticket-detail-page .me-2 {
    margin-right: 0.5rem !important;
}

.modern-shell .ticket-detail-page .ms-2 {
    margin-left: 0.5rem !important;
}

.modern-shell .ticket-detail-page .modern-card-title .copyButton {
    margin-left: 0 !important;
}

.modern-shell .ticket-detail-page .modern-card-title .btn-modern-copy-code {
    width: auto;
    height: 30px;
    min-width: 0;
    max-width: 100%;
    padding: 0 0.65rem !important;
    white-space: nowrap;
    flex: 0 1 auto;
}

.modern-shell .ticket-detail-page .modern-card-title .btn-modern-copy-code b {
    color: #4e73df;
    font-size: 0.82rem;
    line-height: 1;
}

.modern-shell .ticket-detail-page .copyButton {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease-in-out;
}

.modern-shell .ticket-detail-page .modern-card-subtitle .text-white {
    color: inherit !important;
}

.modern-shell .ticket-detail-page .ticket-section-title,
.modern-shell .ticket-detail-page .border-start.border-4 {
    border-left: 4px solid #d6deec !important;
    padding-left: 0.72rem;
    margin-bottom: 0.7rem;
}

.modern-shell .ticket-detail-page .ticket-section-title h5,
.modern-shell .ticket-detail-page .border-start.border-4 h5 {
    font-size: 1rem;
    color: #7483a4;
    font-weight: 700;
}

.modern-shell .ticket-detail-page .ticket-section-primary,
.modern-shell .ticket-detail-page .border-start.border-4.border-primary {
    border-left-color: #4e73df !important;
}

.modern-shell .ticket-detail-page .ticket-section-info,
.modern-shell .ticket-detail-page .border-start.border-4.border-info {
    border-left-color: #36b9cc !important;
}

.modern-shell .ticket-detail-page .ticket-section-warning,
.modern-shell .ticket-detail-page .border-start.border-4.border-warning {
    border-left-color: #f6c23e !important;
}

.modern-shell .ticket-detail-page .ticket-section-danger,
.modern-shell .ticket-detail-page .border-start.border-4.border-danger {
    border-left-color: #e74a3b !important;
}

.modern-shell .ticket-detail-page .ticket-section-secondary,
.modern-shell .ticket-detail-page .border-start.border-4.border-secondary {
    border-left-color: #7c93c3 !important;
}

.modern-shell .ticket-detail-page .ticket-detail-list,
.modern-shell .ticket-detail-page .list-group.list-group-flush {
    border: 1px solid #dbe4f3;
    border-radius: 12px;
    overflow: hidden;
}

.modern-shell .ticket-detail-page .ticket-detail-list .list-group-item,
.modern-shell .ticket-detail-page .list-group.list-group-flush .list-group-item {
    border-color: #e6edf7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 0.65rem 0.82rem;
    color: #858da6;
}

.modern-shell .ticket-detail-page .ticket-detail-list .list-group-item strong,
.modern-shell .ticket-detail-page .list-group.list-group-flush .list-group-item strong {
    color: #7483a4;
    font-weight: 700;
}

.modern-shell .ticket-detail-page .ticket-detail-list a,
.modern-shell .ticket-detail-page .ticket-note-box a,
.modern-shell .ticket-detail-page .list-group.list-group-flush a {
    color: #7483a4 !important;
    font-weight: 600;
}

.modern-shell .ticket-detail-page .ticket-detail-list .text-secondary,
.modern-shell .ticket-detail-page .ticket-note-box .text-secondary,
.modern-shell .ticket-detail-page .list-group.list-group-flush .text-secondary {
    color: #7483a4 !important;
}

.modern-shell .ticket-detail-page .ticket-detail-list .text-muted,
.modern-shell .ticket-detail-page .ticket-note-box .text-muted,
.modern-shell .ticket-detail-page .list-group.list-group-flush .text-muted {
    color: #858da6 !important;
}

.modern-shell .ticket-detail-page .ticket-assignee-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.modern-shell .ticket-detail-page .ticket-assignee-stack .badge,
.modern-shell .ticket-detail-page .badge.bg-primary,
.modern-shell .ticket-detail-page .badge.bg-secondary {
    background: #f1f4f9 !important;
    border: 1px solid #d9e3f6;
    color: #7483a4 !important;
}

.modern-shell .ticket-detail-page .badge.badge-secondary {
    background: #f1f4f9;
    border-color: #d9e3f6;
    color: #7483a4;
}

.modern-shell .ticket-detail-page .badge.rounded-pill.badge-secondary,
.modern-shell .ticket-detail-page .badge.rounded-pill.bg-secondary {
    background: rgba(133, 135, 150, 0.18) !important;
    border: 1px solid rgba(133, 135, 150, 0.26);
    color: #667085 !important;
}

.modern-shell .ticket-detail-page .badge.rounded-pill.badge-warning,
.modern-shell .ticket-detail-page .badge.rounded-pill.bg-warning {
    background: rgba(246, 194, 62, 0.2) !important;
    border: 1px solid rgba(246, 194, 62, 0.34);
    color: #8d6a00 !important;
}

.modern-shell .ticket-detail-page .badge.rounded-pill.badge-info,
.modern-shell .ticket-detail-page .badge.rounded-pill.bg-info {
    background: rgba(54, 185, 204, 0.2) !important;
    border: 1px solid rgba(54, 185, 204, 0.34);
    color: #0f7a8b !important;
}

.modern-shell .ticket-detail-page .badge.rounded-pill.badge-success,
.modern-shell .ticket-detail-page .badge.rounded-pill.bg-success {
    background: rgba(28, 200, 138, 0.18) !important;
    border: 1px solid rgba(28, 200, 138, 0.32);
    color: #157b59 !important;
}

.modern-shell .ticket-detail-page .badge.rounded-pill.badge-danger,
.modern-shell .ticket-detail-page .badge.rounded-pill.bg-danger {
    background: rgba(231, 74, 59, 0.18) !important;
    border: 1px solid rgba(231, 74, 59, 0.32);
    color: #b42331 !important;
}

.modern-shell .ticket-detail-page .ticket-note-box,
.modern-shell .ticket-detail-page .bg-light.p-3.rounded.fade.show.transition {
    border: 1px solid #dbe4f3;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.modern-shell .ticket-detail-page .ticket-file-item {
    background: #f8fbff;
    border-color: #dbe4f3;
}

.modern-shell .ticket-detail-page .ticket-file-item:hover {
    background: #eef4ff;
    color: inherit;
}

.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.48rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--modern-text) !important;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action:hover,
.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action:focus {
    background: var(--modern-accent-softer);
    color: var(--modern-text) !important;
}

.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action-view {
    color: var(--modern-accent-strong) !important;
}

.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action-edit {
    color: #9c5d06 !important;
}

.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action-export {
    color: #1d7a44 !important;
}

.modern-shell .ticketing-management-modern .dropdown-item.modern-dd-action-delete {
    color: #b3263a !important;
}

.modern-shell .ticketing-management-modern.modern-card > .card-body {
    padding: 1rem;
    color: var(--modern-text);
}

.modern-shell .ticketing-management-modern .fade.show.transition {
    transition: all 0.3s ease-in-out;
}

.modern-shell .input-group.modern-input-append {
    align-items: stretch;
}

.modern-shell .modern-card.modern-overflow-visible,
.modern-shell .modern-card.modern-overflow-visible > .card-body,
.modern-shell .modern-card.modern-overflow-visible > .card-footer {
    overflow: visible;
}

.modern-shell .input-group.modern-input-append .form-control.modern-input-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0;
}

.modern-shell .input-group.modern-input-append .input-group-append {
    display: flex;
    align-items: stretch;
}

.modern-shell .input-group.modern-input-append .btn.modern-input-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    min-width: 36px;
    min-height: calc(2.25rem + 2px) !important;
    height: calc(2.25rem + 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.72rem !important;
    padding-right: 0.72rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    align-self: stretch;
    margin: 0 !important;
}

.modern-shell .input-group.modern-input-append .btn.btn-modern-primary.modern-input-btn {
    box-shadow: none;
}

.modern-shell .modern-form .modern-input-addon-muted {
    background: linear-gradient(180deg, #f7f9fc 0%, #edf1f6 100%);
    border-color: #d6deec;
    color: #5f687a !important;
}

.modern-shell .modern-form .modern-input-addon-muted i {
    color: #5f687a;
}

.modern-shell .modern-form .btn.modern-input-btn-muted {
    border-color: #d6deec;
    background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 100%);
    color: #4f596d !important;
    box-shadow: none;
}

.modern-shell .modern-form .btn.modern-input-btn-muted:hover,
.modern-shell .modern-form .btn.modern-input-btn-muted:focus {
    border-color: #bcc8dc;
    background: linear-gradient(180deg, #ffffff 0%, #e8edf5 100%);
    color: #434d62 !important;
}

.modern-shell .ticketing-management-modern .input-group .input-group-text#calendar-icon {
    background: linear-gradient(180deg, #f7f9fc 0%, #edf1f6 100%);
    border-color: #d6deec;
    color: #5f687a;
}

.modern-shell .ticketing-management-modern .input-group .input-group-text#calendar-icon i {
    color: #5f687a;
}

.modern-shell .ticket-form-modern #copyButton.btn,
.modern-shell .ticketing-management-modern #copyButton.btn {
    border-color: #d6deec;
    background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 100%);
    color: #4f596d !important;
    box-shadow: none;
}

.modern-shell .ticket-form-modern #copyButton.btn:hover,
.modern-shell .ticket-form-modern #copyButton.btn:focus,
.modern-shell .ticketing-management-modern #copyButton.btn:hover,
.modern-shell .ticketing-management-modern #copyButton.btn:focus {
    border-color: #bcc8dc;
    background: linear-gradient(180deg, #ffffff 0%, #e8edf5 100%);
    color: #434d62 !important;
}

.modern-shell .modern-upload-section .modern-upload {
    margin-top: 0.1rem;
}

.modern-shell .modern-upload .custom-file-label.modern-upload-label {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22);
    border-radius: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.62rem 6.1rem 0.62rem 0.92rem;
    color: #5a6982;
    font-weight: 700;
    background: linear-gradient(138deg, rgba(255, 255, 255, 0.86) 0%, rgba(236, 246, 250, 0.56) 100%);
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.08), 0 10px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .modern-upload .custom-file-label.modern-upload-label .upload-icon {
    color: #697a94;
}

.modern-shell .modern-upload .custom-file-label.modern-upload-label::after {
    content: 'Browse';
    height: calc(100% - 8px);
    top: 4px;
    right: 4px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(228, 239, 248, 0.72) 100%);
    color: #5a6982;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    padding: 0 0.82rem;
}

.modern-shell .modern-upload .custom-file-input.modern-upload-input:focus ~ .custom-file-label.modern-upload-label {
    border-color: rgba(var(--modern-accent-rgb), 0.42);
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.16), 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.18), 0 10px 22px rgba(15, 23, 42, 0.09);
}

.modern-shell .modern-upload .custom-file-input.modern-upload-input:focus ~ .custom-file-label.modern-upload-label::after {
    border-color: rgba(var(--modern-accent-rgb), 0.42);
}

.modern-shell .form-control.modern-file-input {
    height: auto;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
}

.modern-shell .modern-file-input::file-selector-button {
    min-height: 44px;
    margin-right: 0.75rem;
    padding: 0.6rem 1rem;
    border: 0;
    border-right: 1px solid var(--modern-border);
    background: linear-gradient(180deg, var(--modern-surface), var(--modern-accent-softer));
    color: var(--modern-accent-strong);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.modern-shell .modern-file-input:not(:disabled):hover::file-selector-button {
    background: var(--modern-accent-soft);
}

.modern-shell .modern-file-input:disabled::file-selector-button {
    opacity: 0.55;
    cursor: not-allowed;
}

.modern-shell .form-control.modern-file-input.is-invalid {
    border-color: var(--modern-danger-text);
}

.modern-shell .modern-report-group {
    margin-top: 0.2rem;
}

.modern-shell .modern-report-heading {
    display: inline-flex;
    align-items: center;
    color: #67738a;
    font-size: 0.82rem;
    font-weight: 800;
}

.modern-shell .modern-report-dropdown {
    position: relative;
}

.modern-shell .modern-report-dropdown .modern-report-toggle {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84) 0%, rgba(236, 246, 250, 0.54) 100%);
    color: #5a6982;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.08), 0 10px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.modern-shell .modern-report-dropdown .modern-report-toggle:hover,
.modern-shell .modern-report-dropdown .modern-report-toggle:focus {
    border-color: rgba(var(--modern-accent-rgb), 0.42);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(227, 241, 248, 0.72) 100%);
    color: #4f6078;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.14), 0 12px 24px rgba(15, 23, 42, 0.1);
}

.modern-shell .modern-report-dropdown .modern-report-menu {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(68vh, 420px);
    overflow-y: auto;
    left: 0 !important;
    right: auto !important;
    margin-top: 0.45rem;
    padding: 0.55rem;
    border-radius: 14px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.24);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.86) 0%, rgba(237, 245, 250, 0.6) 100%);
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.1), 0 16px 34px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    z-index: 1085;
}

.modern-shell .modern-report-menu-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0.42rem;
    padding: 0.35rem 0.25rem 0.45rem;
    border-bottom: 1px solid #e7edf8;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
}

.modern-shell .modern-report-menu-title {
    color: #5f6b82;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.modern-shell .modern-report-close {
    opacity: 0.72;
}

.modern-shell .modern-report-close:hover {
    opacity: 1;
}

.modern-shell .modern-report-item {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(232, 242, 250, 0.56) 100%);
    padding: 0.58rem 0.62rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.08), 0 8px 18px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.modern-shell .modern-report-item:last-child {
    margin-bottom: 0;
}

.modern-shell .modern-report-item:hover {
    border-color: rgba(var(--modern-accent-rgb), 0.36);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(226, 239, 248, 0.7) 100%);
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.14), 0 12px 22px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.modern-shell .modern-report-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.24);
    background: rgba(var(--modern-accent-rgb), 0.11);
}

.modern-shell .modern-report-file-icon {
    color: var(--modern-accent-strong);
    font-size: 0.95rem;
}

.modern-shell .modern-report-item-name {
    max-width: 240px;
}

.modern-shell .modern-report-item-link {
    color: #5f6b82;
    font-weight: 700;
    text-decoration: none;
}

.modern-shell .modern-report-item-link:hover {
    color: var(--modern-accent-strong);
    text-decoration: none;
}

.modern-shell .modern-report-item-actions {
    gap: 0.35rem;
}

.modern-shell .modern-report-action {
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.24rem 0.58rem;
    border: 1px solid transparent;
}

.modern-shell .modern-report-action.modern-report-action-replace {
    border-color: rgba(245, 158, 11, 0.36);
    background: rgba(245, 158, 11, 0.12);
    color: #9b6705;
}

.modern-shell .modern-report-action.modern-report-action-delete {
    border-color: rgba(220, 53, 69, 0.34);
    background: rgba(220, 53, 69, 0.1);
    color: #af2738;
}

/* Fallback modern docs/report style for legacy ticketing forms */
.modern-shell .ticketing-management-modern.modern-card,
.modern-shell .ticketing-management-modern.modern-card > .card-body,
.modern-shell .ticketing-management-modern.modern-card > .card-footer {
    overflow: visible;
}

.modern-shell .ticketing-management-modern .custom-file .custom-file-label {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22) !important;
    border-radius: 12px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.62rem 6.1rem 0.62rem 0.92rem !important;
    color: #5a6982 !important;
    font-weight: 700;
    background: linear-gradient(138deg, rgba(255, 255, 255, 0.86) 0%, rgba(236, 246, 250, 0.56) 100%) !important;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.08), 0 10px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .ticketing-management-modern .custom-file .custom-file-label i {
    color: #697a94;
}

.modern-shell .ticketing-management-modern .custom-file .custom-file-label::after {
    content: 'Browse';
    height: calc(100% - 8px);
    top: 4px;
    right: 4px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(228, 239, 248, 0.72) 100%);
    color: #5a6982;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    padding: 0 0.82rem;
}

.modern-shell .ticketing-management-modern .custom-file .custom-file-input:focus ~ .custom-file-label {
    border-color: rgba(var(--modern-accent-rgb), 0.42) !important;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.16), 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.18), 0 10px 22px rgba(15, 23, 42, 0.09);
}

.modern-shell .ticketing-management-modern .custom-file .custom-file-input:focus ~ .custom-file-label::after {
    border-color: rgba(var(--modern-accent-rgb), 0.42);
}

.modern-shell .ticketing-management-modern .form-group > .mt-4 > strong {
    display: inline-flex;
    align-items: center;
    color: #67738a;
    font-size: 0.82rem;
    font-weight: 800;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .badge.btn-primary.dropdown-toggle {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84) 0%, rgba(236, 246, 250, 0.54) 100%) !important;
    color: #5a6982 !important;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.08), 0 10px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    text-decoration: none;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .badge.btn-primary.dropdown-toggle:hover,
.modern-shell .ticketing-management-modern .form-group .dropdown > .badge.btn-primary.dropdown-toggle:focus {
    border-color: rgba(var(--modern-accent-rgb), 0.42) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(227, 241, 248, 0.72) 100%) !important;
    color: #4f6078 !important;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.14), 0 12px 24px rgba(15, 23, 42, 0.1);
    text-decoration: none;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu {
    width: min(560px, calc(100vw - 2rem)) !important;
    max-height: min(68vh, 420px) !important;
    overflow-y: auto !important;
    left: 0 !important;
    right: auto !important;
    margin-top: 0.45rem;
    padding: 0.55rem !important;
    border-radius: 14px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.24);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.86) 0%, rgba(237, 245, 250, 0.6) 100%);
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.1), 0 16px 34px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    z-index: 1085;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu > .d-flex.justify-content-between.align-items-center.mb-2:first-child {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 0.42rem !important;
    padding: 0.35rem 0.25rem 0.45rem;
    border-bottom: 1px solid #e7edf8;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu > .d-flex.justify-content-between.align-items-center.mb-2:first-child strong {
    color: #5f6b82;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(232, 242, 250, 0.56) 100%) !important;
    padding: 0.58rem 0.62rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.08), 0 8px 18px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light:hover {
    border-color: rgba(var(--modern-accent-rgb), 0.36) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(226, 239, 248, 0.7) 100%) !important;
    box-shadow: 0 0 0 1px rgba(var(--modern-accent-rgb), 0.14), 0 12px 22px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light .mr-3 > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.24);
    background: rgba(var(--modern-accent-rgb), 0.11);
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light .mr-3 > a i {
    color: var(--modern-accent-strong) !important;
    font-size: 0.95rem;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light .text-truncate {
    max-width: 240px !important;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light .text-truncate a {
    color: #5f6b82 !important;
    font-weight: 700 !important;
    text-decoration: none;
}

.modern-shell .ticketing-management-modern .form-group .dropdown > .dropdown-menu .border.rounded.p-2.mb-2.bg-light .text-truncate a:hover {
    color: var(--modern-accent-strong) !important;
}

.modern-shell .ticketing-management-modern .replace-file-btn,
.modern-shell .ticketing-management-modern .replace-doc-btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.24rem 0.58rem;
    border: 1px solid rgba(245, 158, 11, 0.36);
    background: rgba(245, 158, 11, 0.12);
    color: #9b6705;
}

.modern-shell .ticketing-management-modern .delete-file-btn,
.modern-shell .ticketing-management-modern .delete-doc-btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.24rem 0.58rem;
    border: 1px solid rgba(220, 53, 69, 0.34);
    background: rgba(220, 53, 69, 0.1);
    color: #af2738;
}

.modern-shell .ticketing-management-modern .delete-file-btn.btn-secondary,
.modern-shell .ticketing-management-modern .delete-doc-btn.btn-secondary {
    border-color: #c6cfdf;
    background: #eef2f8;
    color: #58657b;
}

.modern-shell .modern-toggle-group {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.35rem;
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, var(--modern-accent-softer) 100%);
}

.modern-shell .modern-toggle-group.modern-toggle-group--single {
    grid-template-columns: minmax(128px, auto);
    width: auto;
}

.modern-shell .modern-toggle-group.modern-toggle-group--single .modern-toggle-label {
    min-width: 128px;
}

.modern-shell .modern-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.modern-shell .modern-toggle-label {
    margin: 0;
    min-width: 112px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 9px;
    border: 1px solid transparent;
    background: rgba(var(--modern-accent-rgb), 0.05);
    color: var(--modern-text);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.16s ease;
}

.modern-shell .modern-toggle-label:hover {
    border-color: #c8d6f3;
    background: #eef3ff;
    color: var(--modern-accent-strong);
}

.modern-shell .modern-toggle-input:checked + .modern-toggle-label {
    border-color: transparent;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(var(--modern-accent-rgb), 0.24);
}

.btn-modern-pill {
    border-radius: 10px !important;
}

.btn-modern-split .text,
.btn-modern-split .icon {
    display: inline-flex;
    align-items: center;
}

.btn-modern-split .icon {
    margin-left: 0.15rem;
}

.modern-shell .dropdown-menu {
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(15, 28, 64, 0.12);
    padding: 0.45rem;
    background: #fff;
}

.modern-shell .dropdown-item {
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--modern-text);
    padding: 0.42rem 0.6rem;
}

.modern-shell .dropdown-item:hover,
.modern-shell .dropdown-item:focus {
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
}

.modern-shell .dropdown-item:active {
    background: linear-gradient(135deg, var(--modern-accent), var(--modern-accent-strong));
    color: #fff;
}

.modern-shell .dropdown-divider {
    border-top-color: var(--modern-border);
}

.modern-shell .dropdown-menu .form-check {
    margin-bottom: 0.25rem;
}

.modern-shell .dropdown-menu .form-check:last-child {
    margin-bottom: 0;
}

.modern-shell .dropdown-menu .form-check-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--modern-text);
}

.modern-shell .dropdown-menu .form-check-input {
    border-color: #c6d2ec;
}

.modern-shell .dropdown-menu .form-check-input:checked {
    background-color: var(--modern-accent);
    border-color: var(--modern-accent);
}

.modern-shell .table-modern {
    margin-bottom: 0;
}

.modern-shell .table-modern thead th {
    border-top: none;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--modern-text);
    background: var(--modern-accent-softer);
    border-bottom: 1px solid var(--modern-border);
}

.modern-shell .table-modern td {
    vertical-align: top;
    border-top: 1px solid #edf2fb;
    color: var(--modern-text);
    font-size: 0.86rem;
}

.modern-shell .table-modern th.action-col,
.modern-shell .table-modern td.action-col,
.modern-shell .table-modern th.compact-col,
.modern-shell .table-modern td.compact-col {
    width: 1%;
    white-space: nowrap;
}

.modern-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.modern-shell .modern-stage-time-pill {
    white-space: nowrap;
}

.modern-pill.primary {
    background: var(--modern-accent-soft);
    color: #1947b7;
}

.modern-pill.success {
    background: var(--modern-success-bg);
    color: var(--modern-success-text);
}

.modern-pill.danger {
    background: var(--modern-danger-bg);
    color: var(--modern-danger-text);
}

.modern-pill.warning {
    background: var(--modern-warning-bg);
    color: var(--modern-warning-text);
}

.modern-pill.info {
    background: var(--modern-info-bg);
    color: var(--modern-info-text);
}

.modern-pill.muted {
    background: var(--modern-muted-bg);
    color: var(--modern-muted-text);
}

.modern-shell .badge {
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.2;
}

.modern-shell .badge-primary {
    background: var(--modern-accent-soft);
    color: #1947b7;
}

.modern-shell .badge-success {
    background: var(--modern-success-bg);
    color: var(--modern-success-text);
}

.modern-shell .badge-danger {
    background: var(--modern-danger-bg);
    color: var(--modern-danger-text);
}

.modern-shell .badge-warning {
    background: var(--modern-warning-bg);
    color: var(--modern-warning-text);
}

.modern-shell .badge-info {
    background: var(--modern-info-bg);
    color: var(--modern-info-text);
}

.modern-shell .badge-secondary,
.modern-shell .badge-light {
    background: var(--modern-muted-bg);
    color: var(--modern-muted-text);
    border: 1px solid var(--modern-border);
}

.modern-shell .badge-modern-routemedia {
    background: #eaf0ff;
    color: #2e59d9;
    border: 1px solid #c8d8ff;
}

.modern-shell .badge-modern-routelink {
    background: #fff0ea;
    color: #d74b16;
    border: 1px solid #ffd4c5;
}

.modern-shell .badge-modern-free {
    background: #ecf1ff;
    color: #3558c9;
    border: 1px solid #cdd9fb;
}

.modern-shell .badge-modern-status-active {
    --status-rgb: 40, 167, 69;
    --status-ink: #1f7d44;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-temp {
    --status-rgb: 255, 193, 7;
    --status-ink: #7a5b00;
    --status-active-ink: #4f3b00;
}

.modern-shell .badge-modern-status-permanent {
    --status-rgb: 220, 53, 69;
    --status-ink: #b42331;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-decommission {
    --status-rgb: 108, 117, 125;
    --status-ink: #4f5963;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-trial {
    --status-rgb: 23, 162, 184;
    --status-ink: #0f7a8b;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-free {
    --status-rgb: 85, 103, 156;
    --status-ink: #435281;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-calon {
    --status-rgb: 0, 123, 255;
    --status-ink: #005fc7;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-surveyed {
    --status-rgb: 32, 201, 151;
    --status-ink: #117a5a;
    --status-active-ink: #ffffff;
}

.modern-shell .badge-modern-status-homepass {
    --status-rgb: 209, 94, 201;
    --status-ink: #8a2c84;
    --status-active-ink: #ffffff;
}

.modern-shell .badge[class*="badge-modern-status-"] {
    background: linear-gradient(135deg, rgba(var(--status-rgb, 107, 114, 128), 0.2), rgba(var(--status-rgb, 107, 114, 128), 0.08));
    color: var(--status-ink, #475569);
    border: 1px solid rgba(var(--status-rgb, 107, 114, 128), 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.modern-shell .modern-card-tab-link.active .modern-card-tab-badge[class*="badge-modern-status-"],
.modern-shell .modern-card-tab-link.is-active .modern-card-tab-badge[class*="badge-modern-status-"] {
    background: linear-gradient(135deg, rgba(var(--status-rgb, 107, 114, 128), 0.96), rgba(var(--status-rgb, 107, 114, 128), 0.82));
    color: var(--status-active-ink, #ffffff);
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 6px 14px rgba(var(--status-rgb, 107, 114, 128), 0.3);
}

.modern-shell .badge-modern-surveyed {
    background: #e8f9f3;
    color: #1d7a44;
    border: 1px solid #bee9d6;
}

.modern-shell .modern-badge-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
}

.modern-shell .modern-badge-stack .badge,
.modern-shell .modern-badge-stack .modern-pill {
    margin: 0 !important;
}

.modern-shell .ticketing-management-modern .modern-badge-stack {
    align-items: flex-start;
    gap: 0.45rem 0.52rem;
}

/* ODP pages: badge tone + spacing */
.modern-shell.odp-modern-page .odp-badge-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
}

.modern-shell.odp-modern-page .odp-badge-stack .badge {
    margin: 0 !important;
}

.modern-shell.odp-modern-page .odp-badge {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.24);
    background: linear-gradient(135deg, rgba(var(--modern-accent-rgb), 0.2), rgba(var(--modern-accent-rgb), 0.08));
    color: var(--modern-accent-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.modern-shell.odp-modern-page .odp-badge-splitter {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.3);
    background: linear-gradient(135deg, rgba(var(--modern-accent-rgb), 0.22), rgba(var(--modern-accent-rgb), 0.1));
    color: #2c54c4;
}

.modern-shell.odp-modern-page .odp-badge-soft {
    border: 1px solid rgba(124, 147, 195, 0.3);
    background: #f7faff;
    color: #4f5f87;
}

.modern-shell.odp-modern-page .odp-badge-muted {
    border: 1px solid var(--modern-border);
    background: var(--modern-muted-bg);
    color: var(--modern-muted-text);
}

.modern-shell.odp-modern-page .odp-badge-color {
    border: 1px solid rgba(15, 23, 42, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.modern-shell.odp-modern-page .odp-tube-core-stack {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.64rem;
}

.modern-shell.odp-modern-page .odp-tube-core-stack .odp-badge-color {
    margin: 0 !important;
}

.modern-shell.odp-modern-page .odp-tube-core-separator {
    color: #7f90b8;
    font-weight: 800;
    line-height: 1;
    margin-inline: 0.08rem;
}

.modern-shell.odp-modern-page .odp-tube-core-lines {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.54rem;
    margin-top: 0.46rem;
}

.modern-shell.odp-modern-page .odp-tube-core-line {
    display: inline-flex;
    align-items: center;
    gap: 0.64rem;
}

.modern-shell.odp-modern-page .table-modern td.odp-cable-cell {
    vertical-align: top !important;
    padding-top: 0.58rem;
    padding-bottom: 0.86rem;
}

.modern-shell.odp-modern-page .odp-cable-tube-core {
    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
}

.modern-shell.odp-modern-page .media-preview-frame {
    width: 90px;
    height: 68px;
    position: relative;
    display: inline-block;
    border: 1px solid #d6e1f6;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf2ff, #f8faff);
    box-shadow: 0 6px 14px rgba(36, 60, 120, 0.1);
}

.modern-shell.odp-modern-page .media-preview-frame:hover {
    box-shadow: 0 8px 16px rgba(36, 60, 120, 0.14);
    transition: box-shadow .12s ease;
}

.modern-shell.odp-modern-page .photo-cell {
    width: 90px;
    height: 68px;
    position: relative;
}

.modern-shell.odp-modern-page td.odp-photo-file-cell {
    text-align: center !important;
}

.modern-shell.odp-modern-page .sactivity-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    cursor: zoom-in;
}

.report-image-hover-preview.odp-hover-preview {
    position: fixed;
    z-index: 2060;
    width: 220px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    border: 1px solid #d9e2f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(27, 45, 93, .2);
    overflow: hidden;
}

.report-image-hover-preview.odp-hover-preview.is-visible {
    opacity: 1;
}

.report-image-hover-preview.odp-hover-preview img {
    width: 100%;
    height: 146px;
    object-fit: contain;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%);
    display: block;
    padding: .45rem;
}

.report-image-hover-preview.odp-hover-preview .meta {
    border-top: 1px solid #e3ebfb;
    padding: .45rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    color: #3558c9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: none) {
    .report-image-hover-preview.odp-hover-preview {
        display: none !important;
    }
}

.modern-shell.odp-modern-page .odp-action-group {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
}

.modern-shell.odp-modern-page .odp-action-group .btn-modern-action {
    margin-right: 0 !important;
}

.modern-shell.odp-modern-page .odp-kpi-stack {
    gap: 0.4rem 0.46rem;
}

.modern-shell.odp-modern-page .odp-copy-btn {
    margin-left: 0.46rem;
}

.modern-shell.odp-modern-page .odp-map-legend {
    display: flex;
    justify-content: center;
    padding: 0.85rem 1rem 0.4rem;
}

.modern-shell.odp-modern-page .odp-map-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
    background: #f7faff;
    color: #3f558f;
    padding: 0.42rem 0.78rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}


.modern-shell .badge-modern-invoice-paid {
    --invoice-rgb: 40, 167, 69;
    --invoice-ink: #1f7d44;
}

.modern-shell .badge-modern-invoice-overdue,
.modern-shell .badge-modern-invoice-unpaid {
    --invoice-rgb: 220, 53, 69;
    --invoice-ink: #b42331;
}

.modern-shell .badge-modern-invoice-pending {
    --invoice-rgb: 255, 193, 7;
    --invoice-ink: #7a5b00;
}

.modern-shell .badge-modern-invoice-no-invoice {
    --invoice-rgb: 23, 162, 184;
    --invoice-ink: #0f7a8b;
}

.modern-shell .badge[class*="badge-modern-invoice-"] {
    background: linear-gradient(135deg, rgba(var(--invoice-rgb, 107, 114, 128), 0.2), rgba(var(--invoice-rgb, 107, 114, 128), 0.08));
    color: var(--invoice-ink, #475569);
    border: 1px solid rgba(var(--invoice-rgb, 107, 114, 128), 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.modern-shell .badge-modern-topic-create {
    --topic-rgb: 40, 167, 69;
    --topic-ink: #1f7d44;
}

.modern-shell .badge-modern-topic-update {
    --topic-rgb: 78, 115, 223;
    --topic-ink: #3558c9;
}

.modern-shell .badge-modern-topic-delete {
    --topic-rgb: 220, 53, 69;
    --topic-ink: #b42331;
}

.modern-shell .badge-modern-topic-default {
    --topic-rgb: 108, 117, 125;
    --topic-ink: #4f5963;
}

.modern-shell .badge[class*="badge-modern-topic-"] {
    background: linear-gradient(135deg, rgba(var(--topic-rgb, 107, 114, 128), 0.2), rgba(var(--topic-rgb, 107, 114, 128), 0.08));
    color: var(--topic-ink, #475569);
    border: 1px solid rgba(var(--topic-rgb, 107, 114, 128), 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

/* Reusable status summary cards (for dashboard counters, ticket stats, etc.) */
.modern-shell .modern-status-card {
    --status-rgb: 124, 147, 195;
    --status-ink: #5f6f91;
    position: relative;
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.22s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.modern-shell .modern-status-card.modern-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(247, 250, 255, 0.36) 100%);
    border-color: rgba(255, 255, 255, 0.62);
}

.modern-shell .modern-status-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(var(--status-rgb), 0.95);
}

.modern-shell .modern-status-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(
        120% 95% at 92% 10%,
        rgba(var(--status-rgb), 0.24) 0%,
        rgba(var(--status-rgb), 0.1) 40%,
        rgba(255, 255, 255, 0) 72%
    );
    transition: opacity 0.24s ease;
}

.modern-shell .modern-status-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--status-rgb), 0.44);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(var(--status-rgb), 0.1) 100%);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.16), 0 8px 20px rgba(var(--status-rgb), 0.18);
}

.modern-shell .modern-status-card[data-stage-filter] {
    cursor: pointer;
}

.modern-shell .modern-status-card[data-stage-filter]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(var(--status-rgb), 0.5);
}

.modern-shell .modern-status-card:hover::after {
    opacity: 1;
}

.modern-shell .modern-status-card.is-active {
    transform: translateY(-4px);
    border-color: rgba(var(--status-rgb), 0.56);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(var(--status-rgb), 0.16) 100%);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(var(--status-rgb), 0.24);
}

.modern-shell .modern-status-card.is-active::after {
    opacity: 1;
}

.modern-shell .modern-status-card.is-active .modern-status-icon {
    background: rgba(var(--status-rgb), 0.28);
    border-color: rgba(var(--status-rgb), 0.5);
}

.modern-shell .modern-status-card.modern-glass:hover {
    backdrop-filter: blur(14px) saturate(155%);
    -webkit-backdrop-filter: blur(14px) saturate(155%);
}

.modern-shell .modern-status-card .modern-card-body {
    position: relative;
    z-index: 1;
    padding-top: 0.92rem;
    padding-bottom: 0.9rem;
}

.modern-shell .modern-status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.58rem;
}

.modern-shell .modern-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--status-ink);
}

.modern-shell .modern-status-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--status-rgb), 0.13);
    border: 1px solid rgba(var(--status-rgb), 0.26);
    color: var(--status-ink);
    flex-shrink: 0;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.modern-shell .modern-status-card.modern-glass .modern-status-icon {
    background: rgba(var(--status-rgb), 0.18);
    border-color: rgba(var(--status-rgb), 0.3);
}

.modern-shell .modern-status-card:hover .modern-status-icon {
    transform: translateY(-1px) scale(1.05);
    background: rgba(var(--status-rgb), 0.25);
    border-color: rgba(var(--status-rgb), 0.44);
}

.modern-shell .modern-status-value {
    font-size: clamp(1.18rem, 1.45vw, 1.34rem);
    line-height: 1.05;
    font-weight: 800;
    color: #435271;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.modern-shell .modern-status-primary {
    --status-rgb: 78, 115, 223;
    --status-ink: #3558c9;
}

.modern-shell .modern-status-muted {
    --status-rgb: 133, 135, 150;
    --status-ink: #5f6776;
}

.modern-shell .modern-status-warning {
    --status-rgb: 246, 194, 62;
    --status-ink: #8d6a00;
}

.modern-shell .modern-status-pending {
    --status-rgb: 255, 127, 7;
    --status-ink: #a45300;
}

.modern-shell .modern-status-info {
    --status-rgb: 54, 185, 204;
    --status-ink: #0f7a8b;
}

.modern-shell .modern-status-success {
    --status-rgb: 28, 200, 138;
    --status-ink: #157b59;
}

.modern-shell .modern-status-danger {
    --status-rgb: 231, 74, 59;
    --status-ink: #b42331;
}

/* Modern hover bridge for legacy summary cards used across Billing menus. */
.modern-shell .card.shadow.h-100[class*="border-left-"] {
    --legacy-status-rgb: 124, 147, 195;
    position: relative;
    border-color: rgba(var(--legacy-status-rgb), 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(var(--legacy-status-rgb), 0.07));
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition: transform 0.22s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.modern-shell .card.shadow.h-100.border-left-primary {
    --legacy-status-rgb: 78, 115, 223;
}

.modern-shell .card.shadow.h-100.border-left-success {
    --legacy-status-rgb: 28, 200, 138;
}

.modern-shell .card.shadow.h-100.border-left-danger {
    --legacy-status-rgb: 231, 74, 59;
}

.modern-shell .card.shadow.h-100.border-left-warning {
    --legacy-status-rgb: 246, 194, 62;
}

.modern-shell .card.shadow.h-100.border-left-info {
    --legacy-status-rgb: 54, 185, 204;
}

.modern-shell .card.shadow.h-100.border-left-secondary {
    --legacy-status-rgb: 108, 117, 125;
}

.modern-shell .card.shadow.h-100[class*="border-left-"]::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(115% 100% at 92% 8%, rgba(var(--legacy-status-rgb), 0.22), transparent 68%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.modern-shell .card.shadow.h-100[class*="border-left-"] > .card-body {
    position: relative;
    z-index: 1;
}

.modern-shell .card.shadow.h-100[class*="border-left-"] > .card-body .row > .col {
    min-width: 0;
}

.modern-shell .card.shadow.h-100[class*="border-left-"] > .card-body .h5 {
    overflow-wrap: anywhere;
}

.modern-shell .card.shadow.h-100[class*="border-left-"] > .card-body .fa-2x {
    color: rgba(var(--legacy-status-rgb), 0.58) !important;
    opacity: 1 !important;
    transition: color 0.22s ease, transform 0.22s ease;
}

.modern-shell .card.shadow.h-100[class*="border-left-"]:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--legacy-status-rgb), 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(var(--legacy-status-rgb), 0.11));
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.15), 0 8px 20px rgba(var(--legacy-status-rgb), 0.17) !important;
}

.modern-shell .card.shadow.h-100[class*="border-left-"]:hover::after {
    opacity: 1;
}

.modern-shell .card.shadow.h-100[class*="border-left-"]:hover > .card-body .fa-2x {
    color: rgba(var(--legacy-status-rgb), 0.9) !important;
    transform: translateY(-1px) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .modern-shell .card.shadow.h-100[class*="border-left-"],
    .modern-shell .card.shadow.h-100[class*="border-left-"]::after,
    .modern-shell .card.shadow.h-100[class*="border-left-"] > .card-body .fa-2x {
        transition: none;
    }

    .modern-shell .card.shadow.h-100[class*="border-left-"]:hover,
    .modern-shell .card.shadow.h-100[class*="border-left-"]:hover > .card-body .fa-2x {
        transform: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .modern-shell .modern-status-card:hover,
    .modern-shell .card.shadow.h-100[class*="border-left-"]:hover,
    .modern-shell .modern-status-card:hover .modern-status-icon,
    .modern-shell .card.shadow.h-100[class*="border-left-"]:hover > .card-body .fa-2x {
        transform: none;
    }

    .modern-shell .modern-status-card:hover::after,
    .modern-shell .card.shadow.h-100[class*="border-left-"]:hover::after {
        opacity: 0;
    }
}

.modern-shell .badge-modern-ticket-open {
    --ticket-rgb: 133, 135, 150;
    --ticket-ink: #4b5563;
}

.modern-shell .badge-modern-ticket-progress {
    --ticket-rgb: 246, 194, 62;
    --ticket-ink: #7a5b00;
}

.modern-shell .badge-modern-ticket-pending {
    --ticket-rgb: 255, 127, 7;
    --ticket-ink: #9a4f00;
}

.modern-shell .badge-modern-ticket-resolving {
    --ticket-rgb: 54, 185, 204;
    --ticket-ink: #0f7a8b;
}

.modern-shell .badge-modern-ticket-closed,
.modern-shell .badge-modern-ticket-priority-normal {
    --ticket-rgb: 28, 200, 138;
    --ticket-ink: #17795a;
}

.modern-shell .badge-modern-ticket-failed,
.modern-shell .badge-modern-ticket-priority-high {
    --ticket-rgb: 231, 74, 59;
    --ticket-ink: #b42331;
}

.modern-shell .badge-modern-ticket-priority-medium {
    --ticket-rgb: 246, 194, 62;
    --ticket-ink: #7a5b00;
}

.modern-shell .badge-modern-ticket-default {
    --ticket-rgb: 124, 147, 195;
    --ticket-ink: #495e8b;
}

.modern-shell .badge[class*="badge-modern-ticket-"] {
    background: linear-gradient(135deg, rgba(var(--ticket-rgb, 124, 147, 195), 0.2), rgba(var(--ticket-rgb, 124, 147, 195), 0.08));
    color: var(--ticket-ink, #495e8b);
    border: 1px solid rgba(var(--ticket-rgb, 124, 147, 195), 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.modern-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.65rem;
}

.modern-stat {
    border: 1px solid var(--modern-border);
    background: #fff;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    border-top: 3px solid var(--modern-accent-soft);
}

.modern-stat .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--modern-text);
    font-weight: 700;
}

.modern-stat .value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--modern-text);
    margin-top: 0.15rem;
}

@media (max-width: 768px) {
    .modern-shell .modern-status-card .modern-card-body {
        padding-top: 0.82rem;
        padding-bottom: 0.82rem;
    }

    .modern-shell .modern-status-value {
        font-size: 1.15rem;
    }
}

.modern-form .form-control,
.modern-form .form-select,
.modern-form select {
    border-radius: 10px;
    border-color: #d6deec;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    color: var(--modern-text);
}

.modern-form .form-control:focus,
.modern-form .form-select:focus,
.modern-form select:focus {
    border-color: var(--modern-accent-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .modern-form .modern-stage-select,
.modern-shell .modern-form .modern-priority-select {
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.modern-shell .modern-form .modern-stage-select[class*="stage-"],
.modern-shell .modern-form .modern-priority-select[class*="priority-"] {
    background-image: none !important;
}

.modern-shell .modern-form .modern-stage-select option,
.modern-shell .modern-form .modern-priority-select option {
    background: #ffffff;
    color: var(--modern-text);
    font-weight: 600;
}

.modern-shell .modern-form .modern-stage-select option.stage-open,
.modern-shell .modern-form .modern-stage-select option[value="Open"] {
    background-color: #858796 !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select option.stage-in-progress,
.modern-shell .modern-form .modern-stage-select option[value="In Progress"] {
    background-color: #f6c23e !important;
    color: #1f2937 !important;
}

.modern-shell .modern-form .modern-stage-select option.stage-pending,
.modern-shell .modern-form .modern-stage-select option[value="Pending"] {
    background-color: #ff7f07 !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select option.stage-resolving,
.modern-shell .modern-form .modern-stage-select option[value="Resolving"] {
    background-color: #36b9cc !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select option.stage-closed,
.modern-shell .modern-form .modern-stage-select option[value="Closed"] {
    background-color: #1cc88a !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select option.stage-failed,
.modern-shell .modern-form .modern-stage-select option[value="Failed"] {
    background-color: #e74a3b !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select.stage-open {
    background-color: #858796 !important;
    border-color: #858796 !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select.stage-in-progress {
    background-color: #f6c23e !important;
    border-color: #f6c23e !important;
    color: #1f2937 !important;
}

.modern-shell .modern-form .modern-stage-select.stage-pending {
    background-color: #ff7f07 !important;
    border-color: #ff7f07 !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select.stage-resolving {
    background-color: #36b9cc !important;
    border-color: #36b9cc !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select.stage-closed {
    background-color: #1cc88a !important;
    border-color: #1cc88a !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-stage-select.stage-failed {
    background-color: #e74a3b !important;
    border-color: #e74a3b !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-priority-select.priority-normal {
    background-color: #1cc88a !important;
    border-color: #1cc88a !important;
    color: #ffffff !important;
}

.modern-shell .modern-form .modern-priority-select.priority-medium {
    background-color: #f6c23e !important;
    border-color: #f6c23e !important;
    color: #1f2937 !important;
}

.modern-shell .modern-form .modern-priority-select.priority-high {
    background-color: #e74a3b !important;
    border-color: #e74a3b !important;
    color: #ffffff !important;
}

/* Global modern style for Choices.js in modern forms */
.modern-shell .modern-form .choices {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.modern-shell .modern-form .form-group:has(.choices.is-open) {
    position: relative;
    z-index: 1060;
}

.modern-shell .modern-form .choices.is-focused {
    z-index: 2;
}

.modern-shell .modern-form .choices.is-open {
    z-index: 1060;
}

.modern-shell .modern-form .choices__inner {
    min-height: calc(1.5em + 0.75rem + 2px);
    border: 1px solid #d6deec;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    color: var(--modern-text);
    padding: 0.375rem 0.75rem;
    box-shadow: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.modern-shell .modern-form .choices[data-type*="select-multiple"] .choices__inner {
    padding: 0.22rem 0.45rem;
    gap: 0.22rem;
}

.modern-shell .modern-form .choices.is-focused .choices__inner,
.modern-shell .modern-form .choices.is-open .choices__inner {
    border-color: var(--modern-accent-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .modern-form .choices__list--dropdown {
    margin-top: 6px;
    border: 1px solid #d6deec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.14);
    overflow: hidden;
    z-index: 1061;
}

.modern-shell .modern-card:has(.choices),
.modern-shell .modern-card:has(.choices) > .modern-card-body,
.modern-shell .modern-card:has(.choices) > .card-body {
    overflow: visible;
}

.modern-shell .modern-form .choices__list--dropdown .choices__item {
    color: var(--modern-text);
    font-size: 0.84rem;
    padding: 0.48rem 0.7rem;
}

.modern-shell .modern-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
}

.modern-shell .modern-form .choices__input--cloned {
    background: transparent !important;
    background-color: transparent !important;
    margin-bottom: 0;
    color: var(--modern-text);
}

.modern-shell .modern-form .choices__list--multiple .choices__item {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.28);
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.74rem;
    padding: 0.24rem 0.5rem;
    margin: 0.14rem 0.2rem 0.14rem 0;
}

.modern-shell .modern-form .choices__list--multiple .choices__item .choices__button {
    border-left-color: rgba(var(--modern-accent-rgb), 0.28);
    background-image: none;
    opacity: 1;
    text-indent: 0;
    width: auto;
    margin-left: 0.35rem;
    padding-left: 0.35rem;
    font-size: 0;
    line-height: 1;
    position: relative;
}

.modern-shell .modern-form .choices__list--multiple .choices__item .choices__button::before {
    content: '\00d7';
    color: var(--modern-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.modern-shell .modern-form .choices__list--multiple .choices__item .choices__button:hover::before {
    color: var(--modern-accent);
}

.modern-shell .modern-form .choices__placeholder {
    opacity: 0.7;
    color: #7c8db0;
}

/* Ticketing-management filter modal: style only Choices.js controls */
.modern-shell .ticketing-management-modern #filterModal .choices {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.modern-shell .ticketing-management-modern #filterModal .choices.is-open,
.modern-shell .ticketing-management-modern #filterModal .choices.is-focused {
    z-index: 56;
}

.modern-shell .ticketing-management-modern #filterModal .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal .choices .form-control {
    min-height: 42px;
    border: 1px solid #cfdaee !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
    color: var(--modern-text) !important;
    padding: 0.32rem 0.58rem !important;
    box-shadow: none !important;
}

.modern-shell .ticketing-management-modern #filterModal .choices[data-type*="select-multiple"] .choices__inner,
.modern-shell .ticketing-management-modern #filterModal .choices[data-type*="select-multiple"] .form-control {
    padding: 0.22rem 0.45rem !important;
}

.modern-shell .ticketing-management-modern #filterModal .choices.is-focused .choices__inner,
.modern-shell .ticketing-management-modern #filterModal .choices.is-open .choices__inner,
.modern-shell .ticketing-management-modern #filterModal .choices.is-focused .form-control,
.modern-shell .ticketing-management-modern #filterModal .choices.is-open .form-control {
    border-color: var(--modern-accent-light) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--modern-accent-rgb), 0.16) !important;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--dropdown {
    margin-top: 6px;
    border: 1px solid #d6deec !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 24px rgba(15, 28, 64, 0.14) !important;
    overflow: hidden;
    z-index: 1088;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--dropdown .choices__item {
    color: var(--modern-text);
    font-size: 0.82rem;
    padding: 0.46rem 0.68rem;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--multiple {
    display: inline;
    white-space: normal;
    margin-bottom: 0;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--multiple .choices__item {
    border: 1px solid rgba(var(--modern-accent-rgb), 0.28);
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1.1;
    padding: 0.24rem 0.48rem;
    margin: 0.12rem 0.12rem 0.12rem 0 !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--multiple .choices__item .choices__button {
    border-left-color: rgba(var(--modern-accent-rgb), 0.3);
    background-image: none !important;
    text-indent: 0;
    opacity: 1;
    width: auto;
    margin-left: 0.32rem;
    padding-left: 0.32rem;
    font-size: 0;
    line-height: 1;
    position: relative;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--multiple .choices__item .choices__button::before {
    content: '\00d7';
    color: var(--modern-accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--multiple .choices__item .choices__button:hover::before {
    color: var(--modern-accent);
}

.modern-shell .ticketing-management-modern #filterModal .choices__input,
.modern-shell .ticketing-management-modern #filterModal .choices__input--cloned {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--modern-text) !important;
    margin-bottom: 0;
    min-width: 72px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.modern-shell .ticketing-management-modern #filterModal .choices__list--dropdown .choices__item,
.modern-shell .ticketing-management-modern #filterModal .choices__list--multiple .choices__item {
    text-overflow: ellipsis;
    overflow: hidden;
}

.modern-shell .ticketing-management-modern #filterModal #filterTechnician + .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal #filterTechnician + .choices .form-control,
.modern-shell .ticketing-management-modern #filterModal #filterClusterArea + .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal #filterClusterArea + .choices .form-control,
.modern-shell .ticketing-management-modern #filterModal #filterCluster + .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal #filterCluster + .choices .form-control,
.modern-shell .ticketing-management-modern #filterModal #filterPaket + .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal #filterPaket + .choices .form-control,
.modern-shell .ticketing-management-modern #filterModal #filterCategoryPaket + .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal #filterCategoryPaket + .choices .form-control,
.modern-shell .ticketing-management-modern #filterModal #filterProvider + .choices .choices__inner,
.modern-shell .ticketing-management-modern #filterModal #filterProvider + .choices .form-control {
    min-height: 44px !important;
}

.modern-shell .customer-form-section-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #264b9f;
    background: linear-gradient(135deg, rgba(var(--modern-accent-rgb), 0.2), rgba(var(--modern-accent-rgb), 0.07));
    border: 1px solid rgba(var(--modern-accent-rgb), 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.modern-shell .modern-form .customer-status-select {
    font-weight: 700;
    transition: all 0.2s ease;
}

.modern-shell .modern-form .customer-status-select:disabled {
    opacity: 1;
    -webkit-text-fill-color: currentColor;
}

.modern-shell .modern-form .customer-status-select option {
    color: var(--modern-text);
    background: #ffffff;
    font-weight: 600;
}

.modern-shell .text-dark,
.modern-shell .text-body {
    color: #858da6 !important;
}

.modern-shell .modern-form .customer-status-select option[value="Active Customer"] {
    background: #2fbf65;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Temporary Suspend"] {
    background: #ffe28a;
    color: #4f3b00;
}

.modern-shell .modern-form .customer-status-select option[value="Permanent Suspension"] {
    background: #e45363;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Decommissioning"] {
    background: #8d97a4;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Trial/Demo"] {
    background: #2cb7cf;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Free Subscription"] {
    background: #6c7fb9;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Calon Pelanggan"] {
    background: #2f93ff;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Surveyed"] {
    background: #35d3a4;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select option[value="Homepass"] {
    background: #d15ec9;
    color: #ffffff;
}

.modern-shell .modern-form .customer-status-select.status-active {
    color: #ffffff;
    border-color: rgba(40, 167, 69, 0.55);
    background: linear-gradient(135deg, #2fbf65, #1f9149);
}

.modern-shell .modern-form .customer-status-select.status-temp {
    color: #4f3b00;
    border-color: rgba(255, 193, 7, 0.55);
    background: linear-gradient(135deg, #ffe28a, #ffc845);
}

.modern-shell .modern-form .customer-status-select.status-permanent {
    color: #ffffff;
    border-color: rgba(220, 53, 69, 0.55);
    background: linear-gradient(135deg, #e45363, #c83245);
}

.modern-shell .modern-form .customer-status-select.status-decommission {
    color: #ffffff;
    border-color: rgba(108, 117, 125, 0.55);
    background: linear-gradient(135deg, #8d97a4, #6e7884);
}

.modern-shell .modern-form .customer-status-select.status-trial {
    color: #ffffff;
    border-color: rgba(23, 162, 184, 0.55);
    background: linear-gradient(135deg, #2cb7cf, #158da3);
}

.modern-shell .modern-form .customer-status-select.status-free {
    color: #ffffff;
    border-color: rgba(85, 103, 156, 0.55);
    background: linear-gradient(135deg, #6c7fb9, #4d619e);
}

.modern-shell .modern-form .customer-status-select.status-calon {
    color: #ffffff;
    border-color: rgba(0, 123, 255, 0.55);
    background: linear-gradient(135deg, #2f93ff, #0c74e5);
}

.modern-shell .modern-form .customer-status-select.status-surveyed {
    color: #ffffff;
    border-color: rgba(32, 201, 151, 0.55);
    background: linear-gradient(135deg, #35d3a4, #16a67c);
}

.modern-shell .modern-form .customer-status-select.status-homepass {
    color: #ffffff;
    border-color: rgba(209, 94, 201, 0.55);
    background: linear-gradient(135deg, #d15ec9, #a44a9d);
}

.modern-shell .modern-modal .modal-content {
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    overflow: hidden;
}

/* Allow dropdown/popover components (e.g. Choices.js) to expand outside form modals */
.modern-shell .modern-modal .modal-content.modern-form {
    overflow: visible;
}

.modern-shell .modern-modal .modal-content.modern-form .modal-header {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.modern-shell .modern-modal .modal-content.modern-form .modal-footer {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.modern-shell .modern-modal .modal-header {
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modern-shell .modern-modal .close {
    color: #fff;
    text-shadow: none;
    opacity: 0.92;
}

.modern-shell .modern-modal .close:hover {
    color: #fff;
    opacity: 1;
}

.modern-shell .modern-modal .modal-footer {
    border-top: 1px solid var(--modern-border);
    background: #fff;
}

.modern-shell .wa-broadcast-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 980px;
    margin: 0.75rem auto;
}

.modern-shell .wa-broadcast-modal .modal-content.modern-form {
    border-color: rgba(var(--modern-accent-rgb), 0.18);
    box-shadow: 0 18px 46px rgba(20, 35, 75, 0.2);
}

.modern-shell .wa-broadcast-modal .modal-header {
    padding: 0.65rem 0.9rem;
}

.modern-shell .wa-broadcast-modal .modal-title {
    font-size: 1rem;
}

.modern-shell .wa-broadcast-modal .modal-footer {
    padding: 0.55rem 0.9rem;
}

.modern-shell .wa-broadcast-modal .modal-body {
    padding: 0.7rem;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--modern-accent-rgb), 0.08), transparent 28rem),
        var(--modern-bg);
}

.modern-shell .broadcast-form-layout {
    display: grid;
    gap: 0.55rem;
}

.modern-shell .broadcast-form-section {
    position: relative;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
}

.modern-shell .wa-broadcast-modal .broadcast-form-section:has(.choices.is-open) {
    z-index: 20;
}

.modern-shell .broadcast-section-header,
.modern-shell .broadcast-section-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.modern-shell .broadcast-section-header-control {
    justify-content: space-between;
}

.modern-shell .broadcast-section-step {
    display: inline-flex;
    flex: 0 0 1.7rem;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    box-shadow: 0 7px 16px rgba(var(--modern-accent-rgb), 0.22);
}

.modern-shell .broadcast-section-title {
    margin: 0;
    color: var(--modern-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.modern-shell .wa-broadcast-modal .broadcast-recipient-switch {
    flex: 0 1 460px;
    max-width: 460px;
}

.modern-shell .wa-broadcast-modal .broadcast-recipient-switch label {
    padding: 0.42rem 0.35rem;
    font-size: 0.78rem;
}

.modern-shell .broadcast-target-section {
    position: relative;
}

.modern-shell .broadcast-target-section > .broadcast-section-heading {
    padding-right: 6rem;
}

.modern-shell .broadcast-target-summary {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
}

.modern-shell .broadcast-target-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 999px;
    color: var(--modern-accent-strong);
    font-size: 0.74rem;
    background: rgba(var(--modern-accent-rgb), 0.07);
}

.modern-shell .wa-broadcast-modal .form-group {
    margin-bottom: 0.62rem;
}

.modern-shell .wa-broadcast-modal label {
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.modern-shell .wa-broadcast-modal .form-control,
.modern-shell .wa-broadcast-modal select {
    min-height: 36px;
    padding: 0.34rem 0.58rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.modern-shell .wa-broadcast-modal .choices__inner {
    min-height: 36px;
    padding: 0.16rem 0.4rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.modern-shell .wa-broadcast-modal .choices[data-type*="select-multiple"] .choices__inner {
    max-height: 72px;
    overflow-y: auto;
}

.modern-shell .wa-broadcast-modal .choices.is-open .choices__inner {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none;
}

.modern-shell .wa-broadcast-modal .choices__input--cloned {
    min-width: 8rem;
    margin: 0.12rem 0;
    padding: 0.12rem 0.2rem;
    font-size: 0.8rem;
}

.modern-shell .wa-broadcast-modal .choices__list--dropdown,
.modern-shell .wa-broadcast-modal .choices__list[aria-expanded] {
    margin-top: -1px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(15, 28, 64, 0.14);
}

.modern-shell .wa-broadcast-modal .choices__list--dropdown .choices__list,
.modern-shell .wa-broadcast-modal .choices__list[aria-expanded] .choices__list {
    max-height: 220px;
}

.modern-shell .wa-broadcast-modal .choices__list--dropdown .choices__item,
.modern-shell .wa-broadcast-modal .choices__list[aria-expanded] .choices__item {
    padding: 0.38rem 0.55rem;
    font-size: 0.8rem;
}

.modern-shell .wa-broadcast-modal .choices__list--dropdown .choices__input,
.modern-shell .wa-broadcast-modal .choices__list[aria-expanded] .choices__input {
    margin: 0.3rem;
    padding: 0.32rem 0.5rem;
    font-size: 0.8rem;
}

.modern-shell .wa-broadcast-modal .choices__list--multiple .choices__item {
    padding: 0.18rem 0.42rem;
    margin: 0.1rem 0.16rem 0.1rem 0;
    font-size: 0.7rem;
}

.modern-shell .wa-broadcast-modal .external-recipient-intro {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 9px;
    color: #5b6d91;
    font-size: 0.76rem;
    background: rgba(var(--modern-accent-rgb), 0.05);
}

.modern-shell .wa-broadcast-modal .external-recipient-intro i {
    flex: 0 0 auto;
    color: var(--modern-accent);
}

.modern-shell .wa-broadcast-modal #externalRecipientRows {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.modern-shell .wa-broadcast-modal .external-recipient-card {
    padding: 0.55rem 0.65rem 0.65rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 5px 14px rgba(15, 28, 64, 0.05);
}

.modern-shell .wa-broadcast-modal .external-recipient-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.modern-shell .wa-broadcast-modal .external-recipient-number {
    color: var(--modern-accent-strong);
    font-size: 0.77rem;
    font-weight: 800;
}

.modern-shell .wa-broadcast-modal .btn-remove-external-recipient {
    min-height: 1.8rem;
    padding: 0.2rem 0.5rem;
    border-color: rgba(220, 53, 69, 0.24);
    border-radius: 8px;
    color: #b42331;
    font-size: 0.72rem;
    background: rgba(220, 53, 69, 0.07);
    box-shadow: none;
}

.modern-shell .wa-broadcast-modal .btn-remove-external-recipient:hover,
.modern-shell .wa-broadcast-modal .btn-remove-external-recipient:focus {
    border-color: rgba(220, 53, 69, 0.38);
    color: #9d1f2b;
    background: rgba(220, 53, 69, 0.12);
}

.modern-shell .wa-broadcast-modal .external-recipient-row:only-child .btn-remove-external-recipient {
    display: none;
}

.modern-shell .wa-broadcast-modal .broadcast-message-input {
    min-height: 6.75rem;
    max-height: 10rem;
    resize: vertical;
}

.modern-shell .broadcast-template-row {
    display: block;
}

.modern-shell .broadcast-template-row > label {
    margin-bottom: 0.25rem;
}

.modern-shell .wa-broadcast-modal #btnReloadCrmTpl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    padding: 0;
}

@media (max-width: 991.98px) {
    .modern-shell .broadcast-section-header-control {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .wa-broadcast-modal .broadcast-recipient-switch {
        flex-basis: auto;
        max-width: none;
    }

}

@media (max-width: 575.98px) {
    .modern-shell .wa-broadcast-modal .modal-dialog {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .modern-shell .wa-broadcast-modal .modal-body {
        padding: 0.75rem;
    }

    .modern-shell .broadcast-form-section {
        padding: 0.7rem;
    }

    .modern-shell .broadcast-target-section > .broadcast-section-heading {
        padding-right: 0;
    }

    .modern-shell .broadcast-target-summary {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin: 0.4rem 0;
    }
}

.modern-shell .modern-modal.connector-runtime-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 1180px;
}

.modern-shell .modern-modal.connector-runtime-modal .modal-content.modern-form {
    overflow: hidden;
    border-color: rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(20, 35, 75, 0.24);
}

.modern-shell .connector-runtime-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.modern-shell .connector-runtime-modal__heading,
.modern-shell .connector-runtime-modal__header-actions,
.modern-shell .connector-runtime-overview__item,
.modern-shell .connector-runtime-panel__header,
.modern-shell .connector-runtime-control__header,
.modern-shell .connector-runtime-toggle,
.modern-shell .connector-runtime-info-tile__top,
.modern-shell .connector-runtime-note,
.modern-shell .connector-runtime-footer,
.modern-shell .connector-runtime-footer__actions {
    display: flex;
    align-items: center;
}

.modern-shell .connector-runtime-modal__heading {
    min-width: 0;
    gap: 0.8rem;
}

.modern-shell .connector-runtime-modal__heading-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.modern-shell .connector-runtime-modal__header .modal-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.modern-shell .connector-runtime-modal__subtitle {
    margin-top: 0.18rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    line-height: 1.35;
}

.modern-shell .connector-runtime-modal__header-actions {
    flex: 0 0 auto;
    gap: 0.75rem;
}

.modern-shell .connector-runtime-modal__header .close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    line-height: 1;
}

.modern-shell .connector-runtime-modal__override-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.modern-shell .connector-runtime-modal .modal-body {
    padding: 1rem 1.2rem 1.15rem;
    background:
        radial-gradient(700px 260px at 100% 0%, rgba(var(--modern-accent-rgb), 0.08), transparent 70%),
        #f7f9fd;
}

.modern-shell .connector-runtime-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.modern-shell .connector-runtime-overview__item {
    min-width: 0;
    gap: 0.65rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.12);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 6px 18px rgba(31, 48, 91, 0.05);
}

.modern-shell .connector-runtime-overview__item > div {
    min-width: 0;
}

.modern-shell .connector-runtime-overview__item strong,
.modern-shell .connector-runtime-overview__item small {
    display: block;
}

.modern-shell .connector-runtime-overview__item strong {
    color: #314a7e;
    font-size: 0.8rem;
    font-weight: 800;
}

.modern-shell .connector-runtime-overview__item small {
    margin-top: 0.08rem;
    color: #7583a0;
    font-size: 0.72rem;
    line-height: 1.32;
}

.modern-shell .connector-runtime-overview__icon,
.modern-shell .connector-runtime-panel__icon,
.modern-shell .connector-runtime-control__icon,
.modern-shell .connector-runtime-toggle__icon,
.modern-shell .connector-runtime-info-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--modern-accent-strong);
    background: rgba(var(--modern-accent-rgb), 0.1);
}

.modern-shell .connector-runtime-overview__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.modern-shell .connector-runtime-overview__icon.is-success,
.modern-shell .connector-runtime-panel__icon.is-success {
    color: #138a64;
    background: rgba(28, 200, 138, 0.12);
}

.modern-shell .connector-runtime-overview__icon.is-warning,
.modern-shell .connector-runtime-panel__icon.is-warning {
    color: #a86f00;
    background: rgba(246, 194, 62, 0.16);
}

.modern-shell .connector-runtime-panel__icon.is-info {
    color: #0d7f91;
    background: rgba(54, 185, 204, 0.14);
}

.modern-shell .connector-runtime-alert {
    margin-bottom: 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
}

.modern-shell .connector-runtime-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.8rem;
    padding: 0;
}

.modern-shell .connector-runtime-tabs .nav-item {
    min-width: 0;
}

.modern-shell .connector-runtime-tabs .nav-link {
    display: flex;
    align-items: center;
    min-height: 64px;
    gap: 0.65rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.13);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
    color: #6a7895;
    box-shadow: 0 5px 15px rgba(31, 48, 91, 0.04);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.modern-shell .connector-runtime-tabs .nav-link:hover,
.modern-shell .connector-runtime-tabs .nav-link:focus {
    border-color: rgba(var(--modern-accent-rgb), 0.28);
    background: #fff;
    color: var(--modern-accent-strong);
    text-decoration: none;
    transform: translateY(-1px);
}

.modern-shell .connector-runtime-tabs .nav-link.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--modern-accent-rgb), 0.22);
}

.modern-shell .connector-runtime-tabs__icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(var(--modern-accent-rgb), 0.09);
    color: var(--modern-accent-strong);
}

.modern-shell .connector-runtime-tabs .nav-link.active .connector-runtime-tabs__icon {
    background: rgba(255, 255, 255, 0.17);
    color: #fff;
}

.modern-shell .connector-runtime-tabs .nav-link > span:last-child {
    min-width: 0;
}

.modern-shell .connector-runtime-tabs strong,
.modern-shell .connector-runtime-tabs small {
    display: block;
}

.modern-shell .connector-runtime-tabs strong {
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.modern-shell .connector-runtime-tabs small {
    margin-top: 0.12rem;
    font-size: 0.7rem;
    line-height: 1.25;
    opacity: 0.78;
}

.modern-shell .connector-runtime-panel {
    padding: 1rem 1rem 0.9rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(31, 48, 91, 0.06);
}

.modern-shell .connector-runtime-panel__header {
    gap: 0.72rem;
    margin-bottom: 0.9rem;
}

.modern-shell .connector-runtime-panel__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 0.95rem;
}

.modern-shell .connector-runtime-panel__header h6 {
    margin: 0;
    color: #304a80;
    font-size: 0.92rem;
    font-weight: 800;
}

.modern-shell .connector-runtime-panel__header p {
    margin: 0.16rem 0 0;
    color: #74819d;
    font-size: 0.76rem;
    line-height: 1.35;
}

.modern-shell .connector-runtime-control {
    height: 100%;
    padding: 0.78rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.13);
    border-radius: 13px;
    background: linear-gradient(180deg, #fff, #fafbff);
    box-shadow: 0 5px 14px rgba(31, 48, 91, 0.04);
}

.modern-shell .connector-runtime-control.has-error {
    border-color: rgba(231, 74, 59, 0.45);
    box-shadow: 0 0 0 3px rgba(231, 74, 59, 0.08);
}

.modern-shell .connector-runtime-control--wide {
    height: auto;
}

.modern-shell .connector-runtime-control__header {
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.modern-shell .connector-runtime-control__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.72rem;
}

.modern-shell .connector-runtime-control__label {
    margin: 0;
    color: #40547e;
    font-size: 0.78rem;
    font-weight: 800;
}

.modern-shell .connector-runtime-control__input .form-control,
.modern-shell .connector-runtime-control--wide > .form-control {
    min-width: 0;
    min-height: 40px;
    border-color: rgba(var(--modern-accent-rgb), 0.2);
    background: #fff;
    color: #41547c;
    font-size: 0.86rem;
    font-weight: 700;
}

.modern-shell .connector-runtime-control__input .input-group-text {
    min-width: 54px;
    justify-content: center;
    border-color: rgba(var(--modern-accent-rgb), 0.18);
    background: #eef2fb;
    color: #62718e;
    font-size: 0.72rem;
    font-weight: 800;
}

.modern-shell .connector-runtime-control__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
    margin-top: 0.48rem;
}

.modern-shell .connector-runtime-control__meta small {
    min-width: 0;
    color: #7b879f;
    font-size: 0.7rem;
    line-height: 1.35;
}

.modern-shell .connector-runtime-control__default {
    flex: 0 0 auto;
    padding: 0.16rem 0.38rem;
    border-radius: 999px;
    background: #eef2fb;
    color: #657494;
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
}

.modern-shell .connector-runtime-control__error {
    display: block;
    margin-top: 0.35rem;
    color: #c63f32;
    font-size: 0.68rem;
    font-weight: 700;
}

.modern-shell .connector-runtime-toggle {
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(246, 194, 62, 0.28);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(246, 194, 62, 0.11), #fff);
}

.modern-shell .connector-runtime-toggle__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #a86f00;
    background: rgba(246, 194, 62, 0.18);
}

.modern-shell .connector-runtime-toggle__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.modern-shell .connector-runtime-toggle__copy strong,
.modern-shell .connector-runtime-toggle__copy small {
    display: block;
}

.modern-shell .connector-runtime-toggle__copy strong {
    color: #6d571c;
    font-size: 0.8rem;
    font-weight: 800;
}

.modern-shell .connector-runtime-toggle__copy small {
    margin-top: 0.1rem;
    color: #8b7a4c;
    font-size: 0.72rem;
}

.modern-shell .connector-runtime-toggle__switch {
    flex: 0 0 auto;
    margin-left: auto;
}

.modern-shell .connector-runtime-info-tile {
    height: 100%;
    min-height: 116px;
    padding: 0.78rem;
    border: 1px solid rgba(54, 185, 204, 0.18);
    border-radius: 13px;
    background: linear-gradient(180deg, #fff, #f7fcfd);
    box-shadow: 0 5px 14px rgba(31, 48, 91, 0.04);
}

.modern-shell .connector-runtime-info-tile__top {
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.modern-shell .connector-runtime-info-tile__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #0d7f91;
    background: rgba(54, 185, 204, 0.13);
    font-size: 0.74rem;
}

.modern-shell .connector-runtime-info-tile__source {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    background: #edf1f7;
    color: #69758d;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.modern-shell .connector-runtime-info-tile__label,
.modern-shell .connector-runtime-info-tile__value,
.modern-shell .connector-runtime-info-tile__hint {
    display: block;
}

.modern-shell .connector-runtime-info-tile__label {
    color: #77839c;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.modern-shell .connector-runtime-info-tile__value {
    margin-top: 0.2rem;
    color: #385079;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modern-shell .connector-runtime-info-tile__hint {
    margin-top: 0.38rem;
    color: #7d899e;
    font-size: 0.7rem;
    line-height: 1.38;
}

.modern-shell .connector-runtime-note {
    gap: 0.55rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.16);
    border-radius: 11px;
    background: rgba(var(--modern-accent-rgb), 0.06);
    color: #536b9c;
    font-size: 0.72rem;
    line-height: 1.4;
}

.modern-shell .connector-runtime-note > i {
    flex: 0 0 auto;
}

.modern-shell .connector-runtime-note.is-warning {
    border-color: rgba(246, 194, 62, 0.32);
    background: rgba(246, 194, 62, 0.1);
    color: #80621d;
}

.modern-shell .connector-runtime-note code {
    color: inherit;
}

.modern-shell .connector-runtime-footer {
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
}

.modern-shell .connector-runtime-footer__actions {
    gap: 0.45rem;
}

@media (max-width: 991.98px) {
    .modern-shell .connector-runtime-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modern-shell .connector-runtime-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .modern-shell .modern-modal.connector-runtime-modal .modal-dialog {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .modern-shell .connector-runtime-modal__header {
        align-items: flex-start;
    }

    .modern-shell .connector-runtime-modal__header-actions {
        gap: 0.4rem;
    }

    .modern-shell .connector-runtime-modal__override-badge {
        display: none;
    }

    .modern-shell .connector-runtime-modal .modal-body {
        padding: 0.8rem;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .connector-runtime-tabs {
        grid-template-columns: 1fr;
    }

    .modern-shell .connector-runtime-tabs .nav-link {
        min-height: 56px;
    }

    .modern-shell .connector-runtime-control__meta,
    .modern-shell .connector-runtime-toggle,
    .modern-shell .connector-runtime-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell .connector-runtime-toggle__switch {
        margin-left: 0;
    }

    .modern-shell .connector-runtime-footer__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Billing and partner company selector */
.modern-shell .company-selector-card {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 78px;
    padding: 0.88rem 1rem;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 16px;
    background:
        radial-gradient(circle at 66% -85%, rgba(255, 255, 255, 0.24) 0 5rem, transparent 5.1rem),
        radial-gradient(circle at 88% 145%, rgba(255, 255, 255, 0.14) 0 6.5rem, transparent 6.6rem),
        linear-gradient(118deg, var(--modern-accent-strong) 0%, var(--modern-accent) 52%, var(--modern-accent-light) 100%);
    box-shadow: 0 16px 34px rgba(42, 65, 125, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.modern-shell .company-selector-copy {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 0.75rem;
    min-width: 210px;
}

.modern-shell .company-selector-copy > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modern-shell .company-selector-copy strong {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.modern-shell .company-selector-copy small {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
}

.modern-shell .company-selector-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(30, 49, 112, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px) saturate(145%);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
}

.modern-shell .company-selector-control {
    flex: 0 1 560px;
    width: min(100%, 560px);
    min-width: 280px;
}

.modern-shell .company-selector-control .form-control,
.modern-shell .company-selector-control .choices__inner {
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.9));
    color: #4a5568;
    box-shadow: 0 8px 20px rgba(29, 48, 111, 0.16), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.modern-shell .company-selector-control .choices__inner {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.85rem;
}

.modern-shell .company-selector-control .choices {
    z-index: 40;
    width: 100%;
    margin-bottom: 0;
}

.modern-shell .company-selector-control .choices.is-open {
    z-index: 50;
}

.modern-shell .company-selector-control .form-control:focus,
.modern-shell .company-selector-control .choices.is-focused .choices__inner,
.modern-shell .company-selector-control .choices.is-open .choices__inner {
    border-color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.22), 0 10px 24px rgba(29, 48, 111, 0.2);
}

.modern-shell .company-selector-control .choices__list--single .choices__item,
.modern-shell .company-selector-control .choices__placeholder {
    color: #4a5568 !important;
    opacity: 1;
}

.modern-shell .billing-company-filter-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 560px;
    gap: 0.75rem;
    min-width: 0;
}

.modern-shell .billing-company-filter .company-selector-control {
    flex: 1 1 560px;
    width: 100%;
    max-width: 560px;
}

.modern-shell .billing-company-filter-actions,
.modern-shell .gateway-mode-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.modern-shell .billing-company-filter-actions {
    flex: 0 0 auto;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(25, 44, 108, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.modern-shell .billing-company-filter .environment-toggle-buttons-inline {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(24, 42, 104, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.modern-shell .billing-company-filter .environment-option-inline {
    min-height: 40px;
    padding: 0.65rem 0.8rem;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.76rem;
    font-weight: 800;
}

.modern-shell .billing-company-filter .environment-option-inline:hover {
    color: #ffffff !important;
}

.modern-shell .billing-company-filter #gateway-env-production:checked
    ~ .environment-toggle-buttons-inline .production-option,
.modern-shell .billing-company-filter #gateway-env-sandbox:checked
    ~ .environment-toggle-buttons-inline .sandbox-option {
    color: #ffffff;
}

.modern-shell .billing-company-filter #gateway-env-production:checked
    ~ .environment-toggle-buttons-inline .environment-slider-inline {
    left: 4px;
    background: linear-gradient(135deg, #1cc88a, #159b6b);
}

.modern-shell .billing-company-filter #gateway-env-sandbox:checked
    ~ .environment-toggle-buttons-inline .environment-slider-inline {
    left: calc(50% + 2px);
    background: linear-gradient(135deg, #f6c23e, #dca514);
}

.modern-shell .billing-company-filter .environment-radio:focus-visible
    ~ .environment-toggle-buttons-inline {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .billing-company-filter-mode-label {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.modern-shell .billing-company-filter #gateway-mode-badge {
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
}

.modern-shell .billing-company-filter .gateway-mode-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.modern-shell .billing-company-filter .gateway-mode-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.modern-shell .billing-company-filter .gateway-mode-slider {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #f6c23e;
    cursor: pointer;
    transition: 0.2s ease;
}

.modern-shell .billing-company-filter .gateway-mode-slider::before {
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    content: '';
    transition: 0.2s ease;
}

.modern-shell .billing-company-filter .gateway-mode-switch input:checked + .gateway-mode-slider {
    background: #1cc88a;
}

.modern-shell .billing-company-filter .gateway-mode-switch input:checked + .gateway-mode-slider::before {
    transform: translateX(24px);
}

.modern-shell .billing-company-filter .gateway-mode-switch input:focus-visible + .gateway-mode-slider {
    box-shadow: 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .billing-company-filter #gateway-mode-badge.production-active {
    background: #1cc88a !important;
    color: #ffffff;
}

.modern-shell .billing-company-filter #gateway-mode-badge.sandbox-active {
    background: #f6c23e !important;
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .modern-shell .company-selector-card {
        flex-wrap: wrap;
    }

    .modern-shell .billing-company-filter-tools,
    .modern-shell .company-selector-control {
        flex-basis: 100%;
        width: 100%;
        max-width: none;
    }

    .modern-shell .billing-company-filter .company-selector-control {
        max-width: none;
    }
}

/* Billing dashboard */
.modern-shell.billing-dashboard-shell .billing-dashboard-alert {
    display: none;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(231, 74, 59, 0.24);
    border-radius: 12px;
    background: rgba(231, 74, 59, 0.08);
    color: #a92e24;
    font-size: 0.82rem;
    font-weight: 700;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-alert.is-visible {
    display: flex;
}

.modern-shell.billing-dashboard-shell .modern-status-card {
    min-height: 126px;
}

.modern-shell.billing-dashboard-shell .modern-status-value {
    overflow-wrap: anywhere;
}

.modern-shell.billing-dashboard-shell .modern-status-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    color: var(--modern-subtext);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-secondary-stats .modern-status-card {
    min-height: 120px;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-secondary-stats .modern-status-label {
    font-size: 0.66rem;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-panel {
    border-color: rgba(var(--modern-accent-rgb), 0.14);
    overflow: hidden;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 70px;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.52);
}

.modern-shell.billing-dashboard-shell .billing-dashboard-eyebrow {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--modern-subtext);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-panel-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
    border-radius: 11px;
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
}

.modern-shell.billing-dashboard-shell .billing-dashboard-panel-icon.is-warning {
    border-color: rgba(246, 194, 62, 0.35);
    background: rgba(246, 194, 62, 0.14);
    color: #9a7200;
}

.modern-shell.billing-dashboard-shell .billing-chart-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.22rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
}

.modern-shell.billing-dashboard-shell .billing-chart-toggle button {
    padding: 0.32rem 0.68rem;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: transparent;
    color: var(--modern-subtext);
    font-size: 0.73rem;
    font-weight: 800;
    cursor: pointer;
}

.modern-shell.billing-dashboard-shell .billing-chart-toggle button.is-active,
.modern-shell.billing-dashboard-shell .billing-chart-toggle button:focus-visible {
    background: var(--modern-accent-strong);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(var(--modern-accent-rgb), 0.22);
}

.modern-shell.billing-dashboard-shell .billing-chart {
    position: relative;
    width: 100%;
}

.modern-shell.billing-dashboard-shell .billing-chart-lg {
    height: 340px;
}

.modern-shell.billing-dashboard-shell .billing-chart-md {
    height: 270px;
}

.modern-shell.billing-dashboard-shell .billing-chart-donut {
    height: 300px;
}

.modern-shell.billing-dashboard-shell .billing-chart-method {
    width: min(100%, 250px);
    height: 240px;
}

.modern-shell.billing-dashboard-shell .billing-chart-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-shell.billing-dashboard-shell .billing-dashboard-loading,
.modern-shell.billing-dashboard-shell .billing-dashboard-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 120px;
    color: var(--modern-subtext);
    font-size: 0.82rem;
    text-align: center;
}

.modern-shell.billing-dashboard-shell .billing-top-company-item + .billing-top-company-item {
    margin-top: 0.9rem;
}

.modern-shell.billing-dashboard-shell .billing-top-company-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.42rem;
    color: var(--modern-text);
    font-size: 0.78rem;
}

.modern-shell.billing-dashboard-shell .billing-top-company-name {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    font-weight: 700;
}

.modern-shell.billing-dashboard-shell .billing-top-company-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0.18rem 0.35rem;
    border-radius: 7px;
    background: rgba(var(--modern-accent-rgb), 0.12);
    color: var(--modern-accent-strong);
    font-size: 0.66rem;
    font-weight: 900;
}

.modern-shell.billing-dashboard-shell .billing-top-company-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--modern-accent-rgb), 0.1);
}

.modern-shell.billing-dashboard-shell .billing-top-company-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--modern-accent-strong), #1cc88a);
}

.modern-shell.billing-dashboard-shell .billing-activity-list {
    max-height: 420px;
    overflow-y: auto;
}

.modern-shell.billing-dashboard-shell .billing-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.58);
}

.modern-shell.billing-dashboard-shell .billing-activity-item + .billing-activity-item {
    margin-top: 0.55rem;
}

.modern-shell.billing-dashboard-shell .billing-activity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modern-shell.billing-dashboard-shell .billing-activity-copy strong {
    color: var(--modern-text);
    font-size: 0.82rem;
}

.modern-shell.billing-dashboard-shell .billing-activity-copy small {
    color: var(--modern-subtext);
    font-size: 0.71rem;
}

.modern-shell.billing-dashboard-shell .billing-activity-amount {
    flex-shrink: 0;
    color: #157b59;
    font-size: 0.78rem;
    font-weight: 900;
}

.modern-shell.billing-dashboard-shell .billing-merchant-card {
    min-height: 430px;
}

.modern-shell.billing-dashboard-shell .billing-merchant-card > .modern-card-body,
.modern-shell.billing-dashboard-shell .billing-merchant-card .dataTables_wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.modern-shell.billing-dashboard-shell .billing-merchant-card .dataTables_wrapper > .row:last-child {
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--modern-accent-rgb), 0.1);
}

.modern-shell.billing-dashboard-shell .billing-merchant-card .dataTables_info,
.modern-shell.billing-dashboard-shell .billing-merchant-card .dataTables_paginate {
    font-size: 0.75rem;
}

.modern-shell.billing-dashboard-shell #merchantTable code {
    color: var(--modern-accent-strong);
    font-size: 0.74rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .modern-shell .company-selector-card {
        align-items: stretch;
        flex-direction: column;
        gap: 0.8rem;
        min-height: 0;
        padding: 0.85rem;
    }

    .modern-shell .company-selector-copy {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    .modern-shell .billing-company-filter-tools,
    .modern-shell .company-selector-control,
    .modern-shell .billing-company-filter .company-selector-control {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .modern-shell .billing-company-filter-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .billing-company-filter-actions,
    .modern-shell .gateway-mode-toggle-wrapper {
        width: 100%;
    }

    .modern-shell .billing-company-filter-actions,
    .modern-shell .billing-company-filter .environment-toggle-wrapper-inline,
    .modern-shell .billing-company-filter .environment-toggle-buttons-inline {
        display: flex;
    }

    .modern-shell .billing-company-filter .environment-toggle-wrapper-inline,
    .modern-shell .billing-company-filter .environment-toggle-buttons-inline {
        width: 100%;
    }

    .modern-shell .billing-company-filter .environment-option-inline {
        flex: 1 1 50%;
    }

    .modern-shell .gateway-mode-toggle-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .modern-shell.billing-dashboard-shell .billing-dashboard-panel-header {
        align-items: flex-start;
    }

    .modern-shell.billing-dashboard-shell .billing-chart-lg,
    .modern-shell.billing-dashboard-shell .billing-chart-md {
        height: 260px;
    }

    .modern-shell.billing-dashboard-shell .billing-chart-donut,
    .modern-shell.billing-dashboard-shell .billing-chart-method {
        height: 230px;
    }

    .modern-shell.billing-dashboard-shell .billing-activity-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .modern-shell .company-selector-copy {
        gap: 0.65rem;
    }

    .modern-shell .company-selector-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
    }

    .modern-shell .company-selector-control .form-control,
    .modern-shell .company-selector-control .choices__inner {
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    .modern-shell.billing-dashboard-shell .modern-status-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell.billing-dashboard-shell .billing-dashboard-panel-header {
        flex-wrap: wrap;
    }
}

/* Digital profile card */
.modern-shell .identity-card,
.modern-shell .identity-card *,
.modern-shell .identity-card *::before,
.modern-shell .identity-card *::after,
.public-card-shell,
.public-card-shell *,
.public-card-shell *::before,
.public-card-shell *::after {
    box-sizing: border-box;
}

.modern-shell .identity-card,
.modern-shell .identity-card[data-card-theme="indigo"],
.modern-shell .profile-card-theme[data-card-theme="indigo"] {
    --card-primary-deep: #3659b7;
    --card-primary: #4e73df;
    --card-primary-light: #a9bdf2;
    --card-primary-soft: #edf3ff;
    --card-primary-rgb: 78, 115, 223;
    --card-body-top: #f3f6ff;
    --card-body-middle: #f7f9ff;
    --card-body-bottom: #e7edfc;
}

.modern-shell .identity-card[data-card-theme="ocean"],
.modern-shell .profile-card-theme[data-card-theme="ocean"] {
    --card-primary-deep: #11647b;
    --card-primary: #1685a2;
    --card-primary-light: #a0dbe6;
    --card-primary-soft: #edfafd;
    --card-primary-rgb: 22, 133, 162;
    --card-body-top: #f0fbfd;
    --card-body-middle: #f7fcfd;
    --card-body-bottom: #dff2f7;
}

.modern-shell .identity-card[data-card-theme="emerald"],
.modern-shell .profile-card-theme[data-card-theme="emerald"] {
    --card-primary-deep: #23634d;
    --card-primary: #338564;
    --card-primary-light: #a9d9bd;
    --card-primary-soft: #edf9f1;
    --card-primary-rgb: 51, 133, 100;
    --card-body-top: #f2faf4;
    --card-body-middle: #f8fcf8;
    --card-body-bottom: #e2f1e7;
}

.modern-shell .identity-card[data-card-theme="sunset"],
.modern-shell .profile-card-theme[data-card-theme="sunset"] {
    --card-primary-deep: #a4512b;
    --card-primary: #c97942;
    --card-primary-light: #f0c59a;
    --card-primary-soft: #fff5e9;
    --card-primary-rgb: 201, 121, 66;
    --card-body-top: #fff6ed;
    --card-body-middle: #fffaf5;
    --card-body-bottom: #f8e8d9;
}

.modern-shell .identity-card[data-card-theme="rose"],
.modern-shell .profile-card-theme[data-card-theme="rose"] {
    --card-primary-deep: #993f65;
    --card-primary: #bc6088;
    --card-primary-light: #ebbacf;
    --card-primary-soft: #fff1f6;
    --card-primary-rgb: 188, 96, 136;
    --card-body-top: #fff4f8;
    --card-body-middle: #fff9fb;
    --card-body-bottom: #f5e3ec;
}

.modern-shell .identity-card[data-card-theme="graphite"],
.modern-shell .profile-card-theme[data-card-theme="graphite"] {
    --card-primary-deep: #445168;
    --card-primary: #67778e;
    --card-primary-light: #c1cad6;
    --card-primary-soft: #f0f3f7;
    --card-primary-rgb: 103, 119, 142;
    --card-body-top: #f4f6f9;
    --card-body-middle: #fafbfc;
    --card-body-bottom: #e5eaf0;
}

.modern-shell .identity-card {
    --card-tilt-x: 0deg;
    --card-tilt-y: 0deg;
    --card-light-x: 50%;
    --card-light-y: 18%;
    --card-shine-x: 0px;
    --card-shine-y: 0px;
    --card-photo-position-x: 50%;
    --card-photo-position-y: 24%;
    --card-photo-zoom: 1;
    --card-qr-size: 88px;
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 55 / 85;
    overflow: hidden;
    color: #29406f;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(226, 235, 255, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(54, 89, 183, 0.12),
        0 24px 48px rgba(43, 70, 132, 0.18),
        0 8px 18px rgba(43, 70, 132, 0.1);
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
    transform: perspective(1100px) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y));
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 180ms ease;
    animation: identity-card-reveal 680ms cubic-bezier(0.2, 0.82, 0.2, 1) backwards;
    isolation: isolate;
}

.modern-shell .identity-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-top-color: rgba(255, 255, 255, 0.96);
    border-left-color: rgba(255, 255, 255, 0.72);
    border-bottom-color: rgba(45, 70, 132, 0.18);
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 1px 0 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(45, 70, 132, 0.12);
    pointer-events: none;
}

.modern-shell .identity-card::after {
    content: "";
    position: absolute;
    inset: -22%;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--card-light-x) var(--card-light-y), rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(118deg, transparent 26%, rgba(255, 255, 255, 0.16) 43%, rgba(255, 255, 255, 0.04) 55%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.78;
    transform: translate3d(var(--card-shine-x), var(--card-shine-y), 0);
    transition: transform 140ms ease-out, opacity 180ms ease;
}

.modern-shell .identity-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(54, 89, 183, 0.14),
        0 30px 56px rgba(43, 70, 132, 0.22),
        0 10px 22px rgba(43, 70, 132, 0.12);
}

.modern-shell .identity-card.is-exporting {
    --card-qr-size: 88px;
    width: 360px !important;
    max-width: none !important;
    height: 556px !important;
    aspect-ratio: auto !important;
    opacity: 1 !important;
    background: #ffffff;
    border-color: #d8e2f5;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none !important;
    transform-style: flat;
    transition: none !important;
    animation: none !important;
    isolation: auto;
}

.modern-shell .identity-card.is-exporting,
.modern-shell .identity-card.is-exporting *,
.modern-shell .identity-card.is-exporting *::before,
.modern-shell .identity-card.is-exporting *::after {
    animation: none !important;
    transition: none !important;
}

.modern-shell .identity-card.is-exporting::before,
.modern-shell .identity-card.is-exporting::after {
    content: none !important;
    display: none !important;
}

.modern-shell .identity-card.is-exporting .identity-card__body {
    height: 41%;
    padding: 21px 26px 5px;
    background: linear-gradient(180deg, var(--card-body-top) 0%, var(--card-body-middle) 46%, var(--card-body-bottom) 100%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modern-shell .identity-card.is-exporting .identity-card__identity {
    min-height: 51px;
}

.modern-shell .identity-card.is-exporting .identity-card__contact-grid {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    min-height: 88px;
}

.modern-shell .identity-card.is-exporting .identity-card__portrait-placeholder span,
.modern-shell .identity-card.is-exporting .identity-card__wave-logo,
.modern-shell .identity-card.is-exporting .identity-card__qr {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modern-shell .identity-card.is-exporting .identity-card__wave-logo {
    background: var(--card-body-top);
}

.modern-shell .identity-card.is-exporting .identity-card__qr {
    width: 88px;
    height: 88px;
    overflow: hidden;
    background: #ffffff;
}

.modern-shell .identity-card.is-exporting .identity-card__wave-logo img,
.modern-shell .identity-card.is-exporting .identity-card__qr > img {
    filter: none !important;
    transform: none !important;
}

.modern-shell .identity-card.is-exporting .identity-card__photo-shade {
    background: linear-gradient(180deg, rgba(30, 52, 111, 0.16) 0%, transparent 46%, rgba(30, 52, 111, 0.1) 100%);
}

.modern-shell .identity-card.is-exporting .identity-card__hero {
    height: 59%;
    box-shadow: none;
}

.modern-shell .identity-card.is-exporting .identity-card__company {
    margin-top: 4px;
    padding-top: 3px;
}

.modern-shell .identity-card.is-exporting .identity-card__company::before {
    margin-bottom: 3px;
}

.modern-shell .identity-card__hero {
    position: relative;
    height: 59%;
    background: linear-gradient(145deg, var(--card-primary-deep) 0%, var(--card-primary-light) 100%);
}

.modern-shell .identity-card__portrait,
.modern-shell .identity-card__portrait-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.modern-shell .identity-card__portrait.is-preview-hidden,
.modern-shell .identity-card__portrait-placeholder.is-preview-hidden {
    visibility: hidden;
    opacity: 0;
}

.modern-shell .identity-card__portrait {
    display: block;
    object-fit: cover;
    object-position: var(--card-photo-position-x) var(--card-photo-position-y);
    filter: none;
    transform: scale(var(--card-photo-zoom));
    transform-origin: var(--card-photo-position-x) var(--card-photo-position-y);
}

.modern-shell .identity-card__portrait-placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(145deg, var(--card-primary-deep) 0%, var(--card-primary) 62%, var(--card-primary-light) 100%);
}

.modern-shell .identity-card__portrait-placeholder span {
    display: grid;
    width: 124px;
    height: 124px;
    place-items: center;
    color: #ffffff;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.08em;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 34px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.modern-shell .identity-card__photo-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(30, 52, 111, 0.18) 0%, transparent 46%, rgba(30, 52, 111, 0.12) 100%);
}

.modern-shell .identity-card__wave-logo {
    position: absolute;
    bottom: -18px;
    left: 24px;
    z-index: 5;
    display: grid;
    width: 52px;
    height: 52px;
    padding: 5px;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    background: var(--card-body-top);
    border: 2px solid rgba(var(--card-primary-rgb), 0.18);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(43, 70, 132, 0.18), inset 0 1px rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    font-weight: 800;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.modern-shell .identity-card__wave-logo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: drop-shadow(0 1px 1px rgba(21, 32, 55, 0.5)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}

.modern-shell .identity-card__wave-logo > span:not(.sr-only) {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(31, 45, 76, 0.35);
}

.modern-shell .identity-card__waves {
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    z-index: 3;
    height: 13vh;
    min-height: 50px;
    max-height: 72px;
    pointer-events: none;
}

.modern-shell .identity-card__waves svg {
    display: block;
    width: 100%;
    height: 100%;
}

.modern-shell .identity-card__parallax > path {
    animation: identity-wave-flow 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.modern-shell .identity-card.is-motion-paused .identity-card__parallax > path {
    animation-play-state: paused;
}

.modern-shell .identity-card__wave {
    fill-opacity: 1;
}

.modern-shell .identity-card__wave--back {
    fill: rgba(255, 255, 255, 0.76);
}

.modern-shell .identity-card__wave--middle {
    fill: rgba(var(--card-primary-rgb), 0.13);
}

.modern-shell .identity-card__wave--near {
    fill: rgba(var(--card-primary-rgb), 0.2);
}

.modern-shell .identity-card__wave--front {
    fill: var(--card-body-top);
}

.modern-shell .identity-card__parallax > path:first-child,
.modern-shell .identity-card__parallax > path:nth-child(2),
.modern-shell .identity-card__parallax > path:nth-child(3),
.modern-shell .identity-card__parallax > path:nth-child(4) {
    animation-delay: -2s;
    animation-duration: 5s;
}

.modern-shell .identity-card.is-exporting .identity-card__parallax > path {
    animation: none !important;
    transform: translate3d(0, 0, 0);
}

.modern-shell .identity-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    height: 41%;
    flex-direction: column;
    row-gap: 6px;
    padding: 18px 24px 11px;
    background: linear-gradient(180deg, var(--card-body-top) 0%, var(--card-body-middle) 46%, var(--card-body-bottom) 100%);
    box-shadow: inset 0 -1px 0 rgba(var(--card-primary-rgb), 0.08);
}

.modern-shell .identity-card__identity {
    min-height: 52px;
    text-align: center;
}

.modern-shell .identity-card__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--card-primary-deep);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.modern-shell .identity-card__identity h2 {
    margin: 0;
    overflow: hidden;
    color: #2b3e61;
    font-size: clamp(1.16rem, 5.3vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .identity-card__role {
    margin: 0 0 2px;
    overflow: hidden;
    color: var(--card-primary-deep);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.modern-shell .identity-card__contact-grid {
    display: grid;
    grid-template-columns: var(--card-qr-size) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: var(--card-qr-size);
}

.modern-shell .identity-card__qr {
    position: relative;
    display: grid;
    width: var(--card-qr-size);
    height: var(--card-qr-size);
    place-items: center;
    overflow: hidden;
    color: #5e6f8e;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 7px 14px rgba(var(--card-primary-rgb), 0.12);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    text-decoration: none;
}

.modern-shell a.identity-card__qr {
    z-index: 3;
    overflow: visible;
    cursor: pointer;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

.modern-shell a.identity-card__qr:hover,
.modern-shell a.identity-card__qr:focus {
    border-color: rgba(var(--card-primary-rgb), 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 10px 20px rgba(var(--card-primary-rgb), 0.22);
    text-decoration: none;
}

.modern-shell a.identity-card__qr:focus-visible {
    outline: 3px solid rgba(var(--card-primary-rgb), 0.25);
    outline-offset: 3px;
}

.modern-shell .identity-card__qr > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    transition: filter 160ms ease, transform 160ms ease;
}

.modern-shell a.identity-card__qr:hover > img,
.modern-shell a.identity-card__qr:focus > img {
    filter: contrast(1.08) saturate(1.08);
    transform: scale(1.07);
}

.modern-shell .identity-card__qr-preview {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    z-index: 8;
    width: 156px;
    padding: 8px 8px 6px;
    visibility: hidden;
    color: #53617c;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(var(--card-primary-rgb), 0.2);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(35, 55, 98, 0.24);
    opacity: 0;
    pointer-events: none;
    transform: translate(-7px, -50%) scale(0.96);
    transform-origin: left center;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.modern-shell .identity-card__qr-preview::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(var(--card-primary-rgb), 0.2);
    border-bottom: 1px solid rgba(var(--card-primary-rgb), 0.2);
    transform: translateY(-50%) rotate(45deg);
}

.modern-shell .identity-card__qr-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 9px;
}

.modern-shell .identity-card__qr-preview small {
    display: block;
    margin-top: 4px;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.modern-shell a.identity-card__qr:hover .identity-card__qr-preview,
.modern-shell a.identity-card__qr:focus .identity-card__qr-preview {
    visibility: visible;
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}

.modern-shell .identity-card.is-exporting .identity-card__qr-preview {
    display: none;
}

.modern-shell .identity-card__qr.is-locked {
    align-content: center;
    gap: 5px;
    background: repeating-linear-gradient(135deg, #f5f7fc 0, #f5f7fc 7px, #edf1f8 7px, #edf1f8 14px);
}

.modern-shell .identity-card__qr.is-locked i {
    color: #8290aa;
    font-size: 1rem;
}

.modern-shell .identity-card__qr.is-locked span {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modern-shell .identity-card__links {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.modern-shell .identity-card__links a,
.modern-shell .identity-card__private-note {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    color: #53617c;
    text-decoration: none;
}

.modern-shell .identity-card__links a > span,
.modern-shell .identity-card__private-note > i {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    color: var(--card-primary-deep);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(var(--card-primary-rgb), 0.13));
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 0.62rem;
}

.modern-shell .identity-card__links a b,
.modern-shell .identity-card__private-note span {
    overflow: hidden;
    font-size: 0.61rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .identity-card__links a:hover,
.modern-shell .identity-card__links a:focus {
    color: var(--card-primary-deep);
}

.modern-shell .identity-card__links [data-card-contact].is-preview-hidden,
.modern-shell .identity-card__private-note.is-preview-hidden {
    display: none;
}

.modern-shell .identity-card__company {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    min-height: 24px;
    margin-top: 0;
    padding-top: 4px;
    text-align: center;
}

.modern-shell .identity-card__company::before {
    content: "";
    width: 36px;
    height: 1px;
    margin-bottom: 5px;
    background: linear-gradient(90deg, transparent, var(--card-primary-light), transparent);
}

.modern-shell .identity-card__company strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--card-primary-deep);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.modern-shell .identity-card__company span {
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: #7a88a3;
    font-size: 0.5rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes identity-card-reveal {
    from { opacity: 0; transform: perspective(1100px) translateY(24px) scale(0.97); }
    to { opacity: 1; transform: perspective(1100px) translateY(0) scale(1); }
}

@keyframes identity-wave-flow {
    from { transform: translate(-60px); }
    to { transform: translate(115px); }
}

.modern-shell .profile-card-showcase {
    width: 100%;
    max-width: 100%;
    padding: 1.2rem;
    overflow: hidden;
    border-radius: 20px;
}

.modern-shell .profile-card-showcase__header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.modern-shell .profile-card-showcase__eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--modern-accent-strong);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.modern-shell .profile-card-showcase__header h2 {
    margin: 0;
    color: #253858;
    font-size: 1.12rem;
    font-weight: 800;
}

.modern-shell .profile-card-showcase__header p {
    max-width: 650px;
    margin: 0.35rem 0 0;
    color: var(--modern-subtext);
    font-size: 0.76rem;
    line-height: 1.55;
}

.modern-shell .profile-card-state {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.38rem;
    align-items: center;
    padding: 0.46rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
}

.modern-shell .profile-card-state.is-live {
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
}

.modern-shell .profile-card-state.is-draft {
    color: var(--modern-muted-text);
    background: var(--modern-muted-bg);
}

.modern-shell .profile-card-showcase__grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 1.1fr);
    gap: 1.25rem;
    align-items: start;
    min-width: 0;
}

.modern-shell .profile-card-showcase__preview,
.public-card-page {
    --glass-light-x: 52%;
    --glass-light-y: 18%;
    --glass-shift-x: 0px;
    --glass-shift-y: 0px;
    --glass-shift-x-reverse: 0px;
    --glass-shift-y-reverse: 0px;
}

.modern-shell .profile-card-showcase__preview {
    position: relative;
    display: grid;
    min-height: 620px;
    place-items: center;
    padding: 1.2rem;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.56) 15%, transparent 39%),
        radial-gradient(ellipse at 54% 68%, rgba(78, 115, 223, 0.18), transparent 31%),
        radial-gradient(circle at 13% 88%, rgba(78, 115, 223, 0.24), transparent 36%),
        linear-gradient(145deg, #f9fbff 0%, #e8efff 48%, #c5d3f5 100%);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 16px 34px rgba(64, 90, 155, 0.11);
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.modern-shell .profile-card-showcase__preview .identity-card {
    max-width: 100%;
}

.modern-shell .profile-card-showcase__preview::before,
.modern-shell .profile-card-showcase__preview::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 42%, rgba(78, 115, 223, 0.08) 100%);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.78),
        inset 0 -1px rgba(54, 89, 183, 0.1),
        0 18px 38px rgba(64, 90, 155, 0.11);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    pointer-events: none;
}

.modern-shell .profile-card-showcase__preview::before {
    top: -82px;
    left: -70px;
    transform: translate3d(var(--glass-shift-x), var(--glass-shift-y), 0);
}

.modern-shell .profile-card-showcase__preview::after {
    right: -72px;
    bottom: -88px;
    width: 220px;
    height: 220px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.58), rgba(213, 225, 255, 0.2) 44%, rgba(78, 115, 223, 0.14) 100%);
    transform: translate3d(var(--glass-shift-x-reverse), var(--glass-shift-y-reverse), 0);
}

.modern-shell .profile-card-showcase__preview > * {
    position: relative;
    z-index: 1;
}

.modern-shell .profile-card-share-panel {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(240, 245, 255, 0.38));
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 14px 30px rgba(64, 90, 155, 0.08);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    overflow: hidden;
}

.modern-shell .profile-card-share-panel__intro {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.modern-shell .profile-card-share-panel__intro > div {
    min-width: 0;
}

.modern-shell .profile-card-share-panel__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, rgba(var(--modern-accent-rgb), 0.92), rgba(var(--modern-accent-rgb), 0.56));
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 8px 16px rgba(var(--modern-accent-rgb), 0.2);
}

.modern-shell .profile-card-share-panel__intro h3 {
    margin: 0;
    color: #253858;
    font-size: 0.92rem;
    font-weight: 800;
}

.modern-shell .profile-card-share-panel__intro p {
    margin: 0.25rem 0 0;
    color: var(--modern-subtext);
    font-size: 0.7rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.modern-shell .profile-card-share-panel__qr,
.modern-shell .profile-card-share-panel__locked {
    display: flex;
    min-height: 156px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    color: var(--modern-subtext);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(229, 237, 255, 0.34));
    border: 1px dashed rgba(78, 115, 223, 0.22);
    border-radius: 14px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    text-align: center;
}

.modern-shell .profile-card-share-panel__qr {
    color: #53627f;
    cursor: pointer;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.modern-shell .profile-card-share-panel__qr:hover,
.modern-shell .profile-card-share-panel__qr:focus {
    color: var(--modern-accent-strong);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(220, 231, 255, 0.5));
    border-color: rgba(var(--modern-accent-rgb), 0.42);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.88), 0 12px 24px rgba(var(--modern-accent-rgb), 0.12);
    text-decoration: none;
    transform: translateY(-2px);
}

.modern-shell .profile-card-share-panel__qr:focus-visible {
    outline: 3px solid rgba(var(--modern-accent-rgb), 0.22);
    outline-offset: 3px;
}

.modern-shell .profile-card-share-panel__qr img {
    width: 116px;
    height: 116px;
    margin-bottom: 0.5rem;
    border: 6px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(45, 66, 105, 0.13);
    transition: transform 160ms ease;
}

.modern-shell .profile-card-share-panel__qr:hover img,
.modern-shell .profile-card-share-panel__qr:focus img {
    transform: scale(1.05);
}

.modern-shell .profile-card-share-panel__qr strong {
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
}

.modern-shell .profile-card-share-panel__qr span,
.modern-shell .profile-card-share-panel__locked span {
    font-size: 0.65rem;
    font-weight: 700;
}

.modern-shell .profile-card-share-panel__locked i {
    margin-bottom: 0.45rem;
    color: #8390aa;
    font-size: 1.15rem;
}

.modern-shell .profile-card-share-panel__locked strong {
    margin-bottom: 0.2rem;
    color: #53627f;
    font-size: 0.76rem;
}

.modern-shell .profile-card-share-panel__url {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.72rem 2.8rem 0.72rem 0.8rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.modern-shell .profile-card-share-panel__url > span {
    display: block;
    margin-bottom: 0.24rem;
    color: #7c8aa6;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.modern-shell .profile-card-share-panel__url code {
    display: block;
    overflow: hidden;
    color: #405475;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .profile-card-icon-button {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    color: var(--modern-accent-strong);
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 9px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transform: translateY(-50%);
}

.modern-shell .profile-card-icon-button:hover,
.modern-shell .profile-card-icon-button:focus {
    color: #ffffff;
    background: var(--modern-accent-strong);
    border-color: var(--modern-accent-strong);
}

.modern-shell .profile-card-icon-button.is-copied::after {
    content: attr(data-copied-label);
    position: absolute;
    right: 38px;
    padding: 0.28rem 0.45rem;
    color: #ffffff;
    background: #253858;
    border-radius: 7px;
    font-size: 0.58rem;
    white-space: nowrap;
}

.modern-shell .profile-card-share-panel__actions {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modern-shell .profile-card-settings {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.2rem;
    padding: 0.9rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(239, 244, 255, 0.42));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.modern-shell .profile-card-settings__title {
    margin-bottom: 0.75rem;
}

.modern-shell .profile-card-settings__title strong,
.modern-shell .profile-card-settings__title span {
    display: block;
}

.modern-shell .profile-card-settings__title strong {
    color: #2f4263;
    font-size: 0.78rem;
}

.modern-shell .profile-card-settings__title > span {
    margin-top: 0.12rem;
    color: #8793aa;
    font-size: 0.62rem;
}

.modern-shell .profile-card-publish-option,
.modern-shell .profile-card-setting-option {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 40px;
    gap: 0.65rem;
    align-items: center;
    margin: 0;
    padding: 0.62rem 0.7rem;
    color: #657694;
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 11px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.76);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    max-width: 100%;
    min-width: 0;
}

.modern-shell .profile-card-publish-option {
    margin-bottom: 0.75rem;
    background: linear-gradient(145deg, rgba(var(--modern-accent-rgb), 0.11), rgba(255, 255, 255, 0.58));
    border-color: rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .profile-card-publish-option:hover,
.modern-shell .profile-card-setting-option:hover {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(var(--modern-accent-rgb), 0.25);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 7px 16px rgba(64, 90, 155, 0.07);
}

.modern-shell .profile-card-setting-option.is-unavailable {
    cursor: not-allowed;
    opacity: 0.58;
}

.modern-shell .profile-card-setting-option.is-unavailable:hover {
    background: rgba(255, 255, 255, 0.54);
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.76);
}

.modern-shell .profile-card-publish-option input[type="checkbox"],
.modern-shell .profile-card-setting-option input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.modern-shell .profile-card-setting-option__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--modern-accent-strong);
    background: rgba(var(--modern-accent-rgb), 0.11);
    border-radius: 10px;
    font-size: 0.8rem;
}

.modern-shell .profile-card-setting-option__copy {
    min-width: 0;
}

.modern-shell .profile-card-setting-option__copy b,
.modern-shell .profile-card-setting-option__copy small {
    display: block;
}

.modern-shell .profile-card-setting-option__copy b {
    color: #405475;
    font-size: 0.7rem;
}

.modern-shell .profile-card-setting-option__copy small {
    margin-top: 0.1rem;
    color: #8491a9;
    font-size: 0.59rem;
    line-height: 1.35;
}

.modern-shell .profile-card-setting-option__toggle {
    position: relative;
    width: 40px;
    height: 24px;
    background: #cbd4e3;
    border-radius: 999px;
    transition: background 160ms ease;
}

.modern-shell .profile-card-setting-option__toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(34, 51, 84, 0.24);
    transition: transform 160ms ease;
}

.modern-shell .profile-card-publish-option input:checked ~ .profile-card-setting-option__toggle,
.modern-shell .profile-card-setting-option input:checked ~ .profile-card-setting-option__toggle {
    background: var(--modern-accent);
}

.modern-shell .profile-card-publish-option input:checked ~ .profile-card-setting-option__toggle::after,
.modern-shell .profile-card-setting-option input:checked ~ .profile-card-setting-option__toggle::after {
    transform: translateX(16px);
}

.modern-shell .profile-card-publish-option input:focus-visible ~ .profile-card-setting-option__toggle,
.modern-shell .profile-card-setting-option input:focus-visible ~ .profile-card-setting-option__toggle {
    outline: 3px solid rgba(var(--modern-accent-rgb), 0.22);
    outline-offset: 2px;
}

.modern-shell .profile-card-settings__label {
    display: block;
    margin-bottom: 0.4rem;
    color: #7c8aa6;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modern-shell .profile-card-settings__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.modern-shell .profile-card-editor {
    position: relative;
    width: 100%;
    max-width: 360px;
    min-width: 0;
}

.modern-shell .profile-card-designer {
    position: static;
}

.modern-shell .profile-card-designer__toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    color: var(--modern-accent-strong);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(235, 242, 255, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 13px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 5px 14px rgba(43, 70, 132, 0.16);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    cursor: pointer;
    list-style: none;
}

.modern-shell .profile-card-designer__toggle::-webkit-details-marker {
    display: none;
}

.modern-shell .profile-card-designer__toggle::marker {
    content: "";
}

.modern-shell .profile-card-designer[open] > .profile-card-designer__toggle,
.modern-shell .profile-card-designer__toggle:hover {
    color: #ffffff;
    background: var(--modern-accent-strong);
}

.modern-shell .profile-card-designer__panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding: 12px;
    color: #405475;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 255, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 8px 20px rgba(43, 70, 132, 0.1);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.modern-shell .profile-card-designer__panel > strong {
    display: block;
    margin-bottom: 0.65rem;
    font-size: 0.85rem;
}

.modern-shell .profile-card-themes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.modern-shell .profile-card-themes > legend {
    width: 100%;
    margin-bottom: 0.4rem;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
}

.modern-shell .profile-card-theme {
    position: relative;
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 0.55rem 0.3rem;
    place-items: center;
    color: #405475;
    background: linear-gradient(145deg, #ffffff, var(--card-primary-soft));
    border: 1px solid rgba(var(--card-primary-rgb), 0.22);
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.modern-shell .profile-card-theme input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modern-shell .profile-card-theme__swatch {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--card-primary-deep), var(--card-primary-light));
    border: 1px solid rgba(var(--card-primary-rgb), 0.35);
    border-radius: 50%;
}

.modern-shell .profile-card-theme input:checked ~ .profile-card-theme__swatch {
    background: var(--card-primary-deep);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--card-primary-deep);
}

.modern-shell .profile-card-theme input:checked ~ .profile-card-theme__swatch::after {
    content: "\2713";
    font-weight: 800;
}

.modern-shell .profile-card-theme input:focus ~ .profile-card-theme__swatch {
    outline: 2px solid #24395f;
    outline-offset: 4px;
}

.modern-shell .profile-card-designer__photo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0.25rem 0.6rem;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(117, 139, 184, 0.18);
    font-size: 0.75rem;
}

.modern-shell .profile-card-designer__photo > label {
    margin: 0;
    font-weight: 700;
}

.modern-shell .profile-card-designer__photo > output {
    text-align: center;
}

.modern-shell .profile-card-designer__photo [data-photo-zoom-control] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    accent-color: var(--modern-accent-strong);
}

.modern-shell .profile-card-designer__photo .profile-card-icon-button {
    position: static;
    width: 44px;
    height: 44px;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modern-shell .profile-card-designer__photo :disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.modern-shell .profile-card-designer__hint {
    margin: 0.5rem 0 0;
    color: #596984;
    font-size: 0.75rem;
    line-height: 1.5;
}

.modern-shell .profile-card-photo-surface {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    visibility: hidden;
    background: transparent;
    border: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

.modern-shell .identity-card.is-photo-editing {
    transform: none !important;
    transition: none;
}

.modern-shell .identity-card.is-photo-editing .profile-card-photo-surface:not(:disabled) {
    visibility: visible;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}

.modern-shell .identity-card.is-photo-dragging .profile-card-photo-surface:not(:disabled) {
    cursor: grabbing;
}

.modern-shell .profile-card-designer__toggle:focus-visible,
.modern-shell .profile-card-designer__photo :focus-visible,
.modern-shell .profile-card-photo-surface:focus-visible {
    outline: 3px solid #24395f;
    outline-offset: 3px;
}

.modern-shell .profile-card-photo-surface:focus-visible {
    outline-offset: -4px;
}

.modern-shell .profile-image-crop-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 520px;
    margin: 1rem auto;
}

.modern-shell .profile-image-crop-modal .modal-content {
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 244, 255, 0.96));
    border: 1px solid rgba(var(--modern-accent-rgb), 0.16);
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(20, 35, 75, 0.24);
}

.modern-shell .profile-image-crop-modal .modal-header {
    padding: 0.9rem 1.1rem;
}

.modern-shell .profile-image-crop-modal .modal-title {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
}

.modern-shell .profile-image-crop-modal .modal-title i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    font-size: 0.72rem;
}

.modern-shell .profile-image-crop-modal .modal-body {
    padding: 1.1rem;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.88), rgba(236, 242, 255, 0.72));
}

.modern-shell .profile-image-crop__description {
    max-width: 32rem;
    margin: 0 auto 0.9rem;
    color: #62718e;
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: center;
}

.modern-shell .profile-image-crop__stage {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    overflow: hidden;
    background: #111f49;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.32);
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(20, 35, 75, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    touch-action: none;
}

.modern-shell .profile-image-crop__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%, rgba(5, 13, 39, 0.24));
    pointer-events: none;
}

.modern-shell .profile-image-crop__stage > img {
    position: absolute;
    z-index: 0;
    max-width: none;
    user-select: none;
    cursor: grab;
    transform-origin: center center;
}

.modern-shell .profile-image-crop__stage.is-dragging > img {
    cursor: grabbing;
}

.modern-shell .profile-image-crop__frame {
    position: absolute;
    top: 14%;
    left: 14%;
    z-index: 2;
    display: block;
    width: 72%;
    height: auto;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    background:
        linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, 0.16) 33.2%, transparent 33.4%, transparent 66.6%, rgba(255, 255, 255, 0.16) 66.8%, transparent 67%),
        linear-gradient(0deg, transparent 33%, rgba(255, 255, 255, 0.16) 33.2%, transparent 33.4%, transparent 66.6%, rgba(255, 255, 255, 0.16) 66.8%, transparent 67%);
    box-shadow: 0 0 0 999px rgba(7, 15, 42, 0.3), inset 0 0 0 1px rgba(20, 35, 75, 0.2);
    cursor: grab;
    pointer-events: auto;
}

.modern-shell .profile-image-crop__stage.is-dragging .profile-image-crop__frame {
    cursor: grabbing;
}

.modern-shell .profile-image-crop__resize {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #ffffff;
    background: var(--modern-accent-strong);
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 10px 0 16px 0;
    box-shadow: 0 5px 12px rgba(20, 35, 75, 0.18);
    cursor: nwse-resize;
    font-size: 0.62rem;
    pointer-events: auto;
    transition: background 140ms ease, transform 140ms ease;
}

.modern-shell .profile-image-crop__resize:hover,
.modern-shell .profile-image-crop__resize:focus-visible {
    background: var(--modern-accent-light);
    outline: none;
    transform: scale(1.04);
}

.modern-shell .profile-image-crop__stage.is-resizing .profile-image-crop__resize {
    cursor: nwse-resize;
}
.modern-shell .profile-image-crop__hint {
    display: flex;
    width: fit-content;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0.75rem auto 0.9rem;
    padding: 0.42rem 0.7rem;
    color: #687794;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.86);
    font-size: 0.62rem;
    line-height: 1.35;
    text-align: center;
}

.modern-shell .profile-image-crop__hint i {
    color: var(--modern-accent-strong);
}

.modern-shell .profile-image-crop__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    gap: 0.9rem;
    align-items: center;
    margin: 0;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 16px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.88), 0 8px 18px rgba(43, 70, 132, 0.06);
}

.modern-shell .profile-image-crop__control-group {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.modern-shell .profile-image-crop__control-group--zoom {
    padding-left: 0.9rem;
    border-left: 1px solid rgba(117, 139, 184, 0.18);
}

.modern-shell .profile-image-crop__control-label {
    color: #7383a0;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modern-shell .profile-image-crop__navigation {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    gap: 4px;
    justify-content: start;
}

.modern-shell .profile-image-crop__action {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--modern-accent-strong);
    background: #ffffff;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 10px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.86), 0 4px 10px rgba(20, 35, 75, 0.08);
    font-size: 0.62rem;
    transition: transform 140ms ease, color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.modern-shell .profile-image-crop__action:hover,
.modern-shell .profile-image-crop__action:focus-visible {
    color: #ffffff;
    background: var(--modern-accent-strong);
    border-color: var(--modern-accent-strong);
    outline: none;
    transform: translateY(-1px);
}

.modern-shell .profile-image-crop__action:active {
    transform: translateY(0);
}

.modern-shell .profile-image-crop__zoom-controls {
    display: grid;
    grid-template-columns: 34px minmax(42px, 1fr) 34px;
    gap: 4px;
    align-items: center;
}

.modern-shell .profile-image-crop__zoom-value {
    color: #53617c;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

.modern-shell .profile-image-crop__status {
    min-height: 1.1rem;
    margin: 0.65rem 0 0;
    color: var(--modern-danger-text, #b42318);
    font-size: 0.65rem;
    text-align: center;
}

.modern-shell .profile-image-crop-modal .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.8rem 1.1rem 1rem;
    background: rgba(255, 255, 255, 0.82);
}

.modern-shell .profile-image-crop-modal .modal-footer .btn {
    min-height: 40px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
}

.modern-shell .profile-image-crop-modal .modal-footer .btn-light {
    color: #596984;
    background: #f1f4fa;
    border-color: #dce3f0;
}

.modern-shell .profile-image-crop-modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(var(--modern-accent-rgb), 0.2);
}

@media (max-width: 459.98px) {
    .modern-shell .profile-image-crop__controls {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .modern-shell .profile-image-crop__control-group--zoom {
        padding-top: 0.75rem;
        padding-left: 0;
        border-top: 1px solid rgba(117, 139, 184, 0.18);
        border-left: 0;
    }

    .modern-shell .profile-image-crop__control-label,
    .modern-shell .profile-image-crop__zoom-controls {
        justify-self: center;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .profile-image-crop-modal .modal-dialog {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .modern-shell .profile-image-crop-modal .modal-body {
        padding: 0.85rem;
    }

    .modern-shell .profile-image-crop-modal .modal-footer {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }
}
.modern-shell .profile-card-settings__hint {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 0.65rem;
    color: #7383a0;
    font-size: 0.61rem;
}

.modern-shell .profile-card-settings.is-dirty .profile-card-settings__hint {
    color: var(--modern-accent-strong);
    font-weight: 700;
}

.modern-shell .profile-card-live-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.modern-shell .js-profile-card-download {
    position: relative;
}

.modern-shell .js-profile-card-download.is-loading > * {
    opacity: 0.3;
}

.modern-shell .js-profile-card-download.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: identity-card-spin 650ms linear infinite;
}

@keyframes identity-card-spin {
    to { transform: rotate(360deg); }
}

.public-card-shell {
    --public-card-primary: #4e73df;
    --public-card-primary-deep: #405a9b;
    --public-card-primary-rgb: 78, 115, 223;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: var(--public-card-primary-deep);
    background: #dbe5fb;
    font-family: "Nunito", "Segoe UI", sans-serif;
}

.public-card-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    padding: 1.5rem 1rem;
    place-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.58) 15%, transparent 40%),
        radial-gradient(ellipse at 54% 68%, rgba(var(--public-card-primary-rgb), 0.18), transparent 31%),
        radial-gradient(circle at 12% 86%, rgba(var(--public-card-primary-rgb), 0.24), transparent 34%),
        linear-gradient(145deg, #fbfcff 0%, #e8efff 48%, #bcccf2 100%);
    isolation: isolate;
}

.public-card-page::before,
.public-card-page::after {
    --public-card-bubble-rotation: 0deg;
    --public-card-bubble-x: var(--glass-shift-x);
    --public-card-bubble-y: var(--glass-shift-y);
    content: "";
    position: absolute;
    z-index: 0;
    width: min(48vw, 320px);
    height: min(48vw, 320px);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2) 42%, rgba(var(--public-card-primary-rgb), 0.1) 100%);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px rgba(54, 89, 183, 0.1),
        0 24px 48px rgba(49, 76, 150, 0.11);
    backdrop-filter: blur(32px) saturate(155%);
    -webkit-backdrop-filter: blur(32px) saturate(155%);
    pointer-events: none;
    animation: public-card-bubble-drift 12s ease-in-out infinite alternate;
}

.public-card-page::before {
    --public-card-bubble-rotation: 12deg;
    top: -110px;
    left: -90px;
}

.public-card-page::after {
    --public-card-bubble-rotation: -16deg;
    --public-card-bubble-x: var(--glass-shift-x-reverse);
    --public-card-bubble-y: var(--glass-shift-y-reverse);
    right: -105px;
    bottom: -125px;
    width: min(58vw, 390px);
    height: min(58vw, 390px);
    background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.62), rgba(213, 225, 255, 0.2) 44%, rgba(var(--public-card-primary-rgb), 0.16) 100%);
    animation-delay: -5s;
}

.public-card-page__content {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 380px);
    flex-direction: column;
    align-items: center;
    isolation: isolate;
}

.public-card-page__content::before {
    content: "";
    position: absolute;
    inset: -0.85rem;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 28px;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.22) 54%, rgba(var(--public-card-primary-rgb), 0.08)),
        radial-gradient(circle at var(--glass-light-x) var(--glass-light-y), rgba(255, 255, 255, 0.42), transparent 38%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 1px 0 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(54, 89, 183, 0.1),
        0 22px 54px rgba(64, 90, 155, 0.13);
    backdrop-filter: blur(30px) saturate(155%);
    -webkit-backdrop-filter: blur(30px) saturate(155%);
}

.public-card-actions {
    display: grid;
    width: min(100%, 360px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.72rem;
}

.public-card-action {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    min-height: 48px;
    padding: 0.52rem 0.56rem;
    color: var(--public-card-primary-deep);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(235, 242, 255, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), inset 0 -1px rgba(54, 89, 183, 0.08), 0 7px 16px rgba(64, 90, 155, 0.09);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.public-card-action::before,
.public-card-whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.34), transparent 42%, rgba(255, 255, 255, 0.08) 68%, transparent);
    pointer-events: none;
}

.public-card-action:hover,
.public-card-action:focus {
    color: var(--public-card-primary-deep);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(var(--public-card-primary-rgb), 0.14));
    border-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 20px rgba(64, 90, 155, 0.14);
    outline: none;
    text-decoration: none;
    transform: translateY(-2px);
}

.public-card-action:focus-visible,
.public-card-whatsapp:focus-visible {
    outline: 3px solid rgba(var(--public-card-primary-rgb), 0.28);
    outline-offset: 3px;
}

.public-card-action > i {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: var(--public-card-primary-deep);
    background: rgba(var(--public-card-primary-rgb), 0.11);
    border-radius: 8px;
    font-size: 0.68rem;
}

.public-card-action b {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-card-action--primary {
    color: var(--public-card-primary-deep);
    background: linear-gradient(145deg, rgba(var(--public-card-primary-rgb), 0.2), rgba(255, 255, 255, 0.46));
    border-color: rgba(255, 255, 255, 0.92);
}

.public-card-action--primary:hover,
.public-card-action--primary:focus {
    color: var(--public-card-primary-deep);
}

.public-card-action--primary > i {
    color: var(--public-card-primary-deep);
    background: rgba(255, 255, 255, 0.58);
}

.public-card-whatsapp {
    position: relative;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    width: min(100%, 360px);
    margin-top: 0.58rem;
    padding: 0.56rem 0.85rem;
    color: var(--public-card-primary-deep);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(235, 242, 255, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 7px 16px rgba(64, 90, 155, 0.08);
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.public-card-whatsapp:hover,
.public-card-whatsapp:focus {
    color: var(--public-card-primary-deep);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(var(--public-card-primary-rgb), 0.14));
    border-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 20px rgba(64, 90, 155, 0.12);
    text-decoration: none;
    transform: translateY(-2px);
}

.public-card-whatsapp i {
    font-size: 1rem;
}

.public-card-page__privacy {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0.62rem 0 0;
    color: rgba(64, 90, 155, 0.76);
    font-size: 0.58rem;
    font-weight: 700;
    text-align: center;
}

@keyframes public-card-bubble-drift {
    from { transform: translate3d(var(--public-card-bubble-x), var(--public-card-bubble-y), 0) rotate(var(--public-card-bubble-rotation)); }
    to { transform: translate3d(calc(var(--public-card-bubble-x) + 14px), calc(var(--public-card-bubble-y) - 10px), 0) rotate(calc(var(--public-card-bubble-rotation) + 4deg)); }
}

@media (max-width: 991.98px) {
    .modern-shell .profile-card-showcase__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .modern-shell .profile-card-showcase__preview {
        min-height: 590px;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .identity-card {
        --card-qr-size: 80px;
    }

    .modern-shell .identity-card:not(.is-exporting) {
        display: flex;
        flex-direction: column;
        height: auto;
        aspect-ratio: auto;
    }

    .modern-shell .identity-card:not(.is-exporting) .identity-card__hero {
        flex: 0 0 auto;
        height: clamp(220px, 70vw, 260px);
    }

    .modern-shell .identity-card:not(.is-exporting) .identity-card__body {
        flex: 1 0 auto;
        height: auto;
        min-height: 210px;
    }

    .modern-shell .identity-card:not(.is-exporting) .identity-card__identity h2,
    .modern-shell .identity-card:not(.is-exporting) .identity-card__role,
    .modern-shell .identity-card:not(.is-exporting) .identity-card__links a b,
    .modern-shell .identity-card:not(.is-exporting) .identity-card__private-note span,
    .modern-shell .identity-card:not(.is-exporting) .identity-card__company strong,
    .modern-shell .identity-card:not(.is-exporting) .identity-card__company span {
        overflow: visible;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .modern-shell .profile-card-showcase {
        padding: 0.8rem;
        overflow: hidden;
        border-radius: 16px;
    }

    .modern-shell .profile-card-showcase__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .modern-shell .profile-card-showcase__grid {
        gap: 0.8rem;
    }

    .modern-shell .profile-card-showcase__preview {
        min-height: 0;
        padding: 0.7rem;
        overflow: hidden;
    }

    .modern-shell .profile-card-showcase__preview::before {
        top: -40px;
        left: -40px;
        width: 92px;
        height: 92px;
    }

    .modern-shell .profile-card-showcase__preview::after {
        right: -48px;
        bottom: -48px;
        width: 110px;
        height: 110px;
    }

    .modern-shell .profile-card-showcase__preview .profile-card-editor,
    .modern-shell .profile-card-showcase__preview .identity-card {
        width: min(100%, 320px);
        margin-right: auto;
        margin-left: auto;
    }

    .modern-shell .profile-card-share-panel {
        padding: 0.8rem;
    }

    .modern-shell .profile-card-share-panel__actions,
    .modern-shell .profile-card-share-panel__actions .btn {
        width: 100%;
        max-width: 100%;
    }

    .public-card-page {
        align-items: safe center;
        justify-items: center;
        padding: 0.85rem 0.72rem 1.2rem;
    }

    .public-card-page__content::before {
        inset: -0.3rem;
        border-radius: 24px;
    }

    .public-card-actions {
        gap: 0.4rem;
    }

    .public-card-action {
        grid-template-columns: 1fr;
        gap: 0.22rem;
        min-height: 58px;
        padding: 0.45rem 0.25rem;
        text-align: center;
    }

    .public-card-action > i {
        margin: 0 auto;
    }
}

@media (max-width: 359.98px) {
    .modern-shell .identity-card:not(.is-exporting) {
        --card-qr-size: 64px;
    }

    .modern-shell .identity-card:not(.is-exporting) .identity-card__body {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-shell .identity-card,
    .modern-shell .identity-card::after,
    .modern-shell .identity-card__portrait,
    .modern-shell .identity-card__portrait-placeholder,
    .modern-shell a.identity-card__qr,
    .modern-shell .identity-card__qr img,
    .modern-shell .identity-card__qr-preview,
    .modern-shell .profile-card-showcase__preview::before,
    .modern-shell .profile-card-showcase__preview::after,
    .modern-shell .profile-card-share-panel__qr,
    .modern-shell .profile-card-share-panel__qr img,
    .modern-shell .profile-card-publish-option,
    .modern-shell .profile-card-setting-option,
    .modern-shell .profile-card-setting-option__toggle,
    .modern-shell .profile-card-setting-option__toggle::after,
    .public-card-page::before,
    .public-card-page::after,
    .public-card-action,
    .public-card-whatsapp,
    .modern-shell .js-profile-card-download.is-loading::after {
        animation: none !important;
        transition: none !important;
    }

}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modern-shell .identity-card,
    .modern-shell .identity-card__body,
    .modern-shell .identity-card__qr,
    .modern-shell .profile-card-share-panel,
    .modern-shell .profile-card-share-panel__qr,
    .modern-shell .profile-card-share-panel__locked,
    .modern-shell .profile-card-share-panel__url,
    .modern-shell .profile-card-settings,
    .modern-shell .profile-card-publish-option,
    .modern-shell .profile-card-setting-option,
    .modern-shell .profile-card-designer__panel,
    .modern-shell .profile-card-designer__toggle {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(228, 237, 255, 0.9));
    }

    .modern-shell .identity-card__body {
        background: linear-gradient(180deg, var(--card-body-top) 0%, var(--card-body-middle) 46%, var(--card-body-bottom) 100%);
    }

    .modern-shell .profile-card-showcase__preview::before,
    .modern-shell .profile-card-showcase__preview::after,
    .public-card-page::before,
    .public-card-page::after {
        background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.7), rgba(213, 225, 255, 0.24));
    }

    .modern-shell .identity-card__wave-logo {
        background: var(--card-body-top);
    }

    .public-card-page__content::before {
        background: linear-gradient(145deg, #f9fbff, #e4edff);
    }

    .public-card-action,
    .public-card-whatsapp {
        color: #405a9b;
        background: linear-gradient(145deg, #f9fbff, #e4edff);
    }
}

/* Customer detail: compact support and billing summary sidebar */
.modern-shell .customer-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.modern-shell .customer-detail-panel {
    padding: 1rem;
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    background: var(--modern-surface);
    box-shadow: 0 6px 18px rgba(15, 28, 64, 0.06);
}

.modern-shell .customer-detail-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.modern-shell .customer-status-panel .customer-detail-panel-heading {
    margin-bottom: 0;
}

.modern-shell .customer-detail-panel-heading h5 {
    margin: 0;
    color: #263b64;
    font-size: 1rem;
    font-weight: 800;
}

.modern-shell .customer-detail-disclosure {
    padding: 0;
    overflow: hidden;
}

.modern-shell .customer-disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.18s ease;
}

.modern-shell .customer-disclosure-summary::-webkit-details-marker {
    display: none;
}

.modern-shell .customer-disclosure-summary:hover {
    background: #f9fbff;
}

.modern-shell .customer-disclosure-summary:focus-visible {
    outline: 3px solid rgba(var(--modern-accent-rgb), 0.2);
    outline-offset: -3px;
}

.modern-shell .customer-disclosure-heading,
.modern-shell .customer-disclosure-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.modern-shell .customer-disclosure-heading > span:last-child {
    min-width: 0;
}

.modern-shell .customer-disclosure-heading strong,
.modern-shell .customer-disclosure-heading small {
    display: block;
}

.modern-shell .customer-disclosure-heading strong {
    color: #263b64;
    font-size: 0.86rem;
    font-weight: 800;
}

.modern-shell .customer-disclosure-heading small {
    margin-top: 0.08rem;
    color: var(--modern-subtext);
    font-size: 0.66rem;
}

.modern-shell .customer-disclosure-meta {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.modern-shell .customer-disclosure-meta > strong {
    color: var(--modern-accent-strong);
    font-size: 0.86rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.modern-shell .customer-disclosure-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--modern-accent-strong);
    background: var(--modern-accent-soft);
    transition: transform 0.18s ease;
}

.modern-shell .customer-detail-disclosure[open] > .customer-disclosure-summary {
    border-bottom: 1px solid #e7edf8;
}

.modern-shell .customer-detail-disclosure[open] .customer-disclosure-toggle {
    transform: rotate(180deg);
}

.modern-shell .customer-disclosure-body {
    padding: 0.85rem 1rem 1rem;
}

.modern-shell .customer-detail-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--modern-accent-strong);
    background: var(--modern-accent-soft);
}

.modern-shell .customer-status-badge {
    flex: 0 0 auto;
    padding: 0.38rem 0.68rem;
    font-size: 0.74rem;
}

.modern-shell .customer-support-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.modern-shell .customer-support-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem;
    border: 1px solid #e7edf8;
    border-radius: 11px;
    background: #f9fbff;
}

.modern-shell .customer-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 0.86rem;
}

.modern-shell .customer-support-icon.is-billing {
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
}

.modern-shell .customer-support-icon.is-acs {
    color: var(--modern-info-text);
    background: var(--modern-info-bg);
}

.modern-shell .customer-support-icon.is-connector {
    color: var(--modern-accent-strong);
    background: var(--modern-accent-soft);
}

.modern-shell .customer-support-copy {
    min-width: 0;
}

.modern-shell .customer-support-copy strong,
.modern-shell .customer-support-copy span {
    display: block;
}

.modern-shell .customer-support-copy strong {
    color: #324568;
    font-size: 0.82rem;
    font-weight: 800;
}

.modern-shell .customer-support-copy span {
    margin-top: 0.08rem;
    color: var(--modern-subtext);
    font-size: 0.68rem;
}

.modern-shell .customer-support-item > .badge {
    justify-self: end;
    white-space: nowrap;
}

.modern-shell .customer-billing-profile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.65rem;
}

.modern-shell .customer-billing-profile > div {
    padding: 0.65rem 0.7rem;
    border: 1px solid #e7edf8;
    border-radius: 10px;
    background: #ffffff;
}

.modern-shell .customer-billing-profile span,
.modern-shell .customer-billing-profile strong {
    display: block;
}

.modern-shell .customer-billing-profile span {
    color: var(--modern-subtext);
    font-size: 0.66rem;
}

.modern-shell .customer-billing-profile strong {
    margin-top: 0.18rem;
    color: #324568;
    font-size: 0.76rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.modern-shell .customer-billing-automation {
    margin-top: 0.7rem;
    border: 1px solid #e7edf8;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
}

.modern-shell .customer-billing-automation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e7edf8;
    background: #f9fbff;
}

.modern-shell .customer-billing-automation-heading strong {
    color: #536483;
    font-size: 0.7rem;
    font-weight: 800;
}

.modern-shell .customer-billing-automation-heading span {
    color: var(--modern-subtext);
    font-size: 0.66rem;
    font-weight: 700;
}

.modern-shell .customer-billing-automation-list {
    padding: 0 0.75rem;
}

.modern-shell .customer-billing-automation-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.58rem 0;
    border-bottom: 1px solid #edf1f8;
}

.modern-shell .customer-billing-automation-item:last-child {
    border-bottom: 0;
}

.modern-shell .customer-billing-automation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--modern-accent-strong);
    background: var(--modern-accent-soft);
    font-size: 0.72rem;
}

.modern-shell .customer-billing-automation-icon.is-isolation {
    color: var(--modern-warning-text);
    background: var(--modern-warning-bg);
}

.modern-shell .customer-billing-automation-icon.is-whatsapp {
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
}

.modern-shell .customer-billing-automation-icon.is-payment {
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
}

.modern-shell .customer-billing-automation-item > div {
    min-width: 0;
}

.modern-shell .customer-billing-automation-item > div > strong,
.modern-shell .customer-billing-automation-item > div > span {
    display: block;
}

.modern-shell .customer-billing-automation-item strong {
    color: #324568;
    font-size: 0.74rem;
    font-weight: 800;
}

.modern-shell .customer-billing-automation-item > div > span {
    margin-top: 0.06rem;
    color: var(--modern-subtext);
    font-size: 0.63rem;
}

.modern-shell .customer-billing-automation-item > .badge {
    justify-self: end;
    white-space: nowrap;
}

.modern-shell .customer-billing-breakdown {
    margin: 0.7rem 0 0;
    padding: 0 0.8rem;
    border: 1px solid #e7edf8;
    border-radius: 11px;
    background: #ffffff;
}

.modern-shell .customer-billing-breakdown > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.52rem 0;
    border-bottom: 1px solid #edf1f8;
}

.modern-shell .customer-billing-breakdown > div:last-child {
    border-bottom: 0;
}

.modern-shell .customer-billing-breakdown dt,
.modern-shell .customer-billing-breakdown dd {
    margin: 0;
    font-size: 0.72rem;
}

.modern-shell .customer-billing-breakdown dt {
    color: var(--modern-subtext);
    font-weight: 700;
}

.modern-shell .customer-billing-breakdown dd {
    color: #3f5070;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.modern-shell .customer-invoice-payment {
    margin-top: 0.85rem;
    padding: 0.8rem;
    border: 1px solid #e7edf8;
    border-radius: 11px;
    background: #f9fbff;
}

.modern-shell .customer-invoice-payment-heading,
.modern-shell .customer-invoice-amounts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.modern-shell .customer-invoice-payment-heading span,
.modern-shell .customer-invoice-payment-heading strong,
.modern-shell .customer-invoice-amounts span,
.modern-shell .customer-invoice-amounts strong {
    display: block;
}

.modern-shell .customer-invoice-payment-heading span,
.modern-shell .customer-invoice-amounts span {
    color: var(--modern-subtext);
    font-size: 0.66rem;
    font-weight: 700;
}

.modern-shell .customer-invoice-payment-heading strong {
    margin-top: 0.12rem;
    color: #324568;
    font-size: 0.82rem;
    font-weight: 900;
}

.modern-shell .customer-invoice-payment progress {
    width: 100%;
    height: 7px;
    margin: 0.7rem 0 0.55rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--modern-muted-bg);
    appearance: none;
}

.modern-shell .customer-invoice-payment progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--modern-muted-bg);
}

.modern-shell .customer-invoice-payment progress::-webkit-progress-value,
.modern-shell .customer-invoice-payment progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--modern-success-text);
}

.modern-shell .customer-invoice-amounts > div:last-child {
    text-align: right;
}

.modern-shell .customer-invoice-amounts strong {
    margin-top: 0.12rem;
    color: #324568;
    font-size: 0.75rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.modern-shell .customer-invoice-facts {
    margin-top: 0.6rem;
}

.modern-shell .customer-billing-footer {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e7edf8;
}

.modern-shell .customer-billing-footer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.modern-shell .customer-billing-footer > div + div {
    margin-top: 0.58rem;
}

.modern-shell .customer-billing-footer span {
    color: var(--modern-subtext);
    font-size: 0.7rem;
    font-weight: 700;
}

.modern-shell .customer-billing-footer strong {
    color: #324568;
    font-size: 0.76rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.modern-shell .customer-latest-invoice > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    text-align: right;
}

.modern-shell .customer-billing-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px dashed #ccd7eb;
    border-radius: 11px;
    background: #f9fbff;
}

.modern-shell .customer-billing-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--modern-muted-text);
    background: var(--modern-muted-bg);
}

.modern-shell .customer-billing-empty strong {
    display: block;
    color: #324568;
    font-size: 0.8rem;
}

.modern-shell .customer-billing-empty p,
.modern-shell .customer-notes-panel p {
    margin: 0.2rem 0 0;
    color: var(--modern-subtext);
    font-size: 0.72rem;
    line-height: 1.55;
}

.modern-shell .customer-notes-panel p {
    margin-top: 0;
    white-space: pre-line;
}

@media (max-width: 991.98px) {
    .modern-shell .customer-detail-sidebar {
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 420px) {
    .modern-shell .customer-detail-panel-heading,
    .modern-shell .customer-billing-footer > div {
        flex-direction: column;
        align-items: flex-start;
    }

    .modern-shell .customer-status-badge {
        align-self: flex-start;
        text-align: left;
    }

    .modern-shell .customer-disclosure-summary {
        align-items: flex-start;
        padding: 0.8rem;
    }

    .modern-shell .customer-disclosure-heading,
    .modern-shell .customer-disclosure-meta {
        gap: 0.45rem;
    }

    .modern-shell .customer-disclosure-meta > strong {
        font-size: 0.76rem;
    }

    .modern-shell .customer-support-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .modern-shell .customer-support-item > .badge {
        grid-column: 2;
        justify-self: start;
    }

    .modern-shell .customer-billing-automation-item {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .modern-shell .customer-billing-automation-item > .badge {
        grid-column: 2;
        justify-self: start;
    }

    .modern-shell .customer-billing-profile {
        grid-template-columns: 1fr;
    }

    .modern-shell .customer-invoice-amounts {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell .customer-invoice-amounts > div:last-child {
        text-align: left;
    }
}

.modern-shell .dataTables_wrapper {
    margin-top: 0.35rem;
}

.modern-shell .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.modern-shell .dt-buttons .btn {
    margin: 0;
}

.modern-shell .dt-buttons .btn-inv-export {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border-radius: 10px !important;
    padding: 0.42rem 0.8rem !important;
    border: 1px solid var(--modern-border) !important;
    background: #fff !important;
    color: var(--modern-text) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 7px 16px rgba(15, 28, 64, 0.1);
    transition: all 0.16s ease;
}

.modern-shell .dt-buttons .btn-inv-export i {
    margin-right: 0;
    font-size: 0.86rem;
}

.modern-shell .dt-buttons .btn-inv-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 28, 64, 0.16);
}

.modern-shell .dt-buttons .btn-inv-export.btn-inv-export-excel {
    background: linear-gradient(135deg, #eefbf3, #ffffff) !important;
    border-color: #bee8ce !important;
    color: #1f7a46 !important;
}

.modern-shell .dt-buttons .btn-inv-export.btn-inv-export-csv {
    background: linear-gradient(135deg, #eaf4ff, #ffffff) !important;
    border-color: #c3d9f5 !important;
    color: #1f5f9e !important;
}

.modern-shell .dt-buttons .btn-inv-export.btn-inv-export-pdf {
    background: linear-gradient(135deg, #fff0f2, #ffffff) !important;
    border-color: #f2c2ca !important;
    color: #b12f44 !important;
}

.modern-shell .dt-buttons .btn-inv-export.btn-inv-export-print {
    background: linear-gradient(135deg, #f3f5f9, #ffffff) !important;
    border-color: #d6deeb !important;
    color: #334a77 !important;
}

.modern-shell .dt-buttons .btn-inv-export:disabled,
.modern-shell .dt-buttons .btn-inv-export.disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none;
    box-shadow: none;
}

.modern-shell .dataTables_wrapper .dataTables_length label,
.modern-shell .dataTables_wrapper .dataTables_filter label {
    font-size: 0.8rem;
    color: var(--modern-subtext);
    font-weight: 700;
}

.modern-shell .dataTables_wrapper .dataTables_length select,
.modern-shell .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    padding: 0.3rem 0.55rem;
    color: var(--modern-text);
    background: #fff;
    box-shadow: none;
}

.modern-shell .dataTables_wrapper .dataTables_info {
    font-size: 0.78rem;
    color: var(--modern-subtext);
    padding-top: 0.85rem;
}

.modern-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid var(--modern-border) !important;
    background: #fff !important;
    color: var(--modern-text) !important;
    margin-left: 0.2rem;
}

.modern-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light)) !important;
    border-color: var(--modern-accent-strong) !important;
    color: #fff !important;
}

.modern-shell .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--modern-accent-softer) !important;
    border-color: var(--modern-accent-light) !important;
    color: var(--modern-accent-strong) !important;
}

@media (max-width: 768px) {
    .modern-card-body {
        padding: 0.85rem;
    }

    .modern-shell .modern-card-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .modern-shell .modern-card-tabs {
        grid-template-columns: 1fr;
    }

    .modern-shell .modern-card-tab-link {
        min-height: 84px;
    }
}

/* Core management visual upgrade (OLT, ODP, Cable, Pole) */
.core-management-modern-page {
    position: relative;
    isolation: isolate;
}

.core-management-modern-page::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: -10px;
    background:
        radial-gradient(1200px 420px at 100% -12%, rgba(78, 115, 223, 0.13), transparent 68%),
        radial-gradient(900px 360px at 0% -18%, rgba(46, 89, 217, 0.09), transparent 70%),
        linear-gradient(180deg, #f6f8ff 0%, #edf3ff 100%);
    border-radius: 18px;
    z-index: -1;
    pointer-events: none;
}

.core-management-modern-page .card.border-bottom-primary {
    border-bottom: 1px solid var(--modern-border) !important;
}

.core-management-modern-page .card-header {
    position: relative;
}

.core-management-modern-page .card-header::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--modern-accent-rgb), 0.26), rgba(var(--modern-accent-rgb), 0));
    pointer-events: none;
}

.core-management-modern-page .btn.btn-icon-split.rounded-pill,
.core-management-modern-page .btn.rounded-pill {
    border-radius: 12px !important;
}

.core-management-modern-page .btn.btn-success {
    border: none;
    background: linear-gradient(135deg, #1da879, #29c890);
    color: #ffffff;
}

.core-management-modern-page .btn.btn-success:hover,
.core-management-modern-page .btn.btn-success:focus {
    color: #ffffff;
    filter: brightness(0.98);
}

.core-management-modern-page .table-responsive {
    border: 1px solid #dde6f8;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.core-management-modern-page .table.table-hover {
    margin-bottom: 0;
}

.core-management-modern-page .table.table-hover tbody tr:hover {
    background: linear-gradient(180deg, rgba(78, 115, 223, 0.06), rgba(78, 115, 223, 0.02));
}

.core-management-modern-page .table.table-hover td,
.core-management-modern-page .table.table-hover th {
    vertical-align: middle;
}

.core-management-modern-page label {
    font-size: 0.79rem;
    font-weight: 700;
    color: #526384;
    letter-spacing: 0.01em;
}

.core-management-modern-page .custom-file-label {
    border-radius: 10px;
    border-color: #d6deec;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    color: var(--modern-text);
}

.core-management-modern-page .badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.core-management-modern-page .dropdown-menu {
    border: 1px solid #dbe4f7;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
    padding: 0.4rem;
}

.core-management-modern-page .dropdown-item {
    border-radius: 8px;
    font-weight: 600;
    color: #4a5d82;
}

.core-management-modern-page .dropdown-item:hover,
.core-management-modern-page .dropdown-item:focus {
    background: rgba(78, 115, 223, 0.1);
    color: #304f97;
}

.core-management-modern-page .dataTables_wrapper .dt-buttons .btn {
    border-radius: 10px !important;
    border-color: #d7e0f2 !important;
}

.core-management-modern-page .spinner-border.text-primary {
    color: #4e73df !important;
}

.core-management-modern-page #map,
.core-management-modern-page #oltMap,
.core-management-modern-page #odpMap,
.core-management-modern-page #cableMap,
.core-management-modern-page #poleMap {
    border: 1px solid #d9e3f6;
    box-shadow: 0 16px 30px rgba(31, 51, 97, 0.12);
}

.core-management-modern-page .leaflet-control-layers,
.core-management-modern-page .leaflet-control-locate,
.core-management-modern-page .leaflet-control-fullscreen,
.core-management-modern-page .leaflet-control-zoom {
    border: 1px solid #d8e2f6 !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);
}

.core-management-modern-page .leaflet-popup-content-wrapper {
    border-radius: 12px;
    border: 1px solid #dbe5fa;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.17);
}

.core-management-modern-page .leaflet-popup-content {
    margin: 12px 14px;
}

/* Mancore list header action bar */
.mancore-index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
}

.mancore-index-header .mancore-index-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.mancore-index-header .mancore-index-actions-left {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.mancore-index-header .mancore-index-actions-right {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
}

.mancore-index-header .btn {
    margin: 0 !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.mancore-index-header .btn-modern-split {
    gap: 0.38rem;
}

.mancore-index-header .btn-modern-split .icon {
    margin-left: 0;
    width: 1rem;
    justify-content: center;
}

.mancore-index-header > h6 {
    min-width: 0;
    margin-bottom: 0 !important;
}

.modern-shell.jb-modern-page .dt-buttons,
.modern-shell.pole-modern-page .dt-buttons,
.modern-shell.cable-modern-page .dt-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.modern-shell.jb-modern-page .dt-buttons .btn-inv-export,
.modern-shell.pole-modern-page .dt-buttons .btn-inv-export,
.modern-shell.cable-modern-page .dt-buttons .btn-inv-export {
    flex: 0 0 auto;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mancore-index-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 0.65rem 0.9rem;
    }

    .mancore-index-header .mancore-index-actions {
        width: 100%;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }

    .mancore-index-header .mancore-index-actions::-webkit-scrollbar {
        display: none;
    }

    .mancore-index-header .mancore-index-actions-right {
        margin-left: 0;
    }

    .mancore-index-header .btn {
        flex-shrink: 0;
    }

    .modern-shell.jb-modern-page .dt-buttons,
    .modern-shell.pole-modern-page .dt-buttons,
    .modern-shell.cable-modern-page .dt-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        padding-bottom: 0.2rem;
    }

    .modern-shell.jb-modern-page .dt-buttons::-webkit-scrollbar,
    .modern-shell.pole-modern-page .dt-buttons::-webkit-scrollbar,
    .modern-shell.cable-modern-page .dt-buttons::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 420px) {
    .mancore-index-header .btn {
        width: auto;
        min-height: 2.15rem;
    }

    .modern-shell.jb-modern-page .dt-buttons .btn-inv-export,
    .modern-shell.pole-modern-page .dt-buttons .btn-inv-export,
    .modern-shell.cable-modern-page .dt-buttons .btn-inv-export {
        width: auto;
    }
}

/* MikroTik connector configuration generator */
.modern-shell.mikrotik-generator-page .mikrotik-generator-section {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    color: var(--modern-accent-strong);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-terminal {
    min-height: 38rem;
    max-height: 70vh;
    overflow: auto;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 0.75rem;
    background: #152033;
    color: #d7e7ff;
    font: 0.76rem/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-client-table {
    margin-top: 0.5rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.12);
    border-radius: 0.65rem;
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-actions {
    gap: 0.5rem;
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    border-color: rgba(var(--modern-accent-rgb), 0.2);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 5px 12px rgba(26, 58, 125, 0.08);
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-action-back {
    color: #5a6580;
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-action:hover,
.modern-shell.mikrotik-generator-page .mikrotik-generator-action:focus {
    border-color: rgba(var(--modern-accent-rgb), 0.45);
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(26, 58, 125, 0.14);
    transform: translateY(-1px);
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-action-import {
    color: #176b52;
}

.modern-shell.mikrotik-generator-page .mikrotik-generator-action-download {
    color: #2d579f;
}

@media (max-width: 991.98px) {
    .modern-shell.mikrotik-generator-page .mikrotik-generator-terminal {
        min-height: 28rem;
    }
}

@media (min-width: 992px) {
    .modern-shell.mikrotik-generator-page > .row {
        align-items: stretch;
    }

    .modern-shell.mikrotik-generator-page > .row > .col-lg-6 {
        display: flex;
    }

    .modern-shell.mikrotik-generator-page > .row > .col-lg-6 > .modern-card {
        width: 100%;
    }

    .modern-shell.mikrotik-generator-page .mikrotik-generator-preview-card,
    .modern-shell.mikrotik-generator-page .mikrotik-generator-preview-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .modern-shell.mikrotik-generator-page .mikrotik-generator-preview-body {
        flex: 1 1 auto;
    }

    .modern-shell.mikrotik-generator-page .mikrotik-generator-terminal {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: 100%;
    }
}

@media (max-width: 340px) {
    .mancore-index-header {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }
}

@media (max-width: 480px) {
    .mancore-page-nav { gap: 6px; }
    .mancore-page-title { font-size: .8rem; }
}

/* Reusable empty-state (global) — pakai via <x-ui.empty-state /> */
.modern-shell .modern-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    padding: 2.4rem 1rem;
    color: var(--modern-subtext);
}

.modern-shell .modern-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--modern-accent-soft);
    border: 1px solid var(--modern-border);
    color: var(--modern-accent-strong);
}

.modern-shell .modern-empty-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.96rem;
    color: var(--modern-text);
}

.modern-shell .modern-empty-text {
    margin: 0;
    font-size: 0.84rem;
    max-width: 360px;
}
/* ==========================================================================
   Reusable component responsiveness (global) — page-header, toolbar, stat-card
   Referensi pola mobile: menu Customer (btn split icon-only di mobile).
   ========================================================================== */
.modern-shell .modern-page-header {
    padding-left: 1rem;
    padding-right: 1rem;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.modern-shell .modern-page-header-main {
    min-width: 0;
}

.modern-shell .modern-page-header-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-shell .modern-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modern-shell .modern-status-card-compact .modern-card-body {
    padding: 0.7rem 0.8rem;
}

.modern-shell .modern-status-card-compact .modern-status-value {
    font-size: clamp(1.02rem, 3vw, 1.18rem);
}

/* Tablet & bawah */
@media (max-width: 768px) {
    .modern-shell .modern-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .modern-shell .modern-page-header-actions {
        justify-content: flex-start;
    }

    .modern-shell .modern-toolbar .left,
    .modern-shell .modern-toolbar .right {
        width: 100%;
    }

    .modern-shell .modern-toolbar .right {
        justify-content: flex-start;
    }
}

.modern-shell.odp-detail-page .odp-splitter-output-node.active.state-legacy rect {
    fill: #fff4d6;
    stroke: #d69e2e;
}

.modern-shell.odp-detail-page .odp-splitter-output-node.active.state-legacy circle {
    fill: #d69e2e;
}

.modern-shell.odp-detail-page .odp-splitter-output-node.active.state-conflict rect {
    fill: #fde8e8;
    stroke: #d64545;
}

.modern-shell.odp-detail-page .odp-splitter-output-node.active.state-conflict circle {
    fill: #d64545;
}

.modern-shell.odp-detail-page .odp-splitter-link.active.state-legacy {
    stroke: #d69e2e;
}

.modern-shell.odp-detail-page .odp-splitter-link.active.state-conflict {
    stroke: #d64545;
}

.modern-shell.odp-detail-page .odp-output-chip.state-legacy {
    color: #8a5b08;
    background: #fff8e6;
    border-color: #e5bd63;
}

.modern-shell.odp-detail-page .odp-output-chip.state-conflict {
    color: #a62f2f;
    background: #fff0f0;
    border-color: #e5a2a2;
}

.modern-shell.odp-detail-page .odp-output-state {
    padding-left: 0.35rem;
    border-left: 1px solid currentColor;
    font-size: 0.62rem;
    opacity: 0.78;
}

.modern-shell .invoice-payment-proof-upload-preview {
    padding: 0.75rem;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: var(--modern-accent-softer);
}

.modern-shell .invoice-payment-proof-upload-list,
.modern-shell .invoice-payment-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.modern-shell .invoice-payment-proof-upload-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--modern-border);
    border-radius: 9px;
    background: var(--modern-surface);
}

.modern-shell .invoice-payment-proof-upload-media {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--modern-muted-bg);
    font-size: 1.65rem;
}

.modern-shell .invoice-payment-proof-upload-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modern-shell .invoice-payment-proof-upload-details,
.modern-shell .invoice-payment-proof-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.modern-shell .invoice-payment-proof-upload-details {
    flex: 1 1 auto;
}

.modern-shell .invoice-payment-proof-remove {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(179, 38, 58, 0.24);
    border-radius: 50%;
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.modern-shell .invoice-payment-proof-remove:hover,
.modern-shell .invoice-payment-proof-remove:focus-visible {
    border-color: var(--modern-danger-text);
    color: #ffffff;
    background: var(--modern-danger-text);
    outline: none;
    transform: translateY(-1px);
}

.modern-shell .invoice-payment-proof-upload-name,
.modern-shell .invoice-payment-proof-name {
    overflow: hidden;
    color: var(--modern-muted-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .invoice-payment-proof-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    background: var(--modern-surface);
    box-shadow: 0 8px 18px rgba(15, 28, 64, 0.07);
}

.modern-shell .invoice-payment-proof-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    overflow: hidden;
    background: var(--modern-accent-softer);
    font-size: 4rem;
}

.modern-shell .invoice-payment-proof-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modern-shell .invoice-payment-proof-body {
    flex: 1 1 auto;
    padding: 0.85rem;
}

.modern-shell .invoice-payment-proof-body .btn {
    margin-top: auto;
}

@media (max-width: 575.98px) {
    .modern-shell .invoice-payment-proof-upload-list,
    .modern-shell .invoice-payment-proof-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.modern-shell .modern-stage-time-input {
    align-items: stretch;
    flex-wrap: nowrap;
}

.modern-shell .modern-stage-time-input > .form-control:first-child {
    min-width: 0;
}

.modern-shell .modern-stage-time-unit-wrap {
    flex: 0 0 auto;
    width: 7.5rem;
}

.modern-shell .modern-stage-time-unit {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    cursor: pointer;
    height: 100%;
    min-height: 100%;
    padding-left: 0.75rem;
    padding-right: 1.75rem;
}

@media (max-width: 575.98px) {
    .modern-shell .modern-stage-time-unit-wrap {
        width: 6.75rem;
    }
}

/* Mobile kecil */
@media (max-width: 576px) {
    .modern-shell .modern-page-header-actions {
        width: 100%;
    }

    .modern-shell .modern-page-header-actions > .btn,
    .modern-shell .modern-page-header-actions > .btn-group {
        flex: 1 1 auto;
    }

    .modern-shell .modern-status-value {
        font-size: clamp(1.05rem, 5vw, 1.28rem);
    }

    .modern-shell .modern-empty {
        padding: 1.6rem 0.75rem;
    }
}

/* Toolbar stack manual */
.modern-shell .modern-toolbar-stack {
    flex-direction: column;
    align-items: stretch;
}

.modern-shell .modern-toolbar-stack .left,
.modern-shell .modern-toolbar-stack .right {
    width: 100%;
}
/* ==========================================================================
   Global table action group (seragam) — pakai <x-ui.action-group> + <x-ui.action-button>
   ========================================================================== */
.modern-shell .modern-action-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.modern-shell .modern-action-group .btn-modern-action {
    margin: 0 !important;
}

/* Global duplicate variant (promoted from homeid page) */
.btn-modern-action-duplicate {
    --action-glow: 111, 66, 193;
    border-color: rgba(var(--action-glow), 0.3);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.1) 100%);
    color: #7c4fc7;
}

.btn-modern-action-duplicate:hover,
.btn-modern-action-duplicate:focus {
    border-color: rgba(var(--action-glow), 0.42);
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--action-glow), 0.15) 100%);
    color: #6a3fb5;
}

/* Mobile: action group rapat & rata */
@media (max-width: 576px) {
    .modern-shell .modern-action-group {
        gap: 0.3rem;
        justify-content: flex-start;
    }

    .modern-shell .modern-action-group .btn-modern-action {
        width: 34px;
        min-width: 34px;
        height: 34px;
    }

    .modern-shell .modern-status-card-compact .modern-card-body {
        padding: 0.62rem 0.7rem;
    }
}
/* ==========================================================================
   Global responsive table -> cards di mobile (referensi: menu Customer)
   Pakai <x-ui.data-table cardMobile> dan beri data-label="..." pada tiap <td>.
   ========================================================================== */
@media (max-width: 768px) {
    .modern-shell .modern-table-cards {
        width: 100% !important;
        table-layout: auto;
    }

    .modern-shell .modern-table-cards thead {
        display: none;
    }

    .modern-shell .modern-table-cards tbody tr {
        display: block;
        background: var(--modern-surface);
        border: 1px solid var(--modern-border);
        border-radius: 14px;
        margin-bottom: 12px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        overflow: visible;
        width: 100% !important;
    }

    .modern-shell .modern-table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-bottom: 1px dashed var(--modern-border);
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 14px;
        white-space: normal;
    }

    .modern-shell .modern-table-cards tbody td:last-child {
        border-bottom: none;
    }

    /* Pertahankan sudut membulat kartu tanpa overflow:hidden agar dropdown
       aksi (Bootstrap dropdown) tidak terpotong saat dibuka di mobile. */
    .modern-shell .modern-table-cards tbody td:first-child {
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    .modern-shell .modern-table-cards tbody td:last-child {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    /* Sel yang memuat dropdown aksi tidak boleh memotong menunya. */
    .modern-shell .modern-table-cards tbody td .dropdown {
        position: relative;
    }

    .modern-shell .modern-table-cards tbody td .dropdown.show {
        z-index: 1051;
    }

    .modern-shell .modern-table-cards tbody td .dropdown-menu {
        position: absolute;
        z-index: 1051;
    }

    .modern-shell .modern-table-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        max-width: 40%;
        color: var(--modern-subtext);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* td tanpa data-label (mis. nomor) tampil penuh */
    .modern-shell .modern-table-cards tbody td:not([data-label])::before {
        content: "";
        display: none;
    }

    /* baris pertama (No.) jadi header strip kartu */
    .modern-shell .modern-table-cards tbody td[data-label="No."] {
        background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-strong) 100%);
        color: #fff;
        border-bottom: none;
        font-weight: 700;
    }

    .modern-shell .modern-table-cards tbody td[data-label="No."]::before {
        color: rgba(255, 255, 255, 0.82);
    }

    /* baris actions jadi footer kartu */
    .modern-shell .modern-table-cards tbody td[data-label="Actions"],
    .modern-shell .modern-table-cards tbody td[data-label="Aksi"] {
        background: var(--modern-accent-softer);
        border-top: 1px dashed var(--modern-border);
        border-bottom: none;
    }

    .modern-shell .modern-table-cards tbody td[data-label="Actions"]::before,
    .modern-shell .modern-table-cards tbody td[data-label="Aksi"]::before {
        color: var(--modern-accent-strong);
    }

    .modern-shell .modern-table-cards tbody td[data-label="Actions"] .modern-action-group,
    .modern-shell .modern-table-cards tbody td[data-label="Aksi"] .modern-action-group {
        justify-content: flex-end;
    }
}
/* ==========================================================================
   GLOBAL modern Choices.js — berlaku untuk semua Choices.js (tanpa wajib .modern-form)
   Referensi: modal filter menu Customer. Override vendor choices.min.css.
   ========================================================================== */
.choices {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.form-group:has(.choices.is-open) {
    position: relative;
    z-index: 1060;
}

.choices.is-focused {
    z-index: 2;
}

.choices.is-open {
    z-index: 1060;
}

.choices__inner {
    min-height: calc(1.5em + 0.75rem + 2px);
    border: 1px solid #d6deec;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    color: #4a5568;
    padding: 0.375rem 0.75rem;
    box-shadow: none;
    font-size: 0.875rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.choices[data-type*="select-multiple"] .choices__inner {
    padding: 0.22rem 0.45rem;
    gap: 0.22rem;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: #6f8ee6;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.16);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    margin-top: 6px;
    border: 1px solid #d6deec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.14);
    overflow: hidden;
    z-index: 1061;
}

.company-form-shell .inventory-card:has(#partner-form),
.company-form-shell .partner-picker-wrap.is-open {
    overflow: visible;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    color: #4a5568;
    font-size: 0.84rem;
    padding: 0.48rem 0.7rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: #f6f8ff;
    color: #3558c9;
}

.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
    border: 1px solid #e3e8f4;
    border-radius: 8px;
    margin: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: #fbfcff;
}

.choices__input--cloned {
    background: transparent !important;
    background-color: transparent !important;
    margin-bottom: 0;
    color: #4a5568;
    font-size: 0.875rem;
}

.modern-shell .choices__list--multiple:empty + .choices__input--cloned:placeholder-shown {
    width: 100% !important;
}

.choices__list--multiple .choices__item {
    border: 1px solid rgba(78, 115, 223, 0.28);
    background: rgba(78, 115, 223, 0.1);
    color: #3558c9;
    border-radius: 7px;
    font-weight: 700;
    font-size: 0.74rem;
    padding: 0.24rem 0.5rem;
    margin: 0.14rem 0.2rem 0.14rem 0;
}

.choices__list--multiple .choices__item.is-highlighted {
    background: rgba(78, 115, 223, 0.18);
    border-color: rgba(78, 115, 223, 0.42);
}

.choices__list--multiple .choices__item .choices__button {
    border-left-color: rgba(78, 115, 223, 0.28);
    background-image: none;
    opacity: 1;
    text-indent: 0;
    width: auto;
    margin: 0 0 0 0.35rem;
    padding-left: 0.35rem;
    font-size: 0;
    line-height: 1;
    position: relative;
}

.choices__list--multiple .choices__item .choices__button::before {
    content: '\00d7';
    color: #3558c9;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.choices__list--multiple .choices__item .choices__button:hover::before {
    color: #4e73df;
}

.choices__placeholder {
    opacity: 0.7;
    color: #7c8db0;
}

/* Disabled state */
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    background: #f1f4f9;
    color: #97a0b3;
    cursor: not-allowed;
}

/* Mobile */
@media (max-width: 576px) {
    .choices__inner {
        font-size: 0.9rem;
    }

    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
}
/* ==========================================================================
   Choices.js di dalam modal — cegah dropdown terpotong (global safety)
   ========================================================================== */
/* Modal yang berisi Choices.js: izinkan dropdown keluar dari batas modal */
.modern-shell .modern-modal .modal-content:has(.choices),
.modern-shell .modern-modal .modal-content:has(.choices) .modal-body {
    overflow: visible;
}

/* Dropdown Choices selalu di atas isi modal */
.modern-shell .modern-modal .choices__list--dropdown,
.modern-shell .modern-modal .choices__list[aria-expanded] {
    z-index: 1080;
}

.modern-shell .modern-modal .choices.is-open,
.modern-shell .modern-modal .choices.is-focused {
    z-index: 1080;
}
/* ==========================================================================
   Glassmorphism — utility & integrasi komponen (JANGAN dihapus, identitas UI)
   Dasar: .modern-glass (lihat atas file). Komponen pakai prop `glass`.
   ========================================================================== */
.modern-shell .modern-toolbar.modern-glass {
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
}

.modern-shell .modern-form-header.modern-glass {
    border-radius: 12px;
}

/* Variasi intensitas glass (opsional, reusable) */
.modern-shell .modern-glass-soft {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(247, 250, 255, 0.34) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}

.modern-shell .modern-glass-strong {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86) 0%, rgba(247, 250, 255, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* Fallback browser tanpa backdrop-filter/-webkit-backdrop-filter: tetap solid, tidak transparan tembus */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modern-shell .modern-glass,
    .modern-shell .modern-glass-soft,
    .modern-shell .modern-glass-strong {
        background: var(--modern-surface);
    }

    .modern-shell .company-selector-card.modern-glass {
        background:
            radial-gradient(circle at 66% -85%, rgba(255, 255, 255, 0.24) 0 5rem, transparent 5.1rem),
            radial-gradient(circle at 88% 145%, rgba(255, 255, 255, 0.14) 0 6.5rem, transparent 6.6rem),
            linear-gradient(118deg, var(--modern-accent-strong) 0%, var(--modern-accent) 52%, var(--modern-accent-light) 100%);
    }

    .modern-shell .card.shadow.h-100[class*="border-left-"] {
        background: linear-gradient(180deg, #ffffff, rgba(var(--legacy-status-rgb), 0.08));
    }
}
/* Modern card normalization: .modern-card owns radius/border even when paired with Bootstrap helper classes. */
.modern-shell .modern-card.border-bottom-primary,
.modern-shell .modern-card.border-left-primary,
.modern-shell .modern-card.border-right-primary,
.modern-shell .modern-card.border-top-primary {
    border: 1px solid var(--modern-border) !important;
}

.modern-shell .modern-card.shadow {
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.07) !important;
}

/* Global modern-card radius hardening (works even when a card needs overflow: visible for dropdowns). */
.modern-shell .modern-card {
    border-radius: 14px !important;
}

.modern-shell .modern-card > .card-header:first-child,
.modern-shell .modern-card > .modern-card-header:first-child,
.modern-shell .modern-card > .modern-form-header:first-child {
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}

.modern-shell .modern-card > .card-body:last-child,
.modern-shell .modern-card > .modern-card-body:last-child,
.modern-shell .modern-card > .card-footer:last-child {
    border-bottom-left-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
}
/* Stock Movement action type cell */
.modern-shell .movement-act-cell,
.inventory-shell .movement-act-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.modern-shell .movement-act-pill,
.inventory-shell .movement-act-pill,
.modern-shell .movement-status-pill,
.inventory-shell .movement-status-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.3rem;
    letter-spacing: 0.2px;
    line-height: 1;
    padding: 0.28rem 0.5rem;
    white-space: nowrap;
}

.modern-shell .movement-act-pill i,
.inventory-shell .movement-act-pill i,
.modern-shell .movement-status-pill i,
.inventory-shell .movement-status-pill i {
    font-size: 0.82em;
}

.modern-shell .movement-act-take,
.inventory-shell .movement-act-take {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.modern-shell .movement-act-return,
.inventory-shell .movement-act-return {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #16a34a;
}

.modern-shell .movement-act-muted,
.inventory-shell .movement-act-muted {
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #64748b;
}


.modern-shell .movement-status-pending,
.inventory-shell .movement-status-pending {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #d97706;
}

.modern-shell .movement-status-approved,
.inventory-shell .movement-status-approved {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #16a34a;
}

.modern-shell .movement-status-rejected,
.inventory-shell .movement-status-rejected {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

/* Stock Movement device stack (ONT/STB/Mini UPS) */.modern-shell .movement-device-stack,
.inventory-shell .movement-device-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 190px;
}

.modern-shell .movement-device-group,
.inventory-shell .movement-device-group {
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.72));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}


.modern-shell .movement-device-item,
.inventory-shell .movement-device-item {
    padding-top: 0.25rem;
    line-height: 1.28;
}

.modern-shell .movement-device-item + .movement-device-item,
.inventory-shell .movement-device-item + .movement-device-item {
    margin-top: 0.38rem;
    padding-top: 0.38rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.28);
}

.modern-shell .movement-device-more.collapse:not(.show),
.inventory-shell .movement-device-more.collapse:not(.show) {
    display: none;
}

.modern-shell .movement-device-toggle,
.inventory-shell .movement-device-toggle {
    background: none;
    border: 0;
    color: #2563eb;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.4rem;
    padding: 0.1rem 0;
}

.modern-shell .movement-device-toggle:hover,
.inventory-shell .movement-device-toggle:hover {
    text-decoration: underline;
}

.modern-shell .movement-device-toggle .movement-device-toggle-less,
.inventory-shell .movement-device-toggle .movement-device-toggle-less {
    display: none;
}

.modern-shell .movement-device-toggle[aria-expanded="true"] .movement-device-toggle-more,
.inventory-shell .movement-device-toggle[aria-expanded="true"] .movement-device-toggle-more {
    display: none;
}

.modern-shell .movement-device-toggle[aria-expanded="true"] .movement-device-toggle-less,
.inventory-shell .movement-device-toggle[aria-expanded="true"] .movement-device-toggle-less {
    display: inline;
}


.modern-shell.sales-visit-form-shell .modern-card {
    overflow: hidden;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.10);
}

.modern-shell.sales-visit-form-shell .modern-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 36%),
        linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent), #1cc88a);
    color: #ffffff;
    border-bottom: 0;
}

.modern-shell.sales-visit-form-shell .sales-visit-form-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.modern-shell.sales-visit-form-shell .sales-visit-form-title__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modern-shell.sales-visit-form-shell .sales-visit-form-title__kicker {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.modern-shell.sales-visit-form-shell .sales-visit-form-title h6 {
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.modern-shell.sales-visit-form-shell .sales-visit-form-source-badge {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modern-shell.sales-visit-form-shell .sales-visit-form-source-badge--existing {
    background: rgba(255, 255, 255, 0.22);
}

.modern-shell.sales-visit-form-shell .modern-toggle-group.modern-toggle-group--single {
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--modern-accent-rgb), 0.08) 100%);
    box-shadow: 0 8px 18px rgba(var(--modern-accent-rgb), 0.10);
}

@media (max-width: 575.98px) {
    .modern-shell.sales-visit-form-shell .modern-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Ticketing automation feature card */
.modern-shell .feature-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(78, 115, 223, 0.12);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modern-shell .feature-card.border-left-success {
    border-left: 0.28rem solid #1cc88a !important;
}

.modern-shell .feature-card .feature-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(28, 200, 138, 0.12);
    font-size: 1.15rem;
}

.modern-shell .feature-card .feature-content {
    min-width: 0;
    flex: 1 1 auto;
}

.modern-shell .rect-switch-container {
    flex: 0 0 auto;
    position: relative;
    min-width: 50px;
}

.modern-shell .rect-switch-checkbox {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

.modern-shell .rect-switch {
    width: 50px;
    height: 26px;
    margin-bottom: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.modern-shell .rect-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d1d3e2;
    transition: 0.2s ease;
}

.modern-shell .rect-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22);
    transition: 0.2s ease;
}

.modern-shell .rect-switch-checkbox:checked + .rect-switch .rect-slider.success {
    background: #1cc88a;
    box-shadow: 0 0 0 0.12rem rgba(28, 200, 138, 0.24);
}

.modern-shell .rect-switch-checkbox:checked + .rect-switch .rect-slider::before {
    transform: translateX(24px);
}

.modern-shell .rect-switch-checkbox:disabled + .rect-switch {
    cursor: not-allowed;
    opacity: 0.58;
}

.modern-active-toggle {
    display: inline-flex;
    max-width: 100%;
    flex-direction: column;
}

.modern-active-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modern-active-toggle-control {
    display: inline-flex;
    min-width: 11rem;
    max-width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.5rem 0.65rem 0.5rem 0.85rem;
    color: var(--modern-danger-text);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 242, 255, 0.78));
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.modern-active-toggle-control:hover {
    border-color: rgba(var(--modern-accent-rgb), 0.38);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.modern-active-toggle-status {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

.modern-active-toggle-status-active {
    display: none;
    color: var(--modern-success-text);
}

.modern-active-toggle-track {
    position: relative;
    width: 3rem;
    height: 1.6rem;
    flex: 0 0 3rem;
    border-radius: 999px;
    background: #c8cedb;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.18);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.modern-active-toggle-thumb {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.225rem;
    height: 1.225rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.24);
    transition: transform 0.2s ease;
}

.modern-active-toggle-input:checked + .modern-active-toggle-control .modern-active-toggle-status-active {
    display: inline-flex;
}

.modern-active-toggle-input:checked + .modern-active-toggle-control .modern-active-toggle-status-inactive {
    display: none;
}

.modern-active-toggle-input:checked + .modern-active-toggle-control .modern-active-toggle-track {
    background: #1cc88a;
    box-shadow: 0 0 0 0.12rem rgba(28, 200, 138, 0.2), inset 0 1px 3px rgba(15, 23, 42, 0.12);
}

.modern-active-toggle-input:checked + .modern-active-toggle-control .modern-active-toggle-thumb {
    transform: translateX(1.4rem);
}

.modern-active-toggle-input:focus-visible + .modern-active-toggle-control {
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--modern-accent-rgb), 0.2), 0 10px 24px rgba(15, 23, 42, 0.12);
}

.modern-active-toggle-input:disabled + .modern-active-toggle-control {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.modern-active-toggle.is-invalid .modern-active-toggle-control {
    border-color: var(--modern-danger-text);
}

.modern-active-toggle-compact .modern-active-toggle-control {
    min-width: 9.5rem;
    min-height: 2.35rem;
    gap: 0.7rem;
    padding: 0.35rem 0.5rem 0.35rem 0.7rem;
}

.modern-active-toggle-compact .modern-active-toggle-track {
    width: 2.65rem;
    height: 1.4rem;
    flex-basis: 2.65rem;
}

.modern-active-toggle-compact .modern-active-toggle-thumb {
    top: 0.175rem;
    left: 0.175rem;
    width: 1.05rem;
    height: 1.05rem;
}

.modern-active-toggle-compact .modern-active-toggle-input:checked + .modern-active-toggle-control .modern-active-toggle-thumb {
    transform: translateX(1.25rem);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modern-active-toggle-control {
        background: #f7f9ff;
    }
}

@media (max-width: 575.98px) {
    .modern-active-toggle:not(.modern-active-toggle-compact) {
        width: 100%;
    }

    .modern-active-toggle:not(.modern-active-toggle-compact) .modern-active-toggle-control {
        width: 100%;
    }
}

/* ============================================================
   User Access (Hak Akses) - compact modern
   ============================================================ */
.modern-shell .ua-toast-wrap {
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
}
.modern-shell .ua-picker {
    border-radius: 14px;
    padding: 16px;
}
.modern-shell .ua-picker-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.modern-shell .ua-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.modern-shell .ua-field > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--modern-text);
    margin: 0;
}
.modern-shell .ua-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--modern-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex: 0 0 auto;
}

/* copy panel - progressive disclosure */
.modern-shell .ua-copy {
    margin-top: 12px;
    border-top: 1px dashed var(--modern-border);
    padding-top: 12px;
}
.modern-shell .ua-copy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 4px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--modern-accent-strong);
    cursor: pointer;
}
.modern-shell .ua-copy-caret {
    font-size: 0.7rem;
    transition: transform 0.18s ease;
}
.modern-shell .ua-copy-toggle.is-open .ua-copy-caret {
    transform: rotate(180deg);
}
.modern-shell .ua-copy-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 10px;
}
.modern-shell .ua-copy-body .ua-field {
    flex: 1 1 240px;
}
.modern-shell .ua-copy-btn {
    flex: 0 0 auto;
}

/* result area */
.modern-shell .ua-category {
    margin-bottom: 18px;
}
.modern-shell .ua-category-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--modern-subtext);
}
.modern-shell .ua-category-head i {
    color: var(--modern-accent);
}

.modern-shell .ua-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}
.modern-shell .ua-module-card {
    border-radius: 12px;
    border: 1px solid var(--modern-border);
    background: var(--modern-surface);
    overflow: hidden;
}
.modern-shell .ua-module-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--modern-border);
    background: var(--modern-accent-softer);
}
.modern-shell .ua-module-expand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.modern-shell .ua-module-caret {
    width: 12px;
    font-size: 0.65rem;
    color: var(--modern-subtext);
    transition: transform 0.16s ease;
}
.modern-shell .ua-module-expand.is-open .ua-module-caret {
    transform: rotate(90deg);
}
.modern-shell .ua-module-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--modern-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modern-shell .ua-module-counter {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--modern-muted-bg);
    color: var(--modern-muted-text);
}
.modern-shell .ua-master {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--modern-subtext);
    cursor: pointer;
}
.modern-shell .ua-module-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
}

/* switch row - full width click target */
.modern-shell .ua-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.modern-shell .ua-switch:hover {
    background: var(--modern-accent-softer);
}
.modern-shell .ua-switch-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 21px;
    display: inline-block;
}
.modern-shell .ua-switch-toggle.ua-switch-sm {
    width: 32px;
    height: 18px;
}
.modern-shell .ua-switch-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.modern-shell .ua-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cfd6e4;
    transition: background 0.18s ease;
}
.modern-shell .ua-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 0.18s ease;
}
.modern-shell .ua-switch-sm .ua-switch-track::after {
    width: 14px;
    height: 14px;
}
.modern-shell .ua-switch-toggle input:checked + .ua-switch-track::after {
    transform: translateX(17px);
}
.modern-shell .ua-switch-sm input:checked + .ua-switch-track::after {
    transform: translateX(14px);
}
.modern-shell .ua-switch-toggle input:checked + .ua-switch-track {
    background: #22a05b;
}
.modern-shell .ua-switch.on-role input:checked + .ua-switch-track {
    background: #7c53d6;
}
.modern-shell .ua-switch-toggle input:disabled { cursor: not-allowed; }
.modern-shell .ua-switch-toggle input:disabled + .ua-switch-track { opacity: 0.6; }
.modern-shell .ua-switch-label {
    flex: 1;
    min-width: 0;
    font-size: 0.83rem;
    color: var(--modern-text);
    line-height: 1.3;
}
.modern-shell .ua-switch.off { cursor: default; }
.modern-shell .ua-switch.off .ua-switch-label { color: var(--modern-muted-text); }
.modern-shell .ua-switch.on-role,
.modern-shell .ua-switch.role_locked_off { cursor: not-allowed; }

/* lock chip */
.modern-shell .ua-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    padding: 3px 5px;
    border-radius: 5px;
}
.modern-shell .ua-chip.role { background: #efe7ff; color: #6f42c1; }
.modern-shell .ua-chip.lock { background: #fff3cd; color: #856404; }

/* legend */
.modern-shell .ua-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: var(--modern-surface);
    box-shadow: 0 4px 12px rgba(15, 28, 64, 0.04);
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--modern-subtext);
}
.modern-shell .ua-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.modern-shell .ua-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.modern-shell .ua-dot.user { background: #22a05b; }
.modern-shell .ua-dot.role { background: #7c53d6; }
.modern-shell .ua-legend-lock { font-size: 0.6rem; }

@media (max-width: 575.98px) {
    .modern-shell .ua-modules { grid-template-columns: 1fr; }
    .modern-shell .ua-copy-body .ua-field,
    .modern-shell .ua-copy-btn { flex: 1 1 100%; }
}
/* Modern shell footer */
.modern-shell footer.sticky-footer {
    margin-top: 16px;
    padding: 1.15rem 0;
    border-top: 1px solid var(--modern-border);
    background: rgba(255, 255, 255, 0.82) !important;
}
.modern-shell footer.sticky-footer .copyright {
    line-height: 1.45;
    color: var(--modern-subtext);
}
.modern-shell footer.sticky-footer .copyright > span {
    display: inline-block;
    margin-bottom: 2px;
}
.modern-shell footer.sticky-footer .copyright small {
    display: block;
    line-height: 1.4;
    opacity: 0.82;
}

/* Shared company selector */
.modern-shell .modern-company-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 30;
    gap: 20px;
    margin-bottom: 1.25rem;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(78, 115, 223, 0.94), rgba(34, 74, 190, 0.94));
    box-shadow: 0 12px 28px rgba(27, 57, 133, 0.18);
    color: #fff;
    overflow: visible;
}
.modern-shell .modern-company-selector-copy {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.modern-shell .modern-company-selector-copy strong,
.modern-shell .modern-company-selector-copy small {
    display: block;
}
.modern-shell .modern-company-selector-copy strong {
    font-size: 0.98rem;
    letter-spacing: 0.02em;
}
.modern-shell .modern-company-selector-copy small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
}
.modern-shell .modern-company-selector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}
.modern-shell .modern-company-selector-control {
    flex: 1 1 360px;
    max-width: 450px;
    min-width: 260px;
}
.modern-shell .modern-company-selector-control .form-control,
.modern-shell .modern-company-selector-control .choices__inner {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--modern-text) !important;
    font-weight: 700;
}
.modern-shell .modern-company-selector-control select option {
    background: #ffffff;
    color: var(--modern-text);
}
.modern-shell .modern-company-selector .choices__list--single .choices__item,
.modern-shell .modern-company-selector .choices__placeholder {
    color: var(--modern-text) !important;
    opacity: 1;
}
.modern-shell .modern-company-selector .choices__list--dropdown,
.modern-shell .modern-company-selector .choices__list[aria-expanded] {
    border-color: var(--modern-border);
    background: #ffffff;
    color: var(--modern-text);
}
.modern-shell .modern-company-selector .choices__list--dropdown .choices__item,
.modern-shell .modern-company-selector .choices__list[aria-expanded] .choices__item {
    background: #ffffff;
    color: var(--modern-text) !important;
}
.modern-shell .modern-company-selector .choices__list--dropdown .choices__item--selectable.is-highlighted,
.modern-shell .modern-company-selector .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--modern-accent-soft);
    color: var(--modern-text) !important;
}
.modern-shell .modern-company-selector .choices__input,
.modern-shell .modern-company-selector .choices__input--cloned {
    background: #ffffff;
    color: var(--modern-text);
}
.modern-shell .modern-company-selector .choices {
    position: relative;
    z-index: 1100;
}
.modern-shell .modern-company-selector .choices.is-open {
    z-index: 1200;
}
.modern-shell .modern-company-selector .choices__list--dropdown,
.modern-shell .modern-company-selector .choices__list[aria-expanded] {
    z-index: 1201;
}

/* Keep Billing selector dropdown above surrounding cards. */
.modern-shell .company-selector-card {
    position: relative;
    z-index: 30;
    overflow: visible !important;
}
.modern-shell .company-selector-card .choices {
    position: relative;
    z-index: 1100;
}
.modern-shell .company-selector-card .choices.is-open {
    z-index: 1200;
}
.modern-shell .company-selector-card .choices__list--dropdown,
.modern-shell .company-selector-card .choices__list[aria-expanded] {
    z-index: 1201 !important;
}
@media (max-width: 767.98px) {
    .modern-shell .modern-company-selector {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }
    .modern-shell .modern-company-selector-control {
        flex-basis: auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

/* Ticket category visual picker */
.modern-shell .ticket-category-label-row {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.modern-shell .ticket-category-label-row .ticket-category-help {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.08);
    border: 0;
    border-radius: 50%;
    color: var(--modern-accent-strong);
    display: inline-flex;
    font-size: 0.75rem;
    height: 1.4rem;
    justify-content: center;
    margin-bottom: 0.375rem;
    padding: 0;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    width: 1.4rem;
}

.modern-shell .ticket-category-label-row .ticket-category-help:hover,
.modern-shell .ticket-category-label-row .ticket-category-help:focus-visible {
    background: rgba(var(--modern-accent-rgb), 0.16);
    color: var(--modern-accent);
    outline: none;
    transform: translateY(-1px);
}

.modern-shell .ticket-category-tooltip {
    z-index: 1080;
}

.modern-shell .ticket-category-tooltip.show {
    opacity: 1;
}

.modern-shell .ticket-category-tooltip .tooltip-inner {
    background: #ffffff;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 28, 64, 0.24);
    color: var(--modern-text);
    font-size: 0.75rem;
    line-height: 1.45;
    max-width: 22rem;
    padding: 0.7rem 0.8rem;
    text-align: left;
}

.modern-shell .ticket-category-tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #ffffff;
}

.modern-shell .ticket-category-tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #ffffff;
}

.modern-shell .ticket-category-tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #ffffff;
}

.modern-shell .ticket-category-tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #ffffff;
}

.modern-shell .ticket-category-picker {
    position: relative;
}

.modern-shell .ticket-category-native-select {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.modern-shell .ticket-category-toolbar {
    align-items: center;
    background: linear-gradient(135deg, rgba(var(--modern-accent-rgb), 0.045), rgba(255, 255, 255, 0.78));
    border: 1px solid rgba(var(--modern-accent-rgb), 0.13);
    border-radius: 11px;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0.35rem;
}

.modern-shell .ticket-category-search {
    flex: 1 1 16rem;
    max-width: 23rem;
    position: relative;
}

.modern-shell .ticket-category-search > .fas {
    color: var(--modern-accent-strong);
    left: 0.75rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.modern-shell .ticket-category-search .form-control {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 9px;
    box-shadow: 0 3px 9px rgba(15, 28, 64, 0.04);
    min-height: 2.25rem;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

.modern-shell .ticket-category-search .form-control:focus {
    border-color: rgba(var(--modern-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb), 0.1);
}

.modern-shell .ticket-category-search-clear {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--modern-subtext);
    display: inline-flex;
    height: 1.75rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
}

.modern-shell .ticket-category-search-clear:hover,
.modern-shell .ticket-category-search-clear:focus-visible {
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
    outline: none;
}

.modern-shell .ticket-category-count {
    background: rgba(var(--modern-accent-rgb), 0.1);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.16);
    border-radius: 999px;
    color: var(--modern-accent-strong);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.38rem 0.55rem;
    white-space: nowrap;
}

.modern-shell .ticket-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
}

.modern-shell .ticket-category-picker.has-many-categories .ticket-category-grid {
    max-height: min(38vh, 11.6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.125rem 0.25rem 0.125rem 0.125rem;
    scrollbar-color: rgba(var(--modern-accent-rgb), 0.35) transparent;
    scrollbar-width: thin;
}

.modern-shell .ticket-category-picker.has-many-categories .ticket-category-grid::-webkit-scrollbar {
    width: 0.375rem;
}

.modern-shell .ticket-category-picker.has-many-categories .ticket-category-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--modern-accent-rgb), 0.35);
    border-radius: 999px;
}

.modern-shell .ticket-category-empty {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.045);
    border: 1px dashed var(--modern-border);
    border-radius: 10px;
    color: var(--modern-subtext);
    display: flex;
    font-size: 0.8125rem;
    justify-content: center;
    min-height: 4rem;
    padding: 0.75rem;
}

.modern-shell .ticket-category-card {
    --ticket-category-accent: #4e73df;
    --ticket-category-accent-rgb: 78, 115, 223;
}

.modern-shell .ticket-category-card[data-tone="red"] {
    --ticket-category-accent: #e74a3b;
    --ticket-category-accent-rgb: 231, 74, 59;
}

.modern-shell .ticket-category-card[data-tone="orange"] {
    --ticket-category-accent: #f97316;
    --ticket-category-accent-rgb: 249, 115, 22;
}

.modern-shell .ticket-category-card[data-tone="purple"] {
    --ticket-category-accent: #7c5ce7;
    --ticket-category-accent-rgb: 124, 92, 231;
}

.modern-shell .ticket-category-card[data-tone="cyan"] {
    --ticket-category-accent: #36b9cc;
    --ticket-category-accent-rgb: 54, 185, 204;
}

.modern-shell .ticket-category-card[data-tone="green"] {
    --ticket-category-accent: #1cc88a;
    --ticket-category-accent-rgb: 28, 200, 138;
}

.modern-shell .ticket-category-card[data-tone="indigo"] {
    --ticket-category-accent: #5969db;
    --ticket-category-accent-rgb: 89, 105, 219;
}

.modern-shell .ticket-category-card[data-tone="amber"] {
    --ticket-category-accent: #d99a12;
    --ticket-category-accent-rgb: 217, 154, 18;
}

.modern-shell .ticket-category-card[data-tone="teal"] {
    --ticket-category-accent: #159c8c;
    --ticket-category-accent-rgb: 21, 156, 140;
}

.modern-shell .ticket-category-card[data-tone="slate"] {
    --ticket-category-accent: #60718b;
    --ticket-category-accent-rgb: 96, 113, 139;
}

.modern-shell .ticket-category-card {
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    border: 1px solid var(--modern-border, #d9e3f6);
    border-radius: 10px;
    color: var(--modern-text-strong, #25324d);
    cursor: pointer;
    display: flex;
    flex: 1 1 clamp(10.5rem, 12vw, 11.75rem);
    gap: 0.5rem;
    isolation: isolate;
    min-width: 0;
    min-height: 3.25rem;
    overflow: hidden;
    padding: 0.45rem 0.55rem;
    position: relative;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
    width: auto;
}

.modern-shell .ticket-category-card::after {
    background: radial-gradient(circle, rgba(var(--ticket-category-accent-rgb), 0.13) 0%, rgba(var(--ticket-category-accent-rgb), 0) 70%);
    border-radius: 50%;
    bottom: -2.25rem;
    content: "";
    height: 4.5rem;
    pointer-events: none;
    position: absolute;
    right: -2.25rem;
    transition: transform .18s ease;
    width: 4.5rem;
    z-index: -1;
}

.modern-shell .ticket-category-card:hover {
    border-color: rgba(var(--ticket-category-accent-rgb), .55);
    box-shadow: 0 8px 18px rgba(var(--ticket-category-accent-rgb), .12);
    transform: translateY(-1px);
}

.modern-shell .ticket-category-card:hover::after,
.modern-shell .ticket-category-card.is-selected::after {
    transform: scale(1.2);
}

.modern-shell .ticket-category-card:focus-visible {
    border-color: var(--ticket-category-accent);
    box-shadow: 0 0 0 3px rgba(var(--ticket-category-accent-rgb), .18);
    outline: none;
}

.modern-shell .ticket-category-card.is-selected {
    background: linear-gradient(180deg, rgba(var(--ticket-category-accent-rgb), .10) 0%, rgba(var(--ticket-category-accent-rgb), .045) 100%);
    border-color: var(--ticket-category-accent);
    box-shadow: 0 5px 14px rgba(var(--ticket-category-accent-rgb), .14);
}

.modern-shell .ticket-category-card-icon {
    align-items: center;
    background: linear-gradient(145deg, rgba(var(--ticket-category-accent-rgb), .18), rgba(var(--ticket-category-accent-rgb), .07));
    border: 1px solid rgba(var(--ticket-category-accent-rgb), .18);
    border-radius: 9px;
    box-shadow: 0 4px 10px rgba(var(--ticket-category-accent-rgb), .1);
    color: var(--ticket-category-accent);
    display: inline-flex;
    flex: 0 0 2.15rem;
    font-size: 0.95rem;
    height: 2.15rem;
    justify-content: center;
}

.modern-shell .ticket-category-card.is-selected .ticket-category-card-icon {
    background: var(--ticket-category-accent);
    color: #ffffff;
}

.modern-shell .ticket-category-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.modern-shell .ticket-category-card-content strong {
    color: #25324d;
    font-size: 0.8125rem;
    line-height: 1.25;
    margin-bottom: 0;
    padding-right: 1rem;
}

.modern-shell .ticket-category-card-check {
    align-items: center;
    background: var(--ticket-category-accent);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 0.625rem;
    height: 1.125rem;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 0.35rem;
    top: 0.35rem;
    transform: scale(.72);
    transition: opacity .18s ease, transform .18s ease;
    width: 1.125rem;
}

.modern-shell .ticket-category-card.is-filtered-out {
    display: none !important;
}

.modern-shell .ticket-category-card.is-selected .ticket-category-card-check {
    opacity: 1;
    transform: scale(1);
}

.modern-shell .ticket-category-native-select.is-invalid ~ .ticket-category-grid {
    border: 1px solid #e74a3b;
    border-radius: 16px;
    box-shadow: 0 0 0 3px rgba(231, 74, 59, .10);
    padding: 6px;
}

@media (max-width: 767.98px) {
    .modern-shell .ticket-category-card {
        flex-basis: calc(50% - 0.2rem);
    }
}

@media (max-width: 575.98px) {
    .modern-shell .ticket-category-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 0.375rem;
    }

    .modern-shell .ticket-category-search {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .modern-shell .ticket-category-count {
        align-self: flex-end;
    }

    .modern-shell .ticket-category-picker.has-many-categories .ticket-category-grid {
        max-height: 14rem;
    }

    .modern-shell .ticket-category-card {
        flex-basis: 100%;
        min-height: 3.2rem;
    }
}

/* Ticket form: compact, consistent, responsive */
.modern-shell .ticket-simple-form {
    color: var(--modern-text);
    font-size: 0.875rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern .card.modern-card {
    background: var(--modern-surface);
    border: 1px solid var(--modern-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.07);
}

.modern-shell .ticket-simple-form .modern-card-body {
    padding: 0.75rem;
}

.modern-shell .ticket-simple-form .ticket-form-section + .ticket-form-section {
    margin-top: 0.75rem;
}

.modern-shell .ticket-simple-form .ticket-form-section-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(var(--modern-accent-rgb), 0.035) 100%);
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    padding: 1rem;
}

.modern-shell .ticket-simple-form .ticket-form-section-header h5 {
    color: var(--modern-accent-strong);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.75rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern label,
.modern-shell .ticket-simple-form.ticket-form-modern .form-control,
.modern-shell .ticket-simple-form.ticket-form-modern .custom-file-label,
.modern-shell .ticket-simple-form.ticket-form-modern .choices__inner {
    font-size: 0.875rem;
    line-height: 1.4;
}

.modern-shell .ticket-simple-form.ticket-form-modern label {
    color: var(--modern-text);
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 0.375rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern .form-group {
    margin-bottom: 0.75rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern .ticket-field-feedback,
.modern-shell .ticket-simple-form.ticket-form-modern .form-group > .text-danger {
    align-items: flex-start;
    color: #b83226;
    display: flex !important;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.375rem;
    line-height: 1.35;
    margin-top: 0.35rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern .ticket-field-feedback::before,
.modern-shell .ticket-simple-form.ticket-form-modern .form-group > .text-danger::before {
    content: '\f071';
    flex: 0 0 auto;
    font-family: 'Font Awesome 5 Free';
    font-size: 0.6875rem;
    font-weight: 900;
    line-height: 1.45;
}

.modern-shell .ticket-simple-form.ticket-form-modern .choices.is-invalid .choices__inner {
    border-color: #e74a3b !important;
    box-shadow: 0 0 0 0.18rem rgba(231, 74, 59, 0.12) !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern .ticket-category-picker.is-invalid .ticket-category-grid {
    border: 1px solid #e74a3b;
    border-radius: 16px;
    box-shadow: 0 0 0 3px rgba(231, 74, 59, 0.1);
    padding: 6px;
}

.modern-shell .ticket-simple-form.ticket-form-modern .form-control,
.modern-shell .ticket-simple-form.ticket-form-modern .custom-file-label,
.modern-shell .ticket-simple-form.ticket-form-modern .input-group-text,
.modern-shell .ticket-simple-form.ticket-form-modern .modern-input-btn,
.modern-shell .ticket-simple-form.ticket-form-modern .choices__inner {
    min-height: 2.5rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern .input-group.modern-input-append .btn.modern-input-btn {
    flex: 0 0 2.5rem;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    min-width: 2.5rem;
    padding: 0 !important;
    width: 2.5rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern .input-group.modern-input-append .btn.modern-input-btn > i {
    align-items: center;
    display: inline-flex;
    font-size: 0.8125rem;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    width: 1rem;
}

.modern-shell .ticket-simple-form.ticket-form-modern textarea.form-control {
    min-height: auto;
}

.modern-shell .ticket-simple-form.ticket-form-modern .text-danger,
.modern-shell .ticket-simple-form .ticket-subcategory-status,
.modern-shell .ticket-simple-form .ticket-upload-help,
.modern-shell .ticket-simple-form .ticket-optional-label,
.modern-shell .ticket-simple-form .choices__item {
    font-size: 0.75rem;
    line-height: 1.4;
}

.modern-shell .ticket-simple-form .ticket-upload-help {
    color: var(--modern-subtext);
    display: block;
    margin-bottom: 0.375rem;
}

.modern-shell .ticket-simple-form .ticket-optional-label {
    border: 1px solid var(--modern-border);
    border-radius: 999px;
    color: var(--modern-subtext);
    font-weight: 600;
    margin-left: 0.375rem;
    padding: 0.15rem 0.45rem;
    vertical-align: middle;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step,
.modern-shell .ticket-simple-form.ticket-form-modern #priority,
.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step[class*="stage-"],
.modern-shell .ticket-simple-form.ticket-form-modern #priority[class*="priority-"] {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #d6deec !important;
    border-left-width: 4px !important;
    color: var(--modern-text) !important;
    font-weight: 600;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step.stage-open {
    background-color: rgba(78, 115, 223, 0.1) !important;
    border-color: rgba(78, 115, 223, 0.58) !important;
    color: #3157b7 !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step.stage-in-progress,
.modern-shell .ticket-simple-form.ticket-form-modern #priority.priority-medium {
    background-color: rgba(246, 194, 62, 0.16) !important;
    border-color: rgba(217, 154, 18, 0.62) !important;
    color: #8a6400 !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step.stage-pending {
    background-color: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.62) !important;
    color: #b45309 !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step.stage-resolving {
    background-color: rgba(54, 185, 204, 0.12) !important;
    border-color: rgba(54, 185, 204, 0.62) !important;
    color: #147d8d !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step.stage-closed,
.modern-shell .ticket-simple-form.ticket-form-modern #priority.priority-normal {
    background-color: rgba(28, 200, 138, 0.11) !important;
    border-color: rgba(28, 200, 138, 0.62) !important;
    color: #12805c !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step.stage-failed,
.modern-shell .ticket-simple-form.ticket-form-modern #priority.priority-high {
    background-color: rgba(231, 74, 59, 0.1) !important;
    border-color: rgba(231, 74, 59, 0.62) !important;
    color: #b83226 !important;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step[class*="stage-"],
.modern-shell .ticket-simple-form.ticket-form-modern #priority[class*="priority-"] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option,
.modern-shell .ticket-simple-form.ticket-form-modern #priority option {
    background: #ffffff;
    color: #25324d;
    font-weight: 600;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option[value="Open"] {
    color: #3157b7;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option[value="In Progress"],
.modern-shell .ticket-simple-form.ticket-form-modern #priority option[value="Medium"] {
    color: #8a6400;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option[value="Pending"] {
    color: #b45309;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option[value="Resolving"] {
    color: #147d8d;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option[value="Closed"],
.modern-shell .ticket-simple-form.ticket-form-modern #priority option[value="Normal"] {
    color: #12805c;
}

.modern-shell .ticket-simple-form.ticket-form-modern #workflow_step option[value="Failed"],
.modern-shell .ticket-simple-form.ticket-form-modern #priority option[value="High"] {
    color: #b83226;
}

.modern-shell .modern-form .ticket-color-select {
    --ticket-color-select-height: 2.375rem;
    --ticket-tone-rgb: 111, 126, 155;
    --ticket-tone-border: #7f8ca5;
    --ticket-tone-text: #42526d;
}

.modern-shell .ticket-simple-form.ticket-form-modern .ticket-color-select {
    --ticket-color-select-height: 2.5rem;
}

.modern-shell .modern-form .ticket-color-select[data-tone="blue"] {
    --ticket-tone-rgb: 78, 115, 223;
    --ticket-tone-border: #4e73df;
    --ticket-tone-text: #3157b7;
}

.modern-shell .modern-form .ticket-color-select[data-tone="amber"] {
    --ticket-tone-rgb: 217, 154, 18;
    --ticket-tone-border: #d99a12;
    --ticket-tone-text: #7a5900;
}

.modern-shell .modern-form .ticket-color-select[data-tone="orange"] {
    --ticket-tone-rgb: 249, 115, 22;
    --ticket-tone-border: #f97316;
    --ticket-tone-text: #a74708;
}

.modern-shell .modern-form .ticket-color-select[data-tone="cyan"] {
    --ticket-tone-rgb: 54, 185, 204;
    --ticket-tone-border: #36b9cc;
    --ticket-tone-text: #116f7d;
}

.modern-shell .modern-form .ticket-color-select[data-tone="green"] {
    --ticket-tone-rgb: 28, 200, 138;
    --ticket-tone-border: #1cc88a;
    --ticket-tone-text: #0d7352;
}

.modern-shell .modern-form .ticket-color-select[data-tone="red"] {
    --ticket-tone-rgb: 231, 74, 59;
    --ticket-tone-border: #e74a3b;
    --ticket-tone-text: #a52b20;
}

.modern-shell .modern-form .ticket-color-select .choices__inner {
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(var(--ticket-tone-rgb), 0.14), rgba(255, 255, 255, 0.96)) !important;
    border-color: rgba(var(--ticket-tone-rgb), 0.5) !important;
    border-left: 4px solid var(--ticket-tone-border) !important;
    height: var(--ticket-color-select-height);
    min-height: var(--ticket-color-select-height);
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
}

.modern-shell .modern-form .ticket-color-select.is-focused .choices__inner,
.modern-shell .modern-form .ticket-color-select.is-open .choices__inner {
    border-color: var(--ticket-tone-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--ticket-tone-rgb), 0.16) !important;
}

.modern-shell .modern-form .ticket-color-select.is-invalid .choices__inner {
    border-color: #e74a3b !important;
    box-shadow: 0 0 0 0.18rem rgba(231, 74, 59, 0.12) !important;
}

.modern-shell .modern-form .ticket-color-select .choices__list--single .choices__item {
    align-items: center;
    color: var(--ticket-tone-text);
    display: flex;
    font-weight: 700;
    gap: 0.5rem;
    line-height: 1.5;
}

.modern-shell .modern-form .ticket-color-select .choices__list--single {
    align-items: center;
    display: flex;
    height: 100%;
    padding-bottom: 0;
    padding-top: 0;
}

.modern-shell .modern-form .ticket-color-select--priority .choices__list--single .choices__item::before,
.modern-shell .modern-form .ticket-color-select--priority .choices__item--choice::before {
    background: var(--ticket-option-color, var(--ticket-tone-border));
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ticket-option-color, var(--ticket-tone-border));
    content: '';
    flex: 0 0 0.625rem;
    height: 0.625rem;
    width: 0.625rem;
}

.modern-shell .modern-form .ticket-color-select--stage .choices__list--single .choices__item::before,
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice::before {
    color: var(--ticket-option-color, var(--ticket-tone-border));
    content: var(--ticket-stage-icon, '\f059');
    flex: 0 0 1rem;
    font-family: 'Font Awesome 5 Free';
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    width: 1rem;
}

.modern-shell .modern-form .ticket-color-select--stage[data-value='Open'],
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice[data-value='Open'] {
    --ticket-stage-icon: '\f52b';
}

.modern-shell .modern-form .ticket-color-select--stage[data-value='In Progress'],
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice[data-value='In Progress'] {
    --ticket-stage-icon: '\f0ae';
}

.modern-shell .modern-form .ticket-color-select--stage[data-value='Pending'],
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice[data-value='Pending'] {
    --ticket-stage-icon: '\f017';
}

.modern-shell .modern-form .ticket-color-select--stage[data-value='Resolving'],
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice[data-value='Resolving'] {
    --ticket-stage-icon: '\f7d9';
}

.modern-shell .modern-form .ticket-color-select--stage[data-value='Closed'],
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice[data-value='Closed'] {
    --ticket-stage-icon: '\f058';
}

.modern-shell .modern-form .ticket-color-select--stage[data-value='Failed'],
.modern-shell .modern-form .ticket-color-select--stage .choices__item--choice[data-value='Failed'] {
    --ticket-stage-icon: '\f057';
}

.modern-shell .modern-form .ticket-color-select .choices__list--dropdown,
.modern-shell .modern-form .ticket-color-select .choices__list[aria-expanded] {
    padding: 0.3rem;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice {
    align-items: center;
    background: rgba(var(--ticket-option-rgb, 111, 126, 155), 0.09);
    border-left: 3px solid var(--ticket-option-color, #7f8ca5);
    border-radius: 7px;
    color: var(--ticket-option-text, #42526d);
    display: flex;
    font-weight: 600;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice:last-child {
    margin-bottom: 0;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice.is-highlighted {
    background: rgba(var(--ticket-option-rgb, 111, 126, 155), 0.2);
    color: var(--ticket-option-text, #42526d);
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Open"] {
    --ticket-option-rgb: 78, 115, 223;
    --ticket-option-color: #4e73df;
    --ticket-option-text: #3157b7;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="In Progress"],
.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Medium"] {
    --ticket-option-rgb: 217, 154, 18;
    --ticket-option-color: #d99a12;
    --ticket-option-text: #7a5900;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Pending"] {
    --ticket-option-rgb: 249, 115, 22;
    --ticket-option-color: #f97316;
    --ticket-option-text: #a74708;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Resolving"] {
    --ticket-option-rgb: 54, 185, 204;
    --ticket-option-color: #36b9cc;
    --ticket-option-text: #116f7d;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Closed"],
.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Normal"] {
    --ticket-option-rgb: 28, 200, 138;
    --ticket-option-color: #1cc88a;
    --ticket-option-text: #0d7352;
}

.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="Failed"],
.modern-shell .modern-form .ticket-color-select .choices__item--choice[data-value="High"] {
    --ticket-option-rgb: 231, 74, 59;
    --ticket-option-color: #e74a3b;
    --ticket-option-text: #a52b20;
}

.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--modern-border);
    border-left: 0.25rem solid #4e73df !important;
    border-radius: 10px;
    box-shadow: none;
    gap: 0.625rem;
    min-height: 4rem;
    padding: 0.625rem 0.75rem;
    transform: none;
}

.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card.border-left-success {
    border-left-color: #1cc88a !important;
}

.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card:hover {
    box-shadow: none;
    transform: none;
}

.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card.is-disabled {
    background: rgba(248, 249, 252, 0.84);
    border-left-color: #b7bfcd !important;
    opacity: 0.68;
}

.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card.is-disabled .feature-icon,
.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card.is-disabled .feature-content h6,
.modern-shell .ticket-simple-form .ticket-toggle-card.feature-card.is-disabled .ticket-toggle-note {
    color: var(--modern-subtext) !important;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .feature-icon {
    border-radius: 8px;
    flex: 0 0 2rem;
    font-size: 0.875rem;
    height: 2rem;
    margin-right: 0;
    width: 2rem;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .feature-content {
    padding-right: 0;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .feature-content h6 {
    font-size: 0.875rem;
    line-height: 1.4;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .ticket-toggle-note {
    color: var(--modern-subtext);
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.125rem;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .rect-switch-container {
    min-width: 2.75rem;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .rect-switch {
    height: 1.5rem;
    margin-bottom: 0;
    width: 2.75rem;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .rect-slider::before {
    height: 1.125rem;
    left: 0.1875rem;
    top: 0.1875rem;
    width: 1.125rem;
}

.modern-shell .ticket-simple-form .ticket-toggle-card .rect-switch-checkbox:checked + .rect-switch .rect-slider.primary {
    background: #4e73df;
    box-shadow: 0 0 0 0.12rem rgba(78, 115, 223, 0.24);
}

.modern-shell .ticket-simple-form .ticket-toggle-card .rect-switch-checkbox:checked + .rect-switch .rect-slider::before {
    transform: translateX(1.25rem);
}

.modern-shell .ticket-simple-form.ticket-form-modern .choices.choices-min-search:not(.choices-search-ready) .choices__list--dropdown .choices__item {
    display: none;
}

.modern-shell .ticket-simple-form.ticket-form-modern .choices.choices-min-search:not(.choices-search-ready) .choices__list--dropdown::after {
    color: var(--modern-subtext);
    content: attr(data-min-search-text);
    display: block;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.modern-shell .ticket-simple-form .ticket-form-footer {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--modern-border);
    bottom: 0;
    box-shadow: 0 -6px 18px rgba(31, 45, 78, 0.07);
    display: flex;
    flex-wrap: nowrap;
    gap: 0.625rem;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    position: sticky;
    z-index: 20;
}

.modern-shell .ticket-simple-form .ticket-form-footer-actions {
    align-items: center;
    display: flex;
    gap: 0.625rem;
}

@media (max-width: 575.98px) {
    .modern-shell .ticket-simple-form .modern-card-body,
    .modern-shell .ticket-simple-form .ticket-form-section-card {
        padding: 0.75rem;
    }

    .modern-shell .ticket-simple-form .ticket-form-footer,
    .modern-shell .ticket-simple-form .ticket-form-footer-actions {
        align-items: stretch;
        flex-direction: row;
        width: auto;
    }

    .modern-shell .ticket-simple-form .ticket-form-footer-actions {
        flex: 1 1 auto;
    }

    .modern-shell .ticket-simple-form .ticket-form-footer-actions .btn {
        justify-content: center;
        width: 100%;
    }

}

/* Ticketing activity logs: novice-friendly visual audit trail */
.btn-modern-action.btn-modern-action-label {
    gap: 0.4rem;
    height: 34px;
    min-width: 0;
    padding: 0 0.72rem !important;
    width: auto;
}

.btn-modern-action.btn-modern-action-label span {
    font-size: 0.75rem;
    font-weight: 800;
}

.modern-shell.ticketing-activity-page .modern-page-header {
    overflow: hidden;
    position: relative;
}

.modern-shell.ticketing-activity-page .modern-page-header::after {
    background: radial-gradient(circle, rgba(var(--modern-accent-rgb), 0.16) 0%, rgba(var(--modern-accent-rgb), 0) 70%);
    content: "";
    height: 150px;
    pointer-events: none;
    position: absolute;
    right: -45px;
    top: -80px;
    width: 150px;
}

.modern-shell.ticketing-activity-page .modern-page-header-main,
.modern-shell.ticketing-activity-page .modern-page-header-actions {
    position: relative;
    z-index: 1;
}

.modern-shell .ticketing-activity-filter-count {
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    margin-left: 0.35rem;
    min-height: 20px;
    min-width: 20px;
    padding: 0.2rem 0.36rem;
}

.modern-shell .ticketing-activity-filter-state {
    align-items: center;
    border-radius: 12px;
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
}

.modern-shell .ticketing-activity-filter-state-icon {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.14);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.24);
    border-radius: 10px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
}

.modern-shell .ticketing-activity-filter-state-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.modern-shell .ticketing-activity-filter-state-copy strong {
    color: var(--modern-accent-strong);
    font-size: 0.82rem;
}

.modern-shell .ticketing-activity-filter-state-copy small {
    color: var(--modern-subtext);
    font-size: 0.72rem;
}

.modern-shell .ticketing-activity-filter-clear {
    color: var(--modern-danger-text);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-filter-clear:hover,
.modern-shell .ticketing-activity-filter-clear:focus {
    color: #8f1f31;
    text-decoration: none;
}

.modern-shell .ticketing-activity-stats .modern-status-card {
    min-height: 104px;
}

.modern-shell .ticketing-activity-list-card {
    overflow: hidden;
}

.modern-shell .ticketing-activity-list-card .modern-card-header {
    padding: 0.8rem 1rem !important;
}

.modern-shell .ticketing-activity-table-result {
    background: rgba(var(--modern-accent-rgb), 0.08);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.16);
    border-radius: 999px;
    color: var(--modern-subtext);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.58rem;
}

.modern-shell .ticketing-activity-table {
    min-width: 980px;
}

.modern-shell .ticketing-activity-table > tbody > tr {
    --activity-row-rgb: 78, 115, 223;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.modern-shell .ticketing-activity-table > tbody > tr.ticketing-activity-row-create {
    --activity-row-rgb: 34, 160, 94;
}

.modern-shell .ticketing-activity-table > tbody > tr.ticketing-activity-row-update {
    --activity-row-rgb: 217, 143, 22;
}

.modern-shell .ticketing-activity-table > tbody > tr.ticketing-activity-row-delete {
    --activity-row-rgb: 211, 62, 78;
}

.modern-shell .ticketing-activity-table > tbody > tr:hover {
    background: rgba(var(--activity-row-rgb), 0.035);
    box-shadow: inset 3px 0 0 rgba(var(--activity-row-rgb), 0.75);
}

.modern-shell .ticketing-activity-table > tbody > tr > td {
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
}

.modern-shell .ticketing-activity-event,
.modern-shell .ticketing-activity-module,
.modern-shell .ticketing-activity-actor {
    align-items: center;
    display: flex;
    gap: 0.62rem;
}

.modern-shell .ticketing-activity-action-icon,
.modern-shell .ticketing-activity-detail-action {
    --activity-color-rgb: 78, 115, 223;
    --activity-color-ink: var(--modern-accent-strong);
    align-items: center;
    background: rgba(var(--activity-color-rgb), 0.12);
    border: 1px solid rgba(var(--activity-color-rgb), 0.23);
    color: var(--activity-color-ink);
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
}

.modern-shell .ticketing-activity-action-create {
    --activity-color-rgb: 34, 160, 94;
    --activity-color-ink: #187a45;
}

.modern-shell .ticketing-activity-action-update {
    --activity-color-rgb: 217, 143, 22;
    --activity-color-ink: #95600c;
}

.modern-shell .ticketing-activity-action-delete {
    --activity-color-rgb: 211, 62, 78;
    --activity-color-ink: #ac2d3e;
}

.modern-shell .ticketing-activity-action-icon {
    border-radius: 11px;
    height: 38px;
    width: 38px;
}

.modern-shell .ticketing-activity-event-copy,
.modern-shell .ticketing-activity-record,
.modern-shell .ticketing-activity-change-summary,
.modern-shell .ticketing-activity-actor > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.modern-shell .ticketing-activity-event-copy strong,
.modern-shell .ticketing-activity-module strong,
.modern-shell .ticketing-activity-record strong,
.modern-shell .ticketing-activity-actor strong,
.modern-shell .ticketing-activity-change-summary strong {
    color: #34415f;
    font-size: 0.82rem;
    font-weight: 800;
}

.modern-shell .ticketing-activity-event-copy small,
.modern-shell .ticketing-activity-record small,
.modern-shell .ticketing-activity-actor small,
.modern-shell .ticketing-activity-change-summary small {
    color: var(--modern-subtext);
    font-size: 0.72rem;
}

.modern-shell .ticketing-activity-module-icon,
.modern-shell .ticketing-activity-actor-icon {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.09);
    border-radius: 9px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 31px;
    height: 31px;
    justify-content: center;
}

.modern-shell .ticketing-activity-record > span {
    align-self: flex-start;
    background: var(--modern-accent-soft);
    border-radius: 999px;
    color: var(--modern-accent-strong);
    font-size: 0.65rem;
    font-weight: 800;
    margin-top: 0.25rem;
    padding: 0.18rem 0.42rem;
}

.modern-shell .ticketing-activity-change-summary strong {
    color: var(--modern-accent-strong);
}

.modern-shell .ticketing-activity-change-summary small {
    margin-top: 0.16rem;
    max-width: 260px;
}

.modern-shell .ticketing-activity-pagination {
    align-items: center;
    border-radius: 12px;
    display: flex;
    justify-content: flex-end;
    padding: 0.55rem 0.75rem;
}

.modern-shell .ticketing-activity-pagination .pagination {
    margin-bottom: 0;
}

.modern-shell .ticketing-activity-filter-modal-body {
    padding: 1rem 1rem 0.25rem;
}

.modern-shell .ticketing-activity-filter-modal-body label {
    color: #465370;
    font-size: 0.76rem;
    font-weight: 800;
}

.modern-shell .ticketing-activity-detail-hero {
    align-items: stretch;
    border-radius: 16px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    overflow: hidden;
    padding: 1.15rem;
    position: relative;
}

.modern-shell .ticketing-activity-detail-hero::before {
    background: radial-gradient(circle, rgba(var(--modern-accent-rgb), 0.14) 0%, rgba(var(--modern-accent-rgb), 0) 72%);
    content: "";
    height: 240px;
    left: -100px;
    pointer-events: none;
    position: absolute;
    top: -130px;
    width: 240px;
}

.modern-shell .ticketing-activity-detail-event {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.modern-shell .ticketing-activity-detail-action {
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(var(--activity-color-rgb), 0.16);
    flex: 0 0 58px;
    font-size: 1.2rem;
    height: 58px;
}

.modern-shell .ticketing-activity-detail-copy {
    min-width: 0;
}

.modern-shell .ticketing-activity-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.48rem;
}

.modern-shell .ticketing-activity-detail-copy h2 {
    color: #283754;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
}

.modern-shell .ticketing-activity-detail-meta {
    align-items: center;
    color: var(--modern-subtext);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0.45rem 0.85rem;
    margin-top: 0.58rem;
}

.modern-shell .ticketing-activity-detail-meta span {
    align-items: center;
    display: inline-flex;
    gap: 0.32rem;
}

.modern-shell .ticketing-activity-detail-meta i {
    color: var(--modern-accent-strong);
}

.modern-shell .ticketing-activity-detail-customer {
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 14px;
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem;
    position: relative;
    z-index: 1;
}

.modern-shell .ticketing-activity-detail-customer-icon {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.12);
    border-radius: 12px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
}

.modern-shell .ticketing-activity-detail-customer > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modern-shell .ticketing-activity-detail-customer small {
    color: var(--modern-subtext);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-detail-customer strong {
    color: #34415f;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-shell .ticketing-activity-detail-customer em {
    color: var(--modern-accent-strong);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
}

.modern-shell .ticketing-activity-section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1rem;
}

.modern-shell .ticketing-activity-section-header > div,
.modern-shell .ticketing-activity-technical-title {
    align-items: center;
    display: flex;
    gap: 0.58rem;
}

.modern-shell .ticketing-activity-section-header h6 {
    color: #34415f;
    font-size: 0.9rem;
    font-weight: 900;
    margin: 0;
}

.modern-shell .ticketing-activity-section-icon {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.11);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 9px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
}

.modern-shell .ticketing-activity-change-count {
    background: rgba(var(--modern-accent-rgb), 0.09);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.17);
    border-radius: 999px;
    color: var(--modern-accent-strong);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.28rem 0.52rem;
}

.modern-shell .ticketing-activity-changes-body {
    display: grid;
    gap: 0.75rem;
}

.modern-shell .ticketing-activity-change-item {
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid #e3eaf7;
    border-radius: 14px;
    padding: 0.8rem;
}

.modern-shell .ticketing-activity-change-field {
    align-items: center;
    display: flex;
    gap: 0.48rem;
    margin-bottom: 0.58rem;
}

.modern-shell .ticketing-activity-change-field > span {
    align-items: center;
    background: var(--modern-accent-soft);
    border-radius: 8px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
}

.modern-shell .ticketing-activity-change-field strong {
    color: #34415f;
    font-size: 0.82rem;
    font-weight: 900;
}

.modern-shell .ticketing-activity-compare {
    align-items: stretch;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
}

.modern-shell .ticketing-activity-value {
    border: 1px solid transparent;
    border-radius: 11px;
    min-width: 0;
    padding: 0.65rem 0.72rem;
}

.modern-shell .ticketing-activity-value-old {
    background: rgba(211, 62, 78, 0.055);
    border-color: rgba(211, 62, 78, 0.13);
}

.modern-shell .ticketing-activity-value-new {
    background: rgba(34, 160, 94, 0.065);
    border-color: rgba(34, 160, 94, 0.15);
}

.modern-shell .ticketing-activity-value > small {
    display: block;
    font-size: 0.68rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-value-old > small {
    color: #ac2d3e;
}

.modern-shell .ticketing-activity-value-new > small {
    color: #187a45;
}

.modern-shell .ticketing-activity-value > div {
    color: #3e4a66;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-value code {
    background: rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    color: #4f5c79;
    font-size: 0.72rem;
    margin: 0;
    max-height: 230px;
    overflow: auto;
    padding: 0.48rem;
    white-space: pre-wrap;
}

.modern-shell .ticketing-activity-compare-arrow {
    align-items: center;
    color: var(--modern-accent-light);
    display: inline-flex;
    justify-content: center;
}

.modern-shell .ticketing-activity-technical {
    border-radius: 14px;
    overflow: hidden;
}

.modern-shell .ticketing-activity-technical-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    text-align: left;
    width: 100%;
}

.modern-shell .ticketing-activity-technical-toggle:hover,
.modern-shell .ticketing-activity-technical-toggle:focus {
    background: rgba(var(--modern-accent-rgb), 0.035);
    outline: none;
}

.modern-shell .ticketing-activity-technical-title > span:last-child {
    display: flex;
    flex-direction: column;
}

.modern-shell .ticketing-activity-technical-title strong {
    color: #34415f;
    font-size: 0.84rem;
    font-weight: 900;
}

.modern-shell .ticketing-activity-technical-title small {
    color: var(--modern-subtext);
    font-size: 0.7rem;
}

.modern-shell .ticketing-activity-technical-chevron {
    color: var(--modern-accent-strong);
    transition: transform 0.2s ease;
}

.modern-shell .ticketing-activity-technical-toggle:not(.collapsed) .ticketing-activity-technical-chevron {
    transform: rotate(180deg);
}

.modern-shell .ticketing-activity-technical-grid {
    border-top: 1px solid var(--modern-border);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.9rem 1rem 1rem;
}

.modern-shell .ticketing-activity-technical-grid > div {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid #e3eaf7;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.65rem 0.72rem;
}

.modern-shell .ticketing-activity-technical-grid small {
    color: var(--modern-subtext);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-technical-grid strong {
    color: #3d4964;
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: 0.16rem;
}

.modern-shell .ticketing-activity-technical-wide {
    grid-column: span 2;
}

@media (max-width: 991.98px) {
    .modern-shell .ticketing-activity-detail-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-detail-customer {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .modern-shell .ticketing-activity-list-card .modern-card-body {
        padding: 0.75rem !important;
    }

    .modern-shell .ticketing-activity-list-card .table-responsive {
        overflow: visible;
    }

    .modern-shell .ticketing-activity-table {
        min-width: 0;
    }

    .modern-shell .ticketing-activity-table tbody td.ticketing-activity-event-cell {
        background: linear-gradient(135deg, rgba(var(--activity-row-rgb), 0.14), rgba(var(--activity-row-rgb), 0.04));
        border-bottom: 1px solid rgba(var(--activity-row-rgb), 0.16);
        display: block;
    }

    .modern-shell .ticketing-activity-table tbody td.ticketing-activity-event-cell::before {
        display: none;
    }

    .modern-shell .ticketing-activity-table .ticketing-activity-event {
        justify-content: flex-start;
    }

    .modern-shell .ticketing-activity-table tbody td:not(.ticketing-activity-event-cell) > * {
        max-width: 58%;
    }

    .modern-shell .ticketing-activity-table .ticketing-activity-change-summary small {
        max-width: none;
    }

    .modern-shell .ticketing-activity-compare {
        grid-template-columns: minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-compare-arrow {
        min-height: 20px;
        transform: rotate(90deg);
    }

    .modern-shell .ticketing-activity-technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .modern-shell .ticketing-activity-filter-state {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .modern-shell .ticketing-activity-filter-clear {
        margin-left: 44px;
    }

    .modern-shell .ticketing-activity-stats .modern-status-card {
        min-height: 98px;
    }

    .modern-shell .ticketing-activity-table-result {
        white-space: normal;
    }

    .modern-shell .ticketing-activity-pagination {
        justify-content: center;
        overflow-x: auto;
    }

    .modern-shell .ticketing-activity-detail-hero {
        padding: 0.9rem;
    }

    .modern-shell .ticketing-activity-detail-event {
        align-items: flex-start;
    }

    .modern-shell .ticketing-activity-detail-action {
        border-radius: 13px;
        flex-basis: 46px;
        height: 46px;
    }

    .modern-shell .ticketing-activity-detail-copy h2 {
        font-size: 1rem;
    }

    .modern-shell .ticketing-activity-section-header {
        align-items: flex-start;
        gap: 0.6rem;
    }

    .modern-shell .ticketing-activity-change-count {
        white-space: nowrap;
    }

    .modern-shell .ticketing-activity-technical-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-technical-wide {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-shell .ticketing-activity-table > tbody > tr,
    .modern-shell .ticketing-activity-technical-chevron {
        transition: none;
    }
}

/* Simplified activity detail for non-technical users */
.modern-shell.ticketing-activity-detail-page > .modern-page-header,
.modern-shell.ticketing-activity-detail-page > .ticketing-activity-detail-hero,
.modern-shell.ticketing-activity-detail-page > .ticketing-activity-changes-card {
    max-width: none;
    min-width: 0;
    width: 100%;
}

.modern-shell .ticketing-activity-detail-simple {
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem;
}

.modern-shell .ticketing-activity-detail-context {
    color: var(--modern-accent-strong);
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-detail-meta-simple {
    gap: 0.45rem 1rem;
    margin-top: 0.5rem;
}

.modern-shell .ticketing-activity-detail-meta-simple span {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.1);
    border-radius: 999px;
    padding: 0.28rem 0.52rem;
}

.modern-shell .ticketing-activity-changes-simple .ticketing-activity-changes-body {
    gap: 0.6rem;
}

.modern-shell .ticketing-activity-change-item-simple {
    background: #ffffff;
    border-color: #e7ecf6;
    padding: 0.72rem;
}

.modern-shell .ticketing-activity-change-field-simple {
    margin-bottom: 0.45rem;
}

.modern-shell .ticketing-activity-change-field-simple strong {
    color: #34415f;
    font-size: 0.8rem;
}

.modern-shell .ticketing-activity-compare-simple .ticketing-activity-value {
    padding: 0.55rem 0.65rem;
}

.modern-shell .ticketing-activity-more-toggle {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.055);
    border: 1px dashed rgba(var(--modern-accent-rgb), 0.3);
    border-radius: 11px;
    color: var(--modern-accent-strong);
    display: flex;
    font-size: 0.76rem;
    font-weight: 800;
    justify-content: space-between;
    padding: 0.62rem 0.75rem;
    text-align: left;
    width: 100%;
}

.modern-shell .ticketing-activity-more-toggle:hover,
.modern-shell .ticketing-activity-more-toggle:focus {
    background: rgba(var(--modern-accent-rgb), 0.1);
    outline: none;
}

.modern-shell .ticketing-activity-more-chevron {
    transition: transform 0.2s ease;
}

.modern-shell .ticketing-activity-more-toggle:not(.collapsed) .ticketing-activity-more-chevron {
    transform: rotate(180deg);
}

.modern-shell .ticketing-activity-more-list {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.6rem;
}

@media (max-width: 575.98px) {
    .modern-shell .ticketing-activity-detail-simple {
        padding: 0.8rem;
    }

    .modern-shell .ticketing-activity-detail-meta-simple {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell .ticketing-activity-detail-meta-simple span {
        border-radius: 9px;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-shell .ticketing-activity-more-chevron {
        transition: none;
    }
}

/* Compact left-right comparison for activity detail */
.modern-shell .ticketing-activity-compact-list {
    border: 1px solid #e2e8f4;
    border-radius: 12px;
    overflow: hidden;
}

.modern-shell .ticketing-activity-compact-head,
.modern-shell .ticketing-activity-compact-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
}

.modern-shell .ticketing-activity-compact-head {
    background: var(--modern-accent-softer);
    border-bottom: 1px solid var(--modern-border);
    color: var(--modern-subtext);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-compact-head span,
.modern-shell .ticketing-activity-compact-row > div {
    padding: 0.55rem 0.68rem;
}

.modern-shell .ticketing-activity-compact-head span + span,
.modern-shell .ticketing-activity-compact-row > div + div {
    border-left: 1px solid #e6ebf5;
}

.modern-shell .ticketing-activity-compact-row {
    background: rgba(255, 255, 255, 0.76);
    border-bottom: 1px solid #edf1f7;
    color: #46516b;
    font-size: 0.76rem;
}

.modern-shell .ticketing-activity-compact-row:last-child {
    border-bottom: 0;
}

.modern-shell .ticketing-activity-compact-field {
    align-items: center;
    color: #34415f;
    display: flex;
    font-weight: 800;
}

.modern-shell .ticketing-activity-compact-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-compact-value > span {
    display: block;
    line-height: 1.45;
    white-space: pre-wrap;
}

.modern-shell .ticketing-activity-value-empty {
    color: var(--modern-subtext);
    font-style: italic;
}

.modern-shell .ticketing-activity-compact-value > small {
    display: none;
}

.modern-shell .ticketing-activity-compact-old {
    background: rgba(211, 62, 78, 0.035);
}

.modern-shell .ticketing-activity-compact-new {
    background: rgba(34, 160, 94, 0.045);
}

.modern-shell .ticketing-activity-compact-value code {
    background: rgba(255, 255, 255, 0.74);
    border-radius: 6px;
    color: #4f5c79;
    font-size: 0.68rem;
    margin: 0;
    max-height: 90px;
    overflow: auto;
    padding: 0.3rem;
    white-space: pre-wrap;
}

.modern-shell .ticketing-activity-compact-list .ticketing-activity-more-toggle {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    margin: 0;
}

.modern-shell .ticketing-activity-compact-list .collapse .ticketing-activity-compact-row:last-child {
    border-bottom: 0;
}

.modern-shell .ticketing-activity-compact-list .collapse.show {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-color: rgba(var(--modern-accent-rgb), 0.4) transparent;
    scrollbar-width: thin;
}

.modern-shell .ticketing-activity-compact-list .collapse.show::-webkit-scrollbar {
    width: 7px;
}

.modern-shell .ticketing-activity-compact-list .collapse.show::-webkit-scrollbar-thumb {
    background: rgba(var(--modern-accent-rgb), 0.36);
    border-radius: 999px;
}

.modern-shell .ticketing-activity-compact-list .collapse.show::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 575.98px) {
    .modern-shell .ticketing-activity-compact-head {
        display: none;
    }

    .modern-shell .ticketing-activity-compact-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-compact-field {
        background: var(--modern-accent-softer);
        border-bottom: 1px solid #e6ebf5;
        grid-column: 1 / -1;
        padding-bottom: 0.42rem;
        padding-top: 0.42rem;
    }

    .modern-shell .ticketing-activity-compact-row > div + div {
        border-left: 0;
    }

    .modern-shell .ticketing-activity-compact-new {
        border-left: 1px solid #e6ebf5 !important;
    }

    .modern-shell .ticketing-activity-compact-value > small {
        display: block;
        font-size: 0.62rem;
        font-weight: 900;
        margin-bottom: 0.22rem;
        text-transform: uppercase;
    }

    .modern-shell .ticketing-activity-compact-old > small {
        color: #ac2d3e;
    }

    .modern-shell .ticketing-activity-compact-new > small {
        color: #187a45;
    }
}

/* Ticketing activity stream: compact action and inline changes */
.modern-shell .ticketing-activity-stream-card {
    overflow: hidden;
}

.modern-shell .ticketing-activity-stream-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    justify-content: space-between;
    padding: 0.78rem 1rem;
}

.modern-shell .ticketing-activity-stream-title {
    align-items: center;
    display: flex;
    gap: 0.62rem;
    min-width: 0;
}

.modern-shell .ticketing-activity-stream-title > span {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.11);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 9px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
}

.modern-shell .ticketing-activity-stream-title > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modern-shell .ticketing-activity-stream-title h6 {
    color: #34415f;
    font-size: 0.9rem;
    font-weight: 900;
    margin: 0;
}

.modern-shell .ticketing-activity-stream-title small {
    color: var(--modern-subtext);
    font-size: 0.7rem;
    margin-top: 0.08rem;
}

.modern-shell .ticketing-activity-stream-toolbar {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.55rem 0.8rem;
    justify-content: flex-end;
    min-width: 0;
}

.modern-shell .ticketing-activity-bulk-actions,
.modern-shell .ticketing-activity-bulk-select-page {
    align-items: center;
    display: inline-flex;
}

.modern-shell .ticketing-activity-bulk-actions {
    gap: 0.48rem;
}

.modern-shell .ticketing-activity-bulk-select-page {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #dbe3f1;
    border-radius: 999px;
    color: #56627b;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    gap: 0.42rem;
    margin: 0;
    min-height: 31px;
    padding: 0.28rem 0.62rem;
}

.modern-shell .ticketing-activity-bulk-checkbox {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    border: 1.5px solid #bdc9e4;
    border-radius: 0.34rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(78, 115, 223, 0.08);
    cursor: pointer;
    display: inline-grid;
    flex: 0 0 1.05rem;
    height: 1.05rem;
    margin: 0;
    place-content: center;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    width: 1.05rem;
}

.modern-shell .ticketing-activity-bulk-checkbox::after {
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 0.52rem;
    margin-top: -0.08rem;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.15s ease;
    width: 0.28rem;
}

.modern-shell .ticketing-activity-bulk-checkbox:hover {
    border-color: var(--modern-accent);
    transform: translateY(-1px);
}

.modern-shell .ticketing-activity-bulk-checkbox:focus-visible {
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 3px var(--modern-accent-soft), 0 4px 10px rgba(78, 115, 223, 0.16);
    outline: none;
}

.modern-shell .ticketing-activity-bulk-checkbox:checked,
.modern-shell .ticketing-activity-bulk-checkbox:indeterminate {
    background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-strong) 100%);
    border-color: var(--modern-accent);
    box-shadow: 0 5px 12px rgba(78, 115, 223, 0.28);
}

.modern-shell .ticketing-activity-bulk-checkbox:checked::after {
    transform: rotate(45deg) scale(1);
}

.modern-shell .ticketing-activity-bulk-checkbox:indeterminate::after {
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    height: 2px;
    margin: 0;
    transform: scale(1);
    width: 0.5rem;
}

.modern-shell .ticketing-activity-bulk-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.modern-shell .ticketing-activity-bulk-delete {
    border-color: rgba(211, 62, 78, 0.24);
    color: #a72b3b;
}

.modern-shell .ticketing-activity-bulk-delete:hover,
.modern-shell .ticketing-activity-bulk-delete:focus,
.modern-shell .ticketing-activity-bulk-delete-active {
    background: rgba(211, 62, 78, 0.1);
    border-color: rgba(211, 62, 78, 0.34);
    color: #962435;
}

.modern-shell .ticketing-activity-stream-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.8rem;
    justify-content: flex-end;
}

.modern-shell .ticketing-activity-entries-control {
    align-items: center;
    color: #5f6b85;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    gap: 0.38rem;
    margin: 0;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-entries-control select {
    border-color: #dbe3f1;
    border-radius: 8px;
    color: #3e4a66;
    font-size: 0.72rem;
    font-weight: 800;
    height: 31px;
    padding: 0.2rem 1.55rem 0.2rem 0.48rem;
    width: 68px;
}

.modern-shell .ticketing-activity-search-control {
    align-items: center;
    display: flex;
    position: relative;
}

.modern-shell .ticketing-activity-search-control input {
    border-color: #dbe3f1;
    border-radius: 9px;
    font-size: 0.72rem;
    height: 31px;
    min-width: 220px;
    padding-left: 2rem;
    padding-right: 0.55rem;
}

.modern-shell .ticketing-activity-search-icon {
    align-items: center;
    color: #7b879f;
    display: inline-flex;
    font-size: 0.72rem;
    height: 31px;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 32px;
}

.modern-shell .ticketing-activity-search-clear {
    align-items: center;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22);
    display: inline-flex;
    height: 31px;
    justify-content: center;
    width: 32px;
}

.modern-shell .ticketing-activity-search-clear {
    background: rgba(211, 62, 78, 0.07);
    border-color: rgba(211, 62, 78, 0.16);
    border-radius: 9px;
    color: #ac2d3e;
    margin-left: 0.32rem;
}

.modern-shell .ticketing-activity-search-clear:hover,
.modern-shell .ticketing-activity-search-clear:focus {
    filter: brightness(0.96);
    outline: none;
    text-decoration: none;
}

.modern-shell .ticketing-activity-stream-body {
    background: rgba(247, 249, 255, 0.52);
}

.modern-shell .ticketing-activity-stream-item {
    --activity-stream-rgb: 78, 115, 223;
    align-items: start;
    border-bottom: 1px solid #e7ecf5;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 108px minmax(0, 1fr);
    padding: 0.9rem 1rem;
}

.modern-shell .ticketing-activity-stream-item:last-child {
    border-bottom: 0;
}

.modern-shell .ticketing-activity-stream-item-selected {
    background: rgba(var(--modern-accent-rgb), 0.055);
    box-shadow: inset 3px 0 0 rgba(var(--modern-accent-rgb), 0.72);
}

.modern-shell .ticketing-activity-stream-item-create {
    --activity-stream-rgb: 34, 160, 94;
}

.modern-shell .ticketing-activity-stream-item-delete {
    --activity-stream-rgb: 211, 62, 78;
}

.modern-shell .ticketing-activity-stream-topic {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.22rem;
}

.modern-shell .ticketing-activity-stream-select {
    align-items: center;
    display: inline-flex;
    margin: 0 0 0.08rem;
}

.modern-shell .ticketing-activity-stream-action {
    border: 1px solid rgba(var(--activity-stream-rgb), 0.28);
    border-radius: 999px;
    color: rgb(var(--activity-stream-rgb));
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.3rem 0.55rem;
}

.modern-shell .ticketing-activity-stream-action-create {
    background: rgba(34, 160, 94, 0.1);
}

.modern-shell .ticketing-activity-stream-action-update {
    background: rgba(78, 115, 223, 0.1);
}

.modern-shell .ticketing-activity-stream-action-delete {
    background: rgba(211, 62, 78, 0.09);
}

.modern-shell .ticketing-activity-stream-count {
    align-items: center;
    color: var(--modern-subtext);
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 800;
    gap: 0.3rem;
    line-height: 1.25;
}

.modern-shell .ticketing-activity-stream-log {
    background: rgba(241, 246, 255, 0.78);
    border: 1px solid rgba(var(--activity-stream-rgb), 0.2);
    border-radius: 13px;
    box-shadow: 0 5px 14px rgba(51, 70, 112, 0.055);
    min-width: 0;
    overflow: hidden;
}

.modern-shell .ticketing-activity-stream-meta {
    align-items: center;
    border-bottom: 1px solid rgba(var(--activity-stream-rgb), 0.11);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.55rem 0.72rem;
}

.modern-shell .ticketing-activity-stream-categories {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(105px, 0.65fr) minmax(145px, 0.9fr) minmax(180px, 1.35fr) minmax(145px, 1fr) minmax(95px, 0.65fr);
    min-width: 0;
}

.modern-shell .ticketing-activity-stream-category {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0.18rem 0.58rem;
}

.modern-shell .ticketing-activity-stream-category + .ticketing-activity-stream-category {
    border-left: 1px solid rgba(var(--activity-stream-rgb), 0.11);
}

.modern-shell .ticketing-activity-stream-category small {
    color: var(--modern-subtext);
    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1.2;
    margin-bottom: 0.17rem;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-stream-category strong {
    align-items: center;
    color: #34415f;
    display: inline-flex;
    font-size: 0.73rem;
    font-weight: 900;
    gap: 0.28rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-stream-category span {
    align-items: center;
    color: var(--modern-subtext);
    display: inline-flex;
    font-size: 0.62rem;
    gap: 0.25rem;
    margin-top: 0.13rem;
}

.modern-shell .ticketing-activity-stream-detail {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.09);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.16);
    border-radius: 8px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    gap: 0.35rem;
    height: 28px;
    justify-content: center;
    padding: 0 0.55rem;
    transition: background 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-stream-detail span {
    font-size: 0.66rem;
    font-weight: 800;
}

.modern-shell .ticketing-activity-stream-detail:hover,
.modern-shell .ticketing-activity-stream-detail:focus {
    background: rgba(var(--modern-accent-rgb), 0.16);
    color: var(--modern-accent-strong);
    text-decoration: none;
    transform: translateX(2px);
}

.modern-shell .ticketing-activity-stream-changes {
    display: grid;
    gap: 0.34rem;
    padding: 0.62rem 0.72rem 0.5rem;
}

.modern-shell .ticketing-activity-stream-changes .collapse.show {
    display: grid;
    gap: 0.34rem;
}

.modern-shell .ticketing-activity-stream-change {
    align-items: start;
    display: grid;
    gap: 0.36rem;
    grid-template-columns: 24px minmax(130px, 0.55fr) minmax(72px, 1fr) 24px minmax(72px, 1fr);
    min-width: 0;
}

.modern-shell .ticketing-activity-stream-number {
    color: #68748e;
    font-size: 0.7rem;
    padding-top: 0.22rem;
    text-align: right;
}

.modern-shell .ticketing-activity-stream-field {
    color: #46516b;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.35;
    padding-top: 0.18rem;
}

.modern-shell .ticketing-activity-stream-value {
    border: 1px solid transparent;
    border-radius: 6px;
    display: -webkit-box;
    font-size: 0.69rem;
    line-height: 1.3;
    max-width: 100%;
    min-height: 24px;
    overflow: hidden;
    padding: 0.22rem 0.42rem;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.modern-shell .ticketing-activity-stream-value-old {
    background: rgba(241, 117, 58, 0.075);
    border-color: rgba(241, 117, 58, 0.18);
    color: #c44e1f;
}

.modern-shell .ticketing-activity-stream-value-new {
    background: rgba(20, 172, 118, 0.075);
    border-color: rgba(20, 172, 118, 0.18);
    color: #07885b;
}

.modern-shell .ticketing-activity-stream-value-empty {
    color: #8a94a8;
    font-style: normal;
}

.modern-shell .ticketing-activity-stream-arrow {
    align-items: center;
    color: #66738d;
    display: inline-flex;
    font-size: 0.68rem;
    justify-content: center;
    min-height: 24px;
}

.modern-shell .ticketing-activity-stream-no-change {
    color: var(--modern-subtext);
    font-size: 0.72rem;
    font-style: italic;
}

.modern-shell .ticketing-activity-stream-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--modern-accent-strong);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 800;
    gap: 0.35rem;
    margin: 0 0.72rem 0.55rem;
    padding: 0.12rem 0;
}

.modern-shell .ticketing-activity-stream-toggle:hover,
.modern-shell .ticketing-activity-stream-toggle:focus {
    color: var(--modern-accent);
    outline: none;
    text-decoration: underline;
}

.modern-shell .ticketing-activity-stream-toggle i {
    font-size: 0.6rem;
    transition: transform 0.18s ease;
}

.modern-shell .ticketing-activity-stream-toggle-less,
.modern-shell .ticketing-activity-stream-toggle:not(.collapsed) .ticketing-activity-stream-toggle-more {
    display: none;
}

.modern-shell .ticketing-activity-stream-toggle:not(.collapsed) .ticketing-activity-stream-toggle-less {
    display: inline;
}

.modern-shell .ticketing-activity-stream-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

.modern-shell .ticketing-activity-stream-footer {
    align-items: center;
    border-top: 1px solid #e5ebf5;
    color: var(--modern-subtext);
    display: flex;
    font-size: 0.7rem;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.7rem 1rem;
}

.modern-shell .ticketing-activity-stream-pagination {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.modern-shell .ticketing-activity-stream-pagination > span {
    background: rgba(var(--modern-accent-rgb), 0.07);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 8px;
    color: var(--modern-accent-strong);
    font-weight: 800;
    padding: 0.32rem 0.52rem;
}

.modern-shell .ticketing-activity-stream-pagination nav,
.modern-shell .ticketing-activity-stream-pagination .pagination {
    margin: 0;
}

.modern-shell .ticketing-activity-stream-pagination .page-link {
    font-size: 0.7rem;
    line-height: 1.2;
    padding: 0.38rem 0.56rem;
}

@media (max-width: 991.98px) {
    .modern-shell .ticketing-activity-stream-toolbar {
        flex: 1 1 100%;
        width: 100%;
    }

    .modern-shell .ticketing-activity-stream-item {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-stream-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell .ticketing-activity-stream-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .modern-shell .ticketing-activity-stream-category {
        border-bottom: 1px solid rgba(var(--activity-stream-rgb), 0.09);
        padding-bottom: 0.42rem;
        padding-top: 0.42rem;
    }

    .modern-shell .ticketing-activity-stream-category + .ticketing-activity-stream-category {
        border-left: 0;
    }

    .modern-shell .ticketing-activity-stream-category:nth-child(even) {
        border-left: 1px solid rgba(var(--activity-stream-rgb), 0.09);
    }

    .modern-shell .ticketing-activity-stream-change {
        grid-template-columns: 22px minmax(105px, 0.5fr) minmax(64px, 1fr) 22px minmax(64px, 1fr);
    }
}

@media (max-width: 767.98px) {
    .modern-shell .ticketing-activity-stream-toolbar {
        justify-content: space-between;
    }

    .modern-shell .ticketing-activity-stream-controls {
        justify-content: space-between;
        width: 100%;
    }

    .modern-shell .ticketing-activity-search-control {
        flex: 1 1 230px;
    }

    .modern-shell .ticketing-activity-search-control input {
        min-width: 0;
        width: 100%;
    }

    .modern-shell .ticketing-activity-stream-item {
        gap: 0.55rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 0.75rem;
    }

    .modern-shell .ticketing-activity-stream-topic {
        align-items: center;
        flex-direction: row;
        padding-top: 0;
    }

    .modern-shell .ticketing-activity-stream-change {
        grid-template-columns: 22px minmax(0, 1fr) 22px minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-stream-number {
        grid-row: 1 / 3;
    }

    .modern-shell .ticketing-activity-stream-field {
        grid-column: 2 / -1;
        padding-top: 0.2rem;
    }

    .modern-shell .ticketing-activity-stream-value-old {
        grid-column: 2;
    }

    .modern-shell .ticketing-activity-stream-arrow {
        grid-column: 3;
    }

    .modern-shell .ticketing-activity-stream-value-new {
        grid-column: 4;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .ticketing-activity-stream-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .ticketing-activity-bulk-actions {
        justify-content: space-between;
        width: 100%;
    }

    .modern-shell .ticketing-activity-bulk-select-page {
        flex: 1 1 auto;
    }

    .modern-shell .ticketing-activity-stream-controls,
    .modern-shell .ticketing-activity-stream-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .ticketing-activity-entries-control {
        justify-content: flex-start;
    }

    .modern-shell .ticketing-activity-search-control {
        flex-basis: auto;
        width: 100%;
    }

    .modern-shell .ticketing-activity-stream-pagination {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .modern-shell .ticketing-activity-stream-header,
    .modern-shell .ticketing-activity-stream-meta {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
    }

    .modern-shell .ticketing-activity-stream-meta {
        padding-right: 0.62rem;
    }

    .modern-shell .ticketing-activity-stream-categories {
        grid-template-columns: minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-stream-category:nth-child(even) {
        border-left: 0;
    }

    .modern-shell .ticketing-activity-stream-detail {
        position: static;
    }

    .modern-shell .ticketing-activity-stream-changes {
        padding-left: 0.52rem;
        padding-right: 0.52rem;
    }

    .modern-shell .ticketing-activity-stream-toggle {
        margin-left: 0.52rem;
        margin-right: 0.52rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-shell .ticketing-activity-stream-detail,
    .modern-shell .ticketing-activity-stream-toggle i {
        transition: none;
    }
}

/* Ticketing Activity Logs: customer-activity inspired table */
.modern-shell .ticketing-activity-list-card {
    overflow: hidden;
}

.modern-shell .ticketing-activity-list-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    justify-content: space-between;
    padding: 0.78rem 1rem;
}

.modern-shell .ticketing-activity-list-actions,
.modern-shell .ticketing-activity-list-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.modern-shell .ticketing-activity-list-actions {
    gap: 0.45rem;
}

.modern-shell .ticketing-activity-list-controls {
    gap: 0.55rem 0.8rem;
    justify-content: flex-end;
}

.modern-shell .ticketing-activity-column-selector .dropdown-menu {
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    min-width: 210px;
    padding: 0.45rem;
}

.modern-shell .ticketing-activity-column-selector .dropdown-header {
    color: #3f4c67;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    padding: 0.45rem 0.55rem;
    text-transform: uppercase;
}

.modern-shell .ticketing-activity-column-option {
    align-items: center;
    border-radius: 8px;
    color: #4d5972;
    cursor: pointer;
    display: flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.55rem;
    margin: 0;
    padding: 0.48rem 0.55rem;
}

.modern-shell .ticketing-activity-column-option:hover {
    background: var(--modern-accent-softer);
    color: var(--modern-accent-strong);
}

.modern-shell .ticketing-activity-column-option input {
    accent-color: var(--modern-accent);
    cursor: pointer;
}

.modern-shell .ticketing-activity-filter-chevron {
    font-size: 0.58rem;
}

.modern-shell .ticketing-activity-bulk-delete:disabled {
    background: rgba(148, 163, 184, 0.08);
    border-color: var(--modern-border);
    color: var(--modern-muted-text, #66738c);
    cursor: not-allowed;
}

.modern-shell .ticketing-activity-bulk-delete-active,
.modern-shell .ticketing-activity-bulk-delete-active:hover,
.modern-shell .ticketing-activity-bulk-delete-active:focus {
    background: linear-gradient(135deg, #dc3545, #b42332);
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.2);
    color: #ffffff;
}

.modern-shell .ticketing-activity-list-body {
    background: rgba(247, 249, 255, 0.46);
}

.modern-shell .ticketing-activity-table-wrap {
    margin: 0;
}

.modern-shell .ticketing-activity-table {
    color: #3f4b65;
    font-size: 0.75rem;
    min-width: 1080px;
}

.modern-shell .ticketing-activity-table thead th {
    background: rgba(239, 243, 252, 0.92);
    border-bottom: 1px solid #dfe6f2;
    color: #56627a;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    padding: 0.68rem 0.72rem;
    text-transform: uppercase;
    vertical-align: middle;
}

.modern-shell .ticketing-activity-table tbody td {
    border-top: 1px solid #e7ecf5;
    padding: 0.76rem 0.72rem;
    vertical-align: top;
}

.modern-shell .ticketing-activity-table-row {
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.modern-shell .ticketing-activity-table-row:hover {
    background: rgba(var(--modern-accent-rgb), 0.035);
}

.modern-shell .ticketing-activity-table-row-selected,
.modern-shell .ticketing-activity-table-row-selected:hover {
    background: rgba(var(--modern-accent-rgb), 0.075);
    box-shadow: inset 3px 0 0 rgba(var(--modern-accent-rgb), 0.75);
}

.modern-shell .ticketing-activity-select-column,
.modern-shell .ticketing-activity-select-cell {
    min-width: 42px;
    width: 42px;
}

.modern-shell .ticketing-activity-customer-column {
    min-width: 150px;
    width: 16%;
}

.modern-shell .ticketing-activity-time-column {
    min-width: 112px;
    width: 11%;
}

.modern-shell .ticketing-activity-topic-column {
    min-width: 92px;
    width: 9%;
}

.modern-shell .ticketing-activity-log-column {
    min-width: 390px;
    width: 43%;
}

.modern-shell .ticketing-activity-causer-column {
    min-width: 145px;
    width: 14%;
}

.modern-shell .ticketing-activity-actions-column {
    min-width: 64px;
    width: 64px;
}

.modern-shell .ticketing-activity-customer-info,
.modern-shell .ticketing-activity-time-cell,
.modern-shell .ticketing-activity-causer > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modern-shell .ticketing-activity-customer-info {
    gap: 0.18rem;
}

.modern-shell .ticketing-activity-customer-info strong {
    color: var(--modern-accent-strong);
    font-size: 0.78rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-customer-info span {
    color: #3f4b65;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-time-cell {
    gap: 0.2rem;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-time-cell strong {
    color: #3f4b65;
    font-size: 0.75rem;
    font-weight: 850;
}

.modern-shell .ticketing-activity-time-cell span {
    align-items: center;
    color: var(--modern-subtext);
    display: inline-flex;
    font-size: 0.68rem;
    gap: 0.3rem;
}

.modern-shell .ticketing-activity-topic {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.67rem;
    font-weight: 900;
    gap: 0.32rem;
    justify-content: center;
    padding: 0.32rem 0.52rem;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-topic-create {
    background: rgba(34, 160, 94, 0.1);
    border-color: rgba(34, 160, 94, 0.22);
    color: #16834a;
}

.modern-shell .ticketing-activity-topic-update {
    background: rgba(var(--modern-accent-rgb), 0.1);
    border-color: rgba(var(--modern-accent-rgb), 0.22);
    color: var(--modern-accent-strong);
}

.modern-shell .ticketing-activity-topic-delete {
    background: rgba(211, 62, 78, 0.09);
    border-color: rgba(211, 62, 78, 0.2);
    color: #a92d3d;
}

.modern-shell .ticketing-activity-log-summary {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
}

.modern-shell .ticketing-activity-log-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.48rem;
}

.modern-shell .ticketing-activity-module,
.modern-shell .ticketing-activity-change-total {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 850;
    gap: 0.28rem;
    padding: 0.22rem 0.4rem;
}

.modern-shell .ticketing-activity-module {
    background: rgba(var(--modern-accent-rgb), 0.08);
    color: var(--modern-accent-strong);
}

.modern-shell .ticketing-activity-change-total {
    background: rgba(100, 116, 139, 0.09);
    color: #64748b;
}

.modern-shell .ticketing-activity-reference {
    color: #283750;
    font-size: 0.74rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-reference:hover,
.modern-shell .ticketing-activity-reference:focus {
    color: var(--modern-accent-strong);
    text-decoration: underline;
}

.modern-shell .ticketing-activity-table-changes {
    display: grid;
    gap: 0.28rem;
}

.modern-shell .ticketing-activity-table-change {
    align-items: center;
    display: grid;
    gap: 0.28rem;
    grid-template-columns: minmax(92px, 0.7fr) minmax(72px, 1fr) 18px minmax(72px, 1fr);
    min-width: 0;
}

.modern-shell .ticketing-activity-table-change > strong {
    color: #4b5871;
    font-size: 0.65rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-table-change > i {
    color: #8290aa;
    font-size: 0.62rem;
    text-align: center;
}

.modern-shell .ticketing-activity-table-value {
    border: 1px solid transparent;
    border-radius: 6px;
    display: block;
    font-size: 0.64rem;
    line-height: 1.25;
    overflow: hidden;
    padding: 0.24rem 0.38rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .ticketing-activity-table-value-old {
    background: rgba(241, 117, 58, 0.075);
    border-color: rgba(241, 117, 58, 0.17);
    color: #b94b21;
}

.modern-shell .ticketing-activity-table-value-new {
    background: rgba(20, 172, 118, 0.075);
    border-color: rgba(20, 172, 118, 0.17);
    color: #087d56;
}

.modern-shell .ticketing-activity-table-value-empty,
.modern-shell .ticketing-activity-empty-value {
    color: #8a94a8;
    font-style: italic;
}

.modern-shell .ticketing-activity-more-link {
    align-items: center;
    color: var(--modern-accent-strong);
    display: inline-flex;
    font-size: 0.65rem;
    font-weight: 800;
    gap: 0.28rem;
    width: fit-content;
}

.modern-shell .ticketing-activity-causer {
    align-items: flex-start;
    display: flex;
    gap: 0.48rem;
    min-width: 0;
}

.modern-shell .ticketing-activity-causer-icon {
    align-items: center;
    background: rgba(var(--modern-accent-rgb), 0.09);
    border-radius: 8px;
    color: var(--modern-accent-strong);
    display: inline-flex;
    flex: 0 0 29px;
    height: 29px;
    justify-content: center;
}

.modern-shell .ticketing-activity-causer strong,
.modern-shell .ticketing-activity-causer span {
    overflow-wrap: anywhere;
}

.modern-shell .ticketing-activity-causer strong {
    color: #3f4b65;
    font-size: 0.72rem;
    font-weight: 850;
}

.modern-shell .ticketing-activity-causer > div > span {
    color: var(--modern-subtext);
    font-size: 0.64rem;
    margin-top: 0.08rem;
}

.modern-shell .ticketing-activity-actions-cell {
    vertical-align: middle;
}

.modern-shell .ticketing-activity-empty-cell {
    padding: 1.25rem !important;
}

.modern-shell .ticketing-activity-empty-cell::before {
    display: none !important;
}

.modern-shell .ticketing-activity-list-footer {
    align-items: center;
    border-top: 1px solid #e5ebf5;
    color: var(--modern-subtext);
    display: flex;
    font-size: 0.7rem;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.7rem 1rem;
}

.modern-shell .ticketing-activity-list-pagination {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.modern-shell .ticketing-activity-list-pagination > span {
    background: rgba(var(--modern-accent-rgb), 0.07);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 8px;
    color: var(--modern-accent-strong);
    font-weight: 800;
    padding: 0.32rem 0.52rem;
}

.modern-shell .ticketing-activity-list-pagination nav,
.modern-shell .ticketing-activity-list-pagination .pagination {
    margin: 0;
}

@media (max-width: 991.98px) {
    .modern-shell .ticketing-activity-list-header {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .ticketing-activity-list-actions,
    .modern-shell .ticketing-activity-list-controls {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .modern-shell .ticketing-activity-table-wrap {
        overflow: visible;
        padding: 0.75rem;
    }

    .modern-shell .ticketing-activity-table {
        min-width: 0;
    }

    .modern-shell .ticketing-activity-table.modern-table-cards tbody td {
        align-items: flex-start;
    }

    .modern-shell .ticketing-activity-table.modern-table-cards tbody td > * {
        min-width: 0;
    }

    .modern-shell .ticketing-activity-table.modern-table-cards tbody td[data-column="select"] {
        align-items: center;
        background: var(--modern-accent-softer);
        justify-content: space-between;
    }

    .modern-shell .ticketing-activity-table.modern-table-cards tbody td[data-column="activity"] {
        display: block;
    }

    .modern-shell .ticketing-activity-table.modern-table-cards tbody td[data-column="activity"]::before {
        display: block;
        margin-bottom: 0.55rem;
        max-width: 100%;
    }

    .modern-shell .ticketing-activity-customer-info,
    .modern-shell .ticketing-activity-time-cell,
    .modern-shell .ticketing-activity-causer {
        max-width: 60%;
        text-align: right;
    }

    .modern-shell .ticketing-activity-causer {
        justify-content: flex-end;
    }

    .modern-shell .ticketing-activity-log-summary {
        width: 100%;
    }

    .modern-shell .ticketing-activity-table-change {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    }

    .modern-shell .ticketing-activity-table-change > strong {
        grid-column: 1 / -1;
        white-space: normal;
    }

    .modern-shell .ticketing-activity-table-value-old {
        grid-column: 1;
    }

    .modern-shell .ticketing-activity-table-change > i {
        grid-column: 2;
    }

    .modern-shell .ticketing-activity-table-value-new {
        grid-column: 3;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .ticketing-activity-list-controls,
    .modern-shell .ticketing-activity-list-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .ticketing-activity-list-actions {
        flex-wrap: nowrap;
        width: 100%;
    }

    .modern-shell .ticketing-activity-list-actions > .btn,
    .modern-shell .ticketing-activity-list-actions > .ticketing-activity-bulk-actions {
        flex: 1 1 0;
        min-width: 0;
    }

    .modern-shell .ticketing-activity-list-actions > .btn,
    .modern-shell .ticketing-activity-list-actions > .ticketing-activity-bulk-actions > .btn {
        justify-content: center;
        width: 100%;
    }

    .modern-shell .ticketing-activity-list-actions > .dropdown {
        flex: 0 0 auto;
    }

    .modern-shell .ticketing-activity-list-actions > .dropdown > .btn {
        width: 34px;
    }

    .modern-shell .ticketing-activity-entries-control {
        justify-content: flex-start;
    }

    .modern-shell .ticketing-activity-search-control {
        width: 100%;
    }

    .modern-shell .ticketing-activity-list-pagination {
        justify-content: flex-start;
        overflow-x: auto;
    }
}

/* Office Task Kanban: shared responsive shell and feature headers */
body.office-task-shell #content-wrapper,
body.office-task-shell #content,
body.office-task-shell #content > .container-fluid,
body.office-task-shell .modern-shell {
    max-width: 100%;
    min-width: 0;
}

body.office-task-shell #content > .container-fluid {
    overflow-x: clip;
}

body.office-task-shell .kanban-hero-layout,
body.office-task-shell .kanban-hero-copy,
body.office-task-shell .board-member-layout,
body.office-task-shell .board-member-summary,
body.office-task-shell .board-member-actions {
    min-width: 0;
}

body.office-task-shell .kanban-hero-layout,
body.office-task-shell .board-member-layout {
    gap: 0.75rem;
}

body.office-task-shell .kanban-hero-copy {
    gap: 0.9rem;
}

body.office-task-shell .kanban-hero-copy > .min-width-0,
body.office-task-shell .kanban-hero-kicker,
body.office-task-shell .kanban-hero-heading,
body.office-task-shell .kanban-hero-meta {
    max-width: 100% !important;
}

body.office-task-shell .board-member-summary {
    gap: 0.65rem;
}

body.office-task-shell .board-member-actions {
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

body.office-task-shell .board-member-menu {
    max-width: calc(100vw - 2rem);
}

body.office-task-shell .office-task-page .kanban-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

body.office-task-shell .office-task-page .kanban-col {
    scroll-snap-align: start;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.office-task-shell .office-task-page.office-task-compact .kanban-col {
        flex-basis: clamp(245px, 31vw, 280px) !important;
        max-width: clamp(245px, 31vw, 280px) !important;
        min-width: clamp(245px, 31vw, 280px) !important;
    }

    body.office-task-shell .office-task-page .kanban-drop {
        max-height: 58vh !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .add-task-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .add-task-title-field,
    body.office-task-shell .office-task-page.office-task-compact .add-task-notes-field,
    body.office-task-shell .office-task-page.office-task-compact .add-task-submit-field {
        grid-column: 1 / -1 !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .add-task-submit-field {
        padding-top: 0 !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-list-card .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-board-table {
        min-width: 1180px;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-board-table thead {
        display: table-header-group !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-board-table tbody {
        display: table-row-group !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-board-table tbody tr {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        display: table-row !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-board-table tbody td {
        border-top: 1px solid #edf2f7 !important;
        display: table-cell !important;
        padding: 0.55rem 0.45rem !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .task-board-table tbody td::before {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    body.office-task-shell .board-member-layout {
        align-items: flex-start !important;
        flex-wrap: wrap;
    }

    body.office-task-shell .board-member-summary {
        flex: 1 1 420px;
    }

    body.office-task-shell .board-member-actions {
        margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    body.office-task-shell .kanban-hero-layout,
    body.office-task-shell .board-member-layout {
        align-items: flex-start !important;
        flex-direction: column;
    }

    body.office-task-shell .kanban-hero-copy,
    body.office-task-shell .kanban-hero-actions,
    body.office-task-shell .board-member-summary,
    body.office-task-shell .board-member-actions {
        width: 100%;
    }

    body.office-task-shell .kanban-hero-actions,
    body.office-task-shell .board-member-actions {
        justify-content: flex-start;
        margin-left: 0;
    }

    body.office-task-shell .board-member-actions > .btn,
    body.office-task-shell .board-member-actions > .dropdown {
        flex: 1 1 auto;
    }

    body.office-task-shell .board-member-actions > .dropdown > .btn {
        width: 100%;
    }

    body.office-task-shell .office-task-page.office-task-compact .add-task-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.office-task-shell .office-task-page.office-task-compact .add-task-field,
    body.office-task-shell .office-task-page.office-task-compact .add-task-submit-field {
        grid-column: auto !important;
    }
}

@media (max-width: 575.98px) {
    body.office-task-shell .office-task-page.office-task-compact .kanban-col {
        flex-basis: min(320px, calc(100vw - 3.25rem)) !important;
        max-width: min(320px, calc(100vw - 3.25rem)) !important;
        min-width: min(320px, calc(100vw - 3.25rem)) !important;
    }

    body.office-task-shell .kanban-hero-copy {
        align-items: flex-start !important;
    }

    body.office-task-shell .kanban-hero-icon {
        flex: 0 0 auto;
    }

    body.office-task-shell .board-member-subtitle {
        white-space: normal;
    }
}

/* ==========================================================================
   Customer management bulk actions
   ========================================================================== */
.modern-shell .customer-management-toolbar-shell,
.modern-shell .customer-management-toolbar,
.modern-shell .customer-management-toolbar-actions {
    gap: 0.5rem;
}

.modern-shell .customer-management-toolbar-shell,
.modern-shell .customer-management-toolbar {
    flex-wrap: wrap;
}

.modern-shell .customer-management-toolbar > .btn,
.modern-shell .customer-management-toolbar > .dropdown,
.modern-shell .customer-management-toolbar-actions .btn-group > .btn {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.modern-shell .customer-management-toolbar .btn-modern-sm:not(.btn-modern-icon),
.modern-shell .customer-management-toolbar-actions .btn-modern-sm {
    padding-right: 0.78rem !important;
    padding-left: 0.78rem !important;
}

.modern-shell .customer-management-toolbar-actions .btn-group {
    gap: 0.5rem;
}

.modern-shell .modern-filter-trigger.btn-modern-icon {
    width: auto;
    min-width: 50px;
    padding-right: 0.58rem !important;
    padding-left: 0.65rem !important;
    gap: 0.35rem;
}

.modern-shell .modern-filter-trigger-caret {
    margin-top: 1px;
    font-size: 0.58rem;
    opacity: 0.78;
}

@media (min-width: 769px) {
    .modern-shell .customer-management-toolbar {
        flex: 0 1 auto;
    }

    .modern-shell .customer-management-toolbar-actions {
        flex: 0 0 auto;
        margin-left: auto !important;
    }
}

.modern-shell .customer-bulk-actions .dropdown-menu {
    min-width: 240px;
    border-color: var(--modern-border);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.modern-shell .customer-bulk-row-number,
.modern-shell .customer-bulk-select-all-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.modern-shell .customer-bulk-select,
.modern-shell .customer-bulk-select-all {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: 0 0 1.05rem;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border: 1.5px solid #bdc9e4;
    border-radius: 0.34rem;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(78, 115, 223, 0.08);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.modern-shell .customer-bulk-select::after,
.modern-shell .customer-bulk-select-all::after {
    content: "";
    width: 0.28rem;
    height: 0.52rem;
    margin-top: -0.08rem;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.15s ease;
}

.modern-shell .customer-bulk-select:hover,
.modern-shell .customer-bulk-select-all:hover {
    border-color: var(--modern-accent);
    transform: translateY(-1px);
}

.modern-shell .customer-bulk-select:focus-visible,
.modern-shell .customer-bulk-select-all:focus-visible {
    outline: none;
    border-color: var(--modern-accent);
    box-shadow: 0 0 0 3px var(--modern-accent-soft), 0 4px 10px rgba(78, 115, 223, 0.16);
}

.modern-shell .customer-bulk-select:checked,
.modern-shell .customer-bulk-select-all:checked,
.modern-shell .customer-bulk-select:indeterminate,
.modern-shell .customer-bulk-select-all:indeterminate {
    border-color: var(--modern-accent);
    background: linear-gradient(135deg, var(--modern-accent) 0%, var(--modern-accent-strong) 100%);
    box-shadow: 0 5px 12px rgba(78, 115, 223, 0.28);
}

.modern-shell .customer-bulk-select:checked::after,
.modern-shell .customer-bulk-select-all:checked::after {
    transform: rotate(45deg) scale(1);
}

.modern-shell .customer-bulk-select:indeterminate::after,
.modern-shell .customer-bulk-select-all:indeterminate::after {
    width: 0.5rem;
    height: 2px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    transform: scale(1);
}

.modern-shell .customer-bulk-select:disabled,
.modern-shell .customer-bulk-select-all:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 768px) {
    .modern-shell .customer-management-toolbar-shell {
        align-items: stretch !important;
    }

    .modern-shell .customer-management-toolbar,
    .modern-shell .customer-management-toolbar-actions {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0 !important;
    }

    .modern-shell .customer-management-toolbar-actions {
        justify-content: flex-end;
    }

    .modern-shell .customer-bulk-actions {
        flex: 1 1 170px;
        margin-right: 0 !important;
    }

    .modern-shell .customer-bulk-actions > .btn {
        width: 100%;
        justify-content: center;
    }

    .modern-shell #dataTable tbody td[data-label="No."] .customer-bulk-select {
        border-color: rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.16);
        box-shadow: none;
    }

    .modern-shell #dataTable tbody td[data-label="No."] .customer-bulk-select:checked,
    .modern-shell #dataTable tbody td[data-label="No."] .customer-bulk-select:indeterminate {
        border-color: #ffffff;
        background: #ffffff;
        box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);
    }

    .modern-shell #dataTable tbody td[data-label="No."] .customer-bulk-select:checked::after {
        border-color: var(--modern-accent-strong);
    }

    .modern-shell #dataTable tbody td[data-label="No."] .customer-bulk-select:indeterminate::after {
        background: var(--modern-accent-strong);
    }
}

@media (max-width: 480px) {
    .modern-shell .customer-management-toolbar-actions .btn-group {
        display: flex;
        width: 100%;
    }

    .modern-shell .customer-management-toolbar-actions .btn-group > .btn {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ==========================================================================
   Quick period filter
   ========================================================================== */
.modern-shell .modern-period-filter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 74px;
    padding: 0.82rem 0.9rem;
    overflow: hidden;
    border-color: rgba(var(--modern-accent-rgb), 0.15);
    border-radius: 16px;
    background: linear-gradient(118deg, #ffffff 0%, #f8faff 58%, #f1f5ff 100%);
    box-shadow: 0 12px 28px rgba(42, 65, 125, 0.1), inset 0 1px 0 #ffffff;
}

.modern-shell .modern-period-filter-copy {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 210px;
    flex-direction: row;
    gap: 0.7rem;
}

.modern-shell .modern-period-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--modern-accent-light), var(--modern-accent-strong));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--modern-accent-rgb), 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    font-size: 1rem;
}

.modern-shell .modern-period-filter-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.18rem;
}

.modern-shell .modern-period-filter-kicker {
    color: var(--modern-accent-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.modern-shell .modern-period-filter-range {
    color: #65769b;
    font-size: 0.8rem;
    font-weight: 700;
}

.modern-shell .modern-period-filter-options {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.14);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(242, 246, 255, 0.94), rgba(234, 240, 255, 0.8));
    box-shadow: inset 0 1px 2px rgba(58, 78, 130, 0.06);
}

.modern-shell .modern-period-filter-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.44rem 0.76rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--modern-subtext);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.modern-shell .modern-period-filter-option:hover,
.modern-shell .modern-period-filter-option:focus-visible {
    color: var(--modern-accent-strong);
    background: rgba(255, 255, 255, 0.92);
    outline: none;
    transform: translateY(-1px);
}

.modern-shell .modern-period-filter-option:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb), 0.18);
}

.modern-shell .modern-period-filter-option.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--modern-accent-strong), var(--modern-accent-light));
    box-shadow: 0 7px 16px rgba(var(--modern-accent-rgb), 0.28);
    transform: translateY(-1px);
}

.modern-shell .modern-period-filter-custom {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 215px;
    min-width: 215px;
    margin-left: 0.08rem;
}

.modern-shell .modern-period-filter-custom-input {
    width: 100%;
    min-height: 38px;
    padding: 0.44rem 1.7rem 0.44rem 2rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22);
    border-radius: 9px;
    outline: none;
    background: rgba(255, 255, 255, 0.82);
    color: var(--modern-accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.modern-shell .modern-period-filter-custom-input::placeholder {
    color: var(--modern-subtext);
    opacity: 1;
}

.modern-shell .modern-period-filter-custom-icon,
.modern-shell .modern-period-filter-custom-caret {
    position: absolute;
    z-index: 1;
    top: 50%;
    color: #7385ad;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color 0.18s ease, transform 0.18s ease;
}

.modern-shell .modern-period-filter-custom-icon {
    left: 0.7rem;
}

.modern-shell .modern-period-filter-custom-caret {
    right: 0.65rem;
    font-size: 0.62rem;
}

.modern-shell .modern-period-filter-custom:hover .modern-period-filter-custom-input,
.modern-shell .modern-period-filter-custom.is-open .modern-period-filter-custom-input {
    border-color: rgba(var(--modern-accent-rgb), 0.45);
    background: #ffffff;
    box-shadow: 0 7px 16px rgba(var(--modern-accent-rgb), 0.14);
    transform: translateY(-1px);
}

.modern-shell .modern-period-filter-custom.is-active .modern-period-filter-custom-input {
    border-color: rgba(var(--modern-accent-rgb), 0.5);
    background: linear-gradient(135deg, #eef3ff, #ffffff);
    color: var(--modern-accent-strong);
    box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb), 0.12), 0 8px 18px rgba(var(--modern-accent-rgb), 0.16);
}

.modern-shell .modern-period-filter-custom.is-active .modern-period-filter-custom-icon,
.modern-shell .modern-period-filter-custom.is-active .modern-period-filter-custom-caret,
.modern-shell .modern-period-filter-custom.is-open .modern-period-filter-custom-icon,
.modern-shell .modern-period-filter-custom.is-open .modern-period-filter-custom-caret {
    color: var(--modern-accent-strong);
}

.modern-shell .modern-period-filter-custom.is-open .modern-period-filter-custom-caret {
    transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 991.98px) {
    .modern-shell .modern-period-filter {
        flex-wrap: wrap;
    }

    .modern-shell .modern-period-filter-options {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .modern-shell .modern-period-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .modern-period-filter-options {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .modern-shell .modern-period-filter-custom {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    .modern-shell .modern-period-filter-option {
        gap: 0.25rem;
        padding-right: 0.35rem;
        padding-left: 0.35rem;
        font-size: 0.72rem;
    }
}

/* Connector RouterOS background fetch progress */
.connector-fetch-progress {
    color: var(--modern-text);
    text-align: left;
}

.connector-fetch-progress__message {
    margin-bottom: 0.8rem;
    color: var(--modern-accent-strong);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}

.connector-fetch-progress__overview {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
    color: var(--modern-text-muted);
    font-size: 0.82rem;
}

.connector-fetch-progress__overview strong {
    color: var(--modern-accent-strong);
    font-size: 1.2rem;
}

.connector-fetch-progress__bar {
    height: 0.72rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--modern-accent-soft);
}

.connector-fetch-progress__bar .progress-bar {
    background: linear-gradient(90deg, var(--modern-accent), var(--modern-accent-light));
}

.connector-fetch-progress__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.connector-fetch-progress__stat {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: var(--modern-accent-softer);
    color: var(--modern-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.connector-fetch-progress__stat strong {
    color: inherit;
    font-size: 0.94rem;
}

.connector-fetch-progress__stat--success {
    border-color: rgba(25, 135, 84, 0.18);
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
}

.connector-fetch-progress__stat--warning {
    border-color: rgba(180, 116, 0, 0.2);
    color: var(--modern-warning-text);
    background: var(--modern-warning-bg);
}

.connector-fetch-progress__stat--danger {
    border-color: rgba(179, 38, 58, 0.16);
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
}

.connector-fetch-progress__stat--info {
    border-color: rgba(13, 110, 253, 0.16);
    color: var(--modern-info-text);
    background: var(--modern-info-bg);
}

.connector-fetch-progress__stat--deferred {
    border-color: rgba(111, 66, 193, 0.18);
    color: #5d3ca6;
    background: rgba(111, 66, 193, 0.08);
}

.connector-fetch-progress__current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    color: var(--modern-info-text);
    background: var(--modern-info-bg);
    font-size: 0.8rem;
    font-weight: 700;
}

.connector-fetch-deferred,
.connector-fetch-deferred-summary {
    margin-top: 0.85rem;
}

.connector-fetch-deferred {
    max-height: 230px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.connector-fetch-deferred__title {
    margin-bottom: 0.45rem;
    color: #5d3ca6;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.connector-fetch-deferred-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(111, 66, 193, 0.18);
    border-radius: 10px;
    color: #5d3ca6;
    background: rgba(111, 66, 193, 0.08);
    font-size: 0.8rem;
    font-weight: 700;
}

.connector-fetch-deferred-item {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(111, 66, 193, 0.18);
    border-radius: 10px;
    color: #5d3ca6;
    background: rgba(111, 66, 193, 0.08);
    overflow-wrap: anywhere;
}

.connector-fetch-deferred-item__header,
.connector-fetch-deferred-item__metrics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.connector-fetch-deferred-item__header span,
.connector-fetch-deferred-item__metrics span,
.connector-fetch-deferred-item small {
    color: inherit;
    font-size: 0.75rem;
}

.connector-fetch-deferred-item__metrics {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.connector-fetch-list-note {
    display: block;
    margin-top: 0.4rem;
    color: var(--modern-text-muted);
    text-align: center;
}

.connector-fetch-successes {
    max-height: 180px;
    margin-top: 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.connector-fetch-successes__title {
    margin-bottom: 0.45rem;
    color: var(--modern-success-text);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.connector-fetch-success-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-radius: 10px;
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
    font-size: 0.76rem;
}

.connector-fetch-errors {
    max-height: 230px;
    margin-top: 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.connector-fetch-errors__title {
    margin-bottom: 0.45rem;
    color: var(--modern-danger-text);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.connector-fetch-error-item {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.45rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(179, 38, 58, 0.16);
    border-radius: 10px;
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
    overflow-wrap: anywhere;
}

.connector-fetch-error-item span,
.connector-fetch-error-item small {
    color: inherit;
}

.connector-fetch-error-item--partial {
    border-color: rgba(180, 116, 0, 0.2);
    color: var(--modern-warning-text);
    background: var(--modern-warning-bg);
}

@media (max-width: 620px) {
    .connector-fetch-progress__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connector-fetch-deferred-item__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .connector-fetch-progress .progress-bar-animated,
    .connector-fetch-progress .fa-spin {
        animation: none !important;
    }
}

.modern-shell .modern-time-input-group {
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(var(--modern-accent-rgb), 0.08);
}

.modern-shell .modern-time-input-group .modern-time-picker-trigger,
.modern-shell .modern-time-input-group .modern-time-format,
.modern-shell .modern-time-input-group .modern-number-input-icon {
    min-width: 46px;
    border-color: rgba(var(--modern-accent-rgb), 0.22);
    background: linear-gradient(135deg, #eef3ff, #f8faff);
    color: var(--modern-accent-strong);
}

.modern-shell .modern-time-input-group .modern-time-picker-trigger {
    border-radius: 12px 0 0 12px;
}

.modern-shell .modern-time-input-group .modern-number-input-icon {
    border-radius: 12px 0 0 12px;
}

.modern-shell .modern-time-input-group .modern-time-picker-trigger:hover,
.modern-shell .modern-time-input-group .modern-time-picker-trigger:focus {
    border-color: rgba(var(--modern-accent-rgb), 0.45);
    background: var(--modern-accent-strong);
    color: #ffffff;
    box-shadow: none;
}

.modern-shell .modern-time-input-group .modern-time-input {
    min-height: 46px;
    border-color: rgba(var(--modern-accent-rgb), 0.22);
    color: var(--modern-muted-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.modern-shell .modern-time-input-group .modern-number-input {
    min-height: 46px;
    border-color: rgba(var(--modern-accent-rgb), 0.22);
    color: var(--modern-muted-text);
    font-size: 1rem;
    font-weight: 600;
}

.modern-shell .modern-time-input-group .modern-time-input::placeholder {
    color: var(--modern-subtext);
    font-weight: 500;
    opacity: 0.82;
}

.modern-shell .modern-time-input-group .modern-time-input:focus {
    z-index: 3;
    border-color: rgba(var(--modern-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb), 0.12);
}

.modern-shell .modern-time-input-group .modern-number-input:focus {
    z-index: 3;
    border-color: rgba(var(--modern-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb), 0.12);
}

.modern-shell .modern-time-input-group .modern-time-format {
    min-width: 76px;
    justify-content: center;
    border-radius: 0 12px 12px 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.modern-shell .modern-time-format[data-period="dini-hari"] {
    border-color: rgba(90, 70, 180, 0.24);
    background: #eeebff;
    color: #5948a8;
}

.modern-shell .modern-time-format[data-period="pagi"] {
    border-color: rgba(246, 194, 62, 0.3);
    background: #fff7d8;
    color: #8c6810;
}

.modern-shell .modern-time-format[data-period="siang"] {
    border-color: rgba(54, 185, 204, 0.28);
    background: #e8f9fc;
    color: #167181;
}

.modern-shell .modern-time-format[data-period="sore"] {
    border-color: rgba(253, 126, 20, 0.28);
    background: #fff0e2;
    color: #a84f09;
}

.modern-shell .modern-time-format[data-period="malam"] {
    border-color: rgba(54, 76, 133, 0.3);
    background: #e9edfa;
    color: #344574;
}

.modern-shell .modern-time-help {
    color: var(--modern-subtext) !important;
    font-weight: 400;
    line-height: 1.45;
}

.modern-shell .modern-standard-input-group,
.modern-shell .modern-readonly-input-group {
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(var(--modern-accent-rgb), 0.08);
}

.modern-shell .modern-standard-input-group .input-group-text,
.modern-shell .modern-readonly-input-group .modern-readonly-icon {
    min-width: 46px;
    justify-content: center;
    border-color: rgba(var(--modern-accent-rgb), 0.22);
    border-radius: 12px 0 0 12px;
    background: linear-gradient(135deg, #eef3ff, #f8faff);
    color: var(--modern-accent-strong);
}

.modern-shell .modern-standard-input-group .form-control,
.modern-shell .modern-readonly-input-group .modern-readonly-input {
    min-height: 46px;
    border-color: rgba(var(--modern-accent-rgb), 0.22);
    color: var(--modern-muted-text);
    font-weight: 600;
}

.modern-shell .modern-standard-input-group .form-control {
    border-left: 0;
    border-radius: 0 12px 12px 0 !important;
}

.modern-shell .modern-standard-input-group .form-control:focus {
    z-index: 3;
    border-color: rgba(var(--modern-accent-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb), 0.12);
}

.modern-shell .modern-readonly-input-group .modern-readonly-input {
    border-right: 0;
    border-left: 0;
    background: #f5f7fc;
    color: #667492;
    cursor: default;
}

.modern-shell .modern-readonly-input-group .modern-readonly-badge {
    min-width: 92px;
    justify-content: center;
    border-color: rgba(108, 117, 125, 0.2);
    border-radius: 0 12px 12px 0;
    background: #edf0f6;
    color: #69758d;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.modern-shell .modern-readonly-notice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(108, 117, 125, 0.22);
    border-radius: 12px;
    background: linear-gradient(135deg, #f2f4f8, #ffffff);
    color: #59647a;
}

.modern-shell .modern-readonly-notice > i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #e1e5ed;
}

.modern-shell .modern-form .form-control:disabled,
.modern-shell .modern-form select.form-control:disabled {
    background-color: #f1f3f8;
    color: #78839a;
    cursor: not-allowed;
    opacity: 1;
}

.modern-shell .modern-time-preview {
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(28, 200, 138, 0.24);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(28, 200, 138, 0.1), rgba(255, 255, 255, 0.92));
    color: #17694e;
}

.modern-shell .modern-time-preview.is-warning {
    border-color: rgba(246, 194, 62, 0.35);
    background: linear-gradient(135deg, rgba(246, 194, 62, 0.14), rgba(255, 255, 255, 0.94));
    color: #856404;
}

.modern-shell .modern-time-preview #otDurationPreview {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.modern-shell .modern-time-preview small {
    display: block;
    margin-top: 0.12rem;
    color: inherit;
    opacity: 0.78;
}

.modern-shell .modern-time-preview__icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
}

.modern-shell .modern-time-next-day {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--modern-accent-rgb), 0.12);
    color: var(--modern-accent-strong);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.flatpickr-calendar.modern-time-picker {
    border: 1px solid rgba(78, 115, 223, 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(31, 45, 78, 0.2);
    overflow: hidden;
}

.flatpickr-calendar.modern-time-picker .flatpickr-time {
    height: 54px;
    border-top: 0;
}

.flatpickr-calendar.modern-time-picker .flatpickr-time input {
    color: var(--modern-muted-text);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .modern-shell .modern-readonly-input-group .modern-readonly-badge {
        min-width: 44px;
    }

    .modern-shell .modern-readonly-input-group .modern-readonly-badge span {
        display: none;
    }

    .modern-shell .modern-readonly-input-group .modern-readonly-badge i {
        margin-right: 0 !important;
    }

    .modern-shell .modern-time-next-day {
        display: inline-flex;
        margin-top: 0.4rem;
        margin-left: 0;
    }

    .modern-shell .modern-time-preview #otDurationPreview {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

/* Backup & Maintenance settings */
.modern-shell .backup-settings-page {
    padding-bottom: 1.5rem;
}

.modern-shell .backup-settings-toolbar {
    padding: 0.8rem 1rem;
    border-radius: 14px;
}

.modern-shell .backup-settings-toolbar .left {
    flex: 1 1 320px;
}

.modern-shell .backup-settings-toolbar .right {
    justify-content: flex-end;
}

.modern-shell .backup-settings-toolbar-copy,
.modern-shell .backup-settings-health,
.modern-shell .backup-settings-section-heading,
.modern-shell .backup-settings-pane-header,
.modern-shell .backup-settings-switch-row,
.modern-shell .backup-settings-form-footer,
.modern-shell .backup-maintenance-visual,
.modern-shell .backup-maintenance-bypass {
    display: flex;
    align-items: center;
}

.modern-shell .backup-settings-toolbar-copy {
    gap: 0.75rem;
}

.modern-shell .backup-settings-toolbar-icon,
.modern-shell .backup-settings-section-icon,
.modern-shell .backup-storage-target-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--modern-accent-strong);
    background: rgba(var(--modern-accent-rgb), 0.1);
    border: 1px solid rgba(var(--modern-accent-rgb), 0.2);
}

.modern-shell .backup-settings-toolbar-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.modern-shell .backup-settings-toolbar-title {
    color: #435271;
    font-size: 0.9rem;
    font-weight: 800;
}

.modern-shell .backup-settings-toolbar-subtitle {
    color: var(--modern-subtext);
    font-size: 0.76rem;
}

.modern-shell .backup-settings-health {
    gap: 0.45rem;
    flex-wrap: wrap;
}

.modern-shell .backup-settings-health-item,
.modern-shell .backup-settings-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.3rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.modern-shell .backup-settings-health-item.is-ready,
.modern-shell .backup-settings-state.is-ready,
.modern-shell .backup-settings-state.is-success {
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
    border: 1px solid rgba(29, 122, 68, 0.16);
}

.modern-shell .backup-settings-health-item.is-warning,
.modern-shell .backup-settings-state.is-warning {
    color: var(--modern-warning-text);
    background: var(--modern-warning-bg);
    border: 1px solid rgba(156, 93, 6, 0.16);
}

.modern-shell .backup-settings-state.is-danger {
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
    border: 1px solid rgba(179, 38, 58, 0.16);
}

.modern-shell .backup-settings-state.is-muted {
    color: var(--modern-muted-text);
    background: var(--modern-muted-bg);
    border: 1px solid rgba(102, 115, 140, 0.14);
}

.modern-shell .backup-settings-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.modern-shell .backup-settings-stats .modern-status-card:hover {
    transform: none;
}

.modern-shell .backup-settings-stats .modern-status-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-settings-stats .modern-status-meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--modern-subtext);
    font-size: 0.72rem;
    line-height: 1.35;
}

.modern-shell .backup-settings-workspace {
    overflow: visible;
}

.modern-shell .backup-settings-tab-nav {
    padding: 0.55rem 0.7rem 0;
    border-bottom: 1px solid var(--modern-border);
    border-radius: 14px 14px 0 0;
    background: rgba(248, 250, 255, 0.72);
}

.modern-shell .backup-settings-tab-nav .modern-card-tabs {
    margin-bottom: 0;
    padding-bottom: 0.65rem;
    overflow: visible;
}

.modern-shell .backup-settings-workspace .tab-pane {
    padding: 1rem;
}

.modern-shell .backup-settings-pane-header {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--modern-border);
}

.modern-shell .backup-settings-pane-header h2,
.modern-shell .backup-settings-section-heading h3 {
    margin: 0;
    color: #435271;
    font-weight: 800;
}

.modern-shell .backup-settings-pane-header h2 {
    font-size: 1rem;
}

.modern-shell .backup-settings-pane-header h2 i {
    margin-right: 0.4rem;
    color: var(--modern-accent-strong);
}

.modern-shell .backup-settings-pane-header p,
.modern-shell .backup-settings-section-heading p,
.modern-shell .backup-maintenance-visual p {
    margin: 0.2rem 0 0;
    color: var(--modern-subtext);
    font-size: 0.78rem;
    line-height: 1.4;
}

.modern-shell .backup-settings-section-grid,
.modern-shell .backup-maintenance-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.modern-shell .backup-settings-section {
    padding: 1rem;
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.modern-shell .backup-settings-section-heading {
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.modern-shell .backup-settings-section-heading > div:not(.custom-control) {
    flex: 1 1 auto;
    min-width: 0;
}

.modern-shell .backup-settings-section-heading h3 {
    font-size: 0.88rem;
}

.modern-shell .backup-settings-section-icon,
.modern-shell .backup-storage-target-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.modern-shell .backup-settings-switch-row {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: var(--modern-accent-softer);
}

.modern-shell .backup-settings-switch-row strong,
.modern-shell .backup-settings-switch-row span {
    display: block;
}

.modern-shell .backup-settings-switch-row strong {
    color: #4c5a75;
    font-size: 0.8rem;
}

.modern-shell .backup-settings-switch-row span {
    margin-top: 0.1rem;
    color: var(--modern-subtext);
    font-size: 0.72rem;
}

.modern-shell .backup-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.modern-shell .backup-settings-fields.is-compact {
    gap: 0.65rem;
}

.modern-shell .backup-settings-fields .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.modern-shell .backup-settings-fields .form-group.is-wide {
    grid-column: 1 / -1;
}

.modern-shell .backup-settings-page .form-control,
.modern-shell .backup-settings-page .input-group-text,
.modern-shell .backup-settings-page .input-group .btn {
    min-height: 40px;
}

.modern-shell .backup-settings-page .input-group-text {
    color: var(--modern-muted-text);
    background: var(--modern-muted-bg);
    border-color: var(--modern-border);
    font-size: 0.76rem;
}

.modern-shell .backup-settings-page .input-group .btn {
    min-width: 42px;
    color: var(--modern-muted-text);
    background: var(--modern-muted-bg);
    border-color: var(--modern-border);
}

.modern-shell .backup-settings-page .input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.modern-shell .backup-settings-result-list {
    margin: 0;
}

.modern-shell .backup-settings-result-list > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(217, 227, 246, 0.72);
}

.modern-shell .backup-settings-result-list > div:last-child {
    border-bottom: 0;
}

.modern-shell .backup-settings-result-list dt,
.modern-shell .backup-settings-result-list dd {
    margin: 0;
    font-size: 0.76rem;
}

.modern-shell .backup-settings-result-list dt {
    color: var(--modern-subtext);
    font-weight: 700;
}

.modern-shell .backup-settings-result-list dd {
    min-width: 0;
    color: #4c5a75;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.modern-shell .backup-settings-result-list dd.is-code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.72rem;
}

.modern-shell .backup-settings-form-footer {
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--modern-border);
}

.modern-shell .backup-settings-form-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--modern-subtext);
    font-size: 0.75rem;
}

.modern-shell .backup-settings-form-note i {
    margin-top: 0.15rem;
    color: var(--modern-accent-strong);
}

.modern-shell .backup-storage-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.modern-shell .backup-storage-option {
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.modern-shell .backup-storage-option-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    min-height: 92px;
    padding: 0.85rem;
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.modern-shell .backup-storage-option:hover .backup-storage-option-body {
    border-color: rgba(78, 115, 223, 0.45);
    background: rgba(246, 249, 255, 0.96);
}

.modern-shell .backup-storage-option input:focus-visible + .backup-storage-option-body {
    outline: 3px solid rgba(78, 115, 223, 0.2);
    outline-offset: 2px;
}

.modern-shell .backup-storage-option input:checked + .backup-storage-option-body {
    border-color: var(--modern-accent);
    background: var(--modern-accent-softer);
    box-shadow: 0 8px 22px rgba(78, 115, 223, 0.12);
}

.modern-shell .backup-storage-option input:checked + .backup-storage-option-body .backup-storage-target-icon {
    color: #fff;
    background: var(--modern-accent);
}

.modern-shell .backup-storage-option-copy strong,
.modern-shell .backup-storage-option-copy small {
    display: block;
}

.modern-shell .backup-storage-option-copy strong {
    color: #4c5a75;
    font-size: 0.82rem;
}

.modern-shell .backup-storage-option-copy small {
    margin-top: 0.18rem;
    color: var(--modern-subtext);
    font-size: 0.71rem;
    line-height: 1.45;
}

.modern-shell .backup-storage-option-check {
    color: var(--modern-accent);
    opacity: 0;
}

.modern-shell .backup-storage-option input:checked + .backup-storage-option-body .backup-storage-option-check {
    opacity: 1;
}

.modern-shell .backup-storage-fallback-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.7rem;
    color: var(--modern-subtext);
    line-height: 1.45;
}

.modern-shell .backup-storage-fallback-note i {
    margin-top: 0.12rem;
    color: var(--modern-accent-strong);
}

.modern-shell .backup-storage-prefixes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.modern-shell .backup-storage-prefixes > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: var(--modern-accent-softer);
}

.modern-shell .backup-storage-prefixes code {
    overflow: hidden;
    color: var(--modern-accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-storage-prefixes span {
    color: var(--modern-subtext);
    font-size: 0.7rem;
}

.modern-shell .backup-storage-monitor .backup-settings-section-heading {
    flex-wrap: wrap;
}

.modern-shell .backup-storage-monitor-summary,
.modern-shell .backup-storage-monitor-scopes {
    display: grid;
    gap: 0.65rem;
}

.modern-shell .backup-storage-monitor-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.modern-shell .backup-storage-monitor-metric {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.15rem 0.6rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: var(--modern-accent-softer);
}

.modern-shell .backup-storage-monitor-metric > span {
    display: inline-flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--modern-accent-strong);
    border-radius: 9px;
    background: rgba(78, 115, 223, 0.1);
}

.modern-shell .backup-storage-monitor-metric small {
    overflow: hidden;
    color: var(--modern-subtext);
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-storage-monitor-metric strong {
    overflow: hidden;
    color: #435271;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-storage-monitor-scopes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.65rem;
}

.modern-shell .backup-storage-monitor-scope {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.modern-shell .backup-storage-monitor-scope > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--modern-border);
}

.modern-shell .backup-storage-monitor-scope strong {
    color: #435271;
    font-size: 0.78rem;
}

.modern-shell .backup-storage-monitor-scope code {
    overflow: hidden;
    color: var(--modern-accent-strong);
    font-size: 0.66rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-storage-monitor-scope dl {
    margin: 0.55rem 0 0;
}

.modern-shell .backup-storage-monitor-scope dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.22rem 0;
}

.modern-shell .backup-storage-monitor-scope dt,
.modern-shell .backup-storage-monitor-scope dd {
    margin: 0;
    font-size: 0.7rem;
}

.modern-shell .backup-storage-monitor-scope dt {
    color: var(--modern-subtext);
    font-weight: 600;
}

.modern-shell .backup-storage-monitor-scope dd {
    overflow: hidden;
    color: #435271;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-storage-monitor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    color: var(--modern-subtext);
    font-size: 0.68rem;
    line-height: 1.4;
}

.modern-shell .backup-storage-monitor-footer > span:first-child {
    flex-shrink: 0;
}

.modern-shell .backup-storage-monitor-footer > span:last-child {
    text-align: right;
}

.modern-shell .backup-settings-path-switch {
    margin-left: auto;
}

.modern-shell .backup-maintenance-status form {
    margin-top: 1rem;
}

.modern-shell .backup-maintenance-visual {
    align-items: flex-start;
    gap: 0.75rem;
}

.modern-shell .backup-maintenance-visual > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
}

.modern-shell .backup-maintenance-visual.is-normal > span {
    color: var(--modern-success-text);
    background: var(--modern-success-bg);
}

.modern-shell .backup-maintenance-visual.is-down > span {
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
}

.modern-shell .backup-maintenance-visual strong {
    color: #435271;
    font-size: 0.9rem;
}

.modern-shell .backup-maintenance-meta {
    margin-top: 0.75rem;
    color: var(--modern-subtext);
    font-size: 0.74rem;
}

.modern-shell .backup-maintenance-bypass {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: var(--modern-muted-bg);
}

.modern-shell .backup-maintenance-bypass code {
    min-width: 0;
    overflow: hidden;
    color: #4c5a75;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell .backup-maintenance-bypass a {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 800;
}

.modern-shell .backup-maintenance-warning,
.modern-shell .backup-settings-empty-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    font-size: 0.74rem;
    line-height: 1.45;
}

.modern-shell .backup-maintenance-warning {
    color: var(--modern-warning-text);
    background: var(--modern-warning-bg);
}

.modern-shell .backup-settings-empty-note {
    color: var(--modern-muted-text);
    background: var(--modern-muted-bg);
}

@media (max-width: 991.98px) {
    .modern-shell .backup-settings-stats,
    .modern-shell .backup-settings-section-grid,
    .modern-shell .backup-maintenance-layout,
    .modern-shell .backup-storage-monitor-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .modern-shell .backup-settings-toolbar,
    .modern-shell .backup-settings-pane-header,
    .modern-shell .backup-settings-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .modern-shell .backup-settings-toolbar .right {
        justify-content: space-between;
    }

    .modern-shell .backup-settings-stats,
    .modern-shell .backup-settings-section-grid,
    .modern-shell .backup-maintenance-layout,
    .modern-shell .backup-storage-options,
    .modern-shell .backup-storage-prefixes,
    .modern-shell .backup-storage-monitor-scopes,
    .modern-shell .backup-settings-fields {
        grid-template-columns: 1fr;
    }

    .modern-shell .backup-settings-fields .form-group.is-wide {
        grid-column: auto;
    }

    .modern-shell .backup-settings-workspace .tab-pane {
        padding: 0.75rem;
    }

    .modern-shell .backup-settings-path-switch {
        margin-left: 0;
    }

    .modern-shell .backup-storage-monitor-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell .backup-storage-monitor-footer > span:last-child {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .backup-settings-toolbar .right,
    .modern-shell .backup-settings-health {
        width: 100%;
    }

    .modern-shell .backup-settings-toolbar .right form,
    .modern-shell .backup-settings-toolbar .right .btn {
        width: 100%;
    }

    .modern-shell .backup-settings-health-item {
        flex: 1 1 auto;
        justify-content: center;
    }

    .modern-shell .backup-settings-stats {
        grid-template-columns: 1fr;
    }

    .modern-shell .backup-storage-monitor-summary {
        grid-template-columns: 1fr;
    }

    .modern-shell .backup-maintenance-bypass {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Company revenue-sharing formula */
.modern-shell.company-form-shell .partner-setup-steps {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.modern-shell.company-form-shell .partner-setup-step {
    align-items: center;
    background: rgba(238, 242, 255, 0.72);
    border: 1px solid rgba(78, 115, 223, 0.12);
    border-radius: 12px;
    color: var(--modern-text-muted, #6b7a99);
    display: flex;
    font-size: 0.74rem;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
}

.modern-shell.company-form-shell .partner-setup-step span,
.modern-shell.company-form-shell .partner-step-badge {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(78, 115, 223, 0.2);
    border-radius: 50%;
    color: var(--modern-primary, #4e73df);
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 0.7rem;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.modern-shell.company-form-shell .partner-setup-step.is-active {
    background: linear-gradient(135deg, rgba(78, 115, 223, 0.12), rgba(28, 200, 138, 0.08));
    color: var(--modern-text, #253858);
}

.modern-shell.company-form-shell .partner-toggle-row {
    align-items: center;
    background: linear-gradient(135deg, rgba(78, 115, 223, 0.08), rgba(111, 66, 193, 0.06));
    border: 1px solid rgba(78, 115, 223, 0.14);
    border-radius: 14px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.9rem 1rem;
}

.modern-shell.company-form-shell .partner-toggle-main {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.modern-shell.company-form-shell .partner-toggle-icon {
    align-items: center;
    background: linear-gradient(135deg, #4e73df, #6f42c1);
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.modern-shell.company-form-shell .partner-toggle-copy strong,
.modern-shell.company-form-shell .partner-toggle-copy span,
.modern-shell.company-form-shell .partner-picker-heading strong,
.modern-shell.company-form-shell .partner-picker-heading small,
.modern-shell.company-form-shell .partner-card-name strong,
.modern-shell.company-form-shell .partner-card-name small {
    display: block;
}

.modern-shell.company-form-shell .partner-toggle-copy strong,
.modern-shell.company-form-shell .partner-picker-heading strong,
.modern-shell.company-form-shell .partner-card-name strong {
    color: var(--modern-text, #253858);
}

.modern-shell.company-form-shell .partner-toggle-copy span,
.modern-shell.company-form-shell .partner-picker-heading small,
.modern-shell.company-form-shell .partner-card-name small {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.12rem;
}

.modern-shell.company-form-shell .partner-picker-wrap {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.28s ease, margin-top 0.28s ease;
}

.modern-shell.company-form-shell .partner-picker-wrap.is-open {
    max-height: 20000px;
    opacity: 1;
    overflow: visible;
    margin-top: 1rem;
}

.modern-shell.company-form-shell .partner-picker-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.modern-shell.company-form-shell .partner-picker-select + .choices {
    margin-bottom: 0;
}

.modern-shell.company-form-shell .partner-card-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.modern-shell.company-form-shell .partner-card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(211, 220, 238, 0.95);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 28, 64, 0.07);
    padding: 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.modern-shell.company-form-shell .partner-card:hover {
    border-color: rgba(78, 115, 223, 0.28);
    box-shadow: 0 14px 30px rgba(15, 28, 64, 0.1);
}

.modern-shell.company-form-shell .partner-card.is-inactive {
    opacity: 0.64;
}

.modern-shell.company-form-shell .partner-card.has-invalid-formula {
    border-color: rgba(231, 74, 59, 0.55);
}

.modern-shell.company-form-shell .partner-card-head {
    align-items: center;
    border-bottom: 1px solid rgba(211, 220, 238, 0.8);
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.8rem;
}

.modern-shell.company-form-shell .partner-avatar {
    align-items: center;
    background: linear-gradient(135deg, rgba(78, 115, 223, 0.14), rgba(28, 200, 138, 0.12));
    border: 1px solid rgba(78, 115, 223, 0.16);
    border-radius: 12px;
    color: var(--modern-primary, #4e73df);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 0.8rem;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.modern-shell.company-form-shell .partner-card-name {
    flex: 1 1 auto;
    min-width: 0;
}

.modern-shell.company-form-shell .partner-card-remove {
    align-items: center;
    background: var(--modern-danger-soft, #fff0ef);
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--modern-danger, #e74a3b);
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.modern-shell.company-form-shell .partner-card-body {
    align-items: start;
    display: grid;
    gap: 0.85rem;
    grid-template-areas:
        'share'
        'formula';
    grid-template-columns: minmax(0, 1fr);
}

.modern-shell.company-form-shell .partner-share-field {
    align-items: center;
    background: linear-gradient(145deg, rgba(28, 200, 138, 0.1), rgba(78, 115, 223, 0.06));
    border: 1px solid rgba(28, 200, 138, 0.2);
    border-radius: 14px;
    display: grid;
    gap: 0.65rem 1rem;
    grid-area: share;
    grid-template-columns: minmax(250px, 1fr) minmax(260px, 340px) minmax(220px, 0.8fr);
    padding: 0.9rem 1rem;
}

.modern-shell.company-form-shell .partner-share-field > small {
    color: var(--modern-text-muted, #6b7a99);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
}

.modern-shell.company-form-shell .partner-share-heading {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    min-width: 0;
}

.modern-shell.company-form-shell .partner-share-icon {
    align-items: center;
    background: rgba(28, 200, 138, 0.14);
    border-radius: 10px;
    color: var(--modern-success, #13855c);
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.modern-shell.company-form-shell .partner-share-heading .partner-formula-label {
    margin-bottom: 0;
}

.modern-shell.company-form-shell .partner-share-field .invalid-feedback {
    grid-column: 2 / -1;
}

.modern-shell.company-form-shell .partner-formula-label {
    align-items: center;
    color: var(--modern-text, #253858);
    display: flex;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.modern-shell.company-form-shell .partner-formula-panel {
    background: linear-gradient(145deg, rgba(78, 115, 223, 0.08), rgba(28, 200, 138, 0.06));
    border: 1px solid rgba(78, 115, 223, 0.16);
    border-radius: 14px;
    grid-area: formula;
    padding: 0.85rem;
}

.modern-shell.company-form-shell .partner-formula-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.modern-shell.company-form-shell .partner-formula-heading strong,
.modern-shell.company-form-shell .partner-formula-heading span {
    display: block;
}

.modern-shell.company-form-shell .partner-formula-heading strong {
    align-items: center;
    color: var(--modern-text, #253858);
    display: flex;
    font-size: 0.82rem;
    gap: 0.45rem;
}

.modern-shell.company-form-shell .partner-formula-heading span {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.72rem;
    font-weight: 600;
}

.modern-shell.company-form-shell .partner-formula-heading i {
    color: var(--modern-primary, #4e73df);
    font-size: 1rem;
}

.modern-shell.company-form-shell .partner-formula-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}

.modern-shell.company-form-shell .partner-formula-item {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(211, 220, 238, 0.9);
    border-top: 3px solid rgba(78, 115, 223, 0.55);
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(15, 28, 64, 0.045);
    padding: 0.72rem;
}

.modern-shell.company-form-shell .partner-component-head {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.58rem;
}

.modern-shell.company-form-shell .partner-component-head > label {
    color: var(--modern-text, #253858);
    font-size: 0.76rem;
    font-weight: 800;
    margin: 0;
}

.modern-shell.company-form-shell .partner-component-icon {
    align-items: center;
    background: rgba(78, 115, 223, 0.1);
    border-radius: 8px;
    color: var(--modern-primary, #4e73df);
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.modern-shell.company-form-shell .partner-formula-item[data-component='bhp'] { border-top-color: rgba(246, 194, 62, 0.75); }
.modern-shell.company-form-shell .partner-formula-item[data-component='bhp'] .partner-component-icon { color: #a87400; background: rgba(246, 194, 62, 0.14); }
.modern-shell.company-form-shell .partner-formula-item[data-component='uso'] { border-top-color: rgba(54, 185, 204, 0.7); }
.modern-shell.company-form-shell .partner-formula-item[data-component='uso'] .partner-component-icon { color: #258391; background: rgba(54, 185, 204, 0.12); }
.modern-shell.company-form-shell .partner-formula-item[data-component='partner_fee'] { border-top-color: rgba(28, 200, 138, 0.7); }
.modern-shell.company-form-shell .partner-formula-item[data-component='partner_fee'] .partner-component-icon { color: #13855c; background: rgba(28, 200, 138, 0.12); }
.modern-shell.company-form-shell .partner-formula-item[data-component='other'] { border-top-color: rgba(111, 66, 193, 0.65); }
.modern-shell.company-form-shell .partner-formula-item[data-component='other'] .partner-component-icon { color: #6f42c1; background: rgba(111, 66, 193, 0.1); }

.modern-shell.company-form-shell .partner-control-field {
    min-width: 0;
}

.modern-shell.company-form-shell .partner-control-field > label {
    color: var(--modern-text-muted, #6b7a99);
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    margin-bottom: 0.28rem;
    text-transform: uppercase;
}

.modern-shell.company-form-shell .partner-control-field > label i {
    color: var(--modern-primary, #4e73df);
    margin-right: 0.2rem;
}

.modern-shell.company-form-shell .partner-control-field .form-control,
.modern-shell.company-form-shell .partner-control-field .input-group-text {
    min-height: 36px;
    border-color: rgba(191, 204, 229, 0.9);
}

.modern-shell.company-form-shell .partner-control-field .form-control:focus {
    border-color: rgba(78, 115, 223, 0.55);
    box-shadow: 0 0 0 0.14rem rgba(78, 115, 223, 0.1);
}

.modern-shell.company-form-shell .partner-formula-controls {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr);
}

.modern-shell.company-form-shell .partner-component-type {
    font-size: 0.72rem;
    padding-left: 0.55rem;
    padding-right: 1.45rem;
}

.modern-shell.company-form-shell .partner-component-value {
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.modern-shell.company-form-shell .partner-formula-preview {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 248, 246, 0.9));
    border: 1px solid rgba(28, 200, 138, 0.22);
    border-radius: 12px;
    margin-top: 0.75rem;
    padding: 0.78rem;
}

.modern-shell.company-form-shell .partner-preview-head {
    align-items: center;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.modern-shell.company-form-shell .partner-preview-icon {
    align-items: center;
    background: rgba(28, 200, 138, 0.13);
    border-radius: 9px;
    color: var(--modern-success, #13855c);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.modern-shell.company-form-shell .partner-preview-title,
.modern-shell.company-form-shell .partner-preview-head small,
.modern-shell.company-form-shell .partner-formula-equation {
    display: block;
}

.modern-shell.company-form-shell .partner-preview-title {
    color: var(--modern-text, #253858);
    font-size: 0.7rem;
    font-weight: 800;
}

.modern-shell.company-form-shell .partner-preview-head small,
.modern-shell.company-form-shell .partner-formula-equation {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.62rem;
    font-weight: 600;
}

.modern-shell.company-form-shell .partner-formula-preview strong {
    color: var(--modern-success, #13855c);
    font-size: 1rem;
}

.modern-shell.company-form-shell .partner-formula-equation {
    margin-top: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: rgba(78, 115, 223, 0.06);
    text-align: center;
}

.modern-shell.company-form-shell .partner-preview-breakdown {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.65rem;
}

.modern-shell.company-form-shell .partner-preview-breakdown > div {
    align-items: center;
    background: var(--modern-muted-bg, #f4f6fb);
    border-radius: 9px;
    display: grid;
    gap: 0.05rem 0.5rem;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 0.55rem 0.6rem;
}

.modern-shell.company-form-shell .partner-preview-breakdown > div > i {
    align-items: center;
    background: rgba(78, 115, 223, 0.1);
    border-radius: 7px;
    color: var(--modern-primary, #4e73df);
    display: inline-flex;
    grid-row: 1 / 3;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.modern-shell.company-form-shell .partner-preview-breakdown span,
.modern-shell.company-form-shell .partner-preview-breakdown strong {
    display: block;
}

.modern-shell.company-form-shell .partner-preview-breakdown span {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.65rem;
    font-weight: 700;
}

.modern-shell.company-form-shell .partner-preview-breakdown strong {
    color: var(--modern-text, #253858);
    font-size: 0.78rem;
    margin-top: 0.06rem;
}

.modern-shell.company-form-shell .partner-percent-value .form-control {
    color: var(--modern-text, #253858);
    font-size: 1.25rem;
    font-weight: 900;
    height: 46px;
    text-align: right;
}

.modern-shell.company-form-shell .partner-percent-value .input-group-text {
    background: #fff;
    color: var(--modern-success, #13855c);
    font-size: 1rem;
    font-weight: 900;
}

.modern-shell.company-form-shell .partner-notes-field {
    margin-top: 0.8rem;
}

.modern-shell.company-form-shell .partner-notes-field label {
    color: var(--modern-text, #253858);
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.modern-shell.company-form-shell .partner-notes-field label > i {
    color: var(--modern-primary, #4e73df);
    margin-right: 0.25rem;
}

.modern-shell.company-form-shell .partner-notes-field label span {
    color: var(--modern-text-muted, #6b7a99);
    font-weight: 600;
}

.modern-shell.company-form-shell .partner-notes-control .input-group-text {
    border-color: rgba(191, 204, 229, 0.9);
    color: var(--modern-primary, #4e73df);
    background: rgba(78, 115, 223, 0.07);
}

.modern-shell.company-form-shell .partner-notes-control .form-control {
    border-color: rgba(191, 204, 229, 0.9);
}

.modern-shell.company-form-shell .partner-empty-hint {
    background: rgba(255, 255, 255, 0.76);
    border: 1px dashed rgba(78, 115, 223, 0.28);
    border-radius: 12px;
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 1rem;
    text-align: center;
}

/* Partner dashboard */
.modern-shell.partner-dashboard-shell .kpi-partner-revenue {
    background: linear-gradient(135deg, #6f42c1, #4e2ea6);
}

.modern-shell.partner-dashboard-shell .kpi-partner-share {
    background: linear-gradient(135deg, #f6c23e, #dda20a);
}

.modern-shell.partner-dashboard-shell .kpi-company-share {
    background: linear-gradient(135deg, #1cc88a, #13855c);
}

.modern-shell.partner-dashboard-shell .partner-empty-illustration {
    max-width: 220px;
}

.modern-shell.partner-dashboard-shell .partner-empty-title {
    color: var(--modern-text, #344767);
}

.modern-shell.partner-dashboard-shell .partner-row-avatar {
    align-items: center;
    background: var(--modern-primary-soft, #eef2ff);
    border: 1px solid var(--modern-border, #d9e1ef);
    border-radius: 10px;
    color: var(--modern-primary, #4e73df);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    width: 34px;
}

.modern-shell.partner-dashboard-shell .partner-row-avatar img {
    height: 100%;
    object-fit: contain;
    padding: 3px;
    width: 100%;
}

.modern-shell.partner-dashboard-shell .partner-name-cell {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

.modern-shell.partner-dashboard-shell .partner-percent-bar {
    background: var(--modern-muted-bg, #edf1f7);
    border-radius: 99px;
    height: 6px;
    margin-top: 0.3rem;
    min-width: 90px;
    overflow: hidden;
}

.modern-shell.partner-dashboard-shell .partner-percent-bar-fill {
    background: linear-gradient(90deg, #4e73df, #1cc88a);
    border-radius: 99px;
    height: 100%;
    transition: width 0.6s ease;
}

.modern-shell.partner-dashboard-shell .partner-chart-donut {
    height: 220px;
    position: relative;
    width: 220px;
}

.modern-shell.partner-dashboard-shell .partner-chart-center {
    left: 50%;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modern-shell.partner-dashboard-shell .partner-chart-center-label {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
}

.modern-shell.partner-dashboard-shell .partner-chart-center-value {
    color: var(--modern-text, #344767);
    font-size: 1.2rem;
}

.modern-shell.partner-dashboard-shell .partner-chart-bar {
    height: 240px;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tag {
    background: var(--modern-primary-soft, #eef2ff);
    border-radius: 999px;
    color: var(--modern-primary, #4e73df);
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.2rem 0.45rem;
}

@media (max-width: 767.98px) {
    .modern-shell.company-form-shell .partner-formula-grid,
    .modern-shell.company-form-shell .partner-formula-controls {
        grid-template-columns: 1fr;
    }

    .modern-shell.company-form-shell .partner-formula-item:last-child {
        grid-column: auto;
    }

}

/* Company partnership editor */
.modern-shell.company-form-shell .partner-formula-heading .partner-step-badge {
    display: inline-flex;
}

@media (max-width: 1199.98px) {
    .modern-shell.company-form-shell .partner-share-field {
        grid-template-columns: minmax(220px, 1fr) minmax(240px, 320px);
    }

    .modern-shell.company-form-shell .partner-share-field > small,
    .modern-shell.company-form-shell .partner-share-field .invalid-feedback {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .modern-shell.company-form-shell .partner-setup-steps {
        grid-template-columns: 1fr;
    }

    .modern-shell.company-form-shell .partner-toggle-row,
    .modern-shell.company-form-shell .partner-picker-heading,
    .modern-shell.company-form-shell .partner-card-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .modern-shell.company-form-shell .partner-card-head .partner-card-name {
        flex-basis: calc(100% - 58px);
    }

    .modern-shell.company-form-shell .partner-card-head .custom-control {
        margin-left: 50px;
    }

    .modern-shell.company-form-shell .partner-formula-grid,
    .modern-shell.company-form-shell .partner-preview-breakdown {
        grid-template-columns: 1fr;
    }

    .modern-shell.company-form-shell .partner-share-field {
        grid-template-columns: 1fr;
    }

    .modern-shell.company-form-shell .partner-share-field > small,
    .modern-shell.company-form-shell .partner-share-field .invalid-feedback {
        grid-column: auto;
    }

    .modern-shell.company-form-shell .partner-preview-head {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .modern-shell.company-form-shell .partner-preview-head > .partner-formula-result {
        grid-column: 2;
    }
}

/* Partner dashboard visual system */
.modern-shell.partner-dashboard-shell {
    position: relative;
}

.modern-shell.partner-dashboard-shell.is-loading .partner-kpi-card,
.modern-shell.partner-dashboard-shell.is-loading .partner-visual-card,
.modern-shell.partner-dashboard-shell.is-loading .partner-breakdown-card {
    opacity: 0.62;
    pointer-events: none;
}

.modern-shell.partner-dashboard-shell .partner-card-head-icon {
    align-items: center;
    background: linear-gradient(135deg, #4e73df, #6f42c1);
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card {
    align-items: center;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(15, 28, 64, 0.12);
    color: #fff;
    display: flex;
    gap: 0.85rem;
    min-height: 126px;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card::after {
    background: rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    content: '';
    height: 118px;
    position: absolute;
    right: -42px;
    top: -52px;
    width: 118px;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card:hover {
    transform: translateY(-2px);
}

.modern-shell.partner-dashboard-shell .partner-kpi-card.is-paid {
    background: linear-gradient(135deg, #4e73df, #224abe);
}

.modern-shell.partner-dashboard-shell .partner-kpi-card.is-invoice {
    background: linear-gradient(135deg, #36b9cc, #258391);
}

.modern-shell.partner-dashboard-shell .partner-kpi-card.is-partner {
    background: linear-gradient(135deg, #f6c23e, #d89e08);
}

.modern-shell.partner-dashboard-shell .partner-kpi-card.is-company {
    background: linear-gradient(135deg, #1cc88a, #13855c);
}

.modern-shell.partner-dashboard-shell .partner-kpi-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    display: inline-flex;
    flex: 0 0 46px;
    font-size: 1.05rem;
    height: 46px;
    justify-content: center;
    position: relative;
    width: 46px;
    z-index: 1;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card > div {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.modern-shell.partner-dashboard-shell .partner-kpi-label,
.modern-shell.partner-dashboard-shell .partner-kpi-value,
.modern-shell.partner-dashboard-shell .partner-kpi-card small {
    display: block;
}

.modern-shell.partner-dashboard-shell .partner-kpi-label {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modern-shell.partner-dashboard-shell .partner-kpi-value {
    color: #fff;
    font-size: clamp(1.05rem, 1.6vw, 1.42rem);
    font-weight: 900;
    line-height: 1.2;
    margin-top: 0.22rem;
    overflow-wrap: anywhere;
}

.modern-shell.partner-dashboard-shell .partner-kpi-value.is-negative {
    color: #ffe3df;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.67rem;
    font-weight: 700;
    margin-top: 0.3rem;
}

.modern-shell.partner-dashboard-shell .partner-visual-card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(211, 220, 238, 0.88);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 28, 64, 0.08);
    overflow: hidden;
    transition: opacity 0.18s ease;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-head {
    align-items: center;
    border-bottom: 1px solid rgba(211, 220, 238, 0.75);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.9rem 1rem;
}

.modern-shell.partner-dashboard-shell .partner-card-eyebrow {
    color: var(--modern-primary, #4e73df);
    display: block;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-head h6 {
    color: var(--modern-text, #253858);
    font-size: 0.9rem;
    font-weight: 900;
    margin: 0.12rem 0 0;
}

.modern-shell.partner-dashboard-shell .partner-card-head-icon {
    background: var(--modern-primary-soft, #eef2ff);
    color: var(--modern-primary, #4e73df);
    flex-basis: 38px;
    height: 38px;
    width: 38px;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-body {
    min-height: 290px;
    padding: 1rem;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-body.is-centered {
    align-items: center;
    display: flex;
    justify-content: center;
}

.modern-shell.partner-dashboard-shell .partner-chart-donut {
    height: 245px;
    width: 245px;
}

.modern-shell.partner-dashboard-shell .partner-chart-center small,
.modern-shell.partner-dashboard-shell .partner-chart-center strong {
    display: block;
}

.modern-shell.partner-dashboard-shell .partner-chart-center small {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.modern-shell.partner-dashboard-shell .partner-chart-center strong {
    color: var(--modern-text, #253858);
    font-size: 1rem;
    margin-top: 0.15rem;
}

.modern-shell.partner-dashboard-shell .partner-chart-state {
    align-items: center;
    background: var(--modern-muted-bg, #f4f6fb);
    border: 1px dashed rgba(78, 115, 223, 0.25);
    border-radius: 12px;
    color: var(--modern-text-muted, #6b7a99);
    display: flex;
    font-size: 0.76rem;
    font-weight: 700;
    justify-content: center;
    min-height: 220px;
    padding: 1rem;
    text-align: center;
    width: 100%;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-hint {
    background: var(--modern-primary-soft, #eef2ff);
    border-radius: 999px;
    color: var(--modern-primary, #4e73df);
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.4rem 0.65rem;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modern-shell.partner-dashboard-shell .partner-detail-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(211, 220, 238, 0.9);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(15, 28, 64, 0.06);
    padding: 0.9rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-card.is-inactive {
    background: rgba(244, 246, 251, 0.82);
    opacity: 0.72;
}

.modern-shell.partner-dashboard-shell .partner-detail-card.has-warning {
    border-color: rgba(231, 74, 59, 0.45);
}

.modern-shell.partner-dashboard-shell .partner-detail-head,
.modern-shell.partner-dashboard-shell .partner-detail-company,
.modern-shell.partner-dashboard-shell .partner-detail-amount {
    align-items: center;
    display: flex;
}

.modern-shell.partner-dashboard-shell .partner-detail-head {
    gap: 0.75rem;
    justify-content: space-between;
}

.modern-shell.partner-dashboard-shell .partner-detail-company {
    gap: 0.6rem;
    min-width: 0;
}

.modern-shell.partner-dashboard-shell .partner-detail-company > div {
    min-width: 0;
}

.modern-shell.partner-dashboard-shell .partner-detail-company strong,
.modern-shell.partner-dashboard-shell .partner-detail-company small {
    display: block;
}

.modern-shell.partner-dashboard-shell .partner-detail-company strong {
    color: var(--modern-text, #253858);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-shell.partner-dashboard-shell .partner-detail-company small {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.66rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-amount {
    align-items: flex-end;
    border-top: 1px solid rgba(211, 220, 238, 0.72);
    gap: 0.4rem 0.75rem;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.7rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-amount span,
.modern-shell.partner-dashboard-shell .partner-detail-amount small {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.66rem;
    font-weight: 700;
}

.modern-shell.partner-dashboard-shell .partner-detail-amount strong {
    color: var(--modern-success, #13855c);
    font-size: 1rem;
    font-weight: 900;
    margin-left: auto;
}

.modern-shell.partner-dashboard-shell .partner-detail-progress {
    background: var(--modern-muted-bg, #edf1f7);
    border-radius: 99px;
    height: 6px;
    margin-top: 0.45rem;
    overflow: hidden;
}

.modern-shell.partner-dashboard-shell .partner-detail-progress span {
    background: linear-gradient(90deg, #4e73df, #1cc88a);
    border-radius: 99px;
    display: block;
    height: 100%;
    transition: width 0.45s ease;
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    margin-top: 0.65rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics > div {
    min-width: 0;
    padding: 0.48rem 0.55rem;
    border: 1px solid rgba(211, 220, 238, 0.78);
    border-radius: 9px;
    background: rgba(244, 246, 251, 0.82);
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics span,
.modern-shell.partner-dashboard-shell .partner-detail-metrics strong {
    display: block;
    overflow-wrap: anywhere;
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics span {
    color: var(--modern-text-muted, #6b7a99);
    font-size: 0.58rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics span i {
    margin-right: 0.25rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics strong {
    margin-top: 0.12rem;
    color: var(--modern-text, #253858);
    font-size: 0.68rem;
    font-weight: 700;
}

.modern-shell.partner-dashboard-shell .partner-detail-metrics .is-paid i { color: #4e73df; }
.modern-shell.partner-dashboard-shell .partner-detail-metrics .is-deduction i { color: #e74a3b; }
.modern-shell.partner-dashboard-shell .partner-detail-metrics .is-base i { color: #258391; }
.modern-shell.partner-dashboard-shell .partner-detail-metrics .is-ppn i { color: #f6c23e; }
.modern-shell.partner-dashboard-shell .partner-detail-metrics .is-dpp i { color: #6f42c1; }

.modern-shell.partner-dashboard-shell .partner-deduction-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tag {
    align-items: center;
    background: var(--modern-primary-soft, #eef2ff);
    border-radius: 9px;
    color: var(--modern-primary, #4e73df);
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.35rem 0.48rem;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tag strong {
    color: var(--modern-text, #253858);
    font-size: 0.62rem;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tag.is-empty {
    color: var(--modern-text-muted, #6b7a99);
}

.modern-shell.partner-dashboard-shell .partner-detail-warning {
    background: rgba(231, 74, 59, 0.09);
    border-radius: 9px;
    color: var(--modern-danger, #e74a3b);
    font-size: 0.66rem;
    font-weight: 800;
    margin-top: 0.65rem;
    padding: 0.48rem 0.58rem;
}

.modern-shell.partner-dashboard-shell .partner-dashboard-notice {
    align-items: center;
    background: rgba(231, 74, 59, 0.09);
    border: 1px solid rgba(231, 74, 59, 0.2);
    border-left: 4px solid var(--modern-danger, #e74a3b);
    border-radius: 10px;
    color: var(--modern-danger, #e74a3b);
    display: none;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.35rem;
    line-height: 1.35;
    margin-bottom: 0.7rem;
    padding: 0.55rem 0.7rem;
}

.modern-shell.partner-dashboard-shell .partner-dashboard-notice.is-visible {
    display: flex;
}

@media (max-width: 1199.98px) {
    .modern-shell.partner-dashboard-shell .partner-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .modern-shell.partner-dashboard-shell .partner-breakdown-head,
    .modern-shell.partner-dashboard-shell .partner-detail-amount {
        align-items: flex-start;
        flex-direction: column;
    }

    .modern-shell.partner-dashboard-shell .partner-breakdown-hint {
        border-radius: 10px;
    }

    .modern-shell.partner-dashboard-shell .partner-detail-amount strong {
        margin-left: 0;
    }

}

/* Partner dashboard compact density */
.modern-shell.partner-dashboard-shell > .row.mb-4 {
    margin-bottom: 0.75rem !important;
}

.modern-shell.partner-dashboard-shell .modern-period-filter {
    min-height: 58px;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(42, 65, 125, 0.07), inset 0 1px 0 #fff;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-copy {
    gap: 0.55rem;
    min-width: 180px;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.8rem;
    box-shadow: 0 4px 10px rgba(var(--modern-accent-rgb), 0.2);
}

.modern-shell.partner-dashboard-shell .modern-period-filter-kicker {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.045em;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-range {
    font-size: 0.72rem;
    font-weight: 500;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-options {
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: 10px;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-option {
    min-height: 32px;
    padding: 0.3rem 0.55rem;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-custom {
    flex-basis: 185px;
    min-width: 185px;
}

.modern-shell.partner-dashboard-shell .modern-period-filter-custom-input {
    min-height: 32px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card {
    min-height: 96px;
    gap: 0.65rem;
    padding: 0.72rem 0.8rem;
    border-radius: 13px;
    box-shadow: 0 7px 18px rgba(15, 28, 64, 0.1);
}

.modern-shell.partner-dashboard-shell .partner-kpi-card::after {
    width: 88px;
    height: 88px;
    right: -34px;
    top: -42px;
}

.modern-shell.partner-dashboard-shell .partner-kpi-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 0.82rem;
}

.modern-shell.partner-dashboard-shell .partner-kpi-label {
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.035em;
}

.modern-shell.partner-dashboard-shell .partner-kpi-value {
    font-size: clamp(0.98rem, 1.35vw, 1.2rem);
    font-weight: 700;
    margin-top: 0.14rem;
}

.modern-shell.partner-dashboard-shell .partner-kpi-card small {
    font-size: 0.62rem;
    font-weight: 500;
    margin-top: 0.18rem;
}

.modern-shell.partner-dashboard-shell .partner-visual-card,
.modern-shell.partner-dashboard-shell .partner-detail-card {
    border-radius: 13px;
    box-shadow: 0 7px 18px rgba(15, 28, 64, 0.06);
}

.modern-shell.partner-dashboard-shell .partner-visual-card-head {
    padding: 0.72rem 0.9rem;
}

.modern-shell.partner-dashboard-shell .partner-card-eyebrow {
    font-size: 0.58rem;
    font-weight: 700;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-head h6 {
    font-size: 0.84rem;
    font-weight: 700;
}

.modern-shell.partner-dashboard-shell .partner-card-head-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.72rem;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-body {
    min-height: 255px;
    padding: 0.8rem 0.9rem;
}

.modern-shell.partner-dashboard-shell .partner-visual-card-body.is-centered .partner-chart-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.modern-shell.partner-dashboard-shell .partner-chart-donut {
    height: 220px;
    width: 220px;
}

.modern-shell.partner-dashboard-shell .partner-chart-center small {
    font-size: 0.58rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .partner-chart-center strong {
    font-size: 0.96rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .partner-chart-bar {
    height: 225px;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-card .inventory-card-header {
    padding: 0.82rem 1rem;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-card .inventory-card-body {
    padding: 0.9rem 1rem;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-card .inventory-card-title {
    font-size: 0.92rem;
    font-weight: 700;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-card .inventory-card-subtitle {
    font-size: 0.74rem;
    font-weight: 400;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-hint {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.34rem 0.55rem;
}

.modern-shell.partner-dashboard-shell .partner-breakdown-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}

.modern-shell.partner-dashboard-shell .partner-detail-card {
    padding: 0.88rem;
}

.modern-shell.partner-dashboard-shell .partner-row-avatar {
    height: 34px;
    width: 34px;
    border-radius: 8px;
    font-size: 0.72rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-company strong {
    font-size: 0.82rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .partner-detail-company small,
.modern-shell.partner-dashboard-shell .partner-detail-amount span,
.modern-shell.partner-dashboard-shell .partner-detail-amount small {
    font-size: 0.66rem;
    font-weight: 500;
}

.modern-shell.partner-dashboard-shell .partner-detail-amount {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
}

.modern-shell.partner-dashboard-shell .partner-detail-amount strong {
    font-size: 0.98rem;
    font-weight: 700;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tags {
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tag,
.modern-shell.partner-dashboard-shell .partner-deduction-tag strong {
    font-size: 0.62rem;
    font-weight: 600;
}

.modern-shell.partner-dashboard-shell .partner-deduction-tag {
    gap: 0.25rem;
    padding: 0.27rem 0.38rem;
    border-radius: 7px;
}

@media (max-width: 767.98px) {
    .modern-shell.partner-dashboard-shell .partner-breakdown-grid {
        grid-template-columns: 1fr;
    }
}

/* Company detail */
.modern-shell.company-detail-shell .company-detail-stats { margin-bottom: 0.1rem; }

.modern-shell.company-detail-shell .company-detail-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(246, 194, 62, 0.38);
    border-left: 4px solid #f6c23e;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 248, 225, 0.96), rgba(255, 255, 255, 0.9));
    box-shadow: 0 8px 22px rgba(116, 86, 14, 0.08);
}

.modern-shell.company-detail-shell .company-detail-notice-icon,
.modern-shell.company-detail-shell .company-detail-section-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #946200;
    background: rgba(246, 194, 62, 0.2);
}

.modern-shell.company-detail-shell .company-detail-notice-copy { min-width: 0; }
.modern-shell.company-detail-shell .company-detail-notice-copy > strong {
    display: block;
    color: #6f4d08;
    font-size: 0.9rem;
    font-weight: 700;
}
.modern-shell.company-detail-shell .company-detail-notice-copy > p {
    margin: 0.18rem 0 0.65rem;
    color: #87691f;
    font-size: 0.76rem;
}

.modern-shell.company-detail-shell .company-detail-blockers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}
.modern-shell.company-detail-shell .company-detail-blockers span {
    padding: 0.34rem 0.55rem;
    border: 1px solid rgba(246, 194, 62, 0.3);
    border-radius: 999px;
    color: #735516;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 600;
}
.modern-shell.company-detail-shell .company-detail-blockers b { color: #946200; }

.modern-shell.company-detail-shell .company-profile-card,
.modern-shell.company-detail-shell .company-relations-card { overflow: hidden; }
.modern-shell.company-detail-shell .company-detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
}

.modern-shell.company-detail-shell .company-profile-body {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    gap: 1.35rem;
    padding: 1.2rem;
}
.modern-shell.company-detail-shell .company-detail-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 290px;
    padding: 1.25rem;
    border: 1px solid rgba(78, 115, 223, 0.16);
    border-radius: 16px;
    text-align: center;
    background: radial-gradient(circle at top right, rgba(78, 115, 223, 0.15), transparent 44%), #f8faff;
}
.modern-shell.company-detail-shell .company-detail-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 190px);
    height: 112px;
    margin-bottom: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(78, 115, 223, 0.14);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 28, 64, 0.08);
}
.modern-shell.company-detail-shell .company-detail-logo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.modern-shell.company-detail-shell .company-detail-brand-copy { min-width: 0; width: 100%; }
.modern-shell.company-detail-shell .company-detail-brand-copy h4 {
    margin: 0;
    color: var(--modern-text, #1e3a5f);
    font-size: 1.15rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}
.modern-shell.company-detail-shell .company-detail-brand-copy p {
    margin: 0.3rem 0 0;
    color: var(--modern-subtext, #7483a4);
    font-size: 0.76rem;
}
.modern-shell.company-detail-shell .company-detail-brand-copy > span {
    display: inline-flex;
    gap: 0.42rem;
    margin-top: 0.8rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    color: var(--modern-accent-strong, #3558c9);
    background: rgba(78, 115, 223, 0.09);
    font-size: 0.7rem;
    font-weight: 600;
}

.modern-shell.company-detail-shell .company-detail-content { min-width: 0; }
.modern-shell.company-detail-shell .company-detail-section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}
.modern-shell.company-detail-shell .company-detail-section-head > span {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    color: var(--modern-accent-strong, #3558c9);
    background: rgba(78, 115, 223, 0.1);
    font-size: 0.75rem;
}
.modern-shell.company-detail-shell .company-detail-section-head strong,
.modern-shell.company-detail-shell .company-detail-section-head small { display: block; }
.modern-shell.company-detail-shell .company-detail-section-head strong {
    color: var(--modern-text, #1e3a5f);
    font-size: 0.84rem;
    font-weight: 700;
}
.modern-shell.company-detail-shell .company-detail-section-head small {
    margin-top: 0.12rem;
    color: var(--modern-subtext, #7483a4);
    font-size: 0.68rem;
}
.modern-shell.company-detail-shell .company-detail-section-spaced { margin-top: 1.15rem; }

.modern-shell.company-detail-shell .company-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.modern-shell.company-detail-shell .company-detail-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    min-height: 72px;
    padding: 0.75rem;
    border: 1px solid rgba(213, 223, 242, 0.9);
    border-radius: 12px;
    background: rgba(248, 250, 255, 0.78);
}
.modern-shell.company-detail-shell .company-detail-info-item > i {
    flex: 0 0 16px;
    margin-top: 0.2rem;
    color: var(--modern-accent, #4e73df);
    font-size: 0.72rem;
    text-align: center;
}
.modern-shell.company-detail-shell .company-detail-info-item > div { min-width: 0; }
.modern-shell.company-detail-shell .company-detail-info-item span,
.modern-shell.company-detail-shell .company-detail-info-item strong,
.modern-shell.company-detail-shell .company-detail-info-item a { display: block; }
.modern-shell.company-detail-shell .company-detail-info-item span {
    margin-bottom: 0.22rem;
    color: var(--modern-subtext, #7483a4);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}
.modern-shell.company-detail-shell .company-detail-info-item strong,
.modern-shell.company-detail-shell .company-detail-info-item a {
    color: var(--modern-text, #1e3a5f);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.modern-shell.company-detail-shell .company-detail-info-item a { color: var(--modern-accent-strong, #3558c9); }
.modern-shell.company-detail-shell .company-detail-info-wide { grid-column: 1 / -1; }
.modern-shell.company-detail-shell .company-detail-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.8rem 1.15rem;
    border-top: 1px solid rgba(213, 223, 242, 0.8);
    background: rgba(248, 250, 255, 0.72);
}

.modern-shell.company-detail-shell .company-relation-header-actions,
.modern-shell.company-detail-shell .company-relation-formula-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}
.modern-shell.company-detail-shell .company-relation-total {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.62rem;
    border: 1px solid rgba(78, 115, 223, 0.18);
    border-radius: 999px;
    color: var(--modern-accent-strong, #3558c9);
    background: rgba(78, 115, 223, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.modern-shell.company-detail-shell .company-relations-body { padding: 1.15rem; }
.modern-shell.company-detail-shell .company-relation-panel {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(213, 223, 242, 0.9);
    border-radius: 15px;
    background: rgba(248, 250, 255, 0.66);
}
.modern-shell.company-detail-shell .company-relation-panel-head,
.modern-shell.company-detail-shell .company-relation-company {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}
.modern-shell.company-detail-shell .company-relation-panel-head {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid rgba(213, 223, 242, 0.82);
    background: rgba(255, 255, 255, 0.74);
}
.modern-shell.company-detail-shell .company-relation-panel-head > span,
.modern-shell.company-detail-shell .company-relation-avatar,
.modern-shell.company-detail-shell .company-relation-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
}
.modern-shell.company-detail-shell .company-relation-panel-head > span {
    color: #fff;
    background: linear-gradient(135deg, #4e73df, #6f8ee6);
    box-shadow: 0 7px 16px rgba(78, 115, 223, 0.2);
}
.modern-shell.company-detail-shell .company-relation-incoming .company-relation-panel-head > span {
    background: linear-gradient(135deg, #1cc88a, #43d6a3);
}
.modern-shell.company-detail-shell .company-relation-panel-head h6,
.modern-shell.company-detail-shell .company-relation-panel-head p { margin: 0; }
.modern-shell.company-detail-shell .company-relation-panel-head h6 {
    color: var(--modern-text, #1e3a5f);
    font-size: 0.84rem;
    font-weight: 750;
}
.modern-shell.company-detail-shell .company-relation-panel-head p {
    margin-top: 0.16rem;
    color: var(--modern-subtext, #7483a4);
    font-size: 0.66rem;
}
.modern-shell.company-detail-shell .company-relation-panel-head > b {
    min-width: 30px;
    padding: 0.38rem;
    border-radius: 9px;
    color: var(--modern-accent-strong, #3558c9);
    background: rgba(78, 115, 223, 0.1);
    font-size: 0.75rem;
    text-align: center;
}
.modern-shell.company-detail-shell .company-relation-incoming .company-relation-panel-head > b {
    color: #157a55;
    background: rgba(28, 200, 138, 0.1);
}
.modern-shell.company-detail-shell .company-relation-list {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
}
.modern-shell.company-detail-shell .company-relation-item {
    overflow: hidden;
    border: 1px solid rgba(213, 223, 242, 0.9);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 7px 17px rgba(15, 28, 64, 0.055);
}
.modern-shell.company-detail-shell .company-relation-item.is-inactive { opacity: 0.68; }
.modern-shell.company-detail-shell .company-relation-company { padding: 0.75rem 0.8rem; }
.modern-shell.company-detail-shell .company-relation-avatar {
    color: var(--modern-accent-strong, #3558c9);
    background: rgba(78, 115, 223, 0.1);
    font-size: 0.75rem;
}
.modern-shell.company-detail-shell .company-relation-company > div { min-width: 0; }
.modern-shell.company-detail-shell .company-relation-company strong,
.modern-shell.company-detail-shell .company-relation-company small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modern-shell.company-detail-shell .company-relation-company strong {
    color: var(--modern-text, #1e3a5f);
    font-size: 0.8rem;
    font-weight: 700;
}
.modern-shell.company-detail-shell .company-relation-company small {
    margin-top: 0.14rem;
    color: var(--modern-subtext, #7483a4);
    font-size: 0.64rem;
}

.modern-shell.company-detail-shell .company-relation-formula {
    margin: 0 0.8rem 0.75rem;
    padding: 0.72rem;
    border: 1px solid rgba(78, 115, 223, 0.12);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(246, 248, 255, 0.95), rgba(255, 255, 255, 0.9));
}
.modern-shell.company-detail-shell .company-relation-formula-head { margin-bottom: 0.58rem; }
.modern-shell.company-detail-shell .company-relation-formula-head span,
.modern-shell.company-detail-shell .company-relation-formula-head strong {
    font-size: 0.66rem;
    font-weight: 700;
}
.modern-shell.company-detail-shell .company-relation-formula-head span { color: var(--modern-subtext, #7483a4); }
.modern-shell.company-detail-shell .company-relation-formula-head strong { color: var(--modern-accent-strong, #3558c9); }
.modern-shell.company-detail-shell .company-relation-equation,
.modern-shell.company-detail-shell .company-relation-components {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.34rem;
}
.modern-shell.company-detail-shell .company-relation-equation span,
.modern-shell.company-detail-shell .company-relation-components > span {
    padding: 0.33rem 0.48rem;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
}
.modern-shell.company-detail-shell .company-relation-equation > b { color: #7a89a8; font-size: 0.72rem; }
.modern-shell.company-detail-shell .company-relation-equation .is-paid { color: #2f55b8; background: rgba(78, 115, 223, 0.11); }
.modern-shell.company-detail-shell .company-relation-equation .is-deduction { color: #9c5d06; background: rgba(246, 194, 62, 0.16); }
.modern-shell.company-detail-shell .company-relation-equation .is-share { color: #6a3bb0; background: rgba(111, 66, 193, 0.11); }
.modern-shell.company-detail-shell .company-relation-equation .is-result { color: #157a55; background: rgba(28, 200, 138, 0.13); }
.modern-shell.company-detail-shell .company-relation-components {
    margin-top: 0.62rem;
    padding-top: 0.58rem;
    border-top: 1px dashed rgba(116, 131, 164, 0.24);
}
.modern-shell.company-detail-shell .company-relation-components > span { color: #725315; background: rgba(246, 194, 62, 0.13); }
.modern-shell.company-detail-shell .company-relation-components > span.is-empty { color: #157a55; background: rgba(28, 200, 138, 0.11); }
.modern-shell.company-detail-shell .company-relation-note {
    display: flex;
    gap: 0.55rem;
    margin: 0 0.8rem 0.8rem;
    padding: 0.65rem 0.72rem;
    border-radius: 10px;
    color: #5d6982;
    background: rgba(241, 244, 249, 0.9);
}
.modern-shell.company-detail-shell .company-relation-note > i { margin-top: 0.16rem; color: #7888a7; font-size: 0.68rem; }
.modern-shell.company-detail-shell .company-relation-note span {
    display: block;
    color: #7483a4;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
}
.modern-shell.company-detail-shell .company-relation-note p { margin: 0.18rem 0 0; font-size: 0.68rem; }
.modern-shell.company-detail-shell .company-relation-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    padding: 1.4rem;
    text-align: center;
}
.modern-shell.company-detail-shell .company-relation-empty > span {
    width: 46px;
    height: 46px;
    color: #7888a7;
    background: rgba(116, 131, 164, 0.1);
}
.modern-shell.company-detail-shell .company-relation-empty p {
    max-width: 330px;
    margin: 0.75rem 0 0;
    color: var(--modern-subtext, #7483a4);
    font-size: 0.7rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .modern-shell.company-detail-shell .company-profile-body { grid-template-columns: 1fr; }
    .modern-shell.company-detail-shell .company-detail-brand {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 0;
        text-align: left;
    }
    .modern-shell.company-detail-shell .company-detail-logo-frame {
        flex: 0 0 160px;
        margin: 0 1rem 0 0;
    }
}

@media (max-width: 575.98px) {
    .modern-shell.company-detail-shell .company-detail-card-header,
    .modern-shell.company-detail-shell .company-relation-header-actions,
    .modern-shell.company-detail-shell .company-relation-formula-head { flex-direction: column; align-items: flex-start; }
    .modern-shell.company-detail-shell .company-detail-card-header,
    .modern-shell.company-detail-shell .company-relation-header-actions,
    .modern-shell.company-detail-shell .company-relation-header-actions .btn { width: 100%; }
    .modern-shell.company-detail-shell .company-detail-brand { flex-direction: column; text-align: center; }
    .modern-shell.company-detail-shell .company-detail-logo-frame { flex-basis: auto; margin: 0 0 0.9rem; }
    .modern-shell.company-detail-shell .company-detail-info-grid { grid-template-columns: 1fr; }
    .modern-shell.company-detail-shell .company-detail-info-wide { grid-column: auto; }
    .modern-shell.company-detail-shell .company-relation-company { grid-template-columns: 38px minmax(0, 1fr); }
    .modern-shell.company-detail-shell .company-relation-company > .badge {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 48px;
    }
}

.modern-shell .profile-page {
    --profile-ink: #24395f;
    --profile-muted: #62718a;
    --profile-border: var(--modern-border);
    color: var(--profile-ink);
    font-size: 0.875rem;
    line-height: 1.5;
    min-width: 0;
}

.modern-shell .profile-page .profile-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    color: var(--profile-muted);
    font-size: 0.8125rem;
}

.modern-shell .profile-page .profile-breadcrumb > i {
    font-size: 0.625rem;
}

.modern-shell .profile-page .profile-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(237, 243, 255, 0.62));
}

.modern-shell .profile-page .profile-summary__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.modern-shell .profile-page .profile-summary__copy {
    min-width: 0;
}

.modern-shell .profile-page .profile-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.modern-shell .profile-page .profile-avatar {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--modern-accent-soft);
    box-shadow: 0 6px 16px rgba(43, 70, 132, 0.16);
}

.modern-shell .profile-page .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modern-shell .profile-page .profile-avatar-action {
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    color: var(--modern-accent-strong);
    background: #ffffff;
    border: 1px solid var(--profile-border);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(43, 70, 132, 0.12);
    cursor: pointer;
}

.modern-shell .profile-page .profile-avatar-action input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.modern-shell .profile-page .profile-avatar-action:focus-within {
    outline: 3px solid var(--modern-accent-strong);
    outline-offset: 3px;
}

.modern-shell .profile-page .profile-name {
    margin: 0 0 0.2rem;
    color: var(--profile-ink);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .profile-division {
    margin: 0;
    color: var(--profile-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .profile-summary__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
}

.modern-shell .profile-page .profile-summary__contacts a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .profile-summary__status {
    display: grid;
    justify-items: end;
    align-self: start;
    gap: 0.35rem;
    max-width: 12rem;
    font-size: 0.75rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .profile-summary__facts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(98, 113, 138, 0.14);
}

.modern-shell .profile-page .profile-summary__fact {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.modern-shell .profile-page .profile-summary__fact b {
    color: var(--profile-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .profile-summary__fact strong {
    color: var(--profile-ink);
    font-size: 0.75rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .profile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0.875rem 0;
    padding: 0;
    gap: 0.5rem;
}

.modern-shell .profile-page .profile-tabs .nav-item {
    min-width: 0;
}

.modern-shell .profile-page .profile-tabs .nav-link {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    text-align: center;
}

.modern-shell .profile-page .profile-tabs .modern-card-tab-title {
    justify-content: center;
    gap: 0.4rem;
    font-size: inherit;
    line-height: 1.4;
}

.modern-shell .profile-page .profile-tabs .modern-card-tab-title > i {
    font-size: 0.875rem;
}

.modern-shell .profile-page .profile-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    align-items: start;
    gap: 1rem;
}

.modern-shell .profile-page .profile-overview-grid > * {
    min-width: 0;
}

.modern-shell .profile-page .card.form-card {
    border-radius: 14px;
    font-size: 0.8125rem;
}

.modern-shell .profile-page .card.form-card > .card-header.profile-card-header,
.modern-shell .profile-page .form-card .card-body {
    padding: 0.875rem 1rem;
}

.modern-shell .profile-page .profile-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--profile-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.modern-shell .profile-page .profile-header-pill h2,
.modern-shell .profile-page .profile-details__title {
    margin: 0;
    color: var(--profile-ink);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.modern-shell .profile-page .profile-section-heading {
    margin-bottom: 0.875rem;
}

.modern-shell .profile-page .profile-section-heading h2 {
    margin: 0 0 0.2rem;
    color: var(--profile-ink);
    font-size: 1rem;
    font-weight: 700;
}

.modern-shell .profile-page .profile-section-heading small,
.modern-shell .profile-page .face-meta {
    color: var(--profile-muted);
    font-size: 0.75rem;
}

.modern-shell .profile-page .form-section {
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.modern-shell .profile-page .form-section-title {
    margin-bottom: 0.625rem;
    color: var(--profile-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.modern-shell .profile-page .profile-form label {
    margin-bottom: 0.3rem;
    color: var(--profile-ink);
    font-size: 0.75rem;
}

.modern-shell .profile-page .profile-form .form-control {
    min-height: 38px;
    padding: 0.45rem 0.625rem;
    color: var(--profile-ink);
    font-size: 0.875rem;
}

.modern-shell .profile-page .profile-form textarea.form-control {
    min-height: 70px;
    height: auto;
}

.modern-shell .profile-page .profile-details dl {
    margin: 0;
}

.modern-shell .profile-page .profile-detail {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--profile-border);
}

.modern-shell .profile-page .profile-details .card-body {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.modern-shell .profile-page .profile-detail:last-child {
    border-bottom: 0;
}

.modern-shell .profile-page .profile-detail dt {
    color: var(--profile-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.modern-shell .profile-page .profile-detail dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.modern-shell .profile-page .face-panel,
.modern-shell .profile-page .face-actions,
.modern-shell .profile-page .face-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.modern-shell .profile-page .face-panel {
    justify-content: space-between;
}

.modern-shell .profile-page .face-status {
    font-size: 0.8125rem;
    font-weight: 600;
}

.modern-shell .profile-page .face-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 40px;
    padding: 0.45rem 0.625rem;
    color: #ffffff;
    background: var(--modern-accent-strong);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.modern-shell .profile-page .face-action-danger {
    color: var(--modern-danger-text);
    background: var(--modern-danger-bg);
    border-color: #f4bdc6;
}

.modern-shell .profile-page .face-action:hover {
    filter: brightness(0.95);
    text-decoration: none;
}

.modern-shell .profile-page .face-preview {
    margin-top: 0.625rem;
}

.modern-shell .profile-page .face-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.modern-shell .profile-page .profile-form .modal-footer {
    padding: 0.75rem 0 0;
}

.modern-shell .profile-page .profile-card-showcase {
    padding: 1rem;
    border-radius: 16px;
}

.modern-shell .profile-page .profile-card-showcase__header {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.modern-shell .profile-page .profile-card-showcase__header h2 {
    font-size: 1rem;
}

.modern-shell .profile-page .profile-card-showcase__header p {
    margin-top: 0.25rem;
    line-height: 1.4;
}

.modern-shell .profile-page .profile-card-showcase__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
}

.modern-shell .profile-page .profile-card-showcase__preview {
    min-height: 0;
    padding: 1rem;
    border-radius: 14px;
}

.modern-shell .profile-page .profile-card-share-panel {
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 14px;
}

.modern-shell .profile-page .profile-card-share-panel__intro {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.625rem;
}

.modern-shell .profile-page .profile-card-share-panel__icon {
    width: 34px;
    height: 34px;
}

.modern-shell .profile-page .profile-card-share-panel__intro h3 {
    font-size: 0.875rem;
}

.modern-shell .profile-page .profile-card-share-panel__qr {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    min-height: 0;
    padding: 0.625rem;
    text-align: left;
}

.modern-shell .profile-page .profile-card-share-panel__qr img {
    grid-row: 1 / 3;
    width: 88px;
    height: 88px;
    margin: 0;
}

.modern-shell .profile-page .profile-card-share-panel__qr strong {
    align-self: end;
}

.modern-shell .profile-page .profile-card-share-panel__qr span {
    align-self: start;
}

.modern-shell .profile-page .profile-card-share-panel__locked {
    min-height: 110px;
    padding: 0.625rem;
}

.modern-shell .profile-page .profile-card-share-panel__url {
    padding: 0.5rem 2.8rem 0.5rem 0.625rem;
}

.modern-shell .profile-page .profile-card-share-panel__actions .btn {
    min-height: 36px;
    padding: 0.4rem 0.625rem;
    font-size: 0.75rem;
    white-space: normal;
}

.modern-shell .profile-page .profile-card-settings {
    margin-top: 0;
    padding: 0.625rem;
}

.modern-shell .profile-page .profile-card-settings__title,
.modern-shell .profile-page .profile-card-publish-option {
    margin-bottom: 0.625rem;
}

.modern-shell .profile-page .profile-card-publish-option,
.modern-shell .profile-page .profile-card-setting-option {
    grid-template-columns: 28px minmax(0, 1fr) 40px;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.5rem;
}

.modern-shell .profile-page .profile-card-setting-option__icon {
    width: 28px;
    height: 28px;
}

.modern-shell .profile-page .profile-card-setting-option__copy b {
    font-size: 0.75rem;
}

.modern-shell .profile-page .profile-card-setting-option__copy small {
    line-height: 1.4;
}

@media (max-width: 1199.98px) {
    .modern-shell .profile-page .profile-overview-grid,
    .modern-shell .profile-page .profile-card-showcase__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .modern-shell .profile-page .profile-summary__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .modern-shell .profile-page .profile-summary,
    .modern-shell .profile-page .profile-card-showcase,
    .modern-shell .profile-page .form-card .card-body {
        padding: 0.75rem;
    }

    .modern-shell .profile-page .profile-summary__identity {
        gap: 0.875rem;
    }

    .modern-shell .profile-page .profile-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .modern-shell .profile-page .profile-summary__status {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: 100%;
        text-align: left;
    }

    .modern-shell .profile-page .profile-name {
        font-size: 1.25rem;
    }

    .modern-shell .profile-page .profile-form .form-control {
        font-size: 16px;
    }

    .modern-shell .profile-page .profile-card-showcase__preview {
        padding: 0.625rem;
    }

    .modern-shell .profile-page .profile-card-share-panel {
        padding: 0.5rem;
    }

    .modern-shell .profile-page .profile-card-share-panel__actions .btn,
    .modern-shell .profile-page .profile-form .btn {
        min-height: 40px;
    }
}

@media (max-width: 575.98px) {
    .modern-shell .profile-page .profile-summary__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 359.98px) {
    .modern-shell .profile-page .profile-avatar {
        width: 60px;
        height: 60px;
    }

    .modern-shell .profile-page .profile-card-themes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modern-shell .profile-page .profile-card-publish-option,
    .modern-shell .profile-page .profile-card-setting-option {
        grid-template-columns: minmax(0, 1fr) 40px;
        column-gap: 0.375rem;
    }

    .modern-shell .profile-page .profile-card-setting-option__icon {
        grid-column: 1;
    }

    .modern-shell .profile-page .profile-card-setting-option__copy {
        grid-column: 1;
    }

    .modern-shell .profile-page .profile-card-setting-option__toggle {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}
.customer-product-ppp-profile {
    color: #176b43;
    font-size: 0.72rem;
    font-weight: 600;
}

.customer-product-connector-warning {
    color: #b45309;
    cursor: help;
    font-size: 0.72rem;
    font-weight: 700;
}

.product-auto-sync-chip {
    align-items: center;
    background: #fff;
    border: 1px solid #8b5cf6;
    border-radius: 999px;
    color: #6d28d9;
    display: inline-flex;
    font-size: 11px;
    gap: 6px;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}

.product-auto-sync-dot {
    background: #8b5cf6;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.45);
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.product-auto-sync-text {
    color: #6d28d9;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.connector-compare-product-sync {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.connector-compare-action-btn {
    align-items: center;
    border-radius: 0.65rem;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    gap: 0.3rem;
    font-size: 0.64rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    padding: 0.35rem 0.58rem;
    transition: box-shadow 0.16s ease, transform 0.16s ease;
    white-space: nowrap;
}

.connector-compare-action-btn.is-sync {
    background: #2563eb;
    border: 1px solid #1d4ed8;
    color: #fff;
}

.connector-compare-action-btn.is-migration {
    background: #ea580c;
    border: 1px solid #c2410c;
    color: #fff;
}

.connector-compare-action-btn:hover,
.connector-compare-action-btn:focus {
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.connector-compare-action-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

.connector-compare-confirm-summary {
    color: #334155;
    margin-bottom: 0.8rem;
}

.connector-compare-speed-warning {
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.65rem;
    color: #9a3412;
    display: flex;
    font-size: 0.82rem;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    text-align: left;
}

.connector-compare-speed-warning i {
    margin-top: 0.14rem;
}

.connector-compare-migration-warning {
    color: #c2410c;
    font-size: 0.76rem;
    font-weight: 600;
    margin-top: 0.65rem;
}
.choices__list--dropdown .choices__item.is-ppp-profile-product {
    color: #64748b !important;
    font-weight: 600;
}

.modern-shell .core-bulk-number-header,
.modern-shell .core-bulk-number-cell {
    white-space: nowrap;
}

.modern-shell .core-bulk-check-wrap {
    display: inline-block;
    min-height: 1rem;
    margin-right: .45rem;
    padding-left: 1.35rem;
    vertical-align: middle;
}

.modern-shell .core-bulk-check-wrap .custom-control-label::before,
.modern-shell .core-bulk-check-wrap .custom-control-label::after {
    top: .05rem;
}

.modern-shell .core-bulk-action-toggle:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* Voucher detail */
.modern-shell.voucher-detail-modern {
    padding-bottom: 1rem;
}

.modern-shell.voucher-detail-modern .voucher-detail-header {
    margin-bottom: 1rem;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 28, 64, 0.08);
}

.modern-shell.voucher-detail-modern .voucher-detail-stats {
    margin-bottom: 0.25rem;
}

.modern-shell.voucher-detail-modern .voucher-detail-stats > [class*="col-"] {
    display: flex;
}

.modern-shell.voucher-detail-modern .voucher-detail-stats .modern-status-card {
    width: 100%;
    min-height: 96px;
}

.modern-shell.voucher-detail-modern .voucher-detail-overview > [class*="col-"] {
    display: flex;
}

.modern-shell.voucher-detail-modern .voucher-detail-card {
    width: 100%;
    border-radius: 16px;
}

.modern-shell.voucher-detail-modern .voucher-detail-card > .modern-card-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
}

.modern-shell.voucher-detail-modern .voucher-detail-card-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.modern-shell.voucher-detail-modern .voucher-detail-card-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.22);
    border-radius: 11px;
    background: rgba(var(--modern-accent-rgb), 0.1);
    color: var(--modern-accent-strong);
}

.modern-shell.voucher-detail-modern .voucher-detail-card > .modern-card-body {
    padding: 1rem 1.1rem 1.1rem;
}

.modern-shell.voucher-detail-modern .voucher-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.modern-shell.voucher-detail-modern .voucher-detail-item {
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.modern-shell.voucher-detail-modern .voucher-detail-item-wide {
    grid-column: 1 / -1;
}

.modern-shell.voucher-detail-modern .voucher-detail-item.is-accent {
    border-color: rgba(var(--modern-accent-rgb), 0.28);
    background: rgba(var(--modern-accent-rgb), 0.08);
}

.modern-shell.voucher-detail-modern .voucher-detail-item dt {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0;
    color: var(--modern-subtext);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
}

.modern-shell.voucher-detail-modern .voucher-detail-item dt i {
    width: 14px;
    color: var(--modern-accent-light);
    text-align: center;
}

.modern-shell.voucher-detail-modern .voucher-detail-item dd {
    margin: 0.42rem 0 0;
    color: var(--modern-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.modern-shell.voucher-detail-modern .voucher-detail-item.is-accent dd {
    color: var(--modern-accent-strong);
    font-size: 1rem;
    font-weight: 800;
}

.modern-shell.voucher-detail-modern .voucher-detail-code {
    display: inline-flex;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    border: 1px solid rgba(var(--modern-accent-rgb), 0.18);
    border-radius: 8px;
    background: rgba(var(--modern-accent-rgb), 0.07);
    color: var(--modern-accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.modern-shell.voucher-detail-modern .voucher-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.modern-shell.voucher-detail-modern .voucher-detail-badges .badge {
    margin: 0;
    padding: 0.38rem 0.58rem;
}

@media (max-width: 575.98px) {
    .modern-shell.voucher-detail-modern .voucher-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .modern-shell.voucher-detail-modern .voucher-detail-item-wide {
        grid-column: auto;
    }

    .modern-shell.voucher-detail-modern .voucher-detail-card > .modern-card-header {
        min-height: auto;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

.modern-shell .modern-modal-glass .modal-header,
.modern-shell .modern-modal-glass .modal-footer {
    background: transparent;
    border-color: var(--modern-border);
    color: var(--modern-text);
}

.modern-shell .modern-modal-glass .close,
.modern-shell .modern-modal-glass .close:hover {
    color: var(--modern-accent-strong);
}

.modern-shell .recruitment-company-context .left {
    flex: 1 1 240px;
    min-width: 0;
}

.modern-shell .recruitment-company-context .left > div {
    min-width: 0;
}

.modern-shell .recruitment-company-context .badge {
    white-space: normal;
    overflow-wrap: anywhere;
}

.modern-shell .recruitment-theme-preview {
    color: var(--recruitment-text-color, #334155);
    border-radius: 16px;
}

.modern-shell .recruitment-theme-preview h3 {
    color: var(--recruitment-heading-color, #0f172a);
}

.modern-shell .recruitment-theme-preview .btn {
    background: var(--recruitment-button-color, #1d4ed8);
    color: var(--recruitment-button-text-color, #ffffff);
    min-height: 44px;
}

.modern-shell .recruitment-preview-link {
    color: var(--recruitment-brand-color, #1d4ed8);
}

.modern-shell .recruitment-color-picker {
    flex: 0 0 52px;
    padding: 3px;
    min-height: 40px;
    cursor: pointer;
}