/* ==========================================
   OVERRIDES FOR THE WORKSPACE CONTAINER
   ========================================== */

/* The client/lead workspace carried a SECOND palette of its own - an indigo accent and a
   cool slate ramp, neither of which appeared anywhere else. The names are kept (the rest
   of this file is written against them) but every value now resolves to the one palette
   in app.css, so the workspace cannot drift from the rest of the app again. */
.workspace-container {
  --bg-primary: var(--app-ground);
  --bg-secondary: var(--app-surface);
  --bg-card: var(--app-surface);
  --bg-card-pale: var(--app-surface-2);
  --border-color: var(--app-rule);

  --text-primary: var(--app-ink);
  --text-secondary: var(--app-ink-2);
  --text-muted: var(--app-ink-3);

  --accent-primary: var(--app-primary);
  --accent-hover: var(--app-primary-hover);
  --accent-pale: var(--app-primary-soft);

  --success: var(--app-success);
  --success-pale: var(--app-success-soft);
  --warning: var(--app-warning);
  --warning-pale: var(--app-warning-soft);
  --danger: var(--app-danger);
  --danger-pale: var(--app-danger-soft);
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-glass: 0 8px 32px 0 rgba(43, 37, 40, 0.05);
  
  --status-active: var(--app-success);
  --status-lead: var(--app-info);
  --status-bg-active: var(--app-success-soft);
  --status-bg-lead: var(--app-info-soft);
  
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  color: var(--text-primary);
  width: 100%;
}

/* ==========================================
   DASHBOARD GRID & LAYOUT
   ========================================== */

.workspace-container {
  /*padding: 6px;
    */
}

.workspace-container .dashboard-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

/* Default: 3-column layout */
.workspace-container .grid-3-cols {
  grid-template-columns: repeat(3, minmax(300px, 1fr));
}

/* Custom Form active: 4-column layout */
.workspace-container .grid-4-cols {
  grid-template-columns: repeat(4, minmax(250px, 1fr));
}

.workspace-container .dashboard-column {
  display: flex;
  flex-direction: column;
  gap: 6px; /*used to be 24px trying to reduce spacing*/
}

@media (max-width: 1200px) {
  .workspace-container .grid-3-cols, 
  .workspace-container .grid-4-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .workspace-container .grid-3-cols, 
  .workspace-container .grid-4-cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   CARD COMPONENT STRUCTURE
   ========================================== */
.workspace-container .section-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 48px; /* Clear space on left for icon, right for actions */
  position: relative;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  width: 100%;
  transition: all 0.3s ease;
}

/* merge the name, address, phone, email into one */
.workspace-container .wi_workspace_info_column_sections .section-card {
  background-color: transparent;
  border-style: none;
  box-shadow: none;
}

/* this makes the info column section look like a card, even though it has 4 cards */
.wi_workspace_info_column_sections .dashboard-column {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--bg-card-pale);
}

/* Custom-form column (web_view*/add*_right panels): the DynamicQuestionnaire already draws its own
   card (border, shadow, header), so this column must NOT wrap it in the section frame - that produced a
   double border. Strip the DQ container's page-level centering (bootstrap .container side padding, the
   .mt-4 top / 3rem bottom margins, and the 960px cap) so the single card sits flush in the column. */
.wi_custom_form_column .wi_dqform_container {
  margin: 0 !important;
  padding: 0;
  max-width: none;
}


/* Card pale background on base state */
.workspace-container .section-card.bg-pale {
  background-color: var(--bg-card-pale);
}

.workspace-container .card-header-row {
  position: absolute;
  top: 18px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}

.workspace-container .card-icon {
  color: var(--text-muted);
  opacity: 0.6;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  pointer-events: auto;
}

/* The card icons are rendered by SvgIcon, which inlines the file as an <svg> inside
   <i class="fa-icon-v7 card-icon"> - so that the two tones can be driven from CSS, which is
   impossible through an <img>. The rules above size the <i>; the <svg> carries only a viewBox and
   needs its own size or it collapses. This has to stay in a GLOBAL stylesheet: the inlined markup
   belongs to no component, so a scoped rule would compile to "...svg[b-xxxxx]" and never match. */
.workspace-container .card-icon.fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-container .card-icon.fa-icon-v7 svg {
  width: 20px;
  height: 20px;
  display: block;
}

.workspace-container .card-actions {
  position: absolute;
  top: -12px;
  right: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

/* Reveal actions on hover, detailed, or editable states */
.workspace-container .section-card:hover .card-actions,
.workspace-container .section-card.detailed .card-actions,
.workspace-container .section-card.pinned .card-actions,
.workspace-container .section-card.editable .card-actions,
.workspace-container .postit-card:hover .card-actions,
.workspace-container .postit-card.detailed .card-actions,
.workspace-container .postit-card.pinned .card-actions,
.workspace-container .postit-card.editable .card-actions {
  opacity: 1;
  transform: translateY(0);
}

.workspace-container .action-icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.workspace-container .action-icon-btn:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.workspace-container .action-icon-btn.pinned {
  color: var(--accent-primary);
  background-color: var(--accent-pale);
}

/* Form Fields Styling */
.workspace-container .form-group-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.875rem;
  width: 100%;
}

.workspace-container .form-label-left {
  width: 100px;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.workspace-container .form-control-right {
  flex-grow: 1;
}

.workspace-container .form-group-col {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 100%;
}

.workspace-container .form-label-top {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.workspace-container .form-row-multi {
  display: flex;
  gap: 8px;
  width: 100%;
}

.workspace-container .form-help-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  margin-left: 100px;
}

.workspace-container .form-actions-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

/* Read-Only Details Layout */
.workspace-container .detail-item-row {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: 0.875rem;
  width: 100%;
}

.workspace-container .detail-item-row:last-child {
  border-bottom: none;
}

.workspace-container .detail-label {
  width: 100px;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.workspace-container .detail-val {
  color: var(--text-primary);
  word-break: break-word;
  font-weight: 500;
}

/* ==========================================
   COMPONENT-SPECIFIC STYLES
   ========================================== */

/* Phone Section Actions */
.workspace-container .phone-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
  width: 100%;
}

.workspace-container .phone-item-actions:last-child {
  border-bottom: none;
}

.workspace-container .phone-number-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.workspace-container .phone-type-tag {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--bg-card-pale);
  color: var(--text-secondary);
  margin-left: 6px;
  display: inline-block;
}

.workspace-container .phone-quick-actions {
  display: flex;
  gap: 4px;
}

.workspace-container .phone-action-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--accent-primary);
  padding: 4px;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.workspace-container .phone-action-btn:hover {
  background-color: var(--accent-pale);
}

/* Status Badges */
.workspace-container .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
}

.workspace-container .status-active-badge {
  background-color: var(--status-bg-active);
  color: var(--status-active);
  border: 1px solid var(--status-active);
}

.workspace-container .status-lead-badge {
  background-color: var(--status-bg-lead);
  color: var(--status-lead);
  /* border is unnecessary... too many containers visually
  border: 1px solid var(--status-lead);
    */
}

/* Program Section Card */
.workspace-container .program-display {
  font-size: 0.95rem;
  font-weight: 600;
}

.workspace-container .program-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Post-It Card Styling */
.workspace-container .postit-card {
  background-color: #fef08a; /* Post-it yellow */
  color: #713f12; /* Dark warm brown */
  border-radius: 12px;
  padding: 18px 48px;
  position: relative;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  width: 100%;
  cursor: pointer;
  border: 1px solid #fef08a;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.workspace-container .postit-card .card-icon {
  color: #a16207;
  opacity: 0.8;
}

.workspace-container .postit-card .action-icon-btn {
  color: #a16207;
}

.workspace-container .postit-card .action-icon-btn:hover {
  background-color: rgba(161, 98, 7, 0.15);
  color: #854d0e;
}

.workspace-container .postit-card:hover {
  transform: translateY(-1px);
  box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.08), 1px 3px 6px rgba(0, 0, 0, 0.04);
}

/* A frozen note (converted lead) keeps the paper but drops the click affordance the whole card
   otherwise carries - see StickyNoteSection's ReadOnly parameter. */
.workspace-container .postit-card-readonly {
  cursor: default;
}

.workspace-container .postit-card-readonly:hover {
  transform: none;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.workspace-container .sticky-note-compact {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
  white-space: pre-wrap;
}

.workspace-container .postit-activate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px dashed #ca8a04;
  background-color: rgba(254, 240, 138, 0.4);
  color: #854d0e;
  font-weight: 600;
}

/* To Do List Section */
.workspace-container .ai-rec-box {
  background: var(--app-primary-softer);
  border: 1px solid var(--app-primary-soft);
  border-radius: var(--app-radius-card);
  padding: 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--app-primary-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-container .ai-rec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.workspace-container .ai-sparkle-icon {
  color: #818cf8;
  width: 14px;
  height: 14px;
}

/* Data Table inside To Do */
.workspace-container .todo-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 8px;
}

.workspace-container .todo-grid-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px;
  border-bottom: 2px solid var(--border-color);
}

.workspace-container .todo-grid-table td {
  padding: 6px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
}

.workspace-container .todo-grid-table tr:hover td {
  color: var(--accent-primary);
  background-color: var(--bg-card-pale);
}

.workspace-container .convert-client-container {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* Recalculating Loader */
.workspace-container .loader-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.workspace-container .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Custom Form Layout specific */
.workspace-container .custom-form-title {
  font-size: 0.9rem;
  font-weight: bold;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 6px;
  margin-bottom: 12px;
  color: var(--accent-primary);
}

/* Header style override for workspace */
.workspace-container .workspace-header {
  /*
  border: 1px solid var(--border-color);
  border-radius: 16px;
    */
  padding: 16px 24px;
  margin-bottom: 8px;
  /*
  margin-top: 6px;
    */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background-color: var(--app-surface);
  box-shadow: var(--shadow-sm);
}


.workspace-container .header-title h2 {
  font-size: 1.2rem;
  /* font-weight: 700; */
  margin: 0;
  color: var(--text-primary);
}

.workspace-container .header-title p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 2px 0 0 0;
}

.workspace-container .controls-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.workspace-container .form-control-static {
  font-weight: 600;
  color: var(--text-primary);
}

/* ==========================================
   RESPONSIVE OVERRIDES (kept last so equal-specificity
   rules above don't win the cascade over these)
   ========================================== */
@media (max-width: 1200px) {
  .workspace-container .section-card,
  .workspace-container .postit-card {
    padding: 18px 32px;
  }
}

@media (max-width: 768px) {
  .workspace-container .section-card,
  .workspace-container .postit-card {
    padding: 16px 20px;
  }

  /* Stack label above field so inputs get the column's full width instead of
     fighting a fixed 100px label for space on narrow screens. */
  .workspace-container .form-group-row,
  .workspace-container .detail-item-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .workspace-container .form-label-left,
  .workspace-container .detail-label {
    width: auto;
    margin-bottom: 2px;
  }

  .workspace-container .form-help-text {
    margin-left: 0;
  }
}

/* ==========================================
   CARD CONTENT INSET

   The card icon is ABSOLUTELY positioned (.card-header-row, left: 14px), so it does
   not push the content along - the card's own left padding is the only thing keeping
   text off it. Those two numbers had drifted apart: the responsive rule above drops
   the padding to 32px below 1200px while the icon still ends at 34px, so the name and
   the phone number sat ON the icon.

   Deriving the inset from the icon's own geometry means they cannot drift again -
   change the icon size or its offset and the text follows. Last in the file so it
   wins over the responsive block regardless of breakpoint.
   ========================================== */
.workspace-container {
  --card-icon-inset: 14px;   /* must match .card-header-row left */
  --card-icon-size: 20px;    /* must match .card-icon width      */
  --card-icon-gap: 12px;
}

.workspace-container .section-card,
.workspace-container .postit-card {
  padding-left: calc(var(--card-icon-inset) + var(--card-icon-size) + var(--card-icon-gap));
}