.dashboard{display:none;} .dash-sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:var(--white);border-right:1px solid var(--border);z-index:50;display:flex;flex-direction:column;padding:1.5rem 0;} .dash-sidebar-logo{padding:0 1.5rem .5rem;margin-bottom:1rem;border-bottom:1px solid var(--border);padding-bottom:1rem;} .dash-sidebar-logo img{height:36px;width:auto;} .dash-sidebar-nav{flex:1;padding:0 .75rem;overflow-y:auto;} .dash-nav-item{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-radius:10px;font-size:.85rem;font-weight:500;color:var(--muted);text-decoration:none;cursor:pointer;transition:all .2s;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif;} .dash-nav-item:hover{background:var(--bg2);color:var(--ink);} .dash-nav-item.active{background:var(--blue-xl);color:var(--blue);font-weight:600;} .dash-nav-item svg{flex-shrink:0;width:18px;height:18px;} .dash-nav-divider{height:1px;background:var(--border);margin:.6rem 1rem;} .dash-nav-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.5rem 1rem .2rem;opacity:.6;} .dash-sidebar-bottom{padding:.75rem 1.5rem;border-top:1px solid var(--border);} .dash-user-card{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;} .dash-avatar{width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;font-family:'Lora',serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;} .dash-user-name{font-weight:600;font-size:.85rem;}.dash-user-email{font-size:.72rem;color:var(--muted);} .dash-logout-btn{width:100%;margin-top:.6rem;background:none;border:1.5px solid var(--border);border-radius:8px;padding:.5rem;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;}.dash-logout-btn:hover{border-color:var(--red);color:var(--red);} .dash-main{margin-left:240px;padding:2rem 2.5rem 3rem;min-height:100vh;} .dash-page{display:none;}.dash-page.active{display:block;} .dash-page-header{margin-bottom:2rem;}.dash-page-header h1{font-family:'Lora',serif;font-size:1.6rem;font-weight:700;margin-bottom:.3rem;}.dash-page-header p{font-size:.9rem;color:var(--muted);} .dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2rem;} .dash-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:box-shadow .25s;}.dash-card:hover{box-shadow:0 8px 32px rgba(1,71,126,.08);} .dash-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;} .dash-card-title{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;} .dash-card-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;} .dci-b{background:var(--blue-xl);}.dci-o{background:var(--orange-xl);}.dci-g{background:var(--green-xl);} .dash-stat{font-family:'Lora',serif;font-size:2rem;font-weight:700;line-height:1;margin-bottom:.2rem;} .dash-stat-label{font-size:.75rem;color:var(--muted);} .dash-stat.blue{color:var(--blue);}.dash-stat.orange{color:var(--orange);}.dash-stat.green{color:var(--green);} .dash-section{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;} .dash-section h2{font-family:'Lora',serif;font-size:1.1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;} .sched-item{display:flex;align-items:center;gap:1rem;padding:1rem;border:1.5px solid var(--border);border-radius:12px;margin-bottom:.7rem;transition:all .2s;}.sched-item:hover{border-color:var(--blue-l);} .sched-item.past{background:var(--bg2);} .sched-date{width:50px;height:50px;border-radius:10px;background:var(--blue-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;} .sched-date-day{font-family:'Lora',serif;font-size:1.2rem;font-weight:700;color:var(--blue);line-height:1;}.sched-date-month{font-size:.6rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;} .sched-info{flex:1;}.sched-info h4{font-size:.88rem;font-weight:600;margin-bottom:.15rem;}.sched-info p{font-size:.78rem;color:var(--muted);} .sched-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;} .sched-btn{padding:.4rem .8rem;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;border:none;cursor:pointer;transition:all .2s;} .sched-btn-join{background:var(--blue);color:#fff;text-decoration:none;display:inline-flex;align-items:center;}.sched-btn-join:hover{background:#01477e;color:#fff;} .sched-btn-materials{background:var(--green-xl);color:var(--green);border:1px solid rgba(22,163,74,.2);text-decoration:none;display:inline-flex;align-items:center;}.sched-btn-materials:hover{background:rgba(22,163,74,.15);border-color:var(--green);} .cancel-notice{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem .8rem;background:var(--blue-xl);border:1px solid rgba(1,71,126,.12);border-radius:8px;font-size:.75rem;color:var(--blue);line-height:1.45;} .cancel-notice svg{flex-shrink:0;opacity:.7;} /* Per-lesson "Nezaplaceno + Kartou + Převodem" block on the Lekce page — appears inline below the lesson meta line whenever the lesson has a pending auto-invoice. Hides once invoice flips to paid. */ .sched-pay{margin-top:.6rem;padding:.6rem .8rem;background:#fef3c7;border:1px solid #fcd34d;border-left:4px solid #d97706;border-radius:10px;} .sched-pay-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;} .sched-pay-status{font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;color:#92400e;} .sched-pay-status strong{font-family:'Lora',serif;font-size:.95rem;color:#92400e;} @media (max-width:640px){ .sched-pay-row{flex-direction:column;align-items:stretch;} .sched-pay .pay-item-pay-actions{display:flex;gap:.5rem;} .sched-pay .pay-item-pay-actions .pay-item-pay-btn, .sched-pay .pay-item-pay-actions .bk-comgate-btn{flex:1 1 50%;justify-content:center;} } .lesson-files{margin-top:.5rem;display:flex;gap:.4rem;flex-wrap:wrap;} .lesson-file{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--blue);background:var(--blue-xl);padding:.2rem .5rem;border-radius:5px;text-decoration:none;cursor:pointer;} .lesson-file:hover{background:#cee4f5;} .pay-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border);gap:.75rem;}.pay-item:last-child{border-bottom:none;} .pay-item-left{display:flex;align-items:flex-start;gap:.7rem;flex:1;min-width:0;} .pay-item-info{flex:1;min-width:0;} .pay-item-right{display:flex;align-items:center;gap:.7rem;flex-shrink:0;} .pay-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:.5rem;}.pay-dot-green{background:var(--green);}.pay-dot-orange{background:var(--orange);}.pay-dot-red{background:var(--red);} .pay-item-name{font-weight:500;font-size:.85rem;}.pay-item-date{font-size:.72rem;color:var(--muted);} .pay-item-vs{margin-top:.2rem;} .pay-vs{display:inline-block;font-size:.7rem;font-weight:700;color:var(--blue);background:var(--blue-xl);padding:.1rem .45rem;border-radius:5px;letter-spacing:.02em;font-family:'DM Sans',monospace;} .pay-item-amount{font-family:'Lora',serif;font-weight:700;font-size:.9rem;}.pay-item-amount.paid{color:var(--green);}.pay-item-amount.pending{color:var(--orange);} .pay-item-pay-btn{background:var(--orange);color:#fff;border:none;border-radius:8px;padding:.45rem .9rem;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap;} .pay-item-pay-btn:hover{background:#c94820;} .buy-banner{background:linear-gradient(145deg,var(--blue),var(--blue-d));border-radius:16px;padding:1.8rem;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.5rem;position:relative;overflow:hidden;} .buy-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(233,87,46,.2) 0%,transparent 70%);pointer-events:none;} .buy-banner h3{font-family:'Lora',serif;font-size:1.2rem;font-weight:700;margin-bottom:.3rem;position:relative;z-index:1;}.buy-banner p{font-size:.85rem;opacity:.7;position:relative;z-index:1;} .buy-btn{background:var(--orange);color:#fff;border:none;border-radius:10px;padding:.8rem 1.8rem;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .25s;box-shadow:0 4px 16px rgba(233,87,46,.4);white-space:nowrap;position:relative;z-index:1;}.buy-btn:hover{background:#d4421f;transform:translateY(-2px);} .bank-info{background:var(--blue-xl);border:1px solid rgba(1,71,126,.15);border-radius:14px;padding:1.2rem;font-size:.85rem;line-height:1.6;} .bank-info strong{color:var(--blue);} .comgate-pay-btn{display:inline-flex;align-items:center;background:#635bff;color:#fff;border:none;border-radius:10px;padding:.75rem 1.5rem;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .25s;box-shadow:0 4px 16px rgba(99,91,255,.35);}.comgate-pay-btn:hover{background:#4f46e5;transform:translateY(-2px);color:#fff;} .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s;display:flex;align-items:center;justify-content:center;}.modal-overlay.open{opacity:1;pointer-events:all;} .modal-card{background:var(--white);border-radius:20px;padding:2.5rem;width:min(580px,94vw);max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.2);transform:translateY(30px);transition:transform .3s;position:relative;}.modal-overlay.open .modal-card{transform:translateY(0);} .modal-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border-radius:8px;background:#e0ddd7;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#111827;z-index:1;font-size:20px;line-height:1;font-family:sans-serif;}.modal-close:hover{background:#b8b4ac;} .modal-title{font-family:'Lora',serif;font-size:1.4rem;font-weight:700;margin-bottom:.4rem;}.modal-desc{font-size:.88rem;color:var(--muted);margin-bottom:1.5rem;} .hours-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.5rem;} .hours-option{border:2px solid var(--border);border-radius:14px;padding:1.2rem;text-align:center;cursor:pointer;transition:all .25s;}.hours-option:hover{border-color:var(--blue-l);} .hours-option.selected{border-color:var(--blue);background:var(--blue-xl);} .hours-option-num{font-family:'Lora',serif;font-size:1.8rem;font-weight:700;color:var(--blue);}.hours-option-label{font-size:.75rem;color:var(--muted);margin:.2rem 0;} .hours-option-price{font-weight:700;font-size:.95rem;}.hours-option-save{font-size:.7rem;color:var(--green);font-weight:600;margin-top:.2rem;} .modal-total{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-top:2px solid var(--border);margin-bottom:1rem;} .modal-total-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}.modal-total-amount{font-family:'Lora',serif;font-size:1.5rem;font-weight:700;color:var(--blue);} .modal-buy-btn{width:100%;background:var(--orange);color:#fff;border:none;border-radius:10px;padding:1rem;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s;box-shadow:0 4px 16px rgba(233,87,46,.3);}.modal-buy-btn:hover{background:var(--orange-d);} .profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;} .profile-field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;} .profile-field input,.profile-field select,.profile-field textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:.8rem 1rem;font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--ink);outline:none;transition:border-color .2s;}.profile-field input:focus,.profile-field select:focus,.profile-field textarea:focus{border-color:var(--blue);} .profile-save{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:.8rem 2rem;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;}.profile-save:hover{background:var(--blue-l);} .chat-container{display:flex;flex-direction:column;height:500px;background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;} .chat-messages{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;} .chat-msg{max-width:75%;padding:.8rem 1rem;border-radius:12px;font-size:.88rem;line-height:1.55;} .chat-msg.sent{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px;} .chat-msg.received{align-self:flex-start;background:var(--bg2);color:var(--ink);border-bottom-left-radius:4px;} .chat-msg .chat-time{font-size:.65rem;opacity:.6;margin-top:.3rem;display:block;} .chat-receipt-row{align-self:flex-end;margin:.15rem 0 .25rem;font-size:.68rem;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:.25rem;letter-spacing:.02em;line-height:1;} .chat-receipt-row svg{display:block;} .chat-receipt-row.read{color:var(--blue);} .chat-typing{align-self:flex-start;background:var(--bg2);padding:.55rem .9rem;border-radius:14px;border-bottom-left-radius:4px;display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);font-style:italic;margin:.2rem 0;width:fit-content;} /* Floating "↓ N nové zprávy" pill — shown over the chat container when the poll appended new messages while the user was scrolled up reading older messages. Click jumps to the bottom and dismisses the pill. Hides itself when the user scrolls back to bottom on their own. */ .chat-new-pill{ position:absolute !important; left:50% !important; bottom:14px !important; transform:translateX(-50%) !important; background:var(--blue) !important; color:#fff !important; border:none !important; border-radius:999px !important; padding:.5rem 1rem !important; font-family:'DM Sans',sans-serif !important; font-size:.78rem !important; font-weight:600 !important; cursor:pointer !important; box-shadow:0 6px 18px rgba(1,71,126,.35) !important; z-index:10; transition:background .15s; animation:betkaPillFadeIn .2s ease-out; } .chat-new-pill:hover{background:#01365e !important;color:#fff !important;} @keyframes betkaPillFadeIn{ from{opacity:0;transform:translate(-50%,8px);} to{opacity:1;transform:translate(-50%,0);} } .chat-typing-dots{display:inline-flex;gap:3px;} .chat-typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:betkaTypingBounce 1.2s infinite ease-in-out;} .chat-typing-dots span:nth-child(2){animation-delay:.2s;} .chat-typing-dots span:nth-child(3){animation-delay:.4s;} @keyframes betkaTypingBounce{0%,80%,100%{transform:scale(.6);opacity:.4;}40%{transform:scale(1);opacity:1;}} .chat-input-row{display:flex;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--border);background:var(--bg);} .chat-input{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:.7rem 1rem;font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none;background:var(--white);}.chat-input:focus{border-color:var(--blue);} .chat-send{padding:.7rem 1.2rem;border-radius:10px;background:var(--blue);color:#fff;border:none;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;flex-shrink:0;}.chat-send:hover{background:var(--blue-l);} .chat-layout{display:flex;height:560px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--white);} .chat-sidebar{width:280px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;background:#f8f7f5;} .chat-sidebar-search{padding:.8rem;border-bottom:1px solid var(--border);} .chat-sidebar-search input{width:100%;background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:.55rem .8rem;font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;}.chat-sidebar-search input:focus{border-color:var(--blue);} .chat-sidebar-section{flex:1;overflow-y:auto;} .chat-sidebar-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.6rem .8rem .3rem;opacity:.6;} .chat-contact{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;cursor:pointer;transition:all .15s;border-left:3px solid transparent;} .chat-contact:hover{background:var(--blue-xl);} .chat-contact.active{background:var(--blue-xl);border-left-color:var(--blue);} .chat-contact-avatar{width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;font-family:'Lora',serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;} .chat-contact-avatar.group-avatar{background:var(--orange);} .chat-contact-info{flex:1;min-width:0;} .chat-contact-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4rem;} .chat-contact-preview{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-contact-meta{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:.2rem;} .chat-contact-time{font-size:.65rem;color:var(--muted);} .chat-unread{background:var(--orange);color:#fff;font-size:.6rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 .3rem;} .chat-main{flex:1;display:flex;flex-direction:column;overflow:hidden;} .chat-main-header{padding:.8rem 1.2rem;border-bottom:1px solid var(--border);background:var(--bg);display:flex;align-items:center;gap:.6rem;flex-shrink:0;} .chat-main-header-name{font-weight:600;font-size:.9rem;} .chat-main-header-sub{font-size:.75rem;color:var(--muted);} /* Note: chat-layout at ≤700px is handled by the 900px block above (stacked, fixed height) */ .admin-badge{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);color:#fff;padding:.15rem .5rem;border-radius:4px;margin-left:.5rem;} .admin-pay-extra-filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.7rem 0 1rem;padding:.65rem .8rem;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;} .admin-pay-extra-filters select{flex:1;min-width:160px;background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:.5rem .8rem;font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;color:var(--ink);} .admin-pay-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} @media (max-width:640px){ .admin-pay-extra-filters select{flex:1 1 100%;min-width:0;} } .admin-table{width:100%;border-collapse:collapse;font-size:.85rem;} .admin-table th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.6rem .8rem;border-bottom:2px solid var(--border);} .admin-table td{padding:.7rem .8rem;border-bottom:1px solid var(--border);} .admin-table tr:hover td{background:var(--bg);} /* !important throughout — parent theme's [type=button] pink-outline rule otherwise wins the cascade against these single-class selectors, which is exactly the bug the user showed with the "Filtrovat" button rendering as a pink outline instead of a light-blue pill. */ .admin-btn{padding:.35rem .7rem !important;border-radius:6px !important;font-family:'DM Sans',sans-serif !important;font-size:.75rem !important;font-weight:600 !important;border:1.5px solid transparent !important;cursor:pointer !important;transition:all .2s;background:var(--bg2) !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:0 !important;} .admin-btn.active{background:var(--blue) !important;color:#fff !important;border-color:var(--blue) !important;} .admin-btn-blue{background:var(--blue-xl) !important;color:var(--blue) !important;}.admin-btn-blue:hover{background:#01477e !important;color:#fff !important;} .admin-btn-orange{background:var(--orange-xl) !important;color:var(--orange) !important;}.admin-btn-orange:hover{background:#c94820 !important;color:#fff !important;} /* Inline SVG spinner — used on the Filtrovat button and any other admin action that fires an AJAX call and needs visible "I'm working" feedback. */ .bk-spin{animation:bk-spin-rotate .8s linear infinite;} @keyframes bk-spin-rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} /* Compact lesson-payment choice buttons — sit inline in the funding banner, NOT stretched to fill. Match the size of .pay-item-pay-btn elsewhere so the banner doesn't dominate the lesson row. */ .lp-choice-row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;} .lp-choice-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:.3rem !important;padding:.45rem .75rem !important;border:none !important;border-radius:8px !important;color:#fff !important;font-family:'DM Sans',sans-serif !important;font-size:.78rem !important;font-weight:600 !important;cursor:pointer !important;text-transform:none !important;letter-spacing:0 !important;transition:background .15s;-webkit-appearance:none !important;line-height:1.2 !important;white-space:nowrap;} .lp-choice-btn:disabled{opacity:.55 !important;cursor:not-allowed !important;} .lp-btn-comgate{background:#635bff !important;} .lp-btn-comgate:hover{background:#524ce0 !important;} .lp-btn-transfer{background:#e9572e !important;} .lp-btn-transfer:hover{background:#d4421f !important;} .lp-btn-buy{background:#01477e !important;} .lp-btn-buy:hover{background:#013865 !important;} .lp-btn-reset{background:#6b7280 !important;} .lp-btn-reset:hover{background:#4b5563 !important;} /* Lesson modal attach buttons — both buttons should match exactly */ .lesson-attach-btn{padding:.55rem .9rem !important;font-size:.82rem !important;font-weight:600 !important;border:1.5px solid var(--orange) !important;border-radius:8px !important;display:inline-flex !important;align-items:center;gap:.4rem;text-transform:none !important;letter-spacing:0 !important;line-height:1.3 !important;cursor:pointer;} .admin-btn-green{background:var(--green-xl) !important;color:var(--green) !important;}.admin-btn-green:hover{background:#15803d !important;color:#fff !important;} /* Bětka primary orange button — used on form action buttons that otherwise inherit the theme's ugly pink border default. Listed in priority order so any future button just needs this class. */ .bk-primary-btn { background: #e9572e !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: .8rem 2rem !important; font-family: 'DM Sans', sans-serif !important; font-size: .88rem !important; font-weight: 600 !important; cursor: pointer; transition: all .2s; } .bk-primary-btn:hover { background: #c94820 !important; color: #fff !important; } .pmf-icon-btn:hover{border-color:#01477e !important;background:#dbeafe !important;} .pmf-row .pmf-row-remove:hover{background:rgba(220,38,38,.1) !important;} /* Rich text editor (course description, etc.) */ .rte-wrap{border:1.5px solid var(--border);border-radius:10px;background:var(--bg);overflow:hidden;} .rte-wrap:focus-within{border-color:var(--blue);} .rte-toolbar{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap;padding:.4rem .55rem;background:var(--bg2);border-bottom:1px solid var(--border);} /* line-height:1 + svg{display:block} so the icon glyphs sit on the centre of the button instead of dropping toward the baseline (the default inline-svg baseline made them look pinned to the bottom). */ .rte-btn{background:transparent;border:1px solid transparent;color:var(--ink);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.82rem;width:30px;height:30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:all .15s;line-height:1;} .rte-btn svg{display:block;} .rte-btn:hover{background:#fff;border-color:var(--border);color:var(--blue);} .rte-btn.is-active{background:var(--blue);color:#fff;border-color:var(--blue);} .rte-sep{width:1px;height:18px;background:var(--border);margin:0 .15rem;} .rte-content{min-height:96px;max-height:280px;overflow-y:auto;padding:.7rem 1rem;font-family:'DM Sans',sans-serif;font-size:.88rem;line-height:1.55;color:var(--ink);outline:none;background:var(--white);} .rte-content:focus{outline:none;} .rte-content:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;} .rte-content p{margin:0 0 .5rem;} .rte-content ul,.rte-content ol{margin:.3rem 0 .5rem;padding-left:1.4rem;} .rte-content a{color:var(--blue);text-decoration:underline;} .rte-content strong,.rte-content b{font-weight:700;} .rte-content em,.rte-content i{font-style:italic;} /* Orders archive — pagination */ .orders-pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding:.7rem 1rem;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;} .orders-pagination-info{font-size:.78rem;color:var(--muted);} .orders-pagination-info select{font-family:'DM Sans',sans-serif;font-size:.78rem;background:#fff;border:1.5px solid var(--border);border-radius:6px;padding:.2rem .4rem;color:var(--ink);outline:none;} .orders-pagination-pages{display:flex;gap:.25rem;flex-wrap:wrap;align-items:center;} .orders-pg-btn{background:#fff;border:1.5px solid var(--border);border-radius:6px;padding:.35rem .6rem;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s;min-width:32px;} .orders-pg-btn:hover:not(:disabled){background:var(--blue-xl);border-color:var(--blue);color:var(--blue);} .orders-pg-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);} .orders-pg-btn:disabled{opacity:.4;cursor:not-allowed;} .orders-pg-ellipsis{padding:.35rem .25rem;color:var(--muted);font-size:.78rem;} @media (max-width:640px){ .orders-pagination{flex-direction:column;align-items:stretch;} .orders-pagination-pages{justify-content:center;} } /* Orders archive — filter bar action buttons (responsive) */ .orders-actions{display:contents;} .orders-actions-pair{display:contents;} .orders-export{margin-left:auto;} @media (max-width:640px){ .orders-actions{display:flex;flex-direction:column;width:100%;gap:.5rem;} .orders-actions-pair{display:flex;gap:.5rem;width:100%;} .orders-actions-pair button{flex:1;} .orders-export{margin-left:0 !important;width:100%;justify-content:center;} } /* Public-material file row (admin list) */ .pm-file-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--border);border-radius:9px;} .pm-file-row-icon{flex-shrink:0;} .pm-file-row-text{flex:1;min-width:0;} .pm-file-row-title{font-size:.85rem;font-weight:700;color:var(--text);} .pm-file-row-desc{font-size:.72rem;color:var(--muted);} .pm-file-row-name{font-size:.7rem;color:var(--blue);margin-top:.15rem;display:inline-flex;align-items:center;gap:.25rem;word-break:break-all;} .pm-file-row-actions{display:flex;gap:.35rem;flex-shrink:0;} /* Group header button pair — "Upravit" + "+ Soubor" on each material group. Desktop: inline; Mobile: side-by-side 50/50, filling the row width. */ .pm-group-actions{display:flex;gap:.4rem;flex-wrap:wrap;} @media (max-width:640px){ /* File rows — stack vertically, buttons go 50/50 */ .pm-file-row{flex-direction:column;align-items:stretch;gap:.5rem;} .pm-file-row-icon{align-self:flex-start;} .pm-file-row-actions{display:flex !important;width:100%;justify-content:stretch;gap:.5rem;flex-wrap:nowrap;} .pm-file-row-actions button{flex:1 1 50% !important;min-width:0;width:100%;} /* Group header buttons — also full-width 50/50 split below the title */ .pm-group-actions{width:100%;flex-wrap:nowrap;gap:.5rem;} .pm-group-actions button{flex:1 1 50%;min-width:0;width:100%;} } /* Drag handles in videokurzy are admin-only. Students never see the grips, so they can't even try to drag. body.is-admin is set by dashboard.js at boot based on betka.is_admin. The sortable JS is also admin-gated, so this just makes the visual match the actual behavior. */ body:not(.is-admin) .vk-card-grip, body:not(.is-admin) .vk-code-handle, body:not(.is-admin) .pm-group-grip, body:not(.is-admin) .pm-file-grip { display: none !important; } /* ═══════════════════════════════════════════════════════════ COMGATE PAY BUTTONS — "Zaplatit vše kartou" CTA + per-item "Kartou" button shown beside the existing bank-transfer "Převodem" button. ═══════════════════════════════════════════════════════════ */ /* Big "Zaplatit vše kartou" banner at the top of the unpaid section. All !important to defeat the parent theme's [type=button] override that ships background:transparent + border:1px solid #c36. */ .bk-comgate-pay-all-wrap { background: linear-gradient(135deg, #635bff 0%, #4f46e5 100%); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; color: #fff; box-shadow: 0 6px 24px rgba(99, 91, 255, 0.28); } .bk-comgate-all-btn { display: inline-flex !important; align-items: center !important; gap: .55rem !important; background: #fff !important; color: #4f46e5 !important; border: none !important; border-radius: 10px !important; padding: .8rem 1.4rem !important; font-family: 'DM Sans', sans-serif !important; font-size: .95rem !important; font-weight: 700 !important; cursor: pointer !important; transition: transform .15s, box-shadow .15s, background .15s !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; white-space: normal !important; text-align: center !important; } .bk-comgate-all-btn:hover { transform: translateY(-1px) !important; background: #f5f4ff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important; color: #4f46e5 !important; } .bk-comgate-all-btn:disabled { opacity: .65 !important; cursor: not-allowed !important; transform: none !important; } .bk-comgate-help { margin: .65rem 0 0; font-size: .76rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } /* Per-item "Kartou" button — purple to visually distinguish from the orange bank-transfer "Převodem" sibling. */ .bk-comgate-btn { display: inline-flex !important; align-items: center !important; gap: .35rem !important; background: #635bff !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: .45rem .85rem !important; font-family: 'DM Sans', sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; cursor: pointer !important; transition: background .15s, transform .1s !important; white-space: nowrap !important; } .bk-comgate-btn:hover { background: #4f46e5 !important; color: #fff !important; } .bk-comgate-btn:active { transform: translateY(1px) !important; } .bk-comgate-btn:disabled { opacity: .6 !important; cursor: not-allowed !important; } /* Cluster of pay actions per row — comgate + bank transfer side-by-side */ .pay-item-pay-actions { display: inline-flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 640px) { .pay-item-pay-actions { width: 100%; } .pay-item-pay-actions .bk-comgate-btn, .pay-item-pay-actions .pay-item-pay-btn { flex: 1 1 auto; justify-content: center; } } .admin-btn-red{background:#fde8e3 !important;color:var(--red) !important;}.admin-btn-red:hover{background:#b91c1c !important;color:#fff !important;} .admin-upload-zone{border:2px dashed var(--border);border-radius:14px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;color:var(--muted);} .admin-upload-zone:hover,.admin-upload-zone.dragover{border-color:var(--blue);background:var(--blue-xl);color:var(--blue);} .admin-only{display:none;} body.is-admin .admin-only{display:block;} body.is-admin .admin-only.dash-grid{display:grid;} body.is-admin .admin-only.vk-filters-bar{display:flex;} body.is-admin .student-only{display:none!important;} .pay-filter{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;} .pay-filter-btn{padding:.4rem 1rem;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--muted);font-family:'DM Sans',sans-serif;transition:all .2s;} .pay-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);} .pay-filter-btn:hover:not(.active){border-color:var(--blue);color:var(--blue);} .pay-student-tag{display:inline-block;font-size:.7rem;font-weight:600;background:var(--blue-xl);color:var(--blue);padding:.15rem .5rem;border-radius:5px;} .status-badge{font-size:.78rem;font-weight:600;padding:.2rem .6rem;border-radius:5px;display:inline-block;} .status-badge.scheduled{background:var(--green-xl);color:var(--green);} .status-badge.completed{background:var(--bg2);color:var(--muted);} .group-card{border:1.5px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin-bottom:.7rem;transition:all .2s;} .group-card:hover{border-color:var(--blue-l);} .group-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;} .group-card-name{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;flex-wrap:wrap;} .group-card-count{font-size:.72rem;font-weight:700;color:var(--blue);background:var(--blue-xl);padding:.15rem .5rem;border-radius:5px;white-space:nowrap;flex-shrink:0;} .group-card-desc{font-size:.78rem;color:var(--muted);margin-bottom:.6rem;} .group-card-members{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem;} .group-member-tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:500;background:var(--bg2);color:var(--ink);padding:.2rem .5rem .2rem .6rem;border-radius:6px;} .group-member-tag .remove-member{cursor:pointer;opacity:.4;transition:opacity .2s;}.group-member-tag .remove-member:hover{opacity:1;color:var(--red);} .group-card-actions{display:flex;gap:.4rem;flex-shrink:0;align-self:flex-start;} .student-action-btns{display:flex;gap:.3rem;flex-wrap:wrap;} .student-action-btns .admin-btn{padding:.3rem .6rem;font-size:.72rem;} .group-link-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.5rem;background:var(--bg);border-radius:8px;} .group-link-row label{font-size:.75rem;font-weight:600;color:var(--blue);min-width:120px;white-space:nowrap;} .group-link-row input{flex:1;background:var(--white);border:1.5px solid var(--border);border-radius:8px;padding:.5rem .7rem;font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;}.group-link-row input:focus{border-color:var(--blue);} /* ─── MOBILE TOP BAR & HAMBURGER ─────────────────────────── */ .dash-mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:54px;background:#fff;border-bottom:1px solid var(--border);z-index:200;align-items:center;padding:0 1rem;gap:.8rem;} .dash-hamburger{background:none!important;border:none!important;cursor:pointer;padding:.4rem;display:flex!important;flex-direction:column;gap:5px;border-radius:0!important;box-shadow:none!important;outline:none;-webkit-appearance:none;appearance:none;} .dash-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .2s;} .dash-mobile-logo img{height:28px;width:auto;} .dash-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:149;} .dash-sidebar-overlay.active{display:block;} /* ═══════════════════════════════════════════════════════════ RESPONSIVE — completely rewritten ═══════════════════════════════════════════════════════════ */ /* Global: prevent horizontal overflow */ *,*::before,*::after{box-sizing:border-box;} .dash-main{overflow-x:hidden;} /* Admin pay-stats grid (override inline style) */ #adminPayStats{grid-template-columns:repeat(3,1fr)!important;} /* ─── TABLET (≤ 1024px) ──────────────────────────────────── */ @media(max-width:1024px){ .dash-main{padding:1.5rem 1.5rem 3rem;} .dash-grid{grid-template-columns:repeat(2,1fr);} .dash-stat{font-size:1.6rem;} /* Tables: horizontal scroll only */ .admin-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} .admin-table th,.admin-table td{white-space:nowrap;} /* Keep chat height fixed so messages don't overflow page */ .chat-layout{height:520px;} .chat-sidebar{width:220px;} } /* ─── MOBILE NAV (≤ 900px) ───────────────────────────────── */ @media(max-width:900px){ /* Topbar + sidebar slide */ .dash-mobile-topbar{display:flex;} .dash-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:150; transform:translateX(-260px);transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:none;padding-top:54px;} .dash-sidebar.mobile-open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.18);} .dash-main{margin-left:0;padding:1.2rem 1rem 3rem;margin-top:54px;} .dash-grid{grid-template-columns:1fr 1fr;} .dash-stat{font-size:1.4rem;} /* Tables: scrollable, keep normal layout */ .admin-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} .admin-table th,.admin-table td{white-space:nowrap;} /* Chat: stack sidebar above messages, fixed total height so messages never push page */ .chat-layout{display:flex!important;flex-direction:column!important;height:580px!important;} .chat-sidebar{width:100%!important;height:auto!important;max-height:200px; overflow-y:auto;border-right:none!important;border-bottom:1px solid var(--border);flex-shrink:0;} /* Reset flex:1 on sections — let sidebar scroll internally */ .chat-sidebar-section{flex:none!important;overflow-y:visible!important;} /* chat-main fills remaining height after sidebar; messages scroll inside */ .chat-main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;} #adminChatContainer{flex:1;height:auto!important;display:flex;flex-direction:column;} #adminChatMessages{flex:1;overflow-y:auto;} /* Page header */ .dash-page-header{flex-wrap:wrap;} .dash-page-header h1{font-size:1.25rem;} /* Chat main header: allow wrap */ .chat-main-header{flex-wrap:wrap;gap:.4rem;min-width:0;} .chat-main-header-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;} } /* ─── MOBILE SMALL (≤ 600px) ────────────────────────────── */ @media(max-width:600px){ /* Grid */ .dash-grid{grid-template-columns:1fr;} .dash-stat{font-size:1.25rem;} /* Pay stats: 2-col */ #adminPayStats{grid-template-columns:1fr 1fr!important;} /* Main */ .dash-main{padding:1rem .75rem 3rem;} /* Sections */ .dash-section{padding:1rem;} /* Buy banner */ .buy-banner{flex-direction:column!important;gap:.8rem;padding:1.2rem;text-align:center;} .buy-btn{width:100%;text-align:center;justify-content:center;} /* Profile */ .profile-grid{grid-template-columns:1fr;} /* Modal */ .modal-card{padding:1.2rem 1rem;width:96vw;} .modal-title{font-size:1.2rem;} .hours-grid{grid-template-columns:1fr 1fr;gap:.5rem;} /* Schedule items */ .sched-item{flex-wrap:wrap;gap:.4rem;} .sched-date{flex-shrink:0;} .sched-info{min-width:0;flex:1 1 160px;} .sched-actions{width:100%;flex-wrap:wrap;gap:.3rem;padding-top:.3rem;} .sched-btn,.sched-btn-join,.sched-btn-materials{font-size:.7rem!important;padding:.3rem .6rem!important;} /* Pay filter */ .pay-filter{flex-wrap:wrap;gap:.35rem;} /* Pay items */ .pay-item{flex-direction:column;align-items:stretch;gap:.5rem;} .pay-item-left{flex:1;min-width:0;} .pay-item-name{font-size:.82rem;word-break:break-word;} .pay-item-right{justify-content:space-between;width:100%;} .pay-item-amount{white-space:nowrap;flex-shrink:0;} .pay-item-pay-btn{flex-shrink:0;} /* Group cards */ .group-card{padding:.8rem;} .group-card-header{flex-wrap:wrap;gap:.4rem;align-items:flex-start;} .group-card-name{flex:1 1 100%;word-break:break-word;} .group-card-actions{flex-wrap:wrap;gap:.3rem;width:100%;} /* Student action buttons */ .student-action-btns{flex-wrap:wrap;gap:.3rem;} /* Page header */ .dash-page-header{margin-bottom:1rem;} .dash-page-header h1{font-size:1.15rem;} /* Chat: slightly smaller on small phones */ .chat-layout{height:540px!important;} .chat-sidebar{max-height:175px!important;} /* Admin classes filter layout */ #page-admin-classes>div>div[style*="margin-left:auto"]{margin-left:0!important;} /* VK filters */ .vk-filters-bar{flex-direction:column!important;} .vk-filters-bar input,.vk-filters-bar select{width:100%!important;min-width:0!important;max-width:100%!important;} /* admin-classes search + select inputs */ #lessonSearch,#lessonGroupFilter{width:100%!important;min-width:0!important;} /* dash-page-header with flex inline style */ .dash-page-header[style*="display:flex"]{flex-wrap:wrap!important;} } /* ─── EXTRA SMALL (≤ 420px) ─────────────────────────────── */ @media(max-width:420px){ #adminPayStats{grid-template-columns:1fr!important;} .dash-stat{font-size:1.1rem;} .hours-grid{grid-template-columns:1fr;} .chat-layout{height:500px!important;} .chat-sidebar{max-height:155px!important;} .modal-card{padding:1rem .85rem;} } .pw-wrap{position:relative;display:flex;align-items:center;} .pw-wrap input{padding-right:2.5rem!important;flex:1;} .pw-eye{position:absolute;right:.6rem;background:none!important;border:none!important;padding:.2rem;cursor:pointer;color:var(--muted);display:flex;align-items:center;box-shadow:none!important;-webkit-appearance:none;appearance:none;} .pw-eye:hover{color:var(--ink);} /* Student chat panels — all hidden by default; JS shows the active one */ .student-chat-panel { display: none; } /* ═══════════════════════════════════════════════════════════ VIDEOKURZY ADMIN — School → Code group → Course hierarchy with SortableJS drag-and-drop. Mobile-responsive: cards collapse to single-column at narrow widths and drag-handle stays touch-friendly (min 32x32 hit area). ═══════════════════════════════════════════════════════════ */ /* Collapsible school section wrapper. Body is hidden by default and only shown when the section has .is-open (toggled by clicking the header). The chevron rotates 90° when open. */ .vk-school-section { margin-bottom: 1rem; } .vk-school-header { font-family: 'Lora', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--blue); margin: 0; display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s; user-select: none; } .vk-school-header:hover { background: #fff; border-color: var(--blue-l, var(--blue)); } /* Student-facing static header — no roll/collapse UI. Used by JS when rendering for non-admins. Looks like a clean section title (no card chrome, no hover, no cursor pointer) so nothing invites a click. */ .vk-school-header-static, .vk-school-header-static:hover { cursor: default; background: transparent; border: none; padding: 1.4rem 0 .6rem; border-bottom: 1.5px solid var(--border); border-radius: 0; } .vk-school-chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s ease; } .vk-school-section.is-open .vk-school-chevron { transform: rotate(90deg); color: var(--blue); } .vk-school-name { flex: 1; min-width: 0; } .vk-school-count { font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--white); border: 1px solid var(--border); padding: .2rem .55rem; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; } .vk-school-arrows { display: inline-flex; flex-direction: column; gap: 2px; } .vk-school-arrow { font-size: .65rem !important; padding: .12rem .42rem !important; line-height: 1 !important; min-width: 26px; } .vk-school-arrow:disabled { opacity: .3; cursor: default; } /* Body — hidden by default; revealed by .is-open on the parent section */ .vk-school-body { display: none; flex-direction: column; gap: .85rem; padding: 1rem 0 .4rem; } .vk-school-section.is-open > .vk-school-body { display: flex; } /* Code group — collapsible container, drag handle on header */ .vk-code-group { background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .vk-code-group:hover { border-color: rgba(1,71,126,.3); } .vk-code-head { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; background: linear-gradient(180deg, #f7f7f4, #f1f0eb); border-bottom: 1px solid var(--border); } .vk-code-handle { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; border-radius: 6px; touch-action: none; /* prevent browser scroll on touch-drag */ flex-shrink: 0; } .vk-code-handle:hover { background: rgba(0,0,0,.05); color: var(--ink); } .vk-code-handle:active { cursor: grabbing; } .vk-code-label { font-family: 'DM Sans', sans-serif; font-size: .92rem; font-weight: 700; color: var(--blue); flex: 1; min-width: 0; letter-spacing: .01em; } .vk-code-count { font-size: .72rem; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--border); padding: .18rem .55rem; border-radius: 100px; white-space: nowrap; } .vk-code-courses { display: flex; flex-direction: column; gap: .55rem; padding: .7rem .9rem .8rem; /* Highlight the drop zone slightly so it's clear courses can be dropped here */ min-height: 24px; } /* Individual course card. align-items:flex-start so the body content sits at the top of the card and the card height matches the TALLER of body/actions instead of stretching the body block to leave whitespace below it. */ .vk-course-card { display: flex; align-items: flex-start; gap: .65rem; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: .7rem .85rem; transition: border-color .15s, box-shadow .15s, transform .15s; } .vk-course-card:hover { border-color: rgba(233,87,46,.35); box-shadow: 0 2px 10px rgba(0,0,0,.05); } /* Deep-link highlight — pulses briefly when the user lands via ?course= from the videokurz template's "Otevřít v dashboardu" CTA. */ .vk-course-card.videokurz-deeplink-highlight { animation: vk-deeplink-pulse 1.4s ease-out 2; border-color: #e9572e !important; box-shadow: 0 0 0 3px rgba(233,87,46,.25); } @keyframes vk-deeplink-pulse { 0% { box-shadow: 0 0 0 0 rgba(233,87,46,.55); } 50% { box-shadow: 0 0 0 14px rgba(233,87,46,0); } 100% { box-shadow: 0 0 0 0 rgba(233,87,46,0); } } .vk-card-grip { width: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; border-radius: 6px; touch-action: none; flex-shrink: 0; /* align-self:auto — grip stays at top of card with the body, doesn't pull the card taller by stretching the full height. */ align-self: flex-start; padding-top: .15rem; } .vk-card-grip:hover { background: rgba(0,0,0,.04); color: var(--ink); } .vk-card-grip:active { cursor: grabbing; } .vk-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; } .vk-card-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .vk-card-code { font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; color: #fff; background: #e9572e; padding: .15rem .5rem; border-radius: 5px; white-space: nowrap; letter-spacing: .02em; } .vk-card-title { font-family: 'Lora', Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-width: 0; } .vk-card-meta { font-size: .76rem; color: var(--muted); font-family: 'DM Sans', sans-serif; } .vk-card-desc { font-size: .76rem; color: var(--muted); font-family: 'DM Sans', sans-serif; line-height: 1.5; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Actions — compact 2-column grid (Přejít / Upravit / Duplikovat / Smazat / Zobrazit). 5 buttons across 3 grid rows roughly halves the actions block height vs a vertical flex column, so cards collapse to the height of the body content (no more dead whitespace at the bottom). Fixed width so the two columns are guaranteed equal and the buttons inside each cell render as identically-sized rectangles regardless of label length. */ .vk-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; flex-shrink: 0; align-content: flex-start; width: 240px; } .vk-card-actions > * { width: 100%; min-width: 0; } .vk-card-btn-go { grid-column: 1 / -1; } /* Centered text for BOTH