/* assets/css/style.css */

/* Brand palette */
:root{
  --bops-blue: #0052CC;
  --bops-green: #27AE60;
  --bops-grey: #2C3E50;
  --bops-orange: #F39C12;

  --btn-radius: 12px;
  --btn-border: #d8dee6;
  --btn-text: #1f2937;
}

/* Base */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--bops-grey);
}
a { text-decoration: none; }

/* Cards & tiles */
.card{
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  border:1px solid #eef1f5;
  background:#fff;
}
.tile{
  border-radius:16px;
  padding:16px;
  background:#fff;
  border:1px solid #eef1f5;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

/* KPI tiles */
.kpi{display:flex; align-items:center; gap:12px;}
.kpi .icon{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(45deg,var(--bops-blue),var(--bops-green)); color:#fff;
}
.kpi .value{font-size:1.4rem; font-weight:700; color:var(--bops-grey);}
.kpi .label{color:#6b7280; font-size:.9rem;}

/* Navbar */
.navbar-brand strong{letter-spacing:0.2px;}

/* ================== Buttons (universal) ================== */
/* Ensure anchors, buttons, and inputs styled identically */
a.btn, button.btn, input[type="button"].btn, input[type="submit"].btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-weight: 600;
  padding: .6rem 1rem;
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-border);
  background: #fff;
  color: var(--btn-text);
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  transition: transform .02s ease-in, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none; /* for <a class="btn"> */
}
a.btn:hover, button.btn:hover, input.btn:hover, .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
a.btn:active, button.btn:active, input.btn:active, .btn:active{ transform: translateY(0); }

.btn-sm{ padding: .4rem .7rem; font-size:.9rem; border-radius:10px; }
.btn-lg{ padding: .8rem 1.2rem; font-size:1.05rem; border-radius:14px; }
.d-grid .btn { width: 100%; }

/* === Brand primary (your custom class used widely) === */
.btn-bops{
  background: var(--bops-blue);
  color:#fff;
  border-color: var(--bops-blue);
}
.btn-bops:hover{
  filter: brightness(0.97);
  box-shadow: 0 8px 22px rgba(0,82,204,.25);
}

/* === Map Bootstrap variants to brand so pages using default classes still look right === */
.btn-primary{
  background: var(--bops-blue);
  color: #fff;
  border-color: var(--bops-blue);
}
.btn-primary:hover{
  filter: brightness(0.97);
  box-shadow: 0 8px 22px rgba(0,82,204,.25);
}

.btn-secondary{
  background: #eef2f7;
  color:#344054;
  border-color:#cad3df;
}
.btn-secondary:hover{
  background:#e6ebf3;
}

.btn-outline-primary{
  background:#fff;
  color: var(--bops-blue);
  border-color: var(--bops-blue);
}
.btn-outline-primary:hover{
  background: rgba(0,82,204,.08);
}

.btn-outline-secondary{
  background:#fff;
  color:#344054;
  border-color:#cad3df;
}
.btn-outline-secondary:hover{
  background:#f5f7fb;
}

.btn-outline-danger{
  background:#fff;
  color:#b42318;
  border-color:#f1c0bd;
}
.btn-outline-danger:hover{
  background:#fff5f5;
}

/* Badges (brand) */
.badge-bops{background:var(--bops-blue);}

/* Help text */
.form-2fa-hint{color:#6b7280; font-size:.9rem;}