/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Collapsible Sections Styling */
.collapsible-section {
    transition: all 0.3s ease;
}

.collapsible-icon {
    transition: transform 0.3s ease;
}

.collapsible-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Surcharge Table Styling */
.surcharge-table {
    border-collapse: separate;
    border-spacing: 0;
}

.surcharge-table th:first-child {
    border-top-left-radius: 0.375rem;
}

.surcharge-table th:last-child {
    border-top-right-radius: 0.375rem;
}

/* Tab Active State */
.tab-active {
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
}

/* Hover effects for tab buttons */
button[data-tab]:hover {
    border-color: #9CA3AF;
    color: #374151;
}

button[data-tab].border-blue-500 {
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
}

/* Collapsible section hover effect */
button[data-action*="collapsible-sections#toggle"]:hover {
    background-color: #F9FAFB;
}

/* Form field focus styling */
.surcharge-table input:focus,
.surcharge-table select:focus {
    outline: none;
    ring: 2px;
    ring-color: #3B82F6;
    border-color: #3B82F6;
}

/* Icon rotation animation */
svg.transform {
    transition: transform 0.3s ease;
}

svg.rotate-180 {
    transform: rotate(180deg);
}