/**
 * FIN & LAW — Client portal: Appointments view re-skin (16).
 *
 * Auto-loaded partial (assets/css/redesign/*.css) — do NOT enqueue here.
 * Scoped under `.portal-shell .rd-appt-view` (the wrapper lives only on this
 * client view) so nothing bleeds to the firm dashboard or other portal views.
 *
 * Re-skins the LIVE markup of view-appointments.php to match the mockup
 * `11 Appointments.dc.html`. Reuses existing hook classes (.appt-item,
 * .appt-date, .badge*, .btn-view, .appt-actions, .appt-reschedule-form, .fgrid)
 * and the shared theme tokens. No sample data, no new JS, no dead controls.
 */

/* -------------------------------------------------------------- list items */
.portal-shell .rd-appt-view .appt-list{list-style:none;margin:0;padding:0}

.portal-shell .rd-appt-view .appt-item{
	display:flex;align-items:flex-start;gap:16px;
	padding:16px 22px;border-bottom:1px solid #f5f6fa;flex-wrap:wrap;
}
.portal-shell .rd-appt-view .appt-item:last-child{border-bottom:none}

/* Date pill — upcoming (blue) */
.portal-shell .rd-appt-view .appt-date{
	width:64px;height:64px;min-width:64px;border-radius:10px;background:#eef1f8;
	flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.portal-shell .rd-appt-view .appt-date .day{
	font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:22px;
	color:#15224d;line-height:1;
}
.portal-shell .rd-appt-view .appt-date .mon{
	font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#26408d;
}
/* Date pill — past (muted grey) */
.portal-shell .rd-appt-view .appt-item--past .appt-date{background:#eef0f6}
.portal-shell .rd-appt-view .appt-item--past .appt-date .day,
.portal-shell .rd-appt-view .appt-item--past .appt-date .mon{color:#5d6470}

/* Info column */
.portal-shell .rd-appt-view .appt-info{flex:1;min-width:220px}
.portal-shell .rd-appt-view .appt-info .title{font-size:15px;font-weight:600;color:#1a1a2e}
.portal-shell .rd-appt-view .appt-info .sub{
	display:flex;align-items:center;gap:6px;font-size:13px;color:#5d6470;margin-top:4px;
}
.portal-shell .rd-appt-view .appt-info .sub svg{
	width:13px;height:13px;flex-shrink:0;margin-right:0;vertical-align:middle;
}

/* ---------------------------------------------------------- status badges */
/* Restyle the shared .badge-* pills to the mockup colours (scoped, no dot). */
.portal-shell .rd-appt-view .badge{
	display:inline-flex;align-items:center;gap:0;padding:3px 10px;border-radius:999px;
	font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
}
.portal-shell .rd-appt-view .badge::before{display:none}
.portal-shell .rd-appt-view .badge-active{background:#f0faf6;color:#1f8a5b}   /* Confirmed */
.portal-shell .rd-appt-view .badge-pending{background:#fef3e2;color:#d97706}  /* Requested */
.portal-shell .rd-appt-view .badge-paid{background:#eef1f8;color:#26408d}     /* Completed */
.portal-shell .rd-appt-view .badge-closed{background:#eef0f6;color:#5d6470}   /* Declined / Cancelled */

/* --------------------------------------------------------- context CTAs */
/* Join call / Directions — outlined blue, pushed to the right of the row. */
.portal-shell .rd-appt-view .btn-view{
	display:inline-flex;align-items:center;gap:6px;background:transparent;
	color:#26408d;border:1px solid #26408d;border-radius:7px;padding:8px 14px;
	font-size:13px;font-weight:600;align-self:flex-start;margin-left:auto;transition:background .18s var(--ease);
}
.portal-shell .rd-appt-view .btn-view:hover{background:#eef1f8;color:#26408d}

/* ---------------------------------------- cancel / reschedule (2FA flow) */
/* Full-width action bar below the item (structure from finlaw-appt-2fa.css). */
.portal-shell .rd-appt-view .appt-actions{
	flex-basis:100%;margin-top:12px;padding-top:12px;
	border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
/* Reschedule + Cancel rendered as subtle link-buttons to match the mockup. */
.portal-shell .rd-appt-view .appt-actions > .js-appt-reschedule,
.portal-shell .rd-appt-view .appt-actions > .js-appt-cancel{
	background:transparent;border:none;padding:0;font-size:13px;font-weight:600;
	line-height:1;cursor:pointer;border-radius:0;
}
.portal-shell .rd-appt-view .appt-actions > .js-appt-reschedule{color:#26408d}
.portal-shell .rd-appt-view .appt-actions > .js-appt-reschedule:hover{color:#d81f26}
.portal-shell .rd-appt-view .appt-actions > .js-appt-cancel{color:#5d6470}
.portal-shell .rd-appt-view .appt-actions > .js-appt-cancel:hover{color:#d81f26;background:transparent}
.portal-shell .rd-appt-view .appt-actions > .js-appt-reschedule:disabled,
.portal-shell .rd-appt-view .appt-actions > .js-appt-cancel:disabled{opacity:.5;cursor:default}

/* Inline reschedule panel */
.portal-shell .rd-appt-view .appt-reschedule-form{
	flex-basis:100%;margin-top:6px;padding:16px;border:none;border-radius:10px;
	background:#f5f6fa;display:flex;flex-direction:column;gap:12px;
}
.portal-shell .rd-appt-view .appt-reschedule-form label{
	display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#15224d;
}
.portal-shell .rd-appt-view .appt-reschedule-form input[type="datetime-local"],
.portal-shell .rd-appt-view .appt-reschedule-form textarea{
	width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #e5e7eb;
	border-radius:6px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
	transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.portal-shell .rd-appt-view .appt-reschedule-form input[type="datetime-local"]:focus,
.portal-shell .rd-appt-view .appt-reschedule-form textarea:focus{
	outline:none;border-color:#d81f26;box-shadow:0 0 0 3px rgba(216,31,38,.15);
}
.portal-shell .rd-appt-view .appt-reschedule-form textarea{resize:vertical}
.portal-shell .rd-appt-view .appt-reschedule-actions{display:flex;gap:10px}
/* "Send request" — red; "Close" — outlined (both keep 2fa hook classes). */
.portal-shell .rd-appt-view .btn-appt-submit{
	background:#d81f26;color:#fff;border:1px solid #d81f26;border-radius:7px;
	padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;
}
.portal-shell .rd-appt-view .btn-appt-submit:hover{background:#c8141b;border-color:#c8141b}
.portal-shell .rd-appt-view .js-appt-reschedule-cancel{
	background:transparent;border:1px solid #e5e7eb;border-radius:7px;
	padding:9px 16px;font-size:13px;font-weight:600;color:#15224d;cursor:pointer;
}
.portal-shell .rd-appt-view .js-appt-reschedule-cancel:hover{background:#eef1f8;border-color:#e5e7eb}
.portal-shell .rd-appt-view .appt-action-msg{
	flex-basis:100%;font-size:13px;font-weight:500;color:var(--ink);
}
.portal-shell .rd-appt-view .appt-action-msg.is-error{color:#c8141b}

/* -------------------------------------------------- request-form fields */
.portal-shell .rd-appt-view #finlaw-appt-form .fgrid{
	display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;
}
@media(max-width:560px){
	.portal-shell .rd-appt-view #finlaw-appt-form .fgrid{grid-template-columns:1fr}
}
.portal-shell .rd-appt-view #finlaw-appt-form .field{display:flex;flex-direction:column}
.portal-shell .rd-appt-view #finlaw-appt-form .field.full{grid-column:1/-1}
.portal-shell .rd-appt-view #finlaw-appt-form .field label{
	font-size:13px;font-weight:600;color:#15224d;margin-bottom:6px;
}
.portal-shell .rd-appt-view #finlaw-appt-form .field .req{color:#d81f26;margin-left:2px}
.portal-shell .rd-appt-view #finlaw-appt-form .field input,
.portal-shell .rd-appt-view #finlaw-appt-form .field select,
.portal-shell .rd-appt-view #finlaw-appt-form .field textarea{
	width:100%;box-sizing:border-box;border:1px solid #e5e7eb;border-radius:6px;
	padding:11px 12px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
	transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.portal-shell .rd-appt-view #finlaw-appt-form .field textarea{resize:vertical}
.portal-shell .rd-appt-view #finlaw-appt-form .field input::placeholder,
.portal-shell .rd-appt-view #finlaw-appt-form .field textarea::placeholder{color:#5d6470;opacity:.7}
/* Red focus ring on the request form (mockup uses red here, blue elsewhere). */
.portal-shell .rd-appt-view #finlaw-appt-form .field input:focus,
.portal-shell .rd-appt-view #finlaw-appt-form .field select:focus,
.portal-shell .rd-appt-view #finlaw-appt-form .field textarea:focus{
	outline:none;border-color:#d81f26;box-shadow:0 0 0 3px rgba(216,31,38,.15);
}
.portal-shell .rd-appt-view #finlaw-appt-form button.btn-red{padding:12px 22px;font-size:14.5px}