/* ==========================================================================
   BizConnect dashboard theme tokens
   Skin: "Light Bootstrap Dashboard" (from climax.buupass.com)
   Brand: azure #0366d6  ·  Fonts: Rubik (UI) + Open Sans (body)
   This file layers on top of light-bootstrap-dashboard.css — load it LAST.
   ========================================================================== */
:root {
  --bc-primary:      #0366d6;
  --bc-primary-600:  #0356b6;
  --bc-primary-050:  #e8f1fd;
  --bc-success:      #0ca940;
  --bc-warning:      #ffa534;
  --bc-danger:       #cb2431;
  --bc-purple:       #9368e9;
  --bc-text:         #66615b;
  --bc-muted:        #9a9a9a;
  --bc-sidebar:      #343b42;
  --bc-font-ui:      "Rubik", "Helvetica Neue", Arial, sans-serif;
  --bc-font-body:    "Open Sans", "Rubik", "Helvetica Neue", Arial, sans-serif;
}

body, .wrapper {
  font-family: var(--bc-font-body);
  color: var(--bc-text);
}
.main-panel { min-height: 100vh; display: flex; flex-direction: column; }
.main-panel > .content { flex: 1 0 auto; }
.main-panel > .footer { flex: 0 0 auto; width: 100%; margin-top: auto; }
.main-panel > .footer .copyright { float: none; text-align: center; }
h1, h2, h3, h4, h5, h6,
.navbar, .sidebar .nav p, .card-title, .btn {
  font-family: var(--bc-font-ui);
}

/* ── Brand accent everywhere the theme uses "primary/info" ── */
a { color: var(--bc-primary); }
a:hover, a:focus { color: var(--bc-primary-600); }

.btn-primary,
.btn-info {
  background-color: var(--bc-primary) !important;
  border-color: var(--bc-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover,   .btn-info:focus,   .btn-info:active {
  background-color: var(--bc-primary-600) !important;
  border-color: var(--bc-primary-600) !important;
}
.btn-outline-primary {
  color: var(--bc-primary);
  border-color: var(--bc-primary);
}
.btn-outline-primary:hover {
  background-color: var(--bc-primary);
  border-color: var(--bc-primary);
  color: #fff;
}
.text-primary { color: var(--bc-primary) !important; }
.badge-primary { background-color: var(--bc-primary); }
.nav-pills .nav-link.active { background-color: var(--bc-primary); }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--bc-primary);
  border-color: var(--bc-primary);
}

.form-control:focus {
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 0.15rem rgba(3, 102, 214, 0.15);
}

/* ── Card / layout polish ── */
.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
}
.main-panel > .content { padding: 78px 18px 40px; overflow-x: hidden; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Navbar (absolute, not overlapping the sidebar) */
.navbar.navbar-absolute { position: absolute; width: 100%; padding-top: 12px; z-index: 1029; }
.navbar .navbar-brand { font-family: var(--bc-font-ui); font-weight: 500; color: #2b2b2b; }

/* Mobile hamburger — a clearly visible dark icon on the light content bg */
.navbar-toggle { color: #555; background: transparent; border: none; }
.navbar-toggle .la-bars { font-size: 28px; line-height: 1; display: block; }
.navbar-toggle:hover, .navbar-toggle:focus { color: var(--bc-primary); text-decoration: none; }

/* Chart never squishes on small screens */
.bc-chart-wrap { position: relative; height: 320px; }
@media (max-width: 767px) { .bc-chart-wrap { height: 260px; } }

/* KPI stat cards on the dashboard home */
.bc-stat { display: flex; align-items: center; gap: 14px; }
.bc-stat .bc-stat-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; background: var(--bc-primary);
}
.bc-stat .bc-stat-icon.is-success { background: var(--bc-success); }
.bc-stat .bc-stat-icon.is-warning { background: var(--bc-warning); }
.bc-stat .bc-stat-icon.is-danger  { background: var(--bc-danger); }
.bc-stat .bc-stat-value { font-size: 26px; font-weight: 600; line-height: 1; color: #2b2b2b; }
.bc-stat .bc-stat-label { font-size: 13px; color: var(--bc-muted); }

/* Clickable KPI tiles → their menu screen */
.bc-stat-tile { display: block; color: inherit; }
.bc-stat-tile:hover, .bc-stat-tile:focus { color: inherit; text-decoration: none; }
.bc-stat-tile .card { transition: box-shadow .15s ease, transform .15s ease; }
.bc-stat-tile:hover .card { box-shadow: 0 6px 22px rgba(3, 102, 214, 0.14); transform: translateY(-2px); }
.bc-stat .ml-auto { align-self: center; font-size: 16px; }

/* ── Sidebar active state = brand azure ── */
.sidebar .nav li.active > a,
.sidebar .nav li > a:hover {
  color: #fff;
}
.sidebar[data-color="azure"] .nav li.active > a {
  background: rgba(255, 255, 255, 0.10);
}

/* ── Per-tenant sidebar background (driven by --bc-sidebar) ── */
.sidebar[data-color="azure"]:after,
.off-canvas-sidebar[data-color="azure"]:after {
  background: var(--bc-sidebar) !important;
  background-image: linear-gradient(to bottom, var(--bc-sidebar) 0%, var(--bc-sidebar-600) 100%) !important;
}
.sidebar .logo { padding-left: 20px; padding-right: 15px; }
.sidebar .logo .logo-normal img { max-height: 36px; max-width: 175px; vertical-align: middle; }

/* ── HTMX: subtle loading affordance ── */
.htmx-indicator { opacity: 0; transition: opacity .2s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Data tables (django-tables2 bootstrap4) ── */
table.table thead th {
  border-top: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--bc-muted);
}
.table td, .table th { vertical-align: middle; }

/* ── Auth screen ── */
.bc-auth {
  min-height: 100vh;
  background: #f7f8fb;
  display: flex;
}
.bc-auth-shell {
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(480px, 56%) minmax(420px, 44%);
}
.bc-auth-form-panel {
  display: flex;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px);
  background:
    radial-gradient(circle at 15% 8%, var(--bc-primary-050) 0, transparent 30%),
    #fff;
}
.bc-auth-form-wrap {
  width: min(100%, 480px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.bc-auth-brand {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #27243a;
  font: 600 21px/1.2 var(--bc-font-ui);
}
.bc-auth-brand img { display: block; max-height: 68px; max-width: 220px; object-fit: contain; object-position: left center; }
.bc-auth-brand .bc-logo {
  width: 50px; height: 50px; border-radius: 15px;
  background: var(--bc-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; font-family: var(--bc-font-ui);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bc-primary) 30%, transparent);
}
.bc-auth-welcome { margin: clamp(42px, 9vh, 100px) 0 26px; }
.bc-auth-kicker {
  display: inline-flex;
  color: var(--bc-primary);
  background: var(--bc-primary-050);
  border-radius: 999px;
  padding: 7px 12px;
  margin-bottom: 15px;
  font: 500 12px/1 var(--bc-font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bc-auth-welcome h1 { margin: 0 0 10px; color: #201d2e; font: 700 clamp(30px, 3vw, 40px)/1.15 var(--bc-font-ui); }
.bc-auth-welcome p { margin: 0; max-width: 410px; color: #777483; font-size: 15px; line-height: 1.65; }
.bc-auth-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e9e8ee;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 18px 55px rgba(35, 31, 55, .08);
}
.bc-auth-card label { color: #383348; font-weight: 600; }
.bc-auth-card .form-control { min-height: 50px; border-radius: 10px; background: #fafafd; border-color: #dedde5; }
.bc-auth-submit { min-height: 50px; border-radius: 10px; font-weight: 600; box-shadow: 0 9px 22px color-mix(in srgb, var(--bc-primary) 22%, transparent); }
.bc-auth-submit i { margin-right: 6px; font-size: 18px; vertical-align: -1px; }
.bc-auth-security { margin: 19px 0 0; color: #9996a2; text-align: center; font-size: 12px; }
.bc-auth-security i { margin-right: 4px; }
.bc-auth-footer { margin-top: auto; padding-top: 38px; color: #aaa7b1; text-align: center; font-size: 11px; }

.bc-auth-story {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--bc-primary-600) 94%, #151126) 0%, var(--bc-primary) 56%, color-mix(in srgb, var(--bc-primary) 68%, #9228c9) 100%);
}
.bc-auth-story:before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 78%, transparent);
}
.bc-auth-story:after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.12));
}
.bc-auth-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .25; z-index: -1; }
.bc-auth-orb-one { width: 420px; height: 420px; right: -130px; top: -120px; background: #fff; }
.bc-auth-orb-two { width: 330px; height: 330px; left: -150px; bottom: -90px; background: #d782ff; }
.bc-auth-story-inner { width: min(100%, 610px); margin: 0 auto; padding: clamp(46px, 6vw, 90px); }
.bc-auth-story-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; margin-bottom: 30px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
  font: 500 13px/1 var(--bc-font-ui);
}
.bc-auth-story h2 { max-width: 560px; margin: 0 0 18px; color: #fff; font: 700 clamp(36px, 4vw, 58px)/1.08 var(--bc-font-ui); letter-spacing: -.02em; }
.bc-auth-story-copy { max-width: 520px; margin-bottom: 38px; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.7; }
.bc-auth-feature-list { display: grid; gap: 13px; }
.bc-auth-feature {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 15px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(12px);
}
.bc-auth-feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.16); font-size: 21px; }
.bc-auth-feature strong { display: block; color: #fff; font: 600 15px/1.3 var(--bc-font-ui); }
.bc-auth-feature small { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.45; }

@media (max-width: 900px) {
  .bc-auth-shell { grid-template-columns: 1fr; }
  .bc-auth-story { order: -1; min-height: 245px; align-items: flex-end; }
  .bc-auth-story-inner { width: 100%; padding: 34px clamp(22px, 7vw, 54px); }
  .bc-auth-story-pill { margin-bottom: 16px; }
  .bc-auth-story h2 { max-width: 620px; margin-bottom: 8px; font-size: clamp(28px, 7vw, 42px); }
  .bc-auth-story-copy { max-width: 620px; margin-bottom: 0; font-size: 14px; }
  .bc-auth-feature-list { display: none; }
  .bc-auth-form-panel { padding: 32px clamp(20px, 7vw, 54px); }
  .bc-auth-form-wrap { width: min(100%, 540px); margin: 0 auto; }
  .bc-auth-welcome { margin: 34px 0 22px; }
}

@media (max-width: 520px) {
  .bc-auth-story { min-height: 205px; }
  .bc-auth-story-inner { padding: 28px 20px; }
  .bc-auth-story-pill { font-size: 11px; padding: 8px 11px; }
  .bc-auth-story h2 { font-size: 29px; }
  .bc-auth-story-copy { line-height: 1.55; }
  .bc-auth-form-panel { padding: 24px 16px; }
  .bc-auth-brand { min-height: 54px; }
  .bc-auth-brand img { max-height: 54px; max-width: 190px; }
  .bc-auth-welcome { margin: 28px 0 18px; }
  .bc-auth-welcome h1 { font-size: 28px; }
  .bc-auth-card { padding: 22px 18px; border-radius: 15px; }
  .bc-auth-footer { padding-top: 30px; }
}

/* Application review modal */
#bc-modal .modal-content {
  background: #fff;
  color: #292633;
  border: 1px solid rgba(28, 25, 36, .08);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(20, 17, 28, .28);
  overflow: hidden;
}
#bc-modal .modal-header,
#bc-modal .modal-body,
#bc-modal .modal-footer {
  background-color: #fff;
}
#bc-modal .modal-header {
  border-bottom: 1px solid #ebeaf0;
  padding-bottom: 20px;
}
#bc-modal .modal-footer {
  border-top: 1px solid #ebeaf0;
  padding-top: 16px;
}
.cic-application-detail .detail-heading {
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid #ebeaf0;
  color: var(--bc-primary);
  font-weight: 600;
}
.cic-application-detail .detail-heading i { margin-right: 5px; font-size: 18px; }
.cic-application-detail .detail-field { margin-bottom: 17px; }
.cic-application-detail .detail-field > span {
  display: block;
  margin-bottom: 4px;
  color: #8b8994;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cic-application-detail .detail-field strong { color: #292633; font-weight: 500; overflow-wrap: anywhere; }
.cic-application-detail .detail-field p { margin: 4px 0 0; color: #5f5c68; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  #bc-modal .modal-dialog-scrollable {
    margin: 8px;
    padding-top: 0;
    max-height: calc(100vh - 16px);
  }
  #bc-modal .modal-content { border-radius: 11px; }
  #bc-modal .modal-header,
  #bc-modal .modal-body,
  #bc-modal .modal-footer { padding-left: 18px; padding-right: 18px; }
  .cic-application-detail .detail-field { margin-bottom: 14px; }
}

/* Small form controls (e.g. the CBC assessment grid rows): the LBD theme forces
   .form-control { height:40px; padding:8px } which, combined with Bootstrap's
   .form-control-sm, collapses the text box and clips option/label text. Let the
   control size to its content so the words are always fully visible. */
.form-control-sm,
select.form-control-sm {
  height: auto;
  min-height: 34px;
  padding: .3rem .55rem;
  font-size: .85rem;
  line-height: 1.4;
}