/**
 * Web Theme: Year 2000 (GeoCities Era)
 *
 * Authentic late 90s/early 2000s web design:
 * - Table-based layouts
 * - Beveled 3D borders
 * - Navy blue headers with bright text
 * - Times New Roman / Arial fonts
 * - Silver/grey backgrounds
 * - Simple gradients or solid colors
 * - "Under Construction" vibes
 */

/* ================================================
   Base Page Styling
   ================================================ */
[data-web-theme="2000"] .browser-page {
    background: #c0c0c0;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
}

[data-web-theme="2000"] .browser-page-content {
    background: #ffffff;
    border: 2px inset #808080;
}

/* ================================================
   Header / Banner - Classic Navy Blue
   ================================================ */
[data-web-theme="2000"] .browser-header {
    background: navy;
    color: #ffff00;
    border-bottom: 3px solid #000080;
    text-shadow: 1px 1px 2px #000;
}

[data-web-theme="2000"] .browser-header-title {
    font-family: "Comic Sans MS", "Arial", sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
}

[data-web-theme="2000"] .browser-header-subtitle {
    color: #ccccff;
    font-style: italic;
}

/* ================================================
   Cards / Boxes - Beveled 3D Style
   ================================================ */
[data-web-theme="2000"] .browser-card {
    background: #f0f0f0;
    border: 2px outset #ffffff;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

[data-web-theme="2000"] .browser-card-title {
    color: #000080;
    border-bottom: 1px solid #808080;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

[data-web-theme="2000"] .browser-card-label {
    color: #404040;
}

[data-web-theme="2000"] .browser-card-value {
    color: #000080;
}

/* ================================================
   Stat Boxes
   ================================================ */
[data-web-theme="2000"] .browser-stat-box {
    background: #e0e0e0;
    border: 1px solid #808080;
}

[data-web-theme="2000"] .browser-stat-label {
    color: #404040;
    text-transform: uppercase;
    font-size: 9px;
}

[data-web-theme="2000"] .browser-stat-value {
    color: #000080;
    font-family: Arial, sans-serif;
}

/* ================================================
   Progress Bars - Classic Win98 Style
   ================================================ */
[data-web-theme="2000"] .browser-progress-bar {
    background: #ffffff;
    border: 2px inset #808080;
}

[data-web-theme="2000"] .browser-progress-fill {
    background: #000080;
}

[data-web-theme="2000"] .browser-progress-fill.status-ok {
    background: #008000;
}

[data-web-theme="2000"] .browser-progress-fill.status-warning {
    background: #ff8800;
}

[data-web-theme="2000"] .browser-progress-fill.status-error {
    background: #cc0000;
}

/* ================================================
   List Items - Table Row Style
   ================================================ */
[data-web-theme="2000"] .browser-list-item {
    background: #f8f8f8;
    border: 1px solid #c0c0c0;
    border-left: 4px solid #000080;
}

[data-web-theme="2000"] .browser-list-item:hover {
    background: #e8e8ff;
}

[data-web-theme="2000"] .browser-list-item-title {
    color: #000080;
    font-family: Arial, sans-serif;
}

[data-web-theme="2000"] .browser-list-item-subtitle {
    color: #666666;
}

[data-web-theme="2000"] .browser-list-item-price {
    color: #006600;
}

[data-web-theme="2000"] .browser-list-item.is-current {
    background: #d0ffd0;
    border-left-color: #008000;
}

/* ================================================
   Browser Toolbar - IE5/Netscape Style
   ================================================ */
[data-web-theme="2000"] .browser-toolbar {
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
}

[data-web-theme="2000"] .browser-toolbar button {
    background: #c0c0c0;
    border: 2px outset #ffffff;
    font-size: 12px;
    padding: 2px 6px;
    cursor: pointer;
}

[data-web-theme="2000"] .browser-toolbar button:active {
    border-style: inset;
}

[data-web-theme="2000"] .url-bar {
    background: #ffffff;
    border: 2px inset #808080;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 2px 4px;
}

/* ================================================
   Buttons - Windows 98/2000 Style
   ================================================ */
[data-web-theme="2000"] .browser-button {
    background: #c0c0c0;
    border: 2px outset #ffffff;
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}

[data-web-theme="2000"] .browser-button:hover:not(:disabled) {
    background: #d0d0d0;
}

[data-web-theme="2000"] .browser-button:active:not(:disabled) {
    border-style: inset;
    background: #b0b0b0;
}

[data-web-theme="2000"] .browser-button:disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #ffffff;
}

[data-web-theme="2000"] .browser-button-primary {
    background: #000080;
    color: #ffffff;
    border-color: #0000aa #000040 #000040 #0000aa;
}

[data-web-theme="2000"] .browser-button-primary:hover:not(:disabled) {
    background: #0000a0;
}

/* ================================================
   Sidebar - Classic Frame Style
   ================================================ */
[data-web-theme="2000"] .browser-sidebar {
    background: #e0e0e0;
    border-right: 2px groove #c0c0c0;
}

[data-web-theme="2000"] .browser-sidebar-title {
    color: #000080;
    border-bottom: 1px solid #808080;
    padding-bottom: 4px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 11px;
}

[data-web-theme="2000"] .browser-sidebar-link {
    color: #0000cc;
    text-decoration: underline;
    font-size: 12px;
}

[data-web-theme="2000"] .browser-sidebar-link:hover {
    color: #cc0000;
}

[data-web-theme="2000"] .browser-sidebar-link.active {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

[data-web-theme="2000"] .browser-main {
    background: #ffffff;
}

/* ================================================
   Footer - Hit Counter Style
   ================================================ */
[data-web-theme="2000"] .browser-footer {
    background: #c0c0c0;
    border-top: 2px groove #e0e0e0;
    color: #404040;
    font-family: "Courier New", monospace;
}

/* ================================================
   Badges / Tags
   ================================================ */
[data-web-theme="2000"] .browser-badge {
    background: #ff8800;
    color: #ffffff;
    font-weight: bold;
    border: 1px solid #cc6600;
}

[data-web-theme="2000"] .browser-badge-new {
    background: #ff0000;
    animation: blink-2000 1s step-end infinite;
}

@keyframes blink-2000 {
    50% { opacity: 0; }
}

/* ================================================
   Status Colors
   ================================================ */
[data-web-theme="2000"] .browser-status-ok {
    color: #008000;
}

[data-web-theme="2000"] .browser-status-warning {
    color: #ff8800;
}

[data-web-theme="2000"] .browser-status-error {
    color: #cc0000;
}

/* ================================================
   Special: Price Display
   ================================================ */
[data-web-theme="2000"] .browser-price {
    color: #006600;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

[data-web-theme="2000"] .browser-price-large {
    font-size: 18px;
}

/* ================================================
   Special: "NEW!" and "HOT!" markers
   ================================================ */
[data-web-theme="2000"] .browser-marker-new::after {
    content: " NEW!";
    color: #ff0000;
    font-size: 10px;
    font-weight: bold;
    animation: blink-2000 1s step-end infinite;
}

[data-web-theme="2000"] .browser-marker-hot::after {
    content: " HOT!";
    color: #ff6600;
    font-size: 10px;
    font-weight: bold;
}

/* ================================================
   Table Styling (for data displays)
   ================================================ */
[data-web-theme="2000"] .browser-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

[data-web-theme="2000"] .browser-table th {
    background: #000080;
    color: #ffffff;
    padding: 4px 8px;
    text-align: left;
    font-weight: bold;
}

[data-web-theme="2000"] .browser-table td {
    background: #ffffff;
    border: 1px solid #c0c0c0;
    padding: 4px 8px;
}

[data-web-theme="2000"] .browser-table tr:nth-child(even) td {
    background: #f0f0f0;
}

/* ================================================
   Horizontal Rules
   ================================================ */
[data-web-theme="2000"] .browser-hr {
    height: 2px;
    background: linear-gradient(to right, #808080, #c0c0c0, #ffffff, #c0c0c0, #808080);
    border: none;
    margin: 12px 0;
}

/* ================================================
   Links
   ================================================ */
[data-web-theme="2000"] .browser-link {
    color: #0000cc;
    text-decoration: underline;
}

[data-web-theme="2000"] .browser-link:hover {
    color: #cc0000;
}

[data-web-theme="2000"] .browser-link:visited {
    color: #800080;
}