#bodycolor{
    background: radial-gradient(circle at 20% 20%, #8EC5FC, transparent 40%),
                radial-gradient(circle at 80% 80%, #E0C3FC, transparent 40%),
                #111827
}
#mainpanel{
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    margin: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#setting{
    position: absolute;
    left: 50px;
}

#generateReportButton{
    position: absolute;
    right: 50px;
}

#typeoftest{
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    margin: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.testbutton{
    height: 250px;
    width: 250px;
    border-radius: 50px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}
.testbutton:hover{
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 122, 255, 0.3);
}
.testbutton:active{
    transform: scale(0.96);
}
.testbutton img{
    width: 100%;
    height: 100%;
    object-fit: contain;

}

.matpatbutton{
    border: none;
    padding: 8px 16px;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.18);
    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
.matpatbutton:hover{
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 122, 255, 0.3);
}

.matpatbutton:active {
    transform: scale(0.96);
}


#sealsButton{margin:auto;}
@media(max-width:650px){#mainpanel{height:auto;min-height:100px;gap:8px;flex-wrap:wrap}#setting,#generateReportButton{position:static}#sealsButton{margin:0}#typeoftest{height:auto;flex-wrap:wrap}.testbutton{width:min(40vw,250px);height:min(40vw,250px)}}

/* Step 16.6.1a — separate calculator and seals dashboard sections */
.dashboard-sections { display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, 1fr); gap: 12px; margin: 10px; }
.dashboard-section { min-width:0; padding: 20px; border-radius:24px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.18); box-shadow:0 8px 32px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.3); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.dashboard-section h2 { color:white; text-align:center; font:600 20px/1.4 Arial,sans-serif; margin:0 0 16px; }
.dashboard-section #typeoftest { margin:0; padding:0; height:250px; background:none; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; gap:15px; }
.dashboard-section .testbutton { width:min(44%,220px); height:220px; flex-shrink:1; }
/* Match the Seals button to the PAT and MAT icon buttons. */
.seals-section { display:flex; flex-direction:column; align-items:center; }
.seals-section h2 { align-self:stretch; }
.dashboard-section .seals-entry {
    width:220px;
    height:220px;
    min-height:0;
    flex:0 0 auto;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50px;
}
.dashboard-section .seals-entry img.seals-logo {
    width:100%;
    height:100%;
    object-fit:contain;
}

@media(max-width:850px) { .dashboard-sections { grid-template-columns:1fr; } }
@media(max-width:650px) { .dashboard-section #typeoftest { height:auto; min-height:170px; } .dashboard-section .testbutton { width:min(42vw,180px); height:min(42vw,180px); } .dashboard-section .seals-entry { width:min(42vw,180px); height:min(42vw,180px); } }




/* Step 16.7.1 — responsive dashboard overrides (desktop styling preserved) */
html { -webkit-text-size-adjust: 100%; }
body#bodycolor { margin:0; min-height:100vh; }
#mainpanel { position:relative; justify-content:space-between; gap:12px; min-width:0; }
#mainpanel #setting, #mainpanel #generateReportButton { position:static; flex:0 1 auto; }
.dashboard-sections { max-width:1500px; margin:10px auto; padding:0 10px; box-sizing:border-box; }
.dashboard-section { min-width:0; }
.dashboard-section #typeoftest { min-width:0; }
.dashboard-section .testbutton { max-width:220px; aspect-ratio:1 / 1; height:auto; }
.dashboard-section .seals-entry { width:min(100%,220px); aspect-ratio:1 / 1; height:auto; }
@media (max-width:900px) {
 .dashboard-sections { grid-template-columns:1fr; }
 .dashboard-section { padding:18px; }
 .dashboard-section #typeoftest { height:auto; min-height:0; }
 .dashboard-section .testbutton { width:min(42vw,220px); }
 .dashboard-section .seals-entry { width:min(42vw,220px); }
}
@media (max-width:480px) {
 #mainpanel { margin:8px; padding:12px; min-height:70px; height:auto; border-radius:18px; flex-wrap:wrap; }
 .matpatbutton { font-size:13px; padding:10px 12px; }
 .dashboard-sections { margin:8px auto; padding:0 8px; gap:10px; }
 .dashboard-section { padding:14px 10px; border-radius:18px; }
 .dashboard-section h2 { font-size:17px; margin-bottom:12px; }
 .dashboard-section #typeoftest { gap:10px; }
 .dashboard-section .testbutton { width:min(42vw,180px); border-radius:28px; }
 .dashboard-section .seals-entry { width:min(42vw,180px); border-radius:28px; }
}
@media (max-width:350px) {
 #mainpanel { justify-content:center; }
 .dashboard-section #typeoftest { gap:6px; }
 .dashboard-section .testbutton { width:40vw; }
}
@media (hover:none) { .testbutton:hover, .matpatbutton:hover { transform:none; box-shadow:none; } }

.records-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.records-entry{padding:18px 26px;min-height:60px}.records-description{color:#f3f4f6;text-align:center;font:14px Arial,sans-serif;margin:0}.records-section .matpatbutton{max-width:100%}

/* 16.11.2 — five consistent dashboard sections */
.dashboard-sections {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.dashboard-section { display:flex; flex-direction:column; align-items:center; }
.dashboard-section h2 { align-self:stretch; }
.dashboard-section #typeoftest { width:100%; }
.dashboard-section .dashboard-entry {
  width:min(100%, 220px);
  height:auto;
  aspect-ratio:1 / 1;
  max-width:220px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50px;
  margin:0 auto;
}
.dashboard-section .dashboard-entry img { width:100%;height:100%;object-fit:contain; }
@media (max-width:1000px) {
  .dashboard-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .dashboard-sections { grid-template-columns:1fr; }
  .dashboard-section .dashboard-entry { width:min(42vw,180px); border-radius:28px; }
}

/* 16.11.2.1 — Calculation History card: override the legacy header-button
   absolute positioning now that the button lives inside a dashboard card. */
.dashboard-section.history-section #generateReportButton {
  position: static;
  inset: auto;
  margin: 0 auto;
  flex: 0 0 auto;
}
.dashboard-section.history-section h2 {
  position: static;
  margin: 0 0 16px;
  text-align: center;
}

/* 16.11.6.6: identical icon centering and card spacing */
.dashboard-section {justify-content:flex-start;}
.dashboard-section h2 {margin:0 0 12px;}
.dashboard-section #typeoftest {flex:1;min-height:0;display:flex;justify-content:center;align-items:center;}
.dashboard-section .dashboard-entry,.dashboard-section .seals-entry {position:static!important;inset:auto!important;margin:auto!important;flex-shrink:0;}
.dashboard-section {min-height:260px;}
@media(max-width:650px){.dashboard-section{min-height:225px;} .dashboard-section #typeoftest{min-height:170px;}}

/* 16.11.6.16 — Polyphase FieldSuite dashboard identity */
#mainpanel.fieldsuite-brand {height:auto;min-height:155px;margin:14px auto 12px;max-width:1480px;box-sizing:border-box;padding:28px 32px;display:flex;align-items:center;justify-content:center;gap:22px;text-align:center;color:#fff;}
.fieldsuite-brand-mark {width:68px;height:68px;display:grid;place-items:center;flex:none;border-radius:22px;background:rgba(255,255,255,.17);font-size:34px;}
.fieldsuite-brand-copy h1 {font:700 clamp(29px,4.8vw,48px)/1.13 Arial,sans-serif;margin:0 0 9px;letter-spacing:-.025em;}
.fieldsuite-brand-copy p {font:500 clamp(13px,2vw,17px)/1.5 Arial,sans-serif;margin:0;color:#f0f5ff;}
.fieldsuite-team {display:inline-block;margin-top:11px;padding:5px 12px;border:1px solid rgba(255,255,255,.28);border-radius:30px;background:rgba(255,255,255,.10);font:600 12px Arial,sans-serif;}
.operations-overview {max-width:1480px;box-sizing:border-box;margin:14px auto 24px;padding:24px 28px;border:1px solid rgba(255,255,255,.28);border-radius:24px;background:rgba(255,255,255,.16);box-shadow:0 8px 32px rgba(0,0,0,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:white;font-family:Arial,sans-serif;}
.operations-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;}
.operations-heading h2 {font-size:22px;margin:0 0 7px;}.operations-heading p {margin:0;color:#e7effc;font-size:14px;}
.operations-tag {border-radius:20px;padding:7px 12px;background:rgba(255,255,255,.16);font-size:12px;}
.operations-links {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.operations-links a {display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px;border:1px solid rgba(255,255,255,.22);border-radius:17px;background:rgba(255,255,255,.12);text-decoration:none;color:white;transition:background .2s,transform .2s;}
.operations-links a:hover {background:rgba(255,255,255,.23);transform:translateY(-2px);}.operations-links a:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.operations-links a>span {font-size:25px;}.operations-links strong {font-size:15px;}.operations-links small {color:#e3edfa;font-size:12px;line-height:1.4;}
@media(max-width:900px){.operations-overview{margin:12px 10px 20px}.operations-links{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){#mainpanel.fieldsuite-brand{margin:8px;padding:20px 12px;gap:12px;flex-direction:column}.fieldsuite-brand-mark{width:52px;height:52px;font-size:25px}.operations-overview{padding:17px 14px}.operations-links{gap:8px}.operations-links a{padding:12px}.operations-links strong{font-size:13px}.operations-heading h2{font-size:19px}.operations-tag{display:none}}

/* 16.11.6.17 — match the dashboard's horizontal gutters on iPad and desktop. */
#mainpanel.fieldsuite-brand,.dashboard-sections,.operations-overview {
  box-sizing:border-box; width:calc(100% - 32px); max-width:1480px;
  margin-left:auto; margin-right:auto;
}
.operations-overview {overflow:visible;max-height:none;min-height:0;}
.operations-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.operations-stat {display:flex;flex-direction:column;gap:12px;min-width:0;padding:19px 20px;
  border:1px solid rgba(255,255,255,.24);border-radius:17px;background:rgba(255,255,255,.13);}
.operations-stat span {font:600 14px/1.4 Arial,sans-serif;color:#e9f0fc;}
.operations-stat strong {font:700 clamp(28px,4vw,42px)/1.1 Arial,sans-serif;color:#fff;}
@media(max-width:850px){.operations-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){#mainpanel.fieldsuite-brand,.dashboard-sections,.operations-overview{width:calc(100% - 24px);}
.operations-stats{gap:9px}.operations-stat{padding:14px 12px}.operations-stat span{font-size:12px}}

/* 16.11.6.18 — responsive dashboard and persistent operational statistics */
#bodycolor { margin:0; min-height:100vh; padding:12px 0 0; box-sizing:border-box;
  background:radial-gradient(ellipse at 24% 20%,rgba(142,197,252,.75),transparent 62%),
             radial-gradient(ellipse at 76% 82%,rgba(190,151,223,.65),transparent 62%),#111827;
  background-attachment:fixed; }
/* Reserve enough room that fixed stats never cover the final navigation card. */
#bodycolor { padding-bottom:var(--overview-reserved, 220px); }
.operations-overview { position:fixed; z-index:20; bottom:12px; left:50%; transform:translateX(-50%);
  width:min(calc(100% - 32px), 1480px) !important; margin:0 !important;
  padding:12px 18px; max-height:none; overflow:visible; backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); box-shadow:0 8px 36px rgba(0,0,0,.38); }
.operations-heading {margin-bottom:8px;align-items:center;}
.operations-heading h2 {font-size:17px;margin:0 0 2px;}
.operations-heading p {font-size:11px;}
.operations-stats {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.operations-stat {padding:10px 12px;gap:3px;border-radius:12px;}
.operations-stat span {font-size:11px;}
.operations-stat strong {font-size:24px;}
@media(max-width:650px){
  #bodycolor {--overview-reserved:175px;}
  .dashboard-section #typeoftest { flex-direction:row !important; flex-wrap:nowrap !important;
    gap:10px; padding:8px; margin:0; min-height:150px; box-sizing:border-box; }
  .dashboard-section.calculator-section .testbutton {width:min(39vw,180px) !important;
    height:auto !important; aspect-ratio:1; flex:0 1 180px; min-width:0; border-radius:25px;}
  .operations-overview {bottom:6px;width:calc(100% - 20px) !important;padding:9px 10px;border-radius:15px;}
  .operations-heading {margin-bottom:6px;}
  .operations-heading h2 {font-size:14px;}
  .operations-heading p,.operations-tag {display:none;}
  .operations-stats {grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}
  .operations-stat {padding:8px 4px;gap:5px;text-align:center;}
  .operations-stat span {font-size:9px;line-height:1.15;overflow-wrap:anywhere;}
  .operations-stat strong {font-size:21px;}
}

/* 16.11.6.21: dashboard extensions; preserve existing calculator card layout. */
.inventory-section,.backup-section{display:flex;flex-direction:column;align-items:center;justify-content:center}
.inventory-section h2,.backup-section h2{align-self:stretch}
.inventory-dashboard-link{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-decoration:none;color:#fff;text-align:center;box-sizing:border-box;width:min(100%,260px);min-height:175px;padding:18px;border-radius:26px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.12);font:700 17px Arial,sans-serif;transition:background .2s,transform .2s}
.inventory-dashboard-link:hover,.inventory-dashboard-link:focus-visible{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.inventory-dashboard-link small{font:400 12px Arial,sans-serif;opacity:.9}
.inventory-symbol{font:700 48px/1 Arial,sans-serif}

/* 16.11.6.22: match new dashboard icons to the four existing square icons. */
.dashboard-section.inventory-section,.dashboard-section.backup-section{align-items:center;}
.dashboard-section .inventory-dashboard-link{
  width:min(44%,220px);height:auto;min-height:0;aspect-ratio:1/1;
  flex:0 0 auto;margin:auto; padding:14px 8px;gap:7px;
  border-radius:28px;background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.13);
  font:700 13px/1.2 Arial,sans-serif;
}
.dashboard-section .inventory-dashboard-link .inventory-symbol{font-size:clamp(44px,7vw,88px);line-height:1.1;}
.dashboard-section .inventory-dashboard-link small{font:400 10px/1.25 Arial,sans-serif;}
@media(max-width:650px){
 .dashboard-section .inventory-dashboard-link{width:min(42vw,180px);border-radius:28px;}
}

/* 16.11.6.23 — reuse the exact History/Records icon button styling for new modules.
   The earlier inventory-dashboard-link styling created a smaller, boxier nested card. */
.dashboard-sections .inventory-section .utility-entry,
.dashboard-sections .backup-section .utility-entry {
  width:min(100%,220px);max-width:220px;height:auto;aspect-ratio:1 / 1;
  min-height:0;padding:0;margin:auto 0 !important;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50px;background:rgba(255,255,255,.18);
  text-decoration:none;box-sizing:border-box;flex:0 0 auto;
}
.dashboard-sections .inventory-section .utility-entry img,
.dashboard-sections .backup-section .utility-entry img {
  display:block;width:100%;height:100%;object-fit:contain;
}
@media(max-width:650px){
  .dashboard-sections .inventory-section .utility-entry,
  .dashboard-sections .backup-section .utility-entry {width:min(42vw,180px);border-radius:28px;}
}