/* 7khalas type, on every page (app, sign-in, phone pages, admin), loaded after the other stylesheets.
   - Caveat Brush (hand-lettered) for headings, titles and big greetings: the brand's voice.
   - Itim (a casual hand-drawn sans that matches the headings but stays easy to read) for everything people read or
     type: body text, labels, fields, buttons, menus, tables and numbers, at normal size and in a dark ink.
     Icons keep their icon font. */
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Itim&display=swap');

:root {
  --bx-font: "Itim", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kh-display: "Caveat Brush", "Itim", system-ui, sans-serif;
  --bs-body-font-family: var(--bx-font);
  --bs-font-sans-serif: var(--bx-font);
}

html body, html body input, html body select, html body textarea, html body button, html body .btn, html body .bx-btn,
html body .nav-link, html body .menu-title, html body table, html body .badge, html body .form-control, html body .dropdown-item {
  font-family: var(--bx-font);
}
/* Itim has one weight; a darker ink does the work bold used to, and nothing is faked bold. */
html body { color: #1d1915; }
html body .text-muted, html body .kh-sub, html body .card-description, html body .stat-card-label { color: #5a5145 !important; }
html body strong, html body b, html body .fw-bold, html body .fw-semibold, html body th, html body .btn, html body .bx-btn, html body label { font-weight: 400 !important; }

/* Brand voice: headings, titles, greetings and the big numbers on tiles stay hand-lettered. */
html body h1, html body h2, html body h3, html body h4, html body .card-title, html body .page-title, html body .modal-title,
html body .kh-h, html body .kh-display, html body .bx-welcome h1, html body .bx-welcome .bx-kicker, html body .bx-card h2,
html body .kh-countdown strong, html body .kh-balance, html body .kh-tier b, html body .kh-tier .price, html body .kd-stop h3,
html body .kd-seq, html body #navbar-welcome-name, html body .navbar .welcome-text, html body .stat-card-value, html body .kh-toast b {
  font-family: var(--kh-display) !important;
  font-weight: 400 !important;
  letter-spacing: .02em;
}
html body h5, html body h6 { font-family: var(--bx-font); font-weight: 700; }

/* The open menu item: white words and icon on the green pill (the menu's own colour rules are more specific). */
html body #sidebar.sidebar .nav .nav-item.active > .nav-link, html body #sidebar.sidebar .nav .nav-item.active > .nav-link .menu-title { color: #fff !important; }
html body:not(.theme-dark) #sidebar.sidebar .nav > .nav-item.active:nth-of-type(n) > .nav-link i.menu-icon { color: #fff !important; }
body.theme-dark #sidebar.sidebar .nav .nav-item.active > .nav-link .menu-title, body.theme-dark #sidebar.sidebar .nav .nav-item.active > .nav-link i { color: #14120f !important; }

/* The 7khalas Box badge logo (it is nearly square, so it needs more height than the old wordmark). */
html body .bx-brand img.bx-wordmark-img { height: 118px !important; width: auto !important; border-radius: 0; }
html body .sidebar-brand.bx-brand { padding-top: .6rem !important; padding-bottom: .6rem !important; }
html body .agricore-mobile-brand.bx-brand img.bx-wordmark-img { height: 54px !important; }
html body .navbar .navbar-brand.bx-brand img.bx-wordmark-img { height: 58px !important; }
html body .bx-logo img.bx-logo-img { height: 150px !important; width: auto !important; }
html body .bx-logo--card img.bx-wordmark-img { height: 120px !important; width: auto !important; }
html body .sidebar-icon-only .sidebar-brand.bx-brand img.bx-mark-img { width: 40px; height: 40px; border-radius: 10px; }
@media (max-width: 575.98px) { html body .bx-logo img.bx-logo-img { height: 110px !important; } }

/* Ops map: a driver on the road (harvest-routes.js) */
.hr-driver span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 22px; border: 3px solid #fffdf7; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); }

/* Listing publisher image studio: show transparency on a checkerboard */
.pb-shot { display: flex; align-items: center; gap: .5rem; } .pb-shot img { width: 110px; height: 110px; border-radius: 12px; border: 1px solid #e7dfca;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; object-fit: contain; }