/* Pulse Portal – Shared Styles for Financial Tools */
/* Brand tokens */
:root {
  --pp-orange: #ffaa4d;
  --pp-yellow: #ffdd00;
  --pp-deep: #ff9933;
  --pp-text: #111827;
  --pp-muted: #555;
  --pp-border: #e5e7eb;
  --pp-radius-lg: 18px;
  --pp-radius-md: 10px;
  --pp-control-h: 44px;
  --pp-success: #16a34a; /* green */
  --pp-danger: #b00020;  /* red */
  
  /* Pillar colors */
  --pp-financial: #aa4dfe;
  --pp-nutritional: #4dfe51;
  --pp-physical: #fe514d;
  --pp-mental: #514dfe;
  
  /* Pillar images */
  --pp-img-financial: url('https://images.squarespace-cdn.com/content/684b5a2d0c3db3057118f9ed/a6714e11-7818-4c7e-a537-0ab77acf4db4/Financial+Category.jpg?content-type=image%2Fjpeg');
  --pp-img-nutritional: url('https://images.squarespace-cdn.com/content/684b5a2d0c3db3057118f9ed/2e5a19d5-bc9c-46c7-85c0-277f6bb24fce/Nutritional+Category.jpg?content-type=image%2Fjpeg');
  --pp-img-physical: url('https://images.squarespace-cdn.com/content/684b5a2d0c3db3057118f9ed/6fd22bf9-21a4-4b94-96cd-96f68e01a325/Physical+Category.jpg?content-type=image%2Fjpeg');
  --pp-img-mental: url('https://images.squarespace-cdn.com/content/684b5a2d0c3db3057118f9ed/c18c379e-fcc0-4714-821f-ffd591fbad40/Mental+Wellbeing+category.jpg?content-type=image%2Fjpeg');
}

/* Base */
.pp-widget, .pp-widget * { box-sizing: border-box; }
.pp-widget { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial; color: var(--pp-text); }

/* Card shell (orange container variant) */
.pp-card { max-width: 700px; margin: 0 auto; background: var(--pp-orange); padding: 24px; border-radius: var(--pp-radius-lg); color: #fff; }
.pp-card h2 { text-align: center; color: var(--pp-yellow); margin: 0 0 12px; }

/* White panel variant */
.pp-panel { background: #fff; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); box-shadow: 0 6px 16px rgba(0,0,0,0.08); overflow: hidden; }
.pp-panel-header { background: var(--pp-orange); color: #fff; padding: 24px; }
.pp-panel-header h2 { margin: 0; color: var(--pp-yellow); text-align: center; }
.pp-panel-body { background: #fff; padding: 24px; color: var(--pp-text); }

/* Controls */
.pp-control { height: var(--pp-control-h); width: 97%; padding: 8px; border-radius: 6px; border: 1px solid var(--pp-yellow); background: #fff8c2; color: var(--pp-orange); }
.pp-label { color: #fff; }
.pp-label-dark { color: var(--pp-text); }

/* Buttons */
.pp-btn { background: #fff; color: var(--pp-orange); border: 1px solid var(--pp-orange); border-radius: var(--pp-radius-md); padding: 12px 24px; font-size: 1.05em; font-weight: 700; cursor: pointer; }
.pp-btn.secondary { background: #fff; color: var(--pp-orange); border: 1px solid var(--pp-orange); }
.pp-btn.primary { background: var(--pp-orange); color: #fff; border: none; }

/* Output blocks */
.pp-output { margin-top: 16px; background: var(--pp-deep); padding: 18px; border-radius: var(--pp-radius-md); color: #fff; }
.pp-output h1, .pp-output h2, .pp-output h3, .pp-output h4 { color: #fff; margin: 0 0 8px; }
.pp-muted { color: var(--pp-muted); }
.pp-small { font-size: 0.85em; }

/* Tables */
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th { text-align: left; color: var(--pp-orange); border-bottom: 2px solid var(--pp-orange); padding: 8px; }
.pp-table td { padding: 8px; border-bottom: 1px solid #eee; }
.pp-table .num { text-align: right; }

/* Grid helpers */
.pp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pp-card-simple { border: 1px solid #f0c29e; border-radius: 8px; padding: 12px; background: #fff; color: var(--pp-text); }

/* Badges */
.pp-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-weight: 700; }
.pp-badge.pos { background: #e8f5e9; color: #1a7f37; }
.pp-badge.neg { background: #fdecea; color: #b00020; }

/* Tool Header (shared, like Calorie Counter) */
.pp-tool-card { background:#fff; border:1px solid var(--pp-border); border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.08); overflow:hidden; }
.pp-header { background: linear-gradient(135deg, var(--pp-orange), var(--pp-deep)); color:#fff; padding:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pp-title { margin:0; font-size:28px; color:#fff; }
.pp-subtitle { opacity:.95; font-size:14px; color:#fff; }
.pp-header-right { display:flex; align-items:flex-end; gap:10px; }
.pp-profile { display:grid; gap:2px; text-align:right; font-size:14px; color:#fff; }
.pp-body { padding:24px; }

/* Pill indicator (surplus/deficit/status) */
.pp-pill { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; }
.pp-pill--good { background:#d4edda; color:#155724; }
.pp-pill--bad { background:#f8d7da; color:#721c24; }
.pp-pill--flat { background:#fff3cd; color:#856404; }

/* Pillar Buttons - Global Styles */
/* Base pillar button (solid color) */
.pp-pillar-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 20px; border-radius: 12px; text-decoration: none;
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 700; color: #fff; transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 0; cursor: pointer; text-align: center;
}
.pp-pillar-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

/* Pillar button with image overlay */
.pp-pillar-btn--overlay {
  position: relative; background-position: center; background-size: cover;
  overflow: hidden; border: 1px solid #e5e7eb;
}
.pp-pillar-btn--overlay::after {
  content: ""; position: absolute; inset: 0;
  background: var(--pp-overlay, rgba(0,0,0,.5)); z-index: 1;
}
.pp-pillar-btn--overlay .pp-pillar-text {
  position: relative; z-index: 2;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

/* Solid color variants */
.pp-pillar-btn--financial { background: var(--pp-financial); }
.pp-pillar-btn--nutritional { background: var(--pp-nutritional); }
.pp-pillar-btn--physical { background: var(--pp-physical); }
.pp-pillar-btn--mental { background: var(--pp-mental); }
.pp-pillar-btn--home { background: var(--pp-orange); }

/* Image overlay variants */
.pp-pillar-btn--financial.pp-pillar-btn--overlay {
  background-image: var(--pp-img-financial);
  --pp-overlay: rgba(170, 77, 254, 0.8);
}
.pp-pillar-btn--nutritional.pp-pillar-btn--overlay {
  background-image: var(--pp-img-nutritional);
  --pp-overlay: rgba(77, 254, 81, 0.8);
}
.pp-pillar-btn--physical.pp-pillar-btn--overlay {
  background-image: var(--pp-img-physical);
  --pp-overlay: rgba(254, 81, 77, 0.8);
}
.pp-pillar-btn--mental.pp-pillar-btn--overlay {
  background-image: var(--pp-img-mental);
  --pp-overlay: rgba(81, 77, 254, 0.8);
}

/* Mini header variants (120x40) */
.pp-pillar-btn--mini {
  width: 120px; height: 40px; padding: 0;
  font-size: 14px; letter-spacing: 0.2px;
}
.pp-pillar-btn--mini.pp-pillar-btn--overlay {
  --pp-overlay: rgba(0,0,0,.3);
}
.pp-pillar-btn--mini.pp-pillar-btn--financial.pp-pillar-btn--overlay {
  --pp-overlay: rgba(250, 254, 77, 0.6);
}
.pp-pillar-btn--mini.pp-pillar-btn--nutritional.pp-pillar-btn--overlay {
  --pp-overlay: rgba(77, 254, 81, 0.5);
}
.pp-pillar-btn--mini.pp-pillar-btn--physical.pp-pillar-btn--overlay {
  --pp-overlay: rgba(254, 81, 77, 0.5);
}
.pp-pillar-btn--mini.pp-pillar-btn--mental.pp-pillar-btn--overlay {
  --pp-overlay: rgba(81, 77, 254, 0.5);
}

/* Active state */
.pp-pillar-btn.is-active {
  outline: 2px solid var(--pp-orange); outline-offset: 1px;
}

/* Checklist styles */
.pp-checklist-item { 
  display: flex; align-items: flex-start; gap: 12px; padding: 16px; 
  border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px;
  background: #fff; transition: all 0.2s ease;
}
.pp-checklist-item.completed { 
  background: #f0f9ff; border-color: #16a34a; 
}
.pp-checklist-checkbox { 
  width: 20px; height: 20px; margin-top: 2px; cursor: pointer;
  accent-color: #16a34a;
}
.pp-checklist-content { flex: 1; }
.pp-checklist-title { 
  font-weight: 700; color: #c85103; margin: 0 0 4px; 
}
.pp-checklist-desc { 
  color: #555; font-size: 14px; line-height: 1.4; margin: 0; 
}
.pp-progress-bar {
  width: 100%; height: 8px; background: #e5e7eb; border-radius: 4px;
  overflow: hidden; margin: 16px 0;
}
.pp-progress-fill {
  height: 100%; background: #16a34a; transition: width 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 800px) {
  .pp-grid-2, .pp-grid-3 { grid-template-columns: 1fr; }
  .pp-card { padding: 18px; }
  .pp-btn { padding: 10px 18px; font-size: 1em; }
}

/* Generic animated two-option toggle (left/right)
   Usage:
   <div class="pp-toggle">
     <input type="checkbox" id="x" class="pp-toggle__cb">
     <label for="x" class="pp-toggle__label">
       <span class="pp-toggle__opt pp-toggle__opt--left">Left</span>
       <span class="pp-toggle__opt pp-toggle__opt--right">Right</span>
       <span class="pp-toggle__thumb"></span>
     </label>
   </div>
   When checked, the thumb moves to the right. Override colors by setting
   --pp-toggle-left-bg / --pp-toggle-right-bg on a parent.
*/
.pp-toggle { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pp-toggle__cb { position:absolute; left:-9999px; }
.pp-toggle__label { position:relative; width:240px; height:38px; border-radius:999px; background:#f3f4f6; display:grid; grid-template-columns:1fr 1fr; align-items:center; cursor:pointer; box-shadow: inset 0 0 0 1px var(--pp-border); font-weight:800; user-select:none; }
.pp-toggle__opt { text-align:center; z-index:1; font-size:13px; color:#6b7280; }
.pp-toggle__thumb { position:absolute; left:0; top:0; width:50%; height:100%; border-radius:999px; background: var(--pp-toggle-left-bg, var(--pp-success)); transition: transform 200ms ease, background-color 200ms ease; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.pp-toggle__cb:checked + .pp-toggle__label .pp-toggle__thumb { transform: translateX(100%); background: var(--pp-toggle-right-bg, var(--pp-danger)); }
.pp-toggle__cb:not(:checked) + .pp-toggle__label .pp-toggle__opt--left { color:#ffffff; }
.pp-toggle__cb:checked + .pp-toggle__label .pp-toggle__opt--right { color:#ffffff; }

/* Toggle with external side labels (recommended for clarity)
   Markup order inside a flex row: input.cb, label, span.left, span.right, ...
   Example:
     <div class="pp-toggle-row">
       <input id="x" class="pp-toggle__cb" type="checkbox">
       <label for="x" class="pp-toggle__label"><span class="pp-toggle__thumb"></span></label>
       <span class="pp-toggle__text pp-toggle__text--left">No</span>
       <span class="pp-toggle__text pp-toggle__text--right">Yes</span>
     </div>
*/
.pp-toggle-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pp-toggle__text { min-width:22px; text-align:center; font-weight:700; color:#9ca3af; }
.pp-toggle-row .pp-toggle__text--left { order: 1; }
.pp-toggle-row .pp-toggle__label     { order: 2; }
.pp-toggle-row .pp-toggle__text--right{ order: 3; }
.pp-toggle__cb:not(:checked) + .pp-toggle__label ~ .pp-toggle__text--left  { color: var(--pp-danger); }
.pp-toggle__cb:checked + .pp-toggle__label ~ .pp-toggle__text--right { color: var(--pp-success); }

/* Size variants */
.pp-pillar-text--large { font-size: clamp(28px,4.5vw,42px) !important; line-height: 1.2 !important; }
.pp-pillar-text--medium { font-size: clamp(14px, 2.25vw, 21px); line-height: 1.2; }
.pp-pillar-text--small { font-size: 14px; line-height: 1.2; }

/* Mortgage Rates tables (shared tweaks) */
.rates-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.rates-table th { text-align: right; padding: 8px; border-bottom: 2px solid var(--pp-orange); color: var(--pp-orange); font-weight: bold; }
.rates-table th:first-child { text-align: left; }
.rates-table td { text-align: right; padding: 8px; border-bottom: 1px solid #eee; color: #000; }
.rates-table td:first-child { text-align: left; color: #333; }
@media (max-width: 640px) {
  .rates-table { font-size: 12px; }
  .rates-table th, .rates-table td { padding: 6px; }
}