/* ==========================================================
   RUSSOS AMS
   STAFF MANAGEMENT
   MITARBEITER / BEARBEITEN
========================================================== */


/* ==========================================================
   GRUNDLAGE
========================================================== */

.ams-staff-page {

    width:100%;
    min-height:100%;

    padding:38px 42px 80px;

    box-sizing:border-box;

    color:#DDE8EE;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ==========================================================
   HEADER
========================================================== */

.ams-staff-header {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:30px;

    padding-bottom:26px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.ams-staff-kicker {

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:11px;

    letter-spacing:4px;

    margin-bottom:10px;
}


.ams-staff-header h1 {

    margin:0;

    color:#E4EDF2;

    font-size:32px;

    font-weight:700;

    letter-spacing:4px;

    line-height:1.1;
}


.ams-staff-header p {

    margin:9px 0 0;

    color:#71828D;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:11px;

    letter-spacing:2px;

    line-height:1.5;
}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.ams-staff-header-actions {

    display:flex;

    align-items:center;

    gap:10px;
}


.staff-primary-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:44px;

    padding:0 19px;

    box-sizing:border-box;

    color:#00F2FE;

    text-decoration:none;

    border:
        1px solid
        rgba(0,242,254,.30);

    background:
        linear-gradient(
            145deg,
            rgba(0,242,254,.08),
            rgba(0,242,254,.025)
        );

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:11px;

    letter-spacing:2px;

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


.staff-primary-button span {

    font-size:17px;

    line-height:1;
}


.staff-primary-button:hover {

    border-color:
        rgba(0,242,254,.55);

    background:
        rgba(0,242,254,.10);

    box-shadow:
        0 0 18px
        rgba(0,242,254,.07);

    transform:
        translateY(-1px);
}

/* ==========================================================
   DASHBOARD BUTTON
========================================================== */

.staff-secondary-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    padding:0 18px;

    box-sizing:border-box;

    color:#81909A;

    text-decoration:none;

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

    background:#080C0F;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:11px;

    letter-spacing:1.8px;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.staff-secondary-button:hover {

    color:#DDE8EE;

    border-color:
        rgba(0,242,254,.24);

    background:
        rgba(0,242,254,.025);

    transform:
        translateY(-1px);
}
/* ==========================================================
   STATISTIK
========================================================== */

.ams-staff-statistics {

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:12px;

    margin-top:22px;
}


.staff-stat-card {

    min-height:100px;

    padding:18px 20px;

    box-sizing:border-box;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018);
}


.staff-stat-card span {

    display:block;

    color:#687984;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:2px;
}


.staff-stat-card strong {

    display:block;

    margin-top:10px;

    color:#E2ECF1;

    font-size:27px;

    font-weight:700;

    line-height:1;
}


.staff-stat-card small {

    display:block;

    margin-top:8px;

    color:#536570;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:9px;

    letter-spacing:1.5px;
}


.staff-stat-card.active {

    border-color:
        rgba(0,242,254,.18);

    box-shadow:
        inset 2px 0 0
        rgba(0,242,254,.22);
}


/* ==========================================================
   TOOLBAR
========================================================== */

.ams-staff-toolbar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:30px;

    margin-bottom:14px;
}


.toolbar-kicker {

    display:block;

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:3px;
}


.ams-staff-toolbar strong {

    display:block;

    margin-top:5px;

    color:#DDE8EE;

    font-size:15px;

    letter-spacing:1.5px;
}


.staff-search input {

    width:270px;

    min-height:42px;

    padding:
        0 14px;

    box-sizing:border-box;

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

    outline:none;

    background:#070B0E;

    color:#DDE8EE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:11px;

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


.staff-search input::placeholder {

    color:#4F606B;
}


.staff-search input:focus {

    border-color:
        rgba(0,242,254,.35);

    box-shadow:
        0 0 14px
        rgba(0,242,254,.045);
}


/* ==========================================================
   MITARBEITER LISTE
========================================================== */

.ams-staff-list {

    display:grid;

    gap:9px;
}


/* ==========================================================
   MITARBEITER KARTE
========================================================== */

.staff-card {

    display:grid;

    grid-template-columns:
        110px
        minmax(250px,1.6fr)
        minmax(160px,1fr)
        150px
        auto;

    align-items:center;

    gap:22px;

    min-height:96px;

    padding:
        15px 18px;

    box-sizing:border-box;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        );

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


.staff-card:hover {

    border-color:
        rgba(0,242,254,.16);

    background:
        linear-gradient(
            145deg,
            rgba(0,242,254,.028),
            rgba(255,255,255,.006)
        );

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

    transform:
        translateY(-1px);
}


/* ==========================================================
   BESCHRIFTUNGEN
========================================================== */

.staff-number span,
.staff-role span {

    display:block;

    color:#596B76;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:9px;

    letter-spacing:2px;
}


.staff-number strong {

    display:block;

    margin-top:7px;

    color:#8C9AA4;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:13px;

    letter-spacing:1px;
}


/* ==========================================================
   IDENTITÄT
========================================================== */

.staff-identity {

    display:flex;

    align-items:center;

    gap:13px;

    min-width:0;
}


.staff-avatar {

    width:42px;

    height:42px;

    flex:
        0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    border:
        1px solid
        rgba(0,242,254,.22);

    background:
        radial-gradient(
            circle at center,
            rgba(0,242,254,.09),
            rgba(0,0,0,.18)
        );

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:12px;

    letter-spacing:1px;

    box-shadow:
        inset 0 0 10px
        rgba(0,242,254,.02);
}


.staff-identity div:last-child {

    min-width:0;
}


.staff-identity strong {

    display:block;

    overflow:hidden;

    color:#E0E9EE;

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.staff-identity span {

    display:block;

    margin-top:5px;

    overflow:hidden;

    color:#667984;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:1px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* ==========================================================
   ROLLE
========================================================== */

.staff-role strong {

    display:block;

    margin-top:7px;

    color:#CBD8DE;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;
}


/* ==========================================================
   STATUS
========================================================== */

.staff-status {

    display:flex;

    align-items:center;

    gap:10px;
}


.staff-status-dot {

    width:8px;

    height:8px;

    flex:
        0 0 8px;

    border-radius:50%;

    background:#37444C;
}


.staff-status-dot.aktiv {

    background:#00F2FE;

    box-shadow:
        0 0 9px
        rgba(0,242,254,.65);
}


.staff-status-dot.urlaub {

    background:#8A97A0;
}


.staff-status-dot.krank {

    background:#B47F7F;
}


.staff-status-dot.inaktiv {

    background:#3A454D;
}


.staff-status strong {

    display:block;

    margin-top:5px;

    color:#A4B0B7;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:1.5px;
}


/* ==========================================================
   AKTIONEN
========================================================== */

.staff-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:7px;
}


.staff-action-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:36px;

    padding:
        0 13px;

    box-sizing:border-box;

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

    background:#070B0E;

    color:#7D8C95;

    text-decoration:none;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:9px;

    letter-spacing:1.5px;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.staff-action-button:hover {

    color:#00F2FE;

    border-color:
        rgba(0,242,254,.28);

    background:
        rgba(0,242,254,.035);
}


.staff-action-permissions {

    color:#00F2FE;

    border-color:
        rgba(0,242,254,.20);
}


/* ==========================================================
   LEERER ZUSTAND
========================================================== */

.staff-empty {

    padding:
        70px 30px;

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

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

    text-align:center;
}


.staff-empty-icon {

    color:#00F2FE;

    font-size:30px;

    line-height:1;
}


.staff-empty > span {

    display:block;

    margin-top:14px;

    color:#DDE8EE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:12px;

    letter-spacing:3px;
}


.staff-empty p {

    margin:9px 0 0;

    color:#60727D;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    line-height:1.6;
}


/* ==========================================================
   MITARBEITER BEARBEITEN
========================================================== */

.edit-staff-identity {

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:24px;

    padding:
        18px 20px;

    box-sizing:border-box;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        );
}


.edit-staff-avatar {

    width:52px;

    height:52px;

    flex:
        0 0 52px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    border:
        1px solid
        rgba(0,242,254,.24);

    background:
        rgba(0,242,254,.035);

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:15px;

    letter-spacing:1px;
}


.edit-staff-identity span {

    display:block;

    color:#566874;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:9px;

    letter-spacing:2px;
}


.edit-staff-identity strong {

    display:block;

    margin-top:5px;

    color:#E1EBEF;

    font-size:18px;

    font-weight:700;

    letter-spacing:1px;
}


.edit-staff-identity small {

    display:block;

    margin-top:5px;

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:1.5px;
}


/* ==========================================================
   FORM MESSAGE
========================================================== */

.staff-form-message {

    margin-top:16px;

    padding:
        13px 16px;

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

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    line-height:1.5;
}


.staff-form-error {

    color:#E09A9A;

    border-color:
        rgba(220,90,90,.25);

    background:
        rgba(220,90,90,.035);
}


/* ==========================================================
   EDIT FORM
========================================================== */

.staff-edit-form {

    margin-top:22px;
}


/* ==========================================================
   EDIT SECTION
========================================================== */

.staff-edit-section {

    margin-top:16px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.004)
        );
}


.staff-edit-section-header {

    padding:
        18px 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}


.staff-edit-section-header span {

    display:block;

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:9px;

    letter-spacing:3px;
}


.staff-edit-section-header h2 {

    margin:
        6px 0 0;

    color:#E0E9EE;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;
}


/* ==========================================================
   FORM GRID
========================================================== */

.staff-edit-grid {

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;

    padding:22px;
}


/* ==========================================================
   FORM FELD
========================================================== */

.staff-edit-field label {

    display:block;

    margin-bottom:8px;

    color:#667984;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:2px;
}


.staff-edit-field input,
.staff-edit-field select {

    width:100%;

    min-height:46px;

    padding:
        10px 14px;

    box-sizing:border-box;

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

    outline:none;

    border-radius:0;

    background:#070B0E;

    color:#E0E9EE;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px;

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


.staff-edit-field input:hover,
.staff-edit-field select:hover {

    border-color:
        rgba(255,255,255,.16);
}


.staff-edit-field input:focus,
.staff-edit-field select:focus {

    border-color:
        rgba(0,242,254,.38);

    background:
        #080D10;

    box-shadow:
        0 0 15px
        rgba(0,242,254,.045);
}


.staff-edit-field input::placeholder {

    color:#4D606B;
}


/* ==========================================================
   SECURITY NOTE
========================================================== */

.staff-edit-security-note {

    margin:
        0 22px 22px;

    padding:
        15px 17px;

    border-left:
        2px solid
        rgba(0,242,254,.30);

    background:
        rgba(0,242,254,.025);
}


.staff-edit-security-note span {

    display:block;

    color:#00F2FE;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:9px;

    letter-spacing:2px;
}


.staff-edit-security-note p {

    margin:
        7px 0 0;

    color:#72828C;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    line-height:1.65;
}


/* ==========================================================
   EDIT AKTIONEN
========================================================== */

.staff-edit-actions {

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

    margin-top:20px;

    padding:12px;

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

    background:
        rgba(5,8,10,.90);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 -10px 30px
        rgba(0,0,0,.20);
}


.staff-edit-button {

    min-height:44px;

    padding:
        0 20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

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

    text-decoration:none;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:2px;

    cursor:pointer;

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


.button-cancel {

    color:#7D8B94;

    background:#080C0F;
}


.button-cancel:hover {

    color:#C5D0D6;

    border-color:
        rgba(255,255,255,.15);
}


.button-save {

    color:#00F2FE;

    border-color:
        rgba(0,242,254,.28);

    background:
        rgba(0,242,254,.055);
}


.button-save:hover {

    color:#5DFAFF;

    border-color:
        rgba(0,242,254,.50);

    background:
        rgba(0,242,254,.09);

    box-shadow:
        0 0 18px
        rgba(0,242,254,.06);
}


/* ==========================================================
   RESPONSIVE – TABLET
========================================================== */

@media (max-width:1000px) {

    .ams-staff-statistics {

        grid-template-columns:
            repeat(2,1fr);
    }


    .staff-card {

        grid-template-columns:
            90px
            1fr
            1fr;

        gap:15px;
    }


    .staff-role {

        grid-column:span 1;
    }


    .staff-status {

        grid-column:span 1;
    }


    .staff-actions {

        grid-column:
            1 / -1;

        justify-content:flex-start;
    }

}


/* ==========================================================
   RESPONSIVE – MOBILE
========================================================== */

@media (max-width:700px) {

    .ams-staff-page {

        padding:
            24px 18px 70px;
    }


    .ams-staff-header {

        flex-direction:column;

        align-items:stretch;
    }


    .ams-staff-header h1 {

        font-size:28px;
    }


    .ams-staff-header p {

        font-size:10px;
    }


    .ams-staff-header-actions {

        justify-content:flex-start;
    }


    .ams-staff-statistics {

        grid-template-columns:1fr;
    }


    .ams-staff-toolbar {

        flex-direction:column;

        align-items:stretch;
    }


    .staff-search input {

        width:100%;
    }


    .staff-card {

        grid-template-columns:1fr;

        gap:14px;

        min-height:0;

        padding:18px;
    }


    .staff-status,
    .staff-actions {

        grid-column:auto;
    }


    .staff-actions {

        justify-content:flex-start;

        flex-wrap:wrap;
    }


    .staff-edit-grid {

        grid-template-columns:1fr;

        padding:18px;
    }


    .staff-edit-security-note {

        margin:
            0 18px 18px;
    }


    .staff-edit-actions {

        flex-direction:column;

        align-items:stretch;
    }


    .staff-edit-button {

        width:100%;
    }

}
/* ==========================================================
   DEAKTIVIEREN
========================================================== */

.staff-deactivate-form {
    margin:0;
}

.staff-action-danger {
    color:#D89090;
    border-color:rgba(215,100,100,.22);
    background:rgba(215,100,100,.025);
    cursor:pointer;
}

.staff-action-danger:hover {
    color:#F0AAAA;
    border-color:rgba(215,100,100,.45);
    background:rgba(215,100,100,.07);
    box-shadow:0 0 14px rgba(215,100,100,.05);
}
/* ==========================================================
   STAFF CONTENTEDITABLE FIELDS
========================================================== */

.staff-field-label {

    display:block;

    margin-bottom:8px;

    color:#667984;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:2px;
}


.staff-content-field {

    width:100%;

    min-height:46px;

    padding:
        10px 14px;

    box-sizing:border-box;

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

    outline:none;

    background:#070B0E;

    color:#E0E9EE;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px;

    line-height:24px;

    cursor:text;

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


.staff-content-field:hover {

    border-color:
        rgba(255,255,255,.16);
}


.staff-content-field:focus {

    border-color:
        rgba(0,242,254,.38);

    background:#080D10;

    box-shadow:
        0 0 15px
        rgba(0,242,254,.045);
}


.staff-content-field.is-empty::before {

    content:
        attr(data-placeholder);

    color:#4D606B;

    pointer-events:none;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    .staff-card,
    .staff-primary-button,
    .staff-action-button,
    .staff-edit-button,
    .staff-edit-field input,
    .staff-edit-field select {

        transition:none !important;
    }

}