/* ===== ZMIENNE KOLORYSTYCZNE ===== */
:root {
    --fx-navy:        #1a2744;
    --fx-navy-mid:    #253466;
    --fx-navy-light:  #2e3f7a;

    --fx-red:         #7a1c1c;
    --fx-red-mid:     #9e2a2a;
    --fx-red-light:   #c23535;

    --fx-gold:        #7a5c10;
    --fx-gold-mid:    #a07820;
    --fx-gold-light:  #c49a2a;

    /* tło aplikacji – bardzo jasny niebieskoszary */
    --fx-bg:          #eef0f7;

    /* tekst na ciemnym tle (navbar) */
    --fx-text:        #f0f4ff;
    --fx-muted:       #9dacd8;

    /* tekst na jasnym tle (content) */
    --fx-text-dark:   #1e2e52;
    --fx-muted-dark:  #6a7a9a;

    /* subnav – jasny granat */
    --fx-subnav-bg:   #dde2f0;
    --fx-subnav-border:#c5ceea;
    --fx-subnav-text: #3a4a6a;
    --fx-subnav-hover:#c5ceea;

    /* nagłówek tabeli – ciemny granat */
    --fx-thead-bg:    #253466;
    --fx-thead-text:  #b5c4e8;
    --fx-thead-border:#1a2744;

    /* panel/karta */
    --fx-panel-bg:    #ffffff;
    --fx-panel-border:#d0d6ea;

    /* wiersze tabeli BUY */
    --fx-row-buy:     #e8f5ec;
    --fx-row-buy-alt: #d8eedd;

    /* wiersze tabeli SELL */
    --fx-row-sell:    #fdeaea;
    --fx-row-sell-alt:#f7d8d8;

    /* KPI karty */
    --fx-kpi-navy-bg:   #dde2f0;
    --fx-kpi-navy-bdr:  #bcc5e0;
    --fx-kpi-red-bg:    #f0dcdc;
    --fx-kpi-red-bdr:   #ddb8b8;
    --fx-kpi-gold-bg:   #f5edcf;
    --fx-kpi-gold-bdr:  #ddd09a;
    --fx-kpi-green-bg:  #d8eedd;
    --fx-kpi-green-bdr: #a8d4b0;

    /* badge waluty */
    --fx-badge-cur-bg:  #e0e8f8;
    --fx-badge-cur-txt: #253466;
    --fx-badge-buy-bg:  #1a5c2a;
    --fx-badge-buy-txt: #c8f5d4;
    --fx-badge-sell-bg: #7a1c1c;
    --fx-badge-sell-txt:#ffd5d5;
    --fx-badge-gold-bg: #f5edcf;
    --fx-badge-gold-txt:#7a5c10;

    /* paginacja */
    --fx-page-bg:     #f3f5fc;
    --fx-page-border: #c5ceea;
}

/* ===== RESET & BASE ===== */
body {
    background-color: var(--fx-bg);
    color: var(--fx-text-dark);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    min-height: 100vh;
}

/* ===== NAVBAR POZIOM 1 ===== */
.navbar-fx {
    background-color: var(--fx-navy);
    border-bottom: 2px solid var(--fx-navy-mid);
    padding: 0 1.5rem;
    min-height: 52px;
}

/* Rozwinięte menu mobilne — tło navbara */
.navbar-fx .navbar-collapse.show,
.navbar-fx .navbar-collapse.collapsing {
    background-color: var(--fx-navy);
    padding: 0.5rem 0 1rem;
    border-top: 1px solid var(--fx-navy-mid);
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.navbar-brand-fx {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fx-text) !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.brand-icon {
    width: auto;
    height: 30px;
    padding: 0 10px;
    background: var(--fx-red-mid);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.navbar-fx .nav-link {
    color: var(--fx-muted) !important;
    font-size: 13px;
    padding: 6px 12px !important;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.navbar-fx .nav-link:hover {
    background: var(--fx-navy-mid);
    color: var(--fx-text) !important;
}
.navbar-fx .nav-link.active {
    background: var(--fx-red-mid) !important;
    color: #fff !important;
}
.navbar-fx .dropdown-menu {
    background: var(--fx-navy-mid);
    border: 1px solid var(--fx-navy-light);
    border-radius: 8px;
    padding: 6px;
    min-width: 200px;
}
.navbar-fx .dropdown-item {
    color: var(--fx-muted);
    font-size: 13px;
    border-radius: 5px;
    padding: 6px 12px;
}
.navbar-fx .dropdown-item:hover {
    background: var(--fx-navy-light);
    color: var(--fx-text);
}
.navbar-fx .dropdown-divider {
    border-color: var(--fx-navy-light);
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fx-gold-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}

/* ===== PASEK KURSÓW WALUT ===== */
.rates-bar {
    background: #fff;
    border-bottom: 1px solid var(--fx-panel-border);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.rates-bar::-webkit-scrollbar { display: none; }

.rates-bar-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--fx-navy-mid);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.rates-bar-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.rates-bar-cur {
    font-size: 10px;
    font-weight: 600;
    color: var(--fx-navy-mid);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rates-bar-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--fx-navy);
    font-variant-numeric: tabular-nums;
    min-width: 46px;
}
#rate-usd-sell { color: var(--fx-red-mid); }
#rate-usd-buy  { color: #1a7a35; }
.rates-bar-val.loading { color: var(--fx-muted); font-weight: 400; }
.rates-bar-val.error   { color: var(--fx-red-mid); }
.rates-bar-sep {
    color: var(--fx-panel-border);
    font-size: 11px;
    flex-shrink: 0;
}
.rates-bar-ts {
    font-size: 10px;
    color: var(--fx-muted);
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .rates-bar { padding: 0 .75rem; gap: 4px; }
    .rates-bar-label-text { display: none; }
}

/* ===== NAVBAR POZIOM 2 (subnav) ===== */
.subnav {
    background: var(--fx-subnav-bg);
    border-bottom: 1px solid var(--fx-subnav-border);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 38px;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.subnav-link {
    color: var(--fx-subnav-text);
    text-decoration: none;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 5px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.subnav-link:hover {
    background: var(--fx-subnav-hover);
    color: var(--fx-navy);
}
.subnav-link.active {
    background: var(--fx-red-mid);
    color: #fff;
}
.subnav-sep {
    color: var(--fx-subnav-border);
    padding: 0 2px;
    font-size: 11px;
    user-select: none;
}
.subnav-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--fx-navy-mid);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.subnav-rate {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--fx-subnav-text);
    white-space: nowrap;
}
.subnav-rate .rate-cur {
    font-weight: 700;
    font-size: 11px;
    color: var(--fx-navy);
}
.subnav-rate .rate-val {
    font-variant-numeric: tabular-nums;
}

/* ===== MAIN CONTENT ===== */
.fx-content {
    padding: 1.25rem 1.5rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ===== KPI KARTY ===== */
.kpi-card {
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid transparent;
}
.kpi-card.navy  { background: var(--fx-kpi-navy-bg);  border-color: var(--fx-kpi-navy-bdr); }
.kpi-card.red   { background: var(--fx-kpi-red-bg);   border-color: var(--fx-kpi-red-bdr);  }
.kpi-card.gold  { background: var(--fx-kpi-gold-bg);  border-color: var(--fx-kpi-gold-bdr); }
.kpi-card.green { background: var(--fx-kpi-green-bg); border-color: var(--fx-kpi-green-bdr);}
.kpi-label { font-size: 11px; color: var(--fx-muted-dark); margin-bottom: 4px; }
.kpi-val   { font-size: 22px; font-weight: 500; color: var(--fx-navy); }
.kpi-sub   { font-size: 11px; color: var(--fx-muted-dark); margin-top: 3px; }

/* ===== PANEL / KARTA TREŚCI ===== */
.fx-panel {
    background: var(--fx-panel-bg);
    border: 1px solid var(--fx-panel-border);
    border-radius: 10px;
    overflow: hidden;
}
.fx-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fx-panel-border);
}
.fx-panel-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fx-navy);
}
.fx-panel-body {
    padding: 1rem;
}

/* ===== TABELA ===== */
.fx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fx-table thead tr { background: var(--fx-thead-bg); }
.fx-table thead th {
    color: var(--fx-thead-text);
    font-weight: 500;
    padding: 9px 10px;
    font-size: 11px;
    border-bottom: 1px solid var(--fx-thead-border);
    white-space: nowrap;
}
.fx-table thead th a {
    color: var(--fx-thead-text);
    text-decoration: none;
}
.fx-table thead th a:hover {
    color: #fff;
}
.fx-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: filter 0.1s;
}
.fx-table tbody tr:last-child { border-bottom: none; }
.fx-table tbody tr:hover { filter: brightness(.95); }
.fx-table tbody td { padding: 8px 10px; color: var(--fx-text-dark); white-space: nowrap; }

/* Kolorowanie wierszy BUY / SELL */
.fx-table .row-buy      { background: var(--fx-row-buy);      }
.fx-table .row-buy-alt  { background: var(--fx-row-buy-alt);  }
.fx-table .row-sell     { background: var(--fx-row-sell);     }
.fx-table .row-sell-alt { background: var(--fx-row-sell-alt); }

/* ===== BADGE WALUTOWY ===== */
.badge-fx {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}
.badge-buy  { background: var(--fx-badge-buy-bg);  color: var(--fx-badge-buy-txt);  }
.badge-sell { background: var(--fx-badge-sell-bg); color: var(--fx-badge-sell-txt); }
.badge-cur  { background: var(--fx-badge-cur-bg);  color: var(--fx-badge-cur-txt);  }
.badge-gold { background: var(--fx-badge-gold-bg); color: var(--fx-badge-gold-txt); }

/* ===== PRZYCISKI ===== */
.btn-fx-primary {
    background: var(--fx-red-mid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-fx-primary:hover { background: var(--fx-red-light); color: #fff; }
.btn-fx-secondary {
    background: var(--fx-kpi-navy-bg);
    color: var(--fx-navy);
    border: 1px solid var(--fx-kpi-navy-bdr);
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-fx-secondary:hover { background: var(--fx-subnav-hover); color: var(--fx-navy); }
.btn-fx-gold {
    background: var(--fx-kpi-gold-bg);
    color: var(--fx-gold);
    border: 1px solid var(--fx-kpi-gold-bdr);
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    cursor: pointer;
}
.btn-fx-gold:hover { background: var(--fx-kpi-gold-bdr); color: var(--fx-gold); }

/* ===== FORMULARZE ===== */
.form-fx .form-label { color: var(--fx-muted-dark); font-size: 12px; margin-bottom: 4px; }
.form-fx .form-control,
.form-fx .form-select {
    background: #fff;
    border: 1px solid var(--fx-panel-border);
    color: var(--fx-text-dark);
    border-radius: 7px;
    font-size: 13px;
}
.form-fx .form-control:focus,
.form-fx .form-select:focus {
    background: #fff;
    border-color: var(--fx-navy-mid);
    color: var(--fx-text-dark);
    box-shadow: 0 0 0 3px rgba(37,52,102,0.15);
}
.form-fx .form-control::placeholder { color: var(--fx-muted-dark); }

/* ===== ALERTY ===== */
.alert-fx {
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    border: 1px solid transparent;
}
.alert-fx.info    { background: var(--fx-kpi-navy-bg); border-color: var(--fx-kpi-navy-bdr); color: var(--fx-navy); }
.alert-fx.danger  { background: var(--fx-kpi-red-bg);  border-color: var(--fx-kpi-red-bdr);  color: var(--fx-red); }
.alert-fx.success { background: var(--fx-kpi-green-bg);border-color: var(--fx-kpi-green-bdr);color: #1a5c2a; }
.alert-fx.warning { background: var(--fx-kpi-gold-bg); border-color: var(--fx-kpi-gold-bdr); color: var(--fx-gold); }

/* ===== PAGINACJA ===== */
.pagination-fx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--fx-panel-border);
}
.pagination-fx-counter {
    font-size: 11px;
    color: var(--fx-muted-dark);
}
.pagination-fx-pages {
    display: flex;
    align-items: center;
    gap: 2px;
}
.page-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid var(--fx-page-border);
    background: var(--fx-page-bg);
    color: var(--fx-muted-dark);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    padding: 0 6px;
}
.page-btn.active  { background: var(--fx-red-mid); color: #fff; border-color: var(--fx-red-mid); }
.page-btn:hover:not(.active) { background: var(--fx-subnav-bg); color: var(--fx-navy); }
.page-btn.disabled { opacity: 0.35; pointer-events: none; }

/* ===== MODAL ===== */
.modal-fx .modal-content {
    background: #fff;
    border: 1px solid var(--fx-panel-border);
    border-radius: 12px;
    color: var(--fx-text-dark);
}
.modal-fx .modal-header {
    border-bottom: 1px solid var(--fx-panel-border);
    padding: 14px 20px;
}
.modal-fx .modal-footer {
    border-top: 1px solid var(--fx-panel-border);
    padding: 12px 20px;
}
.modal-fx .btn-close { filter: none; }

/* ===== FOOTER ===== */
.fx-footer {
    background: var(--fx-navy);
    border-top: 2px solid var(--fx-navy-mid);
    padding: 10px 1.5rem;
    font-size: 11px;
    color: var(--fx-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

/* ===== TOAST ===== */
.toast-fx {
    background: #fff;
    border: 1px solid var(--fx-panel-border);
    color: var(--fx-text-dark);
    border-radius: 8px;
}
.toast-fx .toast-header {
    background: var(--fx-subnav-bg);
    border-bottom: 1px solid var(--fx-subnav-border);
    color: var(--fx-navy);
    border-radius: 8px 8px 0 0;
}

/* ===== LICZBY W TABELI ===== */
.td-num   { text-align: right; font-size: 11px; color: var(--fx-navy-mid); font-variant-numeric: tabular-nums; }
.td-prov  { text-align: right; font-size: 11px; color: var(--fx-gold);     font-variant-numeric: tabular-nums; font-weight: 500; }
.td-date  { font-size: 11px; color: var(--fx-muted-dark); }
.td-nr    { font-size: 10px; color: var(--fx-muted-dark); font-family: monospace; }
.td-small { font-size: 11px; }

/* ===== SCENARIO SELECT ===== */
.scenario-select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 6px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    height: 32px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aab'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    cursor: pointer;
    min-width: 160px;
    transition: border-color .15s, background-color .15s;
}
.scenario-select:focus {
    outline: none;
    border-color: var(--fx-gold);
    background-color: rgba(255,255,255,0.14);
}
.scenario-select option {
    background: var(--fx-navy);
    color: #fff;
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 768px) {
    .navbar-fx { padding: 0 1rem; }
    .subnav { padding: 0 1rem; }
    .fx-content { padding: 1rem; }
    .kpi-val { font-size: 18px; }
}