/* properties crm — application styles (complements Bootstrap 5) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --crm-sidebar: #131c2e;
  --crm-sidebar-hover: rgba(255, 255, 255, .06);
  --crm-accent: #3b6ef6;
  --crm-accent-strong: #2558d6;
  --crm-accent-soft: rgba(59, 110, 246, .1);
  --crm-bg: #f4f6fb;
  --crm-ink: #1c2740;
  --crm-ink-soft: #6d7891;
  --crm-line: #e6eaf2;
  --crm-shadow: 0 1px 2px rgba(23, 43, 77, .05), 0 8px 24px rgba(23, 43, 77, .06);
  --crm-radius: 14px;

  /* FullCalendar theming */
  --fc-border-color: var(--crm-line);
  --fc-button-bg-color: #fff;
  --fc-button-border-color: #d6dce8;
  --fc-button-hover-bg-color: #eef1f8;
  --fc-button-hover-border-color: #c9d1e0;
  --fc-button-active-bg-color: var(--crm-accent);
  --fc-button-active-border-color: var(--crm-accent);
  --fc-event-bg-color: var(--crm-accent);
  --fc-event-border-color: var(--crm-accent);
  --fc-today-bg-color: rgba(59, 110, 246, .07);
}

body.crm-body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(59, 110, 246, .05), transparent 60%),
    var(--crm-bg);
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .925rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c9d2e3; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aab6cd; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Sidebar ---------- */
.crm-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 252px;
  background:
    radial-gradient(420px 300px at -20% 0%, rgba(59, 110, 246, .16), transparent 65%),
    linear-gradient(180deg, #16203a 0%, #131c2e 100%);
  color: #b9c4da;
  display: flex;
  flex-direction: column;
  z-index: 1035;
  transition: transform .25s ease;
}

.crm-sidebar .brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.2rem 1.35rem 1rem;
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}

.crm-sidebar .brand .brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4d84ff, #2b5ce8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px rgba(43, 92, 232, .45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex: 0 0 auto;
}

.crm-sidebar .brand .brand-photo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}

.crm-sidebar .nav {
  padding: 0 .65rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  flex-wrap: nowrap;
  flex-direction: column;
}

.crm-sidebar .nav-section {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #5f6d8c;
  padding: 1.25rem .85rem .45rem;
}

.crm-sidebar .nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: .45rem;
  transition: color .15s ease;
}

.crm-sidebar .nav-toggle:hover { color: #aab6ce; }

.crm-sidebar .nav-toggle .nav-caret {
  font-size: .7rem;
  transition: transform .2s ease;
  margin-right: .35rem;
}

.crm-sidebar .nav-toggle[aria-expanded="false"] .nav-caret {
  transform: rotate(-90deg);
}

.crm-sidebar .nav-group .collapse:not(.show) {
  display: none;
}

.crm-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  margin-bottom: .1rem;
  color: #aab6ce;
  border-radius: .65rem;
  font-size: .9rem;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}

.crm-sidebar .nav-link i {
  font-size: 1rem;
  width: 1.3rem;
  text-align: center;
  opacity: .85;
}

.crm-sidebar .nav-link:hover {
  background: var(--crm-sidebar-hover);
  color: #fff;
}

.crm-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(59, 110, 246, .28), rgba(59, 110, 246, .12));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(59, 110, 246, .35);
}

.crm-sidebar .nav-link.active i { opacity: 1; }

.crm-sidebar .sidebar-footer {
  margin: auto .65rem .65rem;
  padding: .7rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-footer .footer-firm {
  font-size: .8rem;
  font-weight: 600;
  color: #dbe3f2;
}

.sidebar-footer .footer-role {
  font-size: .7rem;
  color: #6c7a99;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- Main area ---------- */
.crm-main {
  margin-left: 252px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.crm-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--crm-line);
  padding: .8rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.crm-topbar .page-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--crm-ink);
  margin: 0;
  letter-spacing: -.01em;
}

.sidebar-toggle {
  display: none;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  color: var(--crm-ink);
  padding: .25rem .5rem;
  margin-left: -.5rem;
}

.crm-topbar .user-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .75rem .3rem .35rem;
  border-radius: .75rem;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--crm-ink);
  transition: background-color .15s ease, border-color .15s ease;
}

.crm-topbar .user-trigger:hover {
  background: #fff;
  border-color: var(--crm-line);
}

.crm-topbar .user-trigger::after { display: none; }

.crm-topbar .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4d84ff, #2b5ce8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 4px 10px rgba(43, 92, 232, .3);
}

.crm-topbar .user-meta { text-align: left; line-height: 1.25; }

.crm-topbar .user-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--crm-ink);
}

.crm-topbar .user-role {
  font-size: .72rem;
  color: var(--crm-ink-soft);
}

.crm-topbar .user-caret {
  font-size: .6rem;
  color: #9aa6b8;
}

.crm-content {
  padding: 1.6rem 1.75rem 2.5rem;
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- User dropdown menu ---------- */
.user-menu {
  min-width: 270px;
  border: 1px solid var(--crm-line);
  border-radius: .9rem;
  box-shadow: 0 12px 32px rgba(23, 43, 77, .14);
  overflow: hidden;
}

.user-menu .user-menu-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  background: #f5f7fc;
  border-bottom: 1px solid var(--crm-line);
}

.user-menu .user-avatar-lg {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4d84ff, #2b5ce8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex: 0 0 auto;
}

.user-menu .dropdown-header {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--crm-ink-soft);
  padding: .55rem 1rem .3rem;
}

.user-menu .dropdown-item,
.user-menu .dropdown-item-text {
  font-size: .875rem;
  padding: .45rem .85rem;
  border-radius: .55rem;
  margin: .1rem .5rem;
}

.user-menu .dropdown-item:hover { background: var(--crm-accent-soft); }

.user-menu .dropdown-divider {
  margin: .45rem 0;
  border-color: var(--crm-line);
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid rgba(230, 234, 242, .8);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow);
  background-color: #fff;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--crm-line);
  padding: .9rem 1.25rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--crm-ink);
  border-top-left-radius: var(--crm-radius) !important;
  border-top-right-radius: var(--crm-radius) !important;
}

.card-header i:not(.ms-2) { color: var(--crm-accent); }

/* ---------- Stat cards ---------- */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(23, 43, 77, .07), 0 16px 36px rgba(23, 43, 77, .09);
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--sc-color, var(--crm-accent)), transparent);
  opacity: .9;
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--sc-color, var(--crm-accent));
  background: color-mix(in srgb, var(--sc-color, var(--crm-accent)) 12%, #fff);
}

.stat-card .stat-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--crm-ink);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.stat-card .stat-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--crm-ink-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stat-card .stat-hint {
  font-size: .78rem;
  color: var(--crm-ink-soft);
}

/* ---------- Page toolbar (actions row under the topbar title) ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--crm-ink);
  margin: 0;
}

.page-header .page-subtitle {
  color: var(--crm-ink-soft);
  font-size: .875rem;
  margin: 0;
}

/* ---------- List toolbar (search / filters) ---------- */
.list-toolbar {
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--crm-line);
}

.list-toolbar .search-field {
  position: relative;
  flex: 1 1 240px;
  max-width: 340px;
}

.list-toolbar .search-field i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa6b8;
  font-size: .9rem;
  pointer-events: none;
}

.list-toolbar .search-field .form-control {
  padding-left: 2.3rem;
  background: #f7f8fc;
  border-color: transparent;
}

.list-toolbar .search-field .form-control:focus {
  background: #fff;
  border-color: #a9c0f8;
}

.list-toolbar .form-select {
  width: auto;
  min-width: 160px;
  background-color: #f7f8fc;
  border-color: transparent;
}

.list-toolbar .form-select:focus {
  background-color: #fff;
  border-color: #a9c0f8;
}

.list-toolbar .filter-number {
  width: 140px;
  background-color: #f7f8fc;
  border-color: transparent;
}

.list-toolbar .filter-number:focus {
  background-color: #fff;
  border-color: #a9c0f8;
}

/* ---------- Tables ---------- */
.table {
  --bs-table-hover-bg: #f6f8fd;
  margin-bottom: 0;
}

.table thead th {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--crm-ink-soft);
  background: #fafbfe;
  border-bottom: 1px solid var(--crm-line);
  padding: .7rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: .8rem 1rem;
  color: #3c4a66;
  vertical-align: middle;
}

.table tbody tr td:first-child { color: var(--crm-ink); }
.table tbody tr:hover td { color: var(--crm-ink); }

/* Sortable table headers */
.table thead th.th-sort { padding: 0; }

.th-sort-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .7rem 1rem;
  color: var(--crm-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

.th-sort-link:hover { color: var(--crm-ink); }

.th-sort-link .bi {
  font-size: .8em;
  opacity: .45;
  transition: opacity .15s ease;
}

.th-sort-link.is-active {
  color: var(--crm-accent-strong, #3b6ef6);
}

.th-sort-link.is-active .bi {
  opacity: 1;
}

.th-sort.text-center .th-sort-link { justify-content: center; width: 100%; }
.th-sort.text-end .th-sort-link { justify-content: flex-end; width: 100%; }

/* ---------- Soft badges ---------- */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .72rem;
  font-weight: 600;
  padding: .32em .7em;
  border-radius: 2rem;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-soft.badge-soft-primary { background: rgba(59, 110, 246, .12); color: #2b5cd6; }
.badge-soft.badge-soft-success { background: rgba(23, 165, 95, .13); color: #128051; }
.badge-soft.badge-soft-info    { background: rgba(14, 165, 185, .13); color: #0e7f92; }
.badge-soft.badge-soft-warning { background: rgba(234, 138, 20, .15); color: #b26a08; }
.badge-soft.badge-soft-danger  { background: rgba(229, 62, 62, .12); color: #c03333; }
.badge-soft.badge-soft-secondary { background: rgba(100, 116, 139, .12); color: #5a6472; }
.badge-soft.badge-soft-neutral { background: rgba(100, 116, 139, .12); color: #526077; }

.badge-status {
  font-size: .72rem;
  font-weight: 600;
  padding: .35em .8em;
  border-radius: 2rem;
}

/* ---------- Avatars ---------- */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  background: #e3e9f4;
}

.avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #7c93f5, #4f6df0);
}

.avatar-fallback.av-0 { background: linear-gradient(135deg, #667eea, #5568d6); }
.avatar-fallback.av-1 { background: linear-gradient(135deg, #f093a5, #e05f7c); }
.avatar-fallback.av-2 { background: linear-gradient(135deg, #43b89b, #23906f); }
.avatar-fallback.av-3 { background: linear-gradient(135deg, #f0a550, #dd7d24); }
.avatar-fallback.av-4 { background: linear-gradient(135deg, #8f6fe8, #6b46c8); }
.avatar-fallback.av-5 { background: linear-gradient(135deg, #38b2d8, #2286ae); }

/* ---------- Row actions ---------- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: .55rem;
  border: 1px solid transparent;
  background: transparent;
  color: #7d8aa5;
  font-size: .9rem;
  transition: background-color .15s ease, color .15s ease;
}

.btn-icon:hover { background: var(--crm-accent-soft); color: var(--crm-accent-strong); }

.btn-icon.btn-icon-danger:hover { background: rgba(229, 62, 62, .1); color: #c03333; }

/* ---------- Empty state ---------- */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--crm-ink-soft);
}

.empty-state .empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--crm-accent-soft);
  color: var(--crm-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: .9rem;
}

.empty-state p { margin-bottom: 1rem; }

/* ---------- Tabs ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--crm-line);
  gap: .25rem;
}

.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--crm-ink-soft);
  font-weight: 600;
  font-size: .875rem;
  padding: .8rem 1rem;
  margin-bottom: -1px;
  background: transparent;
}

.nav-tabs .nav-link:hover { color: var(--crm-ink); border-bottom-color: #c9d4ea; }

.nav-tabs .nav-link.active {
  color: var(--crm-accent-strong);
  border-bottom-color: var(--crm-accent);
  background: transparent;
}

/* ---------- Log timeline ---------- */
.log-timeline { position: relative; }

.log-timeline .log-item {
  position: relative;
  padding: 0 0 1.1rem 1.6rem;
  border-left: 2px solid #e8edf6;
  margin-left: .45rem;
}

.log-timeline .log-item:last-child { border-left-color: transparent; padding-bottom: .1rem; }

.log-timeline .log-dot {
  position: absolute;
  left: -.42rem;
  top: .2rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--crm-accent);
  box-shadow: 0 0 0 3px var(--crm-accent-soft);
}

/* ---------- Calendar (custom grid) ---------- */
.calendar-grid {
  border: 1px solid var(--crm-line);
  border-radius: .85rem;
  overflow: hidden;
  background: #fff;
}

.calendar-grid .cal-head {
  background: #f8fafd;
  padding: .55rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--crm-ink-soft);
  text-align: center;
  border-bottom: 1px solid var(--crm-line);
  border-right: 1px solid #eef1f6;
}

.calendar-grid .cal-cell {
  min-height: 108px;
  padding: .45rem;
  border-right: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
  vertical-align: top;
  background: #fff;
}

.calendar-grid .cal-cell.out-of-month { background: #fafbfd; }
.calendar-grid .cal-cell.out-of-month .cal-day { color: #b8c2d4; }

.calendar-grid .cal-day {
  font-size: .8rem;
  font-weight: 600;
  color: #5b6b84;
  margin-bottom: .3rem;
}

.calendar-grid .cal-day .today-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--crm-accent);
  color: #fff;
  font-size: .75rem;
}

.cal-appointment {
  display: block;
  font-size: .72rem;
  line-height: 1.25;
  padding: .18rem .45rem;
  border-radius: .4rem;
  color: #fff;
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.cal-appointment:hover { filter: brightness(1.08); color: #fff; }

/* ---------- FullCalendar polish ---------- */
#calendar .fc {
  --fc-border-color: #e9edf5;
  font-size: .85rem;
}

#calendar .fc-toolbar.fc-header-toolbar {
  padding: .35rem .35rem .9rem;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: .6rem;
}

#calendar .fc-toolbar-title {
  font-size: 1.12rem !important;
  font-weight: 700;
  color: var(--crm-ink);
  letter-spacing: -.01em;
}

/* Prev / next / today as soft white pills */
#calendar .fc-button {
  border-radius: .6rem !important;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: none !important;
  text-transform: capitalize;
  color: #3c4a66;
  padding: .38rem .75rem;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#calendar .fc-button:hover { color: var(--crm-ink); }

#calendar .fc-today-button {
  color: var(--crm-accent-strong) !important;
  background: var(--crm-accent-soft) !important;
  border-color: transparent !important;
}

#calendar .fc-today-button:hover { background: rgba(59, 110, 246, .18) !important; }

#calendar .fc-today-button:disabled { opacity: .55 !important; }

/* Month / week / day as a segmented control */
#calendar .fc-button-group {
  background: #f3f5fa;
  border: 1px solid var(--crm-line);
  border-radius: .65rem;
  padding: 3px;
}

#calendar .fc-button-group .fc-button {
  background: transparent !important;
  border: 0 !important;
  border-radius: .45rem !important;
  padding: .28rem .8rem;
  color: var(--crm-ink-soft) !important;
}

#calendar .fc-button-group .fc-button:hover {
  color: var(--crm-ink) !important;
  background: rgba(255, 255, 255, .85) !important;
}

#calendar .fc-button-group .fc-button:focus { box-shadow: none !important; }

#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active {
  background: #fff !important;
  color: var(--crm-accent-strong) !important;
  box-shadow: 0 1px 3px rgba(23, 43, 77, .16) !important;
}

/* Weekday header row */
#calendar .fc-col-header-cell { background: #fafbfe; }

#calendar .fc-col-header-cell-cushion {
  font-weight: 700;
  color: var(--crm-ink-soft);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .07em;
  text-decoration: none;
  padding: .6rem 0;
}

/* Day cells: taller, gently tinted weekends, soft hover */
#calendar .fc-daygrid-day-frame { min-height: 124px; }

#calendar .fc-daygrid-day { transition: background-color .12s ease; }

#calendar .fc-daygrid-day.fc-day-sun,
#calendar .fc-daygrid-day.fc-day-sat { background-color: #fbfcfe; }

#calendar .fc-daygrid-day:hover { background-color: #f4f7fe; }

#calendar .fc-day-today { background-color: var(--fc-today-bg-color) !important; }

#calendar .fc-daygrid-day-number {
  font-size: .82rem;
  font-weight: 600;
  color: #4b5a77;
  text-decoration: none;
  transition: color .12s ease;
}

#calendar .fc-daygrid-day-number:hover { color: var(--crm-accent-strong); }

#calendar .fc-day-today .fc-daygrid-day-number {
  background: var(--crm-accent);
  color: #fff !important;
  margin: .35rem;
  padding: .18rem .55rem;
  border-radius: .55rem;
  box-shadow: 0 3px 8px rgba(47, 111, 237, .35);
}

/* Event chips */
#calendar .fc-daygrid-event {
  background: transparent !important;
  border: 0 !important;
}

#calendar .fc-event-main { color: inherit; padding: 2px 3px; }

.cal-chip {
  display: flex;
  align-items: center;
  gap: .45em;
  min-width: 0;
  width: 100%;
  background: var(--chip, var(--crm-accent));
  color: #fff;
  border-radius: .5rem;
  padding: .26rem .5rem;
  font-size: .73rem;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(23, 43, 77, .16);
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}

.cal-chip:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(23, 43, 77, .22);
}

.cal-chip .cal-chip-time {
  font-weight: 700;
  opacity: .85;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}

.cal-chip .cal-chip-title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "+N more" link */
#calendar .fc-daygrid-more-link {
  font-size: .7rem;
  font-weight: 700;
  color: var(--crm-accent-strong);
  background: var(--crm-accent-soft);
  border-radius: 2rem;
  padding: .2rem .55rem;
  margin: .25rem 3px;
  transition: background-color .12s ease;
}

#calendar .fc-daygrid-more-link:hover { background: rgba(59, 110, 246, .18); }

/* Day limit popover */
#calendar .fc-popover {
  border: 1px solid var(--crm-line);
  border-radius: .8rem;
  box-shadow: var(--crm-shadow);
  overflow: hidden;
}

#calendar .fc-popover-header {
  background: #fafbfe;
  padding: .5rem .75rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--crm-ink);
}

#calendar .fc-popover-body { padding: .55rem; }

#calendar .fc-popover .fc-daygrid-event-harness { margin: .25rem 0; }

#calendar .fc-daygrid-event-harness { margin-top: 2px; margin-left: 3px; margin-right: 3px; }

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-radius: .6rem;
  border-color: #d8dfe9;
  font-size: .9rem;
  color: var(--crm-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: #8fb4f2;
  box-shadow: 0 0 0 .22rem rgba(59, 110, 246, .13);
}

.form-control::placeholder { color: #a3aec0; }

textarea.form-control { resize: vertical; min-height: 96px; }

.form-label {
  font-weight: 600;
  font-size: .82rem;
  color: #33415e;
  margin-bottom: .4rem;
}

.form-text { font-size: .78rem; color: #8a93a5; }

.form-section {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--crm-ink-soft);
  margin: .5rem 0 .25rem;
}

.form-section i { color: var(--crm-accent); font-size: 1rem; }
.form-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--crm-line);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  margin-top: 1.75rem;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: .6rem;
  font-weight: 600;
  font-size: .875rem;
}

.btn-accent {
  background: linear-gradient(180deg, #4d80f8, var(--crm-accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 42, 105, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-accent:hover {
  background: linear-gradient(180deg, #3f74f2, var(--crm-accent-strong));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px rgba(47, 111, 237, .3);
  transform: translateY(-1px);
}

.btn-accent:active {
  background: var(--crm-accent-strong) !important;
  border-color: transparent;
  transform: none;
}

.btn-accent:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(59, 110, 246, .3);
}

.btn-outline-secondary {
  border-color: #d8dee8;
  color: #3c4a66;
  background: #fff;
}

.btn-outline-secondary:hover {
  background: #f1f4f9;
  border-color: #c9d1e0;
  color: var(--crm-ink);
}

.btn-soft-danger {
  background: rgba(229, 62, 62, .08);
  border-color: transparent;
  color: #c03333;
}

.btn-soft-danger:hover {
  background: rgba(229, 62, 62, .16);
  color: #a52a2a;
}

/* ---------- Alerts ---------- */
.alert {
  border-radius: .85rem;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(23, 43, 77, .06);
  font-size: .9rem;
}

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-border-radius: .6rem;
  --bs-pagination-color: #3c4a66;
  --bs-pagination-hover-color: var(--crm-accent-strong);
  --bs-pagination-hover-bg: var(--crm-accent-soft);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(59, 110, 246, .15);
  --bs-pagination-active-bg: var(--crm-accent);
  --bs-pagination-active-border-color: var(--crm-accent);
  --bs-pagination-disabled-color: #b3bdd0;
  margin-bottom: 0;
}

.page-link {
  border: 0;
  font-weight: 600;
  font-size: .85rem;
  padding: .4rem .75rem;
}

/* ---------- Auth (login) ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(700px 420px at 12% -8%, rgba(77, 132, 255, .35), transparent 60%),
    radial-gradient(800px 500px at 105% 110%, rgba(43, 92, 232, .4), transparent 60%),
    linear-gradient(160deg, #101a2e 0%, #16233f 55%, #1d2c50 100%);
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(5, 10, 22, .5);
}

.auth-brand-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4d84ff, #2b5ce8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px rgba(43, 92, 232, .45);
}

/* ---------- Misc ---------- */
.text-muted-soft { color: var(--crm-ink-soft) !important; }

.link-plain {
  text-decoration: none;
  color: var(--crm-ink);
  font-weight: 600;
}

.link-plain:hover { color: var(--crm-accent-strong); }

.min-width-0 { min-width: 0; }

code {
  background: #f1f4fa;
  color: #4763a8;
  border-radius: .4rem;
  padding: .15em .45em;
  font-size: .82em;
}

/* ---------- Photo gallery (slider + lightbox) ---------- */
.photo-gallery .photo-carousel {
  border-radius: .8rem;
  overflow: hidden;
  background: #101827;
  box-shadow: var(--crm-shadow);
}

.photo-gallery .photo-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-gallery .photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.photo-gallery .photo-delete-form {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 6;
}

.photo-gallery .photo-counter {
  position: absolute;
  bottom: .65rem;
  right: .75rem;
  z-index: 6;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(10, 14, 24, .55);
  padding: .15rem .6rem;
  border-radius: 1rem;
  pointer-events: none;
}

.photo-gallery .photo-counter--lightbox {
  position: static;
  display: inline-block;
  margin-top: .5rem;
}

.photo-gallery .photo-thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.photo-gallery .photo-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: .5rem;
  overflow: hidden;
  background: none;
  line-height: 0;
  opacity: .7;
  transition: opacity .15s ease, border-color .15s ease;
}

.photo-gallery .photo-thumb:hover { opacity: 1; }

.photo-gallery .photo-thumb.active {
  border-color: var(--crm-accent);
  opacity: 1;
}

.photo-gallery .photo-thumb img {
  width: 86px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}

.photo-gallery .photo-thumb-strip--inline { row-gap: .5rem; }

.photo-gallery .photo-thumb-strip--inline .photo-thumb img {
  width: 96px;
  height: 72px;
  border-radius: .35rem;
}

/* Lightbox modal */
.photo-lightbox .modal-content { background: transparent; border: 0; }
.photo-lightbox .modal-body { padding: 0 !important; }

.photo-lightbox .photo-lightbox-close {
  position: absolute;
  top: -2.4rem;
  right: 0;
  z-index: 7;
}

.photo-lightbox .photo-lightbox-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.photo-lightbox .photo-lightbox-frame img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .4rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .55);
}

.photo-lightbox .carousel-control-prev,
.photo-lightbox .carousel-control-next {
  width: 3.5rem;
  opacity: .8;
}

/* ---------- Responsive sidebar ---------- */
@media (max-width: 991.98px) {
  .crm-sidebar { transform: translateX(-100%); box-shadow: none; }
  .crm-sidebar.sidebar-open { transform: translateX(0); box-shadow: 0 0 60px rgba(9, 17, 31, .45); }
  .crm-main { margin-left: 0; }
  .sidebar-toggle { display: inline-block; }
  .crm-content { padding: 1.25rem 1rem 2rem; }
  .crm-topbar { padding: .7rem 1rem; }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 20, 35, .5);
  z-index: 1034;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

body.sidebar-shown .sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* Arabic helper line shown above form inputs when enable_arabic_helpers is on */
.arabic-hint {
    display: block;
    font-size: 0.85em;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    margin-bottom: 0.1rem;
}
.form-check .arabic-hint {
    display: inline;
    margin-inline-start: 0.35rem;
}

/* ---------- Record colors & pinning (customers / properties) ---------- */
/* The whole row's text takes the picked color. */
.table tbody tr.row-colored td,
.table tbody tr.row-colored:hover td {
  color: var(--row-color, inherit);
}

/* Links inside a colored row follow the color too. */
.table tbody tr.row-colored td a {
  color: inherit;
}

/* Left edge stripe on the first cell, matching the picked color. */
.row-colored td:first-child {
  box-shadow: inset 3px 0 0 var(--row-color, transparent);
}

/* Pinned rows keep a soft tinted background so they stand out on top. */
.row-pinned {
  background: rgba(59, 110, 246, .04);
}
.row-pinned .pin-toggle { color: #b26a08; }
.row-pinned .pin-toggle:hover { color: #b26a08; }

.pin-toggle.pinned { color: #b26a08; }

/* ---------- Color picker component ---------- */
.color-picker .color-picker-row {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(23, 43, 77, .18);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: #526077;
  background: #fff;
  transition: transform .1s ease, box-shadow .1s ease;
}

.color-swatch:hover { transform: scale(1.08); }

.color-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--crm-accent), 0 0 0 1px rgba(23, 43, 77, .18);
}

.color-swatch-none { background: repeating-linear-gradient(45deg, #f1f3f9, #f1f3f9 4px, #e2e6f0 4px, #e2e6f0 8px); }

.color-swatch-custom {
  position: relative;
  overflow: hidden;
  background: var(--swatch, #fff);
}

.color-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.color-swatch-custom.is-selected {
  box-shadow: 0 0 0 2px var(--crm-accent), 0 0 0 1px rgba(23, 43, 77, .18);
}

/* ---------------------------------- */
/* AI help assistant                  */
/* ---------------------------------- */

.ai-assistant-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1050;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--crm-accent, #4f6df5);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 6px 18px rgba(23, 43, 77, .25);
  transition: transform .15s ease, opacity .15s ease;
}
.ai-assistant-toggle:hover { transform: scale(1.06); }
.ai-assistant-toggle.hidden { opacity: 0; pointer-events: none; }

.ai-assistant-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1060;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 560px;
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(23, 43, 77, .12);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(23, 43, 77, .28);
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.ai-assistant-panel.open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.ai-assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
  background: var(--crm-accent, #4f6df5);
  color: #fff;
  flex: 0 0 auto;
}
.ai-assistant-head strong { font-size: .95rem; }
.ai-assistant-close,
.ai-assistant-clear {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  padding: .2rem .35rem;
  border-radius: 6px;
  font-size: .95rem;
}
.ai-assistant-close:hover,
.ai-assistant-clear:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.ai-assistant-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: #f6f8fc;
}

.ai-assistant-msg { display: flex; }
.ai-assistant-msg.user { justify-content: flex-end; }
.ai-assistant-msg.assistant { justify-content: flex-start; }

.ai-bubble {
  max-width: 85%;
  padding: .55rem .75rem;
  border-radius: 12px;
  font-size: .875rem;
  line-height: 1.45;
  word-wrap: break-word;
}
.ai-assistant-msg.user .ai-bubble {
  background: var(--crm-accent, #4f6df5);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-assistant-msg.assistant .ai-bubble {
  background: #fff;
  border: 1px solid rgba(23, 43, 77, .1);
  border-bottom-left-radius: 4px;
}
.ai-assistant-msg.thinking .ai-bubble { color: #8a94a6; }
.ai-assistant-msg ul { margin: .25rem 0 .25rem 1.1rem; padding: 0; }

.ai-assistant-form {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  padding: .65rem .75rem;
  border-top: 1px solid rgba(23, 43, 77, .1);
  background: #fff;
}
.ai-assistant-input {
  flex: 1 1 auto;
  border: 1px solid rgba(23, 43, 77, .18);
  border-radius: 10px;
  padding: .45rem .7rem;
  font-size: .875rem;
  outline: none;
}
.ai-assistant-input:focus { border-color: var(--crm-accent, #4f6df5); }

.ai-assistant-send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--crm-accent, #4f6df5);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-assistant-send:disabled { opacity: .6; }

.ai-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ai-spin .7s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
  .ai-assistant-panel {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    height: calc(100vh - 24px - 64px);
  }
  .ai-assistant-toggle { right: 14px; bottom: 14px; }
}

.ai-bubble code {
  background: rgba(23, 43, 77, .08);
  border-radius: 4px;
  padding: 0 .25rem;
  font-size: .85em;
}

/* ------------------------------------------------------------------ */
/* Dropdown search (public/js/dropdown-search.js)                      */
/* ------------------------------------------------------------------ */

/* Search box injected at the top of entity dropdown menus. Sticky so it
   stays visible while scrolling long menus (client/firm/member pickers). */
.dd-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .5rem .75rem .25rem;
  background: var(--bs-dropdown-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Search input above native selects filters options via this class —
   deliberately not the `hidden` attribute, which location-cascade.js and
   roles-form.js manage themselves. */
option.dd-search-hide {
  display: none;
}

.dd-search-empty {
  padding: .25rem .75rem .5rem;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  text-align: center;
}

/* Custom dropdown for native selects with search */
.dd-select-dropdown .btn {
  background: #f7f8fc;
  border-color: transparent;
  font-size: .9rem;
  height: auto;
  padding: .5rem .75rem;
}

.dd-select-dropdown .btn:hover,
.dd-select-dropdown .btn:focus {
  background: #fff;
  border-color: #a9c0f8;
}

.dd-select-dropdown .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  min-width: 100%;
  padding: 0;
}

.dd-select-dropdown .dd-search {
  padding: .5rem !important;
}

.dd-select-dropdown .dd-search input {
  font-size: .875rem;
}

.dd-select-dropdown .dd-option {
  font-size: .9rem;
  padding: .5rem .75rem;
}

.dd-select-dropdown .dd-option:hover {
  background: #f7f8fc;
}

/* ---------------------------------------------------------------
   Global search (top bar)
--------------------------------------------------------------- */
.global-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 520px;
  margin-inline: auto;
}

.global-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: .8rem;
  transform: translateY(-50%);
  color: var(--crm-ink-soft);
  font-size: .95rem;
  pointer-events: none;
}

.global-search-input {
  width: 100%;
  padding: .45rem 2rem .45rem 2.4rem;
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  color: var(--crm-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.global-search-input:focus {
  outline: 0;
  border-color: var(--crm-accent);
  box-shadow: 0 0 0 3px var(--crm-accent-soft);
}

.global-search-results {
  position: absolute;
  top: calc(100% + .4rem);
  inset-inline: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow);
  padding: .35rem;
  z-index: 1050;
}

.gs-group-label {
  padding: .45rem .7rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--crm-ink-soft);
}

.gs-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .45rem .7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: start;
  text-decoration: none;
  color: var(--crm-ink);
}

.gs-item:hover,
.gs-item.active {
  background: var(--crm-accent-soft);
}

.gs-item-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--crm-accent);
}

.gs-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.gs-item-title {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-item-subtitle {
  font-size: .78rem;
  color: var(--crm-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-empty {
  padding: .8rem .7rem;
  font-size: .88rem;
  color: var(--crm-ink-soft);
  text-align: center;
}

@media (max-width: 575.98px) {
  .global-search {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Search-as-you-type autocomplete (list-level search fields)
   ------------------------------------------------------------------ */

.ss-wrapper {
  position: relative;
}

.ss-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: .8rem;
  transform: translateY(-50%);
  color: var(--crm-ink-soft);
  font-size: .95rem;
  pointer-events: none;
}

.ss-results {
  position: absolute;
  top: calc(100% + .4rem);
  inset-inline: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--crm-line);
  border-radius: var(--crm-radius);
  box-shadow: var(--crm-shadow);
  padding: .35rem;
  z-index: 1050;
}

.ss-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .45rem .7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: start;
  text-decoration: none;
  color: var(--crm-ink);
}

.ss-item:hover,
.ss-item.active {
  background: var(--crm-accent-soft);
}

.ss-item-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--crm-accent);
}

.ss-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ss-item-title {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-item-subtitle {
  font-size: .78rem;
  color: var(--crm-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-empty {
  padding: .8rem .7rem;
  font-size: .88rem;
  color: var(--crm-ink-soft);
  text-align: center;
}