/*
 * Shell do Dashboard: sidebar + topbar + cards.
 * Linguagem visual portada de N4STiAgent/web/css/dashboard.css e da
 * estrutura de N4STiBackup/web/public/partials/header.php (classes
 * n4-shell/n4-sidebar/n4-topbar/n4-nav/n4-card), com os tokens novos de
 * tokens.css no lugar da paleta fixa daqueles projetos.
 */

.n4-shell a,
.n4-shell a:hover,
.n4-shell a:focus {
    text-decoration: none;
}

body.n4-shell {
    background:
        radial-gradient(circle at 14% 8%, rgba(52, 184, 216, .10), transparent 32%),
        radial-gradient(circle at 86% 0%, rgba(31, 111, 143, .14), transparent 30%),
        radial-gradient(circle at 70% 95%, rgba(11, 34, 54, .55), transparent 40%),
        linear-gradient(160deg, var(--n4-bg) 0%, var(--n4-bg-2) 55%, #050810 100%);
    background-attachment: fixed;
}

body.n4-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
}

.n4-shell {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
}

/* Sidebar -------------------------------------------------------------- */

.n4-sidebar {
    width: var(--n4-sidebar-width);
    flex: 0 0 var(--n4-sidebar-width);
    background: var(--n4-surface);
    border-right: 1px solid var(--n4-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.n4-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--n4-space-2);
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--n4-border);
    font-weight: 700;
    letter-spacing: .02em;
}

.n4-sidebar-brand img {
    width: 100%;
    max-width: 220px;
    height: auto;
}

.n4-nav {
    flex: 1;
    padding: var(--n4-space-3) var(--n4-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.n4-nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: var(--n4-space-4) 0 var(--n4-space-1);
    padding: 0 var(--n4-space-3);
    font: inherit;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--n4-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.n4-nav-section:hover {
    color: var(--n4-text);
}

.n4-nav-chevron {
    font-size: 10px;
    transition: transform .16s ease;
}

.n4-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 800px;
    transition: max-height .18s ease;
}

.n4-nav-group.n4-collapsed {
    max-height: 0;
}

.n4-nav-section.n4-collapsed .n4-nav-chevron {
    transform: rotate(-90deg);
}

.n4-nav-link {
    display: flex;
    align-items: center;
    gap: var(--n4-space-2);
    padding: 9px var(--n4-space-3);
    border-radius: var(--n4-radius-sm);
    color: var(--n4-text);
    text-decoration: none;
    font-size: 14px;
}

.n4-nav-link:hover {
    background: var(--n4-surface-2);
    color: var(--n4-text);
}

.n4-nav-link.active {
    background: rgba(var(--n4-brand-rgb), .16);
    color: var(--n4-brand);
    font-weight: 600;
}

.n4-nav-link .badge {
    margin-left: auto;
}

.n4-nav-link-disabled {
    display: flex;
    align-items: center;
    gap: var(--n4-space-2);
    padding: 9px var(--n4-space-3);
    border-radius: var(--n4-radius-sm);
    color: var(--n4-text-muted);
    font-size: 14px;
    cursor: default;
}

.n4-sidebar-footer {
    padding: var(--n4-space-3);
    border-top: 1px solid var(--n4-border);
    font-size: 12px;
    color: var(--n4-text-muted);
}

/* Main / topbar ---------------------------------------------------------- */

.n4-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.n4-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--n4-space-3);
    padding: 16px 28px;
    border-bottom: 1px solid var(--n4-border);
    background: rgba(7, 13, 20, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.n4-topbar h1 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 0;
}

.n4-user {
    display: flex;
    align-items: center;
    gap: var(--n4-space-3);
}

.n4-icone-topo {
    color: var(--n4-text-muted);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--n4-radius-sm);
    text-decoration: none;
    border: 0;
    background: transparent;
}

.n4-icone-topo:hover {
    background: var(--n4-surface-2);
    color: var(--n4-text);
}

.n4-context-select {
    background: var(--n4-surface-2);
    border: 1px solid var(--n4-border);
    color: var(--n4-text);
    border-radius: var(--n4-radius-sm);
    height: 32px;
    font-size: 13px;
    padding: 0 var(--n4-space-2);
    max-width: 180px;
}

.n4-content {
    flex: 1;
    padding: 28px;
}

/* Cards -------------------------------------------------------------- */

.n4-card {
    background: var(--n4-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--n4-border);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .30);
}

.n4-card-header {
    padding: 20px 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--n4-space-3);
}

.n4-card-header h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.n4-card-body {
    padding: 20px 22px;
}

.n4-card-header + .n4-card-body {
    padding-top: 14px;
}

.n4-stat-card {
    position: relative;
    background: var(--n4-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--n4-border);
    border-radius: 18px;
    padding: 20px 22px;
}

.n4-stat-card .n4-stat-label {
    color: var(--n4-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.n4-stat-card .n4-stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: var(--n4-space-1);
}

.n4-stat-icon {
    position: absolute;
    top: var(--n4-space-3);
    right: var(--n4-space-3);
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.n4-stat-icon-success { background: rgba(34, 197, 94, .15); color: #34d27f; }
.n4-stat-icon-warning { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.n4-stat-icon-danger { background: rgba(239, 68, 68, .15); color: #f87171; }
.n4-stat-icon-info { background: rgba(56, 189, 248, .15); color: #38bdf8; }
.n4-stat-icon-neutral { background: rgba(148, 163, 175, .16); color: #94a3b8; }

.n4-empty-state {
    text-align: center;
    padding: var(--n4-space-6) var(--n4-space-4);
    color: var(--n4-text-muted);
}

.n4-confirm-modal { background: var(--n4-surface); color: var(--n4-text); border: 1px solid var(--n4-border); border-radius: 18px; box-shadow: var(--n4-shadow-md); }
.n4-confirm-logo { width: 150px; max-height: 48px; object-fit: contain; object-position: left center; }

/* Tabelas: mesmas variáveis do Bootstrap que N4STiAgent/css/dashboard.css
   sobrescreve, em vez de reinventar zebra/hover por conta própria. */
.n4-table {
    color: var(--n4-text);
    --bs-table-bg: var(--n4-table-row);
    --bs-table-striped-bg: var(--n4-table-row-alt);
    --bs-table-striped-color: var(--n4-text);
    --bs-table-hover-bg: var(--n4-table-row-hover);
    --bs-table-hover-color: var(--n4-text);
}

.n4-table thead th {
    color: var(--n4-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--n4-border);
}

.n4-table td, .n4-table th {
    border-color: rgba(255, 255, 255, .06);
    vertical-align: middle;
}

/* Botões: mesmos valores reais de N4STiAgent/css/dashboard.css
   (.n4-btn-primary/.n4-btn-soft*), aplicados direto sobre as classes
   padrão do Bootstrap que as telas já usam, em vez de renomear classe por
   classe em todas as views. */
.n4-shell .btn-primary {
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    color: #03141f;
    background: linear-gradient(135deg, var(--n4-blue-bright) 0%, var(--n4-blue) 100%);
    box-shadow: 0 14px 30px rgba(52, 184, 216, .20);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.n4-shell .btn-primary:hover,
.n4-shell .btn-primary:focus {
    color: #03141f;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 18px 36px rgba(52, 184, 216, .26);
}

.n4-shell .btn-primary:disabled,
.n4-shell .btn-primary.disabled {
    background: rgba(138, 163, 179, .18);
    color: var(--n4-text-muted);
    filter: none;
    box-shadow: none;
    cursor: not-allowed;
}

.n4-shell .btn-danger {
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.n4-shell .btn-danger:hover,
.n4-shell .btn-danger:focus {
    color: #fff;
    filter: brightness(1.05);
}

.n4-shell .btn-outline-secondary {
    border-radius: 10px;
    font-weight: 700;
    background: rgba(52, 184, 216, .14);
    color: var(--n4-blue-bright);
    border: 1px solid rgba(52, 184, 216, .32);
    transition: all .16s ease;
}

.n4-shell .btn-outline-secondary:hover,
.n4-shell .btn-outline-secondary:focus {
    background: rgba(52, 184, 216, .26);
    color: #fff;
    border-color: var(--n4-blue-bright);
}

.n4-shell .btn-outline-primary {
    border-radius: 10px;
    font-weight: 700;
    background: rgba(96, 132, 246, .14);
    color: #8fa8fb;
    border: 1px solid rgba(96, 132, 246, .34);
    transition: all .16s ease;
}

.n4-shell .btn-outline-primary:hover,
.n4-shell .btn-outline-primary:focus {
    background: rgba(96, 132, 246, .26);
    color: #fff;
    border-color: #8fa8fb;
}

.n4-shell .btn-outline-danger {
    border-radius: 10px;
    font-weight: 700;
    background: rgba(239, 68, 68, .14);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, .34);
    transition: all .16s ease;
}

.n4-shell .btn-outline-danger:hover,
.n4-shell .btn-outline-danger:focus {
    background: rgba(239, 68, 68, .26);
    color: #fff;
    border-color: #f87171;
}

.n4-shell .btn-outline-secondary:disabled,
.n4-shell .btn-outline-primary:disabled,
.n4-shell .btn-outline-danger:disabled,
.n4-shell .btn-outline-secondary.disabled,
.n4-shell .btn-outline-primary.disabled,
.n4-shell .btn-outline-danger.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Inputs/selects em todo o sistema, mesmo visual suave de N4STiAgent. */
.n4-shell .form-control,
.n4-shell .form-select {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--n4-border);
    border-radius: 8px;
    color: var(--n4-text);
}

.n4-shell .form-control:hover,
.n4-shell .form-select:hover {
    border-color: rgba(52, 184, 216, .45);
}

.n4-shell .form-control:focus,
.n4-shell .form-select:focus {
    background: rgba(52, 184, 216, .08);
    border-color: var(--n4-blue-bright);
    color: var(--n4-text);
    box-shadow: 0 0 0 3px rgba(52, 184, 216, .16);
}

.n4-shell .form-control::placeholder {
    color: var(--n4-text-muted);
}

.n4-shell .form-select option,
.n4-shell .form-select optgroup {
    background-color: #0c1622;
    color: var(--n4-text);
}

/* Badges de status: mesmos tons soft de N4STiAgent, aplicados sobre as
   classes text-bg-* do Bootstrap que as telas já usam. */
.n4-shell .badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .3rem .65rem;
}

.n4-shell .badge.text-bg-success {
    background: rgba(34, 197, 94, .14) !important;
    color: #34d27f !important;
    border: 1px solid rgba(34, 197, 94, .32);
}

.n4-shell .badge.text-bg-secondary,
.n4-shell .badge.text-bg-light {
    background: rgba(148, 163, 175, .14) !important;
    color: #93a5ac !important;
    border: 1px solid rgba(148, 163, 175, .30);
}

.n4-shell .badge.text-bg-danger {
    background: rgba(239, 68, 68, .14) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, .32);
}

.n4-shell .badge.text-bg-primary,
.n4-shell .badge.text-bg-info {
    background: rgba(52, 184, 216, .14) !important;
    color: var(--n4-blue-bright) !important;
    border: 1px solid rgba(52, 184, 216, .30);
}

.n4-shell .badge.text-bg-warning {
    background: rgba(245, 158, 11, .16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, .34);
}

/* Responsivo ----------------------------------------------------------- */
.n4-help-drawer{--bs-offcanvas-width:min(420px,92vw);background:var(--n4-surface);color:var(--n4-text);border-left:1px solid var(--n4-border)}
.n4-help-logo{width:110px;max-height:48px;object-fit:contain;margin-bottom:1.25rem}
.n4-form-tabs{border-bottom:1px solid var(--n4-border);margin-bottom:1.25rem;gap:.25rem}
.n4-form-tabs .nav-link{color:var(--n4-text-muted);border:0;border-bottom:3px solid transparent;border-radius:0;padding:.75rem 1rem}
.n4-form-tabs .nav-link.active{color:var(--n4-blue-bright);background:transparent;border-bottom-color:var(--n4-blue-bright)}

@media (max-width: 991px) {
    .n4-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform .18s ease;
        z-index: 40;
        box-shadow: var(--n4-shadow-md);
    }

    .n4-sidebar.n4-sidebar-open {
        transform: translateX(0);
    }

    .n4-content {
        padding: var(--n4-space-4);
    }
}