/* Travel Policy Editor Styles */

/* Desktop Table */
.tier-table {
    border-radius: 8px;
    overflow: hidden;
}

/* Example Alert Styling */
.example-alert {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 4px solid var(--mud-palette-success);
}

.example-alert ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.example-alert li {
    padding: 0.25rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.example-alert li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--mud-palette-success);
    font-weight: bold;
}

/* Mobile Cards - Visibility controlled by MudBlazor d-block d-md-none classes */
@media (max-width: 767px) {
    /* Card Container */
    .tier-card {
        border-left: 4px solid var(--mud-palette-primary);
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* Card Header */
    .tier-card-header {
        background-color: var(--mud-palette-background-grey);
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--mud-palette-divider);
    }
    
    /* Card Body */
    .tier-card-body {
        padding: 1rem;
    }
    
    /* Field Container */
    .tier-field {
        margin-bottom: 1rem;
    }
    
    .tier-field:last-child {
        margin-bottom: 0;
    }
    
    /* Field Label */
    .tier-field-label {
        font-size: 0.75rem;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 0.375rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
    }
}

/* Tablet and larger - improve table spacing */
@media (min-width: 768px) {
    .tier-table .mud-table-cell {
        padding: 8px 12px;
    }
    
    .tier-table .mud-table-head .mud-table-cell {
        font-weight: 600;
        background-color: var(--mud-palette-background-grey);
    }
}

/* Improve select dropdown for calculation type */
.mud-select-item div[style*="padding"] {
    transition: background-color 0.2s ease;
    padding: 0.5rem 1rem !important;
    border-radius: 4px;
    margin: 0.25rem 0;
}

.mud-select-item:hover div[style*="padding"] {
    background-color: var(--mud-palette-action-default-hover);
}

/* Alert icons alignment */
.mud-alert .d-flex.align-start .mud-icon-root {
    margin-top: 2px;
}

/* Responsive improvements for small screens */
@media (max-width: 599px) {
    /* Stack options vertically on extra small screens */
    .mud-grid-item.mud-grid-item-xs-12.mud-grid-item-sm-6 {
        margin-bottom: 0.5rem;
    }
    
    /* Improve dialog content padding on mobile */
    .mud-dialog-content {
        padding: 1rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .tier-card {
        border-left-color: var(--mud-palette-primary-darken);
    }
    
    .tier-card-header {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .example-alert {
        background-color: rgba(76, 175, 80, 0.15);
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tier-card {
    animation: fadeIn 0.3s ease;
}

/* Print styles */
@media print {
    .tier-card {
        page-break-inside: avoid;
        border: 1px solid #000;
        margin-bottom: 1rem;
    }
    
    .tier-field-label {
        font-weight: bold;
    }
}