.user-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #333;
    overflow: hidden;
    background: #0000;
}

.user-profile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- TABLE REFINEMENT --- */
.table {
    background-color: transparent !important;
    color: var(--secondary-accent-color) !important;
}

/* Bulma's .is-hoverable uses a specific background color, we just override it to be subtle */
.table.is-hoverable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.table thead th {
    color: #888 !important;
    border-bottom: 1px solid #222 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.table td {
    border-bottom: 1px solid #1a1a1a !important;
    padding: 1.25rem 0.75rem !important;
    vertical-align: middle !important;
}

/* --- ACTION BUTTONS (IDs) --- */
.table .buttons .button {
    min-width: 100px;
    height: 2.2rem;
    font-weight: 600;
    font-size: 0.75rem !important;
    background-color: transparent !important;
    border: 1px solid #333 !important;
    color: var(--secondary-accent-color) !important;
}

#btn-copy {
    border-color: var(--primary-accent-color) !important;
    color: var(--primary-accent-color) !important;
}

#btn-copy:hover {
    background-color: var(--primary-accent-color) !important;
    color: #000 !important;
}

#btn-edit:hover {
    border-color: #eee !important;
    color: #eee !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

#btn-del:hover {
    border-color: #ff3860 !important;
    color: #ff3860 !important;
    background-color: rgba(255, 56, 96, 0.1) !important;
}

#btn-copy, #btn-edit, #btn-del {
    font-size: 1rem !important;
}

/* MODALS */
.modal-card-foot .button:not(:last-child) {
    margin-right: 0.75rem !important;
}

.modal-card-head,
.modal-card-foot {
    background-color: #111 !important;
    border: none !important;
}

.modal-card-body {
    background-color: #0a0a0a !important;
    color: var(--secondary-accent-color) !important;
}

.modal-card-title {
    color: var(--secondary-accent-color) !important;
    font-weight: bold;
}

.modal .label {
    color: #888 !important;
}

.modal .input,
.modal .textarea {
    background-color: #1a1a1a !important;
    resize: none;
    color: var(--secondary-accent-color) !important;
}

.modal .input:focus,
.modal .textarea:focus {
    border: 1px solid var(--primary-accent-color) !important;
}

/* --- YOUR RESPONSIVE FLEX LOGIC --- */
@media screen and (max-width: 768px) {
    .table thead {
        display: none;
    }

    .table tr {
        display: flex;
        flex-wrap: wrap;
        padding: 1.5rem 0.5rem;
        border-bottom: 1px solid #222;
    }

    .table td:nth-child(1) {
        flex: 1;
        border: none !important;
        font-weight: bold;
    }

    .table td:nth-child(2) {
        flex: 0 auto;
        text-align: right !important;
        border: none !important;
    }

    .table td:last-child {
        width: 100% !important;
        margin-top: 1rem;
        border-bottom: none !important;
    }

    .table .buttons {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    .table .buttons .button {
        flex: 1;
        margin: 0 !important;
    }
}