/* ================================================================
   v2026 SHARED DESIGN SYSTEM
   Portal UI Modernization — Shared Components

   Usage: Each page sets its theme color via CSS variables on .app-dash:
     .app-dash { --app-primary: #4f46e5; --app-primary-light: #6366f1; ... }

   Module-specific CSS stays inline in each plugin file.
   ================================================================ */


/* ============================================
   1. BASE VARIABLES & DEFAULTS
   ============================================ */
.app-dash {
	--app-primary: #059669;
	--app-primary-light: #10b981;
	--app-primary-bg: #d1fae5;
	--app-primary-rgb: 5, 150, 105;
	--app-accent-blue: #2563eb;
	--app-accent-blue-bg: #dbeafe;
	--app-accent-teal: #0d9488;
	--app-accent-teal-bg: #ccfbf1;
	--app-accent-green: #16a34a;
	--app-accent-green-bg: #dcfce7;
	--app-accent-amber: #d97706;
	--app-accent-amber-bg: #fef3c7;
	--app-accent-red: #dc2626;
	--app-accent-red-bg: #fee2e2;
	--app-accent-indigo: #4f46e5;
	--app-accent-indigo-bg: #e0e7ff;
	--app-text: #1e293b;
	--app-text-secondary: #64748b;
	--app-text-muted: #94a3b8;
	--app-border: #e2e8f0;
	--app-bg: #f8fafc;
	--app-card: #ffffff;
}

/* Module theme overrides (set on .app-dash or scoped container) */
.app-dash.theme-emerald  { --app-primary: #059669; --app-primary-light: #10b981; --app-primary-bg: #d1fae5; --app-primary-rgb: 5, 150, 105; }
.app-dash.theme-blue     { --app-primary: #2563eb; --app-primary-light: #3b82f6; --app-primary-bg: #dbeafe; --app-primary-rgb: 37, 99, 235; }
.app-dash.theme-indigo   { --app-primary: #4f46e5; --app-primary-light: #6366f1; --app-primary-bg: #eef2ff; --app-primary-rgb: 79, 70, 229; }
.app-dash.theme-teal     { --app-primary: #0d9488; --app-primary-light: #14b8a6; --app-primary-bg: #ccfbf1; --app-primary-rgb: 13, 148, 136; }
.app-dash.theme-violet   { --app-primary: #7c3aed; --app-primary-light: #8b5cf6; --app-primary-bg: #ede9fe; --app-primary-rgb: 124, 58, 237; }
.app-dash.theme-slate    { --app-primary: #475569; --app-primary-light: #64748b; --app-primary-bg: #f1f5f9; --app-primary-rgb: 71, 85, 105; }
.app-dash.theme-amber    { --app-primary: #d97706; --app-primary-light: #f59e0b; --app-primary-bg: #fef3c7; --app-primary-rgb: 217, 119, 6; }
.app-dash.theme-cyan     { --app-primary: #0891b2; --app-primary-light: #06b6d4; --app-primary-bg: #cffafe; --app-primary-rgb: 8, 145, 178; }
.app-dash.theme-sky      { --app-primary: #0ea5e9; --app-primary-light: #38bdf8; --app-primary-bg: #e0f2fe; --app-primary-rgb: 14, 165, 233; }


/* ============================================
   2. CONTAINER
   ============================================ */
.app-dash {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px;
}


/* ============================================
   3. STANDALONE HERO HEADER
   ============================================ */
.app-dash-hero {
	background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-light) 100%);
	border-radius: 12px;
	color: #fff;
	padding: 24px 28px;
	margin-bottom: 32px;
	position: relative;
	overflow: hidden;
}
.app-dash-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -15%;
	width: 400px;
	height: 400px;
	background: rgba(255,255,255,0.08);
	border-radius: 50%;
}
.app-dash-hero::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -8%;
	width: 300px;
	height: 300px;
	background: rgba(255,255,255,0.04);
	border-radius: 50%;
}
.app-dash-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
.app-dash-hero-left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.app-dash-hero-icon {
	width: 56px;
	height: 56px;
	background: rgba(255,255,255,0.15);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}
.app-dash-hero h1 {
	font-size: 1.375rem;
	font-weight: 600;
	margin: 0 0 4px 0;
}
.app-dash-hero p {
	font-size: 0.95rem;
	opacity: 0.9;
	margin: 0;
}
.app-dash-hero-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

/* Hero Action Buttons */
.app-dash-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	transition: all 0.2s;
	cursor: pointer;
	border: none;
}
.app-dash-hero-btn.primary {
	background: #fff;
	color: var(--app-primary);
}
.app-dash-hero-btn.primary:hover {
	background: #f0f4ff;
	text-decoration: none;
	color: var(--app-primary);
}
.app-dash-hero-btn.secondary {
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
}
.app-dash-hero-btn.secondary:hover {
	background: rgba(255,255,255,0.25);
	text-decoration: none;
	color: #fff;
}

/* Hero Date Range Toggle */
.app-dash-range {
	display: inline-flex;
	background: rgba(255,255,255,0.12);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.2);
}
.app-dash-range a {
	padding: 8px 16px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: all 0.2s;
}
.app-dash-range a:hover {
	color: #fff;
	background: rgba(255,255,255,0.1);
	text-decoration: none;
}
.app-dash-range a.active {
	background: rgba(255,255,255,0.2);
	color: #fff;
}


/* ============================================
   4. WORKGROUP HERO + NAV (Emerald)
   ============================================ */
.wg-hero {
	background: linear-gradient(135deg, #059669 0%, #10b981 100%);
	border-radius: 12px 12px 0 0;
	color: #fff;
	padding: 24px 28px;
	position: relative;
	overflow: hidden;
}
.wg-hero.wg-hero-cover {
	background-size: cover;
	background-position: center;
}
.wg-hero.wg-hero-cover .wg-hero-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0,0,0,0.45);
	z-index: 0;
}
.wg-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -15%;
	width: 400px;
	height: 400px;
	background: rgba(255,255,255,0.08);
	border-radius: 50%;
}
.wg-hero::after {
	content: '';
	position: absolute;
	bottom: -60%;
	left: -10%;
	width: 300px;
	height: 300px;
	background: rgba(255,255,255,0.05);
	border-radius: 50%;
}
.wg-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.wg-hero-left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.wg-hero-icon {
	width: 56px;
	height: 56px;
	background: rgba(255,255,255,0.2);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}
.wg-hero h1 {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 600;
}
.wg-hero p {
	margin: 4px 0 0;
	font-size: 0.875rem;
	opacity: 0.9;
}

/* Breadcrumb */
.wg-breadcrumb {
	position: relative;
	z-index: 1;
	margin-top: 16px;
	font-size: 0.8125rem;
	opacity: 0.85;
}
.wg-breadcrumb a {
	color: #fff;
	text-decoration: none;
	opacity: 0.85;
}
.wg-breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
	color: #fff;
}
.wg-breadcrumb .wg-bc-sep {
	margin: 0 8px;
	opacity: 0.6;
}
.wg-breadcrumb .wg-bc-current {
	opacity: 1;
	font-weight: 600;
}

/* Hero Action Buttons */
.wg-hero-actions .btn {
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.wg-hero-actions .btn:hover {
	background: rgba(255,255,255,0.3);
	color: #fff;
	text-decoration: none;
}

/* Nav Toolbar (attached under hero) */
.wg-nav-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background: #fff;
	border-radius: 0 0 12px 12px;
	padding: 14px 20px;
	margin-bottom: 24px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	position: relative;
	border-top: 1px solid #e2e8f0;
}
.wg-nav-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #374151;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
}
.wg-nav-pill:hover,
.wg-nav-pill.active {
	background: #059669;
	border-color: #059669;
	color: #fff;
	text-decoration: none;
}
.wg-nav-pill i {
	font-size: 0.85rem;
	opacity: 0.7;
}
.wg-nav-pill:hover i,
.wg-nav-pill.active i {
	opacity: 1;
}
.wg-nav-sep {
	width: 1px;
	height: 24px;
	background: #e2e8f0;
	margin: 0 4px;
}
.wg-nav-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Nav Dropdown (overflow > 8 apps) */
.wg-nav-group {
	position: relative;
}
.wg-nav-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	min-width: 220px;
	z-index: 100;
	padding: 6px 0;
}
.wg-nav-dropdown.show {
	display: block;
}
.wg-nav-dropdown a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	color: #374151;
	font-size: 0.8125rem;
	text-decoration: none;
	transition: background 0.1s;
}
.wg-nav-dropdown a:hover {
	background: #d1fae5;
	color: #059669;
	text-decoration: none;
}
.wg-nav-dropdown a.active {
	background: #d1fae5;
	color: #059669;
	font-weight: 600;
}


/* ============================================
   5. CONTENT TOOLBAR
   Shared pattern: white bar with pills
   Used by: kb, scheduler, securesend, tasks, dqm, photos, videos, subs, rss
   ============================================ */
.v-toolbar {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.v-toolbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.v-toolbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.v-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	color: #374151;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.15s;
	white-space: nowrap;
}
.v-pill:hover,
.v-pill.active {
	background: var(--app-primary, #059669);
	border-color: var(--app-primary, #059669);
	color: #fff;
	text-decoration: none;
}
.v-pill i {
	font-size: 0.85rem;
	opacity: 0.7;
}
.v-pill:hover i,
.v-pill.active i {
	opacity: 1;
}

/* Toolbar Search Box */
.v-search-box {
	position: relative;
	flex: 1;
	max-width: 480px;
}
.v-search-box input {
	width: 100%;
	padding: 10px 14px 10px 40px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.9375rem;
	color: #1e293b;
	background: #fff;
	transition: border-color 0.2s;
	box-sizing: border-box;
}
.v-search-box input:focus {
	outline: none;
	border-color: var(--app-primary, #059669);
	box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb, 5, 150, 105), 0.1);
}
.v-search-box input::placeholder {
	color: #94a3b8;
}
.v-search-box i {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 0.9375rem;
}

/* Toolbar Stat */
.v-toolbar-stat {
	font-size: 0.8125rem;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.v-toolbar-stat strong {
	color: var(--app-primary, #059669);
	font-weight: 600;
}


/* ============================================
   6. CARDS / PANELS
   ============================================ */
.app-dash-panel {
	background: var(--app-card, #fff);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border: 1px solid var(--app-border, #e2e8f0);
	overflow: hidden;
}
.app-dash-panel-header {
	padding: 18px 24px;
	/* HARD RULE (UI-STYLE-GUIDE 2026-07-17, enforced globally 2026-08-09):
	   every panel header is the light-gray band. */
	background: var(--app-bg, #f8fafc);
	border-bottom: 1px solid var(--app-border, #e2e8f0);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.app-dash-panel-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--app-text, #1e293b);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.app-dash-panel-title i {
	color: var(--app-primary);
}
.app-dash-panel-action {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--app-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s;
}
.app-dash-panel-action:hover {
	color: var(--app-primary-light);
	text-decoration: none;
}
.app-dash-panel-body {
	padding: 24px;
}
.app-dash-panel-body.no-pad {
	padding: 0;
}

/* Two-column panel layout */
.app-dash-panels {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	margin-bottom: 28px;
}


/* ============================================
   7. STAT CARDS
   ============================================ */
.app-dash-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 28px;
}
.app-dash-stat {
	background: var(--app-card, #fff);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	border: 1px solid var(--app-border, #e2e8f0);
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all 0.2s;
}
.app-dash-stat:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.app-dash-stat-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}
.app-dash-stat-icon.blue   { background: var(--app-accent-blue-bg); color: var(--app-accent-blue); }
.app-dash-stat-icon.teal   { background: var(--app-accent-teal-bg); color: var(--app-accent-teal); }
.app-dash-stat-icon.green  { background: var(--app-accent-green-bg); color: var(--app-accent-green); }
.app-dash-stat-icon.amber  { background: var(--app-accent-amber-bg); color: var(--app-accent-amber); }
.app-dash-stat-icon.primary { background: var(--app-primary-bg); color: var(--app-primary); }
.app-dash-stat-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--app-text, #1e293b);
	line-height: 1;
	margin-bottom: 4px;
}
.app-dash-stat-label {
	font-size: 0.8125rem;
	color: var(--app-text-secondary, #64748b);
	font-weight: 500;
}
.app-dash-stat-meta {
	font-size: 0.75rem;
	color: var(--app-text-muted);
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}


/* ============================================
   8. BUTTONS
   ============================================ */
.v-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
	border: none;
}
.v-btn-primary {
	background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-light) 100%);
	color: #fff;
}
.v-btn-primary:hover {
	box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.3);
	color: #fff;
	text-decoration: none;
}
.v-btn-secondary {
	background: #fff;
	border: 2px solid #e2e8f0;
	color: #64748b;
}
.v-btn-secondary:hover {
	border-color: var(--app-primary);
	color: var(--app-primary);
	text-decoration: none;
}
.v-btn-danger {
	background: #dc2626;
	color: #fff;
}
.v-btn-danger:hover {
	background: #b91c1c;
	color: #fff;
	text-decoration: none;
}
.v-btn-success {
	background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
	color: #fff;
}
.v-btn-success:hover {
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
	color: #fff;
	text-decoration: none;
}
.v-btn-sm {
	padding: 8px 16px;
	font-size: 0.8125rem;
}
.v-btn-lg {
	padding: 14px 32px;
	font-size: 1rem;
}

/* CTA Button (gradient with hover lift) */
.app-dash-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-light) 100%);
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
}
.app-dash-cta-btn:hover {
	box-shadow: 0 6px 20px rgba(var(--app-primary-rgb), 0.35);
	transform: translateY(-2px);
	color: #fff;
	text-decoration: none;
}
.app-dash-cta-btn i {
	transition: transform 0.2s;
}
.app-dash-cta-btn:hover i {
	transform: translateX(3px);
}


/* ============================================
   9. FORM FIELDS
   ============================================ */
.v-input,
.v-select,
.v-textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 0.9375rem;
	border: 2px solid var(--app-border, #e2e8f0);
	border-radius: 8px;
	transition: all 0.2s;
	color: var(--app-text, #1e293b);
	background: var(--app-card, #fff);
	box-sizing: border-box;
}
.v-input:focus,
.v-select:focus,
.v-textarea:focus {
	outline: none;
	border-color: var(--app-primary, #059669);
	box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb, 5, 150, 105), 0.1);
}
.v-input::placeholder,
.v-textarea::placeholder {
	color: #94a3b8;
}
.v-form-group {
	margin-bottom: 20px;
}
.v-form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 8px;
}
.v-form-container {
	max-width: 800px;
}

/* Checkbox items */
.v-checkbox-item {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
}
.v-checkbox-item:hover {
	border-color: var(--app-primary);
}
.v-checkbox-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-right: 10px;
	accent-color: var(--app-primary, #059669);
}
.v-checkbox-item label {
	margin: 0;
	cursor: pointer;
	font-size: 0.9375rem;
	color: #334155;
}


/* ============================================
   10. BADGES / PILLS
   ============================================ */
.v-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
}
.v-badge-primary { background: var(--app-primary-bg); color: var(--app-primary); }
.v-badge-blue    { background: #dbeafe; color: #1e40af; }
.v-badge-green   { background: #dcfce7; color: #166534; }
.v-badge-amber   { background: #fef3c7; color: #92400e; }
.v-badge-red     { background: #fee2e2; color: #991b1b; }
.v-badge-teal    { background: #ccfbf1; color: #115e59; }
.v-badge-slate   { background: #f1f5f9; color: #475569; }


/* ============================================
   11. EMPTY STATES
   ============================================ */
.app-dash-empty {
	text-align: center;
	padding: 40px 20px;
}
.app-dash-empty-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--app-bg, #f8fafc);
	color: var(--app-text-muted, #94a3b8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	margin: 0 auto 12px;
}
.app-dash-empty-icon.primary {
	background: var(--app-primary-bg);
	color: var(--app-primary);
}
.app-dash-empty h4 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--app-text, #1e293b);
	margin: 0 0 4px;
}
.app-dash-empty p {
	font-size: 0.8125rem;
	color: var(--app-text-secondary, #64748b);
	margin: 0;
}

/* Large empty state (full page) */
.app-dash-empty-lg {
	border: 2px dashed var(--app-primary-bg, #d1fae5);
	border-radius: 16px;
	text-align: center;
	padding: 60px 40px;
	background: #fff;
}
.app-dash-empty-lg .app-dash-empty-icon {
	width: 80px;
	height: 80px;
	font-size: 2rem;
	margin-bottom: 20px;
}
.app-dash-empty-lg h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--app-text);
	margin: 0 0 8px;
}
.app-dash-empty-lg p {
	font-size: 0.9375rem;
	color: var(--app-text-secondary);
	margin: 0;
}


/* ============================================
   12. WELCOME / MARKETING STATE
   ============================================ */
.app-dash-welcome {
	background: var(--app-card, #fff);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border: 1px solid var(--app-border, #e2e8f0);
	overflow: hidden;
	margin-bottom: 32px;
}
.app-dash-welcome-header {
	text-align: center;
	padding: 48px 32px 32px;
}
.app-dash-welcome-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--app-primary-bg);
	color: var(--app-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin: 0 auto 20px;
}
.app-dash-welcome-header h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--app-text, #1e293b);
	margin: 0 0 8px;
}
.app-dash-welcome-header p {
	font-size: 1rem;
	color: var(--app-text-secondary, #64748b);
	max-width: 520px;
	margin: 0 auto;
}
.app-dash-welcome-cta {
	text-align: center;
	padding: 24px 32px 40px;
}

/* Feature Grid */
.app-dash-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--app-border, #e2e8f0);
}
.app-dash-feature {
	padding: 32px 24px;
	text-align: center;
	border-right: 1px solid var(--app-border, #e2e8f0);
	transition: background 0.2s;
}
.app-dash-feature:last-child {
	border-right: none;
}
.app-dash-feature:hover {
	background: var(--app-bg, #f8fafc);
}
.app-dash-feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	margin: 0 auto 14px;
}
.app-dash-feature-icon.blue   { background: var(--app-accent-blue-bg); color: var(--app-accent-blue); }
.app-dash-feature-icon.teal   { background: var(--app-accent-teal-bg); color: var(--app-accent-teal); }
.app-dash-feature-icon.green  { background: var(--app-accent-green-bg); color: var(--app-accent-green); }
.app-dash-feature-icon.amber  { background: var(--app-accent-amber-bg); color: var(--app-accent-amber); }
.app-dash-feature-icon.indigo { background: var(--app-primary-bg); color: var(--app-primary); }
.app-dash-feature h4 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--app-text, #1e293b);
	margin: 0 0 6px;
}
.app-dash-feature p {
	font-size: 0.8125rem;
	color: var(--app-text-secondary, #64748b);
	margin: 0;
	line-height: 1.5;
}

/* Getting Started Steps */
.app-dash-steps {
	padding: 32px;
	background: var(--app-bg, #f8fafc);
	border-top: 1px solid var(--app-border, #e2e8f0);
}
.app-dash-steps h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--app-text, #1e293b);
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.app-dash-step-list {
	display: flex;
	gap: 24px;
}
.app-dash-step {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.app-dash-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--app-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
	font-weight: 700;
	flex-shrink: 0;
}
.app-dash-step-text h5 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--app-text, #1e293b);
	margin: 0 0 4px;
}
.app-dash-step-text p {
	font-size: 0.8125rem;
	color: var(--app-text-secondary, #64748b);
	margin: 0;
	line-height: 1.4;
}


/* ============================================
   13. TABLES
   ============================================ */
.v-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.v-table thead th {
	background: #f8fafc;
	padding: 14px 16px;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid #e2e8f0;
	text-align: left;
}
.v-table tbody tr {
	transition: background 0.15s;
}
.v-table tbody tr:hover {
	background: #f8fafc;
}
.v-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 0.9375rem;
	color: #374151;
	vertical-align: middle;
}


/* ============================================
   14. ALERT BOXES
   ============================================ */
.v-alert {
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 0.875rem;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.v-alert-info {
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	color: #0369a1;
}
.v-alert-warning {
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #92400e;
}
.v-alert-success {
	background: #dcfce7;
	border: 1px solid #86efac;
	color: #166534;
}
.v-alert-danger {
	background: #fee2e2;
	border: 1px solid #fca5a5;
	color: #991b1b;
}


/* ============================================
   15. TABS
   ============================================ */
.v-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}
.v-tab {
	padding: 10px 20px;
	background: #f1f5f9;
	color: #64748b;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
}
.v-tab:hover {
	background: #e2e8f0;
	color: #475569;
	text-decoration: none;
}
.v-tab.active {
	background: var(--app-primary, #475569);
	color: #fff;
}
.v-tab.active:hover {
	background: var(--app-primary-light, #64748b);
	color: #fff;
}


/* ============================================
   16. DROPDOWN MENUS
   ============================================ */
.v-dropdown {
	position: relative;
	display: inline-block;
}
.v-dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	min-width: 180px;
	z-index: 1000;
	display: none;
	overflow: hidden;
}
.v-dropdown-menu.show {
	display: block;
}
.v-dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	color: #374151;
	text-decoration: none;
	font-size: 0.875rem;
	transition: background 0.15s;
}
.v-dropdown-menu a:hover {
	background: #f1f5f9;
}
.v-dropdown-menu a i {
	width: 20px;
	color: #64748b;
}


/* ============================================
   17. ACTIVITY TIMELINE
   ============================================ */
.app-dash-activity-item {
	display: flex;
	gap: 14px;
	padding-bottom: 20px;
	position: relative;
}
.app-dash-activity-item:last-child {
	padding-bottom: 0;
}
.app-dash-activity-item:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 17px;
	top: 38px;
	bottom: 0;
	width: 2px;
	background: #f1f5f9;
}
.app-dash-activity-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
	flex-shrink: 0;
	color: #fff;
}
.app-dash-activity-body {
	flex: 1;
	background: var(--app-bg, #f8fafc);
	border-radius: 10px;
	padding: 14px 16px;
}
.app-dash-activity-text {
	font-size: 0.875rem;
	color: #374151;
	margin-bottom: 4px;
}
.app-dash-activity-text strong {
	color: var(--app-text, #1e293b);
}
.app-dash-activity-time {
	font-size: 0.75rem;
	color: var(--app-text-muted, #94a3b8);
	display: flex;
	align-items: center;
	gap: 4px;
}


/* ============================================
   18. FILE LIST
   ============================================ */
.app-dash-file-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
}
.app-dash-file-item:last-child {
	border-bottom: none;
}
.app-dash-file-icon {
	width: 40px;
	height: 40px;
	background: var(--app-bg, #f8fafc);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.app-dash-file-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--app-text, #1e293b);
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-dash-file-meta {
	font-size: 0.75rem;
	color: var(--app-text-muted, #94a3b8);
	display: flex;
	align-items: center;
	gap: 10px;
}


/* ============================================
   19. RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
	.app-dash-panels {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.app-dash {
		padding: 16px;
	}
	.app-dash-hero {
		padding: 20px;
	}
	.app-dash-hero h1 {
		font-size: 1.125rem;
	}
	.app-dash-hero-content {
		flex-direction: column;
		align-items: flex-start;
	}
	.app-dash-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.app-dash-features {
		grid-template-columns: repeat(2, 1fr);
	}
	.app-dash-feature {
		border-bottom: 1px solid var(--app-border, #e2e8f0);
	}
	.app-dash-feature:nth-child(2) {
		border-right: none;
	}
	.app-dash-step-list {
		flex-direction: column;
		gap: 16px;
	}
	.wg-hero-inner {
		flex-direction: column;
		text-align: center;
	}
	.wg-hero-left {
		flex-direction: column;
	}
	.wg-breadcrumb {
		text-align: center;
	}
	.v-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.v-toolbar-left,
	.v-toolbar-right {
		justify-content: center;
	}
	.v-search-box {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.wg-nav-toolbar {
		padding: 12px 16px;
	}
	.wg-nav-sep {
		display: none;
	}
	.wg-nav-right {
		margin-left: 0;
		width: 100%;
	}
	.v-toolbar {
		padding: 12px 16px;
	}
}

@media (max-width: 480px) {
	.app-dash-stats {
		grid-template-columns: 1fr;
	}
	.app-dash-features {
		grid-template-columns: 1fr;
	}
	.app-dash-feature {
		border-right: none;
	}
}

/* ============================================
   20. SLIDE-OVER DRAWER
   Harvested from templates/v2026/plugins/_shared/drawer.cfm — the shared
   <cf_drawer>/_shared/drawer.cfm partial. Namespaced .dr2026-* (no collision
   with Bootstrap). Promoting it here lets any page that uses the drawer markup
   pick up the chrome from the global sheet. The partial still emits this block
   inline (once per request) for pages that render outside ee/layout.
   ============================================ */
.dr2026-bd {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(15, 23, 42, 0.40);
	z-index: 8500;
	backdrop-filter: blur(2px);
}
.dr2026-bd.show { display: block; }

.dr2026 {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	height: 100vh;
	max-width: 100%;
	background: #fff;
	z-index: 8600;
	box-shadow: -10px 0 30px rgba(0,0,0,0.18);
	transform: translateX(100%);
	transition: transform 0.22s ease-out;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.dr2026.show { transform: translateX(0); }
.dr2026.dr2026-standard { width: 480px; }
.dr2026.dr2026-wide     { width: 640px; }

.dr2026-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-bottom: 1px solid #f1f5f9;
	background: #fff;
}
.dr2026-title {
	flex: 1;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #1e293b;
	line-height: 1.3;
}
.dr2026-close {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: #94a3b8;
	cursor: pointer;
	font-size: 1.25rem;
	padding: 4px 10px;
	border-radius: 6px;
	line-height: 1;
}
.dr2026-close:hover { background: #f1f5f9; color: #334155; }
.dr2026-close:focus { outline: 2px solid #0891b2; outline-offset: 2px; }

.dr2026-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
}
.dr2026-body > * { flex: 0 0 auto; }

/* Optional sticky footer slot. Caller drops <div class="dr2026-foot">
   at the end of body content; it pins to the panel bottom. */
.dr2026-foot {
	margin: auto -24px 0;   /* push to bottom of flex body, span full width */
	padding: 14px 24px;
	border-top: 1px solid #f1f5f9;
	background: #f8fafc;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
	position: sticky;
	bottom: -22px;          /* cancel body padding-bottom */
}

@media (max-width: 640px) {
	.dr2026.dr2026-standard,
	.dr2026.dr2026-wide { width: 100%; }
}


/* ================================================================
   HARVESTED SHARED FAMILIES — Step 1 Part B (add-only superset)
   Namespaced .app-dash-* / .wg-* families used across v2026 templates
   that were missing from the master. Copied from their canonical
   inline definitions (CF hash-escapes converted for this plain .css). Grouped by the
   master section each extends. See CONSISTENCY-TODO.md for the
   duplicate-intent / page-specific items deliberately left inline.
   ================================================================ */

/* --- extends §4 WORKGROUP HERO + NAV — from plugins/groups/includes/hero_nav.cfm --- */
.wg-team-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	background: #ecfdf5;
	border-left: 3px solid #059669;
	font-size: 0.8125rem;
	color: #64748b;
	border-top: 1px solid #d1fae5;
}
.wg-team-bar i { color: #059669; font-size: 0.875rem; }
.wg-team-bar a {
	color: #059669; font-weight: 600;
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
}
.wg-team-bar a:hover { color: #047857; text-decoration: underline; }
.wg-team-bar a i { font-size: 0.75rem; opacity: 0.7; }

.wg-hero.wg-hero-compact {
	padding: 16px 20px;
}
.wg-hero.wg-hero-compact::before,
.wg-hero.wg-hero-compact::after {
	display: none;
}
.wg-hero.wg-hero-compact .wg-hero-left {
	gap: 12px;
}
.wg-hero.wg-hero-compact .wg-hero-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 1.125rem;
}
.wg-hero.wg-hero-compact h1 {
	font-size: 1.125rem;
}
.wg-hero.wg-hero-compact p {
	font-size: 0.8125rem;
}
.wg-hero.wg-hero-compact .wg-breadcrumb {
	margin-top: 10px;
}

.wg-view-toggle {
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s;
}
.wg-view-toggle:hover {
	background: rgba(255,255,255,0.3);
	color: #fff;
	text-decoration: none;
}
@media (max-width: 768px) {
	.wg-team-bar { font-size: 0.75rem; padding: 6px 16px; }
	.wg-hero.wg-hero-compact .wg-hero-left { flex-direction: column; }
}
@media (max-width: 640px) {
	.wg-hero.wg-hero-compact { padding: 12px 16px; }
}

/* --- extends §3 STANDALONE HERO HEADER (extras) — from docs/personal.cfm, meeting/views/meetingdetails.cfm, home/layout1.cfm --- */
.app-dash-hero-subtitle {
	font-size: 0.875rem;
	opacity: 0.85;
	margin-top: 2px;
}
.app-dash-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.app-dash-hero-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.4);
	object-fit: cover;
}
.app-dash-hero-avatar-fallback {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	border: 2px solid rgba(255,255,255,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}
.app-dash-hero-meta {
	font-size: 0.8125rem;
	opacity: 0.7;
	margin: 4px 0 0;
}
.app-dash-hero-btn-secondary {
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
}
.app-dash-hero-btn-secondary:hover {
	background: rgba(255,255,255,0.25);
	text-decoration: none;
	color: #fff;
}

/* --- extends §7 STAT CARDS (stats strip) — from plugins/share/user_file_list.cfm --- */
.app-dash-stats-strip {
	display: flex;
	gap: 24px;
	padding: 16px 24px;
	background: var(--app-card);
	border: 1px solid var(--app-border);
	border-radius: 12px;
	margin-bottom: 24px;
}
.app-dash-stats-strip-item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.app-dash-stats-strip-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}
.app-dash-stats-strip-icon.blue { background: var(--app-primary-bg); color: var(--app-primary); }
.app-dash-stats-strip-icon.green { background: var(--app-accent-green-bg); color: var(--app-accent-green); }
.app-dash-stats-strip-icon.amber { background: var(--app-accent-amber-bg); color: var(--app-accent-amber); }
.app-dash-stats-strip-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--app-text);
	line-height: 1;
}
.app-dash-stats-strip-label {
	font-size: 0.6875rem;
	color: var(--app-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
@media (max-width: 768px) {
	.app-dash-stats-strip { flex-wrap: wrap; gap: 16px; }
}

/* --- extends §18 FILE LIST (card grid + list variant) — from plugins/share/user_file_list.cfm & plugins/share/dashboard.cfm --- */
.app-dash-file-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}
.app-dash-file-card {
	background: var(--app-card);
	border: 1px solid var(--app-border);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.2s;
	display: flex;
	flex-direction: column;
}
.app-dash-file-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	border-color: var(--app-primary);
}
.app-dash-file-card.expired {
	opacity: 0.7;
}
.app-dash-file-card.expired:hover {
	opacity: 0.85;
}
.app-dash-file-card-top {
	height: 4px;
	background: var(--app-primary);
}
.app-dash-file-card.expired .app-dash-file-card-top {
	background: var(--app-text-muted);
}
.app-dash-file-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.app-dash-file-icon-area {
	text-align: center;
	padding: 16px 0 12px;
}
.app-dash-file-icon-area i {
	font-size: 2.5rem;
}
.app-dash-file-security {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.app-dash-file-footer {
	display: flex;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid #f1f5f9;
	margin-top: auto;
}
.app-dash-file-action-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
}
.app-dash-file-action-btn.download {
	background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-light) 100%);
	color: #fff;
}
.app-dash-file-action-btn.download:hover {
	box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.3);
	color: #fff;
	text-decoration: none;
}
.app-dash-file-action-btn.view-online {
	background: var(--app-primary-bg);
	color: var(--app-primary);
}
.app-dash-file-action-btn.view-online:hover {
	background: var(--app-primary);
	color: #fff;
	text-decoration: none;
}
.app-dash-file-action-btn.disabled {
	background: #f1f5f9;
	color: var(--app-text-muted);
	cursor: not-allowed;
	pointer-events: none;
}
@media (max-width: 1024px) {
	.app-dash-file-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.app-dash-file-grid { grid-template-columns: 1fr; }
}
.app-dash-file-list {
	max-height: 340px;
	overflow-y: auto;
}
.app-dash-file-details {
	flex: 1;
	min-width: 0;
}
.app-dash-file-bar {
	width: 60px;
	height: 4px;
	background: #f1f5f9;
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
}
.app-dash-file-bar-fill {
	height: 100%;
	background: var(--app-primary);
	border-radius: 2px;
	transition: width 0.3s;
}

/* --- new §21 APP-DASH SHELL EXTRAS — quick-actions/layout/tables/misc --- */
/* Section header — from plugins/home/layout1.cfm */
.app-dash-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.app-dash-section-header h2 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--app-text);
	margin: 0;
}
.app-dash-section-header i {
	color: var(--app-text-muted);
}

/* Quick actions grid — from plugins/home/layout1.cfm */
.app-dash-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 28px;
}
.app-dash-action {
	background: var(--app-card);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	border: 2px solid var(--app-border);
	display: flex;
	align-items: flex-start;
	gap: 16px;
	transition: all 0.2s;
	text-decoration: none;
	color: inherit;
}
.app-dash-action:hover {
	border-color: var(--app-primary);
	box-shadow: 0 4px 16px rgba(var(--app-primary-rgb), 0.12);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}
.app-dash-action-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}
.app-dash-action-icon.indigo { background: var(--app-accent-indigo-bg); color: var(--app-accent-indigo); }
.app-dash-action-icon.green { background: var(--app-primary-bg); color: var(--app-primary); }
.app-dash-action-icon.blue { background: var(--app-accent-blue-bg); color: var(--app-accent-blue); }
.app-dash-action h3 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--app-text);
	margin: 0 0 4px;
}
.app-dash-action p {
	font-size: 0.8125rem;
	color: var(--app-text-secondary);
	margin: 0 0 10px;
	line-height: 1.5;
}
.app-dash-action-link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--app-primary);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.app-dash-action:hover .app-dash-action-link i {
	transform: translateX(3px);
}
.app-dash-action-link i {
	transition: transform 0.2s;
}
@media (max-width: 1024px) {
	.app-dash-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.app-dash-actions { grid-template-columns: 1fr; }
}

/* Panel link — from plugins/home/layout1.cfm */
.app-dash-panel-link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--app-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.app-dash-panel-link:hover {
	text-decoration: underline;
	color: var(--app-primary);
}

/* Two-column layout — from plugins/share/sendDetails.cfm */
.app-dash-grid-2 {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	margin-bottom: 24px;
}
@media (max-width: 1024px) {
	.app-dash-grid-2 { grid-template-columns: 1fr; }
}

/* "Next steps" callout — from plugins/share/send.cfm */
.app-dash-next {
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 8px;
	padding: 14px 16px;
	text-align: left;
}
.app-dash-next h5 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0369a1;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.app-dash-next ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.app-dash-next li {
	padding: 10px 0;
	padding-left: 28px;
	position: relative;
	font-size: 0.875rem;
	color: #0369a1;
	line-height: 1.5;
}
.app-dash-next li + li {
	border-top: 1px solid #bae6fd;
}
.app-dash-next li::before {
	content: '\f058';
	font-family: 'Font Awesome 5 Pro';
	font-weight: 300;
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--app-accent-green);
	font-size: 0.875rem;
}

/* Modern table — from plugins/share/sendDetails.cfm */
.app-dash-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.app-dash-table thead th {
	background: var(--app-bg);
	padding: 14px 16px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--app-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--app-border);
	text-align: left;
}
.app-dash-table tbody tr {
	transition: background 0.15s;
}
.app-dash-table tbody tr:hover {
	background: var(--app-bg);
}
.app-dash-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 0.9375rem;
	color: #374151;
	vertical-align: middle;
}
@media (max-width: 768px) {
	.app-dash-table { font-size: 0.8125rem; }
	.app-dash-table thead th,
	.app-dash-table tbody td { padding: 10px 12px; }
}

/* Table buttons — from plugins/scheduler/dashboard.cfm */
.app-dash-table-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
	border: 1px solid var(--app-border);
	background: var(--app-card);
	color: var(--app-text-secondary);
	margin-right: 6px;
}
.app-dash-table-btn:hover {
	background: var(--app-bg);
	color: var(--app-text);
	text-decoration: none;
}
.app-dash-table-btn.primary {
	background: var(--app-primary);
	border-color: var(--app-primary);
	color: #fff;
}
.app-dash-table-btn.primary:hover {
	background: var(--app-primary-light);
	border-color: var(--app-primary-light);
	color: #fff;
}

/* Pending table — from plugins/scheduler/dashboard.cfm */
.app-dash-pending-table {
	width: 100%;
	border-collapse: collapse;
}
.app-dash-pending-table thead th {
	padding: 12px 16px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--app-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--app-border);
	text-align: left;
}
.app-dash-pending-table tbody td {
	padding: 14px 16px;
	font-size: 0.875rem;
	color: var(--app-text);
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}
.app-dash-pending-table tbody tr:last-child td {
	border-bottom: none;
}
.app-dash-pending-table tbody tr:hover {
	background: var(--app-bg);
}

/* Activity timeline padding — from plugins/share/sendDetails.cfm (divergence: dashboard.cfm uses 24px) */
.app-dash-timeline {
	padding: 28px;
}

/* Chart container — from plugins/share/dashboard.cfm */
.app-dash-chart {
	position: relative;
	height: 300px;
	width: 100%;
}
@media (max-width: 768px) {
	.app-dash-chart { height: 240px; }
}

/* Badge — DUPLICATE-INTENT of .v-badge (see CONSISTENCY-TODO §2); from share/sendDetails.cfm + user_file_list.cfm */
.app-dash-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.app-dash-badge.active { background: var(--app-accent-green-bg); color: var(--app-accent-green); }
.app-dash-badge.expired { background: var(--app-accent-red-bg); color: var(--app-accent-red); }
.app-dash-badge.expired-badge { background: var(--app-accent-red-bg); color: var(--app-accent-red); }
.app-dash-badge.yes { background: var(--app-accent-green-bg); color: var(--app-accent-green); }
.app-dash-badge.no { background: #f1f5f9; color: var(--app-text-muted); }
.app-dash-badge.amber { background: var(--app-accent-amber-bg); color: var(--app-accent-amber); }

/* Pill — DUPLICATE-INTENT of .v-pill (see CONSISTENCY-TODO §2); from share/sendDetails.cfm + user_file_list.cfm */
.app-dash-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 0.6875rem;
	font-weight: 500;
}
.app-dash-pill.lock { background: var(--app-accent-amber-bg); color: var(--app-accent-amber); }
.app-dash-pill.view { background: var(--app-accent-teal-bg); color: var(--app-accent-teal); }
.app-dash-pill.limit { background: #f1f5f9; color: var(--app-text-secondary); }
.app-dash-pill.none { background: #f1f5f9; color: var(--app-text-muted); }

/* Buttons — DUPLICATE-INTENT of .v-btn (see CONSISTENCY-TODO §2); from share/sendDetails.cfm */
.app-dash-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.2s;
	cursor: pointer;
	border: none;
}
.app-dash-btn.primary {
	background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-light) 100%);
	color: #fff;
}
.app-dash-btn.primary:hover {
	box-shadow: 0 4px 12px rgba(var(--app-primary-rgb), 0.3);
	color: #fff;
	text-decoration: none;
}
.app-dash-btn-sm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.8125rem;
	text-decoration: none;
	transition: all 0.2s;
	cursor: pointer;
	border: none;
	background: var(--app-primary-bg);
	color: var(--app-primary);
}
.app-dash-btn-sm:hover {
	background: var(--app-primary);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   DataTables — GLOBAL STANDARD v2 (2026-08-04, plan-approved)
   THE house table rule. Values are the de-facto v2026 palette
   (mg-table body + manage_attendees chrome). Two selector twins:
   - table.dataTable  : stamped automatically by every DataTables init
   - table.v-table    : opt-in class for plain small tables
   Width contract: width:100% !important beats DataTables autoWidth
   inline px (autoWidth is also disabled globally in core
   templates/core/_footer.cfm defaults); border-box beats the stock
   dataTables.bootstrap.css content-box. Tables always fill their
   container and reflow with it.
   Escape hatch (rare): scope page overrides under the page wrapper
   (.my-wrap table.dataTable th) — never naked class re-declarations.
   ============================================================ */
table.dataTable, table.v-table { width: 100% !important; border-collapse: collapse; font-size: 0.875rem; }
table.dataTable th, table.dataTable td,
table.v-table th, table.v-table td { box-sizing: border-box; }
table.dataTable thead th, table.v-table thead th { text-align: left; padding: 10px 12px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
table.dataTable tbody td, table.v-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #334155; }
table.dataTable tbody tr:last-child td, table.v-table tbody tr:last-child td { border-bottom: none; }
table.dataTable tbody tr:hover td, table.v-table tbody tr:hover td { background: #f8fafc; }
.dataTables_wrapper { overflow-x: auto; }
.dataTables_wrapper .dataTables_filter input { border: 2px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; margin-left: 6px; width: 220px; box-sizing: border-box; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--app-primary, #475569); outline: none; box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb, 71, 85, 105), 0.1); }
.dataTables_wrapper .dataTables_length select { border: 2px solid #e2e8f0; border-radius: 8px; padding: 6px 28px 6px 10px; margin: 0 6px; box-sizing: border-box; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { font-size: 0.8125rem; color: #64748b; padding-bottom: 10px; }
.dataTables_wrapper .dataTables_info { padding-top: 12px; }
/* ── Pagination (2026-08-30, EH): ONE box per button, NO gray band.
   Bootstrap DT markup = li.paginate_button > a (Bootstrap borders the <a>);
   plain DT markup = bare a.paginate_button. The <li> is flattened to a
   spacer and the ANCHOR is the button in both shapes. Page/suite CSS must
   NEVER re-border .paginate_button or band .dataTables_paginate — this
   block is the single source (feedback_pagination_no_band). */
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; text-align: right; font-size: 0.8125rem; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; padding: 0; display: inline-block; }
.dataTables_wrapper .dataTables_paginate li.paginate_button { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 0 0 4px; display: inline-block; float: none; }
.dataTables_wrapper .dataTables_paginate li.paginate_button > a {
	display: inline-block; padding: 6px 12px; margin: 0; border: 1px solid #e2e8f0; border-radius: 7px;
	background: #fff; color: var(--app-primary, #475569); line-height: 1.4; cursor: pointer; text-decoration: none; float: none;
}
.dataTables_wrapper .dataTables_paginate > a.paginate_button,
.dataTables_wrapper .dataTables_paginate > span > a.paginate_button {
	display: inline-block; padding: 6px 12px; margin-left: 4px; border: 1px solid #e2e8f0; border-radius: 7px;
	background: #fff; color: var(--app-primary, #475569); line-height: 1.4; cursor: pointer; text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate li.paginate_button:not(.active):not(.current):not(.disabled) > a:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:not(.current):not(.disabled):hover {
	background: var(--app-primary-bg, #f1f5f9); color: var(--app-primary, #475569); border-color: #cbd5e1;
}
.dataTables_wrapper .dataTables_paginate li.paginate_button.active > a,
.dataTables_wrapper .dataTables_paginate li.paginate_button.current > a,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
	background: var(--app-primary, #475569) !important; border-color: var(--app-primary, #475569) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .ellipsis { opacity: 0.45; cursor: default; }
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a:hover { background: #fff; border-color: #e2e8f0; color: var(--app-primary, #475569); }
@media (max-width: 768px) {
	.dataTables_wrapper .dataTables_paginate { text-align: center; }
	.dataTables_wrapper .dataTables_paginate li.paginate_button > a,
	.dataTables_wrapper .dataTables_paginate a.paginate_button { padding: 9px 13px; min-width: 40px; text-align: center; box-sizing: border-box; margin-bottom: 4px; }
}

/* Table action chips — two concepts: word chip (.am-act) and FAL
   icon-only square chip (.am-act.ico — title attr REQUIRED). */
.am-acts { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.am-act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; text-decoration: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; }
.am-act:hover { color: #1e293b; border-color: #cbd5e1; background: #f8fafc; text-decoration: none; }
.am-act.primary { color: #fff; background: var(--app-primary, #475569); border-color: var(--app-primary, #475569); }
.am-act.primary:hover { background: var(--app-primary-light, #64748b); color: #fff; border-color: var(--app-primary-light, #64748b); text-decoration: none; }
.am-act.ico { width: 30px; height: 30px; padding: 0; justify-content: center; font-size: 0.8125rem; }
.am-act.danger { color: #dc2626; }
.am-act.danger:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }

/* Wide-table review drawer (sim-drawer) — limited columns in the
   table, full record in the drawer. Construct copied verbatim from
   admin/systems/tasks.cfm / installs.cfm (the EH-approved canon).
   Per-page JS builds content from row data-* attrs (FIELDS array +
   buildDl idiom — see UI-STYLE-GUIDE.md). dr2026 (_shared/drawer.cfm)
   remains the FORM/editor drawer; this is the read-only review drawer. */
.sim-row { cursor: pointer; }
.sim-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 1040; }
.sim-drawer-overlay.open { display: block; }
.sim-drawer {
	position: fixed; top: 0; right: -440px; width: 420px; max-width: 92vw; height: 100vh;
	background: #fff; border-left: 1px solid #e2e8f0; box-shadow: -12px 0 32px rgba(0,0,0,0.18);
	z-index: 1050; display: flex; flex-direction: column; transition: right 0.22s ease;
}
.sim-drawer.open { right: 0; }
.sim-drawer-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.sim-drawer-head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #1e293b; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-drawer-x {
	background: #fff; border: 1px solid #e2e8f0; color: #64748b; font-size: 0.8125rem;
	font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 8px; flex-shrink: 0;
}
.sim-drawer-x:hover { border-color: #475569; color: #1e293b; }
.sim-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.sim-dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 0; }
.sim-dl dt { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.sim-dl dd { margin: 0; font-size: 0.8125rem; color: #334155; padding: 8px 0; border-bottom: 1px solid #f1f5f9; word-break: break-word; }
.sim-drawer-foot { padding: 14px 20px; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; gap: 10px; }

/* ============================================================
   v2026 chrome — collapsed left nav (2026-08-04, EH): v2026 sessions
   start collapsed (common/_head.cfm applies .expanded on <html>).
   Center the logo in the 70px icon rail — values align with the
   skins' .expanded rules (portal.css: width 70px, label font-size 0).
   ============================================================ */
.expanded #desktop-header .logo-container { padding: 2.5rem 0.6rem 0.45rem; justify-content: center; text-align: center; }
.expanded #desktop-header .logo-container #logo { display: flex; align-items: center; justify-content: center; width: 100%; }
.expanded #desktop-header .logo-container #logo img { width: auto; max-width: 100%; max-height: 40px; }

/* ============================================================
   Empty states — GLOBAL construct (EH 2026-08-04): empty DATA always
   renders centered INSIDE its panel body; never a floating/dashed box
   (dashed chrome = coming-soon placeholders only). Panel heads drop
   count + search chips when there are zero records.
   ============================================================ */
.v-empty { padding: 48px 24px; text-align: center; color: #94a3b8; font-size: 0.875rem; }
.v-empty i { font-size: 1.75rem; display: block; margin-bottom: 10px; color: #cbd5e1; }
.v-empty a { color: #475569; font-weight: 600; }

/* ============================================================
   hideleftnav portals (CLL/cert, 2026-08-06): the left gutter nav is not
   rendered at all (ee/layout.cfm guard). Undo the layout coupling that
   assumes a rail is present, in BOTH states. !important beats per-skin
   portal.css margins.
   ============================================================ */
.no-leftnav #page-container { margin-left: 0 !important; }
.no-leftnav .page-header-wrapper .sticky { width: 100% !important; left: 0 !important; }
.no-leftnav #mobile-header .hamburger, .no-leftnav .side_btn { display: none !important; }
/* Portal logo shown in the TOP bar only on these portals */
.no-leftnav .nlv-topbar-logo { display: inline-flex; align-items: center; margin-right: 14px; }
.no-leftnav .nlv-topbar-logo img { max-height: 34px; width: auto; }
.nlv-topbar-logo { display: none; }

/* ============================================
   SELECT — GLOBAL STANDARD (2026-08-12, EH: "system wide")
   <select> is an OS-rendered widget: authored borders/radius are
   ignored (Safari especially) until appearance is stripped, which
   also removes the native arrow — so we draw our own chevron.
   Single-value selects only; multiple/size list boxes stay native.
   Specificity stays at (0,1,1) so app-local `.xxx select` rules and
   later same-specificity rules still win their properties.
   ============================================ */
select:not([multiple]) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding: 8px 36px 8px 12px;
	font-size: 0.875rem;
	color: #334155;
	line-height: 1.4;
	height: auto;
	box-sizing: border-box;
	cursor: pointer;
}
/* Defensive floor (2026-08-31): the chevron above is ALWAYS drawn, so
   right padding below 36px is never legitimate. Inline-styled selects
   across the fleet override padding and run text under the caret —
   !important is the contract enforcing the reserve against them. */
select:not([multiple]) {
	padding-right: 36px !important;
}
select:not([multiple]):focus {
	border-color: #475569;
	outline: none;
}

/* ============================================================
   CKEditor 5 — vendor attribution suppression (Global Standard)
   2026-08-16 QA/compliance: no vendor branding may render in the
   portal UI. CK5 v38+ ships a "Powered by CKEditor" balloon (in
   our assets only the v41.2.1 classic bundle has it today); it
   mounts as a body-level balloon panel, so this one global rule
   covers every host page — including injected fragments like
   formx dataentry, which inherit this sheet via core/_head.cfm.
   Do NOT duplicate this rule per-module.
   ============================================================ */
.ck.ck-balloon-panel.ck-powered-by-balloon { display: none !important; }

/* ============================================================
   CK5 editing surface — list geometry guard (2026-08-17)
   pro.css:726 globally sets `ul, ol { list-style-position: inside;
   padding: 0 }`. Inside the editor that strands each bullet on its
   own line: the marker becomes an inline box while CK renders list
   item text in a block wrapper (.ck-list-bogus-paragraph), which
   can't share the marker's line. Pages whose layout sets
   ckeditor="1" are shielded by ckeditor5classic/css/style.css
   (all: revert), but self-inject pages (whatsnew admin etc.) never
   load that sheet. This scoped restore wins over pro.css on
   specificity, so it protects every editor regardless of how the
   bundle was loaded. Repro + proof: session 2026-08-17 headless
   harness. Keep scoped to .ck.ck-content — never widen.
   ============================================================ */
.ck.ck-content ul,
.ck.ck-content ol {
	list-style-position: outside;
	padding-left: 40px;
	margin: 0.5em 0;
}

/* ============================================================
   Chrome footer — full window width (EH 2026-08-17; specificity
   fix 2026-08-19). pro.css (frozen) sets .desktop_footer to
   calc(100% - 250px), AND skin portal.css sets
   .expanded .desktop_footer to calc(100% - 70px) — that
   two-class rule out-specified the original one-class override,
   leaving a 70px right gutter (the EH screenshot). The
   footer.desktop_footer selectors below out-rank both
   ((0,1,1)/(0,2,1) vs (0,1,0)/(0,2,0)). Edge to edge, always.
   Override lives HERE, not the frozen legacy sheets.
   ============================================================ */
footer.desktop_footer,
.expanded footer.desktop_footer {
	width: 100%;
	left: 0;
	right: 0;
}

/* ============================================================
   SweetAlert v1 — Global Standard (contract reskin, 2026-08-16)
   The shipped lib (vinna sweetalert.min.js, v1) stays — only its
   look is brought onto the UI contract: card radius/shadow,
   contract typography + buttons, semantic icon palette. This
   sheet loads AFTER sweetalert.css (_head 250 vs 361) so plain
   selectors win; !important only where the lib itself uses it.
   The default confirm-button color is INLINE-styled by the lib —
   fixed via swal.setDefaults() in templates/core/_footer.cfm,
   not here. Per-call confirmButtonColor (e.g. #dc2626 deletes)
   still wins. Do NOT restyle per-module.
   ============================================================ */
.sweet-overlay { background-color: rgba(15, 23, 42, 0.55); }
.sweet-alert {
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	padding: 24px 24px 22px;
	font-family: inherit;
	box-sizing: border-box;
	margin-left: -239px; /* keep centered: lib assumes content-box 478+17px */
}
@media all and (max-width: 540px) {
	.sweet-alert { margin-left: 0; }
}
.sweet-alert h2 {
	font-size: 1.125rem;
	font-weight: 600;
	color: #1e293b;
	line-height: 1.4;
	margin: 14px 0 4px;
}
.sweet-alert p { font-size: 0.875rem; color: #64748b; line-height: 1.55; }
.sweet-alert input {
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.875rem;
	box-shadow: none;
}
.sweet-alert input:focus { border-color: #475569; box-shadow: none; }
.sweet-alert button {
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 8px;
	padding: 10px 24px;
	margin: 22px 5px 0;
}
.sweet-alert button:focus { box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.25); }
.sweet-alert button.cancel,
.sweet-alert button.cancel:active {
	background-color: #fff;
	color: #64748b;
	border: 2px solid #e2e8f0;
}
.sweet-alert button.cancel:hover {
	background-color: #fff;
	border-color: #cbd5e1;
	color: #1e293b;
}
.sweet-alert button.cancel:focus { box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25) !important; }
/* Icon palette — semantic colors from the UI contract */
.sweet-alert .sa-icon.sa-error { border-color: #dc2626; }
.sweet-alert .sa-icon.sa-error .sa-line { background-color: #dc2626; }
.sweet-alert .sa-icon.sa-warning { border-color: #d97706; }
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot { background-color: #d97706; }
.sweet-alert .sa-icon.sa-info { border-color: #0284c7; }
.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after { background-color: #0284c7; }
.sweet-alert .sa-icon.sa-success { border-color: #059669; }
.sweet-alert .sa-icon.sa-success .sa-line { background-color: #059669; }
.sweet-alert .sa-icon.sa-success .sa-placeholder { border-color: rgba(5, 150, 105, 0.25); }