/* ===== Lhůtník 2 – Hyper-modern UI ===== */
:root{
  /* světlé téma – výchozí */
  --bg-1: #f6f7fb;
  --bg-2: #eef1f7;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: rgba(255,255,255,0.9);
  --text: #1b1f2a;
  --muted: #5d6574;
  --border: rgba(20,23,28,0.08);
  --accent: #7c4dff;        /* fialová */
  --accent-2: #00e0b8;      /* tyrkys */
  --danger: #ff4d6d;
  --success: #22c55e;
  --warning: #f59e0b;
  --shadow: 0 10px 30px rgba(24, 28, 39, .08);
}

html[data-bs-theme="dark"]{
  --bg-1: #0f1115;
  --bg-2: #0b0d12;
  --surface: rgba(20,23,28,0.5);
  --surface-strong: rgba(27,31,42,0.72);
  --text: #e9ecf1;
  --muted: #b9c1cf;
  --border: rgba(255,255,255,0.12);
  --shadow: 0 12px 32px rgba(0,0,0,.5);
}

/* ===== Globální pozadí s animovaným gradientem ===== */
body{
  background: radial-gradient(1000px 800px at 10% 10%, var(--bg-2), transparent 60%),
              radial-gradient(1200px 900px at 90% 20%, rgba(124,77,255,.07), transparent 60%),
              radial-gradient(1200px 900px at 10% 90%, rgba(0,224,184,.08), transparent 60%),
              var(--bg-1);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* jemná animace plochy */
@media (prefers-reduced-motion: no-preference){
  body { animation: bgFloat 24s ease-in-out infinite; }
}
@keyframes bgFloat{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0; }
  50%{ background-position: 20px -30px, -40px 25px, 30px 40px, 0 0; }
  100%{ background-position: 0 0, 0 0, 0 0, 0 0; }
}

/* ===== Navbar (sklo + čitelnost) ===== */
.navbar{
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient( to bottom,
    rgba(255,255,255,0.78),
    rgba(255,255,255,0.66)
  ) !important;
  border-bottom: 1px solid var(--border);
}
html[data-bs-theme="dark"] .navbar{
  background: linear-gradient( to bottom,
    rgba(20,23,28,0.70),
    rgba(20,23,28,0.55)
  ) !important;
}
.navbar .navbar-brand{
  font-weight: 800;
  letter-spacing:.3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navbar .nav-link, .navbar .dropdown-item { color: var(--text) !important; }
.navbar .nav-link:hover, .navbar .dropdown-item:hover{ opacity:.85; }

/* ===== Karty (glassmorphism) ===== */
.card{
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow);
  overflow: clip;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(20,23,28,.16);
  border-color: rgba(124,77,255,.25);
}
.card-header{
  background: linear-gradient(180deg, var(--surface-strong), transparent) !important;
  border-bottom: 1px solid var(--border) !important;
}
.card-title{ margin:0; }

/* ===== Tlačítka – neon akcent ===== */
.btn{
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  box-shadow: 0 6px 18px rgba(124,77,255,.35);
}
.btn-primary:hover{ opacity:.95; }

.btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-secondary,
.btn-outline-info{
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover{
  background: rgba(124,77,255,.08) !important;
  border-color: rgba(124,77,255,.35) !important;
}

/* plusko u „Přidat záznam“ atp. */
.btn-icon{
  display:inline-flex; align-items:center; gap:.5rem;
}

/* ===== Tabulky ===== */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
}
.table thead th{
  background: linear-gradient(180deg, rgba(124,77,255,.10), transparent) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky; top:0; z-index:2;
}
html[data-bs-theme="dark"] .table thead th{
  background: linear-gradient(180deg, rgba(124,77,255,.22), rgba(0,0,0,.05)) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color: rgba(0,0,0,.025);
}
html[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color: rgba(255,255,255,.035);
}
.table-hover>tbody>tr:hover>*{
  background: linear-gradient(90deg, rgba(124,77,255,.08), transparent);
}

/* Archivované řádky decentně zesvětlit/ztmavit */
tr.is-archived, .is-archived{
  opacity:.6; filter: grayscale(.2);
}

/* Badge */
.badge{
  border-radius: 999px;
  padding:.45rem .7rem;
  font-weight:600;
}
.badge.bg-success{ background: linear-gradient(135deg, #22c55e, #00e09a) !important; }
.badge.bg-danger{ background: linear-gradient(135deg, #ff4d6d, #ff7aa2) !important; }

/* List-group uvnitř karet */
.list-group-item{
  background: transparent;
  border-color: var(--border);
}

/* Form prvky – výraznější focus ring */
.form-control, .form-select, .form-check-input{
  border-radius: 12px !important;
  border-color: var(--border);
  background: rgba(255,255,255,.7);
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select{
  background: rgba(27,31,42,.72);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(124,77,255,.45);
  box-shadow: 0 0 0 .25rem rgba(124,77,255,.20);
}

/* Odkazy v seznamech – decentní underline on hover */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Utility */
.text-muted{ color: var(--muted) !important; }
.text-gradient{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.glow-accent{ box-shadow: 0 0 0 .2rem rgba(124,77,255,.18); }

/* Karty v mřížce – větší „air“ */
.container .row.g-4 > [class*="col-"]{ display:flex; }
.card.h-100{ width:100%; }

/* Footer sladit s tématem */
footer, .app-footer{
  background: var(--surface-strong);
  border-top: 1px solid var(--border);
}

/* Tooltipy – čitelnější */
.tooltip-inner{ backdrop-filter: blur(6px); }

/* Malé animované highlighty */
@keyframes pulseBorder {
  0%{ box-shadow: 0 0 0 0 rgba(124,77,255,.35); }
  70%{ box-shadow: 0 0 0 10px rgba(124,77,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(124,77,255,0); }
}
.pulse-accent{ animation: pulseBorder 2.6s ease-out infinite; }

/* Zlepšení pro mobil */
@media (max-width: 575.98px){
  .navbar .btn, .navbar .nav-link{ padding:.35rem .6rem; }
  .card{ border-radius: 14px !important; }
}
.btn{ position: relative; overflow: hidden; }
.btn .btn-ripple{
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.55);
  animation: ripple .6s linear; pointer-events:none; mix-blend-mode: screen;
}
@keyframes ripple{
  to{ transform: scale(3); opacity:0; }
}
/* ---- Action buttons visibility/flex ---- */
.action-buttons{
  display:flex; align-items:center; gap:.4rem; flex-wrap: wrap;
}
.btn .fa, .btn .fas, .btn .far, .btn .fal, .btn .fab{
  color: currentColor !important;
  margin-right: .35rem;
}
.btn-sm{ padding:.35rem .55rem; }
.list-group-item .btn{ white-space: nowrap; }
/* --- Action buttons: menší a uhlazené ikony --- */
.action-buttons { gap: .35rem; }

.action-buttons .btn.btn-sm{
  padding: .32rem .5rem;
  line-height: 1.15;
  border-radius: 10px !important;
}

/* univerzálně pro FA6 i starší syntaxi */
.action-buttons .btn i.fa,
.action-buttons .btn i.fas,
.action-buttons .btn i.far,
.action-buttons .btn i.fal,
.action-buttons .btn i.fab,
.action-buttons .btn i.fa-solid,
.action-buttons .btn i.fa-regular,
.action-buttons .btn i.fa-light {
  font-size: .9em;        /* menší ikona */
  margin-right: .35rem;   /* menší mezera před textem */
  vertical-align: -1px;   /* vizuální srovnání s textem */
  opacity: .95;
}

/* když budeš chtít jen ikonu bez textu */
.btn-icon-only { padding: .34rem .42rem; }
.btn-icon-only i { margin-right: 0 !important; }

/* na XS schovej text, ponech ikonu (volitelné) */
@media (max-width: 480px){
  .action-buttons .btn span.lbl { display: none; }
  .action-buttons .btn i { margin-right: 0 !important; }
}

.action-buttons .btn-outline-warning,
.action-buttons .btn-outline-danger,
.action-buttons .btn-outline-success{
  border-color: rgba(124,77,255,.28) !important;
}
.action-buttons .btn-outline-warning:hover,
.action-buttons .btn-outline-danger:hover,
.action-buttons .btn-outline-success:hover{
  background: rgba(124,77,255,.10) !important;
}

/* === COMPACT ACTION BUTTONS (jen v akčních blocích) === */
.action-buttons { gap: .3rem; font-size: .92rem; }

.action-buttons .btn.btn-sm,
.action-buttons .btn-compact {
  /* výrazně menší než defaultní .btn-sm */
  font-size: .78rem;       /* menší text tlačítka */
  padding: .18rem .42rem;  /* užší vnitřní odsazení */
  line-height: 1.05;       /* kompaktnější výška řádku */
  border-radius: .35rem;   /* méně “nafouknuté” rohy */
  letter-spacing: .01em;
}

.action-buttons .btn-compact i,
.action-buttons .btn.btn-sm i {
  font-size: .85em;        /* menší ikona vůči textu */
  margin-right: .28rem;    /* decentnější mezera */
  vertical-align: -1px;    /* optické zarovnání s textem */
}

/* na malých displejích ještě o chlup menší */
@media (max-width: 480px) {
  .action-buttons .btn.btn-sm,
  .action-buttons .btn-compact {
    font-size: .74rem;
    padding: .16rem .36rem;
  }
}
/* ŠIRŠÍ karty a čitelnější položky v kartě */
.card .list-group-item{
  display:flex; align-items:center; gap:.75rem;
}
.card .list-group-item .item-title{
  min-width:0; flex:1 1 auto; /* aby fungoval text-truncate */
}
.card .list-group-item .item-title a{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Akční tlačítka: VŽDY vedle sebe, bez zalomení */
.action-buttons{
  display:flex; align-items:center; gap:.35rem;
  flex-wrap:nowrap; white-space:nowrap; flex:0 0 auto;
}
.action-buttons .btn.btn-sm,
.action-buttons .btn-compact{
  font-size:.78rem; padding:.18rem .42rem; line-height:1.05; border-radius:.35rem;
}
.action-buttons .btn i{ font-size:.85em; margin-right:.28rem; vertical-align:-1px; }

/* Na opravdu úzkých místech povol automatický horizontální scroll,
   místo ošklivého zalomení tlačítek pod sebe */
.action-buttons{ overflow-x:auto; }
/* ==== Decentní pozadí pro sekci s kartami oblastí ==== */
.areas-bg{
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,.02));
  /* jemný okraj */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* jemný puntíkovaný pattern, velmi decentní */
.areas-bg::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(rgba(99,102,241,.12) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .32;
}

/* karty nad tím pozadím – lehce průsvitné, moderní */
.areas-bg .card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(2px);
}

/* světlý header karty ztlumíme, aby nerušil pattern */
.areas-bg .card-header{
  background-color: rgba(255,255,255,.85) !important;
  border-bottom-color: rgba(0,0,0,.06);
}

/* --- Tmavý režim (Bootstrap 5 data theme) --- */
[data-bs-theme="dark"] .areas-bg{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .areas-bg::before{
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px);
  opacity: .22;
}
[data-bs-theme="dark"] .areas-bg .card{
  background: rgba(16,17,20,.82);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] .areas-bg .card-header{
  background-color: rgba(16,17,20,.78) !important;
  border-bottom-color: rgba(255,255,255,.07);
}

/* Pokud používáš jiný přepínač tmavého režimu, můžeš přidat ekvivalentní selektory:
   .dark, .theme-dark, body.dark apod. */
/* .dark .areas-bg { ... } */
/* === PANEL PRO SEZNAM TABULEK === */
.tables-panel{
  position: relative;
  border-radius: 14px;
  padding: .75rem;
  background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,.02));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

.tables-panel__header{
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .1px;
  padding: .5rem .75rem;
  margin: -.25rem -.25rem .5rem;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.05);
}

.tables-panel__list .list-group-item{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.06);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.tables-panel__list .list-group-item:hover{
  background: rgba(255,255,255,.98);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* zarovnání obsahu položky (název + tlačítka) */
.tables-panel__list .list-group-item{
  display:flex; align-items:center; gap:.75rem;
}
.tables-panel .item-title{ min-width:0; flex:1 1 auto; }
.tables-panel .item-title a{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* akční tlačítka kompaktně vedle sebe */
.tables-panel .action-buttons{
  display:flex; align-items:center; gap:.35rem;
  flex-wrap:nowrap; white-space:nowrap; overflow-x:auto;
}
.tables-panel .action-buttons .btn.btn-sm,
.tables-panel .action-buttons .btn-compact{
  font-size:.78rem; padding:.18rem .42rem; line-height:1.05; border-radius:.35rem;
}
.tables-panel .action-buttons .btn i{ font-size:.85em; margin-right:.28rem; vertical-align:-1px; }

/* --- Tmavý režim --- */
[data-bs-theme="dark"] .tables-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
[data-bs-theme="dark"] .tables-panel__header{
  background: rgba(16,17,20,.82);
  border-color: rgba(255,255,255,.09);
}
[data-bs-theme="dark"] .tables-panel__list .list-group-item{
  background: rgba(16,17,20,.78);
  border-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .tables-panel__list .list-group-item:hover{
  background: rgba(16,17,20,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
}
/* ===== VYLEPŠENÍ KARET OBLASTÍ ===== */
.area-card{
  border-radius: 16px;
  border: 1px solid rgba(16,24,40,.06);
  background: linear-gradient(180deg, rgba(248,250,255,.92), rgba(243,246,255,.88));
  box-shadow: 0 10px 28px rgba(16,24,40,.06);
  overflow: hidden;
  position: relative;
}

/* jemný akcentový proužek vlevo */
.area-card::before{
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(99,102,241,.65), rgba(56,189,248,.65));
}

/* záhlaví karty – méně ostré než čistě bílé */
.area-card__header{
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border-bottom: 1px solid rgba(16,24,40,.06);
  padding-top: .75rem; padding-bottom: .75rem;
}

/* jemné „sklovité“ doladění těla karty */
.area-card .card-body{
  background: radial-gradient(150% 150% at 0% 0%,
              rgba(99,102,241,.06) 0%,
              rgba(99,102,241,0) 45%),
              radial-gradient(140% 140% at 100% 0%,
              rgba(56,189,248,.06) 0%,
              rgba(56,189,248,0) 40%),
              transparent;
}

/* aby chipy a listy nevypadaly jak „plovoucí na bílé“ */
.area-card .list-group-item{
  background-color: rgba(255,255,255,.92);
  border-color: rgba(16,24,40,.08);
}
.area-card .list-group-item:hover{
  background-color: rgba(255,255,255,.98);
}

/* tlačítka u názvu oblasti trochu přisadit, ať nejsou nalepená */
.area-card__header .btn{ margin-left: .25rem; }

/* ===== DARK MODE ===== */
[data-bs-theme="dark"] .area-card{
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,22,28,.92), rgba(18,20,26,.88));
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .area-card::before{
  background: linear-gradient(180deg, rgba(129,140,248,.7), rgba(56,189,248,.7));
}
[data-bs-theme="dark"] .area-card__header{
  background: linear-gradient(180deg, rgba(20,22,28,.92), rgba(20,22,28,.82));
  border-bottom-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .area-card .card-body{
  background: radial-gradient(150% 150% at 0% 0%,
              rgba(129,140,248,.1) 0%,
              rgba(129,140,248,0) 45%),
              radial-gradient(140% 140% at 100% 0%,
              rgba(56,189,248,.1) 0%,
              rgba(56,189,248,0) 40%),
              transparent;
}
[data-bs-theme="dark"] .area-card .list-group-item{
  background-color: rgba(20,22,28,.9);
  border-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .area-card .list-group-item:hover{
  background-color: rgba(22,24,30,.96);
}