*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif}
body{background:#f4f4f4;font-size:13px;color:#222}

/* SCROLLBARS — one slim, quiet bar everywhere, so no panel or popup brings its
   own. Firefox reads the two scrollbar-* properties, Chrome/Edge/Safari the
   pseudo-elements; between them every browser we serve is covered. */
*{scrollbar-width:thin;scrollbar-color:#ccd8e6 transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ccd8e6;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#a9bed4}
::-webkit-scrollbar-corner{background:transparent}
.wrap{display:flex;height:100vh;min-height:600px}

/* SIDEBAR */
.sb{width:200px;background:#fff;border-right:2px solid #3d6d99;display:flex;flex-direction:column;flex-shrink:0}
.sb-brand{padding:14px 14px 10px;background:#fff;border-bottom:1px solid #cfdcea}
.sb-brand-name{font-size:15px;font-weight:900;font-style:italic;color:#3d6d99}
.sb-brand-tag{font-size:10px;color:#aaa;margin-top:2px;font-style:italic}
.sb-role{padding:8px 12px;border-bottom:1px solid #f0f0f0;background:#fafafa}
.sb-role label{font-size:10px;color:#aaa;display:block;margin-bottom:3px;text-transform:uppercase}
.sb-role select{width:100%;padding:4px 6px;font-size:12px;border:1px solid #ddd;border-radius:3px}
.role-tag{display:inline-block;margin-top:5px;padding:2px 9px;background:#e7eff8;color:#3d6d99;border:1px solid #c3d3e6;border-radius:10px;font-size:10px;font-weight:700}
.sb-nav{flex:1;overflow-y:auto;padding:6px 0}
.sb-section{padding:7px 12px 2px;font-size:9px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:.07em}
.nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;border:none;background:none;font-size:12px;color:#666;cursor:pointer;text-align:left;border-left:3px solid transparent}
.nav-btn i{font-size:14px;color:#ccc;width:16px;text-align:center}
.nav-btn:hover{background:#f5f8fc;color:#3d6d99}
.nav-btn:hover i{color:#3d6d99}
.nav-btn.active{background:#e7eff8;color:#3d6d99;border-left-color:#3d6d99;font-weight:700}
.nav-btn.active i{color:#3d6d99}

/* WORKSPACE SWITCH (Service / Accounting) */
.ws-switch{display:flex;margin:8px 12px 6px;border:1px solid #c3d3e6;border-radius:5px}
.ws-btn{flex:1;min-width:0;padding:8px 4px;border:none;background:#f2f6fa;color:#7189a3;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.ws-btn.ws-first{border-radius:4px 0 0 4px}
.ws-btn.ws-last{border-radius:0 4px 4px 0}
.ws-btn i{font-size:15px}
.ws-btn.active{background:#3d6d99;color:#fff}
/* The three names did not fit the sidebar, so the strip overflowed it. Icon
   only, with the name on hover -- same three targets, no scrollbar. */
.ws-btn::after{content:attr(data-label);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#2b3a4a;color:#fff;font-size:10px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60}
/* The outer two are anchored to the strip's edges instead of centred on
   their button. A hidden tooltip still counts towards scrollWidth, so a
   centred "HR / Attendance" hanging off the last button gave the sidebar a
   horizontal scrollbar -- the same bar these icons were meant to remove. */
.ws-btn.ws-first::after{left:0;transform:none}
.ws-btn.ws-last::after{left:auto;right:0;transform:none}
.ws-btn:hover::after,.ws-btn:focus-visible::after{opacity:1}
.ws-lock-note{font-size:9px;color:#bbb;text-align:center;margin:0 12px 8px;font-style:italic}
.acct-mode-badge{display:none;font-size:9px;font-weight:700;color:#fff;background:#3d6d99;padding:2px 7px;border-radius:9px;margin-left:8px;letter-spacing:.04em;text-transform:uppercase}

/* GST LINE ITEMS TABLE */
/* Same shape as .data-table: each column takes what its data needs, and the
   table still fills its wrapper when the columns do not use it all. */
.li-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:8px}
.li-table th{background:#f5f5f5;padding:6px 7px;font-size:9.5px;text-transform:uppercase;color:#888;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}
.li-table td{padding:4px 5px;border-bottom:1px solid #f5f5f5}
.li-table input,.li-table select{width:100%;font-size:11.5px;padding:4px 5px;border:1px solid #ddd;border-radius:3px}
.li-totals{display:flex;justify-content:flex-end;gap:18px;padding:9px 12px;background:#fafafa;border:1px solid #eee;border-top:2px solid #3d6d99;border-radius:0 0 3px 3px;font-size:12px;margin-top:-8px}
.li-totals b{color:#3d6d99}
.igst-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:#666;padding:6px 2px 10px}
.igst-toggle input{accent-color:#3d6d99;cursor:pointer}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:#fff;border-bottom:2px solid #3d6d99;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-logo{font-size:13px;font-weight:900;font-style:italic;color:#3d6d99}
.topbar-title{font-size:13px;font-weight:700;color:#333;padding-left:12px;border-left:1px solid #ddd}
.topbar-right{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid #ddd;border-radius:3px;font-size:12px;cursor:pointer;background:#fff;color:#444}
.btn:hover{background:#f5f5f5}
.btn-orange{background:#3d6d99;color:#fff;border-color:#3d6d99;font-weight:700}
.btn-orange:hover{background:#c86010}
.btn-sm{padding:4px 10px;font-size:11px}
.content{flex:1;overflow-y:auto;padding:16px;background:#f4f4f4}

/* PANELS */
.panel{display:none}
.panel.active{display:block}

/* STATS ROW */
.stats-row{display:grid;gap:10px;margin-bottom:14px}
/* auto-fit so the cards reflow onto a second line on a narrow window rather
   than pushing the panel wider than the screen. */
.s5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.s4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat-card{background:#fff;border:1px solid #eee;border-top:3px solid #3d6d99;border-radius:4px;padding:12px 14px}
.stat-label{font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.stat-value{font-size:22px;font-weight:700;color:#3d6d99}
.stat-sub{font-size:10px;color:#bbb;margin-top:3px}

/* CARDS */
.card{background:#fff;border:1px solid #e8e8e8;border-radius:4px;margin-bottom:12px;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #f0f0f0;background:#fafafa}
.card-head h3{font-size:12px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:.04em}
.card-actions{display:flex;gap:6px;align-items:center}

/* TABLE */
/* A table is the one thing allowed to scroll sideways, because its columns
   carry meaning and squeezing them loses it. Everything else must fit. */
.tbl-wrap{overflow-x:auto}
/* Each column takes the width its own data needs, and the table still fills
   the panel when the columns do not use it all.
   width:max-content with min-width:100%, and not the other way round: with
   width:100% the percentage is resolved inside the max-content constraint
   and every column inflates. That version made this table 3634px wide in a
   1206px panel, with 194px given to a column whose every cell is an em
   dash. */
.data-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px}
.data-table th{background:#f5f5f5;padding:8px 10px;text-align:center;font-size:11px;font-weight:700;color:#888;border-bottom:1px solid #eee;white-space:nowrap;text-transform:uppercase}
/* The cap is what stops one row deciding the table's width. A job covering
   eight machines puts "BFW, JYOTI, MAZAK, MAZAK, MAZAK, MAZAK, MAZAK,
   HARTFORD" in one cell, and without this that single row widened the
   column past 380px and pushed the date column off the screen for all 253
   of them. Past the cap the cell wraps, which costs one row some height
   instead of costing every row a column. */
.data-table td{padding:8px 10px;border-bottom:1px solid #f5f5f5;color:#333;vertical-align:middle;max-width:300px}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:#f5f8fc}

/* Serial number column: narrow, quiet, and never the widest thing in view. */
.data-table th.sr-col{width:1%;padding-left:12px;padding-right:6px}
.data-table td.sr-col{width:1%;padding-left:12px;padding-right:6px;text-align:right;color:#aaa;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* PAGER */
.tbl-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid #f0f0f0;font-size:11.5px;color:#777}
.tbl-pager .pg-count{margin-right:auto}
.tbl-pager .pg-count b{color:#444;font-weight:700}
.tbl-pager select{padding:3px 5px;font-size:11.5px;border:1px solid #ddd;border-radius:3px;color:#555;background:#fff}
.tbl-pager .pg-btns{display:flex;gap:3px}
.tbl-pager button{min-width:26px;height:24px;padding:0 6px;border:1px solid #dde5ee;background:#fff;color:#5a7a99;font-size:11.5px;font-weight:600;border-radius:3px;cursor:pointer}
.tbl-pager button:hover:not(:disabled){background:#f0f5fa;border-color:#c3d3e6}
.tbl-pager button.cur{background:#3d6d99;border-color:#3d6d99;color:#fff}
.tbl-pager button:disabled{color:#ccc;cursor:default;background:#fafafa}
.tbl-pager .pg-gap{padding:0 2px;color:#bbb}

/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:700;white-space:nowrap}
.bg-green{background:#e6f5e6;color:#1a7a1a;border:1px solid #a0d0a0}
.bg-orange{background:#3d6d99;color:#fff}
.bg-red{background:#fce8e8;color:#b00000;border:1px solid #f0a0a0}
.bg-yellow{background:#fff3e0;color:#996600;border:1px solid #f0c060}
.bg-grey{background:#f0f0f0;color:#666;border:1px solid #ddd}
.bg-blue{background:#e6f0fb;color:#1a3a9a;border:1px solid #90b8e8}
.bg-teal{background:#e0f5ef;color:#0a5a4a;border:1px solid #70c0b0}
.bg-purple{background:#ede8fa;color:#4a2a9a;border:1px solid #b090e0}

/* ICON BUTTON */
.ic{background:none;border:none;cursor:pointer;color:#ccc;padding:3px 6px;border-radius:3px;font-size:14px}
.ic:hover{color:#3d6d99;background:#e7eff8}

/* ALERT BANNERS */
.alert{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:3px;font-size:12px;margin-bottom:10px;font-weight:600}
.alert-red{background:#fce8e8;border:1px solid #f0a0a0;color:#b00000}
.alert-yellow{background:#fff3e0;border:1px solid #f0c060;color:#996600}
.alert-green{background:#e6f5e6;border:1px solid #a0d0a0;color:#1a7a1a}

/* TWO COL */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
@media (max-width:860px){.two-col{grid-template-columns:minmax(0,1fr)}}

/* HEALTH BARS */
.hbar-item{margin:6px 0}
.hbar-label{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#666;margin-bottom:3px}
.hbar-label > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-label > span:last-child{flex-shrink:0;white-space:nowrap}
.hbar-track{height:7px;background:#f0f0f0;border-radius:4px;overflow:hidden}
/* A machine scoring 0 is the one most worth seeing. Without a floor its bar
   is a 1% sliver that reads as an empty track, i.e. as nothing rendered. */
.hbar-fill{height:100%;border-radius:4px;min-width:4px;transition:width .25s ease-out}
/* The health page's own bars are taller than the dashboard's: this is the
   screen you open to read them, not a card you glance at. */
.hbar-lg .hbar-track{height:11px}
.hbar-lg .hbar-label{font-size:12px}
.hbar-lg{margin:10px 0;padding-bottom:9px;border-bottom:1px solid #f4f4f4}
.hbar-lg:last-child{border-bottom:none}
.hbar-sub{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:10.5px;color:#999;margin-top:4px}
.hbar-sub b{color:#555;font-weight:700}

/* MULTI-SELECT — a searchable tick list, for picking several machines.
   A native <select multiple> cannot be searched and needs ctrl-click to add
   a second item, which is how people end up selecting one machine and
   wondering where the others went. */
.ms{position:relative}
.ms-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-width:0;padding:6px 8px;border:1px solid #ddd;border-radius:3px;
  background:#fff;font-size:12px;color:#444;cursor:pointer;text-align:left}
.ms-toggle:hover{border-color:#c3d3e6}
.ms-toggle:disabled{background:#fafafa;color:#bbb;cursor:not-allowed}
.ms-toggle > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-toggle i{flex-shrink:0;color:#aaa;font-size:14px}
.ms-menu{display:none;position:absolute;z-index:50;top:calc(100% + 3px);left:0;right:0;
  background:#fff;border:1px solid #c3d3e6;border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.12)}
.ms.open .ms-menu{display:block}
.ms-search{width:100%;border:none;border-bottom:1px solid #eee;padding:8px 10px;font-size:12px;border-radius:4px 4px 0 0}
.ms-search:focus{outline:none;background:#f8fbff}
.ms-bulk{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid #f0f0f0;background:#fafafa;font-size:10.5px;color:#999}
.ms-bulk span{margin-left:auto}
.ms-list{max-height:260px;overflow-y:auto}
.ms-opt{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:12px;color:#444;cursor:pointer;border-bottom:1px solid #f7f7f7}
.ms-opt:hover{background:#f2f6fa}
.ms-opt input{accent-color:#3d6d99;cursor:pointer;flex-shrink:0}
.ms-opt-main{min-width:0;flex:1}
.ms-opt-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-opt-sub{display:block;font-size:10px;color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-empty{padding:14px 10px;text-align:center;font-size:11px;color:#bbb}

/* HEALTH PICKERS — customer, then the machines inside it. */
.health-pickers{padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.4fr);gap:10px;align-items:end}
.health-pickers .form-group{margin:0}
@media (max-width:900px){.health-pickers{grid-template-columns:minmax(0,1fr)}}
.health-help{font-size:11px;color:#888;line-height:1.5}

/* SEARCH ROW */
.search-row{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-wrap:wrap}
.search-row input,.search-row select{font-size:12px;padding:5px 8px;border:1px solid #ddd;border-radius:3px;background:#fff}
.search-row input{flex:1;min-width:150px}

/* FORM GRID */
/* minmax(0,1fr), not 1fr: a grid track's floor is its content's own width, so
   one select holding "VERTICAL MACHINING CENTER" widened its column past the
   popup and put a horizontal scrollbar under the whole form. A zero floor lets
   the columns share the width they are given instead of demanding more. */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.form-full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:3px;min-width:0}
.form-group label{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.04em}
/* width:100% keeps a field inside its column; min-width:0 stops a long
   placeholder or option from setting the field's floor. */
.form-group input,.form-group select,.form-group textarea{width:100%;min-width:0;font-size:12px;padding:6px 8px;border:1px solid #ddd;border-radius:3px}
.form-group textarea{height:56px;resize:vertical}
.form-footer{padding:0 14px 14px;display:flex;justify-content:flex-end;gap:8px}

/* CHART BOX */
.chart-box{background:#fff;border:1px solid #e8e8e8;border-radius:4px;padding:14px}
.chart-box h4{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}

/* TABS */
.tab-row{display:flex;gap:3px;padding:8px 12px;border-bottom:1px solid #eee;background:#fafafa;flex-wrap:wrap}
.tab-btn{padding:5px 12px;border:1px solid #ddd;border-radius:3px;background:#fff;font-size:12px;cursor:pointer;color:#666}
.tab-btn.active{background:#3d6d99;color:#fff;border-color:#3d6d99;font-weight:700}
.sub-panel{display:none}
.sub-panel.active{display:block}

/* UPLOAD */
.upload-box{border:2px dashed #c3d3e6;border-radius:4px;padding:20px;text-align:center;cursor:pointer;color:#3d6d99;background:#f2f6fa;margin:0}
.upload-box:hover{background:#e7eff8}
.upload-box i{font-size:24px;display:block;margin-bottom:6px}
.upload-box p{font-size:12px}
.upload-box small{color:#bbb;font-size:10px}

/* AXIS CONFIG */
.axis-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;padding:8px;background:#fafafa;border:1px solid #eee;border-radius:3px}
/* nowrap: "X-1" is one name, and breaking it after the hyphen read as two. */
.axis-chk{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#555;cursor:pointer;padding:3px 5px;border-radius:3px;white-space:nowrap}
.axis-chk:hover{background:#e7eff8;color:#3d6d99}
.axis-chk input{cursor:pointer;accent-color:#3d6d99}
.axis-stroke-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.axis-stroke-item{display:none;flex-direction:column;gap:3px;background:#f2f6fa;border:1px solid #cfdcea;border-radius:3px;padding:6px 8px}
.axis-stroke-item.show{display:flex}
.axis-stroke-item span{font-size:10px;font-weight:700;color:#3d6d99;text-transform:uppercase}
.axis-stroke-item input{font-size:12px;padding:4px 6px;border:1px solid #ddd;border-radius:3px}
.axis-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;background:#e7eff8;color:#3d6d99;border:1px solid #c3d3e6;margin:1px 2px 1px 0}

/* BACKUP FILE LIST */
.backup-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #f5f5f5;font-size:12px}
.backup-row:last-child{border-bottom:none}
.file-chip{display:flex;align-items:center;gap:6px;color:#333}
.file-chip i{color:#3d6d99}

/* REPORT NO */
.rpt-no{font-family:monospace;font-size:12px;color:#3d6d99;font-weight:700}

/* HEALTH CHIP */
.h-chip{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700}
.h-exc{background:#e6f5e6;color:#1a7a1a;border:1px solid #a0d0a0}
.h-good{background:#e6f0fb;color:#1a3a9a;border:1px solid #90b8e8}
.h-fair{background:#fff3e0;color:#996600;border:1px solid #f0c060}
.h-poor{background:#fce8e8;color:#b00000;border:1px solid #f0a0a0}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;align-items:flex-start;justify-content:center;padding:40px 14px;overflow-y:auto}
.modal-bg.open{display:flex}
/* 560px when the window allows it, narrower when it does not, and never wider
   than the space it is given. The popup follows the window instead of forcing
   the window to follow it. */
.modal-box{background:#fff;border-radius:4px;border-top:3px solid #3d6d99;
  width:560px;max-width:100%;min-width:0;max-height:88vh;
  overflow-y:auto;overflow-x:hidden;margin-bottom:40px}
/* Two columns need roughly 560px to stay readable. Below that they stack. */
@media (max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f0f0f0;background:#fafafa}
.modal-head h3{font-size:13px;font-weight:700;color:#333}

/* AUDIT */
.audit-item{display:flex;align-items:flex-start;gap:9px;padding:8px 14px;border-bottom:1px solid #f5f5f5;font-size:12px}
.audit-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}

/* BUSY OVERLAY — a certificate takes a moment to fetch and redraw, and a
   half-painted sheet reads as a broken one. The overlay covers it until the
   new one is on screen. Printing must never catch it. */
.busy-host{position:relative}
/* Held back for 120ms: a load that finishes in a few milliseconds removes the
   veil before it is ever painted, so a quick certificate does not flicker. */
.busy-veil{position:absolute;inset:0;z-index:40;
  background:rgba(255,255,255,0.78);backdrop-filter:blur(1px);
  opacity:0;animation:busy-fade .18s ease-out .12s forwards}
@keyframes busy-fade{to{opacity:1}}
/* A certificate is taller than the window, so the middle of the sheet is
   usually off screen. The spinner sticks to the middle of the view instead. */
.busy-box{position:sticky;top:45vh;width:fit-content;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.busy-spin{width:34px;height:34px;border:3px solid #dbe5ef;border-top-color:#3d6d99;
  border-radius:50%;animation:busy-turn .8s linear infinite}
.busy-label{font-size:11px;color:#3d6d99;font-weight:700;letter-spacing:.3px}
@keyframes busy-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.busy-spin{animation-duration:2.4s}}
@media print{.busy-veil{display:none}}

/* REPORT TOOLBAR — two rows: what the certificate is on top, how it is dated
   and what to do with it underneath, actions kept to the right. */
.rpt-toolbar{margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.rpt-toolbar-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.rpt-toolbar-split{justify-content:space-between}
.rpt-toolbar-dates{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
/* Both actions the same size: they sit side by side and one being smaller
   reads as the lesser button rather than the other thing you can do. */
.rpt-toolbar-btns{display:flex;gap:8px;align-items:flex-end;margin-left:auto}
.rpt-toolbar-btns .btn{min-width:168px;justify-content:center;padding:6px 12px;font-size:12px}
.rpt-tool-wide{margin:0;flex:1 1 320px;min-width:260px}
.rpt-tool-wide select{width:100%}

/* REPORT PRINT */
.rpt-container{background:#fff;border:1px solid #ddd;font-family:Arial,sans-serif}
.rpt-title-section{border:1.5px solid #222;margin:16px;padding:18px;text-align:center}
.rpt-title-section h1{font-size:18px;font-weight:900;margin-bottom:8px}
.rpt-title-section h2{font-size:14px;font-weight:700;margin-bottom:5px}
.rpt-title-section h3{font-size:13px;font-weight:700;margin-bottom:8px}
.rpt-customer-section{border:1.5px solid #222;border-top:none;margin:0 16px;padding:11px;text-align:center}
.rpt-logo-section{border:1.5px solid #222;border-top:none;margin:0 16px 10px;padding:11px 16px;display:flex;align-items:center;justify-content:space-between}
.rpt-avs-logo{font-size:20px;font-weight:900;font-style:italic;color:#3d6d99}
.rpt-contact{text-align:right;font-size:10.5px;color:#333;line-height:1.7}
/* The certificate is a fixed template, so its cells share the sheet's width
   instead of claiming what their text wants. A long machine name wraps inside
   its cell; before, it widened the cell and pushed the sheet off screen. */
.rpt-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid #222;border-top:none;margin:0 16px 10px}
.rpt-meta.rpt-meta-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.rpt-meta-cell{padding:6px 10px;border-right:1px solid #ccc;min-width:0;overflow-wrap:anywhere}
.rpt-meta-cell:last-child{border-right:none}
.rpt-meta-label{font-size:9px;font-weight:700;color:#888;text-transform:uppercase;display:block;margin-bottom:2px}
.rpt-meta-value{font-size:12px;font-weight:700}
.rpt-section-header{background:#222;color:#fff;text-align:center;padding:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 16px 0}
.rpt-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #ccc;border-top:none;margin:0 16px 10px}
.rpt-info-cell{padding:5px 9px;border-right:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;font-size:10.5px;min-width:0;overflow-wrap:anywhere}
.rpt-info-cell:nth-child(4n){border-right:none}
.rpt-info-label{font-size:9px;font-weight:700;color:#888;text-transform:uppercase;display:block;margin-bottom:1px}
.rpt-info-value{font-size:11px;font-weight:700;color:#111}
.rpt-table{width:calc(100% - 32px);margin:0 16px 10px;border-collapse:collapse;font-size:10.5px}
.rpt-table th{background:#333;color:#fff;padding:5px 8px;text-align:center;font-size:10px;font-weight:700;border-right:1px solid #555}
.rpt-table td{padding:6px 8px;border:1px solid #e0e0e0;text-align:center}
.rpt-table tr:nth-child(even) td{background:#fafafa}
.rpt-imp{color:#1a7a1a;font-weight:700}
.rpt-marg{color:#996600;font-weight:700}
.rpt-note{margin:0 16px 10px;background:#fffaf0;border:1px solid #f0d080;border-radius:2px;padding:7px 10px;font-size:10px;color:#664400}
.rpt-signature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #ccc;margin:0 16px 16px}
.rpt-sig-left{padding:10px 12px;border-right:1px solid #ccc;font-size:10.5px}
.rpt-sig-right{padding:10px 12px;text-align:right;font-size:10.5px;line-height:1.7;color:#333}
.p-tag{display:inline-block;background:#e6f5e6;color:#1a7a1a;border:1px solid #a0d0a0;padding:1px 7px;border-radius:2px;font-size:9.5px;font-weight:700}
.m-tag{display:inline-block;background:#fff3e0;color:#996600;border:1px solid #f0c060;padding:1px 7px;border-radius:2px;font-size:9.5px;font-weight:700}
.f-tag{display:inline-block;background:#fbe6e6;color:#a01a1a;border:1px solid #e0a0a0;padding:1px 7px;border-radius:2px;font-size:9.5px;font-weight:700}
.n-tag{display:inline-block;background:#eee;color:#666;border:1px solid #ccc;padding:1px 7px;border-radius:2px;font-size:9.5px;font-weight:700}
.rpt-meta.rpt-meta-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rpt-meta.rpt-meta-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rev-badge{display:inline-block;background:#fff3e0;color:#996600;border:1px solid #f0c060;padding:0 5px;border-radius:2px;font-size:9px;font-weight:700;margin-left:5px;vertical-align:middle}
.manual-grid-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr)) auto;gap:6px;margin-bottom:6px;align-items:center}
.manual-grid-row input,.manual-grid-row select{width:100%;min-width:0;padding:5px 6px;font-size:11px;border:1px solid #ddd;border-radius:3px}
.manual-grid-hdr{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr)) auto;gap:6px;margin-bottom:4px;font-size:9.5px;font-weight:700;color:#888;text-transform:uppercase}
.rpt-hist-table{width:100%;border-collapse:collapse;font-size:11.5px}
.rpt-hist-table th{background:#f0f0f0;padding:6px 8px;text-align:left;border:1px solid #ddd;font-size:10px;text-transform:uppercase;color:#666}
.rpt-hist-table td{padding:6px 8px;border:1px solid #eee}
.rpt-meta.rpt-meta-6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* REPORT RESULT SUMMARY + CHARTS */
.rpt-result-grid{display:grid;border:1px solid #ccc;border-top:none;margin:0 16px 10px}
.rpt-result-card{padding:9px 12px;border-right:1px solid #ccc;text-align:center}
.rpt-result-card:last-child{border-right:none}
.rpt-result-lbl{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;margin-bottom:4px}
.rpt-result-detail{font-size:10.5px;margin-top:5px;color:#555}
.rpt-chart-box{margin:0 16px 10px;border:1px solid #ccc;border-radius:3px;padding:12px 14px;background:#fff}
.rpt-chart-box h4{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;border-bottom:1px solid #eee;padding-bottom:6px}
.rpt-chart-legend{display:flex;gap:16px;margin-top:8px;font-size:11px;color:#555}
.rpt-chart-legend span{display:flex;align-items:center;gap:4px}
.rpt-chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* BALL BAR PER-PLANE BLOCKS */
.bb-plane-block{border-bottom:1px dashed #e5c9a8;padding:12px 0}
.bb-plane-hdr{font-size:11px;font-weight:800;color:#3d6d99;letter-spacing:.05em;margin-bottom:8px}
.rpt-subreport-hdr{background:#222;color:#fff;text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;padding:8px;margin:24px 16px 0;border-top:3px solid #3d6d99}

@media print{
  @page{size:A4;margin:10mm}
  .sb,.topbar,.card-actions,.topbar-right,.modal-bg,.search-row,
  .rpt-toolbar{display:none!important}
  .wrap,.main{display:block;height:auto}
  .content{padding:0;background:#fff}
  .rpt-container{border:none}
  /* Print the certificate that is on screen, and only that one: every panel
     is in the document, and display:block on all of them put the whole app
     on paper behind the report. */
  .panel{display:none!important}
  .panel.active{display:block!important}
  .rpt-remark-input{border:none!important;background:transparent!important;padding:0!important}
  /* The sheet is black headers and colour-coded results; dropping the
     backgrounds would print PASS and FAIL as the same grey word. */
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rpt-meta,.rpt-info-grid,.rpt-result-grid,.rpt-chart-box,.rpt-signature,
  .rpt-title-section,.rpt-customer-section,.rpt-logo-section{break-inside:avoid}
  .rpt-table tr{break-inside:avoid}
  .rpt-section-header,.rpt-subreport-hdr{break-after:avoid}
  /*
   * Three charts side by side measure 990px; the printable width of an A4
   * page is 724px, so the third one was printed off the edge of the paper.
   * Two per row fit, and the third wraps onto a second line.
   *
   * minmax(0,...) because the canvases carry the pixel width Chart.js gave
   * them on screen, and a plain 1fr column will not shrink below that.
   */
  .two-col{grid-template-columns:repeat(2,minmax(0,1fr))!important;break-inside:avoid}
  .rpt-chart-box canvas{width:100%!important;height:auto!important;max-width:100%!important}
  .rpt-chart-box>div{height:auto!important}
  .rpt-chart-box{break-inside:avoid}
}

/* PRINT WATERMARK — centred on every printed page. It marks a copy as ours;
   it does not stop anyone copying the page, and nothing in a browser can. */
.print-watermark{display:none}
@media print{
  .print-watermark{display:flex!important;position:fixed;inset:0;z-index:9999;
    align-items:center;justify-content:center;pointer-events:none}
  .print-watermark span{transform:rotate(-35deg);text-align:center;white-space:pre-line;
    font:900 46px/1.35 Arial,Helvetica,sans-serif;letter-spacing:3px;
    color:#3d6d99;opacity:.12;max-width:62%;overflow-wrap:break-word}
}
.rpt-remark-input{width:100%;border:1px solid transparent;background:transparent;font-size:11px;padding:3px 5px;border-radius:3px;font-family:inherit;color:#333}
.rpt-remark-input:hover{border-color:#e8d0b0}
.rpt-remark-input:focus{border-color:#3d6d99;background:#fffaf5;outline:none}
.rpt-remark-block:hover{border-color:#e8d0b0!important;background:#fffdf9}
.rpt-remark-block:focus{border-color:#3d6d99!important;background:#fffaf5;outline:none}
.rpt-note[contenteditable]:hover{border-color:#e0a040}
.rpt-note[contenteditable]:focus{outline:2px solid #3d6d99;outline-offset:-2px}
@media print{.rpt-remark-block{border:none!important;background:transparent!important}.edit-hint{display:none}.rpt-note[contenteditable]{outline:none!important}}