/* Certificates and compliance — screen styles.
   Owned by ONE porting agent so screens can be built in parallel without
   racing on main.css. Loads AFTER main.css, so a bare class here beats a
   bare class there — but an ID rule in main.css still wins. Check the
   cascade before assuming a rule applies.
   Tokens, the .tip tooltip system and the chart series live in main.css and
   must not be redefined here. */

/* ══ CERTIFICATES — the register ═══════════════════════════════════════════
   Ported from design/ui/Certificates.dc.html. The markup is generated by
   renderCertsView() (js/features/certs.js) into #certs-content; the static
   .toolbar shell above it in index.html is hidden here because the board
   carries its own title row and index.html is frozen for this wave.
   Cascade notes (each selector grepped in main.css before it was used):
   · .toolbar (0,1,0) → #view-certs .toolbar (1,1,0) hides it.
   · .scroll (0,1,0) sets flex:1 / overflow-y:auto / padding:20px, and
     #certs-content ALSO carries an inline padding:20px 24px that only
     !important can beat — that is the one !important in this file.
   · .view h1 (0,1,1) sets font-family !important (Fraunces — wanted),
     font-weight 300 and letter-spacing -1px; #view-certs .certs-h1 (1,1,0)
     wins the weight and tracking.
   · input/select element rules (0,0,1), input:focus (0,1,1) and
     input:hover:not(:focus) (0,2,1) are restated here at (1,2,1)+ so the
     register's fields stay white and hairline.
   · *{box-sizing:border-box;margin:0;padding:0} is global — buttons and
     labels start from zero, so every control here restates its padding.
   · button{font-family:var(--font)} (0,0,1) is kept.
   · The .tip system is used as-is; the only addition is a scoped .start
     modifier (left-anchored bubble) for the one tooltip that sits hard
     against the register's left edge — a mirror of .left, not a redefinition.
   · Board hexes are literal here, as in the v220 Dashboard / Add / Schedule
     blocks. #3D4854 / #6E7F5C are general ink/accent — never bulk-replaced. */

#view-certs .toolbar{display:none;}
#view-certs .scroll{display:flex;flex-direction:column;padding:26px 32px !important;background:#fff;}
#view-certs .certs-wrap{width:100%;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}

/* ── Title row ── */
#view-certs .certs-head{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;}
#view-certs .certs-head-tx{min-width:0;}
#view-certs .certs-h1{font-size:27px;font-weight:400;letter-spacing:-.5px;line-height:1.15;margin:0 0 3px;color:#2A323A;}
#view-certs .certs-sub{font-size:12.5px;color:#6B7480;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-certs .certs-head-acts{position:relative;display:flex;align-items:center;gap:9px;padding-top:2px;flex-shrink:0;}

/* Buttons (board §4): white raised, dark primary */
#view-certs .certs-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#2A323A;border:none;border-radius:9999px;
  padding:8px 15px;font-family:var(--font);font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.25;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);}
#view-certs .certs-btn:hover{background:#F7F7F7;}
#view-certs .certs-btn-dark{background:#2A323A;color:#FCFBF9;padding:8px 16px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);}
#view-certs .certs-btn-dark:hover{background:#3D4854;}
#view-certs .certs-btn:disabled{opacity:.45;cursor:not-allowed;}
#view-certs .certs-btn:disabled:hover{background:#fff;}
#view-certs .certs-btn-dark:disabled:hover{background:#2A323A;}

/* Add-obligation popover — under the title-row buttons */
#view-certs .certs-addpop{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:340px;background:#fff;border:1px solid #E8EDF2;
  border-radius:12px;padding:14px 16px 15px;box-shadow:0 10px 32px rgba(42,50,58,.14),0 2px 8px rgba(42,50,58,.07);
  display:flex;flex-direction:column;gap:6px;text-align:left;}
#view-certs .certs-lbl{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;margin:6px 0 0;}
#view-certs .certs-lbl:first-child{margin-top:0;}
#view-certs .certs-addpop select{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #D2DAE3;border-radius:9px;background:#fff;
  font-family:var(--font);font-size:12.5px;font-weight:400;color:#2A323A;margin:0;}
#view-certs .certs-addpop select:hover:not(:focus){border-color:#8A9DB1;}
#view-certs .certs-addpop select:focus{outline:none;border-color:#8A9DB1;background:#fff;box-shadow:0 0 0 3px rgba(138,157,177,.13);}
#view-certs .certs-addpop-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}

/* ── Three numbers ── */
#view-certs .certs-stats{flex-shrink:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:22px;}
#view-certs .certs-stat{display:block;width:100%;text-align:left;background:#fff;border:1px solid #E8EDF2;border-radius:14px;padding:20px 22px;
  box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);cursor:pointer;font-family:var(--font);color:#2A323A;transition:border-color .12s;}
#view-certs .certs-stat:hover{border-color:#D2DAE3;}
#view-certs .certs-stat.on{border-color:#8A9DB1;box-shadow:0 0 0 3px rgba(138,157,177,.13),0 1px 3px rgba(42,50,58,.04);}
#view-certs .certs-stat-l{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#9BA3AC;}
#view-certs .certs-stat-n{display:block;font-family:var(--font-display);font-size:42px;font-weight:400;letter-spacing:-1.1px;line-height:1.05;margin-top:5px;}
#view-certs .certs-n-out{color:#A8555A;}
#view-certs .certs-n-rec{color:#4D6B3C;}
#view-certs .certs-n-na{color:#6B7480;}

/* ── Filter + search ── */
#view-certs .certs-bar{flex-shrink:0;display:flex;align-items:center;gap:8px;margin-bottom:16px;min-height:34px;}
#view-certs .certs-pill{border:1px solid #D2DAE3;background:#fff;color:#4A5560;border-radius:9999px;padding:6px 13px;font-family:var(--font);
  font-size:11.5px;font-weight:500;line-height:1.2;white-space:nowrap;flex-shrink:0;cursor:pointer;letter-spacing:0;}
#view-certs .certs-pill:hover{border-color:#8A9DB1;}
#view-certs .certs-pill.on{border-color:#2A323A;background:#2A323A;color:#FCFBF9;font-weight:600;}
#view-certs .certs-pill-n{font-family:var(--font-mono);font-size:10px;margin-left:5px;opacity:.75;}
#view-certs .certs-bar-sp{flex:1;min-width:8px;}
#view-certs .certs-search{flex-shrink:0;}
#view-certs .certs-search input{width:220px;box-sizing:border-box;padding:7px 12px;border:1px solid #D2DAE3;border-radius:9px;
  font-family:var(--font);font-size:12px;font-weight:400;background:#fff;color:#2A323A;margin:0;}
#view-certs .certs-search input:hover:not(:focus){border-color:#8A9DB1;}
#view-certs .certs-search input:focus{outline:none;border-color:#8A9DB1;background:#fff;box-shadow:0 0 0 3px rgba(138,157,177,.13);}

/* ── Register ── */
#view-certs .certs-card{flex:1 1 auto;min-height:220px;display:flex;flex-direction:column;background:#fff;border:1px solid #E8EDF2;border-radius:14px;
  box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);}
#view-certs .certs-colhdr{height:34px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;padding:0 16px;background:#FCFCFB;
  border-bottom:1px solid #E8EDF2;border-radius:13px 13px 0 0;}
#view-certs .certs-colhdr>span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;}
#view-certs .certs-colhdr>.certs-c-acts{text-align:right;}
#view-certs .certs-rows{flex:1 1 auto;min-height:0;overflow-y:auto;}
#view-certs .certs-row{min-height:46px;box-sizing:border-box;display:flex;align-items:center;padding:0 16px;background:#fff;border-bottom:1px solid #F1F4F7;}
#view-certs .certs-row.is-required{background:#FFFCFC;}

/* Columns — one set of classes for header and rows so they stay aligned */
#view-certs .certs-c-st{width:100px;flex-shrink:0;}
#view-certs .certs-c-item{flex:1.15 1 200px;min-width:0;padding-right:12px;display:flex;align-items:center;gap:8px;}
#view-certs .certs-c-cert{flex:1 1 170px;min-width:0;padding-right:12px;font-size:12.5px;color:#2A323A;cursor:help;}
#view-certs .certs-certname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-certs .certs-c-ref{flex:0 0 216px;min-width:0;padding-right:12px;display:flex;align-items:center;}
/* The actions column is sized by JS: _certsRenderRows measures the widest
   row's buttons and writes --certs-acts-w on the card, so header and every
   row share one width and the flexible columns line up between rows. */
#view-certs .certs-c-acts{flex:0 0 var(--certs-acts-w,120px);min-width:0;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:7px;}
#view-certs .certs-c-acts>*{flex-shrink:0;}

/* Row cells */
#view-certs .certs-pillst{display:inline-flex;align-items:center;height:21px;padding:0 10px;border-radius:9999px;font-size:10.5px;font-weight:600;white-space:nowrap;}
#view-certs .st-required{background:#FDE7E7;color:#8A1C1C;}
#view-certs .st-received{background:#DFF5E1;color:#1B5E20;}
#view-certs .st-na{background:#EFEFF1;color:#5A6169;cursor:help;}
#view-certs .certs-id{flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:#2A323A;background:#F7F7F7;border:1px solid #E8EDF2;
  border-radius:6px;padding:1px 7px;cursor:pointer;}
#view-certs .certs-id:hover{background:#fff;border-color:#8A9DB1;}
#view-certs .certs-name{font-size:12.5px;color:#2A323A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0;}
#view-certs .certs-name:hover{text-decoration:underline;text-decoration-color:#C7CDD4;}
#view-certs .certs-row.is-na .certs-name,#view-certs .certs-row.is-na .certs-c-cert{color:#6B7480;}

#view-certs .certs-refwrap{display:flex;align-items:center;gap:6px;min-width:0;flex:1;}
#view-certs .certs-refin{flex:1;min-width:0;max-width:196px;box-sizing:border-box;padding:4px 8px;border:1px solid #E8EDF2;border-radius:7px;background:#F7F7F7;
  font-family:var(--font);font-size:11px;font-weight:400;color:#2A323A;margin:0;}
#view-certs .certs-refin::placeholder{color:#A8AEB6;}
#view-certs .certs-refin:hover:not(:focus){border-color:#D2DAE3;}
#view-certs .certs-refin:focus{outline:none;background:#fff;border-color:#8A9DB1;box-shadow:0 0 0 3px rgba(138,157,177,.13);}
#view-certs .certs-ext{flex-shrink:0;font-size:11px;color:#837D68;text-decoration:none;white-space:nowrap;}
#view-certs .certs-ext:hover{color:#4D4936;}
#view-certs .certs-ext.certs-mono{flex-shrink:1;color:#837D68;}
#view-certs .certs-file{display:inline-flex;align-items:center;gap:6px;min-width:0;color:inherit;text-decoration:none;cursor:pointer;}
#view-certs .certs-file svg{flex-shrink:0;}
#view-certs .certs-file:hover .certs-mono{text-decoration:underline;text-decoration-color:#C7CDD4;}
#view-certs .certs-mono{font-family:var(--font-mono);font-size:11px;color:#2A323A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#view-certs .certs-nofile{font-size:10.5px;color:#A8555A;white-space:nowrap;flex-shrink:0;}
#view-certs .certs-reason{display:block;font-size:11px;color:#9BA3AC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help;min-width:0;}
#view-certs .certs-dash{font-size:11px;color:#C7CDD4;}

/* Row actions */
#view-certs .certs-act{display:inline-flex;align-items:center;border:none;border-radius:9999px;padding:6px 12px;font-family:var(--font);font-size:11px;
  font-weight:500;line-height:1.2;white-space:nowrap;background:#fff;color:#3D4854;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);}
#view-certs .certs-act:hover{background:#F7F7F7;}
#view-certs .certs-act-dark{background:#2A323A;color:#FCFBF9;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);}
#view-certs .certs-act-dark:hover{background:#3D4854;}
#view-certs .certs-x{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:9999px;
  background:transparent;color:#9BA3AC;font-size:12px;cursor:pointer;padding:0;font-family:var(--font);}
#view-certs .certs-x:hover{background:#F7F7F7;color:#8A1C1C;}
#view-certs .certs-fi{display:none;}

/* Footer */
#view-certs .certs-foot{height:30px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 16px;background:#FCFCFB;
  border-top:1px solid #E8EDF2;border-radius:0 0 13px 13px;}
#view-certs .certs-foot-n{font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;color:#9BA3AC;white-space:nowrap;}
#view-certs .certs-showall{background:none;border:none;padding:0;font-family:var(--font);font-size:11px;color:#837D68;font-weight:500;cursor:pointer;white-space:nowrap;}
#view-certs .certs-showall:hover{color:#4D4936;text-decoration:underline;}

/* Empty states */
#view-certs .certs-rows-empty{padding:40px 20px;text-align:center;font-size:12.5px;color:#6B7480;}
#view-certs .certs-empty{background:#fff;border:1px solid #E8EDF2;border-radius:14px;padding:44px 28px;text-align:center;
  box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);display:flex;flex-direction:column;align-items:center;gap:10px;}
#view-certs .certs-empty-t{font-family:var(--font-display);font-size:18px;font-weight:400;letter-spacing:-.3px;color:#2A323A;}
#view-certs .certs-empty-d{font-size:12.5px;color:#6B7480;max-width:440px;line-height:1.5;}

/* Left-anchored tooltip for the one bubble that sits against the register's
   left edge (the N/A pill). Mirrors .tip.left; scoped, not a redefinition. */
#view-certs .tip.start::after{left:0;right:auto;transform:none;}
#view-certs .tip.start::before{left:14px;right:auto;transform:none;}

@media(max-width:1200px){
  #view-certs .certs-c-ref{flex-basis:176px;}
  #view-certs .certs-c-st{width:88px;}
}
@media(max-width:1000px){
  #view-certs .scroll{padding:20px !important;}
  #view-certs .certs-stats{gap:12px;}
  #view-certs .certs-stat{padding:14px 16px;}
  #view-certs .certs-stat-n{font-size:34px;}
  #view-certs .certs-c-item{flex-basis:150px;}
  #view-certs .certs-c-cert{flex-basis:130px;}
  #view-certs .certs-c-ref{flex-basis:150px;}
  #view-certs .certs-search input{width:160px;}
}