/*
Theme Name: BEST Dashboard
Theme URI: https://github.com/afizlatif/Backend-System-Tracker
Author: Afiz Latif
Description: Presentation-only shell theme for the BEST — Backend System Tracker plugin. Recreates the Tagus-style sidebar/header chrome and page layout from the BEST design handoff. Contains no business logic or data storage — requires the "BEST — Backend System Tracker" plugin to be active.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Requires Plugins: best-system-tracker
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: best-dashboard
*/

/* Design tokens — kept in sync manually with wordpress-plugin/best-system-tracker/admin/assets/css/best-admin.css */
:root {
	--best-primary: #757fef;
	--best-primary-alt: #9a7ff5;
	--best-indigo-alt: #5b6ee0;
	--best-success: #00b69b;
	--best-warning: #ffa53b;
	--best-warning-deep: #f08c1e;
	--best-danger: #e74a68;
	--best-ink: #260944;
	--best-canvas: #f5f5f7;
	--best-border: #ececf3;
	--best-muted: #5b5b98;
	--best-faint: #9b9bb8;
	--best-placeholder: #b3b3c9;
}

* { box-sizing: border-box; }

body.best-dashboard-body {
	margin: 0;
	background: var(--best-canvas);
	font-family: 'Open Sans', -apple-system, sans-serif;
	color: var(--best-ink);
	font-size: 14px;
}

.best-shell { display: flex; min-height: 100vh; }

.best-sidebar {
	width: 250px;
	flex: 0 0 250px;
	background: #fff;
	border-right: 1px solid var(--best-border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: auto;
}
.best-brand { display: flex; align-items: center; gap: 11px; padding: 22px 24px 20px; }
.best-brand-tile { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg,#757fef,#9a7ff5); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 16px; }
.best-brand-name { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .5px; line-height: 1; }
.best-brand-sub { font-size: 9.5px; color: var(--best-faint); letter-spacing: .5px; text-transform: uppercase; margin-top: 3px; }

.best-nav-group-label { padding: 6px 16px 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--best-placeholder); font-weight: 600; }
.best-nav { display: flex; flex-direction: column; gap: 2px; padding: 2px 14px; }
.best-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 9px; color: var(--best-muted); text-decoration: none; font-weight: 500; transition: .25s; cursor: pointer; }
.best-nav-item:hover { background: #f3f3fb; color: var(--best-primary); }
.best-nav-item.is-active { background: var(--best-primary); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(117,127,239,.7); }
.best-nav-badge { margin-left: auto; background: #eeeefb; color: var(--best-primary); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 20px; }

.best-sidebar-footer { margin-top: auto; padding: 16px; }
.best-sidebar-card { background: linear-gradient(150deg,#757fef,#9a7ff5); border-radius: 14px; padding: 18px; color: #fff; }

.best-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.best-topbar { display: flex; align-items: center; gap: 18px; padding: 18px 30px; background: #fff; border-bottom: 1px solid var(--best-border); position: sticky; top: 0; z-index: 5; }
.best-topbar-title { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.1; }
.best-topbar-crumb { font-size: 12px; color: var(--best-faint); margin-top: 3px; }
.best-topbar-search { margin-left: auto; display: flex; align-items: center; background: var(--best-canvas); border-radius: 30px; padding: 9px 16px; gap: 9px; width: 240px; color: var(--best-placeholder); font-size: 13px; }
.best-topbar-user { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.best-topbar-avatar { width: 42px; height: 42px; border-radius: 50%; }

.best-content { padding: 26px 30px 40px; overflow: auto; }

.best-plugin-missing { background: #fff; border: 1px dashed var(--best-danger); border-radius: 14px; padding: 24px; color: var(--best-ink); }

@media (max-width: 900px) {
	.best-sidebar { position: fixed; left: -260px; z-index: 20; transition: left .2s; }
	.best-sidebar.is-open { left: 0; }
	.best-topbar-search { display: none; }
}