/* UI Phase 5 — Polish, Accessibility & Performance */

html { scroll-padding-top: calc(var(--bk-topbar-height) + 18px); }
body { accent-color: var(--bk-primary); }

.bk-skip-link {
  position: fixed;
  z-index: 1100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  border-radius: 13px;
  background: var(--bk-primary-700);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--bk-shadow-lg);
  transform: translateY(-160%);
  transition: transform var(--bk-transition);
}
.bk-skip-link:focus { color: #fff; transform: translateY(0); }

#bkPageProgress {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  opacity: 0;
  background: linear-gradient(90deg, var(--bk-primary), var(--bk-light-blue), var(--bk-accent), var(--bk-cta));
  box-shadow: 0 0 14px rgba(11,96,172,.35);
  transition: width 220ms ease, opacity 180ms ease;
}
html.bk-page-loading #bkPageProgress { width: 78%; opacity: 1; }
html.bk-page-loaded #bkPageProgress { width: 100%; opacity: 0; }

.bk-live-region { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bk-toast-region {
  position: fixed;
  z-index: 1090;
  top: calc(var(--bk-topbar-height) + .85rem);
  right: 1rem;
  display: grid;
  width: min(390px, calc(100vw - 2rem));
  gap: .65rem;
  pointer-events: none;
}
.bk-toast {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: start;
  gap: .75rem;
  padding: .82rem;
  border: 1px solid var(--bk-border);
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  color: var(--bk-ink);
  box-shadow: var(--bk-shadow-lg);
  pointer-events: auto;
  animation: bk-toast-in 260ms cubic-bezier(.2,.75,.3,1);
}
.bk-toast.is-leaving { animation: bk-toast-out 180ms ease forwards; }
.bk-toast__icon { display:grid; width:42px; height:42px; place-items:center; border-radius:14px; font-size:1.05rem; }
.bk-toast__body strong,.bk-toast__body span { display:block; }
.bk-toast__body strong { margin-bottom:.12rem; color:var(--bk-primary-700); font-size:.8rem; }
.bk-toast__body span { color:var(--bk-ink-soft); font-size:.76rem; line-height:1.55; }
.bk-toast__close { display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:11px; background:transparent; color:var(--bk-muted); }
.bk-toast--success .bk-toast__icon { background:var(--bk-success-soft); color:var(--bk-success); }
.bk-toast--error .bk-toast__icon { background:var(--bk-danger-soft); color:var(--bk-danger); }
.bk-toast--warning .bk-toast__icon { background:var(--bk-warning-soft); color:var(--bk-warning); }
.bk-toast--info .bk-toast__icon { background:var(--bk-info-soft); color:var(--bk-info); }
@keyframes bk-toast-in { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes bk-toast-out { to { opacity:0; transform:translateX(12px) scale(.98); } }

.bk-network-banner {
  position: fixed;
  z-index: 1085;
  right: 1rem;
  bottom: 1rem;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .62rem .85rem;
  border-radius: 14px;
  background: #173451;
  color: #fff;
  box-shadow: var(--bk-shadow-lg);
  font-size: .74rem;
  font-weight: 750;
}
.bk-offline .bk-network-banner { display: inline-flex; }

.bk-back-to-top,
.bk-pwa-fab {
  position: fixed;
  z-index: 1028;
  right: 1rem;
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--bk-border);
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  color: var(--bk-primary);
  box-shadow: var(--bk-shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--bk-transition), transform var(--bk-transition), background var(--bk-transition);
}
.bk-back-to-top { bottom: 1rem; }
.bk-pwa-fab { bottom: 4.6rem; color:#fff; border-color:var(--bk-cta); background:var(--bk-cta); }
.bk-back-to-top.is-visible,.bk-pwa-fab:not(.d-none) { opacity:1; transform:none; pointer-events:auto; }
.bk-back-to-top:hover { background:var(--bk-primary-50); }

/* Skeleton & async states */
.bk-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #E5F0F1;
  color: transparent !important;
}
.bk-skeleton::after,
.bk-table-card.is-loading .table-responsive::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 45%, transparent 70%);
  content: "";
  transform: translateX(-100%);
  animation: bk-shimmer 1.25s infinite;
}
@keyframes bk-shimmer { to { transform:translateX(100%); } }
.bk-table-card { position:relative; }
.bk-table-card.is-loading .table-responsive { position:relative; min-height:220px; opacity:.42; pointer-events:none; }
.bk-table-card.is-loading::before {
  position:absolute;
  z-index:4;
  top:50%;
  left:50%;
  width:38px;
  height:38px;
  margin:-19px;
  border:4px solid rgba(11,96,172,.15);
  border-top-color:var(--bk-primary);
  border-radius:50%;
  content:"";
  animation:bk-spin .7s linear infinite;
}
@keyframes bk-spin { to { transform:rotate(360deg); } }

/* Organic illustration / empty and error states */
.bk-empty-state {
  min-height: 190px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  text-align: center;
}
.bk-empty-state.bk-empty-state--illustrated::before {
  width: min(220px, 72%);
  aspect-ratio: 320/220;
  margin-bottom: .75rem;
  background: url('../images/illustrations/empty-organic.svg') center/contain no-repeat;
  content: "";
}
.bk-empty-state.bk-empty-state--illustrated > i:first-child { display:none; }
.bk-empty-state strong { color:var(--bk-primary-700); font-family:var(--bk-font-heading); }

.bk-organic-dots { position:relative; }
.bk-organic-dots::before {
  position:absolute;
  top:-15px;
  right:4%;
  width:74px;
  height:50px;
  opacity:.6;
  background-image:radial-gradient(circle, var(--bk-light-blue) 2px, transparent 2.5px);
  background-size:12px 12px;
  content:"";
  pointer-events:none;
}

/* Progressive reveal, kept subtle for business workflows */
.bk-reveal { opacity:0; transform:translateY(10px); transition:opacity 420ms ease, transform 420ms cubic-bezier(.2,.75,.3,1); }
.bk-reveal.is-visible { opacity:1; transform:none; }
.card,.bk-section-card { transition:transform var(--bk-transition), box-shadow var(--bk-transition), border-color var(--bk-transition); }
@media (hover:hover) and (pointer:fine) {
  .bk-section-card:hover,.bk-stat-card:hover { border-color:var(--bk-border-strong); box-shadow:0 16px 38px rgba(24,74,104,.12); }
}

/* Accessibility & form feedback */
[aria-busy="true"] { cursor:progress; }
.form-control.is-invalid,.form-select.is-invalid { background-image:none; }
.bk-field-error { margin-top:.35rem; color:var(--bk-danger); font-size:.7rem; font-weight:650; }
.btn:disabled,.btn.disabled { transform:none !important; cursor:not-allowed; opacity:.62; }

.bk-touch-target { min-width:44px; min-height:44px; }
.table caption { color:var(--bk-muted); font-size:.72rem; }

/* Avoid expensive rendering work for content far below the fold. */
.bk-content-visibility { content-visibility:auto; contain-intrinsic-size:auto 360px; }

/* Better printable invoices, reports and operational detail. */
@media print {
  .topbar-bk,.sidebar,.bk-mobile-nav,.bk-back-to-top,.bk-pwa-fab,.bk-toast-region,.bk-network-banner,.btn,.dropdown { display:none !important; }
  body,.bk-body,.bk-main-content { padding:0 !important; background:#fff !important; }
  .bk-main-content { width:100% !important; max-width:none !important; }
  .card { break-inside:avoid; border:1px solid #d9e2e7 !important; box-shadow:none !important; }
  a { color:inherit !important; text-decoration:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .bk-reveal { opacity:1; transform:none; }
}

@media (prefers-contrast: more) {
  :root { --bk-border:rgba(11,96,172,.38); --bk-border-strong:rgba(11,96,172,.62); --bk-muted:#4E6677; }
  .btn-outline-secondary,.form-control,.form-select,.card { border-width:2px; }
  .text-muted { color:#4E6677 !important; }
}

@media (max-width: 991.98px) {
  .bk-toast-region { top:calc(var(--bk-topbar-height) + .5rem); right:.65rem; width:min(390px,calc(100vw - 1.3rem)); }
  .bk-back-to-top { bottom:calc(var(--bk-mobile-nav-height) + 1.25rem); }
  .bk-pwa-fab { bottom:calc(var(--bk-mobile-nav-height) + 4.85rem); }
  .bk-network-banner { right:.65rem; bottom:calc(var(--bk-mobile-nav-height) + .8rem); }
}

::selection { background:rgba(240,224,104,.72); color:var(--bk-ink); }
::-moz-selection { background:rgba(240,224,104,.72); color:var(--bk-ink); }

.bk-swal-popup { border:1px solid var(--bk-border) !important; border-radius:24px !important; font-family:var(--bk-font-body) !important; box-shadow:var(--bk-shadow-lg) !important; }
.swal2-title { color:var(--bk-primary-700) !important; font-family:var(--bk-font-heading) !important; }

.table td.dt-empty {
  height: 220px;
  padding-top: 150px !important;
  background: url('../images/illustrations/empty-organic.svg') center 10px/190px auto no-repeat;
  color: var(--bk-muted);
  font-weight: 700;
  text-align: center !important;
}

* { scrollbar-width:thin; scrollbar-color:rgba(11,96,172,.24) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:rgba(11,96,172,.24); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(11,96,172,.38); background-clip:padding-box; }