/**
 * MSP KB Blocks - Frontend Styles
 * Callout / alert boxes — Accent bar (Stripe Docs / shadcn) z tinted tłem
 * + icon-tile w stylu kb-v3-ai-summary (26x26).
 *
 * Wszystkie kolory poprzez tokeny --kb-color-* (zdefiniowane w _tokens-v3.scss
 * dla light + dark mode). Dzięki temu alerty automatycznie dziedziczą paletę.
 *
 * @package MSP_KB
 * @since 2.0.0
 */

/* Base callout — Accent bar + tinted bg + icon-tile */
.msp-alert-box {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--kb-color-info-soft);
    border: none;
    border-left: 3px solid var(--kb-color-primary);
    border-radius: 0 8px 8px 0;
    box-shadow: none;
    overflow: visible;
}

.msp-alert-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    min-width: 26px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: var(--kb-color-surface);
    color: var(--kb-color-primary);
    border-radius: 7px;
}

.msp-alert-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: inherit;
}

.msp-alert-body {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.msp-alert-title {
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--kb-color-ink);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.msp-alert-content {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kb-color-ink-2);
}

.msp-alert-content p {
    margin: 0 0 0.5em;
}

.msp-alert-content p:last-child {
    margin-bottom: 0;
}

.msp-alert-content ul,
.msp-alert-content ol {
    margin: 0.4em 0 0.4em 1.4em;
    padding: 0;
}

.msp-alert-content li {
    margin-bottom: 0.3em;
}

/* Tony --------------------------------------------------------------------- */
/* Każdy ton: tinted bg callouta + lewa kreska + tile ikony w surface +
   ikona w kolorze tonu. Tile z surface kontrastuje z tinted bg, jak Stripe. */

/* Version — neutral gray */
.msp-alert-version              { background: var(--kb-color-surface-soft); border-left-color: var(--kb-color-ink-3); }
.msp-alert-version .msp-alert-icon { color: var(--kb-color-ink-3); }

/* Info — blue (`note`) */
.msp-alert-info                 { background: var(--kb-color-info-soft); border-left-color: var(--kb-color-primary); }
.msp-alert-info .msp-alert-icon { color: var(--kb-color-primary); }

/* Tip — green */
.msp-alert-tip                  { background: var(--kb-color-good-soft); border-left-color: var(--kb-color-good); }
.msp-alert-tip .msp-alert-icon  { color: var(--kb-color-good); }

/* Example — green */
.msp-alert-example                  { background: var(--kb-color-good-soft); border-left-color: var(--kb-color-good); }
.msp-alert-example .msp-alert-icon  { color: var(--kb-color-good); }

/* Warning — amber (`warn`) */
.msp-alert-warning                  { background: var(--kb-color-warn-soft); border-left-color: var(--kb-color-warn-ink); }
.msp-alert-warning .msp-alert-icon  { color: var(--kb-color-warn-ink); }

/* Legacy `document-alert-box` ---------------------------------------------- */
/* Osobny układ (title + content jako rodzeństwo, bez wspólnego flex containera
   z ikoną). Tinted bg + Accent bar — bez tile (brak miejsca na ikonę w starym
   markupie). */

.document-alert-box {
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--kb-color-info-soft);
    border: none;
    border-left: 3px solid var(--kb-color-primary);
    border-radius: 0 8px 8px 0;
}

.document-alert-box.product   { background: var(--kb-color-info-soft); border-left-color: var(--kb-color-primary); }
.document-alert-box.info      { background: var(--kb-color-info-soft); border-left-color: var(--kb-color-primary); }
.document-alert-box.example   { background: var(--kb-color-good-soft); border-left-color: var(--kb-color-good); }
.document-alert-box.indicator { background: var(--kb-color-good-soft); border-left-color: var(--kb-color-good); }
.document-alert-box.warning   { background: var(--kb-color-warn-soft); border-left-color: var(--kb-color-warn-ink); }

.document-alert-title {
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--kb-color-ink);
    padding: 0 0 2px;
    letter-spacing: -0.01em;
}

.document-alert-content {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kb-color-ink-2);
    padding: 0;
}

/* Gutenberg editor — placeholder ikony i RichText pola ------------------- */
/* Frontend renderuje SVG przez msp_kb_icon(). W edytorze JS daje placeholder
   .msp-alert-icon-placeholder (kropka 16x16). Wzmocnij żeby był wyraźny. */
.msp-alert-icon-placeholder {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* RichText w editor — żeby title i content w msp-alert-box wyglądały
   spójnie z frontendem (Gutenberg dodaje swoje block-editor classes). */
.msp-alert-box .msp-alert-title.rich-text,
.msp-alert-box .msp-alert-title[contenteditable="true"] {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0 0 2px;
    min-height: 1.4em;
}

.msp-alert-box .msp-alert-content.rich-text,
.msp-alert-box .msp-alert-content[contenteditable="true"] {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    min-height: 1.55em;
}

/* Focus state w editor — delikatny outline żeby user widział aktywne pole. */
.msp-alert-box .rich-text:focus {
    outline: 2px solid color-mix(in oklab, var(--kb-color-primary) 25%, transparent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Empty placeholder text w RichText — niech będzie czytelny. */
.msp-alert-box .rich-text [data-rich-text-placeholder]::before {
    color: var(--kb-color-ink-4);
    font-style: italic;
}

/* Responsive --------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .msp-alert-box {
        gap: 10px;
        padding: 10px 12px;
    }

    .msp-alert-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        border-radius: 6px;
    }
}

/* Print -------------------------------------------------------------------- */
@media print {
    .msp-alert-box,
    .document-alert-box {
        box-shadow: none;
        page-break-inside: avoid;
    }

    .msp-alert-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}