/* ===== PCL Theme (PCL brand) ===== */
:root{
  /* Brand palette */
  --pcl-color-primary: #0066b3;           /* PCL_blue_primary */
  --pcl-color-primary-600:#00579a;
  --pcl-color-accent:  #bed62f;           /* PCL_Green_accent_success */
  --pcl-color-success: #bed62f;           /* treat accent as success */
  --pcl-color-warning: #d82b59;           /* optional (kept) */
  --pcl-color-danger:  #d82b59;           /* PCL_warning */

  /* Neutrals + text */
  --pcl-color-text:    #0d3954;           /* PCL_darker_blue */
  --pcl-color-bg:      #eaf1f4;           /* PCL_body_bg */
  --pcl-color-surface: #ffffff;           /* cards/sections */
  --pcl-color-soft:    #f7f9fb;
  --pcl-color-border:  #e3e8ee;

  /* Typography */
  --pcl-font-ui:   "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --pcl-font-head: "museo", serif; /* Museo for titles */

  --pcl-fs-xxs: 11px; --pcl-fs-xs: 12px; --pcl-fs-sm: 14px;
  --pcl-fs-md: 16px; --pcl-fs-lg: 18px; --pcl-fs-xl: 22px; --pcl-fs-2xl: 28px;

  /* Radius & shadow */
  --pcl-radius-sm: 8px; --pcl-radius-md: 12px; --pcl-radius-lg: 16px;
  --pcl-shadow-1: 0 2px 8px rgba(13,57,84,.08);
  --pcl-shadow-2: 0 10px 30px rgba(13,57,84,.14);

  /* Spacing */
  --pcl-gap-1: 6px; --pcl-gap-2: 10px; --pcl-gap-3: 14px; --pcl-gap-4: 20px;
}

.pcl-color-primary{color:#0066b3;}         /* PCL_blue_primary */
.pcl-color-primary-600{color:#00579a;} 
.pcl-color-accent{color:#bed62f;     }       /* PCL_Green_accent_success */
.pcl-color-success{color:#bed62f;    }        /* treat accent as success */
.pcl-color-warning{color:#d82b59;    }        /* optional (kept) */
.pcl-color-danger{color:#d82b59;    }        /* PCL_warning */

  /* Neutrals + text */
.pcl-color-text{color:#0d3954;      }      /* PCL_darker_blue */
.pcl-color-bg{color:#eaf1f4;     }       /* PCL_body_bg */
.pcl-color-surface{color:#ffffff;     }       /* cards/sections */
.pcl-color-soft{color:#f7f9fb;} 
.pcl-color-border{color:#e3e8ee;} 

.pcl-badge--info  { background:#eaf1f4; color:#fff; }
.pcl-badge--blue  { background:#eaf1f4; color:#fff; } /* upcoming */
.pcl-badge--alert { background:#d82b59; color:#fff; } /* outstanding */
.pcl-badge--ok    { background:#bed62f; color:#fff; } /* completed */

/* Base */
html, body{
  background: var(--pcl-color-bg);
  color: var(--pcl-color-text);
  font-family: var(--pcl-font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.pcl-ui h1, .pcl-ui h2, .pcl-ui h3, .pcl-ui h4, .pcl-ui h5, .pcl-ui h6{
  font-family: var(--pcl-font-head);
  color: var(--pcl-color-text) !important;
  font-weight: 700 !important;
  margin: .3em 0 .4em;
}
.pcl-ui h1{ font-size: var(--pcl-fs-2xl); line-height:1.2; }
.pcl-ui h2{ font-size: var(--pcl-fs-xl); line-height:1.3; }
.pcl-ui h3{ font-size: var(--pcl-fs-lg); line-height:1.35; }

/* ===== Header ===== */
.pcl-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pcl-gap-2) var(--pcl-gap-3);
  margin-bottom: var(--pcl-gap-4);
  background: var(--pcl-color-surface);
  border-bottom: 1px solid var(--pcl-color-border);
  box-shadow: var(--pcl-shadow-1);
}
.pcl-header__title {
  margin: 0;
  font-size: var(--pcl-fs-xl);
  font-weight: 600;
  font-family: var(--pcl-font-head);
  color: var(--pcl-color-text);
}

#pcl-sheet-menu-title {
  padding-top: 1rem;
}

/* ===== Buttons (Unified) ===== */
.pcl-btn {
  display: inline-flex;             /* use flex for vertical centering */
  align-items: center;
  justify-content: center;
  height: 38px;                     /* lock consistent height */
  padding: 0 14px;                  /* horizontal only */
  line-height: 1;                   /* kill extra line-height spacing */

  font-size: var(--pcl-fs-sm);
  font-weight: 600;
  border-radius: var(--pcl-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
  box-shadow: var(--pcl-shadow-1);

  border: 1px solid var(--pcl-color-primary);
  background: var(--pcl-color-primary);
  color: #fff !important;
  
  margin-top:0px;
}

.pcl-btn:hover {
  background: var(--pcl-color-primary-600);
  border-color: var(--pcl-color-primary-600);
  color: #fff !important;
  text-decoration: none;
}

/* Ghost variant */
.pcl-btn--ghost {
  background: transparent;
  color: var(--pcl-color-primary) !important;
  border: 1px solid var(--pcl-color-primary);
  box-shadow: none;
}
.pcl-btn--ghost:hover {
  background: rgba(0,102,179,.06);
  color: var(--pcl-color-primary) !important;
}

/* Danger variant (destructive action) */
.pcl-btn--danger {
  background: var(--pcl-color-danger);
  border-color: var(--pcl-color-danger);
  color: #fff !important;
}
.pcl-btn--danger:hover {
  background: #b82249; /* darker danger */
  border-color: #b82249;
  color: #fff !important;
}

/* Small size (for card actions) */
.pcl-btn--sm {
  padding: 11px 10px !important;
  font-size: var(--pcl-fs-xs);
  box-shadow: var(--pcl-shadow-1);
}

/* ===== Forms ===== */
.pcl-form .pcl-field { margin-bottom: 0px; }
.pcl-form .pcl-label {
  display: block; font-weight: 600; margin-bottom: 6px;
  font-size: var(--pcl-fs-sm); color: var(--pcl-color-text);
}
.pcl-form .pcl-input,
.pcl-form select,
.pcl-form textarea {
  width: 100%; max-width: 100%;
  border: 1px solid var(--pcl-color-border);
  border-radius: var(--pcl-radius-sm);
  padding: 8px 12px;
  font-size: var(--pcl-fs-sm);
  line-height: 1.4;
  background: #fff;
  color: var(--pcl-color-text);
  box-sizing: border-box;
  appearance: none;
}
.pcl-form .pcl-input:focus,
.pcl-form select:focus,
.pcl-form textarea:focus {
  outline: none;
  border-color: var(--pcl-color-primary);
  box-shadow: 0 0 0 2px rgba(0,102,179,.2);
}
.pcl-form textarea {
  resize: vertical;
  min-height: 90px;
}
/* Select dropdown indicator */
.pcl-form select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%230066b3' height='12' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 28px;
}

/* ===== Chips ===== */
.pcl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--pcl-fs-xs);
  border-radius: 999px;
  background: var(--pcl-color-soft);
  border: 1px solid var(--pcl-color-border);
  color: var(--pcl-color-text);
  font-weight: 700;
}
.pcl-chip__key { opacity: .7; font-weight: 600; }
.pcl-chip__val { font-weight: 600; }
.pcl-chip--success { background: #bed62f; border-color: #d9ec9b; color: #1a3e2b; }
.pcl-chip--warn    { background: #fff5e5; border-color: #fdd79c; color: #7a3e00; }
.pcl-chip--danger  { background: #fde7ed; border-color: #f7c0cf; color: #7d1630; }
.pcl-chip--info    { background: #e9f2fb; border-color: #cfe3f8; color: #0d3954; }

/* ===== Badges ===== */
.pcl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--pcl-fs-xxs);
  font-weight: 600;
  background: #e8eef3;
  color: var(--pcl-color-text);
  border: 1px solid var(--pcl-color-border);
}
.pcl-badge--ok    { background: #bed62f;
  color: #0d3954;
  border-color: #bed62f; }
.pcl-badge--muted { background: #eef2f6; color: #3d5b70; border-color: #dbe3ea; }
.pcl-badge--danger{ background: #fde7ed; color: #7d1630; border-color: #f7c0cf; }
.pcl-badge--alert { background:#d82b59; color:#fff; border-color: #d82b59;} /* outstanding */

/* ===== Flash Banners ===== */
.pcl-flash {
  padding: 12px 14px;
  border-radius: var(--pcl-radius-sm);
  font-size: var(--pcl-fs-sm);
  margin: 0 0 var(--pcl-gap-3);
  border: 1px solid transparent;
  box-shadow: var(--pcl-shadow-1);
}
.pcl-flash--success { background: #eef8d0; border-color: #d9ec9b; color: #1a3e2b; }
.pcl-flash--info    { background: #e9f2fb; border-color: #cfe3f8; color: #0d3954; }
.pcl-flash--error,
.pcl-flash--danger  { background: #ffe8ed; border-color: #f7c0cf; color: #7d1630; }


/* Generic card wrapper used across screens */
.pcl-card{
  background: var(--pcl-color-surface);
  border: 1px solid var(--pcl-color-border);
  border-radius: var(--pcl-radius-md);
  box-shadow: var(--pcl-shadow-1);
  padding: var(--pcl-gap-4);
}

/* Lightweight divider used in forms/sections */
.pcl-hr{
  border: 0;
  height: 1px;
  background: var(--pcl-color-border);
  margin: var(--pcl-gap-3) 0;
}

/* Shared action row (keeps spacing consistent across pages) */
.pcl-actions{
  display: flex;
  gap: var(--pcl-gap-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0px;
}

/* Section head (title row that is NOT the site header) */
.pcl-section-head{
  display:flex; align-items:center; gap: var(--pcl-gap-3);
  justify-content: space-between; margin: 0 0 var(--pcl-gap-3);
}
.pcl-section-head__title{
  margin:0; font-family: var(--pcl-font-head);
  font-size: var(--pcl-fs-xl); color: var(--pcl-color-text);
}
.pcl-section-head__actions{ display:flex; gap: var(--pcl-gap-2); }

/* === Global Filter Bar Styling === */
.pcl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcl-gap-3);
  align-items: flex-end;           /* align bottoms of all controls */
  margin-bottom: var(--pcl-gap-4);
}

/* Make all fields equal width */
.pcl-filters .pcl-field {
  flex: 1 1 280px;                 /* both fields grow equally */
  min-width: 240px;
}

/* Keep inputs/selects consistent height */
.pcl-filters .pcl-input,
.pcl-filters select {
  height: 38px;                    /* matches form controls */
}

/* Actions block */
.pcl-filters .pcl-actions {
  display: flex;
  gap: var(--pcl-gap-2);
  margin-left: auto;
  align-items: stretch;            /* stretch children to equal height */
}

/* Fix filter bar alignment */
.pcl-filters .pcl-field { margin-bottom: 0; }   /* kill form-row gap in filters */
.pcl-filters .pcl-actions { margin-top: 0; }    /* override global .pcl-actions top margin */

/* Buttons inside filters */
.pcl-filters .pcl-btn,
.pcl-filters .pcl-btn.pcl-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;                    /* same height as inputs */
  padding: 0 14px;                 /* consistent horizontal padding */
  line-height: 1;
}

/* === Generic list pattern (keep this!) === */
.pcl-list { list-style: none; margin: 0; padding: 0 !important; }
.pcl-list__item {
  display: flex;
  align-items: center;
  gap: var(--pcl-gap-2);
  padding: 10px 0;
}
.pcl-list--divided .pcl-list__item {
  border-bottom: 1px solid var(--pcl-color-border);
}
.pcl-list--divided .pcl-list__item:last-child {
  border-bottom: none;
}
.pcl-spacer { flex: 1 1 auto; }


/* Compact site tile */
.pcl-site-tile{
  border: 1px solid var(--pcl-color-border);
  border-radius: var(--pcl-radius-sm);
  padding: var(--pcl-gap-3);
  background: var(--pcl-color-surface);
  display: flex;
  flex-direction: column;
}
.pcl-site-tile__title{
  margin-bottom: 6px;
  font-weight: 700;
  line-height: 1.3;
}

.pcl-group h3 {
  padding-bottom: 0px;
  padding-top: 12px;
}

/* Use normal text color, underline on hover (not light blue) */
.pcl-link{
  color: inherit;
  text-decoration: none;
}
.pcl-link:hover{ text-decoration: underline; }

.pcl-site-tile__meta{
  display: flex;
  gap: var(--pcl-gap-2);
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.pcl-site-tile__actions{
  margin-top: auto; /* pushes button to the bottom if tile grows */
}

/* Compact row layout for sites */
.pcl-site-row {
  display: flex;
  align-items: center;
  gap: var(--pcl-gap-3);
  padding: var(--pcl-gap-2) var(--pcl-gap-3);
  border: 1px solid var(--pcl-color-border);
  border-radius: var(--pcl-radius-sm);
  background: var(--pcl-color-surface);
}

.pcl-site-row__title {
  font-weight: 600;
  flex: 1; /* take available space */
}

.pcl-site-row__meta {
  display: flex;
  gap: var(--pcl-gap-2);
  flex-wrap: wrap;
}

.pcl-site-row__actions {
  margin-left: auto; /* push button to far right */
}

/* Responsive stacking for site rows */
@media (max-width: 700px){
  .pcl-site-row{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pcl-gap-2);
  }
  .pcl-site-row__actions{
    margin-left: 0;   /* reset the push-to-right */
    width: 100%;      /* button spans full width */
  }
  .pcl-site-row__actions .pcl-btn{
    width: 100%;
    justify-content: center;
  }
}

/* Accordion for job buckets */
.pcl-acc { border-top: 1px solid var(--pcl-color-border); }
.pcl-acc:first-child { border-top: 0; }

.pcl-acc__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--pcl-gap-2);
  padding: 10px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.pcl-acc__chev { transition: transform .2s ease; font-weight: 700; }
.pcl-acc.is-open .pcl-acc__chev { transform: rotate(90deg); }

.pcl-acc__title { font-weight: 700; }
.pcl-acc__panel { display: none; padding: 6px 0 10px; }
.pcl-acc.is-open .pcl-acc__panel { display: block; }


/* --- Sites filter card --- */
.pcl-sites__filters {
  margin-bottom: var(--pcl-gap-4);
  padding: var(--pcl-gap-4);
  border-radius: var(--pcl-radius, 8px);
  background: #fff;
  box-shadow: var(--pcl-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

/* grid layout for fields */
.pcl-sites__filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: var(--pcl-gap-3, 1rem);
  margin-bottom: var(--pcl-gap-3, 1rem);
}

/* field & label */
.pcl-sites__filters .pcl-field {
  display: flex;
  flex-direction: column;
}

.pcl-sites__filters .pcl-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--pcl-muted, #555);
}

/* inputs & selects */
.pcl-sites__filters .pcl-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pcl-border, #ccc);
  border-radius: var(--pcl-radius, 6px);
  font-size: 0.9rem;
  width: 100%;
}

/* actions row */
.pcl-sites__filters .pcl-actions {
  display: flex;
  align-items: center;
  gap: var(--pcl-gap-2, 0.5rem);
}

/* export links (align right) */
.pcl-sites__filters .pcl-spacer {
  flex: 1;
}

.pcl-sites__filters .pcl-export a {
  margin-left: var(--pcl-gap-2, 0.5rem);
  font-size: 0.9rem;
  color: var(--pcl-link, #0066cc);
  text-decoration: none;
}

.pcl-sites__filters .pcl-export a:hover {
  text-decoration: underline;
}

/* --- Sites card layout --- */

.pcl-card.pcl-sites__card {
  margin-bottom: 12px;
}

.pcl-sites__card-body {
  padding: var(--pcl-gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--pcl-gap-3);
}

.pcl-sites__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--pcl-gap-3);
}

.pcl-sites__info-left {
  flex: 1 1 60%;
}

.pcl-sites__info-right {
  flex: 1 1 35%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcl-gap-2);
  justify-content: flex-end;
}

.pcl-sites__card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--pcl-gap-2);
  display: flex;
  align-items: center;
  gap: var(--pcl-gap-2);
}

.pcl-sites__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcl-gap-2);
}

.pcl-sites__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcl-gap-2);
  border-top: 1px solid var(--pcl-border-color, #ddd);
  padding-top: var(--pcl-gap-3);
}

/* --- Normalize site action buttons (use PCL palette) --- */
.pcl-sites__actions .pcl-btn-small,
.pcl-sites__actions .button--ghost {
  display: inline-block;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Primary button → PCL blue */
.pcl-sites__actions .pcl-btn-small {
  background: #0066b3;       /* PCL_blue_primary */
  color: #fff;
  border-color: #0066b3;
}
.pcl-sites__actions .pcl-btn-small:hover {
  background: #00579a;       /* darker blue */
  border-color: #00579a;
}

/* Ghost (History button) → neutral border */
.pcl-sites__actions .button--ghost {
  background: transparent;
  color: #0d3954;            /* PCL_darker_blue */
  border: 1px solid #e3e8ee; /* PCL_border */
}
.pcl-sites__actions .button--ghost:hover {
  background: #f7f9fb;       /* PCL_soft */
}

/* Update / Assign → PCL green */
.pcl-sites__actions .pcl-btn--success {
  background: #bed62f;       /* PCL_Green_accent_success */
  color: #0d3954;            /* dark blue text for contrast */
  border-color: #bed62f;
}
.pcl-sites__actions .pcl-btn--success:hover {
  opacity: 0.9;
}

/* Danger → PCL red */
.pcl-sites__actions .pcl-btn--danger {
  background: #d82b59;       /* PCL_danger */
  color: #fff;
  border-color: #d82b59;
}
.pcl-sites__actions .pcl-btn--danger:hover {
  opacity: 0.9;
}

.pcl-sites__actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.pcl-sites__actions-left,
.pcl-sites__actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* --- View Clients: Header --- */
/* --- View Clients: Header --- */
/* --- View Clients: Header --- */

/* --- Override site-header look on Clients page --- */
.pcl-header--clients {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: var(--pcl-gap-4, 1.5rem);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pcl-header--clients .pcl-header__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--pcl-color-text, #0d3954);
}

.pcl-view-clients .pcl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--pcl-gap-4, 1.5rem);
  background: transparent;   /* ✅ no white box */
  border: none;              /* ✅ no border */
  padding: 0;                /* ✅ flush with page */
}

.pcl-view-clients .pcl-header__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pcl-color-text, #0d3954);
  margin: 0;
}

.pcl-view-clients .pcl-btn--primary {
  background: var(--pcl-color-primary, #0066b3);
  color: #fff;
  border: 1px solid var(--pcl-color-primary, #0066b3);
  padding: 0.6rem 1rem;
  border-radius: var(--pcl-radius, 6px);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, opacity 0.2s;
}
.pcl-view-clients .pcl-btn--primary:hover {
  opacity: 0.9;
}

/* --- Filter form --- */
.pcl-view-clients .pcl-form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: var(--pcl-gap-3, 1.25rem);
  padding: 1rem;
  background: var(--pcl-color-surface, #fff);
  border: 1px solid var(--pcl-color-border, #e3e8ee);
  border-radius: var(--pcl-radius, 6px);
}

.pcl-view-clients .pcl-form--inline .pcl-field {
  flex: 1;
  min-width: 220px;
}

.pcl-view-clients .pcl-form--inline .pcl-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pcl-color-border, #e3e8ee);
  border-radius: var(--pcl-radius, 6px);
  font-size: 0.95rem;
}

.pcl-view-clients .pcl-form--inline .pcl-actions {
  display: flex;
  gap: 0.5rem;
}

.pcl-view-clients .pcl-form--inline .pcl-btn {
  padding: 0.5rem 0.9rem;
  border-radius: var(--pcl-radius, 6px);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s, opacity 0.2s;
}

.pcl-view-clients .pcl-form--inline .pcl-btn {
  background: var(--pcl-color-primary, #0066b3);
  color: #fff;
  border-color: var(--pcl-color-primary, #0066b3);
}

.pcl-view-clients .pcl-form--inline .pcl-btn--ghost {
  background: transparent;
  color: var(--pcl-color-primary, #0066b3);
  border-color: var(--pcl-color-border, #e3e8ee);
}
.pcl-view-clients .pcl-form--inline .pcl-btn--ghost:hover {
  background: var(--pcl-color-soft, #f7f9fb);
}

/* Client cards */
.pcl-client-card {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  margin-bottom:12px;
}

/* Top row: title + @handle + avatar */
.pcl-client-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pcl-client-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pcl-client-card__avatar .pcl-avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
}

/* Created row */
.pcl-client-card__subhead {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: var(--pcl-color-text, #0d3954);
  opacity: 0.7;
}

/* Email + company pills */
.pcl-client-card__body {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pcl-client-card__body .pcl-chip a {
  color: inherit;
  text-decoration: underline;
}

/* Action buttons aligned right */
.pcl-client-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- User Badge Wrapper --- */
.pcl-user-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--pcl-color-surface, #fff);
  border: 1px solid var(--pcl-color-border, #e3e8ee);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  max-width: 320px;
}

/* --- Avatar --- */
.pcl-user-badge__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pcl-color-soft, #f7f9fb);
  border: 1px solid var(--pcl-color-border, #e3e8ee);
}

.pcl-user-badge__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder initials */
.pcl-user-badge__avatar--placeholder {
  background: var(--pcl-color-primary, #0066b3);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
}

.pcl-user-badge__initials {
  line-height: 1;
}

/* --- Text body --- */
.pcl-user-badge__body {
  display: flex;
  flex-direction: column;
}

.pcl-user-badge__name {
  font-weight: 600;
  color: var(--pcl-color-text, #0d3954);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.pcl-user-badge__role {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pcl-color-primary, #0066b3);
}

/* --- Account wrapper --- */
.pcl-account {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- Header --- */
.pcl-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pcl-account__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--pcl-color-text, #0d3954);
}

/* --- Grid for the two cards --- */
.pcl-account__grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .pcl-account__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Individual cards --- */
.pcl-account__card {
  padding: 1.25rem;
  background: var(--pcl-color-surface, #fff);
  border: 1px solid var(--pcl-color-border, #e3e8ee);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pcl-account__card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--pcl-color-text, #0d3954);
}

/* --- Avatar preview --- */
.pcl-account__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pcl-color-soft, #f7f9fb);
  border: 1px solid var(--pcl-color-border, #e3e8ee);
}

.pcl-account__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcl-account__placeholder {
  font-size: 0.9rem;
  color: #777;
}

/* --- Form inside cards --- */
.pcl-account__form .pcl-field {
  margin-bottom: 1rem;
}

.pcl-account__form .pcl-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--pcl-color-text, #0d3954);
}

.pcl-account__form .pcl-req {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pcl-color-danger, #d82b59);
}

.pcl-account__form .pcl-help {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.25rem;
  display: block;
}

.pcl-account__form .pcl-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--pcl-color-border, #e3e8ee);
  border-radius: 6px;
  font-size: 0.9rem;
}

/* --- Actions --- */
.pcl-account__form .pcl-actions {
  display: flex;
  justify-content: flex-end;
}

.pcl-account__form .pcl-actions button {
  background: var(--pcl-color-primary, #0066b3);
  border: 1px solid var(--pcl-color-primary, #0066b3);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.pcl-account__form .pcl-actions button:hover {
  opacity: 0.9;
}

/* Job line container */
.pcl-job-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Make address link stand out */
.pcl-job-link {
  font-weight: 600;
  color: var(--pcl-color-primary, #0066b3);
  text-decoration: none;
}
.pcl-job-link:hover {
  text-decoration: underline;
}
.pcl-job-link__arrow {
  margin-left: 0.25rem;
  font-weight: bold;
}

/* Pills */

.pcl-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 999px;
  background: var(--pcl-color-soft, #f7f9fb);
  color: var(--pcl-color-text, #0d3954);
}

.pcl-pill--area {
  background: var(--pcl-color-soft, #f7f9fb);
  color: var(--pcl-color-primary, #0066b3);
  border: 1px solid var(--pcl-color-border, #e3e8ee);
}

.pcl-pill--prop {
  background: var(--pcl-color-bg, #eaf1f4);
  color: var(--pcl-color-text, #0d3954);
}

.pcl-pill--success {
  background: var(--pcl-color-success, #bed62f);
  color: #fff;
}

.pcl-job-link {
  font-weight: 600;
  color: var(--pcl-primary, #0066b3);
  text-decoration: none;
}
.pcl-job-link:hover {
  text-decoration: underline;
}

.pcl-pill--ok {
  background: #bed62f;
  color: #fff;
}
.pcl-pill--muted {
  background: #eaf1f4;
  color: #0d3954;
}

/* Staff job clickable address */
.pcl-job-link--primary {
  font-weight: 600;
  color: #0066b3; /* PCL blue */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.pcl-job-link--primary:hover {
  color: #00579a; /* darker blue on hover */
  border-color: #00579a;
  text-decoration: underline;
}

.pcl-fieldset {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--pcl-color-border, #e3e8ee);
  border-radius: 6px;
  background: #eaf1f40d;
}
.pcl-legend {
  font-weight: 600;
  margin-bottom: .5rem;
  background: #eaf1f4;
  padding: 0px 12px;
  box-shadow: #fff 2px 2px;
  border-radius: 3px;
}
.pcl-upload-wrap label {
  display: block;
  margin-top: .5rem;
}

input[type="file"].pcl-input {
  border: 1px dashed var(--pcl-color-border, #e3e8ee);
  padding: .5rem;
  background: #fff;
}

.pcl-field textarea {
  min-height: 120px;
  margin-bottom: 12px;
}

.pcl-complete-job__form {
  margin-top: 22px;
}

.pcl-job-text {
  color: #444;
  font-weight: 500;
}

.pcl-pill--not-due {
  background-color: #f7d7ba;
  color: #5a2d0c; /* darker text for contrast */
  border: 1px solid #e0b899;
}

.pcl-staff-card__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .5rem;
}

.pcl-user-badge__avatar img,
.pcl-user-badge__avatar--placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #555;
}

.pcl-field.team-manage {
  margin-bottom: 22px;
}

.pcl-card.pcl-staff-card.pcl-card-bottom {
  margin-bottom: 12px;
}

/* =========================
   Staff Team Pills (PCL)
   ========================= */

/* Core teams (A–E) */
.pcl-pill--team-a { 
  background: #bed62f;  /* PCL accent/success green */
  color: #0d3954;       /* darker blue text */
}
.pcl-pill--team-b { 
  background: #0066b3;  /* PCL primary blue */
  color: #ffffff;       /* white text for contrast */
}
.pcl-pill--team-c { 
  background: #00579a;  /* darker primary blue */
  color: #ffffff; 
}
.pcl-pill--team-d { 
  background: #eaf1f4;  /* PCL body background (light) */
  color: #0d3954; 
}
.pcl-pill--team-e { 
  background: #f7f9fb;  /* soft neutral */
  color: #0d3954; 
}

/* Special cases */
.pcl-pill--all { 
  background: #0066b3;  /* primary blue */
  color: #ffffff; 
}
.pcl-pill--remove { 
  background: #f7d7ba;  /* muted orange (custom) */
  color: #0d3954; 
}
.pcl-pill--unassigned { 
  background: #e3e8ee;  /* border grey */
  color: #0d3954; 
}

.pcl-actions.pcl-exports {
  margin-top: 12px;
}

.pcl-client-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.pcl-stat-card { padding: 12px; }
.pcl-stat-header {
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
    font-weight:600;
    color:#0d3954; /* PCL darker blue */
}
.pcl-stat-bar {
    height:10px;
    background:#eaf1f4; /* PCL body bg */
    border-radius:5px;
    overflow:hidden;
}
.pcl-stat-bar-fill {
    height:100%;
    background:#bed62f; /* PCL green accent */
    width:0; /* start collapsed */
    transition:width 0.6s ease;
}

.pcl-ring svg { width: 48px; height: 48px; }
.pcl-ring .bg {
  fill: none;
  stroke: #eaf1f4; /* neutral background */
  stroke-width: 4;
}
.pcl-ring .progress {
  fill: none;
  stroke: #bed62f; /* PCL accent green */
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease-out;
}
.pcl-ring-value {
  position: absolute;
  font-size: 14px;
  font-weight: 600;
  color: #0d3954;
}
.pcl-ring.small { position: relative; display: inline-flex; justify-content: center; align-items: center; }

.pcl-ring {
  position: relative;
  display: inline-block;
}


.pcl-client-stats-wrap {
  margin-bottom: 2rem;
}
.pcl-stats-range {
  color: #0d3954;
  margin-bottom: 1rem;
}
.pcl-client-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.pcl-stat-flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pcl-ring.small svg {
  width: 48px;
  height: 48px;
}
.pcl-ring.small .pcl-ring-value {
  font-size: 0.9rem;
}

.pcl-actions.action-margin-top {
  margin-top: 12px;
}

/* History box styling */
.pcl-history {
  margin-top: 20px;
}

.pcl-history__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #0d3954; /* PCL darker blue */
}

.pcl-history__list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* space between cards */
}

.pcl-history__card {
  padding: 16px;
  border: 1px solid #e3e8ee; /* PCL border */
  border-radius: 8px;
  background: #fff; /* surface */
}

.pcl-history__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pcl-history__dt {
  font-weight: 600;
  color: #0d3954;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pcl-history__addr {
  font-family: var(--pcl-font-head);
  font-size: 1.35rem;
  font-weight:600;
  margin-bottom: 12px;
  color: #0d3954;
}

.pcl-history__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.pcl-chip {
  background: #eaf1f4;
  color: #0d3954;
  border-radius: 24px;
  padding: 4px 10px;
  font-size: 0.85rem;
  display: flex;
  gap: 4px;
}

.pcl-chip__key {
  font-weight: 600;
}

.pcl-history__actions {
  text-align: right;
}

/* Delete site confirm page */
.pcl-delete {
  max-width: 640px;
  margin: 0 auto;
}

.pcl-delete__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #0d3954; /* PCL darker blue */
}

.pcl-delete__summary {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #e3e8ee; /* PCL border */
  border-radius: 8px;
  background: #fff;
}

.pcl-delete__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pcl-delete__label {
  font-weight: 600;
  color: #0d3954;
}

.pcl-delete__value {
  color: #0d3954;
}

.pcl-delete__alert {
  margin: 20px 0;
}

.pcl-delete__form .pcl-field {
  margin-bottom: 16px;
}

.pcl-delete__form .pcl-actions {
  display: flex;
  gap: 12px;
}

.add-client-style{
    margin-top:12px;
}

.action-space{
    margin-top:12px;
}

.pcl-edit-client__identity {
  display: flex;
  align-items: center;
  gap: 8px; /* space between name and chip */
  margin-bottom: 1rem;
}

.pcl-edit-client__name {
  font-weight: 600;
  color: #0d3954; /* PCL darker blue */
}

.pcl-section-head__title.pcl-title-slight {
  margin-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 22px;
}

/* For all pcl-form labels */
.pcl-form .pcl-field .pcl-label {
    display: block;
    margin-bottom: 4px;  /* space below label */
    margin-top: 8px;     /* optional: give breathing room above */
    font-weight: 600;    /* optional: improve readability */
}

.pcl-form .pcl-input {
    margin-top: 0;  /* prevent pushing away from label */
}