/* kanal3 spoke — page-specific styles on top of the ported MediaForce chrome.
 * admin.css + site-themes.css own the shell (top bar, footer, cards, buttons,
 * breadcrumbs, avatar). This file only styles the streaming surfaces (hero
 * rails, player, login) and binds them to the same --mf-* tokens. */

/* Top-bar nav (sits in .admin-main-menu-widgets-left next to the brand) */
.k3-nav { display:flex; align-items:center; gap:4px; }
.k3-nav-item { display:inline-flex; align-items:center; padding:6px 12px; border-radius:6px;
  color:var(--mf-text-muted); font-size:14px; font-weight:600; text-decoration:none; }
.k3-nav-item:hover { background:var(--mf-surface-2); color:var(--mf-text); }
.admin-brand span { color:var(--mf-primary); }

/* ---- frontpage: Netflix-style rails ---- */
.k3-empty { padding:60px 22px; color:var(--mf-text-muted); font-size:16px; }
.k3-hero { position:relative; height:min(56vw,460px); margin:0 0 6px; display:flex; align-items:flex-end; }
.k3-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.k3-hero-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--mf-bg) 0%,color-mix(in srgb,var(--mf-bg) 55%,transparent) 45%,transparent 100%),
             linear-gradient(0deg,var(--mf-bg),transparent 55%); }
.k3-hero-inner { position:relative; padding:0 44px 34px; max-width:640px; }
.k3-hero-title { font-size:clamp(26px,4vw,46px); font-weight:800; margin:0 0 10px; color:var(--mf-text); }
.k3-hero-desc { color:var(--mf-text-muted); font-size:15px; margin:0 0 16px; max-height:66px; overflow:hidden; }
.k3-hero-play { display:inline-flex; align-items:center; gap:8px; background:var(--mf-primary); color:var(--mf-on-primary,#fff);
  font-weight:700; padding:10px 22px; border-radius:8px; font-size:15px; text-decoration:none; }
.k3-shelf { padding:14px 0 6px; }
.k3-shelf-head { margin:0; padding:4px 44px 8px; font-size:17px; font-weight:700; color:var(--mf-text);
  display:flex; align-items:baseline; gap:12px; }
.k3-shelf-head a { font-size:13px; font-weight:600; color:var(--mf-link); }
.k3-rail { display:flex; gap:12px; overflow-x:auto; padding:4px 44px 16px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.k3-rail::-webkit-scrollbar { height:8px; }
.k3-rail::-webkit-scrollbar-thumb { background:var(--mf-border); border-radius:4px; }
.k3-tile { flex:0 0 auto; width:260px; scroll-snap-align:start; background:var(--mf-surface); border:1px solid var(--mf-border);
  border-radius:8px; overflow:hidden; transition:transform .14s; text-decoration:none; color:inherit; }
.k3-tile:hover { transform:scale(1.05); z-index:2; }
.k3-tile img { width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; display:block; } /* theme-audit-allow: video pillarbox black */
.k3-tile .k3-meta { padding:9px 11px; }
.k3-tile .k3-name { font-size:14px; font-weight:600; color:var(--mf-text); }
.k3-tile .k3-dur { font-size:12px; color:var(--mf-text-muted); margin-top:2px; }

/* browse-all grid (frontpage "see all" / paged) */
.k3-browse-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; padding:8px 44px 24px; }
.k3-pager { display:flex; gap:10px; justify-content:center; align-items:center; padding:6px 0 30px; color:var(--mf-text-muted); }

/* ---- player ---- */
.k3-player-wrap { max-width:1280px; margin:0 auto; padding:22px 44px; }
.k3-player-wrap video { width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; } /* theme-audit-allow: video pillarbox black */
.k3-back { display:inline-block; margin-bottom:14px; font-size:14px; color:var(--mf-text-muted); }

/* ---- login (pre-auth, no chrome) ---- */
.k3-login { max-width:360px; margin:12vh auto 0; padding:0 22px; text-align:center; }
.k3-login h1 { font-size:40px; font-weight:800; margin:0 0 26px; color:var(--mf-text); }
.k3-login h1 span { color:var(--mf-primary); }
.k3-login input { width:100%; padding:13px 14px; margin-bottom:12px; border-radius:8px;
  border:1px solid var(--mf-border); background:var(--mf-input-bg); color:var(--mf-text); font-size:15px; }
.k3-login button { width:100%; padding:13px; border:0; border-radius:8px; background:var(--mf-primary);
  color:var(--mf-on-primary,#fff); font-size:15px; font-weight:700; cursor:pointer; }
.k3-login .k3-err { color:var(--mf-danger); font-size:14px; margin-bottom:12px; min-height:18px; }

/* ---- settings / categories cards ---- */
.k3-settings { max-width:640px; margin:0 auto; padding:8px 0 26px; }
.k3-settings h1 { font-size:24px; margin:0 0 18px; color:var(--mf-text); }
.k3-card-box { background:var(--mf-surface); border:1px solid var(--mf-border); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.k3-card-box h2 { font-size:15px; margin:0 0 12px; color:var(--mf-text-muted); font-weight:600; }
.k3-langopts { display:flex; gap:10px; }
.k3-langopts button { flex:1; padding:11px; border-radius:8px; border:1px solid var(--mf-border);
  background:var(--mf-input-bg); color:var(--mf-text); font:inherit; font-weight:600; cursor:pointer; }
.k3-langopts button.active { background:var(--mf-primary); color:var(--mf-on-primary,#fff); border-color:var(--mf-primary); }

/* lean buttons + inputs reused on spoke pages (match admin.css .btn language) */
.k3-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:6px;
  border:1px solid var(--mf-border); background:var(--mf-surface-2); color:var(--mf-text);
  font:inherit; font-size:13px; font-weight:600; line-height:1.4; cursor:pointer; text-decoration:none; }
.k3-btn:hover { background:var(--mf-surface-alt); }
.k3-btn.pri { background:var(--mf-primary); border-color:var(--mf-primary); color:var(--mf-on-primary,#fff); }
.k3-btn.pri:hover { background:var(--mf-primary-hover); border-color:var(--mf-primary-hover); }
.k3-btn.danger { color:var(--mf-danger); border-color:var(--mf-border); background:transparent; }
.k3-input { padding:8px 11px; border-radius:6px; border:1px solid var(--mf-border);
  background:var(--mf-input-bg); color:var(--mf-text); font:inherit; font-size:14px; }