/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles */
body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #c4c4c4;
    background-color: #333232;
    text-align: center;
    display: flex;
    flex-direction: column;     /* Stack header + main vertically */
    align-items: center;        /* Center horizontally */
    justify-content: flex-start;/* Stick to top */
    min-height: 100vh;
    margin: 0;
    font-size: 0.8em;
}



/* Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333; /* Dark grey background */
    color: #fff; /* Optional: ensure text is visible on dark background */
    height: 100%;
    width: 100%;
    max-height: 150px;
    padding: 0px 0px;
    position: sticky;
    top: 0;
    z-index: 100;
}


header .menu a:hover,
header .auth a:hover {
    color: #ffcc00; /* Highlight on hover */
}

header .logo img {
    height: 100%;
    width: 100%;
    min-height: 30px;
    max-height: 150px;
}

header .logo2 {
    align-items: center;
    height: 100%;
    width: 100%;
    min-height: 30px;
    max-height: 150px;
}

/* Main Content Styles */
main {
    width: 100%;
    max-width: 3000px; /* keeps readability */
    min-height: 100vh; /* optional: full screen height */
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    display: flex;
    justify-content: center;
}


#refresh-timer {
    text-align: center;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 10px;
    font-family: monospace;
}

.fineprint {
    text-align: center;
    font-size: 10px;
    color: #aaa;
    margin-top: 10px;
    font-family: monospace;
}

#ladder-table table {
    border-collapse: collapse;  /* removes gaps */
    width: 100%;
    table-layout: fixed;        /* prevents auto realign */
}

#ladder-table th,
#ladder-table td {
    position: relative;
    padding: 1px 10px;          /*column spacing */
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;    /* trims long text */
    white-space: nowrap;        /* fixes text overflow to next line */
    border: none;
    height: 1em;             /* fixed row height */
    line-height: 1em;        /* centers text vertically */
}

#ladder-table td:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    color: #ffcc00;
    padding: 4px 8px;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 11px;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

#ladder-table td:hover::after {
    opacity: 1;
}

/*lock column width proportions */
.ladder-table th:nth-child(1),
.ladder-table td:nth-child(1) { width: 5%; }   /* Rank */
.ladder-table th:nth-child(2),
.ladder-table td:nth-child(2) { width: 13%; }  /* Name */
.ladder-table th:nth-child(3),
.ladder-table td:nth-child(3) { width: 10%; }  /* Account */
.ladder-table th:nth-child(4),
.ladder-table td:nth-child(4) { width: 6%; }   /* Level */
.ladder-table th:nth-child(5),
.ladder-table td:nth-child(5) { width: 10%; }  /* Class */
.ladder-table th:nth-child(6),
.ladder-table td:nth-child(6) { width: 4%; }   /* Depth */
.ladder-table th:nth-child(7),
.ladder-table td:nth-child(7) { width: 8%; }   /* Skill */
.ladder-table th:nth-child(8),
.ladder-table td:nth-child(8) { width: 9%; }   /* Uniques */
.ladder-table th:nth-child(9),
.ladder-table td:nth-child(9) { width: 13%; }  /* EXP bar */
.ladder-table th:nth-child(10),
.ladder-table td:nth-child(10) { width: 7%; }  /* XPH */
.ladder-table th:nth-child(11),
.ladder-table td:nth-child(11) { width: 11%; }  /* ETA */

/* pages */
.pagination {
    text-align: center;
    margin-top: 15px;
}

.pagination-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.page-numbers {
    display: flex;
    gap: 6px;
}

.page-btn,
.pagination button {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 90px; /* keeps them same width, increase for bigger ladders */
    text-align: center;
}

.page-btn.active {
    background: #3cb371;
    color: #000;
    font-weight: bold;
}

.pagination button:disabled,
.page-btn:disabled {
    opacity: 0.5;
    cursor: default;
}



main h1 {
    font-size: 3em;
    color: #ffcc00; /* Gold text */
    margin-bottom: 50px;
}

main h2{
    text-align: center;
    margin: 5px 0;
    font-size: 1.5em;
    color: darkorange;
}

/* Progress Bar Container */
.progress-bar {
    position: relative;
    width: 100%;
    height: 14px;
    background: #222;               /* empty remainder */
    border-radius: 1px;
    overflow: hidden;
    margin: 2px 0;
}

/* gray part (progress before session) */
.progress-pre {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #888;               /* gray color */
    border-radius: 1px 0 0 1px;
    transition: width 0.4s ease;
    z-index: 1;
}

/* green gained part (sits after the gray) */
.progress-gain {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #106c10, #1b7a1b);
    border-radius: 0 1px 1px 0;
    transition: width 0.4s ease, left 0.4s ease;
    z-index: 2;
}

/* label */
.progress-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #fff;
    line-height: 14px;
    text-shadow: 0 0 3px #000;
    z-index: 3;
    pointer-events: none;
}

/* small polish: if pre or gain are zero, hide rounded corners where appropriate */
.progress-pre[style*="width:0%"] { border-radius: 0; }
.progress-gain[style*="width:0%"] { border-radius: 0; }


/* Keep icons aligned and not affecting column width */
.char-name {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Reserve fixed space for icons so names align */
.status-icon {
    display: inline-block;
    width: 1.2em;       /* fixed width = consistent alignment */
    text-align: center;
    opacity: 0.9;
    font-size: 14px;
}

/* Link styling */
.char-name a {
    color: #ddd;
    text-decoration: none;
}
.char-name a:hover {
    text-decoration: underline;
}

#ladder-table th .char-name {
    justify-content: flex-start;
    font-weight: bold;
}

#ladder-table th .status-icon {
    visibility: hidden; /* keeps spacing without showing anything */
}

/* Alternate row background colors (tbody only) */
#ladder-table table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}
#ladder-table table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Header always solid */
#ladder-table thead tr {
    background-color: rgba(255, 255, 255, 0.15);
    font-weight: bold;
}

/* Optional hover highlight */
#ladder-table table tbody tr:hover {
    background-color: rgba(80, 142, 160, 0.51);
}


/* Buttons */
.btn {
    display: inline-block;
    padding: 2px 3px;
    margin: 2px;
    font-size: 1.7em;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.button {
    display: inline-block;
    padding: 2px 3px;
    margin: 2px;
    font-size: 1.7em;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}


.action-btn {
}
.action-btn img {
    height: 100%;
    width: 100%;
    max-height: 150px;
}
.action-btn:hover {
   /* background-color: black; /* Darker red */
    /*transform: translateY(-5px);*/
    transform: scale(1.1);
}
.action-btn-right {
    margin-right: 10px;
}
.action-btn-right img {
    height: 100%;
    width: 100%;
    max-height: 150px;
}
.action-btn-right:hover {
    /* background-color: black; /* Darker red */
    transform: scale(1.1);
}

/* --- Ladder rank visuals --- */
.rank-cell {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 70px;
}

.rank-left {
    text-align: left;
    flex: 1;
}

.rank-change {
    text-align: right;
    flex-shrink: 0;
    font-size: 0.8em;
    margin-left: 4px;
}

.rank-up {
    color: #2ecc71; /* green */
    font-weight: bold;
}

.rank-down {
    color: #e74c3c; /* red */
    font-weight: bold;
}

/* --- Dead characters (gray out row) --- */
.dead-row {
    opacity: 0.5;
    background-color: rgba(80, 80, 80, 0.15);
}

.class-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 150px; /* or whatever you need */
    flex: 1;
    margin-top: 4px;
}

.class-cell span {
    white-space: nowrap;
    overflow: visible;
}
.class-icon {
    width: 14px;
    height: 14px;
    /*image-rendering: pixelated;*/
    flex-shrink: 0;
}

.skill-name {
    display: inline-block;
    max-width: 150px;              /* truncate long skill names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    cursor: default;                  /* small UX hint */
}

/* Tooltip box */
.skill-name::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 125%;                  /* position above text */
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    color: #ffcc00;
    padding: 4px 8px;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 11px;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.05s ease-in-out;
    z-index: 50;
}

/* Tooltip arrow */
.skill-name::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 115%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.05s ease-in-out;
}

/* Show tooltip on hover */
.skill-name:hover::after,
.skill-name:hover::before {
    opacity: 1;
}


.unique-wrapper {
    position: relative;
    display: inline-block;
}

.unique-icon {
    /*unique icons*/
    /*width: 32px;*/
    height: 16px;
    margin: 0 0px;
    border-radius: 0px;
    cursor: pointer;
    transition: transform 0.2s;
}

#unique-preview-name {
    margin-top: 4px;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    word-wrap: break-word;
}


.unique-icon:hover {
    transform: scale(1.1);
}

#unique-preview {
    position: fixed;
    pointer-events: none;
    z-index: 99;
    display: none;
    height: 100px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    background-color: rgba(0,0,0,0.7);
    padding: 4px;
    /* move preview upward */
    transform: translateY(-50px);
}

#unique-preview img {
    height: 100%;
    border-radius: 6px;
}


.unique-wrapper:hover .unique-preview {
    display: block;
}


.private {
    color: #888;
    font-style: italic;
}
/* Each label + select pair */
.exp-graphs-header {
    display: flex;
    gap: 2px;
    color: #ffcc00;
    font-size: 12px;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Dropdown Style --- */
.exp-graphs-header select {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 2px 2px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    outline: none;
    appearance: none;
    min-width: 90px;
    max-width: 90px;

    text-align: center;
    text-align-last: center;
}

/* Hover & focus effects */
.exp-graphs-header select:hover {
    border-color: #ffcc00;
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.4);
    cursor: pointer;
}

.exp-graphs-header select:focus {
    border-color: #ffaa00;
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

/* Dropdown options */
.exp-graphs-header select option {
    background-color: #2a2a2a;
    color: #e0e0e0;
    padding: 2px;
    text-align: left;
}

.exp-graphs-header select option:checked {
    background-color: #ffcc00;
    color: #000;
}

/* exp hr + graph */
.exp-cell {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-right: 20px; /* space for checkbox */
}

/* Keep text visible */
.exp-cell .exp-text {
    display: inline-block;
    vertical-align: middle;
}

/* Keep text visible */
.exp-cell .exp-graph {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
}

/* graph checkbox on right side */
.exp-cell input[type="checkbox"] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) scale(1.1);
    cursor: pointer;
    color: #1e6b6b;
}

/* gold border for active checkboxes */
.exp-cell input[type="checkbox"]:checked {
    outline: 2px solid #ffcc00;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

#exp-graphs {
    display: none; /* stays hidden until ticked */
    margin-top: 2px;
    background: rgba(20, 20, 20, 0.8);
    border-radius: 8px;
    padding: 10px 10px 30px 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    height: 600px;
    margin-bottom: 20px;
}

#expChart {
    width: 100%;
    height: 100%;
}

#inventory-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.inventory-wrapper {
    width: 600px;
    height: 524px;
    background: rgba(20,20,20,0.95);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 8px;
    position: relative;
    overflow: hidden;
}

#inventory-grid {
    position: relative;
    width: 100%;
    height: 100%;
}

.item {
    position: absolute;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
    overflow: hidden;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 2;
    position: relative;
}


.inventory-header {
    text-align: center;
    margin-bottom: 8px;
}

.inventory-title {
    font-size: 20px;
    font-weight: bold;
    color: #eee;
}

.inv-league {
    color: #bbb;
    font-size: 14px;
}

.poe-link {
    display: inline-block;
    color: #66aaff;
    text-decoration: none;
    margin-top: 6px;
}
.poe-link:hover {
    text-decoration: underline;
}

.item-tooltip {
    position: absolute;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid #555;
    border-radius: 6px;
    padding: 3px 3px;
    font-size: 13px;
    color: #ddd;
    pointer-events: none;
    z-index: 9999;
    max-width: 380px;
    line-height: 1.3em;
}


.close-btn {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent;
    border: none;
    font-size: 30px;
    color: #863636;
    cursor: pointer;
}
.close-btn:hover {
    color: #ff0000;
}

.char-link {
    color: #7c6b33;
    text-decoration: none;
}
.char-link:hover {
    text-decoration: underline;
}

.req-update-btn {
    background: #2d5a9e;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    margin-left: auto;
}
.req-update-btn:hover {
    background: #3976c2;
}
.req-update-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}





/* Hide graph button */
.hide-chart-btn {
    background-color: #1e1e1e;
    border: 1px solid #555;
    color: #c70000;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.hide-chart-btn:hover {
    border-color: #ff0000;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
    background-color: #333;
}


/* --- Some garbage code for dropdown --- */
.filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px auto;
    text-align: center;
}

/* Each label + select pair */
.filter-item {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #ffcc00;
    font-size: 12px;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Dropdown Style --- */
.filter-item select {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 2px 2px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    outline: none;
    appearance: none;
    min-width: 90px;
    max-width: 90px;

    text-align: center;
    text-align-last: center;
}

/* Hover & focus effects */
.filter-item select:hover {
    border-color: #ffcc00;
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.4);
    cursor: pointer;
}

.filter-item select:focus {
    border-color: #ffaa00;
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

/* Dropdown options */
.filter-item select option {
    background-color: #2a2a2a;
    color: #e0e0e0;
    padding: 2px;
    text-align: left;
}

.filter-item select option:checked {
    background-color: #ffcc00;
    color: #000;
}


@media (max-width: 900px) {
    body {
        font-size: 13px; /* make text a bit larger on mobile */
        padding: 10px;
        flex-direction: column;
    }

    header {
        flex-direction: column;
        text-align: center;
        max-height: none;
        padding: 10px;
    }

    header .logo img {
        max-height: 80px;
    }

    main {
        display: block; /* remove centering flex */
        width: 100%;
        overflow-x: auto;  /* allow horizontal scroll if needed */
        padding: 0;
    }

    #ladder-table {
        width: 100%;
        overflow-x: auto;
    }

    #ladder-table table {
        min-width: 900px; /* ensures table doesn’t shrink smaller than layout */
        width: 100%;
    }


    /* Only keep first 7 columns (Rank, Name, Level, Class, EXP, XPH, Skill) */
    #ladder-table th:nth-child(n+8),
    #ladder-table td:nth-child(n+8) {
        display: none;
    }

    /* Column width tuning */
    #ladder-table th:nth-child(1),
    #ladder-table td:nth-child(1) {
        width: 4%;                /* Rank */
        text-align: Left;
        left: 0;
        position: sticky;
        z-index: 2;
    }

    /* Keep Name column fixed (sticky) when scrolling horizontally */
    #ladder-table th:nth-child(2),
    #ladder-table td:nth-child(2) {
        width: 10%;                /* Name */
        text-align: Left;
        position: sticky;
        left: 40px;                         /* sticks to left edge */
        z-index: 3;                      /* stay above other cells */
    }


    #ladder-table th:nth-child(3),
    #ladder-table td:nth-child(3) {
        width: 3%;                /* Level */
        text-align: Left;
    }

    #ladder-table th:nth-child(4),
    #ladder-table td:nth-child(4) {
        width: 10%;                /* Class */
        text-align: Left;
    }

    #ladder-table th:nth-child(5),
    #ladder-table td:nth-child(5) {
        width: 5%;                /* EXP */
        text-align: Left;
    }

    #ladder-table th:nth-child(6),
    #ladder-table td:nth-child(6) {
        width: 6%;                /* ETA */
        text-align: Left;
    }
    #ladder-table th:nth-child(7),
    #ladder-table td:nth-child(7) {
        width: 23%;                /* Skill */
        text-align: Left;
    }


    /* Slightly tighter spacing and smaller font */
    #ladder-table th,
    #ladder-table td {
        padding: 4px 6px;
        font-size: 0.9em;
        white-space: nowrap;
        transition: opacity 0.2s linear;
    }

    /* make long names truncate with ellipsis */
    #ladder-table td:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* make long classes truncate with ellipsis */
    #ladder-table td:nth-child(4) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Pages on phone*/
    .page-btn {
        padding: 2px 6px;
        font-size: 0.8em;
    }
    .pagination button {
        background: #222;
        color: #fff;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 4px 8px;
        cursor: pointer;
        min-width: 30px; /* keeps them same width, increase for bigger ladders */
        text-align: center;
    }

    .pagination-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
    }

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }

    #prev-page,
    #next-page {
        padding: 3px 6px;
        font-size: 0.8em;
    }



}