:root {
    --tstt-azul-escuro: #0d2c4d;
    --tstt-azul-claro:  #2b7bb9;
    --tstt-cinza:       #f4f6f8;
    --tstt-borda:       #d9dee3;
    --tstt-texto:       #1e2a35;
    --tstt-sucesso:     #18a558;
    --tstt-aviso:       #e8a526;
    --tstt-erro:        #d93838;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--tstt-texto);
    background: var(--tstt-cinza);
    font-size: 14px;
    line-height: 1.5;
}
a { color: var(--tstt-azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==== Layout principal ==== */
.app { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }
.app-loading { display: flex; align-items: center; justify-content: center; height: 100vh;
               color: #98a2b3; font-style: italic; }

/* ==== Sidebar ==== */
.sidebar {
    background: var(--tstt-azul-escuro);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.sidebar-brand {
    padding: 24px 16px 14px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand img { max-width: 90px; height: auto; opacity: .95; }
.sidebar-brand .tit { font-size: 13px; margin-top: 8px; letter-spacing: .5px;
                      color: #b9c7d4; font-weight: 500; }
.sidebar nav { padding: 10px 0; }
.sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; color: #d6e1ec; font-size: 14px;
    border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.04); text-decoration: none; }
.sidebar nav a.active {
    background: rgba(43, 123, 185, 0.18);
    border-left-color: var(--tstt-azul-claro);
    color: #fff;
}
.sidebar nav a .ic { width: 18px; text-align: center; opacity: .8; }
.sidebar-footer { margin-top: auto; padding: 12px 16px; font-size: 11px;
                  color: #6f8198; border-top: 1px solid rgba(255,255,255,0.08); }

/* ==== Conteúdo ==== */
.content { overflow: auto; padding: 0; }
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; border-bottom: 1px solid var(--tstt-borda);
    padding: 12px 24px;
}
.topbar h1 { font-size: 18px; margin: 0; color: var(--tstt-azul-escuro); }
.user-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tstt-cinza); padding: 6px 12px; border-radius: 20px;
    font-size: 13px;
}
.user-chip .badge-perfil { background: var(--tstt-azul-claro); color: #fff;
                            padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.btn-link { background: none; border: none; color: var(--tstt-azul-claro);
            cursor: pointer; font-size: 13px; padding: 0; }

.view { padding: 24px; }

/* ==== Cards ==== */
.card {
    background: #fff; border: 1px solid var(--tstt-borda); border-radius: 8px;
    padding: 16px; margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(13,44,77,0.04);
}
.card h2 { font-size: 15px; margin: 0 0 12px; color: var(--tstt-azul-escuro); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
              gap: 12px; margin-bottom: 16px; }
.metric-card { background: #fff; border: 1px solid var(--tstt-borda); border-radius: 8px;
               padding: 14px; }
.metric-card .label { font-size: 11px; color: #6c7a89; text-transform: uppercase;
                      letter-spacing: .5px; }
.metric-card .value { font-size: 24px; font-weight: 600; color: var(--tstt-azul-escuro);
                      margin-top: 4px; }
.metric-card.warn .value { color: var(--tstt-aviso); }
.metric-card.err  .value { color: var(--tstt-erro); }
.metric-card.ok   .value { color: var(--tstt-sucesso); }

/* ==== Tabelas ==== */
table.tstt { width: 100%; border-collapse: collapse; background: #fff;
             border: 1px solid var(--tstt-borda); border-radius: 6px; overflow: hidden; }
table.tstt th, table.tstt td { padding: 8px 12px; border-bottom: 1px solid var(--tstt-borda);
                                text-align: left; font-size: 13px; vertical-align: middle; }
table.tstt th { background: var(--tstt-cinza); color: var(--tstt-azul-escuro);
                font-weight: 600; font-size: 12px; text-transform: uppercase;
                letter-spacing: .3px; }
table.tstt tbody tr:hover { background: #fafbfc; }
table.tstt tbody tr:last-child td { border-bottom: none; }

/* ==== Badges ==== */
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px;
       font-size: 11px; font-weight: 500; }
.tag-ok    { background: #e3f7ec; color: #14773d; }
.tag-warn  { background: #fdf3dc; color: #8a5d12; }
.tag-err   { background: #fbe2e2; color: #962c2c; }
.tag-info  { background: #e3eef7; color: #1f4f7c; }

/* ==== Formulários e inputs ==== */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], textarea, select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--tstt-borda);
    border-radius: 4px; font-size: 13px; background: #fff;
    font-family: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--tstt-azul-claro);
    box-shadow: 0 0 0 2px rgba(43,123,185,0.15);
}
label { display: block; font-size: 12px; font-weight: 500; color: #4a5568;
        margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.form-row { margin-bottom: 12px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ==== Botões ==== */
.btn {
    display: inline-block; padding: 8px 16px; border-radius: 4px;
    border: 1px solid var(--tstt-borda); background: #fff;
    cursor: pointer; font-size: 13px; font-family: inherit;
    color: var(--tstt-texto); transition: all .15s;
}
.btn:hover { border-color: var(--tstt-azul-claro); color: var(--tstt-azul-claro); }
.btn-primary { background: var(--tstt-azul-claro); border-color: var(--tstt-azul-claro);
               color: #fff; }
.btn-primary:hover { background: var(--tstt-azul-escuro); border-color: var(--tstt-azul-escuro);
                     color: #fff; }
.btn-danger  { background: var(--tstt-erro); border-color: var(--tstt-erro); color: #fff; }
.btn-danger:hover { opacity: .85; color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
           margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }

/* ==== Alerts ==== */
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px;
         border: 1px solid; font-size: 13px; }
.alert-info  { background: #e9f3fb; border-color: #c5dff3; color: #14467a; }
.alert-warn  { background: #fdf6e3; border-color: #f1e0a8; color: #7a5a14; }
.alert-error { background: #fcebeb; border-color: #f3c5c5; color: #821e1e; }
.alert-ok    { background: #e8f7ee; border-color: #b8e2c6; color: #1d6b3b; }

/* ==== Login ==== */
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--tstt-azul-escuro) 0%, var(--tstt-azul-claro) 100%); }
.login-card { background: #fff; padding: 36px 32px; border-radius: 10px;
              width: 340px; box-shadow: 0 4px 30px rgba(0,0,0,0.2); }
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand img { max-width: 110px; }
.login-brand h1 { font-size: 16px; color: var(--tstt-azul-escuro); margin-top: 12px; }
.login-form .btn-primary { width: 100%; margin-top: 6px; }
.login-error { color: var(--tstt-erro); font-size: 12px; margin-top: 6px; min-height: 14px; }

/* ==== Misc ==== */
.spinner { display: inline-block; width: 16px; height: 16px;
           border: 2px solid var(--tstt-borda); border-top-color: var(--tstt-azul-claro);
           border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.muted { color: #98a2b3; }
.mono  { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.pagination { display: flex; gap: 4px; align-items: center; margin-top: 12px; }
.pagination .btn-sm { min-width: 32px; }

/* Responsivo */
@media (max-width: 800px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
}


/* ==== Sentenças RM ==== */
.srm-card { padding: 14px; }
.srm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.srm-meta { font-size: 13px; color: #555; margin-bottom: 6px; }
.srm-meta code { background: #eef2f7; padding: 1px 6px; border-radius: 3px; }
.srm-sql {
    background: #1b2a3a; color: #eef; padding: 12px; border-radius: 6px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px;
    overflow-x: auto; max-height: 480px; white-space: pre;
}