#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.validation-message { color: #dc3545; font-size: .875rem; }
.invalid { outline: 1px solid #dc3545; }
.stat-card .display-6 { font-weight: 600; }
.preview-frame { width: 100%; height: 320px; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; }

/* ---------- Editor de temas (GrapesJS) ---------- */

.gjs-shell {
    display: flex;
    flex-direction: column;
    height: 78vh;
    min-height: 640px;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

.gjs-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.gjs-body { flex: 1; display: flex; min-height: 0; }

.gjs-left {
    width: 250px;
    flex: none;
    overflow-y: auto;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

.gjs-center { flex: 1; min-width: 0; position: relative; background: #e9ecef; }
#gjs-canvas { height: 100%; }

.gjs-right {
    width: 290px;
    flex: none;
    overflow-y: auto;
    background: #f8f9fa;
    border-left: 1px solid #dee2e6;
}

.gjs-side-title {
    padding: .6rem .85rem;
    font-weight: 600;
    font-size: .85rem;
    color: #495057;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 2;
}

.gjs-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    background: #e9ecefcc;
    z-index: 5;
}

.gjs-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
}
.gjs-tabs button {
    flex: 1;
    border: 0;
    background: transparent;
    padding: .6rem .25rem;
    font-size: .78rem;
    color: #6c757d;
    border-bottom: 2px solid transparent;
}
.gjs-tabs button:hover { color: #0d6efd; }
.gjs-tabs button.active { color: #0d6efd; border-bottom-color: #0d6efd; font-weight: 600; }

/* Tema claro do GrapesJS */
.gjs-one-bg { background-color: #f8f9fa; }
.gjs-two-color { color: #495057; }
.gjs-three-bg { background-color: #0d6efd; color: #fff; }
.gjs-four-color, .gjs-four-color-h:hover { color: #0d6efd; }

.gjs-blocks-cs { padding: .25rem .5rem .75rem; }
.gjs-block-category .gjs-title {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    border-top: 0;
    color: #343a40;
    font-weight: 600;
    font-size: .8rem;
    padding: .6rem .85rem;
}
.gjs-block {
    width: calc(50% - 10px);
    min-height: 84px;
    margin: 5px;
    padding: .5rem .25rem;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: .4rem;
    box-shadow: none;
    color: #495057;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gjs-block:hover { border-color: #0d6efd; box-shadow: 0 3px 10px rgba(13, 110, 253, .18); transform: translateY(-1px); }
.gjs-block__media { margin-bottom: .35rem; }
.gjs-block__media .bi { font-size: 1.6rem; color: #0d6efd; }
.gjs-block-label { font-size: .75rem; font-weight: 500; }

/* Gestor de estilos / camadas / propriedades */
/*.gjs-sm-sector-title, .gjs-layer-title {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    color: #343a40;
}*/
.gjs-sm-sector-title,
.gjs-layer-title,
.gjs-sm-sector .gjs-sm-title {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    padding: 8px 12px;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
}

.gjs-sm-sector-title:hover,
.gjs-layer-title:hover,
.gjs-sm-sector .gjs-sm-title:hover {
    background-color: #e9ecef !important;
    color: #000000 !important;
}

.gjs-sm-sector .gjs-sm-title { font-weight: 600; font-size: .8rem; padding: .6rem .85rem; }
.gjs-field { background: #fff; border: 1px solid #ced4da; border-radius: .25rem; }
.gjs-clm-tags, .gjs-trt-trait { padding: .35rem .6rem; }
.gjs-layer-title { padding: .4rem .6rem; }

/* Modal de imagens */
.gjs-mdl-dialog { background: #fff; color: #343a40; border-radius: .5rem; }
.gjs-mdl-header { border-bottom: 1px solid #dee2e6; }
.gjs-am-asset-image { border-radius: .25rem; }

/* Layout Full-Screen Dedicado para o Editor */
.gjs-fullscreen-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.gjs-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    height: 55px;
    flex: none;
}

.gjs-body-full {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}