/* ==========================================================
   RUSSOS AMS
   PERMISSIONS
========================================================== */

.ams-permission-page {
    width:100%;
    min-height:100%;
    padding:38px 42px 80px;
    box-sizing:border-box;
    color:#DDE8EE;
    font-family:Arial,Helvetica,sans-serif;
}


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

.ams-permission-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.ams-permission-kicker {
    color:#00F2FE;
    font-family:Consolas,monospace;
    font-size:11px;
    letter-spacing:4px;
    margin-bottom:10px;
}

.ams-permission-header h1 {
    margin:0;
    font-size:32px;
    letter-spacing:4px;
}

.ams-permission-header p {
    margin:8px 0 0;
    color:#647582;
    font-family:Consolas,monospace;
    font-size:11px;
    letter-spacing:2px;
}


/* ==========================================================
   EMPLOYEE
========================================================== */

.ams-permission-employee {
    min-width:240px;
    padding:14px 18px;
    border-left:1px solid rgba(0,242,254,.25);
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.008)
    );
}

.ams-permission-employee-status {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    color:#00F2FE;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:2px;
}

.status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#00F2FE;
    box-shadow:0 0 10px rgba(0,242,254,.8);
}

.ams-permission-employee strong {
    display:block;
    font-size:16px;
    letter-spacing:2px;
}

.ams-permission-employee small {
    display:block;
    margin-top:5px;
    color:#677783;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:2px;
}


/* ==========================================================
   SUMMARY
========================================================== */

.ams-permission-summary {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:20px;
}

.permission-summary-card {
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.065);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        );
}

.permission-summary-card span {
    display:block;
    color:#60727E;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:2px;
}

.permission-summary-card strong {
    display:block;
    margin-top:9px;
    font-size:24px;
    letter-spacing:1px;
}

.permission-summary-card small {
    display:block;
    margin-top:4px;
    color:#4F616C;
    font-family:Consolas,monospace;
    font-size:9px;
    letter-spacing:1px;
}


/* ==========================================================
   NOTICE
========================================================== */

.ams-permission-notice {
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:18px;
    padding:15px 18px;
    border:1px solid rgba(0,242,254,.12);
    background:rgba(0,242,254,.025);
}

.notice-icon {
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,242,254,.35);
    color:#00F2FE;
    font-family:Consolas,monospace;
    font-weight:bold;
}

.ams-permission-notice strong {
    display:block;
    color:#00F2FE;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:2px;
}

.ams-permission-notice p {
    margin:5px 0 0;
    color:#687984;
    font-family:Consolas,monospace;
    font-size:10px;
    line-height:1.6;
}


/* ==========================================================
   GROUPS
========================================================== */

.ams-permission-groups {
    display:grid;
    gap:16px;
    margin-top:24px;
}

.ams-permission-group {
    border:1px solid rgba(255,255,255,.07);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.004)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 10px 30px rgba(0,0,0,.12);
}


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

.ams-permission-group-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.018);
}

.group-kicker {
    display:block;
    margin-bottom:4px;
    color:#00F2FE;
    font-family:Consolas,monospace;
    font-size:9px;
    letter-spacing:3px;
}

.ams-permission-group-header h2 {
    margin:0;
    font-size:16px;
    letter-spacing:3px;
}

.group-count {
    padding:5px 9px;
    border:1px solid rgba(0,242,254,.18);
    color:#6E818D;
    font-family:Consolas,monospace;
    font-size:9px;
    letter-spacing:1.5px;
}


/* ==========================================================
   ROW
========================================================== */

.ams-permission-row {
    display:grid;
    grid-template-columns:minmax(250px,1.3fr) 150px minmax(300px,1fr);
    align-items:center;
    gap:18px;
    min-height:72px;
    padding:14px 20px;
    border-bottom:1px solid rgba(255,255,255,.035);
    transition:
        background .18s ease,
        border-color .18s ease;
}

.ams-permission-row:last-child {
    border-bottom:none;
}

.ams-permission-row:hover {
    background:rgba(0,242,254,.018);
    border-color:rgba(0,242,254,.08);
}


/* ==========================================================
   NAME
========================================================== */

.permission-name strong {
    display:block;
    color:#DDE8EE;
    font-size:14px;
	font-weight: 700;
    letter-spacing:1px;
}

.permission-name span {
    display:block;
    margin-top:4px;
    color:#546773;
    font-family:Consolas,monospace;
    font-size:10px;
	line-height: 1.4;
    letter-spacing:1px;
}


/* ==========================================================
   ROLE STATE
========================================================== */

.permission-role-state {
    text-align:center;
}

.state-role {
    color:#00F2FE;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:1px;
}

.state-none {
    color:#485761;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:1px;
}


/* ==========================================================
   OPTIONS
========================================================== */

.permission-controls {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.permission-option {
    position:relative;
    cursor:pointer;
}

.permission-option input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.permission-option span {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    border:1px solid rgba(255,255,255,.07);
    background:#070B0E;
    color:#566874;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:1px;
    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.permission-option:hover span {
    border-color:rgba(0,242,254,.18);
    color:#9CAAB2;
}

.option-inherit input:checked + span {
    border-color:rgba(0,242,254,.30);
    background:rgba(0,242,254,.06);
    color:#00F2FE;
    box-shadow:
        inset 0 0 12px rgba(0,242,254,.025);
}

.option-allow input:checked + span {
    border-color:rgba(0,242,254,.45);
    background:rgba(0,242,254,.09);
    color:#00F2FE;
    box-shadow:
        0 0 14px rgba(0,242,254,.06);
}

.option-deny input:checked + span {
    border-color:rgba(215,100,100,.38);
    background:rgba(215,100,100,.07);
    color:#E09292;
}


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

.ams-permission-actions {
    position:sticky;
    bottom:10px;
    z-index:20;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:22px;
    padding:12px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(5,8,10,.88);
    backdrop-filter:blur(12px);
    box-shadow:0 -10px 30px rgba(0,0,0,.25);
}

.permission-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    font-family:Consolas,monospace;
    font-size:10px;
    letter-spacing:2px;
    cursor:pointer;
}

.button-back {
    color:#73838E;
    background:#080C0F;
}

.button-save {
    color:#00F2FE;
    background:rgba(0,242,254,.055);
    border-color:rgba(0,242,254,.28);
}

.button-save:hover {
    background:rgba(0,242,254,.09);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1000px) {

    .ams-permission-summary {
        grid-template-columns:repeat(2,1fr);
    }

    .ams-permission-row {
        grid-template-columns:1fr;
        gap:10px;
    }

    .permission-role-state {
        text-align:left;
    }

}

@media (max-width: 650px) {

    .ams-permission-header h1 {
        font-size: 26px;
    }

    .permission-name strong {
        font-size: 13px;
    }

    .permission-name span {
        font-size: 10px;
    }

    .permission-option span {
        min-height: 38px;
        font-size: 10px;
    }

}