/* AKB Connect — clean white UI on AKB blue.
   Layout: fixed sidebar rail >=992px, offcanvas drawer below. */

:root {
  --akb-blue: #0033CC;
  --akb-blue-600: #002BA8;
  --akb-blue-050: #EEF3FF;
  --akb-blue-100: #DDE6FF;
  --akb-ink: #16192B;
  --akb-muted: #5B6478;
  --akb-line: #E3E7EF;
  --akb-bg: #F7F8FB;
  --akb-sidebar-w: 244px;
  --akb-topbar-h: 56px;

  --bs-primary: #0033CC;
  --bs-primary-rgb: 0, 51, 204;
  --bs-link-color: #0033CC;
  --bs-link-hover-color: #002BA8;
  --bs-body-color: #16192B;
  --bs-body-bg: #F7F8FB;
  --bs-border-color: #E3E7EF;
}

*, *::before, *::after { box-sizing: border-box; }

body.akb-body {
  background: var(--akb-bg);
  color: var(--akb-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9375rem;
  min-height: 100vh;
}

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: #fff; padding: .5rem .75rem; border-radius: .375rem;
}

/* ---------- Buttons / primary colour ---------- */
.btn-primary {
  --bs-btn-bg: var(--akb-blue); --bs-btn-border-color: var(--akb-blue);
  --bs-btn-hover-bg: var(--akb-blue-600); --bs-btn-hover-border-color: var(--akb-blue-600);
  --bs-btn-active-bg: var(--akb-blue-600); --bs-btn-active-border-color: var(--akb-blue-600);
  --bs-btn-disabled-bg: #8fa6e8; --bs-btn-disabled-border-color: #8fa6e8;
}
.btn-outline-primary {
  --bs-btn-color: var(--akb-blue); --bs-btn-border-color: var(--akb-blue);
  --bs-btn-hover-bg: var(--akb-blue); --bs-btn-hover-border-color: var(--akb-blue);
  --bs-btn-active-bg: var(--akb-blue-600);
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.form-control:focus, .form-select:focus, .btn:focus-visible {
  border-color: var(--akb-blue);
  box-shadow: 0 0 0 .2rem rgba(0, 51, 204, .18);
}

/* ---------- Topbar ---------- */
.akb-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--akb-topbar-h);
  background: #fff; border-bottom: 1px solid var(--akb-line); z-index: 1030;
}
.akb-burger { color: var(--akb-ink); font-size: 1.5rem; line-height: 1; }
.akb-user-btn {
  background: transparent; border: 1px solid var(--akb-line); border-radius: 999px;
  display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem .2rem .2rem;
}
.akb-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--akb-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600;
}

/* ---------- Brand ---------- */
.akb-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.akb-brand:hover { text-decoration: none; }
.akb-brand-mark {
  background: var(--akb-blue); color: #fff; font-weight: 700; font-size: .7rem;
  letter-spacing: .06em; padding: .3rem .4rem; border-radius: .3rem;
}
.akb-brand-text { color: var(--akb-ink); font-weight: 600; }
.akb-brand-desktop {
  height: var(--akb-topbar-h); padding: 0 1rem;
  border-bottom: 1px solid var(--akb-line); flex-shrink: 0;
}

/* ---------- Sidebar ---------- */
.akb-sidebar { background: #fff; }
.akb-nav { padding: .75rem .5rem; gap: 2px; }
.akb-nav .nav-link {
  display: flex; align-items: center; gap: .65rem;
  color: var(--akb-muted); border-radius: .5rem; padding: .5rem .75rem;
  font-weight: 500; white-space: nowrap;
}
.akb-nav .nav-link:hover { background: var(--akb-blue-050); color: var(--akb-blue); text-decoration: none; }
.akb-nav .nav-link.active { background: var(--akb-blue); color: #fff; }
.akb-nav .nav-link i { font-size: 1.05rem; width: 1.15rem; text-align: center; flex-shrink: 0; }
.akb-badge-count { background: #E11D48; color: #fff; font-size: .7rem; border-radius: 999px; }
.akb-nav .nav-link.active .akb-badge-count { background: #fff; color: var(--akb-blue); }
.akb-sidebar-foot { border-top: 1px solid var(--akb-line); }
.akb-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #9AA3B2; }
.akb-dot-ok { background: #16A34A; }
.akb-dot-warn { background: #D97706; }
.akb-dot-bad { background: #DC2626; }

@media (min-width: 992px) {
  .akb-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--akb-sidebar-w);
    border-right: 1px solid var(--akb-line); z-index: 1035;
    display: flex; flex-direction: column;
  }
  .akb-sidebar .offcanvas-body { overflow-y: auto; }
  .akb-main { margin-left: var(--akb-sidebar-w); }
  .akb-topbar { left: var(--akb-sidebar-w); }
}

.akb-main { padding-top: var(--akb-topbar-h); min-height: 100vh; }
.akb-page-title { font-weight: 650; letter-spacing: -.01em; }

/* ---------- Cards / surfaces ---------- */
.card { border: 1px solid var(--akb-line); border-radius: .625rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--akb-line); font-weight: 600; }

.akb-stat { background: #fff; border: 1px solid var(--akb-line); border-radius: .625rem; padding: .9rem 1rem; height: 100%; }
.akb-stat-label { color: var(--akb-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.akb-stat-value { font-size: 1.6rem; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.akb-stat-sub { color: var(--akb-muted); font-size: .78rem; }
.akb-stat-accent { color: var(--akb-blue); }
.akb-stat-danger .akb-stat-value { color: #DC2626; }

/* ---------- Status badges ---------- */
.akb-badge { font-size: .72rem; font-weight: 600; padding: .22rem .5rem; border-radius: 999px; display: inline-block; border: 1px solid transparent; }
.akb-badge-open      { background: #E7F6EC; color: #14532D; border-color: #BBE5C7; }
.akb-badge-pending   { background: #FEF3C7; color: #78350F; border-color: #FDE28A; }
.akb-badge-closed    { background: #EEF0F4; color: #414A5C; border-color: #DCE0E8; }
.akb-badge-failed    { background: #FEE2E2; color: #7F1D1D; border-color: #FBC5C5; }
.akb-badge-info      { background: var(--akb-blue-050); color: var(--akb-blue); border-color: var(--akb-blue-100); }
.akb-badge-new       { background: var(--akb-blue-050); color: var(--akb-blue); border-color: var(--akb-blue-100); }
.akb-badge-converted { background: #E7F6EC; color: #14532D; border-color: #BBE5C7; }
.akb-badge-lost      { background: #FEE2E2; color: #7F1D1D; border-color: #FBC5C5; }
.akb-badge-muted     { background: #F1F3F7; color: var(--akb-muted); border-color: var(--akb-line); }

/* ---------- Tables ---------- */
.akb-table { background: #fff; }
.akb-table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--akb-muted); font-weight: 600; border-bottom: 1px solid var(--akb-line);
  white-space: nowrap;
}
.akb-table tbody td { vertical-align: middle; }
.akb-table tbody tr:hover { background: var(--akb-blue-050); }

/* ---------- Inbox ---------- */
.akb-inbox { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 991.98px) { .akb-inbox { grid-template-columns: 1fr; } }

.akb-convo-list { background: #fff; border: 1px solid var(--akb-line); border-radius: .625rem; overflow: hidden; }
.akb-convo-scroll { max-height: calc(100vh - 230px); overflow-y: auto; }
.akb-convo {
  display: block; padding: .7rem .85rem; border-bottom: 1px solid var(--akb-line);
  color: inherit; text-decoration: none;
}
.akb-convo:hover { background: var(--akb-blue-050); text-decoration: none; }
.akb-convo.active { background: var(--akb-blue-050); border-left: 3px solid var(--akb-blue); }
.akb-convo-name { font-weight: 600; font-size: .875rem; }
.akb-convo-preview { color: var(--akb-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akb-convo-time { color: var(--akb-muted); font-size: .72rem; white-space: nowrap; }

.akb-thread { background: #fff; border: 1px solid var(--akb-line); border-radius: .625rem; display: flex; flex-direction: column; }
.akb-thread-head { padding: .75rem 1rem; border-bottom: 1px solid var(--akb-line); }
.akb-thread-body { padding: 1rem; overflow-y: auto; max-height: calc(100vh - 330px); min-height: 260px; background: #FBFCFE; }
.akb-thread-foot { padding: .75rem 1rem; border-top: 1px solid var(--akb-line); }

.akb-msg { max-width: 76%; margin-bottom: .6rem; clear: both; }
.akb-msg-in  { float: left; }
.akb-msg-out { float: right; }
.akb-bubble { padding: .5rem .75rem; border-radius: .75rem; word-wrap: break-word; white-space: pre-wrap; }
.akb-msg-in  .akb-bubble { background: #fff; border: 1px solid var(--akb-line); border-bottom-left-radius: .2rem; }
.akb-msg-out .akb-bubble { background: var(--akb-blue); color: #fff; border-bottom-right-radius: .2rem; }
.akb-msg-note .akb-bubble { background: #FFF8E1; border: 1px dashed #E0C67A; color: #6B4E00; }
.akb-msg-meta { font-size: .68rem; color: var(--akb-muted); margin-top: .15rem; }
.akb-msg-out .akb-msg-meta { text-align: right; }
.akb-thread-body::after { content: ""; display: block; clear: both; }
.akb-tick { font-size: .72rem; }
.akb-tick-read { color: #34B7F1; }

.akb-window-warn { background: #FEF3C7; border: 1px solid #FDE28A; color: #78350F; border-radius: .5rem; padding: .5rem .75rem; font-size: .82rem; }

/* ---------- Misc ---------- */
.akb-empty-icon { font-size: 2.5rem; color: #C3CAD8; }
.akb-empty-title { font-weight: 600; color: var(--akb-muted); }
.akb-filter-bar { background: #fff; border: 1px solid var(--akb-line); border-radius: .625rem; padding: .75rem; }
.akb-kv dt { color: var(--akb-muted); font-weight: 500; font-size: .8rem; }
.akb-kv dd { margin-bottom: .6rem; font-size: .9rem; }
.akb-code { background: #F1F3F7; border: 1px solid var(--akb-line); border-radius: .4rem; padding: .15rem .4rem; font-size: .82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.akb-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EEF3FF 0%, #F7F8FB 55%); padding: 1.5rem; }
.akb-auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--akb-line); border-radius: .75rem; padding: 1.75rem; box-shadow: 0 8px 28px rgba(22, 25, 43, .07); }

@media print { .akb-sidebar, .akb-topbar, .akb-page-head .btn { display: none !important; } .akb-main { margin-left: 0; padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }