/* ==========================================================
   PAGE HEADER ICON
========================================================== */

.page-header-icon{
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:52px;
    height:52px;
    border-radius:16px;
    background:var(--gold);
    color:var(--white);
}

.page-header-icon svg{
    width:26px;
    height:26px;
}

.page-header-title-group{
    display:flex;
    align-items:center;
    gap:16px;
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:48px;

    padding:13px 26px;

    border:1px solid var(--border);
    border-radius:var(--radius-md);

    background:var(--gold);
    color:var(--white);

    font-weight:700;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);
}

.btn:hover{

    background:var(--gold-light);

    border-color:var(--gold-light);

    transform:translateY(-2px);

    box-shadow:
        0 12px 26px rgba(78,143,255,.30);
}

.btn:active{

    transform:translateY(0);
}

.btn-primary{

    background:var(--gold);

    color:var(--white);
}

.btn-primary:hover{

    background:var(--gold-light);
}

.btn-secondary{

    background:var(--surface-3);

    border-color:var(--border);

    color:var(--text-primary);
}

.btn-secondary:hover{

    background:var(--surface-4);

    border-color:var(--gold-light);
}

/* ==========================================================
   CARDS
========================================================== */

.card{

    background:var(--surface-3);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:26px;

    box-shadow:var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.card:hover{

    transform:translateY(-6px);

    border-color:var(--gold-light);

    box-shadow:var(--shadow-lg);
}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;
}

.badge-gold{

    background:var(--gold);

    color:var(--white);
}

.badge-success{

    background:var(--success);

    color:white;
}

.badge-danger{

    background:var(--danger);

    color:white;
}

/* ==========================================================
   INPUTS
========================================================== */

.input{

    width:100%;

    padding:14px 18px;

    background:var(--surface-2);

    color:var(--text-primary);

    border:2px solid var(--border);

    border-radius:var(--radius-md);

    outline:none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.input::placeholder{

    color:var(--text-muted);
}

.input:focus{

    border-color:var(--gold);

    box-shadow:
        0 0 0 4px rgba(78,143,255,.18);
}

/* ==========================================================
   DIVIDERS
========================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:28px 0;
}

/* ==========================================================
   TAGS
========================================================== */

.tag{

    display:inline-block;

    padding:6px 12px;

    background:var(--surface-4);

    color:var(--text-secondary);

    border:1px solid var(--border);

    border-radius:999px;

    font-size:.85rem;
}

/* ==========================================================
   LOADING SPINNER
========================================================== */

.spinner{

    width:40px;

    height:40px;

    border:4px solid var(--surface-4);

    border-top-color:var(--gold);

    border-radius:50%;

    animation:spin .8s linear infinite;
}

@keyframes spin{

    to{

        transform:rotate(360deg);
    }

}

/* ==========================================================
   TABLES
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:var(--surface-3);

    border:1px solid var(--border);
}

.table th{

    padding:16px;

    background:var(--surface-4);

    color:var(--text-primary);

    text-align:left;
}

.table td{

    padding:16px;

    border-top:1px solid var(--border);

    color:var(--text-secondary);
}

/* ==========================================================
   ALERTS
========================================================== */

.alert{

    padding:18px 20px;

    border-radius:var(--radius-md);

    border-left:5px solid;

    margin:18px 0;
}

.alert-success{

    background:rgba(43,182,115,.12);

    border-color:var(--success);

    color:#CFF6E2;
}

.alert-warning{

    background:rgba(242,184,75,.12);

    border-color:var(--warning);

    color:#FFE9B5;
}

.alert-danger{

    background:rgba(230,91,91,.12);

    border-color:var(--danger);

    color:#FFD1D1;
}