/* Ankara look: the app shell (rail, business menu, header, content card), the Manrope typeface and refined controls.
   Colours stay Manager's: everything here uses its variables (--background, --card, --primary-foreground, ...), so
   light and dark mode follow it. Loaded after tailwind/output.css. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ak-rail: #171717;          /* Manager's neutral-900 */
  --ak-rail-line: #404040;
  --ak-rail-ink: #a3a3a3;
  --ak-rail-active: #7dd3fc;   /* sky, as Manager's links */
  --ak-radius: 14px;
  --ak-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.04);
  /* Manager's accent is --primary-foreground (sky in light mode, amber in dark); Ankara's pieces call it --primary. */
  --primary: var(--primary-foreground);
}
:root.dark {
  --ak-rail: #0c0a09;          /* stone-950 */
  --ak-rail-line: #292524;
  --ak-rail-ink: #a8a29e;
  --ak-rail-active: #fde68a;   /* amber-200, as Manager's dark links */
  --ak-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

html, body { font-family: var(--font-sans); }
body { -webkit-font-smoothing: antialiased; }
.tabular-nums, td, .text-end { font-variant-numeric: tabular-nums; }

/* ---------- Shell ---------- */
.ak-shell { display: flex; min-height: 100vh; }
.ak-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ak-rail {
  position: sticky; top: 0; height: 100vh; flex: 0 0 68px; width: 68px; box-sizing: border-box;
  background: var(--ak-rail); color: var(--ak-rail-ink);
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; overflow-y: auto; z-index: 40;
  scrollbar-width: none;
}
.ak-rail::-webkit-scrollbar { display: none; }
.ak-rail-logo img { width: 36px; height: 36px; display: block; }
.ak-rail-group { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ak-rail-line); }
.ak-rail-logo + .ak-rail-group { border-top: 0; padding-top: 0; }
.ak-rail-spacer { flex: 1 1 auto; }
.ak-rail-spacer + .ak-rail-group { border-top: 0; }

.ak-tile, .ak-rail-icon, .ak-avatar {
  width: 42px; height: 42px; box-sizing: border-box; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ak-rail-ink); text-decoration: none; cursor: pointer; list-style: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ak-tile { border: 2px solid var(--ak-rail-line); font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.ak-tile:hover { border-color: var(--ak-rail-active); color: #fff; text-decoration: none; }
.ak-tile.active { background: var(--ak-rail-active); border-color: var(--ak-rail-active); color: var(--ak-rail); }
.ak-rail-icon { font-size: 16px; border: 0; background: transparent; }
.ak-rail-icon::-webkit-details-marker { display: none; }
.ak-rail-icon:hover, .ak-rail-icon.active { background: rgb(255 255 255 / 0.08); color: #fff; text-decoration: none; }
.ak-rail-icon.active { color: var(--ak-rail-active); }
.ak-avatar { border-radius: 50%; width: 36px; height: 36px; background: var(--ak-rail-active); color: var(--ak-rail); font-weight: 800; font-size: 12px; }
.ak-avatar:hover { text-decoration: none; opacity: .9; }
.ak-rail .dropdown { position: static; }
.ak-rail .dropdown-menu { position: fixed; left: 76px; bottom: 16px; top: auto; max-height: 80vh; overflow: auto; min-width: 220px; }
[dir="rtl"] .ak-rail .dropdown-menu { left: auto; right: 76px; }

/* Signed-out pages */
.ak-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; }

/* ---------- Business header and menu ---------- */
.ak-business-bar { background: var(--card); border-bottom: 1px solid var(--border); }
.ak-business-name { font-size: 18px; font-weight: 800; color: var(--card-foreground); letter-spacing: -.01em; }

.ak-body { flex: 1 1 auto; }

.ak-panel {
  background: var(--muted); border-right: 1px solid var(--border);
  padding: 10px 10px; box-sizing: border-box; gap: 2px;
}
[dir="rtl"] .ak-panel { border-right: 0; border-left: 1px solid var(--border); }
@media (min-width: 64rem) {
  .ak-panel { width: 248px; flex: 0 0 248px; padding: 14px 12px; }
  :root.compact .ak-panel { width: auto; flex: 0 0 auto; }
}
.ak-nav-section {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground); opacity: .65; padding: 14px 10px 4px; white-space: nowrap;
}
.ak-nav-section:first-child { padding-top: 4px; }
@media (max-width: 63.99rem) { .ak-nav-section { display: none; } }
.ak-nav-item {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 10px; font-weight: 600; white-space: nowrap;
  color: var(--foreground); text-decoration: none;
}
.ak-nav-item:hover { background: var(--card); color: var(--card-foreground); text-decoration: none; }
.ak-nav-item.active { background: var(--card); color: var(--primary-foreground); font-weight: 800; box-shadow: var(--ak-shadow); }
.ak-nav-icon { opacity: .55; }
.ak-nav-item.active .ak-nav-icon { opacity: 1; }
.ak-count { font-size: 12px; color: var(--muted-foreground); opacity: .8; }
.ak-badge {
  font-size: 11px; font-weight: 800; line-height: 18px; padding: 0 7px; border-radius: 999px;
  background: var(--primary-foreground); color: var(--card);
}
.ak-panel-foot { padding: 0 10px; }
.ak-panel-foot a { font-size: 13px; }

/* ---------- Content ---------- */
.ak-content { background: var(--card); color: var(--card-foreground); }
@media (min-width: 64rem) {
  .ak-content { margin: 16px; padding: 24px; border-radius: 18px; box-shadow: var(--ak-shadow); border: 1px solid var(--card-border); }
  .ak-main > div:not(.ak-business-bar):not(.ak-body) { padding-inline: 16px; }
}
@media print {
  .ak-shell { display: block; }
  .ak-content { margin: 0; padding: 0; box-shadow: none; border: 0; border-radius: 0; }
}

/* ---------- Controls (Manager's colours, Ankara's shape) ---------- */
.btn { border-radius: 10px; padding: 7px 14px; font-weight: 700; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.btn-sm, .btn-xs { border-radius: 8px; }
.btn-primary, .btn-danger, .btn-success { box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.form-control, .form-select, .input-group-text, select.form-control, textarea.form-control { border-radius: 10px; }
.form-control { padding-block: 8px; padding-inline: 10px; }
.form-control:focus { outline: none; box-shadow: 0 0 0 3px rgb(56 189 248 / 0.25); border-color: #38bdf8; }
:root.dark .form-control:focus { box-shadow: 0 0 0 3px rgb(253 230 138 / 0.25); border-color: #fde68a; }
.form-check-input { border-radius: 5px; }

.card { border-radius: 16px; }
.card-title { opacity: .6; font-weight: 800; }
.dropdown-menu { border-radius: 12px; }
.dropdown-item { border-radius: 8px; }

/* Tables: quieter rules, roomy rows */
table thead th { font-weight: 700; }

/* ---------- Sign-in pages ---------- */
.ak-login { display: flex; flex-wrap: wrap; min-height: 100vh; }
.ak-login-brand {
  flex: 1 1 440px; min-width: 0; box-sizing: border-box; padding: 56px 64px;
  background: var(--ak-rail); color: #fafafa; display: flex; flex-direction: column; gap: 36px;
}
.ak-login-logo { height: 40px; align-self: flex-start; }
.ak-login-pitch { margin-top: auto; max-width: 30rem; }
.ak-login-pitch h2 { margin: 0 0 14px; font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.ak-login-pitch p { margin: 0; font-size: 16px; line-height: 1.6; color: #a3a3a3; }
.ak-login-points { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 30rem; }
.ak-login-points li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.ak-login-points i { flex: 0 0 28px; height: 28px; border-radius: 9px; background: rgb(255 255 255 / 0.08); color: var(--ak-rail-active); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ak-login-side { flex: 1 1 440px; min-width: 0; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; align-items: center; }
.ak-login-tools { align-self: flex-end; display: flex; align-items: center; gap: 16px; }
.ak-login-card { width: 100%; max-width: 420px; margin: auto 0; padding: 32px; box-sizing: border-box; background: var(--card); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: var(--ak-shadow); display: flex; flex-direction: column; gap: 18px; }
.ak-login-card-logo { height: 40px; align-self: flex-start; }
.ak-login-title { margin: 0; font-size: 26px; font-weight: 800; color: var(--card-foreground); letter-spacing: -.01em; }
.ak-login-card .btn { padding-block: 10px; }
@media (max-width: 900px) { .ak-login-brand { padding: 32px 24px; flex-basis: 100%; } .ak-login-pitch h2 { font-size: 28px; } }

/* ---------- Summary dashboard ---------- */
.ak-dash { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
.ak-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ak-kpi { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--ak-shadow); }
.ak-kpi-accent { background: var(--accent); }
.ak-kpi-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-foreground); }
.ak-kpi-value { font-size: 24px; font-weight: 800; color: var(--card-foreground); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ak-kpi-note { font-size: 12px; color: var(--muted-foreground); }
.ak-negative { color: #b91c1c; }
:root.dark .ak-negative { color: #fca5a5; }
.ak-dash-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ak-dash-card { flex: 1 1 320px; min-width: 0; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ak-shadow); }
.ak-map { flex: 3 1 440px; }
.ak-attention { flex: 2 1 300px; }
.ak-dash-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ak-dash-head h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--card-foreground); }
.ak-dash-head span { font-size: 12px; color: var(--muted-foreground); }
.ak-map-root, .ak-map-line { display: flex; align-items: center; gap: 10px; }
.ak-map-root { padding: 10px 12px; border-radius: 12px; background: var(--accent); }
.ak-map-code { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; background: var(--ak-rail); color: var(--ak-rail-active); text-decoration: none; }
a.ak-map-code:hover { text-decoration: none; opacity: .9; }
.ak-map-name { flex: 1 1 auto; font-weight: 700; color: var(--card-foreground); }
.ak-map-value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--card-foreground); }
.ak-map-company { margin-inline-start: 18px; padding-inline-start: 16px; border-inline-start: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.ak-map-branches { display: flex; flex-wrap: wrap; gap: 8px; padding-inline-start: 42px; }
.ak-map-branches-flat { padding-inline-start: 0; }
.ak-chip { display: inline-flex; gap: 8px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--muted); font-size: 12px; }
.ak-chip b { font-variant-numeric: tabular-nums; }
.ak-attention-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--muted); color: var(--card-foreground); text-decoration: none; }
.ak-attention-item:hover { text-decoration: none; filter: brightness(.98); }
.ak-attention-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ak-attention-text { display: flex; flex-direction: column; gap: 2px; }
.ak-attention-text span { font-size: 12px; color: var(--muted-foreground); }
.ak-tone-info { background: #e0f2fe; color: #0369a1; }
.ak-tone-warn { background: #fef3c7; color: #92400e; }
.ak-tone-bad { background: #fee2e2; color: #991b1b; }
:root.dark .ak-tone-info { background: #1e1b4b; color: #c7d2fe; }
:root.dark .ak-tone-warn { background: #78350f; color: #fde68a; }
:root.dark .ak-tone-bad { background: #7f1d1d; color: #fecaca; }
.ak-dash-empty { margin: 0; color: var(--muted-foreground); display: flex; gap: 8px; align-items: center; }

/* ---------- Page header (breadcrumb and title) ---------- */
.ak-pagehead { margin-bottom: 6px; }
.ak-pagehead-bar { padding: 2px 0 12px; border-bottom: 1px solid var(--card-border); }
.ak-pagehead-bar > div > div:first-child { font-size: 13px; color: var(--muted-foreground); }
.ak-pagehead-bar a { color: var(--muted-foreground); }
.ak-pagehead-bar a:hover { color: var(--primary-foreground); }
.ak-pagetitle { font-size: 22px; font-weight: 800; color: var(--card-foreground); letter-spacing: -.01em; opacity: 1 !important; flex-basis: 100%; }
@media (min-width: 64rem) { .ak-pagetitle { flex-basis: auto; } }

/* ---------- Cards, list headers and tables ---------- */
.card { border: 1px solid var(--card-border); box-shadow: var(--ak-shadow); }
.card-header { background: var(--card); box-shadow: none; }
.card-title { opacity: 1; color: var(--card-foreground); font-size: 1.05rem; font-weight: 800; text-shadow: none; }
.card-inset { box-shadow: none; }
table.card-table thead th { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
table.card-table tbody tr { transition: background-color .12s; }
table.card-table tbody tr:hover { background: color-mix(in oklab, var(--primary-foreground) 6%, transparent); }
table.card-table tbody tr.ak-clickable { cursor: pointer; }

/* Edit / View as icons */
.ak-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn.ak-cell-btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted-foreground); background: transparent; border-color: transparent; box-shadow: none; }
.btn.ak-cell-btn:hover { color: var(--primary-foreground); background: var(--muted); border-color: var(--card-border); }

/* More menu */
.ak-more { position: relative; }
.ak-more > summary { list-style: none; }
.ak-more > summary::-webkit-details-marker { display: none; }
.ak-more-menu { right: 0; left: auto; position: absolute; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ak-more-menu .btn { display: block; width: 100%; text-align: start; border: 0; background: transparent; box-shadow: none; font-weight: 600; padding: 7px 10px; }
.ak-more-menu .btn:hover { background: var(--muted); }
.ak-more-menu .dropdown { position: static; }
.ak-more-menu .dropdown > summary { list-style: none; }
.ak-more-menu .dropdown-menu { position: static; box-shadow: none; border: 0; margin: 0 0 0 10px; padding: 0; }
[dir="rtl"] .ak-more-menu { left: 0; right: auto; }

/* ---------- Forms ---------- */
.card-form fieldset { border-radius: 12px; }
.ak-options { margin-top: 14px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--muted); }
.ak-options > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--muted-foreground); list-style: none; display: flex; align-items: center; gap: 8px; }
.ak-options > summary::-webkit-details-marker { display: none; }
.ak-options > summary::after { content: "\25BE"; margin-inline-start: auto; opacity: .6; }
.ak-options[open] > summary { border-bottom: 1px solid var(--card-border); }
.ak-options[open] > summary::after { content: "\25B4"; }
.ak-options-body { padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; }
.ak-options-body > * { min-width: 0; }
/* Save buttons stay in view on long forms */
.card-form + .card-header { position: sticky; bottom: 0; z-index: 5; background: var(--card); border-top: 1px solid var(--card-border); }
table.card-table thead th .btn, table.card-table thead th button { text-transform: none; letter-spacing: normal; font-size: 13px; }
.ak-more-menu { bottom: calc(100% + 6px); top: auto; margin-top: 0; z-index: 60; }

/* ---------- Businesses page ---------- */
.ak-biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ak-biz {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--ak-shadow); transition: border-color .15s, transform .15s;
}
.ak-biz:hover { border-color: var(--primary-foreground); transform: translateY(-1px); }
.ak-biz.hidden { display: none; }
.ak-biz-tile { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: var(--ak-rail); color: var(--ak-rail-active); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.ak-biz-name { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 15px; color: var(--card-foreground); overflow-wrap: anywhere; }
.ak-biz-name::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }   /* the whole card opens the business */
.ak-biz-name:hover { text-decoration: none; }
.ak-biz-size { position: relative; z-index: 1; font-size: 12px; white-space: nowrap; }
.ak-biz-size a { color: var(--muted-foreground); }
.ak-biz-empty { padding: 64px 0; text-align: center; font-weight: 700; color: var(--muted-foreground); }

/* ---------- Settings page ---------- */
.ak-settings-section { margin: 4px 0 18px; }
.ak-settings-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); margin: 6px 4px 10px; }
.ak-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ak-setting {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-border); color: var(--card-foreground); font-weight: 700; text-decoration: none;
}
.ak-setting i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--muted); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ak-setting:hover { border-color: var(--primary-foreground); text-decoration: none; }
.ak-setting-empty { opacity: .6; }
.ak-setting-empty:hover { opacity: 1; }

/* ---------- Phones and small tablets ---------- */
.ak-menu-btn, .ak-backdrop { display: none; }
@media (max-width: 63.99rem) {
  .ak-shell { display: block; padding-bottom: 64px; }
  .ak-rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 60px;
    flex-direction: row; justify-content: flex-start; gap: 6px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
    border-top: 1px solid var(--ak-rail-line);
  }
  .ak-rail-logo { display: none; }
  .ak-rail-group { flex-direction: row; gap: 6px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--ak-rail-line); }
  .ak-rail-group:first-of-type { border-left: 0; padding-left: 0; }
  .ak-rail-spacer { display: none; }
  .ak-tile, .ak-rail-icon { width: 40px; height: 40px; flex: 0 0 40px; }
  .ak-avatar { flex: 0 0 36px; }
  .ak-rail .dropdown-menu { left: 8px; right: 8px; bottom: 68px; }

  .ak-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); cursor: pointer; }
  .ak-business-bar > div { padding-inline: 14px; }
  .ak-panel {
    position: fixed; top: 0; bottom: 60px; left: 0; width: 280px; max-width: 85vw; z-index: 50;
    flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden; padding: 14px 12px;
    transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 10px 40px rgb(0 0 0 / .25);
  }
  [dir="rtl"] .ak-panel { left: auto; right: 0; transform: translateX(105%); }
  :root.ak-drawer-open .ak-panel { transform: none; }
  :root.ak-drawer-open .ak-backdrop { display: block; position: fixed; inset: 0 0 60px 0; background: rgb(0 0 0 / .35); z-index: 45; }
  .ak-nav-section { display: block; }
  .ak-content { margin: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--card-border); }
  .ak-kpi-value { font-size: 20px; }
  .ak-pagetitle { font-size: 19px; }
  .ak-login-brand { min-height: auto; }
  /* Lists keep each cell on one line and scroll sideways, rather than squeezing text into tall columns. */
  table.card-table td, table.card-table th { white-space: nowrap; }
}

/* ---------- Aligned controls ----------
   Text inputs, selects and buttons share one height, so a field and the button beside it line up exactly.
   Small variants share a smaller height. A label above a field stays above it (.ak-field), and a row of
   fields and buttons aligns on their bottom edge (.ak-inline-form). */
:root { --ak-control: 38px; --ak-control-sm: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ak-control); box-sizing: border-box; line-height: 1.2; }
.btn-sm, .btn-xs { min-height: var(--ak-control-sm); }
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select.form-control, select.form-select:not([multiple]):not([size]), button.form-control { height: var(--ak-control); box-sizing: border-box; }
.input-group-text { min-height: var(--ak-control); box-sizing: border-box; }
input.form-control.form-control-sm, select.form-control.form-control-sm, select.form-select.form-select-sm { height: var(--ak-control-sm); padding-block: 4px; }
.ak-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ak-inline-form-end { justify-content: flex-end; }
.ak-inline-form > .btn { flex: 0 0 auto; }
.ak-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; font-weight: 700; color: var(--card-foreground); }
.ak-field > .form-control { width: 10rem; font-weight: 500; }
.ak-inline-form .form-control-sm { width: 12rem; }
/* The form widgets (date picker, select2 dropdowns, unit labels) take the same height. */
.mx-datepicker .mx-input { height: var(--ak-control); box-sizing: border-box; }
.input-group-text { height: var(--ak-control); }
/* select2 dropdowns: the bordered wrapper is the visible box, so it takes the control height and corners and
   the inner choice fills it. Scoped to forms so it outranks select2's own stylesheet, which loads later. */
.card-form .select2-container { display: flex; height: var(--ak-control); box-sizing: border-box; border-radius: 10px; overflow: hidden; vertical-align: top; }
.card-form .select2-container .select2-choice { flex: 1 1 auto; height: 100%; margin: 0; line-height: calc(var(--ak-control) - 2px); box-sizing: border-box; border-radius: 0; }
.card-form .input-group > .select2-container:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.card-form .input-group > .select2-container:has(+ .form-control, + .input-group-text, + .btn, + select, + .select2-container) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Report Builder: pinned reports on the Summary page follow the app theme. */
.ak-pin { flex-basis: 420px; }
.ak-pin h2 a { color: inherit; text-decoration: none; }
.ak-pin h2 a:hover { text-decoration: underline; }
.ak-pin .rb-chart { margin: 0; --rb-ink: var(--card-foreground); --rb-muted: var(--muted-foreground); --rb-grid: var(--card-border); --rb-surface: var(--card); --rb-bar: #0369a1; --rb-1: #2a78d6; --rb-2: #eb6834; --rb-3: #1baf7a; --rb-4: #eda100; }
:root.dark .ak-pin .rb-chart { --rb-bar: #fde68a; --rb-1: #3987e5; --rb-2: #d95926; --rb-3: #199e70; --rb-4: #c98500; }
.ak-pin .rb-chart .rb-title { display: none; }
.ak-pin-table { width: 100%; font-size: 13px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ak-pin-table td { padding: 6px 0; border-bottom: 1px solid var(--card-border); }
.ak-pin-table td:last-child { text-align: end; white-space: nowrap; padding-inline-start: 12px; }
.ak-pin-total td { font-weight: 800; border-bottom: 0; }

/* Report Builder template gallery */
.ak-tpl { padding: 24px; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.ak-tpl-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.ak-tpl-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.ak-tpl-head p { margin: 4px 0 0; max-width: 680px; color: var(--muted-foreground); font-size: 14px; }
.ak-tpl-tools { display: flex; gap: 8px; align-items: center; }
.ak-tpl-group { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card); color: var(--card-foreground); font-size: 14px; }
.ak-tpl-group i { color: var(--primary); margin-top: 3px; }
.ak-tpl-group p { margin: 0; }
.ak-tpl-tools input { width: 260px; }
.ak-tpl-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-tpl-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); font-size: 13px; color: var(--card-foreground); text-decoration: none; }
.ak-tpl-nav a span { color: var(--muted-foreground); font-size: 12px; }
.ak-tpl-nav a:hover { border-color: var(--primary); }
.ak-tpl-section h2 { margin: 6px 0 10px; font-size: 15px; font-weight: 800; scroll-margin-top: 16px; }
.ak-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ak-tpl-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--ak-shadow); }
.ak-tpl-card h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--card-foreground); }
.ak-tpl-card p { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.45; }
.ak-tpl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ak-tpl-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--muted, #f5f5f5); color: var(--muted-foreground); }
.ak-tpl-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; align-items: center; }
.ak-tpl-actions form { margin: 0; display: flex; }
.ak-tpl-none { color: var(--muted-foreground); }
@media (max-width: 640px) { .ak-tpl { padding: 16px; } .ak-tpl-tools, .ak-tpl-tools input { width: 100%; } }

/* Copy Business */
.ak-copy label { display: block; margin-bottom: 4px; font-weight: 600; }
.ak-copy label.ak-copy-scope { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; cursor: pointer; }
.ak-copy-scope input { margin-top: 4px; }
.ak-copy-company { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.ak-copy-from { height: var(--ak-control, 38px); display: flex; align-items: center; padding: 0 12px; border-radius: 6px; background: var(--muted, rgba(0,0,0,.04)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-copy-company i { color: var(--muted-foreground); }

/* Report Builder: ask for a report */
.ak-ask { display: flex; gap: 8px; align-items: center; position: relative; }
.ak-ask > i { position: absolute; left: 12px; color: var(--primary); pointer-events: none; }
.ak-ask input.form-control { flex: 1; padding-left: 36px; height: var(--ak-control, 38px); }
.ak-ask .btn { height: var(--ak-control, 38px); white-space: nowrap; }
.ak-ask.is-busy .btn { opacity: .7; pointer-events: none; }
.ak-ask-explanation { padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ak-ask-explanation i { color: var(--primary); margin-right: 6px; }
.ak-ask-note { font-size: 13px; color: var(--muted-foreground); }

/* Start from a business line */
.ak-lines-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 640px) { .ak-lines-row { grid-template-columns: 1fr; } }
.ak-line-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.ak-copy label.ak-line-card { display: block; margin: 0; font-weight: 400; cursor: pointer; }
.ak-line-card input { position: absolute; opacity: 0; pointer-events: none; }
.ak-line-body { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border: 1px solid var(--card-border, var(--border)); border-radius: 10px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.ak-line-card:hover .ak-line-body { border-color: var(--primary); }
.ak-line-card input:checked + .ak-line-body { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.ak-line-card input:focus-visible + .ak-line-body { outline: 2px solid var(--primary); outline-offset: 2px; }
.ak-line-title { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ak-line-title i { color: var(--primary); width: 18px; text-align: center; }
.ak-line-desc { font-size: 13px; color: var(--muted-foreground); }
.ak-line-body ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted-foreground); list-style: disc; }

/* Report Builder: build step by step */
.ak-guide { display: flex; flex-direction: column; gap: 22px; }
.ak-guide h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.ak-guide h2 span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--primary); color: var(--card); font-size: 13px; }
.ak-guide-hint { margin: -6px 0 10px; font-size: 13px; color: var(--muted-foreground); }
.ak-guide-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ak-guide-tile, .ak-guide-chip, .ak-guide-check { cursor: pointer; }
.ak-guide-tile input, .ak-guide-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ak-guide-tile > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border: 1px solid var(--card-border, var(--border)); border-radius: 10px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.ak-guide-tile i { color: var(--primary); font-size: 18px; }
.ak-guide-tile small { color: var(--muted-foreground); font-size: 12px; line-height: 1.35; }
.ak-guide-tile:hover > span { border-color: var(--primary); }
.ak-guide-tile input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.ak-guide-tile input:focus-visible + span, .ak-guide-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.ak-guide-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-guide-chip > span { display: inline-flex; align-items: center; gap: 6px; height: var(--ak-control, 38px); padding: 0 14px; border: 1px solid var(--card-border, var(--border)); border-radius: 999px; background: var(--card); font-size: 14px; }
.ak-guide-chip:hover > span { border-color: var(--primary); }
.ak-guide-chip input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--card)); font-weight: 600; }
.ak-guide-chip > span[data-n]:not([data-n=""])::before { content: attr(data-n); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--primary); color: var(--card); font-size: 11px; font-weight: 700; }
.ak-guide-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.ak-guide-label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; }
.ak-guide-check { display: flex; align-items: center; gap: 8px; height: var(--ak-control, 38px); }
#ak-guide-preview.is-loading { opacity: .55; transition: opacity .15s; }
.ak-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ak-upload-label { font-size: 14px; color: var(--muted-foreground); }
.ak-upload-label i { color: var(--primary); }
.ak-upload .form-file, .ak-upload .form-control, .ak-upload .btn { height: var(--ak-control, 38px); }
.ak-upload .form-control { flex: 1 1 220px; }

/* Import M-Pesa or bank statement: account, file and Next share one row and one height; the review table. (Ankara) */
.ak-statement label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; }
.ak-statement-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: end; }
@media (max-width: 640px) { .ak-statement-row { grid-template-columns: 1fr; } }
.ak-statement input[type="file"].form-control { height: var(--ak-control, 38px); box-sizing: border-box; padding-block: 0; line-height: calc(var(--ak-control, 38px) - 2px); }
.ak-statement input[type="file"].form-control::file-selector-button { height: 100%; }
.ak-statement-help { margin: 0; padding-left: 18px; list-style: disc; font-size: 14px; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 4px; }
.ak-statement-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ak-statement-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--card-border, var(--border)); border-radius: 10px; }
.ak-statement-stats span, .ak-statement-balance span { font-size: 12px; color: var(--muted-foreground); }
.ak-statement-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ak-statement-stats small { font-size: 12px; color: var(--muted-foreground); }
.ak-statement-balance { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--card-border, var(--border)); border-left-width: 4px; }
.ak-statement-balance.is-ok { border-left-color: #16a34a; }
.ak-statement-balance.is-off { border-left-color: #d97706; }
.ak-statement-balance > div { display: flex; flex-direction: column; }
.ak-statement-balance b { font-variant-numeric: tabular-nums; }
.ak-statement label.ak-statement-check { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-weight: 400; cursor: pointer; }
.ak-statement-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ak-statement-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-foreground); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ak-statement-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ak-statement-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-statement-table .nowrap { white-space: nowrap; }
.ak-statement-table tr.is-duplicate td { opacity: .55; }
.ak-statement-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
.ak-statement-tag.is-muted { background: var(--muted, rgba(0,0,0,.05)); color: var(--muted-foreground); font-weight: 500; }
.ak-statement-table small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.ak-statement > .card-body { display: flex; flex-direction: column; gap: 20px; }

/* Platform: the owner's view of tenants, users and backups. (Ankara) */
.ak-platform .ak-muted, .ak-platform small { color: var(--muted-foreground); }
.ak-platform-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ak-platform-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--card-border, var(--border)); border-radius: 10px; background: var(--card); }
.ak-platform-stats span { font-size: 12px; color: var(--muted-foreground); }
.ak-platform-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ak-platform-stats small { font-size: 12px; }
.ak-platform-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ak-platform-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-foreground); padding: 8px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ak-platform-table td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ak-platform-table td small { display: block; font-size: 12px; }
.ak-platform-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-platform-table tr.is-top td { border-top: 1px solid var(--border); }
.ak-platform-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ak-platform-name i { color: var(--primary); width: 16px; text-align: center; }
.ak-platform-name a { font-weight: 600; }
.ak-platform-name small { display: inline; font-size: 12px; }
.ak-platform-branch { color: var(--muted-foreground); margin-right: -4px; }
.ak-platform-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #d97706; color: #fff; font-size: 12px; font-weight: 700; }
.ak-platform-backup.is-stale, .ak-platform-warn { color: #b45309; font-weight: 600; }
.ak-platform-ok { color: #15803d; font-weight: 600; }
.ak-platform-note { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--card-border, var(--border)); border-left: 4px solid #d97706; font-size: 14px; }
.ak-platform-note i { color: #d97706; }
.ak-platform-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ak-platform .card-body.p-6 { display: flex; flex-direction: column; gap: 12px; }

/* Reports → Intercompany: each pair of companies side by side, and who is who. (Ankara) */
.ak-ic .ak-muted { color: var(--muted-foreground); }
.ak-ic label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; }
.ak-ic-period, .ak-ic-add { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ak-ic-period > div { min-width: 170px; }
.ak-ic-add > div { flex: 1 1 170px; }
.ak-ic-add > div:last-child { flex: 0 0 auto; }
.ak-ic-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--card-border, var(--border)); border-left-width: 4px; background: var(--card); }
.ak-ic-head i { font-size: 20px; }
.ak-ic-head b { display: block; }
.ak-ic-head small { color: var(--muted-foreground); }
.ak-ic-head.is-ok { border-left-color: #16a34a; } .ak-ic-head.is-ok i { color: #16a34a; }
.ak-ic-head.is-off { border-left-color: #d97706; } .ak-ic-head.is-off i { color: #d97706; }
.ak-ic-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ak-ic-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted-foreground); padding: 8px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ak-ic-table td { padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ak-ic-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-ic-table .nowrap { white-space: nowrap; }
.ak-ic-table td.is-off { color: #b45309; font-weight: 700; }
.ak-ic-table tr.is-rejected td { opacity: .55; text-decoration: line-through; }
.ak-ic-table tr.is-rejected td.ak-ic-actions { text-decoration: none; opacity: 1; }
.ak-ic-foot { padding: 8px 14px 12px; font-size: 12px; }
.ak-ic-sub { padding: 12px 14px 4px; font-weight: 600; font-size: 14px; }
.ak-ic-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, var(--card)); white-space: nowrap; }
.ak-ic-tag.is-ok { background: color-mix(in srgb, #16a34a 16%, var(--card)); color: #15803d; }
.ak-ic-tag.is-off { background: color-mix(in srgb, #d97706 18%, var(--card)); color: #b45309; }
.ak-ic-tag.is-muted { background: var(--muted, rgba(0,0,0,.05)); color: var(--muted-foreground); }
.ak-ic-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ak-ic .card-body.p-6 { display: flex; flex-direction: column; gap: 16px; }

/* Chart of accounts: ordinary accounts named like Accounts receivable or payable */
.ak-lookalikes { border-left: 4px solid #d97706; }
.ak-lookalike { display: flex; align-items: center; gap: 1rem; }
.ak-lookalike > i { color: #d97706; font-size: 1.1rem; }
.ak-lookalike > div { flex: 1; line-height: 1.5; }
.ak-lookalike > form { flex: none; }