/**
 * Metronic bridge.
 *
 * Loaded after Metronic (plugins.bundle.css + style.bundle.css), the theme style, and the
 * Sckan QR plugin CSS. It re-skins the plugin/theme components to the Metronic design language by
 * mapping our component CSS variables onto Bootstrap/Metronic variables, then adds a little polish.
 * Because it only overrides variables + a few rules, the plugin stays fully portable on its own.
 */

/* Metronic's style.bundle.css sets `body { display:flex }` and `html,body { height:100% }` for its
   fixed app-shell layout. This theme uses normal document flow, so reset them — otherwise the page
   is locked to viewport height and content spills below in an iframe-like box. */
html, body { height: auto; min-height: 100%; }
body { display: block; }

/* Inter everywhere (Metronic's type) */
body,
.sckanqr, .sckan-dash, .sckan-auth, .sckanqr-mycodes {
	font-family: var(--bs-body-font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Sckan brand colour (from the logo). */
:root { --sk-brand: #0c3697; --sk-brand-active: #092a78; }

/* Map our component tokens to Metronic's palette (auto-adapts to Metronic light/dark themes),
   but use the Sckan brand blue for the accent so buttons/tabs match the logo. */
.sckanqr,
.sckan-dash,
.sckan-auth,
.sckanqr-mycodes {
	--sq-bg: var(--bs-body-bg, #fff);
	--sq-surface: var(--bs-gray-100, #f9f9f9);
	--sq-border: var(--bs-border-color, #e1e3ea);
	--sq-text: var(--bs-body-color, #252f4a);
	--sq-muted: var(--bs-gray-600, #78829d);
	--sq-accent: var(--sk-brand);
	--sq-accent-2: var(--bs-info, #7239ea);
	--sq-radius: .625rem;
}

/* Brand logo sizing in the theme shell. */
.sk-logo { height: 34px; width: auto; display: block; }
.sk-footer .sk-logo { height: 30px; }

/* Buttons → Metronic button feel */
.sckanqr .sq-btn,
.sckan-auth .sq-btn,
.sckan-dash .sq-btn {
	border-radius: .475rem;
	font-weight: 600;
	padding: .65rem 1.1rem;
	box-shadow: none;
	transition: color .2s, background-color .2s, border-color .2s;
}
.sckanqr .sq-btn-primary,
.sckan-auth .sq-btn-primary,
.sckan-dash .sq-btn-primary {
	background: var(--sk-brand);
	border-color: var(--sk-brand);
}
.sckanqr .sq-btn-primary:hover,
.sckan-auth .sq-btn-primary:hover,
.sckan-dash .sq-btn-primary:hover {
	background: var(--sk-brand-active);
	border-color: var(--sk-brand-active);
	filter: none;
}

/* Inputs / selects / textareas → Metronic form controls */
.sckanqr input[type="text"], .sckanqr input[type="url"], .sckanqr input[type="tel"],
.sckanqr input[type="email"], .sckanqr input[type="number"], .sckanqr input[type="datetime-local"],
.sckanqr select, .sckanqr textarea,
.sckan-auth input, .sckan-dash input[type="text"], .sckan-dash input[type="email"],
.sckan-dash input[type="password"], .sckan-dash input[type="url"] {
	border-radius: .475rem;
	border-color: var(--bs-gray-300, #dbdfe9);
	background: var(--bs-body-bg, #fff);
	color: var(--bs-gray-800, #252f4a);
	padding: .65rem .9rem;
	font-size: .925rem;
}
.sckanqr input:focus, .sckanqr select:focus, .sckanqr textarea:focus,
.sckan-auth input:focus, .sckan-dash input:focus {
	border-color: var(--sk-brand);
	box-shadow: none;
}

/* Type tabs → Metronic pill buttons */
.sckanqr-tab {
	border-radius: .475rem;
	font-weight: 600;
	color: var(--bs-gray-700, #4b5675);
	background: var(--bs-gray-100, #f9f9f9);
	border-color: transparent;
}
.sckanqr-tab:hover { background: var(--bs-gray-200, #f1f1f4); border-color: transparent; }
.sckanqr-tab.is-active { background: var(--sk-brand); color: #fff; }

/* Panels & preview → Metronic cards */
.sq-panel,
.sckanqr-preview-inner,
.sckanqr-code-card,
.sckan-dash-card,
.sckan-auth-card {
	border-color: var(--bs-gray-200, #f1f1f4);
	border-radius: .75rem;
	box-shadow: 0 3px 9px rgba(0,0,0,.06);
	background: var(--bs-body-bg, #fff);
}
.sq-panel > summary { font-weight: 600; }

/* Dashboard tabs → Metronic line tabs */
.sckan-dash-card .num { color: var(--bs-gray-900, #1f1f1f); }

/* Auth screen → Metronic centered card on a soft background */
.sckan-auth {
	min-height: 70vh;
	background:
		radial-gradient( 1200px 400px at 50% -10%, var(--bs-gray-100, #f9f9f9), transparent ),
		var(--bs-body-bg, #fff);
}
.sckan-auth-card { padding: 2.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.sckan-auth-title { font-weight: 700; }

/* Readability + messages keep semantic colors but match radius */
.sckanqr-readability, .sckan-auth-msg, .sq-save-msg { border-radius: .475rem; }

/* ---- Theme shell (header/footer) Metronic polish ---- */
.sk-header { box-shadow: 0 2px 10px rgba(0,0,0,.04); border-bottom-color: var(--bs-gray-200, #f1f1f4); }
.sk-btn { border-radius: .475rem; font-weight: 600; }
.sk-btn-primary { background: var(--sk-brand); border-color: var(--sk-brand); color: #fff; }
.sk-brand-mark { background: linear-gradient(135deg, var(--sk-brand), var(--bs-info, #7239ea)); }
.sk-footer { border-top-color: var(--bs-gray-200, #f1f1f4); }