/* Evorah UI & UX Phase V10 — loaded after legacy styles */
:root{
  --ev-page:#f3f6f8;--ev-surface:#fff;--ev-surface-2:#f7fafb;--ev-surface-3:#edf3f5;
  --ev-text:#17313a;--ev-text-soft:#62747b;--ev-border:#d9e3e7;--ev-accent:#287d78;
  --ev-accent-strong:#176963;--ev-danger:#b93838;--ev-warning:#8a6200;--ev-success:#227252;
  --ev-radius-sm:10px;--ev-radius:14px;--ev-radius-lg:20px;
  --ev-shadow:0 8px 24px rgba(17,43,55,.07);--ev-gap:18px;
}
html[data-theme="dark"]{
  --ev-page:#17242a;--ev-surface:#24343b;--ev-surface-2:#2a3d45;--ev-surface-3:#314750;
  --ev-text:#f1f6f7;--ev-text-soft:#c0ccd1;--ev-border:#4b626c;--ev-accent:#55cfc3;
  --ev-accent-strong:#7ee0d6;--ev-danger:#ff9b9b;--ev-warning:#f0cf78;--ev-success:#82ddb5;
  --ev-shadow:0 8px 26px rgba(0,0,0,.22);
  color-scheme:dark;
}
html,body{min-height:100%;background:var(--ev-page);color:var(--ev-text)}
body{line-height:1.45}
main{background:var(--ev-page);color:var(--ev-text);min-width:0}
main>*{min-width:0}

/* Shared page shell */
.page-head,.page-header,.compact-hero,.gradient-head{
  width:100%;min-height:104px;margin:0 0 var(--ev-gap);padding:22px 24px;border:1px solid var(--ev-border);
  border-radius:var(--ev-radius-lg);background:var(--ev-surface);color:var(--ev-text);box-shadow:var(--ev-shadow);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.page-head h1,.page-head h2,.page-header h1,.page-header h2,.compact-hero h1,.gradient-head h1{margin:0;color:var(--ev-text);line-height:1.18}
.page-head p,.page-header p,.compact-hero p,.gradient-head p{margin:6px 0 0;color:var(--ev-text-soft)}
.panel,.card,.admin-panel,.report-card,.dashboard-card{
  background:var(--ev-surface);color:var(--ev-text);border:1px solid var(--ev-border);border-radius:var(--ev-radius-lg);
  box-shadow:var(--ev-shadow);padding:20px;margin-bottom:var(--ev-gap);min-width:0;
}
.panel h1,.panel h2,.panel h3,.panel h4,.card h1,.card h2,.card h3,.card h4{color:var(--ev-text)}
.small,.muted,.helptext,.panel p,.card p{color:var(--ev-text-soft)}
.section-head-row,.section-heading,.directory-heading-row,.staff-section-head{gap:16px;flex-wrap:wrap}

/* Grids never overflow */
.grid,.profile-grid,.two-column-layout,.referral-detail-grid,.detail-grid,.form-grid,.stats,.young-stats,.referral-kpis,
.staff-basic-grid,.role-card-row,.admin-user-list{min-width:0}
.grid>*,.profile-grid>*,.two-column-layout>*,.referral-detail-grid>*,.detail-grid>*,.form-grid>*,.stats>*,.young-stats>*,.referral-kpis>*{min-width:0}

/* Forms */
input,select,textarea{
  width:100%;max-width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--ev-border);border-radius:var(--ev-radius-sm);
  background:var(--ev-surface-2);color:var(--ev-text);box-shadow:none;outline:none;
}
textarea{min-height:112px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ev-text-soft);opacity:.8}
input:focus,select:focus,textarea:focus{border-color:var(--ev-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ev-accent) 20%,transparent)}
label{color:var(--ev-text)}
form p{min-width:0}

/* Buttons */
button,.button,.button-link,.primary-action,.primary-create-user{
  min-height:42px;border-radius:11px;border:1px solid transparent;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ev-accent);color:#fff;text-decoration:none;font-weight:800;line-height:1.2;cursor:pointer;white-space:normal;text-align:center;
}
html[data-theme="dark"] button,html[data-theme="dark"] .button,html[data-theme="dark"] .button-link,
html[data-theme="dark"] .primary-action,html[data-theme="dark"] .primary-create-user{color:#102d31}
.button.secondary,.secondary,.button-light{background:var(--ev-surface-2);border-color:var(--ev-border);color:var(--ev-text)}
button:hover,.button:hover,.button-link:hover{filter:brightness(.98);transform:none}

/* Cards, KPIs and status surfaces */
.stats>div,.stat-card,.young-stat-card,.allocated-stat,.planner-stat,.referral-kpi,.detail-grid>div,.record,.match-card,
.admin-user-card,.goal-donut-card,.achievement-suggestion,.empty-young-directory,.young-directory-controls,.young-person-modern-card{
  background:var(--ev-surface);color:var(--ev-text);border-color:var(--ev-border);box-shadow:none;
}
.stats strong,.stat-card strong,.young-stat-card strong,.referral-kpi strong,.detail-grid strong{color:var(--ev-text)}
.stats span,.stat-card span,.young-stat-card span,.referral-kpi span,.detail-grid span{color:var(--ev-text-soft)}
.open-young-person-button,.document-list a,.address-result{background:var(--ev-surface-2);color:var(--ev-text);border-color:var(--ev-border)}

/* Tables */
.table-wrap,.responsive-table{width:100%;max-width:100%;overflow:auto;border-radius:var(--ev-radius);border:1px solid var(--ev-border)}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--ev-surface);color:var(--ev-text)}
th{background:var(--ev-surface-2);color:var(--ev-text);font-weight:800;position:sticky;top:0;z-index:1}
th,td{padding:11px 12px;border-bottom:1px solid var(--ev-border);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--ev-accent) 6%,var(--ev-surface))}

/* Tabs and filters */
.tabs-panel,.clean-tabs,.filter-tabs,.access-tabs{
  display:flex;align-items:center;gap:8px;overflow-x:auto;max-width:100%;padding:6px;background:var(--ev-surface-2);
  border:1px solid var(--ev-border);border-radius:14px;scrollbar-width:thin;
}
.tabs-panel a,.clean-tabs a,.filter-tabs a,.access-tab{
  flex:0 0 auto;min-height:40px;padding:9px 13px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--ev-text);text-decoration:none;font-weight:750;white-space:nowrap;
}
.tabs-panel a:hover,.clean-tabs a:hover,.filter-tabs a:hover,.access-tab:hover{background:var(--ev-surface)}
.tabs-panel a.active-tab,.clean-tabs a.active-tab,.filter-tabs a.active,.access-tab.active,
.tabs-panel a[aria-current="page"],.filter-tabs a[aria-current="page"]{
  background:var(--ev-surface);border-color:var(--ev-border);color:var(--ev-accent-strong);box-shadow:0 2px 8px rgba(0,0,0,.08)
}
[id]{scroll-margin-top:90px}

/* Staff role selection — stable, contained and readable */
.staff-access-page{display:block;width:100%;min-width:0}
.staff-create-panel,.current-users-panel{width:100%;max-width:none}
.staff-basic-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.staff-role-heading{align-items:flex-start}
.access-package-card{display:none!important;width:100%;min-width:0}
.access-package-card.active{display:block!important}
.role-card-row-two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.role-card-row-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.role-choice{
  width:100%;min-width:0;min-height:168px!important;overflow:hidden;background:var(--ev-surface-2)!important;color:var(--ev-text)!important;
  border:1px solid var(--ev-border)!important;border-radius:var(--ev-radius)!important;padding:17px!important;
}
.role-choice-copy strong,.role-feature{color:var(--ev-text)!important}.role-choice-summary{color:var(--ev-text-soft)!important}
.role-choice:has(input:checked){border-color:var(--ev-accent)!important;background:color-mix(in srgb,var(--ev-accent) 10%,var(--ev-surface))!important}
.current-users-panel .admin-user-list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Local authority selector */
.authority-grid,.local-authority-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:12px!important}
.authority-card,.local-authority-card,.authority-option{
  width:100%;min-width:0;min-height:62px;display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;
  align-items:center!important;justify-content:start!important;gap:12px!important;padding:14px 15px!important;
  background:var(--ev-surface-2)!important;color:var(--ev-text)!important;border:1px solid var(--ev-border)!important;border-radius:13px!important;text-align:left!important;
}
.authority-card input,.local-authority-card input,.authority-option input{width:18px!important;height:18px!important;margin:0!important;justify-self:start!important}
.authority-card span,.local-authority-card span,.authority-option span{min-width:0!important;color:var(--ev-text)!important;text-align:left!important;overflow-wrap:anywhere!important;line-height:1.3!important}

/* Dark mode: prevent legacy pale surfaces and invisible text */
html[data-theme="dark"] main :is(.panel,.card,.page-head,.page-header,.gradient-head,.compact-hero,.record,.stat-card,.young-stat-card,
.allocated-stat,.planner-stat,.referral-kpi,.admin-user-card,.match-card,.goal-donut-card,.achievement-suggestion,.young-person-modern-card,
.empty-young-directory,.young-directory-controls,.detail-grid>div,.address-finder,.notification-panel,.evorah-alert-dialog){
  background:var(--ev-surface)!important;background-image:none!important;color:var(--ev-text)!important;border-color:var(--ev-border)!important;
}
html[data-theme="dark"] main :is(h1,h2,h3,h4,h5,h6,strong,b,label,legend,th,td){color:var(--ev-text)}
html[data-theme="dark"] main :is(p,small,.small,.muted,.helptext,dt){color:var(--ev-text-soft)}
html[data-theme="dark"] main :is(input,select,textarea,.young-search-field,.open-young-person-button,.document-list a,.address-result){
  background:var(--ev-surface-2)!important;color:var(--ev-text)!important;border-color:var(--ev-border)!important;
}
html[data-theme="dark"] main option{background:var(--ev-surface);color:var(--ev-text)}
html[data-theme="dark"] .notice.warning{background:#4a4024!important;color:#f6dda0!important;border:1px solid #7a6837}
html[data-theme="dark"] .success-note,html[data-theme="dark"] .message{background:#203e35!important;color:#bcebd8!important}
html[data-theme="dark"] .button-light,html[data-theme="dark"] .button.secondary,html[data-theme="dark"] .secondary{background:var(--ev-surface-2)!important;color:var(--ev-text)!important;border-color:var(--ev-border)!important}
/* Intentionally light CTA */
html[data-theme="dark"] .add-young-person-primary{background:#edf7f6!important;color:#163840!important}
html[data-theme="dark"] .add-young-person-primary *{color:inherit!important}
html[data-theme="dark"] .add-young-person-primary small{color:#586f76!important}

/* Consistent responsive behaviour */
@media(max-width:1180px){
  .referral-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .staff-basic-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .role-card-row-three{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .referral-detail-grid{grid-template-columns:1fr}
  .sticky-panel{position:static}
}
@media(max-width:820px){
  main{padding:16px}
  .page-head,.page-header,.compact-hero,.gradient-head{align-items:flex-start;flex-direction:column;padding:18px}
  .stats,.young-stats,.referral-kpis,.detail-grid,.form-grid,.staff-basic-grid,.role-card-row-two,.role-card-row-three{grid-template-columns:1fr!important}
  .young-directory-search,.filter-toolbar,.inline-entry-form,.document-upload-row{grid-template-columns:1fr!important}
  .hero-actions,.form-actions{width:100%}.hero-actions>*{flex:1 1 auto}
  th,td{white-space:normal}
}
@media print{.tabs-panel,.clean-tabs,.filter-tabs,.top-notification-bar{display:none!important}}