/* crypto-portfolio-tracker.css */

/* ======================= TABELA PORTFELA ======================= */
.crypto-portfolio-table th,
.crypto-portfolio-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.crypto-portfolio-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Style dla historii operacji */
.month-summary {
    background-color: #e0e0e0;
    cursor: pointer;
}

.month-summary:hover {
    background-color: #d0d0d0;
}

.crypto-portfolio-table th:nth-child(8),
.crypto-portfolio-table td:nth-child(8) {
    background-color: #fbced8;
}

.crypto-portfolio-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.crypto-portfolio-table {
    width: 100%;
    table-layout: auto;
}

@media screen and (max-width: 768px) {
    .crypto-portfolio-table {
        min-width: 800px;
        white-space: nowrap;
    }
}

/* Style dla shortcode'ów wartości portfela */
.invested-capital-shortcode,
.invested-capital,
.total-purchase-shortcode,
.total-current-shortcode {
    
    font-size: 28px;
    font-weight: bold;
    color: #0073aa;
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: #f0f8ff;
    border: 1px solid #0073aa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.1);
}

/* Specjalny styl dla zainwestowanego kapitału */
.invested-capital-shortcode {
    background-color: #e8f5e8;
    border-color: #28a745;
    color: #28a745;
}

/* Responsywność dla mniejszych ekranów */
@media screen and (max-width: 768px) {
    .invested-capital-shortcode,
    .invested-capital,
    .total-purchase-shortcode,
    .total-current-shortcode {
        font-size: 24px;
        padding: 15px;
        margin: 15px 0;
    }
}

/* ======================= ADMIN MENU ======================= */
.admin-menu-wrapper {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    transition: box-shadow 0.3s ease;
}

.admin-menu-wrapper:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.admin-menu-wrapper h2 {
    color: #444;
    font-family: 'Arial', sans-serif;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Grupy opcji */
.admin-menu-group {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid #3f51b5;
    background-color: #f0f3fa;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.admin-menu-group h3 {
    color: #3f51b5;
    font-family: 'Arial', sans-serif;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.admin-menu-group h3 i {
    margin-right: 10px;
}

.admin-menu-group ul {
    list-style: none;
    padding: 0;
}

.admin-menu-group ul li {
    margin-bottom: 10px;
    color: #555;
    transition: color 0.3s ease;
}

.admin-menu-group ul li a {
    text-decoration: none;
    color: #3f51b5;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.admin-menu-group ul li a:hover {
    color: #283593;
    background-color: #e0e7ff;
}

.admin-menu-group ul li a i {
    margin-right: 8px;
    color: #7986cb;
    transition: color 0.3s ease;
}

.admin-menu-group ul li a:hover i {
    color: #3f51b5;
}

/* ======================= ANIMACJE ======================= */
.enhanced-admin-menu ul li a {
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.enhanced-admin-menu ul li a:hover {
    background-color: #e0e7ff;
    color: #283593;
}

.enhanced-admin-menu ul li a i {
    transition: transform 0.3s ease;
}

.enhanced-admin-menu ul li a:hover i {
    transform: scale(1.2);
}

/* ======================= RESPONSYWNOŚĆ ======================= */
@media screen and (max-width: 768px) {
    .admin-menu-group {
        padding: 15px;
    }
    .admin-menu-group ul li a {
        padding: 6px 10px;
    }
}
/* ======================= RESPONSYWNOŚĆ DLA WYKRESU ======================= */
.chart-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 700px; /* lub inna dokładna wartość */
}
.chart-wrapper > #snapshot_chart {
  min-width: 900px;
  height: 700px;
  margin: 0 auto;
}

/* Dla ekranów szerszych niż 900px nie pokazujemy paska przewijania */
@media (min-width: 901px) {
    .chart-wrapper {
        overflow-x: hidden;
    }
}
/* Style dla sortowanych nagłówków tabeli */
.crypto-portfolio-table th a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crypto-portfolio-table th a:hover {
    text-decoration: underline;
}

/* Style dla kolumny procentowej portfela */
.crypto-portfolio-table td:nth-child(9) {
    font-weight: bold;
}

/* Dostosowania responsive dla szerszej tabeli */
@media screen and (max-width: 768px) {
    .crypto-portfolio-table {
        min-width: 900px; /* Zwiększone z 800px */
    }
}
/* ======================= Style dla formularza zakupów ======================= */
/* Style dla formularza zakupów */
.payment-method-section {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin: 10px 0;
}

.stablecoin-balance {
    font-weight: bold;
    color: #2271b1;
    background-color: #e6f3ff;
    padding: 8px;
    border-radius: 4px;
    display: inline-block;
}

#cash_amount_row {
    transition: opacity 0.3s ease;
}

.payment-option {
    margin-bottom: 8px;
    padding: 5px;
}

.payment-option input[type="radio"]:disabled + label {
    color: #999;
    font-style: italic;
}

/* ======================= CAPITAL SUMMARY STYLES ======================= */
.portfolio-capital-summary {
	width: 100%;
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.portfolio-capital-summary h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333333;
    text-align: center;
    font-size: 20px;
}

.capital-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.capital-item {
    text-align: center;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.capital-item strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

.capital-value {
    font-size: 18px;
    font-weight: bold;
    color: #0073aa;
    display: block;
    margin-top: 5px;
}

.capital-value.invested {
    color: #28a745;
}

.table-difference-info {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
    font-size: 14px;
    border-radius: 4px;
}

.profit-summary {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.profit-summary.profit-positive {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.profit-summary.profit-negative {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.profit-value {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin-bottom: 8px;
}

.profit-description {
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* ======================= RESPONSYWNOŚĆ DLA CAPITAL SUMMARY ======================= */
@media screen and (max-width: 768px) {
    .portfolio-capital-summary {
        margin-top: 15px;
        padding: 10px;
    }
    
    .capital-summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .capital-item {
        padding: 8px;
    }
    
    .capital-value {
        font-size: 16px;
    }
    
    .profit-value {
        font-size: 16px;
    }
    
    .profit-description {
        font-size: 12px;
    }
    
    .table-difference-info {
        padding: 8px;
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-capital-summary {
        margin-top: 10px;
        padding: 8px;
    }
    
    .capital-item {
        padding: 6px;
    }
    
    .capital-value {
        font-size: 14px;
    }
    
    .profit-value {
        font-size: 14px;
    }
    
    .profit-summary {
        padding: 10px;
    }
}

/* ======================= DODATKOWE STYLE DLA CAPITAL SUMMARY ======================= */

/* Wyróżniony element - Invested Capital */
.capital-item.capital-item-primary {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
    border: 1px solid #28a745;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1);
}

.capital-item.capital-item-primary .capital-value {
    font-size: 20px;
    color: #28a745 !important;
}

/* Małe opisy pod wartościami */
.capital-item small {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 2px;
    font-weight: normal;
}

/* Informacja o różnicy z ikonami */
.table-difference-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px;
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: 4px;
}

.table-difference-info.difference-positive {
    background-color: #d1ecf1;
    border-left-color: #17a2b8;
}

.table-difference-info.difference-negative {
    background-color: #f8d7da;
    border-left-color: #dc3545;
}

.difference-icon {
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

.difference-content {
    flex: 1;
}

/* Sekcja zysku z headerem */
.profit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.profit-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.profit-icon {
    font-size: 18px;
}

.profit-value {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
}

.profit-percent {
    font-size: 18px;
    opacity: 0.9;
}

/* Responsywność dla małych ekranów */
@media screen and (max-width: 768px) {
    .capital-item.capital-item-primary .capital-value {
        font-size: 18px;
    }
    
    .profit-value {
        font-size: 20px;
    }
    
    .profit-percent {
        font-size: 16px;
    }
    
    .table-difference-info {
        flex-direction: column;
        gap: 5px;
    }
    
    .difference-icon {
        align-self: flex-start;
    }
}

@media screen and (max-width: 480px) {
    .capital-item.capital-item-primary .capital-value {
        font-size: 16px;
    }
    
    .profit-value {
        font-size: 18px;
    }
    
    .profit-header h4 {
        font-size: 14px;
    }
}

/* Style dla checkboxa z coinami zero balance */
.zero-balance-toggle {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.zero-balance-row {
    opacity: 0.7;
}

.zero-balance-row:hover {
    opacity: 1;
}