:root{
  --saas-bg: #f6f8fb;
  --saas-card: #ffffff;
  --saas-text: #0b1220;
  --saas-muted: #6b7280;
  --saas-border: rgba(15, 23, 42, .10);
  --saas-shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --saas-shadow-soft: 0 6px 18px rgba(2, 6, 23, .06);
}

html, body{
  height: 100%;
  background: var(--saas-bg);
  color: var(--saas-text);
}

.page-wrap{
  min-height: calc(100vh - 64px);
}

.navbar-saas{
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--saas-border);
}

.brand-logo{
  width: 120px;
  height: auto;
  border-radius: 10px;
}

.brand-text{
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card-saas{
  background: var(--saas-card);
  border: 1px solid var(--saas-border);
  border-radius: 18px;
  box-shadow: var(--saas-shadow-soft);
}

.card-saas .card-header{
  background: transparent;
  border-bottom: 1px solid var(--saas-border);
}

.btn-soft{
  background: rgba(2, 6, 23, .06);
  border: 1px solid rgba(2, 6, 23, .08);
}

.btn-soft:hover{
  background: rgba(2, 6, 23, .10);
}

.table td, .table th{ vertical-align: middle; }

.badge-soft{
  background: rgba(2, 6, 23, .06);
  color: var(--saas-text);
  border: 1px solid rgba(2, 6, 23, .08);
  font-weight: 600;
}

/* Autocomplete */
.autocomplete-wrap{ position: relative; }
.autocomplete-list{
  position: absolute;
  z-index: 1050;
  width: 100%;
  max-height: 260px;
  overflow: auto;
  box-shadow: var(--saas-shadow);
  border-radius: 14px;
  border: 1px solid var(--saas-border);
}
.autocomplete-list .list-group-item{
  cursor: pointer;
}
.autocomplete-list .list-group-item:hover{
  background: rgba(2, 6, 23, .06);
}

/* Small helpers */
.text-muted-saas{ color: var(--saas-muted)!important; }
.form-control, .form-select{
  border-radius: 14px;
  border-color: var(--saas-border);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.12);
}