/* ============================================================
   ANSIBLE MANAGER — Professional Dark Theme
   Seven-Bits © 2025
   Loads AFTER Bootstrap — overrides all utility classes
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg-base:        #0a0b10;
  --bg-surface:     #111219;
  --bg-elevated:    #181922;
  --bg-hover:       #1e1f2e;

  --border:         rgba(255, 255, 255, 0.07);
  --border-accent:  rgba(109, 40, 217, 0.35);

  --accent:         #7c3aed;
  --accent-light:   #9461f7;
  --accent-dim:     rgba(124, 58, 237, 0.15);
  --indigo:         #4f46e5;

  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  --green:  #10b981;
  --red:    #ef4444;
  --yellow: #f59e0b;
  --cyan:   #06b6d4;

  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ── RESET BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Subtle ambient gradient */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(124,58,237,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(79,70,229,.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.container, .container-fluid, main { position: relative; z-index: 1; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; font-weight: 600; }
p, span, li            { color: var(--text-primary) !important; }
label                  { color: var(--text-secondary) !important; font-size: .85rem; font-weight: 500; }
small, .form-text      { color: var(--text-muted) !important; }
.text-muted            { color: var(--text-muted) !important; }
.lead                  { color: var(--text-secondary) !important; }
code, pre              { background: var(--bg-elevated) !important; color: var(--accent-light) !important; border-radius: var(--radius); padding: .1rem .4rem; }

/* ── BOOTSTRAP UTILITY OVERRIDES ────────────────────────── */
.bg-primary  { background: var(--accent)        !important; }
.bg-secondary{ background: var(--bg-elevated)   !important; }
.bg-light    { background: var(--bg-elevated)   !important; }
.bg-dark     { background: var(--bg-surface)    !important; }
.bg-white    { background: var(--bg-surface)    !important; }
.bg-info     { background: var(--cyan)          !important; }
.bg-success  { background: var(--green)         !important; }
.bg-warning  { background: var(--yellow)        !important; }
.bg-danger   { background: var(--red)           !important; }
.text-dark   { color: var(--text-primary)       !important; }
.text-white  { color: var(--text-primary)       !important; }
.border      { border-color: var(--border)      !important; }
.border-primary { border-color: var(--border-accent) !important; }

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
  padding: .65rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-brand {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.navbar-brand i { color: var(--accent-light); }
.navbar-brand:hover { color: var(--accent-light) !important; }

.navbar .nav-link {
  color: var(--text-secondary) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .4rem .75rem !important;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--text-primary) !important; background: var(--accent-dim); }

.navbar-toggler { border-color: var(--border) !important; }
.navbar-toggler-icon { filter: invert(1) brightness(.6); }

/* ── DROPDOWNS ──────────────────────────────────────────── */
.dropdown-menu {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-accent) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-lg) !important;
  padding: .35rem !important;
  min-width: 180px !important;
}

.dropdown-item {
  color: var(--text-secondary) !important;
  font-size: .875rem;
  border-radius: var(--radius) !important;
  padding: .5rem .85rem !important;
  transition: background .15s, color .15s;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--accent-dim) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider { border-color: var(--border) !important; margin: .35rem .5rem !important; }
.dropdown-header  { color: var(--text-muted) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-primary) !important;
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}

.card:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-lg) !important;
}

.card-header {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  padding: .85rem 1.25rem !important;
  font-weight: 600;
  font-size: .9rem;
}

.card-header h5, .card-header h6 { margin: 0 !important; font-size: .9rem !important; }

.card-body  { background: transparent !important; color: var(--text-primary) !important; }
.card-footer{ background: var(--bg-elevated) !important; border-top: 1px solid var(--border) !important; }

.card-title { color: var(--text-primary) !important; font-size: .95rem; font-weight: 600; }
.card-text  { color: var(--text-secondary) !important; font-size: .875rem; }

/* Stats cards numbers */
.card .display-4, .card .display-5, .card .display-6 {
  color: var(--accent-light) !important;
  font-weight: 700;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--radius) !important;
  transition: all .15s ease;
  border: none;
  letter-spacing: .01em;
}

.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.btn-primary:hover { background: var(--accent-light) !important; box-shadow: 0 4px 14px rgba(124,58,237,.4); transform: translateY(-1px); }

.btn-secondary { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }
.btn-secondary:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-accent) !important; }

.btn-success  { background: var(--green)  !important; color: #fff !important; }
.btn-danger   { background: var(--red)    !important; color: #fff !important; }
.btn-warning  { background: var(--yellow) !important; color: #0f0f14 !important; }
.btn-info     { background: var(--cyan)   !important; color: #0f0f14 !important; }

.btn-outline-primary {
  border: 1px solid var(--accent) !important;
  color: var(--accent-light) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { background: var(--accent-dim) !important; color: var(--text-primary) !important; }

.btn-outline-secondary { border: 1px solid var(--border) !important; color: var(--text-secondary) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }

.btn-outline-success { border: 1px solid var(--green) !important; color: var(--green) !important; background: transparent !important; }
.btn-outline-success:hover { background: rgba(16,185,129,.12) !important; }

.btn-outline-danger { border: 1px solid var(--red) !important; color: var(--red) !important; background: transparent !important; }
.btn-outline-danger:hover { background: rgba(239,68,68,.12) !important; }

.btn-outline-warning { border: 1px solid var(--yellow) !important; color: var(--yellow) !important; background: transparent !important; }
.btn-outline-warning:hover { background: rgba(245,158,11,.12) !important; }

.btn-outline-info { border: 1px solid var(--cyan) !important; color: var(--cyan) !important; background: transparent !important; }
.btn-outline-info:hover { background: rgba(6,182,212,.12) !important; }

.btn-outline-dark { border: 1px solid var(--border-accent) !important; color: var(--text-secondary) !important; background: transparent !important; }
.btn-outline-dark:hover { background: var(--accent-dim) !important; color: var(--text-primary) !important; }

.btn-sm { font-size: .8rem; padding: .3rem .7rem !important; }
.btn-lg { padding: .65rem 1.5rem !important; }

.btn:active { transform: translateY(0) !important; }
.btn:disabled { opacity: .45; }

/* ── FORMS ──────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius) !important;
  font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
  background: var(--bg-hover) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.2) !important;
  color: var(--text-primary) !important;
}

.form-control::placeholder { color: var(--text-muted) !important; }
.form-select option { background: var(--bg-elevated); color: var(--text-primary); }

.form-label { color: var(--text-secondary) !important; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }

.input-group-text {
  background: var(--bg-hover) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent-light) !important;
  font-size: .875rem;
}

.form-check-input {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-accent) !important;
}
.form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.form-check-label { color: var(--text-secondary) !important; font-size: .875rem; }

.form-switch .form-check-input { background-color: var(--bg-hover) !important; }
.form-switch .form-check-input:checked { background-color: var(--accent) !important; }

.valid-feedback   { color: var(--green) !important; font-size: .78rem; }
.invalid-feedback { color: var(--red)   !important; font-size: .78rem; }
.form-control.is-valid { border-color: var(--green) !important; }
.form-control.is-invalid { border-color: var(--red) !important; }

/* ── TABLES ─────────────────────────────────────────────── */
.table {
  color: var(--text-primary) !important;
  font-size: .875rem;
  --bs-table-bg: transparent !important;
}

.table thead th {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-color: var(--border) !important;
  padding: .75rem 1rem !important;
}

.table tbody td {
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  padding: .7rem 1rem !important;
  vertical-align: middle;
}

.table tbody tr { background: transparent !important; transition: background .12s; }
.table tbody tr:hover { background: var(--bg-elevated) !important; }

.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.025) !important; }

/* ── ALERTS ─────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-lg) !important;
  border: 1px solid !important;
  font-size: .875rem;
  padding: .85rem 1.1rem !important;
}
.alert *, .alert i { color: inherit !important; }

.alert-success  { background: rgba(16,185,129,.1)  !important; border-color: rgba(16,185,129,.3)  !important; color: #6ee7b7 !important; }
.alert-danger   { background: rgba(239,68,68,.1)   !important; border-color: rgba(239,68,68,.3)   !important; color: #fca5a5 !important; }
.alert-warning  { background: rgba(245,158,11,.1)  !important; border-color: rgba(245,158,11,.3)  !important; color: #fcd34d !important; }
.alert-info     { background: rgba(6,182,212,.1)   !important; border-color: rgba(6,182,212,.3)   !important; color: #67e8f9 !important; }
.alert-primary  { background: var(--accent-dim)    !important; border-color: var(--border-accent) !important; color: var(--accent-light) !important; }
.alert-secondary{ background: var(--bg-elevated)   !important; border-color: var(--border)        !important; color: var(--text-secondary) !important; }
.alert-light    { background: var(--bg-elevated)   !important; border-color: var(--border)        !important; color: var(--text-secondary) !important; }

/* ── BADGES ─────────────────────────────────────────────── */
.badge {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 4px !important;
  padding: .25rem .55rem !important;
}
.badge.bg-primary   { background: var(--accent)       !important; color: #fff !important; }
.badge.bg-secondary { background: var(--bg-hover)     !important; color: var(--text-secondary) !important; }
.badge.bg-success   { background: rgba(16,185,129,.2) !important; color: var(--green) !important; }
.badge.bg-danger    { background: rgba(239,68,68,.2)  !important; color: var(--red) !important; }
.badge.bg-warning   { background: rgba(245,158,11,.2) !important; color: var(--yellow) !important; }
.badge.bg-info      { background: rgba(6,182,212,.2)  !important; color: var(--cyan) !important; }
.badge.bg-dark      { background: var(--bg-elevated)  !important; color: var(--text-secondary) !important; }

/* ── MODALS ─────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
}
.modal-header { background: var(--bg-elevated) !important; border-bottom: 1px solid var(--border) !important; padding: 1rem 1.25rem !important; }
.modal-footer { background: transparent !important; border-top: 1px solid var(--border) !important; }
.modal-body   { background: transparent !important; color: var(--text-primary) !important; }
.modal-title  { font-size: .95rem; font-weight: 600; color: var(--text-primary) !important; }
.btn-close    { filter: invert(1) brightness(.6); }
.modal-backdrop { background: rgba(0,0,0,.7) !important; }

/* ── LIST GROUPS ────────────────────────────────────────── */
.list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  font-size: .875rem;
  transition: background .12s;
}
.list-group-item:hover { background: var(--bg-elevated) !important; }
.list-group-item-action:focus { background: var(--bg-hover) !important; color: var(--text-primary) !important; }

/* ── PROGRESS ───────────────────────────────────────────── */
.progress { background: var(--bg-elevated) !important; border-radius: var(--radius) !important; height: 6px; }
.progress-bar { background: var(--accent) !important; border-radius: var(--radius) !important; }
.progress-bar-striped { background-image: linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 75%,transparent 75%) !important; }

/* ── TABS ───────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-muted) !important; border: none !important; padding: .5rem 1rem !important; font-size: .875rem; border-radius: var(--radius) var(--radius) 0 0 !important; }
.nav-tabs .nav-link:hover { color: var(--text-primary) !important; background: var(--bg-elevated) !important; }
.nav-tabs .nav-link.active { color: var(--accent-light) !important; background: var(--bg-elevated) !important; border-bottom: 2px solid var(--accent) !important; }
.tab-content { background: transparent !important; }

/* ── PAGINATION ─────────────────────────────────────────── */
.page-link { background: var(--bg-elevated) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; font-size: .875rem; }
.page-link:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-accent) !important; }
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.page-item.disabled .page-link { background: var(--bg-surface) !important; color: var(--text-muted) !important; }

/* ── TOOLTIPS & POPOVERS ────────────────────────────────── */
.tooltip-inner { background: var(--bg-elevated) !important; color: var(--text-primary) !important; font-size: .8rem; border-radius: var(--radius) !important; }
.popover { background: var(--bg-elevated) !important; border-color: var(--border-accent) !important; }

/* ── DATATABLES ─────────────────────────────────────────── */
.dataTables_wrapper { color: var(--text-primary) !important; }
.dataTables_wrapper select,
.dataTables_wrapper input { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; border-radius: var(--radius) !important; padding: .3rem .6rem; font-size: .85rem; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate { color: var(--text-muted) !important; font-size: .82rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-secondary) !important; background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-accent) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
div.dataTables_scrollHead table.dataTable { margin-bottom: 0; }

/* ── CHARTS (canvas bg) ─────────────────────────────────── */
canvas { max-height: 240px; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  padding: 1.25rem 0 !important;
  margin-top: 3rem;
  font-size: .8rem;
}
footer p, footer * { color: var(--text-muted) !important; }

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── PAGE SECTIONS ──────────────────────────────────────── */
.quick-stats {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem;
}
.quick-stats i { color: var(--accent-light); }
.quick-stats h3 { color: var(--text-primary) !important; font-weight: 700; font-size: 1.6rem; }
.quick-stats small { color: var(--text-muted) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

.stats-card { transition: transform .2s, box-shadow .2s; }
.stats-card:hover { transform: translateY(-3px); }

/* Section headers inside forms */
.section-header {
  background: var(--bg-elevated) !important;
  border-left: 3px solid var(--accent) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-right: none !important;
  padding: .65rem 1rem !important;
  margin: 1.5rem 0 1rem !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.section-header h5 { font-size: .875rem !important; color: var(--text-primary) !important; margin: 0 !important; }
.section-header.location { border-left-color: var(--cyan) !important; }
.section-header.os       { border-left-color: var(--green) !important; }
.section-header.ssh      { border-left-color: var(--yellow) !important; }

/* Form help box */
.form-help {
  background: var(--accent-dim) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem;
  font-size: .875rem;
}

/* Host cards */
.host-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: .75rem !important;
  margin-bottom: .5rem !important;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.host-card:hover { border-color: var(--border-accent) !important; background: var(--bg-hover) !important; }
.host-card.selected,
.host-card:has(.host-checkbox:checked) { border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.host-card label { color: var(--text-primary) !important; cursor: pointer; width: 100%; margin: 0; font-size: .875rem; }
.host-card strong { color: var(--text-primary) !important; }
.host-card .text-muted, .host-card small { color: var(--text-muted) !important; }

/* Playbook cards */
.playbook-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1rem !important;
  transition: border-color .15s;
  cursor: pointer;
}
.playbook-card:hover { border-color: var(--border-accent) !important; }
.playbook-card.selected { border-color: var(--accent) !important; background: var(--accent-dim) !important; }

/* Filter sections */
.filter-section {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem;
}

/* Availability indicators */
.availability-indicator {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.availability-indicator.online   { background: var(--green); box-shadow: 0 0 6px var(--green); }
.availability-indicator.offline  { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.availability-indicator.checking { background: var(--yellow); }
.availability-indicator.unknown  { background: var(--text-muted); }

/* Status text colors */
.text-success { color: var(--green)  !important; }
.text-danger  { color: var(--red)    !important; }
.text-warning { color: var(--yellow) !important; }
.text-info    { color: var(--cyan)   !important; }
.text-primary { color: var(--accent-light) !important; }

/* OS radio cards */
.form-check-card {
  position: relative;
  cursor: pointer;
}
/* Default — clearly UNselected */
.form-check-card .card {
  background: rgba(255,255,255,.03) !important;
  border: 2px solid rgba(255,255,255,.08) !important;
  cursor: pointer;
  transition: all .2s;
  opacity: .65;
  transform: none !important;  /* cancel global card hover transform */
}
/* Hover — shows it's clickable, but NOT selected */
.form-check-card .card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: .85;
}
/* Hide radio input visually but keep it functional */
.form-check-card .form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Selected state — clearly selected via .selected class added by JS */
.form-check-card.selected .card {
  background: rgba(124,58,237,.18) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 4px 16px rgba(124,58,237,.2) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── FORM SWITCHES (check_mode, verbose_mode) ───────────── */
.form-switch { padding-left: 2.5em; }
.form-switch .form-check-input {
  position: static !important;
  opacity: 1 !important;
  width: 2em !important;
  height: 1em !important;
  pointer-events: auto !important;
  display: inline-block !important;
  background-color: var(--bg-hover) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: 2em !important;
  cursor: pointer;
  margin-left: -2.5em;
  float: left;
  transition: background-color .2s;
}
.form-switch .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Autocomplete */
.autocomplete-dropdown {
  position: absolute;
  z-index: 1000;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: var(--radius) !important;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  display: none;
}
.autocomplete-item {
  padding: .5rem .85rem;
  font-size: .875rem;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: background .12s;
}
.autocomplete-item:hover { background: var(--accent-dim) !important; color: var(--text-primary) !important; }

/* Location/edificio items in dashboard */
.location-item {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: .75rem 1rem !important;
  margin-bottom: .5rem;
  transition: border-color .15s;
}
.location-item:hover { border-color: var(--border-accent) !important; }
.location-item.local     { border-left: 3px solid var(--accent) !important; }
.location-item.edificio { border-left: 3px solid var(--cyan)   !important; }

/* Metric badges */
.metric-badge { font-size: .72rem !important; font-weight: 600; }

/* Code / pre for playbook output */
pre {
  background: #0d0e14 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: #a3e635 !important;
  font-size: .78rem;
  padding: 1rem !important;
  overflow-x: auto;
  max-height: 500px;
  overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .card { margin-bottom: .85rem; }
  .quick-stats .col-md-3 { margin-bottom: .5rem; }
}