/* (same inline styles as before, trimmed for brevity) */
* {
  margin: 0;
  padding: 0
}

body {
   font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  /* padding: 2rem   //      add or remove this to make bar float in view profile and new client pages*/ 
}

h1 {
  margin-bottom: .25rem
}

p {
  margin-bottom: 1.25rem;
  color: #475569
}

#button {
  background: #1a3662;
  color: #fff;
  border: none;
  padding: .5rem 1rem;
  border-radius: .375rem;
  cursor: pointer;
  transition: background .2s;
  margin-bottom: 1rem;
  text-decoration: none;
}

#button:hover {
  background: #0f766e
}

.table-wrapper {
  max-width: 100%;
  overflow-x: auto
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 48rem
}

thead {
  background: #1a3662;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1
}

th,
td {
  padding: .65rem .85rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e2e8f0
}

tbody tr:nth-child(even) {
  background: #f1f5f9
}

tbody tr:hover {
  background: #e0f2f1
}

td.email {
  white-space: normal;
  word-break: break-all
}

.client-profile-btn {
  background: #008D9E;
  color: #fff;
  border: none;
  padding: .35rem .75rem;
  border-radius: .25rem;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  justify-content: center;
  max-width: 8rem;
}

.client-profile-btn:hover {
  background: #1a3662
}

#error {
  margin-top: .5rem;
  color: #dc2626
}







/* Clients_profile Css style card*/
/* ---- profile card ---- */
.card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: .5rem;
box-shadow: 0 2px 6px #0001;
max-width: 40rem;
padding: 1.5rem 2rem;
margin-top: 1.5rem;
}
/* two-column definition list */
.card dl {
display: grid;
grid-template-columns: 8rem 1fr;
row-gap: .5rem;
column-gap: 1rem;
}
.card dt {
font-weight: 600;
color: #0f172a;
white-space: nowrap;
}
.card dd {
margin-left: 0;        /* reset default */
color: #334155;
overflow-wrap: anywhere;
}
/* nice fallback dash */
.card dd:empty::after { content: "—"; color: #94a3b8; }
/* back link matches your button theme */
#back {
display: inline-block;
margin-bottom: 1.25rem;
color: #1a3662;
text-decoration: none;
font-weight: 500;
}
#back:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   SIDEBAR + TOP BAR   (keeps the rest of your sheet untouched)
   ────────────────────────────────────────────────────────────── */
:root{
  --sidebar-bg:#ffffff;       /* deep slate */
  --sidebar-ic:#f0f0f0;       /* light icons */
  --topbar-bg:#ffffff;
}

/* fixed vertical sidebar */
.sidebar{
  position:fixed; top:0; left:0;
  width:60px; height:100vh;
  background:var(--sidebar-bg);
  display:flex; flex-direction:column;
  align-items:center; gap:1.25rem; padding-top:.75rem;
}

/* simple icon buttons inside sidebar */
.sidebar button{
  background:none; border:none; cursor:pointer;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}

/* top bar (search + account + actions)- dashboard.html */
.topbar{
  position:sticky; top:0; z-index:10;
  height:56px; background:var(--topbar-bg);
  border-bottom:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem;
}

/* top bar (search + account + actions)- client_profile.html */
.topbar-client{
  position:sticky; top:0; z-index:10;
  margin-left:60px;   
  height:56px; background:var(--topbar-bg);
  border-bottom:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.25rem;
}


/* search field */
.topbar .search{
  position:relative;
}
.topbar .search input{
  width:220px; padding:.45rem .75rem .45rem 2.25rem;
  border:1px solid #e2e8f0; border-radius:.375rem;
  font-size:.9rem;
}
.topbar .search svg{             /* magnifying glass */
  position:absolute; left:.6rem; top:50%; translate:0 -50%;
  width:14px; height:14px; fill:#64748b;
}

/* account circle */
.account-btn{
  width:34px; height:34px; border-radius:50%;
  background:#f1f5f9; border:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; color:#475569;
}

/* action buttons (Add / Delete) */
.actions{
  display:flex; gap:.5rem;
}
.actions .btn{
  padding:.45rem 1rem; border:none; cursor:pointer;
  border-radius:.375rem; font-size:.875rem;
  color:#fff;
}
.actions .add   { background:#008D9E; }
.actions .del   { background:#dc2626; }
.actions .edit   { background:#2563eb; }
.actions .cancel { background:#7c7c7c; }


/* push main page content away from sidebar */
main{
  margin: 0 2rem;               /* same as sidebar width */
  padding: 1.5rem;
}

/* optional – profile card width tweak - client_profile.html */
.card{ max-width:600px; }

/* ─── account button dark mode ───────────────────────── */
.account-btn{
  background:#475569;          /* dark slate (adjust if you prefer) */
  border:none;                 /* remove the light border */
  color:#fff;                  /* white icon for contrast */
}

/* ─── sidebar logo ───────────────────────────────────── */
.sidebar .logo{
  margin-bottom:0rem;       /* space below logo before first icon */
  object-fit:contain;
  cursor:pointer;
    box-sizing: border-box;

  background-color: #f0f0f0; /* Light background */
  border-radius: 50%;
  padding: 0px; /* Adjust padding to size the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;  /* Fixed width */
  height: 50px; /* Fixed height to maintain circle shape */
}

/* ─── search bar - client_profile.html ───────────────────────── */
.topbar .search{       
  margin-left:auto;            /* pushes it to the far right */
  margin-right:1.5rem;         /* gap before the Add/Delete buttons */
}

.topbar .search input{
  width:300px;                 /* make it wider (tweak as you like) */
  max-width:40vw;              /* keep it from overflowing on small screens */

}


/* ─── profile sheet ───────────────────────────── */
.info-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:.75rem;
  padding:1.25rem 1.5rem;
  max-width:720px;              /* keeps it from stretching too wide */
  margin-bottom:2rem;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}

/* responsive two-column definition list */
.info-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  row-gap:.75rem;               /* space between rows */
  column-gap:2rem;              /* nice breathing room */
  margin:0;
}
.info-list dt{
  font-size:.8rem;
  color:#64748b;
  margin-bottom:.15rem;
}
.info-list dd{
  margin:0;
  font-weight:500;
  color:#0f172a;
}

.core-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin:1rem 0 2rem;
}
.core-box{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:.5rem;
  padding:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
}
.core-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background-size:60% auto;
  background-repeat:no-repeat;
  background-position:center;
}
.section-title{
  margin:0 0 .5rem 0;
  font-size:1rem;
  color:#475569;
  font-weight:600;
}

/* narrow column that both card and icons will share - client_profile.html */
.profile-col{
  /* matches whatever width your .card already uses; adjust as you like */
  max-width:100%;
  margin-left:60px;        /* flush with sidebar */
  display:block;
  flex-direction:column;
  gap:1.25rem;          /* space between the card, heading, icons, etc. */
}



/*these are the report li items in the ul.. right now its an 'a' lets make it look like a styled button instead of an ugly plain download link*/
.report-link{
  display: block;            /* makes it fill the li */
  padding: .5rem 1rem;      /* comfortable padding */
  background: #d9d9d9;      /* light background */
  border-radius: .375rem;   /* rounded corners */
  color: #0f172a;           /* dark text */
  /*text-decoration: none;    /* remove underline */
  transition: background .2s ease;
  width: 50%;            /* makes it fill the li */
  
}

/* ─── Modern “table-card” look ─────────────────────────────── */
.report-bundle-container{
  margin:2rem 0 1.5rem;
  border:1px solid #e2e8f0;
  border-radius:.75rem;
  overflow:hidden;                       /* rounds the header too */
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  max-width: 100%;
  font-size: .95rem;
}

/* header row */
.report-table-header{
  display:grid;
  grid-template-columns: 1fr 120px 80px 60px;
  background:#f1f5f9;
  font-weight:600;
  color:#475569;
  padding:.75rem 1rem;
  column-gap:1rem;
  border-bottom:1px solid #e2e8f0;
}

/* list */
#reports-list{
  list-style:none;
  margin:0;
  padding:0;
}

#reports-list > li.no-reports > em {
  margin: .5rem;
}

.report-item{
  display:grid;
  grid-template-columns: 1fr 120px 80px 60px;
  align-items:center;
  column-gap:1rem;
  padding:.75rem 1rem;
  border-bottom:1px solid #f1f5f9;
}

.report-item:last-child{
  border-bottom:none;
}

.report-file{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#334155;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.report-file svg{
  flex-shrink:0;
  width:20px;
  height:20px;
  fill:#1a3662;                         /* purple file icon */
}

.report-action{
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}

.report-action svg{
  width:18px;
  height:18px;
  fill:#1a3662;
  transition:fill .15s;
}

.report-action:hover svg{
  fill:#1e40af;                         /* darker on hover */
}

/* tiny helper for visually-hidden labels (a11y) */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
  border:0;
}

/* ───────────────────────────────────────────────────────────── */


/* core icons grid, aligned left and limited to the column width above */
.core-grid{
  display:grid;
  gap:1rem;
  /* 1-wide on phones, 2-wide once there’s at least 480 px */
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
@media (min-width:480px){
  .core-grid{
    grid-template-columns:repeat(2,1fr);   /* explicit 2×2 when space allows */
  }
}
.core-box{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:.5rem;
  padding:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
}
.core-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background-size:60% auto;
  background-repeat:no-repeat;
  background-position:center;
}
.section-title{
  margin:0;
  font-size:1rem;
  color:#475569;
  font-weight:600;
}

/* ─── primary action button (Generate Report) client_profile.html ───────────── */
.btn.primary{
  /* colour + shadow (unchanged) */
  background:linear-gradient(135deg,#008D9E 0%,#008D9E 100%);
  color:#fff;
  border:none;
  box-shadow:0 2px 6px rgba(22,163,74,.35);

  /* ✨ size + spacing tweaks */
  display:inline-flex;          /* keeps it as wide as its text */
  align-items:center;
  gap:.5rem;                    /* space between icon & text */
  padding:.55rem 1.25rem;       /* thicker vertical padding, comfortable width */
  font-size:.925rem;            /* readable but not oversized */
  border-radius:.4rem;          /* slightly rounder corners */

  /* interaction */
  cursor:pointer;
  transition:filter .15s ease,box-shadow .15s ease;
}
.btn.primary:hover{
  filter:brightness(1.05);
  box-shadow:0 3px 8px rgba(5,150,105,.45);
}
.btn.primary:active{
  transform:translateY(1px);
  box-shadow:0 2px 5px rgba(5,150,105,.35);
}
.btn.primary:disabled{
  opacity:.6;
  cursor:default;
  box-shadow:none;
}

/* inline SVG still picks up currentColor */
.btn.primary svg{
  width:18px;
  height:18px;
  fill:currentColor;
  flex-shrink:0;
}

/* ─── Core-value score inputs ───────────────────────────── */
.score-grid{
  /* responsive layout */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem;                          /* space between each input */
  margin-bottom:1.5rem;              /* space below entire block */
}

.score-grid input[type="number"]{
  padding:.55rem .75rem;             /* bigger click / tap target */
  border:1px solid #e2e8f0;
  border-radius:.375rem;
  font-size:.9rem;
  text-align:center;                 /* numbers look nicer centred */
  width:100%;                        /* fill the grid cell */
  box-sizing:border-box;
}

/* ---------- wizard card ---------- */
.wizard{
  max-width:760px;              /* centred, not edge-to-edge */
  margin:2rem auto;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:.65rem;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
  padding:2rem;
}

/* field rows */
.form-row{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.25rem; }

/* inputs / selects / textareas */
.form-row input,
.form-row textarea,
.form-row select{
  width:100%; padding:.6rem .75rem;
  border:1px solid #e2e8f0; border-radius:.375rem;
  font-size:.9rem; box-sizing:border-box;
}
.form-row textarea{ resize:vertical; min-height:5.5rem; }

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus{
  outline:none; border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* nav buttons row */
.wizard-nav{ display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.5rem; }
.wizard-nav .btn{ padding:.55rem 1.4rem; font-size:.875rem; }

/* ─────────────────────────────── agent profile css ─────────────────────────────── */

.profile-cols {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
}

/* allow columns to wrap on smaller screens */
.profile-cols{ flex-wrap: wrap; }
@media (max-width: 900px){
  #profile-col-left,
  #profile-col-right{
    flex: 1 1 100%;
    width: 100%;
  }
}

/*push whole block right*/
#profile-col-left {
  max-width: 100%;
  flex: 1 1 0;
  margin-left: 0;
  padding-top: 0rem;
}

#profile-col-right {
  max-width: 100%;
  flex: 1 1 0;
  margin-left: 0;
  padding-top: 0rem;
}

/* header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e2e8f0 url('/media/icon.png') center/cover;
  flex-shrink: 0;
}

.profile-meta h2 {
  margin: 0 0 .25rem 0;
}

.profile-meta p {
  margin: 0;
  color: #475569;
  font-size: .9rem;
}

/* core-values grid */
.core-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 2rem;
}

.core-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.core-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: 60% auto;
  background-repeat: no-repeat;
  background-position: center;
}

/* quick-facts grid */
.info-grid {
  display: grid;
  gap: 1rem;
  
  margin-bottom: 2rem;
}

.info-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
}



.info-box > div:first-child > strong {
  display: block;
  font-size: .9rem;
  color: #475569;
  margin-bottom: .25rem;
}

/* textarea */
.notes {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  font-family: inherit;
}

/* ─────────────────────────────── questionnaire wizard container ─────────────────────────────── */

.questionnaire-page-wrapper {
  display: block;
  gap: 2rem;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: auto;
}



#wizard {
  margin-left: 1rem;
  max-width: 90%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .65rem;
  box-shadow: 0 3px 12px rgb(0 0 0 / .05);
  padding: 2rem;
}

#questionnaire-title, #step-indicator {
  text-align: center;
}


.form-step {
  display: none;
}

.form-step.active {
  display: block;

}

/* buttons */
form button {
  margin-top: 1rem;
  margin-right: .5rem;
  padding: .55rem 1.3rem;
  background: #1a3662;
  color: #fff;
  border: none;
  border-radius: .375rem;
  cursor: pointer;
  font-size: .875rem;
}

form button:hover {
  background: #1a3662;
}

/* quick-facts list */
.quick-facts {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.quick-facts li {
  display: flex;
  align-items: center;
  margin: .15rem 0;
}

.qf-icon {
  width: 16px;
  height: 16px;
  margin-right: .45rem;
  flex-shrink: 0;
}

.qf-label {
  font-weight: 600;
  margin-right: .25rem;
}

/* small action buttons (Edit / Save / Cancel) */
.btn-sm {
  font-size: .75rem;
  padding: .25rem .6rem;
  background: #1a3662;
  color: #fff;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
}

.btn-sm:hover {
  background: #1a3662;
}

/* inputs inside Quick-Facts edit-mode */
.qf-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #4b545f;
  border-radius: .25rem;
  padding: .15rem .35rem;
  font: inherit;
}

/* grid: 2 columns → pick | score  */
.trait-grid {
  display: grid;
  grid-template-columns: 1fr 110px;
  /* 110 px feels right for 0-36 */
  gap: .75rem 1rem;
  /* row gap │ column gap */
}

.trait-grid select,
.trait-grid input {
  width: 100%;
  padding: .4rem .45rem;
}

/* give every form-group a roomy gap */
.form-group{
  margin-bottom:1rem;             /* ↑ space between questions  */
}

/* question labels: bolder + bottom spacing */
.form-group > label{
  display:block;
  font-weight:600;
  color:#0f172a;
  margin-bottom:.5rem;              /* gap above first option    */
}

/* radio / checkbox rows: inline-flex keeps the circle & text aligned */
.form-group label{
  display:inline-flex;
  align-items:baseline;             /* text baseline lines up    */
  gap:.45rem;
  font-weight:500;
  color:#475569;
  margin:.7rem 0;                  /* vertical gap between rows */
  cursor:pointer;
}

/* bigger, brand-coloured input controls */
.form-group input[type="radio"],
.form-group input[type="checkbox"]{
  appearance:none;                  /* reset default circle/square */
  width:16px; height:16px;
  border:2px solid #64748b;
  border-radius:50%;                /* radio default */
  margin:0;                         /* remove Safari offset       */
  transition:border-color .15s,background .15s;
}

.form-group input[type="checkbox"]{ border-radius:.25rem; } /* squares */

.form-group input:checked{
  background:#1a3662;               /* navy fill when checked    */
  border-color:#1a3662;
}

/* ensure focus-visible ring for keyboard accessibility */
.form-group input:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* give long option groups slight indent so they're visually grouped */
.form-group > div{ padding-left:.25rem; }

/* tighten the nav buttons row */
.wizard-nav{
  display:flex;
  gap:.75rem;
  justify-content:flex-start;
  margin-top:1.75rem;
}

.trait-picks select { 
  display:block;
  margin:.4rem 0;
  width:100%;
}

#reports {
  display: none;
}

#settings {
  display: none;
}



html.embedded, body.embedded {
  margin: 0 !important;
  height: auto !important;
  overflow: hidden !important;      /* prevent inner scrollbars */
  background: transparent !important;
}
body.embedded header,
body.embedded footer,
body.embedded .sidebar,
body.embedded .topbar,
body.embedded .topbar-client {
  display: none !important;         /* strip chrome in embeds */
}
body.embedded main,
body.embedded .container {
  margin: 0 auto !important;
  padding: 1rem !important;
  max-width: 100%;                 /* comfortable width in embeds */
  box-sizing: border-box;
}
body.embedded .profile-col {
  margin-left: 0 !important;
}