/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
}

:root {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --border-color: #333333;
    --hover-color: #1a1a1a;
    --accent-red: #ff4444;
    --table-stripe: #111111;
    --link-color: #66ccff;
    --verified-color: #00cc66;
    --unverified-color: #ffaa00;
    --trash-color: #ff4444;
    --sidebar-bg: #0f0f0f;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    overflow-x: hidden;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
        "header"
        "notice"
        "main"
        "footer";
    min-height: 100vh;
    gap: 0;
}

/* Header Styles */
.header {
    grid-area: header;
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--border-color);
    padding: 20px;
}

.logo-section {
    text-align: center;
    margin-bottom: 20px;
}

.logo-section h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.red-dot {
    color: var(--accent-red);
}

.tagline {
    font-size: 1rem;
    color: #cccccc;
    font-style: italic;
}

.nav {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.nav-btn {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-btn:hover {
    background-color: var(--hover-color);
    border-color: var(--accent-red);
}

.nav-btn.active {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
    color: #ffffff;
}

/* Notice Section */
.notice-section {
    grid-area: notice;
    background-color: var(--hover-color);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
    text-align: center;
}

.warning-text {
    color: #ffaa00;
    font-size: 0.9rem;
}

/* Main Content */
.main-content {
    grid-area: main;
    padding: 20px;
    overflow-x: hidden;
    max-width: 1400px;
    margin: 0 auto;
}

/* Search Container */
.search-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.search-input {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    background-color: var(--hover-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input:focus {
    border-color: var(--accent-red);
}

.search-input::placeholder {
    color: #888888;
}

.category-section {
    margin-bottom: 30px;
}

.table-container {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    max-width: 100%;
}

.data-table {
    width: 100%;
    background-color: var(--bg-color);
    border-collapse: collapse;
    font-size: 0.85rem;
    table-layout: fixed;
}

.data-table th {
    background-color: var(--hover-color);
    color: var(--text-color);
    padding: 12px 8px;
    text-align: left;
    border: 1px solid var(--border-color);
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Column Width Adjustments for Better Fit */
.data-table th:nth-child(1) { width: 35%; } /* Provider/Service info */
.data-table th:nth-child(2) { width: 15%; } /* Country/Platform */
.data-table th:nth-child(3) { width: 15%; } /* Feature */
.data-table th:nth-child(4) { width: 15%; } /* Payment/Info */
.data-table th:nth-child(5) { width: 20%; } /* Status */

.data-table td {
    padding: 10px 8px;
    border: 1px solid var(--border-color);
    vertical-align: top;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Provider Info Styling */
.provider-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.provider-info strong {
    color: var(--text-color);
    font-size: 0.9rem;
}

.provider-url {
    color: #88ddff;
    font-size: 0.75rem;
    font-family: monospace;
}

.service-link {
    color: #88ddff;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.service-link:hover {
    color: #aaeeff;
    text-decoration: underline;
}

.provider-desc {
    color: #cccccc;
    font-size: 0.7rem;
    line-height: 1.3;
}

/* Country Info Styling */
.country-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-flag {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.country-name {
    font-size: 0.85rem;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--table-stripe);
}

.data-table tbody tr:hover {
    background-color: var(--hover-color);
}

/* Link Styles */
.website-link {
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
}

.website-link:hover {
    text-decoration: underline;
    color: #66bbff;
}

.red-link {
    color: var(--accent-red);
    text-decoration: none;
    font-weight: bold;
}

.red-link:hover {
    text-decoration: underline;
}

/* Status and Badge Styles */
.status {
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
    display: inline-block;
}

.status.verified {
    background-color: var(--verified-color);
    color: #000000;
    border-color: var(--verified-color);
}

.status.unverified {
    background-color: var(--unverified-color);
    color: #000000;
    border-color: var(--unverified-color);
}

.status.trash {
    background-color: var(--trash-color);
    color: #ffffff;
    border-color: var(--trash-color);
}

/* Policy and Feature Status */
.policy-status, .dmca-status, .owns-servers, .feature-yes, .feature-no, 
.feature-partial, .kyc-no, .kyc-optional, .privacy-high, .privacy-medium, 
.phone-required, .phone-not-required,
.tier-available {
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid;
    display: inline-block;
}

.policy-status.none, .feature-yes, .kyc-no, .privacy-high, 
.phone-not-required {
    background-color: #004d26;
    color: #00ff66;
    border-color: #00cc66;
}

.policy-status.requires, .feature-partial, .kyc-optional, 
.privacy-medium, .tier-available {
    background-color: #4d3300;
    color: #ffaa00;
    border-color: #ff8800;
}

.policy-status.unknown, .policy-status.logs, .feature-no, 
.phone-required {
    background-color: #4d0000;
    color: #ff6666;
    border-color: #ff4444;
}

.dmca-status.ignored {
    background-color: #004d26;
    color: #00ff66;
    border-color: #00cc66;
}

.dmca-status.complies {
    background-color: #4d0000;
    color: #ff6666;
    border-color: #ff4444;
}

.owns-servers.yes {
    background-color: #004d26;
    color: #00ff66;
    border-color: #00cc66;
}

.owns-servers.no {
    background-color: #4d0000;
    color: #ff6666;
    border-color: #ff4444;
}

/* Country Flags */
.country-flag {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.country-name {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Footer */
.footer {
    grid-area: footer;
    background-color: var(--hover-color);
    border-top: 1px solid var(--border-color);
    padding: 20px;
    text-align: center;
}

.footer p {
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #cccccc;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--link-color);
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .data-table {
        font-size: 0.8rem;
    }
}

@media (max-width: 900px) {
    .nav {
        gap: 0;
    }
    
    .nav-btn {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    
    .data-table {
        font-size: 0.75rem;
        table-layout: auto;
    }
    
    .data-table th,
    .data-table td {
        padding: 8px 6px;
    }
    
    /* Stack provider info more compactly on mobile */
    .provider-info strong {
        font-size: 0.85rem;
    }
    
    .provider-url {
        font-size: 0.7rem;
    }
    
    .provider-desc {
        font-size: 0.65rem;
    }
}

@media (max-width: 600px) {
    .header {
        padding: 15px;
    }
    
    .logo-section h1 {
        font-size: 2rem;
    }
    
    .nav-btn {
        padding: 8px 12px;
        font-size: 0.7rem;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .search-input {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
    
    .data-table {
        font-size: 0.7rem;
        table-layout: auto;
    }
    
    .data-table th,
    .data-table td {
        padding: 6px 4px;
    }
    
    .status {
        font-size: 0.65rem;
        padding: 3px 6px;
    }
    
    /* Very compact provider info on small screens */
    .provider-info {
        gap: 2px;
    }
    
    .provider-info strong {
        font-size: 0.8rem;
    }
    
    .provider-url {
        font-size: 0.65rem;
    }
    
    .provider-desc {
        font-size: 0.6rem;
        line-height: 1.2;
    }
    
    /* Compact country info on mobile */
    .country-info {
        gap: 4px;
    }
    
    .country-flag {
        font-size: 1rem;
    }
    
    .country-name {
        font-size: 0.75rem;
    }
    
    /* Adjust column widths for mobile */
    .data-table th:nth-child(1) { width: 40%; }
    .data-table th:nth-child(2) { width: 20%; }
    .data-table th:nth-child(3) { width: 15%; }
    .data-table th:nth-child(4) { width: 15%; }
    .data-table th:nth-child(5) { width: 10%; }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border: none;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Print Styles */
@media print {
    .footer {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}