/* ===================================================
   LSPD INTRANET - GLOBAL STYLESHEET
   by gogo / QuantumRP
   =================================================== */

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


/* ===========================
   COLOR & BASE SETTINGS
=========================== */
:root{
  --bg:#0b0d10;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.04);
  --muted:#9aa3b2;
  --text:#eef2ff;
  --brand:#5b7cfa;
  --accent:#00ffd5;
  --danger:#ff4d6d;
  --radius:18px;
  --border:1px solid rgba(255,255,255,.12);
  --shadow:0 20px 50px rgba(0,0,0,.45);

  --topbar-h: 72px;     /* zvol si 64/70/72 – ale všude stejně */
  --sidebar-w: 260px;
  --glass-blur: 12px;
}

*{ box-sizing:border-box }

html,body{ height:100% }

body{
  margin:0;
  display:flex;
  align-items:center;            /* pro LOGIN */
  justify-content:center;        /* pro LOGIN */
  font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1300px 700px at -10% -10%, #0f1624 10%, transparent 60%),
    radial-gradient(1200px 600px at 110% -20%, #100d1f 10%, transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

/* Pouze pro DASHBOARD: zruš login centrování + layout */
body.dashboard-page{
  display: block;        /* ✅ zruší login flex centrování */
  align-items: unset;
  justify-content: unset;
}





/* ===========================
   POLICE LIGHTS FX
=========================== */
.fx{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  filter:blur(50px) saturate(140%); opacity:.35;
}
.fx:before,.fx:after{
  content:""; position:absolute; width:60vw; height:60vw; border-radius:50%;
  transform:translate(-20%,-20%); animation:sweep 9s ease-in-out infinite; mix-blend-mode:screen;
}
.fx:before{ background:radial-gradient(circle, rgba(255,0,54,.65), transparent 55%) }
.fx:after{ background:radial-gradient(circle, rgba(0,140,255,.65), transparent 55%); right:-10%; top:-20%; animation-delay:-4.5s }
@keyframes sweep{ 0%,100%{transform:translate(-15%,-20%)} 50%{transform:translate(10%,5%)} }

/* ===========================
   GLASS UTILITY
=========================== */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(139,92,246,.25);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:var(--shadow);
  border-radius:14px;
}

/* ===========================
   LOGIN LAYOUT
=========================== */
.wrap{ width:min(980px,92%); margin:auto; padding:24px 0 }
.card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:22px; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(139,92,246,.25); backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--shadow); overflow:hidden;
}
@media (max-width:900px){ .card{ grid-template-columns:1fr } }

.hero{ padding:36px 30px 28px }
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  background:linear-gradient(90deg, rgba(138,101,255,.18), rgba(91,124,250,.18));
  border:1px solid rgba(255,255,255,.12); color:#cdd6f4; font-weight:600; letter-spacing:.2px;
}

h1{
  margin:16px 0 8px; font-size:clamp(2rem,5vw,2.8rem);
  background:linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; line-height:1.05;
}
.subtitle{ color:var(--muted); margin:0 0 18px }

.highlight{ display:flex; gap:12px; align-items:center; color:#cfe1ff; margin:10px 0 }
.highlight i{ color:var(--accent) }

.help{
  display:grid; gap:12px; margin-top:18px; background:var(--panel-2);
  border:var(--border); border-radius:12px; padding:14px;
}
.help .row{ display:flex; gap:10px; align-items:flex-start; color:#c9d5ee }
.help i{ color:var(--brand) }

.login{
  padding:36px 30px; border-left:1px solid rgba(255,255,255,.08);
}
@media (max-width:900px){
  .login{ border-left:none; border-top:1px solid rgba(255,255,255,.08) }
}

/* ===========================
   BUTTONS
=========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(114,137,218,.45);
  background:linear-gradient(180deg, rgba(114,137,218,.25), rgba(114,137,218,.18));
  color:#fff; font-weight:700; letter-spacing:.3px; transition:.25s transform,.25s box-shadow,.25s filter;
  cursor:pointer; text-decoration:none;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(114,137,218,.25) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn[disabled]{ opacity:.6; cursor:wait; filter:grayscale(.2) }
.btn small{ font-weight:600; opacity:.9 }

.btn-danger{
  background:linear-gradient(180deg, rgba(255,77,109,.25), rgba(255,77,109,.18));
  border-color:var(--danger);
}

/* ===========================
   LINKS / FOOTER / ETC
=========================== */
.legal{ margin-top:14px; color:#9fb0c8; font-size:.92rem }
.links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px }
.links a{ color:#cfe1ff; text-decoration:none; border-bottom:1px dashed rgba(207,225,255,.35) }
.links a:hover{ color:#fff; border-bottom-color:#fff }

.footer {
  grid-column: 1 / -1;
  margin: 16px 20px 20px;      /* stejné boční odsazení jako karty */
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  color: #b8bcd1;
}

/* Obsah footeru: dvě strany, responsivně zalamovat */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Odkazy ve footeru */
.footer-links a {
  color: #b8bcd1;
  text-decoration: none;
  margin-left: 15px;
  transition: 0.2s;
}

.footer-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 4px #5076fe;
}

.footer-links .sep,
.footer-content .sep {
  margin: 0 10px;
  opacity: .5;
}


/* ===========================
   FORMS (shared)
=========================== */
.sidebar .identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -8px;                              /* jemný „nudge“ nahoru */
  padding: 8px 10px 10px;                        /* menší vnitřní odsazení */
}

.sidebar .identity .avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: 0 0 46px;
}
.sidebar .identity .who {
  transform: translateY(-2px);                   /* zvedne jméno o chloupek */
  line-height: 1.15;
}
.identity-name{ color:#e9edff; font-weight:400 }
.identity-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 2px;     
}
.news.pinned {
  background: linear-gradient(135deg, rgba(80,118,254,0.25), rgba(80,118,254,0.12));
  border: 1px solid rgba(80,118,254,0.45);
  box-shadow: 0 0 8px rgba(80,118,254,0.3);
}

/* Ikona připnutí více výrazná */
.news.pinned i.fa-thumbtack {
  color: #76a0ff;
}

.identity-badge {
  font-size: 0.85em;
  opacity: .85;
  transform: translateY(-1px);  
}
.identity-rank {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  opacity: .8;
  display: block;
  margin-top: 0px;
  letter-spacing: .3px;
}

.identity-rank.badge {
  font-size: .8em;
  opacity: .8;
}


.identity-id{ color:var(--muted); font-size:.9rem; margin-top:2px }

.nice-form{ display:grid; gap:10px; margin-top:6px }
.field{ position:relative; display:block }
.field-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.75; pointer-events:none }

.form .form-control{
  width:100%; padding:12px 14px 12px 42px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.form .form-control::placeholder{ color:#b8c3da; opacity:.9 }
.form .form-control:focus{ border-color:rgba(91,124,250,.65); box-shadow:0 0 0 3px rgba(91,124,250,.18); background:rgba(255,255,255,.07) }
.form input[type="date"].form-control{ padding-left:42px; min-height:46px }
.form .mb-2{ margin-bottom:12px }
.form label{ display:block; margin:0 0 6px; color:#cfe1ff; font-weight:600 }

@media (max-width:520px){
  .identity .avatar{ width:40px; height:40px }
  .form .form-control{ padding-left:40px }
}

/* ===========================
   TOASTS
=========================== */
.toast-wrap{
  position:fixed; top:18px; right:18px; z-index:99999; display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast{
  min-width:300px; max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15); color:var(--text);
  border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.45); backdrop-filter:blur(var(--glass-blur));
  pointer-events:auto; overflow:hidden; animation:toast-in .25s ease-out;
}
.toast-header{ display:flex; align-items:center; gap:10px; padding:10px 12px 6px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:700; letter-spacing:.2px }
.toast-header .icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center }
.toast-body{ padding:10px 12px 12px; color:var(--muted) }
.toast-close{ margin-left:auto; background:transparent; border:0; color:#cfd6e6; font-size:18px; line-height:1; cursor:pointer; transition:.2s }
.toast-close:hover{ color:#fff; transform:scale(1.05) }
.toast-bar{ height:3px; width:100%; background:rgba(255,255,255,.08) }
.toast-bar>span{ display:block; height:100%; width:100%; transform-origin:left; animation:toast-bar 4s linear forwards }

.toast.success .toast-header{ color:#bfffe9 } .toast.success .toast-header .icon{ color:var(--accent) } .toast.success .toast-bar>span{ background:var(--accent) }
.toast.info    .toast-header{ color:#cfe1ff } .toast.info    .toast-header .icon{ color:var(--brand)  } .toast.info    .toast-bar>span{ background:var(--brand)  }
.toast.error   .toast-header{ color:#ffd5dd } .toast.error   .toast-header .icon{ color:var(--danger) } .toast.error   .toast-bar>span{ background:var(--danger) }

@keyframes toast-in{ from{opacity:0; transform:translateY(-6px) translateX(6px)} to{opacity:1; transform:none} }
@keyframes toast-bar{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ===================================================
   DASHBOARD (topbar, sidebar, obsah)
=================================================== */
.sidebar{
  position: fixed;
  top: var(--topbar-h);          /* ✅ začne pod topbarem */
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);

  padding: 20px 18px 24px;       /* ✅ už žádný "fake" offset */
  overflow-y: auto;
  overflow-x: hidden;

  background: var(--panel-2);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}


.brand-chip i.is-owner {
    color: #ff4d6d !important;
    filter: drop-shadow(0 0 6px rgba(255,77,109,0.6));
}
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 22px;
}


.topbar-left,
.topbar-right{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-h);   /* vynutí stejnou výšku obsahu */
}
.topbar .brand-chip,
.topbar-right{
  white-space: nowrap;            /* nezalamovat – jinak topbar vyroste */
}
.topbar *{
  margin-top: 0;
  margin-bottom: 0;               /* srazí náhodné marginy uvnitř */
}
.top-links a{ color:#cfe1ff; opacity:.9; margin-right:12px; border-bottom:1px dashed rgba(207,225,255,.35) }
.top-links a:hover{ color:#fff; border-bottom-color:#fff }
.topbar-right{ display:flex; align-items:center; gap:12px }
.topbar .clock{ color:#cfe1ff; opacity:.9; font-weight:600 }
.topbar-avatar{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25) }


/* WebKit – "tečka" */
.sidebar::-webkit-scrollbar {
  width: 10px;                /* celková šířka kolejnice */
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;    /* žádný kanál */
}

.sidebar::-webkit-scrollbar-thumb {
  /* kouzlo: palec je průhledný a nakreslíme jen vnitřní kolečko */
  background: transparent;
  border-radius: 999px;
  border: 6px solid transparent;        /* udělá prostor kolem „tečky“ */
  box-shadow: inset 0 0 0 6px rgba(150,170,255,.9); /* samotná tečka */
  min-height: 24px;                     /* aby to nemizelo na krátkých listech */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 0 6px rgba(175,190,255,1);
}

/* Nepovinné – trochu místa, ať se obsah „nelepí“ na tečku */
.sidebar { padding-right: 4px; }


.dashboard-shell{
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  padding-top: var(--topbar-h); /* ✅ hlavní fix proti zajíždění pod topbar */
}


.dashboard-main{
  /* menší mezera pod topbarem */
  margin-top: 0px;
  padding: 16px 26px 22px;
}

/* aby první sekce seděla hned pod bannerem / topbarem */
.dashboard-main > *:first-child{
  margin-top: 0;
}


/* ===== Sidebar: "Dashboard" jako card stejně jako akordeony ===== */


/* pouze přímé odkazy v hlavním menu (ne submenu) */
.menu > a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:2px 0 6px 0;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  transition:.25s transform,.25s background,.25s border-color,.25s box-shadow;
}

.menu-divider{
  height: 1px;
  width: 100%;
  margin: 10px 0;
  background: rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
  border-radius: 999px;
}



/* bublina pro ikonu vlevo */
.menu > a > i:first-child{
  width:30px; height:30px; flex:0 0 30px;
  border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(91,124,250,.32), rgba(0,255,213,.22));
  border:1px solid rgba(91,124,250,.50);
  color:#fff; font-size:.95rem;
}

.menu > a:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 10px 22px rgba(91,124,250,.18);
}

.menu > a.active{
  background:linear-gradient(90deg, rgba(91,124,250,.28), rgba(0,255,213,.18));
  border-color:rgba(91,124,250,.45);
  box-shadow:0 8px 22px rgba(91,124,250,.25);
}

/* MENU & SUBMENU */
.menu{ display:flex; flex-direction:column; gap:10px; margin:8px 0 14px }
.menu a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:.25s transform, .25s background, .25s border-color; color:var(--text); text-decoration:none;
}
.menu a:hover{ transform:translateX(3px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18) }
.menu a.active{
  background:linear-gradient(90deg, rgba(91,124,250,.28), rgba(0,255,213,.18));
  border-color:rgba(91,124,250,.45); box-shadow:0 8px 22px rgba(91,124,250,.25);
}
.menu-group{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:12px 14px;
  border-radius:12px;
  display:flex; align-items:center; gap:12px;
  color:var(--text); font-weight:700; cursor:pointer;
  transition:.25s transform,.25s border-color,.25s background,.25s box-shadow;
}
.menu-group > i:first-child{
  width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 30px;
  background:linear-gradient(180deg, rgba(91,124,250,.32), rgba(0,255,213,.22));
  border:1px solid rgba(91,124,250,.5);
  color:#fff; font-size:.95rem;
}
.menu-group:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}
.menu-group.open{
  background:linear-gradient(180deg, rgba(91,124,250,.18), rgba(0,255,213,.10));
  border-color:rgba(91,124,250,.45);
  box-shadow:0 10px 26px rgba(91,124,250,.22);
}
.menu-group.open + .submenu{
  border-left:1px dashed rgba(255,255,255,.12);
  margin-left:14px;
}
.menu-group:hover{ background:rgba(255,255,255,.06); transform:translateX(2px) }
.menu-group .caret{ margin-left:auto; opacity:.9; transition:.25s transform }
.menu-group.open .caret{ transform:rotate(180deg) }
@keyframes slideDown{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.submenu{
  display:none;
  padding:8px 0 6px 8px;
}
.submenu.open{
  display:block;
  animation:slideDown .22s ease;
}
.submenu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  margin:4px 0 0 14px;
  color:#dbe4ff; text-decoration:none;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition:.22s transform,.22s background,.22s border-color,.22s box-shadow;
}
.submenu a > i:first-child{
  width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; flex:0 0 26px;
  background:linear-gradient(180deg, rgba(91,124,250,.28), rgba(0,255,213,.18));
  border:1px solid rgba(91,124,250,.45);
  color:#fff; font-size:.9rem;
}
.submenu a:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(91,124,250,.18);
}
.submenu a.active{
  background:linear-gradient(180deg, rgba(91,124,250,.24), rgba(0,255,213,.14));
  border-color:rgba(91,124,250,.45);
}

.menu > a,
.menu a,
.menu-group,
.submenu a {
  font-size: 0.85rem;   /* nebo 1rem, jak ti sedí */
  font-weight: 600;     /* všechny budou stejně „tučné“ */
}

/* HERO CARD */
.card{ border-radius:16px; padding:18px }
.card-hero{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(139,92,246,.25); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow);
  margin-bottom:20px;
}
.title{
  margin:0; font-size:clamp(1.4rem, 3.2vw, 2.2rem);
  background:linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}
.meta{ color:#cfe1ff; opacity:.9; margin:6px 0 0 }

/* KPI štítky */
.kpis{ display:flex; gap:10px; flex-wrap:wrap }
.kpi{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color:#cfe1ff;
  background:linear-gradient(90deg, rgba(138,101,255,.18), rgba(91,124,250,.14));
  font-weight:600;
}
.small-kpis .kpi{ padding:6px 12px; font-size:.8rem; border-radius:10px }
.small-kpis .kpi i{ font-size:.9rem }

/* SEKCE: Rychlé akce + Novinky */
.card-content{
  background:var(--panel); border-radius:var(--radius); padding:2rem; border:var(--border); box-shadow:var(--shadow);
}
.pane-title{ margin:0 0 10px; font-weight:800; letter-spacing:.2px }

/* Quick Actions – tlačítkové karty */
.action-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; background:rgba(255,255,255,.06); border-radius:12px; border:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:var(--text); font-weight:600; transition:.25s; margin-right:10px;
}
.action-btn:hover{
  background:rgba(91,124,250,.18); transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(91,124,250,.15);
}

/* Novinky – plná šířka a pěkné karty */
.news-wrapper{ width:100%; display:grid; gap:14px }
.news-list{ display:grid; gap:14px }

.news{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.06);
  padding:14px 18px; border-radius:16px; transition:.25s ease;
  display:flex; flex-direction:column; gap:4px;
}
.news:hover{ border-color:rgba(91,124,250,.45); box-shadow:0 10px 30px rgba(91,124,250,.15); transform:translateY(-3px) }
.news-title{ font-size:1rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:10px }
.news-body{ font-size:.9rem; color:#c7cfe6; line-height:1.35 }
.news-time{ font-size:.75rem; color:rgba(255,255,255,.40); margin-top:4px }

/* Větší mezery mezi bloky */
.dashboard-main .card-content + .card-content{ margin-top:22px }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:1100px){
  .sidebar{
    position: static;
    top: auto;
    width: 100%;
    height: auto;
    padding: 12px;
    border-right: none;
    margin-top: 0;              /* ✅ pryč, shell už má padding-top */
  }

  .dashboard-shell{
    margin-left: 0;
    width: 100%;
    padding-top: var(--topbar-h); /* ✅ pořád pod topbarem */
  }

  .dashboard-main{
    margin-top: 0;
    padding: 16px;
  }
}


@media (max-width:560px){
  .card, .card-content{ padding:14px }
}

/* ====== SETTINGS ROLES TABLE ====== */
.rank-table{
  display: grid;
  gap: 12px;
}

.rank-row{
  display: grid;
  grid-template-columns: 64px 220px 1fr 280px 180px 170px; /* ID | rank | label | discord | created | actions */
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

/* hlavička */
.rank-head{
  display: grid;
  grid-template-columns: 64px 220px 1fr 280px 180px 170px;
  gap: 12px;
  padding: 10px 6px;
  color: #cfe1ff;
  opacity: .85;
  font-weight: 700;
}

/* id „pilulka“ */
.idpill{
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
  color: #e9edff;
}

/* inputs */
.rank-row .form-control{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rank-row .form-control:focus{
  border-color: rgba(91,124,250,.65);
  box-shadow: 0 0 0 3px rgba(91,124,250,.18);
  background: rgba(255,255,255,.07);
}
.rank-row .form-control.mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* akce */
.rank-actions{
  display: flex;
  gap: 8px;
}
.btn-ghost{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  transition: .2s;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}

/* responsive */
@media (max-width: 1100px){
  .rank-head{ display: none; }
  .rank-row{
    grid-template-columns: 64px 1fr;
    grid-auto-rows: min-content;
  }
  .rank-row > .cell{ grid-column: span 1; }
  .rank-row .cell-span-2{ grid-column: span 2; }
  .rank-actions{ grid-column: span 2; }
}

/* Inline label + input */
.field-inline{
  display: grid;
  grid-template-columns: 220px 1fr; /* šířku labelu můžeš změnit */
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

/* sjednocení vzhledu labelu v této variantě */
.field-inline .field-label{
  margin: 0;               /* ať netlačí řádek */
  font-weight: 700;
  color: #cfe1ff;
}

/* mobil: pod sebe */
@media (max-width: 720px){
  .field-inline{
    grid-template-columns: 1fr;
  }
  .field-inline .field-label{
    margin-bottom: 6px;
  }
}


/* ===== News form (nice-form) ===== */
.news-form .nice-form {
  display: grid;
  gap: 14px;
}

/* Pole s ikonou vlevo */
.nice-form .field {
  position: relative;
}

.nice-form .field-icon {
  position: absolute;
  inset-inline-start: 4px;          /* víc doleva (původně 10px) */
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.137);
  color: #cfe1ff;
  pointer-events: none;
}

/* Vzhled inputů/textarea */
.nice-form .form-control {
  width: 100%;
  padding: 12px 12px 12px 52px;     /* trochu menší mezera (původně 56px) */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #eaf0ff;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}


.nice-form textarea.form-control {
  min-height: 220px;
  resize: vertical;
  line-height: 1.5;
}

/* Focus ring – jemný přechod */
.nice-form .form-control:focus {
  background: rgba(255,255,255,.06);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 3px rgba(139,92,246,.18), 0 10px 25px rgba(0,0,0,.25) inset;
}

.btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #dfe7ff;
  text-decoration: none;        /* 🔹 žádné podtržení */
}

.btn-ghost:hover {
  background: rgba(255,255,255,.06);
  text-decoration: none;        /* jistota i při hoveru */
}


/* Dvojice checkboxů vedle sebe */
.nice-form .field-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.nice-form .field-2col .field {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* Vzhled checkboxu */
.nice-form input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 6px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  display: grid; place-items: center;
  transition: all .18s ease;
}
.nice-form input[type="checkbox"]::after{
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  opacity: 0;
  transform: scale(.6);
  transition: .18s ease;
}
.nice-form input[type="checkbox"]:checked{
  border-color: rgba(139,92,246,.7);
  background: linear-gradient(180deg, rgba(139,92,246,.35), rgba(139,92,246,.22));
  box-shadow: 0 0 0 2px rgba(139,92,246,.18);
}
.nice-form input[type="checkbox"]:checked::after{ opacity: 1; transform: scale(1); }

/* Datetime input – sjednocení výšky */
.nice-form input[type="datetime-local"].form-control {
  padding-left: 56px;
  height: 46px;
}

/* Tlačítka v nice-form (news formulář) */
.nice-form .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;          /* menší výška i šířka */
  font-size: 0.85rem;         /* menší text */
  line-height: 1.2;
  width: auto;                /* přepíše globální width:100% */
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,.45);
  background: linear-gradient(180deg, rgba(139,92,246,.28), rgba(139,92,246,.18));
  color: #eaf0ff;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease;
}

.nice-form .btn:hover {
  box-shadow: 0 4px 16px rgba(139,92,246,.18);
}
.nice-form .btn:active {
  transform: translateY(1px);
}

.nice-form .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;          /* menší */
  font-size: 0.85rem;
  line-height: 1.2;
  width: auto;                /* taky ne přes celou šířku */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #dfe7ff;
  text-decoration: none;
}

.nice-form .btn-ghost:hover {
  background: rgba(255,255,255,.06);
}

.nice-form .btn-ghost.danger {
  border-color: var(--danger);
  background: linear-gradient(180deg, rgba(255,77,109,.35), rgba(255,77,109,.22));
  color: #ffd6dd;
}

.nice-form .btn-ghost.danger:hover {
  box-shadow: 0 6px 20px rgba(255,77,109,.35);
  background: linear-gradient(180deg, rgba(255,77,109,.45), rgba(255,77,109,.30));
}

/* Zelené tlačítko Uložit */
.nice-form .btn.btn-save {
  border-color: rgba(0,255,105,.55);
  background: linear-gradient(180deg, rgba(0,255,105,.35), rgba(0,255,105,.22));
  color: #d9ffe9;
}

.nice-form .btn.btn-save:hover {
  box-shadow: 0 6px 20px rgba(0,255,105,.35);
  background: linear-gradient(180deg, rgba(0,255,105,.45), rgba(0,255,105,.30));
}


/* Responsivita */
@media (max-width: 820px){
  .nice-form .field-2col { grid-template-columns: 1fr; }
  .nice-form textarea.form-control { min-height: 180px; }
}

.clock {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;            /* zarovnání doprava, vypadá líp v topbaru */
  line-height: 1.15;
  /* všechny číslice stejná šířka (Inter to umí) */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  /* rezervuj místo pro nejdelší variantu (bez skákání) */
  min-width: 34ch;                  /* můžeš klidně upravit na 36–40ch */
  white-space: nowrap;              /* jeden řádek na čas */
}

.clock .clockMain {
  /* hlavní řádek s datem a časem */
  font-weight: 600;
}

.clock .nameday {
  /* svátek – menší, jemnější text */
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 2px;
}

.kpi.status-active {
  color: #7CFF9F;
  background: rgba(0,255,105,0.07);
  border: 1px solid rgba(0,255,105,0.2);
}

/* 🔴 Neaktivní */
.kpi.status-inactive {
  color: #ff7979;
  background: rgba(255,0,0,0.07);
  border: 1px solid rgba(255,0,0,0.25);
}

    .table{width:100%; border-collapse:separate; border-spacing:0 10px}
    .table-header{display:grid; grid-template-columns: 80px 1.5fr 130px 130px 220px 180px 200px; gap:10px; padding:0 6px 8px 6px; color:#cfe1ff; font-weight:700}
    .row{display:grid; grid-template-columns: 80px 1.5fr 130px 130px 220px 180px 200px; gap:10px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 10px}
    @media (max-width: 1100px){
      .table-header{display:none}
      .row{grid-template-columns: 1fr; align-items:flex-start}
      .row > div{padding:6px 2px}
    }
    .idpill{display:inline-block; min-width:36px; text-align:center; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
    .btn-ghost{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:10px; display:inline-flex; align-items:center; gap:8px; cursor:pointer}
    .btn-ghost:hover{background:rgba(255,255,255,.08)}
    .muted{color:#9aa3b2}
    .tag{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); font-weight:600}
    .tag.ok{border-color:rgba(0,255,213,.35); background:linear-gradient(90deg, rgba(0,255,213,.16), rgba(91,124,250,.10))}
    .tag.warn{border-color:rgba(255,215,0,.35); background:linear-gradient(90deg, rgba(255,215,0,.20), rgba(255,255,255,.06))}
    .tag.off{opacity:.75}
    .news-form .form-control{width:100%}
    .news-form textarea.form-control{min-height:160px; resize:vertical}
    .field-2col{display:grid; grid-template-columns: 1fr 1fr; gap:12px}


    .news-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.news-form-subtitle {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.news-form .field-editor .form-control {
  min-height: 260px;
}

/* checkbox-pill – jedna pilulka, input schovaný */
.checkbox-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

/* schovat nativní checkbox, necháme ho jen pro logiku */
.checkbox-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* samotná „pilulka“ */
.checkbox-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  color: #eaf0ff;
  transition: 0.18s background, 0.18s border-color, 0.18s box-shadow, 0.18s transform;
}

/* ikonka uvnitř pilulky */
.checkbox-pill span i {
  font-size: 0.9rem;
}

/* stav: zaškrtnuto → zvýraznit pilulku */
/* ZELENÝ CHECKBOX KDYŽ JE AKTIVNÍ */
.checkbox-pill input[type="checkbox"]:checked {
  border-color: rgba(0,255,105,.9);
  background: linear-gradient(180deg, rgba(0,255,105,.45), rgba(0,255,105,.25));
  box-shadow: 0 0 0 2px rgba(0,255,105,.25);
}

.checkbox-pill input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
  color: #eafff3;
}

/* ZELENÝ PILL TEXT KDYŽ JE CHECK */
.checkbox-pill input[type="checkbox"]:checked + span {
  background: linear-gradient(180deg, rgba(0,255,105,.35), rgba(0,255,105,.18));
  border-color: rgba(0,255,105,.8);
  color: #d9ffe9;
  box-shadow: 0 0 10px rgba(0,255,105,.25);
}

/* wrapper pro více přepínačů vedle sebe */
.field-inline-switches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* když je checkbox zaškrtnutý, základní zelený background */
.checkbox-pill input[type="checkbox"]:checked + span{
  border-color: rgba(0,255,105,.6);
  background: linear-gradient(180deg, rgba(0,255,105,.25), rgba(0,255,105,.15));
  color:#dfffe9;
}

/* class pro „ON“ stav – používáme i při načtení z PHP */
.checkbox-pill span.is-on{
  border-color: rgba(0,255,105,.6);
  background: linear-gradient(180deg, rgba(0,255,105,.25), rgba(0,255,105,.15));
  color:#dfffe9;
}

/* ===== Quill editor ve formuláři novinek ===== */

.news-form .field-editor {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}

/* toolbar nahoře – stejné barvy jako ostatní prvky */
.news-form .field-editor .ql-toolbar.ql-snow {
  border: none;
  padding: 6px 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
  );
}

/* container = vnitřek editoru */
.news-form .field-editor .ql-container.ql-snow {
  border: none;
  background: transparent;
}

/* samotný text v editoru */
.news-form .field-editor .ql-editor {
  min-height: 200px;
  padding: 10px 12px 14px;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* placeholder v editoru */
.news-form .field-editor .ql-editor.ql-blank::before {
  color: #b8c3da;
  opacity: .9;
  font-style: normal;
}

/* barvy ikonek / textu v toolbaru */
.news-form .field-editor .ql-snow .ql-picker,
.news-form .field-editor .ql-snow .ql-picker-label,
.news-form .field-editor .ql-snow .ql-picker-item,
.news-form .field-editor .ql-snow .ql-toolbar button {
  color: #eaf0ff;
}

.news-form .field-editor .ql-snow .ql-stroke {
  stroke: #eaf0ff;
}

.news-form .field-editor .ql-snow .ql-fill {
  fill: #eaf0ff;
}

.news-form .field-editor .ql-snow .ql-picker-options {
  background: rgba(11,13,16,0.98);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
}

/* hover stav v toolbaru */
.news-form .field-editor .ql-toolbar button:hover,
.news-form .field-editor .ql-toolbar button.ql-active,
.news-form .field-editor .ql-snow .ql-picker-label.ql-active {
  background: rgba(255,255,255,.06);
}

/* focus efekt jako u ostatních inputů */
.news-form .field-editor:focus-within {
  border-color: rgba(139,92,246,.45);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.18),
    0 10px 25px rgba(0,0,0,.25) inset;
  background: rgba(255,255,255,.06);
}


/* === NOVINKY – kompaktnější vzhled === */

/* samotná karta Novinky */
.card-content.news-wrapper{
  padding: 14px 18px;                 /* menší vnitřní odsazení */
}

/* nadpis "Novinky" */
.card-content.news-wrapper > h3{
  margin: 0 0 8px;
  font-size: 0.9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239,242,255,.78);
}

/* jedna novinka / placeholder */
.news{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 14px;                 /* menší než předtím */
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: .2s ease;
}

.news:hover{
  border-color: rgba(91,124,250,.45);
  box-shadow: 0 6px 20px rgba(91,124,250,.18);
  transform: translateY(-2px);
}

/* připnutá novinka – jemné zvýraznění */
.news.pinned{
  background: linear-gradient(135deg, rgba(80,118,254,0.22), rgba(80,118,254,0.08));
  border-color: rgba(80,118,254,0.55);
  box-shadow: 0 0 8px rgba(80,118,254,0.3);
}

.news.pinned i.fa-thumbtack{
  color: #7fa5ff;
}

/* řádek s titulkem */
.news-title{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* text článku */
.news-body{
  font-size: 0.88rem;
  line-height: 1.4;
  color: #c7cfe6;
}

/* spodní řádek s datem / autorem */
.news-time{
  font-size: 0.76rem;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
}

/* info o úpravě článku */
.news-updated{
  color: #ffd27f77;
  font-weight: 500;
}

/* ===== Správa novinek – tabulka ===== */

.news-admin-card {
  padding-top: 18px;
}

.news-admin-headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.news-admin-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.news-admin-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px dashed rgba(255,255,255,.14);
  color: #d3ddff;
  margin-top: 6px;
}

.news-admin-empty i {
  font-size: 1.2rem;
  opacity: .9;
}

.news-admin-empty-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.news-admin-empty-text {
  font-size: 0.86rem;
  color: var(--muted);
}

/* Grid hlavička + řádky */

.news-admin-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.news-admin-header {
  display: grid;
  grid-template-columns: 80px 2.2fr 1.3fr 1.4fr 1.6fr;
  gap: 10px;
  padding: 4px 8px 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(239,242,255,.7);
}

.news-admin-header .text-right {
  text-align: right;
}

.news-admin-row {
  display: grid;
  grid-template-columns: 80px 2.2fr 1.3fr 1.4fr 1.6fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.08);
  transition: .22s ease;
}

.news-admin-row:hover {
  border-color: rgba(91,124,250,.45);
  box-shadow: 0 10px 26px rgba(91,124,250,.18);
  transform: translateY(-2px);
}

.news-admin-row.row-live {
  border-left: 3px solid rgba(0,255,105,.8);
}

.news-admin-row.row-draft {
  border-left: 3px solid rgba(255,255,255,.16);
}

/* buňka = jen pro čitelnost */

.news-admin-row .cell {
  min-width: 0;
}

.news-admin-title {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.news-admin-meta {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(239,242,255,.65);
}

.news-admin-meta span::before {
  content: "•";
  margin: 0 4px 0 0;
  opacity: .6;
}

.news-admin-meta span:first-child::before {
  content: "";
  margin: 0;
}

/* chip-y pro stav */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: #e9edff;
  white-space: nowrap;
}

.chip i {
  font-size: 0.8rem;
}

.chip-live {
  border-color: rgba(0,255,105,.45);
  background: linear-gradient(90deg, rgba(0,255,105,.18), rgba(0,0,0,.0));
  color: #b7ffd0;
}

.chip-draft {
  opacity: .85;
}

.chip-pin,
.chip-pin-small {
  border-color: rgba(255,215,0,.45);
  background: linear-gradient(90deg, rgba(255,215,0,.20), rgba(0,0,0,.0));
  color: #ffe9a6;
}

.chip-pin-small {
  padding: 3px 8px;
}

/* Akce – malá kulatá tlačítka */

.cell-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-ghost.btn-xs {
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 999px;
}

.btn-ghost.btn-xs i {
  font-size: 0.85rem;
}

.btn-danger-lite {
  border-color: rgba(255,77,109,.6);
  background: linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.14));
  color: #ffd6dd;
}

/* Responsivita – na menších šířkách stacked layout */

@media (max-width: 1100px) {
  .news-admin-header {
    display: none;
  }

  .news-admin-row {
    grid-template-columns: 64px 1fr;
    grid-auto-rows: min-content;
    align-items: flex-start;
  }

  .cell-id {
    grid-row: span 2;
  }

  .cell-main {
    grid-column: span 1;
  }

  .cell-author,
  .cell-status,
  .cell-actions {
    grid-column: span 2;
  }

  .cell-actions {
    justify-content: flex-start;
  }
}
/* drobný popisek u přepínačů */
.field-hint{
  margin:6px 0 0;
  font-size:0.8rem;
  color:var(--muted);
}


/* ===== Settings: Maintenance mód karta ===== */

.settings-maint {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 0 0, rgba(255,77,109,.18), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(91,124,250,.14), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.settings-maint-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.settings-maint-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}

.settings-maint-title i {
  color: var(--danger);
}

.settings-maint-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: .9;
}

.settings-maint-toggle {
  white-space: nowrap;
}

.settings-maint-text {
  min-height: 120px;
  resize: vertical;
  margin-top: 6px;
}

/* menší label pod kartou */
.settings-maint .field-label.small {
  font-size: 0.8rem;
  margin-top: 4px;
  margin-bottom: 2px;
}

/* ===== Maintenance / devmode banner ===== */
.devmode-banner{
  position: sticky;                         /* drží se při scrollu */
  top: var(--topbar-h);                     /* přesně pod topbarem */
  z-index: 950;

  margin-bottom: 16px;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-radius: 12px;
  border: 1px solid rgba(255, 184, 76, 0.7);
  background: linear-gradient(90deg,
    rgba(255, 184, 76, 0.22),
    rgba(255, 107, 107, 0.22)
  );
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.devmode-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 184, 76, 0.18);
  border: 1px solid rgba(255, 184, 76, 0.9);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffe8c2;
}

.devmode-pill i{
  color: #ffd28a;
}

.devmode-text{
  font-size: 0.9rem;
  color: #ffe8c2;
  opacity: 0.95;
}

/* ČERVENÝ BANNER PRO ZAMKNUTÉ PŘIHLÁŠENÍ */
.login-lock-banner {
  max-width: 980px;
  margin: 8px auto 0;
  padding: 10px 14px;
  border-radius: 14px;

  display: flex;
  align-items: flex-start;
  gap: 10px;

  /* skleněný / error look */
  background: rgba(255, 77, 109, 0.12);         /* lehce červené pozadí */
  border: 1px solid rgba(255, 77, 109, 0.7);    /* výrazná červená hrana */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

  color: #ffe5ea;                               /* světlejší text */
  font-size: 0.88rem;
}

/* ikonka vlevo */
.login-lock-banner i.fa-lock {
  margin-top: 2px;
  font-size: 0.95rem;
  color: #ff8ba1;                               /* růžovo-červená */
}

/* tučný text “Přihlášení pozastaveno” */
.login-lock-banner strong {
  color: #fff0f3;
  font-weight: 600;
}

/* text za strongem, ať není nalepený */
.login-lock-banner span {
  opacity: 0.9;
}

/* ===== TODO LIST ===== */

/* řádek s prioritou, stavem a progressbarem ve formuláři */
.todo-form-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:4px;
}
.todo-form-col .field-label{
  margin:0 0 4px;
  font-weight:600;
  color:#cfe1ff;
  font-size:0.85rem;
}
@media (max-width: 820px){
  .todo-form-row{
    grid-template-columns:1fr;
  }
}





/* malé ghost buttony */
.btn-ghost.btn-xs{
  padding:6px 10px;
  font-size:0.8rem;
  border-radius:999px;
}
.btn-danger-lite{
  border-color:rgba(255,77,109,.6);
  background:linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.14));
  color:#ffd6dd;
}

.form-control-select{
  appearance:none;
  padding-right:40px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  position:relative;
}

/* šipka */
.form-control-select{
  background-image:
    linear-gradient(45deg, #cfe1ff 50%, transparent 50%),
    linear-gradient(-45deg, #cfe1ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 10px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
}

/* ===== SELECT – dark styl pro Prioritu / Stav v TODO ===== */

.form-control-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-left: 14px;
  padding-right: 34px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.98));
  color: #eaf0ff;

  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
}

/* šipka vpravo – pseudo „custom“ */
.form-control-select {
  background-image:
    linear-gradient(45deg, rgba(148,163,255,.9) 50%, transparent 50%),
    linear-gradient(135deg, rgba(148,163,255,.9) 50%, transparent 50%),
    linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.98));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
}

/* focus ring */
.form-control-select:focus {
  outline: none;
  border-color: rgba(91,124,250,.75);
  box-shadow: 0 0 0 3px rgba(91,124,250,.30);
}

/* samotný seznam options v dropdownu (Chrome, Edge, atd.) */
.form-control-select option {
  background: #050812;
  color: #eaf0ff;
}

/* vybraný option */
.form-control-select option:checked,
.form-control-select option:focus {
  background: linear-gradient(90deg, rgba(91,124,250,.55), rgba(0,255,213,.25));
  color: #ffffff;
}

/* ===========================
   TO-DO LIST – layout karet
=========================== */

.todo-card {
  margin-top: 18px;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.06),
    rgba(10,16,32,0.96)
  );
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

/* jemné zvýraznění podle stavu (levý barevný proužek) */
.todo-row.todo-status-todo {
  border-left: 3px solid rgba(139,92,246,0.7);
}
.todo-row.todo-status-progress {
  border-left: 3px solid rgba(0,180,255,0.8);
}
.todo-row.todo-status-testing {
  border-left: 3px solid rgba(255,215,0,0.85);
}
.todo-row.todo-status-done {
  border-left: 3px solid rgba(0,255,150,0.9);
}

.todo-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* horní řádek – text vlevo, progress vpravo */
.todo-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.todo-header-text {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.todo-title {
  font-weight: 700;
  font-size: 1rem;
}

.todo-desc {
  font-size: 0.9rem;
  color: #c7cfe6;
}

.todo-meta-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.todo-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  padding-top: 8px;
}

.todo-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.todo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-prio {
  border-color: rgba(139,92,246,0.45);
  background: linear-gradient(90deg,
    rgba(139,92,246,0.30),
    rgba(80,118,254,0.18)
  );
}

/* ===========================
   KULATÝ PROGRESS
=========================== */

.progress-circle {
  --p: 0;                 /* procenta 0–100 (inline style) */
  --size: 64px;
  --track: rgba(255,255,255,0.07);
  --bg-inner: rgba(4,7,14,0.95);
  --accent: #5b7cfa;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    conic-gradient(
      var(--accent) calc(var(--p) * 1%),
      var(--track) 0
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.6);
}

.progress-circle-inner {
  width: calc(var(--size) - 10px);
  height: calc(var(--size) - 10px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.06),
    var(--bg-inner)
  );
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 8px 18px rgba(0,0,0,0.7);
}

.progress-circle-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: #eaf0ff;
  font-variant-numeric: tabular-nums;
}

/* barvy podle stavu/procent */
.progress-circle-low {
  --accent: #ff4d6d;
}

.progress-circle-mid {
  --accent: #ffd166;
}

.progress-circle-ok {
  --accent: #44ff9a;
}

/* menší varianta na mobilech */
@media (max-width: 720px) {
  .progress-circle {
    --size: 54px;
  }

  .todo-row {
    padding: 12px 12px;
  }

  .todo-header-line {
    align-items: flex-start;
  }
}

/* === DARK SELECTS PRO CELÝ INTRANET === */

/* základní vzhled selectu */
.dashboard-page select.form-control,
.dashboard-page select.form-control-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  color: #eaf0ff;
  padding: 12px 12px 12px 52px; 
  font-size: 0.9rem;
  outline: none;
}

/* fokus efekt */
.dashboard-page select.form-control:focus,
.dashboard-page select.form-control-select:focus {
  border-color: rgba(91,124,250,.75);
  box-shadow: 0 0 0 3px rgba(91,124,250,.28);
}

/* samotné položky v rozbaleném menu */
.dashboard-page select.form-control option,
.dashboard-page select.form-control-select option {
  background-color: #05060a;      /* tmavé pozadí */
  color: #eaf0ff;                 /* světlý text */
}

/* pro případ optgroup */
.dashboard-page select.form-control optgroup,
.dashboard-page select.form-control-select optgroup {
  background-color: #05060a;
  color: #9aa3b2;
}

/* schovat defaultní šipku v Edge/IE (kdyby někde byl) */
.dashboard-page select.form-control::-ms-expand,
.dashboard-page select.form-control-select::-ms-expand {
  display: none;
}

/* Webhook – layout polí */
.webhook-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto auto;
  gap: 16px 20px;
  align-items: flex-start;
}

.webhook-fields .field-wide {
  grid-column: 1 / -1;
}

/* Textarea – stejný vzhled jako inputy */
.dashboard-page textarea.form-control {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(8,12,24,0.8);
  color: #eaf0ff;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 56px;
}

.dashboard-page textarea.form-control:focus {
  outline: none;
  border-color: #5076fe;
  box-shadow: 0 0 0 1px rgba(80,118,254,0.4);
}

/* Barva embedu – řádek */
.webhook-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Color picker */
.webhook-color-input {
  width: 44px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  cursor: pointer;
}

/* Hex input vedle color pickeru */
.webhook-color-hex-wrap {
  position: relative;
  flex: 1;
}

.webhook-color-hex-wrap .field-icon-small {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: rgba(234,240,255,0.55);
  pointer-events: none;
}

.webhook-color-hex-wrap .form-control.webhook-color-hex {
  padding-left: 22px;
}

/* Trochu menší odstup hintů */
.webhook-card .field-hint {
  margin-top: 4px;
  font-size: 0.75rem;
  color: rgba(234,240,255,0.6);
}

/* backdrop */
#loginLockModal.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

#loginLockModal.modal-backdrop.is-open {
  display: flex;
}

/* karta modalu */
#loginLockModal .modal-card {
  max-width: 420px;
  width: 100%;
  padding: 20px 22px;
  border-radius: 18px;
  background: radial-gradient(circle at top left,
              rgba(254, 80, 80, 0.2) 0,
              rgba(26, 8, 8, 0.95) 55%);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

#loginLockModal .modal-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

#loginLockModal .modal-title i {
  color: #f25858;
}



#loginLockModal .modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#loginLockModal small {
  color: #686868;
}

/* ===== Logout button v sidebaru ===== */
.sidebar-logout{
  margin-top: 14px;
  padding-top: 10px;
}


.sidebar-logout-btn{
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  background:linear-gradient(180deg, rgba(255,77,109,.25), rgba(255,77,109,.18));
  border-color:var(--danger);
  box-shadow: 0 14px 32px rgba(0,0,0,.65);
  font-weight: 700;
  text-decoration: none;
}

.sidebar-logout-btn i{
  font-size: 0.95rem;
}

.sidebar-logout-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.8);
  background:linear-gradient(180deg, rgba(255,77,109,.25), rgba(255,77,109,.18));
  border-color:var(--danger);
}

.sidebar-logout-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(0,0,0,.7);
}

/* ===================================================
   LSPD INTRANET - GLOBAL STYLESHEET
   by gogo / QuantumRP
   =================================================== */

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


/* ===========================
   COLOR & BASE SETTINGS
=========================== */
:root{
  --bg:#0b0d10;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.04);
  --muted:#9aa3b2;
  --text:#eef2ff;
  --brand:#5b7cfa;
  --accent:#00ffd5;
  --danger:#ff4d6d;
  --radius:18px;
  --border:1px solid rgba(255,255,255,.12);
  --shadow:0 20px 50px rgba(0,0,0,.45);

  --topbar-h: 72px;     /* zvol si 64/70/72 – ale všude stejně */
  --sidebar-w: 260px;
  --glass-blur: 12px;
}

*{ box-sizing:border-box }

html,body{ height:100% }

body{
  margin:0;
  display:flex;
  align-items:center;            /* pro LOGIN */
  justify-content:center;        /* pro LOGIN */
  font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1300px 700px at -10% -10%, #0f1624 10%, transparent 60%),
    radial-gradient(1200px 600px at 110% -20%, #100d1f 10%, transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

/* Pouze pro DASHBOARD: zruš login centrování + layout */
body.dashboard-page{
  display: block;        /* ✅ zruší login flex centrování */
  align-items: unset;
  justify-content: unset;
}





/* ===========================
   POLICE LIGHTS FX
=========================== */
.fx{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  filter:blur(50px) saturate(140%); opacity:.35;
}
.fx:before,.fx:after{
  content:""; position:absolute; width:60vw; height:60vw; border-radius:50%;
  transform:translate(-20%,-20%); animation:sweep 9s ease-in-out infinite; mix-blend-mode:screen;
}
.fx:before{ background:radial-gradient(circle, rgba(255,0,54,.65), transparent 55%) }
.fx:after{ background:radial-gradient(circle, rgba(0,140,255,.65), transparent 55%); right:-10%; top:-20%; animation-delay:-4.5s }
@keyframes sweep{ 0%,100%{transform:translate(-15%,-20%)} 50%{transform:translate(10%,5%)} }

/* ===========================
   GLASS UTILITY
=========================== */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(139,92,246,.25);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:var(--shadow);
  border-radius:14px;
}

/* ===========================
   LOGIN LAYOUT
=========================== */
.wrap{ width:min(980px,92%); margin:auto; padding:24px 0 }
.card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:22px; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(139,92,246,.25); backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--shadow); overflow:hidden;
}
@media (max-width:900px){ .card{ grid-template-columns:1fr } }

.hero{ padding:36px 30px 28px }
.badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  background:linear-gradient(90deg, rgba(138,101,255,.18), rgba(91,124,250,.18));
  border:1px solid rgba(255,255,255,.12); color:#cdd6f4; font-weight:600; letter-spacing:.2px;
}

h1{
  margin:16px 0 8px; font-size:clamp(2rem,5vw,2.8rem);
  background:linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; line-height:1.05;
}
.subtitle{ color:var(--muted); margin:0 0 18px }

.highlight{ display:flex; gap:12px; align-items:center; color:#cfe1ff; margin:10px 0 }
.highlight i{ color:var(--accent) }

.help{
  display:grid; gap:12px; margin-top:18px; background:var(--panel-2);
  border:var(--border); border-radius:12px; padding:14px;
}
.help .row{ display:flex; gap:10px; align-items:flex-start; color:#c9d5ee }
.help i{ color:var(--brand) }

.login{
  padding:36px 30px; border-left:1px solid rgba(255,255,255,.08);
}
@media (max-width:900px){
  .login{ border-left:none; border-top:1px solid rgba(255,255,255,.08) }
}

/* ===========================
   BUTTONS
=========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(114,137,218,.45);
  background:linear-gradient(180deg, rgba(114,137,218,.25), rgba(114,137,218,.18));
  color:#fff; font-weight:700; letter-spacing:.3px; transition:.25s transform,.25s box-shadow,.25s filter;
  cursor:pointer; text-decoration:none;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(114,137,218,.25) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn[disabled]{ opacity:.6; cursor:wait; filter:grayscale(.2) }
.btn small{ font-weight:600; opacity:.9 }

.btn-danger{
  background:linear-gradient(180deg, rgba(255,77,109,.25), rgba(255,77,109,.18));
  border-color:var(--danger);
}

/* ===========================
   LINKS / FOOTER / ETC
=========================== */
.legal{ margin-top:14px; color:#9fb0c8; font-size:.92rem }
.links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px }
.links a{ color:#cfe1ff; text-decoration:none; border-bottom:1px dashed rgba(207,225,255,.35) }
.links a:hover{ color:#fff; border-bottom-color:#fff }

.footer {
  grid-column: 1 / -1;
  margin: 16px 20px 20px;      /* stejné boční odsazení jako karty */
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  color: #b8bcd1;
}

/* Obsah footeru: dvě strany, responsivně zalamovat */
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Odkazy ve footeru */
.footer-links a {
  color: #b8bcd1;
  text-decoration: none;
  margin-left: 15px;
  transition: 0.2s;
}

.footer-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 4px #5076fe;
}

.footer-links .sep,
.footer-content .sep {
  margin: 0 10px;
  opacity: .5;
}


/* ===========================
   FORMS (shared)
=========================== */
.sidebar .identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -8px;                              /* jemný „nudge“ nahoru */
  padding: 8px 10px 10px;                        /* menší vnitřní odsazení */
}

.sidebar .identity .avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: 0 0 46px;
}
.sidebar .identity .who {
  transform: translateY(-2px);                   /* zvedne jméno o chloupek */
  line-height: 1.15;
}
.identity-name{ color:#e9edff; font-weight:400 }
.identity-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 2px;     
}
.news.pinned {
  background: linear-gradient(135deg, rgba(80,118,254,0.25), rgba(80,118,254,0.12));
  border: 1px solid rgba(80,118,254,0.45);
  box-shadow: 0 0 8px rgba(80,118,254,0.3);
}

/* Ikona připnutí více výrazná */
.news.pinned i.fa-thumbtack {
  color: #76a0ff;
}

.identity-badge {
  font-size: 0.85em;
  opacity: .85;
  transform: translateY(-1px);  
}
.identity-rank {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  opacity: .8;
  display: block;
  margin-top: 0px;
  letter-spacing: .3px;
}

.identity-rank.badge {
  font-size: .8em;
  opacity: .8;
}


.identity-id{ color:var(--muted); font-size:.9rem; margin-top:2px }

.nice-form{ display:grid; gap:10px; margin-top:6px }
.field{ position:relative; display:block }
.field-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.75; pointer-events:none }

.form .form-control{
  width:100%; padding:12px 14px 12px 42px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.form .form-control::placeholder{ color:#b8c3da; opacity:.9 }
.form .form-control:focus{ border-color:rgba(91,124,250,.65); box-shadow:0 0 0 3px rgba(91,124,250,.18); background:rgba(255,255,255,.07) }
.form input[type="date"].form-control{ padding-left:42px; min-height:46px }
.form .mb-2{ margin-bottom:12px }
.form label{ display:block; margin:0 0 6px; color:#cfe1ff; font-weight:600 }

@media (max-width:520px){
  .identity .avatar{ width:40px; height:40px }
  .form .form-control{ padding-left:40px }
}

/* ===========================
   TOASTS
=========================== */
.toast-wrap{
  position:fixed; top:18px; right:18px; z-index:99999; display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast{
  min-width:300px; max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15); color:var(--text);
  border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.45); backdrop-filter:blur(var(--glass-blur));
  pointer-events:auto; overflow:hidden; animation:toast-in .25s ease-out;
}
.toast-header{ display:flex; align-items:center; gap:10px; padding:10px 12px 6px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:700; letter-spacing:.2px }
.toast-header .icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center }
.toast-body{ padding:10px 12px 12px; color:var(--muted) }
.toast-close{ margin-left:auto; background:transparent; border:0; color:#cfd6e6; font-size:18px; line-height:1; cursor:pointer; transition:.2s }
.toast-close:hover{ color:#fff; transform:scale(1.05) }
.toast-bar{ height:3px; width:100%; background:rgba(255,255,255,.08) }
.toast-bar>span{ display:block; height:100%; width:100%; transform-origin:left; animation:toast-bar 4s linear forwards }

.toast.success .toast-header{ color:#bfffe9 } .toast.success .toast-header .icon{ color:var(--accent) } .toast.success .toast-bar>span{ background:var(--accent) }
.toast.info    .toast-header{ color:#cfe1ff } .toast.info    .toast-header .icon{ color:var(--brand)  } .toast.info    .toast-bar>span{ background:var(--brand)  }
.toast.error   .toast-header{ color:#ffd5dd } .toast.error   .toast-header .icon{ color:var(--danger) } .toast.error   .toast-bar>span{ background:var(--danger) }

@keyframes toast-in{ from{opacity:0; transform:translateY(-6px) translateX(6px)} to{opacity:1; transform:none} }
@keyframes toast-bar{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ===================================================
   DASHBOARD (topbar, sidebar, obsah)
=================================================== */
.sidebar{
  position: fixed;
  top: var(--topbar-h);          /* ✅ začne pod topbarem */
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);

  padding: 20px 18px 24px;       /* ✅ už žádný "fake" offset */
  overflow-y: auto;
  overflow-x: hidden;

  background: var(--panel-2);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}


.brand-chip i.is-owner {
    color: #ff4d6d !important;
    filter: drop-shadow(0 0 6px rgba(255,77,109,0.6));
}
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 22px;
}


.topbar-left,
.topbar-right{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-h);   /* vynutí stejnou výšku obsahu */
}
.topbar .brand-chip,
.topbar-right{
  white-space: nowrap;            /* nezalamovat – jinak topbar vyroste */
}
.topbar *{
  margin-top: 0;
  margin-bottom: 0;               /* srazí náhodné marginy uvnitř */
}
.top-links a{ color:#cfe1ff; opacity:.9; margin-right:12px; border-bottom:1px dashed rgba(207,225,255,.35) }
.top-links a:hover{ color:#fff; border-bottom-color:#fff }
.topbar-right{ display:flex; align-items:center; gap:12px }
.topbar .clock{ color:#cfe1ff; opacity:.9; font-weight:600 }
.topbar-avatar{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25) }


/* WebKit – "tečka" */
.sidebar::-webkit-scrollbar {
  width: 10px;                /* celková šířka kolejnice */
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;    /* žádný kanál */
}

.sidebar::-webkit-scrollbar-thumb {
  /* kouzlo: palec je průhledný a nakreslíme jen vnitřní kolečko */
  background: transparent;
  border-radius: 999px;
  border: 6px solid transparent;        /* udělá prostor kolem „tečky“ */
  box-shadow: inset 0 0 0 6px rgba(150,170,255,.9); /* samotná tečka */
  min-height: 24px;                     /* aby to nemizelo na krátkých listech */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 0 6px rgba(175,190,255,1);
}

/* Nepovinné – trochu místa, ať se obsah „nelepí“ na tečku */
.sidebar { padding-right: 4px; }


.dashboard-shell{
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  padding-top: var(--topbar-h); /* ✅ hlavní fix proti zajíždění pod topbar */
}


.dashboard-main{
  /* menší mezera pod topbarem */
  margin-top: 0px;
  padding: 16px 26px 22px;
}

/* aby první sekce seděla hned pod bannerem / topbarem */
.dashboard-main > *:first-child{
  margin-top: 0;
}


/* ===== Sidebar: "Dashboard" jako card stejně jako akordeony ===== */


/* pouze přímé odkazy v hlavním menu (ne submenu) */
.menu > a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:2px 0 6px 0;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  transition:.25s transform,.25s background,.25s border-color,.25s box-shadow;
}


/* bublina pro ikonu vlevo */
.menu > a > i:first-child{
  width:30px; height:30px; flex:0 0 30px;
  border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(91,124,250,.32), rgba(0,255,213,.22));
  border:1px solid rgba(91,124,250,.50);
  color:#fff; font-size:.95rem;
}

.menu > a:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 10px 22px rgba(91,124,250,.18);
}

.menu > a.active{
  background:linear-gradient(90deg, rgba(91,124,250,.28), rgba(0,255,213,.18));
  border-color:rgba(91,124,250,.45);
  box-shadow:0 8px 22px rgba(91,124,250,.25);
}

/* MENU & SUBMENU */
.menu{ display:flex; flex-direction:column; gap:10px; margin:8px 0 14px }
.menu a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:.25s transform, .25s background, .25s border-color; color:var(--text); text-decoration:none;
}
.menu a:hover{ transform:translateX(3px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18) }
.menu a.active{
  background:linear-gradient(90deg, rgba(91,124,250,.28), rgba(0,255,213,.18));
  border-color:rgba(91,124,250,.45); box-shadow:0 8px 22px rgba(91,124,250,.25);
}
.menu-group{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:12px 14px;
  border-radius:12px;
  display:flex; align-items:center; gap:12px;
  color:var(--text); font-weight:700; cursor:pointer;
  transition:.25s transform,.25s border-color,.25s background,.25s box-shadow;
}
.menu-group > i:first-child{
  width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 30px;
  background:linear-gradient(180deg, rgba(91,124,250,.32), rgba(0,255,213,.22));
  border:1px solid rgba(91,124,250,.5);
  color:#fff; font-size:.95rem;
}
.menu-group:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}
.menu-group.open{
  background:linear-gradient(180deg, rgba(91,124,250,.18), rgba(0,255,213,.10));
  border-color:rgba(91,124,250,.45);
  box-shadow:0 10px 26px rgba(91,124,250,.22);
}
.menu-group.open + .submenu{
  border-left:1px dashed rgba(255,255,255,.12);
  margin-left:14px;
}
.menu-group:hover{ background:rgba(255,255,255,.06); transform:translateX(2px) }
.menu-group .caret{ margin-left:auto; opacity:.9; transition:.25s transform }
.menu-group.open .caret{ transform:rotate(180deg) }
@keyframes slideDown{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.submenu{
  display:none;
  padding:8px 0 6px 8px;
}
.submenu.open{
  display:block;
  animation:slideDown .22s ease;
}
.submenu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  margin:4px 0 0 14px;
  color:#dbe4ff; text-decoration:none;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  transition:.22s transform,.22s background,.22s border-color,.22s box-shadow;
}
.submenu a > i:first-child{
  width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; flex:0 0 26px;
  background:linear-gradient(180deg, rgba(91,124,250,.28), rgba(0,255,213,.18));
  border:1px solid rgba(91,124,250,.45);
  color:#fff; font-size:.9rem;
}
.submenu a:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(91,124,250,.18);
}
.submenu a.active{
  background:linear-gradient(180deg, rgba(91,124,250,.24), rgba(0,255,213,.14));
  border-color:rgba(91,124,250,.45);
}

.menu > a,
.menu a,
.menu-group,
.submenu a {
  font-size: 0.85rem;   /* nebo 1rem, jak ti sedí */
  font-weight: 600;     /* všechny budou stejně „tučné“ */
}

/* HERO CARD */
.card{ border-radius:16px; padding:18px }
.card-hero{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(139,92,246,.25); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow);
  margin-bottom:20px;
}
.title{
  margin:0; font-size:clamp(1.4rem, 3.2vw, 2.2rem);
  background:linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}
.meta{ color:#cfe1ff; opacity:.9; margin:6px 0 0 }

/* KPI štítky */
.kpis{ display:flex; gap:10px; flex-wrap:wrap }
.kpi{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color:#cfe1ff;
  background:linear-gradient(90deg, rgba(138,101,255,.18), rgba(91,124,250,.14));
  font-weight:600;
}
.small-kpis .kpi{ padding:6px 12px; font-size:.8rem; border-radius:10px }
.small-kpis .kpi i{ font-size:.9rem }

/* SEKCE: Rychlé akce + Novinky */
.card-content{
  background:var(--panel); border-radius:var(--radius); padding:2rem; border:var(--border); box-shadow:var(--shadow);
}
.pane-title{ margin:0 0 10px; font-weight:800; letter-spacing:.2px }

/* Quick Actions – tlačítkové karty */
.action-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; background:rgba(255,255,255,.06); border-radius:12px; border:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:var(--text); font-weight:600; transition:.25s; margin-right:10px;
}
.action-btn:hover{
  background:rgba(91,124,250,.18); transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(91,124,250,.15);
}

/* Novinky – plná šířka a pěkné karty */
.news-wrapper{ width:100%; display:grid; gap:14px }
.news-list{ display:grid; gap:14px }

.news{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.06);
  padding:14px 18px; border-radius:16px; transition:.25s ease;
  display:flex; flex-direction:column; gap:4px;
}
.news:hover{ border-color:rgba(91,124,250,.45); box-shadow:0 10px 30px rgba(91,124,250,.15); transform:translateY(-3px) }
.news-title{ font-size:1rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:10px }
.news-body{ font-size:.9rem; color:#c7cfe6; line-height:1.35 }
.news-time{ font-size:.75rem; color:rgba(255,255,255,.40); margin-top:4px }

/* Větší mezery mezi bloky */
.dashboard-main .card-content + .card-content{ margin-top:22px }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:1100px){
  .sidebar{
    position: static;
    top: auto;
    width: 100%;
    height: auto;
    padding: 12px;
    border-right: none;
    margin-top: 0;              /* ✅ pryč, shell už má padding-top */
  }

  .dashboard-shell{
    margin-left: 0;
    width: 100%;
    padding-top: var(--topbar-h); /* ✅ pořád pod topbarem */
  }

  .dashboard-main{
    margin-top: 0;
    padding: 16px;
  }
}


@media (max-width:560px){
  .card, .card-content{ padding:14px }
}

/* ====== SETTINGS ROLES TABLE ====== */
.rank-table{
  display: grid;
  gap: 12px;
}

.rank-row{
  display: grid;
  grid-template-columns: 64px 220px 1fr 280px 180px 170px; /* ID | rank | label | discord | created | actions */
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

/* hlavička */
.rank-head{
  display: grid;
  grid-template-columns: 64px 220px 1fr 280px 180px 170px;
  gap: 12px;
  padding: 10px 6px;
  color: #cfe1ff;
  opacity: .85;
  font-weight: 700;
}

/* id „pilulka“ */
.idpill{
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
  color: #e9edff;
}

/* inputs */
.rank-row .form-control{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rank-row .form-control:focus{
  border-color: rgba(91,124,250,.65);
  box-shadow: 0 0 0 3px rgba(91,124,250,.18);
  background: rgba(255,255,255,.07);
}
.rank-row .form-control.mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* akce */
.rank-actions{
  display: flex;
  gap: 8px;
}
.btn-ghost{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  transition: .2s;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}

/* responsive */
@media (max-width: 1100px){
  .rank-head{ display: none; }
  .rank-row{
    grid-template-columns: 64px 1fr;
    grid-auto-rows: min-content;
  }
  .rank-row > .cell{ grid-column: span 1; }
  .rank-row .cell-span-2{ grid-column: span 2; }
  .rank-actions{ grid-column: span 2; }
}

/* Inline label + input */
.field-inline{
  display: grid;
  grid-template-columns: 220px 1fr; /* šířku labelu můžeš změnit */
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

/* sjednocení vzhledu labelu v této variantě */
.field-inline .field-label{
  margin: 0;               /* ať netlačí řádek */
  font-weight: 700;
  color: #cfe1ff;
}

/* mobil: pod sebe */
@media (max-width: 720px){
  .field-inline{
    grid-template-columns: 1fr;
  }
  .field-inline .field-label{
    margin-bottom: 6px;
  }
}


/* ===== News form (nice-form) ===== */
.news-form .nice-form {
  display: grid;
  gap: 14px;
}

/* Pole s ikonou vlevo */
.nice-form .field {
  position: relative;
}

.nice-form .field-icon {
  position: absolute;
  inset-inline-start: 4px;          /* víc doleva (původně 10px) */
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.137);
  color: #cfe1ff;
  pointer-events: none;
}

/* Vzhled inputů/textarea */
.nice-form .form-control {
  width: 100%;
  padding: 12px 12px 12px 52px;     /* trochu menší mezera (původně 56px) */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #eaf0ff;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}


.nice-form textarea.form-control {
  min-height: 220px;
  resize: vertical;
  line-height: 1.5;
}

/* Focus ring – jemný přechod */
.nice-form .form-control:focus {
  background: rgba(255,255,255,.06);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 3px rgba(139,92,246,.18), 0 10px 25px rgba(0,0,0,.25) inset;
}

.btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #dfe7ff;
  text-decoration: none;        /* 🔹 žádné podtržení */
}

.btn-ghost:hover {
  background: rgba(255,255,255,.06);
  text-decoration: none;        /* jistota i při hoveru */
}


/* Dvojice checkboxů vedle sebe */
.nice-form .field-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.nice-form .field-2col .field {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* Vzhled checkboxu */
.nice-form input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 6px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  display: grid; place-items: center;
  transition: all .18s ease;
}
.nice-form input[type="checkbox"]::after{
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  opacity: 0;
  transform: scale(.6);
  transition: .18s ease;
}
.nice-form input[type="checkbox"]:checked{
  border-color: rgba(139,92,246,.7);
  background: linear-gradient(180deg, rgba(139,92,246,.35), rgba(139,92,246,.22));
  box-shadow: 0 0 0 2px rgba(139,92,246,.18);
}
.nice-form input[type="checkbox"]:checked::after{ opacity: 1; transform: scale(1); }

/* Datetime input – sjednocení výšky */
.nice-form input[type="datetime-local"].form-control {
  padding-left: 56px;
  height: 46px;
}

/* Tlačítka v nice-form (news formulář) */
.nice-form .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;          /* menší výška i šířka */
  font-size: 0.85rem;         /* menší text */
  line-height: 1.2;
  width: auto;                /* přepíše globální width:100% */
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,.45);
  background: linear-gradient(180deg, rgba(139,92,246,.28), rgba(139,92,246,.18));
  color: #eaf0ff;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease;
}

.nice-form .btn:hover {
  box-shadow: 0 4px 16px rgba(139,92,246,.18);
}
.nice-form .btn:active {
  transform: translateY(1px);
}

.nice-form .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;          /* menší */
  font-size: 0.85rem;
  line-height: 1.2;
  width: auto;                /* taky ne přes celou šířku */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #dfe7ff;
  text-decoration: none;
}

.nice-form .btn-ghost:hover {
  background: rgba(255,255,255,.06);
}

.nice-form .btn-ghost.danger {
  border-color: var(--danger);
  background: linear-gradient(180deg, rgba(255,77,109,.35), rgba(255,77,109,.22));
  color: #ffd6dd;
}

.nice-form .btn-ghost.danger:hover {
  box-shadow: 0 6px 20px rgba(255,77,109,.35);
  background: linear-gradient(180deg, rgba(255,77,109,.45), rgba(255,77,109,.30));
}

/* Zelené tlačítko Uložit */
.nice-form .btn.btn-save {
  border-color: rgba(0,255,105,.55);
  background: linear-gradient(180deg, rgba(0,255,105,.35), rgba(0,255,105,.22));
  color: #d9ffe9;
}

.nice-form .btn.btn-save:hover {
  box-shadow: 0 6px 20px rgba(0,255,105,.35);
  background: linear-gradient(180deg, rgba(0,255,105,.45), rgba(0,255,105,.30));
}


/* Responsivita */
@media (max-width: 820px){
  .nice-form .field-2col { grid-template-columns: 1fr; }
  .nice-form textarea.form-control { min-height: 180px; }
}

.clock {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;            /* zarovnání doprava, vypadá líp v topbaru */
  line-height: 1.15;
  /* všechny číslice stejná šířka (Inter to umí) */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  /* rezervuj místo pro nejdelší variantu (bez skákání) */
  min-width: 34ch;                  /* můžeš klidně upravit na 36–40ch */
  white-space: nowrap;              /* jeden řádek na čas */
}

.clock .clockMain {
  /* hlavní řádek s datem a časem */
  font-weight: 600;
}

.clock .nameday {
  /* svátek – menší, jemnější text */
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 2px;
}

.kpi.status-active {
  color: #7CFF9F;
  background: rgba(0,255,105,0.07);
  border: 1px solid rgba(0,255,105,0.2);
}

/* 🔴 Neaktivní */
.kpi.status-inactive {
  color: #ff7979;
  background: rgba(255,0,0,0.07);
  border: 1px solid rgba(255,0,0,0.25);
}

    .table{width:100%; border-collapse:separate; border-spacing:0 10px}
    .table-header{display:grid; grid-template-columns: 80px 1.5fr 130px 130px 220px 180px 200px; gap:10px; padding:0 6px 8px 6px; color:#cfe1ff; font-weight:700}
    .row{display:grid; grid-template-columns: 80px 1.5fr 130px 130px 220px 180px 200px; gap:10px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 10px}
    @media (max-width: 1100px){
      .table-header{display:none}
      .row{grid-template-columns: 1fr; align-items:flex-start}
      .row > div{padding:6px 2px}
    }
    .idpill{display:inline-block; min-width:36px; text-align:center; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
    .btn-ghost{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:10px; display:inline-flex; align-items:center; gap:8px; cursor:pointer}
    .btn-ghost:hover{background:rgba(255,255,255,.08)}
    .muted{color:#9aa3b2}
    .tag{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); font-weight:600}
    .tag.ok{border-color:rgba(0,255,213,.35); background:linear-gradient(90deg, rgba(0,255,213,.16), rgba(91,124,250,.10))}
    .tag.warn{border-color:rgba(255,215,0,.35); background:linear-gradient(90deg, rgba(255,215,0,.20), rgba(255,255,255,.06))}
    .tag.off{opacity:.75}
    .news-form .form-control{width:100%}
    .news-form textarea.form-control{min-height:160px; resize:vertical}
    .field-2col{display:grid; grid-template-columns: 1fr 1fr; gap:12px}


    .news-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.news-form-subtitle {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.news-form .field-editor .form-control {
  min-height: 260px;
}

/* checkbox-pill – jedna pilulka, input schovaný */
.checkbox-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

/* schovat nativní checkbox, necháme ho jen pro logiku */
.checkbox-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* samotná „pilulka“ */
.checkbox-pill span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  color: #eaf0ff;
  transition: 0.18s background, 0.18s border-color, 0.18s box-shadow, 0.18s transform;
}

/* ikonka uvnitř pilulky */
.checkbox-pill span i {
  font-size: 0.9rem;
}

/* stav: zaškrtnuto → zvýraznit pilulku */
/* ZELENÝ CHECKBOX KDYŽ JE AKTIVNÍ */
.checkbox-pill input[type="checkbox"]:checked {
  border-color: rgba(0,255,105,.9);
  background: linear-gradient(180deg, rgba(0,255,105,.45), rgba(0,255,105,.25));
  box-shadow: 0 0 0 2px rgba(0,255,105,.25);
}

.checkbox-pill input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
  color: #eafff3;
}

/* ZELENÝ PILL TEXT KDYŽ JE CHECK */
.checkbox-pill input[type="checkbox"]:checked + span {
  background: linear-gradient(180deg, rgba(0,255,105,.35), rgba(0,255,105,.18));
  border-color: rgba(0,255,105,.8);
  color: #d9ffe9;
  box-shadow: 0 0 10px rgba(0,255,105,.25);
}

/* wrapper pro více přepínačů vedle sebe */
.field-inline-switches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* když je checkbox zaškrtnutý, základní zelený background */
.checkbox-pill input[type="checkbox"]:checked + span{
  border-color: rgba(0,255,105,.6);
  background: linear-gradient(180deg, rgba(0,255,105,.25), rgba(0,255,105,.15));
  color:#dfffe9;
}

/* class pro „ON“ stav – používáme i při načtení z PHP */
.checkbox-pill span.is-on{
  border-color: rgba(0,255,105,.6);
  background: linear-gradient(180deg, rgba(0,255,105,.25), rgba(0,255,105,.15));
  color:#dfffe9;
}

/* ===== Quill editor ve formuláři novinek ===== */

.news-form .field-editor {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}

/* toolbar nahoře – stejné barvy jako ostatní prvky */
.news-form .field-editor .ql-toolbar.ql-snow {
  border: none;
  padding: 6px 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
  );
}

/* container = vnitřek editoru */
.news-form .field-editor .ql-container.ql-snow {
  border: none;
  background: transparent;
}

/* samotný text v editoru */
.news-form .field-editor .ql-editor {
  min-height: 200px;
  padding: 10px 12px 14px;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* placeholder v editoru */
.news-form .field-editor .ql-editor.ql-blank::before {
  color: #b8c3da;
  opacity: .9;
  font-style: normal;
}

/* barvy ikonek / textu v toolbaru */
.news-form .field-editor .ql-snow .ql-picker,
.news-form .field-editor .ql-snow .ql-picker-label,
.news-form .field-editor .ql-snow .ql-picker-item,
.news-form .field-editor .ql-snow .ql-toolbar button {
  color: #eaf0ff;
}

.news-form .field-editor .ql-snow .ql-stroke {
  stroke: #eaf0ff;
}

.news-form .field-editor .ql-snow .ql-fill {
  fill: #eaf0ff;
}

.news-form .field-editor .ql-snow .ql-picker-options {
  background: rgba(11,13,16,0.98);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
}

/* hover stav v toolbaru */
.news-form .field-editor .ql-toolbar button:hover,
.news-form .field-editor .ql-toolbar button.ql-active,
.news-form .field-editor .ql-snow .ql-picker-label.ql-active {
  background: rgba(255,255,255,.06);
}

/* focus efekt jako u ostatních inputů */
.news-form .field-editor:focus-within {
  border-color: rgba(139,92,246,.45);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.18),
    0 10px 25px rgba(0,0,0,.25) inset;
  background: rgba(255,255,255,.06);
}


/* === NOVINKY – kompaktnější vzhled === */

/* samotná karta Novinky */
.card-content.news-wrapper{
  padding: 14px 18px;                 /* menší vnitřní odsazení */
}

/* nadpis "Novinky" */
.card-content.news-wrapper > h3{
  margin: 0 0 8px;
  font-size: 0.9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239,242,255,.78);
}

/* jedna novinka / placeholder */
.news{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 14px;                 /* menší než předtím */
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: .2s ease;
}

.news:hover{
  border-color: rgba(91,124,250,.45);
  box-shadow: 0 6px 20px rgba(91,124,250,.18);
  transform: translateY(-2px);
}

/* připnutá novinka – jemné zvýraznění */
.news.pinned{
  background: linear-gradient(135deg, rgba(80,118,254,0.22), rgba(80,118,254,0.08));
  border-color: rgba(80,118,254,0.55);
  box-shadow: 0 0 8px rgba(80,118,254,0.3);
}

.news.pinned i.fa-thumbtack{
  color: #7fa5ff;
}

/* řádek s titulkem */
.news-title{
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* text článku */
.news-body{
  font-size: 0.88rem;
  line-height: 1.4;
  color: #c7cfe6;
}

/* spodní řádek s datem / autorem */
.news-time{
  font-size: 0.76rem;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
}

/* info o úpravě článku */
.news-updated{
  color: #ffd27f77;
  font-weight: 500;
}

/* ===== Správa novinek – tabulka ===== */

.news-admin-card {
  padding-top: 18px;
}

.news-admin-headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.news-admin-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.news-admin-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px dashed rgba(255,255,255,.14);
  color: #d3ddff;
  margin-top: 6px;
}

.news-admin-empty i {
  font-size: 1.2rem;
  opacity: .9;
}

.news-admin-empty-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.news-admin-empty-text {
  font-size: 0.86rem;
  color: var(--muted);
}

/* Grid hlavička + řádky */

.news-admin-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.news-admin-header {
  display: grid;
  grid-template-columns: 80px 2.2fr 1.3fr 1.4fr 1.6fr;
  gap: 10px;
  padding: 4px 8px 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(239,242,255,.7);
}

.news-admin-header .text-right {
  text-align: right;
}

.news-admin-row {
  display: grid;
  grid-template-columns: 80px 2.2fr 1.3fr 1.4fr 1.6fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.08);
  transition: .22s ease;
}

.news-admin-row:hover {
  border-color: rgba(91,124,250,.45);
  box-shadow: 0 10px 26px rgba(91,124,250,.18);
  transform: translateY(-2px);
}

.news-admin-row.row-live {
  border-left: 3px solid rgba(0,255,105,.8);
}

.news-admin-row.row-draft {
  border-left: 3px solid rgba(255,255,255,.16);
}

/* buňka = jen pro čitelnost */

.news-admin-row .cell {
  min-width: 0;
}

.news-admin-title {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.news-admin-meta {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(239,242,255,.65);
}

.news-admin-meta span::before {
  content: "•";
  margin: 0 4px 0 0;
  opacity: .6;
}

.news-admin-meta span:first-child::before {
  content: "";
  margin: 0;
}

/* chip-y pro stav */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: #e9edff;
  white-space: nowrap;
}

.chip i {
  font-size: 0.8rem;
}

.chip-live {
  border-color: rgba(0,255,105,.45);
  background: linear-gradient(90deg, rgba(0,255,105,.18), rgba(0,0,0,.0));
  color: #b7ffd0;
}

.chip-draft {
  opacity: .85;
}

.chip-pin,
.chip-pin-small {
  border-color: rgba(255,215,0,.45);
  background: linear-gradient(90deg, rgba(255,215,0,.20), rgba(0,0,0,.0));
  color: #ffe9a6;
}

.chip-pin-small {
  padding: 3px 8px;
}

/* Akce – malá kulatá tlačítka */

.cell-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-ghost.btn-xs {
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 999px;
}

.btn-ghost.btn-xs i {
  font-size: 0.85rem;
}

.btn-danger-lite {
  border-color: rgba(255,77,109,.6);
  background: linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.14));
  color: #ffd6dd;
}

/* Responsivita – na menších šířkách stacked layout */

@media (max-width: 1100px) {
  .news-admin-header {
    display: none;
  }

  .news-admin-row {
    grid-template-columns: 64px 1fr;
    grid-auto-rows: min-content;
    align-items: flex-start;
  }

  .cell-id {
    grid-row: span 2;
  }

  .cell-main {
    grid-column: span 1;
  }

  .cell-author,
  .cell-status,
  .cell-actions {
    grid-column: span 2;
  }

  .cell-actions {
    justify-content: flex-start;
  }
}
/* drobný popisek u přepínačů */
.field-hint{
  margin:6px 0 0;
  font-size:0.8rem;
  color:var(--muted);
}


/* ===== Settings: Maintenance mód karta ===== */

.settings-maint {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 0 0, rgba(255,77,109,.18), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(91,124,250,.14), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.settings-maint-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.settings-maint-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}

.settings-maint-title i {
  color: var(--danger);
}

.settings-maint-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: .9;
}

.settings-maint-toggle {
  white-space: nowrap;
}

.settings-maint-text {
  min-height: 120px;
  resize: vertical;
  margin-top: 6px;
}

/* menší label pod kartou */
.settings-maint .field-label.small {
  font-size: 0.8rem;
  margin-top: 4px;
  margin-bottom: 2px;
}

/* ===== Maintenance / devmode banner ===== */
.devmode-banner{
  position: sticky;                         /* drží se při scrollu */
  top: var(--topbar-h);                     /* přesně pod topbarem */
  z-index: 950;

  margin-bottom: 16px;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-radius: 12px;
  border: 1px solid rgba(255, 184, 76, 0.7);
  background: linear-gradient(90deg,
    rgba(255, 184, 76, 0.22),
    rgba(255, 107, 107, 0.22)
  );
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.devmode-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 184, 76, 0.18);
  border: 1px solid rgba(255, 184, 76, 0.9);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffe8c2;
}

.devmode-pill i{
  color: #ffd28a;
}

.devmode-text{
  font-size: 0.9rem;
  color: #ffe8c2;
  opacity: 0.95;
}

/* ČERVENÝ BANNER PRO ZAMKNUTÉ PŘIHLÁŠENÍ */
.login-lock-banner {
  max-width: 980px;
  margin: 8px auto 0;
  padding: 10px 14px;
  border-radius: 14px;

  display: flex;
  align-items: flex-start;
  gap: 10px;

  /* skleněný / error look */
  background: rgba(255, 77, 109, 0.12);         /* lehce červené pozadí */
  border: 1px solid rgba(255, 77, 109, 0.7);    /* výrazná červená hrana */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

  color: #ffe5ea;                               /* světlejší text */
  font-size: 0.88rem;
}

/* ikonka vlevo */
.login-lock-banner i.fa-lock {
  margin-top: 2px;
  font-size: 0.95rem;
  color: #ff8ba1;                               /* růžovo-červená */
}

/* tučný text “Přihlášení pozastaveno” */
.login-lock-banner strong {
  color: #fff0f3;
  font-weight: 600;
}

/* text za strongem, ať není nalepený */
.login-lock-banner span {
  opacity: 0.9;
}

/* ===== TODO LIST ===== */

/* řádek s prioritou, stavem a progressbarem ve formuláři */
.todo-form-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:4px;
}
.todo-form-col .field-label{
  margin:0 0 4px;
  font-weight:600;
  color:#cfe1ff;
  font-size:0.85rem;
}
@media (max-width: 820px){
  .todo-form-row{
    grid-template-columns:1fr;
  }
}





/* malé ghost buttony */
.btn-ghost.btn-xs{
  padding:6px 10px;
  font-size:0.8rem;
  border-radius:999px;
}
.btn-danger-lite{
  border-color:rgba(255,77,109,.6);
  background:linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.14));
  color:#ffd6dd;
}

.form-control-select{
  appearance:none;
  padding-right:40px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  position:relative;
}

/* šipka */
.form-control-select{
  background-image:
    linear-gradient(45deg, #cfe1ff 50%, transparent 50%),
    linear-gradient(-45deg, #cfe1ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 10px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
}

/* ===== SELECT – dark styl pro Prioritu / Stav v TODO ===== */

.form-control-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-left: 14px;
  padding-right: 34px;

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.98));
  color: #eaf0ff;

  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
}

/* šipka vpravo – pseudo „custom“ */
.form-control-select {
  background-image:
    linear-gradient(45deg, rgba(148,163,255,.9) 50%, transparent 50%),
    linear-gradient(135deg, rgba(148,163,255,.9) 50%, transparent 50%),
    linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.98));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
}

/* focus ring */
.form-control-select:focus {
  outline: none;
  border-color: rgba(91,124,250,.75);
  box-shadow: 0 0 0 3px rgba(91,124,250,.30);
}

/* samotný seznam options v dropdownu (Chrome, Edge, atd.) */
.form-control-select option {
  background: #050812;
  color: #eaf0ff;
}

/* vybraný option */
.form-control-select option:checked,
.form-control-select option:focus {
  background: linear-gradient(90deg, rgba(91,124,250,.55), rgba(0,255,213,.25));
  color: #ffffff;
}

/* ===========================
   TO-DO LIST – layout karet
=========================== */

.todo-card {
  margin-top: 18px;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.06),
    rgba(10,16,32,0.96)
  );
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}

/* jemné zvýraznění podle stavu (levý barevný proužek) */
.todo-row.todo-status-todo {
  border-left: 3px solid rgba(139,92,246,0.7);
}
.todo-row.todo-status-progress {
  border-left: 3px solid rgba(0,180,255,0.8);
}
.todo-row.todo-status-testing {
  border-left: 3px solid rgba(255,215,0,0.85);
}
.todo-row.todo-status-done {
  border-left: 3px solid rgba(0,255,150,0.9);
}

.todo-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* horní řádek – text vlevo, progress vpravo */
.todo-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.todo-header-text {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.todo-title {
  font-weight: 700;
  font-size: 1rem;
}

.todo-desc {
  font-size: 0.9rem;
  color: #c7cfe6;
}

.todo-meta-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.todo-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  padding-top: 8px;
}

.todo-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.todo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-prio {
  border-color: rgba(139,92,246,0.45);
  background: linear-gradient(90deg,
    rgba(139,92,246,0.30),
    rgba(80,118,254,0.18)
  );
}

/* ===========================
   KULATÝ PROGRESS
=========================== */

.progress-circle {
  --p: 0;                 /* procenta 0–100 (inline style) */
  --size: 64px;
  --track: rgba(255,255,255,0.07);
  --bg-inner: rgba(4,7,14,0.95);
  --accent: #5b7cfa;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    conic-gradient(
      var(--accent) calc(var(--p) * 1%),
      var(--track) 0
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.6);
}

.progress-circle-inner {
  width: calc(var(--size) - 10px);
  height: calc(var(--size) - 10px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.06),
    var(--bg-inner)
  );
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 8px 18px rgba(0,0,0,0.7);
}

.progress-circle-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: #eaf0ff;
  font-variant-numeric: tabular-nums;
}

/* barvy podle stavu/procent */
.progress-circle-low {
  --accent: #ff4d6d;
}

.progress-circle-mid {
  --accent: #ffd166;
}

.progress-circle-ok {
  --accent: #44ff9a;
}

/* menší varianta na mobilech */
@media (max-width: 720px) {
  .progress-circle {
    --size: 54px;
  }

  .todo-row {
    padding: 12px 12px;
  }

  .todo-header-line {
    align-items: flex-start;
  }
}

/* === DARK SELECTS PRO CELÝ INTRANET === */

/* základní vzhled selectu */
.dashboard-page select.form-control,
.dashboard-page select.form-control-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  color: #eaf0ff;
  padding: 12px 12px 12px 52px; 
  font-size: 0.9rem;
  outline: none;
}

/* fokus efekt */
.dashboard-page select.form-control:focus,
.dashboard-page select.form-control-select:focus {
  border-color: rgba(91,124,250,.75);
  box-shadow: 0 0 0 3px rgba(91,124,250,.28);
}

/* samotné položky v rozbaleném menu */
.dashboard-page select.form-control option,
.dashboard-page select.form-control-select option {
  background-color: #05060a;      /* tmavé pozadí */
  color: #eaf0ff;                 /* světlý text */
}

/* pro případ optgroup */
.dashboard-page select.form-control optgroup,
.dashboard-page select.form-control-select optgroup {
  background-color: #05060a;
  color: #9aa3b2;
}

/* schovat defaultní šipku v Edge/IE (kdyby někde byl) */
.dashboard-page select.form-control::-ms-expand,
.dashboard-page select.form-control-select::-ms-expand {
  display: none;
}

/* Webhook – layout polí */
.webhook-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto auto;
  gap: 16px 20px;
  align-items: flex-start;
}

.webhook-fields .field-wide {
  grid-column: 1 / -1;
}

/* Textarea – stejný vzhled jako inputy */
.dashboard-page textarea.form-control {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(8,12,24,0.8);
  color: #eaf0ff;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 56px;
}

.dashboard-page textarea.form-control:focus {
  outline: none;
  border-color: #5076fe;
  box-shadow: 0 0 0 1px rgba(80,118,254,0.4);
}

/* Barva embedu – řádek */
.webhook-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Color picker */
.webhook-color-input {
  width: 44px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  cursor: pointer;
}

/* Hex input vedle color pickeru */
.webhook-color-hex-wrap {
  position: relative;
  flex: 1;
}

.webhook-color-hex-wrap .field-icon-small {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: rgba(234,240,255,0.55);
  pointer-events: none;
}

.webhook-color-hex-wrap .form-control.webhook-color-hex {
  padding-left: 22px;
}

/* Trochu menší odstup hintů */
.webhook-card .field-hint {
  margin-top: 4px;
  font-size: 0.75rem;
  color: rgba(234,240,255,0.6);
}

/* backdrop */
#loginLockModal.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

#loginLockModal.modal-backdrop.is-open {
  display: flex;
}

/* karta modalu */
#loginLockModal .modal-card {
  max-width: 420px;
  width: 100%;
  padding: 20px 22px;
  border-radius: 18px;
  background: radial-gradient(circle at top left,
              rgba(254, 80, 80, 0.2) 0,
              rgba(26, 8, 8, 0.95) 55%);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

#loginLockModal .modal-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

#loginLockModal .modal-title i {
  color: #f25858;
}



#loginLockModal .modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#loginLockModal small {
  color: #686868;
}

/* ===== Logout button v sidebaru ===== */
.sidebar-logout{
  margin-top: 14px;
  padding-top: 10px;
  /*border-top: 1px solid rgba(255,255,255,.10);*/
}

.sidebar-logout-btn{
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  background:linear-gradient(180deg, rgba(255,77,109,.25), rgba(255,77,109,.18));
  border-color:var(--danger);
  box-shadow: 0 14px 32px rgba(0,0,0,.65);
  font-weight: 700;
  text-decoration: none;
}

.sidebar-logout-btn i{
  font-size: 0.95rem;
}

.sidebar-logout-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.8);
  background:linear-gradient(180deg, rgba(255,77,109,.25), rgba(255,77,109,.18));
  border-color:var(--danger);
}

.sidebar-logout-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(0,0,0,.7);
}

/* ===================================================
   SNOW OVERLAY (bílé tečky) – toggle přes setting_key = snow
   =================================================== */
    /* ✅ SNOW overlay */
    .snow-layer{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      overflow: hidden;
    }
    .snowflake{
      position: absolute;
      top: -10px;
      width: var(--s, 6px);
      height: var(--s, 6px);
      border-radius: 50%;
      background: rgba(255,255,255,var(--a,.85));
      filter: blur(.2px);
      box-shadow: 0 0 6px rgba(255,255,255,.20);
      transform: translate3d(0,0,0);
      animation: snow-fall var(--d, 8s) linear infinite;
    }
    @keyframes snow-fall{
      0%   { transform: translate3d(0, -12px, 0); opacity: 0; }
      5%   { opacity: 1; }
      100% { transform: translate3d(var(--x, 0px), 110vh, 0); opacity: 0.95; }
    }
    /* trošku utlumené při modalu, aby nerušil */
    .modal-backdrop.is-open ~ .snow-layer { opacity: .85; }

/* quick toggle */
.quick-setting-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.quick-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition: .2s transform, .2s background, .2s border-color, .2s box-shadow;
}
.quick-toggle:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(91,124,250,.16);
  transform: translateY(-1px);
}
.quick-toggle input{
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  margin: 0;
}
.quick-toggle i{
  color: #cfe1ff;
  opacity: .95;
}

/* ===== Pretty scrollbar (Day panel) ===== */
.day-panel-body{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(129,140,248,.75) rgba(255,255,255,.06);
}

/* Chrome / Edge / Safari */
.day-panel-body::-webkit-scrollbar{
  width: 10px;
}
.day-panel-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}
.day-panel-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(129,140,248,.95), rgba(56,189,248,.75));
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.75); /* “oddělí” thumb od tracku */
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.day-panel-body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(99,102,241,.98), rgba(34,211,238,.85));
}



    .search{
      display:flex;align-items:center;gap:10px;
      padding:10px 12px;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(15,23,42,.45);
      min-width: 360px;
    }
    .search input{width:100%;background:transparent;border:0;color:#fff;outline:none}
    @media (max-width: 860px){ .search{min-width: 240px} }

.menu-badge{
  font-size: .78rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}

.menu-badge.is-hot{
  background: rgba(255, 193, 7, .14);     /* jemná “warning” */
  border-color: rgba(255, 193, 7, .30);
  color: rgba(255, 230, 160, .95);
}