.df-inner-card {
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
    margin: 0;
}

.df-inner-card-header {
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    border-radius: 6px 6px 0 0;
}

.df-inner-card-body {
    padding: 0.25rem 0.75rem 0.75rem 0.75rem;
    border-radius: 0 0 6px 6px;
}

.df-inner-card-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 6px 6px;
    background-color: rgba(0,0,0,0.02);
}

.df-inner-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #2c3e50;
    margin-bottom: 0;
}

.df-inner-card-subtitle {
    opacity: 0.8;
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Unified background with action color tints */

/* Light variant - panel background with subtle info tint */
.df-inner-card-header-light,
.df-inner-card-header-light + .df-inner-card-body {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-info, #0dcaf0) 5%);
    color: #2c3e50;
}

.df-inner-card-header-light .df-inner-card-title,
.df-inner-card-header-light .df-inner-card-subtitle,
.df-inner-card-header-light i {
    color: color-mix(in srgb, var(--df-panel-text, #2c3e50) 85%, var(--df-info, #0dcaf0) 15%);
}

/* Primary variant - panel background with primary tint */
.df-inner-card-header-primary,
.df-inner-card-header-primary + .df-inner-card-body {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-primary-bg, #1a2838) 5%);
    color: #2c3e50;
}

.df-inner-card-header-primary .df-inner-card-title,
.df-inner-card-header-primary .df-inner-card-subtitle,
.df-inner-card-header-primary i {
    color: color-mix(in srgb, var(--df-panel-text, #2c3e50) 80%, var(--df-primary-bg, #1a2838) 20%);
}

/* Success variant - panel background with success tint */
.df-inner-card-header-success,
.df-inner-card-header-success + .df-inner-card-body {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-success, #198754) 5%);
    color: #2c3e50;
}

.df-inner-card-header-success .df-inner-card-title,
.df-inner-card-header-success .df-inner-card-subtitle,
.df-inner-card-header-success i {
    color: color-mix(in srgb, var(--df-panel-text, #2c3e50) 80%, var(--df-success, #198754) 20%);
}

/* Warning variant - panel background with warning tint */
.df-inner-card-header-warning,
.df-inner-card-header-warning + .df-inner-card-body {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-warning, #ffc107) 5%);
    color: #2c3e50;
}

.df-inner-card-header-warning .df-inner-card-title,
.df-inner-card-header-warning .df-inner-card-subtitle,
.df-inner-card-header-warning i {
    color: color-mix(in srgb, var(--df-panel-text, #2c3e50) 85%, #856404 15%);
}

/* Danger variant - panel background with danger tint */
.df-inner-card-header-danger,
.df-inner-card-header-danger + .df-inner-card-body {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-danger, #dc3545) 5%);
    color: #2c3e50;
}

.df-inner-card-header-danger .df-inner-card-title,
.df-inner-card-header-danger .df-inner-card-subtitle,
.df-inner-card-header-danger i {
    color: color-mix(in srgb, var(--df-panel-text, #2c3e50) 80%, var(--df-danger, #dc3545) 20%);
}

/* Info variant - panel background with info tint */
.df-inner-card-header-info,
.df-inner-card-header-info + .df-inner-card-body {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-info, #0dcaf0) 5%);
    color: #2c3e50;
}

.df-inner-card-header-info .df-inner-card-title,
.df-inner-card-header-info .df-inner-card-subtitle,
.df-inner-card-header-info i {
    color: color-mix(in srgb, var(--df-panel-text, #2c3e50) 85%, var(--df-info, #0dcaf0) 15%);
}

/* Standalone body variants - for inner cards without headers */
.df-inner-card-body-light {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-info, #0dcaf0) 5%);
    color: #2c3e50;
}

.df-inner-card-body-primary {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-primary-bg, #1a2838) 5%);
    color: #2c3e50;
}

.df-inner-card-body-success {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-success, #198754) 5%);
    color: #2c3e50;
}

.df-inner-card-body-warning {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-warning, #ffc107) 5%);
    color: #2c3e50;
}

.df-inner-card-body-danger {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-danger, #dc3545) 5%);
    color: #2c3e50;
}

.df-inner-card-body-info {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, var(--df-info, #0dcaf0) 5%);
    color: #2c3e50;
}

/* Inner card body uses panel text color for proper contrast */
.df-inner-card .df-inner-card-body {
    color: var(--df-panel-text, #495057);
}

/* Help text styling using panel text color with opacity */
.df-inner-card .form-text,
.df-inner-card .form-help,
.df-inner-card .help-text,
.df-inner-card small.text-muted {
    color: color-mix(in srgb, var(--df-panel-text, #495057) 70%, transparent 30%) !important;
}

/* ========================================================================== */
/* Standard Card Component Styles                                             */
/* ========================================================================== */

/* Modern card styling - matching account page */
.df-card {
    background: var(--df-panel-bg, #ffffff);
    border: 1px solid color-mix(in srgb, var(--df-primary-bg) 8%, transparent);
    border-radius: 12px;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--df-primary-bg) 5%, transparent), 
                0 1px 2px color-mix(in srgb, var(--df-primary-bg) 3%, transparent);
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.df-card:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--df-primary-bg) 10%, transparent);
}

.df-card-header {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--df-primary-bg) 5%, var(--df-panel-bg, white)) 0%, 
        color-mix(in srgb, var(--df-primary-bg) 10%, var(--df-panel-bg, white)) 100%);
    border-radius: 12px 12px 0 0;
    padding: 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--df-primary-bg) 10%, transparent);
}

.df-card-header h5 {
    color: var(--df-primary-bg);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.df-card-header h5 i {
    color: var(--df-secondary-bg, var(--df-primary-bg));
    font-size: 1.1rem;
}

.df-card-header .text-muted {
    color: #6c757d !important;
    font-weight: 400;
}

.df-card-body {
    padding: 1.5rem;
    color: var(--df-panel-text, #495057);
}

.df-card-footer {
    background: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, #e9ecef);
    padding: 1rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--df-primary-bg) 10%, transparent);
}

/* Table styling within cards */
.df-card table {
    margin-bottom: 0;
}

.df-card table th {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    border-bottom: 2px solid color-mix(in srgb, var(--df-primary-bg) 15%, transparent);
}

.df-card table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--df-panel-bg, #f0f4f8) 90%, #e0e0e0);
}

.df-card table tbody tr:hover {
    background-color: color-mix(in srgb, var(--df-primary-bg) 3%, var(--df-panel-bg, white));
}

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

/* Form styling within cards */
.df-card .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

.df-card .form-control,
.df-card .form-select {
    border: 1px solid color-mix(in srgb, var(--df-primary-bg) 15%, transparent);
    background-color: color-mix(in srgb, var(--df-panel-bg, #f8f9fa) 95%, #f0f0f0);
    transition: all 0.2s ease;
}

.df-card .form-control:focus,
.df-card .form-select:focus {
    background-color: var(--df-panel-bg, #ffffff);
    border-color: var(--df-primary-bg);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--df-primary-bg) 20%, transparent);
}

/* Help text styling */
.df-card .form-text,
.df-card .help-text,
.df-card small.text-muted {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Badge styling within cards */
.df-card .badge {
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .df-card {
        margin-bottom: 1rem;
    }
    
    .df-card-header,
    .df-card-body {
        padding: 1rem;
    }
}

/* Compact variant styling */
.df-card-compact {
    margin-bottom: 1rem;
}

.df-card-compact .df-card-header {
    padding: 0.75rem 1rem;
}

.df-card-compact .df-card-header h5 {
    font-size: 1rem;
    margin-bottom: 0;
}

.df-card-compact .df-card-header .text-muted {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.df-card-compact .df-card-body {
    padding: 1rem;
}

.df-card-compact .df-card-footer {
    padding: 0.75rem 1rem;
}

.df-card-compact table th {
    padding: 0.5rem;
    font-size: 0.75rem;
}

.df-card-compact table td {
    padding: 0.5rem;
    font-size: 0.875rem;
}

.df-card-compact .form-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.df-card-compact .form-control,
.df-card-compact .form-select {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

.df-card-compact .btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

/* Responsive adjustments for compact cards */
@media (max-width: 768px) {
    .df-card-compact .df-card-header,
    .df-card-compact .df-card-body,
    .df-card-compact .df-card-footer {
        padding: 0.75rem;
    }
}

/* Subtle variant styling - primary color base with accent gradients */

/* Light variant (default) - uses base primary styling */
.df-card-light {
    /* Uses default styling */
}

/* All variants use primary as base with accent stripe */
.df-card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.df-card:hover .df-card-header::after {
    opacity: 1;
}

/* Primary variant */
.df-card-primary {
    border-color: color-mix(in srgb, var(--df-primary-bg) 15%, transparent);
}

.df-card-primary .df-card-header {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--df-primary-bg) 5%, var(--df-panel-bg, white)) 0%, 
        color-mix(in srgb, var(--df-primary-bg) 10%, var(--df-panel-bg, white)) 100%);
}

.df-card-primary .df-card-header::after {
    background: linear-gradient(90deg, 
        var(--df-primary-bg) 0%, 
        color-mix(in srgb, var(--df-primary-bg) 70%, transparent) 100%);
}

/* Secondary variant */
.df-card-secondary {
    border-color: color-mix(in srgb, var(--bs-secondary, #6c757d) 20%, transparent);
}

.df-card-secondary .df-card-header {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--bs-secondary, #6c757d) 8%, var(--df-panel-bg, white)) 0%, 
        color-mix(in srgb, var(--bs-secondary, #6c757d) 15%, var(--df-panel-bg, white)) 100%);
}

.df-card-secondary .df-card-header::after {
    background: linear-gradient(90deg, 
        var(--bs-secondary, #6c757d) 0%, 
        color-mix(in srgb, var(--bs-secondary, #6c757d) 60%, transparent) 100%);
}

.df-card-secondary .df-card-header h5 {
    color: var(--bs-secondary, #6c757d);
}

.df-card-secondary .df-card-header h5 i {
    color: var(--bs-secondary, #6c757d);
}

/* Success variant */
.df-card-success {
    border-color: color-mix(in srgb, var(--df-success, #198754) 15%, transparent);
}

.df-card-success .df-card-header {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--df-primary-bg) 5%, var(--df-panel-bg, white)) 0%,
        color-mix(in srgb, var(--df-primary-bg) 8%, var(--df-panel-bg, white)) 60%,
        color-mix(in srgb, var(--df-success, #198754) 5%, var(--df-panel-bg, white)) 100%);
}

.df-card-success .df-card-header::after {
    background: linear-gradient(90deg, 
        var(--df-primary-bg) 0%, 
        var(--df-success, #198754) 100%);
}

/* Info variant */
.df-card-info {
    border-color: color-mix(in srgb, var(--df-info, #0dcaf0) 15%, transparent);
}

.df-card-info .df-card-header {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--df-primary-bg) 5%, var(--df-panel-bg, white)) 0%,
        color-mix(in srgb, var(--df-primary-bg) 8%, var(--df-panel-bg, white)) 60%,
        color-mix(in srgb, var(--df-info, #0dcaf0) 5%, var(--df-panel-bg, white)) 100%);
}

.df-card-info .df-card-header::after {
    background: linear-gradient(90deg, 
        var(--df-primary-bg) 0%, 
        var(--df-info, #0dcaf0) 100%);
}

/* Warning variant */
.df-card-warning {
    border-color: color-mix(in srgb, var(--df-warning, #ffc107) 20%, transparent);
}

.df-card-warning .df-card-header {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--df-primary-bg) 5%, var(--df-panel-bg, white)) 0%,
        color-mix(in srgb, var(--df-primary-bg) 8%, var(--df-panel-bg, white)) 60%,
        color-mix(in srgb, var(--df-warning, #ffc107) 8%, var(--df-panel-bg, white)) 100%);
}

.df-card-warning .df-card-header::after {
    background: linear-gradient(90deg, 
        var(--df-primary-bg) 0%, 
        var(--df-warning, #ffc107) 100%);
}

/* Danger variant */
.df-card-danger {
    border-color: color-mix(in srgb, var(--df-danger, #dc3545) 15%, transparent);
}

.df-card-danger .df-card-header {
    position: relative;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--df-primary-bg) 5%, var(--df-panel-bg, white)) 0%,
        color-mix(in srgb, var(--df-primary-bg) 8%, var(--df-panel-bg, white)) 60%,
        color-mix(in srgb, var(--df-danger, #dc3545) 5%, var(--df-panel-bg, white)) 100%);
}

.df-card-danger .df-card-header::after {
    background: linear-gradient(90deg, 
        var(--df-primary-bg) 0%, 
        var(--df-danger, #dc3545) 100%);
}

/* Icon accent colors for variants */
.df-card-success .df-card-header h5 i {
    color: var(--df-success, #198754);
}

.df-card-info .df-card-header h5 i {
    color: var(--df-info, #0dcaf0);
}

.df-card-warning .df-card-header h5 i {
    color: var(--df-warning, #ffc107);
}

.df-card-danger .df-card-header h5 i {
    color: var(--df-danger, #dc3545);
}

/* Hover effects enhanced for variants */
.df-card-primary:hover {
    border-color: color-mix(in srgb, var(--df-primary-bg) 25%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--df-primary-bg) 15%, transparent);
}

.df-card-secondary:hover {
    border-color: color-mix(in srgb, var(--bs-secondary, #6c757d) 30%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bs-secondary, #6c757d) 20%, transparent);
}

.df-card-success:hover {
    border-color: color-mix(in srgb, var(--df-success, #198754) 25%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--df-success, #198754) 15%, transparent);
}

.df-card-info:hover {
    border-color: color-mix(in srgb, var(--df-info, #0dcaf0) 25%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--df-info, #0dcaf0) 15%, transparent);
}

.df-card-warning:hover {
    border-color: color-mix(in srgb, var(--df-warning, #ffc107) 30%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--df-warning, #ffc107) 20%, transparent);
}

.df-card-danger:hover {
    border-color: color-mix(in srgb, var(--df-danger, #dc3545) 25%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--df-danger, #dc3545) 15%, transparent);
}

/* Header button styling */
.df-card-header .btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.df-card-header .btn-sm i {
    font-size: 0.875rem;
}

/* Ensure proper alignment when button is present */
.df-card-header .d-flex {
    gap: 1rem;
}

.df-card-header .d-flex > div:first-child {
    flex-grow: 1;
}

/* Responsive button handling */
@media (max-width: 576px) {
    .df-card-header .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .df-card-header .btn-sm i {
        font-size: 0.75rem;
    }
}