/* ==========================================================================
   GKQuizz Marks Manager - frontend styles
   Professional ERP-style look: card panels, hover feedback, consistent
   spacing/typography, accessible focus states. Everything is scoped under
   .gkqm-wrap so it never leaks into the surrounding theme.
   ========================================================================== */

.gkqm-wrap {
	--gkqm-primary: #2854c9;
	--gkqm-primary-dark: #1e409e;
	--gkqm-primary-light: #eef2ff;
	--gkqm-accent: #0891b2;
	--gkqm-success: #1b8a4c;
	--gkqm-success-bg: #eafaf0;
	--gkqm-success-border: #b7e4c7;
	--gkqm-danger: #b3261e;
	--gkqm-danger-bg: #fdecea;
	--gkqm-danger-border: #f5c6cb;
	--gkqm-warning: #8a6100;
	--gkqm-warning-bg: #fff8e1;
	--gkqm-warning-border: #ffe082;
	--gkqm-info-bg: #eef4ff;
	--gkqm-info-border: #cfe0ff;
	--gkqm-text: #1c2430;
	--gkqm-text-muted: #64748b;
	--gkqm-border: #e2e6ee;
	--gkqm-border-strong: #cfd5e0;
	--gkqm-surface: #ffffff;
	--gkqm-surface-muted: #f7f9fc;
	--gkqm-page-bg: #f4f6fa;
	--gkqm-radius: 10px;
	--gkqm-radius-sm: 6px;
	--gkqm-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
	--gkqm-shadow-md: 0 4px 10px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.05);

	max-width: 1180px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--gkqm-text);
	line-height: 1.55;
	font-size: 15px;
}
.gkqm-wrap * { box-sizing: border-box; }
.gkqm-wrap h2, .gkqm-wrap h3, .gkqm-wrap h4 { color: var(--gkqm-text); letter-spacing: -0.01em; }
.gkqm-wrap a { color: var(--gkqm-primary); }
.gkqm-wrap a:hover { color: var(--gkqm-primary-dark); }
.gkqm-muted { color: var(--gkqm-text-muted); font-size: 0.92em; }

/* ---------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------- */
.gkqm-notice {
	padding: 12px 16px;
	border-radius: var(--gkqm-radius-sm);
	margin: 12px 0;
	background: var(--gkqm-info-bg);
	border: 1px solid var(--gkqm-info-border);
	font-size: 0.95em;
}
.gkqm-notice-success { background: var(--gkqm-success-bg); border-color: var(--gkqm-success-border); color: var(--gkqm-success); }
.gkqm-notice-error { background: var(--gkqm-danger-bg); border-color: var(--gkqm-danger-border); color: var(--gkqm-danger); }
.gkqm-notice-warning { background: var(--gkqm-warning-bg); border-color: var(--gkqm-warning-border); color: var(--gkqm-warning); }

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.gkqm-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--gkqm-radius-sm);
	border: 1px solid transparent;
	font-size: 0.93em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}
.gkqm-btn:active { transform: translateY(1px); }
.gkqm-btn:focus-visible { outline: 2px solid var(--gkqm-primary); outline-offset: 2px; }
.gkqm-btn-primary { background: var(--gkqm-primary); color: #fff; box-shadow: var(--gkqm-shadow); }
.gkqm-btn-primary:hover { background: var(--gkqm-primary-dark); box-shadow: var(--gkqm-shadow-md); }
.gkqm-btn-secondary { background: var(--gkqm-surface); color: var(--gkqm-text); border-color: var(--gkqm-border-strong); }
.gkqm-btn-secondary:hover { background: var(--gkqm-surface-muted); border-color: var(--gkqm-primary); color: var(--gkqm-primary); }
.gkqm-btn-danger { background: var(--gkqm-danger); color: #fff; box-shadow: var(--gkqm-shadow); }
.gkqm-btn-danger:hover { background: #8f1f19; box-shadow: var(--gkqm-shadow-md); }
.gkqm-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }

.gkqm-link-btn {
	background: none;
	border: none;
	color: var(--gkqm-primary);
	cursor: pointer;
	text-decoration: none;
	padding: 2px 4px;
	font-size: 0.9em;
	font-weight: 600;
	border-radius: 4px;
	transition: background-color .15s ease, color .15s ease;
}
.gkqm-link-btn:hover { background: var(--gkqm-primary-light); }
button.gkqm-link-btn[class*="delete"] { color: var(--gkqm-danger); }
button.gkqm-link-btn[class*="delete"]:hover { background: var(--gkqm-danger-bg); }

/* ---------------------------------------------------------------------
   Tables - the workhorse of an ERP UI: clear rows, obvious hover state,
   contained in a rounded card.
   ------------------------------------------------------------------- */
.gkqm-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 14px 0;
	font-size: 0.93em;
	background: var(--gkqm-surface);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
	overflow: hidden;
	box-shadow: var(--gkqm-shadow);
}
.gkqm-table th, .gkqm-table td {
	border-bottom: 1px solid var(--gkqm-border);
	border-right: 1px solid var(--gkqm-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: middle;
}
.gkqm-table th:last-child, .gkqm-table td:last-child { border-right: none; }
.gkqm-table tbody tr:last-child td { border-bottom: none; }
.gkqm-table thead th {
	background: var(--gkqm-surface-muted);
	color: var(--gkqm-text-muted);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.82em;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.gkqm-table tbody tr { transition: background-color .12s ease; }
.gkqm-table tbody tr:hover { background: var(--gkqm-primary-light); }
.gkqm-table input[type="number"], .gkqm-table input[type="text"] {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--gkqm-border-strong);
	border-radius: 5px;
	font-size: 0.98em;
	background: var(--gkqm-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gkqm-table input[type="number"]:focus, .gkqm-table input[type="text"]:focus {
	outline: none;
	border-color: var(--gkqm-primary);
	box-shadow: 0 0 0 3px var(--gkqm-primary-light);
}
.gkqm-table input:disabled { background: var(--gkqm-surface-muted); color: var(--gkqm-text-muted); }

/* Horizontal scroll on narrow screens instead of an unusable squashed table. */
@media (max-width: 900px) {
	.gkqm-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------- */
.gkqm-form, .gkqm-inline-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 14px 0;
	padding: 14px 16px;
	background: var(--gkqm-surface-muted);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
}
.gkqm-inline-form input, .gkqm-inline-form select,
.gkqm-search-form input, .gkqm-search-form select {
	padding: 9px 11px;
	border: 1px solid var(--gkqm-border-strong);
	border-radius: var(--gkqm-radius-sm);
	background: var(--gkqm-surface);
	font-size: 0.95em;
	color: var(--gkqm-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gkqm-inline-form input:focus, .gkqm-inline-form select:focus,
.gkqm-search-form input:focus, .gkqm-search-form select:focus {
	outline: none;
	border-color: var(--gkqm-primary);
	box-shadow: 0 0 0 3px var(--gkqm-primary-light);
}
.gkqm-inline-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.93em; color: var(--gkqm-text); }

.gkqm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 780px) { .gkqm-two-col { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.gkqm-inline-form { flex-direction: column; align-items: stretch; }
	.gkqm-inline-form input, .gkqm-inline-form select, .gkqm-inline-form button { width: 100%; }
}

/* ---------------------------------------------------------------------
   Tabs - underline-pill nav typical of ERP dashboards.
   ------------------------------------------------------------------- */
.gkqm-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 1px solid var(--gkqm-border);
	margin: 20px 0 0;
	padding-bottom: 0;
}
.gkqm-tab-btn {
	background: none;
	border: none;
	padding: 11px 18px;
	cursor: pointer;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--gkqm-text-muted);
	border-bottom: 2.5px solid transparent;
	border-radius: 6px 6px 0 0;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
	margin-bottom: -1px;
}
.gkqm-tab-btn:hover { color: var(--gkqm-primary); background: var(--gkqm-primary-light); }
.gkqm-tab-btn.active { color: var(--gkqm-primary); border-bottom-color: var(--gkqm-primary); background: var(--gkqm-primary-light); }
.gkqm-tab-panel {
	display: none;
	background: var(--gkqm-surface);
	border: 1px solid var(--gkqm-border);
	border-top: none;
	border-radius: 0 0 var(--gkqm-radius) var(--gkqm-radius);
	padding: 22px 24px 28px;
	box-shadow: var(--gkqm-shadow);
}
.gkqm-tab-panel.active { display: block; animation: gkqm-fade-in .15s ease; }
@keyframes gkqm-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 780px) {
	.gkqm-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.gkqm-tab-btn { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   Dashboard chrome
   ------------------------------------------------------------------- */
.gkqm-admin-dashboard { padding-bottom: 40px; }
.gkqm-dash-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 22px;
	background: linear-gradient(135deg, var(--gkqm-primary) 0%, var(--gkqm-primary-dark) 100%);
	border-radius: var(--gkqm-radius);
	box-shadow: var(--gkqm-shadow-md);
	margin-bottom: 4px;
}
.gkqm-dash-header h2 { color: #fff; margin: 0; font-size: 1.35em; }
.gkqm-dash-header .gkqm-muted { color: rgba(255,255,255,0.85); }
.gkqm-dash-header a { color: #fff; text-decoration: underline; }
.gkqm-dash-header strong { color: #fff; }

/* ---------------------------------------------------------------------
   Status badges
   ------------------------------------------------------------------- */
.gkqm-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.gkqm-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gkqm-status-draft { background: var(--gkqm-surface-muted); color: var(--gkqm-text-muted); border: 1px solid var(--gkqm-border-strong); }
.gkqm-status-submitted { background: var(--gkqm-warning-bg); color: var(--gkqm-warning); }
.gkqm-status-final { background: var(--gkqm-danger-bg); color: var(--gkqm-danger); }

.gkqm-error-list { color: var(--gkqm-danger); font-size: 0.88em; max-height: 220px; overflow-y: auto; }

/* ---------------------------------------------------------------------
   Sessional Marks matrix - Written/Oral split controls
   ------------------------------------------------------------------- */
.gkqm-matrix-td { white-space: nowrap; }
.gkqm-matrix-cell { display: block; margin-bottom: 3px; }
.gkqm-matrix-split-toggle {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	font-size: 0.78em;
	color: var(--gkqm-text-muted);
	cursor: pointer;
	vertical-align: middle;
}
.gkqm-matrix-split-toggle input { cursor: pointer; }
.gkqm-matrix-split-inputs { display: flex; gap: 4px; margin-top: 4px; }
.gkqm-matrix-split-inputs input { padding: 5px 4px !important; font-size: 0.85em; width: 0 !important; flex: 1 1 0; min-width: 0; }

/* ---------------------------------------------------------------------
   Dense data-entry sheets (Sessional sheet, Max Marks matrix) - these have
   many narrow numeric columns; without fixed sizing, browsers stretch every
   column to fit the (long) header text even though the actual cell content
   is a tiny 2-3 digit number, leaving huge dead space around a small input
   box. table-layout:fixed + column-group widths + full-width inputs fixes it.
   ------------------------------------------------------------------- */
.gkqm-dense-table {
	table-layout: fixed;
	font-size: 0.85em;
}
.gkqm-dense-table th, .gkqm-dense-table td {
	padding: 6px 7px;
	overflow-wrap: break-word;
}
.gkqm-dense-table thead th {
	font-size: 0.76em;
	line-height: 1.3;
	white-space: normal;
	vertical-align: bottom;
}
.gkqm-dense-table thead th small,
.gkqm-dense-table thead th .gkqm-muted { font-size: 0.95em; font-weight: 500; text-transform: none; letter-spacing: 0; }
.gkqm-dense-table col.gkqm-col-id { width: 60px; }
.gkqm-dense-table col.gkqm-col-name { width: 15%; }
.gkqm-dense-table col.gkqm-col-num { width: 64px; }
.gkqm-dense-table col.gkqm-col-total { width: 72px; }
.gkqm-dense-table col.gkqm-col-matrix { width: 120px; }
.gkqm-dense-table input[type="number"] {
	width: 100%;
	padding: 5px 4px;
	font-size: 0.98em;
	text-align: center;
}
.gkqm-dense-table thead th, .gkqm-dense-table tbody td { text-align: center; }
.gkqm-dense-table thead th:nth-child(2), .gkqm-dense-table tbody td:nth-child(2) { text-align: left; }

/* Sticky header so long student lists stay readable while scrolling, without
   fighting the theme's own header (falls back gracefully - this only
   activates the sticky effect within the table's own scroll container). */
@media (min-width: 901px) {
	.gkqm-dense-table-wrap { max-height: 70vh; overflow-y: auto; overflow-x: auto; border-radius: var(--gkqm-radius); box-shadow: var(--gkqm-shadow); }
	.gkqm-dense-table-wrap .gkqm-dense-table { box-shadow: none; margin: 0; }
	.gkqm-dense-table-wrap .gkqm-dense-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--gkqm-border); }
}

/* Settings bar above the sheet (Variable %, component Max Marks) - a tight
   grid instead of a loosely-wrapped inline form, so it doesn't sprawl. */
.gkqm-settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px 16px;
	align-items: end;
	margin: 14px 0;
	padding: 14px 16px;
	background: var(--gkqm-surface-muted);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
}
.gkqm-settings-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; font-weight: 600; color: var(--gkqm-text-muted); }
.gkqm-settings-grid input { padding: 8px 10px; border: 1px solid var(--gkqm-border-strong); border-radius: var(--gkqm-radius-sm); font-size: 0.95em; }
.gkqm-settings-grid input:focus { outline: none; border-color: var(--gkqm-primary); box-shadow: 0 0 0 3px var(--gkqm-primary-light); }
.gkqm-settings-grid .gkqm-btn { align-self: end; }


/* ---------------------------------------------------------------------
   Print / report sheets - kept clean and letterhead-like, separate from
   the ERP chrome above (no cards/shadows here - this is meant to print).
   ------------------------------------------------------------------- */
.gkqm-print-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.gkqm-print-sheet { border: 1px solid var(--gkqm-border); padding: 28px; border-radius: var(--gkqm-radius); background: var(--gkqm-surface); box-shadow: var(--gkqm-shadow); }
.gkqm-print-header { text-align: center; margin-bottom: 20px; }
.gkqm-print-header h2 { margin: 0 0 4px; }
.gkqm-print-header h3 { margin: 0 0 4px; font-weight: 600; color: var(--gkqm-text-muted); }
.gkqm-print-footer { display: flex; justify-content: space-between; margin-top: 70px; font-size: 0.9em; }
.gkqm-print-footer div { border-top: 1px solid #999; padding-top: 6px; width: 30%; text-align: center; }

@media print {
	.gkqm-no-print { display: none !important; }
	.gkqm-print-sheet { border: none; padding: 0; box-shadow: none; }
	body * { visibility: hidden; }
	.gkqm-print-wrap, .gkqm-print-wrap * { visibility: visible; }
	.gkqm-print-wrap { position: absolute; left: 0; top: 0; width: 100%; }
}

.gkqm-result-card { margin-bottom: 24px; }
.gkqm-result-card table th, .gkqm-result-card table td { text-align: center; }
.gkqm-result-card table td:first-child, .gkqm-result-card table th:first-child { text-align: left; }

/* ---------------------------------------------------------------------
   Marks-entry page (teacher view)
   ------------------------------------------------------------------- */
.gkqm-entry-wrap .gkqm-entry-header {
	padding: 16px 20px;
	background: var(--gkqm-surface-muted);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
	margin-bottom: 6px;
}
.gkqm-entry-wrap .gkqm-entry-header h2 { margin: 0 0 4px; font-size: 1.2em; }
.gkqm-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.gkqm-row-total { font-weight: 700; text-align: center; color: var(--gkqm-primary-dark); }

/* Absent/Medical attendance codes (-1/-2) in the marks-entry grid and print sheets. */
.gkqm-attendance-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
}
.gkqm-attendance-absent { background: var(--gkqm-danger-bg); color: var(--gkqm-danger); }
.gkqm-attendance-medical { background: var(--gkqm-warning-bg); color: var(--gkqm-warning); }
tr.gkqm-row-absent td:first-child, tr.gkqm-row-absent td:nth-child(2) { border-left: 3px solid var(--gkqm-danger); }
tr.gkqm-row-medical td:first-child, tr.gkqm-row-medical td:nth-child(2) { border-left: 3px solid var(--gkqm-warning); }

/* ---------------------------------------------------------------------
   Login / forgot-password card
   ------------------------------------------------------------------- */
.gkqm-login-wrap {
	max-width: 400px;
	margin: 60px auto;
	padding: 32px 30px;
	background: var(--gkqm-surface);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
	box-shadow: var(--gkqm-shadow-md);
}
.gkqm-login-wrap h2 { margin-top: 0; text-align: center; font-size: 1.3em; }
.gkqm-stacked-form p { margin-bottom: 14px; }
.gkqm-stacked-form label { display: block; margin-bottom: 5px; font-size: 0.9em; font-weight: 600; color: var(--gkqm-text-muted); }
.gkqm-stacked-form input[type="text"], .gkqm-stacked-form input[type="password"], .gkqm-stacked-form input[type="email"] {
	width: 100%; box-sizing: border-box; padding: 10px 12px;
	border: 1px solid var(--gkqm-border-strong); border-radius: var(--gkqm-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gkqm-stacked-form input:focus { outline: none; border-color: var(--gkqm-primary); box-shadow: 0 0 0 3px var(--gkqm-primary-light); }
.gkqm-forgot-password { margin-top: 18px; border-top: 1px solid var(--gkqm-border); padding-top: 14px; }
.gkqm-forgot-password summary { cursor: pointer; color: var(--gkqm-primary); font-weight: 600; font-size: 0.92em; }
.gkqm-forgot-password summary:hover { color: var(--gkqm-primary-dark); }
.gkqm-forgot-password form { margin-top: 12px; }

.gkqm-login-wrap label { display: block; margin-bottom: 5px; font-size: 0.9em; font-weight: 600; color: var(--gkqm-text-muted); }
.gkqm-login-wrap input[type="text"], .gkqm-login-wrap input[type="password"] {
	width: 100%; padding: 10px 12px; margin: 0 0 16px; box-sizing: border-box;
	border: 1px solid var(--gkqm-border-strong); border-radius: var(--gkqm-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gkqm-login-wrap input[type="text"]:focus, .gkqm-login-wrap input[type="password"]:focus {
	outline: none; border-color: var(--gkqm-primary); box-shadow: 0 0 0 3px var(--gkqm-primary-light);
}
.gkqm-login-wrap .login-remember { font-size: 0.9em; margin: 0 0 16px; }
.gkqm-login-wrap .login-submit { margin: 4px 0 0; }
.gkqm-login-wrap input[type="submit"], .gkqm-login-wrap #wp-submit {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	padding: 10px 18px; border-radius: var(--gkqm-radius-sm); border: 1px solid transparent;
	font-size: 0.95em; font-weight: 700; cursor: pointer;
	background: var(--gkqm-primary); color: #fff; box-shadow: var(--gkqm-shadow);
	transition: background-color .15s ease, box-shadow .15s ease;
}
.gkqm-login-wrap input[type="submit"]:hover, .gkqm-login-wrap #wp-submit:hover { background: var(--gkqm-primary-dark); box-shadow: var(--gkqm-shadow-md); }

/* ---------------------------------------------------------------------
   A4 print-orientation picker (report/print pages)
   ------------------------------------------------------------------- */
.gkqm-orientation-picker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--gkqm-text-muted);
}
.gkqm-orientation-picker select {
	padding: 8px 10px;
	border: 1px solid var(--gkqm-border-strong);
	border-radius: var(--gkqm-radius-sm);
	background: var(--gkqm-surface);
	font-size: 0.95em;
}

/* On-screen preview sized to actual A4 proportions, so what you see roughly
   matches what prints - width capped for readability, height follows the
   real A4 ratio (210x297mm) for portrait and the inverse for landscape. */
.gkqm-print-sheet-portrait { max-width: 800px; margin: 0 auto; }
.gkqm-print-sheet-landscape { max-width: 1100px; margin: 0 auto; }

/* ---------------------------------------------------------------------
   Full responsive pass - phones, small tablets, and everything between.
   ------------------------------------------------------------------- */

/* Nicer, visible scrollbars on the horizontal-scrolling tables/tabs so it's
   obvious there's more content sideways rather than looking cut off. */
.gkqm-table, .gkqm-tabs {
	scrollbar-width: thin;
	scrollbar-color: var(--gkqm-border-strong) transparent;
}
.gkqm-table::-webkit-scrollbar, .gkqm-tabs::-webkit-scrollbar { height: 8px; }
.gkqm-table::-webkit-scrollbar-thumb, .gkqm-tabs::-webkit-scrollbar-thumb { background: var(--gkqm-border-strong); border-radius: 4px; }
.gkqm-table::-webkit-scrollbar-track, .gkqm-tabs::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
	.gkqm-table { -webkit-overflow-scrolling: touch; }
}

/* Large tablets / small laptops. */
@media (max-width: 1024px) {
	.gkqm-wrap { max-width: 100%; padding: 0 16px; }
}

/* Tablets. */
@media (max-width: 780px) {
	.gkqm-tab-panel { padding: 18px 16px 22px; }
	.gkqm-dash-header { padding: 16px 18px; }
	.gkqm-dash-header h2 { font-size: 1.15em; }
	.gkqm-print-sheet { padding: 18px; }
}

/* Phones. */
@media (max-width: 600px) {
	.gkqm-wrap { padding: 0 10px; font-size: 14px; }
	.gkqm-dash-header { flex-direction: column; align-items: flex-start; }
	.gkqm-tab-panel { padding: 14px 12px 18px; border-radius: 0 0 var(--gkqm-radius-sm) var(--gkqm-radius-sm); }
	.gkqm-print-toolbar { flex-direction: column; align-items: stretch; }
	.gkqm-print-toolbar .gkqm-btn, .gkqm-print-toolbar > a.gkqm-btn { width: 100%; justify-content: center; }
	.gkqm-print-toolbar .gkqm-orientation-picker { justify-content: space-between; }
	.gkqm-print-sheet { padding: 14px; }
	.gkqm-login-wrap { margin: 24px auto; padding: 22px 18px; max-width: 92vw; }
	.gkqm-entry-actions { flex-direction: column; align-items: stretch; }
	.gkqm-entry-actions .gkqm-btn { width: 100%; }
	.gkqm-print-footer { flex-direction: column; gap: 24px; margin-top: 40px; }
	.gkqm-print-footer div { width: 100%; }
}

/* Very small phones. */
@media (max-width: 380px) {
	.gkqm-wrap { font-size: 13px; }
	.gkqm-table th, .gkqm-table td { padding: 7px 8px; }
}

@media print {
	.gkqm-print-sheet-portrait, .gkqm-print-sheet-landscape { max-width: none; }
}

/* ==========================================================================
   Sidebar + Topbar dashboard shell
   ========================================================================== */

.gkqm-wrap.gkqm-admin-dashboard { max-width: 1400px; }

.gkqm-shell {
	display: flex;
	align-items: flex-start;
	gap: 0;
	background: var(--gkqm-page-bg);
	border-radius: var(--gkqm-radius);
	overflow: hidden;
	box-shadow: var(--gkqm-shadow-md);
	min-height: 640px;
}

/* ---- Sidebar ---- */
.gkqm-sidebar {
	flex: 0 0 240px;
	width: 240px;
	background: #1c2128;
	color: #b7bfcc;
	min-height: 640px;
	padding: 18px 0;
}
.gkqm-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 20px 20px;
	color: #fff;
	font-weight: 700;
	font-size: 1.02em;
	letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	margin-bottom: 10px;
}
.gkqm-sidebar-logo { width: 26px; height: 26px; flex: 0 0 26px; color: var(--gkqm-primary); }
.gkqm-sidebar-logo svg { width: 100%; height: 100%; }
.gkqm-sidebar-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gkqm-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.gkqm-sidebar-nav .gkqm-tab-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border-radius: var(--gkqm-radius-sm);
	background: none;
	border: none;
	border-bottom: none;
	margin-bottom: 0;
	color: #a3adc2;
	font-size: 0.88em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.gkqm-sidebar-nav .gkqm-tab-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.gkqm-sidebar-nav .gkqm-tab-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.gkqm-sidebar-nav .gkqm-tab-btn.active { background: var(--gkqm-primary); color: #fff; box-shadow: var(--gkqm-shadow); }
.gkqm-sidebar-nav .gkqm-tab-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Main column ---- */
.gkqm-main { flex: 1 1 0; min-width: 0; background: var(--gkqm-page-bg); }

.gkqm-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 24px;
	background: var(--gkqm-surface);
	border-bottom: 1px solid var(--gkqm-border);
}
.gkqm-sidebar-toggle {
	display: none;
	background: none;
	border: 1px solid var(--gkqm-border-strong);
	border-radius: var(--gkqm-radius-sm);
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--gkqm-text);
	flex: 0 0 auto;
}
.gkqm-sidebar-toggle svg { width: 18px; height: 18px; }

.gkqm-topbar-search {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--gkqm-surface-muted);
	border: 1px solid var(--gkqm-border);
	border-radius: 999px;
	padding: 8px 16px;
	max-width: 420px;
	color: var(--gkqm-text-muted);
}
.gkqm-topbar-search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.gkqm-topbar-search input { border: none; background: none; outline: none; font-size: 0.92em; width: 100%; color: var(--gkqm-text); }

.gkqm-topbar-user { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.gkqm-topbar-user-info { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.gkqm-topbar-user-info strong { font-size: 0.88em; color: var(--gkqm-text); }
.gkqm-topbar-user-info span { font-size: 0.76em; color: var(--gkqm-text-muted); }
.gkqm-topbar-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(135deg, var(--gkqm-primary), var(--gkqm-primary-dark));
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 0.95em; flex: 0 0 38px;
}
.gkqm-topbar-logout {
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--gkqm-danger); border: 1px solid var(--gkqm-danger-border); background: var(--gkqm-danger-bg);
	flex: 0 0 36px;
}
.gkqm-topbar-logout svg { width: 16px; height: 16px; }
.gkqm-topbar-logout:hover { background: var(--gkqm-danger); color: #fff; }

.gkqm-content { padding: 22px 24px 32px; }
.gkqm-content .gkqm-tab-panel {
	border: none;
	border-radius: var(--gkqm-radius);
	padding: 0;
	box-shadow: none;
	background: none;
}
#gkqm-tab-home.gkqm-tab-panel {
	background: var(--gkqm-surface);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
	padding: 22px 24px 28px;
	box-shadow: var(--gkqm-shadow);
}
.gkqm-content > .gkqm-tab-panel:not(#gkqm-tab-home) {
	background: var(--gkqm-surface);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
	padding: 22px 24px 28px;
	box-shadow: var(--gkqm-shadow);
}

/* ---- Home tile grid ---- */
.gkqm-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px;
	margin-top: 20px;
}
.gkqm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 22px 14px;
	background: var(--gkqm-surface);
	border: 1px solid var(--gkqm-border);
	border-radius: var(--gkqm-radius);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
	text-align: center;
}
.gkqm-tile:hover { transform: translateY(-3px); box-shadow: var(--gkqm-shadow-md); }
.gkqm-tile-icon {
	width: 56px; height: 56px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.gkqm-tile-icon svg { width: 26px; height: 26px; }
.gkqm-tile-label { font-size: 0.86em; font-weight: 700; color: var(--gkqm-text); }

.gkqm-tile-pink    { background: linear-gradient(135deg, #f5576c, #f093fb); }
.gkqm-tile-green   { background: linear-gradient(135deg, #11998e, #38ef7d); }
.gkqm-tile-magenta { background: linear-gradient(135deg, #d76d77, #ba2d65); }
.gkqm-tile-blue    { background: linear-gradient(135deg, #4facfe, #2563c7); }
.gkqm-tile-orange  { background: linear-gradient(135deg, #f7971e, #f45c43); }
.gkqm-tile-red     { background: linear-gradient(135deg, #eb3349, #a91d2c); }
.gkqm-tile-purple  { background: linear-gradient(135deg, #7f7fd5, #5b4fc4); }
.gkqm-tile-teal    { background: linear-gradient(135deg, #2193b0, #6dd5ed); }
.gkqm-tile-indigo  { background: linear-gradient(135deg, #654ea3, #3d3393); }

.gkqm-tile[hidden] { display: none; }

/* ---- Responsive: collapse sidebar to an off-canvas drawer ---- */
@media (max-width: 900px) {
	.gkqm-shell { flex-direction: column; min-height: 0; }
	.gkqm-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: 8px 0 24px rgba(0,0,0,0.25);
	}
	.gkqm-sidebar.gkqm-sidebar-open { transform: translateX(0); }
	.gkqm-sidebar-toggle { display: flex; }
	.gkqm-content { padding: 16px 14px 24px; }
	.gkqm-topbar-search { display: none; }
}
@media (max-width: 560px) {
	.gkqm-topbar-user-info { display: none; }
	.gkqm-tile-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
	.gkqm-tile { padding: 16px 8px; }
	.gkqm-tile-icon { width: 46px; height: 46px; border-radius: 12px; }
	.gkqm-tile-icon svg { width: 22px; height: 22px; }
}