:root{--blue:#01477e;--blue-d:#003461;--blue-l:#1a6aad;--blue-xl:#e8f2fa;--orange:#e9572e;--orange-xl:#fdf0ec;--orange-d:#c9421d;--ink:#111827;--bg:#fafaf8;--bg2:#f3f1ec;--white:#ffffff;--muted:#6b7280;--border:#e5e1d8;--green:#16a34a;--green-xl:#f0fdf4;}
*{margin:0;padding:0;box-sizing:border-box;}
/* WordPress admin bar (32px/46px) is position:fixed and adds body padding-top.
   Using 100% on html/body + flex:1 on layout lets it fill remaining space naturally. */
html,body{height:100%;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;}
/* WP admin bar offset */
.admin-bar body,.admin-bar .mat-layout{padding-top:0;/* WP handles this via body padding-top */}
.mat-layout{flex:1;display:flex;overflow:hidden;min-height:0;}
.mat-sidebar{width:300px;min-width:260px;background:#f8f7f5;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.mat-sidebar-header{padding:1.2rem 1.4rem;border-bottom:1px solid var(--border);flex-shrink:0;}
.mat-sidebar-header h2{font-family:'Lora',serif;font-size:1.05rem;font-weight:700;margin-bottom:.2rem;}
.mat-sidebar-header p{font-size:.75rem;color:var(--muted);}
.mat-sidebar-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem;scroll-behavior:smooth;}
/* ── Sidebar: sections vs items ────────────────────────────
   Sections get a SOLID coloured band so they read clearly as headings —
   different background, slight uppercase letter-spacing on the name, and a
   left accent stripe. Items nest underneath with an indented left rail so
   the parent-child relationship is visible at a glance.
*/
.mat-section{margin-bottom:.55rem;}
.mat-section + .mat-section{margin-top:.25rem;}
.mat-section-left{display:flex;align-items:center;gap:.7rem;}
.mat-section-arrow{transition:transform .25s;color:var(--blue);}
.mat-section-header.open .mat-section-arrow{transform:rotate(90deg);}
.mat-section-name{
  font-weight:700;
  font-size:.82rem;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mat-section-count{font-size:.72rem;font-weight:700;color:#fff;background:var(--blue);padding:.15rem .55rem;border-radius:5px;}
.mat-section-items{
  display:none;
  padding:.35rem 0 .4rem .45rem;
  border-left:2px solid var(--blue-xl);
  margin-left:1.2rem;
}
.mat-section.open .mat-section-items{display:block;}
.mat-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-radius:9px;cursor:pointer;transition:all .2s;margin-bottom:1px;background:#fff;}
.mat-item:hover{background:var(--blue-xl);}
.mat-item.active{background:var(--blue);color:#fff;}
.mat-item.active .mat-item-icon{color:#fff;}.mat-item.active .mat-item-dur{color:rgba(255,255,255,.5);}
.mat-item.active .mat-item-lock{color:rgba(255,255,255,.4);}
.mat-item-icon{color:var(--blue);flex-shrink:0;}
.mat-item-info{flex:1;min-width:0;}
.mat-item-name{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mat-item-dur{font-size:.7rem;color:var(--muted);margin-top:.1rem;}
.mat-item-lock{color:var(--border);flex-shrink:0;}
.mat-item-unlocked .mat-item-name{font-weight:600;}
.mat-main{flex:1;min-width:0;background:var(--white);display:flex;flex-direction:column;overflow:hidden;}
.mat-main-header{padding:.8rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0;background:var(--bg);min-height:0;}
.mat-main-header-left{flex:1;min-width:0;}
.mat-main-title{font-family:'Lora',serif;font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mat-main-meta{font-size:.73rem;color:var(--muted);}
/* Admin action buttons in header – always visible */
.mat-main-actions{display:flex;gap:.4rem;flex-shrink:0;align-items:center;flex-wrap:nowrap;}
.mat-action-btn{display:flex;align-items:center;gap:.35rem;padding:.38rem .8rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;border:1.5px solid var(--border);background:var(--white);color:var(--ink);cursor:pointer;transition:all .2s;white-space:nowrap;}
.mat-action-btn:hover{border-color:var(--blue);color:var(--blue);}
.mat-action-btn-upload{background:var(--blue);color:#fff !important;border-color:var(--blue);}
.mat-action-btn-upload:hover{background:var(--blue-l) !important;border-color:var(--blue-l);}
.mat-action-btn-sidebar{border-color:var(--border);}
/* Optional rich-text description shown right below the title and above the
   body (video / PDF / text). Separate band so it stays readable regardless of
   what the body renders. Hidden by JS when empty. */
.mat-main-desc{
  padding:.85rem 1.4rem;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  font-family:'DM Sans',sans-serif;
  font-size:.88rem;
  line-height:1.6;
  color:#444;
  flex-shrink:0;
  max-height:30vh;
  overflow-y:auto;
}
.mat-main-desc p{margin:0 0 .55rem;}
.mat-main-desc p:last-child{margin-bottom:0;}
.mat-main-desc ul,.mat-main-desc ol{margin:.3rem 0 .55rem 1.2rem;padding:0;}
.mat-main-desc li{margin-bottom:.2rem;}
.mat-main-desc strong,.mat-main-desc b{color:inherit;font-weight:700;}
.mat-main-desc a{color:#01477e;text-decoration:underline;}
.mat-main-desc a:hover{color:#e9572e;}
@media(max-width:720px){
  .mat-main-desc{padding:.7rem 1rem;font-size:.82rem;max-height:35vh;}
}

/* Main body */
.mat-main-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.mat-main-body.is-text,.mat-main-body.is-doc{overflow-y:auto;}
.mat-main-body.is-video{overflow:hidden;background:#000;}
.mat-main-body.is-empty{align-items:center;justify-content:center;background:var(--bg);}
.mat-doc-preview{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;}
.mat-doc-icon{width:100px;height:120px;background:var(--bg2);border:2px solid var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:1.5rem;position:relative;}
.mat-doc-icon::after{content:'PDF';position:absolute;bottom:-1px;right:-1px;background:var(--orange);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.05em;padding:.2rem .5rem;border-radius:4px 0 10px 0;}
.mat-doc-icon svg{opacity:.3;}
.mat-doc-title{font-family:'Lora',serif;font-size:1.2rem;font-weight:700;margin-bottom:.4rem;text-align:center;}
.mat-doc-info{font-size:.85rem;color:var(--muted);margin-bottom:1.5rem;text-align:center;}
.mat-doc-actions{display:flex;gap:.8rem;}
.mat-dl-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:.8rem 2rem;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .25s;box-shadow:0 4px 16px rgba(1,71,126,.2);}.mat-dl-btn:hover{background:var(--blue-l);transform:translateY(-1px);}
.mat-view-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;color:var(--blue);border:1.5px solid var(--border);border-radius:10px;padding:.8rem 2rem;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;}.mat-view-btn:hover{border-color:var(--blue);}
.mat-nav{padding:.85rem 2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;background:var(--bg);}
.mat-nav-btn{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s;font-family:'DM Sans',sans-serif;padding:.4rem .8rem;border-radius:8px;}
.mat-nav-btn:hover{color:var(--blue);background:var(--blue-xl);}
.mat-nav-btn:disabled{opacity:.3;cursor:default;pointer-events:none;}
/* Admin controls – materials page */
.mat-section-header{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  border-radius:10px;
  transition:background .2s,box-shadow .2s;
  user-select:none;
  flex-wrap:wrap;
  /* Solid coloured band — clearly distinct from white item rows */
  background:var(--blue-xl);
  border-left:3px solid var(--blue);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.mat-section-header:hover{background:#cfe4f5;}
.mat-section-header.open{background:var(--blue);border-left-color:var(--blue);}
.mat-section-header.open .mat-section-name{color:#fff;}
.mat-section-header.open .mat-section-arrow{color:#fff;}
.mat-section-header.open .mat-section-count{background:#fff;color:var(--blue);}
.mat-section-left{flex:1 1 100%;display:flex;align-items:center;gap:.7rem;padding:.65rem 1rem;cursor:pointer;min-width:0;}
.mat-section-left .mat-section-name{flex:1;min-width:0;word-break:break-word;}
.mat-section-right{display:flex;align-items:center;gap:.25rem;padding:0 .6rem .55rem 2.2rem;flex-wrap:wrap;width:100%;}
.mat-admin-icon-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:all .15s;color:var(--muted);flex-shrink:0;}
.mat-admin-icon-btn:hover{background:var(--bg2);border-color:var(--border);color:var(--ink);}
.mat-admin-icon-btn-del:hover{background:#fde8e3;border-color:rgba(229,62,62,.25);color:#e53e3e;}
/* Section action buttons — text-based so always visible */
.mat-sec-btn{padding:.25rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--white);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s;line-height:1.4;flex-shrink:0;}
.mat-sec-btn:hover{background:var(--blue-xl);border-color:var(--blue);color:var(--blue);}
.mat-sec-btn-edit{background:var(--blue-xl);color:var(--blue);border-color:rgba(1,71,126,.2);}
.mat-sec-btn-edit:hover{background:var(--blue);color:#fff;}
.mat-sec-btn-del{color:#e53e3e;border-color:rgba(229,62,62,.25);}
.mat-sec-btn-del:hover{background:#fde8e3;border-color:rgba(229,62,62,.4);}
.mat-item-wrapper{display:flex;flex-direction:column;}
.mat-item-admin-row{display:flex;gap:.25rem;padding:.2rem .9rem .4rem 2.2rem;flex-wrap:wrap;}
.mat-admin-btn-sm{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:5px;font-size:.68rem;font-weight:600;font-family:'DM Sans',sans-serif;border:1px solid var(--border);background:var(--white);color:var(--muted);cursor:pointer;transition:all .15s;}
.mat-admin-btn-sm:hover{border-color:var(--blue);color:var(--blue);}
.mat-admin-btn-del{}.mat-admin-btn-del:hover{border-color:rgba(229,62,62,.4) !important;color:#e53e3e !important;}
.mat-add-item-btn{padding:.25rem .9rem .5rem;}
.mat-add-item-btn button{display:flex;align-items:center;gap:.4rem;background:none;border:1.5px dashed var(--border);border-radius:8px;padding:.35rem .9rem;font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;color:var(--muted);cursor:pointer;width:100%;transition:all .2s;}
.mat-add-item-btn button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}
.mat-admin-bar{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--border);}
.mat-admin-btn-add{display:flex;align-items:center;justify-content:center;gap:.4rem;background:none;border:1.5px dashed rgba(233,87,46,.4);border-radius:9px;padding:.5rem .9rem;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;color:var(--orange);cursor:pointer;width:100%;transition:all .2s;}
.mat-admin-btn-add:hover{background:var(--orange-xl);border-color:var(--orange);}
.mat-admin-upload-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.7rem 1.2rem;background:#1a1a1a;border-top:1px solid rgba(255,255,255,.08);}
.mat-admin-upload-label{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:.5rem 1.1rem;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;}
.mat-admin-upload-label:hover{background:rgba(255,255,255,.22);}
.mat-admin-btn{font-family:'DM Sans',sans-serif;font-weight:600;cursor:pointer;transition:all .15s;}
/* ── Mobile topbar ─────────────────────────────────── */
.mat-mobile-topbar{display:none;align-items:center;justify-content:space-between;padding:0 .9rem;height:52px;background:var(--blue);color:#fff;flex-shrink:0;position:sticky;top:0;z-index:20;gap:.5rem;}
.mat-mobile-back-btn{display:flex;align-items:center;gap:.25rem;color:rgba(255,255,255,.85);text-decoration:none;font-size:.8rem;font-weight:600;white-space:nowrap;flex-shrink:0;}
.mat-mobile-back-btn:hover{color:#fff;}
.mat-mobile-course-title{flex:1;font-size:.82rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
/* Hamburger toggle on the mobile topbar. Bigger hit area + icon + visible
   "Obsah" label so the button is obviously a content menu, not a tiny
   mystery glyph. */
.mat-mobile-menu-btn{background:rgba(255,255,255,.18);border:none;border-radius:10px;min-width:44px;height:38px;padding:0 .65rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;color:#fff;flex-shrink:0;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;}
.mat-mobile-menu-btn:hover{background:rgba(255,255,255,.3);}
.mat-mobile-menu-btn svg{display:block;}
.mat-mobile-menu-btn-label{line-height:1;}
/* Very narrow screens — drop the label, keep the bigger icon */
@media(max-width:380px){
  .mat-mobile-menu-btn-label{display:none;}
  .mat-mobile-menu-btn{padding:0;width:42px;min-width:42px;}
}
.mat-mobile-close-btn{display:none;background:var(--bg2);border:1px solid var(--border);border-radius:7px;width:30px;height:30px;min-width:30px;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex-shrink:0;}
.mat-mobile-close-btn:hover{background:var(--border);color:var(--ink);}

@media(max-width:768px){
  .mat-mobile-topbar{display:flex;}
  /* Layout fills viewport below topbar */
  body{overflow:hidden;display:flex;flex-direction:column;}
  .mat-layout{flex:1;min-height:0;overflow:hidden;}
  /* Sidebar: slide in from left, cover full screen */
  .mat-sidebar{width:100%;position:fixed;left:0;top:0;bottom:0;z-index:15;transform:translateX(-100%);transition:transform .3s;}.mat-sidebar.open{transform:translateX(0);}
  /* Header: stack title above buttons */
  .mat-main-header{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.75rem 1rem;}
  .mat-main-header-left{width:100%;min-width:0;}
  .mat-main-title{white-space:normal;overflow:visible;text-overflow:unset;font-size:.92rem;}
  .mat-main-actions{width:100%;flex-wrap:wrap;}
  /* Show sidebar toggle button on mobile */
  #matSidebarToggle{display:flex !important;}
  /* Show close button inside sidebar on mobile */
  .mat-mobile-close-btn{display:flex;}
  /* Nav buttons label */
  .mat-nav{padding:.75rem 1rem;}
}

/* ── Text type view ── */
.mat-text-view{padding:1.5rem 2rem;flex:1;overflow-y:auto;}
.mat-text-edit-bar{margin-bottom:1.2rem;}
.mat-text-content{font-size:.95rem;line-height:1.75;color:var(--ink);}
.mat-text-content h2{font-family:'Lora',serif;font-size:1.3rem;font-weight:700;margin:1.2rem 0 .5rem;}
.mat-text-content h3{font-family:'Lora',serif;font-size:1.05rem;font-weight:700;margin:1rem 0 .4rem;}
.mat-text-content p{margin-bottom:.8rem;}
.mat-text-content ul,.mat-text-content ol{margin:.5rem 0 .8rem 1.4rem;}
.mat-text-content li{margin-bottom:.3rem;}
.mat-text-content a{color:var(--blue);text-decoration:underline;}
.mat-text-content strong,.mat-text-content b{font-weight:700;}
.mat-text-content em,.mat-text-content i{font-style:italic;}

/* ── Text editor wrap ── */
.mat-text-editor-wrap{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;}
.mat-text-toolbar{display:flex;align-items:center;gap:.25rem;padding:.6rem .8rem;border-bottom:1px solid var(--border);background:#f8f7f5;flex-wrap:wrap;flex-shrink:0;row-gap:.25rem;}
.mat-text-toolbar-btn{padding:.3rem .55rem;border:1.5px solid var(--border);border-radius:6px;background:#fff;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s;line-height:1.3;white-space:nowrap;position:relative;}
.mat-text-toolbar-btn:hover{background:var(--blue-xl);border-color:var(--blue);color:var(--blue);}
.mat-text-toolbar-btn-save{background:var(--blue);color:#fff !important;border-color:var(--blue);margin-left:.3rem;}
.mat-text-toolbar-btn-save:hover{background:var(--blue-d) !important;border-color:var(--blue-d);}
.mat-text-toolbar-btn-cancel{background:var(--bg2);color:var(--muted);border-color:var(--border);}
.mat-text-toolbar-btn-cancel:hover{background:var(--border);color:var(--ink);}
.mat-text-toolbar-color{display:inline-flex;align-items:center;cursor:pointer;user-select:none;}
.mat-text-toolbar-highlight{text-decoration:underline;text-underline-offset:2px;}
.mat-text-toolbar-select{padding:.28rem .4rem;border:1.5px solid var(--border);border-radius:6px;background:#fff;font-family:'DM Sans',sans-serif;font-size:.76rem;color:var(--ink);cursor:pointer;outline:none;}
.mat-text-toolbar-select:hover{border-color:var(--blue);}
.mat-text-toolbar-sep{width:1px;height:20px;background:var(--border);margin:0 .1rem;flex-shrink:0;align-self:center;}
.mat-text-editable{flex:1;width:100%;overflow-y:auto;padding:1.5rem 2rem;font-size:.95rem;line-height:1.75;color:var(--ink);outline:none;}
.mat-text-editable:focus{outline:none;}
.mat-text-editable h1{font-family:'Lora',serif;font-size:1.7rem;font-weight:700;margin:1.4rem 0 .6rem;}
.mat-text-editable h2{font-family:'Lora',serif;font-size:1.3rem;font-weight:700;margin:1.2rem 0 .5rem;}
.mat-text-editable h3{font-family:'Lora',serif;font-size:1.05rem;font-weight:700;margin:1rem 0 .4rem;}
.mat-text-editable p{margin-bottom:.8rem;}
.mat-text-editable ul,.mat-text-editable ol{margin:.5rem 0 .8rem 1.6rem;}
.mat-text-editable li{margin-bottom:.3rem;}
.mat-text-editable blockquote{border-left:4px solid var(--blue);background:var(--blue-xl);padding:.7rem 1rem;margin:.8rem 0;border-radius:0 8px 8px 0;font-style:italic;color:var(--blue-d);}
.mat-text-editable hr{border:none;border-top:2px solid var(--border);margin:1.2rem 0;}
.mat-text-editable a{color:var(--blue);text-decoration:underline;}

/* Read-only text view */
.mat-text-content h1{font-family:'Lora',serif;font-size:1.7rem;font-weight:700;margin:1.4rem 0 .6rem;}
.mat-text-content h2{font-family:'Lora',serif;font-size:1.3rem;font-weight:700;margin:1.2rem 0 .5rem;}
.mat-text-content h3{font-family:'Lora',serif;font-size:1.05rem;font-weight:700;margin:1rem 0 .4rem;}
.mat-text-content p{margin-bottom:.8rem;}
.mat-text-content ul,.mat-text-content ol{margin:.5rem 0 .8rem 1.6rem;}
.mat-text-content li{margin-bottom:.3rem;}
.mat-text-content blockquote{border-left:4px solid var(--blue);background:var(--blue-xl);padding:.7rem 1rem;margin:.8rem 0;border-radius:0 8px 8px 0;font-style:italic;color:var(--blue-d);}
.mat-text-content hr{border:none;border-top:2px solid var(--border);margin:1.2rem 0;}
.mat-text-content a{color:var(--blue);text-decoration:underline;}

/* Edit text button */
.mat-text-edit-bar .mat-text-toolbar-btn{background:var(--blue);color:#fff;border-color:var(--blue);display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.82rem;}
.mat-text-edit-bar .mat-text-toolbar-btn:hover{background:var(--blue-d);border-color:var(--blue-d);}

/* ── Watched checkmark button ─────────────────────────── */
.mat-watch-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:1.5px solid var(--border);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--border);transition:all .2s;flex-shrink:0;padding:0;}
.mat-watch-btn:hover{border-color:var(--green);color:var(--green);}
.mat-watch-btn.watched{background:var(--green);border-color:var(--green);color:#fff;}
.mat-item{position:relative;padding-right:2rem;}