/* === Events board tool — front-end styles ===
   The attendance/lecture markup below is shared verbatim with wp-admin
   (same template content, same JS) and leans on a few classes that only
   have real definitions inside wp-admin's own core CSS: .button and its
   variants, .form-table, .widefat. These aliases give them the same
   look outside wp-admin — scoped to .aea-em-board-view so nothing
   elsewhere on the site (theme buttons, other tables) is affected. */

.aea-em-board-view { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333; }
.aea-em-board-view * { box-sizing: border-box; }

.aea-em-board-view .button {
    display: inline-block; padding: 8px 16px; border: 1px solid #ccc; border-radius: 6px;
    background: #f6f7f7; color: #333; font-size: 14px; font-weight: 500; cursor: pointer;
    text-decoration: none; line-height: 1.4;
}
.aea-em-board-view .button:hover { background: #eee; }
.aea-em-board-view .button-primary { background: #2271b1; border-color: #2271b1; color: #fff; }
.aea-em-board-view .button-primary:hover { background: #1a5a8e; }
.aea-em-board-view .button-small { padding: 4px 10px; font-size: 13px; }
.aea-em-board-view .button-large { padding: 10px 20px; font-size: 15px; }
.aea-em-board-view .button-hero { padding: 12px 24px; font-size: 16px; }

.aea-em-board-view .form-table { width: 100%; border-collapse: collapse; }
.aea-em-board-view .form-table th { text-align: left; padding: 10px 12px 10px 0; font-weight: 600; font-size: 14px; vertical-align: top; width: 160px; }
.aea-em-board-view .form-table td { padding: 8px 12px 8px 0; }
.aea-em-board-view .form-table input[type="text"],
.aea-em-board-view .form-table input[type="email"],
.aea-em-board-view .form-table input[type="date"],
.aea-em-board-view .form-table input[type="time"],
.aea-em-board-view .form-table input[type="url"],
.aea-em-board-view .form-table select,
.aea-em-board-view .form-table textarea { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
.aea-em-board-view .regular-text { width: 100%; max-width: 360px; }
.aea-em-board-view .large-text { width: 100%; }

.aea-em-board-view .widefat { width: 100%; border-collapse: collapse; }
.aea-em-board-view .description { color: #888; font-size: 13px; }
.aea-em-board-view .notice { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.aea-em-board-view .notice-info { background: #e7f3fb; color: #1a5a8e; }
.aea-em-board-view .notice-warning { background: #fff8e5; color: #7a5c00; }

/* Drag-to-reorder isn't wired up on the front end (no jQuery UI Sortable
   loaded here) — hide the handle so it doesn't suggest it works. */
.aea-em-board-view .aea-em-drag-handle { display: none; }

/* === Lecture repeater ===
   aea_em_render_lecture_fields() is reused verbatim from the wp-admin
   metabox, but that markup's actual styling lives in an inline <style>
   block inside the metabox's own render function (aea_em_event_details_
   callback() in the main plugin file) — which only ever loads on the
   wp-admin post-edit screen. These rules are that same styling,
   reproduced here so the identical markup looks the same on the front
   end. If the metabox's styling changes, this block should be updated
   to match. */
.aea-em-board-view .aea-em-field { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.aea-em-board-view .aea-em-field label { min-width: 140px; font-weight: 600; font-size: 13px; }
.aea-em-board-view .aea-em-field input[type="date"],
.aea-em-board-view .aea-em-field input[type="time"],
.aea-em-board-view .aea-em-field input[type="url"],
.aea-em-board-view .aea-em-field input[type="text"],
.aea-em-board-view .aea-em-field select { padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; }
.aea-em-board-view .aea-em-field input[type="date"] { width: 180px; }
.aea-em-board-view .aea-em-field input[type="time"] { width: 140px; }
.aea-em-board-view .aea-em-field input[type="url"],
.aea-em-board-view .aea-em-field input[type="text"] { width: 100%; max-width: 400px; }
.aea-em-board-view .aea-em-field select { width: 180px; }
.aea-em-board-view .aea-em-field textarea { width: 100%; max-width: 500px; min-height: 60px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; }
.aea-em-board-view .aea-em-lecture { background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 14px; margin-bottom: 10px; position: relative; }
.aea-em-board-view .aea-em-lecture-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.aea-em-board-view .aea-em-lecture-title-display { font-weight: 600; font-size: 13px; color: #333; }
.aea-em-board-view .aea-em-remove-lecture { background: #dc3545; color: #fff; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.aea-em-board-view .aea-em-remove-lecture:hover { background: #c82333; }
.aea-em-board-view .aea-em-lecture-ceu { font-size: 12px; color: #666; font-style: italic; margin-top: 4px; }
.aea-em-board-view #aea-em-add-lecture { background: #0073aa; color: #fff; border: none; border-radius: 3px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
.aea-em-board-view #aea-em-add-lecture:hover { background: #005a87; }