/**
 * tsync-client-portal.css — visual polish for the customer/client portal.
 *
 * Enqueued via the theme's `app_customers_head` hook (AFTER the theme stylesheet, so it
 * overrides). Every rule is scoped under body.customers so it can only affect the client
 * area, never the admin. Uses platform --tsx-* tokens with concrete fallbacks. This is a
 * styling pass over the existing markup: no template restructuring, no JS behaviour change.
 */

body.customers {
  --cp-brand:      var(--tsx-brand, #0d7a8a);
  --cp-brand-ink:  var(--tsx-brand-hover, #0a626f);
  --cp-tint:       var(--tsx-brand-tint, rgba(13, 122, 138, 0.08));
  --cp-tint-2:     var(--tsx-brand-tint-2, rgba(13, 122, 138, 0.14));
  --cp-ink:        var(--tsx-n-900, #18181b);
  --cp-label:      var(--tsx-n-700, #3f3f46);
  --cp-muted:      var(--tsx-n-500, #71717a);
  --cp-line:       var(--tsx-n-200, #e4e4e7);
  --cp-line-soft:  var(--tsx-n-100, #f4f4f5);
  --cp-bg:         var(--tsx-bg-page, #f3f5f7);
  --cp-surface:    #ffffff;
  --cp-radius:     14px;
  --cp-shadow:     0 1px 2px rgba(24,24,27,.04), 0 12px 32px -22px rgba(24,24,27,.30);

  background: var(--cp-bg);
  color: var(--cp-ink);
}

/* ── Shell: kill the dead-space feel; give short pages a floor ─────────────── */
body.customers #wrapper { background: var(--cp-bg); }
body.customers #content { min-height: calc(100vh - 170px); padding-bottom: 56px; }
body.customers #content > .container { max-width: 1180px; }

/* ── Top navigation ───────────────────────────────────────────────────────── */
body.customers .navbar.header {
  background: var(--cp-surface);
  border: 0;
  border-bottom: 1px solid var(--cp-line);
  box-shadow: 0 1px 3px rgba(24,24,27,.04);
  margin-bottom: 30px;
  min-height: 68px;
}
body.customers .navbar.header .navbar-brand.logo { padding-top: 18px; height: 68px; }
body.customers .navbar.header .navbar-brand.logo img { max-height: 32px; width: auto; }
body.customers .navbar.header .navbar-nav > li > a {
  color: var(--cp-label);
  font-weight: 500;
  font-size: 14px;
  padding: 24px 15px;
  transition: color .15s ease, background .15s ease;
}
body.customers .navbar.header .navbar-nav > li > a:hover,
body.customers .navbar.header .navbar-nav > li > a:focus { color: var(--cp-brand); background: transparent; }
body.customers .navbar.header .navbar-nav > li.active > a {
  color: var(--cp-brand);
  box-shadow: inset 0 -2px 0 var(--cp-brand);
}
body.customers .navbar.header .client-profile-image-small {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--cp-line);
}
/* "My Assets" injected nav link reads like the rest of the nav, not a teal outlier. */
body.customers .navbar.header .customer-asset-nav-link {
  color: var(--cp-label) !important;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
body.customers .navbar.header .customer-asset-nav-link:hover { color: var(--cp-brand) !important; }

/* ── Files / Calendar utility bar (was an orphaned floated band) ──────────── */
body.customers .customer-top-submenu {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
  float: none;
}
body.customers .customer-top-submenu > li { float: none; }
body.customers .customer-top-submenu > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--cp-line);
  border-radius: 9px;
  background: var(--cp-surface);
  color: var(--cp-label);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(24,24,27,.03);
  transition: border-color .15s ease, color .15s ease;
}
body.customers .customer-top-submenu > li > a:hover {
  color: var(--cp-brand);
  border-color: var(--cp-brand);
  text-decoration: none;
}

/* ── Page headings ────────────────────────────────────────────────────────── */
body.customers .section-heading,
body.customers #content h4:first-child {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cp-ink);
  margin: 0 0 18px;
}
body.customers .section-heading .view-account-statement,
body.customers .section-heading a {
  color: var(--cp-brand);
  font-weight: 600;
}
body.customers .section-heading a:hover { color: var(--cp-brand-ink); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
body.customers .panel_s {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
}
body.customers .panel_s > .panel-body { padding: 24px 26px; }
body.customers .panel_s hr { border-top-color: var(--cp-line); margin: 18px 0; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
body.customers .table > thead > tr > th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cp-muted);
  border-bottom: 1px solid var(--cp-line);
  padding: 12px 14px;
}
body.customers .table > tbody > tr > td {
  padding: 14px;
  border-top: 1px solid var(--cp-line-soft);
  vertical-align: middle;
  color: var(--cp-ink);
}
body.customers .table.dt-table > tbody > tr:hover > td { background: var(--cp-tint); }
body.customers .table a.invoice-number,
body.customers .table a { color: var(--cp-brand); font-weight: 600; }
body.customers .table a:hover { color: var(--cp-brand-ink); }

/* DataTables chrome (search box, length, pagination) */
body.customers .dataTables_wrapper .dataTables_filter input,
body.customers .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--cp-line);
  border-radius: 9px;
  padding: 6px 10px;
}
body.customers .dataTables_wrapper .paginate_button.current {
  background: var(--cp-brand) !important;
  border-color: var(--cp-brand) !important;
  color: #fff !important;
  border-radius: 8px;
}

/* ── Status pills (invoice/estimate statuses) ─────────────────────────────── */
body.customers .label,
body.customers .invoice-status-badge,
body.customers [class*="invoice-status-"] {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── Stats summary bar (Unpaid / Paid / Overdue / Partially paid) ─────────── */
/* The count (e.g. "3 / 4") is already shown above each bar, so the bar becomes a clean
   thin meter — the inner % text injected by clients.js is hidden (font-size:0) so it can't
   overflow the slim track. */
body.customers .invoices-stats .stats-status a { font-weight: 600; color: var(--cp-label); }
body.customers .invoices-stats .stats-numbers { color: var(--cp-ink); }
body.customers .progress {
  height: 8px; border-radius: 999px; background: var(--cp-line-soft);
  box-shadow: none; margin-bottom: 0; margin-top: 10px; overflow: hidden;
}
body.customers .progress .progress-bar {
  border-radius: 999px;
  font-size: 0;
  line-height: 8px;
  box-shadow: none;
  min-width: 2px;
}

/* ── Forms (profile, change password, open ticket …) ──────────────────────── */
body.customers .control-label,
body.customers label { font-weight: 600; font-size: 13px; color: var(--cp-label); margin-bottom: 6px; }
body.customers .form-control {
  border: 1px solid var(--cp-line);
  border-radius: 9px;
  box-shadow: none;
  color: var(--cp-ink);
}
body.customers .form-control:focus {
  border-color: var(--cp-brand);
  box-shadow: 0 0 0 3px var(--cp-tint);
}
body.customers .form-group { margin-bottom: 18px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
body.customers .btn {
  border-radius: 9px;
  font-weight: 600;
  padding: 9px 18px;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
body.customers .btn-primary,
body.customers .btn-info {
  background: var(--cp-brand);
  border-color: var(--cp-brand);
  color: #fff;
}
body.customers .btn-primary:hover,
body.customers .btn-info:hover { background: var(--cp-brand-ink); border-color: var(--cp-brand-ink); }
body.customers .btn-primary:active { transform: translateY(1px); }
body.customers .btn-default {
  background: var(--cp-surface);
  border-color: var(--cp-line);
  color: var(--cp-label);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
body.customers .footer {
  margin-top: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--cp-line);
  background: transparent;
}
body.customers .footer .copyright-footer { color: var(--cp-muted); font-size: 13px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.customers .navbar.header .navbar-nav > li > a { padding: 12px 15px; }
  body.customers .customer-top-submenu { justify-content: flex-start; flex-wrap: wrap; }
  body.customers .panel_s > .panel-body { padding: 18px 16px; }
  body.customers #content { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.customers * { transition: none !important; }
}