:root {
    --brand:      #1a56db;
    --brand-dark: #1040b0;
    --surface:    #f8f9fc;
    --border:     #dde2ee;
    --text:       #1e2130;
    --muted:      #6b7394;
    --danger:     #e03d3d;
    --success:    #1a8a4a;
    --radius:     6px;
  }

  /* ── page header ── */
  .page-header { background:#fff; border-bottom:1px solid var(--border); padding:1.1rem 1.5rem; margin-bottom:1.5rem; }
  .page-header h4 { margin:0; font-weight:600; letter-spacing:-.3px; }
  .page-header small { color:var(--muted); }

  /* ── tabs ── */
  .nav-tabs .nav-link          { color:var(--muted); font-weight:500; border:none; border-bottom:2px solid transparent; padding:.6rem 1.1rem; }
  .nav-tabs .nav-link:hover    { color:var(--brand); border-bottom-color:var(--brand); }
  .nav-tabs .nav-link.active   { color:var(--brand); border-bottom:2px solid var(--brand); background:transparent; font-weight:600; }
  .nav-tabs               { border-bottom:1px solid var(--border); }
  .tab-content            { background:#fff; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:1.5rem; }

  /* ── section labels ── */
  .section-label { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; margin-top:1.4rem; padding-bottom:.3rem; border-bottom:1px solid var(--border); }

  /* ── form controls ── */
  .form-control { border-color:var(--border); border-radius:var(--radius); font-size:.9rem; }
  .form-control:focus { border-color:var(--brand); box-shadow:0 0 0 2px rgba(26,86,219,.12); }
  label { font-weight:500; font-size:.88rem; margin-bottom:.25rem; }
  .form-text { font-size:.78rem; color:var(--muted); }

  /* ── business hours grid ── */
  .hours-grid { display:grid; grid-template-columns:110px 1fr; gap:.5rem .8rem; align-items:center; }
  .hours-row  { display:contents; }
  .hours-day-label { font-weight:500; text-transform:capitalize; font-size:.88rem; }
  .hours-inputs { display:flex; align-items:center; gap:.5rem; }
  .hours-inputs input[type=time] { width:120px; }
  .hours-inputs .sep { color:var(--muted); font-size:.8rem; }
  .day-checkbox { width:16px; height:16px; cursor:pointer; accent-color:var(--brand); }

  /* ── out-of-scope topics ── */
  .ost-row { display:grid; grid-template-columns:200px 1fr auto; gap:.5rem; align-items:start; margin-bottom:.5rem; }
  .ost-row input, .ost-row textarea { font-size:.88rem; }

  /* ── kb template fields ── */
  .kb-field-row { display:grid; grid-template-columns:200px 1fr; gap:.5rem; align-items:start; margin-bottom:.6rem; }
  .kb-field-row label { font-size:.84rem; font-weight:500; padding-top:.4rem; color:var(--muted); }
  .kb-field-group-title { font-size:.8rem; font-weight:600; color:var(--brand); text-transform:uppercase; letter-spacing:.06em; margin:.9rem 0 .4rem; }

  /* custom kb fields */
  .custom-field-row { display:grid; grid-template-columns:180px 1fr auto; gap:.5rem; align-items:start; margin-bottom:.5rem; }

  /* ── buttons ── */
  .btn-brand    { background:var(--brand); color:#fff; border:none; font-weight:500; }
  .btn-brand:hover { background:var(--brand-dark); color:#fff; }
  .btn-remove   { background:none; border:none; color:var(--danger); font-size:1.1rem; line-height:1; padding:.25rem .4rem; cursor:pointer; }
  .btn-remove:hover { color:#a01010; }
  .btn-add-row  { font-size:.82rem; font-weight:500; color:var(--brand); background:none; border:1px dashed var(--brand); border-radius:var(--radius); padding:.25rem .7rem; cursor:pointer; }
  .btn-add-row:hover { background:rgba(26,86,219,.06); }

  /* ── services datatable ── */
  #tbl-services td, #tbl-services th { vertical-align:middle; font-size:.88rem; }
  .badge-active   { background:#d4f4e2; color:var(--success); font-size:.75rem; font-weight:600; padding:.2rem .5rem; border-radius:20px; }
  .badge-inactive { background:#fde8e8; color:var(--danger); font-size:.75rem; font-weight:600; padding:.2rem .5rem; border-radius:20px; }

  /* ── misc ── */
  .mono { font-family:'DM Mono',monospace; font-size:.82rem; }
  .form-save-bar { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--border); padding:.75rem 1.5rem; margin:1.5rem -1.5rem -1.5rem; display:flex; justify-content:flex-end; gap:.5rem; }

  /* ── personal assistant: nested member + contact tabs ── */

  /* Member tabs: same look as your outer .nav-tabs but lighter padding to fit inside a tab pane. */
  .pa-member-tabs .nav-link { padding:.45rem .9rem; display:inline-flex; align-items:center; gap:.4rem; }

  /* Contact tabs (nav-pills): pill style, brand-tinted active state. */
  .pa-contact-tabs { border-bottom:1px solid var(--border); padding-bottom:.4rem; gap:.25rem; }
  .pa-contact-tabs .nav-link            { color:var(--muted); font-weight:500; font-size:.85rem; padding:.3rem .7rem; border-radius:var(--radius); display:inline-flex; align-items:center; gap:.4rem; }
  .pa-contact-tabs .nav-link:hover      { background:rgba(26,86,219,.06); color:var(--brand); }
  .pa-contact-tabs .nav-link.active     { background:var(--brand); color:#fff; }
  .pa-contact-tabs .nav-link.active .pa-tab-x { color:#fff; opacity:.75; }

  /* "+ Add Member" / "+ Add Contact" tab items — dashed-border affordance, sit inline at end of strip. */
  .pa-add-member-tab .nav-link,
  .pa-add-contact-tab .nav-link { color:var(--brand); border:1px dashed var(--brand); background:none; font-weight:500; }
  .pa-add-member-tab .nav-link:hover,
  .pa-add-contact-tab .nav-link:hover { background:rgba(26,86,219,.06); border-bottom-color:var(--brand); color:var(--brand); }

  /* The × inside a tab label — small, red, only visible on hover so tabs read cleanly. */
  .pa-tab-x { color:var(--danger); font-size:1.05rem; line-height:1; cursor:pointer; padding:0 .15rem; opacity:0; transition:opacity .12s; }
  .pa-member-tabs .nav-link:hover .pa-tab-x,
  .pa-contact-tabs .nav-link:hover .pa-tab-x,
  .pa-member-tabs .nav-link.active .pa-tab-x,
  .pa-contact-tabs .nav-link.active .pa-tab-x { opacity:1; }
  .pa-tab-x:hover { color:#a01010; }

  /* Member pane body — drop the outer .tab-content's heavy padding/border so it nests cleanly. */
  .pa-member-panes { background:transparent; border:none; padding:1rem 0 0; }
  .pa-contact-panes { background:transparent; border:none; padding:.5rem 0 0; }

  /* Tighten the member name/phone + contact name/phone rows inside panes. */
  .pa-member .tr-row,
  .pa-person-row .tr-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.4rem; }
  /* Member row: name + phone, no toggle — fill the row */
  .pa-member > .card-body > .tr-row .form-control { flex:1; }
  /* Contact row: name + phone take col-md-4 each (33.33%); toggle fills remainder */
  .pa-person-row .tr-row .form-control { flex:0 0 33.33%; max-width:33.33%; }
  .pa-person-emergency-wrap { flex:0 0 auto; padding-left:.5rem; }

  /* Chrome/Edge/Safari - Green native clock */
    input[type="time"]::-webkit-calendar-picker-indicator {
        background-color: #90EE90 !important;
        cursor: pointer;
        border-radius: 8px;
        padding: 2px;
    }
    .bg-pastel-blue {
        background-color: #DAF0F7; /* very light pastel blue */
    }