.browser-wrapper {
    display: grid;
    gap: 1.5rem;
    padding: 1rem 0;
}

/*************
 *    TABS
 *************/
.browser-tabs {
    display: flex;
    gap: .5rem;
}

.browser-tabs button {
    padding: .5rem 1rem;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: .5rem;
    cursor: pointer;
}

.browser-tabs button.active {
    background: #e8f0ff;
    border-color: #6090ff;
}

/*************
 *   FORMES
 *************/
.browser-section {
    display: grid;
    gap: .75rem;
}

.browser-view-id,
.browser-list-q {
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid #ccc;
    width: 200px;
}

.browser-view-btn,
.browser-list-btn {
    padding: .45rem 1rem;
    border-radius: .5rem;
    background: #1a73e8;
    color: white;
    border: none;
    cursor: pointer;
}

.browser-view-btn:hover,
.browser-list-btn:hover {
    background: #155ec2;
}

/*************
 *   RESULTATS
 *************/
.browser-card {
    border: 1px solid #e5e5e5;
    padding: 1rem;
    border-radius: .75rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.browser-loading,
.browser-empty,
.browser-alert {
    padding: 1rem;
    text-align: center;
    color: #777;
}

/*************
 *   DETAIL
 *************/
.browser-detail h3 {
    margin: 0 0 .5rem 0;
}

.browser-code {
    font-size: .8rem;
    color: #666;
}

.browser-dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: .5rem 1rem;
    margin-top: 1rem;
}

.browser-dl dt {
    font-weight: 600;
    color: #333;
}

.browser-dl dd {
    margin: 0;
    color: #555;
}

/*************
 *   TAULA LLISTAT
 *************/
.browser-table {
    width: 100%;
    border-collapse: collapse;
}

.browser-table th,
.browser-table td {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 1px solid #eee;
}

.browser-link {
    color: #1a73e8;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

/*************
 * PAGINACIÓ
 *************/
.browser-pager {
    margin-top: .75rem;
    display: flex;
    gap: .25rem;
    justify-content: flex-end;
}

.browser-page {
    padding: .35rem .7rem;
    border: 1px solid #ccc;
    background: white;
    border-radius: .5rem;
    cursor: pointer;
}

.browser-page.active {
    background: #e8f0ff;
    border-color: #6090ff;
}

/*************
 * SELECT2
 *************/
.select2-container--default .select2-selection--single {
    min-height: 38px !important;
    border-radius: .5rem !important;
    border: 1px solid #ccc !important;
}

.select2-container {
    width: 100% !important;
	display: block;
}

.select2-container .select2-selection--single {
    height: 40px;
    display: flex;
    align-items: center;
}


/* =========================
   MODIFICATION SETS
   ========================= */

/* Cada conjunt = card */
.stat-set {
    border: 1px solid #e5e5e5;
    padding: 1rem;
    border-radius: .75rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    display: grid;
    gap: .75rem;
}

.stat-set .remove-set {
    background: none;
    border: none;
    font-size: .9rem;
    cursor: pointer;
}

.stat-set .remove-set:hover {
    color: #c0392b;
}

.stat-rows {
    display: grid;
    gap: .5rem;
}

.stat-row {
    display: grid;
    grid-template-columns: 60px 80px 1fr 40px;
    gap: .5rem;
    align-items: center;
}

.stat-row select,
.stat-row input[type="number"] {
    padding: .45rem .5rem;
    border-radius: .5rem;
    border: 1px solid #ccc;
    font-size: .9rem;
    width: 100%;
}

.stat-row select:focus,
.stat-row input:focus {
    outline: none;
    border-color: #6090ff;
    box-shadow: 0 0 0 1px rgba(96,144,255,.2);
}

.stat-row .remove-stat {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: .9rem;
    text-align: center;
}

.stat-row .remove-stat:hover {
    color: #c0392b;
}

@media (max-width: 600px) {
    .stat-row {
        grid-template-columns: 1fr;
        gap: .4rem;
    }

    .stat-row .remove-stat {
        justify-self: flex-end;
    }
}

.stat-set .add-stat {
    justify-self: flex-start;
    padding: .35rem .75rem;
    border-radius: .5rem;
    border: 1px dashed #ccc;
    background: #f9f9f9;
    cursor: pointer;
    font-size: .85rem;
}

.stat-set .add-stat:hover {
    background: #f0f0f0;
}

#add-stat-set {
    margin-top: .5rem;
    padding: .45rem 1rem;
    border-radius: .5rem;

    background: #f5f5f5;        /* gris clar */
    color: #333;               /* text fosc */
    border: 1px solid #ccc;

    cursor: pointer;
}

#add-stat-set:hover {
    background: #eeeeee;
    border-color: #bbb;
}

@media (max-width: 600px) {
    .stat-row {
        grid-template-columns: 1fr;
    }
}