/* ==========================================================================
   Metaly for ACF and SCF – Smart Notes
   ========================================================================== */

.metaly-sn {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
    color: #1d2327;
}

/* =======================
   Composer
   ======================= */

.metaly-sn__composer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metaly-sn__input {
    width: 100%;
    font-size: 13px;
    line-height: 1.4;
}

.metaly-sn__hint {
    font-size: 11px;
    color: #646970;
}

.metaly-sn__actions {
    display: flex;
    justify-content: flex-end;
}

.metaly-sn__button {
    cursor: default;
}

/* Locked message */
.metaly-sn__locked {
    font-size: 12px;
    color: #50575e;
    font-style: italic;
}

/* =======================
   Notes list
   ======================= */

.metaly-sn__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Single note */
.metaly-sn__note {
    border: 1px solid #dcdcde;
    background: #f6f7f7;
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Meta (date + user) */
.metaly-sn__meta {
    font-size: 11px;
    color: #50575e;
}

/* Note text */
.metaly-sn__text {
    font-size: 13px;
    white-space: pre-wrap;
}

/* Empty state */
.metaly-sn__empty {
    font-size: 12px;
    color: #646970;
    font-style: italic;
}

/* =======================
   Non editable state
   ======================= */

/* Keep visual clarity; only block interaction */
.metaly-sn[data-editable="0"] .metaly-sn__input {
    display: none;
}

.metaly-sn[data-editable="0"] .metaly-sn__actions {
    display: none;
}

/* =======================
   Repeater / Flexible fixes
   ======================= */

.acf-field .metaly-sn {
    margin-top: 2px;
}

/* =======================
   Front-end safety
   ======================= */

.metaly-sn textarea:focus,
.metaly-sn input:focus {
    outline: none;
}

/* =======================
   Dark admin color schemes
   ======================= */

body.admin-color-midnight .metaly-sn__note,
body.admin-color-blue .metaly-sn__note {
    background: #2c3338;
    border-color: #3c434a;
    color: #f0f0f1;
}

body.admin-color-midnight .metaly-sn__meta,
body.admin-color-blue .metaly-sn__meta {
    color: #c3c4c7;
}

body.admin-color-midnight .metaly-sn__hint,
body.admin-color-blue .metaly-sn__hint,
body.admin-color-midnight .metaly-sn__locked,
body.admin-color-blue .metaly-sn__locked,
body.admin-color-midnight .metaly-sn__empty,
body.admin-color-blue .metaly-sn__empty {
    color: #c3c4c7;
}