/* =============================================
   MOJE PÍSŇOVNA v2 – Shared Design System
   Inspirováno designem lidoveprameny.cz
   ============================================= */

/* Reddit Sans – přímé woff2 z gstatic */
@font-face {
  font-family: 'Reddit Sans';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redditsans/v6/EYq1maFOxq1T_-ETdN7EKQNuS5u33lFHSpuJpA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Reddit Sans';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redditsans/v6/EYq1maFOxq1T_-ETdN7EKQNuS5q33lFHSpuJpA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Reddit Sans';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redditsans/v6/EYq1maFOxq1T_-ETdN7EKQNuS5S33lFHSps.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redditsans/v6/EYq3maFOxq1T_-ETdN7EKQNke5a92XNFepo.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redditsans/v6/EYq3maFOxq1T_-ETdN7EKQNle5a92XNFepo.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Reddit Sans';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/redditsans/v6/EYq3maFOxq1T_-ETdN7EKQNre5a92XNF.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Barvy podle originálu lidoveprameny.cz */
  --navy:        #2d3282;   /* tmavě modrá/fialová z originálu */
  --navy-hover:  #222570;
  --navy-light:  #eeeef8;   /* světle modrá pill BG */
  --navy-mid:    #b0b3e0;
  --surface:     #f5f5f5;   /* světle šedá pro bloky / karty */
  --surface-mid: #ebebeb;
  --white:       #ffffff;
  --text:        #1a1a2e;
  --text-muted:  #6b6b85;
  --text-light:  #a0a0b0;
  --border:      #e0e0e8;
  --border-mid:  #ccccda;

  /* statusy */
  --green:       #2a7a50;
  --green-bg:    #eaf5ef;
  --green-bd:    #b5d9c5;
  --yellow:      #8a6400;
  --yellow-bg:   #fdf6e3;
  --yellow-bd:   #e8d28a;
  --blue:        #1a55a0;
  --blue-bg:     #e8f1fb;
  --blue-bd:     #a8c8f0;
  --orange:      #a04010;
  --orange-bg:   #fdf0e8;
  --orange-bd:   #e8b898;
  --done:        #1a5c3a;
  --done-bg:     #e5f0ea;
  --done-bd:     #a0ccb4;
  --red:         #a02020;
  --red-bg:      #fdf0f0;
  --red-bd:      #e8a8a8;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.05);
  --shadow-md:   0 2px 10px rgba(0,0,0,.07);
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family: 'Reddit Sans', system-ui, sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHY ─────────────────────────────── */
/* Žádný serif – vše Reddit Sans, jako originál */
h1 { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--navy); }
h2 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--navy); }
h3 { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--navy); }
h4 { font-size: 14px; font-weight: 700; color: var(--text); }

/* ── TOPBAR ─────────────────────────────────── */
.topbar {
  background: var(--navy);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.topbar-logo {
  font-size: 17px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  margin-right: 28px;
  flex-shrink: 0;
  letter-spacing: -.1px;
}
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.topbar-nav a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  transition: background .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.topbar-nav a:hover { background: rgba(255,255,255,.12); color: white; }
.topbar-nav a.active { background: rgba(255,255,255,.18); color: white; font-weight: 600; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.72); font-size: 16px;
  transition: background .15s; text-decoration: none;
}
.topbar-icon:hover { background: rgba(255,255,255,.15); color: white; }
.topbar-icon.badge { position: relative; }
.topbar-icon.badge::after {
  content: '';
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px;
  background: #e85454; border-radius: 50%;
  border: 1.5px solid var(--navy);
}
.topbar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: white;
  cursor: pointer; transition: background .15s; text-decoration: none;
}
.topbar-avatar:hover { background: rgba(255,255,255,.3); }

/* ── DISCOURSE ──────────────────────────────── */
.disc-tab {
  position: fixed; right: 0; top: 50%;
  background: var(--surface);
  border: 1px solid var(--border); border-right: none;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  padding: 14px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; cursor: pointer;
  border-radius: 6px 0 0 6px; z-index: 199;
  transition: background .15s, color .15s;
}
.disc-tab:hover { background: var(--navy); color: white; border-color: var(--navy); }
.disc-popup {
  position: fixed; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 280px; background: white;
  border: 1px solid var(--border); border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 0 30px rgba(0,0,0,.1);
  z-index: 200; display: none; flex-direction: column;
  overflow: hidden; max-height: 70vh;
}
.disc-popup.open { display: flex; }
.disc-popup-head {
  background: var(--navy); color: white;
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.disc-close { cursor: pointer; opacity: .7; font-size: 20px; line-height: 1; }
.disc-close:hover { opacity: 1; }
.disc-posts { overflow-y: auto; flex: 1; }
.disc-post {
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.disc-post:last-child { border-bottom: none; }
.disc-post:hover { background: var(--surface); }
.disc-post-title { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.disc-post-meta { font-size: 11px; color: var(--text-muted); }
.disc-popup-foot {
  padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0; text-align: center;
}

/* ── BUTTONS ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: none; font-family: 'Reddit Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .15s; white-space: nowrap; line-height: 1.4;
}
/* Primární – navy fill (jako "Zobrazit detail písně" v originálu) */
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--navy-hover); }
/* Sekundární – světle modrá pill jako navigace v originálu */
.btn-pill {
  background: var(--navy-light);
  color: var(--navy);
  border: none;
}
.btn-pill:hover { background: var(--navy-mid); }
.btn-pill.active { background: var(--navy); color: white; }
/* Outline */
.btn-secondary { background: white; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: white; }
/* Ghost */
.btn-ghost { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
/* Surface – šedivé tlačítko */
.btn-surface { background: var(--surface); color: var(--text); border: none; }
.btn-surface:hover { background: var(--surface-mid); }
/* Akce */
.btn-success { background: var(--green); color: white; }
.btn-success:hover { filter: brightness(1.08); }
.btn-warn { background: var(--orange); color: white; }
.btn-warn:hover { filter: brightness(1.08); }
.btn-danger { background: var(--red); color: white; }
.btn-danger:hover { filter: brightness(1.08); }
/* Velikosti */
.btn-sm { padding: 5px 14px; font-size: 13px; }
.btn-lg { padding: 11px 28px; font-size: 15px; }
.btn-xl { padding: 14px 36px; font-size: 16px; }

/* ── PILL NAV (jako sidebar originálu) ──────── */
.pill-nav { display: flex; flex-direction: column; gap: 6px; }
.pill-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s;
  border: none;
}
.pill-nav-item:hover { background: var(--navy-light); color: var(--navy); }
.pill-nav-item.active { background: var(--navy); color: white; }
.pill-nav-item .icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

/* ── TAGS ───────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.tag-volna     { background: var(--green-bg);  color: var(--green);  border-color: var(--green-bd); }
.tag-prepisuje { background: var(--yellow-bg); color: var(--yellow); border-color: var(--yellow-bd); }
.tag-review    { background: var(--blue-bg);   color: var(--blue);   border-color: var(--blue-bd); }
.tag-vedec     { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-bd); }
.tag-done      { background: var(--done-bg);   color: var(--done);   border-color: var(--done-bd); }
.tag-expiring  { background: var(--red-bg);    color: var(--red);    border-color: var(--red-bd); }
.tag-zamit     { background: var(--red-bg);    color: var(--red);    border-color: var(--red-bd); }

/* ── LAYOUT ─────────────────────────────────── */
.page-content      { max-width: 960px;  margin: 0 auto; padding: 32px 28px; }
.page-content-wide { max-width: 1140px; margin: 0 auto; padding: 32px 28px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* ── CARDS / SURFACE ────────────────────────── */
/* Originál nepoužívá stínované karty – jen světle šedé bloky */
.surface {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* ── FORM INPUTS ────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.form-input {
  width: 100%; padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Reddit Sans', sans-serif;
  font-size: 14px; color: var(--text);
  background: white; outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--navy); }
.form-input:disabled { background: var(--surface); color: var(--text-muted); cursor: not-allowed; }

/* ── SEARCH ─────────────────────────────────── */
.search-wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px; background: white;
  transition: border-color .15s;
}
.search-wrap:focus-within { border-color: var(--navy); }
.search-wrap input {
  flex: 1; border: none; outline: none;
  font-family: 'Reddit Sans', sans-serif;
  font-size: 14px; color: var(--text); background: transparent;
}
.search-wrap .si { color: var(--text-muted); font-size: 15px; }

/* ── TABS ───────────────────────────────────── */
.tabs { display: flex; gap: 4px; }
.tab {
  padding: 6px 18px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--surface); color: var(--text-muted);
  border: none; transition: all .15s;
  font-family: 'Reddit Sans', sans-serif;
}
.tab:hover { background: var(--navy-light); color: var(--navy); }
.tab.active { background: var(--navy); color: white; font-weight: 600; }

/* ── TABLES ─────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead tr { border-bottom: 1.5px solid var(--border); }
.tbl th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); padding: 9px 12px;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.cl { cursor: pointer; transition: background .1s; }
.tbl tbody tr.cl:hover { background: var(--surface); }
.tbl-link { color: var(--navy); font-weight: 600; cursor: pointer; }
.tbl-link:hover { text-decoration: underline; }
.tbl-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── PAGINATION ─────────────────────────────── */
.pag { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 16px; }
.pb {
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--surface); font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--text-muted); border: none;
  font-family: 'Reddit Sans', sans-serif; transition: all .15s;
}
.pb:hover, .pb.active { background: var(--navy); color: white; }

/* ── ALERTS ─────────────────────────────────── */
.alert {
  padding: 11px 15px; border-radius: var(--radius);
  font-size: 13.5px; display: flex; align-items: flex-start;
  gap: 10px; margin-bottom: 14px;
}
.alert-info   { background: var(--blue-bg);   color: var(--blue);   border: 1px solid var(--blue-bd); }
.alert-warn   { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-bd); }
.alert-danger { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-bd); }

/* ── PROGRESS ───────────────────────────────── */
.prog-track { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; flex: 1; }
.prog-fill  { height: 100%; background: var(--navy); border-radius: 10px; }

/* ── DEMO NOTE ──────────────────────────────── */
.demo-note {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(45,50,130,.88); backdrop-filter: blur(6px);
  color: rgba(255,255,255,.6); padding: 4px 16px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  pointer-events: none; z-index: 999; white-space: nowrap;
}

/* ── HELPERS ────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-4  { gap: 4px; }  .gap-8  { gap: 8px; }  .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.mt-8  { margin-top: 8px; }  .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }  .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 13px; }
.text-xs    { font-size: 11px; }
.fw-600     { font-weight: 600; }
.fw-700     { font-weight: 700; }