/* ============================================================
   MIS - interní systém Manilot (front pro zaměstnance)
   ============================================================ */

/* barvy a typografie vychází z manilot.com (Montserrat, červená #df2f2a, tmavá #222) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

* { box-sizing: border-box; }

:root {
	--mis-bg: #f7f7f7;
	--mis-sidebar: #222222;
	--mis-sidebar-active: #2f2f2f;
	--mis-accent: #df2f2a;
	--mis-accent-dark: #bd2622;
	--mis-text: #222222;
	--mis-muted: #777777;
	--mis-border: #e2e2e2;
	--mis-ok: #2e9e5b;
	--mis-warn: #b58900;
	--mis-danger: #cc2222;
	--mis-radius: 8px;
}

html, body { margin: 0; padding: 0; }

.misBody {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: var(--mis-bg);
	color: var(--mis-text);
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	min-height: 100vh;
}

a { color: var(--mis-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- sidebar ---------- */

.misSidebar {
	width: 230px;
	flex: none;
	background: var(--mis-sidebar);
	color: #fff;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}

.misLogo {
	padding: 20px 18px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.misLogo a { color: #fff; text-decoration: none; }
.misLogo span { color: var(--mis-accent); }

.misNav { flex: 1; padding: 8px 0; overflow-y: auto; }

.misNav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	color: #c3cad6;
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background 0.15s, color 0.15s;
}

.misNav__item:hover { background: var(--mis-sidebar-active); color: #fff; text-decoration: none; }
.misNav__item.is-active { background: var(--mis-sidebar-active); color: #fff; border-left-color: var(--mis-accent); }
.misNav__icon { width: 20px; text-align: center; }

.misSidebar__footer { padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.misUser__name { display: block; font-weight: 600; margin-bottom: 6px; color: #fff; word-break: break-word; }
.misLogout { color: #c3cad6; font-size: 13px; }
.misLogout:hover { color: #fff; }

/* ---------- main ---------- */

.misMain { flex: 1; padding: 24px 30px 60px; min-width: 0; }

.misHeader h1 { margin: 0 0 18px; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.misHeader h1::after { content: ""; display: block; width: 44px; height: 3px; background: var(--mis-accent); margin-top: 6px; border-radius: 2px; }

.misContent { max-width: 1200px; }

/* ---------- flash ---------- */

.misFlash {
	padding: 12px 16px;
	border-radius: var(--mis-radius);
	margin-bottom: 18px;
	background: #fff3cd;
	border: 1px solid #ffe08a;
	color: #7a5c00;
}

.misFlash--ok { background: #e3f5e9; border-color: #b7e2c5; color: #1d6b3c; }

/* ---------- karty / bloky ---------- */

.misCard {
	background: #fff;
	border: 1px solid var(--mis-border);
	border-radius: var(--mis-radius);
	padding: 18px 20px;
	margin-bottom: 18px;
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.04);
}

.misCard h2 { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.misCard h2 a { font-size: 12.5px; font-weight: 400; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.misCard h2 small { text-transform: none; letter-spacing: 0; }

.misGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

.misStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }

.misStat {
	background: #fff;
	border: 1px solid var(--mis-border);
	border-radius: var(--mis-radius);
	padding: 14px 16px;
}

.misStat__value { font-size: 24px; font-weight: 800; }
.misStat__label { color: var(--mis-muted); font-size: 12.5px; }
.misStat--warn .misStat__value { color: var(--mis-warn); }
.misStat--danger .misStat__value { color: var(--mis-danger); }
.misStat--ok .misStat__value { color: var(--mis-ok); }

/* ---------- tabulky ---------- */

.misTable { width: 100%; border-collapse: collapse; background: #fff; }

.misTable th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--mis-muted);
	padding: 9px 10px;
	border-bottom: 2px solid var(--mis-border);
	white-space: nowrap;
}

.misTable td { padding: 9px 10px; border-bottom: 1px solid var(--mis-border); vertical-align: middle; }
.misTable tr:hover td { background: #f8fafc; }
.misTable .right { text-align: right; }
.misTable .nowrap { white-space: nowrap; }

/* ---------- badges ---------- */

.misBadge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.misBadge--ok { background: #e3f5e9; color: #1d6b3c; }
.misBadge--warn { background: #fff3cd; color: #7a5c00; }
.misBadge--danger { background: #fde3e3; color: #a11515; }
.misBadge--muted { background: #eceff3; color: #5a6472; }
.misBadge--info { background: #e2eefc; color: #1c5296; }

/* ---------- formuláře ---------- */

.misField { margin-bottom: 14px; }

.misField label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 4px; color: #3c4653; }

.misField input[type="text"],
.misField input[type="password"],
.misField input[type="date"],
.misField input[type="email"],
.misField select,
.misField textarea,
.misTable input[type="text"],
.misTable select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--mis-border);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--mis-text);
}

.misField input:focus, .misField select:focus, .misField textarea:focus,
.misTable input:focus, .misTable select:focus {
	outline: none;
	border-color: var(--mis-accent);
	box-shadow: 0 0 0 3px rgba(231, 26, 18, 0.1);
}

.misField textarea { min-height: 90px; resize: vertical; }

.misFormGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.misFormGrid .misField--full { grid-column: 1 / -1; }

.misCheck { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.misCheck input { width: 17px; height: 17px; }
.misCheck label { font-weight: 600; font-size: 13px; }

/* ---------- tlačítka ---------- */

.misBtn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid var(--mis-border);
	background: #fff;
	color: var(--mis-text);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: background 0.12s, border-color 0.12s;
}

.misBtn:hover { background: #f0f3f7; text-decoration: none; }

.misBtn--primary { background: var(--mis-accent); border-color: var(--mis-accent); color: #fff; }
.misBtn--primary:hover { background: var(--mis-accent-dark); }

.misBtn--ok { background: var(--mis-ok); border-color: var(--mis-ok); color: #fff; }
.misBtn--ok:hover { background: #23824a; }

.misBtn--danger { color: var(--mis-danger); border-color: #f0c4c4; }
.misBtn--danger:hover { background: #fde3e3; }

.misBtn--small { padding: 4px 10px; font-size: 12.5px; }
.misBtn--block { width: 100%; }

.misToolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.misToolbar .spacer { flex: 1; }
.misToolbar input[type="text"], .misToolbar select {
	padding: 8px 10px;
	border: 1px solid var(--mis-border);
	border-radius: 6px;
	font-size: 13.5px;
	font-family: inherit;
	background: #fff;
}

/* ---------- přístupové údaje ---------- */

.misCredGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.misCred { border: 1px solid var(--mis-border); border-radius: var(--mis-radius); padding: 12px 14px; background: #fbfcfe; }

.misCred__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.misCred__remove { margin-left: auto; color: var(--mis-danger); font-size: 16px; text-decoration: none; }

.misCred__field {
	position: relative;
	border: 1px solid var(--mis-border);
	border-radius: 6px;
	background: #fff;
	padding: 6px 34px 6px 10px;
	margin-bottom: 6px;
}

.misCred__label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--mis-muted); }
.misCred__value { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; white-space: pre-wrap; }

.misCred__copy {
	position: absolute;
	top: 6px;
	right: 6px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 15px;
	color: var(--mis-muted);
	padding: 2px 4px;
}

.misCred__copy:hover { color: var(--mis-accent); }

.misPositionsManage { margin-top: 12px; font-size: 13px; }
.misPositionsManage summary { cursor: pointer; color: var(--mis-muted); }

/* ---------- login ---------- */

.misBody--login { align-items: center; justify-content: center; background: var(--mis-sidebar); }

.misLoginBox {
	width: 360px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 12px;
	padding: 32px 30px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.misLogo--login { color: var(--mis-text); padding: 0; font-size: 26px; text-align: center; }
.misLoginBox__subtitle { text-align: center; color: var(--mis-muted); margin: 4px 0 22px; }
.misLoginBox__note { font-size: 12px; color: var(--mis-muted); margin-top: 16px; text-align: center; }

/* ---------- souhrny faktury ---------- */

.misTotals { text-align: right; margin-top: 14px; }
.misTotals .big { font-size: 19px; font-weight: 800; }
.misTotals small { color: var(--mis-muted); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
	.misBody { flex-direction: column; }
	.misSidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.misLogo { padding: 12px 16px; }
	.misNav { display: flex; flex-wrap: wrap; padding: 0; }
	.misNav__item { border-left: none; border-bottom: 3px solid transparent; padding: 10px 12px; }
	.misNav__item.is-active { border-bottom-color: var(--mis-accent); }
	.misSidebar__footer { margin-left: auto; border-top: none; display: flex; gap: 12px; align-items: center; }
	.misUser__name { margin-bottom: 0; }
	.misMain { padding: 16px; }
	.misTable { display: block; overflow-x: auto; }
}