/* =====================================================================
   omnidat.css
   -----------------------------------------------------------------------
   Page-specific styles for omnidat.php (OMNI_DAT browser).

   Self-contained: this file used to rely on datfiles.css being linked
   alongside it (for :root theme variables, the .platform-table base
   skin, .toolbar layout, th.sortable arrows, and several other rules
   omnidat.php's markup uses but never had its own definitions for).
   That coupling broke once in practice (a datfiles.php-only refactor
   silently dropped .toolbar's layout here) so everything omnidat.php
   needs now lives in this file instead. header.php's omnidat.php case
   no longer links datfiles.css.

   NOT included here (defined elsewhere — don't redefine):
     - .filter-reset-btn button skin: global in header.css
     - :root theme variables (--nav-button-*, etc.): global in header.css
     - .table-wrapper/.clean-table skeleton: this page uses its own
       .platform-table styling below, NOT the shared
       shared-table-toolbar.css component
   ===================================================================== */

body {
    font-family: Arial, sans-serif;
}

/* =================================
    CSS VARIABLES (Light & Dark Mode)
    Only the variables this page's rules actually reference — see each
    rule below for which. Keep these in sync with datfiles.css's :root
    if that file's palette ever changes, since the two are meant to
    look identical even though they're independent now.
    ================================= */
:root {
    --body-background: #f8f8f8;
    --main-text-color: #333;
    --sidebar-border-color: #ccc;
    --table-background: #fff;
    --table-text-color: #333;
    --table-border-color: #ddd;
    --table-header-background: #f2f2f2;
    --table-row-even-background: #fafafa;
    --table-row-hover-bg: #0000FF;
    --table-row-hover-text: #FFFFFF;
    --banner-updating-bg: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    --banner-updating-border: #ffc107;
    --banner-complete-bg: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    --banner-complete-border: #28a745;
    --banner-text-color: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background: #1a1a1a;
        --main-text-color: #e0e0e0;
        --sidebar-border-color: #444;
        --table-background: #2a2a2a;
        --table-text-color: #e0e0e0;
        --table-border-color: #444;
        --table-header-background: #333;
        --table-row-even-background: #2a2a2a;
        --table-row-hover-bg: #008000;
        --table-row-hover-text: #FFFFFF;
        --banner-updating-bg: linear-gradient(135deg, #4d3d1a 0%, #3a2e10 100%);
        --banner-updating-border: #ffc107;
        --banner-complete-bg: linear-gradient(135deg, #1e3d26 0%, #142819 100%);
        --banner-complete-border: #28a745;
        --banner-text-color: #e0e0e0;
    }
}

body[data-theme='dark'] {
    --body-background: #1a1a1a;
    --main-text-color: #e0e0e0;
    --sidebar-border-color: #444;
    --table-background: #2a2a2a;
    --table-text-color: #e0e0e0;
    --table-border-color: #444;
    --table-header-background: #333;
    --table-row-even-background: #2a2a2a;
    --table-row-hover-bg: #008000;
    --table-row-hover-text: #FFFFFF;
    --banner-updating-bg: linear-gradient(135deg, #4d3d1a 0%, #3a2e10 100%);
    --banner-updating-border: #ffc107;
    --banner-complete-bg: linear-gradient(135deg, #1e3d26 0%, #142819 100%);
    --banner-complete-border: #28a745;
    --banner-text-color: #e0e0e0;
}

html, body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--body-background);
    color: var(--main-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

        /* =============================================
           CUSTOMIZE VIEW slideout + SAVED VIEW PREFERENCES
           ============================================= */
        .slideout-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            cursor: pointer;
        }
        .slideout-menu-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .slideout-menu {
            position: fixed;
            top: 80px;
            left: 0;
            height: calc(100vh - 120px);
            width: 500px;
            max-width: 90%;
            background-color: var(--body-background);
            color: var(--main-text-color);
            border-right: 1px solid var(--sidebar-border-color);
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s ease-in-out;
            z-index: 1000;
            padding: 20px;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            transform: translateX(-100%);
        }
        .slideout-menu.open {
            transform: translateX(0);
        }
        .close-btn {
            position: absolute;
            top: 10px;
            right: 20px;
            background: none;
            border: none;
            font-size: 30px;
            cursor: pointer;
            color: var(--main-text-color);
        }
        .tabs-container {
            padding-top: 40px;
        }
        .tab-pane {
            display: none;
        }
        .tab-pane.active {
            display: block;
        }
        .column-customize-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .column-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border: 1px solid var(--table-border-color);
            border-radius: 4px;
            margin-bottom: 6px;
            background-color: var(--table-background);
        }
        .column-item label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            flex: 1;
            color: var(--main-text-color);
            font-size: 0.9em;
        }
        .drag-handle {
            cursor: grab;
            color: var(--main-text-color);
            opacity: 0.6;
        }
        .column-item.sortable-ghost {
            opacity: 0.4;
        }
        .column-item.sortable-chosen {
            border-color: var(--alpha-button-selected-bg, #007acc);
        }
        .view-save-indicator {
            font-size: 12px;
            color: var(--text-secondary, #888);
            opacity: 0;
            transition: opacity 0.3s ease;
            margin-left: 4px;
        }
        .view-save-indicator.visible {
            opacity: 1;
        }

        /* Layout modifications */
        .game-content-wrapper {
            height: 100vh !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 0px 20px 20px;
            box-sizing: border-box;
        }

        .game-page {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            box-sizing: border-box !important;
            flex: 1 !important;
            min-height: 0 !important;
            overflow: hidden !important;
            align-items: stretch;
        }

        /* Toolbar row: pushes .main-buttons to the right edge of
           .toolbar via space-between, with .toolbar-metrics (count +
           active filter tags) on the left. */
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 8px 0;
            width: 100%;
            flex-shrink: 0;
        }
        .toolbar-metrics {
            display: flex;
            align-items: center;
        }

        .main-content-area {
            flex: 1 !important;
            min-width: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            height: 100% !important;
        }

        .table-container {
            position: relative; /* anchor for .mobile-scroll-shadow */
            flex: 1 !important;
            min-height: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;        
            display: flex !important;
            flex-direction: column !important;
        }

        /* Fades the right edge of the table on mobile when there's more
           to scroll horizontally. Toggled via JS in the DOMContentLoaded
           block below (mirrors legacygenre_titles.php's implementation). */
        .mobile-scroll-shadow {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 40px;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2));
            pointer-events: none;
            z-index: 100;
            transition: opacity 0.3s ease;
            display: none;
        }

        body[data-theme='dark'] .mobile-scroll-shadow {
            background: linear-gradient(to right, rgba(42, 42, 42, 0), rgba(0, 0, 0, 0.4));
        }

        .table-wrapper {
            flex: 1 !important;
            min-height: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: auto !important; 
            overflow-y: auto !important; 
            display: block !important;
            border: 1px solid var(--table-border-color);
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        /* Base .platform-table skin — background, typography, cell
           borders/padding, sticky header, row striping. The block below
           (width/table-layout/nowrap overrides) layers on top of this. */
        .platform-table {
            border-spacing: 0;
            background-color: var(--table-background);
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: var(--table-text-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .platform-table th,
        .platform-table td {
            border: 1px solid var(--table-border-color);
            padding: 10px 12px;
            text-align: left;
            vertical-align: middle;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .platform-table thead {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: var(--table-header-background);
        }

        .platform-table tr:nth-child(even) {
            background-color: var(--table-row-even-background);
        }

        .platform-table tbody tr:hover {
            background-color: var(--table-row-hover-bg);
            color: var(--table-row-hover-text);
            cursor: pointer;
        }

        .platform-table th.family,
        .platform-table td.family { width: 120px; }

        .platform-table th.device-type,
        .platform-table td.device-type { width: 150px; }

        .disallowed-row {
            cursor: not-allowed !important;
            opacity: 0.6;
        }

        /* Sort indicator arrows — tracked via the [data-sort-direction]
           attribute (see th.sortable markup + the sort click handler). */
        th.sortable {
            position: relative;
            padding-right: 25px;
            cursor: pointer;
        }
        th.sortable::after {
            content: "⇅";
            position: absolute;
            right: 10px;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.3;
            transition: opacity 0.2s, transform 0.2s;
            line-height: 1;
        }
        th.sortable:hover::after { opacity: 0.6; }
        th.sortable[data-sort-direction="asc"]::after {
            opacity: 1;
            transform: translateY(-50%) rotate(180deg);
        }
        th.sortable[data-sort-direction="desc"]::after {
            opacity: 1;
            transform: translateY(-50%) rotate(0deg);
        }

        .platform-table {
            width: max-content !important;    
            min-width: 100% !important;       
            table-layout: auto !important;    
            border-collapse: collapse !important;
        }

        .platform-table th,
        .platform-table td {
            white-space: nowrap !important;   
            overflow: visible !important;     
            text-overflow: clip !important;   
        }

        /* === Main Heading & Count === */
        .main-heading-container {
            border-bottom: 2px solid var(--main-heading-border);
            padding-bottom: 10px;
            margin-bottom: 15px;
            margin-top: 80px; /* Aligns below the header.php navigation area */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        .main-heading-container h1 { margin: 0; font-size: 2em; }

        .datfile-count {
            background-color: #0F9ED5;
            color: #FFFFFF;
            padding: 5px 10px;
            border-radius: 4px;
            font-weight: bold;
            white-space: nowrap;
            font-size: 14px;
        }

        .intro-text {
            padding-bottom: 15px;
            width: 100%;
            max-width: 800px; 
            margin: 0; 
            flex-shrink: 0;
        }

        #active-filters-display {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }

        .filter-tag,
        .sort-tag {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 10px;
            margin-bottom: 0;
            background-color: #FFEB3B;
            color: #000000;
            font-size: 14px;
            white-space: nowrap;
            border-radius: 4px;
            font-weight: bold;
        }

        .no-filter { color: black; }

        /* =================================
            UPDATE STATUS BANNER STYLES
            ================================= */
        .update-status-banner {
            margin: 10px 0 15px 0;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            flex-shrink: 0;
        }
        .update-status-banner.updating {
            background: var(--banner-updating-bg);
            border-left: 5px solid var(--banner-updating-border);
        }
        .update-status-banner.complete {
            background: var(--banner-complete-bg);
            border-left: 5px solid var(--banner-complete-border);
        }
        .update-status-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .update-status-icon { font-size: 24px; flex-shrink: 0; }
        .update-status-message {
            font-size: 16px;
            font-weight: 500;
            color: var(--banner-text-color);
            line-height: 1.5;
        }

        /* In-Column Filter Row Styling */
        .column-filter-row th {
            padding: 6px 8px !important;
            border-bottom: 2px solid var(--table-border-color, #ddd);
            vertical-align: middle;
        }
        .col-filter-select {
            width: 100%;
            box-sizing: border-box;
            padding: 3px 6px;
            font-size: 0.85em;
            border: 1px solid var(--table-border-color, #ccc);
            border-radius: 3px;
            background-color: var(--body-background, #fff);
            color: var(--main-text-color, #333);
        }

        /* Freshness indicator */
        .last-updated.updated-fresh {
            color: #2e7d32;
            font-weight: 600;
        }
        .last-updated.updated-fresh::before {
            content: '\25CF';
            color: #2e7d32;
            margin-right: 6px;
            font-size: 0.7em;
            vertical-align: middle;
        }

        /* Button skin (.filter-reset-btn) is global in header.css - don't
           redefine it here. This page just needs the flex layout for the
           button row — it doesn't use shared-table-toolbar.css's
           .main-buttons (that component assumes the shared .clean-table
           skeleton, which this page doesn't use; see the file header
           comment for why). */
        .main-buttons {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Status text indicator next to saved view buttons */
        .view-save-indicator {
            font-size: 12px;
            color: var(--text-secondary, #888);
            opacity: 0;
            transition: opacity 0.3s ease;
            margin-left: 4px;
        }

        .view-save-indicator.visible {
            opacity: 1;
        }