/* ============================================================ banda – styly (mobile-first) Klubová barva se nastavuje inline: ============================================================ */ :root{ --ink:#15171C; --ink-soft:#3A3D45; --paper:#F6F5F1; --surface:#FFFFFF; --line:#E7E5DD; --line-strong:#D6D3C8; --muted:#83847C; --club:#0F766E; --c-trenink:#2563EB; --c-liga:#E11D48; --c-turnaj:#7C3AED; --c-spol:#F59E0B; --yes:#15803D; --no:#B91C1C; --admin:#C2410C; --radius:14px; --shadow:0 1px 2px rgba(20,23,28,.04), 0 8px 24px rgba(20,23,28,.06); --shadow-lg:0 12px 40px rgba(20,23,28,.14); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);background:var(--paper);line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit;font-size:inherit} button{cursor:pointer;border:none;background:none} img{max-width:100%;display:block} .mono{font-family:"Space Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .display{font-family:"Bricolage Grotesque","Inter",sans-serif} /* ---------- layout shell ---------- */ .shell{min-height:100vh;display:flex;flex-direction:column;padding-bottom:74px} @media(min-width:880px){ .shell{flex-direction:row;padding-bottom:0} } /* ---------- top bar (mobile) ---------- */ .appbar{ position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px; padding:12px 16px;background:var(--ink);color:#fff; } .appbar .logo{width:32px;height:32px;border-radius:9px;background:var(--club);display:grid;place-items:center; font-family:"Bricolage Grotesque";font-weight:800;color:#fff;font-size:18px;overflow:hidden;flex:none} .appbar .logo img{width:100%;height:100%;object-fit:cover} .appbar .ttl{font-family:"Bricolage Grotesque";font-weight:800;font-size:18px;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appbar .spacer{margin-left:auto} .appbar .ab-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08)} .appbar .ab-btn:hover{background:rgba(255,255,255,.16)} body.admin .appbar{background:#2A1206} body.admin .appbar .logo{background:var(--admin)} /* admin strip */ .admin-strip{background:var(--admin);color:#fff;font-size:12.5px;font-weight:600;padding:7px 16px;text-align:center} /* ---------- desktop sidebar ---------- */ .sidebar{display:none} @media(min-width:880px){ .appbar{display:none} .sidebar{ display:flex;flex-direction:column;width:248px;flex:none;background:var(--ink);color:#E9E9E6; position:sticky;top:0;height:100vh; } body.admin .sidebar{background:#1d130c} .sidebar .brand{display:flex;align-items:center;gap:10px;padding:20px} .sidebar .brand .logo{width:34px;height:34px;border-radius:9px;background:var(--club);display:grid;place-items:center; font-family:"Bricolage Grotesque";font-weight:800;color:#fff;font-size:19px;overflow:hidden} .sidebar .brand .logo img{width:100%;height:100%;object-fit:cover} body.admin .sidebar .brand .logo{background:var(--admin)} .sidebar .brand .nm{font-family:"Bricolage Grotesque";font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.1} .sidebar .brand .nm small{display:block;font-family:"Space Mono";font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8A8B86} .sidebar nav{flex:1;overflow:auto;padding:6px 12px} .sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#C9C9C4;font-size:14px;font-weight:500} .sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff} .sidebar nav a.active{background:var(--club);color:#fff} body.admin .sidebar nav a.active{background:var(--admin)} .sidebar nav a .badge{margin-left:auto;background:rgba(255,255,255,.14);font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;font-family:"Space Mono"} .sidebar nav .grp{font-family:"Space Mono";font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6E6F6A;padding:14px 12px 6px} .sidebar .foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)} .sidebar .foot .me{display:flex;align-items:center;gap:10px;padding:6px} .sidebar .foot .me .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:none} .sidebar .foot .me .nm{font-size:13px;font-weight:600;color:#fff;line-height:1.2} .sidebar .foot .me .rl{font-size:11px;color:#8A8B86} .admin-enter{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:9px;border-radius:10px; background:rgba(194,65,12,.18);color:#E8A56B;font-size:13px;font-weight:700;border:1px solid rgba(194,65,12,.4)} .admin-enter:hover{background:rgba(194,65,12,.3)} } /* ---------- main ---------- */ main{flex:1;min-width:0;display:flex;flex-direction:column} .content{padding:18px 16px 30px;width:100%;max-width:1100px;margin:0 auto} @media(min-width:880px){.content{padding:26px 30px 60px}} /* ---------- bottom tab bar (mobile only) ---------- */ .tabbar{ position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex; background:var(--surface);border-top:1px solid var(--line); padding:6px 4px env(safe-area-inset-bottom);box-shadow:0 -2px 12px rgba(0,0,0,.04); } .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--muted);font-size:10.5px;font-weight:600} .tabbar a.active{color:var(--club)} body.admin .tabbar a.active{color:var(--admin)} .tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media(min-width:880px){.tabbar{display:none}} /* ---------- flash ---------- */ .flash{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:13.5px;font-weight:500} .flash.ok{background:#E7F4EC;color:#0F5132} .flash.err{background:#FBEAEA;color:#842029} .flash.warn{background:#FCF3E3;color:#7A5B12} /* ---------- headings ---------- */ .page-title{font-family:"Bricolage Grotesque";font-weight:800;font-size:24px;letter-spacing:-.02em;margin-bottom:2px} .page-sub{color:var(--muted);font-size:13px;margin-bottom:18px} .eyebrow{font-family:"Space Mono";font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:11px;font-weight:600;font-size:14px;border:1px solid transparent} .btn.club{background:var(--club);color:#fff} .btn.admin{background:var(--admin);color:#fff} .btn.ink{background:var(--ink);color:#fff} .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)} .btn.ghost:hover{border-color:var(--line-strong)} .btn.sm{padding:8px 13px;font-size:13px;border-radius:9px} .btn.block{width:100%} .btn.danger{background:#fff;color:var(--no);border-color:#F3D0D0} /* ---------- cards ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .card .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} .card .hd h3{font-family:"Bricolage Grotesque";font-weight:800;font-size:16px} .card .hd .more{margin-left:auto;font-size:12.5px;color:var(--club);font-weight:600} .card .bd{padding:16px} /* ---------- fixture cards (akce) ---------- */ .fixtures{display:flex;flex-direction:column;gap:11px} .fx{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .fx .spine{width:6px;background:var(--ev,#999);flex:none} .fx .when{width:64px;flex:none;padding:12px 8px;border-right:1px solid var(--line);text-align:center;display:flex;flex-direction:column;justify-content:center} .fx .when .dow{font-family:"Space Mono";font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .fx .when .day{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;line-height:1} .fx .when .mon{font-family:"Space Mono";font-size:10px;color:var(--muted);text-transform:uppercase} .fx .body{padding:11px 14px;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center} .fx .ttl{font-weight:600;font-size:15px} .fx .info{display:flex;align-items:center;gap:6px 14px;color:var(--muted);font-size:12.5px;flex-wrap:wrap} .fx .info .mono{color:var(--ink-soft)} .fx .tally{font-family:"Space Mono";font-size:12px;color:var(--ink-soft)} .fx .tally b{color:var(--yes)} .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;color:#fff;white-space:nowrap} .tag .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)} .repeat{color:var(--ev);font-weight:600;font-size:12px} /* RSVP */ .rsvp{display:flex;gap:8px} .rsvp button,.rsvp .opt{flex:1;padding:9px;border-radius:10px;font-size:13.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink-soft);text-align:center} .rsvp .y.on{background:var(--yes);color:#fff;border-color:var(--yes)} .rsvp .n.on{background:var(--no);color:#fff;border-color:var(--no)} /* ---------- person rows ---------- */ .avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none} .person{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)} .person:last-child{border-bottom:none} .person .avatar{width:30px;height:30px;font-size:12px} .person .pn{font-size:14px} .person .rt{margin-left:auto;display:flex;gap:5px} .chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:#F0EEE7;color:var(--ink-soft)} .chip.admc{background:var(--admin);color:#fff} .chip.trec{background:var(--club);color:#fff} .chip.plc{background:var(--ink);color:#fff} /* ---------- comments ---------- */ .cmt{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line)} .cmt:last-child{border-bottom:none} .cmt .avatar{width:34px;height:34px;font-size:12px} .cmt .who{font-weight:600;font-size:14px} .cmt .tm{font-family:"Space Mono";font-size:11px;color:var(--muted);margin-left:6px} .cmt .tx{font-size:14px;color:var(--ink-soft);margin-top:3px;overflow-wrap:anywhere} .cmt.pinned{background:#FCF6EC;margin:0 -16px;padding:13px 16px;border-radius:10px} .cmt-box{display:flex;gap:8px;margin-top:14px} .cmt-box textarea,.cmt-box input{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;resize:vertical} .cmt-box textarea:focus,.cmt-box input:focus{outline:none;border-color:var(--club)} /* ---------- calendar ---------- */ .cal-top{display:flex;align-items:center;gap:10px;margin-bottom:14px} .cal-nav{display:flex;gap:6px} .cal-nav a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:18px;color:var(--ink)} .cal-month{font-family:"Bricolage Grotesque";font-weight:800;font-size:19px;flex:1} .legend{display:flex;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px} .legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)} .legend i{width:10px;height:10px;border-radius:3px} .cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .cal .dows{display:grid;grid-template-columns:repeat(7,1fr);background:#FBFAF7;border-bottom:1px solid var(--line)} .cal .dows div{padding:8px 2px;text-align:center;font-family:"Space Mono";font-size:10px;text-transform:uppercase;color:var(--muted)} .cal .grid{display:grid;grid-template-columns:repeat(7,1fr)} .cal .cell{min-height:62px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:2px} .cal .cell:nth-child(7n){border-right:none} .cal .cell.dim{background:#FBFAF7} .cal .cell .num{font-size:12px;font-weight:600;color:var(--ink-soft)} .cal .cell.today .num{background:var(--ink);color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center} .cal .ev{font-size:10px;font-weight:600;color:#fff;border-radius:5px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cal .dot{width:6px;height:6px;border-radius:50%;display:inline-block} @media(min-width:880px){.cal .cell{min-height:104px;padding:8px}.cal .ev{font-size:11.5px;padding:3px 7px}.cal-month{font-size:22px}} /* ---------- treasury ---------- */ .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px} .stats .balance{grid-column:1/-1} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)} .stat .lbl{font-family:"Space Mono";font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .stat .val{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;letter-spacing:-.02em;margin-top:4px} .stat.balance{background:var(--ink);color:#fff} .stat.balance .lbl{color:#9FA0A6}.stat.balance .val{font-size:30px} .stat .val.up{color:var(--yes)}.stat .val.down{color:var(--no)} .tx-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .tx-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)} .tx-row:last-child{border-bottom:none} .tx-row .tx-main{flex:1;min-width:0} .tx-row .tx-desc{font-size:14px} .tx-row .tx-date{font-family:"Space Mono";font-size:11.5px;color:var(--muted)} .tx-row .tx-amt{font-family:"Space Mono";font-weight:700;white-space:nowrap} .tx-amt.in{color:var(--yes)}.tx-amt.out{color:var(--no)} /* ---------- gallery ---------- */ .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:560px){.gal{grid-template-columns:repeat(3,1fr)}} @media(min-width:880px){.gal{grid-template-columns:repeat(4,1fr)}} .gal .ph{aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line);background:#EEE} .gal .ph img{width:100%;height:100%;object-fit:cover} .gal .ph .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;color:#fff;font-size:12px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.65))} /* ---------- forms ---------- */ .field{margin-bottom:14px} .field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px} .field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--club)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.frow{grid-template-columns:1fr}} .type-picker{display:flex;gap:8px;flex-wrap:wrap} .type-picker label{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--line);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer} .type-picker label i{width:11px;height:11px;border-radius:50%} .type-picker input{position:absolute;opacity:0;pointer-events:none} .type-picker label.sel,.type-picker input:checked+i+span,.type-picker label:has(input:checked){border-color:var(--ink);background:#FBFAF7} .switch-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#FBFAF7;border-radius:11px;margin-bottom:12px} .switch-row .tx{font-size:13.5px}.switch-row .tx small{display:block;color:var(--muted);font-size:12px} .switch-row input[type=checkbox]{width:22px;height:22px;margin-left:auto;accent-color:var(--club)} /* ---------- admin lists ---------- */ .alist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .arow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)} .arow:last-child{border-bottom:none} .arow .sp{width:4px;height:32px;border-radius:4px;flex:none} .arow .am{flex:1;min-width:0} .arow .am .t{font-weight:600;font-size:14px} .arow .am .s{font-size:12px;color:var(--muted);font-family:"Space Mono"} .iact{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;background:#fff;color:var(--ink-soft)} .iact:hover{border-color:var(--line-strong)} .iact.del:hover{border-color:#F3D0D0;color:var(--no)} .admin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px} @media(min-width:700px){.admin-stats{grid-template-columns:repeat(4,1fr)}} .astat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)} .astat .n{font-family:"Bricolage Grotesque";font-weight:800;font-size:24px} .astat .l{font-size:12px;color:var(--muted)} .quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px} @media(min-width:700px){.quick{grid-template-columns:repeat(4,1fr)}} .qbtn{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600;font-size:13px;text-align:left;box-shadow:var(--shadow)} .qbtn:hover{border-color:var(--admin)} .qbtn .qi{width:34px;height:34px;border-radius:9px;background:#FBEFE7;color:var(--admin);display:grid;place-items:center;flex:none} /* ---------- misc ---------- */ .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .icon-sm{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none} .note{font-size:12.5px;color:var(--muted)} .divider{height:1px;background:var(--line);margin:16px 0} .guest-banner{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:11px 14px;border-radius:12px;margin-bottom:16px;font-size:13px} .guest-banner .btn{margin-left:auto} .locked{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:48px 20px;color:var(--muted)} .locked .icon{width:34px;height:34px} .back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:14px} /* prose (články) */ .prose{font-size:15px;color:var(--ink-soft);line-height:1.7} .prose p{margin-bottom:12px} /* login */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--paper)} .auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:28px} .auth-card .logo{width:48px;height:48px;border-radius:13px;background:var(--club);display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:800;color:#fff;font-size:26px;margin-bottom:16px;overflow:hidden} .auth-card h1{font-family:"Bricolage Grotesque";font-weight:800;font-size:24px;letter-spacing:-.02em} .auth-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:20px} .checkrow{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);margin:2px 0 18px} .checkrow input{width:18px;height:18px;accent-color:var(--club)} /* ---------- Přehled: dvousloupcový layout s mini kalendářem ---------- */ .dash-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start} .dash-side{position:sticky;top:16px} .mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .mini-cal .mc-dow{font-size:11px;color:var(--muted);font-weight:600;padding:4px 0} .mini-cal .mc-day{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:9px;font-size:13px;color:var(--ink-soft);text-decoration:none} .mini-cal a.mc-day.has{background:var(--club);color:#fff;font-weight:700} .mini-cal .mc-day.today{outline:2px solid var(--club);outline-offset:-2px;font-weight:700} .mini-cal a.mc-day.has.today{outline-color:#fff} @media (max-width:880px){ .dash-grid{grid-template-columns:1fr} .dash-side{display:none} }