/* ============================================================ Můj tým – styly (mobile-first) Klubová barva se nastavuje inline: ============================================================ */ :root{ --ink:#15171C; --ink-soft:#3A3D45; --paper:#F5F5F8; --surface:#FFFFFF; --nav:#2A2C3A; --line:#E6E5EC; --line-strong:#D5D4DF; --muted:#84849A; --club:#0F766E; --c-trenink:#2563EB; --c-liga:#E11D48; --c-turnaj:#7C3AED; --c-spol:#F59E0B; --yes:#15803D; --no:#B91C1C; --admin:#9333EA; --admin-bg:#4C4C57; --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(--nav);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:var(--admin-bg)} body.admin .appbar .logo{background:var(--admin)} /* admin strip */ .admin-strip{background:linear-gradient(90deg,#7C3AED 0%,#C026A3 50%,#F2691E 100%);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(--nav);color:#E9E9E6; position:sticky;top:0;height:100vh; } body.admin .sidebar{background:var(--admin-bg)} .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(147,51,234,.18);color:#C9A6F0;font-size:13px;font-weight:700;border:1px solid rgba(147,51,234,.42)} .admin-enter:hover{background:rgba(147,51,234,.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{position:relative;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:#FAFAFD} .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:#FAFAFD} .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:#EEE6FB;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{position:relative;min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--paper);overflow:hidden} .auth-wrap::before{content:"";position:fixed;inset:0;background:url("../sports/ostatni.webp") center/cover no-repeat;opacity:.14;pointer-events:none;z-index:0} .auth-wrap>*{position:relative;z-index:1} .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:linear-gradient(90deg,#7C3AED 0%,#C026A3 50%,#F2691E 100%);display:grid;place-items:center;font-family:"Bricolage Grotesque";font-weight:800;color:#fff;font-size:26px;margin-bottom:16px;overflow:hidden} .auth-card .btn.club{background:linear-gradient(90deg,#7C3AED 0%,#C026A3 50%,#F2691E 100%);border:none;color:#fff} .auth-card .btn.club:hover{filter:brightness(1.06)} .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;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;aspect-ratio:1;border-radius:9px;font-size:13px;color:var(--ink-soft);text-decoration:none;padding-top:4px} .mini-cal a.mc-day:hover{background:#F0EFEA} .mini-cal .mc-day.today{outline:2px solid var(--club);outline-offset:-2px;font-weight:700} .mini-cal .mc-n{line-height:1} .mini-cal .mc-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:90%} .mini-cal .mc-dots i{width:5px;height:5px;border-radius:50%;display:block} @media (max-width:880px){ .dash-grid{grid-template-columns:1fr} .dash-side{display:none} } /* ---------- Můj stav účasti na kartě akce ---------- */ .fx .mystat{position:absolute;top:10px;right:10px;font-size:14px;font-weight:800; padding:5px 11px;border-radius:999px;border:2px solid;line-height:1;letter-spacing:.2px} .fx .mystat.yes{color:var(--yes);border-color:var(--yes);background:rgba(22,163,74,.10)} .fx .mystat.no{color:var(--no);border-color:var(--no);background:rgba(220,38,38,.08)} .fx .mystat.none{color:var(--muted);border-color:var(--line);background:#fff;font-weight:700} /* ---------- Kalendářový výběr data ---------- */ .dp{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:10px;z-index:1000;width:248px} .dp-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:6px;text-transform:capitalize} .dp-h button{border:none;background:none;font-size:18px;cursor:pointer;padding:2px 9px;border-radius:8px;color:var(--ink)} .dp-h button:hover{background:#F0EFEA} .dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center} .dp-dow{font-size:11px;color:var(--muted);font-weight:600;padding:3px 0} .dp-day{border:none;background:none;cursor:pointer;padding:6px 0;border-radius:8px;font-size:13px;color:var(--ink)} .dp-day:hover{background:#F0EFEA} .dp-day.sel{background:var(--club);color:#fff;font-weight:700} /* ---------- Výběr avataru ---------- */ .avatar-pick{display:flex;flex-wrap:wrap;gap:10px} .avatar-pick .ap{cursor:pointer;position:relative} .avatar-pick .ap input{position:absolute;opacity:0;inset:0;cursor:pointer} .avatar-pick .ap img,.avatar-pick .ap .apx,.avatar-pick .ap .avatar{display:block;border-radius:14px;border:3px solid transparent} .avatar-pick .ap .apx{display:flex;flex-direction:column;align-items:center;gap:2px} .avatar-pick .ap .apx small{font-size:10px;color:var(--muted)} .avatar-pick .ap input:checked ~ img,.avatar-pick .ap input:checked ~ .apx{border-color:var(--club);box-shadow:0 0 0 2px var(--club)} /* ---------- Patička: copyright + verze ---------- */ .appfoot{background:#1C1E27;color:#8A8A92;text-align:center;font-size:12px;letter-spacing:.3px;padding:16px 12px} .appfoot a{color:#B9B9C0;text-decoration:none} .appfoot a:hover{text-decoration:underline} @media (max-width:879px){.appfoot{display:none}} .sheet-foot{text-align:center;color:var(--muted);font-size:12px;padding:14px 8px 2px} .sheet-foot a{color:var(--muted)} .auth-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;letter-spacing:.2px} .auth-foot a{color:var(--muted)} /* ---------- Plná výška okna na desktopu: obsah scrolluje, patička drží dole ---------- */ @media (min-width:880px){ html{height:100%} body{height:100vh;display:flex;flex-direction:column;overflow:hidden} .shell{flex:1 1 auto;min-height:0} /* zruší min-height:100vh, vyplní prostor nad patičkou */ .sidebar{height:100%;position:relative;top:auto} main{overflow-y:auto} /* scrolluje jen vnitřní obsah */ .appfoot{flex:0 0 auto} /* vždy viditelná dole */ } /* ---------- Sport: obrysové pozadí + hero týmu ---------- */ html{background:var(--paper)} body{background:transparent} .sport-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat} /* desktop: obrázek na výšku, u pravého okraje s pevným odsazením, ať neruší */ @media (min-width:880px){ .sport-bg{background-position:right 48px center;background-size:auto 88vh;opacity:.12} } /* mobil: obrázek přes celou obrazovku (9:16) */ @media (max-width:879px){ .sport-bg{background-position:center center;background-size:cover;opacity:.16} } .club-hero{position:relative;overflow:hidden;border-radius:18px;margin:0 0 12px;border:1px solid var(--line); background:#F3F5F7;background:linear-gradient(135deg, color-mix(in srgb,var(--club) 15%, #fff), #fff)} body.admin .club-hero{background:#F2ECFB;background:linear-gradient(135deg, color-mix(in srgb,var(--admin) 15%, #fff), #fff)} .club-hero .ch-in{position:relative;z-index:1;padding:20px 20px} .club-hero .ch-name{font-family:"Bricolage Grotesque";font-weight:800;font-size:30px;line-height:1.04;letter-spacing:-.02em;color:var(--ink)} .club-hero .ch-sport{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:13px;font-weight:600; color:var(--club);color:color-mix(in srgb, var(--club) 68%, #000);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px} .club-hero .ch-sport svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8} .club-hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:58%; background:var(--hero-img) no-repeat right center/contain;opacity:.6;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)} @media (max-width:480px){.club-hero::after{width:50%;opacity:.45}} @media (min-width:560px){.club-hero .ch-name{font-size:40px}.club-hero .ch-in{padding:26px 24px}} /* ---------- Jednoduchý modal (návod ke kalendáři ap.) ---------- */ .bmodal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px} .bmodal-card{position:relative;background:#fff;border-radius:16px;max-width:460px;width:100%;max-height:88vh;overflow:auto;padding:22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.3)} .bmodal-x{position:absolute;top:10px;right:12px;font-size:26px;line-height:1;color:var(--muted);background:none;border:none;cursor:pointer} .bmodal-steps p{margin:0 0 10px;line-height:1.6} .bmodal-steps b{color:var(--ink)} /* ---------- Segmentový filtr ---------- */ .segmented{display:inline-flex;background:#ECECF1;border-radius:10px;padding:3px;gap:2px} .segmented a{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap} .segmented a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} body.admin .segmented a.on{color:var(--admin)} /* ---------- Admin režim: výrazná oranžová navigace ---------- */ @media (min-width:880px){ body.admin .sidebar nav a{color:#D6D6DD} body.admin .sidebar nav a:hover{background:rgba(255,255,255,.14);color:#fff} body.admin .sidebar nav a.active{background:var(--admin);color:#fff;font-weight:700} body.admin .sidebar .brand .nm small, body.admin .sidebar .foot .me .rl{color:rgba(255,255,255,.74)} body.admin .sidebar nav .grp{color:rgba(255,255,255,.62)} body.admin .sidebar .foot{border-top-color:rgba(255,255,255,.18)} }