/* SliTaz Cooker — 2026 style */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
	--primary:      #e74c3c;
	--primary-dark: #c0392b;
	--secondary:    #3498db;
	--secondary-dk: #2980b9;
	--accent:       #2ecc71;
	--dark:         #2c3e50;
	--text:         #34495e;
	--text-light:   #7f8c8d;
	--light:        #f0f3f5;
	--white:        #ffffff;
	--border:       #b8c4ca;
	--success:      #27ae60;
	--warning:      #f39c12;
	--error:        #e74c3c;

	--font: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	--f-sm:   0.875rem;
	--f-base: 1rem;
	--f-lg:   1.125rem;

	--r-sm: 4px;
	--r-md: 8px;
	--sh-sm: 0 1px 2px rgba(0,0,0,.05);
	--sh-md: 0 4px 6px rgba(0,0,0,.10);
	--tr:   0.2s ease-in-out;

	--xs: 0.25rem;
	--sm: 0.5rem;
	--md: 1rem;
	--lg: 1.5rem;
	--xl: 2rem;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
	font-family: var(--font);
	font-size: var(--f-base);
	line-height: 1.6;
	color: var(--text);
	background: var(--white);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h2 { font-size: 1.4rem; color: var(--dark); font-weight: 600;
     margin: var(--lg) 0 var(--md); line-height: 1.3; }
h3 { font-size: 1.1rem; color: #555; font-weight: 600;
     margin: var(--md) 0 var(--sm); }

a { color: var(--secondary); text-decoration: none;
    transition: color var(--tr); }
a:hover { color: var(--secondary-dk); text-decoration: underline; }

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

pre {
	background: var(--light);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	padding: var(--md);
	overflow-x: auto;
	font-size: var(--f-sm);
	line-height: 1.55;
	margin-bottom: var(--md);
}

/* ==========================================================================
   Header
   ========================================================================== */

#header {
	background: #2c3e50;
	border-bottom: 1px solid #1a252f;
	padding: var(--md) var(--xl);
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: var(--md);
	box-shadow: var(--sh-sm);
}

#header h1 {
	margin: 0;
	font-size: var(--f-lg);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--sm);
}

#header h1 a {
	color: #f0f2f4;
	display: flex;
	align-items: center;
	gap: var(--sm);
}
#header h1 a:hover { color: var(--primary); text-decoration: none; }

#header img { height: 28px; width: auto; }

#network {
	margin-left: auto;
}

#network ul {
	display: flex;
	list-style: none;
	gap: var(--lg);
	align-items: center;
}

#network a {
	color: #b0bec5;
	font-weight: 500;
	font-size: var(--f-sm);
	padding: var(--xs) 0;
	transition: color var(--tr);
}
#network a:hover { color: var(--primary); text-decoration: none; }

#network .sep { color: #546e7a; pointer-events: none; }

/* ==========================================================================
   Nav bar
   ========================================================================== */

#nav {
	background: #f5f7f8;
	border-bottom: 1px solid var(--border);
	padding: var(--sm) var(--xl);
}

#nav ul { display: flex; list-style: none; gap: var(--xs); flex-wrap: wrap; justify-content: center; }

#nav a {
	display: inline-block;
	padding: var(--sm) var(--md);
	border-radius: var(--r-sm);
	font-size: var(--f-sm);
	font-weight: 500;
	color: var(--text);
	transition: all var(--tr);
}
#nav a:hover { background: var(--light); color: var(--primary); text-decoration: none; }
#nav a.active {
	background: var(--white);
	color: var(--primary);
	border: 1px solid var(--border);
}

/* Mobile hamburger (checkbox CSS-only) */
#nav-toggle { display: none; }

#nav-burger {
	display: none;
	cursor: pointer;
	color: #f0f2f4;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--r-sm);
	padding: var(--xs) var(--sm);
	font-size: var(--f-lg);
	line-height: 1;
	user-select: none;
}

/* Theme toggle button */
#theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--r-sm);
	color: #f0f2f4;
	width: 34px;
	height: 34px;
	font-size: 1rem;
	transition: background var(--tr);
}
#theme-toggle:hover { background: rgba(255,255,255,.12); }

/* ==========================================================================
   Content
   ========================================================================== */

#content {
	flex: 1;
	max-width: 1040px;
	width: 100%;
	margin: 0 auto;
	padding: var(--xl);
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
	border-top: 1px solid var(--border);
	padding: var(--lg) var(--xl);
	text-align: center;
	color: var(--text-light);
	font-size: var(--f-sm);
	margin-top: auto;
}

#footer a { color: var(--text-light); margin: 0 var(--sm); }
#footer a:hover { color: var(--secondary); text-decoration: none; }

/* ==========================================================================
   Cooker-specific
   ========================================================================== */

/* Status colors */
.span-ok   { color: var(--success); }
.span-red  { color: var(--error); }
.span-sky  { color: var(--secondary); }
.span-no   { color: var(--warning); }
.span-line { color: var(--text-light); }

/* cook-doctor (?doctor): colorize emits <span class="colorNN">, and libtaz
   html mode wraps the report in <section><header>..<pre class="scroll">..
   <footer>..</section>. */
.color31 { color: var(--error); }      /* x  problem */
.color32 { color: var(--success); }    /* v  ok      */
.color33 { color: var(--warning); }    /* !  note    */
.color36 { color: var(--secondary); }  /* fix:       */

#content > section > header {
	font-size: var(--f-lg); font-weight: 600; color: var(--dark);
	margin-bottom: var(--sm);
}
#content > section > footer {
	margin-top: var(--sm); color: var(--text-light); font-size: var(--f-sm);
}
#content > section pre.scroll { margin-bottom: 0; }

/* Log / syntax highlight */
.log-date   { color: var(--text-light); font-size: 93%; }
.sh-comment { color: #a33; }
.sh-val     { color: #d55; font-weight: 700; }
.var        { color: var(--secondary); }

/* Buttons */
.button {
	display: inline-flex;
	align-items: center;
	gap: var(--xs);
	cursor: pointer;
	padding: 4px var(--md);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--white);
	font-size: var(--f-sm);
	color: var(--text);
	text-decoration: none;
	transition: all var(--tr);
	line-height: 1.4;
}
a.button { text-decoration: none; }
.button:hover { border-color: var(--secondary); color: var(--secondary); }

/* Progress bar */
.pctbar {
	display: block;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	overflow: hidden;
	font-size: var(--f-sm);
	color: var(--text);
	background: var(--light);
	margin: var(--md) 0;
}
.pct { display: block; background: var(--accent); padding: 4px 10px; color: #fff; min-width: 3ch; }

/* Search / package form */
input[type="text"] {
	padding: 4px var(--sm);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--white);
	color: var(--text);
	font-size: var(--f-sm);
	font-family: var(--font);
	transition: border-color var(--tr);
	outline: none;
}
input[type="text"]:focus { border-color: var(--secondary); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	#network { display: none; }

	#theme-toggle { margin-left: auto; }

	#nav-burger { display: block; }

	#nav { padding: 0; border-bottom: none; }

	#nav ul {
		display: none;
		flex-direction: column;
		border-bottom: 1px solid var(--border);
		padding: var(--sm) 0;
	}

	body:has(#nav-toggle:checked) #nav {
		position: fixed;
		top: 60px;
		left: 0; right: 0;
		z-index: 999;
		box-shadow: var(--sh-md);
	}

	body:has(#nav-toggle:checked) #nav ul { display: flex; }

	#nav a { width: 100%; text-align: center; padding: var(--sm) var(--md); }

	#content { padding: var(--md); }
}

/* ==========================================================================
   Dark mode — auto (system) + manual override via [data-theme]
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--dark:       #f0f0f0;
		--text:       #b8b8b8;
		--text-light: #787878;
		--light:      #1e1e1e;
		--white:      #141414;
		--border:     #2a2a2a;
		--sh-sm: 0 1px 2px rgba(0,0,0,.4);
		--sh-md: 0 4px 6px rgba(0,0,0,.5);
	}
	:root:not([data-theme="light"]) #header            { background: var(--white); border-bottom-color: var(--border); }
	:root:not([data-theme="light"]) #header h1 a       { color: var(--dark); }
	:root:not([data-theme="light"]) #header h1 a:hover { color: var(--primary); }
	:root:not([data-theme="light"]) #network a         { color: var(--text-light); }
	:root:not([data-theme="light"]) #network a:hover   { color: var(--primary); }
	:root:not([data-theme="light"]) #nav               { background: var(--light); }
	:root:not([data-theme="light"]) pre                { background: #191d24; }
	:root:not([data-theme="light"]) .button            { background: var(--light); }
	:root:not([data-theme="light"]) input[type="text"] { background: var(--light); }
	:root:not([data-theme="light"]) .sh-comment        { color: #f07070; }
	:root:not([data-theme="light"]) .sh-val            { color: #ffaa55; }
}

html[data-theme="dark"] {
	--dark:       #f0f0f0;
	--text:       #b8b8b8;
	--text-light: #787878;
	--light:      #1e1e1e;
	--white:      #141414;
	--border:     #2a2a2a;
	--sh-sm: 0 1px 2px rgba(0,0,0,.4);
	--sh-md: 0 4px 6px rgba(0,0,0,.5);
}
html[data-theme="dark"] #header            { background: var(--white); border-bottom-color: var(--border); }
html[data-theme="dark"] #header h1 a       { color: var(--dark); }
html[data-theme="dark"] #header h1 a:hover { color: var(--primary); }
html[data-theme="dark"] #network a         { color: var(--text-light); }
html[data-theme="dark"] #network a:hover   { color: var(--primary); }
html[data-theme="dark"] #nav               { background: var(--light); }
html[data-theme="dark"] pre                { background: #191d24; }
html[data-theme="dark"] .button            { background: var(--light); }
html[data-theme="dark"] input[type="text"] { background: var(--light); }
html[data-theme="dark"] .sh-comment        { color: #f07070; }
html[data-theme="dark"] .sh-val            { color: #ffaa55; }