/* subtitles should be inside the card*/
/*Page Title, Print button & "Back to..." button should be on same line */
/*Page intro should be above Page title and buttons*/
/*Download Csv button & upload csv section should be on same line and use the template within assets/app.css*/
/*Green button for save, submit, add, edit, Blue buttons for download, standard grey for links to other pages, unless they are edit or "holiday calc"*/
/* Page spacing and style should use month_week_converter.php as a template*/
/* Pop-up prompts should be used where appropriate and should be blue for informative messaging and red for errors & skipped rows*/


@font-face{font-family:Aptos;src:local("Aptos");}
:root{
  --hc-card-surface:#f5f5f5;
  --hc-sticky-header-border:#d6d6d6;

  /* Global radius system */
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;

  /* Softer SaaS colours */
  --hc-blue:#0b63ce;
  --hc-blue-hover:#094fa5;
  --hc-blue-soft:#e6f1ff;
  --hc-blue-border:#a8c6ea;
  --hc-blue-glow:rgba(11,99,206,.16);
  --hc-green:#2e7d32;
  --hc-green-hover:#256428;
  --hc-green-soft:#e0f3e2;
  --hc-green-border:#b4d8b8;
  --hc-green-glow:rgba(46,125,50,.15);
  --hc-red:#d96b6b;
  --hc-red-hover:#c95c5c;
  --hc-red-soft:#ffebee;
  --hc-red-border:#e2b0ad;
  --hc-red-glow:rgba(179,58,54,.14);
  --hc-neutral-icon:#425466;
  --hc-neutral-border:#d7dde5;
  --hc-neutral-soft:#f4f6f8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Aptos,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:#f5f5f5;margin:0}
body.crm{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Header bar */
.bar{background:#333;color:#fff;padding:24px 16px;position:sticky;top:0;z-index:1000;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.bar .title{font-size:24px;font-weight:800;line-height:1.15;margin-right:16px;white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;gap:14px}
.nav a{color:#fff;text-decoration:none;font-size:16px;padding:8px 12px;border-radius:8px;transition:background-color .15s,box-shadow .15s}
.nav a:hover,.nav a:focus{background:rgba(255,255,255,.12);outline:none}
.nav a.active{background:rgba(255,255,255,.22);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;font-weight:600}
.nav .nav-dropdown{position:relative}
.nav .nav-dropdown-toggle{
  background:none;
  border:0;
  color:#fff;
  font:inherit;
  font-size:16px;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background-color .15s,box-shadow .15s;
}
.nav .nav-dropdown-toggle:hover,
.nav .nav-dropdown-toggle:focus{background:rgba(255,255,255,.12);outline:none}
.nav .nav-dropdown-toggle.active{
  background:rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;
  font-weight:600;
}
.nav .nav-dropdown .company-menu{
  left:auto;
  right:0;
}
.nav-spacer{height:8px}
.system-banner{background:#fff3cd;color:#654d06;padding:12px 16px;text-align:center;border-top:1px solid #ffe7a1;border-bottom:1px solid #ffe7a1;font-size:15px;font-weight:600}
.system-banner__text{display:inline-block;max-width:900px}
.hc-tab-warning{position:sticky;z-index:950;background:#fff3cd;border-top:1px solid #ffe7a1;border-bottom:1px solid #ffe7a1;color:#654d06}
.hc-tab-warning[hidden]{display:none}
.hc-tab-warning__inner{max-width:1200px;margin:0 auto;padding:10px 16px;font-size:14px;font-weight:600;line-height:1.4}

/* Page container */
.wrap{max-width:1100px;margin:16px auto;background:#fff;padding:16px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
body.crm .wrap{max-width:1260px;}
body.crm > main.wrap{
  flex:1 0 auto;
  width:min(1260px, calc(100% - 32px));
}
body.crm > footer{
  margin-top:auto;
}
@media (max-width:640px){
  body.crm > main.wrap{
    width:calc(100% - 24px);
  }
}

h2{margin:8px 0 12px} h3{margin:8px 0}
.muted{color:#666;font-size:12px}
p.muted{margin:4px 0 8px}

/* Sections & cards */
.section{margin:12px 0;padding:10px 0;border-top:1px solid #eee}
.section:first-of-type{border-top:0}
/* Record earnings: consistent card spacing + divider rhythm */
#pageTop > .section{
  margin:8px 0 0;
  padding:8px 0 0;
  border-top:1px solid #d9d9d9;
}
#pageTop > .section:first-of-type{
  border-top:1px solid #d9d9d9;
}
#pageTop > .section:last-of-type{
  margin-bottom:0;
}
/* Tighten spacing after summary placards and quick-actions grid */
.section:has(> .grid.grid-4),
.section:has(> .card > .grid.grid-4) {
  margin-bottom: 0;
  padding-bottom: 8px;
}
.section:has(> .grid.grid-4) + .section,
.section:has(> .card > .grid.grid-4) + .section {
  margin-top: 0;
}
.card{background:var(--hc-card-surface);border:1px solid #d6d6d6;border-radius:var(--radius-lg);padding:12px;}
/* Card links: keep plain text style (no purple/underline) */
a.card.link-card,
a.card.link-card:link,
a.card.link-card:visited,
a.card.link-card:hover,
a.card.link-card:active{
  color:inherit;
  text-decoration:none;
}



/* Allow wide tables to scroll inside cards instead of breaking layout */
.card{overflow-x:auto}
.card table{width:100%}

/* Compact placards (dashboard + any 4-col metric grids) */
.grid-4 > .card { padding-top: 8px; }
.grid-4 > .card h4 { margin-top: 0; margin-bottom: 16px; }


/* === Unified grid helpers (site-wide) === */
.grid{display:grid;gap:12px;align-items:start;}
.grid > *{min-width:0;}
.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);column-gap:96px;}
.grid-4{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);}
}

/* Mode bar (Basic vs Advanced toggles) */
.mode-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}
.mode-bar--spaced{margin-bottom:16px}
.mode-bar--flush{margin:0}
.mode-bar .btn{min-width:auto;height:auto;padding:10px 18px;border:none;background:#e3e6ea;color:#333;border-radius:var(--radius-pill);font-weight:600;box-shadow:none;cursor:pointer;transition:all .15s ease;}
.mode-bar .btn.active{
  background:var(--hc-red);
  color:#fff;
  box-shadow:0 6px 16px rgba(217,107,107,.22);
}

.mode-bar .btn:hover,
.mode-bar .btn:focus-visible{
  background:var(--hc-red-soft);
  color:#7a2d2d;
}
.mode-bar .btn[aria-disabled="true"],.mode-bar .btn[data-disabled="1"]{background:#f6f7f9;color:#999;cursor:not-allowed;box-shadow:none;opacity:0.75}

/* Choice controls: multi-option and single-option */
.hc-choice-card{
  padding:0;
  overflow:visible;
  background:transparent;
  border-color:transparent;
}

.hc-choice-card--selector{
  min-width:0;
  width:100%;
}

.hc-choice-group{
  display:grid;
  gap:0;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--radius-lg);
  background:transparent;
}

.hc-choice-group--multi{
  grid-template-columns:repeat(7, minmax(0, 1fr));
}

.hc-choice-group--single,
.hc-choice-group--wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
  padding:0;
  border:0;
  background:transparent;
}

.hc-choice-group--selector{
  --hc-choice-option-width:auto;
  --hc-choice-option-height:42px;
  --hc-choice-pad-top:6px;
  --hc-choice-pad-bottom:10px;
  position:relative;
  display:block;
  box-sizing:border-box;
  padding:var(--hc-choice-pad-top) 0 var(--hc-choice-pad-bottom);
  width:100%;
  min-height:calc(var(--hc-choice-option-height, 42px) + var(--hc-choice-pad-top) + var(--hc-choice-pad-bottom));
  height:calc(var(--hc-choice-option-height, 42px) + var(--hc-choice-pad-top) + var(--hc-choice-pad-bottom));
  max-width:100%;
  overflow:hidden;
}

.hc-choice-group--selector .hc-choice-option{
  position:absolute;
  top:var(--hc-choice-pad-top);
  left:0;
  width:var(--hc-choice-option-width, auto);
  max-width:100%;
  transition:transform .18s ease, z-index .18s ease;
}

.hc-choice-group--selector[data-choice-layout="inline"]{
  display:flex;
  overflow:visible;
}

.hc-choice-group--selector[data-choice-layout="inline"]{
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:8px;
}

.hc-choice-group--selector[data-choice-layout="inline"] .hc-choice-option{
  position:relative;
  top:auto;
  left:auto;
  transform:none !important;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.hc-choice-option{
  position:relative;
  display:flex;
  margin:0;
  min-width:0;
  cursor:pointer;
}

.hc-choice-button.hc-choice-option{
  appearance:none;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  text-align:inherit;
}

.hc-choice-option:hover,
.hc-choice-option:focus-within{
  z-index:2;
}

.hc-choice-option > input[type="checkbox"],
.hc-choice-option > input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.hc-choice-option__button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:var(--hc-choice-option-height, 42px);
  padding:8px 12px;
border:1px solid var(--hc-red-border);
border-radius:var(--radius-pill);
background:var(--hc-red-soft);
color:#7a2d2d;
  box-sizing:border-box;
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.hc-choice-option__label{
  display:block;
  width:100%;
}

.hc-choice-option:hover .hc-choice-option__button,
.hc-choice-button.hc-choice-option:hover .hc-choice-option__button{
  transform:translateY(-1px);
  background:#fff0ef;
border-color:var(--hc-red);
color:#7a2d2d;
box-shadow:0 6px 14px rgba(217,107,107,.16);
}

.hc-choice-option.is-selected .hc-choice-option__button,
.hc-choice-option > input[type="checkbox"]:checked + .hc-choice-option__button,
.hc-choice-option > input[type="radio"]:checked + .hc-choice-option__button{
background:var(--hc-green-soft);
border-color:var(--hc-green-border);
color:var(--hc-green);
box-shadow:0 0 0 3px var(--hc-green-glow);
}

.hc-choice-option.is-selected:hover .hc-choice-option__button,
.hc-choice-option > input[type="checkbox"]:checked + .hc-choice-option__button:hover,
.hc-choice-option > input[type="radio"]:checked + .hc-choice-option__button:hover{
background:#f7fcf7;
border-color:var(--hc-green);
color:var(--hc-green-hover);
}

.hc-choice-button.hc-choice-option:focus-visible .hc-choice-option__button,
.hc-choice-option > input[type="checkbox"]:focus-visible + .hc-choice-option__button,
.hc-choice-option > input[type="radio"]:focus-visible + .hc-choice-option__button{
  outline:2px solid rgba(11,99,206,.28);
  outline-offset:2px;
}

.hc-choice-option.is-disabled,
.hc-choice-button.hc-choice-option[disabled]{
  cursor:not-allowed;
}

.hc-choice-option.is-disabled .hc-choice-option__button,
.hc-choice-button.hc-choice-option[disabled] .hc-choice-option__button,
.hc-choice-option > input[disabled] + .hc-choice-option__button{
  background:#f6f7f9;
  border-color:#e0e0e0;
  color:#999;
  box-shadow:none;
  transform:none;
}

.hc-choice-option__number{
  margin:0 2px;
  height:28px;
  padding:2px 4px;
  text-align:center;
  font-size:12px;
}

.hc-choice-option__button .hc-choice-option__number{
  flex:0 0 56px;
  width:56px;
  min-width:56px;
  max-width:56px;
  background:#fff;
  color:#333;
  border-color:rgba(0,0,0,.14);
  border-radius:8px;
}

.hc-choice-option__button .hc-choice-option__number[disabled]{
  opacity:.72;
}

.hc-choice-group--single:not(.hc-choice-group--selector) .hc-choice-option{
  flex:0 1 auto;
}

.hc-choice-group--single:not(.hc-choice-group--selector) .hc-choice-option__button{
  width:auto;
  min-height:36px;
  padding:7px 12px;
  white-space:nowrap;
}

.hc-choice-group--single:not(.hc-choice-group--selector) .hc-choice-option__button > span{
  white-space:nowrap;
}

.hc-choice-native{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  border:0 !important;
  white-space:nowrap !important;
}

.hc-choice-stack{
  display:grid;
  gap:4px;
}

.hc-choice-picker-row{
  display:flex;
  align-items:flex-start;
  gap:0;
  flex-wrap:nowrap;
}

.hc-choice-picker-row__field{
  flex:1 1 220px;
  min-width:0;
}

.hc-choice-picker-row__field .hc-choice-card--selector,
.hc-choice-picker-row__field .hc-choice-group--selector{
  width:100%;
}

.hc-choice-picker-row > .hc-inline-icon-button[data-icon-style="table"]{
  align-self:flex-start;
  height:42px;
  min-height:42px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  margin-left:-1px;
}

.hc-picker-table-wrap,
.hc-picker-checklist{
  max-height:320px;
  overflow:auto;
  border:1px solid #d6d6d6;
  border-radius:8px;
  background:#fff;
}

.hc-picker-table-wrap table{
  margin-bottom:0;
}

.hc-picker-table-wrap th,
.hc-picker-table-wrap td{
  vertical-align:middle;
}

.hc-picker-table-wrap td:first-child,
.hc-picker-table-wrap th:first-child{
  width:72px;
  text-align:center;
}

.hc-picker-checklist__row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:10px 12px;
  border-top:1px solid #ececec;
  cursor:pointer;
}

.hc-picker-checklist__row:first-child{
  border-top:0;
}

.hc-picker-checklist__row--all{
  position:sticky;
  top:0;
  z-index:1;
  background:#f7f7f7;
  font-weight:600;
}

.hc-picker-checklist__row input[type="checkbox"]{
  flex:0 0 auto;
}

.hc-picker-modal .hc-popup-modal,
.report-picker-modal .hc-popup-modal{
  max-width:720px;
}

.hc-actions-row--start{
  justify-content:flex-start;
}

@media (max-width:640px){
  .hc-choice-group--multi{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width:420px){
  .hc-choice-group--multi{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.mode-bar .btn[aria-disabled="true"]:hover,.mode-bar .btn[aria-disabled="true"]:focus-visible,.mode-bar .btn[data-disabled="1"]:hover,.mode-bar .btn[data-disabled="1"]:focus-visible{background:#f6f7f9;color:#999}
@media (max-width:520px){
  .mode-bar{flex-direction:column;align-items:stretch}
  .mode-bar .btn{width:100%;text-align:center}
}

.advanced-only{display:none}

/* Forms */
label{display:block;margin:6px 0 4px}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea{
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:inherit;
  box-sizing:border-box;
}
textarea{min-height:88px;resize:vertical}
input[type="file"]{line-height:1.35}

/* === Normalize "Unknown days" toggle layout everywhere (beats Bootstrap .checkbox-inline) === */
.dpw-override-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.dpw-override-input{
  flex:0 0 160px;
  max-width:160px;
  width:100%;
}

.input-60 .dpw-override-input{
  flex:0 0 160px;
  max-width:160px;
  width:100%;
}

/* Neutralize Bootstrap's checkbox-inline hacks just for this control */
label.dpw-unknown-toggle.checkbox-inline{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
  padding:0 !important;          /* kills padding-left:20px from BS */
  line-height:1.2;
  white-space:nowrap;
  position:static !important;    /* kills position:relative from BS */
}

.dpw-unknown-toggle input[type="checkbox"]{
  position:static !important;    /* kills absolute positioning from BS */
  margin:0 !important;           /* kills -20px margin trick from BS */
  flex:0 0 auto;
}

.input-60 .dpw-unknown-toggle input[type="checkbox"]{
  width:auto;
  max-width:none;
  min-width:0;
}

.dpw-unknown-toggle .muted{
  margin:0 !important;
}

/* Hide native number spinners where class="no-spinner" is applied */
input.no-spinner::-webkit-inner-spin-button,
input.no-spinner::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input.no-spinner{ -moz-appearance:textfield; appearance:textfield; }

/* Disabled look for “override off” fields */
select:disabled,input:disabled,textarea:disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed}

/* =========================================
   Modern Buttons - Soft SaaS Style
========================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-width:140px;
  height:40px;
  padding:0 18px;

  border:none;
  border-radius:var(--radius-md);

  background:#4CAF50;
  color:#fff;

  font-size:14px;
  font-weight:600;
  line-height:1;

  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;

  box-shadow:
    0 2px 6px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.05);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    filter .16s ease;
}

/* Hover */
.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.10),
    0 3px 6px rgba(0,0,0,.08);
  filter:brightness(1.02);
}

/* Click */
.btn:active{
  transform:translateY(0);
  box-shadow:
    0 2px 6px rgba(0,0,0,.08);
}

/* Focus */
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(76,175,80,.18),
    0 2px 6px rgba(0,0,0,.08);
}

/* Variants */
.btn.blue{
  background:#1677ff;
}

.btn.grey{
  background:#6b7280;
}

.btn.danger{
  background:var(--hc-red);
}

.btn.indigo{
  background:#4f46e5;
}

/* Hover colours */
.btn.blue:hover{
  background:#0f6ae8;
}

.btn.grey:hover{
  background:#5f6672;
}

.btn.danger:hover{
  background:var(--hc-red-hover);
}

.btn.indigo:hover{
  background:#4338ca;
}

/* Disabled */
.btn[disabled],
.btn.disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

.year-end-overlay,
.hol-split-modal{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.55);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.year-end-modal,
.hol-split-modal__dialog{
  background:#fff;
  border-radius:var(--radius-xl);
  padding:20px;
  width:100%;
  max-width:640px;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.year-end-list{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.year-end-card{border:1px solid #d6d6d6;border-radius:10px;padding:12px;background:#f5f5f5;box-shadow:inset 0 1px 0 rgba(0,0,0,.02);}
.year-end-card__heading{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:15px;margin-bottom:4px;}
.year-end-card .btn{margin-top:8px;min-width:120px;}
.hol-split-modal[hidden]{display:none;}
.hol-split-modal__dialog{max-width:520px;position:relative;padding-top:32px;}
.hol-split-body h3{margin-top:0;margin-bottom:6px;}
.hol-split-close{position:absolute;top:8px;right:10px;border:0;background:none;font-size:22px;cursor:pointer;line-height:1;}
.hol-split-group{margin-top:14px;}
.hol-split-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.hol-split-summary{margin-top:12px;font-weight:600;}
.hol-split-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.link-btn{background:none;border:0;color:#007bff;padding:0;font-size:13px;cursor:pointer;text-decoration:underline;}
.link-btn:hover{text-decoration:none;}
.hol-split-cta{margin-top:4px;}
.hol-split-summary{font-size:12px;}
.hol-split-cta.d-none{display:none;}

/* Success popup (shares container style with year-end modal) */
.hc-popup-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.55);
  z-index:2300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.hc-popup-overlay[hidden]{display:none;}
.hc-popup-modal{
  background:#fff;
  border-radius:var(--radius-xl);
  padding:20px;
  width:100%;
  max-width:640px;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.hc-popup-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-4px -4px 12px;
  padding:4px 4px 8px;
}
.hc-popup-title{
  margin:0;
  font-size:18px;
}
.hc-popup-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}
.hc-popup-modal--success .hc-popup-badge{
  background:rgba(76,175,80,.12);
  color:#2e7d32;
}
.hc-popup-modal--warning .hc-popup-badge{
  background:rgba(21,101,192,.12);
  color:#1565c0;
}
.hc-popup-modal--error .hc-popup-badge{
  background:rgba(217,83,79,.12);
  color:#b71c1c;
}
.hc-popup-body{
  font-size:14px;
  line-height:1.5;
}
.hc-popup-messages{
  list-style:none;
  margin:0;
  padding-left:0;
}
.hc-popup-messages li+li{
  margin-top:6px;
}
.hc-popup-footer{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.hc-action-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.58);
  z-index:2305;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.hc-action-modal-overlay[hidden]{display:none;}
.hc-action-modal{
  width:100%;
  max-width:640px;
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:var(--radius-xl);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  padding:22px;
}
.hc-action-modal__header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
}
.hc-action-modal__badge{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(21,101,192,.12);
  color:#1565c0;
}
.hc-action-modal--success .hc-action-modal__badge{
  background:rgba(76,175,80,.12);
  color:#2e7d32;
}
.hc-action-modal--danger .hc-action-modal__badge{
  background:rgba(217,83,79,.12);
  color:#b71c1c;
}
.hc-action-modal__title{
  margin:0;
  font-size:21px;
}
.hc-action-modal__body{
  font-size:14px;
  line-height:1.55;
}
.hc-action-modal__body p{
  margin:0 0 10px;
}
.hc-action-modal__list{
  margin:0 0 10px 18px;
  padding:0;
}
.hc-action-modal__list li+li{
  margin-top:6px;
}
.hc-action-modal__actions{
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* Disabled state (works for <button disabled> and a.disabled) */
.btn[disabled],
.btn.disabled{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* Sizes */
.btn.sm{
  min-width:110px;
  height:32px;
  padding:0 12px;
  font-size:13px;
  border-radius:6px;
}
.btn.lg{
  min-width:150px;
  height:42px;
  padding:0 18px;
  font-size:15px;
  border-radius:10px;
}
.btn.xl{
  min-width:170px;
  height:48px;
  padding:0 22px;
  font-size:16px;
  border-radius:12px;
}

.btn.full{
  display:flex;
  width:100%;
  text-align:center;
}

/* Full-width helper */
.btn.btn-wide,
a.btn-wide,
.hc-inline-icon-button.btn-wide{
  width:100%;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#backToTop{
  display:flex;
  width:fit-content;
  margin-left:auto;
  margin-right:0;
}

/* Legacy support ONLY for:
   <a class="btn-wide">
   and NOT:
   <a class="btn btn-wide"> */
a.btn-wide:not(.btn):not(.hc-inline-icon-button){
  min-height:40px;
  padding:0 18px;

  border:none;
  border-radius:var(--radius-md);

  background:#6b7280;
  color:#fff !important;

  font-size:14px;
  font-weight:600;
  line-height:1;

  text-decoration:none;

  box-shadow:
    0 2px 6px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.05);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    filter .16s ease;
}

a.btn-wide:not(.btn):not(.hc-inline-icon-button):hover{
  background:#5f6672;
  color:#fff !important;

  transform:translateY(-1px);

  box-shadow:
    0 10px 20px rgba(0,0,0,.10),
    0 3px 6px rgba(0,0,0,.08);
}


/* Utility rows */
.actions-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:8px 0;flex-wrap:wrap}
.actions-row > .btn-row{margin-left:auto;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.hc-action-button-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hc-action-button-row--split .hc-action-button-row__save{margin-right:0}
.hc-action-button-row__save,
.hc-action-button-row__cancel{display:flex;align-items:center}
.tracker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.tracker-title{font-size:24px;font-weight:700;margin:0}
.tracker-table-card{margin-top:12px}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #eee;padding:8px;white-space:nowrap;text-align:left;font-size:14px;line-height:1.2}
th{background: inherit;font-weight:600;vertical-align:top}
td.center,th.center{text-align:center}
.tracker-table{table-layout:fixed}
.tracker-table th,.tracker-table td{vertical-align:top}
.hc-data-table-scroll{
  width:100%;
  max-height:68vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.hc-data-table-scroll--20{
  max-height:min(40rem, 68vh);
}
.hc-data-table-scroll table{
  min-width:100%;
}
.hc-data-table{
  table-layout:fixed;
  --hc-sticky-header-top:0px;
  --hc-filter-row-top:41px;
}
.hc-data-table th,
.hc-data-table td{
  vertical-align:middle;
}
.hc-data-table thead th{
  position:sticky;
  top:var(--hc-sticky-header-top);
  z-index:2;
  background:var(--hc-card-surface);
  background-clip:padding-box;
}
.hc-data-table thead tr:first-child th{
  box-shadow:inset 0 -2px 0 var(--hc-sticky-header-border);
}
.hc-data-table .filter-row th{
  top:var(--hc-filter-row-top);
  z-index:3;
  background:var(--hc-card-surface);
  background-clip:padding-box;
  box-shadow:inset 0 -1px 0 var(--hc-sticky-header-border);
  border-bottom:0;
}
.hc-data-table .filter-row input,
.hc-data-table .filter-row select,
.hc-data-table .filter-row textarea{
  width:100%;
  min-width:0;
}
.hc-data-table tbody tr:first-child td{
  border-top:0;
}
.hc-data-table textarea{
  min-height:56px;
  resize:vertical;
}
.hc-data-table--auto{
  table-layout:auto;
}
.hc-textarea-compact{
  min-height:42px !important;
}
.tracker-table input[type="text"],
.tracker-table input[type="number"],
.tracker-table input[type="email"],
.tracker-table input[type="password"],
.tracker-table input[type="date"],
.tracker-table input[type="datetime-local"],
.tracker-table input[type="search"],
.tracker-table input[type="tel"],
.tracker-table input[type="url"],
.tracker-table select,
.tracker-table textarea{width:100%;min-width:0}
.tracker-table textarea{min-height:56px;resize:vertical}
.tracker-col-id{width:6ch}
.tracker-col-priority{width:14ch}
.tracker-col-app{width:12ch}
.tracker-col-page{width:16ch}
.tracker-col-details{width:auto}
.tracker-col-status{width:12ch}
.tracker-col-updated{width:16ch}
.tracker-col-description{width:22ch}
.tracker-col-link{width:24ch}
.tracker-col-user{width:12ch}
.tracker-col-username{width:18ch}
.tracker-col-password{width:24ch}
.tracker-col-actions{width:3.2rem}
.tracker-col-compact{min-width:7rem}
.tracker-col-standard{min-width:8.5rem}
.tracker-col-wide{min-width:11rem}
.tracker-col-address{min-width:14rem}
.tracker-col-actions-wide{min-width:8.5rem}
.tracker-col-actions-xl{min-width:12rem}
.tracker-field-inline{display:flex;align-items:center;gap:8px}
.tracker-field-inline > :first-child{flex:1 1 auto;min-width:0}
.tracker-field-inline .btn{min-width:92px}
.tracker-table--client-list{table-layout:auto}
.tracker-table--client-list th{white-space:normal;line-height:1.3}
.tracker-table--client-list td{white-space:nowrap}
.tracker-table--workflow{table-layout:auto}
.tracker-table--workflow th{white-space:normal;line-height:1.3}
.tracker-table--workflow td{white-space:nowrap}
.tracker-table--client-list .filter-row input,
.tracker-table--client-list .filter-row select,
.tracker-table--workflow .filter-row input,
.tracker-table--workflow .filter-row select{
  min-width:0;
  width:100%;
  max-width:100%;
  padding:6px;
  font-size:13px;
  box-sizing:border-box;
}
#workflowTable col[data-col="due"],
#workflowTable th[data-col="due"],
#workflowTable td[data-col="due"]{
  width:8.75rem;
}
#workflowTable col[data-col="client"],
#workflowTable th[data-col="client"],
#workflowTable td[data-col="client"]{
  width:10rem;
}
#workflowTable col[data-col="client_ref"],
#workflowTable th[data-col="client_ref"],
#workflowTable td[data-col="client_ref"]{
  width:5.75rem;
}
#workflowTable col[data-col="task"],
#workflowTable th[data-col="task"],
#workflowTable td[data-col="task"]{
  width:15rem;
}
#workflowTable col[data-col="type"],
#workflowTable th[data-col="type"],
#workflowTable td[data-col="type"]{
  width:8rem;
}
#workflowTable col[data-col="recurrence"],
#workflowTable th[data-col="recurrence"],
#workflowTable td[data-col="recurrence"]{
  width:8.5rem;
}
#workflowTable col[data-col="status"],
#workflowTable th[data-col="status"],
#workflowTable td[data-col="status"]{
  width:10rem;
}
#workflowTable col[data-col="completed"],
#workflowTable th[data-col="completed"],
#workflowTable td[data-col="completed"]{
  width:14rem;
}
#workflowTable col[data-col="actions"],
#workflowTable th[data-col="actions"],
#workflowTable td[data-col="actions"]{
  width:7rem;
}
.tracker-table-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tracker-table-tools .mode-bar{margin:0}
.checkbox-inline{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.checkbox-inline input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;margin:0}
.preference-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 16px}
.preference-checklist label{display:flex;align-items:flex-start;gap:8px}
.preference-checklist input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.mode-panel{display:none}
.mode-panel.is-active{display:block}
.workflow-toolbar{gap:16px;flex-wrap:wrap;align-items:flex-end}
.workflow-toolbar__checkbox{padding-bottom:10px}
.workflow-actions{justify-content:flex-start;gap:6px;flex-wrap:wrap}
.workflow-status-form{display:flex;align-items:center;min-width:0;width:100%}
.workflow-status-form select{min-width:0;width:100%;max-width:100%}
.workflow-toolbar__date{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.workflow-toolbar__date label{
  margin:0;
  min-width:0;
}
.workflow-toolbar__date input[type="text"]{
  min-width:9rem;
}
.workflow-status-cell{
  display:flex;
  align-items:center;
  gap:6px;
}
.workflow-status-cell select{
  min-width:0;
}
@media (max-width:860px){
  .tracker-table{table-layout:auto}
}

/* Heroicons and inline icon actions */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Table icons */
.hc-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.1rem;
  height:1.1rem;
  flex:0 0 1.1rem;
}

.hc-icon svg{
  display:block;
  width:100%;
  height:100%;
  stroke-width:1.5;
}

.hc-inline-icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;

  width:2.15rem;
  min-width:2.15rem;
  height:2.15rem;

  padding:0;

  border:1px solid var(--hc-blue-border);
  border-radius:10px;

  background:var(--hc-blue-soft);
  color:var(--hc-blue);

  cursor:pointer;
  text-decoration:none;

  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 0 0 3px var(--hc-blue-glow);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.hc-inline-icon-button:hover{
  transform:translateY(-1px);

  background:#f8fbff;
  border-color:var(--hc-blue);

  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 0 0 4px rgba(11,99,206,.2);

  color:var(--hc-blue-hover);
}

.hc-inline-icon-button,
.hc-inline-icon-button:hover,
.hc-inline-icon-button:focus,
.hc-inline-icon-button:active,
.hc-inline-icon-button .hc-inline-icon-button__label,
.hc-inline-icon-button .sr-only,
.hc-inline-icon-button *{
  text-decoration:none;
}

.hc-inline-icon-button:focus-visible{
  outline:2px solid rgba(11,99,206,.28);
  outline-offset:2px;
}

.hc-inline-icon-button.is-active{
  background:var(--hc-blue-soft);
  border-color:var(--hc-blue);
  color:var(--hc-blue);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 0 0 4px rgba(11,99,206,.18);
}

.hc-inline-icon-button[data-copy-state="success"]{
  color:var(--hc-green);
  border-color:var(--hc-green-border);
  background:var(--hc-green-soft);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 0 0 4px var(--hc-green-glow);
}

.hc-inline-icon-button--success,
.hc-inline-icon-button[data-icon-name="addnew"],
.hc-inline-icon-button[data-icon-name="adduser"],
.hc-inline-icon-button[data-icon-name="addmultiple"],
.hc-inline-icon-button[data-icon-name="inviteuser"],
.hc-inline-icon-button[data-icon-name="save"]{
  color:var(--hc-green);
  border-color:var(--hc-green-border);
  background:var(--hc-green-soft);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 0 0 3px var(--hc-green-glow);
}

.hc-inline-icon-button--success:hover,
.hc-inline-icon-button[data-icon-name="addnew"]:hover,
.hc-inline-icon-button[data-icon-name="adduser"]:hover,
.hc-inline-icon-button[data-icon-name="addmultiple"]:hover,
.hc-inline-icon-button[data-icon-name="inviteuser"]:hover,
.hc-inline-icon-button[data-icon-name="save"]:hover{
  color:var(--hc-green-hover);
  border-color:var(--hc-green);
  background:#f7fcf7;
  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 0 0 4px rgba(46,125,50,.19);
}

.hc-inline-icon-button--danger,
.hc-inline-icon-button[data-icon-name="delete"],
.hc-inline-icon-button[data-icon-name="removeuser"],
.hc-inline-icon-button[data-icon-name="reject"]{
  color:#b33a36;
  border-color:var(--hc-red-border);
  background:var(--hc-red-soft);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 0 0 3px var(--hc-red-glow);
}

.hc-inline-icon-button--danger:hover,
.hc-inline-icon-button[data-icon-name="delete"]:hover,
.hc-inline-icon-button[data-icon-name="removeuser"]:hover,
.hc-inline-icon-button[data-icon-name="reject"]:hover{
  color:#9d211d;
  border-color:#cf756f;
  background:#fff0ef;
  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 0 0 4px rgba(179,58,54,.10);
}

.hc-inline-icon-button[data-icon-name="showhidden"]:not(.is-active){
  color:var(--hc-neutral-icon);
  border-color:var(--hc-neutral-border);
  background:var(--hc-neutral-soft);
  box-shadow:
    0 1px 2px rgba(0,0,0,.04);
}

.hc-inline-icon-button[data-icon-name="showhidden"]:not(.is-active):hover{
  color:#2f4054;
  border-color:#bcc9d7;
  background:#f8fafc;
  box-shadow:
    0 8px 18px rgba(0,0,0,.08);
}

.hc-inline-icon-button__label{
  display:none;
  max-width:100%;
  margin:0;
  color:inherit;
  font-size:.6rem;
  font-weight:600;
  line-height:1.15;
  text-align:center;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.hc-inline-icon-button__label:empty{
  display:none;
}

/* Table icons with inline labels */
.hc-inline-icon-button--table,
.hc-inline-icon-button[data-icon-style="table"]{
  justify-content:flex-start;
  gap:.42rem;
  width:auto;
  min-width:4.85rem;
  padding:0 .68rem;
  white-space:nowrap;
  vertical-align:middle;
}

.hc-inline-icon-button--table .hc-inline-icon-button__label,
.hc-inline-icon-button[data-icon-style="table"] .hc-inline-icon-button__label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

.hc-inline-icon-button--button,
.hc-inline-icon-button[data-icon-style="button"]{
  justify-content:flex-start;
  gap:.52rem;
  width:auto;
  min-width:156px;
  max-width:100%;
  height:40px;
  min-height:40px;
  padding:0 .9rem;
  white-space:nowrap;
  vertical-align:middle;
}

.hc-inline-icon-button--button .hc-icon,
.hc-inline-icon-button[data-icon-style="button"] .hc-icon{
  width:1.15rem;
  height:1.15rem;
  flex:0 0 1.15rem;
}

.hc-inline-icon-button--button .hc-inline-icon-button__label,
.hc-inline-icon-button[data-icon-style="button"] .hc-inline-icon-button__label{
  display:block;
  font-size:.84rem;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-bottom:1px;
}

/* Title icons */
.hc-inline-icon-button--title,
.hc-inline-icon-button[data-icon-style="title"]{
  flex-direction:column;
  gap:.28rem;
  width:4.2rem;
  min-width:4.2rem;
  min-height:4rem;
  height:auto;
  padding:.38rem .3rem .34rem;
  border-radius:12px;
  vertical-align:middle;
  color:inherit;
}

.hc-inline-icon-button--title .hc-icon,
.hc-inline-icon-button[data-icon-style="title"] .hc-icon{
  width:1.45rem;
  height:1.45rem;
  flex:0 0 1.45rem;
}

.hc-inline-icon-button--title .hc-inline-icon-button__label,
.hc-inline-icon-button[data-icon-style="title"] .hc-inline-icon-button__label{
  display:block;
}

.hc-inline-icon-button--title:hover,
.hc-inline-icon-button[data-icon-style="title"]:hover{
  color:inherit;
}

.hc-inline-icon-button[disabled],
.hc-inline-icon-button[aria-disabled="true"]{
  cursor:not-allowed;
  color:#8b98a7;
  border-color:#d7dde5;
  background:#f6f7f9;
  box-shadow:none;
  opacity:1;
  transform:none;
}

.hc-inline-icon-button[disabled]:hover,
.hc-inline-icon-button[aria-disabled="true"]:hover{
  color:#8b98a7;
  border-color:#d7dde5;
  background:#f6f7f9;
  box-shadow:none;
}


@media (max-width:640px){
  .hc-action-button-row__save,
  .hc-action-button-row__cancel{
    flex:1 1 100%;
  }

  .hc-inline-icon-button--button,
  .hc-inline-icon-button[data-icon-style="button"]{
    min-width:0;
    width:100%;
    justify-content:center;
  }

  .hc-inline-icon-button--title,
  .hc-inline-icon-button[data-icon-style="title"]{
    width:3.95rem;
    min-width:3.95rem;
    min-height:3.8rem;
    padding:.34rem .26rem .3rem;
  }

  .hc-inline-icon-button__label{
    font-size:.56rem;
  }
}

/* Loading overlay */

.hc-inline-icon-button.is-loading,
.hc-inline-icon-button[data-loading-locked="1"]{
  pointer-events:none;
}

[data-loading-locked="1"]{
  pointer-events:none;
}

.hc-loading-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  pointer-events:auto;
  touch-action:none;
  z-index:5000;
}

.hc-loading-overlay[hidden]{
  display:none;
}

.hc-loading-spinner{
  width:48px;
  height:48px;
  border:4px solid rgba(0,123,255,.16);
  border-top-color:#007bff;
  border-radius:50%;
  animation:hc-spin .7s linear infinite;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

body.hc-loading{
  cursor:progress;
  overflow:hidden;
}

body.hc-loading a,
body.hc-loading button{
  cursor:progress;
}

@keyframes hc-spin{
  to{transform:rotate(360deg);}
}

/* Drop-in attachment box */
.hc-attachment-box{
  display:grid;
  gap:8px;
}

/*
  Compact title-icon sized dropzone:
  - roughly 1 title-style SVG tile tall
  - roughly 3 title-style SVG tiles wide
*/

.hc-attachment-dropzone{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:12.6rem;
  max-width:100%;
  min-height:4rem;
  box-sizing:border-box;
  margin:0;
  padding:.38rem .48rem;
  border:0;
  border-radius:var(--radius-lg);
  background:#fff;
  text-align:center;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
  cursor:pointer;
}
.hc-attachment-dropzone::after{
  content:"";
  position:absolute;
  inset:2px;
  border:1px dashed #555;
  border-radius:calc(var(--radius-lg) - 2px);
  pointer-events:none;
}

.hc-attachment-dropzone:hover,
.hc-attachment-dropzone:focus-within,
.hc-attachment-dropzone.is-dragover{
  background:#f8fbff;
  box-shadow:none;
  transform:none;
}

.hc-attachment-dropzone:hover::after,
.hc-attachment-dropzone:focus-within::after,
.hc-attachment-dropzone.is-dragover::after{
  border-color:#1677ff;
}

.hc-attachment-dropzone.is-invalid{
  background:#fff8f8;
  box-shadow:none;
}

.hc-attachment-dropzone.is-invalid::after{
  border-color:var(--hc-red);
}

.hc-attachment-dropzone input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.hc-attachment-dropzone__content{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:.42rem;
  width:100%;
  max-width:100%;
  pointer-events:none;
}

.hc-attachment-dropzone__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.45rem;
  height:2.45rem;
  border-radius:10px;
  background:rgba(22,119,255,.10);
  color:#0b63ce;
  box-shadow:inset 0 0 0 1px rgba(22,119,255,.12);
}

.hc-attachment-dropzone__icon svg{
  display:block;
  width:1.45rem;
  height:1.45rem;
  stroke-width:1.6;
}

.hc-attachment-dropzone__title{
  display:block;
  min-width:0;
  margin:0;
  color:#333;
  font-size:.72rem;
  font-weight:700;
  line-height:1.15;
  text-align:left;
}

.hc-attachment-dropzone__hint{
  display:none;
}
.hc-attachment-block{
  overflow:visible;
}

.hc-attachment-block__toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  overflow:visible;
  padding-bottom:4px;
  margin-bottom:4px;
}

.hc-attachment-block__heading{
  margin:0;
  line-height:1.2;
}

.hc-attachment-block__toolbar .hc-attachment-dropzone{
  flex-shrink:0;
  align-self:center;
  margin-bottom:0;
}
.hc-attachment-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.hc-attachment-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.hc-attachment-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #d6d6d6;
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.hc-attachment-item__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#f4fbf5;
  color:#2e7d32;
  border:1px solid #b9d9bc;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.hc-attachment-item__main{
  min-width:0;
}

.hc-attachment-item__name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#333;
  font-size:14px;
  font-weight:700;
}

.hc-attachment-item__details{
  display:block;
  margin-top:3px;
  color:#666;
  font-size:12px;
}

.hc-attachment-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  min-width:2.1rem;
  height:2.1rem;
  padding:0;
  border:1px solid #dfb0ae;
  border-radius:10px;
  background:#fff8f8;
  color:#b33a36;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 3px rgba(179,58,54,.07);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.hc-attachment-remove:hover{
  transform:translateY(-1px);
  color:#9d211d;
  border-color:#d97c78;
  background:#fff0ef;
  box-shadow:0 8px 18px rgba(0,0,0,.08),0 0 0 4px rgba(179,58,54,.10);
}

.hc-attachment-remove svg{
  display:block;
  width:1.1rem;
  height:1.1rem;
  stroke-width:1.7;
}

.hc-empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:72px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-md);
  background:#fff;
  color:#666;
  font-size:13px;
  text-align:center;
}

@media (max-width:640px){
  .hc-attachment-dropzone{
    width:12.6rem;
    max-width:100%;
    min-height:4rem;
    padding:.38rem .48rem;
  }

  .hc-attachment-item{
    grid-template-columns:auto minmax(0, 1fr);
  }

  .hc-attachment-remove{
    grid-column:1 / -1;
    width:100%;
  }
}

/* HC STATUS BADGES */

.hc-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:24px;
  padding:4px 10px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  vertical-align:middle;
}

.hc-status-badge--success{
  background:rgba(76,175,80,.12);
  border-color:rgba(76,175,80,.28);
  color:#2e7d32;
}

.hc-status-badge--warning{
  background:rgba(255,193,7,.18);
  border-color:rgba(255,193,7,.36);
  color:#7a5a00;
}

.hc-status-badge--danger{
  background:rgba(217,107,107,.14);
  border-color:rgba(217,107,107,.32);
  color:#9d211d;
}

.hc-status-badge--info{
  background:rgba(22,119,255,.12);
  border-color:rgba(22,119,255,.26);
  color:#0b63ce;
}

.hc-status-badge--neutral{
  background:#eef0f3;
  border-color:#d7dde5;
  color:#425466;
}

.hc-status-badge--purple{
  background:rgba(79,70,229,.12);
  border-color:rgba(79,70,229,.26);
  color:#4338ca;
}

.hc-status-badge--small{
  min-height:20px;
  padding:3px 8px;
  font-size:11px;
}

.hc-status-badge--large{
  min-height:30px;
  padding:6px 12px;
  font-size:13px;
}


/* INLINE FIELD MESSAGES */

.hc-field-message{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:6px 0 0;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
}

.hc-field-message::before{
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:currentColor;
}

.hc-field-message--success{
  background:rgba(76,175,80,.10);
  border-color:rgba(76,175,80,.24);
  color:#2e7d32;
}

.hc-field-message--info{
  background:rgba(22,119,255,.10);
  border-color:rgba(22,119,255,.24);
  color:#0b63ce;
}

.hc-field-message--warning{
  background:rgba(255,193,7,.18);
  border-color:rgba(255,193,7,.36);
  color:#7a5a00;
}

.hc-field-message--error{
  background:rgba(217,107,107,.12);
  border-color:rgba(217,107,107,.30);
  color:#9d211d;
}

.hc-field-message--neutral{
  background:#f6f7f9;
  border-color:#d7dde5;
  color:#425466;
}

.hc-field-message--compact{
  padding:6px 8px;
  font-size:11px;
}

.hc-field-message--plain{
  padding:0;
  border:0;
  background:transparent;
}

/* Tooltip */
.tooltip{position:fixed;z-index:99999;background:#333;color:#fff;padding:8px;border-radius:6px;font-size:12px;line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.2);display:none;max-width:280px}
.tip{text-decoration:underline;cursor:help;color:#666}
button.tip,.btn.tip,.mode-bar .btn.tip,.hc-inline-icon-button.tip,.hc-inline-icon-button.tip *{text-decoration:none;color:inherit}
.table th .tip,
label.tip{
  text-decoration:none;
  border-bottom:none;
  cursor:help;
  color:inherit;
}


/* Flash highlight (danger-zone jump) */
.highlight-flash{animation:flash-bg 2s ease}
@keyframes flash-bg{0%{background:#ff9999}50%{background:#ffcccc}100%{background:inherit}}

/* Page intro helper (used on all pages except Dashboard) */
.page-intro{display:block;text-align:center;color:#666;margin:0 auto 16px auto;font-size:13px}
.page-intro a{color:#007bff;text-decoration:none}
.page-intro a:hover{text-decoration:underline}

/* CSV upload area */
.csv-upload{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.csv-upload .muted{font-size:12px}
.csv-upload input[type="file"]{max-width:260px;padding:6px;border:1px solid #ccc;border-radius:6px;font-family:inherit;font-size:14px}
.csv-upload .btn{white-space:nowrap}
.csv-upload p.muted{margin:0}
.csv-break{flex-basis:100%;width:100%;}

/* Helper to keep form inputs at 60% width (used in cards) */
.form-errors{border:1px solid #d9534f;background:#fff6f6;border-radius:6px;padding:12px;margin-bottom:16px;color:#7f1d1d;}
.form-errors ul{margin:8px 0 0;padding-left:18px;}
.form-errors li{margin:2px 0;}

.input-60 input{width:60%;max-width:60%}
.input-60 select{width:60%;max-width:60%}

/* Helper to keep form inputs at 30% width (used in cards) */
.input-30 input { width:30%; max-width:30%; }
.input-30 select { width:30%; max-width:30%; }

/* Helper to keep form inputs at 80% width (used in cards) */
.input-80 input { width:80%; max-width:80%; }
.input-80 select { width:80%; max-width:80%; }

/* Small muted note inside cards */
.card-note{margin-top:6px;color:#666;font-size:12px}

/* Sortable table header links */
.table th a.sortable,
.table th a.sortable:link,
.table th a.sortable:visited,
.table th a.sortable:hover,
.table th a.sortable:focus,
.table th a.sortable:active {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Optional: subtle hover without underline (keeps look consistent with converter) */
.table th a.sortable:hover,
.table th a.sortable:focus {
  opacity: 0.85;
}

.table-responsive{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.table-scroll{
  width:100%;
  max-height:68vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.table-scroll table{
  min-width:100%;
}

@media (max-width:860px){
  .hc-data-table .filter-row th{
    top:0;
  }
}

.crm-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.crm-form-grid--company-layout{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.crm-card--allow-overflow{
  overflow:visible;
}

.crm-section--no-divider{
  border-top:0;
  padding-top:0;
  margin-top:16px;
}

.crm-repeat-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.crm-company-section{
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.crm-company-section[data-editing="1"]{
  border-color:#8bbf8f;
  box-shadow:0 0 0 2px rgba(76,175,80,.12);
}

.crm-company-section__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

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

.crm-card-header h2,
.crm-card-header h3{
  margin:0;
}

.crm-card-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
  margin-left:auto;
}

.crm-card-header__actions .hc-inline-icon-button{
  flex:0 0 auto;
}

.crm-company-picker-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.crm-company-picker-row > label{
  flex:1 1 320px;
  min-width:0;
}

.crm-company-picker-row__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}

.crm-inline-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.crm-inline-split > *{
  min-width:0;
}

.crm-inline-split--align-end{
  align-items:end;
}

.crm-field-with-action{
  display:flex;
  align-items:center;
  gap:8px;
}

.crm-field-with-action--top{
  align-items:flex-start;
}

.crm-field-with-action > input,
.crm-field-with-action > textarea,
.crm-field-with-action > select{
  flex:1 1 auto;
  min-width:0;
}

.crm-company-page-actions{
  justify-content:flex-start;
  padding-top:4px;
}

.crm-form-grid .span-2{grid-column:span 2}
.crm-form-grid .span-3{grid-column:1 / -1}
.crm-form-grid .span-4{grid-column:1 / -1}

.crm-portal-user-control{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
}

.crm-portal-user-control > select{
  flex:0 0 auto;
  width:auto;
  min-width:92px;
  max-width:112px;
  padding-right:30px;
}

.crm-portal-user-control .crm-inline-actions{
  flex-wrap:nowrap;
}

.crm-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.crm-inline-actions--nowrap{
  flex-wrap:nowrap;
}

.crm-inline-actions .hc-inline-icon-button{
  flex:0 0 auto;
}

.crm-portal-form-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:0;
  padding-top:26px;
}

@media (max-width:640px){
  .crm-portal-user-control{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .crm-card-header__actions,
  .crm-company-picker-row__actions{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
  .crm-inline-split{
    grid-template-columns:1fr;
  }
  .crm-portal-form-actions{
    padding-top:0;
  }
}

@media (max-width:980px){
  .crm-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-form-grid--company-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-form-grid .span-3{grid-column:1 / -1}
  .crm-form-grid .span-4{grid-column:1 / -1}
}

@media (max-width:640px){
  .crm-form-grid{grid-template-columns:1fr}
  .crm-form-grid--company-layout{grid-template-columns:1fr}
  .crm-form-grid .span-2,
  .crm-form-grid .span-3,
  .crm-form-grid .span-4{grid-column:1 / -1}
}

.crm-modal-overlay{
  position:fixed;
  inset:0;
  z-index:2200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.58);
}

.crm-modal-overlay[hidden]{display:none}

.crm-modal{
  width:100%;
  max-width:980px;
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:var(--radius-xl);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  padding:20px;
}

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

.crm-modal__header h2{margin:0}

.crm-modal__footer{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}

.crm-client-list-config{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.crm-client-list-config__panel{
  display:none;
}

.crm-client-list-config__panel.is-active{
  display:block;
}

.crm-client-list-config__checklist{
  display:flex;
  flex-direction:column;
  gap:0;
  max-height:24rem;
  overflow:auto;
  border:1px solid #d6d6d6;
  border-radius:var(--radius-md);
  background:#fff;
}

.crm-client-list-config__checklist label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #eee;
  cursor:pointer;
}

.crm-client-list-config__checklist label[hidden]{
  display:none;
}

.crm-client-list-config__checklist label:last-child{
  border-bottom:0;
}

.crm-client-list-config__checklist input{
  margin-top:2px;
}

.crm-client-list-config__empty{
  padding:12px;
  color:#666;
}

.hc-token-highlight{
  position:relative;
}

.hc-token-highlight__overlay{
  position:absolute;
  inset:1px;
  box-sizing:border-box;
  overflow:hidden;
  pointer-events:none;
  white-space:pre-wrap;
  word-break:break-word;
  color:#2f2f2f;
  background:transparent;
  border-radius:inherit;
}

.hc-token-highlight__input{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  background:transparent !important;
}

.hc-token-highlight.is-active .hc-token-highlight__input{
  color:transparent;
  caret-color:#1f1f1f;
}

.hc-token-highlight__overlay .hc-token-highlight__token{
  color:#0b63ce;
  background:rgba(11,99,206,.12);
  border-radius:4px;
  font-weight:inherit;
}

/* 60% rule for input field widths - used where 2 columns of input data exist */
.emp-details input[type="text"],
.emp-details input[type="number"],
.emp-details select{width:60%;max-width:60%}

/* =============== Placards =============== */
.card.placard {
  display: flex;
  flex-direction: column;
    justify-content: flex-start;
  min-height: 100px; /* modest height so copy + button breathe */
  gap: 10px;
}

.placard-title {
  margin: 0 0 16px 0;
}

.placard-meta {
  margin: 0;
}

/* Optional: make the button span full width on small screens for easy tapping */
@media (max-width: 640px) {
  .card.placard .btn {
    width: 100%;
  }
}
/* Company title / switcher */
.bar .brand-title { font-weight: 800; letter-spacing: .2px; }
.bar .brand-title .title-sep { opacity:.85; }
.bar .brand-title .page-title-text { font-weight: 700; }

/* Make the company name look like text but clickable */
.company-btn{
  background:none; border:0; color:#fff; font:inherit; font-weight:800; padding:0;
  cursor:pointer; text-decoration:none;
}
.company-btn:hover, .company-btn:focus{ text-decoration:underline; outline:none; }

/* Dropdown */
.company-menu{
  position:absolute; top:100%; left:0; margin-top:10px;
  background:#fff; color:#333; width:320px; padding:10px;
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  z-index:1000;
}
.company-menu .company-filter{
  width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:8px; font-size:14px;
  margin-bottom:8px;
}
.company-menu .company-list{
  max-height:260px; overflow:auto; border:1px solid #eee; border-radius:8px; padding:4px;
}
.company-menu .company-list a{
  display:block; padding:8px 8px; border-radius:6px; color:#333; text-decoration:none; font-size:14px;
}
.company-menu .company-list a:hover{ background:#f6f6f6; }
.company-menu .company-list a.active{ font-weight:600; }
.company-menu .company-menu-actions{ margin-top:8px; display:flex; justify-content:flex-end; }
.company-menu { font-weight: 400; } /* reset bold inside the dropdown */

.hc-filter-select{
  position:relative;
  width:100%;
}
.hc-filter-select__trigger{
  position:relative;
  width:100%;
  min-height:42px;
  padding:10px 40px 10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  color:#333;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.hc-filter-select__trigger:focus{
  outline:2px solid rgba(11,99,206,.28);
  outline-offset:2px;
}
.hc-filter-select__label{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hc-filter-select__caret{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:#666;
}
.hc-filter-select__menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:8px;
  padding:10px;
  border:1px solid #d6d6d6;
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  z-index:1100;
}
.hc-filter-select__menu[hidden],
.hc-filter-select__option[hidden],
.hc-multi-filter-select__option[hidden]{
  display:none !important;
}
.hc-filter-select__filter{
  width:100%;
  margin:0 0 8px;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:8px;
  font:inherit;
}
.hc-filter-select__list{
  max-height:260px;
  overflow:auto;
  border:1px solid #eee;
  border-radius:8px;
  padding:4px;
  background:#fff;
}
.hc-filter-select__option{
  display:block;
  width:100%;
  padding:8px;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#333;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.hc-filter-select__option:hover,
.hc-filter-select__option:focus{
  background:#f6f6f6;
  outline:none;
}
.hc-multi-filter-select__option{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.hc-multi-filter-select__option input{
  margin:2px 0 0;
  flex:0 0 auto;
}
.hc-multi-filter-select__option[data-multi-filter-select-option],
.hc-multi-filter-select__option[data-reminder-user-filter-option]{
  cursor:pointer;
}
.hc-multi-filter-select__copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.hc-multi-filter-select__copy small{
  color:#666;
  overflow-wrap:anywhere;
}
.hc-multi-filter-select__empty{
  margin:8px 0 0;
}
.hc-filter-select__option.is-active{
  background:#eaf6ff;
  font-weight:600;
}

/* =========================
   Spacing utilities (global)
   =========================
   Use on any element:
     - mt-8 / mt-12 / mt-16 / mt-24       -> margin-top
     - mb-8 / mb-12 / mb-16 / mb-24       -> margin-bottom
     - space-8 / space-12 / space-16 / space-24 -> margin top & bottom
   Or drop a standalone spacer block:
     - <div class="spacer-16"></div>  (fixed height)
   Intentional: !important to win over incidental margins without
   disturbing existing component CSS. No existing selectors are changed.
*/

.mt-0   { margin-top: 0px  !important; }
.mt-4   { margin-top: 4px  !important; }
.mt-8   { margin-top: 8px  !important; }
.mt-12  { margin-top: 12px !important; }
.mt-16  { margin-top: 16px !important; }
.mt-24  { margin-top: 24px !important; }

.mb-0   { margin-bottom: 0px  !important; }
.mb-4   { margin-bottom: 4px  !important; }
.mb-8   { margin-bottom: 8px  !important; }
.mb-12  { margin-bottom: 12px !important; }
.mb-16  { margin-bottom: 16px !important; }
.mb-24  { margin-bottom: 24px !important; }

.space-0  { margin-top: 0px  !important; margin-bottom: 0px  !important; }
.space-4  { margin-top: 4px  !important; margin-bottom: 4px  !important; }
.space-8  { margin-top: 8px  !important; margin-bottom: 8px  !important; }
.space-12 { margin-top: 12px !important; margin-bottom: 12px !important; }
.space-16 { margin-top: 16px !important; margin-bottom: 16px !important; }
.space-24 { margin-top: 24px !important; margin-bottom: 24px !important; }

/* Standalone spacer blocks */
.spacer-4  { height: 4px; }
.spacer-8  { height: 8px; }
.spacer-12 { height: 12px; }
.spacer-16 { height: 16px; }
.spacer-24 { height: 24px; }

/* ==== Page header, titles & CSV bar (appended) ==== */

/* Put Page Title + buttons on one row (reuse .actions-row) */
.actions-row.page-header,
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 12px;
}

/* Title group (use with <div class="page-title"> <h2 class="title-fancy">… */
.page-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px; /* keeps height aligned with buttons */
}


/* Optional small subtitle text (use inside cards) */
.subtitle{
  font-size:14px;
  color:#666;
  margin:0 0 8px 0;
}
.card .subtitle{ margin-top:0; } /* subtitle starts flush at top inside cards */

/* CSV: button + upload area on one row */
.csv-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}

/* When csv-upload sits in .csv-bar we remove its top margin to align with the button */
.csv-bar .csv-upload{ margin-top:0; }

/* Ensure .btn-row inside any header aligns to the right consistently */
.page-header .btn-row{ justify-content:flex-end; }

/* Marketing shell (scoped) */
.site-header {
  padding:24px 0;
  background:#ffffff;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .header-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 24px;
  flex-wrap:wrap;
}
.site-header .brand img { height:52px; }
.site-header .primary-nav {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.site-header .primary-nav a {
  color:#282829;
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  border-radius:6px;
  transition:background .15s;
}
.site-header .primary-nav a:hover,
.site-header .primary-nav a:focus {
  background:rgba(235,88,88,0.12);
  outline:none;
}

/* Footer (sitewide) */
footer {
  background:#101820;
  color:#ffffff;
  padding:32px 24px;
}
.footer-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.footer-links a {
  color:#ffffff;
  text-decoration:none;
}

/* ---- Full guide ---- */
.guide-layout{display:flex;gap:24px;align-items:flex-start;margin:20px 0;}
.guide-nav{position:sticky;top:96px;align-self:flex-start;background:#fff;border:1px solid #e4e4e4;border-radius:12px;padding:16px;max-height:calc(100vh - 120px);overflow:auto;width:260px;}
.guide-nav__title{font-weight:600;font-size:14px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;color:#555;}
.guide-nav__list{list-style:none;margin:0;padding-left:0;font-size:14px;}
.guide-nav__list>li{margin-bottom:8px;}
.guide-nav__list ol{list-style:none;margin:6px 0 0 16px;padding:0;font-size:13px;}
.guide-nav a{color:#1f5da0;text-decoration:none;display:inline-block;padding:2px 0;}
.guide-nav a.active{font-weight:600;color:#0a7a0a;}
.guide-nav__top{margin-top:12px;}
.guide-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;}
.guide-card{background:#fff;border:1px solid #e4e4e4;border-radius:16px;padding:24px;}
.guide-card h2{margin-top:0;}
.guide-subsection{margin-top:18px;padding-top:4px;border-top:1px solid #f0f0f0;}
.guide-subsection:first-of-type{border-top:none;padding-top:0;margin-top:12px;}
.guide-subsection h3{margin:16px 0 8px;}
.guide-card ul{padding-left:18px;}
.guide-card li{margin-bottom:6px;}
.guide-content section,
.guide-content .guide-subsection{scroll-margin-top:60px;}
.guide-errors-table{border-collapse:separate;border-spacing:0;}
.guide-errors-table th,.guide-errors-table td{white-space:normal;word-wrap:break-word;}
.guide-errors-table thead th{position:sticky;top:0;background:var(--hc-card-surface);z-index:2;box-shadow:inset 0 -1px 0 var(--hc-sticky-header-border);background-clip:padding-box;}
@media (max-width:1024px){
  .guide-layout{flex-direction:column;}
  .guide-nav{position:static;width:100%;max-height:none;}
  .guide-nav__list{columns:2;column-gap:16px;}
  .guide-nav__list>li{break-inside:avoid;}
  .guide-nav__list ol{columns:1;}
}
@media (max-width:640px){
  .guide-nav__list{columns:1;}
  .guide-card{padding:16px;}
}
html{
  scroll-behavior:smooth;
  scroll-padding-top: 40px;
}