/*
 * Choir Members — styling for the plugin's own markup: the login box, the
 * concert/page editor forms, notices, the dashboard list and the button
 * variants the plugin emits. The active theme provides the brand: the .button
 * base style and the --choir-* custom properties (fallbacks below keep the
 * plugin usable with any theme).
 */

/* Button variants on top of the theme's .button base. */
.button--icon { display: inline-flex; align-items: center; justify-content: center; padding: .5em .6em; line-height: 1; }
.button--icon svg { display: block; }
.button--danger { background: #b32d2e; color: #fff; }
.button--danger:hover { background: #9a2626; color: #fff; }

/* Delete mini form: sits inline in action rows (dashboard, single concert). */
.choir-delete-form { display: inline-block; margin: 0; }
.choir-edit-link { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; }
.choir-manage-actions { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; margin: .6em 0 0; }

/* Front-end login box (/?render=login and [choir_login]). */
.choir-login {
    max-width: 420px;
    padding: clamp(1.4em, 3vw, 2em);
    background: #fff;
    border: 1px solid var(--choir-line, #ddd);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.choir-login p { margin: 0 0 1em; }
.choir-login label { display: block; font-size: .95rem; }
.choir-login input.input {
    display: block; width: 100%; font: inherit; margin-top: .35em;
    padding: .55em .7em; border: 1px solid var(--choir-line, #ddd); border-radius: 6px;
}
.choir-login .login-remember label { display: flex; align-items: center; gap: .45em; }
.choir-login .login-remember input { width: auto; margin: 0; }
.choir-login .login-submit { margin-bottom: 0; }
.choir-login input[type="submit"] { width: 100%; }

/* The editor form (concerts + pages). */
.choir-submit-form label { display: inline-block; margin: 0 1em .8em 0; font-size: .95rem; }
.choir-submit-form input[type="text"],
.choir-submit-form input[type="date"],
.choir-submit-form input[type="time"],
.choir-submit-form textarea {
    font: inherit; padding: .45em .6em; border: 1px solid var(--choir-line, #ddd); border-radius: 4px;
}
.choir-submit-form input[type="text"],
.choir-submit-form textarea { width: 100%; }

/* Full-width single fields (title) + block field labels. */
.choir-submit-form .choir-field-title label { display: block; margin: 0 0 .8em; }
.choir-submit-form .choir-field-label { display: block; margin: 0 0 .3em; font-size: .95rem; }

/* Occurrence row: date/time shrink to content, Plats grows to fill the rest. */
.choir-occurrence-row { display: flex; flex-wrap: wrap; gap: .8em 1em; align-items: flex-end; }
.choir-occurrence-row label { margin: 0; }
.choir-submit-form .choir-field--grow { flex: 1 1 14em; }

/* Featured-image field (media library): preview + choose/remove buttons. */
.choir-image-field { margin: 0 0 1.2em; }
.choir-image-field img { border: 1px solid var(--choir-line, #ddd); border-radius: 4px; }
.choir-image-preview[hidden] { display: none; }
.choir-image-preview img {
    display: block; max-width: 260px; height: auto;
    border: 1px solid var(--choir-line, #ddd); border-radius: 6px; margin-bottom: .6em;
}
.choir-image-buttons { display: flex; flex-wrap: wrap; gap: .6em; margin: 0; }
.choir-image-buttons [hidden] { display: none; }

/* Protected-content legend under the editor. */
.choir-token-legend { margin: .8em 0 0; font-size: .9rem; color: var(--choir-muted, #666); }
.choir-token-legend p { margin: 0 0 .3em; }
.choir-token-legend ul { margin: 0; padding-left: 1.2em; }
.choir-token-legend code { background: rgba(0, 0, 0, .05); padding: .1em .3em; border-radius: 3px; }

/* Action row (submit + cancel). */
.choir-form-actions { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; margin-top: 1.4em; }

.choir-submit-form fieldset {
    border: 1px solid var(--choir-line, #ddd); border-radius: 6px; margin: 0 0 1.2em; padding: 1em;
}
.choir-submit-form legend { padding: 0 .4em; font-weight: bold; }
.choir-extra-row {
    display: flex; flex-wrap: wrap; gap: .8em; align-items: flex-end;
    margin: .6em 0; padding: .7em; border: 1px solid var(--choir-line, #ddd); border-radius: 4px;
}
.choir-remove-row { background: none; border: 0; color: #b32d2e; cursor: pointer; font: inherit; }

/* Notices (saved / deleted / errors). */
.choir-notice { padding: .8em 1.2em; border-radius: 4px; margin: 0 0 1.2em; }
.choir-notice--ok { background: #e6f4ea; border: 1px solid #94d3a2; }
.choir-notice--error { background: #fce8e6; border: 1px solid #e6a5a0; }

/* Dashboard: manage list + pagination. */
.choir-manage-list { list-style: none; margin: 1.5em 0; padding: 0; }
.choir-manage-item {
    padding: 1em 0;
    border-bottom: 1px solid var(--choir-line, #ddd);
}
.choir-manage-title { font-size: 1.15rem; }
/* The whole title + date block links to the concert; looks like text, hints on hover. */
.choir-manage-link { display: block; color: inherit; text-decoration: none; }
.choir-manage-link:hover .choir-manage-title strong { text-decoration: underline; }
.choir-manage-item .choir-event-date { margin: .2em 0 .6em; font-weight: 400; color: var(--choir-muted, #666); }
.choir-pagination { margin: 1.5em 0; display: flex; flex-wrap: wrap; gap: .4em; }
.choir-pagination .page-numbers {
    padding: .4em .8em; border: 1px solid var(--choir-line, #ddd); border-radius: 4px; text-decoration: none;
}
.choir-pagination .page-numbers.current { background: var(--choir-accent, #7b2233); color: var(--choir-accent-contrast, #fff); border-color: var(--choir-accent, #7b2233); }