/* ============================================================
   business-overrides.css   –   “Blue / Black / Grey” palette
   (includes streamlined navbar + wallet pill + page centering)
   ============================================================ */

:root {
  /* Blues */
  --primary-color: #0d47a1;     /* Dark blue */
  --primary-hover: #08306b;     /* Darker blue (hover/focus) */
  --accent-color:  #5472d3;     /* Mid‑blue accent */

  /* Greys / neutrals */
  --background-color: #f8f9fa;  /* Light grey page bg */
  --surface-color:    #ffffff;  /* Card / navbar bg */
  --text-primary:     #121212;  /* Near‑black body text */
  --text-secondary:   #555a66;  /* Medium grey */
  --border-color:     #cfd8dc;  /* Light grey border */

  /* Buttons  */
  --button-bg:        var(--primary-color);
  --button-bg-hover:  var(--primary-hover);
  --button-color:     #ffffff;

  /* Links */
  --link-color:        var(--primary-color);
  --link-hover-color:  var(--primary-hover);
  --link-hover-bg:     #e3eafc; /* soft blue hover */
}

/* ------------------------- Base layout -------------------- */
html,body{height:100%}
body{
  background:var(--background-color);
  color:var(--text-primary);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  margin:0;
}

/* ------------------------- Navbar ------------------------- */
#topNav{
  background:var(--surface-color);
  border-bottom:1px solid var(--border-color);
  height:70px;
  padding:0 2rem;
  position:fixed;top:0;left:0;right:0;z-index:1050;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  transition:box-shadow .25s;
}
#topNav.scrolled{box-shadow:0 2px 8px rgba(0,0,0,.15)}

.navbar-brand{color:var(--link-color)!important;font-weight:700;font-size:1.5rem;line-height:70px}

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' "
  +"viewBox='0 0 30 30'%3E%3Cpath stroke='%230d47a1' stroke-width='2' "
  +"stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* nav links */
.nav-link{
  color:var(--link-color)!important;
  font-weight:600;
  padding:.5rem 1rem;
  border-radius:6px;
  transition:background-color .25s,color .25s;
}
.nav-link:hover,
.nav-link:focus{
  background:var(--link-hover-bg);
  color:var(--link-hover-color)!important;
}
.nav-link.active{font-weight:700;color:var(--primary-hover)!important}

/* wallet pill */
.wallet-pill{
  background:var(--accent-color);
  color:#fff;
  font-weight:600;
  border:none;
  border-radius:999px;
  padding:.4rem 1.1rem;
}
.wallet-pill:hover{background:var(--primary-color)}

/* accent bar under navbar */
.nav-green-bar{
  height:28px;
  background:var(--accent-color);
  box-shadow:0 2px 6px rgba(84,114,211,.4);
  position:fixed;top:70px;left:0;right:0;z-index:1040;
}

/* ------------------------- Page wrapper ------------------- */
.page-content{
  max-width:900px;
  margin:100px auto 3rem; /* 70 nav + 28 bar + buffer */
  background:var(--surface-color);
  border-radius:8px;
  padding:2rem 3rem;
  box-shadow:0 10px 20px rgba(13,71,161,.1);
}

/* center header / buttons / table in txn page */
.page-content>h1{text-align:center;margin-bottom:1.5rem}
.page-content .btn-primary,
.page-content table{margin-left:auto;margin-right:auto;text-align:center}

/* ------------------------- Tables ------------------------- */
.page-content table{
  width:100%;border-collapse:collapse;margin:1rem 0;text-align:left;
  border:1px solid var(--border-color);
}
.page-content table th,
.page-content table td{
  padding:.75rem 1rem;
  border-bottom:1px solid var(--border-color);
  font-weight:600;
  color:var(--text-primary);
}
.page-content table thead th{background:var(--background-color)}
.page-content table td[colspan]{text-align:center;font-style:italic;color:var(--text-secondary)}

/* ------------------------- Buttons ------------------------ */
.btn-primary,
.btn-secondary,
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  background:var(--button-bg)!important;
  border:none!important;
  color:var(--button-color)!important;
  padding:.75rem 2.25rem!important;
  font-size:1.1rem!important;
  font-weight:600!important;
  border-radius:6px!important;
  box-shadow:0 4px 12px rgba(13,71,161,.3)!important;
  cursor:pointer!important;
  transition:background-color .3s,box-shadow .3s;
}
.btn-primary:hover,
.btn-primary:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus{
  background:var(--button-bg-hover)!important;
  box-shadow:0 6px 18px rgba(8,54,107,.6)!important;
}

/* focus ring */
.btn-primary:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent-color);
  outline-offset:2px;
}

/* ------------------------- Cards -------------------------- */
.card{
  background:var(--background-color);
  border:1px solid var(--border-color);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(13,71,161,.08);
  margin-bottom:1.5rem;
  transition:box-shadow .3s;
}
.card:hover{box-shadow:0 8px 24px rgba(13,71,161,.15)}
.card-body{padding:1.5rem 2rem}
.card-title{font-size:1.4rem;font-weight:700;color:var(--text-primary)}
.card-title a{color:var(--primary-color);text-decoration:none}
.card-title a:hover{color:var(--primary-hover)}
.card-text{font-size:1rem;color:var(--text-secondary)}

/* ------------------------- Dropdown menu ------------------ */
.dropdown-menu{
  background:var(--surface-color);
  border-radius:6px;
  box-shadow:0 8px 20px rgba(13,71,161,.15);
}
.dropdown-item{
  font-weight:600;
  padding:.6rem 1.5rem;
  color:var(--text-primary);
}
.dropdown-item:hover{background:var(--accent-color);color:var(--text-primary)}
.dropdown-item.active{font-weight:700}

/* ------------------------- Footer ------------------------- */
footer.bg-light{
  background:var(--accent-color)!important;
  color:var(--surface-color);
  font-weight:700;
  padding:1.5rem 2rem;
  text-align:center;
  box-shadow:0 -4px 12px rgba(13,71,161,.15);
}
footer a{color:var(--surface-color);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}

/* ------------------------- Responsive --------------------- */
@media (max-width:767px){
  .page-content{margin:130px 1rem 2rem;padding:1.5rem}
  .btn-primary{width:100%}
  .navbar-nav .nav-link{padding-left:.75rem!important;padding-right:.75rem!important}
  .dropdown-menu{min-width:160px}
  .dropdown-item{padding:.45rem 1.2rem;font-size:.95rem}
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: auto;
  gap: 1rem;
  justify-items: stretch;
}

@media (min-width: 768px) {
  .automation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.automation-card {
  border-radius: 0.5rem;
  border: 1px solid #eee;
  padding: 1rem;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.automation-title {
  font-weight: 600;
  font-size: 1rem;
}

.automation-meta {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.automation-meta strong {
  font-weight: 600;
}

.automation-icon {
  float: right;
  font-size: 1.2rem;
  color: #6c757d;
}