/* notify-console.css — estilo do console operacional do NotifyHub.
 * App de sidebar + área de conteúdo (dark), ícones tabler.
 * Tokens no :root para o shell (Main.html) e o conteúdo (Console.html) baterem.
 */
:root {
    --nh-accent:      #6338F6;   /* roxo DreamsChat */
    --nh-accent-2:    #7a56ff;
    --nh-accent-soft: rgba(99, 56, 246, .14);
    --nh-bg:          #0b0f17;   /* fundo do app */
    --nh-side:        #10151f;   /* sidebar */
    --nh-side-2:      #0d121b;
    --nh-surface:     #161c28;   /* cards */
    --nh-surface-2:   #0e1420;   /* inputs */
    --nh-border:      #232b3a;
    --nh-border-2:    #2b3446;
    --nh-text:        #e6e8ec;
    --nh-muted:       #8a90a0;
    --nh-ok:          #0cc68c;
    --nh-danger:      #fd3a55;
    --nh-warn:        #ffc107;
    --nh-info:        #60cbff;
    --nh-tg:          #60cbff;
    --nh-wa:          #0cc68c;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--nh-bg);
    color: var(--nh-text);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Shell ─────────────────────────────────────────────────────────── */
.nh-app { display: flex; height: 100vh; overflow: hidden; }

.nh-side {
    width: 248px; flex-shrink: 0; background: var(--nh-side);
    border-right: 1px solid var(--nh-border); display: flex; flex-direction: column;
}
.nh-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.15rem; border-bottom: 1px solid var(--nh-border); }
.nh-brand .nh-logo {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--nh-accent), #9b7bff);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(99, 56, 246, .4);
}
.nh-brand .nh-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.nh-brand .nh-brand-sub { font-size: .68rem; color: var(--nh-muted); margin-top: 1px; }

.nh-nav { padding: .75rem .6rem; flex: 1; overflow-y: auto; }
.nh-nav-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nh-muted); padding: .5rem .55rem .35rem; }
.nh-nav-item {
    display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem; margin-bottom: 2px;
    border-radius: 9px; cursor: pointer; color: #aeb4c2; font-size: .88rem; font-weight: 500;
    border: 1px solid transparent; transition: background .12s, color .12s;
}
.nh-nav-item i { font-size: 1.15rem; width: 22px; text-align: center; }
.nh-nav-item:hover { background: #151b27; color: var(--nh-text); }
.nh-nav-item.active { background: var(--nh-accent-soft); color: #fff; border-color: rgba(99, 56, 246, .35); }
.nh-nav-item.active i { color: var(--nh-accent-2); }
.nh-nav-count { margin-left: auto; font-size: .7rem; background: #1c2431; color: var(--nh-muted); border-radius: 999px; padding: .1rem .45rem; }

.nh-side-foot { border-top: 1px solid var(--nh-border); padding: .75rem .8rem; display: flex; align-items: center; gap: .6rem; }
.nh-avatar { width: 32px; height: 32px; border-radius: 50%; background: #222c3d; color: #cbd2df; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; flex-shrink: 0; }
.nh-side-foot .nh-u { min-width: 0; flex: 1; }
.nh-side-foot .nh-u b { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-side-foot .nh-u span { font-size: .68rem; color: var(--nh-muted); }
.nh-logout { color: var(--nh-muted); cursor: pointer; font-size: 1.1rem; padding: .3rem; border-radius: 7px; }
.nh-logout:hover { color: var(--nh-danger); background: #1c1420; }

.nh-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nh-topbar { padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--nh-border); background: var(--nh-side-2); }
.nh-topbar h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.nh-topbar p { margin: .2rem 0 0; font-size: .8rem; color: var(--nh-muted); }
#Page { flex: 1; overflow-y: auto; }

/* ── Conteúdo (cards, forms, tabelas) ─────────────────────────────── */
.nh-wrap { padding: 1.5rem 1.6rem; max-width: 1040px; }
.nh-card { background: var(--nh-surface); border: 1px solid var(--nh-border); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.nh-row { display: flex; align-items: center; gap: .75rem; }
.nh-grow { flex: 1; min-width: 0; }
.nh-btn { padding: .5rem .9rem; background: var(--nh-accent); color: #fff; border: 0; border-radius: 8px; cursor: pointer; font-size: .85rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
.nh-btn:hover { background: var(--nh-accent-2); }
.nh-btn.sec { background: #20242d; color: var(--nh-text); border: 1px solid var(--nh-border-2); }
.nh-btn.sec:hover { background: #262c38; }
.nh-btn.danger { background: #3a2026; color: #ff8a9b; border: 1px solid #5a2a33; }
.nh-btn.danger:hover { background: #4a262e; }
.nh-btn:disabled { opacity: .5; cursor: default; }
.nh-badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; border: 1px solid var(--nh-border-2); color: var(--nh-muted); }
.nh-badge.email { color: var(--nh-info); border-color: #234; }
.nh-badge.telegram { color: var(--nh-tg); border-color: #245; }
.nh-badge.whatsapp { color: var(--nh-wa); border-color: #254a35; }
.nh-badge.imap { color: #c9a6ff; border-color: #3a2f52; }
.nh-badge.on { color: var(--nh-ok); border-color: #254a35; }
.nh-badge.off { color: #ff8a9b; border-color: #5a2a33; }
.nh-field { margin-bottom: .7rem; }
.nh-field label { display: block; font-size: .78rem; color: var(--nh-muted); margin-bottom: .25rem; }
.nh-field input, .nh-field select, .nh-field textarea {
    width: 100%; box-sizing: border-box; padding: .5rem .6rem; background: var(--nh-surface-2);
    color: var(--nh-text); border: 1px solid var(--nh-border-2); border-radius: 8px; font-size: .85rem; font-family: inherit;
}
.nh-field input:focus, .nh-field select:focus, .nh-field textarea:focus { outline: none; border-color: var(--nh-accent); }
.nh-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.nh-note { font-size: .78rem; color: var(--nh-muted); }
.nh-msg { padding: .6rem .8rem; border-radius: 8px; font-size: .82rem; margin-bottom: .75rem; white-space: pre-wrap; }
.nh-msg.ok { background: #16271c; color: var(--nh-ok); border: 1px solid #254a35; }
.nh-msg.err { background: #2a1820; color: #ff8a9b; border: 1px solid #5a2a33; }
.nh-empty { color: #6b7280; font-size: .85rem; padding: 1.5rem 1rem; text-align: center; }
.nh-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }
table.nh-tb { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.nh-tb th, table.nh-tb td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid #20242d; vertical-align: top; }
table.nh-tb th { color: var(--nh-muted); font-weight: 600; position: sticky; top: 0; background: var(--nh-surface); }
.nh-pagehdr { display: flex; align-items: center; margin-bottom: 1rem; }
.nh-pagehdr .nh-grow h3 { margin: 0; font-size: 1rem; }
.nh-pagehdr .nh-grow p { margin: .2rem 0 0; font-size: .78rem; color: var(--nh-muted); }

/* scrollbar */
#Page::-webkit-scrollbar, .nh-nav::-webkit-scrollbar { width: 8px; }
#Page::-webkit-scrollbar-thumb, .nh-nav::-webkit-scrollbar-thumb { background: #212a38; border-radius: 8px; }