/*
 * AIMBE Connect — Frontend Component Styles
 * BEM naming: .ac-{component}__{element}--{modifier}
 * Designed to map 1-to-1 to Elementor widget controls for future conversion.
 */

/* =========================================================
   Shared base
   ========================================================= */

.ac-member-section {
	font-family: inherit;
	color: #1a1a2e;
}

/* Member profile form (Elementor): wrapper + optional edit toggle */

/* Locked state: muted inputs so users know they can't type */
.ac-portal-profile-form:not(.is-editing) input[readonly],
.ac-portal-profile-form:not(.is-editing) textarea[readonly] {
	background-color: #f7f7f8;
	color: #444;
	cursor: default;
	border-color: #e0e0e0;
}
.ac-portal-profile-form:not(.is-editing) select[disabled] {
	background-color: #f7f7f8;
	color: #444;
	cursor: default;
	opacity: 0.85;
}

/* Editing state: normal input appearance + subtle left border indicator */
.ac-portal-profile-form.is-editing {
	border-left: 3px solid #1e3a5f;
	padding-left: 12px;
}

.ac-portal-profile-form.is-editing .ac-portal-profile-form__toggle {
	opacity: 0.5;
}

.ac-portal-profile-form__toggle {
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
	vertical-align: middle;
}

.ac-portal-profile-form__cancel {
	cursor: pointer;
	font-size: 14px;
	color: #6b7280;
	background: none;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	padding: 6px 16px;
	margin-left: 8px;
	transition: color 0.15s, border-color 0.15s;
}
.ac-portal-profile-form__cancel:hover {
	color: #1a1a2e;
	border-color: #9ca3af;
}

/* =========================================================
   Tabs  (.ac-tabs)
   Used by: Awards, Renewals
   ========================================================= */

.ac-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #e5e7eb;
	margin-bottom: 24px;
}

.ac-tabs__tab {
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 500;
	color: #6b7280;
	cursor: pointer;
	border: none;
	background: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.2s, border-color 0.2s;
	text-decoration: none;
}

.ac-tabs__tab:hover {
	color: #1a1a2e;
}

.ac-tabs__tab--active {
	color: #1a1a2e;
	border-bottom-color: #1a1a2e;
	font-weight: 600;
}

.ac-tabs__panel {
	display: none;
}

.ac-tabs__panel--active {
	display: block;
}

/* =========================================================
   Awards  (.ac-awards)
   Layout: card list with year badge, title, citation
   ========================================================= */

.ac-awards {
	width: 100%;
}

.ac-awards__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-awards__card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 18px 22px;
	transition: box-shadow 0.2s;
}

.ac-awards__card:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.ac-awards__year {
	font-size: 13px;
	font-weight: 700;
	color: #1d3a6e;
	margin-bottom: 6px;
	letter-spacing: 0.3px;
}

.ac-awards__title {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px;
	line-height: 1.4;
}

.ac-awards__citation {
	font-size: 14px;
	color: #6b7280;
	margin: 0;
	line-height: 1.6;
}

.ac-awards__org {
	font-size: 12px;
	color: #9ca3af;
	margin-top: 6px;
}

.ac-awards__empty {
	color: #9ca3af;
	font-style: italic;
	padding: 20px 0;
}

/* =========================================================
   Renewals  (.ac-renewals)
   Layout: table, Renewal State badge, Actions column
   ========================================================= */

.ac-renewals {
	width: 100%;
}

.ac-renewals__table-wrap {
	overflow-x: auto;
}

.ac-renewals__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ac-renewals__table thead tr {
	background: #1d3a6e;
	color: #fff;
}

.ac-renewals__table th {
	padding: 11px 14px;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.ac-renewals__table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
	color: #374151;
}

.ac-renewals__table tbody tr:last-child td {
	border-bottom: none;
}

.ac-renewals__table tbody tr:hover td {
	background: #f9fafb;
}

/* State badge */
.ac-renewals__badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	background: #1d3a6e;
	color: #fff;
	white-space: nowrap;
}

.ac-renewals__badge--paid    { background: #059669; }
.ac-renewals__badge--overdue { background: #dc2626; }
.ac-renewals__badge--pending { background: #d97706; }
.ac-renewals__badge--renew   { background: #1d3a6e; }

/* Actions column */
.ac-renewals__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ac-renewals__btn {
	display: inline-block;
	padding: 4px 14px;
	background: #1d3a6e;
	color: #fff !important;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}

.ac-renewals__btn:hover { background: #162d57; }

.ac-renewals__refresh {
	color: #6b7280;
	font-size: 16px;
	cursor: default;
}

.ac-renewals__empty {
	color: #9ca3af;
	font-style: italic;
	padding: 20px 0;
}

/* =========================================================
   Donations  (.ac-donations)
   Layout: header with CTA button, table
   ========================================================= */

.ac-donations {
	width: 100%;
}

.ac-donations__header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.ac-donations__btn {
	display: inline-block;
	padding: 10px 22px;
	background: #1d3a6e;
	color: #fff !important;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: background 0.2s;
}

.ac-donations__btn:hover { background: #162d57; }

.ac-donations__table-wrap {
	overflow-x: auto;
}

.ac-donations__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ac-donations__table thead tr {
	background: #1d3a6e;
	color: #fff;
}

.ac-donations__table th {
	padding: 11px 14px;
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.ac-donations__table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
	color: #374151;
}

.ac-donations__table tbody tr:last-child td {
	border-bottom: none;
}

.ac-donations__table tbody tr:hover td {
	background: #f9fafb;
}

.ac-donations__link {
	color: #1d3a6e;
	text-decoration: underline;
}

.ac-donations__empty {
	color: #9ca3af;
	font-style: italic;
	padding: 20px 0;
}

/* =========================================================
   Login prompt (shown to non-logged-in users)
   ========================================================= */

.ac-login-prompt {
	padding: 20px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	color: #6b7280;
	font-size: 14px;
	text-align: center;
}

.ac-login-prompt a {
	color: #1d3a6e;
	font-weight: 600;
}

/* =========================================================
   Profile portal: photo change overlay
   ========================================================= */

/* Wrapper must be position:relative so the overlay positions correctly.
   Elementor container should also have class ac-portal-profile-photo. */
.ac-portal-profile-photo {
	position: relative;
	display: inline-block;
	line-height: 0; /* prevents gap below inline image */
}

/* Camera overlay — hidden by default, shown in edit mode */
.ac-portal-profile-photo__overlay {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.48);
	border-radius: inherit;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.02em;
	cursor: pointer;
	gap: 6px;
	transition: background 0.15s;
	text-align: center;
	padding: 8px;
	box-sizing: border-box;
}

.ac-portal-profile-photo__overlay:hover {
	background: rgba(0, 0, 0, 0.6);
}

.ac-portal-profile-photo__label {
	display: block;
	line-height: 1.2;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Show overlay when the profile form is in editing state */
.ac-portal-profile-form.is-editing .ac-portal-profile-photo__overlay {
	display: flex;
}

/* Spinner shown while uploading */
.ac-portal-profile-photo__spinner {
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ac-photo-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes ac-photo-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================
   News submission TinyMCE overrides
   Forces visible toolbar buttons + clean borders on any theme.
   Scoped to the field wrapper so we don't affect other editors.
   ========================================================= */

.elementor-field-group-ac_news_editor .mce-tinymce {
	border: 1px solid #d5d8de !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	overflow: hidden;
	background: #fff;
}

.elementor-field-group-ac_news_editor .mce-toolbar-grp,
.elementor-field-group-ac_news_editor .mce-top-part,
.elementor-field-group-ac_news_editor .mce-toolbar {
	background: #f6f7f7 !important;
	border-bottom: 1px solid #e0e3e8 !important;
	box-shadow: none !important;
}

.elementor-field-group-ac_news_editor .mce-btn,
.elementor-field-group-ac_news_editor .mce-btn button {
	background: transparent !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	border-radius: 4px !important;
	color: #1d2327 !important;
}

.elementor-field-group-ac_news_editor .mce-btn:hover,
.elementor-field-group-ac_news_editor .mce-btn:focus,
.elementor-field-group-ac_news_editor .mce-btn:hover button {
	background: #e8eaed !important;
	border-color: #c5c7cb !important;
	color: #0a0a0a !important;
}

.elementor-field-group-ac_news_editor .mce-btn.mce-active,
.elementor-field-group-ac_news_editor .mce-btn.mce-active button {
	background: #d8dadd !important;
	color: #0a0a0a !important;
}

.elementor-field-group-ac_news_editor .mce-ico {
	color: #1d2327 !important;
	text-shadow: none !important;
}

.elementor-field-group-ac_news_editor .mce-edit-area {
	background: #fff;
}

/* ==========================================================
   TinyMCE floating dialog (Insert link, charmap, etc.)

   STRATEGY
   --------
   TinyMCE 4 uses two competing CSS patterns that theme CSS
   commonly breaks:

   1. abs-layout: containers are position:relative, children
      are position:absolute with inline left/top/width/height
      set by JS. If theme resets position:static these break.

   2. box-sizing split: the skin resets almost everything to
      content-box, but BUTTONS are explicitly border-box so
      their padding stays inside the JS-computed height rect.
      Applying content-box to * (including buttons) re-breaks
      the button sizing.

   Rules below:
   - Restore position:relative / position:absolute only where
     TinyMCE's skin needs it, using !important to beat themes.
   - Apply content-box to non-button elements only.
   - Apply border-box to buttons (matches skin intent).
   - Only override visual properties (color/bg/border/font)
     that the theme is actively breaking.
   ========================================================== */

/* ── Box-sizing: content-box for containers/inputs only ── */
.mce-window .mce-container,
.mce-window .mce-container-body,
.mce-window .mce-abs-layout,
.mce-window .mce-formitem,
.mce-window input.mce-textbox {
	box-sizing: content-box !important;
}

/* ── Buttons MUST be border-box (skin's own rule) ──────── */
.mce-window button,
.mce-window .mce-btn {
	box-sizing: border-box !important;
}

/* ── Positioning: re-apply skin layout rules ────────────
   The skin mega-reset sets position:static on everything,
   then re-applies specific positions below. If theme CSS
   has higher specificity, those re-applications lose.
   We re-apply them here with !important.
   ──────────────────────────────────────────────────────── */
.mce-window .mce-abs-layout {
	position: relative !important;
	overflow: hidden !important;
}

html .mce-window .mce-abs-layout-item,
html .mce-window .mce-abs-end {
	position: absolute !important;
}

/* Window head must be relative so the close button sits in it */
.mce-window-head {
	position: relative !important;
	background: #1d2d5e !important;
	border-bottom: 1px solid #1d2d5e !important;
	padding: 9px 15px !important;
}

/* Close button: absolute in top-right of the head */
.mce-window-head .mce-close {
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	height: 38px !important;
	width: 38px !important;
	text-align: center !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mce-window-head .mce-close i,
.mce-window-head .mce-close .mce-ico {
	color: rgba(255,255,255,0.8) !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

.mce-window-head .mce-close:hover i,
.mce-window-head .mce-close:hover .mce-ico {
	color: #fff !important;
}

.mce-window-head .mce-title {
	color: #fff !important;
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
}

/* ── Text inputs (restore skin height 28px, clear theme bleed) */
.mce-window input.mce-textbox {
	background: #fff !important;
	border: 1px solid #c5c5c5 !important;
	color: #595959 !important;
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: normal !important;
	height: 28px !important;
	padding: 0 4px !important;
	margin: 0 !important;
	box-shadow: none !important;
	vertical-align: top !important;
}

.mce-window input.mce-textbox:focus {
	border-color: #1d2d5e !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ── Labels ──────────────────────────────────────────────── */
.mce-window .mce-label {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	color: #595959 !important;
	text-shadow: none !important;
}

/* ── Target listbox ──────────────────────────────────────── */
.mce-window .mce-btn.mce-listbox,
.mce-window .mce-btn.mce-menubtn {
	background: #fff !important;
	border: 1px solid #c5c5c5 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.mce-window .mce-btn.mce-listbox button,
.mce-window .mce-btn.mce-menubtn button {
	color: #595959 !important;
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	text-align: left !important;
	background: transparent !important;
	border: 0 !important;
	padding: 4px 8px !important;
	height: 100% !important;
	width: 100% !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.mce-foot {
	background: #f6f7f7 !important;
	border-top: 1px solid #c5c5c5 !important;
}

/* ── OK / Cancel action buttons ─────────────────────────── */
.mce-foot .mce-btn,
.mce-foot .mce-widget.mce-btn {
	background: #fff !important;
	border: 1px solid #c5c5c5 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.mce-foot .mce-btn button {
	color: #595959 !important;
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
}

.mce-foot .mce-btn:hover {
	background: #e8eaed !important;
}

/* OK primary — brand navy */
.mce-foot .mce-btn.mce-primary,
.mce-foot .mce-widget.mce-btn.mce-primary {
	background-color: #1d2d5e !important;
	border-color: #1d2d5e !important;
}

.mce-foot .mce-btn.mce-primary button,
.mce-foot .mce-btn.mce-primary .mce-txt {
	color: #fff !important;
}

.mce-foot .mce-btn.mce-primary:hover {
	background-color: #162249 !important;
	border-color: #162249 !important;
}

/* =========================================================
   Fellow name link — used in [ac_fb_more_news_header] on
   single Fellowbook pages and in UE post-list templates.
   Dotted underline at rest signals "this is a link" without
   fighting the surrounding heading colour chosen in Elementor.
   ========================================================= */

a.ac-fb-fellow-name {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

a.ac-fb-fellow-name:hover,
a.ac-fb-fellow-name:focus {
	text-decoration: underline;
	text-decoration-style: solid;
	text-underline-offset: 3px;
	outline: none;
}