/*
Theme Name: SMS Client
Theme URI: https://smartmarketingstrategies.com
Author: Smart Marketing Strategies
Author URI: https://smartmarketingstrategies.com
Description: Minimal shell theme for the Smart Marketing Strategies client portal. Provides only the HTML skeleton, asset enqueueing, and branding hooks — no business logic. All portal screens (dashboard, projects, invoices, meetings, notifications, account) are rendered by the sms-client-portal plugin as custom page templates, not as theme templates or WP post/page content.
Version: 0.1.2
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: sms-client
*/

/* ==========================================================================
   Design System — Smart Marketing Strategies Client Portal
   Build plan: wp-content/plugins/sms-client-portal/SMS_Client_Portal_Plan_4.md, Section 4.

   Extracted from the supplied mockups (wp-content/sms-mockups/), with the
   original teal/green palette swapped for the confirmed sky-blue brand
   color (#5BD3F1) per the rebrand. Hand-written, traditional WordPress
   style.css — no Sass/PostCSS build step.

   Everything below is prefixed `sms-` and lives here (not in the plugin)
   because it's theme-owned presentation, reused by every portal screen the
   plugin renders inside this theme's shell.
   ========================================================================== */

/* -- Tokens --------------------------------------------------------------- */

:root {
	/* Brand / primary (sky blue, deeper shade at one end for gradient depth) */
	--sms-color-primary-50: #EFFBFE;
	--sms-color-primary-100: #DFF6FD;
	--sms-color-primary-300: #8FE3F6;
	--sms-color-primary-500: #5BD3F1; /* brand base */
	--sms-color-primary-600: #2FB8DE;
	--sms-color-primary-700: #1E8FB0;
	--sms-color-primary-800: #166B87; /* deep end of gradients */

	/* Neutrals */
	--sms-color-bg: #F7F8FA;
	--sms-color-surface: #FFFFFF;
	--sms-color-border: #E5E7EB;
	--sms-color-text-primary: #0F172A;
	--sms-color-text-secondary: #64748B;
	/* #94A3B8 (the original value) only hits ~2.6:1 against white/off-white
	   — well under WCAG AA's 4.5:1 for text. This is used for real text
	   (timestamps, empty-state copy, "(optional)" hints), not just
	   decorative icons, so it has to clear that bar. #6B7280 clears it
	   (~4.8:1) while staying visually one step lighter than text-secondary. */
	--sms-color-text-muted: #6B7280;
	--sms-color-text-inverse: #FFFFFF;

	/* Status (badges: project/invoice status, tabs) */
	--sms-color-success: #16A34A;
	--sms-color-success-bg: #DCFCE7;
	--sms-color-warning: #D97706;
	--sms-color-warning-bg: #FEF3C7;
	--sms-color-danger: #DC2626;
	--sms-color-danger-bg: #FEE2E2;
	--sms-color-neutral: #64748B;
	--sms-color-neutral-bg: #F1F5F9;
	--sms-color-accent: #7C6FF0;
	--sms-color-accent-bg: #EEEBFF;

	/* Spacing scale (4px base) */
	--sms-space-xs: 4px;
	--sms-space-sm: 8px;
	--sms-space-md: 16px;
	--sms-space-lg: 24px;
	--sms-space-xl: 32px;
	--sms-space-2xl: 48px;
	--sms-space-3xl: 64px;

	/* Radius (rounded-2xl look on cards) */
	--sms-radius-sm: 8px;
	--sms-radius-md: 12px;
	--sms-radius-lg: 16px;
	--sms-radius-xl: 20px;
	--sms-radius-full: 999px;

	/* Shadows (soft drop shadows) */
	--sms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--sms-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--sms-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

	/* Typography */
	--sms-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sms-text-xs: 12px;
	--sms-text-sm: 14px;
	--sms-text-base: 16px;
	--sms-text-lg: 18px;
	--sms-text-xl: 20px;
	--sms-text-2xl: 24px;
	--sms-text-3xl: 30px;
	--sms-text-4xl: 36px;
	--sms-font-medium: 500;
	--sms-font-semibold: 600;
	--sms-font-bold: 700;
}

/* -- Base ------------------------------------------------------------------ */

body {
	background: var(--sms-color-bg);
	color: var(--sms-color-text-primary);
	font-family: var(--sms-font-family);
	font-size: var(--sms-text-base);
	line-height: 1.5;
}

.sms-page {
	background: var(--sms-color-bg);
	min-height: 100vh;
}

/* -- Accessibility: visually-hidden text for screen readers ------------------
   Standard WordPress pattern (not a core default — themes are expected to
   define it themselves) for labels/headings that should exist for screen
   readers without showing on screen. */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- Accessibility: consistent visible keyboard focus ------------------------
   Covers plain links/buttons/inputs (already outline-able by default) and,
   explicitly, the div-based radio/button controls used throughout the
   wizards (select cards, radio rows, calendar days, notification rows) —
   those have no native focus indicator at all without this.
   Deliberately plain `:focus`, not `:focus-visible`: Safari didn't support
   `:focus-visible` until 15.4 (Mar 2022), and an unsupported pseudo-class
   in a selector list can drop the *entire* rule in older engines — safer
   to accept the ring showing on mouse clicks too than risk it not showing
   at all for keyboard users on an older browser. */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[role="radio"]:focus,
[tabindex]:focus {
	outline: 2px solid var(--sms-color-primary-600);
	outline-offset: 2px;
}

/* -- Sidebar nav (Section 5.2 App Shell) ----------------------------------- */

.sms-sidebar {
	display: flex;
	flex-direction: column;
	width: 256px;
	height: 100vh;
	background: var(--sms-color-surface);
	border-right: 1px solid var(--sms-color-border);
}

.sms-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: var(--sms-space-xs);
	padding: var(--sms-space-md);
}

.sms-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-radius: var(--sms-radius-md);
	color: var(--sms-color-text-secondary);
	font-weight: var(--sms-font-medium);
	text-decoration: none;
}

.sms-nav-item:hover {
	background: var(--sms-color-primary-50);
	color: var(--sms-color-primary-700);
}

.sms-nav-item.is-active {
	background: var(--sms-color-primary-100);
	color: var(--sms-color-primary-700);
	font-weight: var(--sms-font-semibold);
}

.sms-sidebar__user {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: var(--sms-space-md);
	border-top: 1px solid var(--sms-color-border);
}

.sms-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--sms-radius-full);
	background: var(--sms-color-primary-600);
	color: var(--sms-color-text-inverse);
	font-weight: var(--sms-font-semibold);
	font-size: var(--sms-text-sm);
	flex-shrink: 0;
}

/* -- Top header (Section 5.2 App Shell) ------------------------------------ */

.sms-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sms-space-md);
	padding: var(--sms-space-md) var(--sms-space-lg);
	background: var(--sms-color-surface);
	border-bottom: 1px solid var(--sms-color-border);
}

.sms-header__icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: var(--sms-radius-full);
	background: transparent;
	color: var(--sms-color-text-secondary);
	cursor: pointer;
}

.sms-header__icon-btn:hover {
	background: var(--sms-color-bg);
}

.sms-header__badge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	border-radius: var(--sms-radius-full);
	background: var(--sms-color-danger);
}

/* Hidden on desktop — the sidebar is always visible there. Shown by the
   responsive section below on narrow screens. */
.sms-header__menu-btn {
	display: none;
	margin-right: auto;
}

.sms-sidebar-backdrop {
	position: fixed;
	/* Longhand, not the `inset` shorthand — unsupported in Safari <14.1
	   (Apr 2021), which would leave this un-positioned instead of
	   full-screen. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	background: rgba(15, 23, 42, 0.5);
}

/* -- Buttons ---------------------------------------------------------------- */

.sms-btn {
	/* Explicit: browsers give <button> border-box by default (UA stylesheet)
	   but leave <a> at the CSS-spec default of content-box. .sms-btn is used
	   on both tags (e.g. the auth pages' Sign In <button> vs. Create an
	   Account <a>) — without this, an anchor with .sms-btn--block adds its
	   padding/border on top of 100% width instead of within it, so it
	   renders wider than a same-width button. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--sms-radius-md);
	font-family: inherit;
	font-size: var(--sms-text-sm);
	font-weight: var(--sms-font-semibold);
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.sms-btn--primary {
	background: linear-gradient(135deg, var(--sms-color-primary-500), var(--sms-color-primary-800));
	color: var(--sms-color-text-inverse);
	box-shadow: var(--sms-shadow-sm);
}

.sms-btn--primary:hover {
	filter: brightness(0.95);
}

.sms-btn--secondary {
	background: var(--sms-color-surface);
	color: var(--sms-color-primary-700);
	border-color: var(--sms-color-primary-600);
}

.sms-btn--secondary:hover {
	background: var(--sms-color-primary-50);
}

.sms-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* -- Card container ---------------------------------------------------------- */

.sms-card {
	background: var(--sms-color-surface);
	border-radius: var(--sms-radius-xl);
	box-shadow: var(--sms-shadow-md);
	padding: var(--sms-space-lg);
}

/* -- Gradient panel (auth branding panel, dashboard greeting banner) --------- */

.sms-gradient-panel {
	/* The brand gradient's lighter end (--sms-color-primary-500) is too
	   light for white text to clear WCAG AA on its own (~1.7:1 at full
	   opacity) — a flat dark scrim layered on top (first background layer
	   = topmost) brings it to ~5:1 across the whole gradient without
	   changing the underlying brand color. */
	background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), linear-gradient(135deg, var(--sms-color-primary-500), var(--sms-color-primary-800));
	color: var(--sms-color-text-inverse);
	border-radius: var(--sms-radius-xl);
}

/* -- Tab pills (Section 5.4 status filters, Section 5.5/5.6 tabs) ------------ */

.sms-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-full);
}

.sms-tabs--spaced {
	margin-bottom: var(--sms-space-lg);
}

.sms-tabs__item {
	padding: 8px 18px;
	border: none;
	border-radius: var(--sms-radius-full);
	background: transparent;
	color: var(--sms-color-text-secondary);
	font-family: inherit;
	font-size: var(--sms-text-sm);
	font-weight: var(--sms-font-medium);
	cursor: pointer;
}

.sms-tabs__item.is-active {
	background: var(--sms-color-surface);
	color: var(--sms-color-primary-700);
	box-shadow: var(--sms-shadow-sm);
}

/* -- Status badge ------------------------------------------------------------ */

.sms-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--sms-radius-full);
	font-size: var(--sms-text-xs);
	font-weight: var(--sms-font-semibold);
	background: var(--sms-color-neutral-bg);
	color: var(--sms-color-neutral);
}

.sms-badge--success {
	background: var(--sms-color-success-bg);
	color: var(--sms-color-success);
}

.sms-badge--warning {
	background: var(--sms-color-warning-bg);
	color: var(--sms-color-warning);
}

.sms-badge--danger {
	background: var(--sms-color-danger-bg);
	color: var(--sms-color-danger);
}

/* -- Empty-state block -------------------------------------------------------- */

.sms-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sms-space-sm);
	padding: var(--sms-space-2xl);
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-lg);
	text-align: center;
}

.sms-empty-state__icon {
	width: 48px;
	height: 48px;
	color: var(--sms-color-text-muted);
}

.sms-empty-state__title {
	font-size: var(--sms-text-lg);
	font-weight: var(--sms-font-bold);
	color: var(--sms-color-text-primary);
}

.sms-empty-state__subtext {
	max-width: 360px;
	color: var(--sms-color-text-secondary);
}

/* -- Stepper / progress indicator (Projects & Meetings wizards) -------------- */

.sms-stepper {
	display: flex;
	align-items: center;
	gap: var(--sms-space-sm);
}

.sms-stepper--spaced {
	margin-bottom: var(--sms-space-lg);
}

.sms-wizard-step__title {
	margin: 0 0 4px;
	font-size: var(--sms-text-lg);
	font-weight: var(--sms-font-bold);
}

.sms-wizard-step__subtitle {
	margin: 0 0 var(--sms-space-lg);
	color: var(--sms-color-text-secondary);
}

.sms-stepper__step {
	display: flex;
	align-items: center;
	gap: var(--sms-space-sm);
}

.sms-stepper__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--sms-color-border);
	border-radius: var(--sms-radius-full);
	background: var(--sms-color-surface);
	color: var(--sms-color-text-secondary);
	font-weight: var(--sms-font-semibold);
	font-size: var(--sms-text-sm);
	flex-shrink: 0;
}

.sms-stepper__step.is-active .sms-stepper__circle {
	background: var(--sms-color-primary-500);
	border-color: var(--sms-color-primary-500);
	color: var(--sms-color-text-inverse);
}

.sms-stepper__step.is-complete .sms-stepper__circle {
	background: var(--sms-color-primary-700);
	border-color: var(--sms-color-primary-700);
	color: var(--sms-color-text-inverse);
}

.sms-stepper__line {
	flex: 1;
	height: 2px;
	min-width: 24px;
	background: var(--sms-color-border);
}

.sms-stepper__step.is-complete + .sms-stepper__line {
	background: var(--sms-color-primary-700);
}

/* -- Form inputs -------------------------------------------------------------- */

.sms-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--sms-space-md);
}

.sms-field__label {
	font-size: var(--sms-text-sm);
	font-weight: var(--sms-font-semibold);
	color: var(--sms-color-text-primary);
}

.sms-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.sms-input-wrap__icon {
	position: absolute;
	left: 14px;
	display: flex;
	color: var(--sms-color-text-muted);
	pointer-events: none;
}

.sms-input,
.sms-textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--sms-color-border);
	border-radius: var(--sms-radius-md);
	background: var(--sms-color-surface);
	color: var(--sms-color-text-primary);
	font-family: inherit;
	font-size: var(--sms-text-sm);
}

.sms-input-wrap .sms-input {
	padding-left: 44px;
}

.sms-input:focus,
.sms-textarea:focus {
	outline: none;
	border-color: var(--sms-color-primary-500);
	box-shadow: 0 0 0 3px var(--sms-color-primary-100);
}

.sms-textarea {
	min-height: 120px;
	resize: vertical;
}

/* -- App layout (Phase 1: persistent sidebar + header shell) ---------------- */

.sms-app {
	display: flex;
	min-height: 100vh;
}

.sms-app__main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.sms-main {
	flex: 1;
	overflow-y: auto;
}

.sms-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sms-space-xl);
	box-sizing: border-box;
	width: 100%;
}

.sms-page-title {
	font-size: var(--sms-text-3xl);
	font-weight: var(--sms-font-bold);
	margin: 0 0 var(--sms-space-lg);
}

.sms-sidebar__logo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sms-space-lg) var(--sms-space-md);
	border-bottom: 1px solid var(--sms-color-border);
	margin-bottom: var(--sms-space-sm);
}

.sms-sidebar__logo-mark {
	font-weight: 800;
	font-size: var(--sms-text-xl);
	color: var(--sms-color-primary-700);
}

.sms-sidebar__logo-text {
	font-size: var(--sms-text-xs);
	color: var(--sms-color-text-secondary);
	line-height: 1.3;
}

.sms-sidebar__footer {
	display: flex;
	flex-direction: column;
	gap: var(--sms-space-sm);
	margin-top: auto;
	padding: var(--sms-space-md);
	border-top: 1px solid var(--sms-color-border);
}

.sms-sidebar__user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--sms-space-sm) var(--sms-space-md);
}

.sms-sidebar__user-name {
	font-weight: var(--sms-font-semibold);
	font-size: var(--sms-text-sm);
}

.sms-sidebar__user-email {
	font-size: var(--sms-text-xs);
	color: var(--sms-color-text-secondary);
}

.sms-sidebar__signout {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--sms-radius-md);
	color: var(--sms-color-danger);
	font-weight: var(--sms-font-medium);
	text-decoration: none;
}

.sms-sidebar__signout:hover {
	background: var(--sms-color-danger-bg);
}

.sms-header__user {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: var(--sms-space-sm);
	font-weight: var(--sms-font-medium);
}

.sms-avatar--sm {
	width: 32px;
	height: 32px;
	font-size: var(--sms-text-xs);
}

.sms-btn--block {
	width: 100%;
}

/* -- Auth screens (Section 5.1) ---------------------------------------------- */

.sms-auth-page {
	display: flex;
	min-height: 100vh;
	background: var(--sms-color-bg);
}

.sms-auth-page--simple {
	align-items: center;
	justify-content: center;
}

.sms-auth-page__brand {
	display: flex;
	flex: 1 1 50%;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--sms-space-2xl);
	color: var(--sms-color-text-inverse);
	/* This panel runs edge-to-edge (full viewport height, flush against the
	   page's own left/top/bottom edges) — unlike the dashboard banner, the
	   other .sms-gradient-panel consumer, it's never a floating card, so the
	   shared class's corner rounding doesn't apply here. */
	border-radius: 0;
}

.sms-auth-page__brand-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sms-auth-page__logo {
	font-size: var(--sms-text-2xl);
	font-weight: 800;
}

.sms-auth-page__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: var(--sms-radius-full);
	font-size: var(--sms-text-sm);
}

.sms-auth-page__headline {
	margin: 0 0 var(--sms-space-md);
	font-size: var(--sms-text-4xl);
	font-weight: 800;
	line-height: 1.15;
}

.sms-auth-page__headline span {
	/* No opacity reduction here (or on the sibling rules below) — white
	   text at reduced opacity over the brand gradient fails WCAG AA
	   contrast even after the scrim above; font-size/weight alone carry
	   the visual hierarchy instead. */
	color: inherit;
}

.sms-auth-page__subtext {
	max-width: 440px;
	margin-bottom: var(--sms-space-lg);
}

.sms-auth-page__features {
	display: flex;
	flex-direction: column;
	gap: var(--sms-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sms-auth-page__features li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sms-auth-page__features .dashicons {
	box-sizing: content-box;
	padding: 8px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
}

.sms-auth-page__powered-by {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--sms-space-sm);
}

.sms-auth-page__copyright {
	margin: 0;
	font-size: var(--sms-text-xs);
}

.sms-auth-page__form-side {
	display: flex;
	flex: 1 1 50%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sms-space-md);
	padding: var(--sms-space-xl);
}

.sms-auth-card {
	width: 100%;
	max-width: 420px;
	text-align: center;
}

.sms-auth-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--sms-space-md);
	border-radius: 50%;
	background: var(--sms-color-primary-100);
	color: var(--sms-color-primary-700);
}

.sms-auth-card__title {
	margin: 0 0 4px;
	font-size: var(--sms-text-2xl);
	font-weight: 800;
}

.sms-auth-card__subtitle {
	margin: 0 0 var(--sms-space-lg);
	color: var(--sms-color-text-secondary);
}

.sms-auth-card form {
	text-align: left;
}

.sms-auth-page__back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-sm);
	text-decoration: none;
}

@media (max-width: 900px) {
	.sms-auth-page__brand {
		display: none;
	}
}

/* -- Form field extras (auth forms) ------------------------------------------ */

.sms-field-end {
	display: flex;
	justify-content: flex-end;
	margin: -8px 0 var(--sms-space-md);
	font-size: var(--sms-text-sm);
}

.sms-field-end a {
	color: var(--sms-color-primary-700);
	text-decoration: none;
}

.sms-field-end--center {
	justify-content: center;
	margin-top: var(--sms-space-md);
}

.sms-field__optional {
	font-weight: 400;
	color: var(--sms-color-text-muted);
}

.sms-input-wrap__toggle {
	position: absolute;
	right: 14px;
	display: flex;
	padding: 0;
	border: none;
	background: none;
	color: var(--sms-color-text-muted);
	cursor: pointer;
}

.sms-divider {
	display: flex;
	align-items: center;
	margin: var(--sms-space-lg) 0;
	color: var(--sms-color-text-muted);
	font-size: var(--sms-text-xs);
	text-align: center;
}

.sms-divider::before,
.sms-divider::after {
	flex: 1;
	border-bottom: 1px solid var(--sms-color-border);
	content: "";
}

.sms-divider span {
	padding: 0 var(--sms-space-sm);
}

.sms-alert {
	margin-bottom: var(--sms-space-md);
	padding: 12px 16px;
	border-radius: var(--sms-radius-md);
	font-size: var(--sms-text-sm);
	text-align: left;
}

.sms-alert--danger {
	background: var(--sms-color-danger-bg);
	color: var(--sms-color-danger);
}

.sms-alert--success {
	background: var(--sms-color-success-bg);
	color: var(--sms-color-success);
}

.sms-help-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: var(--sms-space-lg);
	padding: var(--sms-space-md);
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-md);
	text-align: left;
}

.sms-help-box p {
	margin: 2px 0 0;
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-xs);
}

.sms-help-box .dashicons-external {
	margin-left: auto;
	color: var(--sms-color-text-muted);
}

/* -- Dashboard (Section 5.3) -------------------------------------------------- */

.sms-dashboard-banner {
	margin-bottom: var(--sms-space-lg);
	padding: var(--sms-space-lg) var(--sms-space-xl);
}

.sms-dashboard-banner__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--sms-space-lg);
}

.sms-dashboard-banner__greeting {
	/* No opacity reduction — see .sms-auth-page__headline span above for why. */
	color: inherit;
}

.sms-dashboard-banner__name {
	font-size: var(--sms-text-2xl);
	font-weight: var(--sms-font-bold);
}

.sms-avatar--on-dark {
	background: rgba(255, 255, 255, 0.2);
}

.sms-dashboard-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sms-space-lg);
}

.sms-stat-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sms-stat-item .dashicons {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--sms-radius-full);
}

.sms-stat-item__value {
	font-size: var(--sms-text-xl);
	font-weight: var(--sms-font-bold);
}

.sms-stat-item__label {
	font-size: var(--sms-text-sm);
}

.sms-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sms-space-md);
	margin-bottom: var(--sms-space-lg);
}

.sms-quick-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: var(--sms-space-lg);
	background: var(--sms-color-surface);
	border-radius: var(--sms-radius-xl);
	box-shadow: var(--sms-shadow-md);
	color: var(--sms-color-text-primary);
	font-weight: var(--sms-font-semibold);
	text-align: center;
	text-decoration: none;
}

.sms-quick-action__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sms-radius-full);
}

.sms-quick-action__icon--primary {
	background: var(--sms-color-primary-100);
	color: var(--sms-color-primary-700);
}

.sms-quick-action__icon--warning {
	background: var(--sms-color-warning-bg);
	color: var(--sms-color-warning);
}

.sms-quick-action__icon--accent {
	background: var(--sms-color-accent-bg);
	color: var(--sms-color-accent);
}

.sms-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sms-list__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--sms-color-border);
}

.sms-list__item:last-child {
	border-bottom: none;
}

.sms-activity-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--sms-color-border);
}

.sms-activity-item:last-child {
	border-bottom: none;
}

.sms-activity-item__icon {
	color: var(--sms-color-text-muted);
	flex-shrink: 0;
}

.sms-activity-item__description {
	flex: 1;
}

.sms-activity-item__time {
	color: var(--sms-color-text-muted);
	font-size: var(--sms-text-xs);
	white-space: nowrap;
}

.sms-help-banner {
	display: flex;
	align-items: center;
	gap: var(--sms-space-md);
	margin-top: var(--sms-space-lg);
	padding: var(--sms-space-lg);
	background: var(--sms-color-primary-50);
	border-radius: var(--sms-radius-xl);
}

.sms-help-banner__icon {
	color: var(--sms-color-primary-700);
	flex-shrink: 0;
}

.sms-help-banner__text {
	flex: 1;
}

.sms-help-banner__text p {
	margin: 2px 0 0;
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-sm);
}

/* -- Account page (Section 5.8) ---------------------------------------------- */

[x-cloak] {
	display: none !important;
}

.sms-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sms-space-lg);
}

.sms-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sms-space-md);
}

.sms-card__header h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--sms-text-lg);
}

.sms-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: none;
	color: var(--sms-color-primary-700);
	font-family: inherit;
	font-size: var(--sms-text-sm);
	font-weight: var(--sms-font-semibold);
	text-decoration: none;
	cursor: pointer;
}

.sms-account-profile-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: var(--sms-space-lg);
}

.sms-avatar--lg {
	width: 56px;
	height: 56px;
	font-size: var(--sms-text-lg);
}

.sms-account-profile-head__name {
	font-weight: var(--sms-font-bold);
	font-size: var(--sms-text-lg);
}

.sms-account-profile-head__email {
	color: var(--sms-color-text-secondary);
}

.sms-account-field {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--sms-space-sm);
	padding: 14px 16px;
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-md);
}

.sms-account-field--muted {
	color: var(--sms-color-text-secondary);
}

.sms-account-field__icon {
	color: var(--sms-color-text-muted);
	flex-shrink: 0;
}

.sms-account-field__label {
	display: block;
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-xs);
}

.sms-account-field__value {
	color: var(--sms-color-text-primary);
	font-weight: var(--sms-font-semibold);
}

.sms-form-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--sms-space-sm);
	margin-top: var(--sms-space-md);
}

.sms-form-actions > .sms-alert {
	flex-basis: 100%;
	margin-bottom: 0;
}

.sms-field-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sms-space-md);
}

.sms-security-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-md);
	cursor: pointer;
}

.sms-security-row__icon {
	color: var(--sms-color-text-muted);
}

.sms-security-row__title {
	font-weight: var(--sms-font-semibold);
}

.sms-security-row__subtitle {
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-xs);
}

.sms-security-row__chevron {
	margin-left: auto;
	color: var(--sms-color-text-muted);
}

.sms-security-form {
	margin-top: var(--sms-space-md);
	padding-top: var(--sms-space-md);
	border-top: 1px solid var(--sms-color-border);
}

/* -- Selection / radio cards (project type, timeline, budget, meeting type) -- */

.sms-select-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: var(--sms-space-lg);
	border: 1px solid var(--sms-color-border);
	border-radius: var(--sms-radius-lg);
	background: var(--sms-color-surface);
	text-align: center;
	cursor: pointer;
}

.sms-select-card:hover {
	border-color: var(--sms-color-primary-300);
}

.sms-select-card.is-selected {
	border-color: var(--sms-color-primary-500);
	background: var(--sms-color-primary-50);
	box-shadow: 0 0 0 1px var(--sms-color-primary-500) inset;
}

.sms-select-card__icon {
	width: 32px;
	height: 32px;
}

.sms-select-card__label {
	font-weight: var(--sms-font-semibold);
	color: var(--sms-color-text-primary);
}

.sms-select-card__subtext {
	font-size: var(--sms-text-xs);
	color: var(--sms-color-text-secondary);
}

.sms-select-card.is-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.sms-select-card.is-disabled:hover {
	border-color: var(--sms-color-border);
}

.sms-select-card--lg {
	padding: var(--sms-space-xl) var(--sms-space-lg);
}

.sms-select-card--lg .sms-select-card__icon {
	width: 40px;
	height: 40px;
}

.sms-type-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sms-space-md);
}

.sms-type-grid--lg {
	grid-template-columns: repeat(2, 1fr);
}

/* Horizontal variant of the same selection concept — Timeline/Budget/Meeting
   Type use a full-width row (icon left, title+subtext stacked right)
   instead of the centered icon-on-top card above. */
.sms-radio-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--sms-space-sm);
	padding: var(--sms-space-md) var(--sms-space-lg);
	border: 1px solid var(--sms-color-border);
	border-radius: var(--sms-radius-lg);
	background: var(--sms-color-surface);
	cursor: pointer;
}

.sms-radio-row:last-child {
	margin-bottom: 0;
}

.sms-radio-row:hover {
	border-color: var(--sms-color-primary-300);
}

.sms-radio-row.is-selected {
	border-color: var(--sms-color-primary-500);
	background: var(--sms-color-primary-50);
	box-shadow: 0 0 0 1px var(--sms-color-primary-500) inset;
}

.sms-radio-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-full);
	color: var(--sms-color-text-secondary);
	flex-shrink: 0;
}

.sms-radio-row__title {
	font-weight: var(--sms-font-semibold);
	color: var(--sms-color-text-primary);
}

.sms-radio-row__title .sms-radio-row__range {
	margin-left: 6px;
	color: var(--sms-color-primary-700);
	font-weight: var(--sms-font-medium);
}

.sms-radio-row__subtext {
	font-size: var(--sms-text-xs);
	color: var(--sms-color-text-secondary);
}

/* -- Icon tint utilities (record rows, choice cards) ------------------------- */

.sms-icon-tint--primary {
	background: var(--sms-color-primary-100);
	color: var(--sms-color-primary-700);
}

.sms-icon-tint--warning {
	background: var(--sms-color-warning-bg);
	color: var(--sms-color-warning);
}

.sms-icon-tint--accent {
	background: var(--sms-color-accent-bg);
	color: var(--sms-color-accent);
}

.sms-icon-tint--success {
	background: var(--sms-color-success-bg);
	color: var(--sms-color-success);
}

.sms-icon-tint--danger {
	background: var(--sms-color-danger-bg);
	color: var(--sms-color-danger);
}

/* Color-only variants (no background box) — for a bare icon glyph next to
   text, e.g. the Project Type selection cards, where the mockup shows a
   plain colored icon rather than a tinted circle. */
.sms-icon-color--primary {
	color: var(--sms-color-primary-600);
}

.sms-icon-color--warning {
	color: var(--sms-color-warning);
}

.sms-icon-color--accent {
	color: var(--sms-color-accent);
}

.sms-icon-color--success {
	color: var(--sms-color-success);
}

.sms-icon-color--danger {
	color: var(--sms-color-danger);
}

/* -- Calendar (Book a Meeting, Step 2) ---------------------------------------- */

.sms-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sms-space-md);
	margin-bottom: var(--sms-space-md);
	font-size: var(--sms-text-lg);
}

.sms-calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.sms-calendar.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.sms-calendar__weekday {
	padding-bottom: var(--sms-space-sm);
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-xs);
	font-weight: var(--sms-font-semibold);
	text-align: center;
}

.sms-calendar__day {
	display: flex;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	border-radius: var(--sms-radius-md);
	color: var(--sms-color-text-muted);
	font-size: var(--sms-text-sm);
}

.sms-calendar__day.is-empty {
	visibility: hidden;
}

.sms-calendar__day.is-available {
	background: var(--sms-color-bg);
	color: var(--sms-color-text-primary);
	font-weight: var(--sms-font-medium);
	cursor: pointer;
}

.sms-calendar__day.is-available:hover {
	background: var(--sms-color-primary-100);
}

.sms-calendar__day.is-selected {
	background: var(--sms-color-primary-500);
	color: var(--sms-color-text-inverse);
}

/* -- Time slots (Book a Meeting, Step 3) -------------------------------------- */

.sms-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sms-space-sm);
}

.sms-time-slot {
	justify-content: center;
	margin-bottom: 0;
}

/* -- Choice cards (Quick Create vs Guided Wizard, Meeting Type) -------------- */

.sms-choice-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sms-space-lg);
}

.sms-choice-card {
	display: block;
	padding: var(--sms-space-xl);
	border: 1px solid var(--sms-color-border);
	border-radius: var(--sms-radius-xl);
	background: var(--sms-color-surface);
	text-align: center;
	text-decoration: none;
}

.sms-choice-card:hover {
	border-color: var(--sms-color-primary-300);
	box-shadow: var(--sms-shadow-md);
}

.sms-choice-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--sms-space-md);
	border-radius: var(--sms-radius-lg);
}

.sms-choice-card__title {
	margin-bottom: 6px;
	color: var(--sms-color-text-primary);
	font-size: var(--sms-text-lg);
	font-weight: var(--sms-font-bold);
}

.sms-choice-card__desc {
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-sm);
}

/* -- Page header (back arrow + title, used by Projects' sub-screens) -------- */

.sms-page-header {
	display: flex;
	align-items: center;
	gap: var(--sms-space-sm);
	margin-bottom: var(--sms-space-xs);
}

.sms-page-header__back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--sms-color-text-secondary);
	text-decoration: none;
}

.sms-page-header__title {
	margin: 0;
	font-size: var(--sms-text-3xl);
	font-weight: var(--sms-font-bold);
}

.sms-page-subtitle {
	margin: 0 0 var(--sms-space-lg) 44px;
	color: var(--sms-color-text-secondary);
}

/* -- List page (Projects, and reusable for Invoices/Meetings) --------------- */

.sms-list-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sms-space-lg);
}

.sms-search-input {
	position: relative;
	max-width: 420px;
	margin-bottom: var(--sms-space-md);
}

.sms-search-input .dashicons {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--sms-color-text-muted);
}

.sms-search-input input {
	width: 100%;
	padding: 10px 16px 10px 44px;
	border: 1px solid transparent;
	border-radius: var(--sms-radius-full);
	background: var(--sms-color-bg);
	font-size: var(--sms-text-sm);
}

.sms-search-input input:focus {
	outline: none;
	border-color: var(--sms-color-primary-500);
	background: var(--sms-color-surface);
}

.sms-record-row {
	display: flex;
	align-items: center;
	gap: var(--sms-space-md);
	padding: var(--sms-space-md) 0;
	border-bottom: 1px solid var(--sms-color-border);
	color: inherit;
	text-decoration: none;
}

.sms-record-row:last-child {
	border-bottom: none;
}

.sms-record-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sms-radius-full);
	flex-shrink: 0;
}

.sms-record-row__title {
	font-weight: var(--sms-font-semibold);
	color: var(--sms-color-text-primary);
}

.sms-record-row__meta {
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-xs);
}

.sms-record-row__badge {
	margin-left: auto;
}

/* -- Notifications (Section 5.7) --------------------------------------------- */

.sms-notification-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: var(--sms-space-md) 0;
	border-bottom: 1px solid var(--sms-color-border);
	cursor: pointer;
}

.sms-notification-row:last-child {
	border-bottom: none;
}

.sms-notification-row.is-unread {
	background: var(--sms-color-primary-50);
	margin: 0 calc(var(--sms-space-lg) * -1);
	padding-left: var(--sms-space-lg);
	padding-right: var(--sms-space-lg);
}

.sms-notification-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--sms-color-bg);
	border-radius: var(--sms-radius-full);
	color: var(--sms-color-text-secondary);
	flex-shrink: 0;
}

.sms-notification-row__body {
	flex: 1;
}

.sms-notification-row__title {
	font-weight: var(--sms-font-semibold);
	color: var(--sms-color-text-primary);
}

.sms-notification-row__message {
	margin-top: 2px;
	color: var(--sms-color-text-secondary);
	font-size: var(--sms-text-sm);
}

.sms-notification-row__time {
	margin-top: 4px;
	color: var(--sms-color-text-muted);
	font-size: var(--sms-text-xs);
}

.sms-notification-row__dot {
	width: 8px;
	height: 8px;
	margin-top: 6px;
	background: var(--sms-color-primary-500);
	border-radius: var(--sms-radius-full);
	flex-shrink: 0;
}

/* -- Detail page (Project view; reusable for Invoice/Meeting detail) -------- */

.sms-detail-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--sms-space-lg);
}

/* ==========================================================================
   Responsive (Phase 9) — everything above this point is written desktop-
   first; this section is the mobile pass. One breakpoint (900px, matching
   the auth page's existing brand-panel cutoff from Phase 1) covers the app
   shell; a second, narrower one (480px) trims a couple of things further
   for small phones.
   ========================================================================== */

@media (max-width: 900px) {
	.sms-header__menu-btn {
		display: flex;
	}

	.sms-sidebar {
		position: fixed;
		/* Longhand, not `inset: 0 auto 0 0` — see .sms-sidebar-backdrop above. */
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		width: 280px;
		max-width: 85vw;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}

	.sms-sidebar.is-open {
		transform: translateX(0);
		box-shadow: var(--sms-shadow-lg);
	}

	.sms-content {
		padding: var(--sms-space-md);
	}

	.sms-dashboard-banner {
		padding: var(--sms-space-lg);
	}

	.sms-dashboard-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sms-space-md);
	}

	.sms-quick-actions,
	.sms-choice-cards,
	.sms-type-grid,
	.sms-type-grid--lg,
	.sms-field-row {
		grid-template-columns: 1fr;
	}

	.sms-list-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sms-space-sm);
	}

	.sms-list-toolbar .sms-btn {
		align-self: stretch;
	}

	.sms-auth-page__form-side {
		padding: var(--sms-space-lg);
	}
}

@media (max-width: 480px) {
	.sms-header__user span {
		display: none;
	}

	.sms-page-title {
		font-size: var(--sms-text-2xl);
	}

	.sms-time-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sms-calendar__day {
		font-size: var(--sms-text-xs);
	}
}