/*
 * Client intake — styles
 * ---------------------------------------------------------------------------
 * Lifted verbatim from the approved design (client-intake.blade.php) so the
 * rendered form is byte-for-byte the signed-off look. Served as a static file:
 * there is no Vite build, because the target is GoDaddy shared hosting with no
 * Node toolchain.
 */

:root {
      --bg-deep: #0B1620;
      --bg-panel: #12222F;
      --bg-panel-raised: #182B3A;
      --bg-field: #0F2333;
      --border-subtle: rgba(242, 197, 114, 0.16);
      --border-soft: rgba(244, 238, 225, 0.10);
      --gold-300: #F6D48C;
      --gold-400: #F2C572;
      --gold-500: #D9A24B;
      --terracotta-500: #D97742;
      --gradient-primary: linear-gradient(135deg, #F2C572 0%, #D97742 100%);
      --text-primary: #F4EEE1;
      --text-muted: #93A7B8;
      --text-faint: #5E7285;
      --sage: #6FAE8C;
      --danger: #D97878;
      --radius-lg: 18px;
      --radius-md: 12px;
      --radius-sm: 8px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background:
        radial-gradient(1100px 600px at 85% -10%, rgba(217, 119, 66, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(242, 197, 114, 0.07), transparent 55%),
        var(--bg-deep);
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      min-height: 100vh;
    }

    h1,
    h2,
    h3,
    h4,
    .font-display {
      font-family: 'Playfair Display', serif;
    }

    .eyebrow {
      font-family: 'Inter', sans-serif;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .72rem;
      font-weight: 600;
      color: var(--gold-400);
    }

    .text-muted-soft {
      color: var(--text-muted);
    }

    .signature-script {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
    }

    /* ---------- Top nav ---------- */
    .top-nav {
      background: rgba(11, 22, 32, 0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-soft);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .brand-mark {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.8rem;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-sub {
      font-size: .68rem;
      letter-spacing: .12em;
      color: var(--text-faint);
      text-transform: uppercase;
    }

    .view-tabs {
      display: flex;
      gap: .4rem;
      background: var(--bg-panel);
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      padding: .3rem;
    }

    .view-tab {
      border: none;
      background: transparent;
      color: var(--text-muted);
      padding: .5rem 1.1rem;
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 600;
      transition: .2s;
      cursor: pointer;
      white-space: nowrap;
    }

    .view-tab.active {
      background: var(--gradient-primary);
      color: #20140A;
    }

    .view-tab:not(.active):hover {
      color: var(--text-primary);
    }

    .view-section {
      display: none;
    }

    .view-section.active {
      display: block;
    }

    /* ---------- Stepper ---------- */
    .stepper {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      margin-bottom: 2.5rem;
    }

    .stepper::before {
      content: "";
      position: absolute;
      top: 22px;
      left: 4%;
      right: 4%;
      height: 2px;
      background: var(--border-soft);
      z-index: 0;
    }

    .stepper .track-fill {
      position: absolute;
      top: 22px;
      left: 4%;
      height: 2px;
      background: var(--gradient-primary);
      z-index: 0;
      transition: width .4s ease;
      width: 0%;
    }

    .step-node {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .step-ring {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-panel);
      border: 1.5px solid var(--border-subtle);
      color: var(--text-faint);
      transition: .3s;
      font-size: .9rem;
    }

    .step-node.done .step-ring {
      background: var(--gradient-primary);
      border-color: transparent;
      color: #20140A;
    }

    .step-node.current .step-ring {
      border-color: var(--gold-400);
      color: var(--gold-300);
      box-shadow: 0 0 0 4px rgba(242, 197, 114, 0.12);
    }

    .step-label {
      font-size: .68rem;
      margin-top: .5rem;
      color: var(--text-faint);
      text-align: center;
      max-width: 88px;
      letter-spacing: .01em;
    }

    .step-node.current .step-label {
      color: var(--text-primary);
      font-weight: 600;
    }

    .step-node.done .step-label {
      color: var(--text-muted);
    }

    @media (max-width: 767px) {
      .step-label {
        display: none;
      }

      .step-ring {
        width: 32px;
        height: 32px;
        font-size: .76rem;
      }

      .stepper::before,
      .stepper .track-fill {
        top: 16px;
      }
    }

    .mobile-progress {
      display: none;
    }

    @media (max-width:575.98px) {
      .stepper {
        display: none;
      }

      .mobile-progress {
        display: block;
        margin-bottom: 1.75rem;
      }

      .mobile-progress .bar {
        height: 4px;
        border-radius: 99px;
        background: var(--border-soft);
        overflow: hidden;
      }

      .mobile-progress .fill {
        height: 100%;
        background: var(--gradient-primary);
        transition: .4s;
      }

      .mobile-progress .label {
        font-size: .78rem;
        color: var(--text-muted);
        margin-top: .5rem;
      }
    }

    /* ---------- Panels / cards ---------- */
    .panel {
      background: linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel));
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      padding: 2rem;
    }

    @media (max-width:575.98px) {
      .panel {
        padding: 1.35rem;
        border-radius: var(--radius-md);
      }
    }

    .section-title {
      font-size: 1.5rem;
      margin-bottom: .25rem;
    }

    .section-desc {
      color: var(--text-muted);
      font-size: .92rem;
      margin-bottom: 1.75rem;
    }

    .subsection-label,
    .edit-section-label {
      font-size: .76rem;
      font-weight: 700;
      color: var(--gold-400);
      text-transform: uppercase;
      letter-spacing: .09em;
      margin: 1.6rem 0 1rem;
    }

    .subsection-label:first-child,
    .edit-section-label:first-child {
      margin-top: 0;
    }

    .subsection-note {
      font-size: .85rem;
      color: var(--text-muted);
      margin-top: -.6rem;
      margin-bottom: 1.25rem;
      font-style: italic;
    }

    .field-group {
      margin-bottom: 1.4rem;
    }

    label.field-label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: .4rem;
      display: flex;
      align-items: center;
      gap: .35rem;
    }

    label.field-label .req {
      color: var(--terracotta-500);
    }

    label.field-label .opt {
      font-weight: 400;
      font-style: italic;
      color: var(--text-faint);
      font-size: .76rem;
    }

    .field-hint {
      font-size: .78rem;
      color: var(--text-faint);
      margin-top: .35rem;
    }

    .form-control,
    .form-select {
      background: var(--bg-field);
      border: 1px solid var(--border-soft);
      color: var(--text-primary);
      border-radius: var(--radius-sm);
      padding: .65rem .85rem;
      font-size: .95rem;
    }

    .form-control::placeholder {
      color: var(--text-faint);
    }

    .form-control:focus,
    .form-select:focus {
      background: var(--bg-field);
      border-color: var(--gold-400);
      color: var(--text-primary);
      box-shadow: 0 0 0 3px rgba(242, 197, 114, 0.15);
    }

    .form-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F2C572' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    }

    textarea.form-control {
      min-height: 96px;
      resize: vertical;
    }

    .invalid-feedback {
      color: var(--danger);
      font-size: .78rem;
    }

    .form-control.is-invalid,
    .form-select.is-invalid {
      border-color: var(--danger);
    }

    /* segmented yes/no/unsure */
    .segmented {
      display: inline-flex;
      flex-wrap: wrap;
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      padding: .25rem;
      background: var(--bg-field);
    }

    .segmented input {
      display: none;
    }

    .segmented label {
      padding: .45rem 1.2rem;
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: .2s;
      margin: 0;
    }

    .segmented input:checked+label {
      background: var(--gradient-primary);
      color: #20140A;
    }

    .segmented.invalid {
      border-color: var(--danger);
    }

    /* selectable option cards (single-select) */
    .option-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: .6rem;
    }

    .option-card {
      position: relative;
    }

    .option-card input {
      position: absolute;
      opacity: 0;
    }

    .option-card label {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .75rem .9rem;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-sm);
      background: var(--bg-field);
      font-size: .86rem;
      color: var(--text-muted);
      cursor: pointer;
      transition: .2s;
      margin: 0;
      height: 100%;
    }

    .option-card input:checked+label {
      border-color: var(--gold-400);
      background: rgba(242, 197, 114, 0.10);
      color: var(--text-primary);
    }

    .option-card .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1.5px solid var(--text-faint);
      flex: 0 0 auto;
      transition: .2s;
    }

    .option-card input:checked+label .dot {
      border-color: var(--gold-400);
      background: var(--gold-400);
    }

    /* chip multi-select */
    .chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
    }

    .chip {
      position: relative;
    }

    .chip input {
      position: absolute;
      opacity: 0;
    }

    .chip label {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .5rem 1rem;
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      background: var(--bg-field);
      font-size: .84rem;
      color: var(--text-muted);
      cursor: pointer;
      transition: .2s;
      margin: 0;
    }

    .chip input:checked+label {
      background: var(--gradient-primary);
      border-color: transparent;
      color: #20140A;
      font-weight: 600;
    }

    .divider-soft {
      border-top: 1px solid var(--border-soft);
      margin: 1.75rem 0;
    }

    .policy-box {
      background: var(--bg-field);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-md);
      padding: 1.1rem 1.25rem;
      font-size: .88rem;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 1rem;
    }

    .policy-box strong {
      color: var(--text-primary);
    }

    .policy-box p {
      margin-bottom: .6rem;
    }

    .policy-box p:last-child {
      margin-bottom: 0;
    }

    .consent-check {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      padding: 1rem 1.1rem;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      background: rgba(242, 197, 114, 0.06);
      cursor: pointer;
      margin-bottom: 1.5rem;
    }

    .consent-check input {
      width: 20px;
      height: 20px;
      margin-top: .15rem;
      accent-color: var(--gold-400);
      flex: 0 0 auto;
    }

    /* range sliders */
    .scale-wrap {
      padding: .3rem 0 .1rem;
    }

    input[type=range].theme-range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 99px;
      background: var(--border-soft);
      outline: none;
      accent-color: var(--gold-400);
      margin: .5rem 0;
    }

    input[type=range].theme-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--gradient-primary);
      cursor: pointer;
      box-shadow: 0 4px 10px -2px rgba(217, 119, 66, 0.6);
      border: 2px solid var(--bg-deep);
    }

    input[type=range].theme-range::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--gradient-primary);
      cursor: pointer;
      border: 2px solid var(--bg-deep);
    }

    .scale-labels {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: .35rem;
      font-size: .74rem;
      color: var(--text-faint);
      gap: .5rem;
    }

    .scale-value {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: var(--gold-300);
      font-weight: 700;
      min-width: 26px;
      text-align: center;
      flex: 0 0 auto;
    }

    /* nav buttons */
    .wizard-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2rem;
      gap: .75rem;
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid var(--border-soft);
      color: var(--text-muted);
      border-radius: 999px;
      padding: .65rem 1.4rem;
      font-size: .88rem;
      font-weight: 600;
      transition: .2s;
    }

    .btn-ghost:hover {
      border-color: var(--gold-400);
      color: var(--text-primary);
    }

    .btn-gold {
      background: var(--gradient-primary);
      border: none;
      color: #20140A;
      border-radius: 999px;
      padding: .65rem 1.6rem;
      font-size: .88rem;
      font-weight: 700;
      transition: .2s;
      box-shadow: 0 8px 24px -8px rgba(217, 119, 66, 0.55);
    }

    .btn-gold:hover {
      filter: brightness(1.06);
      color: #20140A;
    }

    .btn-gold:disabled {
      opacity: .5;
    }

    /* review step */
    .review-block {
      margin-bottom: 1.5rem;
    }

    .review-block-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .75rem;
    }

    .review-block-head h4 {
      font-size: 1.05rem;
      margin: 0;
    }

    .edit-link {
      font-size: .78rem;
      color: var(--gold-400);
      background: none;
      border: none;
      font-weight: 600;
      cursor: pointer;
    }

    .review-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .5rem 0;
      border-bottom: 1px dashed var(--border-soft);
      font-size: .87rem;
    }

    .review-row:last-child {
      border-bottom: none;
    }

    .review-row .k {
      color: var(--text-faint);
      flex: 0 0 42%;
    }

    .review-row .v {
      color: var(--text-primary);
      text-align: right;
      flex: 1;
      white-space: pre-line;
    }

    /* success */
    .success-panel {
      text-align: center;
      padding: 3.5rem 2rem;
    }

    .success-ring {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      margin: 0 auto 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--gradient-primary);
      box-shadow: 0 0 0 8px rgba(242, 197, 114, 0.10);
    }

    /* step icon */
    .step-icon-svg circle {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.4;
    }

    .step-icon-svg path,
    .step-icon-svg line {
      stroke: currentColor;
      stroke-width: 1.4;
      fill: none;
      stroke-linecap: round;
    }

    /* ---------- Records view ---------- */
    .search-bar {
      background: var(--bg-panel);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      padding: 1.25rem;
    }

    .search-mode {
      display: inline-flex;
      gap: .35rem;
      background: var(--bg-field);
      border: 1px solid var(--border-soft);
      border-radius: 999px;
      padding: .25rem;
      margin-bottom: .9rem;
    }

    .search-mode button {
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: .78rem;
      font-weight: 600;
      padding: .4rem 1rem;
      border-radius: 999px;
    }

    .search-mode button.active {
      background: var(--gradient-primary);
      color: #20140A;
    }

    .client-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.1rem;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-md);
      background: var(--bg-panel);
      margin-bottom: .7rem;
      cursor: pointer;
      transition: .2s;
    }

    .client-row:hover {
      border-color: var(--gold-400);
      background: var(--bg-panel-raised);
    }

    .avatar-ring {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(242, 197, 114, 0.12);
      border: 1px solid var(--border-subtle);
      color: var(--gold-300);
      font-weight: 700;
      font-family: 'Playfair Display', serif;
    }

    .status-badge {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: .25rem .6rem;
      border-radius: 999px;
    }

    .status-badge.complete {
      background: rgba(111, 174, 140, 0.15);
      color: var(--sage);
    }

    .status-badge.flag,
    .status-badge.pending {
      background: rgba(217, 119, 66, 0.15);
      color: var(--terracotta-500);
    }

    /* Declined shared the green of approved, so the two opposite outcomes
       looked identical at a glance. */
    .status-badge.declined {
      background: rgba(217, 120, 120, 0.15);
      color: var(--danger);
    }

    .empty-state {
      text-align: center;
      padding: 3.5rem 1.5rem;
      color: var(--text-faint);
    }

    .modal-content {
      background: var(--bg-panel-raised);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      border-radius: var(--radius-lg);
    }

    .modal-header {
      border-bottom: 1px solid var(--border-soft);
    }

    .modal-footer {
      border-top: 1px solid var(--border-soft);
    }

    .btn-close {
      filter: invert(1) grayscale(1) brightness(1.8);
    }

    .detail-tag {
      display: inline-block;
      font-size: .76rem;
      padding: .3rem .7rem;
      border-radius: 999px;
      background: var(--bg-field);
      border: 1px solid var(--border-soft);
      color: var(--text-muted);
      margin: .15rem;
    }

    .sample-note {
      font-size: .78rem;
      color: var(--text-faint);
      background: var(--bg-field);
      border: 1px dashed var(--border-soft);
      border-radius: var(--radius-sm);
      padding: .6rem .9rem;
    }

    /* row quick-actions */
    .row-actions {
      display: flex;
      gap: .4rem;
      flex: 0 0 auto;
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border-soft);
      background: var(--bg-field);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .2s;
      flex: 0 0 auto;
    }

    .icon-btn:hover {
      border-color: var(--gold-400);
      color: var(--gold-300);
    }

    .icon-btn.danger:hover {
      border-color: var(--danger);
      color: var(--danger);
      background: rgba(217, 120, 120, 0.10);
    }

    /* danger buttons */
    .btn-danger-ghost {
      background: transparent;
      border: 1px solid rgba(217, 120, 120, 0.4);
      color: var(--danger);
      border-radius: 999px;
      padding: .6rem 1.2rem;
      font-size: .85rem;
      font-weight: 600;
      transition: .2s;
    }

    .btn-danger-ghost:hover {
      background: rgba(217, 120, 120, 0.10);
      border-color: var(--danger);
      color: var(--danger);
    }

    .btn-danger {
      background: linear-gradient(135deg, #E08A8A, #C2504F);
      border: none;
      color: #2A0E0E;
      border-radius: 999px;
      padding: .6rem 1.4rem;
      font-size: .85rem;
      font-weight: 700;
      transition: .2s;
    }

    .btn-danger:hover {
      filter: brightness(1.06);
      color: #2A0E0E;
    }

    /* delete confirm panel */
    .delete-confirm {
      text-align: center;
      padding: 1.5rem .5rem;
    }

    .delete-icon-ring {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin: 0 auto 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(217, 120, 120, 0.12);
      border: 1px solid rgba(217, 120, 120, 0.35);
      color: var(--danger);
    }

    .delete-confirm p {
      color: var(--text-muted);
      font-size: .9rem;
      max-width: 420px;
      margin: 0 auto;
    }

    .delete-confirm strong {
      color: var(--text-primary);
    }

    /* edit form field spacing inside modal */
    .edit-field {
      margin-bottom: 1.1rem;
    }

    .edit-field label {
      font-size: .78rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: .35rem;
      display: block;
    }

    /* practitioner summary */
    .practitioner-panel {
      background: linear-gradient(180deg, rgba(242, 197, 114, 0.07), rgba(242, 197, 114, 0.02));
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 1.25rem 1.35rem;
      margin-bottom: 1.5rem;
    }

    .practitioner-panel h4 {
      font-size: .95rem;
      margin-bottom: 1rem;
      color: var(--gold-300);
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .practitioner-row {
      margin-bottom: .85rem;
    }

    .practitioner-row:last-child {
      margin-bottom: 0;
    }

    .practitioner-row .plabel {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--text-faint);
      font-weight: 700;
      margin-bottom: .2rem;
    }

    .practitioner-row .pval {
      font-size: .86rem;
      color: var(--text-primary);
      line-height: 1.55;
    }

    .toggle-practitioner {
      font-size: .76rem;
      color: var(--gold-400);
      background: none;
      border: none;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 1rem;
      display: inline-flex;
      align-items: center;
      gap: .3rem;
    }

    @keyframes invalidPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(217, 120, 120, 0.45);
      }

      70% {
        box-shadow: 0 0 0 12px rgba(217, 120, 120, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(217, 120, 120, 0);
      }
    }

    .invalid-pulse {
      animation: invalidPulse 0.9s ease-out;
      border-radius: 12px;
    }

    /* toast */
    .app-toast {
      position: fixed;
      left: 50%;
      bottom: 1.75rem;
      transform: translate(-50%, 20px);
      background: var(--bg-panel-raised);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      padding: .75rem 1.3rem;
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 600;
      box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: .25s ease;
      z-index: 2000;
      display: flex;
      align-items: center;
      gap: .55rem;
    }

    .app-toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .app-toast .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--sage);
      flex: 0 0 auto;
    }

    .app-toast.danger .dot {
      background: var(--danger);
    }

    .form-select {
      background-repeat: no-repeat !important;
      background-position: right .75rem center !important;
      background-size: 18px 25px !important;
    }