*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; }

.wrapper { display: flex; width: 100%; height: 100vh; }

/* ===== SIDEBAR ===== */
#sidebar { min-width: 260px; max-width: 260px; width: 260px; background: #27AE60; color: #fff; height: 100vh; overflow-y: auto; overflow-x: hidden; transition: margin-left 0.3s ease; display: flex; flex-direction: column; }
#sidebar.active { margin-left: -260px; }
#sidebar .sidebar-inner { padding: 20px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.sidebar-logo { text-align: center; margin-bottom: 28px; }
.sidebar-logo .brand-text { font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: 1px; }
.sidebar-logo .brand-sub { font-size: 0.7rem; opacity: 0.7; color: #fff; }
.logo-icon { width: 48px; height: 48px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 1.4rem; color: #fff; overflow: hidden; padding: 7px; box-sizing: border-box; }
.logo-icon .logo-icon-img { width: 100%; height: 100%; object-fit: contain; }
#sidebar ul.components { padding: 0; list-style: none; margin: 0; }
#sidebar ul li { font-size: 15px; }
#sidebar ul li a { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,0.9); text-decoration: none; border-radius: 8px; margin-bottom: 2px; transition: background 0.2s; }
#sidebar ul li a:hover { background: rgba(255,255,255,0.2); color: #fff; text-decoration: none; }
#sidebar ul li.active > a { background: #fff; color: #146c43; font-weight: 700; }
#sidebar ul li.active > a .nav-left i { color: #146c43; }
.nav-left { display: flex; align-items: center; }
.sidebar-icon { width: 22px; margin-right: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.nav-count { font-size: 0.68rem; font-weight: 700; background: rgba(255,255,255,0.22); color: #fff; border-radius: 999px; padding: 1px 8px; }
li.active .nav-count { background: #e6f7ec; color: #146c43; }
.user-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2); }
.usre-information { padding: 10px 0; }
.profile-info h3 { font-size: 0.88rem; margin: 0; color: #fff; font-weight: 600; }
.profile-info span { font-size: 0.75rem; color: rgba(255,255,255,0.75); }
.dropdown-link { text-decoration: none !important; color: #fff !important; display: flex; align-items: center; padding: 8px 12px; border-radius: 8px; }
.dropdown-link:hover { background: rgba(255,255,255,0.15); }
.avatar-circle { width: 36px; height: 36px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #fff; margin-right: 10px; font-weight: 600; }
.logout-form { margin: 0; }
.logout-form .dropdown-item { width: 100%; text-align: left; background: none; border: none; }

/* ===== CONTENT ===== */
#content { flex: 1; height: 100vh; overflow-y: auto; overflow-x: hidden; background: #f8f9fa; display: flex; flex-direction: column; }
.content-navbar { background: #fff; border-bottom: 1px solid #e9ecef; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.content-navbar .btn { color: #555; border: none; background: none; font-size: 1.1rem; }
.right-wrapper { padding: 24px; flex: 1; }

/* ===== DASHBOARD ===== */
.dash-welcome-banner {
  background: linear-gradient(120deg, #1f8a53 0%, #27AE60 55%, #38c863 100%);
  border-radius: 16px; padding: 26px 30px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 10px 24px rgba(39,174,96,0.22); position: relative; overflow: hidden;
}
.dash-welcome-banner::after {
  content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,0.08); top: -90px; right: -40px;
}
.dash-welcome-banner h2 { color: #fff; font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; position: relative; z-index: 1; }
.dash-welcome-banner p { color: rgba(255,255,255,0.9); font-size: 0.88rem; margin: 0; position: relative; z-index: 1; }
.dash-welcome-icon {
  width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff;
  flex-shrink: 0; position: relative; z-index: 1;
}

.stock-box-container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.stock-box {
  flex: 1; min-width: 200px; background: #fff; border: 1px solid #e0f0e0; border-left: 4px solid transparent;
  border-radius: 12px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stock-box:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.09); }
.stock-box-leads { border-left-color: #27AE60; }
.stock-box-contacts { border-left-color: #6d4fd0; }
.stock-box-deals { border-left-color: #0c5460; }
.box-texts h5 { font-size: 0.78rem; color: #6b7a72; margin: 0 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.box-texts p { font-size: 2rem; font-weight: 800; color: #1e293b; margin: 0; line-height: 1; }
.box-icons { width: 46px; height: 46px; background: linear-gradient(135deg, #EBFAF1, #d3f3e1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #27AE60; flex-shrink: 0; }
.box-icons-purple { background: linear-gradient(135deg, #eee9fc, #ddd3f9); color: #6d4fd0; }
.box-icons-blue { background: linear-gradient(135deg, #e3f0ff, #cfe6fb); color: #0c5460; }

.dristribution, .top-requested-items { background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dristribution h5, .top-requested-items h5 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 12px; }
.dristribution h5::before, .top-requested-items h5::before {
  content: ''; width: 6px; height: 18px; border-radius: 3px; background: #27AE60; display: inline-block;
}

.dash-panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
/* Fixed width so the chip doesn't reflow as its label changes between
   "All Follow-ups" / "General Follow-up" / "Project Follow-up". */
#followupTypeFilterBtn { width: 150px; justify-content: space-between; }
#followupTypeFilterMenu { width: 150px; min-width: 150px; }
.followup-count-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.followup-count-chip { flex: 1; min-width: 150px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; }
.followup-count-chip strong { font-size: 0.95rem; }
.followup-count-general { background: #eef1ef; color: #56645d; }
.followup-count-project { background: #e3f0ff; color: #0c5460; }

.dash-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid #f0f0f0; border-radius: 8px; transition: background 0.12s ease; }
.dash-list-row:hover { background: #f8fffb; }
.dash-list-row:last-child { border-bottom: none; }
.dash-list-date { font-size: 0.72rem; color: #999; font-weight: 600; white-space: nowrap; }
.dash-empty-list { text-align: center; color: #aaa; font-size: 0.85rem; padding: 20px 0; }

.cell-contact { display: flex; align-items: center; gap: 10px; }
.contact-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: #fff; flex-shrink: 0; overflow: hidden; }
.contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-name { font-weight: 600; color: #1e293b; font-size: 0.86rem; }
.contact-sub { font-size: 0.75rem; color: #888; }

.followup-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.followup-dot-today { background: #dc3545; }
.followup-dot-tomorrow { background: #f57c00; }
.followup-dot-later { background: #2563a8; }
.followup-row { display: flex; gap: 10px; padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid #f0f0f0; border-radius: 8px; transition: background 0.12s ease; }
.followup-row:hover { background: #f8fffb; }
.followup-row:last-child { border-bottom: none; }
.followup-when { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.followup-when.is-today { color: #dc3545; }
.followup-when.is-tomorrow { color: #f57c00; }
.followup-when.is-later { color: #2563a8; }
.followup-lead-name { font-weight: 700; color: #1e293b; font-size: 0.86rem; }
.followup-company { font-size: 0.78rem; color: #888; margin-top: 1px; }
.followup-meta { font-size: 0.78rem; color: #555; margin-top: 3px; }
.followup-meta strong { color: #1e293b; font-weight: 600; }
.followup-activity { font-size: 0.8rem; color: #666; margin-top: 2px; }
.followup-list-scroll { max-height: 420px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }

.recent-leads-scroll { max-height: 320px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }

/* Upcoming Follow-ups card stretches to match the left column's total height
   (Recent Leads + Leads by Status, via the row's default flex stretch), with
   only its list scrolling internally instead of the card growing taller. */
.dash-followups-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dash-followups-card .followup-list-scroll { flex: 1; min-height: 0; max-height: none; }

/* ===== LIST PAGE HEADER ===== */
.item-list-header { margin-bottom: 16px; }
.item-container { display: flex; align-items: center; }
.item-logo { width: 48px; height: 48px; background: #EBFAF1; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 1.4rem; color: #27AE60; flex-shrink: 0; }
.item-text h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: #1e293b; }
.item-text p { font-size: 0.82rem; color: #6c757d; margin: 0; }
.additem-btn { float: right; }
.add-item-btn { background: linear-gradient(90deg, #38c863 0%, #00b894 100%); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.add-item-btn:hover { background: linear-gradient(90deg, #30b157 0%, #00a382 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,184,148,0.4); color: #fff; }

/* ===== SEARCH ===== */
.search-export-section { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.search-input-group { max-width: 280px; }
.search-icon { background: #fff; border-right: none; color: #aaa; }
.search-input { border-left: none; font-size: 0.87rem; }
.search-input:focus { box-shadow: none; border-color: #ced4da; }

/* ===== LIST TOOLBAR (HubSpot-style tabs/search/filter/sort row) ===== */
.list-toolbar-tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid #e5e5e5; margin-bottom: 14px; }
.list-toolbar-tabs .tab-item {
  padding: 10px 2px; font-size: 0.85rem; font-weight: 600; color: #6c757d; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none;
}
.list-toolbar-tabs .tab-item:hover { color: #1e293b; }
.list-toolbar-tabs .tab-item.active { color: #1e293b; border-bottom-color: #27AE60; }

.list-toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-search-box { position: relative; width: 240px; }
.list-search-box input {
  width: 100%; border: 1px solid #dde3e0; border-radius: 20px; padding: 8px 14px 8px 32px;
  font-size: 0.82rem; color: #1e293b; background: #fff; font-family: inherit;
}
.list-search-box input:focus { outline: none; border-color: #27AE60; box-shadow: none; }
.list-search-box i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #9aa5a0; font-size: 0.78rem; }

.pill-btn {
  background: #fff; border: 1px solid #ddd; border-radius: 20px; padding: 6px 14px; font-size: 0.82rem;
  font-weight: 600; color: #1e293b; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.pill-btn:hover { background: #f5f5f5; color: #1e293b; }
.pill-btn:focus { outline: none; box-shadow: 0 0 0 0.15rem rgba(39,174,96,0.15); }
.pill-btn.active-pill { background: #eaf6ee; border-color: #27AE60; color: #1f8a4d; }

/* Bootstrap dropdown menu (Sort by, sidebar user menu, etc.) themed to match */
.dropdown-menu { border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.12); padding: 6px; font-size: 0.85rem; }
.dropdown-item { border-radius: 6px; padding: 7px 12px; font-size: 0.85rem; color: #1e293b; }
.dropdown-item:hover, .dropdown-item:focus { background: #EBFAF1; color: #146c43; }
.dropdown-item.active, .dropdown-item:active { background: #27AE60; color: #fff; }

.quick-filter-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* Custom filter dropdown (replaces native <select> — its open option list can't
   be styled in any browser, same issue as the Flatpickr month picker earlier). */
.filter-dropdown { position: relative; display: inline-block; }
.quick-filter-btn {
  border: 1px solid #ddd; background-color: #fff; font-size: 0.8rem; font-weight: 600; color: #1e293b;
  cursor: pointer; padding: 6px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 8px;
}
.quick-filter-btn i { font-size: 0.65rem; color: #888; }
.quick-filter-btn:hover { background-color: #f5f5f5; }
.quick-filter-btn:focus { outline: none; box-shadow: 0 0 0 0.15rem rgba(39,174,96,0.15); }
.filter-dropdown.has-value .quick-filter-btn { border-color: #27AE60; background-color: #eaf6ee; color: #1f8a4d; }
.filter-dropdown.has-value .quick-filter-btn i { color: #1f8a4d; }

.filter-dropdown-panel {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 20;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  padding: 6px; min-width: 170px; max-height: 240px; overflow-y: auto;
}
.filter-dropdown-panel.show { display: block; }
.filter-dropdown-item {
  padding: 7px 12px; font-size: 0.85rem; color: #1e293b; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.filter-dropdown-item:hover { background: #EBFAF1; color: #146c43; }
.filter-dropdown-item.active { background: #27AE60; color: #fff; font-weight: 600; }

.clear-filters-link { font-size: 0.8rem; font-weight: 600; color: #888; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.clear-filters-link:hover { color: #146c43; }

/* ===== TABLES ===== */
.item-date-table { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 16px; }
.custom-table-wrapper { overflow-x: auto; }
.inventory-table { margin-bottom: 0; --bs-table-border-color: #e0f0e0; }
.inventory-table-head { background-color: #EBFAF1; color: #1E293B; font-weight: 500; }
.inventory-table-head th { padding: 12px 10px; border-bottom: none; font-size: 0.83rem; white-space: nowrap; }
.inventory-table tbody tr { font-size: 0.85rem; }
.inventory-table tbody tr:hover { background: #f8fff9; }
.inventory-table td { padding: 10px; vertical-align: middle; }

.badge-status { font-size: 0.75rem; padding: 4px 12px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.badge-new         { background: #e0f2fe; color: #0369a1; }
.badge-qualified   { background: #e3f0ff; color: #0c5460; }
.badge-proposal    { background: #ede9fe; color: #6d28d9; }
.badge-negotiation { background: #fff3cd; color: #856404; }
.badge-won         { background: #d4edda; color: #155724; }
.badge-lost        { background: #f8d7da; color: #721c24; }

.lead-name-link { color: #146c43; font-weight: 600; text-decoration: none; }
.lead-name-link:hover { text-decoration: underline; color: #0f4d33; }

/* ===== ROW ACTIONS (ellipsis button + dropdown menu) ===== */
.sl-action-cell { width: 40px; text-align: center; }
.sl-action-wrapper { position: relative; display: inline-block; }
.sl-action-btn {
  border: none; background: none; color: #888; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem;
}
.sl-action-btn:hover { background: #EBFAF1; color: #146c43; }

/* Positioned via inline top/left set in JS from the button's viewport rect
   (fixed, not relative to the row) so it's never clipped by the table
   wrapper's scroll area, and flips above the button when there isn't
   room below (see .sl-action-menu-up). */
.sl-action-menu {
  display: none; position: fixed; z-index: 3000;
  list-style: none; margin: 0; padding: 4px; min-width: 90px;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.sl-action-menu.show { display: block; }
.sl-action-menu .dropdown-item {
  display: flex; align-items: center; gap: 8px;
  border-radius: 5px; padding: 5px 8px; font-size: 0.78rem; color: #1e293b; background: none; border: none;
  width: 100%; text-align: left; cursor: pointer; text-decoration: none;
}
.sl-action-menu .dropdown-item:hover { background: #EBFAF1; color: #146c43; }
.sl-action-menu .dropdown-item i { color: #27AE60; width: 12px; text-align: center; flex-shrink: 0; font-size: 0.75rem; }
.sl-action-menu .dropdown-item.text-danger i { color: #dc3545; }
.sl-action-menu .dropdown-item.text-danger:hover { background: #fde8e8; color: #dc3545; }

.dash-empty-list-row td { text-align: center; color: #aaa; font-size: 0.85rem; padding: 24px 0; }

/* ===== ADD-LEAD SLIDE-IN PANEL ===== */
.lead-offcanvas { width: 460px; max-width: 100vw; }
.lead-offcanvas .offcanvas-header { border-bottom: 1px solid #eee; padding: 16px 20px; }
.lead-offcanvas .offcanvas-title { font-weight: 700; font-size: 1.05rem; color: #1e293b; }
.lead-offcanvas .offcanvas-body { padding: 18px 20px; }
.lead-offcanvas .mb-3 { margin-bottom: 0.85rem !important; }

/* ===== FORMS (compact, matches the rest of the app) ===== */
.form-label { font-size: 0.8rem; font-weight: 600; color: #444; margin-bottom: 4px; }
.form-control, .form-select { font-size: 0.85rem; border-radius: 8px; padding: 7px 12px; }
.form-control:focus, .form-select:focus { border-color: #27AE60; box-shadow: 0 0 0 0.15rem rgba(39,174,96,0.2); }
.required-mark { color: #dc3545; }
.field-hint-text { font-size: 0.72rem; color: #888; margin-top: 4px; line-height: 1.3; }
.field-error { color: #dc3545; font-size: 0.72rem; margin-top: 3px; min-height: 14px; }
.invalid-field { border-color: #dc3545 !important; }
.lead-step-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7a72; margin: 14px 0 8px; }

.custom-btn-save {
  background: linear-gradient(90deg, #38c863 0%, #00b894 100%); color: #fff; border: none;
  border-radius: 50px; padding: 8px 22px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.custom-btn-save:hover { background: linear-gradient(90deg, #30b157 0%, #00a382 100%); transform: translateY(-1px); }
.custom-btn-cancel {
  background: #fff; border: 1.5px solid #ddd; color: #666; border-radius: 50px;
  padding: 8px 22px; font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: none;
}
.custom-btn-cancel:hover { background: #f5f5f5; color: #444; }

/* Pins the Save/Cancel row to the bottom of an offcanvas add/edit panel
   while the fields above scroll independently — same split as the
   Company page's drawer (.co-drawer-body / .co-drawer-footer). The form
   becomes the flex column filling the offcanvas below its header;
   .offcanvas-body (Bootstrap's own scrolling class) grows to fill the
   rest, and the footer stays put. */
.offcanvas-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.offcanvas-form-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #eee; flex-shrink: 0; }

/* ===== TABLE PAGINATION FOOTER — shared by Contact, User Management,
   Company, and Lead. Sits inside .co-card, right below .co-table-scroll,
   as the card's own footer bar (border-top separates it from the table
   since both share the card's white background). Rows-per-page sits on
   the left, prev/numbers/next on the right; both wrap onto their own
   line on narrow viewports instead of overlapping. ===== */
.table-pagination-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 14px; margin-top: 14px; border-top: 1px solid #eef2ef;
}
.rows-per-page { display: flex; align-items: center; gap: 8px; }
.rows-per-page-label { font-size: 0.78rem; color: #6b7a72; font-weight: 500; }
.rows-per-page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px;
  background: #f6f9f7; border: 1px solid #dde3e0; border-radius: 7px; padding: 4px 8px;
  font-size: 0.75rem; font-weight: 700; color: #1e293b; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rows-per-page-btn:hover { background: #eef4f1; border-color: #27AE60; }
.rows-per-page-btn:focus { outline: none; box-shadow: 0 0 0 0.15rem rgba(39, 174, 96, 0.15); }
/* Bootstrap's default dropdown-menu min-width (10rem) dwarfs a 2-digit
   trigger button — shrink the popup to match instead of the usual
   text-menu width used by Sort by / the filter chips. */
.rows-per-page .dropdown-menu {
  min-width: 0; width: 46px; padding: 3px;
}
.rows-per-page .dropdown-menu .dropdown-item {
  padding: 4px 0; text-align: center; border-radius: 5px; font-size: 0.75rem;
}

.pagination-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-nav-btn {
  border: 1px solid #dde3e0; background: #fff; color: #6b7a72; width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.68rem;
}
.page-nav-btn:hover:not(:disabled) { background: #f3f6f4; color: #1e293b; }
.page-nav-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.page-number-list { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-number-btn {
  border: 1px solid transparent; background: none; width: 22px; height: 22px; border-radius: 5px; font-size: 0.72rem;
  font-weight: 600; color: #6b7a72; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.page-number-btn:hover { background: #f3f6f4; color: #1e293b; }
.page-number-btn.active { background: #27AE60; color: #fff; }

/* A row hidden purely by pagination (not by search/filter) — kept separate
   from filter code's own visibility mechanism (style.display / [hidden])
   so a page-hidden row is still counted as a "match" by things like CSV
   export, which only cares about filter results, not the current page. */
.page-hidden { display: none; }

@media (max-width: 480px) {
  .table-pagination-row { flex-direction: column; align-items: stretch; }
  .rows-per-page { justify-content: space-between; }
  .pagination-controls { justify-content: center; }
}

/* ===== READ-ONLY LEAD DETAIL CARD (Edit page) ===== */
.lead-info-card { background: #f8fffb; border: 1px solid #dfece4; border-radius: 12px; padding: 16px 18px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.detail-grid .span-2 { grid-column: span 2; }
.detail-item .k { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #9aa5a0; margin-bottom: 3px; }
.detail-item .k i { color: #27AE60; margin-right: 4px; width: 12px; text-align: center; }
.detail-item .v { font-size: 0.92rem; color: #1e293b; font-weight: 600; }

/* ===== LEAD RECORD PAGE (3-panel view: summary | activities | related) ===== */
.lead-record-summary { text-align: center; }
.lead-record-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #EBFAF1; color: #27AE60; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
}
.lead-record-name { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.lead-about-title { text-align: left; margin: 18px 0 10px; padding-top: 14px; border-top: 1px dashed #dfece4; }
.about-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; text-align: left; font-size: 0.82rem; }
.about-row-block { flex-direction: column; gap: 2px; }
.about-k { color: #6b7a72; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.about-k i { color: #27AE60; width: 12px; text-align: center; }
.about-v { color: #1e293b; font-weight: 600; text-align: right; }
.about-row-block .about-v { text-align: left; font-weight: 500; color: #555; }

.activity-tabs { display: flex; gap: 16px; border-bottom: 1px solid #eee; margin-bottom: 12px; flex-wrap: wrap; }
.activity-tab {
  font-size: 0.82rem; font-weight: 600; color: #6c757d; padding: 8px 2px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none;
}
.activity-tab:hover { color: #1e293b; }
.activity-tab.active { color: #1e293b; border-bottom-color: #27AE60; }

.related-card-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7a72; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.related-card-title i { color: #27AE60; }
.related-name { font-size: 0.95rem; font-weight: 700; color: #1e293b; margin-bottom: 2px; }
.related-name-link { display: inline-block; text-decoration: none; }
.related-name-link:hover { color: #27AE60; text-decoration: underline; }
.related-sub { font-size: 0.8rem; color: #888; margin-bottom: 8px; }
.related-row { font-size: 0.82rem; color: #555; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.related-row i { color: #27AE60; width: 14px; text-align: center; }

/* ===== ACTIVITY HISTORY / LOG FOLLOW-UP ===== */
.lead-remarks-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #dfece4; }
.lead-panel-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lead-panel-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7a72; }
.lead-log-followup-btn {
  border: 1.5px solid #27AE60; background: #fff; color: #27AE60; font-size: 0.72rem; font-weight: 700;
  padding: 5px 12px; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.15s ease, color 0.15s ease;
}
.lead-log-followup-btn:hover { background: #27AE60; color: #fff; }
.lead-history-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #dfece4; }
.lead-history-item:last-child { border-bottom: none; }
.lead-history-dot { width: 9px; height: 9px; border-radius: 50%; background: #27AE60; margin-top: 6px; flex-shrink: 0; }
.lead-history-date { font-size: 0.72rem; font-weight: 700; color: #1e293b; }
.lead-history-type { font-size: 0.78rem; font-weight: 600; color: #146c43; margin-left: 6px; }
.lead-history-note { font-size: 0.8rem; color: #666; margin-top: 3px; }
.lead-history-followup { font-size: 0.72rem; color: #f57c00; margin-top: 3px; }
.lead-history-editable { background: #f8fffb; border: 1px dashed #bfe8d1; border-radius: 8px; padding: 10px; margin: -2px 0 10px; }
.lead-history-scroll { max-height: 300px; overflow-y: auto; padding-right: 6px; }
.lead-empty-history { font-size: 0.8rem; color: #aaa; padding: 6px 0; }
.lead-history-edit-btn {
  border: none; background: transparent; color: #6b7a72; font-size: 0.8rem; cursor: pointer;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; align-self: flex-start;
  transition: background 0.15s ease, color 0.15s ease;
}
.lead-history-edit-btn:hover { background: #eaf7ef; color: #27AE60; }
.lead-history-locked { color: #c3ccc7; font-size: 0.75rem; align-self: flex-start; padding-top: 4px; flex-shrink: 0; }

/* ===== DATE PICKER (Flatpickr, themed to match the brand green) ===== */
.date-field { position: relative; }
.date-field .field-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #27AE60; font-size: 0.8rem; pointer-events: none; z-index: 2; }
.date-field.date-field-followup .field-icon { color: #f57c00; }
.date-field input.form-control, .date-field input.co-input { padding-left: 34px; background: #f8fffb; border-color: #d7ecdf; cursor: pointer; }
.date-field.date-field-followup input.form-control, .date-field.date-field-followup input.co-input { background: #fff9f0; border-color: #f3ddb8; }
.date-field input.form-control:focus, .date-field input.co-input:focus { background: #fff; }

.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: #27AE60; border-color: #27AE60;
}
.flatpickr-day.today { border-color: #27AE60; }
.flatpickr-day.today:hover { background: #27AE60; border-color: #27AE60; color: #fff; }
.flatpickr-day:hover { background: #EBFAF1; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .cur-month, .flatpickr-current-month input.cur-year { color: #1e293b; font-weight: 600; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #27AE60; }

/* Custom month chooser (replaces Flatpickr's native <select> dropdown).
   Panel is a child of calendarContainer (not the month bar itself, which
   Flatpickr redraws on navigation), so it's positioned from the top of the
   whole popup rather than top:100% of the month bar. */
.flatpickr-current-month .cur-month { padding-right: 4px; cursor: pointer; }
.month-chooser-panel {
  display: none; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  z-index: 20; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14); padding: 6px;
  max-height: 220px; overflow-y: auto; width: 150px;
}
.month-chooser-panel.show { display: block; }
.month-chooser-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 10px; font-size: 0.85rem; color: #1e293b; border-radius: 6px; cursor: pointer;
}
.month-chooser-item:hover { background: #EBFAF1; color: #146c43; }
.month-chooser-item.active { background: #27AE60; color: #fff; font-weight: 600; }

@media (max-width: 768px) {
  #sidebar { margin-left: -260px; position: fixed; z-index: 999; }
  #sidebar.active { margin-left: 0; }
  #content { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .span-2 { grid-column: span 1; }
}