<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php
	$theme_color = isset($theme_color) ? $theme_color : '#4d74c3';
	$accent_color = isset($accent_color) ? $accent_color : '#5f8fa8';
	$surface_color = isset($surface_color) ? $surface_color : '#f6f7f9';
	$panel_color = isset($panel_color) ? $panel_color : '#ffffff';
?>
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo htmlspecialchars(isset($page_title) ? $page_title : 'Supervisor', ENT_QUOTES, 'UTF-8'); ?> - Visores</title>
	<link rel="stylesheet" href="<?php echo rtrim(base_url(), '/'); ?>/../ts/assets/css/ionicons.min.css" />
	<style>
		:root {
			--theme: <?php echo htmlspecialchars($theme_color, ENT_QUOTES, 'UTF-8'); ?>;
			--accent: <?php echo htmlspecialchars($accent_color, ENT_QUOTES, 'UTF-8'); ?>;
			--accent-ink: #ffffff;
			--surface: <?php echo htmlspecialchars($surface_color, ENT_QUOTES, 'UTF-8'); ?>;
			--panel: <?php echo htmlspecialchars($panel_color, ENT_QUOTES, 'UTF-8'); ?>;
			--card: #f8fafc;
			--card-strong: #edf3ff;
			--border: rgba(20, 41, 64, 0.08);
			--ink: #173246;
			--muted: #617386;
			--success: #2ecc71;
			--warning: #f1c40f;
			--danger: #e74c3c;
			--field-bg: #ffffff;
			--field-ink: #173246;
			--shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
		}
		* { box-sizing: border-box; }
		body {
			margin: 0;
			background: var(--surface);
			color: var(--ink);
			font-family: "Trebuchet MS", Arial, sans-serif;
		}
		.app-shell {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}
		.topbar {
			background: var(--theme);
			color: #fff;
			padding: 14px 16px 10px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 16px;
		}
		.topbar-actions {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.brand {
			font-size: 1rem;
			font-weight: 700;
			letter-spacing: 0.02em;
		}
		.brand small {
			display: block;
			color: rgba(255,255,255,0.82);
			font-size: 12px;
			margin-top: 3px;
		}
		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 12px 16px;
			border-radius: 14px;
			border: 0;
			background: var(--accent);
			color: var(--accent-ink);
			font-weight: 700;
			cursor: pointer;
			text-decoration: none;
			box-shadow: 0 8px 18px rgba(95, 143, 168, 0.20);
		}
		.btn-outline {
			background: var(--accent);
			color: var(--accent-ink);
			box-shadow: 0 8px 18px rgba(20, 41, 64, 0.14);
		}
		.navbar {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
			gap: 12px;
			padding: 14px 16px;
			background: transparent;
		}
		.navbar a {
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			color: #fff;
			padding: 16px 18px;
			border-radius: 18px;
			font-weight: 700;
			background: var(--accent);
			box-shadow: 0 8px 18px rgba(20, 41, 64, 0.14);
		}
		.navbar a:hover { transform: translateY(-1px); }
		@media print {
			.topbar, .navbar, .filter-panel, .actions, .btn { display: none !important; }
			body { background: #fff; }
			.panel, .goal-block { box-shadow: none !important; }
		}
		.navbar a.is-active {
			background: var(--theme);
			color: #fff;
		}
		.content {
			padding: 14px 16px 20px;
			flex: 1;
		}
		.filter-panel {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			gap: 12px;
		}
		.filter-panel input, .filter-panel select {
			width: 100%;
			border: 0;
			border-radius: 14px;
			padding: 13px 14px;
			background: var(--field-bg);
			color: var(--field-ink);
			box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.12);
			font-family: inherit;
		}
		.panel {
			background: var(--panel);
			border-radius: 24px;
			padding: 18px;
			box-shadow: var(--shadow);
		}
		.panel h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
		.panel p { margin: 0; color: var(--muted); line-height: 1.45; }
		.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
		.stat { background: var(--card-strong); border: 0; border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(77,116,195,0.08); }
		.stat label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
		.stat strong { display: block; margin-top: 6px; font-size: 18px; }
		.actions { display: flex; gap: 10px; margin-top: 14px; }
		.empty { padding: 14px; border-radius: 16px; background: var(--card); color: var(--muted); text-align: center; }
		.badge {
			display: inline-flex;
			align-items: center;
			padding: 4px 10px;
			border-radius: 999px;
			font-size: 0.78rem;
			font-weight: 700;
			color: #fff;
		}
		.badge.success { background: var(--success); }
		.badge.warning { background: var(--warning); color: #4a3b00; }
		.badge.danger { background: var(--danger); }
		.note {
			color: var(--muted);
			font-size: 0.9rem;
		}
	</style>
</head>
<body>
	<div class="app-shell">
		<header class="topbar">
			<div class="brand">
				Time Store
				<small><?php echo htmlspecialchars(isset($company_name) ? $company_name : 'Panel Supervisor', ENT_QUOTES, 'UTF-8'); ?></small>
			</div>
			<div class="topbar-actions">
				<a class="btn btn-outline" href="<?php echo site_url('logout'); ?>">Cerrar sesion</a>
			</div>
		</header>
		<nav class="navbar">
			<?php
				$tabs = isset($allowed_supervisor_tabs) && is_array($allowed_supervisor_tabs)
					? $allowed_supervisor_tabs
					: array();
				$current_tab = isset($current_tab) ? $current_tab : 'dashboard';
			?>
			<?php foreach ($tabs as $key => $tab) { ?>
				<a class="<?php echo $current_tab === $key ? 'is-active' : ''; ?>" href="<?php echo site_url($tab['route']); ?>">
					<?php echo htmlspecialchars($tab['label'], ENT_QUOTES, 'UTF-8'); ?>
				</a>
			<?php } ?>
		</nav>
		<main class="content">
			<?php $this->load->view($view); ?>
		</main>
	</div>
</body>
</html>

