@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
   Rozpočet Bryksovi – designový systém
   Značka = indigo. Zelená a červená jsou vyhrazené penězům
   (příjem / výdaj), proto nejsou v brandu.
   ===================================================== */

:root {
    --brand-900: #1e1b4b;
    --brand-800: #312e81;
    --brand-700: #3730a3;
    --brand-600: #4338ca;
    --brand-500: #6366f1;
    --brand-400: #818cf8;
    --brand-300: #a5b4fc;
    --brand-200: #c7d2fe;
    --brand-100: #e0e7ff;
    --brand-50:  #eef2ff;

    --gray-900: #0f172a;
    --gray-800: #1e293b;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-500: #64748b;
    --gray-400: #94a3b8;
    --gray-300: #cbd5e1;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --gray-50:  #f8fafc;
    --white: #ffffff;

    /* Peníze */
    --good-700: #047857; --good-600: #059669; --good-100: #d1fae5; --good-50: #ecfdf5;
    --bad-700:  #b91c1c; --bad-600:  #dc2626; --bad-100:  #fee2e2; --bad-50:  #fef2f2;
    --warn-700: #b45309; --warn-600: #d97706; --warn-100: #fef3c7; --warn-50: #fffbeb;
    --info-600: #2563eb; --info-100: #dbeafe;
    --fix-600:  #7c3aed; --fix-100:  #ede9fe;

    --shadow-sm: 0 1px 4px rgba(15,23,42,.06);
    --shadow:    0 4px 16px rgba(15,23,42,.08);
    --shadow-lg: 0 8px 32px rgba(15,23,42,.14);
    --shadow-brand: 0 4px 16px rgba(67,56,202,.25);
    --radius: 10px; --radius-lg: 16px; --radius-xl: 24px;
    --font: 'Outfit', system-ui, -apple-system, sans-serif;
    --sidebar-w: 248px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: var(--font); color: var(--gray-900); background: var(--gray-50); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--brand-600); }

/* NAVBAR */
.navbar { background: var(--brand-900); padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; height: 64px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(15,23,42,.25); }
.navbar-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--white); }
.navbar-logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-500), var(--brand-400)); display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: var(--white); letter-spacing: -.02em; flex: none; }
.navbar-brand-text { font-size: 1.05rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.navbar-brand-text span { display: block; font-size: .72rem; font-weight: 500; color: var(--brand-300); letter-spacing: .08em; text-transform: uppercase; }
.navbar-spacer { flex: 1; }
.navbar-user { display: flex; align-items: center; gap: .7rem; font-size: .875rem; }
.navbar-user strong { color: var(--white); font-weight: 600; }
.navbar-version { color: rgba(255,255,255,.35); font-size: .75rem; }
.navbar-toggle { display: none; background: none; border: none; color: #fff; cursor: pointer; padding: .35rem; }

/* LAYOUT */
.layout { display: flex; flex: 1; padding-left: var(--sidebar-w); }
.sidebar { width: var(--sidebar-w); background: var(--white); border-right: 1px solid var(--gray-200); padding: 1.25rem 0; flex-shrink: 0; position: fixed; top: 64px; left: 0; height: calc(100vh - 64px); overflow-y: auto; z-index: 50; }
.sidebar-section { margin-bottom: 1.1rem; }
.sidebar-title { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); padding: 0 1.25rem .35rem; }
.sidebar-nav { list-style: none; }
.sidebar-nav a { display: flex; align-items: center; gap: .6rem; padding: .4rem 1.25rem; color: var(--gray-600); text-decoration: none; font-size: .925rem; font-weight: 500; transition: all .12s; border-left: 3px solid transparent; }
.sidebar-nav a:hover { background: var(--brand-50); color: var(--brand-700); border-left-color: var(--brand-300); }
.sidebar-nav a.active { background: var(--brand-50); color: var(--brand-700); border-left-color: var(--brand-500); font-weight: 600; }
.sidebar-nav .count { margin-left: auto; font-size: .7rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); }
.sidebar-nav .count.warn { background: var(--warn-100); color: var(--warn-700); }
.sidebar-nav .count.bad  { background: var(--bad-100);  color: var(--bad-700); }

/* Navigační ikony – duotone „chip" (jemný čtvereček + maskovaná ikona) */
.nav-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); transition: all .14s ease; }
.nav-ico::before { content: ""; width: 18px; height: 18px; background: var(--brand-600); -webkit-mask: var(--ni) center / 18px 18px no-repeat; mask: var(--ni) center / 18px 18px no-repeat; transition: background .14s ease; }
.sidebar-nav a:hover .nav-ico { background: var(--brand-100); box-shadow: inset 0 0 0 1px var(--brand-300); }
.sidebar-nav a.active .nav-ico { background: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-600); }
.sidebar-nav a.active .nav-ico::before { background: var(--white); }

.content { flex: 1; padding: 1.75rem 2rem 3rem; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--gray-900); }
.page-sub { font-size: .875rem; color: var(--gray-500); margin-top: .15rem; }
.page-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* CARDS */
.card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); overflow: hidden; margin-bottom: 1.25rem; }
.card-header { padding: .9rem 1.35rem; border-bottom: 1px solid var(--gray-100); font-weight: 600; font-size: .975rem; color: var(--gray-800); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--gray-50); }
.card-header .muted { font-weight: 400; font-size: .8rem; color: var(--gray-400); }
.card-header .spacer { flex: 1; }
.card-body { padding: 1.35rem; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: var(--radius); font-family: var(--font); font-size: .9rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: all .15s; line-height: 1.4; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-600); color: var(--white); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-700); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-success { background: var(--good-100); color: var(--good-700); }
.btn-success:hover { background: var(--good-600); color: var(--white); }
.btn-danger { background: var(--bad-100); color: var(--bad-700); }
.btn-danger:hover { background: var(--bad-600); color: var(--white); }
.btn-sm { padding: .3rem .75rem; font-size: .82rem; border-radius: 7px; }
.btn-lg { padding: .8rem 2rem; font-size: 1.02rem; border-radius: var(--radius-lg); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* SEGMENTED CONTROL (přepínač období) */
.seg { display: inline-flex; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 9px; overflow: hidden; }
.seg a { padding: .4rem .85rem; font-size: .85rem; font-weight: 600; color: var(--gray-500); text-decoration: none; transition: all .12s; }
.seg a:hover { color: var(--gray-800); }
.seg a.on { background: var(--brand-600); color: var(--white); }

/* FORMS */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: .875rem; font-weight: 600; color: var(--gray-700); margin-bottom: .4rem; }
.form-control { width: 100%; padding: .6rem .9rem; border: 1.5px solid var(--gray-300); border-radius: var(--radius); font-family: var(--font); font-size: .95rem; color: var(--gray-900); background: var(--white); transition: border-color .15s, box-shadow .15s; outline: none; }
.form-control:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
select.form-control { cursor: pointer; }
.form-control-sm { padding: .32rem .5rem; font-size: .85rem; border-radius: 7px; }
/* Buňka tabulky s částkou – neviditelný input, zvýrazní se až na hover */
.cell { width: 84px; text-align: right; padding: .3rem .45rem; border: 1.5px solid transparent; border-radius: 6px; background: transparent; font-family: var(--font); font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.cell:hover { border-color: var(--gray-200); background: var(--gray-50); }
.cell:focus { outline: none; border-color: var(--brand-500); background: var(--white); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.cell-sm { width: 62px; }
/* Širší buňka pro tabulku příjmů – částky jdou do statisíců, do 62px se nevešly */
.cell-lg { width: 104px; padding: .4rem .55rem; font-size: .92rem; }

/* TABLES */
.table-wrap { overflow-x: auto; }
.table-scroll { max-height: 72vh; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
thead th { background: var(--gray-50); padding: .65rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); border-bottom: 2px solid var(--gray-200); position: sticky; top: 0; z-index: 2; }
tbody td { padding: .6rem 1rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; }
tbody tr:hover { background: var(--brand-50); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-total td { font-weight: 700; background: var(--gray-50); border-top: 2px solid var(--gray-200); color: var(--gray-900); }
.row-group td { background: var(--brand-50); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-700); }
.row-sub td { background: var(--gray-50); font-weight: 600; }
tbody tr.row-group:hover, tbody tr.row-total:hover { background: var(--gray-50); }
.sticky-col { position: sticky; left: 0; background: var(--white); z-index: 1; }
th.sticky-col { background: var(--gray-50); z-index: 3; }

/* ALERTS */
.alert { padding: .85rem 1.1rem; border-radius: var(--radius); font-size: .9rem; margin-bottom: 1rem; display: flex; align-items: flex-start; gap: .6rem; border-left: 4px solid; line-height: 1.5; }
.alert-success { background: var(--good-50);  color: var(--good-700); border-color: var(--good-600); }
.alert-danger  { background: var(--bad-50);   color: var(--bad-700);  border-color: var(--bad-600); }
.alert-warning { background: var(--warn-50);  color: var(--warn-700); border-color: var(--warn-600); }
.alert-info    { background: var(--brand-50); color: var(--brand-700);border-color: var(--brand-500); }
.alert b { color: inherit; }

/* BADGES */
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.badge-brand { background: var(--brand-100); color: var(--brand-700); }
.badge-good  { background: var(--good-100);  color: var(--good-700); }
.badge-bad   { background: var(--bad-100);   color: var(--bad-700); }
.badge-warn  { background: var(--warn-100);  color: var(--warn-700); }
.badge-gray  { background: var(--gray-100);  color: var(--gray-600); }
.badge-fix   { background: var(--fix-100);   color: var(--fix-600); }
.badge-dot { display: inline-flex; align-items: center; gap: .35rem; }
.badge-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }

/* STATS */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-500); }
.stat-card.good::before { background: var(--good-600); }
.stat-card.bad::before  { background: var(--bad-600); }
.stat-card.warn::before { background: var(--warn-600); }
.stat-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); margin-bottom: .4rem; }
.stat-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.stat-value.good { color: var(--good-600); }
.stat-value.bad  { color: var(--bad-600); }
.stat-value.warn { color: var(--warn-600); }
.stat-sub { font-size: .8rem; color: var(--gray-400); margin-top: .3rem; }
.stat-card.accent { background: var(--brand-900); border-color: var(--brand-800); }
.stat-card.accent::before { background: var(--brand-400); }
.stat-card.accent .stat-label { color: var(--brand-300); }
.stat-card.accent .stat-value { color: var(--white); }
.stat-card.accent .stat-sub { color: rgba(255,255,255,.45); }

/* PROGRESS BAR (čerpání plánu) */
.bar { height: 6px; background: var(--gray-100); border-radius: 4px; overflow: hidden; min-width: 60px; flex: 1; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--good-600); }
.bar-row { display: flex; align-items: center; gap: .5rem; }
.bar-pct { font-size: .78rem; color: var(--gray-400); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* LOGIN */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--brand-900); background-image: radial-gradient(circle at 20% 20%, rgba(99,102,241,.35), transparent 45%), radial-gradient(circle at 80% 80%, rgba(129,140,248,.25), transparent 45%); padding: 1.5rem; }
.login-card { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 2.5rem; width: 100%; max-width: 420px; }
.login-logo { text-align: center; margin-bottom: 1.75rem; }
.login-logo .mark { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto .9rem; background: linear-gradient(135deg, var(--brand-600), var(--brand-400)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.35rem; box-shadow: var(--shadow-brand); }
.login-logo h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; color: var(--gray-900); }
.login-logo p { color: var(--gray-500); font-size: .875rem; margin-top: .2rem; }

/* FOOTER */
footer { background: var(--white); border-top: 1px solid var(--gray-200); color: var(--gray-400); text-align: center; padding: 1.1rem; font-size: .8rem; }
body:has(.sidebar) footer { margin-left: var(--sidebar-w); }

/* UTILITY */
.txt-good { color: var(--good-600); }
.txt-bad  { color: var(--bad-600); }
.txt-warn { color: var(--warn-600); }
.txt-muted{ color: var(--gray-500); }
.txt-faint{ color: var(--gray-400); }
.mono { font-variant-numeric: tabular-nums; }
.small { font-size: .8rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.d-flex { display: flex; } .align-center { align-items: center; } .flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
.spacer { flex: 1; }
.w-100 { width: 100%; }
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--gray-400); }
.empty-state b { display: block; color: var(--gray-600); font-size: 1rem; margin-bottom: .35rem; }

/* DROP ZONE (nahrání výpisů) */
.drop { border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; text-align: center; color: var(--gray-500); cursor: pointer; transition: .15s; background: var(--white); display: block; }
.drop:hover, .drop.over { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.drop b { display: block; font-size: 1.02rem; color: var(--gray-800); margin-bottom: .35rem; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .layout { padding-left: 0; }
    body:has(.sidebar) footer { margin-left: 0; }
    .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .navbar-toggle { display: block; }
    .content { padding: 1.25rem 1rem 2.5rem; }
    .navbar-user strong { display: none; }
}