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

:root {
    --brand-900:#1e1b4b; --brand-800:#312e81; --brand-700:#3730a3; --brand-600:#4338ca;
    --brand-500:#4f46e5; --brand-400:#6366f1; --brand-300:#a5b4fc; --brand-200:#c7d2fe;
    --brand-100:#e0e7ff; --brand-50:#eef2ff;
    --accent:#0ea5e9; --accent-100:#e0f2fe;
    --gray-900:#0f172a; --gray-800:#1e293b; --gray-700:#334155; --gray-600:#475569;
    --gray-500:#64748b; --gray-400:#94a3b8; --gray-300:#cbd5e1; --gray-200:#e2e8f0;
    --gray-100:#f1f5f9; --gray-50:#f8fafc; --white:#fff;
    --red-600:#dc2626; --red-500:#ef4444; --red-100:#fee2e2;
    --green-600:#16a34a; --green-500:#22c55e; --green-100:#dcfce7;
    --amber-600:#d97706; --amber-500:#f59e0b; --amber-100:#fef3c7;
    --blue-500:#3b82f6; --blue-100:#dbeafe;
    --shadow-sm:0 1px 3px rgba(15,23,42,.08); --shadow:0 4px 16px rgba(15,23,42,.10);
    --shadow-lg:0 12px 40px rgba(15,23,42,.16); --shadow-brand:0 6px 20px rgba(79,70,229,.28);
    --radius:10px; --radius-lg:16px; --radius-xl:24px;
    --font:'Plus Jakarta Sans',system-ui,sans-serif; --font-display:'Outfit',sans-serif;
}

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

/* NAVBAR */
.navbar{background:var(--brand-900);padding:0 1.75rem;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(15,23,42,.25);}
.navbar-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.navbar-brand .logo-mark{width:38px;height:38px;flex:none;}
.navbar-brand-text{font-family:var(--font-display);font-size:1.3rem;font-weight:800;letter-spacing:.02em;color:#fff;line-height:1;}
.navbar-brand-text span{color:var(--brand-300);}
.navbar-nav{display:flex;align-items:center;gap:.15rem;list-style:none;}
.navbar-nav a{color:rgba(255,255,255,.72);text-decoration:none;padding:.4rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;transition:all .15s;}
.navbar-nav a:hover,.navbar-nav a.active{background:rgba(255,255,255,.12);color:#fff;}
.navbar-user{display:flex;align-items:center;gap:.7rem;font-size:.85rem;}
.navbar-user strong{color:#fff;font-weight:600;}

/* LAYOUT */
.layout{display:flex;flex:1;padding-left:250px;}
.sidebar{width:250px;background:var(--white);border-right:1px solid var(--gray-200);padding:1.5rem 0;flex-shrink:0;position:fixed;top:64px;left:0;height:calc(100vh - 64px);overflow-y:auto;z-index:50;}
.sidebar-inner{display:flex;flex-direction:column;min-height:100%;}
.sidebar-section{margin-bottom:1rem;}
.sidebar-title{font-size:.67rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);padding:0 1.35rem .35rem;}
.sidebar-nav{list-style:none;}
.sidebar-nav a{display:flex;align-items:center;gap:.7rem;padding:.5rem 1.35rem;color:var(--gray-600);text-decoration:none;font-size:.925rem;font-weight:600;transition:all .12s;border-left:3px solid transparent;}
.sidebar-nav a:hover{background:var(--brand-50);color:var(--brand-700);border-left-color:var(--brand-300);}
.sidebar-nav a.active{background:var(--brand-50);color:var(--brand-700);border-left-color:var(--brand-500);}
.nav-ico{flex:none;width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-100);transition:all .14s;color:var(--brand-600);}
.nav-ico svg{width:17px;height:17px;}
.sidebar-nav a:hover .nav-ico{background:var(--brand-100);box-shadow:inset 0 0 0 1px var(--brand-300);}
.sidebar-nav a.active .nav-ico{background:var(--brand-600);box-shadow:inset 0 0 0 1px var(--brand-600);color:#fff;transform:translateY(-1px);}
.main{flex:1;padding:1.9rem 2.3rem;overflow:auto;min-width:0;}

/* PAGE HEADER */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.75rem;gap:1rem;flex-wrap:wrap;}
.page-title{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--brand-900);letter-spacing:-.01em;line-height:1.1;}
.page-subtitle{color:var(--gray-500);font-size:.9rem;margin-top:.25rem;}
.page-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}

/* CARDS */
.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden;}
.card-header{padding:1rem 1.4rem;border-bottom:1px solid var(--gray-100);font-weight:700;font-size:.95rem;color:var(--gray-800);display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--gray-50);}
.card-body{padding:1.4rem;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.15rem;border-radius:var(--radius);font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;border:none;text-decoration:none;transition:all .15s;line-height:1.4;white-space:nowrap;}
.btn svg{width:16px;height:16px;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand-500);color:#fff;box-shadow:var(--shadow-brand);}
.btn-primary:hover{background:var(--brand-600);}
.btn-secondary{background:var(--white);color:var(--gray-700);border:1px solid var(--gray-300);}
.btn-secondary:hover{background:var(--gray-100);}
.btn-danger{background:var(--red-100);color:#991b1b;}
.btn-danger:hover{background:var(--red-500);color:#fff;}
.btn-success{background:var(--green-100);color:#166534;}
.btn-success:hover{background:var(--green-500);color:#fff;}
.btn-sm{padding:.32rem .8rem;font-size:.82rem;border-radius:7px;}
.btn-lg{padding:.8rem 1.8rem;font-size:1.02rem;border-radius:var(--radius-lg);}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ACTION ICONS */
.action-btn{width:34px;height:34px;padding:0;flex:0 0 auto;border:none;border-radius:50%;background:transparent;color:#94a3b8;display:inline-grid;place-items:center;cursor:pointer;text-decoration:none;transition:all .15s;line-height:0;}
.action-btn:hover{transform:scale(1.12);}
.action-btn--detail:hover{background:var(--brand-100);color:var(--brand-600);}
.action-btn--edit:hover{background:var(--blue-100);color:#2563eb;}
.action-btn--delete:hover{background:var(--red-100);color:#dc2626;}
.action-btn--send:hover{background:var(--green-100);color:#16a34a;}
.action-group{display:inline-flex;gap:2px;align-items:center;}
.action-group form{display:inline;margin:0;}
@media(hover:none){.action-btn{width:40px;height:40px;}}

/* FORMS */
.form-group{margin-bottom:1.25rem;}
.form-label{display:block;font-size:.85rem;font-weight:700;color:var(--gray-700);margin-bottom:.4rem;}
.form-hint{font-size:.78rem;color:var(--gray-400);margin-top:.3rem;}
.form-control{width:100%;padding:.6rem .9rem;border:1.5px solid var(--gray-300);border-radius:var(--radius);font-family:var(--font);font-size:.93rem;color:var(--gray-900);background:var(--white);transition:border-color .15s,box-shadow .15s;outline:none;}
.form-control:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(79,70,229,.15);}
select.form-control{cursor:pointer;}
textarea.form-control{resize:vertical;min-height:90px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;}
.checkbox-row{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--gray-700);cursor:pointer;}
.checkbox-row input{width:17px;height:17px;accent-color:var(--brand-500);cursor:pointer;}

/* TABLES */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.92rem;}
thead th{background:var(--gray-50);padding:.7rem 1.05rem;text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);border-bottom:2px solid var(--gray-200);}
tbody td{padding:.8rem 1.05rem;border-bottom:1px solid var(--gray-100);color:var(--gray-700);vertical-align:middle;}
tbody tr:hover{background:var(--brand-50);}
tbody tr:last-child td{border-bottom:none;}
.table-empty{text-align:center;padding:3rem 1rem;color:var(--gray-400);}

/* ALERTS */
.alert{padding:.85rem 1.1rem;border-radius:var(--radius);font-size:.9rem;margin-bottom:1.4rem;display:flex;align-items:center;gap:.55rem;border-left:4px solid;}
.alert-success{background:var(--green-100);color:#166534;border-color:var(--green-500);}
.alert-danger{background:var(--red-100);color:#991b1b;border-color:var(--red-500);}
.alert-error{background:var(--red-100);color:#991b1b;border-color:var(--red-500);}
.alert-warning{background:var(--amber-100);color:#92400e;border-color:var(--amber-500);}
.alert-info{background:var(--brand-50);color:var(--brand-800);border-color:var(--brand-400);}

/* BADGES */
.badge{display:inline-block;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;}
.badge-brand{background:var(--brand-100);color:var(--brand-700);}
.badge-blue{background:var(--blue-100);color:#1e40af;}
.badge-green{background:var(--green-100);color:#166534;}
.badge-red{background:var(--red-100);color:#991b1b;}
.badge-amber{background:var(--amber-100);color:#92400e;}
.badge-gray{background:var(--gray-100);color:var(--gray-600);}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.15rem;margin-bottom:1.75rem;}
.stat-card{background:var(--white);border-radius:var(--radius-lg);padding:1.35rem 1.4rem;border:1px solid var(--gray-200);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-500);}
.stat-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-400);margin-bottom:.45rem;}
.stat-value{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--brand-900);line-height:1;}
.stat-sub{font-size:.8rem;color:var(--gray-500);margin-top:.35rem;}
.stat-card.accent{background:var(--brand-900);border-color:var(--brand-800);}
.stat-card.accent::before{background:var(--brand-400);}
.stat-card.accent .stat-label{color:var(--brand-300);}
.stat-card.accent .stat-value{color:#fff;}
.stat-card.accent .stat-sub{color:rgba(255,255,255,.5);}
.stat-card.green::before{background:var(--green-500);} .stat-card.green .stat-value{color:#166534;}
.stat-card.amber::before{background:var(--amber-500);} .stat-card.amber .stat-value{color:#92400e;}
.stat-card.red::before{background:var(--red-500);} .stat-card.red .stat-value{color:#991b1b;}

/* PROGRESS BAR */
.progress{height:9px;background:var(--gray-200);border-radius:999px;overflow:hidden;}
.progress-bar{height:100%;background:var(--brand-500);border-radius:999px;transition:width .4s;}
.progress-bar.green{background:var(--green-500);} .progress-bar.blue{background:var(--blue-500);}
.progress-bar.red{background:var(--red-500);} .progress-bar.amber{background:var(--amber-500);}

/* FILTR PANEL + LIST (klienti) */
.split{display:grid;grid-template-columns:270px 1fr;gap:1.4rem;align-items:start;}
.filter-panel{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.25rem;position:sticky;top:80px;}
.filter-panel h3{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);margin-bottom:.7rem;}
.filter-group{margin-bottom:1.3rem;}
.filter-list{list-style:none;display:flex;flex-direction:column;gap:.15rem;}
.filter-list a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .65rem;border-radius:8px;text-decoration:none;color:var(--gray-700);font-size:.9rem;font-weight:600;transition:all .12s;}
.filter-list a:hover{background:var(--brand-50);color:var(--brand-700);}
.filter-list a.active{background:var(--brand-500);color:#fff;}
.filter-list a.active .filter-count{background:rgba(255,255,255,.25);color:#fff;}
.filter-count{background:var(--gray-100);color:var(--gray-500);font-size:.72rem;font-weight:700;border-radius:999px;padding:.05rem .5rem;min-width:24px;text-align:center;}
.filter-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;}

/* FILTR SCROLL (dlouhý seznam skupin) */
.filter-scroll{max-height:340px;overflow-y:auto;}
.filter-scroll::-webkit-scrollbar{width:8px;}
.filter-scroll::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px;}

/* PAGINATION */
.pager{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;justify-content:center;padding:1rem;border-top:1px solid var(--gray-100);}
.pager .pg{min-width:34px;text-align:center;padding:.35rem .6rem;border:1px solid var(--gray-200);border-radius:8px;text-decoration:none;color:var(--gray-700);font-size:.85rem;font-weight:600;background:var(--white);transition:all .12s;}
.pager .pg:hover{background:var(--brand-50);border-color:var(--brand-300);color:var(--brand-700);}
.pager .pg.is-current{background:var(--brand-500);border-color:var(--brand-500);color:#fff;}
.pager .pg.disabled{opacity:.4;pointer-events:none;}
.pager .pg-dots{padding:0 .2rem;color:var(--gray-400);}

/* TOOLBAR */
.toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.toolbar .search{flex:1;min-width:180px;position:relative;}
.toolbar .search input{width:100%;padding:.55rem .9rem .55rem 2.3rem;border:1.5px solid var(--gray-300);border-radius:var(--radius);font-family:var(--font);font-size:.9rem;outline:none;}
.toolbar .search input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(79,70,229,.15);}
.toolbar .search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--gray-400);}

/* COMPOSE */
.compose-grid{display:grid;grid-template-columns:1fr 320px;gap:1.4rem;align-items:start;}
.editor-shell .ql-toolbar.ql-snow{border-radius:var(--radius) var(--radius) 0 0;border-color:var(--gray-300);background:var(--gray-50);}
.editor-shell .ql-container.ql-snow{border-radius:0 0 var(--radius) var(--radius);border-color:var(--gray-300);min-height:340px;font-family:var(--font);font-size:.95rem;}
.editor-shell .ql-editor{min-height:340px;}
.chip-select{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border:1.5px solid var(--gray-300);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--gray-600);cursor:pointer;user-select:none;transition:all .12s;}
.chip input{display:none;}
.chip:hover{border-color:var(--brand-400);}
.chip.checked{background:var(--brand-500);border-color:var(--brand-500);color:#fff;}
.attach-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .7rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;font-size:.85rem;margin-bottom:.4rem;}
.editor-shell .ql-editor img{max-width:100%;cursor:pointer;}
.editor-shell .ql-editor img.img-selected{outline:3px solid var(--brand-400);outline-offset:2px;}
/* Plovoucí panel pro obrázek */
.img-tools{position:absolute;z-index:9999;display:flex;align-items:center;gap:.25rem;background:var(--brand-900);color:#fff;padding:.3rem .4rem;border-radius:9px;box-shadow:var(--shadow-lg);}
.img-tools .it-grp{display:flex;gap:.15rem;}
.img-tools .it-sep{width:1px;height:20px;background:rgba(255,255,255,.2);margin:0 .2rem;}
.img-tools button{background:rgba(255,255,255,.1);border:none;color:#fff;font-family:var(--font);font-size:.75rem;font-weight:600;padding:.3rem .5rem;border-radius:6px;cursor:pointer;line-height:1;transition:background .12s;}
.img-tools button:hover{background:var(--brand-500);}
.img-tools button.it-del:hover{background:var(--red-500);}

/* LOGIN */
.login-wrap{flex:1;display:flex;align-items:stretch;background:var(--brand-900);}
.login-brand{flex:1;display:flex;flex-direction:column;justify-content:center;padding:3rem;color:#fff;background:radial-gradient(1200px 400px at 20% 10%,rgba(99,102,241,.35),transparent),var(--brand-900);}
.login-brand .logo-mark{width:64px;height:64px;margin-bottom:1.5rem;}
.login-brand h1{font-family:var(--font-display);font-size:2.6rem;font-weight:800;line-height:1.05;letter-spacing:-.01em;}
.login-brand h1 span{color:var(--brand-300);}
.login-brand p{margin-top:1rem;font-size:1.05rem;color:rgba(255,255,255,.72);max-width:420px;}
.login-points{margin-top:2rem;list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.login-points li{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:rgba(255,255,255,.85);}
.login-points li svg{width:18px;height:18px;color:var(--brand-300);flex:none;}
.login-form-col{width:460px;max-width:100%;background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:3rem;}
.login-form-col h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--brand-900);margin-bottom:.35rem;}
.login-form-col .sub{color:var(--gray-500);font-size:.9rem;margin-bottom:1.75rem;}

/* FOOTER */
footer{background:var(--brand-900);color:rgba(255,255,255,.45);text-align:center;padding:1.4rem;font-size:.8rem;}
body:has(.sidebar) footer{margin-left:250px;}
footer a{color:var(--brand-300);text-decoration:none;}

/* UTILITY */
.text-muted{color:var(--gray-500);} .text-center{text-align:center;} .text-right{text-align:right;}
.mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;}
.mb-1{margin-bottom:.5rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;}
.d-flex{display:flex;} .align-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:.5rem;} .gap-2{gap:1rem;} .flex-wrap{flex-wrap:wrap;}
.fw-bold{font-weight:700;} .w-100{width:100%;} .flex-1{flex:1;}
.muted-num{font-size:.8rem;color:var(--gray-400);}

/* Hamburger + drawer */
.navbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:.35rem .5rem;color:#fff;border-radius:6px;}
.navbar-toggle:hover{background:rgba(255,255,255,.1);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);z-index:199;}

/* ══ RESPONSIVE ══ */
@media(max-width:1100px){ .compose-grid{grid-template-columns:1fr;} }
@media(max-width:1024px){
    body{overflow-x:hidden;}
    .navbar{height:auto;min-height:56px;padding:.4rem 1rem;gap:.5rem;}
    .navbar-brand{flex:1;min-width:0;}
    .navbar-toggle{display:flex;align-items:center;margin-right:.5rem;}
    .navbar--auth .navbar-nav{display:none;}
    .sidebar{position:fixed;top:56px;left:0;height:calc(100vh - 56px);z-index:200;transform:translateX(-270px);transition:transform .25s ease;box-shadow:4px 0 20px rgba(15,23,42,.15);padding:1rem 0;}
    .sidebar.is-open{transform:translateX(0);}
    .sidebar-nav a{padding:.75rem 1.35rem;font-size:1rem;}
    .sidebar-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .25s;}
    .sidebar-overlay.is-open{opacity:1;pointer-events:auto;}
    .layout{display:block;padding-left:0;}
    .main{padding:1.15rem;}
    body:has(.sidebar) footer{margin-left:0;}
    .split{grid-template-columns:1fr;}
    .filter-panel{position:static;}
    .login-brand{display:none;}
    .login-form-col{width:100%;padding:2.25rem 1.5rem;}
    .form-row{grid-template-columns:1fr;}
    .page-title{font-size:1.55rem;}
}
@media(max-width:768px){
    .main{padding:.85rem;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    /* karetní tabulky */
    .table-wrap:not(.no-cards) table{display:block;}
    .table-wrap:not(.no-cards) thead{display:none;}
    .table-wrap:not(.no-cards) tbody{display:block;}
    .table-wrap:not(.no-cards) tbody tr{display:block;margin-bottom:.65rem;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);}
    .table-wrap:not(.no-cards) tbody tr:hover{background:#fff;}
    .table-wrap:not(.no-cards) tbody td{display:flex;align-items:center;gap:.65rem;padding:.5rem .9rem;border-bottom:1px solid var(--gray-100);font-size:.88rem;}
    .table-wrap:not(.no-cards) tbody td:last-child{border-bottom:none;}
    .table-wrap:not(.no-cards) tbody td[data-label]::before{content:attr(data-label);font-size:.67rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-400);min-width:90px;flex-shrink:0;}
    .table-wrap:not(.no-cards) tbody td:not([data-label]):has(.btn,button,form,.action-group){justify-content:flex-end;background:var(--gray-50);}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:1fr;}
    .navbar-user strong{display:none;}
    .page-title{font-size:1.35rem;}
}