/* ==========================================================================
   Apple-Style Design System for CRM Domeny
   ========================================================================== */

/* --- CSS Variables --- */
:root {
    --apple-bg: #f5f5f7;
    --apple-surface: #ffffff;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-text: #1d1d1f;
    --apple-text-secondary: #86868b;
    --apple-green: #34c759;
    --apple-green-hover: #2db84e;
    --apple-orange: #ff9f0a;
    --apple-red: #ff3b30;
    --apple-border: #d2d2d7;
    --apple-hover-bg: #f0f0f3;
    --apple-divider: #e5e5ea;
    --apple-radius-sm: 8px;
    --apple-radius-md: 12px;
    --apple-radius-lg: 16px;
    --apple-radius-xl: 20px;
    --apple-shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
    --apple-shadow-md: 0 2px 12px rgba(0,0,0,0.08);
    --apple-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --apple-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    --apple-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Base --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--apple-bg);
    color: var(--apple-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--apple-text);
}

small, .text-muted {
    color: var(--apple-text-secondary) !important;
}

a {
    color: var(--apple-blue);
    text-decoration: none;
}

a:hover {
    color: var(--apple-blue-hover);
}

/* --- Navbar (Frosted Glass) --- */
.navbar {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--apple-border);
    padding: 10px 0;
    transition: var(--apple-transition);
}

.navbar-brand {
    color: var(--apple-text) !important;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.navbar-brand i {
    color: var(--apple-blue);
}

.navbar .nav-link {
    color: var(--apple-text) !important;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 6px 14px !important;
    border-radius: var(--apple-radius-sm);
    transition: var(--apple-transition);
}

.navbar .nav-link:hover {
    background: var(--apple-hover-bg);
}

.navbar .navbar-text {
    color: var(--apple-text-secondary) !important;
    font-size: 0.85rem;
}

/* --- Cards & Panels --- */
.card {
    background: var(--apple-surface);
    border: none;
    border-radius: var(--apple-radius-lg);
    box-shadow: var(--apple-shadow-md);
    overflow: hidden;
}

.card-header {
    background: var(--apple-surface);
    border-bottom: 1px solid var(--apple-divider);
    font-weight: 600;
    padding: 16px 20px;
}

.card-body {
    padding: 20px;
}

.filters-panel {
    background: var(--apple-surface);
    padding: 24px;
    border-radius: var(--apple-radius-lg);
    margin-bottom: 24px;
    box-shadow: var(--apple-shadow-md);
    border: none;
}

/* --- Buttons --- */
.btn {
    border-radius: var(--apple-radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 8px 18px;
    border: none;
    transition: var(--apple-transition);
    letter-spacing: -0.01em;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: var(--apple-blue);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--apple-blue-hover);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--apple-green);
    color: #fff;
}

.btn-success:hover, .btn-success:focus {
    background: var(--apple-green-hover);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.35);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--apple-red);
    color: #fff;
}

.btn-danger:hover, .btn-danger:focus {
    background: #e0342c;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.35);
    transform: translateY(-1px);
}

.btn-warning {
    background: var(--apple-orange);
    color: #fff;
}

.btn-warning:hover, .btn-warning:focus {
    background: #e68f09;
    color: #fff;
}

.btn-outline-secondary {
    border: 1px solid var(--apple-border);
    color: var(--apple-text-secondary);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: var(--apple-hover-bg);
    border-color: var(--apple-text-secondary);
    color: var(--apple-text);
}

.btn-outline-info {
    border: 1px solid var(--apple-blue);
    color: var(--apple-blue);
    background: transparent;
}

.btn-outline-info:hover {
    background: rgba(0, 113, 227, 0.08);
    border-color: var(--apple-blue);
    color: var(--apple-blue);
}

.btn-light {
    background: var(--apple-hover-bg);
    color: var(--apple-text);
    border: 1px solid var(--apple-border);
}

.btn-light:hover {
    background: #e8e8ed;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 6px;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 1rem;
    border-radius: var(--apple-radius-md);
}

/* --- Form Controls --- */
.form-control, .form-select {
    border-radius: var(--apple-radius-sm);
    border: 1px solid var(--apple-border);
    padding: 9px 14px;
    font-size: 0.9rem;
    color: var(--apple-text);
    background: var(--apple-surface);
    transition: var(--apple-transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
    outline: none;
}

.form-control::placeholder {
    color: var(--apple-text-secondary);
    opacity: 0.7;
}

.form-label {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--apple-text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.form-check-input {
    border-radius: 4px;
    border: 1.5px solid var(--apple-border);
    transition: var(--apple-transition);
}

.form-check-input:checked {
    background-color: var(--apple-blue);
    border-color: var(--apple-blue);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
    border-color: var(--apple-blue);
}

.form-check-label {
    font-size: 0.85rem;
    color: var(--apple-text);
}

textarea.form-control {
    border-radius: var(--apple-radius-sm);
}

.form-select-sm {
    font-size: 0.8rem;
    border-radius: 6px;
    padding: 4px 10px;
}

/* --- Tables --- */
.table {
    border-color: var(--apple-divider);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--apple-surface) !important;
    color: var(--apple-text-secondary) !important;
    border-bottom: 2px solid var(--apple-divider) !important;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--apple-divider);
    font-size: 0.9rem;
}

.table > tbody > tr:hover {
    background: var(--apple-hover-bg) !important;
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Override Bootstrap striped */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background: transparent;
}

/* Override Bootstrap table-dark on thead */
.table-dark {
    --bs-table-bg: var(--apple-surface);
    --bs-table-color: var(--apple-text-secondary);
    --bs-table-border-color: var(--apple-divider);
}

.table-responsive {
    max-height: 600px;
    overflow-y: auto;
    border-radius: var(--apple-radius-lg);
    background: var(--apple-surface);
    box-shadow: var(--apple-shadow-md);
}

/* Sortable columns */
.sortable-th {
    cursor: pointer;
    user-select: none;
}

.sortable-th:hover {
    color: var(--apple-blue) !important;
}

.sortable-th i {
    color: var(--apple-border) !important;
    margin-left: 4px;
    font-size: 0.65rem;
}

.sortable-th i.fa-sort-up,
.sortable-th i.fa-sort-down {
    color: var(--apple-blue) !important;
}

/* --- Badges --- */
.badge {
    border-radius: 20px;
    font-weight: 500;
    padding: 4px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

.badge.bg-secondary {
    background: #e8e8ed !important;
    color: var(--apple-text-secondary);
}

.badge.bg-primary {
    background: rgba(0, 113, 227, 0.12) !important;
    color: var(--apple-blue);
}

.badge.bg-success {
    background: rgba(52, 199, 89, 0.12) !important;
    color: var(--apple-green);
}

.badge.bg-info {
    background: rgba(90, 200, 250, 0.12) !important;
    color: #0a84ff;
}

.badge.bg-warning {
    background: rgba(255, 159, 10, 0.12) !important;
    color: #c77d08;
}

.badge.bg-danger {
    background: rgba(255, 59, 48, 0.12) !important;
    color: var(--apple-red);
}

/* --- Margin Circles --- */
.margin-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

.margin-circle.bg-danger { background: var(--apple-red) !important; }
.margin-circle.bg-warning { background: var(--apple-orange) !important; }
.margin-circle.bg-info { background: #5ac8fa !important; }
.margin-circle.bg-primary { background: var(--apple-blue) !important; }
.margin-circle.bg-success { background: var(--apple-green) !important; }
.margin-circle.bg-dark { background: var(--apple-text) !important; }

/* --- Wiersze koszyka kolorowane wg marży (V8 — działa też po „Sprawdź cenę") --- */
tr.margin-gold    > td { background-color: rgba(255, 204, 0, 0.12) !important; }
tr.margin-danger  > td { background-color: rgba(255, 59, 48, 0.10) !important; }
tr.margin-warning > td { background-color: rgba(255, 149, 0, 0.11) !important; }
tr.margin-info    > td { background-color: rgba(90, 200, 250, 0.13) !important; }
tr.margin-primary > td { background-color: rgba(0, 113, 227, 0.10) !important; }
tr.margin-success > td { background-color: rgba(52, 199, 89, 0.13) !important; }
tr.margin-dark    > td { background-color: rgba(29, 29, 31, 0.06) !important; }

/* Cart highlight for domains already in cart */
#domainsTable tr.in-cart {
    background-color: rgba(52, 199, 89, 0.08) !important;
    border-left: 3px solid var(--apple-green);
}
#domainsTable tr.in-cart:hover {
    background-color: rgba(52, 199, 89, 0.14) !important;
}

.internal-portal-icon {
    color: #1d1d1f;
    font-size: 1.25rem;
    cursor: help;
    margin-right: 3px;
}

.internal-portal-name {
    color: #15803d;
    font-weight: 800;
}

.ip-quality {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.02em;
}

.ip-quality-high { background: #dcfce7; color: #15803d; }
.ip-quality-semi { background: #fef3c7; color: #d97706; }
.ip-quality-low { background: #fee2e2; color: #dc2626; }

/* Statistics cards and charts */
.stats-card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}
.stats-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stats-card-icon {
    font-size: 1rem;
    margin-bottom: 2px;
}
.stats-card-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1d1d1f;
    word-break: break-word;
    line-height: 1.2;
}
.stats-card-label {
    font-size: 0.68rem;
    color: #86868b;
    margin-top: 1px;
    line-height: 1.2;
}
.stats-chart-container {
    position: relative;
    width: 100%;
    max-height: 200px;
}
.stats-chart-container canvas {
    max-height: 200px;
}
#stats .row { --bs-gutter-y: 0.4rem; --bs-gutter-x: 0.5rem; }
#stats .col-md-3, #stats .col-sm-6 { margin-bottom: 0 !important; }
#stats .mb-3 { margin-bottom: 0.4rem !important; }
#stats .mt-3 { margin-top: 0.6rem !important; }
#stats .mt-4 { margin-top: 0.8rem !important; }
#stats h6 { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.3rem; color: #555; }
#stats .table { font-size: 0.75rem; }
#stats .table th, #stats .table td { padding: 3px 6px; }
#statsPills { margin-bottom: 0.5rem !important; }
#statsPills .nav-link {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    color: #1d1d1f;
}
#statsPills .nav-link.active {
    background: #007bff;
    color: #fff;
}
#stats .card-header { padding: 8px 12px; }
#stats .card-body { padding: 10px 12px; }

.ip-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ip-card {
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.ip-card.active {
    border-color: #86efac;
    box-shadow: 0 2px 8px rgba(34,197,94,0.12);
}

.ip-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    background: #f9fafb;
    transition: background 0.15s;
    gap: 12px;
}

.ip-header:hover {
    background: #f0f0f3;
}

.ip-card.active .ip-header {
    background: #dcfce7;
}

.ip-card.active .ip-header:hover {
    background: #bbf7d0;
}

.ip-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ip-stat {
    text-align: center;
    min-width: 70px;
}

.ip-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #86868b;
    letter-spacing: 0.03em;
}

.ip-stat-value {
    font-weight: 700;
    font-size: 0.9rem;
}

.ip-price .ip-stat-value {
    color: #15803d;
}

.ip-badge {
    background: #e5e5ea;
    color: #636366;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.ip-chevron {
    font-size: 0.7rem;
    color: #86868b;
    transition: transform 0.2s ease;
}

.ip-card.active .ip-chevron {
    transform: rotate(90deg);
    color: #15803d;
}

.ip-offers {
    border-top: 1px solid #e5e5ea;
    background: #f0fdf4;
    padding: 8px 16px 8px 44px;
}

.ip-card.active .ip-offers {
    border-top-color: #bbf7d0;
}

.ip-offer-row {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #e5e5ea;
    gap: 12px;
}

.ip-offer-row:last-child {
    border-bottom: none;
}

.ip-offer-name {
    flex: 1;
    font-size: 0.85rem;
    color: #3c3c43;
}

.ip-offer-price {
    font-weight: 700;
    font-size: 0.88rem;
    min-width: 100px;
    text-align: right;
}

.ip-sort-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.ip-sort-btn {
    background: #f0f0f3;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #636366;
    cursor: pointer;
    transition: all 0.15s;
}

.ip-sort-btn:hover {
    background: #e5e5ea;
}

.ip-sort-btn.active {
    background: #dcfce7;
    border-color: #86efac;
    color: #15803d;
}

.ip-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
}

.ip-page-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    color: #636366;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ip-page-btn:hover {
    background: #f0f0f3;
}

.ip-page-btn.active {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.ip-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
}

.internal-portal-row td {
    vertical-align: middle;
}

/* --- Comment Warning Icon --- */
.comment-warning {
    cursor: help;
    font-size: 0.85rem;
}

/* --- Pakiet Icon --- */
.pakiet-icon {
    color: #6f42c1;
    cursor: help;
    font-size: 0.85rem;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.anchor-badge {
    font-size: 0.7rem;
    margin-right: 3px;
}

/* --- Margin Checkboxes --- */
.margin-checkboxes .form-check-inline {
    margin-right: 8px;
}

/* --- Modals --- */
.modal-content {
    border: none;
    border-radius: var(--apple-radius-lg);
    box-shadow: var(--apple-shadow-xl);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--apple-divider);
    padding: 16px 24px;
    background: var(--apple-surface);
}

.modal-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--apple-divider);
    padding: 16px 24px;
    background: var(--apple-surface);
}

.modal-lg {
    max-width: 90%;
}

.modal-backdrop.show {
    opacity: 0.3;
}

/* --- Cart Summary Widget (Frosted Glass) --- */
.cart-summary {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--apple-text);
    padding: 18px 22px;
    border-radius: var(--apple-radius-lg);
    border: 1px solid var(--apple-border);
    box-shadow: var(--apple-shadow-lg);
    z-index: 1000;
    min-width: 200px;
}

.cart-summary h6 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--apple-text);
}

.cart-summary div {
    font-size: 0.8rem;
    color: var(--apple-text-secondary);
}

.cart-summary .btn {
    font-size: 0.75rem;
}

/* --- Pagination --- */
.pagination {
    gap: 4px;
}

.page-item .page-link {
    border: none;
    border-radius: var(--apple-radius-sm);
    color: var(--apple-text);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 12px;
    background: transparent;
    transition: var(--apple-transition);
}

.page-item .page-link:hover {
    background: var(--apple-hover-bg);
    color: var(--apple-blue);
}

.page-item.active .page-link {
    background: var(--apple-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}

.page-item.disabled .page-link {
    color: var(--apple-border);
    background: transparent;
}

/* --- Alerts --- */
.alert {
    border: none;
    border-radius: var(--apple-radius-md);
    font-size: 0.875rem;
    padding: 14px 20px;
    box-shadow: var(--apple-shadow-sm);
}

.alert-success {
    background: rgba(52, 199, 89, 0.08);
    color: #1a7a34;
    border-left: 4px solid var(--apple-green);
}

.alert-warning {
    background: rgba(255, 159, 10, 0.08);
    color: #8a5a00;
    border-left: 4px solid var(--apple-orange);
}

.alert-danger {
    background: rgba(255, 59, 48, 0.08);
    color: #a0231a;
    border-left: 4px solid var(--apple-red);
}

.alert-info {
    background: rgba(0, 113, 227, 0.06);
    color: #004e8c;
    border-left: 4px solid var(--apple-blue);
}

/* --- Notifications (JS-generated) --- */
.apple-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 280px;
    max-width: 420px;
    border: none;
    border-radius: var(--apple-radius-md);
    box-shadow: var(--apple-shadow-lg);
    padding: 14px 20px;
    font-size: 0.875rem;
    animation: slideInRight 0.3s ease;
}

.apple-notification.notification-success {
    background: var(--apple-surface);
    color: #1a7a34;
    border-left: 4px solid var(--apple-green);
}

.apple-notification.notification-error {
    background: var(--apple-surface);
    color: #a0231a;
    border-left: 4px solid var(--apple-red);
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Warning message (JS-generated) --- */
.apple-warning {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    min-width: 400px;
    max-width: 600px;
    background: var(--apple-surface);
    color: #a0231a;
    border-left: 4px solid var(--apple-red);
    border-radius: var(--apple-radius-md);
    box-shadow: var(--apple-shadow-lg);
    padding: 16px 24px;
    font-size: 0.9rem;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* --- Login Page --- */
body.login-page {
    background: var(--apple-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--apple-surface);
    border-radius: var(--apple-radius-xl);
    box-shadow: var(--apple-shadow-md);
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 36px;
}

.login-header i {
    font-size: 2.5rem;
    color: var(--apple-blue);
    margin-bottom: 16px;
}

.login-header h4 {
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--apple-text);
}

.btn-login {
    background: var(--apple-blue);
    border: none;
    padding: 12px;
    font-weight: 600;
    border-radius: var(--apple-radius-sm);
    width: 100%;
    font-size: 1rem;
    color: #fff;
    transition: var(--apple-transition);
}

.btn-login:hover {
    background: var(--apple-blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 113, 227, 0.4);
    color: #fff;
}

.demo-credentials {
    background: var(--apple-bg);
    border-radius: var(--apple-radius-md);
    padding: 16px;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--apple-text-secondary);
}

/* --- Admin Stats Cards --- */
.stats-card {
    background: var(--apple-surface);
    color: var(--apple-text);
    border-radius: var(--apple-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--apple-shadow-md);
    transition: var(--apple-transition);
}

.stats-card:hover {
    box-shadow: var(--apple-shadow-lg);
    transform: translateY(-2px);
}

.stats-card .stats-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--apple-blue);
    letter-spacing: -0.02em;
}

.stats-card i {
    color: var(--apple-blue);
    opacity: 0.7;
}

.stats-card p, .stats-card small {
    color: var(--apple-text-secondary);
}

/* --- Admin Upload Area --- */
.upload-area {
    border: 2px dashed var(--apple-border);
    border-radius: var(--apple-radius-lg);
    padding: 40px;
    text-align: center;
    background: var(--apple-bg);
    transition: var(--apple-transition);
    color: var(--apple-text-secondary);
}

.upload-area:hover {
    border-color: var(--apple-blue);
    background: rgba(0, 113, 227, 0.04);
}

.upload-area.dragover {
    border-color: var(--apple-blue);
    background: rgba(0, 113, 227, 0.06);
}

/* --- Admin Tabs (Segmented Control) --- */
.nav-tabs {
    border-bottom: none;
    background: var(--apple-bg);
    border-radius: var(--apple-radius-sm);
    padding: 3px;
    display: inline-flex;
    gap: 2px;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 6px;
    color: var(--apple-text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 8px 18px;
    transition: var(--apple-transition);
}

.nav-tabs .nav-link:hover {
    color: var(--apple-text);
    background: rgba(0, 0, 0, 0.04);
}

.nav-tabs .nav-link.active {
    background: var(--apple-surface);
    color: var(--apple-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* --- Colored Headers: force white text on children --- */
.modal-header.bg-success {
    background: var(--apple-green) !important;
}

.modal-header.bg-success .modal-title,
.modal-header.bg-success .modal-title i,
.modal-header.bg-success .btn-close {
    color: #fff !important;
}

.modal-header.bg-primary {
    background: var(--apple-blue) !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-primary .modal-title i,
.modal-header.bg-primary .btn-close {
    color: #fff !important;
}

#presetDropdownMenu {
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border: 1px solid var(--apple-divider);
    min-width: 240px;
    padding: 4px 0;
}

#presetDropdownMenu .dropdown-item {
    border-radius: 6px;
    margin: 2px 6px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 0.9rem;
    transition: background 0.15s;
}

#presetDropdownMenu .dropdown-item:hover,
#presetDropdownMenu .dropdown-item:focus {
    background: #2d8a4e !important;
    color: #fff !important;
}

#presetDropdownMenu .dropdown-item:hover i,
#presetDropdownMenu .dropdown-item:focus i {
    color: #fff !important;
}

#presetDropdownMenu .dropdown-item.active {
    background: var(--apple-blue) !important;
}

#presetDropdownMenu .dropdown-divider {
    margin: 4px 12px;
}

.card-header.bg-primary {
    background: var(--apple-blue) !important;
}

.card-header.bg-primary,
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-primary i {
    color: #fff !important;
}

/* --- Filter Sections --- */
.filter-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--apple-divider);
}

.filter-section.mb-0 {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--apple-text-secondary);
    margin-bottom: 12px;
}

/* --- Colored header button overrides --- */
.card-header.bg-primary .btn-outline-light {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.card-header.bg-primary .btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
}

/* --- Responsiveness --- */
@media (max-width: 1400px) {
    .table-responsive {
        margin-right: 0 !important;
    }

    .cart-summary {
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
    }
}

@media (max-width: 768px) {
    .cart-summary {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 20px auto !important;
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    .filters-panel {
        padding: 16px;
    }

    .login-card {
        margin: 16px;
        padding: 32px 24px;
    }

    .apple-warning {
        min-width: auto;
        width: 90%;
    }
}

/* --- Utility --- */
.text-apple-blue { color: var(--apple-blue) !important; }
.text-apple-secondary { color: var(--apple-text-secondary) !important; }
.bg-apple-surface { background: var(--apple-surface) !important; }

/* Container max-width tweak for better readability */
.container-fluid {
    padding-left: 24px;
    padding-right: 24px;
}

/* Leave room after the catalog and pagination, including the fixed cart. */
.catalog-page {
    padding-bottom: calc(clamp(160px, 18vh, 200px) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
    .catalog-page {
        padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }
}

/* Smooth scrollbar */
.table-responsive::-webkit-scrollbar {
    width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--apple-border);
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--apple-text-secondary);
}

/* Category dropdown */
.category-list {
    max-height: 200px;
    overflow-y: auto;
}

.category-list::-webkit-scrollbar {
    width: 4px;
}

.category-list::-webkit-scrollbar-thumb {
    background: var(--apple-border);
    border-radius: 2px;
}

/* ==============================================
   Top Pages (Ahrefs) — icon + tooltip + modal
   ============================================== */
.top-pages-icon {
    display: inline-block;
    color: #0d6efd;
    background: #e7f1ff;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 0.78rem;
    margin-left: 4px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
    vertical-align: middle;
}
.top-pages-icon:hover {
    background: #0d6efd;
    color: #fff;
    transform: translateY(-1px) scale(1.08);
}

.top-pages-tooltip {
    position: absolute;
    z-index: 9999;
    background: #1d1d1f;
    color: #f5f5f7;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    min-width: 240px;
    max-width: 320px;
    pointer-events: none;
}
.top-pages-tooltip .tp-tt-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: #6db4ff;
}
.top-pages-tooltip .tp-tt-row {
    display: flex;
    justify-content: space-between;
    margin: 2px 0;
}
.top-pages-tooltip .tp-tt-row span {
    color: #aeb1b6;
}
.top-pages-tooltip .tp-tt-hint {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a3a3c;
    font-size: 0.72rem;
    color: #aeb1b6;
}

.top-pages-table tbody tr:hover {
    background: #f5f8ff;
}
.top-pages-table td {
    vertical-align: middle;
}

/* Drop-zone in admin */
#topPagesDropZone:hover {
    background: #eef4ff !important;
    border-color: #0d6efd !important;
}

/* Top Pages tooltip — top 5 keywordów */
.top-pages-tooltip {
    min-width: 280px;
    max-width: 380px;
}
.tp-tt-kw-list {
    margin: 6px 0 6px 0;
    padding: 4px 0;
    border-top: 1px solid #3a3a3c;
    border-bottom: 1px solid #3a3a3c;
}
.tp-tt-kw-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    padding: 3px 0;
    align-items: baseline;
    font-size: 0.82rem;
}
.tp-tt-kw-rank {
    color: #6db4ff;
    font-weight: 600;
    text-align: right;
}
.tp-tt-kw-name {
    color: #f5f5f7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-tt-kw-traf {
    color: #aeb1b6;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.tp-tt-date {
    font-size: 0.74rem;
    margin: 4px 0 0 0;
}
.tp-tt-loading {
    padding: 8px 0;
    color: #aeb1b6;
    font-size: 0.82rem;
    text-align: center;
}
.tp-tt-empty {
    padding: 4px 0;
    color: #aeb1b6;
    font-size: 0.78rem;
    font-style: italic;
}

/* Strategy Builder tab */
#strategyModePills .nav-link {
    border-radius: 12px;
    padding: 6px 14px;
    border: 1px solid transparent;
}
#strategyModePills .nav-link.active {
    background: #0d6efd;
    color: #fff;
}
#strategyResults .table tbody tr:hover {
    background: #f5f8ff;
}
#strategyProgress .progress-bar {
    transition: width .4s ease;
}

/* Strategy Builder — expandable rows + anchor details */
.strategy-results .strategy-main-row { cursor: pointer; }
.strategy-results .strategy-main-row:hover { background: #f5f8ff; }
.strategy-results .strat-toggle { transition: transform .15s; }

.strategy-details {
    background: #f8f9fa;
    padding: 16px 20px !important;
    border-left: 3px solid #0d6efd;
}
.strategy-details-inner h6 {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.tp-bars { display: flex; flex-direction: column; gap: 4px; }
.tp-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 60px;
    gap: 10px;
    align-items: center;
    font-size: 0.82rem;
}
.tp-bar-label { color: #495057; }
.tp-bar-outer {
    height: 14px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}
.tp-bar-inner {
    height: 100%;
    transition: width .3s ease;
}
.tp-bar-pct { text-align: right; font-variant-numeric: tabular-nums; }

.anchor-suggestions {
    padding-left: 1.2rem;
    font-size: 0.88rem;
}
.anchor-suggestions li { margin-bottom: 10px; }
.anchor-suggestions li.primary-suggestion {
    background: #e7f1ff;
    padding: 8px 10px;
    border-radius: 6px;
    list-style-position: inside;
    padding-left: 12px;
}
.anchor-list td { padding: 4px 8px; }

/* Strategy Builder Etap 4 — stats tiles + portal pool + assigned portals */
.stat-tile {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 62px;
}
.stat-tile .stat-val {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}
.stat-tile .stat-lbl {
    font-size: 0.72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
}

.portal-pool tbody tr:hover { background: #f5f8ff; }

.assigned-portals { display: flex; flex-direction: column; gap: 8px; }
.assigned-portal-row {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 12px;
}
.assigned-portal-row:hover { background: #f5f8ff; }

/* Expandable portal rows + slots */
.portal-pool .portal-main-row { cursor: pointer; }
.portal-pool .portal-toggle { transition: transform .15s; color:#6c757d; }

.portal-slots-cell {
    background: #f8f9fa !important;
    padding: 14px 18px !important;
    border-left: 3px solid #198754;
}
.portal-slots-inner h6 { font-size: .72rem; letter-spacing: .04em; }
.slot-list td { padding: 6px 8px; vertical-align: middle; }
.slot-list tbody tr { background: #fff; border-radius: 4px; }

/* Automatic cart: keep the existing modal and its controls, with a clearer budget hierarchy. */
#automaticCartModal {
    --automatic-border: #e5e9ef;
    --automatic-muted: #667085;
    --automatic-soft: #f5f7fa;
    color: var(--apple-text);
}
#automaticCartModal .modal-dialog {
    max-width: min(1440px, calc(100vw - 64px)) !important;
    margin: 28px auto;
}
#automaticCartModal .modal-content {
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(16, 24, 40, .22);
    overflow: hidden;
}
#automaticCartModal .modal-header {
    background: #fff !important;
    color: var(--apple-text) !important;
    padding: 22px 28px;
    border-bottom: 1px solid var(--automatic-border);
    align-items: center;
    gap: 20px;
}
#automaticCartModal .automatic-eyebrow {
    margin-bottom: 5px;
    color: #2871b8;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#automaticCartModal .modal-title {
    color: var(--apple-text) !important;
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -.035em;
}
#automaticCartModal .modal-title i {
    color: var(--apple-blue) !important;
    font-size: 1.08rem;
    margin-right: 6px;
}
#automaticCartModal .automatic-modal-heading p {
    margin: 7px 0 0;
    color: var(--automatic-muted);
    font-size: .84rem;
    line-height: 1.5;
}
#automaticCartModal .btn-close {
    filter: none !important;
    opacity: .55;
    padding: 10px;
    border-radius: 50%;
}
#automaticCartModal .btn-close:hover { opacity: .9; background-color: #eef1f5; }
#automaticCartModal .modal-body {
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    padding: 24px 28px 28px;
    background: var(--automatic-soft);
}
#automaticCartModal .card {
    border: 1px solid var(--automatic-border);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .025);
}
#automaticCartModal .card-header {
    padding: 17px 20px;
    border-bottom-color: var(--automatic-border);
    gap: 16px;
    flex-wrap: wrap;
}
#automaticCartModal .card-header h6 { font-size: .91rem; letter-spacing: -.015em; }
#automaticCartModal .card-header h6 > i { color: #667f9c; margin-right: 5px; }
#automaticCartModal .card-body { padding: 22px; }
#automaticCartModal .form-label {
    margin-bottom: 8px;
    font-size: .79rem;
    font-weight: 600 !important;
    color: #344054;
}
#automaticCartModal .form-control,
#automaticCartModal .form-select {
    min-height: 44px;
    border: 1px solid #d9dfe8;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
    font-size: .87rem;
}
#automaticCartModal .form-control:focus,
#automaticCartModal .form-select:focus {
    border-color: #72a9e1;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .11);
}
#automaticCartModal .form-control::placeholder { color: #98a2b3; }
#automaticCartModal .form-select:disabled,
#automaticCartModal .form-check-input:disabled { background-color: #f2f4f7; opacity: .6; }
#automaticCartModal .automatic-budget-help { padding-bottom: 3px; }
#automaticCartModal small,
#automaticCartModal .text-muted { color: var(--automatic-muted) !important; }
#automaticCartModal small.text-success { color: #246a48 !important; }
#automaticCartModal small.text-info { color: #285f94 !important; }
#automaticCartModal .automatic-budget-help small { font-size: .77rem; line-height: 1.6; }
#automaticCartModal .automatic-options { row-gap: 16px !important; }
#automaticCartModal .automatic-options > .form-text {
    flex-basis: 100%;
    padding: 12px 14px;
    margin-top: 0;
    border: 1px solid #e9edf3;
    border-radius: 10px;
    background: #f8fafc;
    font-size: .73rem;
    line-height: 1.7;
}
#automaticCartModal .form-check { margin-bottom: 0; }
#automaticCartModal .form-check-label { font-size: .82rem; line-height: 1.5; cursor: pointer; }
#automaticCartModal .form-check-label small { color: #344054 !important; font-size: .79rem; }
#automaticCartModal .form-check-input,
#automaticCartModal .offer-checkbox,
#automaticCartModal #selectAllOffers { width: 17px; height: 17px; accent-color: var(--apple-blue); cursor: pointer; }
#automaticCartModal .form-check-input:checked { background-color: var(--apple-blue); border-color: var(--apple-blue); }
#automaticCartModal .btn { min-height: 40px; padding: 10px 16px; border-radius: 10px; font-size: .81rem; font-weight: 600; }
#automaticCartModal .btn i { margin-right: 4px; }
#automaticCartModal .btn-success { background: var(--apple-blue); }
#automaticCartModal .btn-success:hover { background: #0068d1; box-shadow: 0 3px 9px rgba(0, 113, 227, .18); }
#automaticCartModal .btn-outline-secondary { background: #fff; color: #475467; border: 1px solid #d9dfe8; }
#automaticCartModal .btn-outline-secondary:hover { background: #f2f5f9; border-color: #bfc9d8; }
#automaticCartModal .btn:focus-visible,
#automaticCartModal input[type="checkbox"]:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 3px; }
#automaticCartModal #selectedOffersCount,
#automaticCartModal #selectedOffersTotal { padding: 8px 11px; border-radius: 8px; font-size: .76rem; font-weight: 600; }
#automaticCartModal #selectedOffersCount { color: #245e9c; background: #eaf3ff !important; }
#automaticCartModal #selectedOffersTotal { color: #246a48; background: #eaf6ee !important; font-variant-numeric: tabular-nums; }
#automaticCartModal .automatic-summary-title { margin-bottom: 12px; font-size: .78rem; color: #475467; font-weight: 600; }
#automaticCartModal .automatic-budget-range { margin: -3px 0 14px; color: #475467; font-size: .81rem; }
#automaticCartModal .automatic-budget-range:empty,
#automaticCartModal .automatic-count-label:empty { display: none; }
#automaticCartModal .automatic-cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#automaticCartModal .automatic-cost-tile { padding: 17px 18px; background: #f7f9fc; border: 1px solid var(--automatic-border); border-radius: 12px; }
#automaticCartModal .automatic-cost-regular { background: #f1f7ff; border-color: #d5e6fa; }
#automaticCartModal .automatic-cost-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #475467; font-size: .76rem; font-weight: 500; }
#automaticCartModal .automatic-count-label { padding: 3px 7px; border-radius: 5px; background: rgba(255, 255, 255, .85); color: #475467; font-size: .68rem; font-weight: 600; white-space: nowrap; }
#automaticCartModal .automatic-cost-tile > strong { display: block; margin: 10px 0 5px; color: #25334a; font-size: 1.34rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
#automaticCartModal .automatic-cost-regular > strong { color: #1564b0; }
#automaticCartModal .automatic-cost-tile > small { display: block; font-size: .7rem; line-height: 1.45; }
#automaticCartModal #automaticBonusNote { margin-top: 10px !important; font-size: .74rem; line-height: 1.5; }
#automaticCartModal #automaticSelectedCosts { padding: 11px 13px; border-radius: 9px; background: #f5f7fa; color: #344054; line-height: 1.6; font-size: .8rem; }
#automaticCartModal #automaticSelectedCosts.text-danger { color: #b42318 !important; background: #fff1f0; }
#automaticCartModal #automaticOffersCosts > .small:last-child { margin-top: 8px !important; font-size: .72rem; line-height: 1.5; }
#automaticCartModal .table-responsive { max-height: min(58vh, 650px) !important; border: 1px solid var(--automatic-border); border-radius: 12px; }
#automaticCartModal .table { margin-bottom: 0; font-size: .82rem; }
#automaticCartModal .table thead { z-index: 2; }
#automaticCartModal .table thead th { padding: 12px 13px; background: #f6f8fb !important; color: #667085 !important; border-bottom: 1px solid var(--automatic-border) !important; font-size: .65rem; font-weight: 650; text-transform: uppercase; letter-spacing: .055em; vertical-align: middle; }
#automaticCartModal .table tbody td { padding: 14px 13px; vertical-align: middle; border-bottom: 1px solid #edf0f4; font-size: .8rem; }
#automaticCartModal .table tbody tr:hover > td { background: #f6faff; }
#automaticCartModal .table tbody td:nth-child(2) { min-width: 205px; max-width: 300px; overflow-wrap: anywhere; }
#automaticCartModal .table tbody td:nth-child(2) > strong { color: #25334a; font-size: .85rem; font-weight: 600; }
#automaticCartModal .table tbody td:nth-child(3) { min-width: 165px; }
#automaticCartModal .table tbody td:nth-child(3) small { font-size: .72rem; line-height: 1.6; }
#automaticCartModal .table tbody td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }
#automaticCartModal .table .badge { padding: 4px 7px; border-radius: 5px; font-size: .65rem; font-weight: 550; }
/* Transitional guard for an already cached renderer; it targets only the removed explanation cell. */
#automaticCartModal #automaticOffersTable > tr > td:has(> details) { display: none; }
#automaticCartModal #automaticOffersResults .card-body > .mt-3 { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 5px; }
#automaticCartModal #automaticOffersResults .card-body > .mt-3 > .btn { margin-right: 0 !important; }
#automaticCartModal .alert { border-radius: 12px; padding: 15px 44px 15px 18px; font-size: .82rem; line-height: 1.6; }
#automaticCartModal .alert-warning { color: #805017; border: 1px solid #f0d9a8; background: #fff8e9; }
#automaticCartModal .alert-danger { color: #a5332b; border: 1px solid #f2d1cd; background: #fff4f2; }
#automaticCartModal .alert-info { color: #285f94; border: 1px solid #d0e2f5; background: #f0f7ff; }
@media (max-width: 991px) {
    #automaticCartModal .modal-dialog { max-width: calc(100vw - 28px) !important; margin: 14px auto; }
    #automaticCartModal .modal-header { padding: 20px; }
    #automaticCartModal .modal-body { max-height: calc(100dvh - 150px); padding: 18px; }
    #automaticCartModal .card-body { padding: 18px; }
    #automaticCartModal .automatic-cost-tile { padding: 14px; }
    #automaticCartModal .automatic-cost-tile > strong { font-size: 1.1rem; }
}
@media (max-width: 575px) {
    #automaticCartModal .modal-dialog { max-width: calc(100vw - 16px) !important; margin: 8px auto; }
    #automaticCartModal .modal-header { padding: 17px; }
    #automaticCartModal .modal-title { font-size: 1.2rem; }
    #automaticCartModal .automatic-modal-heading p { font-size: .76rem; }
    #automaticCartModal .modal-body { padding: 12px; }
    #automaticCartModal .card-body { padding: 15px; }
    #automaticCartModal .automatic-cost-grid { grid-template-columns: 1fr; gap: 8px; }
    #automaticCartModal .automatic-cost-tile { padding: 13px 15px; }
    #automaticCartModal .automatic-cost-tile > strong { margin: 7px 0 3px; font-size: 1.24rem; }
    #automaticCartModal .automatic-budget-help { margin-top: 0; }
    #automaticCartModal #automaticOffersResults .card-body > .mt-3 > .btn { width: 100%; }
}