/* Desktop Layout - Content with fixed left margin and responsive right margin */
        /* Mobile responsive fixes */
        /* 7k Rebirth Tier List Styles - Table Format */

        .tier-list-container h1 {
            text-align: center;
            color: #e0e0e0;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }
        
        /* ----------------------------------------------------------------- */
        /* NEW FILTER BAR STYLES */
        /* ----------------------------------------------------------------- */
        
        .employees-filter-bar.lost {
          /* background-color: #1a1a1e; REMOVED dark background */
          /* border: 1px solid #32323e; REMOVED border */
          border-radius: 4px;
          padding: 8px 12px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 12px;
          margin-bottom: 24px;
          /* box-shadow: 0 4px 10px rgba(0,0,0,0.3); REMOVED shadow */
        }

        .filter-bar-element {
          display: flex;
          align-items: center;
        }

        /* Search Field */
        .filter-bar-element.search {
          position: relative;
          margin-right: 4px;
        }

        .filter-bar-element.search input.form-control {
          background-color: #0e0e11;
          border: 1px solid #32323e;
          border-radius: 4px;
          color: #e0e0e0;
          padding: 0 30px 0 10px;
          font-size: 0.9rem;
          height: 38px;
          width: 200px;
          transition: border-color 0.2s;
          box-sizing: border-box;
          line-height: 38px;
        }

        .filter-bar-element.search input.form-control:focus {
          outline: none;
          border-color: #7a5af8a1;
        }

        .filter-bar-element.search .clear {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #888;
          cursor: pointer;
          font-size: 1.2rem;
          line-height: 1;
          display: none;
          user-select: none;
        }

        .filter-bar-element.search input:not(:placeholder-shown) + .clear {
          display: block;
        }

        /* Button Groups */
        .btn-group {
          display: inline-flex;
          border-radius: 4px;
          overflow: hidden;
          border: 1px solid #32323e;
        }

        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background-color: #212126;
          color: #a0a0a0;
          border: none;
          border-right: 1px solid #32323e;
          padding: 0 16px;
          height: 38px;
          font-size: 0.9rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          text-decoration: none;
        }

        .btn:last-child {
          border-right: none;
        }

        .btn:hover {
          background-color: #2a2a30;
          color: #fff;
        }

        .btn.active {
          background-color: #7a5af8a1;
          color: #fff;
          box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
          border-color: #7a5af8a1;
        }

        .btn svg {
          fill: currentColor;
        }
        
        /* Reset Button */
        .reset-button {
          background-color: #2a2a30;
          border: 1px solid #32323e;
          border-radius: 4px;
          color: #a0a0a0;
          padding: 0 16px;
          height: 38px;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 0.9rem;
        }

        .reset-button:not([disabled]):hover {
          background-color: #7a5af8a1;
          border-color: #7a5af8a1;
          color: white;
        }

        .reset-button[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }

        /* Images inside buttons (like Types) */
        .btn img {
          width: 22px;
          height: 22px;
          object-fit: contain;
          transition: filter 0.2s;
          display: block;
        }

        /* Mobile responsiveness for Filter Bar */
        @media (max-width: 768px) {
          .employees-filter-bar.lost {
            flex-direction: column;
            align-items: stretch;
            padding: 10px;
          }

          .filter-bar-element {
            width: 100%;
            justify-content: center;
          }
          
          .filter-bar-element.search input.form-control {
            width: 100%;
          }

          .btn-group {
            width: 100%;
            display: flex;
          }

          .btn {
            flex: 1;
            padding: 0 4px;
            font-size: 0.85rem;
          }
          
          .reset-button {
            width: 100%;
            justify-content: center;
          }
        }


        /* Table Styles */
        .tier-table-container {
            margin-top: 20px;
            overflow-x: auto;
            overflow-y: visible;
            width: 100%;
            position: relative;
        }

        .tier-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 2px 2px;
            background: #1A1A1D;
            border-radius: 12px;
            overflow: visible;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            min-width: 1200px;
        }

        .tier-table thead {
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .tier-table thead tr {
            position: sticky;
            top: 0;
            z-index: 101;
            background: #1A1A1D;
        }

        /* Header Styles */
        .tier-header {
            background: rgba(255, 255, 255, 0.1);
            color: rgb(230, 230, 230);
            padding: 15px 10px;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #3c3c3f;
            vertical-align: middle;
            white-space: nowrap;
        }

        .tier-header.hero-column {
            width: 225px;
            min-width: 225px;
            max-width: 225px;
            position: sticky;
            left: 0;
            z-index: 102;
            background: rgba(255, 255, 255, 0.15);
            border-right: 2px solid #3c3c3f;
        }

        /* Category width for farming categories */
        .tier-header.category-single {
            width: 100px;
            min-width: 100px;
            max-width: 100px;
        }

        .header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .header-content img {
            width: 37.5px;
            height: 37.5px;
            object-fit: contain;
        }

        .header-content span {
            font-size: 11px;
            line-height: 1.2;
            text-align: center;
        }

        /* Category highlighting */
        .tier-header.category-selected {
            background: linear-gradient(135deg, #7a5af8a1, #5a3fb8) !important;
            border-color: #7a5af8a1 !important;
            box-shadow: 0 4px 12px rgba(122, 90, 248, 0.3) !important;
        }

        /* Mobile header cursor for sorting */
        @media (max-width: 768px) {
            .tier-header.category-single.active-category {
                cursor: pointer;
                position: relative;
            }

            .tier-header.category-single.active-category:hover {
                background: rgba(255, 255, 255, 0.2) !important;
            }
        }

        .tier-header.category-selected .header-content span {
            color: white !important;
        }

        /* Hover effect for category headers */
        .tier-header[data-category]:hover,
        .tier-header.category-group[data-category]:hover {
            background: rgba(255, 255, 255, 0.15) !important;
            cursor: pointer !important;
            transform: translateY(-1px);
            transition: all 0.3s ease;
        }

        /* Special styling for combined categories */
        .tier-header.category-group {
            background: rgba(255, 255, 255, 0.08) !important;
        }

        .tier-header.category-group .header-content span {
            font-size: 10px;
            line-height: 1.1;
        }

        /* Character Rows */
        .character-row {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .character-row:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .character-cell {
            position: sticky;
            left: 0;
            z-index: 10;
            background: #1A1A1D;
            border-right: 2px solid #3c3c3f;
            padding: 12px;
            vertical-align: middle;
            min-height: 100px;
        }

        .character-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Dedicated Role Icon Class */
        .role-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            margin-right: 6px;
            background: transparent;
            border: none;
            padding: 0;
            vertical-align: middle;
        }

        .role-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 0px;
            background: transparent;
        }

        /* Character Role Container */
        .character-role {
            display: flex;
            align-items: center;
        }

        .character-portrait {
            position: relative;
            width: 70px;
            height: 90px;
            border-radius: 8px;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.3);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            image-rendering: -webkit-optimize-contrast;
        }

        /* Rarity Background Images for Character Portraits */
        .character-row[data-rarity="R"] .character-portrait {
            background-image: linear-gradient(135deg, #9370DB, #8A2BE2);
        }

        .character-row[data-rarity="L"] .character-portrait {
            background-image: linear-gradient(135deg, #FFD700, #FFA500);
        }

        .character-row[data-rarity="L+"] .character-portrait {
            background-image: linear-gradient(135deg, #FFA500, #FF8C00);
        }

        .character-row[data-rarity="L++"] .character-portrait {
            background-image: linear-gradient(135deg, #FF4500, #FF6347);
        }

        .character-row[data-rarity="S+"] .character-portrait {
            background-image: linear-gradient(135deg, #FFA500, #FF8C00);
        }

        /* Border-Verzierungen für Character Portraits - genau wie im Ruby Farming Guide */
        table .character-row[data-rarity="L+"] .character-portrait::after,
        table .character-row[data-rarity="S+"] .character-portrait::after {
            content: '';
            position: absolute;
            top: -5px;
            right: -5px;
            width: 25px;
            height: 25px;
            background-image: url('https://ik.imagekit.io/frnrxcqkq/7krebirth/LPlusBorder.png');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 50;
            pointer-events: none;
        }

        table .character-row[data-rarity="L++"] .character-portrait::after {
            content: '';
            position: absolute;
            top: -5px;
            right: -5px;
            width: 25px;
            height: 25px;
            background-image: url('https://ik.imagekit.io/frnrxcqkq/7krebirth/LPlusPlusBorder.png');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 50;
            pointer-events: none;
        }


        .character-name {
            color: #e0e0e0;
            font-weight: 600;
            font-size: 1rem;
        }

        /* Rarity Backgrounds für Character Zellen */
        .character-cell[data-rarity="R"] {
            background: linear-gradient(135deg, #8A2BE2, #4B0082);
        }

        .character-cell[data-rarity="L"] {
            background: linear-gradient(135deg, #FFD700, #FFA500);
        }

        .character-cell[data-rarity="L+"] {
            background: linear-gradient(135deg, #FFA500, #FF8C00);
        }

        .character-cell[data-rarity="L++"] {
            background: linear-gradient(135deg, #FF4500, #FF6347);
        }

        .character-cell[data-rarity="S+"] {
            background: linear-gradient(135deg, #FFA500, #FF8C00);
        }


        /* Overlay für bessere Lesbarkeit */
        .character-cell[data-rarity] .character-info {
            position: relative;
            z-index: 1;
        }

        .character-cell[data-rarity]:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            z-index: 0;
        }

        /* Tier Cells */
        .tier-cell {
            padding: 6px 4px;
            text-align: center;
            vertical-align: middle;
            font-weight: 800;
            font-size: 1rem;
            min-width: 40px;
            background: #1A1A1D;
        }

        .tier-cell:first-child {
            border-left: none;
        }

        /* Tier Background Colors - Local overrides for this page */
        .tier-ss {
            background-color: #ec6563 !important;
            color: white !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-s {
            background-color: #ff7f7f !important;
            color: white !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-a {
            background-color: #ffbf7f !important;
            color: white !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-b {
            background-color: #6bcf7f !important;
            color: white !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-c {
            background-color: #4d96ff !important;
            color: white !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-d {
            background-color: #9c88ff !important;
            color: white !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-f {
            background-color: #ffff7f !important;
            color: #333 !important;
            font-weight: bold !important;
            padding: 5px !important;
        }

        .tier-empty {
            color: rgba(255, 255, 255, 0.3) !important;
            background-color: rgba(255, 255, 255, 0.1) !important;
            padding: 5px !important;
        }

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

            .tier-header {
                padding: 10px 5px;
                font-size: 12px;
            }

            .character-name {
                font-size: 0.8rem;
            }

            .tier-cell {
                padding: 4px 2px;
                font-size: 0.9rem;
                min-width: 35px;
            }

            .tier-header.hero-column {
                width: 180px;
                min-width: 180px;
                max-width: 180px;
            }

            .tier-header.category-single {
                width: 80px;
                min-width: 80px;
                max-width: 80px;
            }

            .header-content span {
                font-size: 11px;
            }

            .header-content img {
                width: 31px;
                height: 31px;
            }
        }

        /* Mobile Category Navigation */
        .mobile-category-nav {
            display: none;
            margin-bottom: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            justify-content: center;
        }

        .mobile-category-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            margin: 2px 4px;
            background: rgba(255, 255, 255, 0.1);
            color: #e0e0e0;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all 0.3s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .mobile-category-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .mobile-category-btn img {
            width: 16px;
            height: 16px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .mobile-category-btn.active {
            background: linear-gradient(135deg, #7a5af8a1, #5a3fb8);
            border-color: #7a5af8a1;
            color: white;
        }

        .tier-header.category-single.sort-asc::after {
            content: " ↑";
            font-weight: bold;
            opacity: 0.8;
            position: absolute;
            top: 5px;
            right: 5px;
            color: #7a5af8a1;
        }

        .tier-header.category-single.sort-desc::after {
            content: " ↓";
            font-weight: bold;
            opacity: 0.8;
            position: absolute;
            top: 5px;
            right: 5px;
            color: #7a5af8a1;
        }

        /* Mobile-only hint text */
        @media (min-width: 769px) {
            .mobile-category-nav > div:first-child {
                display: none;
            }
        }

        /* Hide all category columns by default on mobile */
        @media (max-width: 768px) {
            .filter-top-row {
                flex-direction: column;
                gap: 20px;
            }

            .tier-table {
                font-size: 0.8rem;
            }

            .character-portrait {
                width: 50px;
                height: 70px;
            }

            .character-name {
                font-size: 0.8rem;
            }

            .tier-cell {
                padding: 4px 2px;
                font-size: 0.9rem;
                min-width: 40px;
            }

            /* Mobile-specific styles */
            .mobile-category-nav {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 4px;
            }

            .mobile-category-btn {
                flex: 0 0 auto;
                min-width: 0;
            }

            /* Hide all category columns except hero column */
            .tier-header.category-single,
            .tier-cell:not(.tier-cell:first-child) {
                display: none;
            }

            /* Show only active category - but initially none are active */
            .tier-header.category-single.active-category,
            .character-row .tier-cell.active-category {
                display: table-cell;
            }

            /* Adjust table for single category view */
            .tier-table {
                min-width: auto;
                width: 100%;
            }

            .tier-header.hero-column {
                width: 180px;
                min-width: 180px;
                max-width: 180px;
            }

            .tier-header.category-single.active-category {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
            }
        }