/* ==========================================
   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);
  /* The SAME token Bootstrap's .card resolves to - app.css maps --bs-border-radius onto
     --app-radius-control - so a .section-card and a .card standing next to each other in a column
     round identically and cannot drift apart later. It was a hardcoded 14px, which read as visibly
     rounder than every Bootstrap card beside it. */
  border-radius: var(--app-radius-control);
  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.
   Rounds on the same token as .section-card above, for the same reason: it is drawn to READ as a
   card, so it has to round like one. */
.wi_workspace_info_column_sections .dashboard-column {
  border: 1px solid var(--border-color);
  border-radius: var(--app-radius-control);
  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.
   .postit-card is not listed: it is a Bootstrap .card now and carries no .card-actions at all. */
.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 {
  opacity: 1;
  transform: translateY(0);
}

/* Header actions - the .card-header equivalent of .card-actions above, for a card whose frame is
   Bootstrap's rather than .section-card's (ToDoListSection). Same declutter, but laid out inline
   at the end of the header strip instead of absolutely positioned over a padded frame. */
.workspace-container .card > .card-header .header-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.workspace-container .card:hover > .card-header .header-actions,
.workspace-container .card.detailed > .card-header .header-actions {
  opacity: 1;
}

.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 - also the Email card's row.
   The value and its quick actions (Call, Send SMS, Send Email) share one line box, so the buttons
   follow the number or address they act on. They used to be pushed to the far right of the row,
   which in these narrow cards is exactly where Pin / Edit hang - see HEADER ACTIONS CLEARANCE. */
.workspace-container .phone-item-actions {
  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-item-actions > :first-child {
  display: inline;
}

.workspace-container .phone-quick-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.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

   The FRAME is Bootstrap's .card (StickyNoteSection.razor): 4px radius, --app-rule border, the
   grey --app-surface-2 header cap - identical to every other card on a record page. Only the
   BODY is the yellow paper, which is what still makes the note findable at a glance without
   making it the one differently-shaped box in the column. */
.workspace-container .postit-card {
  cursor: pointer;
  font-size: 0.875rem;
}

.workspace-container .postit-card > .card-body {
  background-color: #fef08a; /* Post-it yellow */
  color: #713f12; /* Dark warm brown */
  /* An empty note renders an empty .compact-view, which collapsed the paper to a 16px strip under
     the header - it read as a stray yellow rule rather than as a blank note. The old frame got
     this from the card's own min-height: 60px, which a Bootstrap .card has no equivalent for. */
  min-height: 36px;
}

.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;
}

/* The whole card opens the editor, so it still needs to say so on hover - but as a border cue
   rather than the lift-and-shadow it used to carry, which is exactly what the flat card look
   removes. */
.workspace-container .postit-card:hover {
  border-color: var(--app-rule-strong);
}

/* 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 {
  border-color: var(--app-rule);
}

.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 {
    padding: 18px 32px;
    --card-pad-right: 32px; /* must match the padding above */
  }
}

@media (max-width: 768px) {
  .workspace-container .section-card {
    padding: 16px 20px;
    --card-pad-right: 20px; /* must match the padding above */
  }

  /* 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.

   .postit-card is NOT in here any more, and must not go back: it is a Bootstrap .card now, whose
   padding belongs to .card-body. Padding the card element itself would push the header cap in
   from the edges and leave a border-coloured margin around it.
   ========================================== */
.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 {
  padding-left: calc(var(--card-icon-inset) + var(--card-icon-size) + var(--card-icon-gap));
}

/* ==========================================
   HEADER ACTIONS CLEARANCE

   .card-actions (Pin / Edit) is absolutely positioned too, top-right, and it is wider than the
   right padding reserved for it: at 14px from the edge, two 25px buttons reach ~68px in, against
   48px of padding (32px / 20px at the breakpoints). So it hangs ~20-50px into the content box,
   over the first line. The phone and email quick actions sat right there and were half hidden
   behind Pin.

   A right float the size of that intrusion shortens only the first line box, so the text and its
   buttons wrap short of Pin / Edit while later rows keep the full width. Scoped to the cards that
   carry quick actions, so the other cards' detail rows are unchanged.
   ========================================== */
.workspace-container {
  --card-pad-right: 48px;    /* must match .section-card right padding       */
  --card-actions-reach: 72px; /* .card-header-row right (14) + Pin/Edit (54) + gap */
}

.workspace-container .section-card .detailed-view:has(.phone-quick-actions)::before {
  content: "";
  float: right;
  width: calc(var(--card-actions-reach) - var(--card-pad-right));
  height: 12px;
}

/* Never split a phone number to squeeze it beside the float: in a narrow card it drops just below
   Pin / Edit instead, whole. */
.workspace-container .detailed-view .phone-number-text {
  white-space: nowrap;
}