/* MOB Smart Licenses - Modern Clean Frontend Styles */

/* =============================================================================
   CSS Custom Properties & Modern Design Tokens
   ============================================================================= */
:root {
    /* Modern Minimal Color Palette */
    --mob-primary: #1f2937;
    --mob-primary-hover: #111827;
    --mob-primary-light: #f8fafc;
    --mob-success: #059669;
    --mob-success-hover: #047857;
    --mob-success-light: #f0fdf4;
    --mob-warning: #d97706;
    --mob-warning-hover: #b45309;
    --mob-warning-light: #fffbeb;
    --mob-error: #dc2626;
    --mob-error-hover: #b91c1c;
    --mob-error-light: #fef2f2;
    
    /* Modern Neutral Grays */
    --mob-gray-50: #fafafa;
    --mob-gray-100: #f5f5f5;
    --mob-gray-200: #e5e5e5;
    --mob-gray-300: #d4d4d4;
    --mob-gray-400: #a3a3a3;
    --mob-gray-500: #737373;
    --mob-gray-600: #525252;
    --mob-gray-700: #404040;
    --mob-gray-800: #262626;
    --mob-gray-900: #171717;
    
    /* Modern Typography */
    --mob-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mob-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    
    /* Minimal Spacing Scale */
    --mob-space-1: 0.25rem;
    --mob-space-2: 0.5rem;
    --mob-space-3: 0.75rem;
    --mob-space-4: 1rem;
    --mob-space-5: 1.25rem;
    --mob-space-6: 1.5rem;
    --mob-space-8: 2rem;
    --mob-space-10: 2.5rem;
    --mob-space-12: 3rem;
    --mob-space-16: 4rem;
    --mob-space-20: 5rem;
    
    /* Minimal Border Radius */
    --mob-radius-xs: 0.125rem;
    --mob-radius-sm: 0.25rem;
    --mob-radius: 0.375rem;
    --mob-radius-md: 0.5rem;
    --mob-radius-lg: 0.75rem;
    --mob-radius-xl: 1rem;
    
    /* Subtle Modern Shadows */
    --mob-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --mob-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --mob-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --mob-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --mob-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* =============================================================================
   Base Styles & Mobile First Design
   ============================================================================= */
.mob-smart-licenses-checkout { 
    border: 1px solid var(--mob-gray-200); 
    padding: var(--mob-space-6); 
    border-radius: var(--mob-radius-lg); 
    background: white; 
    max-width: 100%; 
    margin: 0 auto;
    box-shadow: var(--mob-shadow-sm);
    font-family: var(--mob-font-family);
}

@media (min-width: 768px) {
    .mob-smart-licenses-checkout {
        max-width: 480px;
        padding: var(--mob-space-8);
    }
}

/* =============================================================================
   Messages & Notifications
   ============================================================================= */
.mob-sl-msg { 
    margin: var(--mob-space-4) 0; 
    padding: var(--mob-space-4); 
    border-left: 4px solid var(--mob-primary); 
    background: var(--mob-primary-light); 
    border-radius: var(--mob-radius); 
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: var(--mob-space-2);
    font-family: var(--mob-font-family);
    color: var(--mob-gray-700);
}

.mob-sl-msg.error { 
    border-color: var(--mob-error); 
    background: var(--mob-error-light); 
}

.mob-sl-msg.success { 
    border-color: var(--mob-success); 
    background: var(--mob-success-light); 
}

.mob-sl-msg.warning {
    border-color: var(--mob-warning);
    background: var(--mob-warning-light);
}

.mob-sl-msg.info {
    border-color: var(--mob-primary);
    background: var(--mob-primary-light);
}

/* =============================================================================
   Section Layout
   ============================================================================= */
.mob-sl-section {
    background: white;
    border-radius: var(--mob-radius-lg);
    box-shadow: var(--mob-shadow-sm);
    margin: 0 0 var(--mob-space-8) 0;
    overflow: hidden;
    border: 1px solid var(--mob-gray-100);
}

.mob-sl-section-header {
    padding: var(--mob-space-6);
    border-bottom: 1px solid var(--mob-gray-100);
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-4);
    background: var(--mob-gray-50);
}

@media (min-width: 768px) {
    .mob-sl-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.mob-sl-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--mob-gray-900);
    line-height: 1.3;
    font-family: var(--mob-font-family);
}

.mob-sl-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mob-space-2);
    align-items: center;
}

/* =============================================================================
   Grid System
   ============================================================================= */
.mob-sl-grid {
    display: grid;
    gap: var(--mob-space-6);
    padding: var(--mob-space-6);
}

.mob-sl-grid-responsive {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mob-sl-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .mob-sl-grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================================================
   Cards - Clean Flat Design
   ============================================================================= */
.mob-sl-card {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    padding: 0;
    transition: all 0.2s ease;
    overflow: hidden;
    box-shadow: var(--mob-shadow-xs);
}

.mob-sl-card:hover {
    box-shadow: var(--mob-shadow-md);
    transform: translateY(-1px);
    border-color: var(--mob-gray-300);
}

/* =============================================================================
   Modern Minimalist Dashboard
   ============================================================================= */
.mob-sl-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--mob-space-8);
    font-family: var(--mob-font-family);
    background: #ffffff;
    min-height: 100vh;
}

/* Clean Dashboard Header */
.mob-sl-dashboard-header {
    background: white;
    border-radius: var(--mob-radius-lg);
    margin-bottom: var(--mob-space-8);
    border: 1px solid var(--mob-gray-100);
}

.mob-sl-dashboard-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--mob-space-12) var(--mob-space-8) var(--mob-space-8);
    gap: var(--mob-space-6);
}

@media (max-width: 768px) {
    .mob-sl-dashboard-header-content {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: var(--mob-space-8) var(--mob-space-6);
    }
}

.mob-sl-dashboard-header-text {
    flex: 1;
}

.mob-sl-dashboard-title {
    margin: 0 0 var(--mob-space-2) 0;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--mob-gray-900);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

@media (max-width: 768px) {
    .mob-sl-dashboard-title {
        font-size: 1.875rem;
    }
}

.mob-sl-dashboard-subtitle {
    margin: 0;
    font-size: 1rem;
    color: var(--mob-gray-500);
    line-height: 1.5;
    font-weight: 400;
}

.mob-sl-dashboard-actions {
    display: flex;
    gap: var(--mob-space-3);
    align-items: center;
}

/* Minimal Stats Grid */
.mob-sl-dashboard-stats {
    padding: var(--mob-space-8) var(--mob-space-8) var(--mob-space-8);
    background: var(--mob-gray-50);
    border-top: 1px solid var(--mob-gray-100);
}

.mob-sl-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mob-space-6);
}

@media (min-width: 768px) {
    .mob-sl-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--mob-space-8);
    }
}

.mob-sl-stat-card {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    padding: var(--mob-space-6);
    transition: all 0.15s ease;
    position: relative;
}

.mob-sl-stat-card:hover {
    border-color: var(--mob-gray-300);
    transform: translateY(-1px);
    box-shadow: var(--mob-shadow-sm);
}

.mob-sl-stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mob-sl-stat-number {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--mob-space-2);
    color: var(--mob-gray-900);
}

@media (min-width: 768px) {
    .mob-sl-stat-number {
        font-size: 2.5rem;
    }
}

.mob-sl-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mob-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Remove decorative icons and colors - keep minimal */
.mob-sl-stat-icon {
    display: none;
}

/* Subtle color accents only */
.mob-sl-stat-card.mod-bundles .mob-sl-stat-number {
    color: var(--mob-primary);
}

.mob-sl-stat-card.mod-licenses .mob-sl-stat-number {
    color: var(--mob-success);
}

.mob-sl-stat-card.mod-active .mob-sl-stat-number {
    color: var(--mob-success);
}

.mob-sl-stat-card.mod-usage .mob-sl-stat-number {
    color: var(--mob-warning);
}

/* Modern Minimal Navigation */
.mob-sl-dashboard-nav {
    margin-bottom: var(--mob-space-8);
}

.mob-sl-nav-tabs {
    display: flex;
    gap: 0;
    background: white;
    border-radius: var(--mob-radius-lg);
    padding: var(--mob-space-1);
    border: 1px solid var(--mob-gray-200);
    overflow: hidden;
}

@media (max-width: 768px) {
    .mob-sl-nav-tabs {
        flex-wrap: wrap;
        gap: var(--mob-space-1);
    }
}

.mob-sl-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mob-space-2);
    padding: var(--mob-space-4) var(--mob-space-5);
    border: none;
    border-radius: var(--mob-radius);
    background: transparent;
    color: var(--mob-gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

@media (max-width: 768px) {
    .mob-sl-nav-tab {
        flex: 1 1 auto;
        min-width: 120px;
        font-size: 0.8125rem;
        padding: var(--mob-space-3) var(--mob-space-4);
    }
}

.mob-sl-nav-tab:hover {
    background: var(--mob-gray-50);
    color: var(--mob-gray-900);
}

.mob-sl-nav-tab-active,
.mob-sl-nav-tab[aria-selected="true"] {
    background: var(--mob-gray-900);
    color: white;
}

/* Remove decorative icons */
.mob-sl-nav-icon {
    display: none;
}

.mob-sl-nav-badge {
    background: var(--mob-gray-100);
    color: var(--mob-gray-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    line-height: 1;
    margin-left: var(--mob-space-2);
}

.mob-sl-nav-tab-active .mob-sl-nav-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Clean Tab Content */
.mob-sl-dashboard-content {
    background: transparent;
}

.mob-sl-tab-content {
    display: none;
}

.mob-sl-tab-content.mob-sl-tab-active {
    display: block;
}

/* Overview Tab Styles */
.mob-sl-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-6);
}

@media (min-width: 768px) {
    .mob-sl-overview-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mob-sl-overview-card {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    box-shadow: var(--mob-shadow-sm);
    overflow: hidden;
}

.mob-sl-card-full-width {
    grid-column: 1 / -1;
}

.mob-sl-card-header {
    padding: var(--mob-space-6) var(--mob-space-6) var(--mob-space-4);
    border-bottom: 1px solid var(--mob-gray-100);
    background: var(--mob-gray-50);
}

.mob-sl-card-title {
    margin: 0 0 var(--mob-space-2) 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mob-gray-900);
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
}

.mob-sl-card-icon {
    font-size: 20px;
}

.mob-sl-card-description {
    margin: 0;
    font-size: 14px;
    color: var(--mob-gray-600);
    line-height: 1.5;
}

.mob-sl-card-body {
    padding: var(--mob-space-6);
}

/* =============================================================================
   Modern Cards & Layout
   ============================================================================= */
.mob-sl-card {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    transition: all 0.15s ease;
    overflow: hidden;
}

.mob-sl-card:hover {
    border-color: var(--mob-gray-300);
    transform: translateY(-1px);
    box-shadow: var(--mob-shadow-sm);
}

/* Overview Grid - Minimal Layout */
.mob-sl-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-8);
}

@media (min-width: 768px) {
    .mob-sl-overview-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mob-sl-overview-card {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    overflow: hidden;
}

.mob-sl-card-full-width {
    grid-column: 1 / -1;
}

.mob-sl-card-header {
    padding: var(--mob-space-8) var(--mob-space-8) var(--mob-space-6);
    border-bottom: 1px solid var(--mob-gray-100);
    background: var(--mob-gray-50);
}

.mob-sl-card-title {
    margin: 0 0 var(--mob-space-2) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mob-gray-900);
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
}

/* Remove decorative icons */
.mob-sl-card-icon {
    display: none;
}

.mob-sl-card-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mob-gray-600);
    line-height: 1.5;
}

.mob-sl-card-body {
    padding: var(--mob-space-8);
}

.mob-sl-form-header {
    margin: 0 0 var(--mob-space-5) 0;
}

.mob-sl-form-title {
    margin: 0 0 var(--mob-space-2) 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mob-gray-900);
    font-family: var(--mob-font-family);
}

.mob-sl-form-description {
    margin: 0;
    font-size: 14px;
    color: var(--mob-gray-600);
    line-height: 1.5;
    font-family: var(--mob-font-family);
}

.mob-sl-form-group {
    margin-bottom: var(--mob-space-5);
}

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

.mob-sl-label {
    display: block;
    margin-bottom: var(--mob-space-2);
    font-weight: 500;
    font-size: 14px;
    color: var(--mob-gray-700);
    font-family: var(--mob-font-family);
}

.mob-sl-input,
.mob-sl-select,
.mob-sl-textarea {
    width: 100%;
    padding: var(--mob-space-3) var(--mob-space-4);
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    background: white;
    font-family: var(--mob-font-family);
    color: var(--mob-gray-700);
}

.mob-sl-input:focus,
.mob-sl-select:focus,
.mob-sl-textarea:focus {
    outline: none;
    border-color: var(--mob-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.mob-sl-input.error,
.mob-sl-select.error,
.mob-sl-textarea.error {
    border-color: var(--mob-error);
}

.mob-sl-select-small {
    padding: var(--mob-space-2) var(--mob-space-3);
    font-size: 13px;
    min-width: 120px;
}

.mob-sl-form-row {
    display: grid;
    gap: var(--mob-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mob-sl-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.mob-sl-form-row.mob-sl-form-row-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mob-sl-form-row.mob-sl-form-row-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.mob-sl-field-error {
    margin-top: var(--mob-space-1);
    font-size: 12px;
    color: var(--mob-error);
    font-family: var(--mob-font-family);
}

/* =============================================================================
   Buttons - Modern Flat Design
   ============================================================================= */
.mob-sl-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mob-space-2);
    padding: var(--mob-space-3) var(--mob-space-5);
    border: 2px solid transparent;
    border-radius: var(--mob-radius);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
    font-family: var(--mob-font-family);
    background: none;
}

.mob-sl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.mob-sl-btn-primary {
    background: var(--mob-primary);
    color: white;
    border-color: var(--mob-primary);
}

.mob-sl-btn-primary:hover:not(:disabled) {
    background: var(--mob-primary-hover);
    border-color: var(--mob-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--mob-shadow-md);
}

.mob-sl-btn-secondary {
    background: var(--mob-gray-600);
    color: white;
    border-color: var(--mob-gray-600);
}

.mob-sl-btn-secondary:hover:not(:disabled) {
    background: var(--mob-gray-700);
    border-color: var(--mob-gray-700);
    transform: translateY(-1px);
}

.mob-sl-btn-outline {
    background: white;
    color: var(--mob-primary);
    border-color: var(--mob-primary);
}

.mob-sl-btn-outline:hover:not(:disabled) {
    background: var(--mob-primary);
    color: white;
    transform: translateY(-1px);
}

.mob-sl-btn-ghost {
    background: transparent;
    color: var(--mob-gray-600);
    border-color: transparent;
    padding: var(--mob-space-2) var(--mob-space-3);
}

.mob-sl-btn-ghost:hover:not(:disabled) {
    background: var(--mob-gray-100);
    color: var(--mob-gray-900);
}

.mob-sl-btn-small {
    padding: var(--mob-space-2) var(--mob-space-3);
    font-size: 13px;
}

.mob-sl-btn-large {
    padding: var(--mob-space-4) var(--mob-space-8);
    font-size: 16px;
}

.mob-sl-btn-icon {
    font-size: 16px;
}

.mob-sl-btn-full {
    width: 100%;
    justify-content: center;
}

/* =============================================================================
   Modern Minimal Buttons
   ============================================================================= */
.mob-sl-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mob-space-2);
    padding: var(--mob-space-3) var(--mob-space-6);
    border: 1px solid transparent;
    border-radius: var(--mob-radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.25;
    position: relative;
    overflow: hidden;
    font-family: var(--mob-font-family);
    background: none;
}

.mob-sl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.mob-sl-btn-primary {
    background: var(--mob-gray-900);
    color: white;
    border-color: var(--mob-gray-900);
}

.mob-sl-btn-primary:hover:not(:disabled) {
    background: var(--mob-gray-800);
    border-color: var(--mob-gray-800);
    transform: translateY(-1px);
    box-shadow: var(--mob-shadow-sm);
}

.mob-sl-btn-secondary {
    background: white;
    color: var(--mob-gray-700);
    border-color: var(--mob-gray-300);
}

.mob-sl-btn-secondary:hover:not(:disabled) {
    background: var(--mob-gray-50);
    border-color: var(--mob-gray-400);
    transform: translateY(-1px);
}

.mob-sl-btn-outline {
    background: white;
    color: var(--mob-gray-700);
    border-color: var(--mob-gray-300);
}

.mob-sl-btn-outline:hover:not(:disabled) {
    background: var(--mob-gray-50);
    border-color: var(--mob-gray-400);
    transform: translateY(-1px);
}

.mob-sl-btn-ghost {
    background: transparent;
    color: var(--mob-gray-600);
    border-color: transparent;
    padding: var(--mob-space-2) var(--mob-space-4);
}

.mob-sl-btn-ghost:hover:not(:disabled) {
    background: var(--mob-gray-100);
    color: var(--mob-gray-900);
}

.mob-sl-btn-small {
    padding: var(--mob-space-2) var(--mob-space-4);
    font-size: 0.8125rem;
}

.mob-sl-btn-large {
    padding: var(--mob-space-4) var(--mob-space-8);
    font-size: 1rem;
}

/* Remove decorative icons from buttons */
.mob-sl-btn-icon {
    display: none;
}

/* Progress Bars */
.mob-sl-progress-item {
    margin-bottom: var(--mob-space-4);
}

.mob-sl-progress-item:last-child {
    margin-bottom: 0;
}

.mob-sl-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--mob-space-2);
}

.mob-sl-progress-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--mob-gray-700);
}

.mob-sl-progress-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--mob-gray-900);
}

.mob-sl-progress-bar {
    height: 8px;
    background: var(--mob-gray-200);
    border-radius: var(--mob-radius-sm);
    overflow: hidden;
}

.mob-sl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mob-primary), var(--mob-primary-hover));
    transition: width 0.3s ease;
}

/* Activity List */
.mob-sl-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-3);
}

.mob-sl-activity-item {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3);
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    transition: all 0.2s ease;
}

.mob-sl-activity-item:hover {
    border-color: var(--mob-gray-300);
    box-shadow: var(--mob-shadow-xs);
}

.mob-sl-activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mob-primary-light);
    border-radius: var(--mob-radius);
    font-size: 16px;
}

.mob-sl-activity-content {
    flex: 1;
}

.mob-sl-activity-text {
    font-size: 14px;
    color: var(--mob-gray-700);
    margin-bottom: var(--mob-space-1);
}

.mob-sl-activity-time {
    font-size: 12px;
    color: var(--mob-gray-500);
}

.mob-sl-activity-status {
    display: flex;
    align-items: center;
}

/* Status Badges */
.mob-sl-status-badge {
    padding: var(--mob-space-1) var(--mob-space-2);
    border-radius: var(--mob-radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mob-sl-status-badge.mod-active {
    background: var(--mob-success-light);
    color: var(--mob-success-hover);
}

.mob-sl-status-badge.mod-inactive {
    background: var(--mob-gray-100);
    color: var(--mob-gray-600);
}

.mob-sl-status-badge.mod-expired {
    background: var(--mob-error-light);
    color: var(--mob-error-hover);
}

/* Modern Quick Actions */
.mob-sl-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-4);
}

@media (min-width: 768px) {
    .mob-sl-quick-actions {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--mob-space-6);
    }
}

.mob-sl-quick-action-btn {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    padding: var(--mob-space-6);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    display: block;
    width: 100%;
}

.mob-sl-quick-action-btn:hover {
    border-color: var(--mob-gray-300);
    box-shadow: var(--mob-shadow-sm);
    transform: translateY(-1px);
}

/* Remove decorative icons */
.mob-sl-quick-action-icon {
    display: none;
}

.mob-sl-quick-action-content {
    width: 100%;
}

.mob-sl-quick-action-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mob-gray-900);
    margin-bottom: var(--mob-space-2);
}

.mob-sl-quick-action-desc {
    font-size: 0.875rem;
    color: var(--mob-gray-600);
    line-height: 1.5;
}

/* Section Headers */
.mob-sl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mob-space-6);
    gap: var(--mob-space-4);
}

@media (max-width: 768px) {
    .mob-sl-section-header {
        flex-direction: column;
        align-items: stretch;
    }
}

.mob-sl-section-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--mob-gray-900);
}

.mob-sl-section-actions {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
}

/* View Toggle */
.mob-sl-view-toggle {
    display: flex;
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    overflow: hidden;
}

.mob-sl-toggle-btn {
    background: white;
    border: none;
    padding: var(--mob-space-2) var(--mob-space-3);
    cursor: pointer;
    color: var(--mob-gray-600);
    font-size: 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-sl-toggle-btn:hover {
    background: var(--mob-gray-100);
    color: var(--mob-gray-900);
}

.mob-sl-toggle-btn.mob-sl-toggle-active {
    background: var(--mob-primary);
    color: white;
}

/* Search and Filter */
.mob-sl-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.mob-sl-search-input {
    width: 250px;
    padding: var(--mob-space-2) var(--mob-space-4) var(--mob-space-2) var(--mob-space-10);
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

@media (max-width: 768px) {
    .mob-sl-search-input {
        width: 100%;
    }
}

.mob-sl-search-input:focus {
    outline: none;
    border-color: var(--mob-primary);
}

.mob-sl-search-icon {
    position: absolute;
    left: var(--mob-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--mob-gray-400);
    pointer-events: none;
}

.mob-sl-filter-dropdown {
    position: relative;
}

.mob-sl-filter-select {
    padding: var(--mob-space-2) var(--mob-space-4);
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.mob-sl-filter-select:focus {
    outline: none;
    border-color: var(--mob-primary);
}

/* Form Enhancements */
.mob-sl-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-5);
}

@media (min-width: 768px) {
    .mob-sl-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mob-sl-form-grid.mob-sl-form-grid-cols-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mob-sl-form-grid.mob-sl-form-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mob-sl-form-group {
    display: flex;
    flex-direction: column;
}

.mob-sl-form-label {
    margin-bottom: var(--mob-space-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--mob-gray-700);
}

.mob-sl-form-optional {
    font-weight: 400;
    color: var(--mob-gray-500);
    font-size: 13px;
}

.mob-sl-form-input,
.mob-sl-form-select {
    padding: var(--mob-space-3) var(--mob-space-4);
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: white;
}

.mob-sl-form-input:focus,
.mob-sl-form-select:focus {
    outline: none;
    border-color: var(--mob-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.mob-sl-form-hint {
    margin-top: var(--mob-space-1);
    font-size: 13px;
    color: var(--mob-gray-500);
    line-height: 1.4;
}

.mob-sl-form-actions {
    margin-top: var(--mob-space-6);
    display: flex;
    justify-content: flex-start;
    gap: var(--mob-space-3);
}

/* =============================================================================
   Settings Tab Components
   ============================================================================= */
.mob-sl-settings-sections {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-8);
}

.mob-sl-settings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-6);
}

.mob-sl-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--mob-space-5) 0;
    border-bottom: 1px solid var(--mob-gray-100);
}

.mob-sl-setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mob-sl-setting-label {
    flex: 1;
    margin-right: var(--mob-space-6);
}

.mob-sl-setting-label strong {
    color: var(--mob-gray-900);
    font-weight: 600;
    font-size: 14px;
}

.mob-sl-setting-description {
    margin: var(--mob-space-1) 0 0 0;
    font-size: 13px;
    color: var(--mob-gray-600);
    line-height: 1.4;
}

.mob-sl-setting-value {
    color: var(--mob-gray-700);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

/* Checkbox Groups */
.mob-sl-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-3);
    margin-top: var(--mob-space-2);
}

.mob-sl-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    cursor: pointer;
    padding: var(--mob-space-2) 0;
}

.mob-sl-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--mob-gray-300);
    border-radius: var(--mob-radius-sm);
    background: white;
    cursor: pointer;
    margin: 0;
}

.mob-sl-checkbox-item input[type="checkbox"]:checked {
    background: var(--mob-primary);
    border-color: var(--mob-primary);
}

.mob-sl-checkbox-text {
    font-size: 14px;
    color: var(--mob-gray-700);
    cursor: pointer;
}

/* Subscription Management */
.mob-sl-subscription-list {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-4);
}

.mob-sl-subscription-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mob-space-5);
    background: var(--mob-gray-50);
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius);
    transition: all 0.15s ease;
}

.mob-sl-subscription-item:hover {
    border-color: var(--mob-gray-300);
    background: white;
}

.mob-sl-subscription-info {
    flex: 1;
}

.mob-sl-subscription-name {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    margin-bottom: var(--mob-space-2);
}

.mob-sl-subscription-name strong {
    font-size: 16px;
    color: var(--mob-gray-900);
    font-weight: 600;
}

.mob-sl-subscription-details {
    display: flex;
    gap: var(--mob-space-6);
}

.mob-sl-subscription-stat {
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
}

.mob-sl-stat-label {
    font-size: 13px;
    color: var(--mob-gray-600);
}

.mob-sl-stat-value {
    font-size: 13px;
    color: var(--mob-gray-800);
    font-weight: 500;
}

.mob-sl-subscription-actions {
    display: flex;
    gap: var(--mob-space-2);
    flex-shrink: 0;
}

/* =============================================================================
   Enhanced Subscription Management
   ============================================================================= */
.mob-sl-subscriptions-list {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-6);
}

.mob-sl-subscription-card {
    background: white;
    border: 1px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-lg);
    transition: all 0.15s ease;
    overflow: hidden;
}

.mob-sl-subscription-card:hover {
    border-color: var(--mob-gray-300);
    box-shadow: var(--mob-shadow-sm);
}

.mob-sl-subscription-main {
    display: flex;
    align-items: flex-start;
    gap: var(--mob-space-6);
    padding: var(--mob-space-6);
}

.mob-sl-subscription-info {
    flex: 1;
    min-width: 0;
}

.mob-sl-subscription-header {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    margin-bottom: var(--mob-space-4);
}

.mob-sl-subscription-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mob-gray-900);
}

.mob-sl-subscription-pricing {
    display: flex;
    align-items: baseline;
    gap: var(--mob-space-1);
    margin-bottom: var(--mob-space-4);
}

.mob-sl-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--mob-primary);
    line-height: 1;
}

.mob-sl-billing-cycle {
    font-size: 14px;
    color: var(--mob-gray-600);
    font-weight: 500;
}

.mob-sl-subscription-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-3);
}

@media (min-width: 640px) {
    .mob-sl-subscription-meta {
        grid-template-columns: 1fr 1fr;
    }
}

.mob-sl-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-1);
}

.mob-sl-meta-label {
    font-size: 12px;
    color: var(--mob-gray-500);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.025em;
}

.mob-sl-meta-value {
    font-size: 14px;
    color: var(--mob-gray-900);
    font-weight: 500;
}

.mob-sl-meta-value code {
    background: var(--mob-gray-100);
    padding: var(--mob-space-1) var(--mob-space-2);
    border-radius: var(--mob-radius-sm);
    font-family: var(--mob-font-mono);
    font-size: 12px;
    color: var(--mob-gray-700);
}

.mob-sl-subscription-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-2);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .mob-sl-subscription-actions {
        flex-direction: row;
        align-items: flex-start;
    }
}

.mob-sl-action-group {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-2);
}

@media (min-width: 640px) {
    .mob-sl-action-group {
        flex-direction: row;
    }
}

.mob-sl-btn-danger {
    color: var(--mob-error);
    border-color: transparent;
}

.mob-sl-btn-danger:hover {
    background: var(--mob-error);
    color: white;
}

/* Subscription Bundles */
.mob-sl-subscription-bundles {
    border-top: 1px solid var(--mob-gray-100);
    padding: var(--mob-space-6);
    background: var(--mob-gray-50);
}

.mob-sl-bundles-title {
    margin: 0 0 var(--mob-space-4) 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--mob-gray-700);
}

.mob-sl-bundles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-4);
}

@media (min-width: 640px) {
    .mob-sl-bundles-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .mob-sl-bundles-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.mob-sl-bundle-summary {
    background: white;
    padding: var(--mob-space-4);
    border-radius: var(--mob-radius);
    border: 1px solid var(--mob-gray-200);
}

.mob-sl-bundle-usage {
    margin-bottom: var(--mob-space-3);
}

.mob-sl-usage-bar {
    width: 100%;
    height: 6px;
    background: var(--mob-gray-200);
    border-radius: var(--mob-radius-sm);
    overflow: hidden;
    margin-bottom: var(--mob-space-2);
}

.mob-sl-usage-fill {
    height: 100%;
    background: var(--mob-primary);
    border-radius: var(--mob-radius-sm);
    transition: width 0.3s ease;
}

.mob-sl-usage-text {
    display: flex;
    align-items: center;
    gap: var(--mob-space-1);
    font-size: 12px;
}

.mob-sl-used {
    font-weight: 600;
    color: var(--mob-primary);
}

.mob-sl-separator {
    color: var(--mob-gray-400);
}

.mob-sl-quota {
    font-weight: 500;
    color: var(--mob-gray-600);
}

.mob-sl-label {
    color: var(--mob-gray-500);
    margin-left: var(--mob-space-2);
}

.mob-sl-bundle-expiry {
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
    margin-bottom: var(--mob-space-3);
    font-size: 12px;
}

.mob-sl-expiry-label {
    color: var(--mob-gray-500);
    font-weight: 500;
}

.mob-sl-expiry-date {
    color: var(--mob-gray-700);
    font-weight: 600;
}

.mob-sl-btn-xs {
    padding: var(--mob-space-1) var(--mob-space-2);
    font-size: 11px;
    font-weight: 500;
}

/* Support Grid */
.mob-sl-support-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-6);
}

@media (min-width: 768px) {
    .mob-sl-support-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.mob-sl-support-item {
    text-align: center;
    padding: var(--mob-space-6);
    background: var(--mob-gray-50);
    border-radius: var(--mob-radius);
    border: 1px solid var(--mob-gray-200);
    transition: all 0.15s ease;
}

.mob-sl-support-item:hover {
    background: white;
    border-color: var(--mob-primary);
    transform: translateY(-1px);
}

.mob-sl-support-icon {
    font-size: 32px;
    margin-bottom: var(--mob-space-4);
    display: block;
}

.mob-sl-support-title {
    margin: 0 0 var(--mob-space-2) 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mob-gray-900);
}

.mob-sl-support-description {
    margin: 0 0 var(--mob-space-4) 0;
    font-size: 14px;
    color: var(--mob-gray-600);
    line-height: 1.5;
}

.mob-sl-support-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mob-space-1);
    color: var(--mob-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease;
}

.mob-sl-support-link:hover {
    color: var(--mob-primary-dark);
    text-decoration: none;
}

/* Generate Sections */
.mob-sl-generate-sections {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-8);
}

/* Modern Empty States */
.mob-sl-empty-state {
    text-align: center;
    padding: var(--mob-space-16) var(--mob-space-8);
    background: white;
    border-radius: var(--mob-radius-lg);
    border: 1px solid var(--mob-gray-200);
    margin: var(--mob-space-8) 0;
}

.mob-sl-empty-state-small {
    padding: var(--mob-space-12) var(--mob-space-6);
    margin: 0;
}

/* Remove decorative icons */
.mob-sl-empty-icon {
    display: none;
}

.mob-sl-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mob-gray-900);
    margin: 0 0 var(--mob-space-4) 0;
}

.mob-sl-empty-message {
    font-size: 1rem;
    color: var(--mob-gray-600);
    margin: 0 0 var(--mob-space-2) 0;
    line-height: 1.5;
}

.mob-sl-empty-hint {
    font-size: 0.875rem;
    color: var(--mob-gray-500);
    margin: 0 0 var(--mob-space-6) 0;
    line-height: 1.5;
}

.mob-sl-empty-actions {
    display: flex;
    justify-content: center;
    gap: var(--mob-space-3);
}

/* Modal Styles */
.mob-sl-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mob-sl-modal.mob-sl-modal-active {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when modal is open */
body.mob-sl-modal-open {
    overflow: hidden;
}

.mob-sl-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.mob-sl-modal-container {
    position: relative;
    background: white;
    border-radius: var(--mob-radius-lg);
    box-shadow: var(--mob-shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.mob-sl-modal.mob-sl-modal-active .mob-sl-modal-container {
    transform: scale(1);
}

.mob-sl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mob-space-6);
    border-bottom: 1px solid var(--mob-gray-200);
    background: var(--mob-gray-50);
}

.mob-sl-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mob-gray-900);
}

.mob-sl-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--mob-gray-500);
    cursor: pointer;
    padding: var(--mob-space-1);
    border-radius: var(--mob-radius);
    transition: all 0.2s ease;
}

.mob-sl-modal-close:hover {
    background: var(--mob-gray-200);
    color: var(--mob-gray-900);
}

.mob-sl-modal-body {
    padding: var(--mob-space-6);
    overflow-y: auto;
    max-height: 60vh;
}

.mob-sl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--mob-space-3);
    padding: var(--mob-space-6);
    border-top: 1px solid var(--mob-gray-200);
    background: var(--mob-gray-50);
}

.mob-sl-modal-empty {
    text-align: center;
    padding: var(--mob-space-6);
}

.mob-sl-modal-empty p {
    margin: 0;
    color: var(--mob-gray-600);
}

/* =============================================================================
   Bundle Cards - Clean Design
   ============================================================================= */
.mob-sl-bundle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mob-sl-bundle-active {
    border-left: 4px solid var(--mob-success);
}

.mob-sl-bundle-expired {
    border-left: 4px solid var(--mob-error);
    opacity: 0.8;
}

.mob-sl-bundle-header {
    padding: var(--mob-space-5);
    border-bottom: 1px solid var(--mob-gray-100);
    background: var(--mob-gray-50);
}

.mob-sl-bundle-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mob-space-3);
    margin-bottom: var(--mob-space-2);
}

.mob-sl-bundle-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mob-gray-900);
    line-height: 1.3;
    font-family: var(--mob-font-family);
}

.mob-sl-bundle-software {
    margin: 0;
    font-size: 13px;
    color: var(--mob-gray-500);
    font-style: italic;
    font-family: var(--mob-font-family);
}

.mob-sl-bundle-quota {
    padding: var(--mob-space-4) var(--mob-space-5);
    flex-grow: 1;
}

.mob-sl-quota-info {
    display: flex;
    align-items: baseline;
    gap: var(--mob-space-1);
    margin-bottom: var(--mob-space-3);
}

.mob-sl-quota-used {
    font-size: 24px;
    font-weight: 700;
    color: var(--mob-gray-900);
    font-family: var(--mob-font-family);
}

.mob-sl-quota-separator {
    font-size: 18px;
    color: var(--mob-gray-400);
    margin: 0 var(--mob-space-1);
}

.mob-sl-quota-total {
    font-size: 18px;
    font-weight: 500;
    color: var(--mob-gray-600);
}

.mob-sl-quota-label {
    font-size: 13px;
    color: var(--mob-gray-500);
    margin-left: var(--mob-space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--mob-font-family);
}

.mob-sl-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--mob-gray-100);
    border-radius: var(--mob-radius-sm);
    overflow: hidden;
    margin: var(--mob-space-2) 0;
}

.mob-sl-progress-fill {
    height: 100%;
    background: var(--mob-success);
    border-radius: var(--mob-radius-sm);
    transition: width 0.3s ease;
}

.mob-sl-progress-fill.mob-sl-progress-low {
    background: var(--mob-warning);
}

.mob-sl-progress-fill.mob-sl-progress-full {
    background: var(--mob-error);
}

.mob-sl-progress-small {
    height: 4px;
    margin: var(--mob-space-1) 0;
}

.mob-sl-quota-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mob-sl-quota-remaining {
    font-weight: 500;
    font-family: var(--mob-font-family);
}

.mob-sl-quota-percentage {
    color: var(--mob-gray-500);
    font-weight: 500;
}

.mob-sl-bundle-footer {
    padding: var(--mob-space-4) var(--mob-space-5);
    border-top: 1px solid var(--mob-gray-100);
    background: white;
}

.mob-sl-bundle-meta {
    margin-bottom: var(--mob-space-3);
}

.mob-sl-bundle-expiry {
    font-size: 13px;
    color: var(--mob-gray-500);
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
    font-family: var(--mob-font-family);
}

.mob-sl-meta-icon {
    font-size: 14px;
    color: var(--mob-gray-400);
}

.mob-sl-bundle-actions {
    display: flex;
    gap: var(--mob-space-2);
}

/* =============================================================================
   License Cards - Clean Design
   ============================================================================= */
.mob-sl-license-card {
    display: flex;
    flex-direction: column;
}

.mob-sl-license-active {
    border-left: 4px solid var(--mob-success);
}

.mob-sl-license-expired {
    border-left: 4px solid var(--mob-error);
    opacity: 0.8;
}

.mob-sl-license-suspended {
    border-left: 4px solid var(--mob-warning);
    opacity: 0.9;
}

.mob-sl-license-header {
    padding: var(--mob-space-5);
    border-bottom: 1px solid var(--mob-gray-100);
    background: var(--mob-gray-50);
}

.mob-sl-license-title {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    margin-bottom: var(--mob-space-2);
}

.mob-sl-license-key {
    font-family: var(--mob-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--mob-gray-900);
    margin: 0;
    word-break: break-all;
    flex-grow: 1;
}

.mob-sl-copy-btn {
    background: white;
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-sm);
    padding: var(--mob-space-2);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--mob-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mob-sl-copy-btn:hover {
    background: var(--mob-gray-50);
    border-color: var(--mob-gray-300);
    color: var(--mob-gray-700);
    transform: translateY(-1px);
}

.mob-sl-copy-btn.success {
    background: var(--mob-success-light);
    border-color: var(--mob-success);
    color: var(--mob-success);
}

.mob-sl-copy-btn-small {
    padding: var(--mob-space-1);
    font-size: 12px;
}

.mob-sl-license-details {
    padding: var(--mob-space-4) var(--mob-space-5);
    flex-grow: 1;
}

.mob-sl-license-meta {
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
    margin-bottom: var(--mob-space-3);
    font-size: 13px;
}

.mob-sl-license-meta:last-child {
    margin-bottom: 0;
}

.mob-sl-meta-label {
    color: var(--mob-gray-500);
    font-weight: 500;
    min-width: 70px;
    font-family: var(--mob-font-family);
}

.mob-sl-meta-value {
    color: var(--mob-gray-700);
    flex-grow: 1;
    font-family: var(--mob-font-family);
}

.mob-sl-days-remaining {
    color: var(--mob-gray-500);
    font-style: italic;
}

.mob-sl-license-footer {
    padding: var(--mob-space-4) var(--mob-space-5);
    border-top: 1px solid var(--mob-gray-100);
    background: white;
}

.mob-sl-license-actions {
    display: flex;
    gap: var(--mob-space-2);
    flex-wrap: wrap;
}

/* =============================================================================
   Badges & Status - Flat Colors
   ============================================================================= */
.mob-sl-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--mob-space-1) var(--mob-space-3);
    border-radius: var(--mob-radius-xl);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    font-family: var(--mob-font-family);
}

.mob-sl-badge-active {
    background: var(--mob-success-light);
    color: var(--mob-success);
}

.mob-sl-badge-expired {
    background: var(--mob-error-light);
    color: var(--mob-error);
}

.mob-sl-badge-suspended {
    background: var(--mob-warning-light);
    color: var(--mob-warning);
}

.mob-sl-badge-pending {
    background: var(--mob-primary-light);
    color: var(--mob-primary);
}

/* =============================================================================
   Tables - Clean Modern Design
   ============================================================================= */
.mob-sl-table-responsive {
    padding: var(--mob-space-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mob-sl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
    font-family: var(--mob-font-family);
}

.mob-sl-table-enhanced {
    border-radius: var(--mob-radius-lg);
    overflow: hidden;
    box-shadow: var(--mob-shadow-sm);
    border: 1px solid var(--mob-gray-200);
}

.mob-sl-table th {
    background: var(--mob-gray-50);
    color: var(--mob-gray-900);
    font-weight: 600;
    text-align: left;
    padding: var(--mob-space-4);
    border-bottom: 2px solid var(--mob-gray-200);
    white-space: nowrap;
    font-family: var(--mob-font-family);
}

.mob-sl-table td {
    padding: var(--mob-space-4);
    border-bottom: 1px solid var(--mob-gray-100);
    vertical-align: middle;
    color: var(--mob-gray-700);
}

.mob-sl-table tr:last-child td {
    border-bottom: none;
}

.mob-sl-table tr:hover {
    background: var(--mob-gray-50);
}

.mob-sl-table-actions {
    width: 1%;
    white-space: nowrap;
}

.mob-sl-action-buttons {
    display: flex;
    gap: var(--mob-space-2);
}

.mob-sl-license-key-cell {
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
}

.mob-sl-license-key-cell .mob-sl-license-key {
    font-family: var(--mob-font-mono);
    font-size: 12px;
    background: var(--mob-gray-100);
    padding: var(--mob-space-1) var(--mob-space-2);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-gray-700);
}

.mob-sl-table-cell-content {
    line-height: 1.4;
}

.mob-sl-table-usage {
    min-width: 120px;
}

.mob-sl-usage-text {
    display: block;
    margin-bottom: var(--mob-space-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--mob-gray-700);
}

/* =============================================================================
   Empty States
   ============================================================================= */
.mob-sl-empty-state {
    text-align: center;
    padding: var(--mob-space-16) var(--mob-space-6);
    color: var(--mob-gray-500);
}

.mob-sl-empty-icon {
    font-size: 48px;
    margin-bottom: var(--mob-space-4);
    opacity: 0.6;
    color: var(--mob-gray-400);
}

.mob-sl-empty-message {
    font-size: 18px;
    font-weight: 500;
    color: var(--mob-gray-700);
    margin: 0 0 var(--mob-space-2) 0;
    font-family: var(--mob-font-family);
}

.mob-sl-empty-hint {
    font-size: 14px;
    margin: 0 0 var(--mob-space-6) 0;
    line-height: 1.5;
    color: var(--mob-gray-500);
    font-family: var(--mob-font-family);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */
.mob-sl-text-primary { color: var(--mob-primary) !important; }
.mob-sl-text-success { color: var(--mob-success) !important; }
.mob-sl-text-warning { color: var(--mob-warning) !important; }
.mob-sl-text-error { color: var(--mob-error) !important; }
.mob-sl-text-muted { color: var(--mob-gray-500) !important; }
.mob-sl-text-small { font-size: 13px !important; }
.mob-sl-text-center { text-align: center !important; }
.mob-sl-text-right { text-align: right !important; }

.mob-sl-mb-small { margin-bottom: var(--mob-space-2) !important; }
.mob-sl-mb-medium { margin-bottom: var(--mob-space-4) !important; }
.mob-sl-mb-large { margin-bottom: var(--mob-space-6) !important; }

.mob-sl-mt-small { margin-top: var(--mob-space-2) !important; }
.mob-sl-mt-medium { margin-top: var(--mob-space-4) !important; }
.mob-sl-mt-large { margin-top: var(--mob-space-6) !important; }

.mob-sl-hidden { display: none !important; }

@media (max-width: 767px) {
    .mob-sl-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .mob-sl-hide-desktop { display: none !important; }
}

/* =============================================================================
   Filter & Search
   ============================================================================= */
.mob-sl-filter-group {
    display: flex;
    gap: var(--mob-space-2);
    align-items: center;
}

.mob-sl-toggle-view {
    background: white;
    color: var(--mob-gray-600);
    border: 2px solid var(--mob-gray-200);
}

.mob-sl-toggle-view:hover {
    background: var(--mob-gray-50);
    border-color: var(--mob-gray-300);
    color: var(--mob-gray-800);
}

.mob-sl-toggle-view.active {
    background: var(--mob-primary);
    color: white;
    border-color: var(--mob-primary);
}

/* =============================================================================
   Stats Summary
   ============================================================================= */
.mob-sl-stats-summary {
    margin-bottom: var(--mob-space-6);
}

/* =============================================================================
   Legacy Support & Compatibility
   ============================================================================= */
.mob-customer-dashboard .mob-dashboard-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: var(--mob-space-6) 0; 
    font-size: 14px; 
}

.mob-customer-dashboard .mob-dashboard-table th { 
    background: var(--mob-gray-50); 
    text-align: left; 
}

.mob-customer-dashboard .mob-dashboard-table th, 
.mob-customer-dashboard .mob-dashboard-table td { 
    padding: var(--mob-space-2) var(--mob-space-3); 
    border: 1px solid var(--mob-gray-200); 
}

.mob-customer-dashboard code { 
    background: var(--mob-gray-100); 
    padding: var(--mob-space-1) var(--mob-space-2); 
    border-radius: var(--mob-radius-sm);
    font-family: var(--mob-font-mono);
    font-size: 12px;
    color: var(--mob-gray-700);
}

/* =============================================================================
   Responsive Enhancements
   ============================================================================= */
@media (max-width: 480px) {
    .mob-sl-section {
        margin: 0 0 var(--mob-space-4) 0;
        border-radius: var(--mob-radius);
    }
    
    .mob-sl-section-header {
        padding: var(--mob-space-4) var(--mob-space-5) var(--mob-space-3);
    }
    
    .mob-sl-section-title {
        font-size: 18px;
    }
    
    .mob-sl-grid {
        padding: var(--mob-space-4);
    }
    
    .mob-sl-stats-grid {
        padding: var(--mob-space-4);
        gap: var(--mob-space-3);
    }
    
    .mob-sl-stat-card {
        padding: var(--mob-space-4) var(--mob-space-3);
    }
    
    .mob-sl-stat-number {
        font-size: 24px;
    }
    
    .mob-sl-form {
        padding: var(--mob-space-4);
        margin: var(--mob-space-4);
    }
    
    .mob-sl-bundle-header,
    .mob-sl-license-header {
        padding: var(--mob-space-4);
    }
    
    .mob-sl-bundle-quota,
    .mob-sl-license-details {
        padding: var(--mob-space-3) var(--mob-space-4);
    }
    
    .mob-sl-bundle-footer,
    .mob-sl-license-footer {
        padding: var(--mob-space-3) var(--mob-space-4);
    }
    
    .mob-sl-table-responsive {
        padding: var(--mob-space-4);
    }
    
    .mob-sl-btn {
        font-size: 13px;
        padding: var(--mob-space-2) var(--mob-space-4);
    }
    
    .mob-sl-btn-small {
        font-size: 12px;
        padding: var(--mob-space-2) var(--mob-space-3);
    }
}

/* =============================================================================
   Forms
   ============================================================================= */
.mob-sl-form {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 24px;
    margin: 24px;
}

.mob-sl-form-header {
    margin: 0 0 20px 0;
}

.mob-sl-form-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.mob-sl-form-description {
    margin: 0;
    font-size: 14px;
    color: #646970;
    line-height: 1.5;
}

.mob-sl-form-group {
    margin-bottom: 20px;
}

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

.mob-sl-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #1d2327;
}

.mob-sl-input,
.mob-sl-select,
.mob-sl-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.mob-sl-input:focus,
.mob-sl-select:focus,
.mob-sl-textarea:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.mob-sl-select-small {
    padding: 8px 12px;
    font-size: 13px;
    min-width: 120px;
}

.mob-sl-form-row {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mob-sl-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.mob-sl-form-row.mob-sl-form-row-3 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mob-sl-form-row.mob-sl-form-row-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* =============================================================================
   Buttons
   ============================================================================= */
.mob-sl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

.mob-sl-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mob-sl-btn-primary {
    background: #2271b1;
    color: white;
}

.mob-sl-btn-primary:hover:not(:disabled) {
    background: #1e5f8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(34, 113, 177, 0.3);
}

.mob-sl-btn-secondary {
    background: #646970;
    color: white;
}

.mob-sl-btn-secondary:hover:not(:disabled) {
    background: #50575e;
    transform: translateY(-1px);
}

.mob-sl-btn-outline {
    background: transparent;
    color: #2271b1;
    border: 1px solid #2271b1;
}

.mob-sl-btn-outline:hover:not(:disabled) {
    background: #2271b1;
    color: white;
    transform: translateY(-1px);
}

.mob-sl-btn-ghost {
    background: transparent;
    color: #646970;
    padding: 8px 12px;
}

.mob-sl-btn-ghost:hover:not(:disabled) {
    background: #f6f7f7;
    color: #1d2327;
}

.mob-sl-btn-small {
    padding: 8px 12px;
    font-size: 13px;
}

.mob-sl-btn-large {
    padding: 16px 28px;
    font-size: 16px;
}

.mob-sl-btn-icon {
    font-size: 16px;
}

.mob-sl-btn-full {
    width: 100%;
    justify-content: center;
}

/* =============================================================================
   Bundle Cards
   ============================================================================= */
.mob-sl-bundle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mob-sl-bundle-active {
    border-left: 4px solid #00a32a;
}

.mob-sl-bundle-expired {
    border-left: 4px solid #b32d2e;
    opacity: 0.8;
}

.mob-sl-bundle-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f0f0f1;
}

.mob-sl-bundle-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mob-sl-bundle-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.3;
}

.mob-sl-bundle-software {
    margin: 0;
    font-size: 13px;
    color: #646970;
    font-style: italic;
}

.mob-sl-bundle-quota {
    padding: 16px 20px;
    flex-grow: 1;
}

.mob-sl-quota-info {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.mob-sl-quota-used {
    font-size: 24px;
    font-weight: 700;
    color: #1d2327;
}

.mob-sl-quota-separator {
    font-size: 18px;
    color: #646970;
    margin: 0 2px;
}

.mob-sl-quota-total {
    font-size: 18px;
    font-weight: 500;
    color: #646970;
}

.mob-sl-quota-label {
    font-size: 13px;
    color: #646970;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mob-sl-progress-bar {
    width: 100%;
    height: 6px;
    background: #f0f0f1;
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.mob-sl-progress-fill {
    height: 100%;
    background: #00a32a;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.mob-sl-progress-fill.mob-sl-progress-low {
    background: #dba617;
}

.mob-sl-progress-fill.mob-sl-progress-full {
    background: #b32d2e;
}

.mob-sl-progress-small {
    height: 4px;
    margin: 4px 0;
}

.mob-sl-quota-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.mob-sl-quota-remaining {
    font-weight: 500;
}

.mob-sl-quota-percentage {
    color: #646970;
    font-weight: 500;
}

.mob-sl-bundle-footer {
    padding: 16px 20px 20px;
    border-top: 1px solid #f0f0f1;
}

.mob-sl-bundle-meta {
    margin-bottom: 12px;
}

.mob-sl-bundle-expiry {
    font-size: 13px;
    color: #646970;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mob-sl-meta-icon {
    font-size: 14px;
}

.mob-sl-bundle-actions {
    display: flex;
    gap: 8px;
}

/* =============================================================================
   License Cards
   ============================================================================= */
.mob-sl-license-card {
    display: flex;
    flex-direction: column;
}

.mob-sl-license-active {
    border-left: 4px solid #00a32a;
}

.mob-sl-license-expired {
    border-left: 4px solid #b32d2e;
    opacity: 0.8;
}

.mob-sl-license-suspended {
    border-left: 4px solid #dba617;
    opacity: 0.9;
}

.mob-sl-license-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f0f0f1;
}

.mob-sl-license-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.mob-sl-license-key {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    margin: 0;
    word-break: break-all;
    flex-grow: 1;
}

.mob-sl-copy-btn {
    background: #f6f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.mob-sl-copy-btn:hover {
    background: #e9ecef;
    border-color: #c6c7c7;
}

.mob-sl-copy-btn-small {
    padding: 4px 6px;
    font-size: 12px;
}

.mob-sl-license-details {
    padding: 16px 20px;
    flex-grow: 1;
}

.mob-sl-license-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.mob-sl-license-meta:last-child {
    margin-bottom: 0;
}

.mob-sl-meta-label {
    color: #646970;
    font-weight: 500;
    min-width: 70px;
}

.mob-sl-meta-value {
    color: #1d2327;
    flex-grow: 1;
}

.mob-sl-days-remaining {
    color: #646970;
    font-style: italic;
}

.mob-sl-license-footer {
    padding: 16px 20px 20px;
    border-top: 1px solid #f0f0f1;
}

.mob-sl-license-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =============================================================================
   Badges & Status
   ============================================================================= */
.mob-sl-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.mob-sl-badge-active {
    background: #edfbf0;
    color: #00a32a;
}

.mob-sl-badge-expired {
    background: #fcf0f1;
    color: #b32d2e;
}

.mob-sl-badge-suspended {
    background: #fcf9e8;
    color: #dba617;
}

.mob-sl-badge-pending {
    background: #f0f6fc;
    color: #2271b1;
}

/* =============================================================================
   Tables
   ============================================================================= */
.mob-sl-table-responsive {
    padding: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mob-sl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}

.mob-sl-table-enhanced {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mob-sl-table th {
    background: #f8f9fa;
    color: #1d2327;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid #e9ecef;
    white-space: nowrap;
}

.mob-sl-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: middle;
}

.mob-sl-table tr:last-child td {
    border-bottom: none;
}

.mob-sl-table tr:hover {
    background: #f8f9fa;
}

.mob-sl-table-actions {
    width: 1%;
    white-space: nowrap;
}

.mob-sl-action-buttons {
    display: flex;
    gap: 6px;
}

.mob-sl-license-key-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mob-sl-license-key-cell .mob-sl-license-key {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    background: #f6f7f7;
    padding: 4px 6px;
    border-radius: 3px;
}

.mob-sl-table-cell-content {
    line-height: 1.4;
}

.mob-sl-table-usage {
    min-width: 120px;
}

.mob-sl-usage-text {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* =============================================================================
   Empty States
   ============================================================================= */
.mob-sl-empty-state {
    text-align: center;
    padding: 60px 24px;
    color: #646970;
}

.mob-sl-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.mob-sl-empty-message {
    font-size: 18px;
    font-weight: 500;
    color: #1d2327;
    margin: 0 0 8px 0;
}

.mob-sl-empty-hint {
    font-size: 14px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* =============================================================================
   Utility Classes
   ============================================================================= */
.mob-sl-text-primary { color: #2271b1 !important; }
.mob-sl-text-success { color: #00a32a !important; }
.mob-sl-text-warning { color: #dba617 !important; }
.mob-sl-text-error { color: #b32d2e !important; }
.mob-sl-text-muted { color: #646970 !important; }
.mob-sl-text-small { font-size: 13px !important; }
.mob-sl-text-center { text-align: center !important; }
.mob-sl-text-right { text-align: right !important; }

.mob-sl-mb-small { margin-bottom: 8px !important; }
.mob-sl-mb-medium { margin-bottom: 16px !important; }
.mob-sl-mb-large { margin-bottom: 24px !important; }

.mob-sl-mt-small { margin-top: 8px !important; }
.mob-sl-mt-medium { margin-top: 16px !important; }
.mob-sl-mt-large { margin-top: 24px !important; }

.mob-sl-hidden { display: none !important; }

@media (max-width: 767px) {
    .mob-sl-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .mob-sl-hide-desktop { display: none !important; }
}

/* =============================================================================
   Filter & Search
   ============================================================================= */
.mob-sl-filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mob-sl-toggle-view {
    background: #f6f7f7;
    color: #1d2327;
    border: 1px solid #c3c4c7;
}

.mob-sl-toggle-view:hover {
    background: #e9ecef;
    border-color: #8c8f94;
}

.mob-sl-toggle-view.active {
    background: #2271b1;
    color: white;
    border-color: #2271b1;
}

/* =============================================================================
   Legacy Support & Compatibility
   ============================================================================= */
.mob-customer-dashboard .mob-dashboard-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 18px 0; 
    font-size: 14px; 
}

.mob-customer-dashboard .mob-dashboard-table th { 
    background: #f0f0f0; 
    text-align: left; 
}

.mob-customer-dashboard .mob-dashboard-table th, 
.mob-customer-dashboard .mob-dashboard-table td { 
    padding: 8px 10px; 
    border: 1px solid #ddd; 
}

.mob-customer-dashboard code { 
    background: #f6f7f7; 
    padding: 3px 6px; 
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
}

/* =============================================================================
   Responsive Enhancements
   ============================================================================= */
@media (max-width: 480px) {
    .mob-sl-section {
        margin: 0 0 16px 0;
        border-radius: 4px;
    }
    
    .mob-sl-section-header {
        padding: 16px 20px 12px;
    }
    
    .mob-sl-section-title {
        font-size: 18px;
    }
    
    .mob-sl-grid {
        padding: 16px;
    }
    
    .mob-sl-stats-grid {
        padding: 16px;
        gap: 12px;
    }
    
    .mob-sl-stat-card {
        padding: 16px 12px;
    }
    
    .mob-sl-stat-number {
        font-size: 24px;
    }
    
    .mob-sl-form {
        padding: 16px;
        margin: 16px;
    }
    
    .mob-sl-bundle-header,
    .mob-sl-license-header {
        padding: 16px 16px 12px;
    }
    
    .mob-sl-bundle-quota,
    .mob-sl-license-details {
        padding: 12px 16px;
    }
    
    .mob-sl-bundle-footer,
    .mob-sl-license-footer {
        padding: 12px 16px 16px;
    }
    
    .mob-sl-table-responsive {
        padding: 16px;
    }
    
    .mob-sl-btn {
        font-size: 13px;
        padding: 10px 16px;
    }
    
    .mob-sl-btn-small {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* =============================================================================
   Modern Plan Cards & Grid System
   ============================================================================= */

/* Plans Grid Container */
.mob-plans-grid {
    display: grid;
    gap: var(--mob-space-6);
    grid-template-columns: 1fr;
    margin: var(--mob-space-8) 0;
    padding: 0;
}

@media (min-width: 768px) {
    .mob-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mob-space-8);
    }
}

@media (min-width: 1200px) {
    .mob-plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Individual Plan Card */
.mob-sl-plan {
    position: relative;
    background: white;
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-xl);
    padding: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: var(--mob-shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.mob-sl-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--mob-shadow-xl);
    border-color: var(--mob-primary);
}

/* Featured Plan Styling */
.mob-sl-plan-featured {
    border-color: var(--mob-primary);
    position: relative;
    transform: scale(1.05);
    box-shadow: var(--mob-shadow-lg);
}

.mob-sl-plan-featured:hover {
    transform: translateY(-4px) scale(1.05);
}

/* Featured Badge */
.mob-sl-plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--mob-primary), var(--mob-primary-hover));
    color: white;
    padding: var(--mob-space-2) var(--mob-space-6);
    border-radius: 0 0 var(--mob-radius-lg) var(--mob-radius-lg);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: var(--mob-shadow-md);
    z-index: 10;
}

/* Plan Header */
.mob-sl-plan-header {
    padding: var(--mob-space-8) var(--mob-space-6) var(--mob-space-6);
    text-align: center;
    background: var(--mob-gray-50);
    border-bottom: 1px solid var(--mob-gray-100);
}

.mob-sl-plan-featured .mob-sl-plan-header {
    background: linear-gradient(135deg, var(--mob-primary-light), #f8faff);
    padding-top: calc(var(--mob-space-8) + var(--mob-space-6));
}

.mob-sl-plan-title {
    margin: 0 0 var(--mob-space-4) 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--mob-gray-900);
    line-height: 1.2;
    font-family: var(--mob-font-family);
}

.mob-sl-plan-featured .mob-sl-plan-title {
    color: var(--mob-primary);
}

/* Pricing Section */
.mob-sl-plan-pricing {
    margin-bottom: var(--mob-space-4);
}

.mob-sl-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--mob-space-1);
    margin-bottom: var(--mob-space-2);
}

.mob-sl-plan-currency {
    font-size: 20px;
    font-weight: 600;
    color: var(--mob-gray-600);
    align-self: flex-start;
    margin-top: var(--mob-space-2);
}

.mob-sl-plan-amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--mob-gray-900);
    line-height: 1;
    font-family: var(--mob-font-family);
}

.mob-sl-plan-featured .mob-sl-plan-amount {
    color: var(--mob-primary);
}

.mob-sl-plan-cycle {
    font-size: 14px;
    color: var(--mob-gray-600);
    font-weight: 500;
}

/* Plan Description */
.mob-sl-plan-description {
    margin-top: var(--mob-space-4);
}

.mob-sl-plan-description p {
    margin: 0;
    font-size: 14px;
    color: var(--mob-gray-600);
    line-height: 1.5;
    font-family: var(--mob-font-family);
}

/* Plan Features */
.mob-sl-plan-features {
    padding: var(--mob-space-6);
    flex-grow: 1;
}

.mob-sl-plan-features ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mob-sl-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3) 0;
    font-size: 14px;
    color: var(--mob-gray-700);
    line-height: 1.5;
    font-family: var(--mob-font-family);
}

.mob-sl-plan-features li:first-child {
    padding-top: 0;
}

.mob-sl-plan-features li:last-child {
    padding-bottom: 0;
}

/* Check Icon */
.mob-sl-plan-check {
    width: 20px;
    height: 20px;
    color: var(--mob-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.mob-sl-plan-featured .mob-sl-plan-check {
    color: var(--mob-primary);
}

/* Plan Content (for shortcode inner content) */
.mob-sl-plan-content {
    padding: 0 var(--mob-space-6) var(--mob-space-6);
    flex-grow: 1;
}

/* Plan Actions */
.mob-sl-plan-actions {
    padding: var(--mob-space-6);
    border-top: 1px solid var(--mob-gray-100);
    background: white;
}

/* Enhanced Plan Button */
.mob-sl-plan-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mob-space-2);
    padding: var(--mob-space-4) var(--mob-space-6);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--mob-radius-lg);
    transition: all 0.3s ease;
    text-decoration: none;
    border: 2px solid transparent;
}

.mob-sl-plan-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.mob-sl-plan-button.mob-sl-btn-primary {
    background: linear-gradient(135deg, var(--mob-primary), var(--mob-primary-hover));
    color: white;
    box-shadow: var(--mob-shadow-md);
}

.mob-sl-plan-button.mob-sl-btn-primary:hover {
    box-shadow: var(--mob-shadow-lg);
    background: linear-gradient(135deg, var(--mob-primary-hover), #1e40af);
}

.mob-sl-featured .mob-sl-plan-button.mob-sl-btn-primary {
    background: linear-gradient(135deg, var(--mob-success), var(--mob-success-hover));
    box-shadow: var(--mob-shadow-lg);
}

.mob-sl-featured .mob-sl-plan-button.mob-sl-btn-primary:hover {
    background: linear-gradient(135deg, var(--mob-success-hover), #047857);
}

/* Button Icon */
.mob-sl-btn-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.mob-sl-plan-button:hover .mob-sl-btn-icon {
    transform: translateX(2px);
}

/* =============================================================================
   Responsive Plan Adjustments
   ============================================================================= */
@media (max-width: 767px) {
    .mob-sl-plan {
        min-height: auto;
    }
    
    .mob-sl-plan-featured {
        transform: none;
        margin: var(--mob-space-4) 0;
    }
    
    .mob-sl-plan-featured:hover {
        transform: translateY(-2px);
    }
    
    .mob-sl-plan-amount {
        font-size: 36px;
    }
    
    .mob-sl-plan-header {
        padding: var(--mob-space-6) var(--mob-space-4) var(--mob-space-4);
    }
    
    .mob-sl-plan-featured .mob-sl-plan-header {
        padding-top: calc(var(--mob-space-6) + var(--mob-space-4));
    }
    
    .mob-sl-plan-features,
    .mob-sl-plan-actions {
        padding: var(--mob-space-4);
    }
}

/* =============================================================================
   Plan Grid Loading States
   ============================================================================= */
.mob-plans-grid.loading {
    opacity: 0.6;
    pointer-events: none;
}

.mob-sl-plan.loading {
    background: var(--mob-gray-50);
    border-color: var(--mob-gray-200);
}

.mob-sl-plan.loading * {
    opacity: 0.5;
}

/* =============================================================================
   Enhanced Plan Cards - Modern Design Like the Image
   ============================================================================= */

/* Override existing plan styles with modern design */
.mob-plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mob-space-6);
    margin: var(--mob-space-8) auto;
    max-width: 1200px;
    padding: 0 var(--mob-space-4);
}

@media (min-width: 768px) {
    .mob-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 var(--mob-space-6);
    }
}

@media (min-width: 1024px) {
    .mob-plans-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }
}

/* Enhanced Plan Card Base */
.mob-sl-plan {
    position: relative;
    background: white;
    border: 2px solid var(--mob-gray-200);
    border-radius: var(--mob-radius-xl);
    padding: 0;
    box-shadow: var(--mob-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.mob-sl-plan:hover {
    border-color: var(--mob-primary);
    box-shadow: var(--mob-shadow-lg);
    transform: translateY(-8px);
}

/* Featured Plan Enhancement */
.mob-sl-plan-featured {
    border-color: var(--mob-primary) !important;
    box-shadow: var(--mob-shadow-md) !important;
    transform: scale(1.05);
    z-index: 2;
    position: relative;
}

.mob-sl-plan-featured:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: var(--mob-shadow-xl) !important;
}

/* Modern Featured Badge */
.mob-sl-plan-badge {
    position: absolute;
    top: var(--mob-space-4);
    right: var(--mob-space-4);
    background: var(--mob-primary);
    color: white;
    padding: var(--mob-space-2) var(--mob-space-4);
    border-radius: var(--mob-radius);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 3;
    box-shadow: var(--mob-shadow-sm);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Plan Header Redesign */
.mob-sl-plan-header {
    padding: var(--mob-space-8) var(--mob-space-6) var(--mob-space-6);
    text-align: center;
    background: linear-gradient(135deg, var(--mob-gray-50) 0%, white 100%);
    border-bottom: 1px solid var(--mob-gray-100);
    position: relative;
}

.mob-sl-plan-featured .mob-sl-plan-header {
    background: linear-gradient(135deg, var(--mob-primary-light) 0%, white 100%);
}

.mob-sl-plan-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--mob-gray-200);
    border-radius: var(--mob-radius);
}

.mob-sl-plan-featured .mob-sl-plan-header::after {
    background: var(--mob-primary);
}

/* Enhanced Plan Title */
.mob-sl-plan-title {
    margin: 0 0 var(--mob-space-4) 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--mob-gray-900) !important;
    line-height: 1.2;
}

.mob-sl-plan-featured .mob-sl-plan-title {
    color: var(--mob-primary) !important;
}

/* Modern Pricing Display */
.mob-sl-plan-pricing {
    margin-bottom: var(--mob-space-4);
}

.mob-sl-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--mob-space-1);
    margin-bottom: var(--mob-space-2);
}

.mob-sl-plan-currency {
    font-size: 24px;
    font-weight: 600;
    color: var(--mob-gray-600);
    line-height: 1;
}

.mob-sl-plan-amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--mob-gray-900);
    line-height: 1;
}

.mob-sl-plan-featured .mob-sl-plan-amount {
    color: var(--mob-primary);
}

.mob-sl-plan-cycle {
    font-size: 14px;
    color: var(--mob-gray-500);
    text-align: center;
    font-weight: 500;
}

/* Plan Description */
.mob-sl-plan-description {
    margin-top: var(--mob-space-4);
    padding: 0 var(--mob-space-2);
}

.mob-sl-plan-description p {
    margin: 0 !important;
    font-size: 16px;
    color: var(--mob-gray-600);
    line-height: 1.5;
}

/* Enhanced Features List */
.mob-sl-plan-features {
    padding: var(--mob-space-6);
    flex-grow: 1;
}

.mob-sl-plan-features ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mob-sl-plan-features li {
    display: flex !important;
    align-items: flex-start;
    gap: var(--mob-space-3);
    margin-bottom: var(--mob-space-4) !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mob-gray-700);
}

.mob-sl-plan-features li:last-child {
    margin-bottom: 0 !important;
}

.mob-sl-plan-check {
    width: 20px;
    height: 20px;
    color: var(--mob-success);
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--mob-success-light);
    border-radius: 50%;
    padding: 2px;
}

.mob-sl-plan-featured .mob-sl-plan-check {
    color: var(--mob-primary);
    background: var(--mob-primary-light);
}

/* Modern Plan Actions */
.mob-sl-plan-actions {
    padding: var(--mob-space-6);
    border-top: 1px solid var(--mob-gray-100);
    background: var(--mob-gray-50);
    margin-top: auto;
}

.mob-sl-plan-featured .mob-sl-plan-actions {
    background: var(--mob-primary-light);
}

/* Enhanced Plan Button */
.mob-sl-plan-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--mob-space-2);
    width: 100%;
    padding: var(--mob-space-4) var(--mob-space-6) !important;
    background: var(--mob-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--mob-radius) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.mob-sl-plan-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.mob-sl-plan-button:hover:before {
    left: 100%;
}

.mob-sl-plan-button:hover {
    background: var(--mob-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
    color: white !important;
    text-decoration: none !important;
}

.mob-sl-plan-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3) !important;
}

.mob-sl-plan-featured .mob-sl-plan-button {
    background: var(--mob-primary) !important;
    font-size: 18px !important;
    padding: var(--mob-space-5) var(--mob-space-8) !important;
    box-shadow: var(--mob-shadow-sm);
}

.mob-sl-plan-featured .mob-sl-plan-button:hover {
    background: var(--mob-primary-hover) !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5) !important;
}

.mob-sl-plan-button:hover .mob-sl-btn-icon {
    transform: translateX(4px);
}

/* Plan Button Icon Enhancement */
.mob-sl-btn-icon {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease;
}

/* Responsive Enhancements */
@media (max-width: 767px) {
    .mob-sl-plan-featured {
        transform: none !important;
        margin-bottom: var(--mob-space-6);
    }
    
    .mob-sl-plan-featured:hover {
        transform: translateY(-4px) !important;
    }
    
    .mob-sl-plan-amount {
        font-size: 40px !important;
    }
    
    .mob-sl-plan-currency {
        font-size: 20px !important;
    }
    
    .mob-plans-grid {
        gap: var(--mob-space-4);
        padding: 0 var(--mob-space-2);
    }
    
    .mob-sl-plan {
        min-height: auto;
    }
}