/* ==========================================================================
   28 — Firm › Appointments re-skin
   Matches "22 Firm Appointments.dc.html" (queue + calendar + create + detail).
   Re-skin only: restyles existing hooks (.ft-tab / .ft-cal* / .data-table /
   .badge* / .firm-form) — no new behaviour, no hardcoded data.
   Scoped to the firm shell. Reuses tokens from style.css.
   ========================================================================== */

/* --- Header: pill toggle (Queue | Calendar) ------------------------------- */
.portal-shell.firm-shell .firm-tabs{gap:10px}

.portal-shell.firm-shell .ft-tabpill{
	display:flex;align-items:center;gap:2px;
	background:var(--grey-100);border-radius:999px;padding:4px;
}
/* Reset the base tab look inside the pill; segmented control styling. */
.portal-shell.firm-shell .ft-tabpill .ft-tab{
	padding:8px 18px;border:none;border-radius:999px;
	font-size:13.5px;font-weight:600;color:var(--mid);
	transition:background .15s var(--ease),color .15s var(--ease);
}
.portal-shell.firm-shell .ft-tabpill .ft-tab:hover{background:rgba(21,34,77,.06);color:var(--blue-ink)}
.portal-shell.firm-shell .ft-tabpill .ft-tab.is-active{
	background:var(--blue-ink);color:#fff;
}
.portal-shell.firm-shell .ft-tabpill .ft-tab.is-active:hover{background:var(--blue-ink);color:#fff}

/* New-appointment button: match mockup radius (7px). */
.portal-shell.firm-shell .firm-tabs .btn-red{border-radius:7px;padding:11px 20px}

/* --- Queue: filter bar + table unified into one card ---------------------- */
/* The GET filter form becomes the top section of the table card. */
.portal-shell.firm-shell #firmApptFilter{
	background:#fff;border:1px solid var(--hair);border-bottom:none;
	border-radius:16px 16px 0 0;padding:18px 22px;margin-bottom:0;
	display:flex;gap:12px;flex-wrap:wrap;align-items:center;
}
.portal-shell.firm-shell #firmApptFilter .tb-search{
	flex:1;min-width:200px;border-radius:999px;
}
.portal-shell.firm-shell #firmApptFilter + .panel{
	border-top:none;border-radius:0 0 16px 16px;margin-top:0;
}

/* Queue table polish (uppercase muted headers, tabular times, roomy rows). */
.portal-shell.firm-shell #firmApptTable{table-layout:auto}
.portal-shell.firm-shell #firmApptTable th{
	font-size:11.5px;letter-spacing:.06em;background:#fff;
	border-bottom:1px solid var(--hair);padding:12px 14px;
}
.portal-shell.firm-shell #firmApptTable td{padding:14px;border-bottom:1px solid var(--grey-50);font-size:13.5px}
.portal-shell.firm-shell #firmApptTable td:first-child b{color:var(--blue-ink);font-size:14px}
.portal-shell.firm-shell #firmApptTable td.mono{color:var(--mid)}
.portal-shell.firm-shell #firmApptTable td:last-child{text-align:right}

/* Inline Confirm on requested rows → mockup red button. */
.portal-shell.firm-shell #firmApptTable .btn-view{
	background:var(--red);color:#fff;border-color:var(--red);
	border-radius:6px;padding:7px 14px;font-size:12.5px;
}
.portal-shell.firm-shell #firmApptTable .btn-view:hover{background:var(--red-dark);border-color:var(--red-dark)}

/* --- Status badges: recolour Completed to the mockup's blue wash ---------- */
/* Requested (amber), Confirmed (green), Declined/Cancelled (grey) already
   match via .badge-pending/.badge-active/.badge-closed. Only Completed
   (mapped to .badge-paid = green) needs the blue wash — scoped so shared
   invoice "Paid" badges elsewhere stay green. */
.portal-shell.firm-shell .appt-badge.badge-paid{
	background:var(--blue-pale);color:var(--blue);
}

/* --- Calendar: today red-tint + blue-wash day chips ----------------------- */
.portal-shell.firm-shell .ft-cal-cell.is-today{background:var(--red-pale)}
.portal-shell.firm-shell .ft-cal-cell.is-today .ft-cal-num{color:var(--red);font-weight:800}
.portal-shell.firm-shell .ft-cal-item{
	background:var(--blue-pale);color:var(--blue-ink);
	border-left:none;border-radius:5px;padding:2px 6px;
	font-size:10.5px;font-weight:600;
}
.portal-shell.firm-shell .ft-cal-item:hover{background:#dbe3f2}
.portal-shell.firm-shell .ft-cal-item .mono{color:var(--blue-ink)}

/* --- Create / detail forms: tighten the 2-col grid to the mockup --------- */
.portal-shell.firm-shell .firm-form .firm-grid{gap:14px}