/* =====================================
   ZÁKLAD
===================================== */

:root {
    --green: #666666;
    --green-dark: #333333;
    --gold: rgba(201,162,70,0.6);
    --gold-light: rgba(201,162,70,0.15);


  --bg-main: #f4f4f5;
  --bg-card: #ffffff;
  --bg-soft: #fafafa;


--gray-900: #111111;
  --gray-700: #333333;
  --gray-500: #666666;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;


  --gold: #c9a646;
  --gold-light: rgba(201, 166, 70, 0.15);

    --gold-active: rgba(201,162,70,0.6); /* ≈ o 40 % světlejší */
    --row-alt: #f2f2f2;                 /* světle šedá zebra */

    --text-dark: #1f1f1f;
    --text-muted: #666;
    --border-light: #e5e5e5;
    --bg-light: #ffffff;

  /* Text */
  --text-main: #111111;
  --text-muted: #6b7280;

  --border-light: #e5e7eb;

}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
     font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--green);
    color: var(--text-dark);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: var(--gold);
}

/* =====================================
   HEADER
===================================== */

.main-header {
    background: var(--green);
    color: white;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
     border-bottom: 1px solid rgba(201,166,70,.15);
}

.logo {
    height: 96px;
}

.main-header h1 {
    margin: 0;
     font-size: 18px;
     letter-spacing: 0.5px;

}

.gold-text {
    background: linear-gradient(
        120deg,
        #D4AF37,
        #FFF3B0,
        #C9A227,
        #D4AF37
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s infinite linear;
}

@keyframes shine {
    from { background-position: 0%; }
    to { background-position: 200%; }
}

/* =====================================
   NAV + DROPDOWN
===================================== */


.main-nav {
    display: flex;
    align-items: center;
    gap: 16px; /* ✅ mezery mezi položkami */
}


.dropdown {
    position: relative;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 15px;
    cursor: pointer;
    padding: 8px 12px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--green-dark);
    min-width: 220px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 1000;
}

.dropdown-menu.open {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    color: white;
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: rgba(255,255,255,.08);
    color: var(--gold);
}

/* =====================================
   LAYOUT
===================================== */

.layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    background: var(--bg-light);
    min-height: 80vh;
}

.content {
    padding: 40px;
     max-width: 100%;
     overflow-x: hidden;

}


.sidebar {
    background: #0f0f0f;
    border-left: 1px solid var(--border-light);
}


.sidebar h3 {
    margin-top: 0;
}

.side-links a {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--green);
}


.side-links a:hover {
    color: var(--gold);
}


/* ===== PORTFOLIO TABULKY ===== */
.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.portfolio-table thead th {
  text-align: left;
  padding: 12px;
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  font-weight: 600;
}

.portfolio-table tbody td {
  padding: 12px;
  border-bottom: 1px solid rgba(201,162,70,0.35);
}

.portfolio-table tbody tr:nth-child(even) {
  background: #f6f6f6;
}

.portfolio-table tbody tr:hover {
  background: var(--gold-light);
}

/* =====================================
   GRID & KARTY (FONDY / AKCIE)
===================================== */

.fund-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.fund-card {
  background: var(--bg-card);
  border-radius: 18px;
  padding: 24px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all .25s ease;
}

.fund-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.fund-card h3 {
  font-size: 17px;
  color: var(--gray-900);
  margin-bottom: 6px;
}

.fund-card small {
  color: var(--text-muted);
}

/* Portfolio tabs */
.portfolio-tab {
  display: none;
}

.portfolio-tab.active {
  display: block;
  animation: fade .2s ease;
}

.tab.active {
  border-color: var(--gold);
  color: var(--gold);
}

/* Překryv přes celou obrazovku */
.modal-backdrop {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left = 0 */
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Samotné okno */
.modal {
  background: #fff;
  color: #000;
  width: 90%;
  max-width: 900px;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* BACKDROP */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* MODAL BOX */
.tx-modal {
  background: #f5f5f5;
  border: 2px solid #C9A646;
  border-radius: 12px;
  padding: 24px;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* INPUTY */
.tx-input {
  border: 1px solid #C9A646;
  border-radius: 6px;
  padding: 8px 10px;
  background: white;
  font-size: 14px;
}

.tx-input:disabled,
input:disabled,
select:disabled {
background: #eee;
color: #888;
border-color: #ddd;
cursor: not-allowed;
opacity: 0.7;
}


/* LABELY */
.tx-modal label {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* BUTTONY */
.tx-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.btn-gold {
  background: #C9A646;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-gold-outline {
  background: transparent;
  color: #C9A646;
  border: 1px solid #C9A646;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* Akce */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.gold-theme {
  background: #f7f7f7;
  color: #222;
  border-radius: 14px;
}

.gold-theme h3 {
  color: #C9A646;
  margin-bottom: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}

.form-row.single {
  grid-template-columns: 1fr;
}

.form-group label {
  font-size: 13px;
  color: #555;
}

.form-group input,
.form-group select {
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #C9A646;
  outline: none;
}

.button.primary {

    background: var(--gold);
    color: #111;

  border: none;
}


button:hover {
    background: var(--gold-strong);
}


.button.secondary {
  background: #e0e0e0;
  color: #333;
}

.fund-perf {
  margin-top: 6px;
  font-size: 13px;
}

.fund-perf.pos {
  color: #1e8f4d;
}

.fund-perf.neg {
  color: #c0392b;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

/*  tabulka   */


.view-switch {
  display: flex;
  justify-content: flex-end; /* ✅ doprava */
  gap: 6px;
  margin-bottom: 12px;
}

.view-switch button {
  padding: 6px 14px;
  border-radius: 999px;        /* ✅ pill shape */
  border: 1px solid #C9A646;
  background: transparent;
  color: #C9A646;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.view-switch button:hover {
  background: rgba(201,166,70,0.15);
}

.view-switch button.active {
  background: #C9A646;
  color: #111;
}

.fund-table th {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-right: 22px;
}

/*
  Sort šipky kreslíme čistě přes CSS border, ne jako textové znaky.
  Důvod: znaky ▴/▾ se v některých prohlížečích nebo fontech mohou zobrazit jako neplatný znak.
*/
.fund-table th::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  display: none;
  font-size: 0;
  line-height: 0;
}

/* aktivní sloupec: řazení vzestupně */
.fund-table th.sort-asc::after {
  display: inline-block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #C9A646;
}

/* aktivní sloupec: řazení sestupně */
.fund-table th.sort-desc::after {
  display: inline-block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #C9A646;
}

.fund-table td.pos {
  color: #1e8f4d;
  font-weight: 500;
}

.fund-table td.neg {
  color: #c0392b;
  font-weight: 500;
}

/* ===== INSTRUMENTY – RESPONSIVE ===== */
#instruments-table th:nth-child(1),
#instruments-table td:nth-child(1) {
  width: 25%;
}

#instruments-table th:nth-child(2),
#instruments-table td:nth-child(2) {
  width: 50%;
}

#instruments-table th:nth-child(3),
#instruments-table td:nth-child(3) {
  width: 25%;
  text-align: right;
}

/* ✅ název max 2 řádky */
.instrument-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* TABULKA */
/* TABULKA ZÁKLAD */
.fund-table {
  width: 100%;
  border-collapse: collapse;
}

.fund-table th {
  text-align: left;
  padding: 10px;
  border-bottom: 2px solid var(--gold);
  cursor: pointer;
}

.fund-table td {
  padding: 10px;
}

/* 🟦 ZEBRA – každý sudý řádek */
.fund-table tbody tr:nth-child(even) {
  background: var(--row-alt);
}

/* 🟨 HOVER – jemný zlatý nádech */
.fund-table tbody tr:hover {
  background: var(--gold-light);
}

/* ⭐ AKTIVNÍ ŘÁDEK – světlejší zlatá */
.fund-table tbody tr.active,
.fund-table tbody tr.active:hover {
  background: var(--gold-active) !important;
  color: #111;
}

.hidden {
  display: none;
}

/* =====================================
PORTFOLIO TABS – stejné jako view-switch
===================================== */

.portfolio-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 16px;
}

.portfolio-tabs .tab {
  padding: 6px 14px;
  border-radius: 999px;          /* pill */
  border: 1px solid var(--gold);
  background: white;
  color: var(--gold);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.portfolio-tabs .tab:hover {
  background: var(--gold-light);
}

/* ✅ AKTIVNÍ TAB */
.portfolio-tabs .tab.active {
  background: var(--gold);
  color: #111;
}


/* =====================================
   KPI
===================================== */

.kpi-row {
    display: flex;
    gap: 24px;
    margin: 16px 0;
}

.kpi {
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    min-width: 140px;
    background: #fafafa;
}

.kpi span {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}


.kpi strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}


.pos {
    color: green;
}

.neg {
    color: red;
}

/* =====================================================
APP TABLE – SHARED COMPONENT
===================================================== */

.app-table {
  width: 100%;
  border-collapse: collapse;
}

/* hlavička */
.app-table th {
  text-align: left;
  padding: 10px;
  border-bottom: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
}

/* buňky */
.app-table td {
  padding: 10px;
}

/* zebra */
.app-table tbody tr:nth-child(even) {
  background: #f3f3f3;
}

/* hover */
.app-table tbody tr:hover {
  background: var(--gold-light);
}

/* aktivní řádek */
.app-table tbody tr.active,
.app-table tbody tr.active:hover {
  background: var(--gold-active);
  color: #111;
}

/* =====================================================
MOBILE
===================================================== */
@media (max-width: 768px) {
  .app-table thead {
    display: none;
  }

  .app-table,
  .app-table tbody,
  .app-table tr {
    display: block;
    width: 100%;
  }

  .app-table tbody tr {
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    overflow: hidden;
  }

  .app-table tbody tr:nth-child(even) {
    background: #f7f7f7;
  }

  .app-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }

  .app-table td:last-child {
    border-bottom: none;
  }

  .app-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: #666;
    margin-right: 12px;
  }
}

/* =====================================
   PERIOD SWITCH
===================================== */

/* =========================
   DESKTOP (default)
   ========================= */
.period-switch {
  display: flex;
  flex-wrap: nowrap;   /* ✅ NEzalomí */
  gap: 6px;
}

.period-switch button {
  background: transparent;
  border: 1px solid rgba(201,166,70,0.4);
  color: #ccc;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ✅ hover jako back-btn */
.period-switch button:hover {
  background: #C9A646;
  color: #111;
  border-color: #C9A646;
}

/* ✅ aktivní stav */
.period-switch button.active {
  background: #C9A646;
  color: #111;
  border-color: #C9A646;
  transform: scale(0.96);
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 600px) {
  .period-switch {
    flex-wrap: wrap;        /* ✅ zalamování POVOLENO jen na mobilu */
    justify-content: center;
  }

  .period-switch button {
    flex: 1 1 30%;          /* ✅ cca 3 na řádek */
  }
}

.period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 6px;
}

.period-diff {
  background: #f0f0f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  color: #333;
  min-width: 140px;
  text-align: right;
}

.period-diff.pos {
  color: #1a7f37;
}

.period-diff.neg {
  color: #b42318;
}

/* =====================================
   GRAF
===================================== */

#chart-portfolio,
#chart-stock {
    width: 100%;
    margin-top: 16px;
}


#chart-stock,
#chart-portfolio,
#chart-currency {
  position: relative;
  z-index: 1;
}


/* =====================================
   TLAČÍTKO ZPĚT
===================================== */

.back-btn {
    margin-top: 24px;
    padding: 12px 16px;
    font-size: 15px;
    background: white;
    border: 1px solid var(--gold);
    border-radius: 8px;
    cursor: pointer;
    width: fit-content;
    display: block;
    margin: 20px auto 0;
}

.back-btn:hover {
    background: var(--gold);
    color: white;
}

/* ===== HOME GRID ===== */

.home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: 0.25s;
    border: 1px solid var(--border-light);
}

.home-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}


/* =====================================
   FOOTER
===================================== */


.footer {
    background: #333;
    padding: 20px 0;
    text-align: center;
}


.footer-content {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.footer a {
    color: #ccc;
    font-size: 14px;
}

.footer a:hover {
    color: var(--gold);
}

/* =====================================
   RESPONSIVE – MOBILE
===================================== */

@media (max-width: 768px) {

    body {
        font-size: 16px;
    }

    /* layout */
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .content {
        padding: 16px;
    }

    /* grid */
    .fund-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .fund-card {
        padding: 16px;
    }

    /* KPI */
    .kpi-row {
        flex-direction: column;
        gap: 12px;
    }

    .kpi {
        width: 100%;
    }

    /* header */
    .main-header h1 {
        font-size: 16px;
    }

    .logo {
        height: 40px;
    }

    
    .site-title {
    font-size: 46px; /* ✅ 2x větší */
    font-weight: 600;
    }


    /* back button */
    .back-btn {
        width: 100%;
        display: block;
        margin: 20px auto 0;
    }
}

/* =====================================
RESPONSIVE – TABULKA FONDŮ (MOBILE)
===================================== */
@media (max-width: 768px) {

  .fund-table thead {
    display: none; /* ❌ hlavička pryč */
  }

.fund-table {
  width: 100%;
  table-layout: fixed; /* ✅ KLÍČOVÉ */
  word-wrap: break-word;
}
  .fund-table tbody,
  .fund-table tr {
    display: block;
    width: 100%;
  }

  .fund-table tbody tr {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    border: 1px solid #e5e5e5;
  }

  /* zebra jemně zachovaná */
  .fund-table tbody tr:nth-child(even) {
    background: #f7f7f7;
  }

  /* aktivní řádek – světle zlatá */
  .fund-table tbody tr.active {
    background: var(--gold-active) !important;
    border-color: var(--gold);
  }

  .fund-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }

  .fund-table td:last-child {
    border-bottom: none;
  }

  /* label před hodnotou */
  .fund-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: #555;
    margin-right: 12px;
  }

  /* skryjeme méně důležitý údaj */
  .fund-table td.hide-mobile {
    display: none;
  }
}

/* =====================================
MOBILE SORT PANEL
===================================== */
.mobile-sort {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .mobile-sort label {
    font-size: 13px;
    color: #555;
  }

  .mobile-sort select {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
  }

  .mobile-sort button {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--gold);
    background: white;
    color: var(--gold);
    font-size: 16px;
    cursor: pointer;
  }

  .mobile-sort button.active {
    background: var(--gold);
    color: #333333;
  }
}

@media (max-width: 768px) {
  .fund-table tbody tr.active {
    position: relative;
  }

  .fund-table tbody tr.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gold);
  }
}

/* =====================================
PORTFOLIO TABS – override .button
STEJNÝ VZHLED JAKO DLAŽDICE / ŘÁDKY
===================================== */

.portfolio-tabs .button.tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: white !important;
  color: var(--gold) !important;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.portfolio-tabs .button.tab:hover {
  background: var(--gold-light);
}

/* ✅ AKTIVNÍ TAB */
.portfolio-tabs .button.tab.active {
  background: var(--gold) !important;
  color: #111 !important;
}

/* hover = vizuálně aktivní */
.portfolio-tabs .button.tab:hover {
  background: var(--gold);
  color: #111;
}

/* aktivní zůstává stejné */
.portfolio-tabs .button.tab.active {
  background: var(--gold);
  color: #111;
}

/* =====================================
PILL BUTTON – app‑wide (Dlaždice / Řádky / Přidat)
===================================== */

.pill-button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: white;
  color: var(--gold);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease;
}

.pill-button:hover {
  background: var(--gold);
  color: #111;
}

/* =====================================================
PORTFOLIO – MOBILE TABULKY JAKO SKUTEČNÉ TABULKY
(přepíše card/dlaždice layout)
===================================================== */

@media (max-width: 768px) {

  /* ===== Instrumenty + Transakce ===== */
  #instruments-table,
  #transactions-table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  #instruments-table thead,
  #transactions-table thead {
    display: table-header-group;
  }

  #instruments-table tbody,
  #transactions-table tbody {
    display: table-row-group;
  }

  #instruments-table tr,
  #transactions-table tr {
    display: table-row;
    margin: 0;
    border-radius: 0;
    font-size: 85%;
    border: none;
  }

  
  #instruments-table th,
  #transactions-table th {
  font-size: 85%;
  }

  #instruments-table td,
  #transactions-table td {
    display: table-cell;
    padding: 8px 6px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 85%;
  }

  /* ❌ zrušíme pseudo-labely z card režimu */
  #instruments-table td::before,
  #transactions-table td::before {
    display: none;
    content: none;
  }
}


#instruments-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

#transactions-table td:last-child {
  text-align: center;
  white-space: nowrap;
}

.content,
.portfolio-tab {
  max-width: 100%;
  overflow-x: hidden;
}

/* =====================================================
zadávání transakce - mobile
(přepíše card/dlaždice layout)
===================================================== */

/* backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* samotné okno */
.modal {
  background: rgba(255, 255, 255, 0.95); /* ✅ méně průhledné, čisté */
  backdrop-filter: blur(6px);
  color: black;
  width: 100%;
  max-width: 520px;
  border-radius: 14px;
  padding: 20px;
}

/* ✅ MOBILE: full screen */
@media (max-width: 768px) {
  .modal {
    height: 100%;
    max-width: 100%;
    border-radius: 0;
    overflow-y: auto;
  }
}

.tx-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tx-form .full {
  grid-column: span 2;
}

/* ✅ MOBILE → jeden sloupec */
@media (max-width: 768px) {
  .tx-form {
    grid-template-columns: 1fr;
  }

  .tx-form .full {
    grid-column: span 1;
  }
}

.tx-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.tx-actions button {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
}

/* Mobile → stacked */
@media (max-width: 480px) {
  .tx-actions {
    flex-direction: column;
  }
}

input, select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(201,162,70,0.6);
  background: rgba(223, 221, 221, 0.55);
  color: black;
  font-size: 16px; /* ✅ zabrání zoomu na iOS */
}

@media (max-width: 768px) {
  .tx-actions {
    position: sticky;
    bottom: 0;
    background: rgba(223, 221, 221, 0.55);
    padding-top: 10px;
  }
}

/* ✅ sidebar background */
.sidebar {
  background: #f2f2f2;  /* šedá */
  padding: 20px;
  border-radius: 12px;
  
  position: sticky;
  top: 20px; /* ✅ fix při scrollu */

}

/* ✅ grid layout */
.side-grid {
    display: flex;
    flex-direction: column;
    align-items: center; /* ✅ horizontálně na střed */
    gap: 12px;
}


/* ✅ karta (inspirovaná fondama) */
.side-card {
  background: white;
  padding: 14px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ✅ hover efekt (jako fund-card) */
.side-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* ✅ nadpis */
.side-card h4 {
  margin: 0;
  color: #C9A646; /* tvé gold */
  font-weight: 600;
}

.tooltip {
  position: absolute;
  box-sizing: border-box;
  background: rgba(55, 55, 55, 0.97);
  color: #ffffff;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 8px;
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.15s ease;
  z-index: 9999;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.stock-risk-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.stock-risk-label > span:first-child {
  min-width: 0;
}
.stock-risk-help {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3d3d3d;
  color: #ffffff;
  border: 1px solid rgba(201,166,70,.65);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.stock-risk-help:hover,
.stock-risk-help:focus {
  background: var(--gold, #c9a646);
  color: #111111;
  outline: none;
}



/* ===== LAYOUT WRAPPER ===== */
.landing {
    max-width: 1000px;
    margin: auto;
    padding: 40px 20px;
}

/* ===== HERO ===== */
.hero {
    padding: 80px 0 40px;
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 12px;
}

.hero p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 26px;
    max-width: 500px;
}

.hero-actions {
    display: flex;
    gap: 10px;
}

/* ===== BUTTONY ===== */
.btn-primary {
    background: var(--gold);
    color: #111;
    padding: 12px 20px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-secondary {
    background: white;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 12px 20px;
    border-radius: 999px;
    cursor: pointer;
}

/* ===== SEKCE ===== */
.section {
    padding: 60px 0;
}

.section h2 {
    font-size: 28px;
    margin-bottom: 24px;
}

/* ===== KARTY ===== */
.cards {
    display: grid;
    gap: 18px;
}

.card-clean {
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    background: white;
    transition: .2s;
}

.card-clean:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ===== BENEFITY ===== */
.benefits {
    display: grid;
    gap: 16px;
}

.benefit {
    display: flex;
    gap: 12px;
}

/* ===== CTA ===== */
.cta {
    margin-top: 40px;
    padding: 40px;
    border: 1px solid var(--gold);
    border-radius: 16px;
    background: var(--gold-light);
}

/* ===== FOOTER ===== */
.footer {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-muted);
}


/* =====================================
FINÁLNÍ MOBILNÍ TEXTY, ODKAZY A PRAVÝ SLOUPEC
===================================== */
:root { --font-main: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --text-dark:#111111; --link-gold:#c9a646; }
body { font-family: var(--font-main); color: var(--text-dark); -webkit-font-smoothing: antialiased; }
.content,.landing,.section,.card-clean,.fund-card,.kpi,.cta,p,li,.benefit,.intro-lead,.disclaimer { color: var(--text-dark); }
a,.content a,.landing a,.tv-link { color: var(--link-gold); text-decoration:none; }
a:hover,.content a:hover,.landing a:hover,.tv-link:hover { color: var(--link-gold); text-decoration: underline; text-underline-offset:3px; }
.intro-lead a,.section-intro a { color:var(--link-gold); font-weight:600; border-bottom:1px solid rgba(201,166,70,.45); text-decoration:none; }
.section-intro { margin:0 0 28px; padding:24px; background:#fff; border:1px solid rgba(201,166,70,.35); border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.04); }
.intro-heading { display:flex; align-items:flex-start; gap:16px; }
.section-intro h2 { margin:0 0 8px; font-size:clamp(24px,4vw,28px); color:#111; }
.intro-lead { margin:0; font-size:15px; line-height:1.7; }
.icon-badge,.side-card-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px; background:rgba(201,166,70,.13); border:1px solid rgba(201,166,70,.35); color:var(--link-gold); font-size:22px; line-height:1; flex:0 0 auto; }
.cards-four { grid-template-columns:repeat(5,minmax(0,1fr)); }
.feature-card { display:block; color:#111; } .feature-card:hover { text-decoration:none; } .feature-card h3{margin:14px 0 8px;color:#111;} .feature-card p{margin:0;line-height:1.6;}
.disclaimer { margin:24px 0 0; padding:14px 16px; border-left:3px solid var(--link-gold); background:rgba(201,166,70,.08); border-radius:10px; font-size:12px; line-height:1.6; }
.side-grid { align-items:stretch; } .side-card { width:100%; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; background:#fff; border:1px solid rgba(201,166,70,.35); border-radius:16px; padding:14px 16px; color:#111; box-shadow:0 8px 24px rgba(0,0,0,.04); } .side-card h4,.side-card h3,.side-card p{margin:0;color:#111;} .side-card:hover{transform:translateY(-3px);border-color:var(--link-gold);box-shadow:0 14px 32px rgba(0,0,0,.08);}
.article-detail h3{margin:0 0 12px;color:#111;font-size:22px;line-height:1.25}.article-detail p{margin:0 0 12px;line-height:1.75}.article-list{margin:0;padding-left:22px;line-height:1.75}.article-list li{margin-bottom:8px}.article-list strong{color:#111}
@media(max-width:1200px){.cards-four{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:1024px){.layout{grid-template-columns:1fr}.sidebar{position:static;border-left:none;margin:0 16px 24px;padding:16px}.side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cards-four,.fund-grid,.home-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){.main-header{padding:10px 16px;flex-wrap:wrap;gap:10px}.logo{height:58px}.main-nav{width:100%;justify-content:space-between;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}.layout{display:block}.content{padding:22px 16px}.landing{padding:18px 16px 32px}.hero{padding:34px 0 26px}.hero h1{font-size:clamp(30px,9vw,38px);line-height:1.12}.hero p{font-size:16px;max-width:none;line-height:1.65}.hero-actions{flex-direction:column;width:100%}.btn-primary,.btn-secondary,.pill-button{width:100%;min-height:44px}.cards-four,.fund-grid,.home-grid,.side-grid{grid-template-columns:1fr;gap:14px}.card-clean,.fund-card{border-radius:16px;padding:18px}.feature-card{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:start}.feature-card h3{margin:0 0 6px}.feature-card p{grid-column:2}.section-intro{padding:18px;margin-bottom:20px}.intro-lead{font-size:14px;line-height:1.65}.icon-badge,.side-card-icon{width:38px;height:38px;font-size:20px}.kpi-row{flex-direction:column;gap:10px}.period-row{flex-direction:column;align-items:stretch;gap:10px}.period-switch{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.period-switch button{padding:8px 6px;font-size:12px;color:#333;background:#fff}.back-btn{width:100%;min-height:44px}.article-detail h3{font-size:20px}.article-list{padding-left:19px}.article-detail p,.article-list{font-size:14px;line-height:1.65}}
@media(max-width:480px){.content{padding:18px 12px}.hero h1{font-size:30px}.intro-heading{display:block}.section-intro .icon-badge{margin-bottom:12px}.feature-card{grid-template-columns:38px 1fr}.period-switch{grid-template-columns:repeat(3,1fr)}}


/* =====================================
MOBILE HEADER + DROPDOWN FIX
===================================== */
.dropdown-menu.open {
  display: block !important;
}

@media (max-width: 768px) {
  /* Hide logo on mobile to keep controls on one line */
  .main-header .logo,
  .main-header img.logo,
  .main-header a.logo,
  .main-header .brand-logo {
    display: none !important;
  }

  .main-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    min-height: 48px !important;
    overflow: visible !important;
  }

  .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .main-nav a,
  .main-nav button,
  .dropdown-toggle,
  #menu-portfolio,
  #btn-login,
  #btn-logout {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    padding: 6px 7px !important;
    margin: 0 !important;
  }

  .dropdown {
    position: relative !important;
    flex: 0 0 auto !important;
  }

  .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 210px !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 10000 !important;
  }
}

@media (max-width: 390px) {
  .main-nav a,
  .main-nav button,
  .dropdown-toggle,
  #menu-portfolio,
  #btn-login,
  #btn-logout {
    font-size: 11px !important;
    padding: 6px 5px !important;
  }
}


/* =====================================
MOBILE DROPDOWN + PORTFOLIO LABEL FIX v2
===================================== */
.dropdown-menu.open,
.dropdown.open .dropdown-menu {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dropdown-toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#menu-portfolio {
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}

#menu-portfolio .mp-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

#menu-portfolio .mp-word-small {
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.86;
  transform: translateY(1px);
}

#menu-portfolio .mp-word-main {
  font-size: 1.18em;
  font-weight: 700;
  color: var(--gold, #c9a646);
}

@media (max-width: 768px) {
  .main-header .logo,
  .main-header img.logo,
  .main-header a.logo,
  .main-header .brand-logo {
    display: none !important;
  }

  .main-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 7px 8px !important;
    min-height: 46px !important;
    overflow: visible !important;
  }

  .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .main-nav a,
  .main-nav button,
  .dropdown-toggle,
  #btn-login,
  #btn-logout {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    padding: 5px 6px !important;
    margin: 0 !important;
  }

  #menu-portfolio {
    flex: 0 0 auto !important;
    padding: 3px 7px 4px !important;
    min-width: 48px !important;
    max-width: 64px !important;
    white-space: normal !important;
  }

  #menu-portfolio .mp-word-small {
    font-size: 9px !important;
  }

  #menu-portfolio .mp-word-main {
    font-size: 13px !important;
  }

  .dropdown {
    position: relative !important;
    flex: 0 0 auto !important;
  }

  .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 210px !important;
    max-width: calc(100vw - 16px) !important;
    z-index: 10000 !important;
  }
}

@media (max-width: 390px) {
  .main-nav a,
  .main-nav button,
  .dropdown-toggle,
  #btn-login,
  #btn-logout {
    font-size: 10.5px !important;
    padding: 5px 4px !important;
  }

  #menu-portfolio {
    max-width: 58px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #menu-portfolio .mp-word-main {
    font-size: 12px !important;
  }
}


/* FORCE WORDMARK TWO LINES - FINAL */
.header-center .site-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: .9 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--gold, #c9a646) !important;
}
.header-center .site-wordmark .wordmark-small,
.header-center .site-wordmark .wordmark-main {
  display: block !important;
  color: var(--gold, #c9a646) !important;
  -webkit-text-fill-color: var(--gold, #c9a646) !important;
  background: none !important;
  white-space: nowrap !important;
}
.header-center .site-wordmark .wordmark-small { font-size: 10px !important; font-weight: 500 !important; opacity: .9 !important; }
.header-center .site-wordmark .wordmark-main { font-size: 17px !important; font-weight: 750 !important; }
@media (max-width:768px){
  .header-center .site-wordmark .wordmark-small { font-size: 9px !important; }
  .header-center .site-wordmark .wordmark-main { font-size: 14px !important; }
}


/* =====================================
WORDMARK SIZE + MOBILE LEFT ALIGN
===================================== */
/* Desktop: roughly 2x larger than previous wordmark */
.header-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-center .site-title {
  margin: 0 !important;
  line-height: 1 !important;
}

.header-center .site-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  line-height: 0.9 !important;
}

.header-center .site-wordmark .wordmark-small {
  display: block !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
  letter-spacing: 0.04em !important;
  color: var(--gold, #c9a646) !important;
  -webkit-text-fill-color: var(--gold, #c9a646) !important;
}

.header-center .site-wordmark .wordmark-main {
  display: block !important;
  font-size: 34px !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  color: var(--gold, #c9a646) !important;
  -webkit-text-fill-color: var(--gold, #c9a646) !important;
}

@media (max-width: 768px) {
  /* mobile: keep it compact and align it clearly to the left */
  .main-header {
    grid-template-columns: 1fr auto !important;
    justify-items: start !important;
  }

  .header-center {
    grid-column: 1 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: auto !important;
  }

  .header-right {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .header-center .site-wordmark {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .header-center .site-wordmark .wordmark-small {
    font-size: 9px !important;
  }

  .header-center .site-wordmark .wordmark-main {
    font-size: 14px !important;
  }
}


/* =====================================
   FINAL FIXES 2026-07-17
   - right sidebar no longer clipped
   - mobile dropdown opens inside viewport
   - layout has one clean grid from index.html
===================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.main-header,
.layout,
.footer {
  width: 100%;
  max-width: 100vw;
}

.layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 22px !important;
  align-items: start !important;
  padding: 24px 28px 32px !important;
  background: var(--bg-light, #fff) !important;
  overflow: visible !important;
}

.content {
  min-width: 0 !important;
  padding: 16px 0 16px 16px !important;
  overflow-x: hidden !important;
}

.sidebar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 260px !important;
  justify-self: start !important;
  margin-right: 12px !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 20px !important;
}

.side-card {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.hero-img,
.home-hero img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr !important;
    padding: 18px 16px 28px !important;
  }

  .content {
    padding: 12px 0 !important;
  }

  .sidebar {
    max-width: none !important;
    margin: 0 !important;
    position: static !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 768px) {
  .main-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }

  .header-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: auto !important;
  }

  .header-right {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .main-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .dropdown {
    position: static !important;
  }

  .dropdown-menu {
    position: fixed !important;
    top: 54px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 14px !important;
    z-index: 10000 !important;
  }

  .dropdown-menu a {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}

/* =====================================
FIX PRAVY PANEL VYBERU - DESKTOP
Pravy sloupec zustava pevne na miste pri scrollovani.
===================================== */
@media (min-width: 1025px) {
  .sidebar {
    position: fixed !important;
    top: 150px !important;
    right: 28px !important;
    width: 260px !important;
    max-width: 260px !important;
    max-height: calc(100vh - 170px) !important;
    overflow-y: auto !important;
    z-index: 50 !important;
    align-self: auto !important;
    justify-self: auto !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1024px) {
  .sidebar {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* =====================================
FINAL REQUESTED LAYOUT FIXES
- Uvod: six tiles as 3 + 3
- Right selection panel: sticky, not fixed, available while scrolling
- Footer: one grey strip matching header colour
===================================== */

/* Six feature tiles under "Co zde najdete" arranged 3 columns x 2 rows on desktop */
.cards-three,
.cards-four {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Keep the right selection panel in normal page flow, but sticky in viewport.
   It reaches the top offset while scrolling and stops naturally at the bottom
   of the layout instead of staying fixed over the footer. */
@media (min-width: 1025px) {
    .layout {
        grid-template-columns: minmax(0, 1fr) 260px !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .sidebar {
        position: sticky !important;
        top: 24px !important;
        right: auto !important;
        width: 260px !important;
        max-width: 260px !important;
        max-height: calc(100vh - 48px) !important;
        overflow-y: auto !important;
        align-self: start !important;
        justify-self: stretch !important;
        margin-right: 0 !important;
        z-index: 10 !important;
    }
}

@media (max-width: 1024px) {
    .cards-three,
    .cards-four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sidebar {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 768px) {
    .cards-three,
    .cards-four {
        grid-template-columns: 1fr !important;
    }
}

/* One footer strip only, in the same grey as the header. */
.footer {
    width: 100% !important;
    max-width: 100vw !important;
    margin-top: 0 !important;
    padding: 18px 24px !important;
    box-sizing: border-box !important;
    background: var(--green, #666666) !important;
    border-top: 1px solid rgba(201,166,70,.15) !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.footer-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin: 0 0 6px !important;
}

.footer a {
    color: var(--gold, #c9a646) !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.footer a:hover {
    color: var(--gold, #c9a646) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.footer-risk {
    color: #ffffff !important;
    opacity: .9 !important;
}



/* GLOBALNI LOADER SLUZEB: OTACEJICI SE MINCE */
.service-loader{position:fixed;inset:0;z-index:120000;display:grid;place-items:center;padding:20px;background:rgba(20,20,20,.30);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}.service-loader.is-visible{opacity:1;visibility:visible;pointer-events:auto}.service-loader-card{min-width:min(280px,calc(100vw - 40px));display:grid;justify-items:center;gap:8px;padding:26px 24px 22px;border:1px solid rgba(201,166,70,.65);border-radius:22px;background:rgba(255,255,255,.97);color:#111;box-shadow:0 24px 70px rgba(0,0,0,.24)}.service-loader-coin{position:relative;width:58px;height:58px;margin-bottom:6px;transform-style:preserve-3d;animation:service-coin-spin 1.15s linear infinite}.coin-face{position:absolute;inset:0;display:grid;place-items:center;border:3px solid #a77d18;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4b8 0,#e0bd55 38%,#b48320 76%,#795512 100%);color:#5b3e08;font-size:25px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 3px rgba(255,255,255,.28),0 10px 22px rgba(121,85,18,.24);backface-visibility:hidden}.coin-back{transform:rotateY(180deg)}.service-loader-title{color:#0f3d2e;font-size:16px}.service-loader-text{color:#666;font-size:13px;text-align:center}@keyframes service-coin-spin{0%{transform:perspective(420px) rotateY(0deg) rotateZ(-3deg)}50%{transform:perspective(420px) rotateY(180deg) rotateZ(3deg)}100%{transform:perspective(420px) rotateY(360deg) rotateZ(-3deg)}}.auth-message{margin:0 0 4px;padding:11px 13px;border-radius:11px;font-size:13px;line-height:1.45}.auth-message.error{border:1px solid rgba(183,28,28,.28);background:#fff2f2;color:#8d1919}.auth-message.success{border:1px solid rgba(15,107,73,.25);background:#effaf5;color:#0f6b49}.tx-input.input-error{animation:auth-input-shake .34s ease;border-color:#b71c1c!important;box-shadow:0 0 0 3px rgba(183,28,28,.10)}@keyframes auth-input-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@media(prefers-reduced-motion:reduce){.service-loader-coin{animation:service-coin-pulse 1.1s ease-in-out infinite}.tx-input.input-error{animation:none}}@keyframes service-coin-pulse{0%,100%{transform:scale(.96);opacity:.75}50%{transform:scale(1.03);opacity:1}}


/* =====================================
DETAIL INSTRUMENTU - CENTRALNI STYLY
Riziko a vynos, CZK prepinac, benchmark a zmena obdobi
===================================== */
.stock-detail-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }
    .stock-detail-head p { margin: 0; min-width: 0; }
    .stock-detail-head strong { word-break: break-word; }
    .stock-detail-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 2px;
      flex: 0 0 auto;
    }
    .stock-czk-toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      min-height: 40px;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(201, 166, 70, 0.55);
      background: rgba(255, 250, 240, 0.95);
      color: #0f3d2e;
      font-weight: 700;
      box-shadow: 0 6px 20px rgba(0,0,0,0.06);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      overflow: hidden;
    }
    .stock-czk-toggle:hover {
      transform: translateY(-1px);
      box-shadow: 0 9px 24px rgba(0,0,0,0.09);
      border-color: rgba(201, 166, 70, 0.85);
    }
    .stock-czk-toggle input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
      appearance: none;
      -webkit-appearance: none;
    }
    .stock-czk-toggle .toggle-track,
    .stock-czk-toggle .toggle-text {
      pointer-events: none;
      position: relative;
      z-index: 1;
    }
    .stock-czk-toggle .toggle-track {
      width: 42px;
      height: 22px;
      border-radius: 999px;
      background: #d9d9d9;
      transition: background .2s ease;
      flex: 0 0 auto;
    }
    .stock-czk-toggle .toggle-track::after {
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      top: 2px;
      left: 2px;
      box-shadow: 0 2px 7px rgba(0,0,0,0.25);
      transition: transform .2s ease;
    }
    .stock-czk-toggle input:checked + .toggle-track { background: #0f3d2e; }
    .stock-czk-toggle input:checked + .toggle-track::after { transform: translateX(20px); }
    .stock-czk-toggle .toggle-text { white-space: nowrap; font-size: 13px; }
    .stock-risk-panel {
      margin: 12px 0 16px;
      padding: 14px;
      border: 1px solid rgba(201, 166, 70, 0.28);
      border-radius: 18px;
      background: rgba(255, 250, 240, 0.55);
    }
    .stock-risk-panel h4 { margin: 0 0 10px; color: #0f3d2e; font-size: 15px; }
    .stock-risk-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(120px, 1fr));
      gap: 10px;
    }
    .stock-risk-metric {
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(201, 166, 70, 0.18);
      min-width: 0;
    }
    .stock-risk-metric span { display: block; font-size: 12px; color: #777; margin-bottom: 4px; }
    .stock-risk-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
    .stock-risk-label > span:first-child { min-width: 0; margin-bottom: 0; }
    .stock-risk-label .stock-risk-help { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #3d3d3d; color: #fff; border: 1px solid rgba(201,166,70,.65); font-size: 12px; font-weight: 700; line-height: 1; cursor: help; margin-bottom: 0; }
    .stock-risk-label .stock-risk-help:hover, .stock-risk-label .stock-risk-help:focus { background: #C9A646; color: #111; outline: none; }
    .stock-risk-metric strong { display: block; color: #111; font-size: 15px; word-break: break-word; }
    .stock-benchmark-info { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(201,166,70,.55); background: rgba(255,250,240,.95); color: #0f3d2e; box-shadow: 0 6px 20px rgba(0,0,0,.06); font-size: 13px; box-sizing: border-box; }
    .stock-benchmark-info.is-visible { display: inline-flex; }
    .stock-benchmark-info span { color: #777; }
    .stock-benchmark-info strong { color: #0f3d2e; }
    .stock-comparison-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 8px 12px; margin-bottom: 4px; border-radius: 14px; background: rgba(255,250,240,.72); border: 1px solid rgba(201,166,70,.25); font-size: 12px; font-weight: 700; color: #333; }
    .stock-comparison-legend-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
    .stock-comparison-legend-line { width: 28px; height: 3px; border-radius: 999px; flex: 0 0 auto; }
    .stock-comparison-legend-line.stock { background: #C9A646; }
    .stock-comparison-legend-line.benchmark { background: #6c7a89; }
    .period-diff { display: inline-flex !important; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid rgba(201,166,70,.55) !important; background: rgba(255,250,240,.95) !important; color: #0f3d2e !important; font-weight: 600 !important; box-shadow: 0 6px 20px rgba(0,0,0,.06); white-space: nowrap; box-sizing: border-box; }
    .period-diff strong { font-weight: 800; }
    .period-diff.pos, .period-diff.neg { color: #0f3d2e !important; }

    @media (max-width: 900px) {
      .stock-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .stock-detail-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .stock-detail-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        justify-content: stretch;
      }
      .stock-czk-toggle {
        width: 100%;
        justify-content: space-between;
        min-height: 44px;
        padding: 10px 12px;
        box-sizing: border-box;
      }
      .stock-czk-toggle .toggle-text { font-size: 14px; }
      .stock-benchmark-info.is-visible { display: flex; width: 100%; justify-content: space-between; }
      .period-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
      }
      .period-switch {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
      }
      .period-switch button { width: 100%; min-height: 38px; padding: 8px 6px; }
      .period-diff { width: 100%; box-sizing: border-box; text-align: center; }
      #chart-stock { min-height: 240px; }
    }
    @media (max-width: 420px) {
      .stock-risk-grid { grid-template-columns: 1fr; }
      .period-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stock-czk-toggle .toggle-track { width: 38px; height: 20px; }
      .stock-czk-toggle .toggle-track::after { width: 16px; height: 16px; }
      .stock-czk-toggle input:checked + .toggle-track::after { transform: translateX(18px); }
    }

/* =====================================================
PORTFOLIO - STYLY PRESUNUTE Z PORTFOLIO.JS
Build: 2026-08-28-external-css-detail-v15
Sekce je zamerne na konci souboru, aby prepsala starsi konfliktni pravidla.
===================================================== */
.portfolio-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      align-items: center;
    }

    .portfolio-tabs .tab,
    .portfolio-tabs .portfolio-switch-btn {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    @media (max-width: 640px) {
      .portfolio-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
      }

      .portfolio-tabs .tab,
      .portfolio-tabs .portfolio-switch-btn {
        width: 100%;
        min-width: 0;
        text-align: center;
        justify-content: center;
      }

      /* Mobil: v detailu portfolia preferuj hodnotu, ne počet kusů */
      #instruments-table th[data-key="quantity"],
      #instruments-table td[data-label="Počet kusů"] {
        display: none !important;
      }

      #inst-sort option[value="quantity"] {
        display: none;
      }

      /* Mobil: nastavení portfolia jako karta přes celou dostupnou šířku */
      #tab-settings .tx-modal {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 1rem !important;
        border-radius: 18px;
      }

      #tab-settings .tx-modal label {
        display: block;
        margin-top: .85rem;
      }

      #tab-settings .tx-input,
      #tab-settings select.tx-input {
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        font-size: 16px;
      }

      #tab-settings .tx-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
        margin-top: 1rem;
      }

      #tab-settings .tx-actions .pill-button {
        width: 100%;
        min-height: 44px;
      }
    }

    .sort-dir-btn {
      width: 38px;
      min-width: 38px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .sort-dir-btn::before,
    .fund-table th.sort-asc::after,
    .fund-table th.sort-desc::after {
      content: '' !important;
      display: inline-block;
      margin-left: 6px;
      width: 0;
      height: 0;
      vertical-align: middle;
      font-size: 0;
      line-height: 0;
    }

    .sort-dir-btn.sort-asc::before,
    .fund-table th.sort-asc::after {
      border-left: 5px solid transparent !important;
      border-right: 5px solid transparent !important;
      border-bottom: 8px solid #C9A646 !important;
      border-top: 0 !important;
    }

    .sort-dir-btn.sort-desc::before,
    .fund-table th.sort-desc::after {
      border-left: 5px solid transparent !important;
      border-right: 5px solid transparent !important;
      border-top: 8px solid #C9A646 !important;
      border-bottom: 0 !important;
    }

    .fund-table th[data-key] {
      cursor: pointer;
      white-space: nowrap;
    }

    .portfolio-instruments-filter {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin: 0 0 .75rem;
      padding: .75rem 1rem;
      border-radius: 14px;
      background: rgba(201, 166, 70, 0.12);
      color: #111;
      font-weight: 600;
    }
    .portfolio-instruments-filter.active {
      display: flex;
    }
    .portfolio-instruments-filter .clear-filter-btn {
      border: 1px solid rgba(201, 166, 70, .55);
      background: transparent;
      color: inherit;
      border-radius: 999px;
      padding: .35rem .7rem;
      cursor: pointer;
      white-space: nowrap;
    }
    #portfolioList {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 280px));
      gap: 1rem;
      align-items: stretch;
      justify-content: start;
      margin-top: 1rem;
    }
    #portfolioList .fund-card,
    .portfolio-switch-list .fund-card {
      width: 100%;
      max-width: 280px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .portfolio-switch-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 280px));
      gap: 1rem;
      margin-top: 1rem;
      justify-content: start;
    }

    .portfolio-value-intro {
      margin-bottom: 1rem;
    }
    .portfolio-value-intro .icon-badge {
      background: rgba(201, 166, 70, 0.14);
      color: #C9A646;
    }
    #portfolio-allocation-chart.allocation-chart-layout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }
    .allocation-legend {
      display: grid;
      gap: .55rem;
      min-width: 220px;
      max-width: 320px;
    }
    .allocation-legend-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: .5rem;
      align-items: center;
      font-size: .92rem;
    }
    .allocation-legend-color {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      box-shadow: 0 0 0 2px rgba(201, 166, 70, .12);
    }
    .allocation-legend-label {
      color: #111;
      font-weight: 600;
    }
    .allocation-legend-value {
      color: #666;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      text-align: right;
    }
    #transactions-table {
      table-layout: fixed;
      width: 100%;
    }
    #transactions-table th[data-key="date"],
    #transactions-table td[data-label="Datum"] {
      width: 14%;
      white-space: nowrap;
    }
    #transactions-table th[data-key="instrument"],
    #transactions-table td[data-label="Typ"] {
      width: 34%;
    }
    #transactions-table th[data-key="type"],
    #transactions-table td[data-label="Směr"] {
      width: 14%;
      white-space: nowrap;
    }
    #transactions-table th[data-key="quantity"],
    #transactions-table td[data-label="Množství"] {
      width: 18%;
      text-align: right;
      white-space: nowrap;
    }
    #transactions-table th[data-key="investment"],
    #transactions-table td[data-label="Vstupní investice"] {
      width: 20%;
      text-align: right;
      white-space: nowrap;
    }
    #transactions-table tbody tr.clickable:hover td,
    #transactions-table tbody tr.active td {
      background: rgba(201, 166, 70, 0.12);
    }
    #instruments-table {
      table-layout: fixed;
      width: 100%;
    }
    #instruments-table th[data-key="type"],
    #instruments-table td[data-label="Typ"] {
      width: 9%;
      white-space: nowrap;
    }
    #instruments-table th[data-key="name"],
    #instruments-table td[data-label="Název"] {
      width: 34%;
    }
    #instruments-table th[data-key="quantity"],
    #instruments-table td[data-label="Počet kusů"] {
      width: 12%;
      text-align: right;
    }
    #instruments-table th[data-key="value"],
    #instruments-table td[data-label="Hodnota"] {
      width: 27%;
      text-align: right;
      white-space: nowrap;
    }
    #instruments-table th[data-key="lastValuation"],
    #instruments-table td[data-label="Poslední ocenění"] {
      width: 18%;
      white-space: nowrap;
    }

    /* Portfolio KPI: Hodnota samostatne, denni zmena a oceneni spolu */
    .portfolio-kpi-grid { display: grid; gap: 12px; margin: 16px 0; }
    .portfolio-kpi-primary { display: grid; grid-template-columns: minmax(170px, 1fr); }
    .portfolio-kpi-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .portfolio-kpi-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
    .portfolio-kpi-grid .kpi { min-width: 0; }
    .portfolio-kpi-grid .kpi small { display:block; margin-top:4px; color:#666; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }

    /* Sipka zustava vzdy vpravo. U ciselnych hlavicek posun text o 3 mm doleva. */
    #instruments-table th[data-key="quantity"],
    #instruments-table th[data-key="value"],
    #instruments-table th[data-key="return3y"],
    #instruments-table th[data-key="weight"],
    #instruments-table th[data-key="unrealizedPnl"],
    #transactions-table th[data-key="quantity"],
    #transactions-table th[data-key="investment"] {
      text-align: right;
      padding-right: calc(22px + 3mm);
    }
    #instruments-table th.sort-asc::after,
    #instruments-table th.sort-desc::after,
    #transactions-table th.sort-asc::after,
    #transactions-table th.sort-desc::after {
      left: auto !important;
      right: 6px !important;
      margin-left: 0 !important;
    }
    #instruments-table th[data-key="type"], #instruments-table td[data-label="Typ"] { width: 7%; }
    #instruments-table th[data-key="name"], #instruments-table td[data-label="Název"] { width: 21%; }
    #instruments-table th[data-key="quantity"], #instruments-table td[data-label="Počet kusů"] { width: 8%; text-align:right; }
    #instruments-table th[data-key="value"], #instruments-table td[data-label="Hodnota"] { width: 14%; text-align:right; white-space:nowrap; }
    #instruments-table th[data-key="return3y"], #instruments-table td[data-label="Výnos nástroje 3Y"] { width: 9%; text-align:right; white-space:nowrap; }
    #instruments-table th[data-key="weight"], #instruments-table td[data-label="Podíl"] { width: 8%; text-align:right; white-space:nowrap; }
    #instruments-table th[data-key="unrealizedPnl"], #instruments-table td[data-label="Nerealizovaný zisk"] { width: 16%; text-align:right; white-space:nowrap; }
    #instruments-table th[data-key="lastValuation"], #instruments-table td[data-label="Poslední ocenění"] { width: 17%; white-space:nowrap; }
    /* Transakce: počet kusů, cena za jednotku a stav zarovnat doleva. */
    #transactions-table th[data-key="quantity"],
    #transactions-table td[data-label="Množství"],
    #transactions-table th[data-key="price"],
    #transactions-table td[data-label="Nákupní cena za kus"],
    #transactions-table th[data-key="status"],
    #transactions-table td[data-label="Stav"] {
      text-align: left !important;
      padding-left: 8px;
      padding-right: 8px;
      white-space: nowrap;
    }
    #transactions-table th[data-key="quantity"],
    #transactions-table th[data-key="price"],
    #transactions-table th[data-key="status"] {
      padding-right: 22px;
    }
    @media (max-width: 640px) {
      .portfolio-kpi-pair { grid-template-columns: 1fr 1fr; }
      .portfolio-kpi-secondary { grid-template-columns: 1fr; }
    }

    .portfolio-switch-modal {
      width: min(720px, calc(100vw - 2rem));
      max-height: calc(100vh - 2rem);
      overflow-y: auto;
      box-sizing: border-box;
    }
    .portfolio-switch-modal .portfolio-switch-list {
      max-height: min(58vh, 520px);
      overflow-y: auto;
      padding-right: .25rem;
    }
    @media (max-width: 640px) {
      .portfolio-switch-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 1rem !important;
      }
      #portfolioList,
      .portfolio-switch-list {
        grid-template-columns: 1fr;
      }
      #portfolioList .fund-card,
      .portfolio-switch-list .fund-card {
        max-width: none;
      }
      #portfolio-allocation-chart.allocation-chart-layout {
        justify-content: flex-start;
      }
      .allocation-legend {
        width: 100%;
        max-width: none;
      }
      #instruments-table th[data-key="type"],
      #instruments-table td[data-label="Typ"],
      #instruments-table th[data-key="name"],
      #instruments-table td[data-label="Název"],
      #instruments-table th[data-key="value"],
      #instruments-table td[data-label="Hodnota"],
      #instruments-table th[data-key="lastValuation"],
      #instruments-table td[data-label="Poslední ocenění"] {
        width: auto;
      }
    }

    /* Detail a transakce, desktop */
    #instruments-table th[data-key="unitPrice"], #instruments-table td[data-label="Cena za kus"] { width:10%; text-align:right; white-space:nowrap; }
    #instruments-table tfoot td { font-weight:700; background:rgba(201,166,70,.14); border-top:2px solid #C9A646; }
    #instruments-table tfoot td.numeric { text-align:right; white-space:nowrap; }
    #transactions-table th[data-key="date"], #transactions-table td[data-label="Datum"] { width:10%; }
    #transactions-table th[data-key="instrument"], #transactions-table td[data-label="Typ"] { width:23%; }
    #transactions-table th[data-key="type"], #transactions-table td[data-label="Směr"] { width:8%; }
    #transactions-table th[data-key="quantity"], #transactions-table td[data-label="Množství"] { width:11%; }
    #transactions-table th[data-key="price"], #transactions-table td[data-label="Nákupní cena za kus"] { width:15%; padding-left:3px !important; padding-right:3px !important; }
    #transactions-table th[data-key="investment"], #transactions-table td[data-label="Vstupní investice"] { width:15%; text-align:left !important; white-space:nowrap; }
    #transactions-table th[data-key="status"], #transactions-table td[data-label="Stav"] { width:9%; }
    #transactions-table th[data-key="action"], #transactions-table td[data-label="Akce"] { width:9%; padding-left:0; }
    #transactions-table .trade-correct-btn { transform:translateX(-5px); }

    @media (max-width:640px) {
      /* Detail: pouze Název, Počet kusů, Hodnota a Zisk */
      #instruments-table th[data-key="type"], #instruments-table td[data-label="Typ"],
      #instruments-table th[data-key="unitPrice"], #instruments-table td[data-label="Cena za kus"],
      #instruments-table th[data-key="return3y"], #instruments-table td[data-label="Výnos nástroje 3Y"],
      #instruments-table th[data-key="weight"], #instruments-table td[data-label="Podíl"],
      #instruments-table th[data-key="lastValuation"], #instruments-table td[data-label="Poslední ocenění"] { display:none !important; }
      #instruments-table th[data-key="name"], #instruments-table td[data-label="Název"] { display:table-cell !important; width:38% !important; }
      #instruments-table th[data-key="quantity"], #instruments-table td[data-label="Počet kusů"] { display:table-cell !important; width:18% !important; text-align:right; }
      #instruments-table th[data-key="value"], #instruments-table td[data-label="Hodnota"] { display:table-cell !important; width:24% !important; text-align:right; }
      #instruments-table th[data-key="unrealizedPnl"], #instruments-table td[data-label="Nerealizovaný zisk"] { display:table-cell !important; width:20% !important; text-align:right; }
      #instruments-table tfoot td:nth-child(1) { display:table-cell !important; }
      #instruments-table tfoot td:nth-child(2), #instruments-table tfoot td:nth-child(4), #instruments-table tfoot td:nth-child(6), #instruments-table tfoot td:nth-child(7), #instruments-table tfoot td:nth-child(9) { display:none !important; }

      /* Transakce: pouze Typ, Směr, Kusů a Vstupní investice */
      #transactions-table th[data-key="date"], #transactions-table td[data-label="Datum"],
      #transactions-table th[data-key="price"], #transactions-table td[data-label="Nákupní cena za kus"],
      #transactions-table th[data-key="status"], #transactions-table td[data-label="Stav"],
      #transactions-table th[data-key="action"], #transactions-table td[data-label="Akce"] { display:none !important; }
      #transactions-table th[data-key="instrument"], #transactions-table td[data-label="Typ"] { display:table-cell !important; width:38% !important; }
      #transactions-table th[data-key="type"], #transactions-table td[data-label="Směr"] { display:table-cell !important; width:16% !important; }
      #transactions-table th[data-key="quantity"], #transactions-table td[data-label="Množství"] { display:table-cell !important; width:18% !important; }
      #transactions-table th[data-key="investment"], #transactions-table td[data-label="Vstupní investice"] { display:table-cell !important; width:28% !important; }
    }

/* =====================================================
PORTFOLIO - UKLADANI TRANSAKCI A STAVY OBCHODU
===================================================== */
.tx-saving-status {
      display: none;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(201, 166, 70, 0.12);
      color: #111;
      font-weight: 600;
    }

    .tx-saving-status.active {
      display: flex;
    }

    .tx-spinner {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 3px solid rgba(201, 166, 70, 0.30);
      border-top-color: #C9A646;
      animation: tx-spin 0.8s linear infinite;
      flex: 0 0 auto;
    }

    @keyframes tx-spin {
      to { transform: rotate(360deg); }
    }

    .modal-backdrop.tx-busy button,
    .modal-backdrop.tx-busy input,
    .modal-backdrop.tx-busy select {
      opacity: 0.55;
      cursor: not-allowed;
    }
    #transactions-table tr.trade-cancelled td { opacity: .58; text-decoration: line-through; }
    #transactions-table tr.trade-cancelled td[data-label="Akce"] { text-decoration: none; }
    .trade-status-active { color: #217a3c; font-weight: 700; }
    .trade-status-cancelled { color: #8a2d2d; font-weight: 700; }
    .trade-correct-btn { padding: .3rem .65rem; font-size: .85rem; }
    .portfolio-notice { margin-top:.85rem; padding:.75rem 1rem; border:1px solid rgba(201,166,70,.45); border-radius:12px; background:rgba(201,166,70,.12); color:#2f2a1e; font-weight:600; line-height:1.4; }
    .portfolio-notice.error { border-color:rgba(155,45,45,.35); background:rgba(155,45,45,.08); color:#7c2424; }
    #instruments-table thead th { white-space:normal !important; overflow-wrap:anywhere; line-height:1.15; vertical-align:bottom; height:auto; min-height:48px; }
    #instruments-table th .th-line { display:block; }
    #instruments-table th[data-key="return3y"] { padding-left:5px; padding-right:22px; }
    #instruments-table th[data-key="unitPrice"], #instruments-table td[data-label="Cena za kus"] { text-align:right !important; }
    #transactions-table th[data-key="quantity"], #transactions-table td[data-label="Množství"],
    #transactions-table th[data-key="price"], #transactions-table td[data-label="Nákupní cena za kus"],
    #transactions-table th[data-key="investment"], #transactions-table td[data-label="Vstupní investice"] { text-align:right !important; }

/* =====================================================
PORTFOLIO DETAIL - FINALNI ZAHLA VI A ZAROVNANI
===================================================== */
#instruments-table thead th {
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.15 !important;
  height: 52px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#instruments-table thead th .th-line {
  display: block !important;
  white-space: nowrap !important;
}

#instruments-table th[data-key="quantity"] .th-line-single {
  display: inline-block !important;
  white-space: nowrap !important;
}

#instruments-table th[data-key="unitPrice"],
#instruments-table td[data-label="Cena za kus"] {
  text-align: right !important;
}

#instruments-table th[data-key="lastValuation"] {
  text-align: right !important;
  padding-right: calc(2mm + 18px) !important;
}

#instruments-table th[data-key="lastValuation"]::after {
  right: 2mm !important;
  left: auto !important;
}

#instruments-table td[data-label="Poslední ocenění"] {
  text-align: right !important;
  padding-right: 2mm !important;
}

#transactions-table th[data-key="quantity"],
#transactions-table td[data-label="Množství"],
#transactions-table th[data-key="price"],
#transactions-table td[data-label="Nákupní cena za kus"],
#transactions-table th[data-key="investment"],
#transactions-table td[data-label="Vstupní investice"] {
  text-align: right !important;
}


/* =====================================================
PORTFOLIO - DETAIL, TRANSAKCE A HODNOTA - FINAL 2026-08-30
===================================================== */
.portfolio-transactions-help {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold, #c9a646);
  border-radius: 10px;
  background: rgba(201, 166, 70, .09);
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}
#tab-value .portfolio-kpi-highlight {
  background: #f7edcf !important;
  border: 1px solid #c9a646 !important;
  box-shadow: 0 5px 16px rgba(201, 166, 70, .14) !important;
}
#tab-value .portfolio-kpi-highlight strong {
  font-weight: 800 !important;
  color: #111 !important;
}

/* Desktop: pevné a čitelné rozložení všech devíti sloupců. */
@media (min-width: 769px) {
  #instruments-table { table-layout: fixed !important; }
  #instruments-table th:nth-child(1), #instruments-table td:nth-child(1) { width: 6% !important; }
  #instruments-table th:nth-child(2), #instruments-table td:nth-child(2) { width: 23% !important; }
  #instruments-table th:nth-child(3), #instruments-table td:nth-child(3) { width: 8% !important; text-align: right !important; }
  #instruments-table th:nth-child(4), #instruments-table td:nth-child(4) { width: 11% !important; text-align: right !important; }
  #instruments-table th:nth-child(5), #instruments-table td:nth-child(5) { width: 11% !important; text-align: right !important; }
  #instruments-table th:nth-child(6), #instruments-table td:nth-child(6) { width: 10% !important; text-align: right !important; }
  #instruments-table th:nth-child(7), #instruments-table td:nth-child(7) { width: 8% !important; text-align: right !important; padding-left: 16px !important; }
  #instruments-table th:nth-child(8), #instruments-table td:nth-child(8) { width: 14% !important; text-align: right !important; padding-left: 18px !important; }
  #instruments-table th:nth-child(9), #instruments-table td:nth-child(9) { width: 9% !important; text-align: right !important; }
  #instruments-table td:nth-child(n+3) { white-space: nowrap !important; }
}

/* =====================================================
PORTFOLIO MOBILE TABLES - FINAL v24
Detail: Nazev, Hodnota, Nerealizovany zisk
Transakce: Typ, Smer, Vstupni investice
===================================================== */
@media (max-width: 768px) {
  #instruments-table,
  #transactions-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  #instruments-table thead,
  #transactions-table thead {
    display: table-header-group !important;
  }

  #instruments-table tbody,
  #transactions-table tbody {
    display: table-row-group !important;
  }

  #instruments-table tr,
  #transactions-table tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #instruments-table th,
  #instruments-table td,
  #transactions-table th,
  #transactions-table td {
    display: none !important;
    padding: 8px 5px !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
  }

  #instruments-table td::before,
  #transactions-table td::before {
    content: none !important;
    display: none !important;
  }

  /* Detail portfolia: sloupce 2, 5 a 8. */
  #instruments-table th:nth-child(2),
  #instruments-table td:nth-child(2),
  #instruments-table th:nth-child(5),
  #instruments-table td:nth-child(5),
  #instruments-table th:nth-child(8),
  #instruments-table td:nth-child(8) {
    display: table-cell !important;
  }

  #instruments-table th:nth-child(2),
  #instruments-table td:nth-child(2) {
    width: 44% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #instruments-table th:nth-child(5),
  #instruments-table td:nth-child(5) {
    width: 25% !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  #instruments-table th:nth-child(8),
  #instruments-table td:nth-child(8) {
    width: 31% !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  #instruments-table tfoot {
    display: none !important;
  }

  /* Transakce: sloupce 2, 3 a 6. */
  #transactions-table th:nth-child(2),
  #transactions-table td:nth-child(2),
  #transactions-table th:nth-child(3),
  #transactions-table td:nth-child(3),
  #transactions-table th:nth-child(6),
  #transactions-table td:nth-child(6) {
    display: table-cell !important;
  }

  #transactions-table th:nth-child(2),
  #transactions-table td:nth-child(2) {
    width: 50% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #transactions-table th:nth-child(3),
  #transactions-table td:nth-child(3) {
    width: 18% !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #transactions-table th:nth-child(6),
  #transactions-table td:nth-child(6) {
    width: 32% !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}



/* =====================================================
   UVODNI STRANKA - FINALNI OPRAVY 2026-09-01
===================================================== */
.hero { max-width: 760px; }
.hero-eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero .hero-lead { max-width: 700px; line-height: 1.7; }
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  box-sizing: border-box;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 13px;
}
.hero-trust li { position: relative; padding-left: 18px; }
.hero-trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 800;
}
.cta p { max-width: 680px; margin: 0 0 18px; line-height: 1.65; }
.cards-three .feature-card:last-child:nth-child(3n + 1) {
  grid-column: 2;
}
.btn-primary:hover { background: var(--gold-strong); color: #111; }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.feature-card:focus-visible {
  outline: 3px solid rgba(201, 166, 70, .38);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .gold-text { animation: none !important; }
  .card-clean, .fund-card, .side-card { transition: none !important; }
}
@media (max-width: 1024px) {
  .cards-three .feature-card:last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 768px) {
  .hero-trust { display: grid; gap: 9px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; }
}