/* ==========================================================
   /ui/css/base/ljh-user-form.css
   LJH USER FORM – HR Panel Styling
   ----------------------------------------------------------
   Ansvar:
   - HR panel-wrappers (new, update, role)
   - Panel-typografi och labels
   - Select-styling för HR-formulär
   - Primär HR action-knapp
   ----------------------------------------------------------
   Används av: app_users.php
   Prefix: .admin-panel-*
========================================================== */


/* ==========================================================
   HR PANEL WRAPPER
========================================================== */

.admin-panel-new,
.admin-panel-update,
.admin-panel-role {
    max-width: 720px;
    margin-top: 2rem;
    padding: 2.5rem;
    border-radius: 28px;
    background: linear-gradient(
        180deg,
        rgba(20,40,65,0.65),
        rgba(10,25,45,0.75)
    );
    backdrop-filter: blur(12px);
    border: 1px solid rgba(120,180,255,0.25);
}


/* ==========================================================
   PANEL TYPOGRAFI
========================================================== */

.admin-panel-new h3,
.admin-panel-update h3,
.admin-panel-role h3 {
    font-size: 1.4rem;
    margin-bottom: 1.8rem;
    color: rgba(220,240,255,0.95);
}

.admin-panel-new label,
.admin-panel-update label,
.admin-panel-role label {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(180,210,240,0.75);
    margin-bottom: 6px;
}


/* ==========================================================
   SELECT STYLING
========================================================== */

.admin-panel-new select,
.admin-panel-update select,
.admin-panel-role select {
    background: linear-gradient(
        180deg,
        rgba(35,65,95,0.85),
        rgba(20,45,70,0.95)
    );
    color: rgba(235,245,255,0.95);
    font-weight: 500;
    border: 1px solid rgba(120,180,255,0.35);
}

.admin-panel-new select option,
.admin-panel-update select option,
.admin-panel-role select option {
    background: #0f2236;
    color: #e8f4ff;
}


/* ==========================================================
   PRIMÄR HR ACTION-KNAPP
========================================================== */

.admin-panel-new .ljh-button.large,
.admin-panel-update .ljh-button.large,
.admin-panel-role .ljh-button.large {
    width: 100%;
    margin-top: 1.6rem;
    background: linear-gradient(
        180deg,
        rgba(80,180,255,0.95),
        rgba(40,140,220,0.95)
    );
    border: 1px solid rgba(120,200,255,0.6);
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 18px;
    padding: 0.9rem 1.2rem;
    transition: all 0.25s ease;
}

.admin-panel-new .ljh-button.large:hover,
.admin-panel-update .ljh-button.large:hover,
.admin-panel-role .ljh-button.large:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(80,180,255,0.35);
}

.admin-panel-new .ljh-button.large:active,
.admin-panel-update .ljh-button.large:active,
.admin-panel-role .ljh-button.large:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(80,180,255,0.25);
}