/**
 * Shared status message styles.
 *
 * Purpose:
 * - Provides reusable success, danger, warning, and info message boxes.
 * - Keeps PHP-rendered status messages visually aligned with React
 *   ModuleStateAlert while preserving page-specific layout wrappers.
 *
 * Related Assets:
 * - public/web/assets/icons/lucide/circle-check.svg
 * - public/web/assets/icons/lucide/circle-x.svg
 * - public/web/assets/icons/custom/report-problem-outlined.svg
 * - public/web/assets/icons/lucide/info.svg
 */

.system-status-message {
    align-items: center;
    background: var(--color-surface-soft, #f7fafc);
    border: 1px solid var(--color-line, #dfe6f2);
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--color-text-strong, #20314f);
    display: flex;
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-size, 14px);
    gap: 12px;
    line-height: 1.5;
    padding: 8px 16px;
}

.system-status-message__icon {
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 22px;
    line-height: 1;
    margin-top: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 0.9;
    width: 22px;
}

.system-status-message__text {
    min-width: 0;
}

.system-status-message__content {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.system-status-message__content .system-status-message__text {
    display: inline;
}

.system-status-message__action {
    color: inherit;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    margin-left: 0.35em;
    text-decoration: none;
    vertical-align: baseline;
}

.system-status-message__action:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.system-status-message__action:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--color-link-border, #90caf9);
    outline-offset: 2px;
}

.system-status-message--success {
    background: var(--color-success-soft, #f3fcf6);
    border-color: var(--color-success-border, #ccead8);
}

.system-status-message--success .system-status-message__icon {
    color: var(--color-success-dark, #078b25);
    -webkit-mask-image: url("../icons/lucide/circle-check.svg");
    mask-image: url("../icons/lucide/circle-check.svg");
}

.system-status-message--danger {
    background: var(--color-danger-soft, #fff7f7);
    border-color: var(--color-danger-border, #ffd6d6);
}

.system-status-message--danger .system-status-message__icon {
    color: var(--color-danger-dark, #e10f0f);
    -webkit-mask-image: url("../icons/lucide/circle-x.svg");
    mask-image: url("../icons/lucide/circle-x.svg");
}

.system-status-message--warning {
    background: var(--color-warning-soft, #fff6e5);
    border-color: var(--color-warning-border, #f5c21a);
    color: var(--color-warning-dark, #b36b00);
}

.system-status-message--warning .system-status-message__icon {
    color: var(--color-warning-dark, #b36b00);
    -webkit-mask-image: url("../icons/custom/report-problem-outlined.svg");
    mask-image: url("../icons/custom/report-problem-outlined.svg");
}

.system-status-message--info {
    background: var(--color-info-soft, #eff6ff);
    border-color: var(--color-info-border, #bfdbfe);
}

.system-status-message--info .system-status-message__icon {
    color: var(--color-info-dark, #1d4ed8);
    -webkit-mask-image: url("../icons/lucide/info.svg");
    mask-image: url("../icons/lucide/info.svg");
}

.system-field-error {
    color: var(--color-danger-dark, #e10f0f);
    display: block;
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-control-size, 13px);
    font-weight: 700;
    line-height: 1.4;
    margin: 3px 0 0;
}

.system-field-error[hidden] {
    display: none;
}