:root {
    --xfm-bg: #0b1220;
    --xfm-surface: #111c2e;
    --xfm-panel: #16243a;
    --xfm-border: #263955;
    --xfm-text: #e8eef7;
    --xfm-muted: #9baec8;
    --xfm-primary: #2f80ed;
    --xfm-success: #27ae60;
    --xfm-warning: #f2c94c;
    --xfm-danger: #eb5757;

    --rz-primary: var(--xfm-primary);
    --rz-text-color: var(--xfm-text);
    --rz-base-200: var(--xfm-surface);
    --rz-base-300: var(--xfm-panel);
    --rz-base-500: var(--xfm-muted);

    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
}

* {
    box-sizing: border-box;
}

html,
body,
#app {
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--xfm-bg);
    color: var(--xfm-text);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 2000;
    right: 1rem;
    bottom: 1rem;
    padding: .75rem 1rem;
    color: #ffffff;
    background: #8d2530;
    border: 1px solid #c94755;
    border-radius: 5px;
}

#blazor-error-ui .dismiss {
    margin-left: .75rem;
    cursor: pointer;
}

.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: #09101c;
    border-bottom: 1px solid var(--xfm-border);
}

.brand {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.brand span {
    color: var(--xfm-muted);
    font-weight: 400;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.culture-selector {
    min-height: 32px;
    padding: .25rem .55rem;
    color: #d9e7f8;
    background: #111c2e;
    border: 1px solid #476a91;
    border-radius: 5px;
}

.culture-selector option {
    color: #d9e7f8;
    background: #111c2e;
}

.content-shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    display: flex;
    flex: 0 0 220px;
    flex-direction: column;
    gap: 3px;
    padding: 1rem .75rem;
    background: var(--xfm-surface);
    border-right: 1px solid var(--xfm-border);
}

.sidebar a,
.sidebar span:not(.menu-caption) {
    display: block;
    padding: .55rem .7rem;
    color: var(--xfm-muted);
    border-radius: 5px;
    text-decoration: none;
}

.sidebar a:hover,
.sidebar a.active {
    background: #203452;
    color: #ffffff;
}

.menu-caption {
    display: block;
    margin: 1rem .7rem .25rem;
    color: #6f88aa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.75rem 2rem;
    background: var(--xfm-bg);
}

h1 {
    margin: 0 0 1.25rem;
    color: #ffffff;
    font-size: 25px;
    letter-spacing: -.02em;
}

h2 {
    color: #ffffff;
    font-size: 16px;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.page-heading h1 {
    margin-bottom: 0;
}

.check-field {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1rem 0;
}

.membership-selection {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(200px, .8fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.selection-card,
.membership-members {
    padding: 1rem;
    background: var(--xfm-surface);
    border: 1px solid var(--xfm-border);
    border-radius: 7px;
}

.selection-card h2,
.membership-members h2 {
    margin-top: 0;
}

.assignment-select,
.role-select {
    width: 100%;
    color: #d7e5f6;
    background: #0d1726;
    border: 1px solid #38506f;
    border-radius: 5px;
}

.assignment-select { padding: .5rem; }
.assignment-card button { width: 100%; }
.role-select { min-width: 130px; padding: .3rem; }
.muted { color: var(--xfm-muted); }
.danger-button { color: #ffd6d9; background: #622b36; border-color: #a84d5a; }

.project-selector {
    min-width: 280px;
    padding: .5rem;
    color: #d7e5f6;
    background: #0d1726;
    border: 1px solid #38506f;
    border-radius: 5px;
}

/* El proyecto se selecciona una vez en la cabecera de la aplicación. */
.page-heading > .project-selector,
.lookup-panel > .project-selector,
.integration-project-selector,
.organization-layout .lookup-panel:nth-child(2) > .form-field:first-of-type {
    display: none;
}

.lookup-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(500px, 1.5fr); gap: 1rem; }
.organization-layout { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(280px, .9fr) minmax(340px, 1.35fr); gap: 1rem; align-items: start; }
.organization-nodes { min-height: 28rem; }
.organization-assignments { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.organization-assignments article { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; align-items: center; padding: .65rem; background: #0d1726; border: 1px solid var(--xfm-border); border-radius: 4px; }
.organization-assignments article small { color: var(--xfm-muted); }
.organization-assignments article > div { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.badge { padding: .15rem .4rem; color: #dceaff; background: #203f65; border: 1px solid #4775a6; border-radius: 10px; font-size: 11px; }
.lookup-panel { padding: 1rem; background: var(--xfm-surface); border: 1px solid var(--xfm-border); border-radius: 7px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.panel-title h2 { margin: 0; }
.lookup-list-items { display: flex; flex-direction: column; gap: .35rem; }
.lookup-list-item { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .65rem; color: var(--xfm-text); text-align: left; background: #0d1726; border: 1px solid var(--xfm-border); }
.lookup-list-item small { color: var(--xfm-muted); }
.lookup-list-item em { grid-row: span 2; align-self: center; color: var(--xfm-muted); font-size: 11px; font-style: normal; }
.lookup-list-item.selected { background: #203452; border-color: #4775a6; }

.translation-modal { position: fixed; z-index: 1001; top: 50%; left: 50%; width: min(520px, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow-y: auto; padding: 1.25rem; transform: translate(-50%, -50%); background: var(--xfm-panel); border: 1px solid var(--xfm-border); border-radius: 7px; box-shadow: 0 12px 32px rgb(0 0 0 / 40%); }
.translation-modal header, .translation-modal footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.translation-modal header h2 { margin: 0; }
.translation-key { display: flex; flex-direction: column; gap: .3rem; margin: 1rem 0; color: var(--xfm-muted); }
.translation-key code { padding: .45rem; color: #d7e5f6; background: #0d1726; border: 1px solid var(--xfm-border); border-radius: 4px; }
.translation-key-options { max-height: 12rem; overflow-y: auto; border: 1px solid var(--xfm-border); border-radius: 4px; background: #0d1726; }
.translation-key-options button { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .5rem .65rem; border: 0; border-bottom: 1px solid #223a58; border-radius: 0; color: var(--xfm-text); background: transparent; text-align: left; }
.translation-key-options button:hover { background: #1c3556; }
.translation-key-options small { color: var(--xfm-muted); }
.translation-key-status { color: #77c89a; }
.tree-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.25rem 0 .8rem; }
.tree-toolbar button { padding: .3rem .55rem; }
.asset-type-tree { margin: 0; padding: 0; list-style: none; }
.asset-type-tree ul { margin: .2rem 0 .2rem .9rem; padding-left: .8rem; border-left: 1px solid var(--xfm-border); list-style: none; }
.asset-type-tree li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); margin: .2rem 0; }
.asset-type-tree li > ul { grid-column: 2; }
.tree-row { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); grid-column: 1 / -1; }
.tree-toggle, .tree-toggle-placeholder { width: 1.5rem; height: 1.5rem; align-self: center; padding: 0; color: var(--xfm-muted); background: transparent; border: 1px solid transparent; font-size: 17px; line-height: 1; }
.tree-toggle { cursor: pointer; }
.tree-toggle:hover { color: #ffffff; background: #203452; border-color: var(--xfm-border); }
.tree-item { display: grid; width: 100%; grid-template-columns: minmax(5rem, .7fr) minmax(6rem, 1fr) auto; gap: .45rem; align-items: center; padding: .5rem .6rem; border: 1px solid transparent; border-radius: 4px; color: var(--xfm-text); background: transparent; text-align: left; }
.tree-item:hover, .tree-item.selected { border-color: var(--xfm-border); background: #1c3556; }
.asset-type-tree small, .asset-type-tree em { color: var(--xfm-muted); font-style: normal; }
.danger-button { color: #ff9ca6; background: transparent; border-color: #8e4350; }
.danger-button:hover { color: #fff; background: #7a2935; }
.system-footer { min-height: 34px; display: flex; align-items: center; padding: 0 1.5rem; border-top: 1px solid var(--xfm-border); background: #09101c; }
.system-message { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; color: #eef6ff; background: transparent; }
.system-message.success { border-color: #3f8a63; background: #153b2b; }
.system-message.error { border-color: #ae5660; background: #4a1d27; }
.system-message .link-button { color: inherit; }

@media (max-width: 900px) {
    .lookup-layout { grid-template-columns: 1fr; }
    .organization-layout { grid-template-columns: 1fr; }
    .project-selector { width: 100%; }
}

@media (max-width: 900px) {
    .membership-selection { grid-template-columns: 1fr; }
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.cards article,
.login-card {
    padding: 1.1rem;
    background: var(--xfm-surface);
    border: 1px solid var(--xfm-border);
    border-radius: 7px;
    box-shadow: none;
}

.login-page {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-card {
    width: min(420px, 100%);
    padding: 1.5rem;
}

.login-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.login-card h1 {
    margin: 0;
    font-size: 25px;
}

.login-card .form-field input {
    width: 100%;
}

.rz-button,
button {
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}

.link-button {
    color: #d9e7f8;
    background: #203452;
    border: 1px solid #476a91;
}

.link-button:hover {
    color: #ffffff;
    background: #2a4b73;
}

.rz-datatable {
    background: var(--xfm-surface) !important;
    border: 1px solid var(--xfm-border) !important;
}

.rz-data-grid,
.rz-datatable {
    --rz-grid-background-color: var(--xfm-surface);
    --rz-grid-cell-color: #8fa5c0;
    --rz-grid-header-color: #c6d4e5;
    --rz-grid-header-background-color: #0e1828;
    --rz-grid-cell-border: 1px solid var(--xfm-border);
    --rz-grid-header-cell-border: 1px solid var(--xfm-border);
}

.rz-grid-filter-buttons .rz-button.rz-clear-filter {
    color: #e1ebf7 !important;
    background: #1b3452 !important;
    border: 1px solid #52769f !important;
    box-shadow: none !important;
}

.rz-grid-filter-buttons .rz-button.rz-clear-filter:hover {
    color: #ffffff !important;
    background: #28527f !important;
    border-color: #79a7d8 !important;
}

.rz-grid-filter-buttons .rz-button.rz-clear-filter:focus-visible {
    outline: 2px solid #78b7ff;
    outline-offset: 2px;
}

.rz-datatable-thead th,
.rz-datatable-data td,
.rz-data-grid td {
    color: #8fa5c0 !important;
    background: var(--xfm-surface) !important;
    border-color: var(--xfm-border) !important;
    font-size: 12px;
}

.rz-datatable-thead th,
.rz-data-grid th {
    color: #c6d4e5 !important;
    background: #0e1828 !important;
}

.rz-cell-filter input,
.rz-textbox,
.rz-dropdown,
.rz-numeric-input input,
input,
textarea {
    color: var(--xfm-text) !important;
    background: #0d1726 !important;
    border-color: #38506f !important;
}

.rz-dropdown,
.rz-dropdown-panel {
    --rz-dropdown-item-hover-background-color: #28476b;
    --rz-dropdown-item-hover-color: #ffffff;
    --rz-dropdown-item-selected-background-color: #2f80ed;
    --rz-dropdown-item-selected-color: #ffffff;
    --rz-dropdown-item-selected-hover-background-color: #3c8cf4;
    --rz-dropdown-item-selected-hover-color: #ffffff;
}

.rz-dropdown-panel,
.rz-dropdown-items-wrapper,
.rz-dropdown-items {
    color: #d7e5f6 !important;
    background: #111c2e !important;
    border-color: #38506f !important;
}

.rz-dropdown-item {
    color: #d7e5f6 !important;
    background: #111c2e !important;
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-highlight {
    color: #ffffff !important;
    background: #28476b !important;
}

.rz-dropdown-item.rz-state-selected {
    color: #ffffff !important;
    background: #2f80ed !important;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: .8rem 0;
}

.form-field label {
    color: var(--xfm-muted);
    font-size: 12px;
    font-weight: 600;
}

.drawer-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgb(0 0 0 / 65%);
}

.entity-drawer {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(520px, 100vw);
    height: 100vh;
    background: var(--xfm-panel);
    border-left: 1px solid var(--xfm-border);
    box-shadow: -12px 0 32px rgb(0 0 0 / 30%);
}

.entity-drawer header,
.entity-drawer footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-color: var(--xfm-border);
}

.entity-drawer header {
    border-bottom: 1px solid var(--xfm-border);
}

.entity-drawer header h2 {
    margin: 0;
}

.entity-drawer section {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 1.25rem 1.25rem;
}

.entity-drawer footer {
    gap: .5rem;
    justify-content: flex-end;
    border-top: 1px solid var(--xfm-border);
}

.xfm-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.error {
    color: var(--xfm-danger);
}

@media (max-width: 700px) {
    .topbar {
        padding: 0 1rem;
    }

    .content-shell {
        display: block;
    }

    .sidebar {
        flex-basis: auto;
        border-right: 0;
        border-bottom: 1px solid var(--xfm-border);
    }

    .main-content {
        padding: 1.25rem 1rem;
    }
}