/* common.css - общие стили с расширенной адаптивностью и полной поддержкой тёмной темы */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background: #f0f4f9;
    color: #1c2a44;
    transition: background 0.3s, color 0.3s;
    font-size: calc(14px + 0.2vw);
    line-height: 1.5;
}

.container {
    max-width: min(90%, 2000px);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== ШАПКА ===== */
.top-bar {
    background: #1e3a5f;
    color: #d9e6f2;
    font-size: clamp(11px, 2vw, 13px);
    padding: 8px 0;
    border-bottom: 1px solid #16324d;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.top-left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.top-left span {
    white-space: nowrap;
    cursor: pointer;
}
.top-left i {
    margin-right: 6px;
    color: #8bb9e0;
}
.top-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
}
.top-right a {
    color: #d9e6f2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.top-right i {
    margin-right: 5px;
}

.header {
    background: white;
    padding: 15px 0;
    border-bottom: 1px solid #cbd5e1;
    transition: background 0.3s;
}
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.logo {
    cursor: pointer;
    flex-shrink: 0;
}
.logo h1 {
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: -0.5px;
}
.logo p {
    font-size: clamp(8px, 1.5vw, 10px);
    color: #5f6b7a;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}
.nav a {
    color: #1e2b3a;
    font-weight: 600;
    margin: 0 8px;
    cursor: pointer;
    font-size: clamp(12px, 2vw, 14px);
    text-decoration: none;
    white-space: nowrap;
}
.nav a:hover {
    color: #1e3a5f;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.header-actions i {
    font-size: clamp(14px, 2vw, 16px);
    color: #1e2b3a;
    cursor: pointer;
    position: relative;
}
/* кнопка избранного удалена */
.enquiry {
    background: #1e3a5f;
    color: white;
    font-weight: 600;
    padding: 8px 18px;
    border: none;
    cursor: pointer;
    font-size: clamp(11px, 2vw, 13px);
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
}
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: clamp(16px, 3vw, 20px);
    color: inherit;
}
.burger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}
.mobile-menu {
    display: none;
    flex-direction: column;
    background: white;
    padding: 15px;
    border-top: 1px solid #cbd5e1;
}
.mobile-menu.active {
    display: flex;
}
.mobile-menu a {
    padding: 12px;
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
    text-decoration: none;
    color: #1e2b3a;
    font-size: 16px;
}

/* ===== ПОДВАЛ ===== */
.footer {
    background: #1e2a3a;
    color: #b0c4de;
    padding: 30px 0;
    margin-top: 40px;
    border-top: 3px solid #1e3a5f;
}
.footer a {
    color: #b0c4de;
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: clamp(12px, 2vw, 14px);
}
.footer h6 {
    color: white;
    margin-bottom: 12px;
    font-size: clamp(14px, 2.2vw, 16px);
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #334155;
    font-size: clamp(11px, 1.8vw, 13px);
}
.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

/* ===== ОСНОВНОЙ МАКЕТ (две колонки) ===== */
.main-flex {
    display: flex;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}
.left-panel {
    flex: 0 0 250px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 18px;
    transition: background 0.3s;
}
.right-panel {
    flex: 1;
    min-width: 300px;
}
@media (max-width: 900px) {
    .left-panel {
        flex: 0 0 100%;
    }
}
@media (max-width: 600px) {
    .left-panel {
        padding: 12px;
    }
}

/* ===== ЭЛЕМЕНТЫ ФИЛЬТРОВ ===== */
.filter-group {
    margin-bottom: 20px;
}
.filter-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
    color: #1e2b3a;
}
.filter-group input[type=text] {
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    background: white;
    color: #1c2a44;
}
.filter-group .range-slider {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-group .range-slider span {
    font-size: 13px;
    min-width: 35px;
}
.filter-group input[type=range] {
    flex: 1;
}
.ship-type-list {
    list-style: none;
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto;
}
.ship-type-list li {
    margin-bottom: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
}
.ship-type-list li:hover {
    background: #e2eaf3;
}
.ship-type-list li.active {
    background: #1e3a5f;
    color: white;
}
.ship-type-list li i {
    width: 20px;
    color: inherit;
}

/* ===== ТЁМНАЯ ТЕМА (расширенная) ===== */
body.dark-theme {
    background: #121e2c;
    color: #e0edf5;
}
body.dark-theme .header,
body.dark-theme .left-panel,
body.dark-theme .right-panel,
body.dark-theme .ship-card,
body.dark-theme .modal-content,
body.dark-theme .service-row,
body.dark-theme .page-indicator,
body.dark-theme .pagination .page-btn,
body.dark-theme .filter-group input[type=text],
body.dark-theme .filter-group select,
body.dark-theme .sort-select,
body.dark-theme .recently-viewed,
body.dark-theme .publisher-box,
body.dark-theme .detail-meta-grid,
body.dark-theme .detail-specs,
body.dark-theme .tabs .tab,
body.dark-theme .tab-content,
body.dark-theme .recent-ship,
body.dark-theme .service-card,
body.dark-theme .benefits,
body.dark-theme .request-form,
body.dark-theme .valuation-card,
body.dark-theme .finance-card,
body.dark-theme .charter-card,
body.dark-theme .team-card,
body.dark-theme .company-card,
body.dark-theme .contact-info,
body.dark-theme .contact-form,
body.dark-theme .enquiry-form,
body.dark-theme .listing-form,
body.dark-theme .faq-item,
body.dark-theme .linkedin-card,
body.dark-theme .worldwide-stats .stat-card,
body.dark-theme .region-card,
body.dark-theme .job-card,
body.dark-theme .benefits-section,
body.dark-theme .login-container,
body.dark-theme .faith-content,
body.dark-theme .testimonial,
body.dark-theme .principles-list,
body.dark-theme .shortlist-card,
body.dark-theme .news-card,
body.dark-theme .notification-item,
body.dark-theme .data-table,
body.dark-theme .data-table td,
body.dark-theme .form-container {
    background: #1e2f40;
    color: #e0edf5;
    border-color: #2f4b66;
}
body.dark-theme .logo h1,
body.dark-theme .logo p {
    color: #e0edf5;
}
body.dark-theme .top-right a {
    color: #ffffff;
    font-weight: 500;
}
body.dark-theme .header-actions i {
    color: #ffffff;
}
body.dark-theme .nav a {
    color: #e0edf5;
}
body.dark-theme .enquiry {
    background: #1e3a5f;
    color: white;
}
/* все связанное с избранным удалено */
body.dark-theme .filter-group label,
body.dark-theme .listing-header h2,
body.dark-theme .listing-header .count,
body.dark-theme .ship-title,
body.dark-theme .ship-meta,
body.dark-theme .views,
body.dark-theme .page-indicator,
body.dark-theme .pagination .page-btn,
body.dark-theme .service-item,
body.dark-theme .footer a,
body.dark-theme .footer h6,
body.dark-theme .footer-bottom,
body.dark-theme .recently-viewed h4,
body.dark-theme .recent-ship,
body.dark-theme .detail-title,
body.dark-theme .detail-price,
body.dark-theme .viewer-count,
body.dark-theme .detail-meta-grid div,
body.dark-theme .detail-spec-item,
body.dark-theme .publisher-box p,
body.dark-theme .tabs .tab,
body.dark-theme .tab-content p,
body.dark-theme .tab-content button,
body.dark-theme .service-title,
body.dark-theme .service-description,
body.dark-theme .benefit-text h4,
body.dark-theme .benefit-text p,
body.dark-theme .request-form h3,
body.dark-theme .form-group label,
body.dark-theme .valuation-title,
body.dark-theme .valuation-description,
body.dark-theme .finance-title,
body.dark-theme .finance-description,
body.dark-theme .charter-title,
body.dark-theme .charter-description,
body.dark-theme .team-name,
body.dark-theme .team-position,
body.dark-theme .team-bio,
body.dark-theme .company-card p,
body.dark-theme .mission-box,
body.dark-theme .stat-number,
body.dark-theme .stat-label,
body.dark-theme .values-list li,
body.dark-theme .contact-info p,
body.dark-theme .contact-form h3,
body.dark-theme .enquiry-form h3,
body.dark-theme .listing-form h3,
body.dark-theme .faq-question,
body.dark-theme .faq-answer,
body.dark-theme .linkedin-card h3,
body.dark-theme .linkedin-card p,
body.dark-theme .linkedin-info p,
body.dark-theme .region-card h3,
body.dark-theme .region-card li,
body.dark-theme .job-title,
body.dark-theme .job-location,
body.dark-theme .job-description,
body.dark-theme .job-requirements,
body.dark-theme .benefits-section h3,
body.dark-theme .benefits-list li,
body.dark-theme .principles-list li,
body.dark-theme .testimonial,
body.dark-theme .news-title,
body.dark-theme .news-summary,
body.dark-theme .news-date,
body.dark-theme .notification-title,
body.dark-theme .notification-time {
    color: #e0edf5;
}
body.dark-theme .filter-group input[type=text],
body.dark-theme .filter-group select,
body.dark-theme .sort-select,
body.dark-theme .form-group input,
body.dark-theme .form-group select,
body.dark-theme .form-group textarea {
    background: #2a3b4e;
    border-color: #3f5a73;
    color: #e0edf5;
}
body.dark-theme .page-btn.active {
    background: #1e3a5f;
    color: white;
    border-color: #1e3a5f;
}
body.dark-theme .quick-view-btn,
body.dark-theme .detail-btn,
body.dark-theme .share-btn,
body.dark-theme .submit-btn,
body.dark-theme .service-btn,
body.dark-theme .valuation-btn,
body.dark-theme .finance-btn,
body.dark-theme .charter-btn,
body.dark-theme .linkedin-btn,
body.dark-theme .apply-btn,
body.dark-theme .read-more,
body.dark-theme .notification-filters button {
    background: #1e3a5f;
    color: white;
}
body.dark-theme .quick-view-btn:hover,
body.dark-theme .detail-btn:hover,
body.dark-theme .share-btn:hover,
body.dark-theme .submit-btn:hover,
body.dark-theme .service-btn:hover,
body.dark-theme .valuation-btn:hover,
body.dark-theme .finance-btn:hover,
body.dark-theme .charter-btn:hover,
body.dark-theme .linkedin-btn:hover,
body.dark-theme .apply-btn:hover,
body.dark-theme .read-more:hover,
body.dark-theme .notification-filters button:hover {
    background: #143049;
}
body.dark-theme .detail-btn.secondary {
    background: #2d6a4f;
}
body.dark-theme .modal-close {
    color: #e0edf5;
}
body.dark-theme .recent-ship {
    background: #2a3b4e;
    border-color: #3f5a73;
}
body.dark-theme .recent-ship:hover {
    border-color: #1e3a5f;
}
body.dark-theme .benefit-item i,
body.dark-theme .region-card i,
body.dark-theme .values-list i,
body.dark-theme .contact-info i,
body.dark-theme .team-contact a,
body.dark-theme .job-location i,
body.dark-theme .benefits-list i,
body.dark-theme .news-date i,
body.dark-theme .notification-icon {
    color: #8bb9e0;
}
body.dark-theme .footer {
    background: #0b1420;
    color: #b0c4de;
}
body.dark-theme .footer a {
    color: #b0c4de;
}
/* страница логина */
body.dark-theme .login-container h1 {
    color: #e0edf5;
}
body.dark-theme .login-btn {
    background: #1e3a5f;
    color: white;
}
body.dark-theme .error-message {
    color: #ff8888;
}
/* good-faith */
body.dark-theme .faith-content {
    background: #1e2f40;
    border-color: #2f4b66;
}
body.dark-theme .testimonial {
    background: #2a3b4e;
    border-left-color: #1e3a5f;
}
/* list-vessel */
body.dark-theme .listing-form {
    background: #1e2f40;
    border-color: #2f4b66;
}
body.dark-theme .benefits-grid .benefit-item {
    color: #e0edf5;
}
/* shortlist */
body.dark-theme .ship-card {
    background: #1e2f40;
    border-color: #2f4b66;
}
body.dark-theme .empty-message {
    background: #1e2f40;
    border-color: #2f4b66;
    color: #b0c4de;
}
/* админка */
body.dark-theme .admin-menu li {
    color: #e0edf5;
}
body.dark-theme .admin-menu li:hover {
    background: #2a3b4e;
}
body.dark-theme .admin-menu li.active {
    background: #1e3a5f;
    color: white;
}
body.dark-theme .data-table th {
    background: #1e3a5f;
    color: white;
    border-color: #2f4b66;
}
body.dark-theme .data-table td {
    background: #1e2f40;
    color: #e0edf5;
    border-color: #2f4b66;
}
body.dark-theme .data-table tr:hover td {
    background: #2a3b4e;
}
body.dark-theme .form-container h3 {
    color: #e0edf5;
}
body.dark-theme .coord-note {
    color: #b0c4de;
}
/* уведомления */
body.dark-theme .notification-filters button.active {
    background: #1e3a5f;
    color: white;
    border-color: #1e3a5f;
}
body.dark-theme .mark-read {
    color: #8bb9e0;
}
body.dark-theme .mark-read:hover {
    color: #ff8888;
}
/* ===== ДОПОЛНИТЕЛЬНЫЕ ПРАВИЛА ДЛЯ ВИДИМОСТИ ЦИФР В ТЁМНОЙ ТЕМЕ ===== */
body.dark-theme .listing-header .count {
    background: #2a3b4e;
    color: #e0edf5;
    border-color: #3f5a73;
}
body.dark-theme .page-indicator {
    background: #1e2f40;
    color: #e0edf5;
    border-color: #2f4b66;
}
body.dark-theme .views {
    color: #b0c4de;
}
body.dark-theme .hot-label {
    background: #b22222;
    color: white;
}
body.dark-theme .reduced-label {
    background: #2d6a4f;
    color: white;
}
body.dark-theme .pagination .page-btn {
    background: #1e2f40;
    color: #e0edf5;
    border-color: #2f4b66;
}
body.dark-theme .pagination .page-btn.active {
    background: #1e3a5f;
    color: white;
    border-color: #1e3a5f;
}
body.dark-theme .filter-group input[type=text],
body.dark-theme .filter-group select,
body.dark-theme .sort-select {
    background: #2a3b4e;
    border-color: #3f5a73;
    color: #e0edf5;
}
body.dark-theme .ship-meta {
    color: #b0c4de;
}
body.dark-theme .ship-price {
    color: #e0edf5;
}
/* для страницы sale-lists */
body.dark-theme .ship-price {
    color: #e0edf5;
}
body.dark-theme .ship-meta i {
    color: #8bb9e0;
}
/* для карточек новостей */
body.dark-theme .news-date {
    color: #b0c4de;
}
body.dark-theme .news-summary {
    color: #e0edf5;
}
/* для уведомлений */
body.dark-theme .notification-time {
    color: #b0c4de;
}