/* Stessa palette scura/viola di DuckDoo (dki_podman_containers/duckdoo/static/css/duckdoo.css),
   applicata sopra Bootstrap 5 invece di sostituirlo — coerenza visiva tra gli strumenti DuckPage. */
:root {
  --bg-base:     #13131f;
  --bg-card:     #1a1a2e;
  --bg-card-2:   #16162a;
  --bg-input:    #0e0e1c;
  --border:      #252545;
  --border-soft: #2e2e50;
  --text-main:   #d0d0e0;
  --text-muted:  #7a7a9a;
  --text-dim:    #484868;
  --text-accent: #c49af8;
  --accent:      #7a24bf;
  --accent-dark: #5a1a9a;
  --accent-hover:#8a30d0;
  --ok:          #4aaa6a;
  --ok-bg:       #16311f;
  --warn:        #d0a030;
  --warn-bg:     #332a0f;
  --err:         #d05a5a;
  --err-bg:      #331414;
}

body {
  background: var(--bg-base);
  color: var(--text-main);
}

a { color: var(--text-accent); }
a:hover { color: var(--accent-hover); }
code { color: var(--text-accent); }
hr { border-color: var(--border); opacity: 1; }

#duckagent-topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
#duckagent-topbar .navbar-brand { color: var(--text-accent) !important; font-weight: 600; }
#duckagent-topbar .nav-link {
  color: var(--text-muted) !important;
  font-size: .9rem;
}
#duckagent-topbar .nav-link.active,
#duckagent-topbar .nav-link:hover { color: var(--text-main) !important; }
#duckagent-topbar .nav-link.active { border-bottom: 2px solid var(--accent); }

#duckagent-main { min-height: calc(100vh - 56px - 38px); }

/* Logo nella barra (quando configurato in branding.yaml) */
.brand-logo { height: 22px; vertical-align: middle; margin-right: .35rem; }
.brand-logo-lg { height: 30px; margin-right: 0; }
.brand-logo-xl { height: 60px; margin-right: 0; }

/* Footer fisso — testo brandizzabile via branding.yaml (footer_text) */
#duckagent-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  text-align: center;
  font-size: .78rem;
  padding: .4rem 1rem;
  z-index: 1030;
}
body { padding-bottom: 38px; }  /* spazio per il footer fisso */

.card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-main);
}
.card-title { color: var(--text-main); }

.btn-primary {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #ede0ff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.form-control, .form-select {
  background: var(--bg-input); border-color: var(--border-soft); color: var(--text-main);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-input); border-color: var(--accent); color: var(--text-main);
  box-shadow: 0 0 0 .2rem rgba(122,36,191,.25);
}
.form-control::placeholder { color: var(--text-dim); }
.form-label { color: var(--text-muted); }
.form-text { color: var(--text-dim); }

.alert-success { background: var(--ok-bg); color: var(--ok); border-color: #224a34; }
.alert-info { background: #14273a; color: #6ab0d0; border-color: #1a3a50; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: #4a3a10; }
.alert-danger { background: var(--err-bg); color: var(--err); border-color: #4a2020; }

/* Tab del form di configurazione (/config) */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--text-main); border-color: var(--border) var(--border) transparent; }
.nav-tabs .nav-link.active {
  color: var(--text-accent); background: var(--bg-card);
  border-color: var(--border) var(--border) var(--bg-card);
}
.tab-content { background: var(--bg-card); border-color: var(--border) !important; }
.section-disabled { opacity: .45; pointer-events: none; }

/* Modal di riavvio (/config dopo il salvataggio) */
.modal-content { background: var(--bg-card); border-color: var(--border-soft); color: var(--text-main); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { color: var(--text-accent); }
#restart-countdown { color: var(--text-accent); font-variant-numeric: tabular-nums; }
/* I tab-pane del form di configurazione sono annidati dentro il <form>, quindi
   non sono figli diretti di .tab-content: la regola di Bootstrap
   ".tab-content > .tab-pane { display: none }" non li seleziona e i tab non
   attivi restano nel flusso (solo opacity:0), sommando le loro altezze e
   spingendo il tab attivo in fondo a un contenitore altissimo. Override che
   funziona a qualunque profondita' di annidamento. */
.tab-pane:not(.active) { display: none; }

/* Log container — riusato dalla pagina /logs (Fase 4) */
.container-log-output {
  background: var(--bg-input);
  border-radius: 6px;
  padding: .5rem .6rem;
  max-height: 600px;
  overflow-y: auto;
  overflow-wrap: break-word;
}
.log-line-info { color: #9aa0a6; }
.log-line-success { color: var(--ok); }
.log-line-warning { color: var(--warn); }
.log-line-error { color: var(--err); }