/* ============================================================================
   GITHUB-INSPIRED DESIGN SYSTEM FOR BOOKADMIN PWA
   ============================================================================
   
   COLOR PALETTE (GitHub-inspired, professional):
   Primary:     #1F6FEB (GitHub Blue) - Links, CTAs
   Secondary:   #FB8500 (Orange) - Accent, highlights
   Neutral 0:   #FFFFFF (White) - Card backgrounds, text backgrounds
   Neutral 50:  #F6F8FA (Ghost white) - Page backgrounds
   Neutral 100: #EAEEF2 (Light gray) - Secondary backgrounds
   Neutral 200: #D0D7DE (Border gray) - Borders, dividers
   Neutral 500: #57606A (Gray) - Secondary text
   Neutral 900: #24292F (Dark gray) - Primary text
   Success:     #1A7F37 (Green) - Status, confirmations
   Error:       #DA3633 (Red) - Destructive actions, errors
   Warning:     #9E6A03 (Amber) - Alerts, warnings
   
   TYPOGRAPHY:
   Font Stack:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif
   Base Size:   14px
   Line Height: 1.5
   
   SPACING SCALE:
   xs: 4px
   sm: 8px
   md: 12px
   lg: 16px
   xl: 24px
   
   =========================================================================== */

:root {
	--color-primary: #0969DA;
	--color-primary-hover: #0860CA;
	--color-primary-active: #0550AE;
	--color-secondary: #FB8500;
	--color-secondary-light: #FCA311;
	--color-surface: #FFFFFF;
	--color-surface-variant: #F6F8FA;
	--color-canvas-default: #FFFFFF;
	--color-canvas-subtle: #F6F8FA;
	--color-canvas-inset: #F6F8FA;
	--color-border: #D0D7DE;
	--color-border-muted: #D8DEE4;
	--color-border-default: #D0D7DE;
	--color-text-primary: #1F2328;
	--color-text-secondary: #656D76;
	--color-text-tertiary: #656D76;
	--color-text-link: #0969DA;
	--color-text-link-hover: #0550AE;
	--color-success: #1A7F37;
	--color-success-emphasis: #0F5323;
	--color-error: #D1242F;
	--color-error-emphasis: #A40E26;
	--color-warning: #9A6700;
	--color-attention: #BF8700;
	--color-header-bg: #24292F;
	--color-header-text: #FFFFFF;
	--color-btn-text: #1F2328;
	--color-btn-bg: #F6F8FA;
	--color-btn-border: rgba(31, 35, 40, 0.15);
	--color-btn-hover-bg: #656D76;
	--color-btn-hover-border: rgba(31, 35, 40, 0.15);
	--color-btn-active-bg: hsla(220, 14%, 93%, 1);
	--color-btn-primary-text: #FFFFFF;
	--color-btn-primary-bg: #1F883D;
	--color-btn-primary-hover-bg: #1A7F37;
	--color-btn-primary-active-bg: #18752F;

	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
	--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 32px;
	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 40px;

	--shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04);
	--shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15);
	--shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);
	--shadow-xl: 0 12px 28px rgba(140, 149, 159, 0.3);

	--transition-fast: 80ms cubic-bezier(0.33, 1, 0.68, 1);
	--transition-base: 200ms cubic-bezier(0.33, 1, 0.68, 1);
	--transition-slow: 300ms cubic-bezier(0.33, 1, 0.68, 1);

	--radius-sm: 6px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--radius-xl: 12px;
	--radius-full: 9999px;
}

/* ============================================================================
   GLOBAL STYLES
   =========================================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	background-color: var(--color-canvas-default);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
	line-height: var(--line-height-tight);
	margin: 0;
	color: var(--color-text-primary);
}

h1 {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--spacing-lg);
}

h2 {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-md);
}

h3 {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-md);
}

h4,
h5,
h6 {
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-sm);
}

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

a:hover {
	color: var(--color-text-link-hover);
	/* text-decoration: underline; */
}

a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

code {
	font-family: var(--font-family-mono);
	font-size: 85%;
	background-color: rgba(175, 184, 193, 0.2);
	padding: 0.2em 0.4em;
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
}

/* ============================================================================
   NAVIGATION BAR
   =========================================================================== */

.navbar {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
	background-color: var(--color-header-bg) !important;
	border-bottom: 1px solid rgba(240, 246, 252, 0.1);
	padding: var(--spacing-md) 0 !important;
	min-height: 65px;
}

.navbar-brand {
	font-weight: 600;
	font-size: var(--font-size-base);
	color: var(--color-header-text) !important;
	transition: opacity var(--transition-fast);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.navbar-brand:hover {
	opacity: 0.7;
}

.navbar-nav .nav-link {
	color: var(--color-header-text) !important;
	font-weight: 600;
	font-size: var(--font-size-base);
	padding: var(--spacing-xs) var(--spacing-md) !important;
	margin: 0 var(--spacing-xs);
	transition: all var(--transition-fast);
	position: relative;
	opacity: 0.7;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler {
	border: none !important;
	padding: var(--spacing-sm) !important;
	color: var(--color-header-text) !important;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   HERO / MASTHEAD
   =========================================================================== */

.masthead {
	position: relative;
	min-height: 60vh;
	padding: var(--spacing-2xl) var(--spacing-md);
	background: linear-gradient(135deg, #24292F 0%, #1F2328 100%);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-header-text);
	overflow: hidden;
}

.masthead::before {
	display: none;
}

.masthead>* {
	position: relative;
	z-index: 1;
}

.masthead h1 {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 600;
	margin-bottom: var(--spacing-md);
	color: var(--color-header-text);
	text-shadow: none;
}

.masthead h3 {
	font-size: clamp(1.125rem, 3vw, 1.5rem);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--spacing-xl);
	max-width: 600px;
	text-shadow: none;
	text-align: center;
}

main.index {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main.index footer {
	margin-top: auto;
}

footer {
	padding: var(--spacing-xl) var(--spacing-md);
	background-color: var(--color-canvas-subtle);
	border-top: 1px solid var(--color-border-default);
}

footer .logo {
	transition: opacity var(--transition-base);
}

footer .logo:hover {
	opacity: 1 !important;
}

/* ============================================================================
   CARDS
   =========================================================================== */

.card {
	border: 1px solid var(--color-border-default);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12), 0 1px 2px rgba(31, 35, 40, 0.08);
	background-color: var(--color-canvas-default);
	overflow: hidden;
	transition: all var(--transition-base);
	margin-bottom: var(--spacing-md);
}

.card-body {
	padding: 24px;
}

.card-title {
	font-weight: 600;
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--color-text-primary);
	margin-bottom: var(--spacing-md);
}

.card-text {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--spacing-sm);
	line-height: var(--line-height-relaxed);
}

.card-subtitle {
	font-size: var(--font-size-sm);
	color: var(--color-text-tertiary);
	font-weight: 500;
	margin-top: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
}

/* .card-primary {
	border-left: 3px solid var(--color-primary);
} */

.card-success {
	border-left: 3px solid var(--color-success);
}

.card-error {
	border-left: 3px solid var(--color-error);
}

.card-warning {
	border-left: 3px solid var(--color-warning);
}

/* ============================================================================
   BUTTONS
   =========================================================================== */

.btn,
.btn-lg,
.btn-sm {
	font-weight: 500;
	font-size: var(--font-size-sm);
	padding: 5px 16px;
	border: 1px solid var(--color-btn-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-fast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xs);
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	outline: none;
	line-height: 20px;
}

.btn-primary {
	background-color: var(--color-btn-primary-bg);
	color: var(--color-btn-primary-text);
	border-color: rgba(31, 35, 40, 0.15);
	box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.btn-primary:hover:not(:disabled) {
	background-color: var(--color-btn-primary-hover-bg);
	border-color: rgba(31, 35, 40, 1);
}

.btn-primary:active:not(:disabled) {
	background-color: var(--color-btn-primary-active-bg);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* .btn-primary:focus-visible {
	outline: 2px solid var(--color-btn-primary-bg);
	outline-offset: 2px;
} */

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

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
	background-color: var(--color-btn-bg);
	color: var(--color-btn-text);
	border: 1px solid var(--color-btn-border);
	/* box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25); */
}

.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled) {
	background-color: var(--color-btn-hover-bg);
	border-color: var(--color-btn-hover-border);
}

.btn-secondary:active:not(:disabled),
.btn-outline-secondary:active:not(:disabled),
.btn-outline-primary:active:not(:disabled) {
	background-color: var(--color-btn-active-bg);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

.btn-success {
	background-color: var(--color-success);
	color: white;
	border-color: rgba(31, 35, 40, 0.15);
	box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
}

.btn-success:hover:not(:disabled) {
	background-color: var(--color-success-emphasis);
}

.btn-danger {
	background-color: var(--color-error);
	color: white;
	border-color: rgba(31, 35, 40, 0.15);
	box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
}

.btn-danger:hover:not(:disabled) {
	background-color: var(--color-error-emphasis);
}

.btn-warning {
	background-color: var(--color-warning);
	color: white;
	border-color: rgba(31, 35, 40, 0.15);
	box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
}

.btn-warning:hover:not(:disabled) {
	background-color: #854D0E;
}

.btn-lg {
	padding: 10px 20px;
	font-size: var(--font-size-base);
}

.btn-sm {
	padding: 3px 12px;
	font-size: var(--font-size-sm);
}

.btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
}

.btn-group {
	display: inline-flex;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.btn-group .btn {
	border-radius: 0;
	border-right-width: 0;
}

.btn-group .btn:first-child {
	border-top-left-radius: var(--radius-md);
	border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
	border-top-right-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
	border-right-width: 1px;
}

.btn-group .btn:not(:last-child) {
	margin-right: -1px;
}

.btn-group.flex-wrap {
	flex-wrap: wrap;
}

.btn-group.flex-wrap .btn {
	border-radius: var(--radius-md);
	border-right-width: 1px;
	margin: 2px;
}

/* ============================================================================
   FORMS & INPUTS
   =========================================================================== */

.form-group {
	margin-bottom: var(--spacing-xs);
}

.form-label {
	display: flex;
	justify-content: space-between;
	align-items: normal;
	margin-bottom: var(--spacing-xs);
	/* display: flex;
	margin-bottom: var(--spacing-sm);
	font-weight: 500;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary); */
}

.form-value {
	float: none;
	font-weight: 600;
	font-size: var(--font-size-lg);
	color: var(--color-text-primary);
}

.form-control {
	width: 100%;
	padding: 5px 12px;
	font-size: var(--font-size-base);
	font-family: var(--font-family);
	color: var(--color-text-primary);
	background-color: var(--color-canvas-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	line-height: 20px;
}

.form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
	background-color: var(--color-canvas-default);
}

.form-control::placeholder {
	color: var(--color-text-tertiary);
}

.form-control:disabled {
	background-color: var(--color-canvas-subtle);
	color: var(--color-text-secondary);
	cursor: not-allowed;
}

textarea.form-control {
	resize: vertical;
	min-height: 100px;
}

/* Select */
select.form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230D47A1'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-md) center;
	background-size: 20px;
	padding-right: calc(var(--spacing-xl) + var(--spacing-md));
}

select.form-control:disabled {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239E9E9E'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Input group */
.input-group {
	display: flex;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.input-group>.form-control {
	flex: 1;
}

/* Form helper text */
.form-text {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-xs);
	color: var(--color-text-tertiary);
}

.form-text.text-danger {
	color: var(--color-error);
}

.form-text.text-success {
	color: var(--color-success);
}

/* Form validation */
.form-control.is-invalid {
	border-color: var(--color-error);
}

.form-control.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(218, 54, 51, 0.1);
	border-color: var(--color-error);
}

.form-control.is-valid {
	border-color: var(--color-success);
}

.form-control.is-valid:focus {
	box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.1);
	border-color: var(--color-success);
}

/* Checkbox & Radio */
.form-check {
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
}

.form-check-input {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	cursor: pointer;
	accent-color: var(--color-primary);
	border: 1px solid var(--color-border-default);
	border-radius: 3px;
	transition: all var(--transition-fast);
	flex-shrink: 0;
}

.form-check-input[type="radio"] {
	border-radius: 50%;
}

.form-check-input:hover {
	border-color: var(--color-text-secondary);
}

.form-check-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
	border-color: var(--color-primary);
}

.form-check-input:checked {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.form-check-label {
	margin-bottom: 0;
	cursor: pointer;
	font-size: var(--font-size-base);
	color: var(--color-text-primary);
	line-height: 20px;
}

/* ============================================================================
   TABLES
   =========================================================================== */

.table {
	margin-bottom: 0;
	border-collapse: collapse;
	background-color: var(--color-canvas-default);
	width: 100%;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.table thead {
	background-color: var(--color-canvas-subtle);
}

.table thead th {
	padding: 8px 16px;
	font-weight: 600;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	text-align: left;
	border-bottom: 1px solid var(--color-border-default);
	background-color: var(--color-canvas-subtle);
}

.table tbody td {
	padding: 8px 16px;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	border-top: 1px solid var(--color-border-default);
	vertical-align: middle;
}

.table tbody tr:first-child td {
	border-top: none;
}

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

.table-sm th,
.table-sm td {
	padding: 6px 12px;
	font-size: var(--font-size-sm);
}

.table-responsive {
	overflow-x: auto;
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
}

/* Status badges in tables */
.table-status {
	display: inline-block;
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: var(--font-size-xs);
}

.table-status.status-pending {
	background-color: #FFF3E0;
	color: var(--color-warning);
}

.table-status.status-active {
	background-color: #E8F5E9;
	color: var(--color-success);
}

.table-status.status-completed {
	background-color: #F3E5F5;
	color: #7B1FA2;
}

.table-status.status-cancelled {
	background-color: #FFEBEE;
	color: var(--color-error);
}

/* ============================================================================
   MESSAGES & ALERTS
   =========================================================================== */

.alert {
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	border: 1px solid;
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-sm);
	display: flex;
	gap: var(--spacing-sm);
	align-items: flex-start;
	line-height: 1.5;
}

.alert-success {
	background-color: #DFF6DD;
	color: #1F2328;
	border-color: #1A7F37;
}

.alert-danger,
.alert-error {
	background-color: #FFE8E6;
	color: #1F2328;
	border-color: #D1242F;
}

.alert-warning {
	background-color: #FFF8C5;
	color: #1F2328;
	border-color: #BF8700;
}

.alert-info {
	background-color: #DDF4FF;
	color: #1F2328;
	border-color: #0969DA;
}

.alert-heading {
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	font-size: var(--font-size-sm);
}

.alert-close {
	background: none;
	border: none;
	font-size: var(--font-size-lg);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--transition-fast);
}

.alert-close:hover {
	opacity: 1;
}

.btn-close {
	background: transparent;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: var(--color-text-secondary);
	cursor: pointer;
	opacity: 0.5;
	padding: 0;
	margin-left: auto;
	transition: opacity var(--transition-fast);
}

.btn-close:hover {
	opacity: 1;
}

.btn-close:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.alert-dismissible {
	padding-right: var(--spacing-xl);
	position: relative;
}

.alert-dismissible .btn-close {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
}

.fade {
	transition: opacity var(--transition-base);
}

.fade:not(.show) {
	opacity: 0;
}

.fade.show {
	opacity: 1;
}

.badge,
.table-status {
	display: inline-block;
	padding: 0 7px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	border-radius: 2em;
	white-space: nowrap;
}

.badge.bg-primary,
.badge.badge-primary {
	background-color: #0969DA !important;
	color: #FFFFFF;
}

.badge.bg-info,
.badge.badge-info {
	background-color: #54AEFF;
	color: #24292F;
}

.badge.bg-success,
.badge.badge-success {
	background-color: #1A7F37;
	color: #FFFFFF;
}

.badge.bg-danger,
.badge.badge-danger {
	background-color: #D1242F;
	color: #FFFFFF;
}

.badge.bg-warning,
.badge.badge-warning {
	background-color: #BF8700;
	color: #24292F;
}

.badge.bg-secondary,
.badge.badge-secondary {
	background-color: var(--color-canvas-subtle);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-default);
}

/* ============================================================================
   MODALS
   =========================================================================== */

.modal-content {
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
	background-color: var(--color-canvas-default);
}

.modal-header {
	border-bottom: 1px solid var(--color-border-default);
	padding: var(--spacing-md);
}

.modal-title {
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--color-text-primary);
}

.modal-body {
	padding: var(--spacing-md);
	font-size: var(--font-size-base);
	color: var(--color-text-primary);
}

.modal-footer {
	border-top: 1px solid var(--color-border-default);
	padding: var(--spacing-md);
	display: flex;
	gap: var(--spacing-sm);
	justify-content: flex-end;
}

/* ============================================================================
   UTILITIES
   =========================================================================== */

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.container-fluid {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.container-sm {
	max-width: 640px;
}

.container-lg {
	max-width: 1400px;
}

/* Spacing utilities */
.mt-0 {
	margin-top: 0;
}

.mt-xs {
	margin-top: var(--spacing-xs);
}

.mt-sm {
	margin-top: var(--spacing-sm);
}

.mt-md {
	margin-top: var(--spacing-md);
}

.mt-lg {
	margin-top: var(--spacing-lg);
}

.mt-xl {
	margin-top: var(--spacing-xl);
}

.mb-0 {
	margin-bottom: 0;
}

.mb-xs {
	margin-bottom: var(--spacing-xs);
}

.mb-sm {
	margin-bottom: var(--spacing-sm);
}

.mb-md {
	margin-bottom: var(--spacing-md);
}

.mb-lg {
	margin-bottom: var(--spacing-lg);
}

.mb-xl {
	margin-bottom: var(--spacing-xl);
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.px-md {
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.p-lg {
	padding: var(--spacing-lg);
}

.py-lg {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
}

.py-4 {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
}

.py-5 {
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xl);
}

.pt-3 {
	padding-top: var(--spacing-md);
}

.pt-lg {
	padding-top: var(--spacing-lg);
}

.mb-1 {
	margin-bottom: 4px;
}

.mb-2 {
	margin-bottom: 8px;
}

.mb-3 {
	margin-bottom: 12px;
}

.mb-4 {
	margin-bottom: var(--spacing-md);
}

.me-1 {
	margin-right: 4px;
}

.me-2 {
	margin-right: 8px;
}

.ms-2 {
	margin-left: 8px;
}

.ms-auto {
	margin-left: auto;
}

.mt-2 {
	margin-top: 8px;
}

.mt-3 {
	margin-top: 12px;
}

.mt-4 {
	margin-top: var(--spacing-md);
}

/* Text utilities */
.text-primary {
	color: var(--color-primary);
}

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

.text-success {
	color: var(--color-success);
}

.text-error,
.text-danger {
	color: var(--color-error);
}

.text-warning {
	color: var(--color-warning);
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-capitalize {
	text-transform: capitalize;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-lowercase {
	text-transform: lowercase;
}

.font-weight-normal {
	font-weight: 400;
}

.font-weight-medium {
	font-weight: 500;
}

.font-weight-semibold {
	font-weight: 600;
}

.font-weight-bold {
	font-weight: 700;
}

.text-muted {
	color: var(--color-text-secondary) !important;
	font-size: 16px
}

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

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

/* Display utilities */
.d-none {
	display: none;
}

.d-block {
	display: block;
}

.d-inline {
	display: inline;
}

.d-inline-block {
	display: inline-block;
}

.d-flex {
	display: flex;
}

.d-grid {
	display: grid;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.gap-sm {
	gap: var(--spacing-sm);
}

.gap-2 {
	gap: var(--spacing-sm);
}

.gap-md {
	gap: var(--spacing-md);
}

.gap-lg {
	gap: var(--spacing-lg);
}

/* Flexbox utilities */
.flex-1 {
	flex: 1;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-col {
	flex-direction: column;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

.align-items-start {
	align-items: flex-start;
}

.text-decoration-none {
	text-decoration: none !important;
}

.fw-medium {
	font-weight: 500;
}

.fw-semibold {
	font-weight: 600;
}

.fw-bold {
	font-weight: 700;
}

.fw-normal {
	font-weight: 400;
}

.small {
	font-size: var(--font-size-sm);
}

.h-100 {
	height: 100%;
}

.border-top {
	border-top: 1px solid var(--color-border-default);
}

.border-bottom {
	border-bottom: 1px solid var(--color-border-default);
}

.rounded-circle {
	border-radius: 50%;
}

.opacity-90 {
	opacity: 0.9;
}

.g-4 {
	gap: 1.5rem;
}

/* ============================================================================
   RESPONSIVE LAYOUT
   =========================================================================== */

.row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
	.row {
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}
}

@media (min-width: 1024px) {
	.row {
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
}

/* Bootstrap grid compatibility */
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-12,
.col-12,
.col-sm-6,
.col-lg-4,
.col-lg-5 {
	width: 100%;
}

@media (min-width: 576px) {
	.col-sm-6 {
		width: 50%;
	}
}

@media (min-width: 768px) {
	.col-md-4 {
		width: 33.333%;
	}

	.col-md-5 {
		width: 41.666%;
	}

	.col-md-6 {
		width: 50%;
	}

	.col-md-12 {
		width: 100%;
	}
}

@media (min-width: 1024px) {
	.col-lg-4 {
		width: 33.333%;
	}

	.col-lg-5 {
		width: 41.666%;
	}
}

.row.justify-content-center {
	justify-content: center;
}

/* ============================================================================
   PWA & MOBILE SPECIFIC
   =========================================================================== */

@supports (padding: max(0px)) {
	body {
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}

	.navbar {
		padding-top: max(var(--spacing-md), env(safe-area-inset-top));
	}
}

/* Prevent zoom on input focus for iOS */
input,
select,
textarea,
button {
	font-size: 16px;
}

/* ============================================================================
   ANIMATIONS & TRANSITIONS
   =========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.btn,
	.form-control,
	.card,
	.nav-link {
		transition: all var(--transition-fast);
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================================
   PRINT STYLES
   =========================================================================== */

@media print {
	body {
		background-color: white;
	}

	.navbar,
	.btn,
	.btn-primary,
	.btn-secondary {
		display: none;
	}

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

/* Make modal backdrop a lighter gray (less blacked-out) */
/* Use a subtle gray overlay instead of strong black */
.modal-backdrop {
	background-color: rgba(128, 128, 128, 0.75) !important;
}

.modal-backdrop.show {
	opacity: 1 !important;
	/* ensure our background-color opacity is applied */
}