/* Ad Touch CRM on the Approx theme - frame tweaks only (brand, topbar, avatars, badges, page header).
   The page-level helper shims the CRM markup relies on stay in w3crm/css/crm-w3.css. */

/* ---------- Brand (sidebar) ---------- */
.startbar .brand .logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; overflow: hidden; }
.startbar .brand .crm-logo-sm { display: inline-block !important; height: 32px; width: 32px; object-fit: contain; } /* the Ad Touch logo is white: it sits on the dark sidebar */
html[data-startbar="light"]:not([data-bs-theme="dark"]) .startbar .brand .crm-logo-sm { filter: invert(1); }
.startbar .brand .crm-brand-title { color: #fff; font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; height: auto; margin-left: 0; transition: opacity .2s; }
html[data-startbar="light"]:not([data-bs-theme="dark"]) .startbar .brand .crm-brand-title { color: var(--bs-body-color); }
@media (min-width: 1200px) {
  body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand .crm-brand-title { opacity: 0; width: 0; }
  body[data-sidebar-size="collapsed"] .startbar:not(:hover) .brand { justify-content: center; padding: 0; }
}
.startbar .navbar-nav .nav-link .menu-icon { font-size: 1.35rem; line-height: 1; }
.startbar .crm-nav-badge { font-size: .65rem; }

/* ---------- Topbar ---------- */
.crm-topbar-hello { line-height: 1.2; }
.topbar .nav-icon { position: relative; }
.topbar .nav-icon > i { font-size: 1.4rem; line-height: 1; }
.crm-badge-dot { position: absolute; top: 14px; right: 2px; font-size: .6rem; line-height: 1; padding: .2rem .35rem; min-width: 1rem; }
#notif-badge.crm-badge-dot:empty { width: .55rem; height: .55rem; min-width: 0; padding: 0; }
.arrow-none::after { display: none !important; }
.topbar .dropdown-menu.crm-notif-menu { width: 22rem; max-width: 92vw; }

/* Avatar letter / photo: the W3CRM frame drew it white-on-dark; Approx's topbar is light. */
.topbar .crm-avatar-initial, .dropdown-menu .crm-avatar-initial {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-weight: 600; font-size: .95rem;
}
.topbar img.crm-avatar-photo, .dropdown-menu img.crm-avatar-photo { width: 36px; height: 36px; object-fit: cover; }

/* ---------- Page ---------- */
/* The theme sizes the page as a flex item (100% + the sidebar margin) and relies on it shrinking; a wide unbreakable
   row (tabs, a long alert) stops a flex item shrinking, which pushed whole pages sideways. Let it always shrink. */
.page-wrapper .page-content { min-width: 0; }
.page-content > .container-fluid { padding-top: .75rem; }
.page-title-box .page-title { font-weight: 600; }
.page-title-right { margin-left: auto; }
/* The old frame gave cards a 1.563rem bottom gap; Approx uses 1.5rem - keep side-by-side lone cards the same height. */
.row > [class*="col"] > .card:only-child { height: calc(100% - 1.5rem); }
.footer .card { box-shadow: none; }

/* ---------- Small helpers some pages use ---------- */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; }
.btn-icon.btn-sm { width: 1.85rem; height: 1.85rem; }
.btn-ghost-danger { background: transparent; border-color: transparent; color: var(--bs-danger); }
.btn-ghost-danger:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.ff-secondary { font-family: var(--bs-body-font-family); }

/* ---------- Dark mode: keep the CRM's light-only bits readable ---------- */
[data-bs-theme="dark"] .bg-light-subtle { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); }

/* ---------- Sign-in pages ---------- */
body.crm-auth { background: linear-gradient(135deg, #141824 0%, #1d2840 55%, var(--bs-primary) 160%); }
body.crm-auth .card { border: 0; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .25); }
.crm-auth-logo { height: 64px; width: auto; }

/* ---------- Icons (Iconoir, see crm-icons.css) ----------
   Iconoir's fine 1.5px lines read smaller than the old Remix glyphs at the same size, so icons that stand on their
   own (stat tiles, round icon badges) are drawn a little larger; icons inside text and buttons keep 1em. */
.avatar-title > i[class*="ri-"]::before { width: 1.3em; height: 1.3em; vertical-align: middle; }
.avatar-title > i[class*="ri-"] { line-height: 1; display: inline-flex; }

/* ---------- Sidebar menu: no visible scrollbar ----------
   The menu still scrolls (mouse wheel / touch) when it is taller than the screen; only the bar itself is hidden,
   and nothing can scroll it sideways. */
.startbar .startbar-collapse { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.startbar .startbar-collapse::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- Password fields: show / hide eye ----------
   Clearly visible (was faint grey): full field height, centred, a larger icon in the body colour, the theme blue on
   hover, and blue while the password is showing. Used on the sign-in page and the Employees password dialogs. */
.password-toggle.btn {
  height: 100%; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .85rem; border: 0; color: var(--bs-body-color) !important; opacity: .75; font-size: 1.25rem; line-height: 1;
}
.password-toggle.btn:hover, .password-toggle.btn:focus-visible { opacity: 1; color: var(--bs-primary) !important; }
.password-toggle.btn[aria-label="Hide password"] { opacity: 1; color: var(--bs-primary) !important; }
.password-toggle.btn i::before { width: 1.1em; height: 1.1em; }

/* ---------- Clickable rows (see "Whole row opens the record" in crm-w3.js) ---------- */
tr.crm-row-link, .list-group-item.crm-row-link { cursor: pointer; }
tr.crm-row-link:hover > td { background-color: var(--bs-tertiary-bg); }
.list-group-item.crm-row-link:hover { background-color: var(--bs-tertiary-bg); }

/* ---------- Back button (see back_button() / "Back goes to the page you actually came from" in crm-w3.js) ---------- */
.crm-back.btn { font-weight: 600; border-width: 1.5px; background: var(--bs-body-bg); padding-inline: 1rem; }
.crm-back.btn:hover, .crm-back.btn:focus-visible { background: var(--bs-primary); color: #fff; }

/* ---------- Numbered table rows: <table class="table-numbered">, <td class="row-num"> first in each row ----------
   A CSS counter, so rows hidden by the page's search box are skipped and the visible ones stay 1, 2, 3... */
.table-numbered tbody { counter-reset: crm-row; }
.table-numbered tbody tr:has(> td.row-num) { counter-increment: crm-row; }
.table-numbered td.row-num::before { content: counter(crm-row); }
.table-numbered .row-num { width: 3rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* ---------- Deliverables chart (content/deliverables) ---------- */
.crm-deliverables svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; border-radius: .5rem; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12); }
@media print {
  body * { visibility: hidden; }
  .crm-deliverables, .crm-deliverables * { visibility: visible; }
  .crm-deliverables { position: absolute; inset: 0; }
  .crm-deliverables svg { max-width: none; box-shadow: none; border-radius: 0; }
  @page { size: A4; margin: 0; }
}

/* ---------- Client logo on the client page header ---------- */
.crm-client-logo { width: 4rem; height: 4rem; border-radius: .75rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); object-fit: contain; padding: .25rem; }
.crm-client-logo-edit { position: relative; cursor: pointer; margin: 0; }
.crm-client-logo-edit .crm-client-logo-badge { position: absolute; right: -.35rem; bottom: -.35rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-primary); color: #fff; font-size: .8rem; box-shadow: 0 0 0 2px var(--bs-body-bg); }

/* ---------- Popups for notifications and chat messages (crm-w3.js), top right; task reminders stay bottom right ---------- */
.crm-alert-popups { position: fixed; top: 4.75rem; right: 1rem; z-index: 1089; width: min(23rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem; max-height: calc(100vh - 6rem); overflow-y: auto; pointer-events: none; }
.crm-alert-card, .crm-alert-more { pointer-events: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .18); }
.crm-alert-card { border-left: 4px solid var(--bs-primary); padding: .75rem .9rem; animation: crm-task-in .25s ease-out; }
.crm-alert-card.danger { border-left-color: var(--bs-danger); }
.crm-alert-card.chat { border-left-color: var(--bs-success); }
.crm-alert-card .crm-alert-icon { color: var(--bs-primary); }
.crm-alert-card.danger .crm-alert-icon { color: var(--bs-danger); }
.crm-alert-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.crm-alert-initial { display: grid; place-items: center; background: var(--bs-success-bg-subtle); color: var(--bs-success); font-weight: 600; }
.crm-alert-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.crm-alert-more { padding: .4rem .8rem; font-size: .8125rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .crm-alert-card { animation: none; } }
@media (max-width: 575.98px) { .crm-alert-popups { right: .5rem; left: .5rem; width: auto; top: 4.25rem; } }
@media print { .crm-alert-popups { display: none !important; } }
.crm-alert-card, .crm-alert-more { background: #fff; }
[data-bs-theme="dark"] .crm-alert-card, [data-bs-theme="dark"] .crm-alert-more { background: var(--bs-tertiary-bg, #262a33); }
/* Client logo in lists (Clients page), the same size as the initial avatar it replaces. */
.crm-client-logo-sm { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: .4rem; object-fit: contain; background: #fff; border: 1px solid var(--bs-border-color); padding: 1px; }

/* "+" / "−" on buttons that open a panel (crm-w3.js): the new sign spins in. */
.crm-pm-anim { display: inline-block; animation: crm-pm-spin .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes crm-pm-spin { from { transform: rotate(-180deg) scale(.4); opacity: .2; } to { transform: rotate(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .crm-pm-anim { animation: none; } }

/* ---------- Phones ---------- */
/* Two summary tiles per row (Creatives, Income & Expenses): drop the icon so the number has room. */
@media (max-width: 575.98px) {
  .col-6 > .card-animate .avatar-sm { display: none; }
  .col-6 > .card-animate .card-body { padding: .9rem; }
  .col-6 > .card-animate h4 { font-size: 1.15rem; }
}

/* The cash book (Billing > Income & Expenses): one card per entry instead of ten columns. Cells carry l-* classes.
     line 1: description .......... amount     line 2: date · purpose · invoice ...... balance
     line 3: Income / status badges            line 4: remarks / receipt             line 5: edit / delete */
@media (max-width: 767.98px) {
  .table-ledger { display: block; }
  .table-ledger thead { display: none; }
  .table-ledger tbody, .table-ledger tfoot { display: block; }
  .table-ledger tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .table-ledger td { display: block; border: 0 !important; padding: 0 !important; background: transparent; width: auto; text-align: left; }
  .table-ledger td.l-skip { display: none; }
  .table-ledger .l-desc { order: 1; flex: 1 1 calc(100% - 8.5rem); min-width: 0; font-weight: 600; }
  .table-ledger .l-amt { order: 2; flex: 0 0 7.5rem; text-align: right; }
  .table-ledger .l-date { order: 3; font-size: .8rem; color: var(--bs-secondary-color); }
  .table-ledger .l-cat { order: 4; font-size: .8rem; color: var(--bs-secondary-color); }
  .table-ledger .l-cat::before { content: "· "; }
  .table-ledger .l-inv { order: 5; font-size: .8rem; }
  .table-ledger .l-inv::before { content: attr(data-prefix) " "; }
  .table-ledger .l-type { order: 6; }
  .table-ledger .l-status { order: 7; }
  .table-ledger .l-bal { order: 8; flex: 1 1 auto; text-align: right; font-size: .85rem; }
  .table-ledger .l-bal::before { content: "Balance "; font-weight: 400; color: var(--bs-secondary-color); }
  .table-ledger .l-inv:empty { display: none; }
  .table-ledger .l-rem { order: 9; flex: 1 1 100%; }
  .table-ledger .l-act { order: 10; flex: 1 1 100%; text-align: right !important; padding-top: .25rem !important; }
  /* Opening / closing balance rows: label on the left, balance on the right. */
  .table-ledger tr.l-open { align-items: center; }
  .table-ledger tr.l-open .l-desc { flex: 1 1 auto; font-weight: 600; }
  .table-ledger tr.l-open .l-date { display: none; }
  .table-ledger tr.l-open .l-bal { flex: 0 0 auto; font-size: 1rem; }
  /* Empty state spans the card. */
  .table-ledger tr > td[colspan]:only-child { flex: 1 1 100%; text-align: center; }
  .table-ledger tr.l-close td:empty { display: none; }
}

/* Desktop: an entry without an invoice number shows a dash. */
@media (min-width: 768px) { .table-ledger td.l-inv:empty::after { content: "-"; } }

/* List tables as cards on phones (<table class="table-stack">, labels filled in by crm-w3.js): one card per row,
   "LABEL  value" lines, the stack-title cell (name / invoice) as the heading. */
@media (max-width: 767.98px) {
  .table-stack { display: block; }
  .table-stack thead { display: none; }
  .table-stack tbody { display: block; }
  .table-stack tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .2rem 0 !important; border: 0 !important; text-align: right; white-space: normal; min-width: 0; }
  .table-stack td[data-label]::before { content: attr(data-label); flex: 0 0 auto; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); text-align: left; }
  .table-stack td.stack-skip { display: none; }
  .table-stack td.stack-title { display: block; text-align: left; font-weight: 600; padding-bottom: .35rem !important; }
  .table-stack td.stack-title::before { display: none; }
  .table-stack td[colspan] { display: block; text-align: center; }
}
@media (max-width: 767.98px) { .table-stack .stack-val { min-width: 0; overflow-wrap: anywhere; text-align: right; } }

/* ---------- Readable text on white (light mode only) ----------
   The theme's secondary/muted greys and its warning/info/success colours are too pale to read on a white card. */
html:not([data-bs-theme="dark"]) {
  --bs-secondary: #56627a; --bs-secondary-rgb: 86, 98, 122;
  --bs-secondary-color: #5b6577;
  --bs-tertiary-color: rgba(37, 40, 45, .7);
}
html:not([data-bs-theme="dark"]) .btn-soft-secondary { background-color: #e6e9f0; }
html:not([data-bs-theme="dark"]) .btn-soft-secondary:hover { background-color: var(--soft); }
html:not([data-bs-theme="dark"]) .btn-soft-warning { --soft: #a85a06; }
html:not([data-bs-theme="dark"]) .btn-soft-info { --soft: #0b7285; }
html:not([data-bs-theme="dark"]) .btn-soft-success { --soft: #06775e; }
html:not([data-bs-theme="dark"]) .btn-soft-danger { --soft: #cf1a48; }
html:not([data-bs-theme="dark"]) .text-warning { color: #a85a06 !important; }
html:not([data-bs-theme="dark"]) .text-info { color: #0b7285 !important; }
html:not([data-bs-theme="dark"]) .text-success { color: #06775e !important; }
html:not([data-bs-theme="dark"]) .text-danger { color: #cf1a48 !important; }
html:not([data-bs-theme="dark"]) .text-secondary { color: #56627a !important; }
html:not([data-bs-theme="dark"]) .link-secondary { color: #56627a !important; }
html:not([data-bs-theme="dark"]) .btn-light { --bs-btn-bg: #e6e9f0; --bs-btn-border-color: #d3d8e2; --bs-btn-hover-bg: #d3d8e2; --bs-btn-hover-border-color: #c2c8d4; --bs-btn-color: #25282d; --bs-btn-hover-color: #25282d; }
html:not([data-bs-theme="dark"]) .form-control::placeholder { color: #6b7485; }

/* A phone card's action cell (no heading, e.g. the pencil on a lead): shown, buttons on the right. */
@media (max-width: 767.98px) { .table-stack td:has([data-stack-keep]) { justify-content: flex-end; padding-top: .4rem !important; } }