/* ============================================ */
/* ACCOUNT PAGE - HORIZONTAL MENU (TABS) */
/* Wersja: 3.0 - Menu poziome jako zakładki */
/* ============================================ */

/* ============================================ */
/* GŁÓWNY KONTENER - PEŁNA SZEROKOŚĆ */
/* ============================================ */

#account-manage {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Usuń float/flex layout - wszystko full width */
#account-manage #one,
#account-manage #two {
    width: 100%;
    float: none;
    margin-left: 0;
    padding: 0;
}

/* ============================================ */
/* CONTENT - PEŁNA SZEROKOŚĆ */
/* ============================================ */

#account-manage #two {
    background: #ffffff;
    padding: 0;
}

/* ============================================ */
/* NAGŁÓWKI */
/* ============================================ */

#account-manage #two h2 {
    background: linear-gradient(to bottom, #5aaad7 0%, #4a9ac7 100%) !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 18px 30px !important;
    font-family: 'Bebas Neue Bold', sans-serif !important;
    font-size: 26px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 30px 0 0 0 !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 4px 10px rgba(90, 170, 215, 0.25) !important;
}

/* ============================================ */
/* TABELE */
/* ============================================ */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#account-manage #two table {
    width: 100%;
    background: #ffffff;
    border-collapse: collapse;
    margin: 0;
}

#account-manage #two table tbody tr {
    border-bottom: 1px solid #e7edef;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

#account-manage #two table tbody tr:hover {
    background: linear-gradient(to right, #e8f4f8 0%, #f0f8ff 100%) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

#account-manage #two table tbody td {
    padding: 16px 24px !important;
    color: #555 !important;
    font-size: 15px !important;
}

/* ============================================ */
/* GLOBAL BUTTONS – ZMNIEJSZONE (NOWA BAZA) */
/* ============================================ */

#account-manage #two .btn,
#account-manage #two button,
#account-manage #two input[type="submit"] {
    background: linear-gradient(135deg, #5aaad7 0%, #4a9ac7 100%) !important;
    color: #ffffff !important;
    border: none !important;

    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;

    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(90, 170, 215, 0.30) !important;
}

#account-manage #two .btn:hover,
#account-manage #two button:hover,
#account-manage #two input[type="submit"]:hover {
    background: linear-gradient(135deg, #4a9ac7 0%, #3a8ab7 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(90, 170, 215, 0.40) !important;
}

/* ============================================ */
/* DANGER BUTTON */
/* ============================================ */

#account-manage #two .btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

#account-manage #two .btn-danger:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
}

/* ============================================ */
/* CENTERED ACTIONS */
/* ============================================ */

#account-manage .account-actions,
#account-manage .character-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* ============================================ */
/* MOBILE */
/* ============================================ */

@media (max-width: 768px) {
    #account-manage .account-actions,
    #account-manage .character-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #account-manage .account-actions .btn,
    #account-manage .character-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================ */
/* CHARACTER LIST TABLE – COLOR FIX */
/* ============================================ */

#account-manage #two table thead {
    background: #3f7f9f; /* ciemniejszy niebieski jak w Telaria */
}

#account-manage #two table thead th {
    color: #ffffff !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none !important;
    text-align: left;
}

/* Delikatne zebra rows – spójne z resztą */
#account-manage #two table tbody tr:nth-child(even) {
    background-color: #eef3f6;
}

/* Hover – bez zmiany koloru headera */
#account-manage #two table tbody tr:hover {
    background: linear-gradient(to right, #e8f4f8 0%, #f0f8ff 100%) !important;
}


/* ============================================ */
/* KONIEC */
/* ============================================ */