:root {
    --ppm-blue:#2d5f9a; --ppm-blue-dark:#1a3e6e; --ppm-blue-light:#4a7fc1;
    --ppm-green:#7ab648; --ppm-green-dark:#5a8e30;
    --bg-main:#f0f4f8; --bg-card:#ffffff;
    --text-primary:#1a2a3a; --text-secondary:#4a5568; --text-muted:#718096;
    --border:#e2e8f0; --shadow:0 2px 12px rgba(0,0,0,0.08);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg-main);color:var(--text-primary);min-height:100vh;}

  #loginScreen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1a3e6e 0%,#2d5f9a 50%,#4a7fc1 100%);padding:20px;}
  .login-card{background:white;border-radius:16px;padding:48px 40px;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .login-logo{text-align:center;margin-bottom:24px;}
  .login-logo img{max-width:170px;}
  .login-portal-name{text-align:center;font-size:1.15rem;font-weight:700;color:var(--ppm-blue-dark);margin-bottom:3px;}
  .login-portal-sub{text-align:center;font-size:0.8rem;font-weight:600;color:var(--ppm-green);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
  .login-tagline{text-align:center;font-size:0.72rem;color:var(--text-muted);margin-bottom:28px;font-style:italic;}
  .form-group{margin-bottom:17px;}
  .form-group label{display:block;font-size:0.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px;}
  .form-group input,.form-group select{width:100%;padding:11px 15px;border:2px solid var(--border);border-radius:8px;font-size:0.93rem;color:var(--text-primary);outline:none;transition:border-color 0.2s;}
  .form-group input:focus,.form-group select:focus{border-color:var(--ppm-blue);}
  .btn-primary{width:100%;padding:13px;background:linear-gradient(135deg,var(--ppm-blue),var(--ppm-blue-dark));color:white;border:none;border-radius:8px;font-size:0.98rem;font-weight:600;cursor:pointer;letter-spacing:0.5px;transition:opacity 0.2s;}
  .btn-primary:hover{opacity:0.9;}
  .login-error{background:#fff5f5;border:1px solid #fed7d7;color:#c53030;border-radius:6px;padding:10px 14px;font-size:0.84rem;margin-bottom:14px;display:none;}
  /* Signed out by a server restart is not a wrong password. Amber, not red. */
  .login-error.is-notice{background:#fffaf0;border-color:#f6c177;color:#7b4a06;}
  .demo-hint{text-align:center;margin-top:16px;font-size:0.73rem;color:var(--text-muted);line-height:1.8;}
  .demo-hint code{background:#f0f0f0;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:0.78rem;}

  #appScreen{display:none;min-height:100vh;}
  header{background:linear-gradient(135deg,var(--ppm-blue-dark),var(--ppm-blue));color:white;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
  .hdr-left{display:flex;align-items:center;gap:14px;}
  .hdr-logo img{height:40px;filter:brightness(0) invert(1);}
  .hdr-names{display:flex;flex-direction:column;}
  .hdr-title{font-size:1rem;font-weight:700;color:white;line-height:1.2;}
  .hdr-sub{font-size:0.72rem;color:var(--ppm-green);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;}
  .hdr-right{display:flex;align-items:center;gap:12px;}
  .user-badge{background:rgba(255,255,255,0.15);padding:5px 14px;border-radius:20px;font-size:0.83rem;font-weight:500;}
  .btn-logout{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:white;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:0.8rem;}
  .btn-logout:hover{background:rgba(255,255,255,0.2);}

  .admin-nav{background:var(--ppm-blue-dark);padding:0 24px;display:flex;}
  .admin-nav button{background:none;border:none;color:rgba(255,255,255,0.7);padding:11px 17px;cursor:pointer;font-size:0.82rem;font-weight:500;border-bottom:3px solid transparent;transition:all 0.2s;}
  .admin-nav button.active,.admin-nav button:hover{color:white;border-bottom-color:var(--ppm-green);}

  .content{padding:22px;max-width:1500px;margin:0 auto;}
  .page{display:none;}
  .page.active{display:block;}

  .stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:22px;}
  .stat-card{background:var(--bg-card);border-radius:12px;padding:15px;box-shadow:var(--shadow);border-left:4px solid var(--ppm-blue);}
  .stat-card.green{border-left-color:var(--ppm-green);}
  .stat-card.yellow{border-left-color:#d97706;}
  .stat-card.blue{border-left-color:#3182ce;}
  .stat-card.red{border-left-color:#e53e3e;}
  .stat-card.purple{border-left-color:#805ad5;}
  .stat-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);font-weight:600;}
  .stat-value{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-top:3px;}

  .welcome-bar{background:linear-gradient(135deg,var(--ppm-blue),var(--ppm-blue-light));color:white;border-radius:12px;padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}
  .welcome-bar h2{font-size:1.15rem;font-weight:700;}
  .welcome-bar p{font-size:0.82rem;opacity:0.85;margin-top:3px;}
  .wbtag{font-size:0.72rem;color:var(--ppm-green);font-weight:700;text-transform:uppercase;letter-spacing:0.8px;white-space:nowrap;}

  .filter-bar{background:var(--bg-card);border-radius:12px;padding:14px 17px;margin-bottom:16px;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
  .filter-bar input,.filter-bar select{padding:8px 12px;border:1.5px solid var(--border);border-radius:7px;font-size:0.84rem;color:var(--text-primary);outline:none;}
  .filter-bar input:focus,.filter-bar select:focus{border-color:var(--ppm-blue);}
  .filter-bar input{flex:1;min-width:170px;}
  .btn-act{padding:8px 15px;border-radius:7px;border:none;cursor:pointer;font-size:0.82rem;font-weight:600;transition:all 0.2s;}
  .btn-green{background:var(--ppm-green);color:white;}
  .btn-green:hover{background:var(--ppm-green-dark);}
  .btn-blue{background:var(--ppm-blue);color:white;}
  .btn-blue:hover{background:var(--ppm-blue-dark);}
  .btn-gray{background:white;color:#4a5568;border:1.5px solid #a0aec0 !important;}
  .btn-gray:hover{background:#f7fafc;}

  .table-wrap{background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
  .table-hdr{padding:13px 17px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
  .table-hdr h3{font-size:0.93rem;font-weight:600;}
  .table-count{font-size:0.77rem;color:var(--text-muted);}
  .tbl{width:100%;border-collapse:collapse;font-size:0.83rem;}
  .tbl thead tr{background:var(--bg-main);}
  .tbl th{padding:9px 11px;text-align:left;font-weight:600;color:var(--text-secondary);font-size:0.73rem;text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;cursor:pointer;user-select:none;}
  .tbl th:hover{color:var(--ppm-blue);}
  .tbl td{padding:9px 11px;border-top:1px solid var(--border);vertical-align:middle;}
  .tbl tbody tr:hover{background:#f7faff;}
  .tbl tbody tr.pri-row{background:#fff8f0;}
  .tbl tbody tr.pri-row:hover{background:#fff0e0;}

  /* ── STATUS BADGES ── */
  .badge{display:inline-block;padding:3px 9px;border-radius:11px;font-size:0.71rem;font-weight:600;white-space:nowrap;}
  /* Green */
  .badge-shipped    {background:#c6f6d5;color:#22543d;}
  .badge-ontime     {background:#c6f6d5;color:#22543d;}
  /* Yellow */
  .badge-progress   {background:#fefcbf;color:#744210;}
  /* Scheduled sits between "waiting" and "being made": a cool, settled
     colour, distinct from the yellow of work actually on the floor. */
  .badge-scheduled  {background:#e9d8fd;color:#44337a;}
  .badge-schedpending{background:#edf2f7;color:#4a5568;}
  /* Blue */
  .badge-ontrack    {background:#bee3f8;color:#2a4365;}
  /* Red */
  .badge-onhold     {background:#fed7d7;color:#742a2a;}
  .badge-rejected   {background:#fed7d7;color:#742a2a;}

  /* Tracking number display */
  .tracking-input{width:130px;padding:4px 8px;border:1.5px solid var(--border);border-radius:5px;font-size:0.76rem;color:var(--text-primary);outline:none;}
  .tracking-input:focus{border-color:var(--ppm-blue);}
  .tracking-val{font-size:0.77rem;color:var(--ppm-blue-dark);font-weight:500;}

  /* Star */
  .star-col{width:28px;text-align:center;}
  .star{cursor:pointer;font-size:0.95rem;}
  .star.off{color:#cbd5e0;}
  .star.on{color:#e53e3e;}

  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:999;display:none;align-items:center;justify-content:center;}
  .modal-overlay.open{display:flex;}
  .modal{background:white;border-radius:16px;padding:28px;max-width:700px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:13px;border-bottom:1px solid var(--border);}
  .modal-hdr h2{font-size:1.05rem;color:var(--text-primary);}
  .modal-x{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);line-height:1;}
  .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
  .mf{display:flex;flex-direction:column;gap:4px;}
  .mf label{font-size:0.71rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;}
  .mf span{font-size:0.87rem;color:var(--text-primary);font-weight:500;}
  .mf.full{grid-column:1/-1;}
  .mf textarea,.mf input,.mf select{padding:8px 11px;border:1.5px solid var(--border);border-radius:7px;font-size:0.84rem;font-family:inherit;outline:none;}
  .mf textarea:focus,.mf input:focus,.mf select:focus{border-color:var(--ppm-blue);}
  .mf textarea{resize:vertical;min-height:68px;}
  .modal-acts{margin-top:20px;display:flex;gap:9px;justify-content:flex-end;}
  .modal-section{background:#f7faff;border-radius:8px;padding:14px;margin-top:13px;}
  .modal-section h4{font-size:0.78rem;font-weight:600;color:var(--ppm-blue);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px;}
  .rejection-row{display:none;}
  .rejection-row.visible{display:flex;}

  .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:20px;}
  .panel-card{background:var(--bg-card);border-radius:12px;padding:20px;box-shadow:var(--shadow);}
  .panel-card h3{font-size:0.93rem;font-weight:600;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid var(--border);}
  .list-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
  .list-item:last-child{border-bottom:none;}
  .list-item strong{display:block;font-size:0.87rem;}
  .list-item small{color:var(--text-muted);font-size:0.74rem;}
  .btn-sm{padding:4px 10px;font-size:0.74rem;border-radius:5px;border:none;cursor:pointer;font-weight:600;}
  .btn-sm-blue{background:var(--ppm-blue);color:white;}
  .btn-sm-red{background:#e53e3e;color:white;}
  .btn-sm-amber{background:#b5731a;color:white;}

  .upload-zone{border:2px dashed var(--border);border-radius:10px;padding:26px;text-align:center;cursor:pointer;transition:all 0.2s;}
  .upload-zone:hover{border-color:var(--ppm-blue);background:#f0f7ff;}
  .upload-zone .uicon{font-size:1.9rem;margin-bottom:7px;}
  .upload-zone p{color:var(--text-secondary);font-size:0.84rem;}
  .upload-zone small{color:var(--text-muted);font-size:0.74rem;}
  .mapper-box{background:#fff;border:1.5px solid var(--ppm-blue);border-radius:10px;padding:20px;margin-top:16px;}
  .mapper-box h4{font-size:0.88rem;font-weight:700;color:var(--ppm-blue-dark);margin-bottom:3px;}
  .mapper-info{font-size:0.78rem;color:var(--text-muted);margin-bottom:14px;line-height:1.5;}
  .mapper-company-row{background:#f0f7ff;border:1px solid #bee3f8;border-radius:7px;padding:10px 14px;margin-bottom:14px;font-size:0.84rem;color:var(--ppm-blue-dark);}
  .mapper-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .mapper-row{display:flex;flex-direction:column;gap:4px;}
  .mapper-row label{font-size:0.71rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.4px;}
  .mapper-row select{padding:7px 10px;border:1.5px solid var(--border);border-radius:6px;font-size:0.82rem;outline:none;}
  .mapper-row select.matched{border-color:var(--ppm-green);background:#f0fff4;}
  .mapper-actions{margin-top:14px;display:flex;gap:9px;align-items:center;}
  .mapper-match-count{font-size:0.76rem;color:var(--text-muted);flex:1;}

  #toast{position:fixed;bottom:24px;right:24px;background:#2d3748;color:white;padding:12px 19px;border-radius:9px;font-size:0.84rem;z-index:9999;opacity:0;transform:translateY(14px);transition:all 0.3s;pointer-events:none;max-width:310px;}
  #toast.show{opacity:1;transform:translateY(0);}
  #toast.success{background:var(--ppm-green-dark);}
  #toast.error{background:#c53030;}


  /* ── ACCOUNT SETUP STYLES ── */
  .invite-tag{display:inline-block;padding:2px 8px;border-radius:9px;font-size:0.7rem;font-weight:600;}
  .invite-tag.pending {background:#fefcbf;color:#744210;}
  .invite-tag.accepted{background:#c6f6d5;color:#22543d;}
  .invite-tag.expired {background:#fed7d7;color:#742a2a;}
  .invite-tag.manual  {background:#bee3f8;color:#2a4365;}
  .invite-tag.force-pw{background:#fed7d7;color:#742a2a;}

  .setup-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:20px;}
  .setup-tab{padding:10px 20px;cursor:pointer;font-size:0.88rem;font-weight:600;color:var(--text-muted);border-bottom:3px solid transparent;margin-bottom:-2px;transition:all 0.2s;}
  .setup-tab.active{color:var(--ppm-blue);border-bottom-color:var(--ppm-blue);}
  .setup-pane{display:none;}
  .setup-pane.active{display:block;}

  .invite-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
  .invite-list-item:last-child{border-bottom:none;}
  .invite-list-item .iinfo{flex:1;}
  .invite-list-item .iinfo strong{display:block;font-size:0.87rem;color:var(--text-primary);}
  .invite-list-item .iinfo small{font-size:0.73rem;color:var(--text-muted);}
  .invite-actions{display:flex;gap:6px;align-items:center;}

  /* Password change prompt */
  #pwChangeScreen{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;align-items:center;justify-content:center;}
  #pwChangeScreen.open{display:flex;}
  .pw-change-card{background:white;border-radius:16px;padding:36px 32px;max-width:420px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .pw-change-card h2{font-size:1.1rem;color:var(--ppm-blue-dark);margin-bottom:8px;}
  .pw-change-card p{font-size:0.83rem;color:var(--text-secondary);margin-bottom:20px;}
  .pw-strength{height:5px;border-radius:3px;margin-top:5px;margin-bottom:3px;transition:all 0.3s;}
  .pw-strength-label{font-size:0.71rem;color:var(--text-muted);}

  /* Invite setup landing (simulated) */
  #inviteSetupScreen{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#1a3e6e,#2d5f9a);z-index:3000;align-items:center;justify-content:center;padding:20px;}
  #inviteSetupScreen.open{display:flex;}
  .invite-setup-card{background:white;border-radius:16px;padding:40px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
  .invite-setup-card .is-logo{text-align:center;margin-bottom:18px;}
  .invite-setup-card .is-logo img{max-width:165px;}
  .invite-setup-card h2{text-align:center;font-size:1.1rem;font-weight:700;color:var(--ppm-blue-dark);margin-bottom:4px;}
  .invite-setup-card .is-sub{text-align:center;font-size:0.8rem;color:var(--text-muted);margin-bottom:22px;}
  .invite-setup-card .is-company{text-align:center;background:var(--bg-main);border-radius:8px;padding:8px;margin-bottom:18px;font-size:0.85rem;color:var(--ppm-blue-dark);font-weight:600;}

  @media(max-width:768px){.panel-grid,.mgrid,.mapper-grid{grid-template-columns:1fr;}.stats-bar{grid-template-columns:1fr 1fr;}}
  @media print{.no-print,header,.admin-nav,.filter-bar{display:none!important;}}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCTION ADDITIONS (v4)
   Everything above this line is the approved prototype, unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* Standalone invite-setup page (setup.php) */
.setup-body{margin:0;background:linear-gradient(135deg,#1a3e6e,#2d5f9a);min-height:100vh;}
.setup-body #inviteSetupScreen{position:fixed;inset:0;}

/* Import review: the new / updated / unchanged / dropped summary */
.import-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px;margin:14px 0;}
.import-stat{background:var(--bg-main);border-radius:9px;padding:11px 12px;border-left:4px solid var(--border);}
.import-stat .n{font-size:1.5rem;font-weight:700;color:var(--text-primary);line-height:1.1;}
.import-stat .l{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-muted);font-weight:600;margin-top:2px;}
.import-stat.new{border-left-color:var(--ppm-green);}
.import-stat.upd{border-left-color:#3182ce;}
.import-stat.same{border-left-color:#a0aec0;}
.import-stat.drop{border-left-color:#d97706;}
.import-stat.skip{border-left-color:#e53e3e;}

.import-protected{background:#f0fff4;border:1px solid #c6f6d5;border-radius:8px;padding:10px 13px;font-size:0.77rem;color:#22543d;line-height:1.5;margin-bottom:14px;}

.chg-block{margin-top:14px;}
.chg-block h5{font-size:0.74rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:7px;}
.chg-table{width:100%;border-collapse:collapse;font-size:0.76rem;}
.chg-table th{text-align:left;padding:5px 8px;color:var(--text-muted);font-weight:600;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.3px;background:var(--bg-main);}
.chg-table td{padding:5px 8px;border-top:1px solid var(--border);vertical-align:top;}
.chg-old{color:#c53030;text-decoration:line-through;}
.chg-new{color:#22543d;font-weight:600;}
.chg-scroll{max-height:230px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;}
.chg-more{font-size:0.74rem;color:var(--text-muted);padding:7px 8px;}

/* "No longer on the customer's latest report" */
.badge-stale{background:#feebc8;color:#7b341e;margin-left:5px;}
.tbl tbody tr.stale-row{background:#fffaf0;}
.tbl tbody tr.stale-row:hover{background:#fff5e6;}

/* Customer's own status text, admin-side only */
.report-note{display:block;margin-top:3px;font-size:0.7rem;color:#805ad5;line-height:1.35;}
.report-note b{font-weight:700;color:#6b46c1;}

/* Import history list */
.imp-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);gap:10px;}
.imp-item:last-child{border-bottom:none;}
.imp-item strong{display:block;font-size:0.82rem;}
.imp-item small{color:var(--text-muted);font-size:0.72rem;}
.imp-counts{font-size:0.71rem;color:var(--text-secondary);white-space:nowrap;text-align:right;}
.imp-counts b{color:var(--ppm-green-dark);}

/* Company picker inside the mapper */
.mapper-company-row select{margin-top:6px;width:100%;padding:7px 10px;border:1.5px solid #bee3f8;border-radius:6px;font-size:0.82rem;outline:none;background:#fff;}
.mapper-company-row input{margin-top:6px;width:100%;padding:7px 10px;border:1.5px solid #bee3f8;border-radius:6px;font-size:0.82rem;outline:none;}

/* Buttons in a working state */
.btn-act[disabled],.btn-primary[disabled]{opacity:0.55;cursor:not-allowed;}

/* Deactivated customer accounts */
.user-inactive{opacity:0.55;}

/* Mobile: the welcome-bar tagline is nowrap by design on desktop, which
   forced the whole page ~530px wide on a phone. Let it wrap below 768px —
   desktop rendering is unchanged. */
@media(max-width:768px){
  .welcome-bar{flex-wrap:wrap;gap:10px;}
  .welcome-bar .wbtag{white-space:normal;}
  .filter-bar input{min-width:0;}
  .import-summary{grid-template-columns:repeat(2,1fr);}
}

/* =====================================================================
   v5 — customer favourites, admin accounts, import revert
   ===================================================================== */

/* --- Customer favourites -------------------------------------------
   The buyer's star and the admin's priority star sit in the same column
   position across the two tables, so they must not look alike:
     gold ⭐   the customer's own bookmark, clickable
     red  ❗   PPM has flagged this line internally, not clickable
   Confusing the two would let a customer think starring a line escalates
   it with Medicraft, which it deliberately does not. */
.star.fav.on{color:#d69e2e;}
.star.fav.off{color:#cbd5e0;}
.star.fav:hover{color:#b7791f;transform:scale(1.18);}
.star.fav{transition:transform 0.12s ease,color 0.12s ease;display:inline-block;}
.star.fav:focus{outline:2px solid var(--ppm-blue);outline-offset:2px;border-radius:3px;}
.pri-flag{font-size:0.72rem;margin-left:2px;color:#e53e3e;cursor:default;}
tr.fav-row td{background:#fffdf5;}
tr.pri-row.fav-row td{background:#fff5f5;}

/* --- Account management --------------------------------------------- */
.acct-note{font-size:0.77rem;color:var(--text-secondary);line-height:1.5;margin:0 0 12px;}
.acct-note.warn{background:#fff8f0;border-left:3px solid #d97706;border-radius:6px;padding:9px 12px;}
.acct-hint{color:var(--text-muted);font-size:0.8rem;padding:0 6px;}
.btn-sm-gray{background:white;color:#4a5568;border:1px solid #cbd5e0;}
.btn-sm-gray:hover{background:#f7fafc;}
.invite-tag.self{background:#e9d8fd;color:#44337a;}
.invite-tag.revoked{background:#e2e8f0;color:#4a5568;}

/* --- Import history: revert + detail --------------------------------- */
.imp-item{flex-wrap:wrap;}
.imp-info{flex:1 1 55%;min-width:0;}
.imp-actions{flex:0 0 auto;display:flex;gap:5px;}
.imp-reverted{opacity:0.62;}
.imp-reverted .imp-counts{text-decoration:line-through;}

.btn-red{background:#e53e3e;color:white;}
.btn-red:hover{background:#c53030;}

.detail-h{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--text-muted);font-weight:700;margin:18px 0 8px;}

/* A long import can carry hundreds of changes. Scroll the table inside its
   own box rather than letting the modal grow past the viewport. */
.chg-scroll{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:8px;}
.chg-tbl{width:100%;border-collapse:collapse;font-size:0.76rem;}
.chg-tbl th{position:sticky;top:0;background:var(--bg-main);text-align:left;
  padding:7px 9px;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.4px;
  color:var(--text-muted);border-bottom:1px solid var(--border);}
.chg-tbl td{padding:6px 9px;border-bottom:1px solid #edf2f7;vertical-align:top;}
.chg-tbl tr:last-child td{border-bottom:none;}
.chg-tbl td.was{color:#c53030;text-decoration:line-through;}
.chg-tbl td.became{color:var(--ppm-green-dark);font-weight:600;}

.revert-blocked{margin-top:16px;background:#f7fafc;border-left:3px solid #a0aec0;
  border-radius:6px;padding:10px 13px;font-size:0.79rem;color:var(--text-secondary);line-height:1.5;}

/* --- Drag and drop ---------------------------------------------------- */
.upload-zone.drag-over{border-color:var(--ppm-green);background:#f0fff4;
  border-style:solid;transform:scale(1.01);}
.upload-zone.drag-over p{color:var(--ppm-green-dark);font-weight:600;}

@media print{.imp-actions,.star.fav{display:none;}}

/* =====================================================================
   v6 — clickable dashboard, date filters, change history, carrier links
   ===================================================================== */

/* --- Dashboard cards are filters ------------------------------------ */
.stat-card.clickable{cursor:pointer;transition:transform 0.12s ease,box-shadow 0.12s ease;}
.stat-card.clickable:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.12);}
.stat-card.clickable:focus-visible{outline:2px solid var(--ppm-blue);outline-offset:2px;}
.stat-card.clickable:active{transform:translateY(0);}

/* Says what the table was narrowed to, and how to get out of it. A
   drill-down with no way back is how people conclude data is missing. */
.drill-banner{background:#ebf8ff;border:1px solid #bee3f8;border-radius:7px;
  padding:7px 12px;margin-bottom:12px;font-size:0.8rem;color:#2a4365;
  display:flex;align-items:center;gap:10px;}
.drill-banner strong{color:#1a365d;}

/* --- Date range filter ---------------------------------------------- */
.filter-check{display:inline-flex;align-items:center;gap:6px;font-size:0.8rem;
  color:var(--text-secondary);white-space:nowrap;cursor:pointer;padding:0 4px;
  flex:0 0 auto;}

/* The filter bar gives every input flex:1 and a text-field's padding, which
   stretched this checkbox halfway across the row and left its label
   stranded. Checkboxes opt out of both. */
.filter-bar input[type="checkbox"]{flex:0 0 auto;width:15px;height:15px;
  min-width:0;padding:0;margin:0;cursor:pointer;}
.custom-dates{display:flex;gap:14px;align-items:center;margin-bottom:12px;
  padding:9px 12px;background:var(--bg-main);border-radius:7px;font-size:0.8rem;
  color:var(--text-secondary);flex-wrap:wrap;}
.custom-dates input{margin-left:6px;padding:5px 8px;border:1.5px solid var(--border);
  border-radius:6px;font-size:0.8rem;}

/* --- Tracking numbers as carrier links ------------------------------- */
.track-link{color:var(--ppm-blue);font-weight:600;text-decoration:none;
  font-size:0.78rem;word-break:break-all;}
.track-link:hover{text-decoration:underline;color:var(--ppm-blue-dark);}
.track-meta{display:block;font-size:0.68rem;color:var(--text-muted);margin-top:2px;}
.track-below{margin-top:4px;}

/* --- Full edit form --------------------------------------------------- */
.edit-warn{font-size:0.76rem;color:var(--text-secondary);line-height:1.5;
  background:#fff8f0;border-left:3px solid #d97706;border-radius:6px;
  padding:8px 11px;margin:0 0 12px;}
.edit-identity,.edit-history{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
.edit-identity summary,.edit-history summary{cursor:pointer;font-size:0.8rem;font-weight:600;
  color:var(--text-secondary);padding:4px 0;user-select:none;}
.edit-identity summary:hover,.edit-history summary:hover{color:var(--ppm-blue);}
.edit-identity[open] summary,.edit-history[open] summary{margin-bottom:10px;}

/* --- Change history --------------------------------------------------- */
.hist-when{white-space:nowrap;color:var(--text-muted);font-size:0.72rem;}
.hist-src{font-size:0.7rem;font-weight:600;padding:1px 7px;border-radius:8px;white-space:nowrap;}
.hist-src.manual{background:#bee3f8;color:#2a4365;}
.hist-src.import{background:#e2e8f0;color:#4a5568;}
.hist-src.revert{background:#fed7d7;color:#742a2a;}

/* --- Import review: a conflict is not just another change ------------- */
.import-stat.conflict{border-left-color:#dd6b20;}
.conflict-block{background:#fffaf0;border:1.5px solid #f6ad55;border-radius:9px;padding:12px;}
.conflict-block h5{color:#7b341e;}

@media(max-width:768px){
  .custom-dates{flex-direction:column;align-items:flex-start;gap:8px;}
  .filter-check{padding:4px 0;}
}

/* =====================================================================
   v7 — report status translation, inline status, stored report files
   ===================================================================== */

/* --- Status as a dropdown in the table -------------------------------
   Styled to read as the badge it replaces, so the table still scans by
   colour. The native arrow is dropped and the whole control kept small —
   it sits in a data cell, not a form. */
.status-pick{border:none;border-radius:9px;padding:3px 8px;font-size:0.7rem;
  font-weight:600;cursor:pointer;max-width:165px;
  -webkit-appearance:none;appearance:none;outline:none;
  text-overflow:ellipsis;}
.status-pick:hover{filter:brightness(0.95);}
.status-pick:focus{outline:2px solid var(--ppm-blue);outline-offset:1px;}
.status-pick:disabled{opacity:0.6;cursor:progress;}

/* A report can say "Shipped" before anything leaves the building. Until a
   tracking number exists, say so rather than implying evidence. */
.unconf-tag{display:inline-block;margin-left:4px;font-size:0.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.3px;background:#feebc8;color:#7b341e;
  padding:1px 5px;border-radius:7px;vertical-align:middle;white-space:nowrap;}

/* --- Ship-date filter: the range sits with its dropdown --------------- */
.date-filter-group{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
.custom-dates{display:inline-flex;align-items:center;gap:7px;font-size:0.78rem;
  color:var(--text-secondary);background:var(--bg-main);border-radius:7px;padding:3px 9px;}
.custom-dates label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.custom-dates input{padding:4px 7px;border:1.5px solid var(--border);border-radius:6px;
  font-size:0.78rem;flex:0 0 auto;min-width:0;}

/* --- Review: status read from the report ------------------------------ */
.import-stat.statusset{border-left-color:#805ad5;}
.status-block{background:#faf5ff;border:1.5px solid #d6bcfa;border-radius:9px;padding:12px;}
.status-block h5{color:#44337a;}

@media(max-width:768px){
  .date-filter-group{width:100%;}
  .custom-dates{width:100%;flex-wrap:wrap;}
  .status-pick{max-width:none;width:100%;}
}

/* --- Two-factor code screen ------------------------------------------ */
#twoFactorScreen{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:2100;align-items:center;justify-content:center;}
#twoFactorScreen.open{display:flex;}

/* Wide tracking and a monospace face so a 6-digit code is unmistakable and
   easy to check against the email without re-reading it twice. */
.code-input{width:100%;text-align:center;font-size:1.7rem;letter-spacing:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:12px 10px 12px 22px;border:1.5px solid var(--border);border-radius:9px;
  color:var(--ppm-blue-dark);outline:none;}
.code-input:focus{border-color:var(--ppm-blue);}
.code-input::placeholder{color:#cbd5e0;letter-spacing:12px;}

.invite-tag.twofa{background:#c6f6d5;color:#22543d;}
.btn-sm-green{background:var(--ppm-green);color:white;}
.btn-sm-green:hover{background:var(--ppm-green-dark);}

/* --- Shipment notification preview ------------------------------------
   The email is rendered in a sandboxed iframe: it carries its own inline
   styling for mail clients, and letting that loose in the page would fight
   the portal's own CSS. */
.mail-preview{width:100%;height:460px;border:none;display:block;background:#fff;}

/* Non-production banner. Renders only when PPM_BANNER is set (test and
   staging instances); invisible on the live portal.

   Deliberately in normal flow rather than position:fixed — a fixed bar
   overlays the top of the sticky header and swallows clicks on the first
   row of controls. In flow it simply pushes the page down and scrolls
   away, and the sticky header then behaves exactly as it does without it. */
.env-banner{background:#744210;color:#fff;font-size:0.74rem;font-weight:700;
  letter-spacing:0.6px;text-transform:uppercase;text-align:center;padding:6px 12px;
  line-height:1.4;position:relative;z-index:200;}
.setup-body .env-banner,
#loginScreen + .env-banner{margin-bottom:0;}
@media print{.env-banner{display:none;}}

/* ---------------------------------------------------------------------
   SECURITY TAB  (v9)

   The activity log reuses .badge, but its events are not order statuses,
   so it needs its own three-way colouring: an ordinary outcome, something
   worth a second look, and something that was actively refused.
   --------------------------------------------------------------------- */
.badge-ok     {background:#c6f6d5;color:#22543d;}
.badge-warn   {background:#fefcbf;color:#744210;}
.badge-danger {background:#fed7d7;color:#742a2a;}

#adminSecurityPage .data-table td {vertical-align:top;}
#adminSecurityPage .data-table td:last-child {
  /* Detail lines can be long; let them wrap rather than stretch the table. */
  white-space:normal;
  max-width:28rem;
  word-break:break-word;
}
#adminSecurityPage h4 {font-size:.86rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;}
#pwChangeScreen .btn-secondary {width:100%;}

/* Same shape as the sign-out button beside it, deliberately a different
   class so "the sign-out button" stays unambiguous in markup and tests. */
.btn-pw {
  background:transparent; border:1px solid rgba(255,255,255,0.45); color:#fff;
  padding:6px 13px; border-radius:6px; font-size:0.78rem; font-weight:600;
  cursor:pointer; margin-right:.4rem; white-space:nowrap;
}
.btn-pw:hover {background:rgba(255,255,255,0.14);}

/* Two buttons plus the user badge is more than a phone header can hold in
   one line. Let the right-hand group wrap instead of pushing the page
   sideways — a horizontal scrollbar on a phone is how a portal stops
   being usable in a workshop. */
.hdr-right {flex-wrap:wrap; justify-content:flex-end; gap:.35rem; row-gap:.35rem;}
@media(max-width:520px){
  .btn-pw, .btn-logout {padding:5px 10px; font-size:0.72rem;}
  .hdr-right .user-badge {width:100%; text-align:right;}
}

/* Delayed (v10) — the customer's own report says the line is late.
   Amber-red: more alarming than Mfg In-Progress, less final than On-Hold,
   which is a stop rather than a slip. */
.badge-delayed {background:#fbd9c4;color:#7b3306;}

/* ---------------------------------------------------------------------
   MAPPER — confirming what changed  (v10)

   Amber rather than red: a customer renaming a column is a normal monthly
   event, not an error. It needs attention, not alarm.
   --------------------------------------------------------------------- */
.mapper-confirm {
  background: #fffaf0;
  border: 1px solid #f6c177;
  border-left: 3px solid #dd8b1a;
  border-radius: 4px;
  padding: .85rem 1rem;
  margin: .8rem 0 1rem;
}
.mapper-confirm h4 { margin: 0 0 .5rem; font-size: .92rem; color: #7b4a06; }
.mapper-confirm p.muted { margin: .6rem 0 0; font-size: .8rem; }

.confirm-row {
  display: grid;
  grid-template-columns: 1fr 15rem 1.2rem;
  gap: .6rem;
  align-items: center;
  padding: .45rem 0;
  border-top: 1px solid #f2e2c4;
}
.confirm-row:first-of-type { border-top: 0; }
.confirm-what { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.confirm-what .muted { font-size: .78rem; line-height: 1.35; }
.confirm-row select { width: 100%; }
.confirm-tick { color: #2f855a; font-weight: 700; text-align: center; }

/* Provenance on the full grid: where each answer came from. */
.map-tag {
  font-size: .62rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .08rem .3rem; border-radius: 2px; margin-left: .35rem; white-space: nowrap;
}
.map-saved   { background: #e6f2ff; color: #2a4365; }
.map-renamed { background: #fdefd6; color: #7b4a06; }
.map-shape   { background: #fde8e8; color: #8a2020; }

/* ---------------------------------------------------------------------
   WHAT IS ACTUALLY IN THE COLUMN  (v12.3)

   Under every field in the mapping grid, the real cell values from the
   column it is pointed at. The one failure no header name can reveal is a
   column that kept its name and changed its contents, and the only thing
   that catches it is seeing the contents.
   --------------------------------------------------------------------- */
.map-peek {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .68rem;
  line-height: 1.3;
  color: var(--text-secondary, #5b6b78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: .9rem;
}

/* A content contradiction is redder than a rename: a rename is the customer
   telling you something changed, this is the customer not telling you. */
.confirm-row-shape { background: #fff5f5; border-top-color: #f5c6c6; }
.confirm-samples {
  display: block;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .72rem;
  color: #8a2020;
  margin-top: .15rem;
}

#btnPreview:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  .confirm-row { grid-template-columns: 1fr; }
  .confirm-tick { text-align: left; }
}

/* ---------------------------------------------------------------------
   BACKUPS & UNDO  (v11)
   --------------------------------------------------------------------- */
.backup-warn {
  background: #fdecea; color: #7b241c; border-radius: 3px;
  padding: .6rem .85rem; margin-bottom: .8rem; font-size: .9rem; font-weight: 600;
}
/* Stated as a fact, not an alarm: this is a limit of the design, not a
   fault, and it should read like the footnote it is. */
.backup-caveat {
  background: var(--card-bg, #fff);
  border: 1px solid #d5dee6; border-left: 3px solid #8a5300;
  border-radius: 3px; padding: .65rem .9rem; font-size: .86rem; color: #4d5e6e;
}
.backup-full { display: flex; align-items: center; gap: .35rem; font-size: .82rem; white-space: nowrap; }
.filter-bar .backup-full input[type="checkbox"] { flex: 0 0 auto; padding: 0; }

#adminBackupPage .data-table td { vertical-align: top; }
#adminBackupPage .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }

/* The history panel's Undo column. */
.chg-tbl td.hist-act { white-space: nowrap; text-align: right; }
.hist-undone {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #2f855a; font-weight: 700;
}
.hist-src.undo { background: #e6f2ff; color: #2a4365; }

  /* =================================================================
     v12 — CURRENT / ARCHIVED, and bulk selection
     ================================================================= */

  /* Tabs. Deliberately looks like a tab strip rather than a filter
     dropdown: Current and Archived are two places you are, not two
     settings of one place. */
  .view-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:2px solid var(--border);}
  .view-tab{
    appearance:none;background:none;border:none;cursor:pointer;
    padding:9px 18px;margin-bottom:-2px;
    font-size:0.88rem;font-weight:600;color:var(--text-muted);
    border-bottom:3px solid transparent;border-radius:6px 6px 0 0;
    transition:color .15s,border-color .15s,background .15s;
  }
  .view-tab:hover{color:var(--text-secondary);background:rgba(45,95,154,0.05);}
  .view-tab.is-on{color:var(--ppm-blue-dark);border-bottom-color:var(--ppm-blue);}
  .view-tab .vt-n{
    display:inline-block;margin-left:7px;padding:1px 8px;
    background:var(--border);color:var(--text-secondary);
    border-radius:10px;font-size:0.74rem;font-weight:700;
  }
  .view-tab.is-on .vt-n{background:var(--ppm-blue);color:#fff;}

  /* Bulk bar. Sticks under the header so a 400-row selection still has
     its action button in reach — scrolling to the top to find the button
     is how people end up selecting again. */
  .bulk-bar{
    position:sticky;top:66px;z-index:60;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:#eef5fc;border:1px solid var(--ppm-blue-light);
    border-radius:9px;padding:10px 14px;margin-bottom:10px;
    box-shadow:0 2px 10px rgba(26,62,110,0.10);
  }
  .bulk-n{font-size:0.86rem;font-weight:700;color:var(--ppm-blue-dark);margin-right:4px;}
  .btn-amber{background:#b5731a;color:#fff;}
  .btn-amber:hover{background:#8f5a12;}
  .btn-plain{background:var(--border);color:var(--text-secondary);}
  .btn-plain:hover{background:#cfd8e3;}

  .sel-col{width:30px;text-align:center;}
  .sel-col input,.row-sel{cursor:pointer;width:15px;height:15px;accent-color:var(--ppm-blue);}
  tr.is-sel{background:#eef5fc !important;}

  /* An archived row carries its own quiet marker in the Archived view, so
     a printed or exported page is not ambiguous about what it is. */
  .arch-tag{
    display:inline-block;padding:1px 7px;border-radius:9px;
    background:#f0e6d4;color:#7a5313;
    font-size:0.69rem;font-weight:700;white-space:nowrap;
  }
  .arch-when{display:block;font-size:0.7rem;color:var(--text-muted);margin-top:2px;}

  @media (max-width:640px){
    .view-tab{padding:8px 12px;font-size:0.82rem;}
    .bulk-bar{position:static;}
  }


/* ---------------------------------------------------------------------
   WORKING SPINNER  (v12.4)

   Every control that fires a request spins while it waits. Before this,
   a button that sent a request simply went quiet — clicking "Resend
   Link" looked identical to clicking nothing at all, so people clicked
   it again, and sometimes again after that.

   currentColor, so one rule covers every button variant on the site.
   --------------------------------------------------------------------- */
.btn-spin {
  display: inline-block;
  width: .78em; height: .78em;
  margin-right: .45em;
  vertical-align: -.07em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .8;
  animation: ppm-spin .6s linear infinite;
}
@keyframes ppm-spin { to { transform: rotate(360deg); } }

/* A disabled button is usually dimmed; keep the spinner legible on it. */
button[aria-busy="true"], .btn[aria-busy="true"] { cursor: progress; opacity: .85; }
button[aria-busy="true"] .btn-spin, .btn[aria-busy="true"] .btn-spin { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-spin { animation-duration: 1.5s; }
}


/* =====================================================================
   THE ORDERS TABLE FITS THE WINDOW  (v12.5)

   Two hundred lines made the PAGE thirteen thousand pixels tall. The
   tabs, the filters and the Export bar scrolled out of reach on the
   first flick, and the column headings went with them — so halfway down
   the list there was no way to tell which of the two date columns you
   were reading.

   And the table was quietly wider than its box: the browser gave
   "Customer Want Date" 183px for a ten-character date, which pushed Work
   Order, Notes and the Edit/Archive/Del buttons off the right-hand edge
   behind an inner scrollbar that looked like the end of the table.

   So: the rows scroll inside a box sized to the window, the headings
   stay pinned to the top of it, and every column has a declared width
   that adds up to the space available. Nothing scrolls sideways.
   ===================================================================== */

.tbl-scroll {
  overflow-y: auto;
  overflow-x: hidden;          /* nothing should ever need scrolling sideways */
  -webkit-overflow-scrolling: touch;
}

/* The heading row rides along at the top of the scroller. It needs an
   opaque background or the rows show through it, and the border has to
   come from an inset shadow — a sticky cell's own border does not
   travel with it. */
.tbl-scroll .tbl thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-main);
  box-shadow: inset 0 -1px 0 var(--border);
}

.tbl-fixed { table-layout: fixed; width: 100%; }

/* Headings may wrap. Keeping them on one line is exactly what made the
   date columns twice as wide as the dates inside them. */
.tbl-fixed th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tbl-fixed th.nosort { cursor: default; }
.tbl-fixed th.nosort:hover { color: var(--text-secondary); }

/* A long part number with no spaces must break rather than widen its
   column — in a fixed layout an unbreakable cell overflows silently. */
.tbl-fixed td { overflow-wrap: anywhere; word-break: break-word; }

/* Which column the table is sorted by, and which way. Without this the
   default sort by Customer Want Date is invisible, and an unexplained
   order looks like no order at all. */
.tbl th .sort-caret { font-size: .62rem; margin-left: .25em; color: var(--ppm-blue); }
.tbl th.is-sorted { color: var(--ppm-blue); }

/* ---- the fourteen admin columns -------------------------------------
   Percentages, so the table uses the whole window at any width. The
   three fixed columns are the ones whose contents never change size: a
   checkbox, a star, and three buttons that must stay on one line. */
.tbl-admin .c-sel     { width: 34px; }
.tbl-admin .c-star    { width: 30px; }
.tbl-admin .c-company { width: 7.5%; }
.tbl-admin .c-po      { width: 9%; }
.tbl-admin .c-part    { width: 9%; }
.tbl-admin .c-desc    { width: 13%; }
.tbl-admin .c-qty     { width: 3.6%; }
.tbl-admin .c-want    { width: 7.4%; }
.tbl-admin .c-ship    { width: 8.4%; }
.tbl-admin .c-wo      { width: 8%; }
.tbl-admin .c-status  { width: 9.6%; }
.tbl-admin .c-track   { width: 10%; }
.tbl-admin .c-notes   { width: 8.5%; }
.tbl-admin .c-acts    { width: 166px; }

/* The buttons are the reason the row is as tall as it is, so they get
   to stay on one line and the row sizes itself around them. */
.tbl-admin td.acts { white-space: nowrap; text-align: right; }
.tbl-admin td.acts .btn-sm { display: inline-block; }

/* Inputs inside cells must obey the column, not set it. */
.tbl-fixed td .tracking-input,
.tbl-fixed td select { max-width: 100%; box-sizing: border-box; }

/* A touch tighter, so a row costs what its content costs and no more. */
.tbl-scroll .tbl td { padding: 7px 9px; }

@media (max-width: 1100px) {
  /* Below this there genuinely is not room for fourteen columns, so let
     it scroll sideways rather than crushing every one of them. */
  .tbl-scroll { overflow-x: auto; }
  .tbl-fixed  { min-width: 1080px; }
}

/* The status cell carries a dropdown and, when a line says Shipped with
   no tracking number, a warning beside it. In a fixed-width column the
   two sat side by side and the warning ran out past the edge. */
.tbl-admin td .unconf-tag { display: block; margin-top: 3px; white-space: normal; }
.tbl-admin td .status-sel,
.tbl-admin td select.status-sel { max-width: 100%; }
.tbl-admin td .badge { white-space: normal; }

/* ---- the eleven customer-facing columns ----------------------------- */
.tbl-buyer .c-star    { width: 32px; }
.tbl-buyer .c-po      { width: 11%; }
.tbl-buyer .c-part    { width: 11%; }
.tbl-buyer .c-desc    { width: 17%; }
.tbl-buyer .c-qty     { width: 5%; }
.tbl-buyer .c-want    { width: 10%; }
.tbl-buyer .c-ship    { width: 10.5%; }
.tbl-buyer .c-status  { width: 12%; }
.tbl-buyer .c-track   { width: 12%; }
.tbl-buyer .c-notes   { width: 11%; }
.tbl-buyer .c-details { width: 90px; }
.tbl-buyer td.acts, .tbl-buyer td:last-child { white-space: nowrap; }