/**
 * MicAppTemplate — Design System & Global Styles
 *
 * Mobile-first responsive design system.
 * Base styles target phones; tablet/desktop use min-width media queries.
 * All component classes use the `mat-` prefix to prevent collisions.
 *
 * @package MicAppTemplate
 * @since   1.0.0
 *
 * TABLE OF CONTENTS
 * ─────────────────
 *  1.  CSS Reset / Normalize
 *  2.  Design Tokens — Custom Properties
 *  3.  Color Palettes (Ocean, Emerald, Purple, Sunset)
 *  4.  Dark Mode
 *  5.  Base Element Styles
 *  6.  Layout — Container & Grid
 *  7.  Cards
 *  8.  Buttons
 *  9.  Forms
 * 10.  Tables
 * 11.  Badges & Tags
 * 12.  Modals
 * 13.  Toasts / Snackbars
 * 14.  Navigation (Bottom Bar & Sidebar)
 * 15.  Loading Skeletons
 * 16.  Utility Classes
 * 17.  Animations & Transitions
 * 18.  Responsive — Tablet  (≥ 768px)
 * 19.  Responsive — Desktop (≥ 1024px)
 * 20.  Responsive — Wide    (≥ 1280px)
 */

/* ==========================================================================
   1. CSS Reset / Normalize
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	font-size: 16px;
	line-height: 1.5;
}

body {
	min-height: 100vh;
	font-family: var(--mat-font-sans);
	font-size: var(--mat-text-base);
	line-height: 1.6;
	color: var(--mat-text-primary);
	background-color: var(--mat-surface-bg);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

a {
	color: var(--mat-color-primary);
	text-decoration: none;
	transition: color var(--mat-transition-fast);
}

a:hover {
	color: var(--mat-color-primary-hover);
}

ul,
ol {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--mat-text-heading);
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* Remove default focus outline and replace with accessible one */
:focus-visible {
	outline: 2px solid var(--mat-color-primary);
	outline-offset: 2px;
}

/* Remove number spinner */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

/* ==========================================================================
   2. Design Tokens — CSS Custom Properties
   ========================================================================== */

/**
 * Default palette: Ocean Blue
 * Clean, professional blue with cyan accent. Suitable for dashboards &
 * business apps.
 */
:root {
	/* ── Primary (Blue) ────────────────────────────────────────── */
	--mat-color-primary-50:  #eff6ff;
	--mat-color-primary-100: #dbeafe;
	--mat-color-primary-200: #bfdbfe;
	--mat-color-primary-300: #93c5fd;
	--mat-color-primary-400: #60a5fa;
	--mat-color-primary-500: #3b82f6;
	--mat-color-primary-600: #2563eb;
	--mat-color-primary-700: #1d4ed8;
	--mat-color-primary-800: #1e40af;
	--mat-color-primary-900: #1e3a8a;

	/* ── Secondary (Slate) ─────────────────────────────────────── */
	--mat-color-secondary-50:  #f8fafc;
	--mat-color-secondary-100: #f1f5f9;
	--mat-color-secondary-200: #e2e8f0;
	--mat-color-secondary-300: #cbd5e1;
	--mat-color-secondary-400: #94a3b8;
	--mat-color-secondary-500: #64748b;
	--mat-color-secondary-600: #475569;
	--mat-color-secondary-700: #334155;
	--mat-color-secondary-800: #1e293b;
	--mat-color-secondary-900: #0f172a;

	/* ── Accent (Cyan) ─────────────────────────────────────────── */
	--mat-color-accent-50:  #ecfeff;
	--mat-color-accent-100: #cffafe;
	--mat-color-accent-200: #a5f3fc;
	--mat-color-accent-300: #67e8f9;
	--mat-color-accent-400: #22d3ee;
	--mat-color-accent-500: #06b6d4;
	--mat-color-accent-600: #0891b2;
	--mat-color-accent-700: #0e7490;
	--mat-color-accent-800: #155e75;
	--mat-color-accent-900: #164e63;

	/* ── Semantic Shorthand ─────────────────────────────────────── */
	--mat-color-primary:          var(--mat-color-primary-600);
	--mat-color-primary-hover:    var(--mat-color-primary-700);
	--mat-color-primary-active:   var(--mat-color-primary-800);
	--mat-color-primary-light:    var(--mat-color-primary-100);
	--mat-color-primary-contrast: #ffffff;
	--mat-color-primary-rgb:      37, 99, 235;
	--mat-color-primary-alpha:    rgba(var(--mat-color-primary-rgb), 0.08);

	--mat-color-accent:           var(--mat-color-accent-500);
	--mat-color-accent-hover:     var(--mat-color-accent-600);
	--mat-color-accent-light:     var(--mat-color-accent-100);
	--mat-color-accent-contrast:  #ffffff;

	/* ── Neutrals ──────────────────────────────────────────────── */
	--mat-neutral-50:  #fafafa;
	--mat-neutral-100: #f5f5f5;
	--mat-neutral-200: #e5e5e5;
	--mat-neutral-300: #d4d4d4;
	--mat-neutral-400: #a3a3a3;
	--mat-neutral-500: #737373;
	--mat-neutral-600: #525252;
	--mat-neutral-700: #404040;
	--mat-neutral-800: #262626;
	--mat-neutral-900: #171717;

	/* ── Semantic / Status Colors ──────────────────────────────── */
	--mat-color-success:      #16a34a;
	--mat-color-success-light:#dcfce7;
	--mat-color-success-dark: #15803d;
	--mat-color-warning:      #d97706;
	--mat-color-warning-light:#fef3c7;
	--mat-color-warning-dark: #b45309;
	--mat-color-error:        #dc2626;
	--mat-color-error-light:  #fee2e2;
	--mat-color-error-dark:   #b91c1c;
	--mat-color-info:         #2563eb;
	--mat-color-info-light:   #dbeafe;
	--mat-color-info-dark:    #1d4ed8;

	/* ── Subtle Backgrounds (alpha-tinted semantic colours) ────── */
	--mat-bg-success-subtle:  rgba(22, 163, 74, 0.06);
	--mat-bg-warning-subtle:  rgba(245, 158, 11, 0.06);
	--mat-bg-error-subtle:    rgba(220, 38, 38, 0.06);
	--mat-bg-info-subtle:     rgba(59, 130, 246, 0.08);
	--mat-color-warning-alpha: rgba(245, 158, 11, 0.15);

	/* ── Surface / Background ──────────────────────────────────── */
	--mat-surface-bg:       #f8fafc;
	--mat-surface-card:     #ffffff;
	--mat-surface-raised:   #ffffff;
	--mat-surface-overlay:  rgba(15, 23, 42, 0.5);
	--mat-surface-inset:    #f1f5f9;

	/* ── Text ──────────────────────────────────────────────────── */
	--mat-text-heading:   #0f172a;
	--mat-text-primary:   #1e293b;
	--mat-text-secondary: #475569;
	--mat-text-muted:     #94a3b8;
	--mat-text-inverse:   #ffffff;
	--mat-text-link:      var(--mat-color-primary);

	/* ── Border ────────────────────────────────────────────────── */
	--mat-border-color:   #e2e8f0;
	--mat-border-light:   #f1f5f9;
	--mat-border-strong:  #cbd5e1;

	/* ── Spacing Scale ─────────────────────────────────────────── */
	--mat-space-0:   0;
	--mat-space-px:  1px;
	--mat-space-0-5: 0.125rem;   /*  2px */
	--mat-space-1:   0.25rem;    /*  4px */
	--mat-space-1-5: 0.375rem;   /*  6px */
	--mat-space-2:   0.5rem;     /*  8px */
	--mat-space-2-5: 0.625rem;   /* 10px */
	--mat-space-3:   0.75rem;    /* 12px */
	--mat-space-4:   1rem;       /* 16px */
	--mat-space-5:   1.25rem;    /* 20px */
	--mat-space-6:   1.5rem;     /* 24px */
	--mat-space-8:   2rem;       /* 32px */
	--mat-space-10:  2.5rem;     /* 40px */
	--mat-space-12:  3rem;       /* 48px */
	--mat-space-16:  4rem;       /* 64px */
	--mat-space-20:  5rem;       /* 80px */
	--mat-space-24:  6rem;       /* 96px */

	/* ── Typography ────────────────────────────────────────────── */
	--mat-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--mat-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
		"Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;

	--mat-text-xs:   0.75rem;    /* 12px */
	--mat-text-sm:   0.875rem;   /* 14px */
	--mat-text-base: 1rem;       /* 16px */
	--mat-text-lg:   1.125rem;   /* 18px */
	--mat-text-xl:   1.25rem;    /* 20px */
	--mat-text-2xl:  1.5rem;     /* 24px */
	--mat-text-3xl:  1.875rem;   /* 30px */
	--mat-text-4xl:  2.25rem;    /* 36px */
	--mat-text-5xl:  3rem;       /* 48px */

	--mat-leading-none:    1;
	--mat-leading-tight:   1.25;
	--mat-leading-snug:    1.375;
	--mat-leading-normal:  1.5;
	--mat-leading-relaxed: 1.625;
	--mat-leading-loose:   2;

	--mat-weight-light:    300;
	--mat-weight-normal:   400;
	--mat-weight-medium:   500;
	--mat-weight-semibold: 600;
	--mat-weight-bold:     700;
	--mat-weight-heavy:    800;

	--mat-tracking-tight:  -0.025em;
	--mat-tracking-normal: 0em;
	--mat-tracking-wide:   0.025em;
	--mat-tracking-wider:  0.05em;

	/* ── Shadows ───────────────────────────────────────────────── */
	--mat-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
	--mat-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--mat-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--mat-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--mat-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--mat-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--mat-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

	/* ── Border Radius ─────────────────────────────────────────── */
	--mat-radius-none: 0;
	--mat-radius-sm:   0.25rem;    /*  4px */
	--mat-radius-md:   0.375rem;   /*  6px */
	--mat-radius-lg:   0.5rem;     /*  8px */
	--mat-radius-xl:   0.75rem;    /* 12px */
	--mat-radius-2xl:  1rem;       /* 16px */
	--mat-radius-3xl:  1.5rem;     /* 24px */
	--mat-radius-full: 9999px;

	/* ── Transitions ───────────────────────────────────────────── */
	--mat-transition-fast:   150ms ease;
	--mat-transition-base:   250ms ease;
	--mat-transition-slow:   350ms ease;
	--mat-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── Z-Index Scale ─────────────────────────────────────────── */
	--mat-z-base:            1;
	--mat-z-dropdown:      100;
	--mat-z-sticky:        200;
	--mat-z-fixed:         300;
	--mat-z-modal-backdrop:400;
	--mat-z-modal:         500;
	--mat-z-toast:         600;
	--mat-z-tooltip:       700;

	/* ── Layout ────────────────────────────────────────────────── */
	--mat-container-sm:  640px;
	--mat-container-md:  768px;
	--mat-container-lg:  1024px;
	--mat-container-xl:  1280px;
	--mat-sidebar-width: 260px;
	--mat-nav-height:    56px;
	--mat-bottom-nav-height: 60px;

	/* ── Direction ─────────────────────────────────────────────
	 * Sign multiplier for transforms, which have no logical form:
	 * translateX(calc(var(--mat-dir) * 20px)) moves toward the inline
	 * end in either direction. Everything else should use logical
	 * properties (inset-inline-start, margin-inline-end, …) instead.
	 */
	--mat-dir: 1;
}

:root[dir="rtl"] {
	--mat-dir: -1;
}

/* ==========================================================================
   3. Color Palettes — Alternate Themes
   ========================================================================== */

/**
 * Palette: Emerald Green
 * Fresh, nature-inspired palette with amber accent.
 */
[data-mat-palette="emerald"] {
	--mat-color-primary-50:  #ecfdf5;
	--mat-color-primary-100: #d1fae5;
	--mat-color-primary-200: #a7f3d0;
	--mat-color-primary-300: #6ee7b7;
	--mat-color-primary-400: #34d399;
	--mat-color-primary-500: #10b981;
	--mat-color-primary-600: #059669;
	--mat-color-primary-700: #047857;
	--mat-color-primary-800: #065f46;
	--mat-color-primary-900: #064e3b;

	--mat-color-primary:          var(--mat-color-primary-600);
	--mat-color-primary-hover:    var(--mat-color-primary-700);
	--mat-color-primary-active:   var(--mat-color-primary-800);
	--mat-color-primary-light:    var(--mat-color-primary-100);
	--mat-color-primary-rgb:      5, 150, 105;
	--mat-color-primary-alpha:    rgba(var(--mat-color-primary-rgb), 0.08);

	--mat-color-accent-50:  #fffbeb;
	--mat-color-accent-100: #fef3c7;
	--mat-color-accent-200: #fde68a;
	--mat-color-accent-300: #fcd34d;
	--mat-color-accent-400: #fbbf24;
	--mat-color-accent-500: #f59e0b;
	--mat-color-accent-600: #d97706;
	--mat-color-accent-700: #b45309;
	--mat-color-accent-800: #92400e;
	--mat-color-accent-900: #78350f;

	--mat-color-accent:           var(--mat-color-accent-500);
	--mat-color-accent-hover:     var(--mat-color-accent-600);
	--mat-color-accent-light:     var(--mat-color-accent-100);
	--mat-color-accent-contrast:  #1e293b;
}

/**
 * Palette: Royal Purple
 * Elegant, modern palette with pink accent.
 */
[data-mat-palette="purple"] {
	--mat-color-primary-50:  #f5f3ff;
	--mat-color-primary-100: #ede9fe;
	--mat-color-primary-200: #ddd6fe;
	--mat-color-primary-300: #c4b5fd;
	--mat-color-primary-400: #a78bfa;
	--mat-color-primary-500: #8b5cf6;
	--mat-color-primary-600: #7c3aed;
	--mat-color-primary-700: #6d28d9;
	--mat-color-primary-800: #5b21b6;
	--mat-color-primary-900: #4c1d95;

	--mat-color-primary:          var(--mat-color-primary-600);
	--mat-color-primary-hover:    var(--mat-color-primary-700);
	--mat-color-primary-active:   var(--mat-color-primary-800);
	--mat-color-primary-light:    var(--mat-color-primary-100);
	--mat-color-primary-rgb:      124, 58, 237;
	--mat-color-primary-alpha:    rgba(var(--mat-color-primary-rgb), 0.08);

	--mat-color-accent-50:  #fdf2f8;
	--mat-color-accent-100: #fce7f3;
	--mat-color-accent-200: #fbcfe8;
	--mat-color-accent-300: #f9a8d4;
	--mat-color-accent-400: #f472b6;
	--mat-color-accent-500: #ec4899;
	--mat-color-accent-600: #db2777;
	--mat-color-accent-700: #be185d;
	--mat-color-accent-800: #9d174d;
	--mat-color-accent-900: #831843;

	--mat-color-accent:           var(--mat-color-accent-500);
	--mat-color-accent-hover:     var(--mat-color-accent-600);
	--mat-color-accent-light:     var(--mat-color-accent-100);
}

/**
 * Palette: Sunset Orange
 * Warm, energetic palette with yellow accent.
 */
[data-mat-palette="sunset"] {
	--mat-color-primary-50:  #fff7ed;
	--mat-color-primary-100: #ffedd5;
	--mat-color-primary-200: #fed7aa;
	--mat-color-primary-300: #fdba74;
	--mat-color-primary-400: #fb923c;
	--mat-color-primary-500: #f97316;
	--mat-color-primary-600: #ea580c;
	--mat-color-primary-700: #c2410c;
	--mat-color-primary-800: #9a3412;
	--mat-color-primary-900: #7c2d12;

	--mat-color-primary:          var(--mat-color-primary-600);
	--mat-color-primary-hover:    var(--mat-color-primary-700);
	--mat-color-primary-active:   var(--mat-color-primary-800);
	--mat-color-primary-light:    var(--mat-color-primary-100);
	--mat-color-primary-rgb:      234, 88, 12;
	--mat-color-primary-alpha:    rgba(var(--mat-color-primary-rgb), 0.08);

	--mat-color-accent-50:  #fefce8;
	--mat-color-accent-100: #fef9c3;
	--mat-color-accent-200: #fef08a;
	--mat-color-accent-300: #fde047;
	--mat-color-accent-400: #facc15;
	--mat-color-accent-500: #eab308;
	--mat-color-accent-600: #ca8a04;
	--mat-color-accent-700: #a16207;
	--mat-color-accent-800: #854d0e;
	--mat-color-accent-900: #713f12;

	--mat-color-accent:           var(--mat-color-accent-500);
	--mat-color-accent-hover:     var(--mat-color-accent-600);
	--mat-color-accent-light:     var(--mat-color-accent-100);
	--mat-color-accent-contrast:  #1e293b;
}

/* ==========================================================================
   4. Dark Mode
   ========================================================================== */

/**
 * Dark mode can be triggered two ways:
 *  – Automatic via `prefers-color-scheme: dark` (default)
 *  – Manual via `data-mat-theme="dark"` on <html>
 *
 * To opt out of automatic dark mode, add `data-mat-theme="light"` to <html>.
 */

@media (prefers-color-scheme: dark) {
	html:not([data-mat-theme="light"]) {
		--mat-surface-bg:       #0f172a;
		--mat-surface-card:     #1e293b;
		--mat-surface-raised:   #334155;
		--mat-surface-overlay:  rgba(0, 0, 0, 0.7);
		--mat-surface-inset:    #0f172a;

		--mat-text-heading:   #f1f5f9;
		--mat-text-primary:   #e2e8f0;
		--mat-text-secondary: #94a3b8;
		--mat-text-muted:     #64748b;

		--mat-border-color:   #334155;
		--mat-border-light:   #1e293b;
		--mat-border-strong:  #475569;

		--mat-color-success-light: #052e16;
		--mat-color-warning-light: #451a03;
		--mat-color-error-light:   #450a0a;
		--mat-color-info-light:    #172554;

		--mat-bg-success-subtle:  rgba(22, 163, 74, 0.1);
		--mat-bg-warning-subtle:  rgba(245, 158, 11, 0.1);
		--mat-bg-error-subtle:    rgba(220, 38, 38, 0.1);
		--mat-bg-info-subtle:     rgba(59, 130, 246, 0.12);
		--mat-color-warning-alpha: rgba(245, 158, 11, 0.2);

		--mat-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.3);
		--mat-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
		--mat-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
		--mat-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
		--mat-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
	}
}

[data-mat-theme="dark"] {
	--mat-surface-bg:       #0f172a;
	--mat-surface-card:     #1e293b;
	--mat-surface-raised:   #334155;
	--mat-surface-overlay:  rgba(0, 0, 0, 0.7);
	--mat-surface-inset:    #0f172a;

	--mat-text-heading:   #f1f5f9;
	--mat-text-primary:   #e2e8f0;
	--mat-text-secondary: #94a3b8;
	--mat-text-muted:     #64748b;

	--mat-border-color:   #334155;
	--mat-border-light:   #1e293b;
	--mat-border-strong:  #475569;

	--mat-color-success-light: #052e16;
	--mat-color-warning-light: #451a03;
	--mat-color-error-light:   #450a0a;
	--mat-color-info-light:    #172554;

	--mat-bg-success-subtle:  rgba(22, 163, 74, 0.1);
	--mat-bg-warning-subtle:  rgba(245, 158, 11, 0.1);
	--mat-bg-error-subtle:    rgba(220, 38, 38, 0.1);
	--mat-bg-info-subtle:     rgba(59, 130, 246, 0.12);
	--mat-color-warning-alpha: rgba(245, 158, 11, 0.2);

	--mat-shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.3);
	--mat-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
	--mat-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
	--mat-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
	--mat-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* ==========================================================================
   5. Base Element Styles
   ========================================================================== */

p {
	margin-bottom: var(--mat-space-4);
}

h1 { font-size: var(--mat-text-3xl); margin-bottom: var(--mat-space-4); letter-spacing: var(--mat-tracking-tight); }
h2 { font-size: var(--mat-text-2xl); margin-bottom: var(--mat-space-3); }
h3 { font-size: var(--mat-text-xl);  margin-bottom: var(--mat-space-3); }
h4 { font-size: var(--mat-text-lg);  margin-bottom: var(--mat-space-2); }
h5 { font-size: var(--mat-text-base); margin-bottom: var(--mat-space-2); }
h6 { font-size: var(--mat-text-sm);  margin-bottom: var(--mat-space-2); text-transform: uppercase; letter-spacing: var(--mat-tracking-wider); }

small {
	font-size: var(--mat-text-sm);
	color: var(--mat-text-secondary);
}

code,
kbd,
pre,
samp {
	font-family: var(--mat-font-mono);
	font-size: 0.875em;
}

code {
	background: var(--mat-surface-inset);
	padding: 0.2em 0.4em;
	border-radius: var(--mat-radius-sm);
}

pre {
	background: var(--mat-surface-inset);
	padding: var(--mat-space-4);
	border-radius: var(--mat-radius-lg);
	overflow-x: auto;
	margin-bottom: var(--mat-space-4);
}

pre code {
	background: none;
	padding: 0;
}

hr {
	border: none;
	border-top: 1px solid var(--mat-border-color);
	margin: var(--mat-space-6) 0;
}

blockquote {
	border-left: 4px solid var(--mat-color-primary);
	padding: var(--mat-space-3) var(--mat-space-4);
	margin: 0 0 var(--mat-space-4);
	background: var(--mat-surface-inset);
	border-radius: 0 var(--mat-radius-md) var(--mat-radius-md) 0;
	color: var(--mat-text-secondary);
}

/* ==========================================================================
   6. Layout — Container & Grid
   ========================================================================== */

.mat-container {
	width: 100%;
	max-width: var(--mat-container-xl);
	margin-inline: auto;
	padding-inline: var(--mat-space-4);
}

.mat-container--sm { max-width: var(--mat-container-sm); }
.mat-container--md { max-width: var(--mat-container-md); }
.mat-container--lg { max-width: var(--mat-container-lg); }
.mat-container--fluid { max-width: none; }

/* Simple responsive grid using CSS Grid */
.mat-grid {
	display: grid;
	gap: var(--mat-space-4);
	grid-template-columns: 1fr;
}

.mat-grid--2 { grid-template-columns: repeat(1, 1fr); }
.mat-grid--3 { grid-template-columns: repeat(1, 1fr); }
.mat-grid--4 { grid-template-columns: repeat(1, 1fr); }

/* Flexbox row helper */
.mat-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mat-space-4);
}

.mat-row--center  { align-items: center; justify-content: center; }
.mat-row--between { justify-content: space-between; align-items: center; }
.mat-row--end     { justify-content: flex-end; }

/* Stack helper — vertical flex */
.mat-stack {
	display: flex;
	flex-direction: column;
	gap: var(--mat-space-4);
}

.mat-stack--sm { gap: var(--mat-space-2); }
.mat-stack--lg { gap: var(--mat-space-6); }

/* Page Header — reusable across all app pages */
.mat-page-header {
	margin-bottom: var(--mat-space-2);
}

.mat-page-title {
	font-size: var(--mat-text-2xl);
	font-weight: 700;
	color: var(--mat-text-heading);
	margin: 0 0 var(--mat-space-1);
}

.mat-page-subtitle {
	font-size: var(--mat-text-sm);
	color: var(--mat-text-secondary);
	margin: 0;
}

/* ==========================================================================
   7. Cards
   ========================================================================== */

.mat-card {
	background: var(--mat-surface-card);
	border: 1px solid var(--mat-border-color);
	border-radius: var(--mat-radius-xl);
	padding: var(--mat-space-5);
	box-shadow: var(--mat-shadow-xs);
	transition: box-shadow var(--mat-transition-base),
				transform var(--mat-transition-base);
}

.mat-card:hover {
	box-shadow: var(--mat-shadow-sm);
}

.mat-card--interactive:hover {
	box-shadow: var(--mat-shadow-md);
	transform: translateY(-2px);
	cursor: pointer;
}

.mat-card--flat {
	box-shadow: none;
	border: 1px solid var(--mat-border-color);
}

.mat-card--ghost {
	border: none;
	box-shadow: none;
	background: transparent;
}

.mat-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--mat-space-4);
	padding-bottom: var(--mat-space-3);
	border-bottom: 1px solid var(--mat-border-light);
}

.mat-card__title {
	font-size: var(--mat-text-lg);
	font-weight: var(--mat-weight-semibold);
	color: var(--mat-text-heading);
	margin: 0;
}

.mat-card__subtitle {
	font-size: var(--mat-text-sm);
	color: var(--mat-text-secondary);
	margin-top: var(--mat-space-1);
}

.mat-card__body {
	font-size: var(--mat-text-base);
	color: var(--mat-text-primary);
}

.mat-card__footer {
	display: flex;
	align-items: center;
	gap: var(--mat-space-2);
	margin-top: var(--mat-space-4);
	padding-top: var(--mat-space-3);
	border-top: 1px solid var(--mat-border-light);
}

/* Stat card — used in Dashboard */
.mat-stat-card {
	background: var(--mat-surface-card);
	border: 1px solid var(--mat-border-color);
	border-radius: var(--mat-radius-xl);
	padding: var(--mat-space-4) var(--mat-space-5);
	text-align: center;
	transition: border-color var(--mat-transition-base),
				box-shadow var(--mat-transition-base);
}

.mat-stat-card:hover {
	border-color: var(--mat-color-primary-300);
	box-shadow: var(--mat-shadow-sm);
}

.mat-stat-card__value {
	display: block;
	font-size: var(--mat-text-3xl);
	font-weight: var(--mat-weight-bold);
	color: var(--mat-text-heading);
	line-height: var(--mat-leading-tight);
}

.mat-stat-card__label {
	display: block;
	font-size: var(--mat-text-xs);
	color: var(--mat-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--mat-tracking-wider);
	margin-top: var(--mat-space-1);
}

.mat-stat-card__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--mat-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--mat-space-3);
	font-size: var(--mat-text-xl);
}

.mat-stat-card--success { border-left: 4px solid var(--mat-color-success); }
.mat-stat-card--warning { border-left: 4px solid var(--mat-color-warning); }
.mat-stat-card--error   { border-left: 4px solid var(--mat-color-error); }
.mat-stat-card--info    { border-left: 4px solid var(--mat-color-info); }
.mat-stat-card--primary { border-left: 4px solid var(--mat-color-primary); }
.mat-stat-card--accent  { border-left: 4px solid var(--mat-color-accent); }

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.mat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mat-space-2);
	padding: var(--mat-space-2-5) var(--mat-space-5);
	min-height: 44px;
	font-size: var(--mat-text-sm);
	font-weight: var(--mat-weight-medium);
	line-height: var(--mat-leading-tight);
	border-radius: var(--mat-radius-lg);
	border: 2px solid transparent;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--mat-transition-fast),
				color var(--mat-transition-fast),
				border-color var(--mat-transition-fast),
				box-shadow var(--mat-transition-fast),
				transform var(--mat-transition-fast);
	-webkit-user-select: none;
	user-select: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.mat-btn:active {
	transform: scale(0.97);
}

.mat-btn:disabled,
.mat-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary (filled) */
.mat-btn--primary {
	background: var(--mat-color-primary);
	color: var(--mat-color-primary-contrast);
	border-color: var(--mat-color-primary);
}

.mat-btn--primary:hover {
	background: var(--mat-color-primary-hover);
	border-color: var(--mat-color-primary-hover);
}

.mat-btn--primary:active {
	background: var(--mat-color-primary-active);
	border-color: var(--mat-color-primary-active);
}

/* Secondary (filled) */
.mat-btn--secondary {
	background: var(--mat-color-secondary-700);
	color: #ffffff;
	border-color: var(--mat-color-secondary-700);
}

.mat-btn--secondary:hover {
	background: var(--mat-color-secondary-800);
	border-color: var(--mat-color-secondary-800);
}

/* Accent (filled) */
.mat-btn--accent {
	background: var(--mat-color-accent);
	color: var(--mat-color-accent-contrast);
	border-color: var(--mat-color-accent);
}

.mat-btn--accent:hover {
	background: var(--mat-color-accent-hover);
	border-color: var(--mat-color-accent-hover);
}

/* Outline */
.mat-btn--outline {
	background: transparent;
	color: var(--mat-color-primary);
	border-color: var(--mat-color-primary);
}

.mat-btn--outline:hover {
	background: var(--mat-color-primary);
	color: var(--mat-color-primary-contrast);
}

/* Ghost */
.mat-btn--ghost {
	background: transparent;
	color: var(--mat-color-primary);
	border-color: transparent;
}

.mat-btn--ghost:hover {
	background: var(--mat-color-primary-light);
}

/* Danger */
.mat-btn--danger {
	background: var(--mat-color-error);
	color: #ffffff;
	border-color: var(--mat-color-error);
}

.mat-btn--danger:hover {
	background: var(--mat-color-error-dark);
	border-color: var(--mat-color-error-dark);
}

/* Outline + Danger combo (red outline, fills on hover) */
.mat-btn--outline.mat-btn--danger {
	background: transparent;
	color: var(--mat-color-error);
	border-color: var(--mat-color-error);
}

.mat-btn--outline.mat-btn--danger:hover {
	background: var(--mat-color-error);
	color: #ffffff;
	border-color: var(--mat-color-error);
}

/* Success */
.mat-btn--success {
	background: var(--mat-color-success);
	color: #ffffff;
	border-color: var(--mat-color-success);
}

.mat-btn--success:hover {
	background: var(--mat-color-success-dark);
	border-color: var(--mat-color-success-dark);
}

/* Button sizes */
.mat-btn--xs {
	padding: var(--mat-space-1) var(--mat-space-2-5);
	min-height: 32px;
	font-size: var(--mat-text-xs);
	border-radius: var(--mat-radius-md);
}

.mat-btn--sm {
	padding: var(--mat-space-1-5) var(--mat-space-3);
	min-height: 36px;
	font-size: var(--mat-text-sm);
}

.mat-btn--lg {
	padding: var(--mat-space-3) var(--mat-space-6);
	min-height: 52px;
	font-size: var(--mat-text-base);
}

.mat-btn--xl {
	padding: var(--mat-space-4) var(--mat-space-8);
	min-height: 60px;
	font-size: var(--mat-text-lg);
	border-radius: var(--mat-radius-xl);
}

/* Full-width button */
.mat-btn--block {
	display: flex;
	width: 100%;
}

/* Icon-only button */
.mat-btn--icon {
	padding: var(--mat-space-2);
	min-height: 44px;
	min-width: 44px;
	border-radius: var(--mat-radius-lg);
}

/* Button group */
.mat-btn-group {
	display: inline-flex;
	gap: 0;
}

.mat-btn-group .mat-btn {
	border-radius: 0;
}

.mat-btn-group .mat-btn:first-child {
	border-radius: var(--mat-radius-lg) 0 0 var(--mat-radius-lg);
}

.mat-btn-group .mat-btn:last-child {
	border-radius: 0 var(--mat-radius-lg) var(--mat-radius-lg) 0;
}

/* Loading state */
.mat-btn--loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.mat-btn--loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--mat-radius-full);
	animation: mat-spin 0.6s linear infinite;
	color: var(--mat-color-primary-contrast);
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

/* Form group (label + input + help) */
.mat-form-group {
	margin-bottom: var(--mat-space-5);
}

.mat-label {
	display: block;
	font-size: var(--mat-text-sm);
	font-weight: var(--mat-weight-medium);
	color: var(--mat-text-heading);
	margin-bottom: var(--mat-space-1-5);
}

.mat-label--required::after {
	content: " *";
	color: var(--mat-color-error);
}

.mat-help-text {
	display: block;
	font-size: var(--mat-text-xs);
	color: var(--mat-text-muted);
	margin-top: var(--mat-space-1);
}

/* Shared input styles */
.mat-input,
.mat-select,
.mat-textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--mat-space-2-5) var(--mat-space-3);
	font-size: var(--mat-text-base);
	color: var(--mat-text-primary);
	background: var(--mat-surface-card);
	border: 1px solid var(--mat-border-color);
	border-radius: var(--mat-radius-lg);
	transition: border-color var(--mat-transition-fast),
				box-shadow var(--mat-transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

.mat-input::placeholder,
.mat-textarea::placeholder {
	color: var(--mat-text-muted);
}

.mat-input:hover,
.mat-select:hover,
.mat-textarea:hover {
	border-color: var(--mat-border-strong);
}

.mat-input:focus,
.mat-select:focus,
.mat-textarea:focus {
	border-color: var(--mat-color-primary);
	box-shadow: 0 0 0 3px var(--mat-color-primary-light);
	outline: none;
}

/* Validation states */
.mat-input--error,
.mat-select--error,
.mat-textarea--error {
	border-color: var(--mat-color-error);
}

.mat-input--error:focus,
.mat-select--error:focus,
.mat-textarea--error:focus {
	box-shadow: 0 0 0 3px var(--mat-color-error-light);
}

.mat-input--success,
.mat-select--success,
.mat-textarea--success {
	border-color: var(--mat-color-success);
}

.mat-input--success:focus,
.mat-select--success:focus,
.mat-textarea--success:focus {
	box-shadow: 0 0 0 3px var(--mat-color-success-light);
}

.mat-error-text {
	display: block;
	font-size: var(--mat-text-xs);
	color: var(--mat-color-error);
	margin-top: var(--mat-space-1);
}

/* Select arrow */
.mat-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--mat-space-3) center;
	padding-right: var(--mat-space-10);
}

/* Textarea */
.mat-textarea {
	min-height: 100px;
	resize: vertical;
}

/* Input sizes */
.mat-input--sm,
.mat-select--sm {
	min-height: 36px;
	padding: var(--mat-space-1-5) var(--mat-space-2-5);
	font-size: var(--mat-text-sm);
}

.mat-input--lg,
.mat-select--lg {
	min-height: 52px;
	padding: var(--mat-space-3) var(--mat-space-4);
	font-size: var(--mat-text-lg);
}

/* Input with icon */
.mat-input-icon-wrap {
	position: relative;
}

.mat-input-icon-wrap .mat-input {
	padding-left: var(--mat-space-10);
}

.mat-input-icon-wrap__icon {
	position: absolute;
	left: var(--mat-space-3);
	top: 50%;
	transform: translateY(-50%);
	color: var(--mat-text-muted);
	pointer-events: none;
	width: 20px;
	height: 20px;
}

/* Checkbox & Radio */
.mat-checkbox,
.mat-radio {
	display: flex;
	align-items: center;
	gap: var(--mat-space-2);
	cursor: pointer;
	min-height: 44px;
	font-size: var(--mat-text-base);
	-webkit-user-select: none;
	user-select: none;
}

.mat-checkbox input[type="checkbox"],
.mat-radio input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--mat-color-primary);
	cursor: pointer;
	flex-shrink: 0;
}

/* Toggle switch — slider pattern (preferred, used in all templates) */
.mat-toggle {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 28px;
	flex-shrink: 0;
}

.mat-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mat-toggle__slider {
	position: absolute;
	inset: 0;
	background: var(--mat-neutral-300);
	border-radius: var(--mat-radius-full);
	cursor: pointer;
	transition: background-color var(--mat-transition-fast);
}

.mat-toggle__slider::before {
	content: '';
	position: absolute;
	inset-inline-start: 3px;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--mat-shadow-sm);
	transition: transform var(--mat-transition-fast);
}

.mat-toggle input:checked + .mat-toggle__slider {
	background: var(--mat-color-primary);
}

.mat-toggle input:checked + .mat-toggle__slider::before {
	transform: translateX(calc(var(--mat-dir, 1) * 20px));
}

.mat-toggle input:focus-visible + .mat-toggle__slider {
	box-shadow: 0 0 0 3px var(--mat-color-primary-alpha);
}

/* Toggle switch — legacy track/thumb pattern (for backwards-compat) */
.mat-toggle__track {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--mat-neutral-300);
	border-radius: var(--mat-radius-full);
	transition: background var(--mat-transition-fast);
}

.mat-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: var(--mat-radius-full);
	box-shadow: var(--mat-shadow-sm);
	transition: transform var(--mat-transition-fast);
}

.mat-toggle input:checked + .mat-toggle__track {
	background: var(--mat-color-primary);
}

.mat-toggle input:checked + .mat-toggle__track .mat-toggle__thumb {
	transform: translateX(20px);
}

.mat-toggle input:focus-visible + .mat-toggle__track {
	box-shadow: 0 0 0 3px var(--mat-color-primary-light);
}

.mat-toggle__label {
	font-size: var(--mat-text-sm);
	color: var(--mat-text-primary);
}

/* Inline form row */
.mat-form-row {
	display: flex;
	flex-direction: column;
	gap: var(--mat-space-4);
}

/* ==========================================================================
   10. Tables
   ========================================================================== */

.mat-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--mat-border-color);
	border-radius: var(--mat-radius-xl);
}

.mat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mat-text-sm);
}

.mat-table th {
	background: var(--mat-surface-inset);
	font-weight: var(--mat-weight-semibold);
	text-align: left;
	padding: var(--mat-space-3) var(--mat-space-4);
	color: var(--mat-text-heading);
	font-size: var(--mat-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--mat-tracking-wider);
	white-space: nowrap;
	border-bottom: 1px solid var(--mat-border-color);
}

.mat-table td {
	padding: var(--mat-space-3) var(--mat-space-4);
	border-bottom: 1px solid var(--mat-border-light);
	vertical-align: middle;
	color: var(--mat-text-primary);
}

.mat-table tbody tr:last-child td {
	border-bottom: none;
}

.mat-table--striped tbody tr:nth-child(even) {
	background: var(--mat-surface-inset);
}

.mat-table--hover tbody tr {
	transition: background var(--mat-transition-fast);
}

.mat-table--hover tbody tr:hover {
	background: var(--mat-color-primary-50);
}

/* Compact table */
.mat-table--compact th,
.mat-table--compact td {
	padding: var(--mat-space-2) var(--mat-space-3);
}

/* ==========================================================================
   11. Badges & Tags
   ========================================================================== */

.mat-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--mat-space-1);
	padding: var(--mat-space-0-5) var(--mat-space-2-5);
	font-size: var(--mat-text-xs);
	font-weight: var(--mat-weight-medium);
	line-height: var(--mat-leading-normal);
	border-radius: var(--mat-radius-full);
	white-space: nowrap;
}

.mat-badge--sm {
	padding: 1px var(--mat-space-2);
	font-size: 0.65rem;
}

.mat-badge--danger {
	background: var(--mat-color-error-light);
	color: var(--mat-color-error);
}

.mat-badge--muted {
	background: var(--mat-neutral-100);
	color: var(--mat-neutral-500);
}

.mat-badge--primary {
	background: var(--mat-color-primary-light);
	color: var(--mat-color-primary);
}

.mat-badge--accent {
	background: var(--mat-color-accent-light);
	color: var(--mat-color-accent-600);
}

.mat-badge--success {
	background: var(--mat-color-success-light);
	color: var(--mat-color-success-dark);
}

.mat-badge--warning {
	background: var(--mat-color-warning-light);
	color: var(--mat-color-warning-dark);
}

.mat-badge--error {
	background: var(--mat-color-error-light);
	color: var(--mat-color-error-dark);
}

.mat-badge--info {
	background: var(--mat-color-info-light);
	color: var(--mat-color-info-dark);
}

.mat-badge--neutral {
	background: var(--mat-neutral-100);
	color: var(--mat-neutral-700);
}

/* Notification type badges (global so any page can use them) */
.mat-badge--security { background: var(--mat-color-error-light); color: var(--mat-color-error); }
.mat-badge--system   { background: var(--mat-color-info-light); color: var(--mat-color-info); }
.mat-badge--account  { background: var(--mat-color-success-light); color: var(--mat-color-success); }
.mat-badge--updates  { background: var(--mat-color-warning-light); color: var(--mat-color-warning); }
.mat-badge--payment  { background: var(--mat-color-accent-light); color: var(--mat-color-accent-600); }
.mat-badge--admin    { background: var(--mat-neutral-100); color: var(--mat-neutral-700); }

/* Dot indicator (e.g. unread count) */
.mat-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--mat-radius-full);
	background: var(--mat-color-error);
}

.mat-dot--success  { background: var(--mat-color-success); }
.mat-dot--warning  { background: var(--mat-color-warning); }
.mat-dot--primary  { background: var(--mat-color-primary); }

/* Count badge (notification bell) */
.mat-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--mat-space-1-5);
	font-size: 11px;
	font-weight: var(--mat-weight-bold);
	color: #ffffff;
	background: var(--mat-color-error);
	border-radius: var(--mat-radius-full);
	line-height: 1;
}

/* Tag (removable) */
.mat-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--mat-space-1);
	padding: var(--mat-space-1) var(--mat-space-2-5);
	font-size: var(--mat-text-xs);
	background: var(--mat-surface-inset);
	border: 1px solid var(--mat-border-color);
	border-radius: var(--mat-radius-md);
}

.mat-tag__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 14px;
	color: var(--mat-text-muted);
	cursor: pointer;
	border-radius: var(--mat-radius-full);
	transition: background var(--mat-transition-fast), color var(--mat-transition-fast);
}

.mat-tag__remove:hover {
	background: var(--mat-color-error-light);
	color: var(--mat-color-error);
}

/* ==========================================================================
   12. Modals
   ========================================================================== */

.mat-modal-backdrop {
	position: fixed;
	inset: 0;
	background: var(--mat-surface-overlay);
	z-index: var(--mat-z-modal-backdrop);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mat-transition-base),
				visibility var(--mat-transition-base);
}

.mat-modal-backdrop.is-active {
	opacity: 1;
	visibility: visible;
}

.mat-modal {
	background: var(--mat-surface-card);
	border-radius: var(--mat-radius-2xl) var(--mat-radius-2xl) 0 0;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	z-index: var(--mat-z-modal);
	transform: translateY(100%);
	transition: transform var(--mat-transition-slow);
}

.mat-modal-backdrop.is-active .mat-modal {
	transform: translateY(0);
}

/* Drag handle for mobile sheet */
.mat-modal__handle {
	display: flex;
	justify-content: center;
	padding: var(--mat-space-2) 0;
}

.mat-modal__handle::before {
	content: "";
	width: 36px;
	height: 4px;
	background: var(--mat-neutral-300);
	border-radius: var(--mat-radius-full);
}

.mat-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--mat-space-4) var(--mat-space-5);
	border-bottom: 1px solid var(--mat-border-light);
}

.mat-modal__title {
	font-size: var(--mat-text-lg);
	font-weight: var(--mat-weight-semibold);
	margin: 0;
}

.mat-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--mat-radius-lg);
	color: var(--mat-text-muted);
	transition: background var(--mat-transition-fast), color var(--mat-transition-fast);
}

.mat-modal__close:hover {
	background: var(--mat-surface-inset);
	color: var(--mat-text-primary);
}

.mat-modal__body {
	padding: var(--mat-space-5);
	overflow-y: auto;
	flex: 1;
}

.mat-modal__footer {
	display: flex;
	gap: var(--mat-space-2);
	justify-content: flex-end;
	padding: var(--mat-space-4) var(--mat-space-5);
	border-top: 1px solid var(--mat-border-light);
}

/* Modal sizes */
.mat-modal--sm { max-width: 400px; }
.mat-modal--lg { max-width: 720px; }
.mat-modal--full { max-width: 100%; max-height: 100%; border-radius: 0; }

/* ==========================================================================
   13. Toasts / Snackbars
   ========================================================================== */

.mat-toast-container {
	position: fixed;
	bottom: calc(var(--mat-bottom-nav-height) + var(--mat-space-4));
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--mat-z-toast);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--mat-space-2);
	max-width: calc(100vw - var(--mat-space-8));
	width: 100%;
	pointer-events: none;
}

.mat-toast {
	display: flex;
	align-items: center;
	gap: var(--mat-space-3);
	padding: var(--mat-space-3) var(--mat-space-4);
	background: var(--mat-color-secondary-800);
	color: #ffffff;
	border-radius: var(--mat-radius-xl);
	box-shadow: var(--mat-shadow-lg);
	font-size: var(--mat-text-sm);
	font-weight: var(--mat-weight-medium);
	pointer-events: auto;
	animation: mat-toast-in var(--mat-transition-spring) forwards;
}

.mat-toast.is-leaving {
	animation: mat-toast-out var(--mat-transition-base) forwards;
}

.mat-toast--success {
	background: var(--mat-color-success-dark);
}

.mat-toast--warning {
	background: var(--mat-color-warning-dark);
	color: #ffffff;
}

.mat-toast--error {
	background: var(--mat-color-error-dark);
}

.mat-toast--info {
	background: var(--mat-color-info-dark);
}

.mat-toast__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.mat-toast__message {
	flex: 1;
}

.mat-toast__dismiss {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: rgba(255, 255, 255, 0.7);
	border-radius: var(--mat-radius-full);
	transition: background var(--mat-transition-fast), color var(--mat-transition-fast);
}

.mat-toast__dismiss:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* ==========================================================================
   14. Navigation — Bottom Bar & Sidebar
   ========================================================================== */

/* Bottom navigation (mobile) */
.mat-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--mat-bottom-nav-height);
	background: var(--mat-surface-card);
	border-top: 1px solid var(--mat-border-color);
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: var(--mat-z-fixed);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.mat-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mat-space-0-5);
	padding: var(--mat-space-1-5) var(--mat-space-3);
	min-width: 64px;
	color: var(--mat-text-muted);
	text-decoration: none;
	font-size: 10px;
	font-weight: var(--mat-weight-medium);
	transition: color var(--mat-transition-fast);
	-webkit-tap-highlight-color: transparent;
	position: relative;
}

.mat-bottom-nav__item:hover,
.mat-bottom-nav__item.is-active {
	color: var(--mat-color-primary);
}

.mat-bottom-nav__icon {
	width: 24px;
	height: 24px;
}

/* Badge on nav item */
.mat-bottom-nav__item .mat-count-badge {
	position: absolute;
	top: 0;
	right: var(--mat-space-1);
	font-size: 9px;
	min-width: 16px;
	height: 16px;
	padding: 0 var(--mat-space-1);
}

/* Top app bar */
.mat-app-bar {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	height: var(--mat-nav-height);
	background: var(--mat-surface-card);
	border-bottom: 1px solid var(--mat-border-color);
	display: flex;
	align-items: center;
	padding: 0 var(--mat-space-4);
	z-index: var(--mat-z-sticky);
	gap: var(--mat-space-3);
}

.mat-app-bar__title {
	font-size: var(--mat-text-lg);
	font-weight: var(--mat-weight-semibold);
	color: var(--mat-text-heading);
	flex: 1;
	margin: 0;
}

.mat-app-bar__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mat-radius-full);
	color: var(--mat-text-secondary);
	transition: background var(--mat-transition-fast), color var(--mat-transition-fast);
	position: relative;
}

.mat-app-bar__action:hover {
	background: var(--mat-surface-inset);
	color: var(--mat-text-heading);
}

a.mat-app-bar__action {
	text-decoration: none;
}

a.mat-app-bar__action--active {
	color: var(--mat-color-primary);
}

.mat-app-bar__avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--mat-radius-full);
	object-fit: cover;
	display: block;
}

/* Sidebar navigation (desktop) */
.mat-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--mat-sidebar-width);
	background: var(--mat-surface-card);
	border-right: 1px solid var(--mat-border-color);
	overflow-y: auto;
	z-index: var(--mat-z-fixed);
	transform: translateX(-100%);
	transition: transform var(--mat-transition-base);
	display: flex;
	flex-direction: column;
}

.mat-sidebar.is-open {
	transform: translateX(0);
}

.mat-sidebar__header {
	padding: var(--mat-space-5);
	border-bottom: 1px solid var(--mat-border-light);
	display: flex;
	align-items: center;
	gap: var(--mat-space-3);
}

.mat-sidebar__logo {
	width: 36px;
	height: 36px;
	border-radius: var(--mat-radius-lg);
	object-fit: contain;
}

/* Light/dark logo swap based on theme mode. */
[data-mat-theme="dark"] .mat-sidebar__logo--light { display: none !important; }
[data-mat-theme="dark"] .mat-sidebar__logo--dark  { display: inline-block !important; }
[data-mat-theme="light"] .mat-sidebar__logo--light { display: inline-block !important; }
[data-mat-theme="light"] .mat-sidebar__logo--dark  { display: none !important; }

/* Auto mode: respect prefers-color-scheme */
@media (prefers-color-scheme: dark) {
	html:not([data-mat-theme="light"]) .mat-sidebar__logo--light { display: none !important; }
	html:not([data-mat-theme="light"]) .mat-sidebar__logo--dark  { display: inline-block !important; }
}

.mat-sidebar__brand {
	font-size: var(--mat-text-lg);
	font-weight: var(--mat-weight-bold);
	color: var(--mat-text-heading);
}

.mat-sidebar__nav {
	flex: 1;
	padding: var(--mat-space-3) var(--mat-space-2);
}

.mat-sidebar__link {
	display: flex;
	align-items: center;
	gap: var(--mat-space-3);
	padding: var(--mat-space-2-5) var(--mat-space-3);
	border-radius: var(--mat-radius-lg);
	color: var(--mat-text-secondary);
	font-size: var(--mat-text-sm);
	font-weight: var(--mat-weight-medium);
	text-decoration: none;
	transition: background var(--mat-transition-fast),
				color var(--mat-transition-fast);
	min-height: 44px;
}

.mat-sidebar__link:hover {
	background: var(--mat-surface-inset);
	color: var(--mat-text-heading);
}

.mat-sidebar__link.is-active {
	background: var(--mat-color-primary-light);
	color: var(--mat-color-primary);
}

.mat-sidebar__link-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.mat-sidebar__section-title {
	font-size: var(--mat-text-xs);
	font-weight: var(--mat-weight-semibold);
	color: var(--mat-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--mat-tracking-wider);
	padding: var(--mat-space-4) var(--mat-space-3) var(--mat-space-2);
}

.mat-sidebar__footer {
	padding: var(--mat-space-4) var(--mat-space-3);
	border-top: 1px solid var(--mat-border-light);
}

/* Sidebar user info */
.mat-sidebar__user {
	display: flex;
	align-items: center;
	gap: var(--mat-space-2);
	padding-bottom: var(--mat-space-2);
}

.mat-sidebar__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.mat-sidebar__user-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mat-sidebar__user-name {
	font-weight: var(--mat-weight-medium);
	color: var(--mat-text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mat-sidebar__user-email {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mat-sidebar__link--logout {
	color: var(--mat-text-secondary);
}

.mat-sidebar__link--logout:hover {
	color: var(--mat-color-error);
}

/* Sidebar notification badge */
.mat-sidebar-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	margin-left: var(--mat-space-1-5);
	border-radius: 50%;
	background: var(--mat-color-error);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Sidebar overlay (mobile backdrop) */
.mat-sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: calc(var(--mat-z-fixed) - 1);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mat-transition-base);
}

.mat-sidebar-overlay.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* ==========================================================================
   14b. App Layout — Body, Main, Footer
   ========================================================================== */

/* App body resets (when rendered by the plugin) */
.mat-app {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--mat-surface-bg);
	color: var(--mat-text-primary);
	font-family: var(--mat-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Main content area */
.mat-main {
	padding-top: var(--mat-space-6);
	padding-bottom: calc(var(--mat-bottom-nav-height) + var(--mat-space-8));
	min-height: calc(100vh - var(--mat-nav-height));
}

/* Footer */
.mat-footer {
	padding: var(--mat-space-6) 0;
	text-align: center;
	padding-bottom: calc(var(--mat-bottom-nav-height) + var(--mat-space-6));
}

/* ==========================================================================
   15. Loading Skeletons
   ========================================================================== */

.mat-skeleton {
	background: var(--mat-neutral-200);
	border-radius: var(--mat-radius-md);
	position: relative;
	overflow: hidden;
}

.mat-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	animation: mat-skeleton-pulse 1.5s ease-in-out infinite;
}

.mat-skeleton--text {
	height: 1em;
	margin-bottom: var(--mat-space-2);
}

.mat-skeleton--text:last-child {
	width: 70%;
}

.mat-skeleton--heading {
	height: 1.5em;
	width: 60%;
	margin-bottom: var(--mat-space-4);
}

.mat-skeleton--avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--mat-radius-full);
}

.mat-skeleton--card {
	height: 120px;
	border-radius: var(--mat-radius-xl);
}

.mat-skeleton--button {
	height: 44px;
	width: 120px;
	border-radius: var(--mat-radius-lg);
}

/* ==========================================================================
   16. Utility Classes
   ========================================================================== */

/* ── Display ──────────────────────────────────────────────── */
.mat-hidden      { display: none !important; }
.mat-block       { display: block; }
.mat-inline      { display: inline; }
.mat-inline-block{ display: inline-block; }
.mat-flex        { display: flex; }
.mat-inline-flex { display: inline-flex; }
.mat-grid-display{ display: grid; }

/* ── Flex utilities ───────────────────────────────────────── */
.mat-flex-col     { flex-direction: column; }
.mat-flex-wrap    { flex-wrap: wrap; }
.mat-items-center { align-items: center; }
.mat-items-start  { align-items: flex-start; }
.mat-items-end    { align-items: flex-end; }
.mat-justify-center  { justify-content: center; }
.mat-justify-between { justify-content: space-between; }
.mat-justify-end     { justify-content: flex-end; }
.mat-flex-1       { flex: 1; }
.mat-flex-shrink-0{ flex-shrink: 0; }

/* ── Gap ──────────────────────────────────────────────────── */
.mat-gap-1 { gap: var(--mat-space-1); }
.mat-gap-2 { gap: var(--mat-space-2); }
.mat-gap-3 { gap: var(--mat-space-3); }
.mat-gap-4 { gap: var(--mat-space-4); }
.mat-gap-6 { gap: var(--mat-space-6); }
.mat-gap-8 { gap: var(--mat-space-8); }

/* ── Text ─────────────────────────────────────────────────── */
.mat-text-left    { text-align: left; }
.mat-text-center  { text-align: center; }
.mat-text-right   { text-align: right; }
.mat-u-text-xs    { font-size: var(--mat-text-xs); }
.mat-u-text-sm    { font-size: var(--mat-text-sm); }
.mat-u-text-base  { font-size: var(--mat-text-base); }
.mat-u-text-lg    { font-size: var(--mat-text-lg); }
.mat-u-text-xl    { font-size: var(--mat-text-xl); }
.mat-u-text-2xl   { font-size: var(--mat-text-2xl); }
.mat-u-text-3xl   { font-size: var(--mat-text-3xl); }
.mat-font-normal  { font-weight: var(--mat-weight-normal); }
.mat-font-medium  { font-weight: var(--mat-weight-medium); }
.mat-font-semibold{ font-weight: var(--mat-weight-semibold); }
.mat-font-bold    { font-weight: var(--mat-weight-bold); }
.mat-u-text-heading { color: var(--mat-text-heading); }
.mat-u-text-primary { color: var(--mat-text-primary); }
.mat-u-text-secondary { color: var(--mat-text-secondary); }
.mat-u-text-muted   { color: var(--mat-text-muted); }
.mat-u-text-success { color: var(--mat-color-success); }
.mat-u-text-warning { color: var(--mat-color-warning); }
.mat-u-text-error   { color: var(--mat-color-error); }
.mat-text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Spacing (margin) ─────────────────────────────────────── */
.mat-m-0  { margin: 0; }
.mat-m-1  { margin: var(--mat-space-1); }
.mat-m-2  { margin: var(--mat-space-2); }
.mat-m-4  { margin: var(--mat-space-4); }
.mat-mt-0 { margin-top: 0; }
.mat-mt-1 { margin-top: var(--mat-space-1); }
.mat-mt-2 { margin-top: var(--mat-space-2); }
.mat-mt-3 { margin-top: var(--mat-space-3); }
.mat-mt-4 { margin-top: var(--mat-space-4); }
.mat-mt-6 { margin-top: var(--mat-space-6); }
.mat-mt-8 { margin-top: var(--mat-space-8); }
.mat-mb-0 { margin-bottom: 0; }
.mat-mb-1 { margin-bottom: var(--mat-space-1); }
.mat-mb-2 { margin-bottom: var(--mat-space-2); }
.mat-mb-3 { margin-bottom: var(--mat-space-3); }
.mat-mb-4 { margin-bottom: var(--mat-space-4); }
.mat-mb-6 { margin-bottom: var(--mat-space-6); }
.mat-mb-8 { margin-bottom: var(--mat-space-8); }
.mat-ml-auto { margin-left: auto; }
.mat-mr-auto { margin-right: auto; }
.mat-mx-auto { margin-left: auto; margin-right: auto; }

/* ── Spacing (padding) ────────────────────────────────────── */
.mat-p-0  { padding: 0; }
.mat-p-1  { padding: var(--mat-space-1); }
.mat-p-2  { padding: var(--mat-space-2); }
.mat-p-3  { padding: var(--mat-space-3); }
.mat-p-4  { padding: var(--mat-space-4); }
.mat-p-5  { padding: var(--mat-space-5); }
.mat-p-6  { padding: var(--mat-space-6); }
.mat-p-8  { padding: var(--mat-space-8); }
.mat-px-4 { padding-left: var(--mat-space-4); padding-right: var(--mat-space-4); }
.mat-py-2 { padding-top: var(--mat-space-2); padding-bottom: var(--mat-space-2); }
.mat-py-4 { padding-top: var(--mat-space-4); padding-bottom: var(--mat-space-4); }
.mat-py-6 { padding-top: var(--mat-space-6); padding-bottom: var(--mat-space-6); }
.mat-py-8 { padding-top: var(--mat-space-8); padding-bottom: var(--mat-space-8); }

/* ── Width / Height ───────────────────────────────────────── */
.mat-w-full { width: 100%; }
.mat-h-full { height: 100%; }
.mat-min-h-screen { min-height: 100vh; }

/* ── Overflow ─────────────────────────────────────────────── */
.mat-overflow-hidden  { overflow: hidden; }
.mat-overflow-auto    { overflow: auto; }
.mat-overflow-x-auto  { overflow-x: auto; }

/* ── Border ───────────────────────────────────────────────── */
.mat-border      { border: 1px solid var(--mat-border-color); }
.mat-border-t    { border-top: 1px solid var(--mat-border-color); }
.mat-border-b    { border-bottom: 1px solid var(--mat-border-color); }
.mat-rounded     { border-radius: var(--mat-radius-lg); }
.mat-rounded-xl  { border-radius: var(--mat-radius-xl); }
.mat-rounded-2xl { border-radius: var(--mat-radius-2xl); }
.mat-rounded-full{ border-radius: var(--mat-radius-full); }

/* ── Shadows ──────────────────────────────────────────────── */
.mat-shadow-none { box-shadow: none; }
.mat-shadow-sm   { box-shadow: var(--mat-shadow-sm); }
.mat-shadow-md   { box-shadow: var(--mat-shadow-md); }
.mat-shadow-lg   { box-shadow: var(--mat-shadow-lg); }

/* ── Background ───────────────────────────────────────────── */
.mat-bg-surface  { background: var(--mat-surface-bg); }
.mat-bg-card     { background: var(--mat-surface-card); }
.mat-bg-inset    { background: var(--mat-surface-inset); }
.mat-bg-primary  { background: var(--mat-color-primary); color: var(--mat-color-primary-contrast); }
.mat-bg-primary-light { background: var(--mat-color-primary-light); color: var(--mat-color-primary); }
.mat-bg-success  { background: var(--mat-color-success-light); }
.mat-bg-warning  { background: var(--mat-color-warning-light); }
.mat-bg-error    { background: var(--mat-color-error-light); }

/* ── Position ─────────────────────────────────────────────── */
.mat-relative { position: relative; }
.mat-absolute { position: absolute; }
.mat-sticky   { position: sticky; top: 0; }

/* ── Visibility ───────────────────────────────────────────── */
.mat-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ── Cursor ───────────────────────────────────────────────── */
.mat-cursor-pointer { cursor: pointer; }
.mat-cursor-default { cursor: default; }

/* ── Safe-area padding for PWA ────────────────────────────── */
.mat-safe-bottom {
	padding-bottom: calc(var(--mat-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--mat-space-4));
}

/* ==========================================================================
   17. Animations & Transitions
   ========================================================================== */

@keyframes mat-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes mat-skeleton-pulse {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes mat-toast-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes mat-toast-out {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(16px) scale(0.95);
	}
}

@keyframes mat-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes mat-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mat-fade-in-down {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mat-scale-in {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mat-slide-in-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

@keyframes mat-slide-in-left {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

@keyframes mat-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

/* Animation utilities */
.mat-animate-fade-in    { animation: mat-fade-in var(--mat-transition-base) forwards; }
.mat-animate-fade-in-up { animation: mat-fade-in-up var(--mat-transition-base) forwards; }
.mat-animate-scale-in   { animation: mat-scale-in var(--mat-transition-spring) forwards; }
.mat-animate-pulse      { animation: mat-pulse 2s ease-in-out infinite; }

/* Transition helpers */
.mat-transition-all  { transition: all var(--mat-transition-base); }
.mat-transition-fast { transition: all var(--mat-transition-fast); }
.mat-transition-slow { transition: all var(--mat-transition-slow); }

/* Prefer reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   18. Responsive — Tablet (≥ 768px)
   ========================================================================== */

@media (min-width: 768px) {
	.mat-container {
		padding-inline: var(--mat-space-6);
	}

	/* Grid — show columns at tablet */
	.mat-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.mat-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.mat-grid--4 { grid-template-columns: repeat(2, 1fr); }

	/* Inline form row on tablet+ */
	.mat-form-row {
		flex-direction: row;
	}

	.mat-form-row .mat-form-group {
		flex: 1;
	}

	/* Toast wider */
	.mat-toast-container {
		max-width: 420px;
	}

	/* Modal center-positioned */
	.mat-modal-backdrop {
		align-items: center;
	}

	.mat-modal {
		border-radius: var(--mat-radius-2xl);
		transform: translateY(24px);
		opacity: 0;
	}

	.mat-modal__handle {
		display: none;
	}

	.mat-modal-backdrop.is-active .mat-modal {
		transform: translateY(0);
		opacity: 1;
	}

	/* Tab-only visible */
	.mat-hidden-mobile { display: revert; }

	h1 { font-size: var(--mat-text-4xl); }
	h2 { font-size: var(--mat-text-3xl); }

	/* Stat card horizontal layout */
	.mat-stat-card {
		text-align: left;
		display: flex;
		align-items: center;
		gap: var(--mat-space-4);
	}

	.mat-stat-card__icon {
		margin: 0;
	}
}

/* ==========================================================================
   19. Responsive — Desktop (≥ 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	/* Grid — full columns at desktop */
	.mat-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.mat-grid--4 { grid-template-columns: repeat(3, 1fr); }

	/* Show sidebar, hide bottom nav */
	.mat-sidebar {
		transform: translateX(0);
	}

	.mat-bottom-nav {
		display: none;
	}

	/* Main content offset for sidebar */
	.mat-main-with-sidebar {
		margin-left: var(--mat-sidebar-width);
	}

	/* App bar offset for sidebar */
	.mat-app-bar {
		left: var(--mat-sidebar-width);
	}

	/* Footer offset for sidebar, remove bottom-nav spacing */
	.mat-footer {
		margin-left: var(--mat-sidebar-width);
		padding-bottom: var(--mat-space-6);
	}

	/* Main no longer needs bottom-nav padding */
	.mat-main {
		padding-bottom: var(--mat-space-8);
	}

	/* Hide sidebar overlay on desktop */
	.mat-sidebar-overlay {
		display: none;
	}

	/* Toast top-right on desktop */
	.mat-toast-container {
		bottom: auto;
		top: var(--mat-space-6);
		right: var(--mat-space-6);
		left: auto;
		transform: none;
		max-width: 420px;
	}

	/* Desktop-only visible */
	.mat-hidden-tablet { display: revert; }
}

/* ==========================================================================
   20. Responsive — Wide (≥ 1280px)
   ========================================================================== */

@media (min-width: 1280px) {
	.mat-grid--4 { grid-template-columns: repeat(4, 1fr); }

	.mat-container {
		padding-inline: var(--mat-space-8);
	}

	h1 { font-size: var(--mat-text-5xl); }
}

/* ==========================================================================
   Responsive Visibility Helpers
   ========================================================================== */

/* Hide on mobile (shown on ≥768px) */
.mat-hidden-mobile { display: none; }

/* Hide on tablet (shown on ≥1024px) */
.mat-hidden-tablet { display: none; }

/* Show only on mobile (hidden ≥768px) */
@media (min-width: 768px) {
	.mat-show-mobile-only { display: none !important; }
}

/* Show only on desktop */
@media (max-width: 1023px) {
	.mat-show-desktop-only { display: none !important; }
}

/* ==========================================================================
   Shared Component Styles (used across multiple pages)
   ========================================================================== */

/* ─── Alert Banners ────────────────────────────────────────── */
.mat-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--mat-space-3);
	padding: var(--mat-space-3) var(--mat-space-4);
	border-radius: var(--mat-radius-lg);
	font-size: var(--mat-text-sm);
	line-height: 1.5;
	animation: mat-fade-in-down 0.3s ease-out;
}

.mat-alert--success {
	background: var(--mat-color-success-light);
	color: var(--mat-color-success);
	border: 1px solid var(--mat-color-success);
}

.mat-alert--error {
	background: var(--mat-color-error-light);
	color: var(--mat-color-error);
	border: 1px solid var(--mat-color-error);
}

.mat-alert--warning {
	background: var(--mat-color-warning-light);
	color: var(--mat-color-warning);
	border: 1px solid var(--mat-color-warning);
}

.mat-alert--info {
	background: var(--mat-color-info-light);
	color: var(--mat-color-info);
	border: 1px solid var(--mat-color-info);
}

.mat-alert__icon {
	flex-shrink: 0;
	margin-top: 1px;
}

.mat-alert__content {
	flex: 1;
}

/* ─── Form Actions ────────────────────────────────────────── */
.mat-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--mat-space-3);
	padding-top: var(--mat-space-4);
}

.mat-form-hint {
	font-size: var(--mat-text-xs);
	color: var(--mat-text-muted);
	margin-top: var(--mat-space-1);
}

/* ─── Table Responsive Wrapper ─────────────────────────────── */
.mat-table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ─── Text Utility Shorthand (aliases for mat-u-text-*) ────── */
.mat-text-xs        { font-size: var(--mat-text-xs); }
.mat-text-sm        { font-size: var(--mat-text-sm); }
.mat-text-lg        { font-size: var(--mat-text-lg); }
.mat-text-xl        { font-size: var(--mat-text-xl); }
.mat-text-2xl       { font-size: var(--mat-text-2xl); }
.mat-text-heading   { color: var(--mat-text-heading); }
.mat-text-primary   { color: var(--mat-text-primary); }
.mat-text-secondary { color: var(--mat-text-secondary); }
.mat-text-muted     { color: var(--mat-text-muted); }
.mat-text-error     { color: var(--mat-color-error); }