/* highlight the form card with a colored border and background */
.fam-card {
  border: 3px solid #33e77b;      /* pink border - change color to test */
  background-color: #400720;
}

/* highlight all input boxes */
.fam-input {
  background-color: #60520b;      /* pale yellow */
  border: 2px solid #39101d;
}

/* make the heading stand out */
.tp-title {
  background-color: yellow;
  color: black;
  padding: 6px;
}


.card-header.blue { background: rgba(51,113,231,0.06); }
.card-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; }
.card-subtitle { color: #64748b; }
  :root {
    --font-main: "Segoe UI", Arial, sans-serif;
    --primary-blue: #2563eb;
    --label-color: #1e293b;
    --text-muted: #6b7280;
    --radius: 8px;
  }
  /* Header bar (blue section header) */
#fam-page .card-header.blue {
  background: rgba(51,113,231,0.06);
  border-bottom: 2px solid #C6D4FB;
}

/* Normal input: always white background */
.fam-input {
  background: #ffffff !important;
  color: #00214d;
}

/* Read‑only fields: grey background like FAM */
.fam-input-readonly[readonly],
.fam-input[readonly] {
  background: #f0f4fb !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  cursor: not-allowed;
}


  /* Page background */
  .fam-page-wrapper {
    padding-left: 24px !important;
  padding-right: 24px !important;
    padding: 32px;
    background: #f8fafc;
  }
/* Apply placeholder style to ALL inputs + textareas */
.fam-input::placeholder,
.fam-textarea::placeholder {
  color: #c7c7c7 !important;   /* very light grey */
  opacity: 1;                  /* ensure visibility */
}

/* Cross‑browser compatibility */
.fam-input::-webkit-input-placeholder,
.fam-textarea::-webkit-input-placeholder {
  color: #c7c7c7 !important;
}

.fam-input:-ms-input-placeholder,
.fam-textarea:-ms-input-placeholder {
  color: #c7c7c7 !important;
}

.fam-input::-ms-input-placeholder,
.fam-textarea::-ms-input-placeholder {
  color: #c7c7c7 !important;
}

  /* Card */
  .fam-card {
    background: rgba(51,113,231,0.06);
  border-bottom: 2px solid #C6D4FB;
    //background: #fff;
    border-radius: 12px;
    
    //box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    //border: 1px solid #e2e8f0;
    border: #fff;
     margin-left: auto !important;
  margin-right: auto !important;
 // padding-left: 24px !important;
 // padding-right: 24px !important;
  }

  /* Section Heading */
  .fam-section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 4px;
  }

  /* Required notice */
  .fam-required-notice {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 22px;
  }

  /* Label */
  .fam-label {
    font-weight: 600;
    color: var(--label-color);
    font-size: 0.92rem;
  }

  /* Input */
  .fam-input,
  .fam-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1.8px solid #000;  /* <<< BLACK BORDER */
    border-radius: var(--radius);
    background: #ffffff;
    outline: none;
  }

  /* On focus */
  .fam-input:focus,
  .fam-textarea:focus {
    border-color: var(--primary-blue);
    //box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  }

  /* Error */
  .fam-error-msg {
    color: #dc2626;
    font-size: 0.85rem;
    display: none;
    font-weight: 600;
  }

  /* Grid */
  .fam-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 32px;
  }

  /* Buttons */
  .fam-btn {
    padding: 10px 26px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .fam-btn-muted {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
  }

  .fam-btn-secondary {
    background: #e5e5eb;
    border: 1px solid #cbd5e1;
  }

  .fam-btn-primary {
    background: var(--primary-blue);
    color: #fff;
    border: none;
  }

  /* Search buttons inside inputs */
  .fam-btn-muted {
    background: #f1f5f9;
    border: 1.8px solid #000;  /* <<< Matches input border */
  }

  /* Mobile responsive */
  @media (max-width: 900px) {
    .fam-form-grid {
      grid-template-columns: 1fr;
    }
  }

  :root {
    --font-main: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --ct-blue: #3371e7;
    --ct-blue-deep: #00214d;
    --ct-red: #e11d48;
    --muted: #6b7280;
    --radius: 10px;
    --shadow-card: 0 10px 30px rgba(0, 33, 77, .10);
    --bg-soft: #f8fafc;
    --bg-field: #f1f5f9;
    --border-soft: #e5e7eb;
    --success: #27ae60;
  }

  .fam-page-wrapper {
    padding: 24px;
    background: var(--bg-soft);
  }
 

  .fam-card {
    background: #fff;
    border-radius: var(--radius);
    //box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .fam-tab-bar {
    display:flex; gap:6px; border-bottom:1px solid var(--border-soft);
  }

  .fam-tab-btn {
    flex:1 0 220px;
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:14px 16px; font-family:var(--font-main); font-size:.875rem; font-weight:600;
    border:0; border-bottom:4px solid transparent; cursor:pointer; background:#fff; color:var(--ct-blue-deep);
  }
  .fam-tab-active { color:var(--ct-blue); border-bottom-color:var(--ct-blue); background:rgba(51,113,231,.06); }

  .fam-section-title {
    font-family: var(--font-main);
    font-size:1.25rem; font-weight:600; color:var(--ct-blue-deep);
    margin:0 0 4px; padding-bottom:10px;
  }
  .fam-required-notice { font-family:var(--font-main); font-size:.8125rem; color:var(--muted); margin:10px 0 18px; }

  .fam-form-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:16px 32px;
  }

  .fam-field-group { display:flex; flex-direction:column; gap:6px; }
  .fam-label { font-family:var(--font-main); font-size:.875rem; font-weight:600; color:var(--ct-blue-deep); }
  .fam-required-star { color:var(--ct-red); font-weight:700; }

  .fam-input, .fam-textarea {
    box-sizing:border-box; width:100%;
    padding:10px 14px; border:1px solid var(--border-soft); border-radius:8px; outline:none;
    font-family:var(--font-main); font-size:.9375rem; color:var(--ct-blue-deep);
    background:var(--bg-field);
  }
  .fam-input:focus, .fam-textarea:focus {
    border-color:var(--ct-blue);
    box-shadow:0 0 0 3px rgba(51,113,231,.15);
    background:#fff;
  }
  .fam-input[readonly], .fam-textarea[readonly] { color:#6b7280; }

  .fam-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 24px; font-family:var(--font-main); font-size:.9375rem; font-weight:600;
    border:2px solid transparent; cursor:pointer; border-radius:8px;
  }
  .fam-btn-primary { background:var(--ct-blue); color:#fff; }
  .fam-btn-secondary, .fam-btn-muted { background:#eef2ff; color:#334155; }

  .fam-error-msg { display:none; font-size:.8125rem; color:var(--ct-red); font-weight:600; }
  .fam-help { font-size:.75rem; color:#64748b; }

  /* Modal */
  .ddsp-modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,33,77,.5);
    z-index:999; align-items:center; justify-content:center; padding:16px;
  }
  .ddsp-modal-box {
    background:#fff; box-shadow:rgba(0,33,77,.2) 0 8px 40px;
    padding:36px 32px 28px; max-width:420px; width:100%; text-align:center; border-radius:12px;
    animation: ddsp-modal-in .2s ease;
  }
  .ddsp-modal-icon-success { font-size:2rem; margin-bottom:12px; color:var(--success); }
  .ddsp-modal-title { font-size:1.125rem; font-weight:600; color:var(--ct-blue-deep); margin-bottom:10px; }
  .ddsp-modal-message { font-size:.9375rem; color:#4a5568; margin-bottom:24px; line-height:1.6; }
  .ddsp-btn { padding:10px 24px; border-radius:8px; background:#eef2ff; border:2px solid transparent; font-weight:600; cursor:pointer; }
  @keyframes ddsp-modal-in { from { transform:translateY(6px); opacity:0 } to { transform:none; opacity:1 } }

  /* Single column on small screens */
  @media (max-width: 900px) { .fam-form-grid { grid-template-columns:1fr; } }

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* =========================================================
   FAM PAGE MOCKUP — CREATE RECORD FORM
   Visual system aligned to Fungal Disease Reporting Form
   ========================================================= */

:root {
  --font-main: 'Poppins', Arial, sans-serif;

  --ct-blue: #3371e7;
  --ct-blue-dark: #003d9c;
  --ct-blue-deep: #0f172a;
  --ct-blue-mid: #7094f5;
  --ct-blue-light: #c6d4fb;

  --ct-red: #ef4444;
  --ct-green: #27ae60;

  --ash-bg: #f1f5f9;
  --card-bg: #ffffff;
  --line: #e0e8f5;

  --input-bg: #ffffff;
  --input-border: #c0cfe8;
  --input-focus: #2563eb;

  --muted: #4a5568;
  --readonly-bg: #f0f4fb;
  --readonly-text: #4a5568;

  --radius: 0.5rem;
  --shadow-card: 0 2px 16px rgba(0, 33, 77, 0.10);
  --transition: 0.2s ease;
}

/* =========================================================
   GLOBAL / PAGE SCOPE
   ========================================================= */

.fam-page-wrapper,
.fam-page-wrapper * {
  font-family: var(--font-main) !important;
  box-sizing: border-box;
}

.fam-page-wrapper {
  min-height: 100vh;
  padding: 16px 0 32px;
  background: var(--ash-bg);
  color: var(--ct-blue-deep);
}

/* =========================================================
   PAGE HEADER — matches fungal style
   ========================================================= */

.fam-form-header {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 0;
}

.fam-form-header h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ct-blue-deep);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.fam-form-header p {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}

/* =========================================================
   FAM Create Page — No Tab Layout
   Single tab bar removed, keep clean card-top spacing
   ========================================================= */

.fam-card .fam-tab-panel {
  padding-top: 32px;
}
/* =========================================================
   CARD
   ========================================================= 

.fam-card {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid rgba(224, 232, 245, 0.85);
}
*/
/* =========================================================
   TAB BAR — single tab but same visual grammar as fungal page
   ========================================================= 

.fam-tab-bar {
  display: flex;
  overflow-x: auto;
  background: #ffffff;
  border-bottom: 2px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--ct-blue-mid) #e0e8f5;
}

.fam-tab-btn {
  flex: 1 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border: none;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: #5a6a85;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  cursor: default;
  white-space: nowrap;
}

.fam-tab-active {
  color: var(--ct-blue);
  border-bottom-color: var(--ct-blue);
  background: rgba(51, 113, 231, 0.06);
}
*/
/* =========================================================
   PANEL / SECTION
   ========================================================= */

.fam-tab-panel {
  display: block;
  padding: 32px;
}

.fam-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ct-blue-deep);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  line-height: 1.3;
}

.fam-required-notice {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  margin: 10px 0 24px;
  line-height: 1.5;
}

.fam-helper-note {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
}

.fam-required-star {
  color: var(--ct-red);
  font-weight: 700;
}

.fam-conditional-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ct-red);
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.fam-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 24px;
}

.fam-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fam-span-2 {
  grid-column: 1 / -1;
}

/* =========================================================
   LABELS — intentionally smaller than headers
   ========================================================= */

.fam-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ct-blue-deep);
  line-height: 1.35;
}

/* =========================================================
   INPUTS
   ========================================================= */

.fam-input,
.fam-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--ct-blue-deep);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.fam-input {
  min-height: 42px;
}

.fam-textarea {
  min-height: 104px;
  resize: vertical;
}

.fam-input:focus,
.fam-textarea:focus {
 // border-color: var(--input-focus);
//  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.fam-input::placeholder,
.fam-textarea::placeholder {
  color: #b8c0cc !important;
  opacity: 1;
}

.fam-input::-webkit-input-placeholder,
.fam-textarea::-webkit-input-placeholder {
  color: #b8c0cc !important;
}

.fam-input:-ms-input-placeholder,
.fam-textarea:-ms-input-placeholder {
  color: #b8c0cc !important;
}

.fam-input::-ms-input-placeholder,
.fam-textarea::-ms-input-placeholder {
  color: #b8c0cc !important;
}

/* Read-only/autofilled fields */
.fam-readonly-input,
.fam-input[readonly] {
  background: var(--readonly-bg);
  color: var(--readonly-text);
  border-color: var(--input-border);
  cursor: default;
}

/* Date and file fields */
.fam-input[type="date"],
.fam-input[type="file"] {
  min-height: 42px;
  font-size: 0.9375rem;
  color: var(--ct-blue-deep);
}
.fam-file-help {
  margin-top: 4px;
}

/* Native date placeholder/state readability */
.fam-input[type="date"]::-webkit-datetime-edit {
  color: var(--ct-blue-deep);
}

.fam-input[type="date"]:invalid::-webkit-datetime-edit {
  color: #9aa6b8;
}

/* =========================================================
   PWS SEARCH ROW
   ========================================================= */

.fam-search-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.fam-search-row .fam-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fam-search-btn {
  min-width: 46px;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--input-border);
  border-left: none;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  background: #f0f4fb;
  color: var(--ct-blue-deep);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.fam-search-btn:hover,
.fam-search-btn:focus {
  background: rgba(51, 113, 231, 0.10);
  border-color: var(--ct-blue);
  color: var(--ct-blue-dark);
  outline: none;
}

/* =========================================================
   HELP / ERROR TEXT
   ========================================================= */

.fam-error-msg {
  display: none;
  margin-top: 2px;
  color: var(--ct-red);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.fam-inline-help {
  margin: -8px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--ct-blue);
  background: rgba(51, 113, 231, 0.06);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* =========================================================
   BUTTON BAR
   ========================================================= */

.fam-btn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 20px 32px;
  border-top: 1px solid #e8eef7;
  background: #ffffff;
}

.fam-btn-bar-left,
.fam-btn-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fam-btn-bar-right {
  margin-left: auto;
}

.fam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.fam-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 113, 231, 0.22);
}

.fam-btn-muted {
  background: #f0f4fb;
  color: #4a5568;
  border-color: var(--input-border);
}

.fam-btn-muted:hover {
  background: #e6ecf8;
}

.fam-btn-secondary {
  background: transparent;
  color: var(--ct-blue);
  border-color: transparent;
}

.fam-btn-secondary:hover {
  background: rgba(51, 113, 231, 0.08);
}

.fam-btn-primary {
  background: var(--ct-blue);
  color: #ffffff;
  border-color: var(--ct-blue);
}

.fam-btn-primary:hover {
  background: var(--ct-blue-dark);
  border-color: var(--ct-blue-dark);
}

/* =========================================================
   MODALS — compatible with existing success behavior
   ========================================================= */

.ddsp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.ddsp-modal-overlay.ddsp-modal-open {
  display: flex !important;
}

.ddsp-modal-box {
  width: min(440px, 100%);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(0, 33, 77, 0.24);
  padding: 28px;
  text-align: center;
  color: var(--ct-blue-deep);
}

.ddsp-modal-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
}

.ddsp-modal-icon-success {
  background: var(--ct-green);
}

.ddsp-modal-icon-error {
  background: var(--ct-red);
}

.ddsp-modal-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ct-blue-deep);
}

.ddsp-modal-message {
  margin: 0 0 22px;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.5;
}

.ddsp-modal-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .fam-page-wrapper {
    padding: 12px;
  }

  .fam-form-header,
  .fam-card {
    max-width: 100%;
  }

  .fam-form-header h1 {
    font-size: 1.65rem;
  }

  .fam-form-grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .fam-span-2 {
    grid-column: 1;
  }

  .fam-tab-panel {
    padding: 24px 20px;
  }

  .fam-btn-bar {
    padding: 18px 20px;
    align-items: stretch;
  }

  .fam-btn-bar-left,
  .fam-btn-bar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .fam-btn-bar-right {
    margin-left: 0;
    justify-content: flex-end;
  }
}

@media (max-width: 520px) {
  .fam-form-header h1 {
    font-size: 1.45rem;
  }

  .fam-form-header p {
    font-size: 0.875rem;
  }

  .fam-tab-panel {
    padding: 22px 16px;
  }

  .fam-btn {
    width: 100%;
  }

  .fam-btn-bar-left,
  .fam-btn-bar-right {
    flex-direction: column;
  }

  .fam-search-btn {
    min-width: 44px;
  }
}

/* =========================================================
   FAM CREATE PAGE — FINAL WIDTH / CARD / BUTTON OVERRIDES
   Append at bottom of CSS
   ========================================================= */

/* Keep full page background, but center actual content like fungal page */
#main-content.fam-page-wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 24px 24px 56px !important;
  background: var(--ash-bg);
}

/* Header should align with card width, not full browser width */
#main-content.fam-page-wrapper .fam-form-header {
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
}

/* Keep title readable and aligned */
#main-content.fam-page-wrapper .fam-form-header h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ct-blue-deep);
  text-align: left;
}

#main-content.fam-page-wrapper .fam-form-header p {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0;
  text-align: left;
}

/* Main form card should never stretch edge-to-edge */
#main-content.fam-page-wrapper .fam-card {
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: #fff;
  border: 1px solid rgba(224, 232, 245, 0.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Since tab bar is removed, keep direct panel spacing clean */
#main-content.fam-page-wrapper .fam-tab-panel {
  padding: 32px !important;
}

/* Prevent form grid from becoming too flat/wide */
#main-content.fam-page-wrapper .fam-form-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 24px;
}

/* Inputs should fill columns, not force page width */
#main-content.fam-page-wrapper .fam-input,
#main-content.fam-page-wrapper .fam-textarea {
  width: 100%;
  max-width: 100%;
}

/* Notes and attachment should span inside card only */
#main-content.fam-page-wrapper .fam-span-2 {
  grid-column: 1 / -1;
}

/* Button bar should stay inside the card */
#main-content.fam-page-wrapper .fam-btn-bar {
  padding: 20px 32px !important;
  background: #fff;
  border-top: 1px solid #e8eef7;
}

/* Make Cancel look same as Reset */
#main-content.fam-page-wrapper #sewCancel,
#main-content.fam-page-wrapper .fam-btn-secondary {
  background: #f0f4fb !important;
  color: #4a5568 !important;
  border: 2px solid var(--input-border) !important;
  border-radius: var(--radius);
}

#main-content.fam-page-wrapper #sewCancel:hover,
#main-content.fam-page-wrapper .fam-btn-secondary:hover {
  background: #e6ecf8 !important;
  color: #4a5568 !important;
}

#main-content.fam-page-wrapper #sewSubmit {
  min-width: 112px;
}

/* Responsive correction */
@media (max-width: 900px) {
  #main-content.fam-page-wrapper {
    padding: 16px 12px 40px !important;
  }

  #main-content.fam-page-wrapper .fam-form-grid {
    grid-template-columns: 1fr;
  }

  #main-content.fam-page-wrapper .fam-tab-panel {
    padding: 24px 20px !important;
  }

  #main-content.fam-page-wrapper .fam-span-2 {
    grid-column: 1;
  }
}

/* Real-time invalid date styling */
.fam-input-invalid {
  border-color: var(--ct-red) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important;
}

/* =========================================================
   Date input placeholder color only
   Shows mm/dd/yyyy as grey when empty, but typed/selected date stays dark
   ========================================================= */

#main-content.fam-page-wrapper input[type="date"].fam-date-input {
  color: var(--ct-blue-deep);
}

/* Chrome / Edge / Safari empty date placeholder parts */
#main-content.fam-page-wrapper input[type="date"].fam-date-input:invalid::-webkit-datetime-edit,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:placeholder-shown::-webkit-datetime-edit {
  color: #9aa6b8 !important;
}

/* Once user enters/selects a valid date, make value dark */
#main-content.fam-page-wrapper input[type="date"].fam-date-input:valid::-webkit-datetime-edit {
  color: var(--ct-blue-deep) !important;
}

/* Individual date placeholder fields */
#main-content.fam-page-wrapper input[type="date"].fam-date-input:invalid::-webkit-datetime-edit-month-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:invalid::-webkit-datetime-edit-day-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:invalid::-webkit-datetime-edit-year-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:invalid::-webkit-datetime-edit-text {
  color: #9aa6b8 !important;
}

/* Keep actual selected/typed date dark */
#main-content.fam-page-wrapper input[type="date"].fam-date-input:valid::-webkit-datetime-edit-month-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:valid::-webkit-datetime-edit-day-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:valid::-webkit-datetime-edit-year-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:valid::-webkit-datetime-edit-text {
  color: var(--ct-blue-deep) !important;
}
/* =========================================================
   PATCH: Native date empty placeholder should appear grey
   Purpose:
   - Empty date field should show mm/dd/yyyy in grey
   - Selected/typed date should remain dark
   - Uses JS-managed .fam-date-empty class because native date
     placeholders are not reliably controlled by :placeholder-shown
   ========================================================= */

#main-content.fam-page-wrapper input[type="date"].fam-date-input.fam-date-empty {
  color: #9aa6b8 !important;
}

/* Chrome / Edge / Safari native date parts when empty */
#main-content.fam-page-wrapper input[type="date"].fam-date-input.fam-date-empty::-webkit-datetime-edit,
#main-content.fam-page-wrapper input[type="date"].fam-date-input.fam-date-empty::-webkit-datetime-edit-month-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input.fam-date-empty::-webkit-datetime-edit-day-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input.fam-date-empty::-webkit-datetime-edit-year-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input.fam-date-empty::-webkit-datetime-edit-text {
  color: #9aa6b8 !important;
}

/* Once date has value, force selected/typed date to dark */
#main-content.fam-page-wrapper input[type="date"].fam-date-input:not(.fam-date-empty) {
  color: var(--ct-blue-deep) !important;
}

#main-content.fam-page-wrapper input[type="date"].fam-date-input:not(.fam-date-empty)::-webkit-datetime-edit,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:not(.fam-date-empty)::-webkit-datetime-edit-month-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:not(.fam-date-empty)::-webkit-datetime-edit-day-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:not(.fam-date-empty)::-webkit-datetime-edit-year-field,
#main-content.fam-page-wrapper input[type="date"].fam-date-input:not(.fam-date-empty)::-webkit-datetime-edit-text {
  color: var(--ct-blue-deep) !important;
}

/* =========================================================
   CT BRAND ALIGNMENT PATCH — FAM CREATE PAGE
   Purpose:
   - Align colors, typography, and buttons with CT standards
   - Preserve all existing IDs, classes, modal behavior, and JS logic
   - Do NOT change success popup tick/check icon
   ========================================================= */

:root {
  /* CT Primary Blues */
  --ct-blue: #3371E7;
  --ct-blue-dark: #003D9C;
  --ct-blue-deep: #00214D;
  --ct-blue-mid: #7094F5;
  --ct-blue-light: #C6D4FB;

  /* CT Secondary / Tertiary */
  --ct-orange: #F27124;
  --ct-amber: #FAAA19;
  --ct-red: #D8343E;
  --ct-red-dark: #94343E;

  /* CT Neutral Tokens */
  --ct-white: #FFFFFF;
  --ct-black: #000000;

  /* Typography */
  --font-headline: 'Poppins', Arial, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;
  --font-system: Arial, Helvetica, sans-serif;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold-sys: 700;
}

/* Ensure page uses CT-approved UI font */
#main-content.fam-page-wrapper,
#main-content.fam-page-wrapper * {
  font-family: var(--font-body) !important;
}

/* CT heading treatment */
#main-content.fam-page-wrapper .fam-form-header h1,
#main-content.fam-page-wrapper .fam-section-title,
#main-content.fam-page-wrapper .ddsp-modal-title {
  font-family: var(--font-headline) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--ct-blue-deep) !important;
}

/* Labels should remain smaller than headers but use CT Deep Navy */
#main-content.fam-page-wrapper .fam-label {
  color: var(--ct-blue-deep) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Body/helper/modal copy */
#main-content.fam-page-wrapper .fam-form-header p,
#main-content.fam-page-wrapper .ddsp-modal-message,
#main-content.fam-page-wrapper .fam-inline-help {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
}

/* Required stars and validation errors use CT Red */
#main-content.fam-page-wrapper .fam-required-star,
#main-content.fam-page-wrapper .fam-error-msg {
  color: var(--ct-red) !important;
}

/* Invalid field state uses CT Red */
#main-content.fam-page-wrapper .fam-input-invalid {
 // border-color: var(--ct-red) !important;
 // box-shadow: 0 0 0 3px rgba(216, 52, 62, 0.16) !important;
}

/* Primary button — CT Blue */
#main-content.fam-page-wrapper .fam-btn-primary,
#main-content.fam-page-wrapper #famSubmit,
#main-content.fam-page-wrapper #modal-success-ok,
#main-content.fam-page-wrapper #modal-error-ok {
  background-color: var(--ct-blue) !important;
  border-color: var(--ct-blue) !important;
  color: var(--ct-white) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Primary hover — CT Dark Blue */
#main-content.fam-page-wrapper .fam-btn-primary:hover,
#main-content.fam-page-wrapper #famSubmit:hover,
#main-content.fam-page-wrapper #modal-success-ok:hover,
#main-content.fam-page-wrapper #modal-error-ok:hover {
  background-color: var(--ct-blue-dark) !important;
  border-color: var(--ct-blue-dark) !important;
  color: var(--ct-white) !important;
}

/* Secondary / outline buttons — CT standard
   Applies to Reset and Cancel.
*/
#main-content.fam-page-wrapper .fam-btn-muted,
#main-content.fam-page-wrapper #famReset,
#main-content.fam-page-wrapper #famCancel {
  background-color: transparent !important;
  border: 2px solid var(--ct-blue) !important;
  color: var(--ct-blue) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Secondary hover — CT Light Blue background + Deep Navy text */
#main-content.fam-page-wrapper .fam-btn-muted:hover,
#main-content.fam-page-wrapper #famReset:hover,
#main-content.fam-page-wrapper #famCancel:hover {
  background-color: var(--ct-blue-light) !important;
  border-color: var(--ct-blue) !important;
  color: var(--ct-blue-deep) !important;
}

/* Focus ring should stay CT Blue-based */
#main-content.fam-page-wrapper .fam-btn:focus,
#main-content.fam-page-wrapper .fam-input:focus,
#main-content.fam-page-wrapper .fam-textarea:focus {
  box-shadow: 0 0 0 3px rgba(51, 113, 231, 0.22) !important;
}

/* Modal error icon uses CT Red.
   Success tick icon is intentionally NOT changed.
*/
#main-content.fam-page-wrapper .ddsp-modal-icon-error {
  background: var(--ct-red) !important;
}

/* =========================================================
   SEW CREATE PAGE — CT BRAND FINAL OVERRIDES
   Purpose:
   - Align SEW Create Page with CT brand colors and typography
   - Preserve existing fam-* reusable classes
   - Use SEW-specific IDs for behavior-related buttons
   - Do not alter Dataverse/Web API logic
   ========================================================= */

:root {
  /* CT Brand Primary Blues */
  --ct-blue: #3371E7;
  --ct-blue-dark: #003D9C;
  --ct-blue-deep: #00214D;
  --ct-blue-mid: #7094F5;
  --ct-blue-light: #C6D4FB;

  /* CT Brand Secondary / Tertiary */
  --ct-orange: #F27124;
  --ct-amber: #FAAA19;
  --ct-red: #D8343E;
  --ct-red-dark: #94343E;

  /* CT Neutrals */
  --ct-white: #FFFFFF;
  --ct-black: #000000;

  /* Typography */
  --font-headline: 'Poppins', Arial, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;
  --font-main: 'Poppins', Arial, sans-serif;

  /* UI */
  --input-border: #C0CFE8;
  --line: #E0E8F5;
  --ash-bg: #F1F5F9;
  --card-bg: #FFFFFF;
  --muted: #4A5568;
  --radius: 0.5rem;
  --shadow-card: 0 2px 16px rgba(0, 33, 77, 0.10);
}

/* =========================================================
   PAGE TYPOGRAPHY
   ========================================================= */

#main-content.fam-page-wrapper,
#main-content.fam-page-wrapper * {
  font-family: var(--font-body) !important;
}

#main-content.fam-page-wrapper {
  background: var(--ash-bg) !important;
  color: var(--ct-blue-deep) !important;
}

/* Main page title */
#main-content.fam-page-wrapper .fam-form-header h1 {
  font-family: var(--font-headline) !important;
  font-weight: 600 !important;
  color: var(--ct-blue-deep) !important;
  font-size: 2rem !important;
  line-height: 1.2 !important;
}

/* Section title */
#main-content.fam-page-wrapper .fam-section-title {
  font-family: var(--font-headline) !important;
  font-weight: 600 !important;
  color: var(--ct-blue-deep) !important;
  border-bottom: 2px solid var(--line) !important;
}

/* Labels */
#main-content.fam-page-wrapper .fam-label {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--ct-blue-deep) !important;
}

/* Helper / muted text */
#main-content.fam-page-wrapper .fam-required-notice,
#main-content.fam-page-wrapper .fam-helper-note,
#main-content.fam-page-wrapper .fam-inline-help,
#main-content.fam-page-wrapper .muted,
#main-content.fam-page-wrapper small {
  color: var(--muted) !important;
}

/* Required stars and validation messages */
#main-content.fam-page-wrapper .fam-required-star,
#main-content.fam-page-wrapper .fam-error-msg {
  color: var(--ct-red) !important;
}

/* =========================================================
   CARD / PANEL
   ========================================================= */

#main-content.fam-page-wrapper .fam-card {
  background: var(--card-bg) !important;
  border: 1px solid rgba(224, 232, 245, 0.95) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

#main-content.fam-page-wrapper .fam-tab-panel {
  background: var(--ct-white) !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

#main-content.fam-page-wrapper .fam-input,
#main-content.fam-page-wrapper .fam-textarea,
#main-content.fam-page-wrapper select.fam-input {
  background: var(--ct-white) !important;
  color: var(--ct-blue-deep) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--radius) !important;
}

#main-content.fam-page-wrapper .fam-input:focus,
#main-content.fam-page-wrapper .fam-textarea:focus,
#main-content.fam-page-wrapper select.fam-input:focus {
  border-color: var(--ct-blue) !important;
  box-shadow: 0 0 0 3px rgba(51, 113, 231, 0.18) !important;
  outline: none !important;
}

#main-content.fam-page-wrapper .fam-input[readonly],
#main-content.fam-page-wrapper .fam-input-readonly[readonly] {
  background: #F0F4FB !important;
  color: #4A5568 !important;
  border-color: var(--input-border) !important;
  cursor: not-allowed !important;
}

#main-content.fam-page-wrapper .fam-input::placeholder,
#main-content.fam-page-wrapper .fam-textarea::placeholder {
  color: #9AA6B8 !important;
  opacity: 1 !important;
}

/* Invalid field state */
#main-content.fam-page-wrapper .fam-input-invalid,
#main-content.fam-page-wrapper .fam-input[aria-invalid="true"],
#main-content.fam-page-wrapper .fam-textarea[aria-invalid="true"] {
//  border-color: var(--ct-red) !important;
 // box-shadow: 0 0 0 3px rgba(216, 52, 62, 0.16) !important;
}

/* =========================================================
   SEARCH ICON BUTTONS
   ========================================================= */

#main-content.fam-page-wrapper .fam-btn-icon,
#main-content.fam-page-wrapper .fam-search-btn {
  background: transparent !important;
  color: var(--ct-blue) !important;
  border: 2px solid var(--ct-blue) !important;
}

#main-content.fam-page-wrapper .fam-btn-icon:hover,
#main-content.fam-page-wrapper .fam-search-btn:hover {
  background: var(--ct-blue-light) !important;
  color: var(--ct-blue-deep) !important;
  border-color: var(--ct-blue) !important;
}

/* =========================================================
   BUTTONS — CT BRAND RULES
   ========================================================= */

/* Base button */
#main-content.fam-page-wrapper .fam-btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
}

/* Primary button: Submit */
#main-content.fam-page-wrapper #sewSubmit,
#main-content.fam-page-wrapper .fam-btn-primary {
  background: var(--ct-blue) !important;
  color: var(--ct-white) !important;
  border: 2px solid var(--ct-blue) !important;
}

#main-content.fam-page-wrapper #sewSubmit:hover,
#main-content.fam-page-wrapper .fam-btn-primary:hover {
  background: var(--ct-blue-dark) !important;
  border-color: var(--ct-blue-dark) !important;
  color: var(--ct-white) !important;
}

/* Secondary / outline buttons: Reset and Cancel */
#main-content.fam-page-wrapper #sewReset,
#main-content.fam-page-wrapper #sewCancel,
#main-content.fam-page-wrapper .fam-btn-muted,
#main-content.fam-page-wrapper .fam-btn-secondary {
  background: transparent !important;
  color: red !important;
  border: 2px solid var(--ct-blue) !important;
}

#main-content.fam-page-wrapper #sewReset:hover,
#main-content.fam-page-wrapper #sewCancel:hover,
#main-content.fam-page-wrapper .fam-btn-muted:hover,
#main-content.fam-page-wrapper .fam-btn-secondary:hover {
  background: var(--ct-blue-light) !important;
  color: var(--ct-blue-deep) !important;
  border-color: var(--ct-blue) !important;
}

/* Focus state for accessibility */
#main-content.fam-page-wrapper .fam-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(51, 113, 231, 0.25) !important;
}

/* =========================================================
   MODAL — PRESERVE SUCCESS ICON, ALIGN COLORS ONLY
   ========================================================= */

.ddsp-modal-overlay {
  background: rgba(0, 33, 77, 0.50) !important;
}

.ddsp-modal-title {
  color: var(--ct-blue-deep) !important;
  font-family: var(--font-headline) !important;
  font-weight: 600 !important;
}

.ddsp-modal-message {
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
}

.ddsp-modal-icon-success {
  color: var(--ct-white) !important;
  background: var(--ct-blue) !important;
}

/* Modal OK button */
.ddsp-btn,
#modal-success-ok {
  background: var(--ct-blue) !important;
  color: var(--ct-white) !important;
  border: 2px solid var(--ct-blue) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

.ddsp-btn:hover,
#modal-success-ok:hover {
  background: var(--ct-blue-dark) !important;
  border-color: var(--ct-blue-dark) !important;
}

/* =========================================================
   CT ORANGE — RESERVED FOR GOV URLS / EMPHASIS COPY
   ========================================================= */

#main-content.fam-page-wrapper a[href*=".gov"],
#main-content.fam-page-wrapper .ct-highlight,
#main-content.fam-page-wrapper .ct-orange-text {
  color: var(--ct-orange) !important;
}
/* Do NOT override .ddsp-modal-icon-success here.
   The success tick/check icon must remain as-is per requirement.
*/

/* =========================================================
   PATCH: Success modal icon should be green
   PRESERVED: Same icon structure, only visual color updated
   ========================================================= */
.ddsp-modal-icon-success {
  background: #2FB35A !important;
  color: #FFFFFF !important;
}

/* =========================================================
   SEW CREATE PAGE — FAM-style search icon inside PWS textbox
   Append-only patch. Preserves existing IDs and lookup JS.
   ========================================================= */

#main-content .sew-search-row {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
}

#main-content .sew-search-row .fam-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  min-height: 42px !important;
}

#main-content .sew-search-btn {
  width: 64px !important;
  min-width: 64px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--input-border, #c0cfe8) !important;
  border-left: 1.5px solid var(--input-border, #c0cfe8) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--radius, 8px) !important;
  border-bottom-right-radius: var(--radius, 8px) !important;
  background: #f0f4fb !important;
  color: var(--ct-blue-deep, #00214d) !important;
  font-size: 1rem !important;
}

#main-content .sew-search-row:focus-within .fam-input,
#main-content .sew-search-row:focus-within .sew-search-btn {
  border-color: var(--ct-blue, #3371e7) !important;
}

#main-content .sew-search-btn:hover,
#main-content .sew-search-btn:focus {
  background: rgba(51, 113, 231, 0.10) !important;
  color: var(--ct-blue-dark, #003d9c) !important;
  outline: none !important;
}

/* =========================================================
   SEW CREATE — Fix Supplier/Procurer search icon inside input
   Minimum patch only. Preserves existing HTML IDs and JS.
   ========================================================= */

/* Target only the two existing PWS lookup wrappers */
#main-content #dph_supplierpwsid,
#main-content #dph_procurerpwsid {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;

  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}

/* Target only existing Supplier/Procurer search buttons */
#main-content #supplierSearchBtn,
#main-content #procurerSearchBtn {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;

  min-height: 42px !important;
  height: 42px !important;

  padding: 0 !important;
  margin-left: 0 !important;

  border: 1.5px solid var(--input-border, #c0cfe8) !important;
  border-left: 1.5px solid var(--input-border, #c0cfe8) !important;

  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--radius, 8px) !important;
  border-bottom-right-radius: var(--radius, 8px) !important;

  background: #f0f4fb !important;
  color: var(--ct-blue-deep, #00214d) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 1rem !important;
  line-height: 1 !important;
}

/* Remove the existing 8px gap only for wrappers containing these exact lookup buttons */
#main-content #dph_supplierpwsid + #supplierSearchBtn,
#main-content #dph_procurerpwsid + #procurerSearchBtn {
  margin-left: 0 !important;
}

/* Force the existing inline wrapper div to behave like one joined textbox */
#main-content #dph_supplierpwsid:has(+ #supplierSearchBtn),
#main-content #dph_procurerpwsid:has(+ #procurerSearchBtn) {
  margin-right: 0 !important;
}

/* Browser-safe parent wrapper correction */
#main-content #supplierSearchBtn,
#main-content #procurerSearchBtn {
  transform: translateX(-8px);
}

/* =========================================================
   SEW CREATE - Exact 44px input height
   Append only
   ========================================================= */

/* All regular input/select/file/date boxes */
#main-content.fam-page-wrapper input.fam-input,
#main-content.fam-page-wrapper select.fam-input,
#main-content.fam-page-wrapper input[type="text"].fam-input,
#main-content.fam-page-wrapper input[type="number"].fam-input,
#main-content.fam-page-wrapper input[type="date"].fam-input,
#main-content.fam-page-wrapper input[type="file"].fam-input {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.4 !important;
}

/* Supplier / Procurer PWS ID search-row inputs */
#main-content.fam-page-wrapper .sew-search-row .fam-input,
#main-content.fam-page-wrapper #dph_supplierpwsid,
#main-content.fam-page-wrapper #dph_procurerpwsid {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}

/* Search icon buttons should match input height exactly */
#main-content.fam-page-wrapper .sew-search-btn,
#main-content.fam-page-wrapper #supplierSearchBtn,
#main-content.fam-page-wrapper #procurerSearchBtn {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}

/* Keep search row joined and aligned */
#main-content.fam-page-wrapper .sew-search-row {
  align-items: stretch !important;
}

/* Do not force Notes textarea to 44px */
#main-content.fam-page-wrapper textarea.fam-textarea {
  min-height: 104px !important;
  height: auto !important;
  max-height: none !important;
}