/* ========================== *
 * ## Property Declaration ##
 * ========================== */

:root {
    --cdm-list-row-height: 32px;
    --cdm-list-row-padding: 5px;

    --stand-editor-list-rows-max: 10;
    --user-management-list-row-max: 10;
}

/* =========== *
 * ## Pages ##
 * =========== */

body[data-page="login"],
body[data-page="stand-editor"],
body[data-page="user-management"]{
    background: var(--grey);
}


/* ============================= *
 * ## CDM Interactive Editors ##
 * ============================= */

.cdm-interactive-editor {
    border-style: solid;
    border-width: 1px;
    display: flex;
    flex-direction: column;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
}

.cdm-interactive-editor > .header {
    font-size: 18px;
    font-weight: bold;
    line-height:18px;
    padding: 10px;
    text-transform: uppercase;
}

.cdm-interactive-editor .list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdm-interactive-editor .list-container .button-container {
    display: flex;
    flex-direction: row;
}

.cdm-interactive-editor .section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.cdm-interactive-editor .section > .header {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.cdm-interactive-editor .section > .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cdm-interactive-editor .action-button-container {
    display:flex;
    flex-direction: row;
    gap: 20px;
    position: relative;
    width: 100%;
}

.cdm-interactive-editor .ui-dynamic-list .list .list-row {
    height: var(--cdm-list-row-height);
    line-height: calc(var(--cdm-list-row-height) - (var(--cdm-list-row-padding) * 2));
    padding: var(--cdm-list-row-padding);
}


/* ========================= *
 * ## CDM Login Interface ##
 * ========================= */

.cdm-login-interface {
    background: var(--login-bg);
    border-color: var(--login-border);
    border-style: solid;
    border-width: 1px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cdm-login-interface .content {
    padding: 10px;
}

.cdm-login-interface .content .login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdm-login-interface .content .login-form .login-form-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.cdm-login-interface .content .login-form .login-form-row > label {
    color: var(--login-row-text);
    font-weight: bold;
    line-height: 23px;
    width: 70px;
}

.cdm-login-interface .content .login-form .login-button {
    margin: 0;
}

.cdm-login-interface .content .login-form .forgot-password-link {
    display: none;
}

.cdm-login-interface .footer {
    background: var(--login-footer-bg);
    color: var(--login-footer-text);
    display: flex;
    flex-direction: row;
    justify-content: end;
    line-height: 16px;
    padding: 10px;
}

.cdm-login-interface .footer .version-container {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    gap: 5px;
    height: 16px;
    line-height: 16px;
}

.cdm-login-interface .header {
    background: var(--login-header-bg);
    color: var(--login-header-text);
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    padding: 10px;
    text-transform: uppercase;
}


/* ================== *
 * ## Stand Editor ##
 * ================== */

.stand-editor-component {
    background: var(--se-bg);
    border-color: var(--se-border);
    max-width: 400px;
}

.stand-editor-component > .header {
    background-color: var(--se-header-bg);
    color: var(--se-header-text);
}

.stand-editor-component .list-container .role-status-list .list.custom_scroll {
    max-height: 320px;
}

.stand-editor-component .section > .header {
    color: var(--se-section-header-font);
}

.stand-editor-component .action-button-container .role-logout {}
.stand-editor-component .action-button-container .role-back-to-cdm {}
.stand-editor-component .action-button-container .role-documentation {}

.stand-editor-component .ui-dynamic-list .list {
    max-height: calc(var(--stand-editor-list-rows-max) * var(--cdm-list-row-height));
}


/* ========================= *
 * ## Taxiway Block Layer ##
 * ========================= */

.taxiway-block-layer .taxiway-block-label {
    transform: translate(-50%, -10px);
}


/* ===================== *
 * ## User Management ##
 * ===================== */

.user-management-component {
    background: var(--um-bg);
    border-color: var(--um-border);
    max-width: 1100px;
}

.user-management-component > .header {
    background-color: var(--um-header-bg);
    color: var(--um-header-text);
}

.user-management-component .list-container .role-status-list .list.custom_scroll {
    max-height: 640px;
}

.user-management-component .section > .header {
    color: var(--um-section-header-font);
}

.user-management-component .ui-dynamic-list .list {
    max-height: calc(var(--user-management-list-row-max) * var(--cdm-list-row-height));
}

.user-management-list-popup .ui-input .input-container { width: 250px; }