/* ═══════════════════════════════════════
   GRANT WRITING PORTAL
════════════════════════════════════════ */

/* Session list (index page) */
.grant-session-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grant-session-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.grant-session-card__body {
  flex: 1;
  min-width: 0;
}

.grant-session-card__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.grant-session-card__title a {
  color: var(--text);
  text-decoration: none;
}

.grant-session-card__title a:hover {
  color: var(--primary);
}

.grant-session-card__preview {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 8px;
  line-height: 1.5;
}

.grant-session-card__meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
}

.grant-session-card__actions {
  flex-shrink: 0;
}

/* Show page */
.grant-session-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grant-content-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  padding: 10px 0;
  user-select: none;
}

.grant-content-pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--border-light);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 10px;
  max-height: 400px;
  overflow-y: auto;
}

/* Messages */
.grant-messages-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.grant-message {
  padding: 14px 18px;
  border-radius: var(--radius);
  line-height: 1.6;
  font-size: 14px;
}

.grant-message--user {
  background: var(--primary-light);
  margin-left: 40px;
}

.grant-message--assistant {
  background: var(--panel);
  border: 1.5px solid var(--border);
  margin-right: 40px;
}

.grant-message--error {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: var(--danger);
}

.grant-message__role {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.grant-message__content {
  color: var(--text);
}

.grant-message__content p {
  margin: 0 0 8px;
}

.grant-message__content p:last-child {
  margin-bottom: 0;
}

.grant-message__time {
  font-size: 11px;
  margin-top: 8px;
}

/* Input area */
.grant-input-area {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.grant-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.grant-input-row textarea {
  flex: 1;
  resize: vertical;
  min-height: 60px;
}

.grant-input-row .btn {
  flex-shrink: 0;
  align-self: flex-end;
}

/* Small button variant */
.btn--sm {
  font-size: 12px;
  padding: 5px 10px;
}

/* ── Responsive ──────────────────────── */
@media (max-width: 600px) {
  .grant-message--user { margin-left: 16px; }
  .grant-message--assistant { margin-right: 16px; }
  .grant-input-row { flex-direction: column; }
  .grant-input-row .btn { align-self: flex-end; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* ═══════════════════════════════════════
   VARIABLES
════════════════════════════════════════ */
:root {
	--bg:            #eef2ff;
	--panel:         #ffffff;
	--text:          #0f172a;
	--text-2:        #334155;
	--muted:         #64748b;
	--primary:       #4f46e5;
	--primary-hover: #4338ca;
	--primary-light: #e0e7ff;
	--danger:        #dc2626;
	--danger-hover:  #b91c1c;
	--border:        #e2e8f0;
	--border-light:  #f1f5f9;
	--shadow-sm:     0 1px 2px rgba(15,23,42,0.06);
	--shadow:        0 1px 3px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.05);
	--shadow-md:     0 4px 8px rgba(15,23,42,0.10), 0 12px 24px rgba(15,23,42,0.07);
	--shadow-lg:     0 12px 32px rgba(15,23,42,0.14), 0 4px 8px rgba(15,23,42,0.05);
	--radius-sm:     8px;
	--radius:        14px;
	--radius-lg:     20px;
	--sidebar-w:     240px;
	--topbar-h:      56px;
	--ease:          0.18s ease;
}

/* ═══════════════════════════════════════
   RESET / BASE
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html,
body {
	height: 100%;
	margin: 0;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
	             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.55;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--primary);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -0.02em; }

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 20px 0;
}

pre {
	margin: 0;
	padding: 16px;
	background: #0b1120;
	color: #e2e8f0;
	border-radius: var(--radius);
	overflow: auto;
}

/* ═══════════════════════════════════════
   APP SHELL — SIDEBAR LAYOUT
════════════════════════════════════════ */
.app-shell {
	display: flex;
	min-height: 100vh;
}

/* ── Sidebar ─────────────────────────── */
.sidebar {
	width: var(--sidebar-w);
	background: linear-gradient(180deg, #1e1b4b 0%, #2d2190 55%, #3730a3 100%);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	position: fixed;
	left: 0; top: 0; bottom: 0;
	z-index: 200;
	overflow-y: auto;
	overflow-x: hidden;
	transition: transform var(--ease);
}

.sidebar__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 16px 14px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar__logo-mark {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #818cf8, #6366f1);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	flex-shrink: 0;
	letter-spacing: -0.03em;
	box-shadow: 0 2px 10px rgba(99,102,241,0.45);
}

.sidebar__app-title {
	font-size: 14px;
	font-weight: 800;
	color: rgba(255,255,255,0.95);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.sidebar__user-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 2px;
}

.sidebar__avatar {
	width: 32px; height: 32px;
	border-radius: 9px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: rgba(255,255,255,0.9);
	flex-shrink: 0;
}

.sidebar__user-name {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255,255,255,0.9);
	line-height: 1.2;
}

.sidebar__user-role {
	font-size: 10px;
	color: rgba(255,255,255,0.4);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.sidebar__nav {
	flex: 1;
	padding: 6px 10px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sidebar__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	transition: background var(--ease), color var(--ease);
	white-space: nowrap;
}

.sidebar__link:hover {
	background: rgba(255,255,255,0.09);
	color: rgba(255,255,255,0.95);
	text-decoration: none;
}

.sidebar__link--active {
	background: rgba(255,255,255,0.16);
	color: #fff;
	font-weight: 700;
}

.sidebar__link--subtle { opacity: 0.45; font-size: 13px; }
.sidebar__link--subtle:hover { opacity: 0.85; }

.sidebar__icon {
	width: 17px; height: 17px;
	flex-shrink: 0;
	opacity: 0.75;
}
.sidebar__link--active .sidebar__icon,
.sidebar__link:hover .sidebar__icon { opacity: 1; }

.sidebar__divider {
	height: 1px;
	background: rgba(255,255,255,0.07);
	margin: 6px 0;
}

.sidebar__footer {
	padding: 12px 10px 18px;
	border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar__signout {
	appearance: none;
	border: 1px solid rgba(255,255,255,0.13);
	background: rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.6);
	padding: 8px 12px;
	border-radius: 9px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	width: 100%;
	text-align: center;
	transition: background var(--ease), color var(--ease);
}
.sidebar__signout:hover {
	background: rgba(255,255,255,0.14);
	color: rgba(255,255,255,0.95);
}

/* ── Mobile overlay ──────────────────── */
.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 199;
	backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ── App body ────────────────────────── */
.app-body {
	margin-left: var(--sidebar-w);
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ── Mobile topbar ───────────────────── */
.topbar {
	display: none;
	align-items: center;
	gap: 12px;
	height: var(--topbar-h);
	padding: 0 16px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: var(--shadow-sm);
}
.topbar__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--text);
}
.hamburger {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 5px;
	cursor: pointer;
	color: var(--text);
	border-radius: 8px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.hamburger:hover { background: var(--border-light); }

.app-main { flex: 1; padding: 28px 0 48px; }

.container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 28px;
}

/* ═══════════════════════════════════════
   AUTH PAGES (Devise sign-in)
════════════════════════════════════════ */
.auth-main {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
	padding: 24px;
}

.auth-card {
	background: var(--panel);
	border-radius: var(--radius-lg);
	padding: 40px 44px;
	width: 100%;
	max-width: 420px;
	box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════ */
.page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 22px;
}

.page-header h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.page-header__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

/* ═══════════════════════════════════════
   CARDS
════════════════════════════════════════ */
.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
}

.detail-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px 28px;
	box-shadow: var(--shadow);
	margin-bottom: 24px;
}

/* ═══════════════════════════════════════
   FLASH MESSAGES
════════════════════════════════════════ */
.flash {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid transparent;
	animation: flashIn 0.25s ease;
}
@keyframes flashIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.flash--notice { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flash--alert  { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

/* ═══════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--border);
	background: var(--panel);
	color: var(--text-2);
	padding: 8px 14px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow var(--ease), border-color var(--ease),
	            background var(--ease), color var(--ease), transform 0.1s;
}
.btn:hover {
	border-color: #c7d2fe;
	box-shadow: var(--shadow);
	text-decoration: none;
	color: var(--text);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
	background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
	border-color: #4338ca;
	color: #fff;
	box-shadow: 0 2px 8px rgba(79,70,229,0.30);
}
.btn--primary:hover {
	background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
	border-color: #4f46e5;
	color: #fff;
	box-shadow: 0 4px 16px rgba(79,70,229,0.40);
}

.btn--danger {
	background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%);
	border-color: #b91c1c;
	color: #fff;
	box-shadow: 0 2px 8px rgba(220,38,38,0.22);
}
.btn--danger:hover {
	background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
	border-color: #dc2626;
	color: #fff;
	box-shadow: 0 4px 14px rgba(220,38,38,0.30);
}

.btn--ghost { background: transparent; border-color: var(--border); }
.btn--ghost:hover { background: var(--border-light); border-color: #c7d2fe; }

.btn[disabled],
.btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

.inline-form { display: inline; }

/* ═══════════════════════════════════════
   FORMS
════════════════════════════════════════ */
.toolbar {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.toolbar form {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.field label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1.5px solid var(--border);
	background: var(--panel);
	color: var(--text);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color var(--ease), box-shadow var(--ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	cursor: pointer;
}

.form-errors {
	margin: 8px 0;
	padding: 12px 16px;
	background: #fff1f2;
	border: 1px solid #fecdd3;
	border-radius: var(--radius-sm);
	color: var(--danger);
	font-weight: 700;
	font-size: 14px;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.form-grid--medium { max-width: 740px; }
.form-grid--wide   { max-width: 920px; }
.span-all { grid-column: 1 / -1; }

.help-text {
	color: var(--muted);
	font-size: 12px;
	margin-top: 5px;
}
.form-actions { margin-top: 18px; }

.checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

@media (max-width: 640px) {
	.form-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   TABLES
════════════════════════════════════════ */
.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.table th,
.table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-light);
	text-align: left;
	vertical-align: middle;
}

.table th {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	background: #f8f9ff;
	border-bottom: 1px solid var(--border);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f7f8ff; }

.table .col-shrink { width: 1%; white-space: nowrap; }
.table td.nowrap,
.table th.nowrap { white-space: nowrap; }

.row-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

/* ── Row state modifiers ──────────────── */
.table .row--clickable { cursor: pointer; }
.table .row--clickable:hover { background: #f0f2ff; }

.table .row--completed { background: #f0fdf4; }
.table .row--completed td { color: #15803d; }
.table .row--completed td .badge { opacity: 0.9; }
.table .row--completed:hover { background: #dcfce7 !important; }

.table .row--dropped { opacity: 0.45; }

/* ═══════════════════════════════════════
   DEFINITION LIST
════════════════════════════════════════ */
.dl {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 10px 16px;
}
.dl dt {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 2px;
}
.dl dd { margin: 0; font-size: 15px; }

@media (max-width: 500px) {
	.dl { grid-template-columns: 1fr; gap: 3px; }
	.dl dd { margin-bottom: 10px; }
}

/* ═══════════════════════════════════════
   STATUS BADGES
════════════════════════════════════════ */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--enrolled    { background: #dbeafe; color: #1d4ed8; }
.badge--completed   { background: #dcfce7; color: #15803d; }
.badge--dropped     { background: #fee2e2; color: #b91c1c; }
.badge--in_progress { background: #fef9c3; color: #92400e; }
.badge--scheduled   { background: #ede9fe; color: #5b21b6; }
.badge--finished    { background: #f1f5f9; color: #475569; }
.badge--cancelled   { background: #fef2f2; color: #991b1b; }
.badge--active      { background: #dcfce7; color: #15803d; }
.badge--inactive    { background: #fee2e2; color: #b91c1c; }
.badge--sent        { background: #dcfce7; color: #15803d; }
.badge--issued      { background: #fef9c3; color: #92400e; }
.badge--pending     { background: #fff7ed; color: #c2410c; }

/* ═══════════════════════════════════════
   STAT CARDS
════════════════════════════════════════ */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 30px;
}

.stat-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 24px 20px;
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.stat-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
}
.stat-card--blue::before   { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.stat-card--purple::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.stat-card--green::before  { background: linear-gradient(90deg, #34d399, #059669); }
.stat-card--amber::before  { background: linear-gradient(90deg, #fbbf24, #d97706); }

.stat-card__value {
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-top: 6px;
	color: var(--text);
}
.stat-card--blue   .stat-card__value { color: #2563eb; }
.stat-card--purple .stat-card__value { color: #7c3aed; }
.stat-card--green  .stat-card__value { color: #059669; }
.stat-card--amber  .stat-card__value { color: #b45309; }

.stat-card__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 6px;
}

.stat-card--link {
	display: block;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--ease), box-shadow var(--ease);
}
.stat-card--link:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	text-decoration: none;
}
.stat-card--link:active { transform: translateY(0); }

/* ═══════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════ */
.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 34px 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--border-light);
}
.section-header h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

/* ═══════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════ */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); text-decoration: none; }
.breadcrumb__sep { color: #cbd5e1; font-size: 15px; }

/* ═══════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════ */
.empty-state {
	text-align: center;
	padding: 56px 24px;
	color: var(--muted);
	background: var(--panel);
	border: 1.5px dashed var(--border);
	border-radius: var(--radius);
}
.empty-state__title { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--text-2); }
.empty-state__text  { font-size: 14px; margin: 0; }

/* ═══════════════════════════════════════
   FILTER TABS
════════════════════════════════════════ */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.filter-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	background: var(--panel);
	border: 1.5px solid var(--border);
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.filter-tab:hover { border-color: #a5b4fc; color: var(--primary); text-decoration: none; }
.filter-tab--active { background: var(--primary-light); color: var(--primary); border-color: #a5b4fc; }
.filter-tab__count { background: var(--primary); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 900; padding: 1px 6px; }

/* ═══════════════════════════════════════
   SOURCE TAGS
════════════════════════════════════════ */
.source-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}
.source-tag--jotform { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }

/* ═══════════════════════════════════════
   REF CODE
════════════════════════════════════════ */
.ref-code {
	font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
	font-size: 12px;
	background: #f8fafc;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1px 6px;
	color: var(--muted);
}

/* ═══════════════════════════════════════
   DANGER ZONE
════════════════════════════════════════ */
.danger-zone {
	margin-top: 56px;
	padding: 22px 26px;
	border: 1.5px solid #fecdd3;
	border-radius: var(--radius);
	background: #fff1f2;
}
.danger-zone__title {
	font-size: 11px;
	font-weight: 800;
	color: var(--danger);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 0 0 6px;
}
.danger-zone__text { font-size: 14px; color: #9f1239; margin: 0 0 16px; }

/* ═══════════════════════════════════════
   MISC UTILITIES
════════════════════════════════════════ */
.muted  { color: var(--muted); }
.mt-sm  { margin-top: 8px; }
.mt-md  { margin-top: 16px; }
.mt-lg  { margin-top: 24px; }
.mb-md  { margin-bottom: 16px; }
.h2     { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.nowrap { white-space: nowrap; }

/* ── Clickable table rows ────────────── */
.table .row--clickable { cursor: pointer; }
.table .row--clickable:hover { background: #f0f2ff; }

/* ═══════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 820px) {
	:root { --sidebar-w: 220px; }
	.container { padding: 0 18px; }
}

@media (max-width: 700px) {
	.sidebar {
		transform: translateX(-100%);
		box-shadow: none;
	}
	.sidebar.open {
		transform: translateX(0);
		box-shadow: var(--shadow-lg);
	}
	.app-body { margin-left: 0; }
	.topbar { display: flex; }
	.app-main { padding: 18px 0 36px; }
	.page-header h1 { font-size: 22px; }
	.stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.stat-card__value { font-size: 32px; }
	.detail-card { padding: 18px 20px; }
}

@media (max-width: 480px) {
	.stat-grid { grid-template-columns: 1fr 1fr; }
	.page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
	.filter-tabs { gap: 4px; }
	.filter-tab { font-size: 12px; padding: 5px 11px; }
	.table { font-size: 13px; }
	.table th, .table td { padding: 9px 11px; }
	.row-actions { gap: 4px; }
	.btn { font-size: 12px; padding: 7px 11px; }
	.auth-card { padding: 28px 22px; }
}

/* ── Accessibility ─────────────────────────────────────── */

/* Skip-to-main-content link: visually hidden until focused by keyboard */
.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 9999;
	padding: 10px 18px;
	background: var(--color-primary, #4f46e5);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-radius: 0 0 6px 0;
	transition: top 0.1s;
}
.skip-link:focus {
	top: 0;
	outline: 3px solid #fff;
	outline-offset: 2px;
}