/* ============================================================
   Por & Prem Wedding — Material Design 3 Components
   Version: 0.26.0
   Depends on: tokens.css (MD3 system tokens + Material Symbols font)

   All .m3-* classes are CSS-only (no JS dependency). Ripple is
   pure CSS via radial-gradient pseudo-element. Material Web
   Components (@material/web) loaded conditionally on admin pages
   only — see material-init.js.

   Cultural exceptions (NEVER replace):
     🧧 ang pao    🕊 dove (รดน้ำสังข์)
     🪑 seat       🍃 leaf
     🌹 rose       💍 ring
     👰 bride      🤵 groom
     ❤️🍀💰👶🏠 mood emoji
     🥉🥈🥇🏆 tier icons (gamification)
   ============================================================ */


/* ============================================================
   MATERIAL SYMBOLS — variable font icon system
   ============================================================ */
.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	user-select: none;
	flex-shrink: 0;
}

/* MD3 canonical active state: filled icon when ancestor is current page */
[aria-current="page"] .material-symbols-rounded,
.m3-nav-bar__item.is-active .material-symbols-rounded,
.m3-tabs__tab.is-active .material-symbols-rounded {
	font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Size variants — opsz axis MUST track font-size or glyph optical-scales wrong */
.material-symbols-rounded--sm      { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.material-symbols-rounded--lg      { font-size: 32px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 32; }
.material-symbols-rounded--xl      { font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
/* Display-scale variants for LIFF state icons (success/error/offline 48-80px) */
.material-symbols-rounded--xxl     { font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.material-symbols-rounded--display { font-size: 64px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
.material-symbols-rounded--hero    { font-size: 80px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }


/* ============================================================
   TOP APP BAR (small variant)
   ============================================================ */
.m3-top-app-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 64px;
	padding: 8px 4px 8px 4px;
	background: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.m3-top-app-bar--scrolled {
	background: var(--md-sys-color-surface-container);
}
.m3-top-app-bar__leading {
	display: flex;
	align-items: center;
	margin-inline-start: 4px;
}
.m3-top-app-bar__headline {
	flex: 1;
	font-family: var(--font-heading);
	font-size: var(--md-sys-typescale-title-large-size);
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	padding-inline: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.porprem-locale-th .m3-top-app-bar__headline { font-family: var(--font-heading-th); }
.m3-top-app-bar__trailing {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline-end: 4px;
}


/* ============================================================
   NAV BAR (bottom, mobile primary navigation)
   ============================================================ */
.m3-nav-bar {
	position: sticky;
	bottom: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	min-height: 80px;
	padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--md-sys-color-surface-container);
	color: var(--md-sys-color-on-surface);
	box-shadow: var(--md-sys-elevation-2);
}
.m3-nav-bar__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 48px;
	padding: 4px 0;
	text-decoration: none;
	color: var(--md-sys-color-on-surface-variant);
	transition: color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}
.m3-nav-bar__item:hover { color: var(--md-sys-color-on-surface); }
.m3-nav-bar__item.is-active,
.m3-nav-bar__item[aria-current="page"] {
	color: var(--md-sys-color-on-surface);
}
.m3-nav-bar__icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 32px;
	border-radius: var(--md-sys-shape-corner-full);
	transition: background-color var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard);
}
.m3-nav-bar__item.is-active .m3-nav-bar__icon-wrap,
.m3-nav-bar__item[aria-current="page"] .m3-nav-bar__icon-wrap {
	background: var(--md-sys-color-secondary-container);
}
.m3-nav-bar__label {
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-label-medium-size);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.5px;
	color: inherit;
	text-align: center;
}
.porprem-locale-th .m3-nav-bar__label { font-family: var(--font-body-th); letter-spacing: 0; }

/* Compact label-hidden mode for <360px viewports */
@media (max-width: 359px) {
	.m3-nav-bar__label { display: none; }
	.m3-nav-bar { min-height: 64px; }
}


/* ============================================================
   CARD — filled / elevated / outlined
   ============================================================ */
.m3-card {
	position: relative;
	display: block;
	background: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	border-radius: var(--md-sys-shape-corner-medium);
	padding: 16px;
	overflow: hidden;
	transition: background-color var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard),
				box-shadow var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard);
}
.m3-card--filled {
	background: var(--md-sys-color-surface-container-highest);
	box-shadow: var(--md-sys-elevation-0);
}
.m3-card--elevated {
	background: var(--md-sys-color-surface-container-low);
	box-shadow: var(--md-sys-elevation-1);
}
.m3-card--outlined {
	background: var(--md-sys-color-surface);
	border: 1px solid var(--md-sys-color-outline-variant);
	box-shadow: var(--md-sys-elevation-0);
}
.m3-card--filled-tonal {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}

/* Interactive card */
a.m3-card,
button.m3-card {
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
a.m3-card--elevated:hover,
button.m3-card--elevated:hover {
	box-shadow: var(--md-sys-elevation-2);
}
a.m3-card--outlined:hover,
button.m3-card--outlined:hover {
	background: var(--md-sys-color-surface-container-low);
}


/* ============================================================
   BUTTON — filled / filled-tonal / outlined / text
   ============================================================ */
.m3-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	min-width: 64px;
	padding: 10px 24px;
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: 500;
	letter-spacing: 0.1px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	transition: background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
				box-shadow var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
				color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
	-webkit-tap-highlight-color: transparent;
}
.porprem-locale-th .m3-button { font-family: var(--font-body-th); letter-spacing: 0; }

.m3-button .material-symbols-rounded { font-size: 18px; }

.m3-button:disabled,
.m3-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.38;
}

.m3-button--filled {
	background: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
}
.m3-button--filled:not(:disabled):hover { box-shadow: var(--md-sys-elevation-1); }
.m3-button--filled:not(:disabled):active { background: color-mix(in srgb, var(--md-sys-color-primary) 88%, black); }

.m3-button--filled-tonal {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}
.m3-button--filled-tonal:not(:disabled):hover { box-shadow: var(--md-sys-elevation-1); }

.m3-button--outlined {
	background: transparent;
	color: var(--md-sys-color-primary);
	border: 1px solid var(--md-sys-color-outline);
}
.m3-button--outlined:not(:disabled):hover {
	background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.m3-button--text {
	background: transparent;
	color: var(--md-sys-color-primary);
	padding: 10px 12px;
	min-width: 48px;
}
.m3-button--text:not(:disabled):hover {
	background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

/* Pure-CSS ripple on press */
.m3-button::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15000% 15000%;
	opacity: 0;
	transition: background-size var(--md-sys-motion-duration-long-1) var(--md-sys-motion-easing-decelerated),
				opacity var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard);
	pointer-events: none;
}
.m3-button:not(:disabled):active::after {
	background-size: 100% 100%;
	opacity: 0.16;
	transition: 0s;
}


/* ============================================================
   ICON BUTTON — 48dp circular tap target
   ============================================================ */
.m3-icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	border: none;
	border-radius: var(--md-sys-shape-corner-full);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
.m3-icon-button:hover {
	background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.m3-icon-button:active {
	background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
.m3-icon-button--filled-tonal {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}
.m3-icon-button--filled-tonal:hover {
	background: color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, black);
}
.m3-icon-button[disabled],
.m3-icon-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.38;
}


/* ============================================================
   FAB — Floating Action Button + Extended
   ============================================================ */
.m3-fab {
	position: fixed;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	right: 16px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 56px;
	height: 56px;
	padding: 0;
	background: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);
	border: none;
	border-radius: var(--md-sys-shape-corner-large);
	box-shadow: var(--md-sys-elevation-3);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard),
				transform var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-emphasized);
}
.m3-fab:hover { box-shadow: var(--md-sys-elevation-4); }
.m3-fab:active { transform: scale(0.96); }

.m3-fab--extended {
	width: auto;
	min-width: 80px;
	height: 56px;
	padding: 0 20px 0 16px;
	gap: 12px;
	border-radius: var(--md-sys-shape-corner-large);
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: 500;
	letter-spacing: 0.1px;
	white-space: nowrap;
}
.porprem-locale-th .m3-fab--extended { font-family: var(--font-body-th); letter-spacing: 0; }

.m3-fab--tonal {
	background: var(--md-sys-color-tertiary-container);
	color: var(--md-sys-color-on-tertiary-container);
}

.m3-fab--above-nav {
	/* When tab nav is present (80dp), lift FAB above it */
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   CHIP — assist / filter / input / suggestion
   ============================================================ */
.m3-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 6px 16px;
	background: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	border: 1px solid var(--md-sys-color-outline-variant);
	border-radius: var(--md-sys-shape-corner-small);
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: 500;
	letter-spacing: 0.1px;
	cursor: pointer;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
.porprem-locale-th .m3-chip { font-family: var(--font-body-th); letter-spacing: 0; }
.m3-chip .material-symbols-rounded { font-size: 18px; }

.m3-chip:hover {
	background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-low));
}

.m3-chip--assist { /* default */ }

.m3-chip--filter.is-selected,
.m3-chip--filter[aria-selected="true"] {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
	border-color: transparent;
}

.m3-chip--input {
	padding-inline-end: 8px;
}

.m3-chip--suggestion {
	border-color: var(--md-sys-color-outline);
}

.m3-chip[disabled],
.m3-chip[aria-disabled="true"] {
	opacity: 0.38;
	cursor: not-allowed;
}


/* ============================================================
   TEXT FIELD — filled variant with floating label (pure CSS)
   ============================================================ */
.m3-text-field {
	position: relative;
	display: block;
	margin-bottom: 16px;
}
.m3-text-field--filled {
	background: var(--md-sys-color-surface-container-highest);
	border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
	border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
	transition: border-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
.m3-text-field--filled:focus-within {
	border-bottom-width: 2px;
	border-bottom-color: var(--md-sys-color-primary);
}

.m3-text-field__input,
.m3-text-field__textarea {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 24px 16px 8px;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-large-size);
	color: var(--md-sys-color-on-surface);
	line-height: 1.4;
	resize: none;
}
.porprem-locale-th .m3-text-field__input,
.porprem-locale-th .m3-text-field__textarea { font-family: var(--font-body-th); }

.m3-text-field__textarea {
	min-height: 120px;
	padding-top: 28px;
	padding-bottom: 12px;
	resize: vertical;
}

.m3-text-field__label {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-large-size);
	color: var(--md-sys-color-on-surface-variant);
	pointer-events: none;
	transition: top var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
				transform var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
				font-size var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard),
				color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
.porprem-locale-th .m3-text-field__label { font-family: var(--font-body-th); }

.m3-text-field--textarea .m3-text-field__label {
	top: 24px;
	transform: translateY(0);
}

/* Floating state — focused or has value */
.m3-text-field--filled:focus-within .m3-text-field__label,
.m3-text-field--filled .m3-text-field__input:not(:placeholder-shown) ~ .m3-text-field__label,
.m3-text-field--filled .m3-text-field__textarea:not(:placeholder-shown) ~ .m3-text-field__label {
	top: 8px;
	transform: translateY(0);
	font-size: var(--md-sys-typescale-body-small-size);
}
.m3-text-field--filled:focus-within .m3-text-field__label {
	color: var(--md-sys-color-primary);
}

.m3-text-field__supporting {
	display: block;
	padding: 4px 16px 0;
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-small-size);
	color: var(--md-sys-color-on-surface-variant);
}
.porprem-locale-th .m3-text-field__supporting { font-family: var(--font-body-th); }

.m3-text-field--error {
	border-bottom-color: var(--md-sys-color-error);
}
.m3-text-field--error .m3-text-field__supporting,
.m3-text-field--error .m3-text-field__label {
	color: var(--md-sys-color-error);
}


/* ============================================================
   LIST ITEM — 1/2/3 line
   ============================================================ */
.m3-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.m3-list-item {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 12px 16px;
	background: transparent;
	color: var(--md-sys-color-on-surface);
	text-decoration: none;
	cursor: default;
	transition: background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
a.m3-list-item,
button.m3-list-item {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
a.m3-list-item:hover,
button.m3-list-item:hover {
	background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.m3-list-item--two-line { min-height: 72px; }
.m3-list-item--three-line { min-height: 88px; align-items: flex-start; padding-block: 16px; }

.m3-list-item__leading {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--md-sys-shape-corner-full);
	background: var(--md-sys-color-surface-container);
	color: var(--md-sys-color-on-surface-variant);
}
.m3-list-item__leading--avatar { overflow: hidden; }
.m3-list-item__leading--avatar img { width: 100%; height: 100%; object-fit: cover; }

.m3-list-item__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.m3-list-item__headline {
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-large-size);
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.porprem-locale-th .m3-list-item__headline { font-family: var(--font-body-th); }

.m3-list-item__supporting {
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-medium-size);
	color: var(--md-sys-color-on-surface-variant);
	line-height: 1.4;
}
.porprem-locale-th .m3-list-item__supporting { font-family: var(--font-body-th); }

.m3-list-item__trailing {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--md-sys-color-on-surface-variant);
	font-size: var(--md-sys-typescale-label-small-size);
}


/* ============================================================
   TABS — primary (with indicator)
   ============================================================ */
.m3-tabs {
	display: flex;
	align-items: flex-end;
	gap: 0;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	background: var(--md-sys-color-surface);
}
.m3-tabs::-webkit-scrollbar { display: none; }

.m3-tabs__tab {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 48px;
	min-width: 90px;
	padding: 8px 16px;
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	border: none;
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-title-small-size);
	font-weight: 500;
	letter-spacing: 0.1px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
.porprem-locale-th .m3-tabs__tab { font-family: var(--font-body-th); letter-spacing: 0; }

.m3-tabs__tab:hover { color: var(--md-sys-color-on-surface); }
.m3-tabs__tab.is-active,
.m3-tabs__tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
.m3-tabs__tab.is-active::after,
.m3-tabs__tab[aria-selected="true"]::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 16px;
	right: 16px;
	height: 3px;
	background: var(--md-sys-color-primary);
	border-radius: 3px 3px 0 0;
}


/* ============================================================
   PROGRESS — linear / circular
   ============================================================ */
.m3-progress {
	display: block;
	width: 100%;
}
.m3-progress--linear {
	height: 4px;
	background: var(--md-sys-color-surface-container-highest);
	border-radius: var(--md-sys-shape-corner-full);
	overflow: hidden;
	position: relative;
}
.m3-progress--linear-indeterminate::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--md-sys-color-primary);
	transform-origin: left center;
	animation: m3-progress-linear 2s linear infinite;
}
@keyframes m3-progress-linear {
	0%   { transform: translateX(-100%) scaleX(0.3); }
	50%  { transform: translateX(20%) scaleX(0.5); }
	100% { transform: translateX(120%) scaleX(0.3); }
}

.m3-progress--circular {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid var(--md-sys-color-surface-container-highest);
	border-top-color: var(--md-sys-color-primary);
	border-radius: 50%;
	animation: m3-progress-circular 0.9s linear infinite;
}
@keyframes m3-progress-circular { to { transform: rotate(360deg); } }


/* ============================================================
   DIVIDER
   ============================================================ */
.m3-divider {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--md-sys-color-outline-variant);
	border: none;
	margin: 8px 0;
}
.m3-divider--inset { margin-inline-start: 56px; }


/* ============================================================
   SNACKBAR — toast with optional action
   ============================================================ */
.m3-snackbar {
	position: fixed;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 16px;
	right: 16px;
	max-width: 600px;
	margin-inline: auto;
	z-index: 1500;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 14px 16px;
	background: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	border-radius: var(--md-sys-shape-corner-extra-small);
	box-shadow: var(--md-sys-elevation-3);
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-medium-size);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard),
				transform var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-emphasized);
	pointer-events: none;
}
.porprem-locale-th .m3-snackbar { font-family: var(--font-body-th); }
.m3-snackbar.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.m3-snackbar__icon {
	flex-shrink: 0;
	color: inherit;
}
.m3-snackbar__text {
	flex: 1;
	min-width: 0;
	line-height: 1.4;
}
.m3-snackbar__action {
	flex-shrink: 0;
	background: transparent;
	color: var(--md-sys-color-inverse-primary);
	border: none;
	padding: 8px 12px;
	min-height: 40px;
	font-family: inherit;
	font-size: var(--md-sys-typescale-label-large-size);
	font-weight: 500;
	letter-spacing: 0.1px;
	border-radius: var(--md-sys-shape-corner-small);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.m3-snackbar__action:hover {
	background: color-mix(in srgb, var(--md-sys-color-inverse-primary) 12%, transparent);
}

/* Snackbar lifts above nav bar when present */
.pp-app-home-active .m3-snackbar,
.pp-app-tab-nav-present .m3-snackbar {
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   BOTTOM SHEET — modal, slide-up
   ============================================================ */
.m3-bottom-sheet {
	position: fixed;
	inset: 0;
	z-index: 1400;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
}
.m3-bottom-sheet.is-open { pointer-events: auto; }

.m3-bottom-sheet__scrim {
	position: absolute;
	inset: 0;
	background: var(--md-sys-color-scrim);
	opacity: 0;
	transition: opacity var(--md-sys-motion-duration-medium-1) var(--md-sys-motion-easing-standard);
}
.m3-bottom-sheet.is-open .m3-bottom-sheet__scrim { opacity: 0.48; }

.m3-bottom-sheet__sheet {
	position: relative;
	width: 100%;
	max-height: 80vh;
	max-height: 80dvh;
	background: var(--md-sys-color-surface-container-low);
	color: var(--md-sys-color-on-surface);
	border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
	box-shadow: var(--md-sys-elevation-3);
	padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
	overflow: hidden;
	transform: translateY(100%);
	transition: transform var(--md-sys-motion-duration-medium-2) var(--md-sys-motion-easing-emphasized);
	display: flex;
	flex-direction: column;
}
.m3-bottom-sheet.is-open .m3-bottom-sheet__sheet { transform: translateY(0); }

.m3-bottom-sheet__handle {
	flex-shrink: 0;
	width: 32px;
	height: 4px;
	margin: 16px auto 8px;
	background: var(--md-sys-color-on-surface-variant);
	border-radius: var(--md-sys-shape-corner-full);
	opacity: 0.4;
}
.m3-bottom-sheet__body {
	flex: 1;
	min-height: 0;
	padding: 16px 24px 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


/* ============================================================
   DIALOG — basic / alert
   ============================================================ */
.m3-dialog {
	position: fixed;
	inset: 0;
	z-index: 1600;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.m3-dialog.is-open { display: flex; }

.m3-dialog__scrim {
	position: absolute;
	inset: 0;
	background: var(--md-sys-color-scrim);
	opacity: 0.48;
}
.m3-dialog__container {
	position: relative;
	width: 100%;
	max-width: 560px;
	min-width: 280px;
	background: var(--md-sys-color-surface-container-high);
	color: var(--md-sys-color-on-surface);
	border-radius: var(--md-sys-shape-corner-extra-large);
	box-shadow: var(--md-sys-elevation-3);
	padding: 24px;
}
.m3-dialog__headline {
	font-family: var(--font-heading);
	font-size: var(--md-sys-typescale-headline-small-size);
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	margin: 0 0 16px;
}
.porprem-locale-th .m3-dialog__headline { font-family: var(--font-heading-th); }

.m3-dialog__supporting {
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-medium-size);
	color: var(--md-sys-color-on-surface-variant);
	line-height: 1.5;
	margin: 0 0 24px;
}
.porprem-locale-th .m3-dialog__supporting { font-family: var(--font-body-th); }

.m3-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}


/* ============================================================
   BANNER — top-of-content error/info notice
   ============================================================ */
.m3-banner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	background: var(--md-sys-color-surface-container);
	color: var(--md-sys-color-on-surface);
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.m3-banner--error {
	background: var(--md-sys-color-error-container);
	color: var(--md-sys-color-on-error-container);
}
.m3-banner__icon { flex-shrink: 0; }
.m3-banner__text {
	flex: 1;
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: 1.5;
}
.porprem-locale-th .m3-banner__text { font-family: var(--font-body-th); }
.m3-banner__actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}


/* ============================================================
   NAV RAIL (desktop admin) + NAV DRAWER (mobile admin)
   ============================================================ */
.m3-nav-rail {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 80px;
	height: 100vh;
	height: 100dvh;
	padding: 24px 0;
	background: var(--md-sys-color-surface);
	border-right: 1px solid var(--md-sys-color-outline-variant);
	transition: width var(--md-sys-motion-duration-medium-2) var(--md-sys-motion-easing-standard);
}
.m3-nav-rail--expanded { width: 260px; align-items: stretch; padding-inline: 12px; }

.m3-nav-rail__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 64px;
	min-height: 56px;
	padding: 8px;
	color: var(--md-sys-color-on-surface-variant);
	border-radius: var(--md-sys-shape-corner-large);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--md-sys-motion-duration-short-4) var(--md-sys-motion-easing-standard);
}
.m3-nav-rail--expanded .m3-nav-rail__item {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	gap: 12px;
	padding: 12px 16px;
}
.m3-nav-rail__item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.m3-nav-rail__item.is-active,
.m3-nav-rail__item[aria-current="page"] {
	background: var(--md-sys-color-secondary-container);
	color: var(--md-sys-color-on-secondary-container);
}
.m3-nav-rail__label {
	font-family: var(--font-body);
	font-size: var(--md-sys-typescale-label-medium-size);
	font-weight: 500;
	letter-spacing: 0.5px;
}
.porprem-locale-th .m3-nav-rail__label { font-family: var(--font-body-th); letter-spacing: 0; }

.m3-nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: none;
}
.m3-nav-drawer.is-open { display: flex; }
.m3-nav-drawer__scrim {
	position: absolute;
	inset: 0;
	background: var(--md-sys-color-scrim);
	opacity: 0.48;
}
.m3-nav-drawer__panel {
	position: relative;
	width: 360px;
	max-width: calc(100vw - 56px);
	height: 100%;
	background: var(--md-sys-color-surface-container-low);
	box-shadow: var(--md-sys-elevation-3);
	padding: 12px;
	overflow-y: auto;
}


/* ============================================================
   UTILITY — surface containers + typescale helpers
   ============================================================ */
.m3-surface-container-low      { background: var(--md-sys-color-surface-container-low); }
.m3-surface-container          { background: var(--md-sys-color-surface-container); }
.m3-surface-container-high     { background: var(--md-sys-color-surface-container-high); }
.m3-surface-container-highest  { background: var(--md-sys-color-surface-container-highest); }

.m3-typescale-display-large   { font-size: var(--md-sys-typescale-display-large-size);   font-family: var(--font-heading); font-weight: 500; line-height: 1.12; }
.m3-typescale-display-medium  { font-size: var(--md-sys-typescale-display-medium-size);  font-family: var(--font-heading); font-weight: 500; line-height: 1.16; }
.m3-typescale-display-small   { font-size: var(--md-sys-typescale-display-small-size);   font-family: var(--font-heading); font-weight: 500; line-height: 1.22; }
.m3-typescale-headline-large  { font-size: var(--md-sys-typescale-headline-large-size);  font-weight: 500; line-height: 1.25; }
.m3-typescale-headline-medium { font-size: var(--md-sys-typescale-headline-medium-size); font-weight: 500; line-height: 1.29; }
.m3-typescale-headline-small  { font-size: var(--md-sys-typescale-headline-small-size);  font-weight: 500; line-height: 1.33; }
.m3-typescale-title-large     { font-size: var(--md-sys-typescale-title-large-size);     font-weight: 500; line-height: 1.27; }
.m3-typescale-title-medium    { font-size: var(--md-sys-typescale-title-medium-size);    font-weight: 500; line-height: 1.5; letter-spacing: 0.15px; }
.m3-typescale-body-large      { font-size: var(--md-sys-typescale-body-large-size);      line-height: 1.5; }
.m3-typescale-body-medium     { font-size: var(--md-sys-typescale-body-medium-size);     line-height: 1.43; }
.m3-typescale-label-large     { font-size: var(--md-sys-typescale-label-large-size);     font-weight: 500; letter-spacing: 0.1px; }
.m3-typescale-label-medium    { font-size: var(--md-sys-typescale-label-medium-size);    font-weight: 500; letter-spacing: 0.5px; }


/* ============================================================
   REDUCED MOTION — collapse all transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.m3-fab,
	.m3-button,
	.m3-card,
	.m3-snackbar,
	.m3-bottom-sheet__sheet,
	.m3-nav-rail,
	.m3-text-field--filled,
	.m3-text-field__label {
		transition-duration: 0.01ms !important;
	}
	.m3-progress--linear-indeterminate::before,
	.m3-progress--circular {
		animation-duration: 0.01ms !important;
	}
}