:root{
	/* Barvy – odstíny modré a neutrály (zvýrazněné) */
	--fx-bg: #eef2ff;           /* světle modré pozadí stránky (víc do modra) */
	--fx-surface: #f8fbff;      /* lehce modrá „karta/povrch“ */
	--fx-primary-50:#e6efff;    /* světlejší modrá */
	--fx-primary-100:#d8e4ff;
	--fx-primary-200:#c6d6ff;
	--fx-primary-300:#a8c0ff;
	--fx-primary-400:#86a8ff;
	--fx-primary-500:#5d8aff;
	--fx-primary-600:#3367d6;   /* theme-color (ponecháno) */
	--fx-primary-700:#2b50b8;
	--fx-primary-800:#233e94;
	--fx-primary-900:#1b2f73;
	--fx-text:#0b1b4a;          /* tmavě modrá pro text (ne černá) */
	--fx-muted:#394e7a;         /* tlumená modrá pro sekundární text */
	--fx-border:#dbe5ff;        /* okraje lehce do modra */
	--fx-focus:#1a73e8;         /* focus ring */
}

/* Typografie – systémový stack pro čitelnost a výkon */
html{font-size:16px}
body{
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color:var(--fx-text);
background:var(--fx-bg);
	line-height:1.6;
	text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:#0b1b4a}
h1{font-size:clamp(1.75rem,2.4vw,2.25rem)}
h2{font-size:clamp(1.5rem,2vw,2rem)}
h3{font-size:clamp(1.25rem,1.6vw,1.5rem)}
h4{font-size:1.125rem}
h5{font-size:1rem}
h6{font-size:.95rem;color:var(--fx-muted)}

/* Navigace – jemný modrý gradient + modré okraje */
.navbar{
	border-bottom:1px solid var(--fx-border);
	background:linear-gradient(180deg,var(--fx-primary-50) 0%, var(--fx-primary-100) 100%);
}
.navbar .navbar-brand{color:var(--fx-primary-800)!important}
.navbar .nav-link{color:#0b1b4a!important}
.navbar .nav-link:hover,.navbar .nav-link:focus{color:var(--fx-primary-700)!important}
.navbar .dropdown-menu{
	border-radius:1rem;
	border:1px solid var(--fx-border);
	box-shadow:0 10px 30px rgba(23,31,56,.08)
}

/* Tlačítka */
.btn-primary{background:var(--fx-primary-600);border-color:var(--fx-primary-600)}
.btn-primary:hover{background:var(--fx-primary-700);border-color:var(--fx-primary-700)}
.btn-outline-secondary{color:var(--fx-primary-800);border-color:var(--fx-primary-200)}
.btn-outline-secondary:hover{background:var(--fx-primary-50);border-color:var(--fx-primary-300)}

/* Karty/boxy – světle modrý „povrch“ */
.card{
	background:var(--fx-surface);
	border:1px solid var(--fx-border);
	border-radius:1rem;
	box-shadow:0 6px 24px rgba(15,23,42,.05)
}

/* Taby v sidebaru */
.nav-tabs .nav-link{border:0;color:var(--fx-muted)}
.nav-tabs .nav-link.active{color:#0b1b4a;background:var(--fx-primary-50);border-radius:.75rem}
.nav-tabs{gap:.25rem}

/* Oznámení */
.alert{border-radius:.75rem}

/* Patička – světle modrá */
.footer{background:var(--fx-primary-50)}
.footer a{color:var(--fx-primary-700)}
.footer a:hover{color:var(--fx-primary-800)}

/* Formuláře */
.form-control{border-radius:.75rem;border-color:var(--fx-border)}
.form-control:focus{box-shadow:0 0 0 .25rem rgba(26,115,232,.25);border-color:var(--fx-focus)}

/* Odkazy */
a{transition:color .15s ease, background-color .15s ease}

/* Focus visibility pro přístupnost */
:focus-visible{outline:3px solid var(--fx-focus);outline-offset:2px}

/* Preferuje-li uživatel méně animací */
@media (prefers-reduced-motion: reduce){
	*{animation: none !important; transition: none !important}
}

/* Utility */
.bg-surface{background:var(--fx-surface)}
.text-muted{color:var(--fx-muted)!important}

/* Volitelně – modrý gradientový header (pokud někdy použijete .hero) */
.hero{background:linear-gradient(135deg,var(--fx-primary-600),var(--fx-primary-800));color:white;border-radius:1.25rem}
.hero .btn{background:rgba(255,255,255,.15);border:0}
.hero .btn:hover{background:rgba(255,255,255,.25)}

.filebox-overlay {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: none;
	align-items: center;
	justify-content: center;
}

.filebox-overlay.is-open {
	display: flex;
}

.filebox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.filebox-dialog {
	position: relative;
	z-index: 1;
	background: #fff;
	color: #000;
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	margin: 1rem;
	border-radius: .75rem;
	padding: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.filebox-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .5rem;
}

.filebox-list-container {
	flex: 1 1 auto;
	min-height: 120px;
	max-height: 40vh;
	overflow: auto;
	border-radius: .5rem;
	border: 1px solid #dee2e6;
	padding: .25rem .5rem;
}

.filebox-item {
	padding: .15rem .5rem;
	border-radius: .25rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	cursor: default;
}

.filebox-item-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.filebox-item-meta {
	font-size: .8rem;
	color: #6c757d;
	flex-shrink: 0;
}

.filebox-item.selected {
	background-color: rgba(13, 110, 253, .15);
	outline: 2px solid rgba(13, 110, 253, .5);
}

.filebox-item-dir::before {
	content: "📁 ";
}

.filebox-item-up::before {
	content: "⬆️ ";
}

.filebox-item-file::before {
	content: "📄 ";
}