/* NGI Quote · Director Control
   Premium legible desktop and mobile layout, without changing business logic.
   Design tokens: ink/navy, restrained blue CTA, pale blue-gray canvas. */
:root{
  --bg:#f3f6fb;
  --side:#fff;
  --card:#fff;
  --line:#e1e7f1;
  --text:#16253d;
  --muted:#64748b;
  --blue:#315fdf;
  --navy:#142747;
  --shadow:0 5px 22px rgba(24,47,87,.045);
}
body{
  background:#f3f6fb;
  color:#172841;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.shell{grid-template-columns:264px minmax(0,1fr)}
.sidebar{
  background:#fff;
  border-right:1px solid #e3e8f1;
  padding:22px 14px;
}
.brand{padding:2px 10px 18px;align-items:center}
.brand b{font-size:21px;letter-spacing:-.025em;color:#13274a}
.brand span{font-size:13px}
.logo{background:#eaf1ff;color:#315fdf;box-shadow:none;border-radius:13px}
.nav{gap:5px}
.navbtn{
  font-size:15px;
  font-weight:630;
  line-height:1.35;
  padding:12px 14px;
  min-height:46px;
  border-radius:11px;
  color:#435269;
}
.navbtn.active{
  background:#edf3ff;
  color:#234fb6;
  border:1px solid #dce7fc;
  box-shadow:none;
}
.navbtn:hover{background:#f3f6fc}
.newbtn{min-height:46px;font-size:15px;box-shadow:none;border-radius:11px}
.roadmap{
  font-size:13px;
  line-height:1.5;
  background:#f8faff;
  border-color:#e3eaf5;
}
.roadmap b{font-size:14px}
.main{padding:30px clamp(22px,2.5vw,42px) 52px}
.top{margin-bottom:24px}
.title h1{font-size:30px;line-height:1.2;letter-spacing:-.035em;color:#142747}
.title p{font-size:15px;line-height:1.5}
.mode{font-size:13px}
.btn,.filebtn{
  font-size:14px;
  font-weight:720;
  min-height:42px;
  border-radius:10px;
  transition:box-shadow .16s ease,background .16s ease,transform .16s ease;
}
.btn.primary{
  background:#315fdf;
  border:1px solid #315fdf;
  box-shadow:0 3px 9px rgba(49,95,223,.14);
}
.btn.primary:hover,.btn.primary:focus-visible{
  background:#264dbb;
  box-shadow:0 5px 14px rgba(49,95,223,.22);
}
.btn.secondary{
  color:#293d5a;
  background:#fff;
  border:1px solid #ccd7e7;
  box-shadow:none;
}
.btn.secondary:hover,.btn.secondary:focus-visible{
  background:#f1f5fb;
  border-color:#aabbd3;
}
.btn:focus-visible,.periodbtn:focus-visible,.navbtn:focus-visible{
  outline:3px solid rgba(52,102,228,.35);
  outline-offset:2px;
}
.btn:disabled{opacity:.55;cursor:wait}

/* Director-specific readable hierarchy */
#view-leader{max-width:1512px;margin:0 auto}
#view-leader>.card,
#view-leader .director-focus-grid>.card,
#view-leader .director-priorities>.card,
#view-leader .director-supplemental>.card{
  background:#fff;
  border:1px solid #e1e7f0;
  border-radius:19px;
  padding:25px 27px;
  box-shadow:0 5px 22px rgba(24,47,87,.045);
  min-width:0;
}
#view-leader .sectiontitle{gap:16px;align-items:flex-start;margin-bottom:18px}
#view-leader .sectiontitle h2{
  font-size:22px;
  line-height:1.25;
  font-weight:780;
  letter-spacing:-.025em;
  color:#142747;
  margin:0;
}
#view-leader .sectiontitle p{
  font-size:15px;
  line-height:1.5;
  color:#66778f;
  margin:6px 0 0!important;
  max-width:65ch;
}
#view-leader .hint{font-size:13px;line-height:1.5;color:#6a7990}
#view-leader .director-overview-card{
  border-top:4px solid #315fdf;
  padding-top:23px;
}
#view-leader .periods{gap:7px;flex-shrink:0}
#view-leader .periodbtn{
  min-height:38px;
  padding:7px 13px;
  font-size:14px;
  font-weight:680;
  color:#455773;
  background:#fff;
  border:1px solid #d6e0ef;
  border-radius:10px;
}
#view-leader .periodbtn.active{
  background:#edf3ff;
  border-color:#acc4f9;
  color:#234fae;
  box-shadow:inset 0 0 0 1px rgba(67,119,238,.07);
}
#view-leader .stats{gap:12px;margin:12px 0 0}
#view-leader .leader-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
#view-leader .stat{
  min-width:0;
  padding:18px;
  background:#f8faff;
  border:1px solid #e3ebf6;
  border-radius:13px;
}
#view-leader .stat b{
  font-size:33px;
  font-weight:820;
  letter-spacing:-.045em;
  line-height:1.16;
  color:#19365e;
}
#view-leader .stat span{
  display:block;
  margin-top:8px;
  font-size:14px;
  font-weight:540;
  color:#566781;
  line-height:1.35;
}
#view-leader .director-overview-stats .stat:nth-child(4){
  background:#fff7f7;
  border-color:#f6dede;
}
#view-leader .director-overview-stats .stat:nth-child(4) b{color:#ab3343}
#view-leader .director-finance-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:12px!important;
}
#view-leader .director-finance-stats .stat{background:#fff}
#view-leader .director-finance-stats .stat b{font-size:27px}
#view-leader .director-finance-stats .stat:nth-child(2) b{color:#b1444b}

/* Quick report and real CRM side by side, without a cramped table. */
#view-leader .director-focus-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:stretch;
  gap:18px;
  margin-top:20px;
}
#view-leader .director-focus-grid>.card{margin:0!important}
#view-leader .director-focus-grid .sectiontitle{
  align-items:flex-start;
  flex-wrap:wrap;
}
#directorReportCard{display:flex;flex-direction:column}
#directorReportCard .sectiontitle .actions{
  margin-top:0;
  gap:9px;
}
#directorReportCard .sectiontitle .actions .btn{
  padding:11px 15px;
  white-space:normal;
}
#directorReportCard #directorNotificationStatus{
  font-size:14px;
  color:#5f7391;
  margin:2px 0 12px;
}
#directorReportCard #directorBriefState{
  font-size:14px;
  line-height:1.45;
  padding:12px 14px;
  color:#3f5b85;
  background:#f2f6ff;
  border:1px solid #e1eafe;
}
#directorReportCard #directorBriefPreview{
  font:500 16px/1.7 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  color:#1d2f49;
  background:#f8faff!important;
  border-color:#dce7f7!important;
  padding:18px 20px!important;
  max-height:420px;
  border-radius:13px!important;
}
#directorReportCard>.hint{font-size:13px;line-height:1.55;margin-top:auto;padding-top:12px}
#directorNotificationPanel{
  padding:18px!important;
  border-radius:13px!important;
  box-shadow:none!important;
}
#directorNotificationPanel .field label{font-size:14px;line-height:1.55;color:#304259}
#directorNotificationPanel .field input[type=checkbox]{
  width:19px;
  height:19px;
  accent-color:#315fdf;
  vertical-align:middle;
}
#directorNotificationPanel .field input:not([type=checkbox]){
  font-size:15px;
  min-height:43px;
  color:#1b2f49;
}
#directorNotificationPanel .branding-help{font-size:13px;line-height:1.5}
#directorCrmCard .director-crm-stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
#directorCrmCard .stat{padding:16px}
#directorCrmCard .stat b{font-size:29px}
#directorCrmCard .stat span{font-size:14px}
#directorCrmCard #directorCrmState{
  margin-top:13px!important;
  font-size:13px;
  line-height:1.5;
  color:#64758d;
}
#directorCrmCard #directorCrmStages .attention-item{
  background:#f8faff;
  border:1px solid #e0e8f6;
  padding:13px 15px;
}
#directorCrmCard #directorCrmStages .attention-item b{
  font-size:15px;
  color:#263e60;
}
#directorCrmCard #directorCrmStages .attention-item span{
  font-size:13px;
  line-height:1.5;
}

/* Priority cards are the main actionable area. */
#view-leader .director-priorities{margin-top:20px}
#view-leader .director-priorities .card{margin:0!important}
#view-leader .director-attention-card .sectiontitle h2{font-size:24px}
#view-leader .director-attention-count{
  font-size:13px;
  font-weight:770;
  color:#294f9d;
  background:#edf3ff;
  border-radius:9px;
  min-width:24px;
  padding:3px 8px;
  vertical-align:middle;
  margin-left:6px;
}
#view-leader #leaderAttention{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}
#view-leader #leaderAttention .attention-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  min-width:0;
  min-height:158px;
  border:1px solid #e2e8f2;
  border-left:4px solid #9eb5da;
  border-radius:12px;
  padding:18px 19px;
  background:#fafcff;
  box-shadow:none;
}
#view-leader #leaderAttention .attention-item.overdue{
  background:#fffafa;
  border-color:#f0dfe1;
  border-left-color:#d65a63;
}
#view-leader #leaderAttention .attention-item b{
  font-size:18px;
  font-weight:760;
  line-height:1.4;
  color:#253650;
  overflow-wrap:anywhere;
}
#view-leader #leaderAttention .attention-item.overdue b{color:#96323b}
#view-leader #leaderAttention .attention-item span{
  margin:8px 0 0;
  color:#52627b;
  font-size:15px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
#view-leader .director-card-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  width:100%;
  margin-top:auto;
  padding-top:15px;
}
#view-leader #leaderAttention .attention-item .btn{
  margin:0;
  min-height:40px;
  padding:9px 14px;
  font-size:15px;
  font-weight:700;
  border-radius:9px;
}
#view-leader #leaderAttention .attention-item .btn.secondary{
  background:#fff;
  color:#2d548c;
  border-color:#ccd9ea;
}
#view-leader .director-empty{
  grid-column:1/-1;
  padding:24px;
  border-radius:13px;
  border:1px dashed #b9d6c6;
  background:#f5fbf7;
  font-size:16px;
  color:#2b6c48;
}

/* Progressive disclosure for detailed tables, never bury primary decisions. */
#view-leader .director-supplemental{
  margin-top:18px;
  border:1px solid #dee7f2;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 5px 22px rgba(24,47,87,.03);
}
#view-leader .director-supplemental summary{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  position:relative;
  padding:19px 58px 19px 25px;
  cursor:pointer;
  font-size:17px;
  font-weight:760;
  color:#263b59;
  list-style:none;
}
#view-leader .director-supplemental summary::-webkit-details-marker{display:none}
#view-leader .director-supplemental summary span{
  color:#728098;
  font-size:14px;
  font-weight:500;
  margin-left:auto;
}
#view-leader .director-supplemental summary:after{
  content:"⌄";
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-53%);
  color:#64758f;
  font-size:25px;
  font-weight:400;
  line-height:1;
}
#view-leader .director-supplemental[open] summary{
  border-bottom:1px solid #e5ebf4;
}
#view-leader .director-supplemental[open] summary:after{
  content:"⌃";
  transform:translateY(-42%);
}
#view-leader .director-supplemental>.card{
  box-shadow:none!important;
  border:0!important;
  margin:0!important;
  padding:24px 25px!important;
  border-radius:0!important;
}
#view-leader .director-team-details .tablewrap{
  border-radius:12px;
  border-color:#dfe7f2;
  overflow-x:auto;
}
#view-leader .director-team-details .table{min-width:720px!important}
#view-leader .director-team-details .table th{
  font-size:13px;
  padding:13px 14px;
  letter-spacing:.045em;
  color:#66758e;
  background:#f5f8fd;
}
#view-leader .director-team-details .table td{
  font-size:16px;
  padding:14px;
  color:#2b3b56;
}
#view-leader .director-team-details .table td b{font-weight:720}
#view-leader .director-day-details .stat b{font-size:27px}
#view-leader .director-day-details .stat span{font-size:14px}
#view-leader>.info:last-child{
  background:transparent;
  border:0;
  color:#79879b;
  margin:13px 0 0!important;
  padding:4px;
  font-size:13px;
  line-height:1.5;
}
#view-leader>.info:last-child b{color:#5e718e;font-weight:630}

@media(max-width:1280px){
  #view-leader .director-focus-grid{grid-template-columns:1fr}
  #view-leader .director-overview-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  #view-leader .director-finance-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  #directorCrmCard .director-crm-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:950px){
  .shell{grid-template-columns:1fr}
  .main{padding:22px 18px 36px}
  #view-leader .director-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-leader .director-finance-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view-leader #leaderAttention{grid-template-columns:1fr}
  #view-leader .sectiontitle{flex-wrap:wrap}
  #directorCrmCard .director-crm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
  .main{padding:18px 12px 32px}
  .title h1{font-size:25px}
  #view-leader>.card,
  #view-leader .director-focus-grid>.card,
  #view-leader .director-priorities>.card{padding:19px 16px;border-radius:15px}
  #view-leader .sectiontitle h2{font-size:21px}
  #view-leader .sectiontitle p{font-size:14px}
  #view-leader .director-overview-stats,
  #view-leader .director-finance-stats{gap:8px}
  #view-leader .stat{padding:13px}
  #view-leader .stat b{font-size:28px}
  #view-leader .stat span{font-size:13px}
  #view-leader .periods{width:100%}
  #view-leader .periodbtn{flex:1}
  #directorReportCard .sectiontitle .actions{width:100%}
  #directorReportCard .sectiontitle .actions .btn{flex:1 1 140px}
  #view-leader .director-supplemental summary{padding:16px 42px 16px 17px;font-size:16px}
  #view-leader .director-supplemental summary span{display:none}
  #view-leader .director-supplemental>.card{padding:18px 14px!important}
  #view-leader #leaderAttention .attention-item{padding:16px;min-height:0}
  #view-leader #leaderAttention .attention-item b{font-size:17px}
  #view-leader #leaderAttention .attention-item span{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .btn,.filebtn{transition:none}
}

/* Last-mile responsive hierarchy: decisions before secondary CRM detail. */
#mobileNavToggle{display:none}
#view-leader .director-focus-grid{align-items:start}
@media(max-width:980px){
  .sidebar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    padding:12px 16px;
  }
  .sidebar>.brand{grid-column:1;margin:0;padding:0}
  #mobileNavToggle{
    display:inline-flex;
    grid-column:2;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:8px 13px;
    border:1px solid #cfdbee;
    border-radius:10px;
    background:#f6f9ff;
    color:#294a81;
    font-size:14px;
    font-weight:750;
    cursor:pointer;
  }
  .sidebar>:not(.brand):not(#mobileNavToggle){grid-column:1/-1}
  .sidebar:not(.mobile-open)>:not(.brand):not(#mobileNavToggle){display:none}
  .sidebar.mobile-open{padding-bottom:18px}
  .sidebar.mobile-open .nav{max-height:360px;overflow-y:auto}
  .sidebar.mobile-open .roadmap{display:none}
}
@media(max-width:540px){
  #view-leader .director-overview-stats .stat:nth-child(2),
  #view-leader .director-overview-stats .stat:nth-child(5),
  #view-leader .director-finance-stats .stat.director-zero-metric{display:none}
  #view-leader .director-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}


#view-leader .director-source-state{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid #e4eaf2;
}
#view-leader .director-source-time,
#view-leader .director-source-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 9px;
  border-radius:9px;
  border:1px solid #dfe6ef;
  background:#f7f9fc;
  color:#66758a;
  font-size:12px;
}
#view-leader .director-source-chip b{color:#32445c;margin-right:2px}
#view-leader .director-source-chip.ready{
  background:#effaf4;
  border-color:#c7e5d2;
  color:#24704a;
}
#view-leader .director-source-chip.muted{
  background:#f7f8fa;
  color:#7a8799;
}

/* VISUAL-01: keep the director attention table readable without horizontal scrolling. */
@media(max-width:760px){
  #view-leader .director-team-details .table{min-width:0!important;table-layout:fixed}
  #view-leader .director-team-details .table th:nth-child(3),
  #view-leader .director-team-details .table td:nth-child(3),
  #view-leader .director-team-details .table th:nth-child(5),
  #view-leader .director-team-details .table td:nth-child(5){display:none}
  #view-leader .director-team-details .table th:nth-child(1),
  #view-leader .director-team-details .table td:nth-child(1){width:52%}
  #view-leader .director-team-details .table th:nth-child(2),
  #view-leader .director-team-details .table td:nth-child(2),
  #view-leader .director-team-details .table th:nth-child(4),
  #view-leader .director-team-details .table td:nth-child(4){width:24%}
}

/* Director 2026-11-11: decisions first, compact executive summary. */
#view-leader .director-priorities{margin-top:0}
#view-leader .director-attention-card{border-top:4px solid #315fdf;padding-top:20px}
#view-leader .director-attention-card .sectiontitle{align-items:center;margin-bottom:13px}
#view-leader .director-attention-card .sectiontitle p{margin-top:3px!important}
#view-leader .director-overview-card{
  border-top:0;
  margin-top:14px;
  padding:18px 20px;
}
#view-leader .director-overview-card .sectiontitle{align-items:center;margin-bottom:9px}
#view-leader .director-overview-card .sectiontitle h2{font-size:19px}
#view-leader .director-overview-card .sectiontitle p{font-size:13px;margin-top:2px!important}
#view-leader .director-overview-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:0;
}
#view-leader .director-overview-stats .stat{
  padding:11px 13px;
  min-height:76px;
}
#view-leader .director-overview-stats .stat b{font-size:25px}
#view-leader .director-overview-stats .stat span{font-size:12px;margin-top:4px}
#view-leader .director-data-freshness{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 9px;
  border:1px solid #dfe6ef;
  border-radius:9px;
  background:#f7f9fc;
  color:#6a7890;
  font-size:12px;
  white-space:nowrap;
}
#view-leader .director-finance-details,
#view-leader .director-operations-details{margin-top:10px}
#view-leader .director-finance-details summary,
#view-leader .director-operations-details summary{padding:14px 50px 14px 20px;font-size:15px}
#view-leader .director-finance-details>.card,
#view-leader .director-operations-details>.card{padding:15px 18px!important}
#view-leader .director-onec-finance-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0!important;
}
#view-leader .director-onec-finance-stats .stat,
#view-leader .director-operations-details .stat{
  padding:12px 13px;
  background:#f8faff;
  min-height:78px;
}
#view-leader .director-onec-finance-stats .stat b,
#view-leader .director-operations-details .stat b{
  font-size:23px;
  white-space:nowrap;
}
#view-leader .director-onec-finance-stats .stat span,
#view-leader .director-operations-details .stat span{font-size:12px;margin-top:5px}
#view-leader .director-operations-details .director-finance-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0!important;
}
#view-leader .director-source-state{
  margin-top:9px;
  padding-top:9px;
}
#view-leader .director-source-state .director-source-chip{width:auto;max-width:100%;white-space:normal}
#view-leader .director-focus-grid{margin-top:12px}
#view-leader .director-team-details{margin-top:10px}
#view-leader .director-day-details{margin-top:10px}
#view-leader>.info:last-child{margin-top:8px!important}

@media(max-width:1100px){
  #view-leader .director-overview-stats,
  #view-leader .director-onec-finance-stats,
  #view-leader .director-operations-details .director-finance-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
  #view-leader .director-attention-card .sectiontitle{align-items:flex-start}
  #view-leader .director-data-freshness{white-space:normal}
  #view-leader .director-overview-card{padding:15px 14px}
  #view-leader .director-overview-stats .stat b{font-size:22px}
  #view-leader .director-onec-finance-stats .stat b,
  #view-leader .director-operations-details .stat b{font-size:20px;white-space:normal}
}

#view-leader .director-focus-grid>.director-supplemental{margin-top:0}
#view-leader .director-report-details>.card,
#view-leader .director-crm-details>.card{padding:18px!important}
#view-leader .director-report-details summary,
#view-leader .director-crm-details summary{padding:14px 50px 14px 20px;font-size:15px}
/* Compact director attention cards. */
#view-leader #leaderAttention .attention-item{
  min-height:124px;
  padding:14px 16px;
}
#view-leader #leaderAttention .attention-item b{font-size:16px;line-height:1.35}
#view-leader #leaderAttention .attention-item span{font-size:13px;line-height:1.45;margin-top:5px}
#view-leader .director-card-actions{padding-top:11px;gap:7px}
#view-leader #leaderAttention .attention-item .btn{min-height:36px;padding:7px 11px;font-size:13px}
#view-leader #leaderAttention .attention-item.integration-alert{
  grid-column:1/-1;
  min-height:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 14px;
}
#view-leader #leaderAttention .integration-alert .integration-alert-copy{min-width:0;flex:1}
#view-leader #leaderAttention .integration-alert b{display:inline;font-size:15px}
#view-leader #leaderAttention .integration-alert span{display:inline;margin:0 0 0 8px;font-size:12px}
#view-leader #leaderAttention .integration-alert .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:700px){
  #view-leader #leaderAttention .attention-item.integration-alert{align-items:flex-start;flex-direction:column;gap:9px}
  #view-leader #leaderAttention .integration-alert b,
  #view-leader #leaderAttention .integration-alert span{display:block;margin-left:0}
}