/* Admin Console styles -- moved out of admin.html's inline <style> on
   2026-10-05 (byte-for-byte, only the 4-space indent removed) so the
   read-only my-knowledgebase.html can share them instead of a copy. */
/* Admin console layout/components — matches the reference mockup's
   admin-, xp-, md-, cm- prefixed classes (drmachines-full_09-Jul-2026.html,
   admin pages + renderAdminSidebars()). Dashboard, Product Explorer,
   Master Data, Manage Content, and Experts are fully wired to the real 
   backend; the remaining sidebar items (Billing, Invoices, Subscriptions,
   Security, Users & Access, Settings) render a "coming soon" placeholder
   — they exist in the mockup's sidebar but have no real backend
   counterpart in scope for this build. */

/* Shown by default (before JS decides anything) so an expired session
   never flashes the real console or even the "access required" gate --
   both of those stay display:none until /auth/me actually confirms the
   session, see js/admin.js's adminGate()/adminRefreshUser(). */
.admin-checking{max-width:520px;margin:120px auto;text-align:center;color:var(--cyan);font-size:26px;}

.admin-gate{max-width:520px;margin:80px auto;text-align:center;background:var(--navy-mid);border:1px solid var(--border);border-radius:14px;padding:40px 32px;display:none;}
.admin-gate i{font-size:30px;color:var(--amber);margin-bottom:14px;display:block;}
.admin-gate h2{font-family:var(--font-display);font-size:20px;margin-bottom:10px;color:var(--white);}
.admin-gate p{color:var(--steel);font-size:14px;line-height:1.6;}
.admin-gate a.btn{display:inline-block;margin-top:18px;background:var(--cyan);color:var(--navy-deep);font-weight:700;padding:10px 20px;border-radius:8px;font-size:13.5px;text-decoration:none;}

.admin-layout{display:none;grid-template-columns:220px 1fr;gap:0;min-height:calc(100vh - 64px);}
.admin-layout.open{display:grid;}
.admin-sidebar{background:var(--navy-deep);border-right:1px solid var(--border);padding:28px 0;}
.admin-sidebar-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#4A6080;padding:14px 14px 6px;}
/* Menu Access's own "Content Types"/"Problem Category"/"Product Library" (and
   "Admin Console Sections") group labels stay brighter than the left sidebar's
   own "Main"/"Content"/"Experts"/"System" group labels, which share this same
   class -- scoped to #pa-body specifically, per request. */
#pa-body .admin-sidebar-label{color:var(--cyan);}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--steel);transition:color .2s,background .2s;margin-bottom:2px;}
.admin-nav-item i{width:16px;text-align:center;font-size:13px;}
.admin-nav-item:hover{color:var(--white);background:rgba(255,255,255,0.05);}
.admin-nav-item.active{color:var(--cyan);background:var(--cyan-dim);}
.admin-nav-badge{margin-left:auto;background:var(--amber-dim);color:var(--amber);border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700;}
.admin-main{padding:14px clamp(12px,2vw,24px) 60px;overflow-y:auto;}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.admin-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--white);}
.admin-sub{font-size:13px;color:var(--steel);margin-top:4px;}
.admin-section{display:none;}
.admin-section.open{display:block;}

.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px;}
.kpi-card{background:var(--navy-mid);border:1px solid var(--border);border-radius:12px;padding:20px 22px;cursor:pointer;transition:border-color .2s;}
.kpi-card:hover{border-color:rgba(0,212,255,0.35);}
.kpi-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-bottom:8px;}
.kpi-val{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--white);margin-bottom:4px;}
.kpi-sub{font-size:12px;color:#4A6080;}

.admin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap;}
.admin-tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--steel);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s;background:none;border-left:none;border-right:none;border-top:none;font-family:var(--font-body);}
.admin-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}
.admin-tab:hover{color:var(--white);}

.admin-soon{padding:60px 20px;text-align:center;color:#4A6080;}
.admin-soon i{font-size:30px;margin-bottom:14px;display:block;color:#4A6080;}
.admin-soon h3{font-family:var(--font-display);color:var(--white);font-size:16px;margin-bottom:6px;}
.admin-soon p{font-size:13px;max-width:420px;margin:0 auto;line-height:1.6;}

/* Product Explorer (xp-*) */
.xp-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;}
@media(max-width:860px){.xp-layout{grid-template-columns:1fr;}}
.xp-col-head{padding:13px 18px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#4A6080;display:flex;justify-content:space-between;align-items:center;}
.xp-product-list{max-height:640px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,212,255,0.25) transparent;}
.xp-product-list::-webkit-scrollbar{width:6px;}
.xp-product-list::-webkit-scrollbar-track{background:transparent;}
.xp-product-list::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.25);border-radius:3px;}
.xp-prod-item{padding:13px 18px;border-bottom:1px solid rgba(140,160,184,0.06);cursor:pointer;transition:background .15s;}
.xp-prod-item:last-child{border-bottom:none;}
.xp-prod-item:hover{background:rgba(0,212,255,0.04);}
.xp-prod-item.active{background:var(--cyan-dim);border-left:3px solid var(--cyan);padding-left:15px;}
.xp-prod-name{font-size:14px;font-weight:600;color:var(--white);margin-bottom:3px;}
.xp-prod-meta{font-size:11px;color:var(--steel);font-family:var(--font-mono);}
.xp-empty{padding:40px 20px;text-align:center;color:#4A6080;font-size:13px;}

/* Expert Applications (xa-*) -- Product Explorer's data-load conventions,
   the reference mockup's application-review card layout. */
.xa-card{background:var(--navy-deep);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:12px;}
.xa-card:last-child{margin-bottom:0;}
.xa-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.xa-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--white);}
.xa-email{font-size:12px;color:var(--steel);font-family:var(--font-mono);margin-top:2px;}
.xa-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:8px;background:var(--amber-dim);color:var(--amber);flex-shrink:0;}
.xa-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px;}
.xa-meta-item{background:var(--navy);border:1px solid var(--border);border-radius:8px;padding:8px 12px;}
.xa-meta-label{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#4A6080;margin-bottom:3px;}
.xa-meta-val{font-size:13px;color:var(--white);font-weight:600;word-break:break-word;}
.xa-bio{font-size:13px;color:var(--steel);line-height:1.6;background:var(--navy);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:12px;}
.xa-actions{display:flex;gap:10px;justify-content:flex-end;}

/* Users & Access (su-*) -- real data-table layout matching the reference
   mockup's Security & Access > Users & Access tab (drmachines-Aug-10-2026.html). */
.su-table{width:100%;border-collapse:collapse;font-size:13px;}
.su-table th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#4A6080;padding:12px 20px;border-bottom:1px solid var(--border);white-space:nowrap;}
/* Menu Access's own "Page"/"Enabled" (and "Section"/"Enabled") table headers
   stay brighter than every other .su-table elsewhere in this console (Users &
   Access's Company/User tables, etc.) -- scoped to #pa-body specifically, per
   request, rather than brightening .su-table th everywhere. */
#pa-body .su-table th{color:var(--cyan);}
.su-table td{padding:14px 20px;border-bottom:1px solid var(--border);vertical-align:middle;}
.su-table tbody tr:last-child td{border-bottom:none;}
.su-table tbody tr:hover td{background:rgba(255,255,255,0.02);}
.su-table tr.su-row-selected td{background:var(--cyan-dim);}
.su-user-name{font-weight:600;color:var(--white);}
.su-user-email{font-size:11.5px;color:var(--steel);font-family:var(--font-mono);margin-top:2px;}
.su-role-text{color:var(--cyan);font-weight:500;}
.su-2fa-dot{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;}
.su-2fa-dot.on{background:rgba(74,222,128,0.15);color:var(--green);}
.su-2fa-dot.off{background:rgba(140,160,184,0.12);color:#4A6080;}
.su-status-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:8px;}
.su-status-badge.active{background:rgba(74,222,128,0.1);color:var(--green);}
.su-status-badge.invited{background:var(--amber-dim);color:var(--amber);}
.su-status-badge.disabled,.su-status-badge.suspended{background:rgba(248,113,113,0.12);color:#F87171;}
.su-plan-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--cyan-dim);color:var(--cyan);}
.su-seat-track{width:100%;max-width:140px;height:5px;border-radius:3px;background:rgba(140,160,184,0.15);overflow:hidden;margin-top:6px;}
.su-seat-fill{height:100%;border-radius:3px;background:var(--green);}
.su-seat-fill.warn{background:var(--amber);}
.su-seat-fill.full{background:#F87171;}
.su-select-link{color:var(--cyan);font-size:12.5px;font-weight:600;}
.su-row-clickable{cursor:pointer;}
/* Settings > Menu Access toggle switch (pa-*) -- no shared toggle-switch
   component existed anywhere in this file before; the plain checkboxes
   elsewhere (md-audit-toggle/cm-audit-toggle) are deliberately left as
   checkboxes since those are simple show/hide-a-column options, not a
   states-matter on/off control someone will scan a whole table of. */
.pa-toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.pa-toggle input{opacity:0;width:0;height:0;position:absolute;}
.pa-toggle-track{position:absolute;inset:0;background:rgba(140,160,184,0.25);border-radius:22px;cursor:pointer;transition:background .18s;}
.pa-toggle-track::before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--white);transition:transform .18s;}
.pa-toggle input:checked+.pa-toggle-track{background:var(--cyan);}
.pa-toggle input:checked+.pa-toggle-track::before{transform:translateX(16px);}
/* Shown when the roles currently selected in pa-role-select disagree on
   a given toggle (some on, some off) -- an amber dash instead of the
   usual on/off dot, so it reads as "mixed," not as a third real state a
   click could land on directly. */
.pa-toggle.mixed .pa-toggle-track{background:rgba(255,179,64,0.35);}
.pa-toggle.mixed .pa-toggle-track::before{background:var(--amber);left:50%;top:50%;width:12px;height:3px;border-radius:2px;transform:translate(-50%,-50%);}
.su-select-check{color:var(--green);font-size:16px;}
/* Menu Access page table (2026-09-23 second redesign) -- 3 columns
   (Page/Role(s)/Edit): Role(s) is plain text (every role currently
   enabled for that page, comma-separated), Edit opens a Manage-Links
   picker scoped to that one page (see #pa-edit-overlay) rather than
   toggling cells in place. */
.pa-matrix-table{border-collapse:collapse;width:100%;}
.pa-matrix-table th,.pa-matrix-table td{padding:11px 16px;font-size:13px;border-bottom:1px solid var(--border);}
.pa-matrix-table th{color:#4A6080;font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:10px;background:var(--navy-mid);text-align:left;}
.pa-matrix-table td:last-child,.pa-matrix-table th:last-child{text-align:center;width:90px;}
.pa-sticky-col{color:var(--white);font-weight:600;width:230px;}
.pa-edit-btn{width:32px;height:32px;border-radius:8px;background:var(--navy-mid);border:1px solid rgba(0,212,255,0.3);color:var(--cyan);font-size:14px;cursor:pointer;}
.pa-edit-btn:hover{border-color:var(--cyan);}
/* #pa-admin-item-confirm-overlay must render above #pa-admin-item-overlay
   (it opens from that modal's own Done button) -- an id selector, not
   the .xfer-confirm-overlay class alone, since .cm-confirm-overlay's
   z-index:1100 rule sits later in this stylesheet and would otherwise
   win the cascade at equal specificity regardless of class order (the
   same bug already fixed once this way for a different popup). */
#pa-admin-item-confirm-overlay{z-index:2300;}
/* Same fix, same reasoning, for the per-page Edit modal's own Save
   confirm -- it opens on top of #pa-edit-overlay (also 2200). */
#pa-edit-confirm-overlay{z-index:2300;}
/* Manage-Links pickers' scope-filter chips (All / Customer
   Subscriptions / Platform Security) -- filters the Available column
   only, same convention as every other Available/Selected filter in
   this file (search boxes, category dropdown) never touching Selected. */
.pa-scope-chip{padding:7px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--navy-deep);color:var(--steel);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.pa-scope-chip.active{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);}
.pa-scope-tag{margin-left:auto;font-size:10px;color:#4A6080;text-transform:uppercase;letter-spacing:.4px;font-weight:700;}
.su-seat-summary{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 20px;}
.su-seat-summary-num{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--white);}
.su-seat-summary-num span{color:var(--cyan);}
.su-seat-summary-sub{font-size:12px;color:var(--steel);margin-top:2px;}
.su-seat-summary-track{flex:1;min-width:160px;height:8px;border-radius:4px;background:rgba(140,160,184,0.15);overflow:hidden;}
.su-seat-summary-fill{height:100%;border-radius:4px;background:var(--cyan);}
.su-invite-context{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--navy-deep);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:16px;}
.su-invite-context-label{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#4A6080;margin-bottom:3px;}
.su-invite-context-val{font-size:13px;font-weight:600;color:var(--white);}
.su-role-hint{font-size:12px;color:var(--steel);margin-top:6px;line-height:1.5;}
/* Edit company header: company name is the title, with the company ID +
   admin underneath so two same-named companies can't be confused. Both
   parts stay hidden for every other su-* popup (reset in suClose()). */
.su-drawer-eyebrow{font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--steel);margin-bottom:2px;}
.cm-drawer-title.su-drawer-title-company{font-size:21px;line-height:1.2;overflow-wrap:anywhere;}
.su-drawer-ident{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:6px;font-size:12px;color:var(--steel);}
.su-drawer-ident-code{font-family:var(--font-mono);font-size:11.5px;color:var(--cyan);background:var(--cyan-dim);padding:1px 7px;border-radius:5px;}
.su-modal-avatar{width:40px;height:40px;border-radius:50%;background:var(--cyan-dim);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.su-scope{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;}
@media(max-width:600px){.su-scope{grid-template-columns:1fr;}}
.su-scope-btn{display:flex;align-items:center;gap:12px;text-align:left;background:var(--navy-deep);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .15s;}
.su-scope-btn:hover{border-color:rgba(0,212,255,0.4);}
.su-scope-btn.active{border-color:var(--cyan);background:var(--cyan-dim);}
.su-scope-btn i{font-size:18px;color:var(--cyan);width:22px;text-align:center;flex-shrink:0;}
.su-scope-name{font-size:14px;font-weight:700;color:var(--white);}
.su-scope-desc{font-size:12px;color:var(--steel);margin-top:2px;}

.su-pp-allprod{display:flex;align-items:center;gap:12px;background:var(--navy-deep);border:1.5px solid var(--border);border-radius:11px;padding:13px 16px;margin-bottom:12px;cursor:pointer;font-size:13px;color:var(--steel);line-height:1.5;}
.su-pp-allprod:has(input:checked){border-color:var(--cyan);background:var(--cyan-dim);}
.su-pp-allprod b{color:var(--white);}
.su-pp-allprod input{width:18px;height:18px;accent-color:var(--cyan);flex-shrink:0;}
.su-pp-save{font-size:10px;font-weight:700;background:rgba(74,222,128,0.15);color:var(--green);padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:0.4px;}
#su-pp-picker.dim{opacity:0.4;pointer-events:none;}
#su-ctp-picker.dim{opacity:0.4;pointer-events:none;}
.su-pp-toolbar{display:flex;gap:8px;margin-bottom:12px;}
.su-pp-toolbar input{flex:1;box-sizing:border-box;height:36px;font-size:13px;}
.su-pp-btn{box-sizing:border-box;height:36px;padding:0 16px;font-size:13px;font-family:var(--font-body);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.su-pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:280px;overflow-y:auto;padding-right:2px;}
@media(max-width:600px){.su-pp-grid{grid-template-columns:1fr;}}
.su-pp-card{display:flex;align-items:flex-start;gap:10px;background:var(--navy-deep);border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .15s;}
.su-pp-card:hover{border-color:rgba(0,212,255,0.4);}
.su-pp-card.selected{border-color:var(--cyan);background:var(--cyan-dim);}
.su-pp-card input{width:16px;height:16px;flex-shrink:0;margin-top:1px;accent-color:var(--cyan);}
.su-pp-name{font-size:12.5px;font-weight:600;color:var(--white);line-height:1.3;}
.su-pp-code{font-size:11px;color:#4A6080;margin-top:2px;}
.su-pp-count{font-size:11.5px;color:#4A6080;margin-bottom:8px;}
/* Company Products / Troubleshooting content pickers -- collapsed card,
   expands on header click (same idea as Product Explorer's alarm rows). */
.su-acc{border:1px solid var(--border);border-radius:12px;background:var(--navy-deep);margin-top:14px;overflow:hidden;}
.su-acc-head{width:100%;display:flex;align-items:center;gap:11px;padding:14px 16px;background:none;border:0;color:var(--white);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;text-align:left;}
.su-acc-head:hover{background:rgba(0,212,255,0.04);}
/* ">" -- only the card's own header/body, not cards nested inside it
   (Products / Troubleshooting content sit inside Licensing). */
.su-acc.open > .su-acc-head{background:rgba(0,212,255,0.06);}
.su-acc-chev{color:var(--steel);font-size:11px;width:12px;transition:transform .15s;}
.su-acc.open > .su-acc-head .su-acc-chev{transform:rotate(90deg);}
.su-acc-icon{color:var(--cyan);}
.su-acc-title{flex:1;}
.su-acc-badge{font-size:10.5px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--cyan-dim);color:var(--cyan);white-space:nowrap;}
.su-acc-badge.warn{background:rgba(248,113,113,0.15);color:#F87171;}
.su-acc-body{display:none;padding:14px 16px 16px;border-top:1px solid var(--border);}
.su-acc.open > .su-acc-body{display:block;}
/* Licensing card labels (Plan, Seat limit / Total Users, Support, Email
   support, Phone support, Amount, Billing period) -- brighter than the
   shared #4A6080 .form-label, which is hard to read on the dark card. */
#su-lic-acc .form-label{color:#A9BCD3;}
/* Read-only Product Explorer (Expert Partner) -- see adminIsReadOnly() in admin.js. */
.admin-readonly .xp-write{display:none !important;}

.xp-detail-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.xp-detail-icon{width:46px;height:46px;border-radius:12px;background:var(--cyan-dim);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:18px;flex-shrink:0;}
.xp-detail-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--white);}
.xp-detail-desc{font-size:13px;color:var(--steel);margin-top:4px;line-height:1.5;}
.xp-detail-sub{font-size:12px;color:var(--steel);margin-top:3px;}
.xp-lineage-grid{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%;margin-top:4px;}
.xp-lin-cell{flex:1 1 0;display:flex;flex-direction:column;gap:1px;background:var(--navy-deep);border:1px solid var(--border);border-radius:8px;padding:6px 12px;min-width:84px;}
.xp-lin-cell span{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#4A6080;}
.xp-lin-cell b{font-size:12px;color:var(--white);font-weight:600;}
.xp-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--navy-deep);border:1px solid var(--border);border-radius:10px;padding:5px;}
.xp-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:none;border:none;color:var(--steel);cursor:pointer;font-size:13px;font-weight:600;padding:9px;border-radius:7px;font-family:var(--font-body);}
.xp-tab:hover{color:var(--white);}
.xp-tab.active{color:var(--cyan);background:var(--cyan-dim);}
.xp-tab-count{font-size:11px;background:var(--navy-mid);border-radius:8px;padding:1px 7px;}
.xp-entity{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.xp-entity-head{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:var(--navy-mid);cursor:pointer;}
.xp-entity-head:hover{background:rgba(0,212,255,0.04);}
.xp-entity-chevron{color:#4A6080;font-size:12px;transition:transform .2s;margin-top:2px;}
.xp-entity-count{font-size:10px;font-weight:700;color:var(--green);background:rgba(74,222,128,0.1);border-radius:8px;padding:2px 8px;flex-shrink:0;margin-top:2px;}
.xp-entity.open .xp-entity-chevron{transform:rotate(90deg);}
.xp-entity-name{font-size:14px;font-weight:600;color:var(--white);flex:1;min-width:0;}
.xp-entity-short{font-size:12px;font-weight:400;color:var(--steel);margin-top:2px;}
.xp-entity-id{font-family:var(--font-mono);font-size:11px;color:#4A6080;margin-top:2px;flex-shrink:0;}
.xp-entity-category{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--cyan);background:rgba(0,212,255,0.1);border-radius:8px;padding:2px 8px;flex-shrink:0;margin-top:2px;}
.xp-entity-body{display:none;padding:14px 16px;background:var(--navy-deep);border-top:1px solid var(--border);}
.xp-entity.open .xp-entity-body{display:block;}
.xp-entity-long{font-size:12.5px;color:var(--steel);line-height:1.6;background:var(--navy-mid);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px;white-space:pre-wrap;}
.xp-entity-long-label{display:block;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4A6080;margin-bottom:5px;}
.xp-entity-actions{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
/* Flat rows inside a shared bordered/rounded container (.xp-cc-list, or
   the .xp-entity-body wrapper at Related Content's own product-level
   tab) -- like Manage Content's .cm-row list -- rather than each card
   boxed off individually with a margin gap between them. */
.xp-cc-list{background:var(--navy-mid);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.xp-content-card{padding:12px 14px;border-bottom:1px solid rgba(140,160,184,0.06);}
.xp-cc-list .xp-content-card:last-child,.xp-entity-body .xp-content-card:last-child{border-bottom:none;}
.xp-cc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.xp-cc-title{font-size:13px;font-weight:600;color:var(--white);flex:1;min-width:0;}
.xp-cc-type{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;flex-shrink:0;}
.xp-cc-type.troubleshoot{background:rgba(0,212,255,0.1);color:var(--cyan);}
.xp-cc-type.flowchart{background:rgba(255,179,64,0.1);color:var(--amber);}
.xp-cc-type.video{background:rgba(248,113,113,0.1);color:#F87171;}
.xp-cc-type.image{background:rgba(74,222,128,0.1);color:var(--green);}
.xp-cc-id{font-family:var(--font-mono);font-size:10px;color:#4A6080;flex-shrink:0;}
/* display:flow-root establishes a block formatting context so a
   float:left/right image inside migrated Notes content (e.g. Word-export
   articles authored with wrap-text-around-image layout) is always
   contained within this card, in both clamped and expanded state.
   Without it, .clamped.expanded's overflow:visible (below) let a floated
   image taller than its surrounding text bleed past this card's bottom
   edge and overlap the next content card in the list -- overflow:hidden
   on the plain .clamped state was accidentally clearing the float, but
   that containment was never the point of that rule and vanished the
   moment a note was expanded. */
.xp-cc-preview{font-size:12px;color:var(--steel);line-height:1.6;display:flow-root;}
.xp-cc-preview img{max-width:100%;height:auto;border-radius:6px;margin:6px 0;}
/* Fully hidden by default (not a partial-text peek) -- expand in place
   via xpToggleClamp(), no navigation to a separate page. Matches
   .clamped-flow below exactly, and matches this card's own title-only
   state before Show More was ever clicked (xpResolveEntityContentCard/
   xpResolveContentCard's empty body='') -- collapsing back via Show
   Less must land on that same "nothing shown" look, not fall back to
   an older 120px teaser-preview design that predates it. Previously
   max-height:120px with a fade-out gradient (::after); dropped both --
   there's nothing to fade when nothing is shown. */
.xp-cc-preview.clamped{max-height:0;overflow:hidden;}
.xp-cc-preview.clamped.expanded{max-height:none;overflow:visible;}
/* Related Content's flowchart cards: the diagram markup is already in the
   DOM (full svg_content has already been fetched by this point) but stays
   fully hidden until Show More is clicked. Same xpToggleClamp() handler
   as .clamped, deliberately a different class so xpFixClampButtons()
   (which only targets .clamped) never hides this button -- a flowchart
   always has something worth expanding. */
.xp-cc-preview.clamped-flow{max-height:0;overflow:hidden;}
.xp-cc-preview.clamped-flow.expanded{max-height:none;overflow:visible;}
.xp-cc-expand-btn{display:inline-block;flex-shrink:0;background:none;border:1px solid var(--border);color:var(--cyan);cursor:pointer;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:14px;font-family:var(--font-body);}
.xp-cc-expand-btn:hover{background:rgba(0,212,255,0.08);}
.xp-cc-media{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--steel);background:var(--navy-deep);border-radius:8px;padding:10px 12px;}
.xp-cc-media i{font-size:18px;}
/* Drag-and-drop feedback for the Image/Video URL field's drop zone
   (contentDropZoneAttrs() in admin.js) -- toggled on/off on dragover/
   dragleave/drop, purely visual. */
.content-drop-active{outline:2px dashed var(--cyan);outline-offset:2px;border-radius:8px;}
.xp-cc-flow-wrap{position:relative;}
.xp-cc-flow-svg{background:#fff;border-radius:8px;padding:8px;overflow:auto;}
.xp-cc-flow-svg svg{max-width:100%;height:auto;display:block;margin:0 auto;}
/* Master Data's content preview drawer (#pw-preview-body) has nothing
   below the diagram competing for room, unlike the create/edit flow
   builder that also uses .xp-cc-flow-svg -- so here it should fill
   whatever vertical space the drawer actually has, not stop at the
   fixed max-height passed in by flowPreviewHtml(). !important beats
   that inline style; flex:1 makes it grow to fill #pw-preview-body. */
#pw-preview-body{display:flex;flex-direction:column;}
#pw-preview-body .xp-cc-flow-wrap{flex:1;display:flex;flex-direction:column;min-height:0;}
#pw-preview-body .xp-cc-flow-svg{flex:1;min-height:0;max-height:none!important;}
.flow-fullscreen-btn{position:absolute;top:14px;right:14px;z-index:10;background:var(--navy-mid);border:1px solid var(--border);color:var(--white);border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;}
.flow-fullscreen-btn:hover{background:var(--cyan-dim);color:var(--cyan);}
/* Fullscreen diagram viewer is appended straight to <body> (not left
   nested inside .cm-overlay's backdrop-filter) -- backdrop-filter creates
   a containing block for position:fixed descendants, which trapped an
   in-place fixed diagram inside the drawer's own stacking context and
   let the backdrop wash over it instead of covering the whole viewport. */
.flow-fullscreen-backdrop{position:fixed;inset:0;z-index:5000;background:rgba(4,12,24,0.92);display:flex;align-items:center;justify-content:center;padding:40px;}
.flow-fullscreen-box{position:relative;background:#fff;border-radius:10px;padding:16px;max-width:100%;max-height:100%;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.flow-fullscreen-box svg{max-width:100%;height:auto;display:block;margin:0 auto;}
.flow-fullscreen-close{position:fixed;top:24px;right:24px;z-index:5001;}
.xp-cc-flow{font-family:var(--font-mono);font-size:11px;white-space:pre-wrap;color:var(--steel);}
.xp-cc-bottom{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
.xp-cc-edit{background:var(--cyan-dim);border:1px solid rgba(0,212,255,0.3);color:var(--cyan);border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);display:inline-flex;align-items:center;gap:5px;}
.xp-cc-edit:hover{background:rgba(0,212,255,0.2);}
.xp-cc-del{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:#F87171;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);display:inline-flex;align-items:center;gap:5px;}
.xp-cc-del:hover{background:rgba(248,113,113,0.2);}

/* Content editor / add modals */
.xp-modal-overlay{display:none;position:fixed;inset:0;background:rgba(5,7,13,0.75);z-index:2000;align-items:center;justify-content:center;padding:32px;}
.xp-modal-overlay.open{display:flex;}
.xp-modal{background:var(--navy-mid);border:1px solid var(--border);border-radius:18px;width:min(880px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.xp-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--border);}
.xp-modal-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--white);}
.xp-modal-body{flex:1;overflow-y:auto;padding:22px 24px;}
.xp-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-wrap:wrap;}
/* Rich text editor -- full-featured version ported from the reference
   mockup (drmachines-Aug-2-2026.html): style/size dropdowns, colour
   pickers, alignment/list/indent, link/image/video/table insertion,
   drag-drop + paste image upload with inline resize/align, undo/redo.
   Replaces the old 4-button .xp-big-rte/.xp-rte-toolbar editor
   (Product Explorer's xp-f-rte and Manage Content's cm-edit-body both
   now use this). */
.rte-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--navy-deep);}
.rte-wrap:focus-within{border-color:var(--cyan);}
.rte-bar{display:flex;flex-wrap:wrap;gap:3px;padding:7px 8px;background:var(--navy-mid);border-bottom:1px solid var(--border);align-items:center;}
.rte-btn{min-width:30px;height:30px;padding:0 7px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--steel);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);}
.rte-btn:hover{background:var(--navy-deep);color:var(--white);border-color:var(--border);}
.rte-btn.on{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(0,212,255,0.35);}
.rte-sep{width:1px;height:20px;background:var(--border);margin:0 4px;}
.rte-sel{height:30px;background:var(--navy-deep);border:1px solid var(--border);border-radius:6px;color:var(--white);font-size:12px;padding:0 6px;cursor:pointer;font-family:var(--font-body);}
.rte-sel:focus{outline:none;border-color:var(--cyan);}
.rte-colour{width:30px;height:30px;padding:2px;background:var(--navy-deep);border:1px solid var(--border);border-radius:6px;cursor:pointer;}
.rte-area{min-height:260px;max-height:48vh;overflow-y:auto;padding:16px;color:var(--white);font-size:14px;line-height:1.7;outline:none;transition:background .15s,box-shadow .15s;position:relative;}
.rte-area.drag{background:rgba(0,212,255,0.07);box-shadow:inset 0 0 0 2px var(--cyan);}
.rte-hint{display:flex;align-items:center;gap:7px;padding:7px 12px;border-top:1px dashed var(--border);background:var(--navy-mid);font-size:11px;color:#4A6080;}
.rte-hint i{color:var(--cyan);}
.rte-area img{cursor:pointer;max-width:100%;border-radius:8px;margin:8px 0;}
.rte-area img.rte-img-sel{outline:2px solid var(--cyan);outline-offset:2px;}
.rte-resizer{position:absolute;width:14px;height:14px;background:var(--cyan);border:2px solid var(--navy);border-radius:3px;cursor:nwse-resize;z-index:5;}
.rte-imgbar{position:absolute;display:flex;align-items:center;gap:2px;background:var(--navy-mid);border:1px solid var(--cyan);border-radius:8px;padding:4px 6px;z-index:6;box-shadow:0 6px 20px rgba(0,0,0,0.4);}
.rte-imgbar button{background:transparent;border:none;color:var(--steel);font-size:11px;font-weight:600;padding:4px 7px;border-radius:5px;cursor:pointer;font-family:var(--font-body);}
.rte-imgbar button:hover{background:var(--cyan-dim);color:var(--cyan);}
.rte-imgbar-sep{width:1px;height:16px;background:var(--border);margin:0 3px;}
.rte-area:empty::before{content:attr(data-placeholder);color:#4A6080;}
.rte-area h1{font-size:22px;margin:0 0 12px;color:var(--white);}
.rte-area h2{font-size:19px;margin:14px 0 10px;color:var(--white);}
.rte-area h3{font-size:16px;margin:12px 0 8px;color:var(--white);}
.rte-area p{margin:0 0 10px;}
.rte-area ul,.rte-area ol{margin:0 0 10px;padding-left:24px;}
.rte-area li{margin-bottom:4px;}
.rte-area a{color:var(--cyan);text-decoration:underline;}
.rte-area blockquote{border-left:3px solid var(--cyan);margin:10px 0;padding:4px 0 4px 14px;color:var(--steel);}
.rte-area pre{background:var(--navy-mid);border:1px solid var(--border);border-radius:8px;padding:12px;font-family:var(--font-mono);font-size:13px;overflow-x:auto;}
.rte-area hr{border:none;border-top:1px solid var(--border);margin:16px 0;}
.rte-area table{border-collapse:collapse;width:100%;margin:12px 0;}
.rte-area table td,.rte-area table th{border:1px solid var(--border);padding:8px 10px;font-size:13.5px;}
.rte-area table th{background:var(--navy-mid);font-weight:700;text-align:left;}
.rte-area iframe{max-width:100%;border-radius:8px;margin:8px 0;border:1px solid var(--border);}

/* Master Data (md-*) + shared drawer (cm-*) */
.md-row{display:grid;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid rgba(140,160,184,0.06);font-size:13px;color:var(--white);}
/* Each row is its own independent grid, sized by its own content's
   min-width (the default for grid items) -- without this, a row with a
   long product name computes wider column tracks than every other row,
   so columns visibly stop lining up with the header and with each
   other. Clamping every cell to its column's width and truncating with
   an ellipsis (full value still available via title=) keeps every
   row's grid identically sized regardless of content length. */
.md-row>*{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/* Edit is first, then ID through Part No. keep their original pre-audit-
   column fr proportions exactly -- Created On/By/Modified On/Status are
   appended after Part No. with their own fixed px widths, not stealing
   space from Name/Description/Make. Since this is one grid row, there's
   no "frozen" left side -- min-width plus #md-table{overflow-x:auto;}
   makes the WHOLE row scroll together once the viewport can't fit all
   14 columns at a readable size, rather than force-compressing them
   (the previous bug: #md-table's overflow:hidden had no scroll
   fallback, so text got squeezed until it overlapped/clipped). On most
   desktop widths this row fits without ever needing to scroll. */
.md-row.md-products{grid-template-columns:70px 70px 100px 115px 130px 115px 315px 1.3fr 0.7fr 0.9fr 170px 210px 170px 90px;min-width:1970px;}
/* Edit..Name (first 7 columns) frozen in place; Description onward still
   scrolls horizontally with the row. Each frozen cell needs its own opaque
   background (its natural grid-cell background is transparent, so without
   this the scrolled-away Description/Country/etc. text would show through
   underneath it) and a left offset equal to the summed width of every
   frozen column before it (70, 70, 100, 115, 130, 115 -- see
   MD_PRODUCTS_COLS_FULL/COMPACT's comment for why these are fixed px, not
   fr). Body cells get navy-mid (this table's row background); the hover
   tint (.md-row:not(.md-head):hover) is layered back in as a gradient so
   hovering a row still visibly highlights its frozen cells, not just the
   scrollable ones behind them. Header cells reuse navy-deep (the header's
   own background) and sit above both the row's own sticky-top header
   (z-index raised to 3 so it isn't hidden under a scrolled body row's
   frozen cells) and the body's frozen cells (z-index 2). */
.md-row.md-products>*:nth-child(-n+7){position:sticky;z-index:2;background:var(--navy-mid);}
.md-row.md-products:not(.md-head):hover>*:nth-child(-n+7){background:linear-gradient(rgba(0,212,255,0.03),rgba(0,212,255,0.03)),var(--navy-mid);}
.md-row.md-products.md-head{z-index:3;}
.md-row.md-products.md-head>*:nth-child(-n+7){background:var(--navy-deep);}
.md-row.md-products>*:nth-child(1){left:0;}
.md-row.md-products>*:nth-child(2){left:70px;}
.md-row.md-products>*:nth-child(3){left:140px;}
.md-row.md-products>*:nth-child(4){left:240px;}
.md-row.md-products>*:nth-child(5){left:355px;}
.md-row.md-products>*:nth-child(6){left:485px;}
.md-row.md-products>*:nth-child(7){left:600px;}
/* Bounded height + overflow:auto (both axes), not just overflow-x --
   without a height cap, #md-table grows to fit every row (e.g. all 61
   products), which pushes its own horizontal scrollbar down below the
   last row -- reachable only after scrolling the whole page past the
   entire table first. Capping the height keeps the header/search bar
   above it fixed on screen and makes both scrollbars immediately
   visible/usable right where the table is, same "bounded box, own
   internal scroll" pattern already used for .xp-modal-body/
   .cm-drawer-body/.xfer-col elsewhere in this file. */
#md-table{overflow:auto;max-height:calc(100vh - 340px);scrollbar-width:thin;scrollbar-color:rgba(0,212,255,0.25) transparent;}
/* Same thin cyan scrollbar as Product Explorer's .xp-product-list. */
#md-table::-webkit-scrollbar{width:6px;height:6px;}
#md-table::-webkit-scrollbar-track{background:transparent;}
#md-table::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.25);border-radius:3px;}
.md-status-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:8px;}
.md-status-badge.draft{background:var(--amber-dim);color:var(--amber);}
.md-status-badge.published{background:rgba(74,222,128,0.1);color:var(--green);}
.md-row.md-components{grid-template-columns:90px 1.3fr 1fr 1fr 1fr 70px;}
.md-row.md-models{grid-template-columns:90px 1.2fr 1.2fr 1fr 1fr 70px;}
.md-row.md-submodels{grid-template-columns:90px 1.2fr 1fr 1fr 1fr 70px;}
.md-row.md-makes{grid-template-columns:90px 1.4fr 1fr 1fr 1fr 70px;}
.md-row.md-problem-categories{grid-template-columns:90px 1fr 2.2fr 70px;}
.md-row:last-child{border-bottom:none;}
/* Sticky, not just styled -- #md-table is now its own bounded, internally-
   scrolling box (see its own comment above), so without this the column
   labels would scroll out of view along with row 1 the moment you scroll
   past it, leaving every column unlabeled for the rest of the list. */
.md-row.md-head{position:sticky;top:0;z-index:1;background:var(--navy-deep);color:#4A6080;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.md-row:not(.md-head):hover{background:rgba(0,212,255,0.03);}
.md-row .mono{font-family:var(--font-mono);font-size:12px;color:#4A6080;}
.md-link{color:var(--cyan);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;margin:-4px -8px;border-radius:6px;transition:background .2s;}
.md-link:hover{background:var(--cyan-dim);}
.md-link i{font-size:10px;opacity:0.7;}
.md-lineage-box{background:var(--navy-deep);border:1px solid rgba(0,212,255,0.2);border-radius:10px;padding:12px 14px;margin:0 0 16px;}
.md-lineage-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);margin-bottom:8px;}
.md-lineage-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;}
.md-lineage-label{color:var(--steel);}
.md-lineage-val{color:var(--white);font-weight:600;text-align:right;}
.md-chain-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--steel);background:var(--cyan-dim);border:1px solid rgba(0,212,255,0.2);border-radius:8px;padding:10px 12px;margin-bottom:16px;line-height:1.4;}
/* Copy symptoms/alarms from another product (new products only) */
.md-copy-section{margin-top:8px;padding:16px;border:1px dashed rgba(0,212,255,0.3);border-radius:10px;background:rgba(0,212,255,0.03);}
.md-copy-head{font-size:13px;font-weight:700;color:var(--white);display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.md-copy-hint{font-size:12px;color:var(--steel);margin:0 0 12px;line-height:1.5;}
.md-copy-preview-inner{margin-top:12px;}
.md-copy-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--steel);background:var(--navy-deep);border:1px solid var(--border);border-radius:8px;padding:9px 12px;margin-bottom:12px;cursor:pointer;}
.md-copy-group-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4A6080;margin:12px 0 6px;}
.md-copy-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--navy-deep);border:1px solid var(--border);border-radius:7px;margin-bottom:5px;cursor:pointer;}
.md-copy-item:hover{border-color:var(--border-hover);}
.md-copy-name{font-size:12px;color:var(--white);display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.md-copy-id{font-family:var(--font-mono);font-size:10px;color:#4A6080;}
.md-copy-con{font-size:10px;color:var(--green);background:rgba(74,222,128,0.1);border-radius:8px;padding:1px 7px;}
.md-copy-empty{font-size:12px;color:#4A6080;padding:4px 0;}
@media(max-width:760px){
  .md-row.md-makes,.md-row.md-components,.md-row.md-models,.md-row.md-submodels,.md-row.md-problem-categories{grid-template-columns:60px 1fr 70px;min-width:0;}
  .md-row.md-makes span:nth-child(n+3):nth-last-child(n+2),
  .md-row.md-problem-categories span:nth-child(n+3):nth-last-child(n+2){display:none;}
  /* Components/Models/Submodels' visible 3 columns are ID, Name, and
     Edit -- but unlike Makes/Problem Categories above, Name no longer
     sits at column 2 on desktop: each tab's lineage (Make, then
     Component, then Model) was inserted before Name so the table reads
     in hierarchy order, pushing Name to column 3/4/5 respectively
     (ID,Make,Name,...  / ID,Make,Component,Name,...  /
     ID,Make,Component,Model,Name,...). Hidden items don't occupy a grid
     track, so keeping this 3-column template and just changing which
     column stays visible alongside ID (col 1) and Edit (last) still
     lays out correctly. */
  .md-row.md-components span:nth-child(n+2):not(:nth-child(3)):not(:last-child){display:none;}
  .md-row.md-models span:nth-child(n+2):not(:nth-child(4)):not(:last-child){display:none;}
  .md-row.md-submodels span:nth-child(n+2):not(:nth-child(5)):not(:last-child){display:none;}
  /* Products' visible 3 columns are Edit, ID, and Name -- unlike the
     other tabs above (whose visible 3 are "first 2 + last 1"), Name now
     sits at column 7 (Edit,ID,Make,Component,Model,Submodel,Name,
     Description,...), not column 3, since the desktop column order
     changed 2026-08-24 (Name moved after Submodel) and again 2026-08-25
     (Description moved from column 3 to right after Name, pushing Name
     from column 8 back to column 7). Hidden items don't occupy a grid
     track, so keeping this 3-column template and just changing which
     columns stay visible (1, 2, and 7) still lays out correctly. */
  .md-row.md-products{grid-template-columns:70px 60px 1fr;min-width:0;}
  .md-row.md-products span:nth-child(n+3):not(:nth-child(7)){display:none;}
}

.cm-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(4,12,24,0.6);backdrop-filter:blur(2px);}
.cm-overlay.open{display:block;}
/* Visual flowchart editor -- full-viewport, embeds draw.io. Both this
   and .xfer-overlay below must render above the cm-drawer they were
   opened from (the flowchart field / "Manage product links" button
   live inside Edit alarm/symptom or the content editor, both cm-drawer
   dialogs at z-index 1000), hence 2200. */
.cm-draw-overlay{z-index:2200;}
.cm-draw-modal{position:absolute;inset:24px;background:var(--navy);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.cm-draw-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--white);flex-shrink:0;}
.cm-draw-frame{flex:1;width:100%;border:none;background:#fff;}
.cm-drawer{position:absolute;top:0;right:0;height:100%;width:min(560px,100%);background:var(--navy);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:cmSlideIn .22s ease;box-shadow:-20px 0 60px rgba(0,0,0,0.4);}
/* Notes/Flowchart need much more room to author and review than a
   short video/image caption does. */
.cm-drawer.wide{width:min(1040px,100%);}
.cm-drawer.wide .rte-area{min-height:420px;max-height:55vh;overflow-y:auto;font-size:15px;}
.cm-drawer.wide #cm-flow{min-height:420px;font-size:13px;line-height:1.7;}
@media(max-width:1100px){.cm-drawer.wide{width:100%;}}
@keyframes cmSlideIn{from{transform:translateX(40px);opacity:0.4;}to{transform:translateX(0);opacity:1;}}
.cm-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--border);flex-shrink:0;}
.cm-drawer-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--white);}
.cm-drawer-body{flex:1;overflow-y:auto;padding:22px 24px;}
.cm-drawer-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;background:var(--navy-deep);}
/* A validation note (#xp-add-note/#xp-modal-note) sitting in this footer
   alongside Cancel/Save was being squeezed into a narrow column next to
   the buttons instead of wrapping cleanly -- flex-basis:100% forces it
   onto its own full-width line above the buttons whenever it has text;
   an empty note (the normal case) still collapses to zero height, so
   this is invisible until there's actually something to show. */
.cm-drawer-foot #xp-add-note,.cm-drawer-foot #xp-modal-note{flex:1 1 100%;}
@media(max-width:600px){.cm-drawer{width:100%;}}

/* Manage Content (cm-*) -- flat content table, edit-by-type bar, link
   picker. .cm-overlay/.cm-drawer/.cm-drawer-head/.cm-drawer-title/
   .cm-drawer-body/.cm-drawer-foot already exist above (shared with
   Master Data's own drawer) -- not redeclared here. */
.cm-type-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--navy-deep);border:1px dashed rgba(0,212,255,0.25);border-radius:10px;padding:6px 8px;}
.cm-type-bar-label{font-size:12px;font-weight:700;color:var(--steel);margin-right:4px;padding-left:4px;white-space:nowrap;}

.cm-row{display:grid;grid-template-columns:1fr 110px 130px 80px 110px 130px 110px 70px;gap:12px;align-items:center;padding:13px 20px;border-bottom:1px solid rgba(140,160,184,0.06);cursor:pointer;transition:background .15s;}
.cm-row:last-child{border-bottom:none;}
.cm-row:hover{background:rgba(0,212,255,0.04);}
/* Sticky, not just styled -- see the matching #cm-results > .admin-card
   comment below for why (same "bounded box, own internal scroll" fix as
   #md-table/.md-row.md-head; without this the column labels would
   scroll out of view along with row 1). */
.cm-row-head{position:sticky;top:0;z-index:1;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#4A6080;cursor:default;background:var(--navy-deep);}
.cm-row-head:hover{background:var(--navy-deep);}
/* Manage Content's list (cmRenderContent/cmRenderByType) builds its own
   .admin-card wrapper directly inside #cm-results, unlike Master Data's
   static #md-table wrapper -- scoped here by parent id instead of a
   dedicated class so no JS template needs to change. Same bounded-
   height + internal-scroll fix as #md-table (see its own comment):
   without a height cap this list grows to fit every one of its 115+
   rows, pushing its horizontal/vertical scrollbars below the last row
   -- reachable only after scrolling the whole page past the entire
   list first. Same thin cyan scrollbar as Product Explorer's
   .xp-product-list / Master Data's #md-table, for visual consistency. */
#cm-results > .admin-card{max-height:calc(100vh - 340px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,212,255,0.25) transparent;}
#cm-results > .admin-card::-webkit-scrollbar{width:6px;height:6px;}
#cm-results > .admin-card::-webkit-scrollbar-track{background:transparent;}
#cm-results > .admin-card::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.25);border-radius:3px;}
.cm-row-top{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.cm-row-title{font-size:14px;font-weight:600;color:var(--white);margin-bottom:2px;}
.cm-row-id{font-family:var(--font-mono);font-size:10px;color:#4A6080;}
.cm-prod-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-dim);border-radius:5px;padding:2px 8px;width:fit-content;}
.cm-prod-badge.single{color:var(--steel);background:rgba(140,160,184,0.1);}

/* Clickable, sortable column header cell -- shared by Manage Content
   (cmSortHeaderCell) and Master Data/Products (mdSortHeaderCell). Only
   adds cursor/hover/active color -- font-size/weight/uppercase/color
   are inherited from .cm-row-head/.md-row.md-head so a sortable header
   looks identical to a plain one until interacted with. Down arrow is
   the resting look for every column (clicked or not); only the active
   column's arrow flips to up when sorted descending -- see
   cmSortHeaderCell's comment for the full direction convention.
   width:100%+height:100% -- the clickable area fills its entire grid
   column/cell, not just a tight box around the text, so clicking
   anywhere in a narrow column's header (not only exactly on the label)
   still registers -- narrower columns (Type/Products/Updated at
   90-130px) would otherwise have a much smaller hit target than the
   wide Content/Name column, which could look like "only one column
   responds to clicks". */
.sort-th{cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;width:100%;height:100%;transition:color .15s;}
.sort-th:hover{color:var(--white);}
.sort-th.active{color:var(--cyan);}
.sort-th i{font-size:8px;opacity:.6;}
.sort-th.active i{opacity:1;}

.cm-warn-banner{display:flex;gap:12px;align-items:flex-start;background:var(--amber-dim);border:1px solid rgba(255,179,64,0.3);border-radius:10px;padding:13px 16px;margin-bottom:20px;font-size:13px;color:var(--steel);line-height:1.5;}
.cm-warn-banner i{color:var(--amber);font-size:16px;margin-top:1px;}
.cm-warn-banner strong{color:var(--amber);}

.cm-link-section{border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:16px;background:var(--navy-mid);}
.cm-link-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--white);margin-bottom:12px;}
.cm-link-count{font-size:11px;font-weight:700;color:var(--cyan);background:var(--cyan-dim);border-radius:10px;padding:1px 9px;min-width:22px;text-align:center;}
.cm-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.cm-chip{display:inline-flex;align-items:center;gap:6px;background:var(--navy-deep);border:1px solid var(--border);border-radius:6px;padding:5px 8px 5px 10px;font-size:12px;color:var(--white);}
.cm-chip button{background:none;border:none;color:#4A6080;cursor:pointer;padding:2px 4px;border-radius:4px;font-size:11px;}
.cm-chip button:hover{color:#F87171;background:rgba(248,113,113,0.12);}
.cm-add-link{display:flex;gap:8px;}
.cm-link-hint{font-size:11px;color:#4A6080;margin:10px 0 0;line-height:1.5;}
/* Read-only link summary chips -- still used by cmRenderLinkSummary()/
   xpLinkProductsRenderChips() to display current selections; actual
   picking now happens in the xfer-* transfer-list modal below, not
   here (that's why there's no .ms-chip button/remove-icon variant any
   more, and no .ms-select/.ms-control/.ms-menu/.ms-opt dropdown --
   those were the old inline-dropdown picker, fully replaced). */
.ms-chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
.ms-placeholder{color:#4A6080;font-size:14px;padding:4px 0;}
.ms-chip{display:inline-flex;align-items:center;gap:6px;background:var(--cyan-dim);border:1px solid rgba(0,212,255,0.3);color:var(--cyan);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600;}

/* Link-picker trigger button + read-only summary chips -- replaces the
   old inline dropdown (.ms-select) everywhere a "link to multiple
   products/symptoms/alarms" picker exists. Actual selecting/deselecting
   now happens in the xfer-* transfer-list modal below. */
.link-picker-btn{display:inline-flex;align-items:center;gap:7px;background:var(--navy-deep);border:1px solid var(--border);color:var(--steel);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.link-picker-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.link-summary{display:flex;flex-wrap:wrap;gap:6px;min-height:32px;align-items:center;}
.link-summary .ms-placeholder{color:#4A6080;font-size:13px;}

/* Product Wizard's "Use existing notes/flow charts" search dropdown --
   deliberately a lighter, inline search-and-check widget scoped to this
   one wizard section, not the app-wide xfer-* transfer-list modal used
   for entity/product linking elsewhere. The reference mockup calls for
   an inline dropdown here specifically, and this list is usually short
   enough (existing notes/flow charts, not products/alarms/symptoms)
   that a full modal would be overkill. */
.pw-existing-toggle{display:flex;align-items:center;margin:4px 0 16px;}
.pw-existing-toggle>.btn-outline{margin-left:auto;}
.pw-existing-toggle-label{font-size:13px;color:var(--steel);}
.pw-existing-toggle-label a{color:var(--cyan);text-decoration:none;font-weight:600;}
.pw-existing-input-wrap{position:relative;}
.pw-existing-input-wrap .form-input{padding-right:38px;}
.pw-existing-chevron{position:absolute;top:0;right:0;height:100%;width:38px;background:none;border:none;color:#4A6080;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
.pw-existing-chevron:hover{color:var(--cyan);}
.pw-existing-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--navy);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,0.4);z-index:30;max-height:260px;overflow-y:auto;padding:6px;}
.pw-existing-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--white);}
.pw-existing-item:hover{background:rgba(0,212,255,0.06);}
.pw-existing-item input[type=checkbox]{accent-color:var(--cyan);width:15px;height:15px;flex-shrink:0;}
#pw-entity-content-list{max-height:280px;overflow-y:auto;padding-right:4px;margin-top:4px;}
.pw-existing-meta{margin-left:auto;font-size:11px;color:#4A6080;font-family:var(--font-mono);white-space:nowrap;}
.pw-shared-tag{color:var(--amber);font-size:11px;font-weight:600;margin-left:6px;}
/* "Added so far" now scrolls in its own fixed-height box instead of
   growing the whole page indefinitely (real products can have 20+
   linked notes -- see Master Data enhancement request). */
.pw-added-list{max-height:280px;overflow-y:auto;padding-right:4px;}

/* Transfer-list picker: a large modal with Available/Selected columns
   and drag-and-drop between them, optionally tabbed across several
   entity types (Product/Symptom/Alarm). Shared by Manage Content's
   "Link this content to" and Product Explorer's "Link to products". */
.xfer-overlay{z-index:2200;}
.xfer-modal{position:absolute;inset:36px 56px;background:var(--navy);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.xfer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.xfer-head-titlewrap{display:flex;flex-direction:column;gap:3px;min-width:0;}
.xfer-head-title{font-size:15px;font-weight:700;color:var(--white);}
.xfer-head-subtitle{font-size:12px;color:var(--steel);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xfer-tabs{display:flex;gap:8px;}
.xfer-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;border:1.5px solid var(--border);background:var(--navy-deep);color:var(--steel);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.xfer-tab.active{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);}
.xfer-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(140,160,184,0.18);color:var(--steel);font-size:11px;font-weight:700;}
.xfer-tab.active .xfer-tab-count{background:var(--cyan);color:var(--navy-deep);}
.xfer-search-row{padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
.xfer-search-row input{width:100%;background:var(--navy-deep);border:1px solid var(--border);border-radius:9px;padding:10px 14px;color:var(--white);font-size:13.5px;font-family:var(--font-body);}
.xfer-search-row input:focus{outline:none;border-color:var(--cyan);}
/* Per-column variant -- Available/Selected each filter independently
   now instead of sharing one search box above both (a shared box made
   "search narrows Available" and "search narrows Selected" look like
   the same action when they're not -- typing to find something to add
   also hid everything already-selected that didn't match). Tighter
   padding than .xfer-search-row since this sits inside a narrower
   column, not the full modal width. */
.xfer-col-search{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.xfer-col-search input{width:100%;background:var(--navy);border:1px solid var(--border);border-radius:7px;padding:7px 11px;color:var(--white);font-size:12.5px;font-family:var(--font-body);}
.xfer-col-search input:focus{outline:none;border-color:var(--cyan);}
.xfer-body{flex:1;display:flex;align-items:stretch;gap:16px;padding:16px 20px;overflow:hidden;min-height:0;}
.xfer-col{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--navy-deep);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.xfer-col-head{padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4A6080;border-bottom:1px solid var(--border);background:var(--navy-mid);display:flex;justify-content:space-between;flex-shrink:0;}
.xfer-list{flex:1;overflow-y:auto;padding:6px;min-height:0;}
.xfer-list.drag-over{background:rgba(0,212,255,.07);box-shadow:inset 0 0 0 2px var(--cyan);}
/* Group header for Alarm/Symptom's per-product grouping (xferListHtml)
   -- sticky so the product a long list of alarms belongs to stays
   visible while scrolling through them, matching .xfer-col-head's look
   (same uppercase/muted style) but smaller, since it's a sub-heading
   nested inside the list rather than the column's own header. */
.xfer-group-head{position:sticky;top:-6px;margin:0 -6px;padding:7px 12px;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#4A6080;background:var(--navy-mid);border-bottom:1px solid var(--border);z-index:1;}
.xfer-group-head:first-child{margin-top:-6px;}
.xfer-item{padding:9px 12px;border-radius:7px;font-size:13px;color:var(--white);cursor:grab;display:flex;align-items:center;gap:9px;margin-bottom:2px;user-select:none;}
.xfer-item:hover{background:var(--navy-mid);}
.xfer-item:active{cursor:grabbing;}
.xfer-item i.fa-grip-vertical{color:#4A6080;font-size:11px;flex-shrink:0;}
.xfer-item input[type=checkbox]{flex-shrink:0;width:15px;height:15px;accent-color:var(--cyan);cursor:pointer;}
.xfer-item.dragging{opacity:.35;}
.xfer-arrows{display:flex;flex-direction:column;justify-content:center;gap:10px;flex-shrink:0;}
.xfer-arrow-btn{position:relative;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--navy-deep);color:var(--steel);cursor:pointer;font-size:14px;}
.xfer-arrow-btn:hover{color:var(--cyan);border-color:var(--cyan);}
.xfer-arrow-count{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--cyan);color:var(--navy-deep);font-size:10px;font-weight:700;line-height:16px;display:none;}
.xfer-arrow-count.show{display:inline-block;}
.xfer-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;}
.xfer-empty{padding:30px;text-align:center;color:#4A6080;font-size:12.5px;}
@media(max-width:820px){ .xfer-modal{inset:16px;} .xfer-body{flex-direction:column;} .xfer-arrows{flex-direction:row;justify-content:center;} }

/* Change-summary confirmation shown before Done actually applies
   anything -- see xferConfirm()/xferComputeDiff() in admin.js. Must
   outrank .xfer-overlay's z-index (2200) since it opens on top of it. */
.xfer-confirm-overlay{z-index:2300;}
.xfer-confirm-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--navy);border:1px solid var(--border);border-radius:14px;width:min(560px,calc(100% - 40px));max-height:min(600px,calc(100% - 40px));display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.xfer-confirm-head{display:flex;gap:14px;align-items:flex-start;padding:22px 24px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}
.xfer-confirm-head i{color:var(--amber);font-size:19px;flex-shrink:0;margin-top:2px;}
.xfer-confirm-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--white);}
.xfer-confirm-sub{font-size:12.5px;color:var(--steel);margin-top:4px;}
.xfer-confirm-body{flex:1;overflow-y:auto;padding:18px 24px;min-height:0;}
.xfer-confirm-group{margin-bottom:16px;}
.xfer-confirm-group:last-child{margin-bottom:0;}
.xfer-confirm-group-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4A6080;margin-bottom:8px;}
.xfer-confirm-line{display:flex;gap:10px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.5;margin-bottom:6px;}
.xfer-confirm-line:last-child{margin-bottom:0;}
.xfer-confirm-line i{flex-shrink:0;margin-top:3px;font-size:11px;}
.xfer-confirm-line span{color:var(--white);}
.xfer-confirm-line b{color:inherit;}
.xfer-confirm-added{background:rgba(52,211,153,.08);}
.xfer-confirm-added i{color:#34D399;}
.xfer-confirm-added b{color:#34D399;}
.xfer-confirm-removed{background:rgba(248,113,113,.08);}
.xfer-confirm-removed i{color:#F87171;}
.xfer-confirm-removed b{color:#F87171;}
.xfer-confirm-changed{background:rgba(56,189,248,.08);}
.xfer-confirm-changed i{color:var(--cyan);}
.xfer-confirm-changed b{color:var(--cyan);}
.xfer-confirm-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
/* Product Wizard's Save Draft/Publish confirm reuses .cm-confirm's
   centered shell for its short blurb, but widens/left-aligns and adds
   a scrollable diff section (same .xfer-confirm-group/-line/-added/
   -removed/-changed classes Manage Content's own confirm uses) once
   pwOpenConfirm() has real added/removed/changed details to show --
   see pwComputeDiff(). Toggled via JS, not applied by default, so the
   plain "Remove this item?" confirmation (pwRemoveContent) that reuses
   the same #pw-confirm-overlay keeps its original compact centered look. */
.cm-confirm.pw-confirm-wide{width:min(560px,calc(100% - 40px));text-align:left;}
.pw-confirm-diff{max-height:320px;overflow-y:auto;text-align:left;margin-top:14px;}

.cm-confirm-overlay{z-index:1100;}
.cm-confirm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--navy);border:1px solid var(--border);border-radius:16px;padding:28px;width:min(440px,calc(100% - 40px));text-align:center;}
.cm-confirm-icon{width:52px;height:52px;border-radius:50%;margin:0 auto 16px;background:var(--amber-dim);display:flex;align-items:center;justify-content:center;color:var(--amber);font-size:22px;}
.cm-confirm-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--white);margin-bottom:10px;}
.cm-confirm-body{font-size:14px;color:var(--steel);line-height:1.6;margin-bottom:16px;}
.cm-confirm-products{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:22px;max-height:120px;overflow-y:auto;}
.cm-confirm-actions{display:flex;gap:10px;justify-content:center;}
/* Users & Access save confirm: the "what changed" list (su-save-confirm-body). */
.su-change-list{list-style:none;margin:10px 0 0;padding:10px 14px;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;max-height:220px;overflow-y:auto;}
.su-change-list li{padding:3px 0;color:var(--white);}
.su-change-list li span{color:var(--steel);}
.su-change-note{margin-top:10px;font-size:13px;}

@media(max-width:800px){ .cm-row{grid-template-columns:1fr 70px;} .cm-row>*:nth-child(n+3){display:none;} }

/* Icon-only buttons -- table row Edit/Delete, modal close (X) buttons.
   Was missing entirely from this page (present in other pages' own
   inline styles, e.g. troubleshooting.html) -- without it these render
   as unstyled default <button> elements (a boxed white square). */
.icon-btn{background:none;border:none;color:#4A6080;cursor:pointer;padding:6px 8px;border-radius:6px;transition:color .2s,background .2s;font-size:14px;}
.icon-btn:hover{color:var(--cyan);background:var(--cyan-dim);}
.icon-btn.danger:hover{color:#F87171;background:rgba(248,113,113,0.1);}
/* Platform Settings (pp-*) -- two-panel Setting Groups / Setting Values,
   layout + table styling from the Platform Parameters mockup. */
.pp-layout{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.3fr);gap:20px;align-items:start;}
@media(max-width:1000px){.pp-layout{grid-template-columns:1fr;}}
.pp-card{padding:22px 24px;margin-bottom:0;}
.pp-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.pp-card-head h3{margin:0;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--white);}
.pp-card-head h3 i{margin-right:8px;color:var(--cyan);}
.pp-head-btn{font-size:12px;padding:7px 12px;white-space:nowrap;}
.pp-detail-sub{font-size:12px;color:#4A6080;margin:-6px 0 14px;}
.pp-detail-sub .pp-mono{font-family:var(--font-mono);color:#8CA0B8;}
.pp-table{width:100%;border-collapse:collapse;font-size:13px;}
.pp-table th{background:var(--navy-deep);color:#8CA0B8;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
.pp-table td{padding:11px 14px;border-bottom:1px solid rgba(140,160,184,0.07);color:var(--white);vertical-align:middle;}
.pp-table tbody tr:hover td{background:rgba(0,212,255,0.02);}
.pp-grp-row{cursor:pointer;}
.pp-grp-row.active td{background:var(--cyan-dim) !important;}
.pp-grp-row.active td:first-child{box-shadow:inset 3px 0 0 var(--cyan);}
.pp-mono-cell{font-family:var(--font-mono);font-size:12px;color:#8CA0B8 !important;white-space:nowrap;}
.pp-count{color:#4A6080;font-weight:400;font-size:11px;}
.pp-name{font-weight:600;white-space:nowrap;}
.pp-val{font-family:var(--font-mono);font-size:12px;color:var(--cyan) !important;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
/* Description: one line, cut off with "..." -- full text on hover and in
   the Edit setting drawer. width + max-width:0 is what lets a table cell
   truncate instead of stretching the table. */
.pp-desc-th{width:45%;}
.pp-desc{width:45%;max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#8CA0B8 !important;}
.pp-lock{color:#4A6080;font-size:11px;margin-left:6px;}
.pp-type{display:block;font-family:var(--font-body);font-size:10.5px;color:#4A6080;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}
.pp-empty{color:#4A6080 !important;font-size:13px;padding:18px 14px !important;text-align:center;}
#admin-sec-platform-settings .icon-btn:disabled{opacity:.35;cursor:not-allowed;background:none !important;color:#4A6080 !important;}
/* Deactivate/Reactivate (Users & Access Account-actions) -- these two
   set their own red/green color, which as inline style would otherwise
   block .btn-outline:hover's cyan from ever applying (inline always
   wins over a class rule, hover or not). Own hover kept in their own
   color family instead of the generic cyan every other button gets. */
.btn-outline.su-btn-danger{color:#F87171;border-color:#F87171;}
.btn-outline.su-btn-danger:hover{color:#FCA5A5;border-color:#FCA5A5;background:rgba(248,113,113,0.1);}
.btn-outline.su-btn-success{color:var(--green);border-color:var(--green);}
.btn-outline.su-btn-success:hover{background:rgba(74,222,128,0.1);}

/* Manage Content toolbar -- cm-search-field (left of the search bar)
   scopes the search box to ID or Title, independent of sorting (that's
   the column headers now -- cmSortHeaderCell/cmSortByHeader). */
.cm-sort-dir-btn{background:var(--navy-mid);border:1px solid rgba(140,160,184,0.2);color:#4A6080;cursor:pointer;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;transition:color .2s,background .2s,border-color .2s;white-space:nowrap;}
.cm-sort-dir-btn:hover{color:var(--white);border-color:rgba(0,212,255,0.3);}
.cm-sort-dir-btn.active{background:var(--cyan-dim);border-color:var(--cyan);color:var(--cyan);}

/* Product Explorer's own Sort control -- a single combined "Sort Code
   A→Z / Sort Code Z→A / Sort Title A→Z / Sort Title Z→A" button
   (xpSortComboHtml()) that opens a small custom dropdown menu
   (.xp-sort-menu), fully independent of the plain ID/Title/Content ID
   search-field <select> next to the search box (that one only scopes
   the search box, reuses .form-input/.form-select like Manage
   Content/Products' sort fields). Built as real DOM (button + divs),
   not a native <select>, specifically because a native <select>'s open
   option list can't be reliably themed across browsers -- the
   currently-selected option keeps a browser/OS-native highlight color
   no matter what CSS is applied, which is exactly the mismatched white
   row bug this replaced. */
.xp-sort-combo{background-color:var(--cyan-dim);border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;padding:7px 10px;border-radius:7px;font-size:12px;font-weight:600;font-family:var(--font-body);white-space:nowrap;flex:none;display:flex;align-items:center;gap:6px;}
.xp-sort-combo:hover{background-color:rgba(0,212,255,0.16);}
.xp-sort-menu{position:absolute;top:calc(100% + 6px);right:0;width:max-content;background:var(--navy-mid);border:1px solid rgba(140,160,184,0.2);border-radius:8px;padding:4px;z-index:50;box-shadow:0 12px 28px rgba(0,0,0,0.4);}
.xp-sort-menu-item{padding:7px 8px;border-radius:5px;font-size:12px;color:var(--steel);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;}
.xp-sort-menu-item:hover{background:rgba(0,212,255,0.08);color:var(--white);}
.xp-sort-menu-item.active{background:var(--cyan-dim);color:var(--cyan);font-weight:600;}
.xp-sort-menu-item i{font-size:10px;}

.form-input{width:100%;background:var(--navy-deep);border:1px solid rgba(140,160,184,0.2);border-radius:8px;padding:9px 12px;color:var(--white);font-size:13px;font-family:var(--font-body);outline:none;transition:border-color .2s;}
.form-input:focus{border-color:rgba(0,212,255,0.4);}
.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238CA0B8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.form-select:disabled{opacity:0.5;cursor:not-allowed;}
/* Locked Name box in Platform Settings' Edit setting (protected settings). */
.form-input[readonly]{opacity:0.5;cursor:not-allowed;}
.form-input[readonly]:focus{border-color:rgba(140,160,184,0.2);}
/* Country-code dropdown for the phone field (Invite user/Invite Company) --
   ported from signup.html/login.css's #cc-select: a native <select>'s
   popup is positioned by the browser and can render detached/clipped
   inside this drawer's own scroll container, plus it can't be dark-themed
   (that's the plain white native list this replaces). This one is
   CSS-anchored to itself instead, so it always opens right under the
   trigger and matches the rest of the console's theme. */
.cc-select{position:relative;flex-shrink:0;}
.cc-trigger{width:90px;flex-shrink:0;border-radius:8px 0 0 8px;border-right:none;padding-right:20px;font-size:13px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;}
.cc-select.open .cc-trigger{border-color:rgba(0,212,255,0.48);box-shadow:0 0 0 3px rgba(0,212,255,0.07);}
.cc-caret{flex-shrink:0;margin-left:6px;color:#4A6080;transition:transform .2s;}
.cc-select.open .cc-caret{transform:rotate(180deg);}
.cc-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:50;width:150px;max-height:220px;overflow-y:auto;background:var(--navy-mid);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,0.5);scrollbar-width:thin;scrollbar-color:rgba(0,212,255,0.25) transparent;}
.cc-select.open .cc-menu{display:block;}
.cc-menu::-webkit-scrollbar{width:6px;}
.cc-menu::-webkit-scrollbar-track{background:transparent;}
.cc-menu::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.25);border-radius:3px;}
.cc-opt{padding:8px 10px;font-size:12.5px;color:var(--white);cursor:pointer;}
.cc-opt:hover,.cc-opt.hl{background:rgba(0,212,255,0.06);}
.cc-opt.sel{background:rgba(0,212,255,0.08);}
#su-invite-btn:disabled,#su-bulk-invite-btn:disabled{opacity:0.5;cursor:not-allowed;}
.form-label{font-size:11px;color:#4A6080;margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.4px;}
.form-group{margin-bottom:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}

@media (max-width:800px){ .admin-layout{grid-template-columns:1fr;} .admin-sidebar{display:none;} .kpi-grid{grid-template-columns:1fr;} }

/* Product Wizard (pw-*) -- New Product / Edit Product's 7-step flow */
.pw-steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.pw-step{display:flex;align-items:center;gap:9px;background:var(--navy-mid);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--steel);flex:1 1 auto;min-width:140px;}
.pw-step.active{border-color:var(--cyan);background:var(--cyan-dim);color:var(--white);}
.pw-step.done{border-color:rgba(74,222,128,0.4);}
.pw-step-num{width:22px;height:22px;border-radius:50%;background:var(--navy-deep);color:#4A6080;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.pw-step.active .pw-step-num{background:var(--cyan);color:var(--navy-deep);}
.pw-step.done .pw-step-num{background:var(--green);color:var(--navy-deep);}
.pw-title-id{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--steel);margin-left:10px;vertical-align:middle;}
.pw-step-label{font-weight:600;}
.pw-step-opt{font-size:10px;color:#4A6080;}
.pw-title{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--white);margin-bottom:6px;}
.pw-sub{font-size:13px;color:var(--steel);margin-bottom:18px;}
.pw-ctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;background:var(--navy-deep);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:18px;}
.pw-ctx-label{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#4A6080;margin-bottom:3px;}
.pw-ctx-val{font-size:13px;color:var(--white);font-weight:600;word-break:break-word;}
.pw-added{display:flex;align-items:center;gap:10px;background:var(--navy-deep);border:1px solid var(--border);border-radius:8px;padding:9px 12px;margin-bottom:6px;font-size:13px;}
.pw-added .lead{color:var(--cyan);}
.pw-added-title{color:var(--white);flex:1;}
.pw-added-meta{font-size:11px;color:#4A6080;font-family:var(--font-mono);}
.pw-empty{font-size:12.5px;color:#4A6080;padding:8px 0;}
.pw-added.sel{border-color:var(--cyan);background:var(--cyan-dim);}
.pw-editing-note{display:flex;align-items:center;gap:9px;background:var(--cyan-dim);border:1px solid rgba(0,212,255,0.3);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--steel);}
.pw-editing-note i{color:var(--cyan);}
.pw-editing-note b{color:var(--white);}