/* KNPC Maximo — Welder Qualification & Card Management
   Theme and layout adopted verbatim from the approved design
   Welders_Maximo_Mockup_v6.html (mx-* system, IBM Plex Sans, 11px base). */

@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans'), url('/Maximo/font/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Bold'), url('/Maximo/font/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans Light'), url('/Maximo/font/IBMPlexSans-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}

/* ============ v6 design system (verbatim) ============ */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif; font-size:11px; color:#000; background:#fff; }
img { border:0; vertical-align:middle; }
a, .anchor { color:#325c80; text-decoration:none; cursor:pointer; }
a:hover, .anchor:hover { text-decoration:underline; }

/* banner */
.mx-banner { background:#1d3649; color:#fff; height:44px; display:flex; align-items:center; padding:0 6px; gap:8px; }
.mx-banner .bico { width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mx-banner .bico:hover { background:rgba(255,255,255,.10); }
.mx-appname { font-size:14px; font-weight:400; margin-left:2px; white-space:nowrap; }
.mx-welcome { font-size:13px; color:#eef2f6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-banner .spacer { flex:1; }
.mx-user { font-size:11.5px; color:#eef2f7; margin-right:10px; white-space:nowrap; }
.mx-banner .bnav { display:flex; }
.mx-banner .bnav .bi { width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.mx-banner .bnav .bi:hover { background:rgba(255,255,255,.10); }
.mx-ibm { font-weight:700; font-size:15px; color:#fff; margin:0 6px 0 8px; font-family:Arial,sans-serif; }
.bi .bcount { position:absolute; top:1px; right:0; background:#e8a33d; color:#20242a; border-radius:8px; min-width:14px; height:14px; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* toolbar */
.mx-toolbar-strip { display:flex; align-items:center; gap:6px; padding:5px 8px; background:#ececec; border-bottom:1px solid #cfcfcf; }
.mx-find { border:1px solid #a6a6a6; height:26px; width:190px; padding:0 8px; font-size:12px; background:#fff; font-family:'IBM Plex Sans',Arial,sans-serif; }
.mx-find::placeholder { color:#767676; }
.mx-toolbar { display:flex; align-items:center; gap:0; }
.mx-tb-btn { width:30px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mx-tb-btn:hover { background:#dcdcdc; }
.mx-tb-btn.disabled { opacity:.4; cursor:default; }
.mx-tb-btn.disabled:hover { background:transparent; }
.mx-tb-sep { width:1px; height:22px; background:#c4c4c4; margin:0 4px; }

/* app switcher tabs (top-level modules) */
.mx-apptabs { display:flex; background:#28455c; height:30px; align-items:stretch; overflow-x:auto; }
.mx-apptab { padding:0 16px; display:flex; align-items:center; font-size:12px; color:#c5d4e0; cursor:pointer; border-right:1px solid rgba(255,255,255,.08); white-space:nowrap; }
.mx-apptab:hover { background:#223c50; color:#fff; }
.mx-apptab.active { background:#325c80; color:#fff; font-weight:500; }
.mx-apptab.inert { cursor:default; }
.mx-apptab.inert:hover { background:transparent; color:#c5d4e0; }
/* the KNPC Welder launch tab — reddish for visibility (standing requirement) */
.mx-apptab.knpc { background:#B3251C; color:#fff; font-weight:600; margin-left:auto; }
.mx-apptab.knpc:hover { background:#93190F; color:#fff; }
.mx-apptab .nest, .mx-side-item .nest { display:inline-block; margin-right:5px; opacity:.7; font-size:11px; }

/* record tabs (List / detail) */
.mx-tabs { display:flex; background:#325c80; height:34px; }
.mx-tab { padding:0 20px; font-size:13px; color:#dfeaf2; cursor:pointer; display:flex; align-items:center; border-right:1px solid rgba(255,255,255,.12); }
.mx-tab:hover { background:#2b5070; color:#fff; }
.mx-tab.active { background:#fff; color:#325c80; font-weight:500; }

.mx-wrap { display:flex; min-height:calc(100vh - 152px); }
.mx-sidebar { width:210px; background:#f6f6f6; border-right:1px solid #d0d0d0; flex-shrink:0; font-size:12px; }
.mx-side-h { color:#325c80; font-weight:600; padding:8px 10px 4px 10px; font-size:12px; border-bottom:1px solid #dcdcdc; background:#efeff0; }
.mx-side-item { padding:5px 10px 5px 14px; color:#325c80; cursor:pointer; }
.mx-side-item:hover { background:#e4ebf1; text-decoration:underline; }
.mx-side-item.on { font-weight:600; color:#1d3649; background:#e0e8ef; }
.mx-side-item.sub { padding-left:26px; font-size:11.5px; }
.mx-side-sub { padding:4px 10px 4px 20px; color:#333; cursor:pointer; }
.mx-side-sub:hover { background:#e9ecf0; text-decoration:underline; }
.mx-side-sub.on { font-weight:600; color:#1d3649; background:#e0e8ef; }
.mx-main { flex:1; background:#fff; min-width:0; }
.side-count { color:#767676; font-size:10.5px; margin-left:4px; }

.mx-querybar { display:flex; align-items:center; gap:18px; padding:8px 12px; border-bottom:1px solid #e2e2e2; font-size:12px; }
.mx-querybar .qi { color:#325c80; cursor:pointer; display:flex; align-items:center; gap:5px; }
.mx-querybar .qi:hover { text-decoration:underline; }

.mx-listhdr { display:flex; align-items:center; gap:10px; padding:0 12px; background:#ececec; border-bottom:1px solid #bbb; font-size:12px; height:29px; }
.mx-listhdr .lh-title { font-weight:600; color:#325c80; }
.mx-listhdr .lh-count { color:#5a5a5a; }
.mx-listhdr .lh-icons { display:flex; gap:8px; margin-left:auto; align-items:center; }
.mx-listhdr .lh-icons img { cursor:pointer; }
.lh-filter { display:flex; align-items:center; gap:4px; color:#15597e; cursor:pointer; font-size:12px; margin-left:14px; }
.lh-filter:hover { text-decoration:underline; }
.lh-navgroup { display:flex; align-items:center; gap:2px; margin-left:10px; }
.lh-navgroup .glyph { width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:#5a6270; font-size:12px; cursor:pointer; }

.mx-table { width:100%; border-collapse:collapse; font-size:12px; }
.mx-table thead th { background:#f4f4f4; color:#000; text-align:left; font-weight:600; padding:7px 10px; border-bottom:1px solid #c6c6c6; border-right:1px solid #e6e6e6; white-space:nowrap; position:sticky; top:0; z-index:2; }
.mx-table thead th .sc { color:#767676; font-size:10px; margin-left:3px; }
.mx-table tbody td { padding:6px 10px; border-bottom:1px solid #e0e0e0; border-right:1px solid #eee; color:#000; }
.mx-table tbody tr { cursor:pointer; }
.mx-table tbody tr:nth-child(even) { background:#f6f6f6; }
.mx-table tbody tr:hover { background:#e2edf5; }
.mx-filter-row td { background:#fff; padding:3px 6px; border-bottom:1px solid #cfcfcf; }
.mx-filter-row input { width:100%; border:1px solid #a6a6a6; height:24px; padding:0 6px; font-size:12px; font-family:'IBM Plex Sans',Arial,sans-serif; }
.mx-filter-row td.has-icon { position:relative; }
.mx-filter-row td.has-icon input { padding-right:22px; box-sizing:border-box; }
.mx-filter-row td.has-icon .fi-icon { position:absolute; right:5px; top:50%; transform:translateY(-50%); pointer-events:none; }
.mx-link { color:#325c80; }
.mx-link:hover { text-decoration:underline; }

/* status text (Maximo shows plain codes, tinted lightly) */
.st-code { font-weight:600; }
.st-WAPPR { color:#8a5d0f; }
.st-COMP { color:#24693a; }
.st-REJECTED { color:#a52f29; }
.st-REVOKED { color:#6f3583; }
.st-PENDING { color:#8a5d0f; }
.st-ACCEPTED { color:#24693a; }
.st-PASSED { color:#24693a; }
.st-BLOCKED { color:#a52f29; }
.pill { display:inline-block; padding:1px 8px; border-radius:2px; font-size:11px; font-weight:600; }
.pill.Active { background:#e0f0e4; color:#24693a; }
.pill.Expiring { background:#fbeecf; color:#8a5d0f; }
.pill.Expired { background:#f7dedd; color:#a52f29; }
.pill.Revoked { background:#eee0f2; color:#6f3583; }
.pill.Update { background:#fbeecf; color:#8a5d0f; }

.mx-record { padding:12px 14px 46px 14px; }
.mx-recbar { display:flex; align-items:center; gap:20px; padding:10px 12px; background:#f7f7f7; border:1px solid #dcdcdc; margin-bottom:14px; flex-wrap:wrap; }
.mx-recbar .rb-l { font-size:11px; color:#767676; display:block; }
.mx-recbar .rb-v { font-size:14px; font-weight:600; color:#1d3649; }

.mx-section { margin-bottom:14px; }
.mx-sec-h { background:#ECECEC; padding:0 10px; font-size:14px; color:#325C80; border-bottom:1px solid #bbbbbb; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; height:29px; }
.mx-sec-h .caret { color:#5a5a5a; font-size:10px; transition:transform .15s; width:10px; }
.mx-sec-h.collapsed .caret { transform:rotate(-90deg); }
.mx-sec-h .sec-tools { margin-left:auto; display:flex; gap:2px; }
.mx-sec-body { padding:14px 6px 8px 6px; }
.mx-sec-body.hidden { display:none; }

.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; }
.fgrid.three { grid-template-columns:1fr 1fr 1fr; }
.frow { display:flex; flex-direction:column; gap:3px; }
.frow label { color:#464646; font-size:12px; }
.frow label:after { content:":"; }
.frow .fval { border:0; border-bottom:1px solid #464646; padding:2px; font-size:14px; color:#000; min-height:24px; background:transparent; display:flex; align-items:center; gap:6px; font-family:'IBM Plex Sans',Arial,sans-serif; width:100%; }
.frow .fval.ro { border-bottom:1px dotted #9a9a9a; }
.frow input.fval, .frow textarea.fval { display:block; outline:none; }
.frow input.fval:focus, .frow textarea.fval:focus, .frow select:focus { border-bottom:2px solid #206b93; }
.frow select { border:0; background:transparent; font-size:14px; width:100%; font-family:inherit; border-bottom:1px solid #464646; height:26px; outline:none; }
.frow textarea.fval { min-height:52px; border:1px solid #c6c6c6; padding:6px; }
.frow input[type=file] { border:0; font-size:12px; }

.photo-box { width:120px; height:150px; border:1px solid #b6b6b6; background:#f4f4f4; display:flex; align-items:center; justify-content:center; color:#a0a0a0; font-size:44px; overflow:hidden; flex-shrink:0; }
.photo-box img { width:100%; height:100%; object-fit:cover; }
.photo-sm { width:26px; height:32px; object-fit:cover; border:1px solid #ddd; background:#f4f6f8; }

.sub-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:4px; }
.sub-table th { background:#f4f4f4; text-align:left; padding:6px 9px; font-weight:600; color:#000; border-bottom:1px solid #c6c6c6; border-right:1px solid #e6e6e6; white-space:nowrap; }
.sub-table td { padding:5px 9px; border-bottom:1px solid #e6e6e6; border-right:1px solid #eee; }
.sub-table tr:hover { background:#eef4fa; }
.res-Accepted { color:#24693a; font-weight:600; }
.res-Rejected { color:#a52f29; font-weight:600; }

.mx-btn { background:#206b93; color:#fff; border:1px solid #1b5a7c; border-radius:2px; padding:6px 14px; font-size:12px; cursor:pointer; font-family:'IBM Plex Sans',Arial,sans-serif; display:inline-flex; align-items:center; gap:6px; }
.mx-btn:hover { background:#1b5a7c; }
.mx-btn.sec { background:#fff; color:#206b93; border-color:#a0bccc; }
.mx-btn.sec:hover { background:#eef5f9; }
.mx-btn.warn { background:#a52f29; border-color:#872722; }
.mx-btn.warn:hover { background:#872722; }
.mx-btn.disabled, .mx-btn:disabled { background:#dcdcdc; color:#909090; border-color:#c8c8c8; cursor:default; }
.mx-btn.disabled:hover, .mx-btn:disabled:hover { background:#dcdcdc; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }

.mx-metrics { display:flex; border:1px solid #dcdcdc; overflow:hidden; margin-bottom:14px; }
.mx-metric { flex:1; padding:10px 14px; border-right:1px solid #e6e6e6; background:#fafafa; }
.mx-metric:last-child { border-right:none; }
.mx-metric .m-num { font-size:24px; font-weight:600; color:#1d3649; line-height:1; }
.mx-metric .m-lab { font-size:11px; color:#767676; margin-top:5px; }
.mx-metric.a .m-num { color:#24693a; }
.mx-metric.e .m-num { color:#8a5d0f; }
.mx-metric.x .m-num { color:#a52f29; }

.appr-check { width:15px; height:15px; cursor:pointer; }
.pend-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#325c80; }
.pend-tag .pdot { width:7px; height:7px; border-radius:50%; background:#206b93; }

.hint { background:#eaf3fb; border:1px solid #c5ddf0; border-radius:2px; padding:8px 12px; font-size:12px; color:#255a86; margin-bottom:14px; display:flex; gap:8px; align-items:flex-start; }
.hint img { margin-top:1px; }
.hint.warn { background:#fef7e8; border-color:#f0dcae; color:#7a5d1c; }

.mx-statusbar { position:fixed; bottom:0; left:0; right:0; height:22px; background:#ececec; border-top:1px solid #cfcfcf; display:flex; align-items:center; padding:0 12px; font-size:11px; color:#767676; gap:16px; z-index:40; }
.mx-statusbar .sb-r { margin-left:auto; }
.muted { color:#909090; }

/* ============ dialogs (v6 tut-card style) ============ */
.overlay { position:fixed; inset:0; background:rgba(20,30,45,.55); z-index:200; display:flex; align-items:center; justify-content:center; }
.dialog { background:#fff; width:540px; max-width:92vw; max-height:88vh; overflow:auto; border-radius:6px; box-shadow:0 12px 48px rgba(0,0,0,.4); animation:tutpop .18s ease-out; }
@keyframes tutpop { from{transform:scale(.94);opacity:0;} to{transform:scale(1);opacity:1;} }
.dialog-hd { background:#1d3649; color:#fff; padding:14px 18px; display:flex; align-items:center; gap:10px; }
.dialog-hd .d-ic { width:34px; height:34px; border-radius:50%; background:#206b93; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.dialog-hd .d-t { font-size:16px; font-weight:600; }
.dialog-hd .d-s { font-size:11px; color:#aebfd0; margin-top:1px; }
.dialog-hd .x { margin-left:auto; cursor:pointer; background:none; border:0; color:#cfdae4; font-size:16px; line-height:1; padding:2px 6px; }
.dialog-hd .x:hover { color:#fff; }
.dialog-bd { padding:18px; font-size:13px; color:#2a2f36; line-height:1.6; }
.dialog-bd b { color:#1d3649; }
.dialog-ft { padding:12px 18px; background:#f5f6f7; border-top:1px solid #e2e2e2; display:flex; justify-content:flex-end; gap:8px; }
.sysmsg .dialog-hd { background:#5c1714; }
.sysmsg .dialog-hd .d-ic { background:#a52f29; }
.chip { display:inline-block; background:#eef2f6; border:1px solid #d6dde4; border-radius:3px; padding:1px 7px; font-size:11px; color:#325c80; font-weight:600; font-family:monospace; }
.wf-actions { display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; }
.wf-actions label { display:flex; gap:8px; align-items:center; cursor:pointer; font-size:12.5px; }
.gate-banner { padding:9px 12px; font-weight:600; border:1px solid; border-radius:2px; margin-top:10px; font-size:12px; }
.gate-banner.pass { background:#e0f0e4; color:#24693a; border-color:#a9d5b4; }
.gate-banner.block { background:#f7dedd; color:#a52f29; border-color:#eab1ac; }

/* menus / notifications popup */
.menu-pop { position:absolute; z-index:300; background:#fff; border:1px solid #9aa5ad; box-shadow:0 6px 24px rgba(0,0,0,.3); min-width:230px; font-size:12px; border-radius:3px; overflow:hidden; }
.menu-pop .mi { padding:7px 14px; cursor:pointer; display:flex; gap:8px; align-items:center; color:#1d3649; }
.menu-pop .mi:hover { background:#e4ebf1; }
.menu-pop .mi.head { background:#efeff0; color:#325c80; font-weight:600; cursor:default; }
.notif-pop { width:400px; max-height:440px; overflow:auto; }
.notif-row { padding:8px 12px; border-bottom:1px solid #ececec; cursor:pointer; }
.notif-row:hover { background:#e2edf5; }
.notif-row.unread { background:#eaf3fb; border-left:3px solid #206b93; }
.notif-row.unread:hover { background:#dcebf7; }
.notif-msg { color:#000; font-size:12px; }
.notif-ts { color:#767676; font-size:10px; margin-top:2px; }
.notif-tools { display:flex; justify-content:space-between; align-items:center; padding:6px 12px; background:#efeff0; position:sticky; top:0; font-size:12px; }

/* ============ login ============ */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#1d3649; }
.login-box { background:#fff; width:400px; border-radius:6px; box-shadow:0 12px 48px rgba(0,0,0,.45); overflow:hidden; }
.login-hd { text-align:center; padding:22px 26px 6px; }
.login-hd img { height:80px; }
.login-hd h1 { font-size:16px; color:#1d3649; margin:12px 0 2px; font-weight:600; }
.login-hd .sub { color:#767676; font-size:11px; }
.login-bd { padding:14px 30px 26px; display:flex; flex-direction:column; gap:14px; }
.login-bd label { color:#464646; font-size:12px; display:block; margin-bottom:3px; }
.login-bd input { width:100%; border:1px solid #a6a6a6; height:30px; padding:0 8px; font-size:13px; font-family:'IBM Plex Sans',Arial,sans-serif; }
.login-err { background:#f7dedd; color:#a52f29; border:1px solid #eab1ac; padding:8px 10px; font-size:11.5px; display:none; border-radius:2px; }
.login-users { border-top:1px solid #e2e2e2; padding:10px 30px 14px; }
.login-users h2 { font-size:11px; color:#767676; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; }
.login-users table { width:100%; border-collapse:collapse; font-size:11.5px; }
.login-users td { padding:4px 4px; border-bottom:1px solid #f0f0f0; color:#464646; vertical-align:top; }
.login-users tr { cursor:pointer; }
.login-users tr:hover td { background:#eef4f9; }
.login-users td.u { color:#1d3649; font-weight:600; white-space:nowrap; }
.login-ft { background:#f5f6f7; color:#767676; font-size:10px; text-align:center; padding:8px; border-top:1px solid #e2e2e2; }

/* ============ Start Centre extras (kept, restyled to v6) ============ */
.sc-cols { display:flex; gap:12px; padding:12px; align-items:flex-start; }
.sc-col-l { width:27%; min-width:230px; }
.sc-col-r { flex:1; min-width:0; }
.portlet { background:#fff; border:1px solid #dcdcdc; margin-bottom:12px; }
.portlet-hd { background:#ECECEC; border-bottom:1px solid #bbbbbb; padding:0 10px; height:29px; display:flex; align-items:center; gap:8px; }
.portlet-hd h1 { font-size:13px; margin:0; color:#325C80; font-weight:600; }
.portlet-empty { padding:14px 10px; color:#767676; font-style:italic; font-size:12px; }
.qi-row { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; color:#325c80; border-bottom:1px solid #f0f0f0; font-size:12px; }
.qi-row:hover { background:#e4ebf1; text-decoration:underline; }
.bulletin { padding:8px 10px; border-bottom:1px solid #ececec; font-size:12px; }
.bulletin b { color:#325c80; }
.bulletin .b-meta { color:#767676; font-size:10px; margin-top:3px; }

/* ============ Welder Card (print target — unchanged) ============ */
.card-stage { padding:20px; display:flex; flex-direction:column; gap:18px; align-items:center; background:#5a5f66; min-height:calc(100vh - 152px); }
.card-tools { display:flex; gap:10px; align-items:center; }
.card-pair { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.card-box-hd { color:#fff; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; text-align:center; }
.print-only { display:none; }
.wc-sig-ph { height:30px; display:flex; align-items:flex-end; justify-content:center; color:#8a8a8a; font-style:italic; font-size:13px; padding-bottom:2px; }

.wcard { width:512px; height:323px; background:#fff; border-radius:12px; position:relative; box-shadow:0 6px 22px rgba(0,0,0,.45); overflow:hidden; font-family:Arial,Helvetica,sans-serif; color:#111; }
.wcard-inner { position:absolute; inset:7px; border:2.5px solid #1a3f94; border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; }
.wc-top { display:flex; gap:8px; }
.wc-logo { width:92px; text-align:center; flex-shrink:0; }
.wc-logo img { width:74px; height:auto; }
.wc-heads { flex:1; min-width:0; text-align:center; padding-top:2px; }
.wc-heads .h1 { color:#1a3f94; font-weight:bold; font-size:15px; }
.wc-heads .h2 { color:#c1121c; font-weight:bold; font-size:15px; }
.wc-heads .h3 { color:#1a3f94; font-weight:bold; font-size:15px; }
.wc-photo { width:96px; flex-shrink:0; text-align:center; }
.wc-photo img { width:92px; height:112px; object-fit:cover; border:1px solid #9AA4C0; background:#EEF; }
.wc-photo .code { font-size:9px; margin-top:2px; color:#222; letter-spacing:-.01em; }
.wc-fields { flex:1; margin-top:2px; }
.wc-line { display:flex; gap:4px; margin-top:3px; font-size:13px; align-items:baseline; }
.wc-lab { color:#1a3f94; font-weight:bold; white-space:nowrap; }
.wc-val { color:#16161D; font-weight:bold; }
.wc-val.red { color:#c1121c; }
.wc-gap { width:14px; flex-shrink:1; }
.wc-sd { display:inline-flex; align-items:center; gap:5px; color:#1a3f94; font-weight:bold; white-space:nowrap; font-size:12px; }
.wc-sd .box { width:12px; height:12px; border:1.5px solid #444; display:inline-block; }
.wc-bottom { display:flex; align-items:flex-end; gap:8px; margin-top:2px; }
.wc-approved { color:#1a3f94; font-weight:bold; font-size:13px; white-space:nowrap; padding-bottom:6px; }
.wc-sig { flex:1; text-align:center; }
.wc-sig .nm { font-weight:bold; font-size:13.5px; border-top:1px solid #555; padding-top:1px; }
.wc-sig .tl { font-size:12px; font-weight:bold; }
.wc-seal { width:58px; flex-shrink:0; }
.wc-seal img { width:56px; height:56px; border-radius:50%; }
.wcard.back .wcard-inner { padding:7px 9px; }
table.wc-tbl { width:100%; border-collapse:collapse; font-size:11px; }
table.wc-tbl th, table.wc-tbl td { border:1.5px solid #23336B; padding:2px 6px; }
.wc-tbl .t-head { color:#1a3f94; font-weight:bold; text-align:center; font-size:12.5px; }
.wc-tbl .t-class { color:#c1121c; font-weight:bold; text-align:center; font-size:12.5px; }
.wc-tbl .t-var { color:#8a6d1a; font-weight:bold; text-align:right; white-space:nowrap; width:38%; }
.wc-tbl .t-col { color:#1a3f94; font-weight:bold; text-align:center; }
.wc-tbl .t-val { font-weight:bold; text-align:center; color:#111; }
.wc-notes { font-size:9px; margin-top:3px; color:#222; line-height:1.3; }
.wc-stamp { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.wc-stamp span { font-size:58px; font-weight:900; color:rgba(179,22,12,.82); border:6px solid rgba(179,22,12,.82); padding:2px 26px; transform:rotate(-18deg); letter-spacing:.1em; border-radius:6px; text-transform:uppercase; background:rgba(255,255,255,.55); }
.wc-stamp.grey span { color:rgba(90,100,109,.85); border-color:rgba(90,100,109,.85); }
.back-tabs { display:flex; gap:6px; }
.back-tabs .bt { background:#3D4750; border:1px solid #6B7885; color:#DFE5EA; padding:4px 12px; cursor:pointer; }
.back-tabs .bt.on { background:#e8a33d; color:#20242a; border-color:#e8a33d; font-weight:bold; }

/* ============ print ============ */
@media print {
  @page { size:auto; margin:8mm; }
  body { background:#fff; }
  body.printing-card #app > *:not(#content) { display:none !important; }
  body.printing-card .mx-banner, body.printing-card .mx-toolbar-strip, body.printing-card .mx-apptabs, body.printing-card .mx-statusbar { display:none !important; }
  body.printing-card .card-stage { background:#fff; padding:0; gap:6mm; min-height:0; }
  body.printing-card .card-tools, body.printing-card .back-tabs { display:none !important; }
  body.printing-card .card-pair { display:none !important; }
  body.printing-card .print-only { display:flex !important; flex-direction:column; gap:6mm; }
  .wcard { width:85.6mm; height:53.98mm; box-shadow:none; border:.3mm solid #888; border-radius:3mm; page-break-inside:avoid; font-size:8pt; }
  .wcard-inner { inset:1.2mm; border-width:.5mm; border-radius:1.6mm; padding:1.6mm 2mm; }
  .wc-heads .h1, .wc-heads .h2, .wc-heads .h3 { font-size:8.4pt; }
  .wc-logo { width:15mm; } .wc-logo img { width:12.4mm; }
  .wc-photo { width:16.5mm; } .wc-photo img { width:15.6mm; height:19mm; }
  .wc-photo .code { font-size:5.6pt; }
  .wc-line { font-size:7.6pt; margin-top:.5mm; }
  .wc-approved { font-size:7.6pt; padding-bottom:1mm; }
  .wc-sig-ph { height:5mm; font-size:7pt; }
  .wc-sig .nm { font-size:7.8pt; } .wc-sig .tl { font-size:7pt; }
  .wc-seal { width:10mm; } .wc-seal img { width:9.6mm; height:9.6mm; }
  .wc-sd .box { width:2.2mm; height:2.2mm; }
  table.wc-tbl { font-size:6.6pt; }
  table.wc-tbl th, table.wc-tbl td { border-width:.35mm; padding:.5mm 1mm; }
  .wc-tbl .t-head, .wc-tbl .t-class { font-size:7.2pt; }
  .wc-notes { font-size:5.4pt; margin-top:1mm; }
  .wc-stamp span { font-size:22pt; border-width:1.2mm; }
}

@media (max-width: 900px) {
  .mx-sidebar { display:none; }
  .sc-cols { flex-direction:column; }
  .sc-col-l { width:100%; }
  .fgrid, .fgrid.three { grid-template-columns:1fr; }
}