/* ==========================================================================
   COMPONENTS.CSS
   Globale UI-Komponenten für das gesamte CrewHub
   ========================================================================== */


/* ==========================================================
   Buttons
========================================================== */

.btn-primary,
.btn-secondary,
.btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    padding: 0 18px;

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

    font-size: 9.5pt;
    font-weight: 600;

    cursor: pointer;

    transition:
        all .2s ease;
}

/* ================= Primary ================= */

.btn-primary {

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

    box-shadow:
        0 6px 18px rgba(0,0,0,.18);

}

.btn-primary:hover {

    background: var(--primary-hover);

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.25);

}

/* ================= Secondary ================= */

.btn-secondary {

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    color: var(--text-main);

}

.btn-secondary:hover {

    background: rgba(255,255,255,.07);

    transform: translateY(-2px);

}

/* ================= Text ================= */

.btn-text {

    background: transparent;

    color: var(--text-muted);

}

.btn-text:hover {

    color: var(--text-main);

    background: rgba(255,255,255,.05);

}

/* ==========================================================
   Icon Box
========================================================== */

.icon-box {

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    font-size: 18pt;

    flex-shrink: 0;

    transition:
        transform .2s ease,
        background .2s ease;

}

.icon-box:hover{
    transform: scale(1.06);
}

/* ===== Farben ===== */

.icon-primary{

    background: color-mix(in srgb,var(--primary) 14%,transparent);
    color: var(--primary);

}

.icon-success{

    background: color-mix(in srgb,var(--success) 14%,transparent);
    color: var(--success);

}

.icon-warning{

    background: color-mix(in srgb,var(--warning) 14%,transparent);
    color: var(--warning);

}

.icon-danger{

    background: color-mix(in srgb,var(--danger) 14%,transparent);
    color: var(--danger);

}

.icon-purple{

    background: rgba(139,92,246,.12);
    color:#8b5cf6;

}

/* ==========================================================
   Badges
========================================================== */

.badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 8.5pt;
    font-weight: 600;

    border: 1px solid transparent;

    white-space: nowrap;

}

.badge-success{
    background: rgba(34,197,94,.12);
    color: var(--success);
    border-color: rgba(34,197,94,.22);
}

.badge-warning{
    background: rgba(245,158,11,.12);
    color: var(--warning);
    border-color: rgba(245,158,11,.22);
}

.badge-danger{
    background: rgba(239,68,68,.12);
    color: var(--danger);
    border-color: rgba(239,68,68,.22);
}

.badge-primary{
    background: var(--primary-light);
    color: var(--primary);
    border-color: color-mix(in srgb,var(--primary) 25%,transparent);
}

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

input,
select,
textarea{

    width:100%;

    padding:10px 14px;

    color:var(--text-main);

    background:var(--bg-card);

    border:1px solid rgba(255,255,255,.06);

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

    transition:border-color .2s ease,
               box-shadow .2s ease;
}


input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}



/* ==========================================================================
   CARD
   ========================================================================== */

.card{

    background:var(--bg-card);

    border:1px solid rgba(255,255,255,.04);

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

    padding:24px;

}


.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}


.card-body{

    width:100%;

}


.card-footer{

    margin-top:24px;

}



/* ==========================================================================
   TABLE
   ========================================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

th{

    text-align:left;

    color:var(--text-muted);

    font-weight:600;

}

th,
td{

    padding:12px 14px;

}

tbody tr{

    border-top:1px solid rgba(255,255,255,.04);

}



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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:8.5pt;

    font-weight:600;

}

.badge-success{

    background:rgba(16,185,129,.12);

    color:var(--success);

}

.badge-warning{

    background:rgba(245,158,11,.12);

    color:var(--warning);

}

.badge-danger{

    background:rgba(239,68,68,.12);

    color:var(--danger);

}



/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.12);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:rgba(255,255,255,.22);

}

/* ==========================================================
   Glass Card
========================================================== */

.glass-card {
    background:
        radial-gradient(
            85% 85% at 100% 0%,
            rgba(255,255,255,.04) 0%,
            rgba(255,255,255,0) 100%
        ),
        rgba(15,23,42,.45);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-lg);

    box-shadow: 0 12px 40px rgba(0,0,0,.30);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 16px 48px rgba(0,0,0,.40);
}

/* ==========================================================
   Glass Panel (große Container)
========================================================== */

.glass-panel {

    background:
        radial-gradient(
            120% 120% at 100% 0%,
            rgba(255,255,255,.03) 0%,
            rgba(255,255,255,0) 70%
        ),
        rgba(15,23,42,.22);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,.05);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 36px rgba(0,0,0,.18);

    padding: 24px;
}