.dash-wrap{
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

@media (max-width: 980px){
  .dash-wrap{ grid-template-columns: 1fr; }
}

.dash-col{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dash-card{
  border: 1px solid #11111111;
  border-radius: 14px; 
  background: #fff;
  padding: 18px;
}

.dash-card__header{
  padding: 14px 16px 0 16px;
}

.dash-card__header h2{
  margin: 0 0 6px 0;
  font-size: 22px;
}

.dash-card__header h3{
  margin: 0 0 6px 0;
  font-size: 18px;
}

.dash-card__body{
  padding: 12px 16px 16px 16px;
}

.site-info h3{
  margin: 0 0 10px 0;
  font-size: 18px;
}

.kv{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  margin: 0;
}

.kv dt{ font-weight: 600; }
.kv dd{ margin: 0; }

.dash-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dash-table th,
.dash-table td{
  border: 2px solid #111;
  padding: 8px 10px;
  vertical-align: top;
  font-size: 14px;
}

.dash-table th{
  font-weight: 700;
  background: #fff;
}

.truncate{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-right{
  text-align: right;
}

.dash-note{
  margin: 10px 0 0 0;
  font-style: italic;
  color: #333;
}

.muted{
  color: #333;
}

.dash-filter{
  margin: 0 0 10px 0;
}

.dash-input{
  width: 100%;
  padding: 8px 10px;
  border: 2px solid #111;
  font-size: 14px;
}

.btn-link{
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid #111;
  text-decoration: none;
  color: #111;
  font-size: 13px;
}

.btn-link:hover{
  background: #f2f2f2;
}

.row-strike td{
  text-decoration: line-through;
  opacity: 0.7;
}

.milestones{
  margin-top: 8px;
}

.milestone-tier{
  margin: 10px 0;
}

.milestone-tier ul{
  margin: 6px 0 0 18px;
}

.date-chip{
  border: 2px solid #111;
  padding: 1px 6px;
  display: inline-block;
}

.quality{
  margin-top: 14px;
}

.page{
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 24px;
}

.panel{
  border: 1px solid #e6e6e6;   /* lighter border */
  border-radius: 14px;         /* rounded corners */
  background: #fff;
  padding: 18px;
  padding: 16px;
  margin: 18px 0;
  background: #fff;
}

.grid{
  width: 100%;
  border-collapse: collapse;
}

.grid th, .grid td{
  border: 2px solid #111;
  padding: 8px 10px;
  vertical-align: top;
}

.input{
  width: 100%;
  padding: 6px 8px;
  border: 2px solid #111;
}

.actions{
  white-space: nowrap;
}

.btn{
  border: 2px solid #111;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
}

.btn.danger{
  background: #ffecec;
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.subnav{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom: 14px;
}
.subnav .spacer{ flex: 1; }

/* Constrain inputs to their table cells */
.admin-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  overflow: hidden;         /* key: prevent spillover */
}

.admin-table input[type="text"],
.admin-table input[type="number"],
.admin-table select,
.admin-table textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;   /* key: include padding/border in width */
  display: block;
}

.admin-table { width: 100%; table-layout: fixed; }
.admin-table th, .admin-table td { overflow: hidden; }
.btn.btn-sm { padding: 4px 8px; font-size: 0.9em; }

/* Denser list tables on site detail/list pages */
.compact-list-table{
  font-size: 12px;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

.compact-list-table th,
.compact-list-table td{
  padding: 5px 6px;
  line-height: 1.2;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 200px;
}

/* Horizontal scroll inside panels for wide tables */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Let the table grow wider than the panel when needed */
.table-scroll .admin-table{
  width: max-content;   /* grow to fit content */
  min-width: 100%;      /* but never smaller than the panel */
  table-layout: auto;   /* allow columns to size naturally */
}

/* Optional: keep headers on one line (pairs nicely with horizontal scroll) */
.table-scroll .admin-table th{
  white-space: nowrap;
}

.page-narrow{
  max-width: 900px;     /* try 800–1000 */
  margin: 0 auto;       /* center */
}

.page h1{
  margin-top: 0;
}

.page{
  padding-top: 1px;   /* try 12–24px */
}

/* Dashboard 3-column layout */
.dash-grid{
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.1fr;  /* left / middle / right */
  gap: 18px;
  align-items: start;
}

.dash-mid{
  display: grid;
  gap: 18px;
}

.dash-panel h2{
  margin-top: 0;
}

.org-list{ margin-top: 12px; }
.org-name{ font-weight: 700; margin: 10px 0 6px; }
.site-list{ margin: 0 0 12px 18px; padding: 0; }
.site-list li{ margin: 4px 0; }

.mini-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.mini-list li{
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
}
.mini-list li a{ flex: 1; text-decoration: underline; }
.mini-list .right{ margin-left: auto; white-space: nowrap; }

.dash-sep{ margin: 14px 0; }

/* Simple tabs */
.tabs{ display:flex; gap:10px; margin: 10px 0 16px; }
.tab{
  padding: 6px 10px;
  border: 1px solid #000;
  text-decoration: none;
  background-color: white;
}
.tab.active{
  background: #000;
  color: #fff;
}

.site-filter{
  width: 240px;     /* pick what you like (200–320 is common) */
  max-width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand-logo {
  height: 48px;   /* tweak */
  width: auto;
  display: block;
}

/* Dashboard org/site layout */
.page.dash-sites{
  max-width: 1560px;
  margin: 18px auto;
  padding: 0 14px;
}

.dash-sites-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 12px;
}

.dash-sites-search {
  min-width: 230px;
}

.dash-sites-search .input {
  width: min(520px, 100%);
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  align-items: start;
}

.org-card{
  margin: 0;
  padding: 10px 12px;
}

.org-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  background: #fff;  
}

.org-card-head h2{
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 650;
}

.site-list {
  margin: 6px 0 0;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 4px;
  list-style: none;
}

.site-item {
  margin: 0;
  line-height: 1.2;
  min-width: 0;
  position: relative;
  padding-left: 12px;
}

.site-item::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: #111;
  line-height: 1;
}

.no-matches {
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 950px) {
  .dash-sites-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .org-grid {
    grid-template-columns: 1fr;
  }
  .site-list {
    grid-template-columns: 1fr;
  }
}

.site-filter {
  border: 1px solid #e6e6e6;   /* lighter border */
  border-radius: 10px;         /* rounded corners */
  padding: 8px 10px;
  outline: none;
}

/* optional: nicer focus state */
.site-filter:focus {
  border-color: #cfcfcf;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.site-link,
.site-link:visited {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;     /* no underline */
}

.site-link:hover,
.site-link:focus {
  text-decoration: underline; /* optional: show underline only on hover/focus */
}

.tier-legend{
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 6px 0 18px;
  flex-wrap: wrap;
}

.tier-key{
  font-weight: 700;
  color: var(--tier-color);
}

.org-sections{
  margin-top: 8px;
}

.org-section + .org-section{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.org-section-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}

.org-section-head h3{
  margin: 0;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #666;
}

.site-link{
  color: var(--tier-color);
}

.tier-key{
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--tier-color, #111);
}

.tier-key:hover{
  border-color: #bbb;
}

.tier-key.is-active{
  border-color: var(--tier-color, #111);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-color, #111) 20%, transparent);
}

.overview-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: start;
}

.overview-site{
  grid-row: span 3;
}

.panel-title-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.small-link{
  font-size: 0.9em;
  text-decoration: none;
}

.kv{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 14px;
  margin: 0;
}

.kv dt{ font-weight: 700; color: #444; }
.kv dd{ margin: 0; overflow-wrap: anywhere; }

.simple-list{
  margin: 0;
  padding-left: 18px; /* keep bullets */
}
.simple-list li{
  margin: 8px 0;
}

@media (max-width: 980px){
  .overview-grid{ grid-template-columns: 1fr; }
  .overview-site{ grid-row: auto; }
}

/* 2-column overview layout */
.site-overview-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 16px;
}

/* Card look */
.card{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 18px 20px;
}

.card-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.card h2{
  margin: 0;
  font-size: 18px;
}

/* “View all” link and the expand button */
.mini-link,
.link-btn{
  font-size: 13px;
  color: #4b0f78;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.mini-link:hover,
.link-btn:hover{
  text-decoration: underline;
}

/* Collapsible Site Profile */
.collapsible{
  max-height: 260px;      /* collapsed height */
  overflow: hidden;
  position: relative;
}

/* fade at bottom when collapsed */
.collapsible::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

.site-profile.expanded .collapsible{
  max-height: none;        /* expanded: full height */
}
.site-profile.expanded .collapsible::after{
  display: none;
}

/* Preview lists */
.preview-list{
  list-style: disc;
  margin: 0 0 0 18px;
  padding: 0;
}
.preview-item{
  margin: 10px 0;
}
.row-between{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.small{ font-size: 13px; }

/* Key/value display for Site Profile */
.kv{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.kv dt{
  font-weight: 700;
}
.kv dd{
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Responsive: stack to 1 col on small screens */
@media (max-width: 900px){
  .site-overview-grid{
    grid-template-columns: 1fr;
  }
  .site-profile,
  .overview-milestones,
  .overview-contacts,
  .overview-interactions,
  .overview-action-items{
    grid-column: 1;
  }
}

.contact-one-line {
  display: block;
  margin: 0;
  padding: 2px 0;     /* tighter rows */
  line-height: 1.2;   /* more compact */
}

.preview-list { margin: 0; padding-left: 18px; }
.preview-item { margin: 0; }
.contact-one-line { padding: 2px 0; line-height: 1.2; }

.overview-cols{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.overview-col{
  flex: 1;
  min-width: 0;              /* prevents overflow issues */
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Mobile: stack columns */
@media (max-width: 980px){
  .overview-cols{ flex-direction: column; }
}

/* --- Overview grid (prevents right cards stretching tall) --- */
.site-overview-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  align-items: start;          /* KEY: don't stretch cards to row height */
}

@media (max-width: 1100px){
  .site-overview-grid{ grid-template-columns: 1fr; }
}

/* --- Card base --- */
.card{
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
  padding: 18px 18px 14px;
  align-self: start;           /* KEY: prevents tall empty cards */
}

.card-head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.card-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* links that look like small actions */
.mini-link{
  font-size: 13px;
  color: #4b0f78;
  text-decoration: none;
}
.mini-link:hover{ text-decoration: underline; }

.link-btn{
  border: 0;
  background: transparent;
  color: #4b0f78;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
}
.link-btn:hover{ text-decoration: underline; }

/* --- Truncation helpers --- */
.truncate-1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Preview lists --- */
.preview-list{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.preview-item{
  padding: 8px 0;
  border-top: 1px solid #efefef;
}
.preview-item:first-child{ border-top: 0; }

.preview-link{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.preview-link:hover .preview-text{ text-decoration: underline; }

.preview-text{
  min-width: 0;      /* KEY for ellipsis in flex */
  flex: 1 1 auto;
}

.preview-meta{
  flex: 0 0 auto;
  font-size: 12px;
  color: #666;
}

/* --- Key/Value list in Site Profile --- */
.kv{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.kv dt{
  font-weight: 700;
  color: #333;
}
.kv dd{
  margin: 0;
  min-width: 0; /* KEY so ellipsis works */
}

/* --- Expand button bottom-right --- */
.expand-row{
  display:flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Collapsible behavior */
.collapsible{
  max-height: 200px;
  overflow: hidden;
}
.site-profile.expanded .collapsible{
  max-height: none;
}

/* Layout */
.site-overview-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;

  grid-template-areas:
    "site contacts"
    "site interactions"
    "milestones actions";
}


.overview-col{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch; /* important */
  min-width: 0;
}

.overview-col > .card{
  width: 100%;          /* important */
  max-width: none;      /* overrides old rules */
  box-sizing: border-box;
  display: block;       /* prevents inline-block shrink */
}




.site-profile{ grid-area: site; }
.overview-contacts{ grid-area: contacts; }
.overview-interactions{ grid-area: interactions; }
.overview-action-items{ grid-area: actions; }
.overview-milestones{ grid-area: milestones; }

/* Place cards (this is what keeps Interactions on the RIGHT) */
/* .site-profile{ grid-column:1; grid-row:1 / span 2; }
.overview-contacts{ grid-column:2; grid-row:1; }
.overview-interactions{ grid-column:2; grid-row:2; }
.overview-milestones{ grid-column:1; grid-row:3; }
.overview-action-items{ grid-column:2; grid-row:3; }
 */
/* Truncation */
.truncate{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* One-line rows */
.preview-item a{
  text-decoration:none;
  font-weight:700;
}
.preview-item a:hover{
  text-decoration:underline; /* optional */
}

/* Optional: keep meta text less heavy */
.preview-item .meta{
  font-weight:400;
  opacity:.75;
}

/* --- Site detail: make preview rows actually feel clickable --- */
.site-overview-grid .preview-link{
  display: block;          /* whole row clickable */
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.site-overview-grid .preview-link:hover{
  text-decoration: underline;
}

/* If anything is overlaying rows, this helps ensure the anchor wins */
.site-overview-grid .preview-item{
  position: relative;
}

.site-overview-grid .preview-text{
  display: block;
}

/* Your template uses truncate-1; define it if you don’t already */
.site-overview-grid .truncate-1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Site Profile: ensure Expand shows + sits bottom-right --- */
.site-overview-grid .site-profile{
  display: flex;
  flex-direction: column;
}

.site-overview-grid .site-profile .card-body{
  flex: 1 1 auto;
}

.site-overview-grid .site-profile .card-foot{
  display: flex;
  justify-content: flex-end;   /* bottom-right */
  padding-top: 8px;
}

/* Your Expand is a <button class="mini-link">; make it render like a link */
.site-overview-grid button.mini-link{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* --- Fix Site Profile expand/collapse not fully opening --- */
#siteProfileBody.collapsible {
  max-height: 270px;
  overflow: hidden;
}

#siteProfileCard.expanded #siteProfileBody.collapsible {
  max-height: none !important;
  overflow: visible !important;
}

/* --- Make the overview columns behave consistently --- */
.overview-col.overview-left { flex: 1.25; }
.overview-col.overview-right { flex: 1; }

@media (max-width: 900px) {
  .overview-cols { flex-direction: column; }
}

/* --- Site Detail (Overview) layout fix: two independent columns (no big gap) --- */
.overview-cols{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.overview-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.overview-col > .card{
  width:100%;
}

/* --- Site Profile expand/collapse --- */
.site-profile-body.collapsible{
  max-height:270px;   /* collapsed height (adjust if you want more/less) */
  overflow:hidden;
  transition:max-height 200ms ease;
}
#siteProfileCard.expanded .site-profile-body.collapsible{
  max-height:5000px;  /* expanded height: big enough to show all fields */
}

/* Footer button pinned to bottom-right */
.card-foot{
  display:flex;
  justify-content:flex-end;
}

/* Optional: tidy key/value layout + truncation helpers */
.kv{
  display:grid;
  grid-template-columns: 230px 1fr;
  column-gap:24px;
  row-gap:10px;
}
.kv dt{ font-weight:700; }
.kv dd{ margin:0; min-width:0; }

.preview-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.preview-link:hover{
  text-decoration:underline;
}

.row-between{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  min-width:0;
}
.preview-text{ min-width:0; }
.truncate-1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.truncate-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}