* {
    box-sizing: border-box;
}

:root {
    --bg: #050b14;
    --sidebar: #07111f;
    --panel: #091625;
    --panel-soft: #0d1b2d;
    --border: #17304a;

    --blue: #168cff;
    --blue-light: #55b7ff;

    --text: #f3f8fc;
    --muted: #71869d;

    --green: #31df8b;
    --red: #ff6b7a;
}

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

body {
    background:
        radial-gradient(
            circle at 70% -20%,
            #103764,
            #07111f 35%,
            var(--bg) 65%
        );

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

.app-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        250px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;

    height: 100vh;

    padding: 26px 18px;

    border-right:
        1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            #071524,
            #050b14
        );
}

.brand {
    padding:
        4px 12px 30px;
}

.brand-name {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -1px;
}

.brand-name b {
    color: var(--blue);
}

.brand-product {
    margin-top: 3px;

    color: var(--blue-light);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 5px;
}

.menu-label {
    padding:
        14px 12px 8px;

    color: #465d74;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.menu a {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 4px 0;

    padding:
        11px 12px;

    border-radius: 9px;

    color: #8ca1b6;

    font-size: 14px;

    text-decoration: none;
}

.menu a:hover {
    color: white;
    background: #0c1c2d;
}

.menu a.active {
    color: white;

    border:
        1px solid #154c7d;

    background:
        linear-gradient(
            90deg,
            #0c3762,
            #0a2037
        );
}

.menu-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: currentColor;
}

.page {
    min-width: 0;

    padding:
        34px 38px 60px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}

.page-title {
    margin: 0;

    font-size: 27px;

    letter-spacing: -1px;
}

.page-subtitle {
    margin:
        7px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.online-pill {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding:
        9px 13px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    background: #081321;

    color: #8ca1b6;

    font-size: 12px;
}

.online-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 10px var(--green);
}

.stats {
    display: grid;

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

    gap: 16px;
}

.stat-card,
.panel {
    border:
        1px solid var(--border);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(14,31,51,.95),
            rgba(7,18,31,.95)
        );

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.16);
}

.stat-card {
    min-height: 124px;

    padding: 20px;
}

.stat-label {
    color: #7d93a9;

    font-size: 12px;
}

.stat-value {
    margin-top: 13px;

    font-size: 34px;
    font-weight: 750;

    letter-spacing: -2px;
}

.stat-foot {
    margin-top: 5px;

    color: #45617c;

    font-size: 11px;
}

.section {
    margin-top: 30px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 13px;
}

.section-header h2 {
    margin: 0;

    font-size: 15px;
}

.section-header span {
    color: var(--muted);

    font-size: 11px;
}

.panel {
    padding: 22px;
}

.form-grid {
    display: grid;

    grid-template-columns:
        340px minmax(0, 1fr);

    gap: 20px;
}

label {
    display: block;

    margin:
        13px 0 7px;

    color: #93a9bd;

    font-size: 11px;
}

input,
select {
    width: 100%;

    padding:
        12px 13px;

    border:
        1px solid #1c3a57;

    border-radius: 8px;

    outline: none;

    background: #06111e;

    color: white;

    font-size: 13px;
}

input:focus,
select:focus {
    border-color: var(--blue);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding:
        0 16px;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #0878dd,
            #159dff
        );

    color: white;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.button-block {
    width: 100%;

    margin-top: 16px;
}

table {
    width: 100%;

    border-collapse: collapse;
}

th {
    padding:
        0 10px 12px;

    color: #577089;

    font-size: 10px;

    text-align: left;

    text-transform: uppercase;
}

td {
    padding:
        15px 10px;

    border-top:
        1px solid #142a40;

    font-size: 12px;
}

td strong {
    display: block;
}

td small {
    display: block;

    margin-top: 4px;

    color: var(--muted);
}

.status {
    display: inline-block;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(49,223,139,.22);

    border-radius: 999px;

    background:
        rgba(49,223,139,.08);

    color: #70efb0;

    font-size: 10px;
}

.error {
    margin-bottom: 14px;

    padding: 11px;

    border:
        1px solid #743846;

    border-radius: 8px;

    background: #32151d;

    color: #ff9cac;

    font-size: 12px;
}

.empty {
    color: var(--muted);

    text-align: center;
}

@media (max-width: 1000px) {

    .app-layout {
        grid-template-columns:
            82px minmax(0, 1fr);
    }

    .brand-product,
    .menu-label,
    .menu-text {
        display: none;
    }

    .brand-name {
        font-size: 14px;
    }

    .stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .app-layout {
        display: block;
    }

    .sidebar {
        display: none;
    }

    .page {
        padding:
            24px 16px 40px;
    }

    .stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

.panel h2 {
    margin: 0 0 20px;
    font-size: 15px;
}

.entity-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid #142a40;
}

.entity-row:last-child {
    border-bottom: 0;
}

.entity-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: linear-gradient(145deg, #0b69bd, #123d68);
    font-weight: 800;
}

.entity-info {
    flex: 1;
    min-width: 0;
}

.entity-info strong,
.entity-info small {
    display: block;
}

.entity-info small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.screen-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.screen-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--panel);
}

.screen-preview {
    margin: 13px;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    border: 1px solid #102c48;
    border-radius: 8px;
    background: radial-gradient(circle, #0c3156, #06101c 70%);
    color: #2f78b8;
    font-size: 12px;
    letter-spacing: 5px;
}

.screen-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 15px 15px;
}

.screen-info strong,
.screen-info small {
    display: block;
}

.screen-info small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
}

.orientation {
    padding: 5px 8px;
    border: 1px solid #173651;
    border-radius: 999px;
    background: #0b1b2c;
    color: #8fb9df;
    font-size: 10px;
}

.empty-screen {
    grid-column: 1 / -1;
    padding: 50px;
    border: 1px dashed #193b5c;
    border-radius: 13px;
    color: var(--muted);
    text-align: center;
}

.hint {
    margin: 15px 0 0;
    padding: 11px;
    border: 1px solid #153553;
    border-radius: 8px;
    background: #071524;
    color: #66829c;
    font-size: 10px;
    line-height: 1.5;
}

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

.edit-container {
    max-width: 650px;
}

.edit-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.edit-heading h2 {
    margin: 0;
}

.edit-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.button-secondary {
    border: 1px solid #1c3a57;
    background: #091827;
    color: #9bb0c4;
}

.status-off {
    border-color: rgba(255,107,122,.22);
    background: rgba(255,107,122,.08);
    color: #ff8995;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-actions form {
    margin: 0;
}

.action-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #1a3d5e;
    border-radius: 6px;
    background: #091827;
    color: #91b8db;
    font: inherit;
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
}

.action-link:hover {
    border-color: var(--blue);
    color: white;
}

.action-button {
    appearance: none;
}

.action-danger {
    border-color: rgba(255,107,122,.25);
    color: #ff8995;
}

.action-success {
    border-color: rgba(49,223,139,.25);
    color: #70efb0;
}

.center-action {
    margin-top: 20px;
    text-align: center;
}

.status-blocked {
    border-color: rgba(255, 190, 70, .25);
    background: rgba(255, 190, 70, .08);
    color: #ffd071;
}

.table-sub {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}


/* ==================================================
   CYTROM SCREEN - THEME SYSTEM
   ================================================== */

body,
.panel,
.sidebar,
.menu a,
input,
select,
button,
table,
.status,
.online-pill,
.page {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-toggle {
    min-height: 36px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background: var(--panel);

    color: var(--text);

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--blue);
}

#theme-icon {
    width: 16px;

    color: var(--blue-light);

    font-size: 16px;
    line-height: 1;

    text-align: center;
}


/* Tema claro suave - sem branco puro */

html[data-theme="light"] {
    --bg: #dfe6ed;
    --sidebar: #e7edf3;
    --panel: #edf2f6;
    --panel-soft: #e2e9ef;
    --border: #c5d1dc;

    --blue: #0877df;
    --blue-light: #218ee9;

    --text: #182635;
    --muted: #66798b;

    --green: #16885b;
    --red: #c74857;
}

html[data-theme="light"] body {
    background:
        radial-gradient(
            circle at 70% -20%,
            #c7d9e8,
            #dce5ec 38%,
            var(--bg) 70%
        );

    color: var(--text);
}

html[data-theme="light"] .sidebar {
    background:
        linear-gradient(
            180deg,
            #d7e2eb,
            #cfdbe5
        );

    border-right-color:
        #b8c7d3;
}

html[data-theme="light"] .brand-name {
    color: #142638;
}

html[data-theme="light"] .brand-product {
    color: #0877df;
}

html[data-theme="light"] .menu-label {
    color: #718394;
}

html[data-theme="light"] .menu a {
    color: #53697c;
}

html[data-theme="light"] .menu a:hover {
    color: #172a3c;
    background: #d8e3ec;
}

html[data-theme="light"] .menu a.active {
    color: #075fae;

    border-color: #a9c8e3;

    background:
        linear-gradient(
            90deg,
            #c9deef,
            #dbe7ef
        );
}

html[data-theme="light"] .panel {
    background:
        rgba(237, 242, 246, .94);

    border-color:
        #c4d0da;

    box-shadow:
        0 10px 30px rgba(39, 63, 82, .07);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color: #182635;

    background: #e4ebf1;

    border-color: #bccbd6;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: #218ee9;

    box-shadow:
        0 0 0 3px rgba(33, 142, 233, .10);
}

html[data-theme="light"] table {
    color: #253748;
}

html[data-theme="light"] th {
    color: #65798a;

    border-bottom-color:
        #c3d0da;
}

html[data-theme="light"] td {
    border-bottom-color:
        #d0dae2;
}

html[data-theme="light"] .table-sub,
html[data-theme="light"] .hint,
html[data-theme="light"] .page-subtitle {
    color: #66798b;
}

html[data-theme="light"] .online-pill {
    color: #166b4b;

    background:
        rgba(22, 136, 91, .08);

    border-color:
        rgba(22, 136, 91, .20);
}

html[data-theme="light"] .status {
    color: #126c49;

    background:
        rgba(22, 136, 91, .08);

    border-color:
        rgba(22, 136, 91, .18);
}

html[data-theme="light"] .status-off {
    color: #a33b48;

    background:
        rgba(199, 72, 87, .08);

    border-color:
        rgba(199, 72, 87, .18);
}

html[data-theme="light"] .status-blocked {
    color: #8a6416;

    background:
        rgba(174, 126, 27, .08);

    border-color:
        rgba(174, 126, 27, .18);
}

html[data-theme="light"] .theme-toggle {
    background: #e3eaf0;
}

html[data-theme="light"] .button-secondary {
    color: #294155;

    background: #dce5ec;

    border-color: #bccbd6;
}

@media (max-width: 760px) {
    .header-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    #theme-label {
        display: none;
    }
}


/* =========================================================
   CYTROM SCREEN - 7C4
   PADRONIZACAO VISUAL DEFINITIVA
   ========================================================= */


/* ---------------------------------------------------------
   TOKENS ADICIONAIS - TEMA ESCURO
   --------------------------------------------------------- */

:root {
    --surface: #091625;
    --surface-raised: #0d1b2d;
    --surface-input: #06111e;

    --line: #17304a;

    --text-soft: #93a9bd;
    --text-faint: #577089;

    --button-primary: #168cff;
    --button-primary-hover: #0878dd;
    --button-primary-text: #ffffff;

    --button-secondary: #091827;
    --button-secondary-hover: #10263b;

    --action-bg: #091827;
    --action-hover: #10263b;

    --preview-bg: #06101c;
    --hint-bg: #071524;

    --shadow:
        0 12px 35px rgba(0, 0, 0, .16);
}


/* ---------------------------------------------------------
   TOKENS - TEMA CLARO
   NÃO USA BRANCO PURO
   --------------------------------------------------------- */

html[data-theme="light"] {
    --bg: #e1e7ec;
    --sidebar: #d7e1e9;

    --panel: #f0f3f5;
    --panel-soft: #e8edf1;

    --surface: #f0f3f5;
    --surface-raised: #e9eef2;
    --surface-input: #e8edf1;

    --border: #c5d0d9;
    --line: #d0d9e0;

    --blue: #168cff;
    --blue-light: #168cff;

    --text: #1b2936;
    --muted: #687b8b;
    --text-soft: #536979;
    --text-faint: #718391;

    --green: #16885b;
    --red: #c74857;

    --button-primary: #168cff;
    --button-primary-hover: #087be0;
    --button-primary-text: #ffffff;

    --button-secondary: #dbe3e9;
    --button-secondary-hover: #ced9e1;

    --action-bg: #e2e9ee;
    --action-hover: #d3e0e9;

    --preview-bg: #dce7ef;
    --hint-bg: #e4ebf0;

    --shadow:
        0 10px 28px rgba(38, 58, 74, .08);
}


/* ---------------------------------------------------------
   FUNDO
   --------------------------------------------------------- */

html[data-theme="light"] body {
    background:
        radial-gradient(
            circle at 72% -15%,
            #cbdce8 0%,
            #dce5eb 35%,
            var(--bg) 68%
        );

    color: var(--text);
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

html[data-theme="light"] .sidebar {
    background:
        linear-gradient(
            180deg,
            #dce5ec 0%,
            #d3dee6 100%
        );

    border-right-color: #becbd5;
}

html[data-theme="light"] .brand-name {
    color: #1b2936;
}

html[data-theme="light"] .brand-product {
    color: var(--blue);
}

html[data-theme="light"] .menu-label {
    color: #718391;
}

html[data-theme="light"] .menu a {
    color: #536979;
}

html[data-theme="light"] .menu a:hover {
    color: #18334b;
    background: #cfdce5;
}

html[data-theme="light"] .menu a.active {
    color: #086fc8;

    border-color: #9fc7e8;

    background:
        linear-gradient(
            90deg,
            #c7dff0,
            #d8e6ef
        );
}


/* ---------------------------------------------------------
   CARDS E PAINÉIS
   Corrige os quadros que permaneciam pretos.
   --------------------------------------------------------- */

.stat-card,
.panel {
    background:
        linear-gradient(
            145deg,
            var(--surface-raised),
            var(--surface)
        );

    border-color: var(--border);

    box-shadow: var(--shadow);
}

html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel {
    background:
        linear-gradient(
            145deg,
            #f0f3f5,
            #e9eef2
        );

    border-color: #c5d0d9;

    box-shadow:
        0 10px 28px rgba(38, 58, 74, .08);
}

.stat-label {
    color: var(--text-soft);
}

.stat-foot {
    color: var(--text-faint);
}


/* ---------------------------------------------------------
   FORMULÁRIOS
   --------------------------------------------------------- */

label {
    color: var(--text-soft);
}

input,
select,
textarea {
    border-color: var(--border);

    background: var(--surface-input);

    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(22, 140, 255, .12);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #e8edf1;

    border-color: #bdcad4;

    color: #1b2936;
}


/* ---------------------------------------------------------
   BOTÃO PRINCIPAL
   Azul Cytrom vivo nos dois temas.
   --------------------------------------------------------- */

.button {
    border:
        1px solid var(--button-primary);

    background:
        linear-gradient(
            135deg,
            #168cff,
            #159dff
        );

    color: var(--button-primary-text);

    box-shadow:
        0 5px 14px rgba(22, 140, 255, .18);

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

.button:hover {
    border-color: var(--button-primary-hover);

    background:
        linear-gradient(
            135deg,
            #087be0,
            #168cff
        );

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(22, 140, 255, .24);

    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}


/* ---------------------------------------------------------
   BOTÃO SECUNDÁRIO / CANCELAR
   --------------------------------------------------------- */

.button-secondary {
    border:
        1px solid var(--border);

    background:
        var(--button-secondary);

    color: var(--text-soft);

    box-shadow: none;
}

.button-secondary:hover {
    border-color: var(--border);

    background:
        var(--button-secondary-hover);

    color: var(--text);

    box-shadow: none;
}


/* ---------------------------------------------------------
   BOTÕES DAS TABELAS
   --------------------------------------------------------- */

.action-link {
    border:
        1px solid var(--border);

    background: var(--action-bg);

    color: var(--blue-light);

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

.action-link:hover {
    border-color: var(--blue);

    background: var(--action-hover);

    color: var(--blue);
}


/* Editar */

html[data-theme="light"] .action-link:not(.action-danger):not(.action-success) {
    border-color: #a9cbe5;

    background: #dceaf4;

    color: #0874cf;
}

html[data-theme="light"] .action-link:not(.action-danger):not(.action-success):hover {
    border-color: #168cff;

    background: #cfe5f5;

    color: #0565b5;
}


/* Desativar */

.action-danger {
    border-color:
        rgba(255, 107, 122, .28);

    color: #ff8995;
}

.action-danger:hover {
    border-color:
        rgba(255, 107, 122, .55);

    background:
        rgba(255, 107, 122, .10);

    color: #ff9eaa;
}

html[data-theme="light"] .action-danger {
    border-color: #e2a9b0;

    background: #f2dfe2;

    color: #ad3444;
}

html[data-theme="light"] .action-danger:hover {
    border-color: #d87884;

    background: #edd2d6;

    color: #922b38;
}


/* Ativar */

.action-success {
    border-color:
        rgba(49, 223, 139, .28);

    color: #70efb0;
}

.action-success:hover {
    border-color:
        rgba(49, 223, 139, .50);

    background:
        rgba(49, 223, 139, .09);

    color: #8af4c0;
}

html[data-theme="light"] .action-success {
    border-color: #9bcdb7;

    background: #dcece5;

    color: #14764f;
}

html[data-theme="light"] .action-success:hover {
    border-color: #70b895;

    background: #cee5da;

    color: #0e6542;
}


/* ---------------------------------------------------------
   TABELAS
   --------------------------------------------------------- */

th {
    color: var(--text-faint);
}

td {
    border-top-color: var(--line);
}

.entity-row {
    border-bottom-color: var(--line);
}

html[data-theme="light"] table {
    color: var(--text);
}

html[data-theme="light"] th {
    color: #667989;
}

html[data-theme="light"] td {
    border-top-color: #d0d9e0;
}


/* ---------------------------------------------------------
   STATUS
   --------------------------------------------------------- */

html[data-theme="light"] .status {
    border-color:
        rgba(22, 136, 91, .22);

    background:
        rgba(22, 136, 91, .09);

    color: #116d49;
}

html[data-theme="light"] .status-off {
    border-color:
        rgba(199, 72, 87, .23);

    background:
        rgba(199, 72, 87, .09);

    color: #a73745;
}

html[data-theme="light"] .status-blocked {
    border-color:
        rgba(160, 112, 16, .25);

    background:
        rgba(174, 126, 27, .09);

    color: #806016;
}


/* ---------------------------------------------------------
   PREVIEW DAS TELAS
   --------------------------------------------------------- */

.screen-card {
    background: var(--surface);

    border-color: var(--border);

    box-shadow: var(--shadow);
}

.screen-preview {
    border-color: var(--border);

    background:
        radial-gradient(
            circle,
            #0c3156,
            var(--preview-bg) 72%
        );
}

html[data-theme="light"] .screen-card {
    background: #eef2f4;
}

html[data-theme="light"] .screen-preview {
    border-color: #c1ced8;

    background:
        radial-gradient(
            circle,
            #d2e4f0,
            #dce7ef 72%
        );

    color: #4281b4;
}

.orientation {
    border-color: var(--border);

    background: var(--surface-raised);

    color: var(--blue-light);
}

html[data-theme="light"] .orientation {
    border-color: #b6ccdc;

    background: #dce8f0;

    color: #246eaa;
}


/* ---------------------------------------------------------
   AVISOS / HINTS
   --------------------------------------------------------- */

.hint {
    border-color: var(--border);

    background: var(--hint-bg);

    color: var(--muted);
}

html[data-theme="light"] .hint {
    border-color: #c4d1da;

    background: #e4ebf0;

    color: #617585;
}

.empty-screen {
    border-color: var(--border);
}


/* ---------------------------------------------------------
   ÍCONES DAS ENTIDADES
   --------------------------------------------------------- */

.entity-icon {
    background:
        linear-gradient(
            145deg,
            #168cff,
            #0875d1
        );

    color: #ffffff;

    box-shadow:
        0 5px 14px rgba(22, 140, 255, .16);
}


/* ---------------------------------------------------------
   STATUS ONLINE
   --------------------------------------------------------- */

html[data-theme="light"] .online-pill {
    border-color:
        rgba(22, 136, 91, .20);

    background:
        rgba(22, 136, 91, .07);

    color: #176d4d;
}


/* ---------------------------------------------------------
   BOTÃO DE TEMA
   --------------------------------------------------------- */

.theme-toggle {
    background: var(--surface);

    color: var(--text);
}

.theme-toggle:hover {
    border-color: var(--blue);

    background: var(--surface-raised);
}

html[data-theme="light"] .theme-toggle {
    background: #e3eaf0;

    color: #263b4d;
}

html[data-theme="light"] .theme-toggle:hover {
    background: #d8e3ea;
}


/* ---------------------------------------------------------
   ERROS
   --------------------------------------------------------- */

html[data-theme="light"] .error {
    border-color: #dfadb4;

    background: #f0dfe2;

    color: #9e3542;
}


/* ---------------------------------------------------------
   RESPONSIVIDADE DE TABELAS
   --------------------------------------------------------- */

.table-wrap {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.table-wrap table {
    min-width: 650px;
}

@media (max-width: 700px) {

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        width: 100%;

        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .form-actions {
        flex-wrap: wrap;
    }

    .form-actions .button {
        flex: 1;
    }
}


/* =========================================================
   CYTROM SCREEN - LOGIN
   ========================================================= */

.login-body {
    min-height: 100vh;
    margin: 0;
}

.login-shell {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;
}

.login-card {
    width: 100%;
    max-width: 430px;

    padding: 38px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            var(--surface-raised),
            var(--surface)
        );

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .22);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 36px;
}

.login-brand-mark {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #168cff,
            #075eaa
        );

    color: #fff;

    font-size: 23px;
    font-weight: 800;

    box-shadow:
        0 8px 24px
        rgba(22, 140, 255, .25);
}

.login-brand strong {
    display: block;

    color: var(--text);

    font-size: 17px;
    letter-spacing: .08em;
}

.login-brand span {
    display: block;

    margin-top: 2px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
}

.login-heading {
    margin-bottom: 28px;
}

.login-heading h1 {
    margin: 0 0 8px;

    color: var(--text);

    font-size: 30px;
}

.login-heading p {
    margin: 0;

    color: var(--muted);

    line-height: 1.55;
}

.login-form {
    display: grid;
    gap: 20px;
}

.login-button {
    width: 100%;

    justify-content: center;

    margin-top: 4px;
}

.login-footer {
    margin-top: 28px;

    color: var(--text-faint);

    text-align: center;
    font-size: 12px;
}

html[data-theme="light"] .login-card {
    background:
        linear-gradient(
            145deg,
            #f0f3f5,
            #e9eef2
        );

    box-shadow:
        0 24px 60px
        rgba(38, 58, 74, .13);
}

@media (max-width: 520px) {

    .login-shell {
        padding: 18px;
    }

    .login-card {
        padding: 28px 22px;
    }

}


/* =========================================================
   CYTROM SCREEN - USER MENU
   ========================================================= */

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 5px 7px 5px 5px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--panel-soft);
}

.user-avatar {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #168cff,
            #075eaa
        );

    color: #fff;

    font-size: 15px;
    font-weight: 800;
}

.user-info {
    min-width: 90px;

    display: flex;
    flex-direction: column;
}

.user-info strong {
    max-width: 150px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;
}

.user-info span {
    margin-top: 1px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 600;
}

.logout-form {
    margin: 0;
}

.logout-button {
    min-height: 34px;

    padding: 0 11px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

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

.logout-button:hover {
    border-color: var(--red);

    background: rgba(255, 107, 122, .08);

    color: var(--red);
}

html[data-theme="light"] .user-menu {
    background: #e8edf1;
}

@media (max-width: 800px) {

    .user-info {
        display: none;
    }

}



/* =========================================================
   CYTROM SCREEN - USERS
   ========================================================= */

.table-secondary {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.table-actions form {
    margin: 0;
}

.form-field small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}



/* =========================================================
   CYTROM SCREEN - PASSWORD UX
   ========================================================= */

.password-field {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.password-field input {
    flex: 1;
    min-width: 0;
}

.password-action {
    flex: 0 0 auto;

    padding: 0 14px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--panel-soft);
    color: var(--text);

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.password-action:hover {
    border-color: #168cff;
}

.password-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 8px;
}

.password-feedback {
    min-height: 16px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 600;
}


/*
 * Botão principal dos formulários.
 * Não deixa o botão crescer junto com a grid.
 */

.form-actions {
    display: flex;
    align-items: center;
    align-self: end;

    gap: 10px;
}

.form-actions .button {
    width: auto;
    min-width: 0;
}

.form-actions .button-primary {
    min-height: 42px;

    padding-left: 20px;
    padding-right: 20px;

    white-space: nowrap;
}

@media (max-width: 700px) {

    .password-field {
        flex-wrap: wrap;
    }

    .password-field input {
        flex-basis: 100%;
    }

    .password-action {
        min-height: 38px;
    }

}