/*******************************************************
 * Power Pages – Visual/UX Foundation (Production)
 * Author: Jesse + Copilot
 * Scope: Basic/Entity/Web Forms rendered in Power Pages
 * Features:
 *  - Task accordions
 *  - Compact 2-col task grid (wide Comment + focus-expand)
 *  - Placeholder visibility (true inline examples)
 *  - Always-open Allocation section
 *  - Floating budget summary panel (or top bar, via JS toggle)
 *  - Vertical rhythm & modern inputs/buttons
 *******************************************************/
/* Intro info card (brand-aligned) */
.twdb-intro{
  background: var(--neutral-75, #f7f9fc);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-left: 4px solid var(--brand-accent, #2f73c6);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(17,24,39,.06));
}
.twdb-intro-row{ display:flex; align-items:flex-start; gap:.75rem; }
.twdb-intro-ico{ font-size: 1.1rem; line-height:1; margin-top:.15rem; }
.twdb-intro-title{ font-weight:700; color:#111827; margin-bottom:2px; }
.twdb-intro-text{ color:#374151; }
.twdb-intro-dismiss{
  margin-left:auto; background:transparent; border:none; color:#6b7280;
  font-size:18px; line-height:1; cursor:pointer; padding:.15rem .25rem;
}
.twdb-intro-dismiss:hover{ color:#111827; }
/* ---------- Theme tokens ---------- */
:root{
  --brand-primary:#005596;        /* deep blue */
  --brand-primary-strong:#004a84; /* hover/active */
  --brand-accent:#2f73c6;         /* accent blue */
  --neutral-50:#f9fafb; --neutral-75:#f7f9fc; --neutral-100:#f4f6f8;
  --neutral-200:#e5e7eb; --neutral-300:#d1d5db;
  --neutral-700:#374151; --neutral-800:#1f2937;
  --error:#b91c1c; --success:#15803d; --focus:#2563eb;
  --radius:12px; --shadow-sm:0 2px 6px rgba(17,24,39,.06); --shadow-xs:0 1px 3px rgba(0,0,0,.08);
}

/* ---------- Base & focus ---------- */
body,.entity-form,.basic-form,.webform{ line-height:1.5; color:#111827; }
:focus{ outline:2px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Utilities */
.hidden{display:none!important;}
.note-actions.row{display:none!important;}

fieldset{border:0;margin:0;padding:0;}

/* ---------- Headings & labels ---------- */
.entity-form h1,.entity-form h2,.entity-form h3,
.basic-form h1,.basic-form h2,.basic-form h3{
  color:var(--neutral-800); font-weight:600; margin:1.25rem 0 .75rem;
}

/* Labels sit above inputs; placeholders are used for examples */
.entity-form label.field-label,.basic-form label.field-label{
  margin-bottom:0!important; font-weight:500; color:#111827;
}

/* Normalize inner cell padding */
fieldset .section tr>td{ padding:12px 16px; }

/* ---------- Section headers (legends) ---------- */
legend.section-title{
  display:block; position:relative; background:#fff; color:var(--neutral-800);
  border:1px solid var(--neutral-200); border-radius:var(--radius);
  padding:10px 16px 10px 20px; margin:14px 0 10px; box-shadow:var(--shadow-sm);
}
legend.section-title::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  border-radius:var(--radius) 0 0 var(--radius);
  background:linear-gradient(180deg,#5b9bd5 0%,var(--brand-accent) 100%);
}
legend.section-title, legend.section-title h3{ margin:0; font-weight:700; font-size:1.20rem; }

/* ---------- Task cards (umbrella selector) ---------- */
fieldset[aria-label^="Task"]{
  border:1px solid var(--neutral-200); border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow-xs); margin:14px 0 16px; padding:0; overflow:hidden;
}
fieldset[aria-label^="Task"] legend.section-title{
  margin:0; padding:10px 16px 10px 20px; border-bottom:1px solid var(--neutral-200);
}
fieldset[aria-label^="Task"] legend.section-title::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,#5b9bd5 0%,var(--brand-accent) 100%);
}

/* ---------- Inputs (modern) ---------- */
.entity-form input,.entity-form select,.entity-form textarea,
.basic-form input,.basic-form select,.basic-form textarea{
  border-radius:.375rem!important; padding:.5rem .75rem!important;
  border:1px solid #ced4da!important; font-size:1rem!important; background:#fff;
}

/* Placeholders visible (true inline examples) */
::placeholder{ color:#6b7280; opacity:1; }
:-ms-input-placeholder{ color:#6b7280; opacity:1; }
::-ms-input-placeholder{ color:#6b7280; opacity:1; }

/* Currency alignment helper (purely visual) */
.currency-input, input[data-field-type="currency"]{ text-align:right; }

/* Valid/invalid visual states (optional) */
.input-soft-invalid{ outline:1px solid #ffb3b3; background:#fff8f8; }
input:invalid,select:invalid,textarea:invalid{ border-color:#dc3545; background:#fff5f5; }

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--brand-primary); border-color:var(--brand-primary-strong);
  color:#fff; padding:.6rem 1.2rem; border-radius:.375rem; font-weight:600;
}
.btn-primary:hover,.btn-primary:focus{ background:var(--brand-primary-strong); border-color:#003f73; }
.btn-secondary{
  background:#f4f4f4; border-color:#d4d4d4; color:#333; padding:.55rem 1rem; border-radius:.375rem;
}
.btn-secondary:hover,.btn-secondary:focus{ background:#e9ecef; border-color:#c8c8c8; }

/* ---------- Accordions (Tasks only) ---------- */
legend.section-title.pp-acc-legend{ cursor:pointer; user-select:none; border-color:#d1d5db; }
legend.section-title .pp-acc-row{ display:flex; align-items:center; gap:.5rem; }
legend.section-title .pp-acc-chevron{
  display:inline-block; width:0; height:0; border-style:solid; border-width:6px 0 6px 8px;
  border-color:transparent transparent transparent #005596; transition:transform .18s ease;
}
legend.section-title[aria-expanded="true"] .pp-acc-chevron{ transform:rotate(90deg); }
.pp-acc-content[hidden]{ display:none!important; }
legend.section-title.pp-acc-legend:focus{ outline:3px solid var(--focus); outline-offset:3px; }

/* Controls under “Budget Allocation” */
.pp-acc-controls{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin:8px 0 12px;
}
.pp-acc-controls .pp-acc-btn{
  appearance:none; border:1px solid var(--neutral-300); background:#f8fafc; color:#111827;
  padding:.4rem .75rem; border-radius:.375rem; cursor:pointer; font-size:.95rem;
}
.pp-acc-controls .pp-acc-btn:hover{ background:#eef2f7; }

/* ---------- Task grid (Amount narrow, Comment wide) ---------- */
/* Make PP's table behave as a responsive grid */
.task-grid{ display:grid!important; grid-template-columns:minmax(220px,26%) minmax(520px,1fr); column-gap:12px; row-gap:10px; align-items:start; }
.task-grid>tbody{ display:contents; }
.task-grid>tbody>tr{ display:contents; }
.task-grid>tbody>tr>td.task-amount-cell{ grid-column:1; }
.task-grid>tbody>tr>td.task-comment-cell{ grid-column:2; }
.task-grid .form-control{ width:100%; }

/* Comment expands to full width while editing */
.task-grid>tbody>tr>td.task-comment-cell:focus-within{ grid-column:1 / -1; }
.task-grid>tbody>tr>td.task-comment-cell:focus-within .form-control{ box-shadow:0 0 0 3px rgba(37,99,235,.18); transition:box-shadow 120ms ease; }

/* Mobile stacks cleanly */
@media (max-width:768px){
  .task-grid{ grid-template-columns:1fr; column-gap:10px; row-gap:8px; }
  .task-grid>tbody>tr>td.task-amount-cell,.task-grid>tbody>tr>td.task-comment-cell{ grid-column:1!important; }
}

/* ---------- Allocation alerts readability ---------- */
#pp-line1-row .alert{ background:#e6f0ff; border-color:#bfd4ff; color:#111827; }
#pp-line2-row .alert{ background:#fdecec; border-color:#f7c7c7; color:#111827; }
#pp-line1-row strong,#pp-line2-row strong{ display:block; margin-bottom:2px; }

/* ---------- Floating budget summary panel (bottom-right) ---------- */
/* JS will create #pp-float-summary; this styles it */
#pp-float-summary{
  position:fixed; right:16px; bottom:18px; z-index:1000; display:none;  /* shown via .show */
  width:320px; max-width:82vw;
  background:#111827; color:#e5e7eb; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.22);
  padding:.9rem 1rem; border:1px solid rgba(255,255,255,.08);
}
#pp-float-summary.show{ display:block; }
#pp-float-summary .hdr{ font-weight:700; color:#fff; margin-bottom:.35rem; }
#pp-float-summary .row{ display:flex; justify-content:space-between; align-items:center; margin:.25rem 0; }
#pp-float-summary .lbl{ color:#cbd5e1; font-size:.92rem; }
#pp-float-summary .val{ color:#fff; font-weight:700; }
#pp-float-summary .ok{ color:#86efac; }      /* green */
#pp-float-summary .bad{ color:#fca5a5; }     /* red */
#pp-float-summary .x{ position:absolute; right:8px; top:6px; background:transparent; border:none; color:#cbd5e1; font-size:18px; cursor:pointer; }
#pp-float-summary .x:hover{ color:#fff; }
#pp-float-summary .btn{ margin-top:.6rem; width:100%; }

/* (Optional) If you switch back to full-width top bar, these apply */
#sticky-summary{ position:fixed!important; top:0!important; left:0; right:0; z-index:1000; display:none; background:#fff; border-bottom:1px solid var(--neutral-200); padding:.6rem 1rem; gap:1rem; align-items:center; box-shadow:0 2px 6px rgba(17,24,39,.06); }
#sticky-summary.show{ display:flex; }
#sticky-summary .stat{ display:inline-flex; flex-direction:column; font-size:.95rem; }
#sticky-summary .stat .label{ color:#6b7280; font-weight:500; line-height:1.2; }
#sticky-summary .stat .value{ color:#111827; font-weight:700; }
#sticky-summary .close-x{ margin-left:auto; border:none; background:transparent; cursor:pointer; font-size:18px; line-height:1; color:#374151; padding:.2rem .4rem; }
#sticky-summary .close-x:hover{ color:#111827; }
#sticky-reopen{ position:fixed; right:14px; bottom:16px; z-index:1000; display:none; background:#111827; color:#fff; border-radius:999px; padding:.45rem .8rem; cursor:pointer; font-size:.9rem; box-shadow:0 2px 6px rgba(17,24,39,.16); }
#sticky-reopen.show{ display:inline-block; }

.pp-acc-controls .pp-acc-select{
  padding:.35rem .5rem;
  border:1px solid var(--neutral-300, #d1d5db);
  border-radius:.375rem;
  font-size:.95rem;
  background:#fff;
  color:#111827;
}

/* Tighten space between Budget Allocation legend and controls */
fieldset[aria-label="Budget Allocation"] legend.section-title {
  margin-bottom: 6px !important; /* was 10px in the base theme */
}

/* Keep the controls close to the legend */
.pp-acc-controls {
  margin-top: 0 !important;      /* was 8–12px */
}
/* Tighten only for the Budget Allocation section */
fieldset[aria-label="Budget Allocation"] legend.section-title {
  margin-bottom: 0 !important;   /* remove space under legend */
}

/* Pull the controls up */
.pp-acc-controls {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* PP sometimes injects an empty row/cell with padding; neutralize it */
fieldset[aria-label="Budget Allocation"] .section tr > td.zero-cell,
fieldset[aria-label="Budget Allocation"] .section tr > td:empty {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  height: 0 !important;
}

/* If a table wrapper adds top border/padding, remove it right under this legend */
fieldset[aria-label="Budget Allocation"] + .pp-acc-controls {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Last resort: nudge controls up by 2px to visually snug them (safe) */
fieldset[aria-label="Budget Allocation"] + .pp-acc-controls {
  margin-top: -2px !important;
}
.pp-bud-help{
  margin: 6px 0 4px;
  color: #374151;               /* slate-700 */
  font-size: .95rem;
}

/* Keep controls snug to the helper */
.pp-acc-controls{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ============================================================
   Power Pages — DateTimePicker Drop-in Fix (Universal)
   Targets: .bootstrap-datetimepicker-widget (Eonasdan/Tempus Dominus style)
   Author: Jesse + Copilot
   Purpose:
     1) Ensure the white background fully covers the calendar grid.
     2) Eliminate inner gutters (dropdown padding and UL margins).
     3) Make the grid/headers predictable (width:100%, table-layout:fixed).
     4) Let the popup overflow panel/card bounds when needed.
   Notes:
     - Safe to apply globally across forms.
     - Optional “un-stick” and anti-clipping rules are commented below.
   ============================================================ */

/* --- Core: Popup panel normalization --- */
.bootstrap-datetimepicker-widget.dropdown-menu {
  background: #fff !important;
  padding: 0 !important;                    /* remove dropdown inner gutters */
  border: 1px solid #ced4da !important;     /* align with input borders */
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  box-sizing: border-box !important;
  z-index: 1060 !important;                 /* above cards; below modals if needed */
}

/* Remove UL margins/gaps so the calendar can touch the panel edges */
.bootstrap-datetimepicker-widget.dropdown-menu > ul.list-unstyled {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Core: Ensure all calendar views fill the panel and are white --- */
.bootstrap-datetimepicker-widget .datepicker,
.bootstrap-datetimepicker-widget .datepicker-days,
.bootstrap-datetimepicker-widget .datepicker-months,
.bootstrap-datetimepicker-widget .datepicker-years,
.bootstrap-datetimepicker-widget .datepicker-decades,
.bootstrap-datetimepicker-widget .datepicker table {
  width: 100% !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* Tables behave predictably (no overflow due to content sizing) */
.bootstrap-datetimepicker-widget .table-sm {
  width: 100% !important;
  margin: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Headers + cells: compact and consistent; avoid borders that expand width */
.bootstrap-datetimepicker-widget .datepicker table th,
.bootstrap-datetimepicker-widget .datepicker table td {
  padding: .35rem !important;               /* adjust to taste */
  border: 0 !important;
  background: transparent !important;       /* container provides white background */
  text-align: center !important;
  vertical-align: middle !important;
}

/* Buttons fill each cell; background stays transparent so container's white shows */
.bootstrap-datetimepicker-widget .datepicker table td > button,
.bootstrap-datetimepicker-widget .datepicker table th > button {
  display: block !important;
  width: 100% !important;
  padding: .35rem 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.25 !important;
}

/* ============================================================
   OPTIONAL: Un-stick from narrow panels and prevent clipping
   Use these if the popup aligns exactly to a panel edge or is cut off.
   Toggle on progressively from most local to broader scope.
   ============================================================ */

/* 1) Allow overflow where inputs live (cells) */

.section td.form-control-cell,
.form-control-cell {
  overflow: visible !important;    /* let popup paint outside the cell*/
}


/* 2) Prevent the cell from acting as the positioning ancestor */
/*
.section td.form-control-cell,
.form-control-cell {
  position: static !important;     // avoid anchoring popup to the cell edge
}
*/

/* 3) If the section/table wrapper clips, relax overflow and positioning */
/*
.section {
  overflow: visible !important;
  position: static !important;
}
*/

/* 4) If the entity form wrapper is the containing block, relax it too */
/*
.entity-form,
.crmEntityFormView,
#EntityFormControl_EntityFormView,
#EntityFormPanel {
  overflow: visible !important;
  position: static !important;     // apply only if you confirm it's the containing block
}
*/

/* ============================================================
   OPTIONAL: Escape hatch if parent positioning can't be changed
   This forces the widget to use viewport positioning. Prefer JS
   (`widgetParent: 'body'`) instead when possible.
   ============================================================ */
/*
.bootstrap-datetimepicker-widget.dropdown-menu {
  position: fixed !important;       // escape containing block
  // You can tune placement here if needed; otherwise let inline styles handle top/right.
  // Example:
  // right: 16px !important;
}
*/

/* ============================================================
   OPTIONAL: Visual tweaks to match theme (uncomment to apply)
   ============================================================ */

/* Round panel corners to match your inputs/buttons */
/*
.bootstrap-datetimepicker-widget.dropdown-menu {
  border-radius: .375rem !important;     // same as your inputs
}
*/

/* Accent today/active states without affecting layout */
/*
.bootstrap-datetimepicker-widget .day.today > button {
  outline: 2px solid #2563eb;            // your --focus color
  outline-offset: -2px;
}
.bootstrap-datetimepicker-widget .day.active > button {
  background: #005596;                   // --brand-primary
  color: #fff;
  border-radius: .35rem;
}
*/