/* ================= Raseed ================= */
:root {
  --rm-sidebar-w: 200px;
  --rm-sidebar-bg: #14213d;
  --rm-primary: #1d6f5f;
  --rm-primary-dark: #155446;
  --bs-primary: var(--rm-primary);
  --bs-primary-rgb: 29, 111, 95;
  --bs-link-color: var(--rm-primary);
  --bs-link-hover-color: var(--rm-primary-dark);

  /* modern look: one friendly sans, soft surfaces, ink + muted text */
  --rm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rm-ink: #0f172a;
  --rm-muted: #64748b;
  --rm-line: #eef1f5;
  --rm-bg: #f5f7fb;
  --rm-radius: 1rem;
  --rm-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
  --bs-body-font-family: var(--rm-font);
  --bs-border-radius: .7rem;          /* Bootstrap keeps inner corners square in input groups */
  --bs-border-radius-sm: .55rem;
  --bs-border-radius-lg: .9rem;
  --bs-body-color: var(--rm-ink);
  --bs-secondary-color: var(--rm-muted);
  /* in / out / billed (identity carried by icon + sign, not colour alone) */
  --rm-in-bg: #dcfce7;  --rm-in: #15803d;
  --rm-out-bg: #fee2e2; --rm-out: #b91c1c;
  --rm-bill-bg: #e0e7ff; --rm-bill: #4338ca;
}
body { font-family: var(--rm-font); letter-spacing: -.005em; }
.text-muted { color: var(--rm-muted) !important; }

.btn-primary {
  --bs-btn-bg: var(--rm-primary);
  --bs-btn-border-color: var(--rm-primary);
  --bs-btn-hover-bg: var(--rm-primary-dark);
  --bs-btn-hover-border-color: var(--rm-primary-dark);
  --bs-btn-active-bg: var(--rm-primary-dark);
  --bs-btn-active-border-color: var(--rm-primary-dark);
  --bs-btn-disabled-bg: var(--rm-primary);
  --bs-btn-disabled-border-color: var(--rm-primary);
}
.form-check-input:checked { background-color: var(--rm-primary); border-color: var(--rm-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--rm-primary); }

body.app-body { background: var(--rm-bg); }

/* =====================================================================
   Transaction rows (dashboard activity, Activity page, phone lists)
   ===================================================================== */
.tx-list { display: flex; flex-direction: column; }
.tx {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .15rem;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--rm-line); cursor: pointer;
}
.tx:last-child { border-bottom: 0; }
.tx:hover { background: #fafbfd; }
.tx:active { background: #f1f5f9; }
.tx-icon {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.tx-in .tx-icon     { background: var(--rm-in-bg);   color: var(--rm-in); }
.tx-out .tx-icon    { background: var(--rm-out-bg);  color: var(--rm-out); }
.tx-billed .tx-icon { background: var(--rm-bill-bg); color: var(--rm-bill); }
.tx-bill .tx-icon   { background: #fef3c7; color: #b45309; }   /* vendor bills */
.tx-void .tx-icon   { background: #f1f5f9; color: #94a3b8; }
.tx-body { flex: 1 1 auto; min-width: 0; }
.tx-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sub { font-size: .8rem; color: var(--rm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amt { text-align: end; flex-shrink: 0; }
.tx-amt .v { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-amt .s { font-size: .75rem; color: var(--rm-muted); white-space: nowrap; }
.tx-void .tx-title, .tx-void .tx-amt .v { text-decoration: line-through; color: var(--rm-muted); }
.tx-group {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rm-muted); padding: 1rem .15rem .25rem;
}
.tx-group:first-child { padding-top: .25rem; }
.tag { display: inline-block; font-size: .68rem; font-weight: 600; padding: .1rem .45rem; border-radius: 1rem; vertical-align: 1px; }
.tag-late { background: #fee2e2; color: #991b1b; }
.tag-due  { background: #fef3c7; color: #92400e; }
.tag-paid { background: #dcfce7; color: #166534; }
.tag-void { background: #e2e8f0; color: #334155; }
.tag-draft { background: #e2e8f0; color: #334155; }

/* filter chips */
.chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid #e2e8f0; background: #fff; color: var(--rm-ink); border-radius: 2rem;
  padding: .3rem .85rem; font-size: .85rem; white-space: nowrap; font-weight: 500;
}
.chip.active { background: var(--rm-ink); border-color: var(--rm-ink); color: #fff; }

/* sortable table headers */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { color: var(--rm-primary); }
th[data-sort] .sort-ic { font-size: .7rem; opacity: .35; margin-inline-start: .2rem; }
th[data-sort].sorted .sort-ic { opacity: 1; color: var(--rm-primary); }

/* =====================================================================
   Home / dashboard
   ===================================================================== */
.hello { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.balance-card {
  border-radius: 1.25rem; color: #fff; padding: 1.25rem 1.25rem 1rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #14213d 0%, #1d6f5f 70%, #2a8f7a 100%);
  box-shadow: 0 10px 28px rgba(20,33,61,.25);
}
.balance-card::after {   /* soft decorative glow */
  content: ""; position: absolute; width: 220px; height: 220px; inset-inline-end: -70px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.balance-label { font-size: .85rem; opacity: .8; }
.balance-hero { font-size: clamp(2.4rem, 11vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.balance-hero small { font-size: .45em; font-weight: 600; opacity: .8; margin-inline-start: .15em; }
.flow { display: flex; gap: .75rem; margin-top: 1rem; }
.flow > div { flex: 1; background: rgba(255,255,255,.12); border-radius: .9rem; padding: .55rem .7rem; min-width: 0; }
.flow .k { font-size: .75rem; opacity: .85; display: flex; align-items: center; gap: .3rem; }
.flow .v { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow .ic { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; background: rgba(255,255,255,.25); }

.wallets { display: flex; gap: .65rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .15rem .1rem .4rem; scrollbar-width: none; }
.wallets::-webkit-scrollbar { display: none; }
.wallet {
  flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; background: #fff; border-radius: 1rem; padding: .75rem .9rem;
  box-shadow: var(--rm-shadow); text-decoration: none; color: inherit;
}
.wallet .w-ic { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #ecfdf5; color: var(--rm-primary); }
.wallet .w-name { font-size: .8rem; color: var(--rm-muted); margin-top: .4rem; white-space: nowrap; }
.wallet .w-bal { font-weight: 700; white-space: nowrap; }

.quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.quick-btn { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; color: var(--rm-ink); font-size: .78rem; font-weight: 500; text-align: center; }
.quick-btn .q-ic {
  width: 52px; height: 52px; border-radius: 18px; background: #fff; box-shadow: var(--rm-shadow);
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.quick-btn:active .q-ic { transform: scale(.94); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.kpi { background: #fff; border-radius: 1rem; padding: .85rem .95rem; box-shadow: var(--rm-shadow); text-decoration: none; color: inherit; display: block; }
.kpi .k { font-size: .8rem; color: var(--rm-muted); display: flex; align-items: center; gap: .35rem; }
.kpi .v { font-size: 1.25rem; font-weight: 700; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .s { font-size: .75rem; color: var(--rm-muted); }

/* ---------- Help ---------- */
.help-hero { border-radius: 1.25rem; padding: 1.25rem; color: #fff; background: linear-gradient(135deg, #14213d 0%, #1d6f5f 100%); }
.help-head { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; background: none; border: 0; color: inherit; }
.help-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #ecfdf5; color: var(--rm-primary); font-size: 1.1rem; flex-shrink: 0; }
.help-chev { transition: transform .15s; color: var(--rm-muted); }
.help-article.open .help-chev { transform: rotate(180deg); }
.help-body { padding: 0 1rem 1rem 1rem; }
.help-steps { padding-inline-start: 1.25rem; margin-bottom: .5rem; }
.help-steps li { margin-bottom: .4rem; }
.help-tip { background: #fffbeb; color: #92400e; border-radius: .7rem; padding: .5rem .75rem; font-size: .875rem; margin-top: .5rem; }
.topbar-help { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #f1f5f9; color: var(--rm-ink); font-size: 1.05rem; }
@media (max-width: 991.98px) { .topbar-help { background: rgba(255,255,255,.16); color: #fff; } }
.page-help-tips { padding-inline-start: 0; list-style: none; }
.page-help-tips li { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--rm-line); }
.page-help-tips li:last-child { border-bottom: 0; }
.page-help-tips .n { width: 22px; height: 22px; border-radius: 50%; background: #ecfdf5; color: var(--rm-primary); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

/* Getting-started card */
.guide-card { border: 1.5px solid #d1fae5 !important; }
.guide-bar { height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.guide-bar > span { display: block; height: 100%; background: var(--rm-primary); border-radius: 4px; transition: width .4s; }
.guide-step { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--rm-line); }
.guide-step:last-child { border-bottom: 0; }
.guide-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cbd5e1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: transparent; }
.guide-step.done .guide-check { background: var(--rm-primary); border-color: var(--rm-primary); color: #fff; }
.guide-step.done .g-title { text-decoration: line-through; color: var(--rm-muted); }

/* ---------- Assets ---------- */
.asset-hero { background: linear-gradient(135deg, #3b2a06 0%, #8a5a0a 55%, #c9971c 100%); box-shadow: 0 10px 28px rgba(138,90,10,.3); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .25rem; border-radius: 1rem;
  border: 1.5px solid #e2e8f0; background: #fff; font-size: .8rem; font-weight: 500; color: var(--rm-ink); line-height: 1.2;
}
.cat-tile:hover { border-color: #cbd5e1; }
.cat-tile.active { border-color: var(--rm-primary); box-shadow: 0 0 0 3px rgba(29,111,95,.12); }
.cat-ic { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.asset-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1rem; }
.asset-facts .k { font-size: .75rem; color: var(--rm-muted); }
.asset-facts .v { font-weight: 600; }
.asset-value { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.dep-bar { height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.dep-bar > span { display: block; height: 100%; background: #7c3aed; border-radius: 4px; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 1.25rem 0 .6rem; }
.section-title h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.section-title a, a.small.fw-semibold { text-decoration: none; font-weight: 600; }
/* lets long text truncate inside flex rows (not a Bootstrap utility) */
.min-w-0 { min-width: 0; }

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

/* Sidebar colours: change the theme here ("Fresh light": white menu, mint selection) */
:root {
  --sb-bg: #ffffff;
  --sb-fg: #475569;                      /* menu text */
  --sb-fg-strong: #0f172a;               /* logo name, hover */
  --sb-muted: #94a3b8;                   /* company name, collapse button */
  --sb-hover: #f1f5f9;
  --sb-active-bg: #e6f4ef;               /* selected item: soft mint… */
  --sb-active-fg: var(--rm-primary);     /* …with green text */
  --sb-border: #e8edf3;
  --sb-icon: #64748b;
  --sb-flyout-bg: #0f172a;               /* name shown on hover when collapsed */
}
/* !important: Bootstrap's .offcanvas-lg forces a transparent background on large screens */
.app-sidebar { background: var(--sb-bg) !important; color: var(--sb-fg-strong); border-inline-end: 1px solid var(--sb-border); }
.app-sidebar .brand { font-weight: 700; font-size: 1.1rem; align-items: center; gap: .5rem; color: var(--sb-fg-strong); }
.app-sidebar .sb-company { color: var(--sb-muted); }
.app-sidebar .nav-link {
  color: var(--sb-fg);
  display: flex; align-items: center; gap: .75rem;
  border-radius: .5rem; padding: .6rem .75rem; margin-bottom: 2px;
}
.app-sidebar .nav-link:hover { background: var(--sb-hover); color: var(--sb-fg-strong); }
.app-sidebar .nav-link.active { background: var(--sb-active-bg); color: var(--sb-active-fg); }
.app-sidebar .nav-link.disabled { opacity: .45; }
.app-sidebar .nav-link i { font-size: 1.1rem; color: var(--sb-icon); }
.app-sidebar .nav-link:hover i, .app-sidebar .nav-link.active i { color: inherit; }
.app-sidebar .nav-link.active { font-weight: 600; }
.app-sidebar .brand .bi-safe2 { color: var(--rm-primary); }

@media (min-width: 992px) {
  /* Desktop sidebar: narrow, and always the full menu on one screen — no scrolling.
     Spacing, text and icons follow the screen height (≈17 items + the header must fit in 100vh). */
  .app-sidebar {
    width: var(--rm-sidebar-w);
    position: sticky; top: 0; height: 100vh; flex-shrink: 0;
    overflow: hidden;
  }
  .app-sidebar .offcanvas-body { overflow: hidden; }
  .app-sidebar .brand.py-3 { padding-top: clamp(.4rem, 1.3vh, 1rem) !important; padding-bottom: clamp(.4rem, 1.3vh, 1rem) !important; font-size: 1.05rem; }
  .app-sidebar #sidebarCompany { padding-bottom: clamp(.2rem, .8vh, .5rem) !important; }
  .app-sidebar .nav { padding-left: .4rem !important; padding-right: .4rem !important; }
  .app-sidebar .nav-link {
    font-size: clamp(.8rem, calc(1.3vh + 4px), .93rem); line-height: 1.35;
    padding-block: clamp(1px, calc((100vh - 80px) / 34 - 10px), .58rem);
    padding-inline: .6rem; gap: .55rem; margin-bottom: 1px;
    white-space: nowrap;
  }
  .app-sidebar .nav-link span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .app-sidebar .nav-link i { font-size: 1.05em; line-height: 1; flex-shrink: 0; }
  .app-sidebar .nav-link .nav-lock { font-size: .7em; }
  .app-sidebar { transition: width .18s ease; z-index: 1030; }

  /* collapse button */
  .sb-toggle { border: 0; background: transparent; color: var(--sb-muted); width: 30px; height: 30px; border-radius: .5rem;
    display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
  .sb-toggle:hover { background: var(--sb-hover); color: var(--sb-fg-strong); }

  /* Collapsed: icons only; the name appears beside the icon on hover / keyboard focus */
  html.sb-collapsed { --rm-sidebar-w: 64px; }
  html.sb-collapsed .app-sidebar,
  html.sb-collapsed .app-sidebar .offcanvas-body { overflow: visible; }
  html.sb-collapsed .app-sidebar .sb-brand-text,
  html.sb-collapsed .app-sidebar .sb-logo,
  html.sb-collapsed .app-sidebar #sidebarCompany { display: none !important; }
  html.sb-collapsed .app-sidebar .sb-brand { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
  html.sb-collapsed .app-sidebar .sb-toggle { margin: 0 !important; }
  html.sb-collapsed .app-sidebar .nav-link { justify-content: center; padding-inline: 0; position: relative; }
  html.sb-collapsed .app-sidebar .nav-link i { font-size: 1.2rem; }
  html.sb-collapsed .app-sidebar .nav-link .sb-label {
    position: absolute; inset-inline-start: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--sb-flyout-bg); color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.3;
    padding: .38rem .75rem; border-radius: .5rem; box-shadow: 0 6px 20px rgba(15,23,42,.25);
    white-space: nowrap; overflow: visible; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease, visibility .12s; z-index: 1100;
  }
  html.sb-collapsed .app-sidebar .nav-link:hover .sb-label,
  html.sb-collapsed .app-sidebar .nav-link:focus-visible .sb-label { opacity: 1; visibility: visible; }
  html.sb-collapsed .app-sidebar .nav-link .nav-lock { position: absolute; top: 2px; inset-inline-end: 10px; font-size: .55rem; }
}
@media (max-width: 991.98px) {
  .app-sidebar { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: var(--sb-bg); }
}

.app-topbar {
  display: flex; align-items: center;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: .75rem 1rem; position: sticky; top: 0; z-index: 1020;
}
.app-content { padding: 1rem; }
@media (min-width: 768px) { .app-content { padding: 1.5rem; } }

/* ---------- Cards / stats ---------- */
.card { border: 0; box-shadow: var(--rm-shadow); border-radius: var(--rm-radius); }
.form-control, .form-select { border-color: #e2e8f0; }
.form-control:focus, .form-select:focus { border-color: var(--rm-primary); box-shadow: 0 0 0 .2rem rgba(29,111,95,.15); }
.input-group-text { border-color: #e2e8f0; background: #f8fafc; }
.btn { font-weight: 500; }
.table > thead th { font-size: .78rem; font-weight: 600; color: var(--rm-muted); text-transform: uppercase; letter-spacing: .03em; }
.table-light { --bs-table-bg: #f8fafc; }
.stat-card .stat-label { color: #6b7280; font-size: .85rem; }
.stat-card .stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card .stat-icon {
  width: 42px; height: 42px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Mobile list (cards instead of tables on phones) ---------- */
.list-card { cursor: pointer; }
.list-card + .list-card { margin-top: .5rem; }
.table-hover tbody tr { cursor: pointer; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: linear-gradient(135deg, var(--rm-sidebar-bg), var(--rm-primary)); }
.login-card { width: 100%; max-width: 400px; }

/* ---------- Autocomplete ---------- */
.ac-menu { top: 100%; inset-inline-start: 0; width: 100%; max-height: 280px; overflow-y: auto; margin-top: 2px; }

/* ---------- Status tabs (scroll sideways on phones) ---------- */
.status-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.status-tabs::-webkit-scrollbar { display: none; }
.status-tabs .nav-link { white-space: nowrap; }

/* ---------- Invoice editor ---------- */
.line-row { border-bottom: 1px solid #eef0f3; }
.line-row:last-child { border-bottom: 0; }
.line-total { font-weight: 600; padding-top: .45rem; }
.totals-table td { padding: .35rem 0; }
.totals-table .grand td { font-size: 1.15rem; font-weight: 700; border-top: 2px solid #dee2e6; padding-top: .6rem; }

/* ---------- Invoice "paper" ---------- */
.paper { background: #fff; border-radius: .75rem; box-shadow: 0 1px 3px rgba(16,24,40,.1); padding: 1.25rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .paper { padding: 2.5rem; } }
.paper .doc-title { letter-spacing: .08em; font-weight: 800; color: var(--rm-primary); }
.paper table { font-size: .92rem; }
.paper .watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: 7rem; font-weight: 900; color: rgba(220,53,69,.12); transform: rotate(-25deg);
}

/* =====================================================================
   Phone / tablet: native-app look (bottom tab bar, coloured header, sheets)
   ===================================================================== */
html, body { -webkit-tap-highlight-color: transparent; }
.topbar-back, .topbar-logo { display: inline-flex; align-items: center; justify-content: center; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  display: flex; align-items: flex-end; justify-content: space-around;
  height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 12px rgba(16,24,40,.06);
  user-select: none;
}
.bn-item {
  flex: 1 1 0; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #6b7280; text-decoration: none; font-size: .7rem; background: none; border: 0; padding: 0;
}
.bn-item i { font-size: 1.35rem; line-height: 1; }
.bn-item.active { color: var(--rm-primary); font-weight: 600; }
.bn-item:active { opacity: .6; }
.bn-add {
  flex: 0 0 auto; width: 56px; height: 56px; margin: 0 6px 16px; border-radius: 50%; border: 4px solid #fff;
  background: var(--rm-primary); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(29,111,95,.35);
}
.bn-add:active { transform: scale(.94); }

.app-sheet.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 1.1rem 1.1rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: #d1d5db; margin: .5rem auto 0; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.sheet-tile {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .25rem;
  border-radius: .9rem; color: inherit; text-decoration: none; font-size: .8rem; text-align: center; line-height: 1.2;
}
.sheet-tile:active { background: #f1f3f5; }
.sheet-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }

@media (max-width: 991.98px) {
  body.app-body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); overscroll-behavior-y: none; }

  /* Coloured app header (also under the phone's status bar when installed) */
  .app-topbar {
    background: var(--rm-primary); color: #fff; border-bottom: 0; gap: .5rem;
    padding: calc(.55rem + env(safe-area-inset-top)) .75rem .55rem;
    box-shadow: 0 2px 8px rgba(16,24,40,.12);
  }
  .app-topbar h1 { color: #fff; font-size: 1.05rem; font-weight: 600; }
  .app-topbar .dropdown > .btn { background: rgba(255,255,255,.16); border: 0; color: #fff; border-radius: 2rem; }
  .app-topbar .dropdown > .btn::after { display: none; }
  .topbar-back { color: #fff; font-size: 1.35rem; width: 34px; height: 34px; margin-inline-start: -.35rem; border-radius: 50%; text-decoration: none; }
  .topbar-back:active { background: rgba(255,255,255,.18); }
  .topbar-logo { color: #fff; font-size: 1.25rem; width: 28px; }

  .app-content { padding: .75rem; }
  .card { border-radius: 1rem; }
  .list-card { transition: transform .08s ease; }
  .list-card:active { transform: scale(.985); background: #f8f9fa; }

  /* Floating buttons & toasts sit above the tab bar */
  body.app-body .fab { bottom: calc(76px + env(safe-area-inset-bottom)); }   /* beats the base .fab rule below */
  #toastArea { bottom: calc(62px + env(safe-area-inset-bottom)) !important; left: 0; right: 0; }
  #toastArea .toast { width: 100%; }

  /* iOS zooms into inputs smaller than 16px — keep them at 16px */
  .form-control-sm, .form-select-sm, .input-group-sm > .form-control { font-size: 16px; }

  /* The desktop sidebar is replaced by the tab bar + More sheet */
  .app-sidebar { display: none !important; }
}

@media print {
  .bottom-nav, .app-sheet { display: none !important; }
  body.app-body { padding-bottom: 0 !important; }
}

/* =====================================================================
   Public shared document page (share.php) + company logo
   ===================================================================== */
.doc-logo { max-height: 56px; max-width: 160px; object-fit: contain; }
.logo-preview { width: 120px; height: 64px; border: 1px dashed #cbd5e1; border-radius: .6rem; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.share-body { background: #eef1f4; }
.share-wrap { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.share-hero {
  color: #fff; padding: calc(1.5rem + env(safe-area-inset-top)) 0 4.5rem;
  background: linear-gradient(135deg, var(--rm-sidebar-bg) 0%, var(--rm-primary) 100%);
}
.share-hero-error { background: linear-gradient(135deg, #374151, #6b7280); }
.share-logo {
  width: 52px; height: 52px; border-radius: 14px; background: #fff; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--rm-primary); font-weight: 800;
}
.share-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.share-kicker { letter-spacing: .08em; opacity: .8; }
.share-amount { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; line-height: 1.1; }
.share-pill { display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: 2rem; font-size: .85rem; font-weight: 600; }
.share-pill-due  { background: rgba(255,255,255,.18); color: #fff; }
.share-pill-late { background: #fee2e2; color: #991b1b; }
.share-pill-paid { background: #d1fae5; color: #065f46; }
.share-pill-void { background: #e5e7eb; color: #374151; }
.share-main { margin-top: -3rem; position: relative; }
.share-main .paper { box-shadow: 0 10px 30px rgba(16,24,40,.12); }
.watermark-paid { color: rgba(25,135,84,.10) !important; }
.stmt-list { margin: 0 -.25rem 1rem; }
.stmt-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem .25rem; border-bottom: 1px solid #eef0f3; }
.stmt-total { border-bottom: 0; border-top: 2px solid #dee2e6; margin-top: .25rem; }
@media print { .stmt-list { display: none !important; } .share-main .table-responsive { display: block !important; } }
@media print {
  .share-body { background: #fff; }
  .share-main { margin-top: 0; }
  .share-wrap { max-width: none; padding: 0; }
}

/* ---------- Share sheet (in the app) ---------- */
.share-btn { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem .25rem; border-radius: .9rem;
  border: 1px solid #e5e7eb; background: #fff; color: inherit; text-decoration: none; font-size: .8rem; width: 100%; }
.share-btn:hover { background: #f8f9fa; }
.share-btn i { font-size: 1.5rem; }
.share-btn-wa i { color: #25d366; }
@media (max-width: 575.98px) {
  /* the share dialog slides up like a native sheet */
  #shareModal .modal-dialog { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; max-width: none; }
  #shareModal .modal-content { border-radius: 1.1rem 1.1rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
  #shareModal.fade .modal-dialog { transform: translateY(100%); }
  #shareModal.show .modal-dialog { transform: none; }
}

/* ---------- Reports ---------- */
.report-paper table { font-size: .875rem; }
.report-paper .table td, .report-paper .table th { white-space: nowrap; }
.report-paper .table td:nth-child(3) { white-space: normal; min-width: 160px; }
.aging-row:hover { background: rgba(0,0,0,.025); }
.kpi-value { font-size: clamp(.95rem, 3.8vw, 1.25rem); white-space: normal; overflow-wrap: anywhere; }

@media print {
  .report-paper .table td:nth-child(3) { min-width: 0; }
  .report-paper table { font-size: 8.5pt; }
  @page { margin: 12mm; }
  body.app-body { background: #fff; }
  .app-sidebar, .app-topbar, .d-print-none, .toast-container { display: none !important; }
  .app-content { padding: 0 !important; }
  .paper { box-shadow: none; padding: 0; border-radius: 0; }
  .paper table { font-size: 10pt; }
}

/* Floating action button for "Add" on phones */
.fab {
  position: fixed; bottom: 1.25rem; inset-inline-end: 1.25rem; z-index: 1030;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* contact rows: initials avatar */
.tx-contact .tx-icon { background: #eef2ff; color: #3730a3; font-weight: 700; font-size: .85rem; border-radius: 50%; }

/* =====================================================================
   Arabic / right-to-left (html lang="ar" dir="rtl", Bootstrap RTL build)
   ===================================================================== */
html[lang="ar"] {
  --rm-font: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-family: var(--rm-font);
}
html[lang="ar"] body { letter-spacing: 0; }
/* arrows that point "back"/"forward" are mirrored */
[dir="rtl"] .bi-chevron-left, [dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-arrow-left, [dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-box-arrow-right, [dir="rtl"] .bi-box-arrow-up-right { display: inline-block; transform: scaleX(-1); }
/* bigger line height reads better in Arabic */
html[lang="ar"] .tx-title, html[lang="ar"] .tx-sub { line-height: 1.5; }
/* until the page is translated, don't flash the English text (shown anyway after 1.5 s) */
html[lang="ar"]:not(.i18n-ready) .app-shell,
html[lang="ar"]:not(.i18n-ready) .login-wrap { opacity: 0; animation: i18nShow 0s 1.5s forwards; }
@keyframes i18nShow { to { opacity: 1; } }
/* bilingual documents: Arabic line under the English label */
.ar-sub { display: block; font-family: "IBM Plex Sans Arabic", sans-serif; font-size: .85em; opacity: .85; direction: rtl; }
/* phone numbers, emails and amounts are typed left-to-right even in Arabic */
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"], [dir="rtl"] input[inputmode="decimal"] { direction: ltr; text-align: right; }
[dir="rtl"] input[type="tel"]::placeholder, [dir="rtl"] input[type="email"]::placeholder { text-align: right; }

/* ---------- Free trial banner + sign-up page ---------- */
.trial-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .875rem; font-weight: 500;
  background: #e0f2ec; color: var(--rm-primary-dark); border-radius: .9rem; padding: .55rem .9rem; margin-bottom: 1rem; }
.trial-bar-soon { background: #fef3c7; color: #92400e; }
.trial-bar-ended { background: #fee2e2; color: #991b1b; }
.trial-bar > span { flex: 1 1 12rem; min-width: 0; }   /* text stays beside the icon; the button wraps below */
.signup-grid { width: 100%; max-width: 1040px; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .signup-grid { grid-template-columns: 1fr 460px; } }
.signup-card { max-width: 460px; margin: 0 auto; }
.signup-points li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; font-size: 1.05rem; }
.signup-points i { font-size: 1.25rem; background: rgba(255,255,255,.14); border-radius: .7rem; width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.signup-points span { padding-top: .4rem; }
.signup-done-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--rm-in-bg, #dcfce7); color: var(--rm-in, #15803d);
  display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.signup-code { font-size: 1.75rem; font-weight: 800; letter-spacing: .04em; color: var(--rm-primary); background: #f1f5f9;
  border: 2px dashed #cbd5e1; border-radius: 1rem; padding: .5rem 1rem; direction: ltr; }

/* ---------- Customer / vendor profile (contact_view.php) ---------- */
.cv-hero { border-radius: 1.25rem; padding: 1.15rem 1.25rem; color: #fff; box-shadow: var(--rm-shadow);
  background: linear-gradient(135deg, var(--rm-sidebar-bg) 0%, var(--rm-primary) 100%); }
.cv-hero-owe { background: linear-gradient(135deg, #3b1d2e 0%, #9f1239 100%); }
.cv-hero-settled { background: linear-gradient(135deg, #1e293b 0%, #475569 100%); }
.cv-avatar { width: 52px; height: 52px; border-radius: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.cv-tag { display: inline-block; font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 1rem; background: rgba(255,255,255,.18); }
.cv-tag-off { background: rgba(0,0,0,.25); }
.cv-balance { font-size: clamp(1.7rem, 7vw, 2.3rem); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cv-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 2rem; }
.cv-btn:hover, .cv-btn:focus { background: rgba(255,255,255,.26); color: #fff; }
.cv-icon-btn { background: rgba(255,255,255,.14); color: #fff; border-radius: 12px; width: 38px; height: 38px; flex-shrink: 0; }
.cv-icon-btn:hover { background: rgba(255,255,255,.26); color: #fff; }
.cv-hero #cvSub { overflow-wrap: anywhere; }
@media (min-width: 768px) { .cv-kpis { grid-template-columns: repeat(4, 1fr); } }
.cv-stmt-sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.cv-stmt-sum > div { background: #f8fafc; border: 1px solid var(--rm-line); border-radius: .8rem; padding: .55rem .75rem; min-width: 0; }
.cv-stmt-sum .k { font-size: .75rem; color: var(--rm-muted); }
.cv-stmt-sum .v { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cv-stmt-sum .s { font-size: .72rem; color: var(--rm-muted); }
@media (min-width: 768px) { .cv-stmt-sum { grid-template-columns: repeat(4, 1fr); } }
.stmt-list a.stmt-item:active { background: #f1f5f9; }
@media print {
  .cv-stmt-sum > div { background: #fff; }
  #cvStatement { box-shadow: none; border: 0; }
  #cvStatement .card-body { padding: 0; }
}
@media print { #cvStatement .table-responsive { display: block !important; } }
.contact-link { text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.25); }
.contact-link:hover { border-bottom-color: currentColor; }
@media print { .contact-link { border-bottom: 0; } }
/* item profile: 12-month sales bars */
.iv-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; align-items: end; height: 160px; }
.iv-bar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; min-width: 0; }
.iv-bar-fill { background: linear-gradient(180deg, #2a9d84, var(--rm-primary)); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.iv-bar-empty { background: #e2e8f0; }
.iv-bar-label { font-size: .62rem; color: var(--rm-muted); text-align: center; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* audit log */
.au-row { cursor: pointer; }
.au-detail { background: #f8fafc; border-radius: .75rem; padding: .65rem .85rem; margin: .1rem 0 .6rem; }
.au-detail table { background: transparent; }
.au-row .tx-title { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Install as an app ---------- */
.install-card { display: flex; align-items: center; gap: .85rem; border-radius: 1rem; padding: .85rem 1rem;
  background: linear-gradient(135deg, #e0f2ec, #f0fdf4); border: 1px solid #bbe5d6; }
.install-card img { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.install-card .t { font-weight: 700; line-height: 1.25; }
.install-card .s { font-size: .8rem; color: var(--rm-muted); }
.install-steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.install-steps li { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--rm-line); }
.install-steps li:last-child { border-bottom: 0; }
.install-ic { width: 36px; height: 36px; border-radius: 10px; background: #e0f2ec; color: var(--rm-primary); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }

/* Menu items outside the company's plan (admins see them with a lock) */
.nav-locked { opacity: .7; }
.nav-lock { font-size: .7rem; margin-inline-start: auto; opacity: .8; }
.sheet-tile .nav-lock { position: absolute; top: .4rem; inset-inline-end: .5rem; margin: 0; }
.sheet-tile { position: relative; }
.plan-gate-icon { display: inline-flex; width: 64px; height: 64px; border-radius: 1rem; align-items: center; justify-content: center;
  font-size: 1.8rem; background: #e0f2ec; color: var(--rm-primary-dark); }

/* ---------- Receipt printer (thermal 80 / 58 mm) — see App.printThermal ---------- */
#thermalSlip { display: none; color: #000; background: #fff; font-family: Tahoma, Arial, "Segoe UI", sans-serif;
  font-size: 12px; line-height: 1.35; box-sizing: border-box; }
#thermalSlip.th-80 { width: 80mm; padding: 2mm 4mm; }
#thermalSlip.th-58 { width: 58mm; padding: 2mm 2.5mm; font-size: 10.5px; }
#thermalSlip.th-measure { display: block; position: absolute; top: 0; left: -10000px; }
#thermalSlip .th-center { text-align: center; }
#thermalSlip .th-co { font-size: 1.25em; font-weight: 700; }
#thermalSlip .th-logo { max-width: 60%; max-height: 18mm; filter: grayscale(1) contrast(1.4); margin-bottom: 1mm; }
#thermalSlip .th-title { font-weight: 700; font-size: 1.1em; letter-spacing: .03em; }
#thermalSlip .th-mark { font-weight: 700; }
#thermalSlip .th-sep { border-top: 1px dashed #000; margin: 1.5mm 0; }
#thermalSlip .th-row { display: flex; justify-content: space-between; gap: 2mm; }
#thermalSlip .th-row .th-v { text-align: end; white-space: nowrap; }
#thermalSlip .th-line { margin-bottom: 1mm; }
#thermalSlip .th-line .th-row span:first-child { padding-inline-start: 2mm; }
#thermalSlip .th-strong { font-weight: 700; font-size: 1.15em; }
#thermalSlip .th-big { font-weight: 700; font-size: 1.6em; }
#thermalSlip .th-small { font-size: .9em; }
@media print {
  body.thermal-print > *:not(#thermalSlip) { display: none !important; }
  body.thermal-print { padding: 0 !important; margin: 0 !important; background: #fff !important; }
  body.thermal-print #thermalSlip { display: block; }
}

/* Sign-up: SMS code step */
.otp-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e6f4ef; color: var(--rm-primary); font-size: 1.6rem; }
.otp-input { text-align: center; font-size: 1.8rem; font-weight: 700; letter-spacing: .5em; padding-inline-start: .9em; font-variant-numeric: tabular-nums; }
.otp-input::placeholder { letter-spacing: .4em; color: #cbd5e1; }