/* Custom overrides for interactive elements */

/* Common toggle classes */
.wizard-dropdown.open .wizard-dropdown-menu,
.wizard-dropdown.show .wizard-dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.pagination-per-page-dropdown.open .pagination-per-page-menu,
.pagination-per-page-dropdown.show .pagination-per-page-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.products-selection-dropdown.open .products-selection-menu,
.products-selection-dropdown.show .products-selection-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.products-selection-option.active {
    background-color: var(--muted) !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
}

.product-actions-dropdown.open .product-actions-menu,
.product-actions-dropdown.show .product-actions-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.filter-dropdown.open .filter-menu,
.filter-dropdown.show .filter-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Product Actions Menu - match original styling */
.product-actions-dropdown {
    position: relative;
}

.product-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    min-width: 180px;
    width: max-content !important;
    white-space: nowrap;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    margin-top: 0.25rem;
    display: none;
}

.product-actions-menu.show,
.product-actions-dropdown.show .product-actions-menu {
    display: block;
}

/* Integrations table overflow fix - allow dropdown menus to overflow */
.integrations-table-wrapper {
    overflow: visible !important;
}

.integrations-table {
    overflow: visible !important;
}

.integrations-table tbody {
    overflow: visible !important;
}

.integrations-table td {
    overflow: visible !important;
}

/* Sidebar */
.wizard-sidebar.open,
.wizard-sidebar.show {
    transform: translateX(0) !important;
}

.wizard-sidebar-overlay.open,
.wizard-sidebar-overlay.show {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Navbar needs high z-index so its dropdowns appear above overlay */
/* Navbar needs distinct handling for mobile vs desktop */
.wizard-navbar {
    /* Mobile: Default z-index (40) is fine, as Overlay (105) covers it. 
       Dropdown is Fixed (110) so it stays on top. */
    z-index: 40;
}



/* Right Menu Overlay */
.wizard-right-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.5);
    z-index: 105 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.wizard-right-menu-overlay.show,
.wizard-right-menu-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (min-width: 641px) {
    .wizard-right-menu-overlay {
        /* On desktop: hide overlay completely to allow clicking through to elements */
        /* Dropdown closing is handled by global JS click listener */
        display: none !important;
    }

    /* On Desktop, Navbar must be ABOVE overlay so dropdowns (which are inside) are clickable. */
    .wizard-navbar {
        z-index: 200 !important;
    }

    .wizard-right-menu-overlay.show,
    .wizard-right-menu-overlay.open {
        /* Still clickable on desktop */
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Tree Select */
.tree-select.open .tree-select-dropdown,
.tree-select.show .tree-select-dropdown {
    display: block !important;
}

/* Z-Index fixes */
/* Product menus - below navbar (z-index: 40) */
.pagination-per-page-menu,
.products-selection-menu,
.tree-select-dropdown {
    z-index: 30 !important;
}

/* Navbar dropdowns (notifications, user menu) - above overlay (z-index: 105) */
.wizard-dropdown-menu {
    z-index: 110 !important;
}

/* Step content needs position relative for overlay */
.step-content {
    position: relative;
}

/* Step Dropdown Overlay - for closing any dropdown by clicking outside */
.step-dropdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: transparent;
    cursor: default;
}

/* Pagination Overlay - for closing per-page menu by clicking outside */
.pagination-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
    cursor: default;
}

/* Pricing Rules Table Sorting */
.pricing-rules-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.pricing-rules-table th.sortable:hover {
    color: var(--foreground);
}

.pricing-rules-table th .sort-icon {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    opacity: 0.5;
}

.pricing-rules-table th.sorted-asc .sort-icon .sort-arrow-up,
.pricing-rules-table th.sorted-desc .sort-icon .sort-arrow-down {
    opacity: 1;
    stroke: var(--primary);
}

.pricing-rules-table th.sorted-asc .sort-icon,
.pricing-rules-table th.sorted-desc .sort-icon {
    opacity: 1;
}

/* Rules Filter Grid - 6 columns instead of 7 */
.pricing-rules-filters .products-filters-grid {
    grid-template-columns: repeat(6, 1fr);
}

.dialog-overlay,
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.dialog-overlay.show,
.profile-modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.dialog,
.profile-modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card-hover);
    z-index: 1051;
    max-width: 90vw;
}


/* ============================================
   17. Confirmation Dialog (Excerpt from styles.css)
   ============================================ */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: hsla(220, 20%, 10%, 0.5);
    backdrop-filter: blur(2px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.dialog-overlay.show {
    opacity: 1;
    visibility: visible;
}

.dialog {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 24rem;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.dialog-overlay.show .dialog {
    transform: scale(1);
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dialog-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.dialog-icon.dialog-icon-warning {
    background: hsla(38, 92%, 50%, 0.15);
    color: var(--warning);
}

.dialog-header-content {
    flex: 1;
}

.dialog-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.dialog-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.dialog-body {
    padding: 1.25rem;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.dialog-body::-webkit-scrollbar {
    width: 6px;
}

.dialog-body::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-body::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 10px;
    opacity: 0.5;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--muted);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/* Large dialog */
.dialog-large {
    max-width: 48rem;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog-xl {
    max-width: 72rem;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog-large .dialog-header, .dialog-xl .dialog-header {
    position: relative;
}

.dialog-close-btn {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.dialog-icon-primary {
    background: hsla(152, 55%, 40%, 0.15);
    color: var(--primary);
}

/* ============================================
   Profile Modal (Excerpt from styles.css)
   ============================================ */
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.profile-modal-overlay.show {
    display: flex;
}

.profile-modal {
    background: var(--card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.profile-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.profile-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.profile-modal-close {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--muted-foreground);
    transition: color 0.15s ease;
    border-radius: var(--radius);
}

.profile-modal-close:hover {
    color: var(--foreground);
    background: var(--muted);
}

.profile-modal-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.profile-modal-body {
    padding: 1.5rem;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 600;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.profile-email {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
}

.profile-form-group {
    margin-bottom: 1rem;
}

.profile-form-group:last-child {
    margin-bottom: 0;
}

.profile-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.375rem;
}

.profile-form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--foreground);
    transition: all 0.2s ease;
}

.profile-form-input:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px hsla(152, 55%, 40%, 0.1);
}

.profile-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--muted);
}

/* ============================================
   Token Purchase Dialog Packages (Excerpt from styles.css)
   ============================================ */
.token-packages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.token-package {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.token-package:hover {
    border-color: var(--primary);
}

.token-package.popular {
    border-color: var(--primary);
    background: hsla(152, 55%, 40%, 0.05);
}

.token-package.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px hsla(152, 55%, 40%, 0.2);
}

.token-package-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.token-package-amount-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.token-package-amount {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--foreground);
}

.token-package-popular-badge {
    font-size: 0.625rem;
    font-weight: 500;
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.token-package-rate {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.token-package-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
}

/* Linking Progress Animation (Step 4) */
.linking-progress-step.active .linking-progress-step-icon svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Spinner class for button icon */
.btn svg.spinner,
.spinner {
    animation: spin 1s linear infinite;
}

/* Progress container - hidden by default, show when Blazor renders it */
.linking-progress {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Progress steps layout */
.linking-progress-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual progress step */
.linking-progress-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

/* Active step - full opacity */
.linking-progress-step.active {
    opacity: 1;
}

/* Completed step - full opacity, no spinning */
.linking-progress-step.completed {
    opacity: 1;
}

.linking-progress-step.completed .linking-progress-step-icon {
    color: var(--primary);
}

.linking-progress-step.completed .linking-progress-step-icon svg {
    animation: none;
}

.linking-progress-step.completed .linking-progress-step-text {
    color: var(--foreground);
}

/* Progress step icon container */
.linking-progress-step-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.linking-progress-step-icon svg {
    width: 100%;
    height: 100%;
}

/* Active step - spinning icon and primary color */
.linking-progress-step.active .linking-progress-step-icon {
    color: var(--primary);
}

/* Progress step text */
.linking-progress-step-text {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.linking-progress-step.active .linking-progress-step-text {
    color: var(--foreground);
    font-weight: 500;
}

/* ============================================
   Missing Mapping Styles (from styles.css)
   ============================================ */
.mapping-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .mapping-grid {
        grid-template-columns: 1fr;
    }
}

.mapping-column {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.mapping-column-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mapping-search {
    width: 100%;
}

.mapping-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--foreground);
    transition: all 0.2s ease;
}

.mapping-search input:focus {
    outline: none;
    background: var(--card);
    border-color: var(--ring);
    box-shadow: 0 0 0 3px hsla(152, 55%, 40%, 0.1);
}

.mapping-search input::placeholder {
    color: var(--muted-foreground);
}

.mapping-tree-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-foreground);
    padding: 0;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mapping-tree-expand svg {
    width: 0.875rem;
    height: 0.875rem;
}

.mapping-tree-expand.expanded {
    transform: rotate(90deg);
}

.mapping-column-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mapping-column-title svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

.mapping-column-body {
    max-height: 400px;
    overflow-y: auto;
}

.mapping-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    padding: 2rem 0;
}

.mapping-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (max-width: 768px) {
    .mapping-arrow {
        transform: rotate(90deg);
        padding: 1rem 0;
    }
}

.mapping-tree-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mapping-tree-item:last-child {
    border-bottom: none;
}

.mapping-tree-item:hover {
    background: var(--secondary);
}

.mapping-tree-item.selected {
    background: hsla(152, 55%, 40%, 0.1);
}

.mapping-tree-item-radio {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.mapping-tree-item-label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mapping-tree-item-level-1 {
    padding-left: 0.75rem;
}

.mapping-tree-item-level-2 {
    padding-left: 1.5rem;
}

.mapping-tree-item-level-3 {
    padding-left: 2.25rem;
}

.mapping-tree-item-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-link-mapping {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-link-mapping:hover {
    background: hsl(152 55% 35%);
}

.btn-unlink-mapping {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--destructive);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-unlink-mapping:hover {
    background: hsl(0 72% 50%);
}

.mapping-linked-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: hsla(152, 55%, 40%, 0.15);
    color: var(--primary);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
}

.mapping-linked-badge svg {
    width: 0.625rem;
    height: 0.625rem;
}

/* ===========================================
   UNIFIED DATA TABLE STYLES
   Use .data-table class for consistent table styling
   across all pages (MyIntegrations, Step8, etc.)
   =========================================== */

.data-table-wrapper {
    overflow: visible;
}

/* Fix for hover background ruining rounded corners without using overflow: hidden */
.data-table thead tr:first-child th:first-child,
.data-table tbody tr:first-child td:first-child {
    border-top-left-radius: calc(var(--radius) - 1px);
}

.data-table thead tr:first-child th:last-child,
.data-table tbody tr:first-child td:last-child {
    border-top-right-radius: calc(var(--radius) - 1px);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    overflow: visible;
}

.data-table thead {
    background: var(--muted);
    border-bottom: 1px solid var(--border);
}

.data-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    vertical-align: middle;
    overflow: visible;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--muted);
}

/* Actions column - always right-aligned */
.data-table .th-actions,
.data-table .th-actions-right,
.data-table .td-actions,
.data-table .td-actions-right {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.data-table .td-actions .product-actions-dropdown,
.data-table .td-actions-right .product-actions-dropdown {
    justify-content: flex-end;
}

/* Checkbox column */
.data-table .th-checkbox,
.data-table .td-checkbox {
    width: 32px;
    padding: 0.75rem 0.5rem;
}

/* Sortable columns */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    color: var(--foreground);
}

.data-table th .sort-icon {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    opacity: 0.5;
}

.data-table th.sorted-asc .sort-icon .sort-arrow-up,
.data-table th.sorted-desc .sort-icon .sort-arrow-down {
    opacity: 1;
    stroke: var(--primary);
}

.data-table th.sorted-asc .sort-icon,
.data-table th.sorted-desc .sort-icon {
    opacity: 1;
}

/* Card Table - consistent card wrapper for tables */
.card-table {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: visible;
}

.card-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}

.card-table-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-table-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0;
}

.card-table-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
}

.card-table-body {
    overflow: visible;
}

.card-table-footer {
    padding: 0 1rem;
}

/* Ensure pagination inside card has proper styling */
.card-table .pricing-pagination {
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ===========================================
   DATA TABLE - MOBILE RESPONSIVE STYLES
   Card layout for tables on mobile devices
   =========================================== */

@media (max-width: 768px) {
    .data-table-wrapper {
        overflow: visible;
    }

    .data-table {
        display: block;
    }

    .data-table thead {
        display: none;
    }

    .data-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .data-table tr {
        display: flex;
        flex-direction: column;
        background: var(--card);
        border-radius: 0;
        padding: 0;
        border-bottom: 1px solid var(--border);
    }

    .data-table tbody tr:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-table td,
    .data-table tbody tr:last-child td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 1rem;
        border-bottom: none;
        font-size: 0.875rem;
    }

    .data-table td::before {
        content: attr(data-label) ":";
        font-weight: 400;
        font-size: 0.8125rem;
        text-transform: none;
        letter-spacing: normal;
        color: var(--muted-foreground);
        flex-shrink: 0;
        margin-right: 0.75rem;
        min-width: 100px;
    }

    /* Actions column on mobile - full width */
    .data-table .td-actions,
    .data-table .td-actions-right {
        width: 100%;
        justify-content: flex-end;
    }

    /* Card table mobile adjustments */
    .card-table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .card-table-title {
        font-size: 1.125rem;
    }

    .card-table-footer {
        padding: 0 0.5rem;
    }

    .card-table .pricing-pagination {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
    }
}

/* ===========================================
   DATA TABLE - TABLET RESPONSIVE STYLES
   Optimized layout for tablet devices (768px-1024px)
   =========================================== */

@media (min-width: 769px) and (max-width: 1024px) {

    .data-table th,
    .data-table td {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }

    .data-table th {
        font-size: 0.6875rem;
    }

    /* Hide less important columns on tablet if needed */
    .data-table .hide-tablet {
        display: none;
    }

    /* Card table tablet adjustments */
    .card-table-header {
        padding: 0.875rem 1rem;
    }

    .card-table-title {
        font-size: 1.125rem;
    }

    .card-table-subtitle {
        font-size: 0.8125rem;
    }

    /* Compact action buttons */
    .data-table .td-actions .btn,
    .data-table .td-actions-right .btn {
        padding: 0.375rem;
    }
}

/* Integration Price and Features Optimization */
.integration-price-display {
    background: var(--muted);
    border-radius: var(--radius);
    margin-top: 1rem;
    border: 1px solid var(--border);
}

.integration-price-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted-foreground);
    background: hsla(0, 0%, 100%, 0.02);
}

.integration-price-summary {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.integration-price-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.integration-price-icon {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 4px;
}

.integration-price-arrow {
    display: flex;
    gap: 2px;
    color: var(--primary);
    opacity: 0.6;
}

.integration-price-value {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.price-amount {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.price-period {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    margin-top: 2px;
}

.integration-features {
    padding: 0.75rem 1rem !important;
    margin-top: 0.75rem !important;
}

.integration-features ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.75rem;
    padding-left: 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

.integration-features li {
    font-size: 0.75rem !important;
    white-space: nowrap;
    color: var(--muted-foreground);
}

@media (max-width: 480px) {
    .integration-features ul {
        grid-template-columns: 1fr;
    }
}

/* Vertical Stepper (Timeline) UI */
.stepper-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    position: relative;
    max-width: 400px;
}

.step-v-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    min-height: 5rem;
}

/* Vertical Line */
.step-v-line {
    position: absolute;
    left: 1rem;
    top: 2rem;
    bottom: -2rem;
    width: 3px;
    background: var(--border);
    z-index: 1;
}

.step-v-item.completed .step-v-line {
    background: var(--primary);
}

.step-v-item:last-child .step-v-line {
    display: none;
}

/* Icon Container */
.step-v-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: var(--card);
}

/* Checkmark dot */
.step-v-check {
    width: 1.75rem;
    height: 1.75rem;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-foreground);
}

/* Pulsing (In Progress) dot - Double Circle */
.step-v-pulsing {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--primary);
    background: transparent;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-v-pulsing::after {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    background: var(--primary);
    border-radius: 50%;
    animation: step-v-pulse 2s infinite;
}

/* Empty/Active dot */
.step-v-empty {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--primary);
    background: transparent;
    border-radius: 50%;
}

/* Failed dot (red) */
.step-v-failed {
    width: 1.75rem;
    height: 1.75rem;
    background: var(--destructive);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px hsla(0, 84%, 60%, 0.3);
}

.step-v-failed svg {
    width: 1rem;
    height: 1rem;
}

/* Inactive dot (grey) */
.step-v-item:not(.completed):not(.active) .step-v-empty {
    border-color: var(--muted-foreground);
}

/* Labels */
.step-v-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: color 0.3s ease;
}

.step-v-item.completed .step-v-label {
    color: var(--primary);
}

.step-v-item.failed .step-v-icon {
    color: var(--destructive);
}

.step-v-item.failed .step-v-line {
    background: var(--destructive);
}

.step-v-item.failed .step-v-label {
    color: var(--destructive);
}

.step-v-item.active .step-v-label {
    color: var(--foreground);
    font-weight: 600;
}

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.8;
    }
}

.phase-duration {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    opacity: 0.7;
    margin-left: 0.5rem;
    font-family: var(--font-mono);
}

/* Skipped and Blocked States - Enterprise Additions */
.step-v-skipped {
    width: 1.75rem;
    height: 1.75rem;
    background: var(--muted);
    color: var(--muted-foreground);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
}

.step-v-blocked {
    width: 1.75rem;
    height: 1.75rem;
    background: hsla(38, 92%, 50%, 0.15);
    color: var(--warning);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--warning);
}

.phase-skipped-tag,
.phase-blocked-tag {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    letter-spacing: 0.025em;
    vertical-align: middle;
}

.phase-skipped-tag {
    background: var(--muted);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.phase-blocked-tag {
    background: hsla(38, 92%, 50%, 0.15);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.step-v-item.skipped .step-v-label {
    opacity: 0.6;
}

.step-v-item.blocked .step-v-label {
    color: var(--warning);
}

.step-v-item.skipped .step-v-line {
    background: var(--border);
    border-left: 2px dashed var(--border);
}

.step-v-item.blocked .step-v-line {
    background: var(--warning);
    opacity: 0.5;
}

.phase-message {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.125rem;
    font-weight: 400;
    max-width: 340px;
    line-height: 1.4;
}

.failed .phase-message {
    color: var(--destructive);
}

.active .phase-message {
    color: var(--primary);
}

/* Green icons for date/time inputs */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(56%) sepia(54%) saturate(497%) hue-rotate(96deg) brightness(94%) contrast(92%);
    cursor: pointer;
}

/* Responsive Layout Utilities */
.responsive-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .responsive-grid-3 {
        grid-template-columns: 1fr;
    }
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.condition-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 600px) {
    .condition-fields {
        grid-template-columns: 1fr;
    }
}

/* Lighter background for target type options */
.target-type-option {
    background: rgba(255, 255, 255, 0.06) !important;
}
.target-type-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}