/* === Fintillent – společné CSS === */
:root{
  --bg:#f5f5f7;
  --panel:#ffffff;
  --muted:#8e8e93;
  --text:#222;
  --border:#e5e5ea;
  --primary:#FAD200;
  --primary-ink:#7a6500;
  --secondary:#FFB464;
  --secondary-ink:#6c3b00;
}

*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; height:100%; }
body{ overflow-x:hidden;
  margin:0;
  font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
body.no-scroll{ overflow:hidden; }

/* Horní lišta */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:56px; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--border);
  z-index:1000;
}
.logo{ height:28px; width:auto; object-fit:contain; margin-right:8px; }
.brand{ font-weight:700; letter-spacing:0.3px; }
.topbar-left{ display:flex; align-items:center; gap:8px; }
.topbar-right{ display:flex; align-items:center; gap:8px; }
.logo-btn{
  border:0; background:transparent; padding:0; display:flex; align-items:center; cursor:pointer;
}

/* Uživatelské ovládání vpravo */
.user-controls{ display:flex; align-items:center; gap:10px; }
.user-email{
  font-weight:600; white-space:nowrap;
  padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:#fff;
}
.control-select{
  height:36px; border:1px solid var(--border);
  background:#fff; color:var(--text);
  padding:0 10px; border-radius:10px; outline:none; max-width:190px;
}
.control-select:focus{ border-color:#bbb; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Rozvržení */
.layout{ display:flex; margin-top:56px; }
.sidebar{
  position:fixed; top:56px; left:0; bottom:0; width:240px;
  background:#fff; border-right:1px solid var(--border); padding:12px;
  overflow:auto; z-index:900;
}
.content{
  margin-left:240px; width:100%;
  min-height:calc(100vh - 56px); padding-bottom:48px;
}

/* Subbar */
.subbar{
  position:sticky; top:56px; z-index:800;
  background:rgba(255,255,255,0.85); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
.page-title{ font-size:18px; margin:0; }
.subbar-right{ display:flex; gap:8px; }

/* Navigace */
.nav{ display:flex; flex-direction:column; gap:4px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; text-decoration:none; color:inherit;
}
.nav-item:hover{ background:var(--primary); }
.nav-item.active{ background:var(--secondary); font-weight:600; }
.icon{ width:18px; height:18px; display:inline-block; }

/* Tlačítka */
.icon-btn{
  background:#fff; border:1px solid var(--border);
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; color:#000;
  cursor:pointer;
}
.icon-btn:hover{ background:#fafafa; }

.btn{
  border:1px solid var(--border); background:#fff; color:#000;
  padding:8px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.btn.primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.btn.secondary{ background:var(--secondary); border-color:var(--secondary); color:var(--secondary-ink); }
.btn.ghost{ background:#fff; }
.btn.danger{ border-color:#fecaca; color:#b91c1c; }
.btn.danger:hover{ background:#fff1f1; }
.btn:hover{ filter:brightness(0.98); }



/* === UI primitives (cards, blocks, modals) === */
/* Section header inside a block (title + actions) */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.section-head.mt10{ margin-top:10px; }
.section-head.mt14{ margin-top:14px; }
.section-head + .entries{ margin-top:8px; }

/* Modal layout for <dialog> */
dialog{
  border:1px solid var(--border);
  border-radius:16px;
  padding:0;
  background:var(--panel);
  color:var(--text);
  max-width:min(920px, 92vw);
}
dialog::backdrop{ background: rgba(0,0,0,.35); }

.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.modal-body{ padding:14px; max-height:min(70vh, 640px); overflow:auto; }
.modal-foot{
  padding:12px 14px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
}


/* Panely */
.content{ padding: 16px; }
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:16px; margin:16px 0; overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.panel-header h2{ margin:0; font-size:16px; }
.panel-actions{ display:flex; align-items:center; gap:6px; }
.panel-body{ overflow-x:hidden; padding:14px; }
.panel.collapsed .panel-body{ overflow-x:hidden; display:none; }

/* Formuláře */
.grid-form{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field-row{ flex-direction:row; align-items:center; gap:8px; }
input, select{
  width:100%; border:1px solid var(--border); background:#fff; color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
}
input:focus, select:focus{ border-color:#bbb; box-shadow:0 0 0 3px rgba(0,0,0,.04); }

/* Tabulka */
.table{ width:100%; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.table-row{ display:grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; border-top:1px solid var(--border); }
.table-row:first-child{ border-top:none; }
.table-head{ background:var(--bg); font-weight:600; }
.table-row > div{ padding:10px 12px; display:flex; align-items:center; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* Grafy */
.chart-card{min-width:0;}
.chart-card canvas{display:block; width:100%; max-width:100%; height:300px;}

.charts{ min-width:0; display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.chart-card{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px;
}
.legend{ display:flex; gap:8px; flex-wrap:wrap; }
.legend-item{
  display:flex; align-items:center; gap:8px; border:1px solid var(--border);
  background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer;
}
.legend-item.off{ opacity:.5; }
.legend-item .swatch{ width:14px; height:14px; border-radius:3px; display:inline-block; border:1px solid #0001; }

/* Patička */
.footer{ text-align:center; color:var(--muted); padding:20px 0; }

/* Mobilní a malé obrazovky */
@media (max-width: 980px){
  .sidebar{
    transform: translateX(-100%); transition: transform .2s ease;
    position:fixed; width:260px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }
  .sidebar.open{ transform: translateX(0); }
  .content{ margin-left:0; }
  .grid-form{ grid-template-columns: 1fr 1fr; }
  .charts{ min-width:0; grid-template-columns: 1fr; }
  .table-row{ grid-template-columns: 1.5fr 1fr 0.8fr 1fr; }
  .user-email{ display:none; } /* šetří místo na menších zařízeních */
}

@media (max-width: 560px){
  .grid-form{ grid-template-columns: 1fr; }
}
/* === Collapse button matches icon-btn style and rotates chevron === */
.collapse-btn .icon{ transition: transform .18s ease; }
.collapse-btn[aria-expanded="false"] .icon{ transform: rotate(180deg); }


/* Skrýt název značky na mobilech */
@media (max-width: 980px){
  .brand{ display:none; }
}

/* --- demo utilities (added) --- */
.muted{ color: var(--text-muted); }
.small{ font-size: 12px; }
.container{ max-width: 980px; margin: 0 auto; padding: 18px; padding-top: calc(18px + 56px); }
.card{ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 10px 25px rgba(0,0,0,.06); }


/* === User dropdown menu === */
.user-menu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width:180px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding:6px;
  z-index:3000; /* nad sidebar (900) i subbar (800/900) */
}
.user-controls{ position:relative; }
.user-dd{ position:relative; display:inline-flex; align-items:center; }
.user-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  padding:6px 12px;
  font-weight:600;
}
.user-btn:hover{ filter:brightness(0.98); }

.user-btn .chev{ display:none; } /* už nechceme šipku vedle jména */
.user-btn .user-email{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-weight:inherit;
}
.menu-divider{ height:1px; background:var(--border); margin:6px 4px; }
.menu-label{ padding:8px 10px; color:var(--muted); font-size:12px; }
.menu-item{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  color:var(--text);
  font: inherit;
  display:block;
  text-decoration:none;
}
.menu-item:hover{ background: rgba(0,0,0,.05); }
.menu-item.danger{ color:#ef4444; }


/* === Pills & helpers === */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.03);
  font-size:12px;
  color:var(--text);
}
.pill.ok{ border-color:#c7f0d1; background:#eaffef; }
.pill.danger{ border-color:#ffd0d0; background:#fff1f1; }
.pill.warn{ border-color:#ffe59b; background:#fff7d1; }

.error{
  color:#b00020;
  background:#fff1f1;
  border:1px solid #ffd0d0;
  padding:10px 12px;
  border-radius:12px;
}

.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:16px; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:12px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.table thead th{ background: rgba(0,0,0,.03); font-weight:700; text-align:left; }