/* ========================= */
/* GLOBAL Desktop*//* DARK MODE STYLES */
/* ========================= */

body.dark-mode {
   color: #2d2d2d;
}

body.dark-mode .topbar {
  background-color: #555;
}

body.dark-mode .sidebar {
  background-color: #2a2a2a;
 min-height: calc(100vh - 70px);
}


body.dark-mode .sidebar li {
  color: #ccc;
}

body.dark-mode .sidebar li.active {
  background-color: #555;
  color: white;
  outline-color: #ccc;
}

body.dark-mode .search-bar input {
  background: #333;
  color: #f6f6f6;
  border: 1px solid #555;
}

body.dark-mode .search-bar button {
  background: #555;
}

body.dark-mode .table-title,
body.dark-mode .table-title2,
body.dark-mode .table-title3 {
  background-color: #555;
  color: white;
}

body.dark-mode .panel,
body.dark-mode .table-box,
body.dark-mode .table-box2,
body.dark-mode .table-box3 {
  border-color: #555;
  background-color: #2a2a2a;
}

body.dark-mode .table-box button,
body.dark-mode .table-box2 button,
body.dark-mode .table-box3 button
{
  background-color: #444;
  border-color: #555;
  color: #f6f6f6;
}

body.dark-mode .panel.split .tab.active {
  background-color: #0e2f55;
  color: white;
}

body.dark-mode .panel.split .tab.inactive:hover {
  background-color: #444;
  color: #f6f6f6;
}
body.dark-mode .dropdown-menu {
  background-color: #2a2a2a; /* dark background */
  border: 1px solid #555;    /* darker border */
}

body.dark-mode .dropdown-menu a {
  color: #f6f6f6;            /* light text */
}

body.dark-mode .dropdown-menu a:hover {
  background-color: #555;    /* darker hover background */
  color: #fff;               /* hover text stays white */
}


/* Dark mode: Profile button */
body.dark-mode .dropdown-menu #openProfileBtn {
  all: unset;                 /* remove browser button defaults */
  display: block;
  width: 120px;
  padding: 10px;
  color: #f6f6f6;             /* text color in dark mode */ /* transparent to match links */
  border: none;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}

/* Dark mode: Hover effect */
body.dark-mode .dropdown-menu #openProfileBtn:hover {
  background-color: #888; /* or same as logout hover */
  color: white;
}

/* PROFILE MODAL — DARK MODE */

body.dark-mode .profile-modal {
  background: #2a2a2a;
  border-color: #555;
    padding-left: 20px;
  color: #fff;
}

body.dark-mode .profile-sidebar input[type="password"] {
  background: #333;
  color: #f6f6f6;
  border-color: #555;
}

body.dark-mode .profile-content h2,
body.dark-mode .profile-content h3,
body.dark-mode .profile-subtext,
body.dark-mode .profile-content label {
  color: #fff;
}

body.dark-mode .profile-content input,
body.dark-mode .profile-content select,
body.dark-mode .profile-content textarea {
  background: #333;
  color: #fff;
  border-color: #555;
}

body.dark-mode .profile-btn.secondary {
  background: #444;
  color: #f6f6f6;
}

body.dark-mode .profile-btn.secondary:hover {
  background: #555;
}

body.dark-mode .contacts-table thead th,
body.dark-mode .courtships-table thead th,
body.dark-mode .prospects-table thead th,
body.dark-mode .tasks-table thead th,
body.dark-mode .accounts-table thead th,
body.dark-mode .callreport-table thead th {
  background: #2c2c2c;     /* Dark background */
  color: #f6f6f6;          /* Light text */
  border-bottom: 1px solid #555; /* Dark border */
}

/* CONTACT PAGE - DARK MODE */
body.dark-mode .contacts-page,
body.dark-mode .courtships-page,
body.dark-mode .prospects-page,
body.dark-mode .personalnotes-page,
body.dark-mode .tasks-page,
body.dark-mode .accounts-page,
body.dark-mode .callreport-page{
  background: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .contacts-sidebar,
body.dark-mode .courting-sidebar,
body.dark-mode .personalnotes-sidebar,
body.dark-mode .prospects-sidebar,
body.dark-mode .tasks-sidebar,
body.dark-mode .accounts-sidebar,
body.dark-mode .callreport-sidebar{
  background: #2a2a2a;
  border-right: 1px solid #555;
}

body.dark-mode .contacts-sidebar li,
body.dark-mode .courting-sidebar li,
body.dark-mode .prospects-sidebar li,
body.dark-mode .personalnotes-sidebar li,
body.dark-mode .tasks-sidebar li,
body.dark-mode .accounts-sidebar li,
body.dark-mode .callreport-sidebar {
  color: #ccc;
}

body.dark-mode .contacts-sidebar li:hover,
body.dark-mode .courting-sidebar li:hover, 
body.dark-mode .prospects-sidebar li:hover,
body.dark-mode .personalnotes-sidebar li:hover,
body.dark-mode .tasks-sidebar li:active,
body.dark-mode .accounts-sidebar li:hover,
body.dark-mode .callreport-sidebar li:hover {
  background: #555;
}

body.dark-mode .contacts-sidebar li.active,
body.dark-mode .courting-sidebar li.active, 
body.dark-mode .personalnotes-sidebar li.active,
body.dark-mode .prospects-sidebar li.active,
body.dark-mode .tasks-sidebar li.active,
body.dark-mode .accounts-sidebar li.active,
body.dark-mode .callreport-sidebar li.active {
  background: #103057;
  border-left: 4px solid #2b6cff;
  color: #fff;
}

body.dark-mode .contacts-main,
body.dark-mode .home-main,
body.dark-mode .prospects-main,
body.dark-mode .personalnotes-main,
body.dark-mode .courtships-main,
body.dark-mode .tasks-main,
body.dark-mode .accounts-main,
body.dark-mode .callreport-main {
  background: #1e1e1e;
}

body.dark-mode .btn.primary {
  background: #888;
  color: #fff;
}

body.dark-mode .btn.secondary {
  background: #444;
  color: #e0e0e0;
}

body.dark-mode .search-box input {
  background: #333;
  color: #f6f6f6;
  border: 1px solid #555;
}

body.dark-mode .btn.search {
  background: #666 ;
  color: #fff ;
}

body.dark-mode .contacts-table,
body.dark-mode .courtships-table,
body.dark-mode .prospects-table,
body.dark-mode .tasks-table,
body.dark-mode .accounts-table,
body.dark-mode .callreport-table {
  background: #2a2a2a;
  border: 1px solid #555;
   width: 100%;
  border-collapse: collapse;
}

body.dark-mode thead {
  background: #2a2a2a;
  color: #f6f6f6;
}

body.dark-mode th, 
body.dark-mode td {
  border-bottom: 1px solid #555;
  color: #e0e0e0;
}

body.dark-mode .contacts-table tr {
  border-bottom: 1px solid #555;
}

body.dark-mode .contacts-table td::before {
  color: #aaa;
}

/* ADD CONTACT MODAL — DARK MODE */

body.dark-mode #addContactOverlay {
  background: rgba(0, 0, 0, 0.6);
}

body.dark-mode #addContactOverlay .profile-modal {
  background: #2a2a2a;
  border: 1px solid #555;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

/* Header & Footer */
body.dark-mode #addContactOverlay .modal-header,
body.dark-mode #addContactOverlay .modal-footer {
  background: #2a2a2a;
  border-color: #555;
  color: #f6f6f6;
}

/* Section headers */
body.dark-mode #addContactOverlay .profile-section h3 {
  color: #fff;
}

/* Labels */
body.dark-mode #addContactOverlay label {
  color: #ccc;
}

/* Inputs */
body.dark-mode #addContactOverlay input,
body.dark-mode #addContactOverlay select,
body.dark-mode #addContactOverlay textarea {
  background: #333;
  color: #f6f6f6;
  border-color: #555;
}

/* Multi-option buttons */
body.dark-mode #addContactOverlay .multi-options .option {
  background: #444;
  border-color: #555;
  color: #ccc;
}

body.dark-mode #addContactOverlay .multi-options .option.selected {
  background: #888;
  border-color: #888;
  color: #fff;
}

/* Footer buttons */
body.dark-mode #addContactOverlay .profile-btn.close {
  background: #444;
  color: #f6f6f6;
}

body.dark-mode #addContactOverlay .profile-btn.close:hover {
  background: #555;
}

/* Close button */
body.dark-mode #addContactOverlay .profile-close-right {
  background: rgba(255,255,255,0.15);
}

body.dark-mode #addContactOverlay .profile-close-right:hover {
  background: rgba(255,255,255,0.25);
}

body.dark-mode #create-account-btn,
body.dark-mode #create-prospect-btn,
body.dark-mode #create-wkentry-btn,
body.dark-mode #create-tasks-btn,
body.dark-mode #create-task-btn,
body.dark-mode #create-call-report-btn,
body.dark-mode #create-entries-btn,
body.dark-mode #create-followup-btn,
body.dark-mode #assign-Followup-btn,
body.dark-mode #transfer-prospect-btn,
body.dark-mode #transfer-tasks-btn,
body.dark-mode #transfer-accounts-btn,
body.dark-mode #importprospectsBtn,
body.dark-mode #importaccountsBtn,
body.dark-mode #exportcallreportsBtn,
body.dark-mode #create-contact-btn {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #888;
  color: #ffffff;
  margin-right: 2px;
}

body.dark-mode .table-footer2,
body.dark-mode .table-footer1,
body.dark-mode .table-footer3 {
  padding: 0; /* remove extra padding */
  background-color: #f9f9f9;
  border-top: 1px solid #ccc;
}

body.dark-mode #add-task-btn,
body.dark-mode #viewTodoBtn,
body.dark-mode #add-contacts-btn,
body.dark-mode #add-callreports-btn{
  width: 100%;
  padding: 12px 0; /* vertical padding only */
  font-size: 14px;
  font-weight: 600;
  border-radius: 0; /* button spans full footer width */
  border: none;
  cursor: pointer;
  background: #888;
  color: #ffffff;
}

body.dark-mode #viewallprospects {
  width: 100%;
  padding: 12px 0; /* vertical padding only */
  font-size: 14px;
  font-weight: 600;
  border-radius: 0; /* button spans full footer width */
  border: none;
  cursor: pointer;
  background: #888;
  color: #ffffff;
}

body.dark-mode #viewallprospects2 {
   display: block;          /* makes width:100% work */
  width: 100%;
  padding: 12px 0;         /* vertical padding only */
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;        /* full footer width */
  border: none;
  cursor: pointer;
  background: #888;
  color: #ffffff;
  text-align: center;      /* center text like a button */
  text-decoration: none;  /* remove underline */
}

body.dark-mode #add-task-btn, 
body.dark-mode #viewallprospects2,
body.dark-mode #add-callreports-btn,
body.dark-mode #viewTodoBtn,
body.dark-mode #add-contacts-btn,
body.dark-mode #add-contacts-btn{
   display: block;          /* makes width:100% work */
  width: 100%;
  padding: 12px 0;         /* vertical padding only */
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;        /* full footer width */
  border: none;
  cursor: pointer;
  background: #888;
  color: #ffffff;
  text-align: center;      /* center text like a button */
  text-decoration: none;  /* remove underline */
}

body.dark-mode .button-container #saveContactBtn
{
 all: unset;                 /* removes default button styles */
  display: block;
  width: 60px;
  padding: 10px ;
  color: #fff;
  background: #555;           /* transparent so it matches a tags */
  border: none;
    border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
body.dark-mode .button-container #cancelContactBtn
{
 all: unset;                 /* removes default button styles */
  display: block;
  width: 80px;
  padding: 10px ;
  color: #fff;
  background: #888;           /* transparent so it matches a tags */
  border: none;
    border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}

/* Darkmode Individual dropdown items */
body.dark-mode .dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  color:#fff;
}

body.dark-mode .dropdown-item:hover {
  background-color: #888;
}

/* Container for filter button and dropdown */
body.dark-mode .filter-container {
  position: relative;
  display: inline-block;
}

/* Dropdown menu */
body.dark-mode .dropdown {
  display: none; /* hidden by default */
  position: absolute;
  background-color: #2d2d2d;
  border: 1px solid #ccc;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Individual dropdown items */
body.dark-mode .dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
}

body.dark-mode .dropdown-item:hover {
  background-color: #888;
}

/* Dark Mode Search Results Styling */
body.dark-mode .search-results {
  margin-top: 24px;
  padding: 20px;
  background: #222;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
}

/* Title */
body.dark-mode .search-results h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Query text */
body.dark-mode .search-results p {
  margin: 0 0 16px;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Table styling */
body.dark-mode  .search-results table {
  width: 100%;
  border-collapse: collapse;
}

/* Header */
body.dark-mode  .search-results th {
  background: #103057;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Cells */
body.dark-mode .search-results th,
body.dark-mode .search-results td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* Row hover */
body.dark-mode .search-results tbody tr:hover {
  background: #888;
}

/* View link button */
body.dark-mode .search-results .view-link {
  display: inline-block;
  padding: 6px 12px;
  background: #2563eb;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
}

body.dark-mode .search-results .view-link:hover {
  background: #1d4ed8;
}

body.dark-mode #taskForm .btn-save {
  background: #555;
  color: #fff;
  border: none;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s all;
  margin-top: 1rem; /* space above the button */
}

body.dark-mode #taskForm .btn-save:hover {
  background: #888;
}

/* ============================= */
/* Dark Mode – Tasks Table Filters */
/* ============================= */

body.dark-mode .tasks-table-filters {
  background: #1e1e1e;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  border: 1px solid #2a2a2a;
}

/* Labels */
body.dark-mode .tasks-table-filters .filter-group label {
  color: #e0e0e0;
}

/* Inputs & Selects */
body.dark-mode .tasks-table-filters input,
body.dark-mode .tasks-table-filters select,
body.dark-mode .tasks-table-filters input[list] {
  background: #2a2a2a;
  color: #f1f1f1;
  border: 1px solid #3a3a3a;
}

/* Placeholder text */
body.dark-mode .tasks-table-filters input::placeholder {
  color: #a0a0a0;
}

/* Focus state */
body.dark-mode .tasks-table-filters input:focus,
body.dark-mode .tasks-table-filters select:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 6px rgba(74, 144, 226, 0.5);
  outline: none;
}

/* Datalist dropdown background (browser dependent support) */
body.dark-mode option {
  background: #2a2a2a;
  color: #f1f1f1;
}
body.dark-mode .filter-container {
  display: flex;
  gap: 8px;
}

/* Filter button */
body.dark-mode #filterBtn {
  background: #2563eb;        /* keep primary blue */
  color: #ffffff;
}

body.dark-mode #filterBtn:hover {
  background: #1d4ed8;
}

/* Clear filter button */
body.dark-mode #clearFilterBtn {
  background: #dc2626;
  color: #ffffff;
}

body.dark-mode #clearFilterBtn:hover {
  background: #991b1b;
}

/* ================= DARK MODE FOR CONTACTS SUMMARY ================= */
body.dark-mode #contactsSummarySection {
  border: 1px solid #444;           /* darker border */
  background-color: #1e1e1e;        /* dark background for section */
  color: #f0f0f0;                   /* light text for readability */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Section title (H2) */
body.dark-mode  #accountsSummarySection .summary-title,
body.dark-mode #callreportSummarySection .summary-title,
body.dark-mode #taskSummarySection .summary-title,
body.dark-mode #tasksSummarySection .summary-title,
body.dark-mode #accountsSummarySection2 .summary-title,
body.dark-mode  #prospectsSummarySection .summary-title,
body.dark-mode #contactsSummarySection .summary-title {
  background-color: #888;       /* dark blue instead of original */
  color: #ffffff;                   /* light text */
}

/* Summary boxes */
body.dark-mode  #accountsSummarySection .summary-box,
body.dark-mode #callreportSummarySection .summary-box,
body.dark-mode #taskSummarySection .summary-box,
body.dark-mode #tasksSummarySection .summary-box,
body.dark-mode #accountsSummarySection2 .summary-box,
body.dark-mode #prospectsSummarySection .summary-box, 
body.dark-mode #contactsSummarySection .summary-box{
  background-color: #2a2a2a;        /* slightly lighter than section bg */
  border-left: 1px solid #444;
  border-top: 1px solid #555;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Panel headers (H3) inside boxes */
body.dark-mode  #accountsSummarySection .panel-header,
body.dark-mode #callreportSummarySection .panel-header,
body.dark-mode #taskSummarySection .panel-header,
body.dark-mode #tasksSummarySection .panel-header,
body.dark-mode #prospectsSummarySection .panel-header,
body.dark-mode #accountsSummarySection2 .panel-header,
body.dark-mode #contactsSummarySection .panel-header{
  background-color: #2a2a2a;        /* dark header bg */
  color: #f0f0f0;                  /* light text */
  border-bottom: 1px solid #444;
}

/* Summary numbers (buttons) */
body.dark-mode  #accountsSummarySection .summary-number,
body.dark-mode #callreportSummarySection .summary-number,
body.dark-mode #taskSummarySection .summary-number,
body.dark-mode #tasksSummarySection .summary-number,
body.dark-mode #accountsSummarySection2 .summary-number,
body.dark-mode  #prospectsSummarySection .summary-number,
body.dark-mode #contactsSummarySection .summary-number {
  background-color: #1a1a1a;        /* dark button bg */
  color: #f0f0f0;                  /* light text */
  border: 1px solid #555;
}
body.dark-mode  #accountsSummarySection .summary-number:hover,
body.dark-mode #callreportSummarySection .summary-number:hover,
body.dark-mode #taskSummarySection .summary-number:hover,
body.dark-mode #tasksSummarySection .summary-number:hover,
body.dark-mode #accountsSummarySection2 .summary-number:hover,
body.dark-mode  #prospectsSummarySection .summary-number:hover,
body.dark-mode #contactsSummarySection .summary-number:hover{
  background-color: #444444;        /* hover effect */
  border-color: #777;
}

/* Optional: links inside section */
body.dark-mode  #accountsSummarySection a,
body.dark-mode #callreportSummarySection a,
body.dark-mode #taskSummarySection a,
body.dark-mode #tasksSummarySection a,
body.dark-mode #accountsSummarySection2 a,
body.dark-mode  #prospectsSummarySection a,
body.dark-mode #contactsSummarySection a {
  color: #4ea3ff;
}

body.dark-mode  #accountsSummarySection a:hover,
body.dark-mode #callreportSummarySection a:hover,
body.dark-mode #taskSummarySection a:hover,
body.dark-mode #tasksSummarySection a:hover,
body.dark-mode #accountsSummarySection2 a:hover,
body.dark-mode  #prospectsSummarySection a:hover, 
body.dark-mode #contactsSummarySection a:hover{
  color: #81c0ff;
  text-decoration: underline;
}

/* Optional hover effect on boxes */
body.dark-mode  #accountsSummarySection .summary-box:hover,
body.dark-mode #callreportSummarySection .summary-box:hover,
body.dark-mode #taskSummarySection .summary-box:hover,
body.dark-mode #tasksSummarySection .summary-box:hover,
body.dark-mode #accountsSummarySection2 .summary-box:hover,
body.dark-mode  #prospectsSummarySection .summary-box:hover, 
body.dark-mode #contactsSummarySection .summary-box:hover{
  background-color: #3a3a3a;
}

/* Dark Mode Dashboard */
/* Panel styling in dark mode */
body.dark-mode #dashboard-panels .panel {
  background-color: #2b2b2b; /* darker panel background */
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Panel header in dark mode */
body.dark-mode #dashboard-panels .panel-header {
  background-color: #888; /* darker blue for header */
  color: #ffffff;            /* text stays white */
}

/* Summary number in dark mode */
body.dark-mode #dashboard-panels .summary-number {
  background-color: #2a2a2a; /* darker background */
  color: #ffffff;            /* text white for visibility */
}

/* Hover effect in dark mode */
body.dark-mode #dashboard-panels .panel:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

body.dark-mode #dashboard-panels .summary-number:hover {
  color: #fff; /* subtle bright highlight */
}

/* ================= DARK MODE FOR CONTACTS SUMMARY ================= */
body.dark-mode #contactsSummarySection {
  border: 1px solid #444;           /* darker border */
  background-color: #1e1e1e;        /* dark background for section */
  color: #f0f0f0;                   /* light text for readability */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Section title (H2) */
body.dark-mode #accountsSummarySection .summary-title,
body.dark-mode #courtshipsSummarySection .summary-title,
body.dark-mode #journalentriesSummarySection .summary-title,
body.dark-mode #callreportSummarySection .summary-title,
body.dark-mode #taskSummarySection .summary-title,
body.dark-mode #tasksSummarySection .summary-title,
body.dark-mode #accountsSummarySection2 .summary-title,
body.dark-mode  #prospectsSummarySection .summary-title,
body.dark-mode #contactsSummarySection .summary-title {
  background-color: #888;       /* dark blue instead of original */
  color: #ffffff;                   /* light text */
}

/* Summary boxes */
body.dark-mode  #accountsSummarySection .summary-box,
body.dark-mode #courtshipsSummarySection .summary-box,
body.dark-mode #journalentriesSummarySection .summary-box,
body.dark-mode #callreportSummarySection .summary-box,
body.dark-mode #taskSummarySection .summary-box,
body.dark-mode #tasksSummarySection .summary-box,
body.dark-mode #accountsSummarySection2 .summary-box,
body.dark-mode #prospectsSummarySection .summary-box, 
body.dark-mode #contactsSummarySection .summary-box{
  background-color: #2a2a2a;        /* slightly lighter than section bg */
  border-left: 1px solid #444;
  border-top: 1px solid #555;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Panel headers (H3) inside boxes */
body.dark-mode  #accountsSummarySection .panel-header,
body.dark-mode #courtshipsSummarySection .panel-header,
body.dark-mode #journalentriesSummarySection .panel-header,
body.dark-mode #callreportSummarySection .panel-header,
body.dark-mode #taskSummarySection .panel-header,
body.dark-mode #tasksSummarySection .panel-header,
body.dark-mode #prospectsSummarySection .panel-header,
body.dark-mode #accountsSummarySection2 .panel-header,
body.dark-mode #contactsSummarySection .panel-header{
  background-color: #2a2a2a;        /* dark header bg */
  color: #f0f0f0;                  /* light text */
  border-bottom: 1px solid #444;
}

/* Summary numbers (buttons) */
body.dark-mode  #accountsSummarySection .summary-number,
body.dark-mode #courtshipsSummarySection .summary-number,
body.dark-mode #journalentriesSummarySection .summary-number,
body.dark-mode #callreportSummarySection .summary-number,
body.dark-mode #taskSummarySection .summary-number,
body.dark-mode #tasksSummarySection .summary-number,
body.dark-mode #accountsSummarySection2 .summary-number,
body.dark-mode  #prospectsSummarySection .summary-number,
body.dark-mode #contactsSummarySection .summary-number {
  background-color: #1a1a1a;        /* dark button bg */
  color: #f0f0f0;                  /* light text */
  border: 1px solid #555;
}
body.dark-mode  #accountsSummarySection .summary-number:hover,
body.dark-mode #courtshipsSummarySection .summary-number:hover,
body.dark-mode #journalentriesSummarySection .summary-number:hover,
body.dark-mode #callreportSummarySection .summary-number:hover,
body.dark-mode #taskSummarySection .summary-number:hover,
body.dark-mode #tasksSummarySection .summary-number:hover,
body.dark-mode #accountsSummarySection2 .summary-number:hover,
body.dark-mode  #prospectsSummarySection .summary-number:hover,
body.dark-mode #contactsSummarySection .summary-number:hover{
  background-color: #444444;        /* hover effect */
  border-color: #777;
}

/* Optional: links inside section */
body.dark-mode  #accountsSummarySection a,
body.dark-mode #courtshipsSummarySection a,
body.dark-mode #journalentriesSummarySection a,
body.dark-mode #callreportSummarySection a,
body.dark-mode #taskSummarySection a,
body.dark-mode #tasksSummarySection a,
body.dark-mode #accountsSummarySection2 a,
body.dark-mode  #prospectsSummarySection a,
body.dark-mode #contactsSummarySection a {
  color: #4ea3ff;
}

body.dark-mode  #accountsSummarySection a:hover,
  body.dark-mode #courtshipsSummarySection a:hover,
body.dark-mode #journalentriesSummarySection a:hover,
body.dark-mode #callreportSummarySection a:hover,
body.dark-mode #taskSummarySection a:hover,
body.dark-mode #tasksSummarySection a:hover,
body.dark-mode #accountsSummarySection2 a:hover,
body.dark-mode  #prospectsSummarySection a:hover, 
body.dark-mode #contactsSummarySection a:hover{
  color: #81c0ff;
  text-decoration: underline;
}

/* Optional hover effect on boxes */
body.dark-mode  #accountsSummarySection .summary-box:hover,
  body.dark-mode #courtshipsSummarySection .summary-box:hover,
body.dark-mode #journalentriesSummarySection .summary-box:hover,
body.dark-mode #callreportSummarySection .summary-box:hover,
body.dark-mode #taskSummarySection .summary-box:hover,
body.dark-mode #tasksSummarySection .summary-box:hover,
body.dark-mode #accountsSummarySection2 .summary-box:hover,
body.dark-mode  #prospectsSummarySection .summary-box:hover, 
body.dark-mode #contactsSummarySection .summary-box:hover{
  background-color: #3a3a3a;
}
    /* Dark Mode Dashboard */
/* Panel styling in dark mode */
body.dark-mode #dashboard-panels .panel {
  background-color: #2b2b2b; /* darker panel background */
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Panel header in dark mode */
body.dark-mode #dashboard-panels .panel-header {
  background-color: #888; /* darker blue for header */
  color: #ffffff;            /* text stays white */
}

/* Summary number in dark mode */
body.dark-mode #dashboard-panels .summary-number {
  background-color: #2a2a2a; /* darker background */
  color: #ffffff;            /* text white for visibility */
}

/* Hover effect in dark mode */
body.dark-mode #dashboard-panels .panel:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

body.dark-mode #dashboard-panels .summary-number:hover {
  color: #fff; /* subtle bright highlight */
}
    /* Weekly Form Container */
body.dark-mode form#weeklyEntriesForm {
    background-color: #1a1a1a;
    border: 1px solid #888;
    color: #fff;
}

/* Section headers */
body.dark-mode h2 {
    color: #fff;
}

/* Form Fields */
body.dark-mode .form-field label {
    color: #fff;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #2d2d2d;
    color: #e5e7eb;
    border: 1px solid #888;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #fff;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #888;
    box-shadow: 0 0 3px rgba(59, 130, 246, 0.4);
}

/* Large Textarea */
body.dark-mode textarea.column-2-large-text {
    background-color: #2d2d2d;
    color: #fff;
    border-color: #888;
}

/* Checkbox & Radio */
body.dark-mode .form-field input[type="checkbox"],
body.dark-mode .form-field input[type="radio"] {
    accent-color: #888;
}

/* Sections */
body.dark-mode section.weekEntry {
    background-color: #1a1a1a;
    border-color: #888;
}

body.dark-mode section.weekEntry .container.nested {
    background-color: #1a1a1a;
    border-color: #888;
}

/* Submit Button */
body.dark-mode button[type="submit"] {
    background-color: #555;
    color: #fff;
}

body.dark-mode button[type="submit"]:hover {
    background-color: #888;
}

/* Recording state */
body.dark-mode #memoRecorder.recording { border-color: #ff4c4c; }

/* Blinking recording text */
@keyframes blink { 0%,50%,100% { opacity:1; } 25%,75% { opacity:0; } }
body.dark-mode #memoRecorder span#recordStatus.recording {
    color: #ff4c4c;
    font-weight: bold;
    animation: blink 1s infinite;
}

body.dark-mode #callForm {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    background: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0.1);
}

/* Form rows */
body.dark-mode #callForm .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0px;
}

/* Two-by-two layout: each field 50% */
body.dark-mode #callForm .form-row.two-by-two .form-group {
    flex: 1 1 calc(50% - 15px);
}
body.dark-mode .form-row.two-by-two {
    margin-top: 8px;
}
/* Full width fields */
body.dark-mode #callForm .form-group.full-width {
    flex: 1 1 100%;
}



/* Labels and inputs */
body.dark-mode #callForm label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
}

body.dark-mode #callForm input,
body.dark-mode #callForm select,
body.dark-mode #callForm textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 14px;
        background:#2a2a2a;
    color:#fff;
}

/* Textarea styling */
body.dark-mode #callForm textarea {
    resize: vertical;
}

/* Button styling */
body.dark-mode #callForm button {
    padding: 10px 20px;
    background: #555;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

body.dark-mode #callForm button:hover {
    background: #888;
}
/* ========================= */
/* 📱 TABLET (≤ 1024px) */
/* ========================= */
@media (max-width: 1024px) {
body.dark-mode .sidebar {
    min-height: auto;   /* 🔥 THIS is the key fix */
    height: auto;
  }
  body.dark-mode {
    overflow-x: hidden;
  }
    body.dark-mode  #accountsSummarySection .summary-title,
body.dark-mode #callreportSummarySection .summary-title,
body.dark-mode #taskSummarySection .summary-title,
body.dark-mode #tasksSummarySection .summary-title,
body.dark-mode #accountsSummarySection2 .summary-title,
body.dark-mode  #prospectsSummarySection .summary-title,
  body.dark-mode #contactsSummarySection .summary-title{
    background-color: #888;
    color: #ffffff;
  }
body.dark-mode  #accountsSummarySection .panel-header,
body.dark-mode #callreportSummarySection .panel-header,
body.dark-mode #taskSummarySection .panel-header,
body.dark-mode #tasksSummarySection .panel-header,
body.dark-mode #accountsSummarySection2 .panel-header,
  body.dark-mode #contactsSummarySection .panel-header,
    body.dark-mode  #prospectsSummarySection .panel-header {
    background-color: #2a2a2a;
    color: #f0f0f0;
  }

    
    
}

/* ========================= */
/* MOBILE 768px Desktop*/
/* ========================= */
@media (max-width: 768px) {
  
  }

/* ========================= */
/* MOBILE 599px Desktop*/
/* ========================= */
@media (max-width: 599px) {
    
}


/* ========================= */
/* MOBILE 480px Desktop*/
/* ========================= */
@media (max-width: 480px) {
    body.dark-mode  #accountsSummarySection .summary-title,
body.dark-mode #callreportSummarySection .summary-title,
body.dark-mode #taskSummarySection .summary-title,
body.dark-mode #tasksSummarySection .summary-title,
body.dark-mode #accountsSummarySection2 .summary-title,
  body.dark-mode #contactsSummarySection .summary-title,
    body.dark-mode  #prospectsSummarySection .summary-title {
    background-color: #0c2340;
    color: #ffffff;
  }
body.dark-mode  #accountsSummarySection .panel-header,
body.dark-mode #callreportSummarySection .panel-header,
body.dark-mode #taskSummarySection .panel-header,
body.dark-mode #tasksSummarySection .panel-header,
body.dark-mode #accountsSummarySection2 .panel-header,
body.dark-mode  #prospectsSummarySection .panel-header,
  body.dark-mode #contactsSummarySection .panel-header{
    background-color: #203050;
    color: #f0f0f0;
  }
     body.dark-mode  #accountsSummarySection .summary-title,
  body.dark-mode #courtshipsSummarySection .summary-title,
body.dark-mode #journalentriesSummarySection .summary-title,
body.dark-mode #callreportSummarySection .summary-title,
body.dark-mode #taskSummarySection .summary-title,
body.dark-mode #tasksSummarySection .summary-title,
body.dark-mode #accountsSummarySection2 .summary-title,
  body.dark-mode #contactsSummarySection .summary-title,
    body.dark-mode  #prospectsSummarySection .summary-title {
    background-color: #0c2340;
    color: #ffffff;
  }
body.dark-mode  #accountsSummarySection .panel-header,
  body.dark-mode #courtshipsSummarySection .panel-header,
body.dark-mode #journalentriesSummarySection .panel-header,
body.dark-mode #callreportSummarySection .panel-header,
body.dark-mode #taskSummarySection .panel-header,
body.dark-mode #tasksSummarySection .panel-header,
body.dark-mode #accountsSummarySection2 .panel-header,
body.dark-mode  #prospectsSummarySection .panel-header,
  body.dark-mode #contactsSummarySection .panel-header{
    background-color: #203050;
    color: #f0f0f0;
  }
}

/* =================================================
   DARK MODE FOR PROSPECT PROFILE ONLY
================================================= */
body.dark-mode .prospect-profile * {
  box-sizing: border-box;
}

body.dark-mode .prospect-profile .profile-wrapper {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
  color: #e5e7eb;
}

/* Header */
body.dark-mode .prospect-profile .profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

body.dark-mode .prospect-profile .profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #103057;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}



body.dark-mode .page-title{
  color:#fff;
}

body.dark-mode .prospect-profile .profile-meta h1 {
  margin: 0;
  font-size: 24px;
  color: #f9fafb;
}

body.dark-mode .prospect-profile .profile-meta p {
  margin: 4px 0 0;
  color: #9ca3af;
}

/* Cards */
body.dark-mode .prospect-profile .card {
  background: #2d2d2d;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 22px;
  border: 1px solid #2d2d2d;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

body.dark-mode .prospect-profile .card h2 {
  margin-top: 0;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1f2937;
  color: #f3f4f6;
}

/* Layout */
body.dark-mode .prospect-profile .grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

body.dark-mode .prospect-profile .form-field {
  display: flex;
  flex-direction: column;
}

/* Labels & Inputs */
body.dark-mode .prospect-profile label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}

body.dark-mode .prospect-profile input,
body.dark-mode .prospect-profile select,
body.dark-mode .prospect-profile textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #fff;
  font-size: 14px;
  background: #1a1a1a;
  color: #fff;
}

body.dark-mode .prospect-profile textarea {
  min-height: 140px;
  resize: vertical;
}

body.dark-mode .prospect-profile input::placeholder,
body.dark-mode .prospect-profile textarea::placeholder {
  color: #fff;
}

body.dark-mode .prospect-profile input:focus,
body.dark-mode .prospect-profile select:focus,
body.dark-mode .prospect-profile textarea:focus {
  outline: none;
  border-color: #2563eb;
  background: #020617;
}

/* Radios & Checkboxes */
body.dark-mode .prospect-profile .radio-group,
body.dark-mode .prospect-profile .checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

body.dark-mode .prospect-profile .radio-group label,
body.dark-mode .prospect-profile .checkbox-grid label {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

body.dark-mode .prospect-profile input[type="radio"],
body.dark-mode .prospect-profile input[type="checkbox"] {
  accent-color: #fff;
}

/* Actions */
body.dark-mode .prospect-profile .actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 18px;
}

body.dark-mode .prospect-profile button {
  padding: 11px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

body.dark-mode .prospect-profile button.primary {
  background: #2563eb;
  color: #fff;
}

body.dark-mode .prospect-profile button.primary:hover {
  background: #1d4ed8;
}

body.dark-mode .prospect-profile button.secondary {
  background: #2d2d2d;
  color: #d1d5db;
}

body.dark-mode .prospect-profile button.secondary:hover {
  background: #374151;
}

/* Tablet */
@media (max-width: 1024px) {
  body.dark-mode .prospect-profile .profile-wrapper {
    padding: 0 16px;
  }

  body.dark-mode .prospect-profile .profile-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }

  body.dark-mode .prospect-profile .profile-meta h1 {
    font-size: 22px;
  }

  body.dark-mode .prospect-profile .grid-2 {
    grid-template-columns: 1fr;
  }

  body.dark-mode .prospect-profile .actions {
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 480px) {
  body.dark-mode .prospect-profile .profile-wrapper {
    padding: 0 12px;
  }

  body.dark-mode .prospect-profile .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  body.dark-mode .prospect-profile .profile-avatar {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }

  body.dark-mode .prospect-profile .profile-meta h1 {
    font-size: 20px;
  }

  body.dark-mode .prospect-profile .profile-meta p {
    font-size: 13px;
  }

  body.dark-mode .prospect-profile .card {
    padding: 18px 16px;
  }

  body.dark-mode .prospect-profile .card h2 {
    font-size: 16px;
  }

  body.dark-mode .prospect-profile input,
  body.dark-mode .prospect-profile select,
  body.dark-mode .prospect-profile textarea {
    font-size: 13px;
    padding: 9px 10px;
  }

  body.dark-mode .prospect-profile .radio-group,
  body.dark-mode .prospect-profile .checkbox-grid {
    flex-direction: column;
    gap: 8px;
  }

  body.dark-mode .prospect-profile .actions {
    flex-direction: column;
    gap: 10px;
  }

  body.dark-mode .prospect-profile button {
    width: 100%;
  }
}