/**
 * components/ozi-audio/css/ozi-audio.css
 * Versão: 1.0.2
 *
 * Changelog:
 *   - v1.0.2: [FIX-P1] --ozi-audio-record-bg e --ozi-audio-save-bg
 *     agora usam var(--ozi-color-danger) e var(--ozi-color-success)
 *     em vez de #dc3545 e #198754 (BS5 hardcoded).
 *   - v1.0.2: [FIX-P2] Dark mode adicionado via [data-ozi-theme="dark"]
 *     e @media prefers-color-scheme — alinhado com sistema OZI.
 *   - v1.0.2: [FIX-A] --ozi-audio-radius via var(--ozi-radius-lg).
 *   - v1.0.2: [FIX-B] --ozi-audio-bg via var(--ozi-audio-bg) global
 *     definido em default/tokens.css e bootstrap5/tokens.css.
 *   - v1.0.2: Adicionado .ozi-audio--invalid para feedback do adapter
 *     de validação (borda vermelha no root).
 */

:root {
    /* — paleta própria do audio (visual distinto) — */
    --ozi-audio-color:           #b8b8b9;
    --ozi-audio-color-secondary: var(--ozi-color-primary, #3b82f6);

    --ozi-audio-text:            var(--ozi-color-gray-500,  #6b7280);
    --ozi-audio-text-secondary:  var(--ozi-color-gray-200,  #e5e7eb);

    /* [FIX-B] background via token global do tema */
    --ozi-audio-bg-local:        var(--ozi-audio-bg,        rgba(255, 255, 255, 0.9));
    --ozi-audio-shadow:          rgba(0, 0, 0, 0.12);
    --ozi-audio-border-color:    var(--ozi-border-color,    rgba(255, 255, 255, 0.22));

    --ozi-audio-progress-bg:     var(--ozi-audio-color);
    --ozi-audio-progress-fill:   var(--ozi-audio-color-secondary);

    --ozi-audio-volume-bg:       var(--ozi-audio-color);
    --ozi-audio-volume-fill:     var(--ozi-audio-color-secondary);

    --ozi-audio-speed-bg:        var(--ozi-audio-color);
    --ozi-audio-speed-bg-hover:  var(--ozi-audio-color-secondary);
    --ozi-audio-speed-text:      var(--ozi-audio-text-secondary);

    /* [FIX-P1] record e save via tokens semânticos OZI */
    --ozi-audio-record-bg:       var(--ozi-color-danger,    #ef4444);
    --ozi-audio-record-bg-hover: color-mix(in srgb, var(--ozi-color-danger, #ef4444) 85%, black);
    --ozi-audio-record-text:     var(--ozi-color-white,     #ffffff);

    --ozi-audio-save-bg:         var(--ozi-color-success,   #22c55e);
    --ozi-audio-save-bg-hover:   color-mix(in srgb, var(--ozi-color-success, #22c55e) 85%, black);
    --ozi-audio-save-text:       var(--ozi-color-white,     #ffffff);

    --ozi-audio-status:          var(--ozi-color-gray-500,  #6b7280);

    /* [FIX-A] radius via token global */
    --ozi-audio-radius:          var(--ozi-radius-lg,       0.5rem);
    --ozi-audio-gap:             8px;
    --ozi-audio-width-min:       250px;
    --ozi-audio-width-max:       350px;
    --ozi-audio-padding:         8px 10px;
    --ozi-audio-timeline-height: 15px;
    --ozi-audio-volume-height:   7px;

    --ozi-audio-icon-play-size:   20px;
    --ozi-audio-icon-volume-size: 18px;
    --ozi-audio-icon-record-size: 16px;
    --ozi-audio-icon-save-size:   14px;
}


/* ─── DARK MODE ─────────────────────────────────────── */

/* [FIX-P2] dark mode via sistema OZI */
[data-ozi-theme="dark"],
[data-bs-theme="dark"] {
    --ozi-audio-bg-local:        rgba(31, 41, 55, 0.9);
    --ozi-audio-shadow:          rgba(0, 0, 0, 0.35);
    --ozi-audio-border-color:    rgba(255, 255, 255, 0.08);
    --ozi-audio-color:           #4b5563;
    --ozi-audio-text:            var(--ozi-color-gray-400, #9ca3af);
    --ozi-audio-text-secondary:  var(--ozi-color-gray-600, #4b5563);
    --ozi-audio-status:          var(--ozi-color-gray-400, #9ca3af);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-ozi-theme="light"]):not([data-bs-theme="light"]) {
        --ozi-audio-bg-local:       rgba(31, 41, 55, 0.9);
        --ozi-audio-shadow:         rgba(0, 0, 0, 0.35);
        --ozi-audio-border-color:   rgba(255, 255, 255, 0.08);
        --ozi-audio-color:          #4b5563;
        --ozi-audio-text:           #9ca3af;
        --ozi-audio-text-secondary: #4b5563;
        --ozi-audio-status:         #9ca3af;
    }
}


/* ─── BASE ──────────────────────────────────────────── */

.ozi-audio {
    min-width:     var(--ozi-audio-width-min);
    max-width:     var(--ozi-audio-width-max);
    background:    var(--ozi-audio-bg-local);
    box-shadow:    1px 1px 4px 1px var(--ozi-audio-shadow);
    border:        1px solid var(--ozi-audio-border-color);
    border-radius: var(--ozi-audio-radius);
    padding:       var(--ozi-audio-padding);
    color:         var(--ozi-audio-text);
    box-sizing:    border-box;
}

.ozi-audio *,
.ozi-audio *::before,
.ozi-audio *::after { box-sizing: border-box; }

/* estado inválido — via adapter de validação */
.ozi-audio.ozi-audio--invalid {
    border-color: var(--ozi-color-danger, #ef4444);
    box-shadow:   0 0 0 0.2rem rgba(239, 68, 68, 0.15);
}


/* ─── SVG ÍCONES ────────────────────────────────────── */

.ozi-audio__play-icon,
.ozi-audio__pause-icon {
    display:     inline-flex;
    align-items: center;
    width:       var(--ozi-audio-icon-play-size);
    height:      var(--ozi-audio-icon-play-size);
    flex-shrink: 0;
    color:       currentColor;
}

.ozi-audio__volume-on,
.ozi-audio__volume-off {
    display:     inline-flex;
    align-items: center;
    width:       var(--ozi-audio-icon-volume-size);
    height:      var(--ozi-audio-icon-volume-size);
    flex-shrink: 0;
    color:       currentColor;
}

.ozi-audio__record-idle-icon,
.ozi-audio__record-stop-icon {
    display:     inline-flex;
    align-items: center;
    width:       var(--ozi-audio-icon-record-size);
    height:      var(--ozi-audio-icon-record-size);
    flex-shrink: 0;
    color:       currentColor;
}

.ozi-audio__play-icon svg,
.ozi-audio__pause-icon svg,
.ozi-audio__volume-on svg,
.ozi-audio__volume-off svg,
.ozi-audio__record-idle-icon svg,
.ozi-audio__record-stop-icon svg {
    width:   100%;
    height:  100%;
    display: block;
    fill:    currentColor;
    stroke:  currentColor;
}

.ozi-audio__play-icon svg path,
.ozi-audio__play-icon svg circle,
.ozi-audio__play-icon svg rect,
.ozi-audio__pause-icon svg path,
.ozi-audio__pause-icon svg rect,
.ozi-audio__volume-on svg path,
.ozi-audio__volume-off svg path,
.ozi-audio__record-idle-icon svg path,
.ozi-audio__record-idle-icon svg circle,
.ozi-audio__record-stop-icon svg path,
.ozi-audio__record-stop-icon svg rect {
    fill:   inherit;
    stroke: inherit;
}

.ozi-icon-svg {
    display:        inline-block;
    fill:           currentColor;
    vertical-align: middle;
    pointer-events: none;
    flex-shrink:    0;
}

.ozi-audio__save svg,
.ozi-audio__save .ozi-icon-svg {
    width:        var(--ozi-audio-icon-save-size);
    height:       var(--ozi-audio-icon-save-size);
    margin-right: 4px;
    fill:         currentColor;
    flex-shrink:  0;
}


/* ─── LAYOUT ────────────────────────────────────────── */

.ozi-audio__main {
    display:     flex;
    align-items: flex-start;
    gap:         var(--ozi-audio-gap);
}

.ozi-audio__timeline-box {
    flex:      1;
    min-width: 0;
}

.ozi-audio__title {
    font-size:     var(--ozi-font-size-xs, 0.75rem);
    margin-bottom: 4px;
    color:         var(--ozi-audio-text);
    word-break:    break-word;
}


/* ─── BOTÕES BASE ───────────────────────────────────── */

.ozi-audio__play,
.ozi-audio__record,
.ozi-audio__save,
.ozi-audio__speed,
.ozi-audio__volume-btn {
    border:      0;
    outline:     none;
    cursor:      pointer;
    font-family: inherit;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
}

.ozi-audio__play:disabled,
.ozi-audio__record:disabled,
.ozi-audio__save:disabled,
.ozi-audio__speed:disabled,
.ozi-audio__volume-btn:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}


/* ─── PLAY ──────────────────────────────────────────── */

.ozi-audio__play {
    width:      30px;
    min-width:  30px;
    height:     30px;
    background: transparent;
    color:      var(--ozi-audio-color);
    padding:    0;
}

.ozi-audio__play:hover:not(:disabled) { color: var(--ozi-audio-color-secondary); }

.ozi-audio__play .ozi-audio__pause-icon          { display: none; }
.ozi-audio__play.is-pause .ozi-audio__play-icon  { display: none; }
.ozi-audio__play.is-pause .ozi-audio__pause-icon { display: inline-flex; }


/* ─── TIMELINE ──────────────────────────────────────── */

.ozi-audio__timeline {
    height:        var(--ozi-audio-timeline-height);
    border-radius: 20px;
    background:    var(--ozi-audio-progress-bg);
    position:      relative;
    overflow:      hidden;
    cursor:        pointer;
    margin-bottom: 5px;
}

.ozi-audio__timeline.is-disabled { opacity: 0.55; cursor: not-allowed; }

.ozi-audio__progress {
    width:         0%;
    height:        100%;
    background:    var(--ozi-audio-progress-fill);
    border-radius: 20px;
    transition:    width 0.25s ease;
}


/* ─── META / TIME ───────────────────────────────────── */

.ozi-audio__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    min-height:      18px;
}

.ozi-audio__time {
    display:     flex;
    align-items: center;
    gap:         2px;
    font-size:   var(--ozi-font-size-xs, 0.75rem);
    min-width:   58px;
}

.ozi-audio__time-current,
.ozi-audio__time-length,
.ozi-audio__time-sep { line-height: 1; }

.ozi-audio__status {
    font-size:   11px;
    color:       var(--ozi-audio-status);
    white-space: nowrap;
}


/* ─── VOLUME ────────────────────────────────────────── */

.ozi-audio__volume {
    display:     flex;
    align-items: center;
    gap:         6px;
    min-width:   110px;
    flex:        1;
    max-width:   140px;
}

.ozi-audio__volume-btn {
    background: transparent;
    color:      var(--ozi-audio-color);
    padding:    0;
    min-width:  20px;
    width:      20px;
    height:     20px;
}

.ozi-audio__volume-btn:hover:not(:disabled) { color: var(--ozi-audio-color-secondary); }

.ozi-audio__volume-btn .ozi-audio__volume-off     { display: none; }
.ozi-audio__volume-btn.is-off .ozi-audio__volume-on  { display: none; }
.ozi-audio__volume-btn.is-off .ozi-audio__volume-off { display: inline-flex; color: var(--ozi-audio-color-secondary); }

.ozi-audio__volume-bar {
    width:         100%;
    height:        var(--ozi-audio-volume-height);
    background:    var(--ozi-audio-volume-bg);
    border-radius: 20px;
    overflow:      hidden;
    cursor:        pointer;
}

.ozi-audio__volume-bar.is-disabled { opacity: 0.55; cursor: not-allowed; }

.ozi-audio__volume-fill {
    width:         50%;
    height:        100%;
    background:    var(--ozi-audio-volume-fill);
    border-radius: 20px;
    transition:    width 0.25s ease;
}


/* ─── SPEED ─────────────────────────────────────────── */

.ozi-audio__speed {
    width:         40px;
    min-width:     40px;
    height:        24px;
    border-radius: 50px;
    background:    var(--ozi-audio-speed-bg);
    color:         var(--ozi-audio-speed-text);
    font-size:     var(--ozi-font-size-xs, 0.75rem);
    font-weight:   800;
    line-height:   1;
    margin-top:    6px;
    padding:       0;
}

.ozi-audio__speed:hover:not(:disabled) { background: var(--ozi-audio-speed-bg-hover); }


/* ─── RECORD ────────────────────────────────────────── */

.ozi-audio__record {
    width:         40px;
    min-width:     40px;
    height:        32px;
    border-radius: 50px;
    background:    var(--ozi-audio-record-bg);
    color:         var(--ozi-audio-record-text);
    font-size:     var(--ozi-font-size-sm, 0.875rem);
    font-weight:   700;
    line-height:   1;
    margin-top:    2px;
    padding:       0;
}

.ozi-audio__record:hover:not(:disabled) { background: var(--ozi-audio-record-bg-hover); }

.ozi-audio__record .ozi-audio__record-stop-icon              { display: none; }
.ozi-audio__record.is-recording .ozi-audio__record-idle-icon { display: none; }
.ozi-audio__record.is-recording .ozi-audio__record-stop-icon { display: inline-flex; }


/* ─── SAVE ──────────────────────────────────────────── */

.ozi-audio__save {
    min-width:     64px;
    height:        28px;
    padding:       0 12px;
    border-radius: 50px;
    background:    var(--ozi-audio-save-bg);
    color:         var(--ozi-audio-save-text);
    font-size:     var(--ozi-font-size-xs, 0.75rem);
    font-weight:   700;
    line-height:   1;
    margin-top:    4px;
    gap:           4px;
}

.ozi-audio__save:hover:not(:disabled) { background: var(--ozi-audio-save-bg-hover); }


/* ─── PREVIEW ───────────────────────────────────────── */

.ozi-audio__preview-wrap { margin-top: 8px; }
.ozi-audio__preview { width: 100%; max-width: 100%; display: block; }


/* ─── MODOS ─────────────────────────────────────────── */

.ozi-audio-player .ozi-audio__main,
.ozi-audio-full .ozi-audio__main,
.ozi-audio-recorder .ozi-audio__main { align-items: flex-start; }
.ozi-audio-full .ozi-audio__status   { min-width: 70px; text-align: right; }


/* ─── RESPONSIVO ────────────────────────────────────── */

@media (max-width: 480px) {
    .ozi-audio             { min-width: 100%; max-width: 100%; }
    .ozi-audio__main       { gap: 6px; }
    .ozi-audio__volume     { min-width: 90px; max-width: 110px; }
}