/**
 * ACCORDION - PharmData Design System v2.0
 * Painéis expansíveis/colapsáveis
 *
 * Inclui: Accordion básico, bordered, flush, nested
 * Com suporte a múltiplos abertos e animações.
 */

/* ===================
   CSS CUSTOM PROPERTIES
   =================== */

:root {
    /* Spacing */
    --accordion-padding: 1rem 1.25rem;
    --accordion-body-padding: 0 1.25rem 1.25rem;
    --accordion-gap: 0;
    --accordion-border-radius: 0.5rem;

    /* Colors */
    --accordion-bg: white;
    --accordion-bg-hover: rgba(183, 228, 213, 0.05);
    --accordion-bg-active: rgba(183, 228, 213, 0.08);
    --accordion-border: rgba(183, 228, 213, 0.2);
    --accordion-text: var(--graphite-depth, #1F2937);
    --accordion-text-muted: var(--soft-steel, #64748B);
    --accordion-icon: var(--teal-intense, #2AA198);

    /* Transition */
    --accordion-transition: all 0.2s ease;
}

/* Dark mode */
:root.dark-mode {
    --accordion-bg: var(--arctic-mist, #1a2332);
    --accordion-bg-hover: rgba(183, 228, 213, 0.08);
    --accordion-bg-active: rgba(183, 228, 213, 0.12);
    --accordion-border: rgba(183, 228, 213, 0.15);
}

/* ===================
   ACCORDION CONTAINER
   =================== */

.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
    border: 1px solid var(--accordion-border);
    border-radius: var(--accordion-border-radius);
    overflow: hidden;
}

/* ===================
   ACCORDION ITEM
   =================== */

.accordion-item {
    background: var(--accordion-bg);
    border-bottom: 1px solid var(--accordion-border);
}

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

/* ===================
   ACCORDION HEADER/TRIGGER
   =================== */

.accordion-header {
    margin: 0;
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--accordion-padding);
    background: transparent;
    border: none;
    color: var(--accordion-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--accordion-transition);
    gap: 1rem;
}

.accordion-trigger:hover {
    background: var(--accordion-bg-hover);
}

.accordion-trigger:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--teal-intense, #2AA198);
}

/* Expanded state */
.accordion-item.open .accordion-trigger,
.accordion-trigger[aria-expanded="true"] {
    background: var(--accordion-bg-active);
}

/* ===================
   ACCORDION ICON
   =================== */

.accordion-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accordion-icon);
    transition: transform 0.2s ease;
}

/* Chevron default */
.accordion-icon::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.accordion-item.open .accordion-icon::before,
.accordion-trigger[aria-expanded="true"] .accordion-icon::before {
    transform: rotate(45deg);
}

/* Plus/Minus variant */
.accordion-plus .accordion-icon::before {
    content: '+';
    border: none;
    font-size: 1.25rem;
    font-weight: 300;
    transform: none;
}

.accordion-plus .accordion-item.open .accordion-icon::before,
.accordion-plus .accordion-trigger[aria-expanded="true"] .accordion-icon::before {
    content: '−';
    transform: none;
}

/* Icon on left */
.accordion-icon-left .accordion-trigger {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ===================
   ACCORDION CONTENT/BODY
   =================== */

.accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.accordion-item.open .accordion-content,
.accordion-content[data-state="open"] {
    max-height: 1000px; /* Fallback */
    transition: max-height 0.3s ease-in;
}

.accordion-body {
    padding: var(--accordion-body-padding);
    color: var(--accordion-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.accordion-body p {
    margin: 0 0 0.75rem;
}

.accordion-body p:last-child {
    margin-bottom: 0;
}

/* ===================
   ACCORDION VARIANTS
   =================== */

/* --- Bordered/Separated --- */
.accordion-bordered {
    border: none;
    gap: 0.75rem;
}

.accordion-bordered .accordion-item {
    border: 1px solid var(--accordion-border);
    border-radius: var(--accordion-border-radius);
}

.accordion-bordered .accordion-item.open {
    border-color: var(--teal-intense, #2AA198);
}

/* --- Flush (no outer borders) --- */
.accordion-flush {
    border: none;
    border-radius: 0;
}

.accordion-flush .accordion-item {
    border-radius: 0;
}

.accordion-flush .accordion-item:first-child {
    border-top: 1px solid var(--accordion-border);
}

/* --- Ghost (minimal) --- */
.accordion-ghost {
    border: none;
    background: transparent;
}

.accordion-ghost .accordion-item {
    background: transparent;
    border-bottom: none;
}

.accordion-ghost .accordion-trigger {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--accordion-border);
}

.accordion-ghost .accordion-trigger:hover {
    background: transparent;
    color: var(--teal-intense, #2AA198);
}

.accordion-ghost .accordion-body {
    padding: 1rem 0;
}

/* ===================
   ACCORDION SIZES
   =================== */

.accordion-sm .accordion-trigger {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
}

.accordion-sm .accordion-body {
    padding: 0 1rem 1rem;
    font-size: 0.8125rem;
}

.accordion-sm .accordion-icon {
    width: 1rem;
    height: 1rem;
}

.accordion-lg .accordion-trigger {
    padding: 1.25rem 1.5rem;
    font-size: 1.0625rem;
}

.accordion-lg .accordion-body {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.9375rem;
}

/* ===================
   ACCORDION WITH ICONS
   =================== */

.accordion-trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #2AA198);
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.accordion-trigger-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.accordion-trigger-title {
    font-weight: 600;
    color: var(--accordion-text);
}

.accordion-trigger-subtitle {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--accordion-text-muted);
}

/* ===================
   NESTED ACCORDION
   =================== */

.accordion-nested {
    margin-top: 0.75rem;
    border: 1px solid var(--accordion-border);
    border-radius: 0.375rem;
}

.accordion-nested .accordion-trigger {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.accordion-nested .accordion-body {
    padding: 0 1rem 1rem;
    font-size: 0.8125rem;
}

/* ===================
   FAQ ACCORDION
   =================== */

.accordion-faq .accordion-trigger {
    font-size: 1rem;
}

.accordion-faq .accordion-trigger::before {
    content: 'Q';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--teal-intense, #2AA198);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.accordion-faq .accordion-body::before {
    content: 'A';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(42, 161, 152, 0.1);
    color: var(--teal-intense, #2AA198);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.75rem;
    flex-shrink: 0;
    float: left;
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Keyboard focus */
.accordion-trigger:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Screen reader */
.accordion-trigger[aria-expanded="true"] {
    /* Announced as expanded */
}

.accordion-trigger[aria-expanded="false"] {
    /* Announced as collapsed */
}

/* High contrast */
@media (prefers-contrast: high) {
    .accordion-item {
        border-width: 2px;
    }

    .accordion-trigger:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -2px;
        box-shadow: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .accordion-trigger,
    .accordion-content,
    .accordion-icon,
    .accordion-icon::before {
        transition: none;
    }

    .accordion-content {
        max-height: none !important;
    }

    .accordion-item:not(.open) .accordion-content {
        display: none;
    }

    .accordion-item.open .accordion-content {
        display: block;
    }
}

/* ===================
   RESPONSIVE
   =================== */

@media (max-width: 640px) {
    .accordion-trigger {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .accordion-body {
        padding: 0 1rem 1rem;
    }

    .accordion-bordered {
        gap: 0.5rem;
    }
}