:root {
    --bg-dark-primary: #1e2125;
    --bg-dark-secondary: #282c31;
    --bg-dark-tertiary: #32373d;
    --border-color: #40464f;
    --text-primary: #e6e6e6;
    --text-secondary: #a0a7b3;
    --accent-color: #0d6efd;
    --accent-hover: #0b5ed7;
    --green: #198754;
    --red: #dc3545;
    --yellow: #ffc107;
    --cyan: #17a2b8;
    --nav-width: 250px;
    --header-height: 60px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: var(--bg-dark-primary);
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
}

/* --- ESTILOS DA PÁGINA DE LOGIN --- */
.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: var(--bg-dark-primary); }
.login-box { background-color: var(--bg-dark-secondary); padding: 40px; border-radius: 8px; border: 1px solid var(--border-color); width: 100%; max-width: 400px; text-align: center; }
.login-box h1 { margin-top: 0; margin-bottom: 10px; }
.login-box p { color: var(--text-secondary); margin-bottom: 25px; }
.login-box .form-group { text-align: left; margin-bottom: 15px; }
.login-box input { width: 100%; }
.login-box button { width: 100%; padding: 12px; margin-top: 10px; background-color: var(--accent-color); border: none; color: white; font-size: 1.1em; }
.error-message { color: var(--red); margin-top: 15px; font-weight: bold; min-height: 20px; }

/* --- ESTILOS DO PAINEL PRINCIPAL --- */
.app-container { display: flex; height: 100vh; }
#main-nav { width: var(--nav-width); background-color: var(--bg-dark-secondary); flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); transition: margin-left 0.3s ease; z-index: 2000;}
.nav-header { padding: 0 20px; height: var(--header-height); display: flex; align-items: center; border-bottom: 1px solid var(--border-color); }
.nav-header h1 { margin: 0; font-size: 1.5em; font-weight: 600; }
.nav-header .version { font-size: 0.7em; color: var(--text-secondary); }
#main-nav-list { list-style: none; padding: 10px 0; margin: 0; flex-grow: 1; overflow-y: auto; }
#main-nav-list li { display: flex; align-items: center; gap: 15px; padding: 15px 20px; cursor: pointer; border-left: 3px solid transparent; transition: background-color 0.2s, border-left-color 0.2s; }
#main-nav-list li:hover { background-color: var(--bg-dark-tertiary); }
#main-nav-list li.active { background-color: var(--bg-dark-primary); border-left-color: var(--accent-color); font-weight: 600; }
#main-nav-list li .fa-fw { width: 20px; text-align: center; color: var(--text-secondary); font-size: 1.1em; }
#main-nav-list li.active .fa-fw { color: var(--accent-color); }
.nav-separator { border-top: 1px solid var(--border-color); margin-top: 10px; padding-top: 10px; }

.main-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; height: 100vh; width: calc(100% - var(--nav-width)); }
header { height: var(--header-height); background-color: var(--bg-dark-secondary); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; padding: 0 30px; flex-shrink: 0; }
#hamburger-menu { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5em; cursor: pointer; }
#user-info { display: flex; align-items: center; gap: 15px; }
#user-info .fa-user-circle { font-size: 1.8em; }
main { flex-grow: 1; padding: 25px; overflow-y: auto; }
.page-header { border-bottom: 1px solid var(--border-color); margin-bottom: 25px; }
.page-header h1 { margin: 0 0 15px 0; }
.page-content { display: none; }
.page-content.active { display: block; }

button, select, input, textarea { background-color: var(--bg-dark-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 5px; padding: 10px 15px; font-size: 1em; font-family: inherit; }
button { cursor: pointer; transition: background-color 0.2s; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
button:hover:not(:disabled) { filter: brightness(1.2); }
button:disabled { cursor: not-allowed; opacity: 0.6; }
button.primary { background-color: var(--accent-color); border-color: var(--accent-color); color: white; }
.form-section { background-color: var(--bg-dark-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; margin-bottom: 20px; }
.form-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.form-header h2 { margin: 0; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-weight: 500; }
fieldset { border: 1px solid var(--border-color); padding: 20px; border-radius: 5px; margin-top: 10px; }
legend { padding: 0 10px; color: var(--accent-color); font-weight: 600; }
input[type="color"] { padding: 5px; height: 40px; }
input, select { width: 100%; }

/* --- Styles from original config page (no longer used directly but kept for other pages) --- */
#page-config-layout { display: flex; gap: 25px; }
#sub-nav { flex: 0 0 280px; }
#form-wrapper { flex-grow: 1; }

/* --- NEW CONFIG PAGE STYLES --- */
.config-action-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; padding: 20px; background-color: var(--bg-dark-secondary); border-radius: 8px; }
.config-action-bar .filters { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.config-action-bar .filters select, .config-action-bar .filters input { width: auto; min-width: 180px; }
.config-action-bar .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.search-bar { position: relative; }
.search-bar input { padding-right: 35px; }
.search-bar .fa-search { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
#config-list-container { background-color: var(--bg-dark-secondary); border-radius: 8px; padding: 10px 25px; overflow-x: auto; }
.config-list-header, .config-list-item { display: grid; grid-template-columns: 40px 80px 1fr 1fr 80px 120px 100px 120px; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border-color); min-width: 900px; }
.config-list-header { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 0.85em; }
.config-list-item:last-child { border-bottom: none; }
.config-list-item:hover { background-color: var(--bg-dark-tertiary); margin: 0 -25px; padding: 15px 25px; border-radius: 5px; }
.config-actions button { padding: 5px 8px; font-size: 0.9em; border: none; background-color: transparent; color: var(--text-secondary); }
.config-actions button:hover { color: var(--text-primary); background-color: var(--bg-dark-primary); }
.status-toggle { position: relative; display: inline-block; width: 50px; height: 26px; }
.status-toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-dark-tertiary); transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--green); }
input:checked + .slider:before { transform: translateX(24px); }

/* --- MODAL STYLES --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; display: none; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.show { display: flex; opacity: 1; visibility: visible; }
.modal-content { background-color: var(--bg-dark-secondary); border-radius: 8px; width: 90%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.show .modal-content { transform: scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.modal-header h2 { margin: 0; }
.close-btn { background: none; border: none; font-size: 2em; color: var(--text-secondary); cursor: pointer; padding: 0; line-height: 1; }
.modal-body { padding: 25px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modal-body .form-group.full-width { grid-column: 1 / -1; }
.modal-body textarea { min-height: 120px; resize: vertical; width: 100%; }
.modal-footer { padding: 20px 25px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; }
.btn-secondary { background-color: var(--bg-dark-tertiary); border-color: var(--border-color); }

/* --- OTHER SHARED STYLES --- */
.action-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dynamic-list-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dynamic-list-item:first-child { padding-top: 0; }
.dynamic-list-item:last-child { border-bottom: none; }
.btn-remove-item { background-color: var(--red); color: white; }
.btn-clear { background-color: var(--yellow); color: #212529; }
.item-id { font-size: 0.9em; color: var(--text-secondary); }

.export-list { list-style: none; padding: 0; }
.export-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-color); }
.export-item:last-child { border-bottom: none; }
.export-item span { font-size: 1.2em; font-weight: 500; }
.export-actions { display: flex; gap: 10px; align-items: center; }
.export-actions input { min-width: 300px; background-color: var(--bg-dark-primary); }
.btn-upload { background-color: var(--cyan); color: white; }
.btn-delete { background-color: #6c757d; }
#final-json-output { width: 100%; background-color: var(--bg-dark-primary); font-family: monospace; font-size: 0.9em; }

.feedback-toast { position: fixed; bottom: 20px; right: 20px; padding: 15px 25px; border-radius: 5px; color: white; font-weight: 600; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease-in-out; }
.feedback-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
.feedback-toast.success { background-color: var(--green); }
.feedback-toast.error { background-color: var(--red); }

/* --- RESPONSIVE STYLES --- */
@media (max-width: 1200px) {
    .config-list-header, .config-list-item { grid-template-columns: 40px 1fr 1fr 100px 120px; }
    .config-list-header .col-id, .config-list-item .col-id,
    .config-list-header .col-order, .config-list-item .col-order,
    .config-list-header .col-mode, .config-list-item .col-mode { display: none; }
}

@media (max-width: 768px) {
    #main-nav { position: fixed; margin-left: calc(var(--nav-width) * -1); }
    #main-nav.open { margin-left: 0; }
    .main-content-wrapper { width: 100%; }
    #hamburger-menu { display: block; }
    main { padding: 15px; }
    .config-action-bar { flex-direction: column; align-items: stretch; }
    .config-list-header { display: none; }
    .config-list-item { grid-template-columns: 1fr; gap: 10px; padding: 15px; margin-bottom: 10px; background-color: var(--bg-dark-tertiary); border-radius: 5px; border-bottom: none; min-width: 0;}
    .config-list-item:hover { margin: 0; padding: 15px; }
    .config-list-item > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0;}
    .config-list-item > div::before { content: attr(data-label); font-weight: 600; color: var(--text-secondary); margin-right: 10px; }
    .config-list-item .col-checkbox, .config-list-item .col-actions { justify-content: center; padding: 10px 0;}
    .config-list-item .col-checkbox::before, .config-list-item .col-actions::before { content: none; }
    .config-list-item .col-id, .config-list-item .col-order, .config-list-item .col-mode { display: flex; }
    .modal-content { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .modal-body { grid-template-columns: 1fr; }
    .modal-body .form-group { grid-column: 1 / -1; }
}


/* --- VEM_BRABO Conecta6G additions --- */
.nav-header h1 { letter-spacing: .2px; }
.nav-header .brand-small { display:block; color: var(--accent-color); font-size: 11px; margin-top: 2px; }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:16px; margin-bottom:22px; }
.stat-card { background: linear-gradient(145deg, var(--bg-dark-secondary), var(--bg-dark-tertiary)); border:1px solid var(--border-color); border-radius:10px; padding:18px; }
.stat-card .label { color:var(--text-secondary); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.stat-card .value { font-size:28px; font-weight:800; margin-top:8px; }
.panel-card { background: var(--bg-dark-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.panel-card h2 { margin: 0 0 16px; font-size: 18px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
.field-wide { grid-column: 1/-1; }
textarea.code-editor { min-height: 520px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height:1.45; background:#111418; color:#d8f3ff; }
.list-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.table-wrap { overflow-x:auto; border:1px solid var(--border-color); border-radius:8px; }
table.clean { width:100%; border-collapse:collapse; min-width:900px; background: var(--bg-dark-secondary); }
table.clean th, table.clean td { border-bottom:1px solid var(--border-color); padding:10px; text-align:left; vertical-align:top; }
table.clean th { color: var(--text-secondary); text-transform:uppercase; font-size:12px; background: var(--bg-dark-tertiary); }
table.clean tr:hover td { background: rgba(255,255,255,.025); }
table.clean input, table.clean textarea, table.clean select { width:100%; min-width:120px; }
table.clean textarea { min-height:70px; resize:vertical; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:var(--bg-dark-tertiary); color:var(--text-secondary); font-size:12px; }
.badge.ok { background: rgba(25,135,84,.2); color:#66e39a; }
.badge.warn { background: rgba(255,193,7,.16); color:#ffd75d; }
.link-list code { display:block; background:var(--bg-dark-primary); border:1px solid var(--border-color); border-radius:6px; padding:10px; margin:8px 0 14px; color:#c9eaff; white-space: normal; word-break: break-all; }
button.danger { background: var(--red); color:#fff; }
button.ghost { background: transparent; border:1px solid var(--border-color); color: var(--text-primary); }
button.small { padding:6px 10px; font-size:12px; }
input[type="checkbox"] { width:auto; }
@media (max-width:768px){ .grid-2,.grid-3{ grid-template-columns:1fr; } body{ overflow:auto; } .app-container{ min-height:100vh; height:auto; } }

/* --- UI2: menu mobile corrigido e painel mais organizado --- */
.nav-header { justify-content: space-between; gap: 10px; }
.nav-close { display: none; width: 42px; height: 42px; padding: 0; border-radius: 12px; background: rgba(255,255,255,.05); }
.nav-label { cursor: default !important; padding: 16px 20px 7px !important; color: var(--text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; border-left: 3px solid transparent !important; background: transparent !important; font-weight: 800; opacity: .78; }
.logout-item { color: #ffb4b4; }
.logout-item .fa-fw { color: #ff8a8a !important; }
.header-left { display:flex; align-items:center; gap:14px; min-width:0; }
#current-page-title { font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
#nav-overlay { display:none; position:fixed; inset:0; background: rgba(0,0,0,.62); z-index:1500; opacity:0; transition: opacity .22s ease; backdrop-filter: blur(2px); }
#nav-overlay.show { display:block; opacity:1; }
body.nav-locked { overflow:hidden; }
.page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.page-header h1 { font-size: clamp(22px, 4vw, 34px); }
.page-subtitle { color: var(--text-secondary); margin: -10px 0 18px; line-height:1.5; }
.quick-actions { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:18px; }
.quick-actions button { width:100%; min-height:46px; }
.panel-card.soft { background: linear-gradient(145deg, rgba(13,110,253,.10), rgba(40,44,49,.95)); }
.hint-box { border:1px solid rgba(255,193,7,.35); background: rgba(255,193,7,.10); color:#ffe69c; border-radius:8px; padding:12px 14px; line-height:1.45; margin: 10px 0 16px; }
.form-group textarea { width:100%; resize: vertical; }
.action-bar.sticky-actions, .list-toolbar.sticky-actions { position: sticky; bottom: 0; z-index: 20; background: rgba(40,44,49,.96); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; backdrop-filter: blur(8px); }
.table-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.table-toolbar .left, .table-toolbar .right { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.table-toolbar input[type="search"] { min-width: 230px; width: min(100%, 330px); }
.counter-pill { display:inline-flex; align-items:center; gap:6px; background: var(--bg-dark-tertiary); border:1px solid var(--border-color); padding:8px 10px; border-radius:999px; color:var(--text-secondary); }
.empty-state { padding:28px; text-align:center; color:var(--text-secondary); border:1px dashed var(--border-color); border-radius:10px; }
.clean td:last-child { min-width: 150px; }
.clean .row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.mini-note { color:var(--text-secondary); font-size:12px; margin-top:6px; }

@media (max-width:768px){
  :root { --nav-width: 82vw; }
  #main-nav { top:0; bottom:0; left:0; height:100dvh; width:min(var(--nav-width), 360px); transform: translateX(-105%); margin-left:0 !important; transition: transform .22s ease; box-shadow: 16px 0 40px rgba(0,0,0,.35); z-index:2001; }
  #main-nav.open { transform: translateX(0); }
  .nav-close { display:inline-flex; }
  #main-nav-list li { padding: 15px 22px; font-size: 16px; }
  header { padding:0 14px; position: sticky; top:0; z-index:900; }
  #user-info span { max-width: 90px; overflow:hidden; text-overflow:ellipsis; }
  .page-header { margin-bottom: 16px; }
  main { padding: 14px; }
  .panel-card { padding:14px; border-radius:14px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .stat-card { padding:14px; }
  .stat-card .value { font-size: 24px; }
  .form-grid { grid-template-columns:1fr; }
  .list-toolbar, .action-bar, .table-toolbar, .table-toolbar .left, .table-toolbar .right { flex-direction: column; align-items: stretch; }
  .list-toolbar button, .action-bar button, .table-toolbar button, .table-toolbar input[type="search"] { width:100%; }
  table.clean { min-width: 760px; }
  .feedback-toast { left:14px; right:14px; bottom:14px; text-align:center; }
}