/* Purchased Untitled UI parts, provenance: docs/design/customer-kit.md.
   Existing application content and actions stay intact. Screen-only, named scopes;
   never restyle the equipment/journal paper, signature image, or visibility flags. */
@media screen {
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal,#_signOverlay) {
    --ck-paper:#fff; --ck-subtle:#fafafa; --ck-hover:#f5f5f5;
    --ck-ink:#171717; --ck-text:#404040; --ck-muted:#737373;
    --ck-line:#e5e5e5; --ck-input-line:#d4d4d4; --ck-danger:#e00000;
    --ck-font:"Selo Admin Inter",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    padding:24px; box-sizing:border-box;
  }
  /* Button group 6277:292899: 40h, 8x16, 14/20 semibold, neutral selected. */
  #page-user-main.customer-kit-shell #content-approval .apv-tabs { padding:16px 20px; background:var(--ck-paper); border-color:var(--ck-line); overflow-x:auto; }
  #page-user-main.customer-kit-shell #content-approval :is(.apv-tab,.apv-hist-quick button) {
    min-height:40px; padding:8px 16px; box-sizing:border-box; margin:0 0 0 -1px;
    border:1px solid var(--ck-input-line); border-radius:0; background:var(--ck-paper); color:var(--ck-text);
    font:600 14px/20px var(--ck-font); white-space:nowrap;
    box-shadow:0 1px 2px rgb(0 0 0 / 5%),inset 0 -2px rgb(0 0 0 / 5%);
  }
  #page-user-main.customer-kit-shell #content-approval :is(.apv-tab,.apv-hist-quick button):first-child { border-radius:8px 0 0 8px; margin-left:0; }
  #page-user-main.customer-kit-shell #content-approval :is(.apv-tab,.apv-hist-quick button):last-child { border-radius:0 8px 8px 0; }
  #page-user-main.customer-kit-shell #content-approval :is(.apv-tab,.apv-hist-quick button):is(.active,:hover) { background:var(--ck-subtle); color:var(--ck-ink); border-color:var(--ck-input-line); }
  #page-user-main.customer-kit-shell #content-approval .apv-hist-toolbar { padding:16px 20px; gap:12px; background:var(--ck-paper); border-color:var(--ck-line); }
  #page-user-main.customer-kit-shell #content-approval .apv-hist-range-label { font:500 14px/20px var(--ck-font); }

  /* Secondary sm 3287:429435, icon-off variant: 12+2 horizontal text inset.
     Keep the original three shadows, not a new flattened button treatment. */
  #page-user-main.customer-kit-shell #content-settings :is(.set-btn,.set-btn-outline,.set-theme-btn,[id="openProfileEditBtn"]),
  #page-user-main.customer-kit-shell #content-equipment :is(.eq-head .eq-btn,#eqModal .eq-btn),
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal .ovbtn,#profileEditModal button,#_signOverlay button) {
    padding:8px 14px !important; min-height:38px; height:auto !important; box-sizing:border-box;
    border:1px solid var(--ck-input-line) !important; border-radius:8px !important;
    background:var(--ck-paper) !important; color:var(--ck-text) !important;
    font:600 14px/20px var(--ck-font) !important; letter-spacing:normal !important;
    box-shadow:0 1px 2px rgb(0 0 0 / 5%),inset 0 0 0 1px rgb(0 0 0 / 18%),inset 0 -2px rgb(0 0 0 / 5%) !important;
  }
  #page-user-main.customer-kit-shell #content-settings :is(.set-btn,.set-btn-outline,.set-theme-btn):hover,
  #page-user-main.customer-kit-shell #content-equipment :is(.eq-head .eq-btn,#eqModal .eq-btn):hover,
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal .ovbtn,#profileEditModal button):hover { background:var(--ck-subtle) !important; }
  #page-user-main.customer-kit-shell #content-settings .set-theme-btn.active { background:var(--ck-hover) !important; }
  /* Staff filter renderer records selected state in the inline background.
     Retain the selection cue without changing its JS/permission path. */
  #page-user-main.customer-kit-shell #content-settings button[onclick^="_setSettingsStaffStatusFilter"]:is([style*="background:var(--mono-text)"],[style*="background: var(--mono-text)"]) { background:var(--ck-hover) !important; color:var(--ck-ink) !important; }
  #page-user-main.customer-kit-shell #content-settings button[style*="var(--danger)"],
  #page-user-main.customer-kit-shell #eqModal button[onclick*="_eqDeactivate"],
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-reject-btn { color:var(--ck-danger) !important; }

  /* Input 11351:120131; existing native selects, constraints and values retained. */
  #page-user-main.customer-kit-shell #content-settings :is(.set-input,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea),
  #page-user-main.customer-kit-shell #content-approval :is(.ovin,.apv-hist-search input,.apv-hist-date),
  #page-user-main.customer-kit-shell #eqModal :is(input,select),
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal .ovin,#profileEditModal input) {
    padding:8px 12px !important; min-height:38px; height:auto !important; min-width:0; max-width:100%; box-sizing:border-box;
    background:var(--ck-paper) !important; color:var(--ck-ink) !important;
    border:1px solid var(--ck-input-line) !important; border-radius:8px !important;
    font:400 14px/20px var(--ck-font) !important; letter-spacing:normal !important;
    box-shadow:0 1px 2px rgb(0 0 0 / 5%) !important;
  }
  #page-user-main.customer-kit-shell #content-settings input::placeholder,
  #page-user-main.customer-kit-shell #eqModal input::placeholder,
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal,#profileEditModal) input::placeholder { color:var(--ck-muted); opacity:1; }

  /* Modal container 4057:415360: radius16, 24px inset. Width follows the
     existing three-signature workflow, not the unrelated success-message demo. */
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal {
    --ov-paper:var(--ck-paper); --ov-head:var(--ck-subtle); --ov-line:var(--ck-line); --ov-line2:var(--ck-line);
    --ov-ink:var(--ck-ink); --ov-date:var(--ck-text); --ov-dim:var(--ck-muted); --ov-bad:var(--ck-danger);
    background:var(--ck-paper); color:var(--ck-text); border-radius:16px !important; max-width:960px; width:100%;
    max-height:calc(100dvh - 76px) !important; height:auto !important; overflow:auto; font:400 14px/20px var(--ck-font); letter-spacing:normal;
    box-shadow:0 20px 24px -4px rgb(0 0 0 / 8%),0 8px 8px -4px rgb(0 0 0 / 3%),0 3px 3px -1.5px rgb(0 0 0 / 4%);
  }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-head { padding:24px; background:var(--ck-paper); border-color:var(--ck-line); }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-title { font:600 16px/24px var(--ck-font); color:var(--ck-ink); }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-close { border:0; background:transparent; width:36px; height:36px; padding:8px; border-radius:8px; color:var(--ck-muted); box-sizing:border-box; box-shadow:none; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-close svg { width:20px; height:20px; stroke-width:2; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-body { padding:0 24px 24px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ovwrap { padding:0; margin-top:24px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ovt { width:100%; border-collapse:collapse; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ovt th { padding:12px 16px; font:600 12px/18px var(--ck-font); color:var(--ck-muted); border-color:var(--ck-line); }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ovt td { padding:16px 20px; font:400 14px/20px var(--ck-font); border-color:var(--ck-line); white-space:normal; overflow-wrap:anywhere; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-kv td.ovv { width:180px !important; color:var(--ck-text); }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-foot { padding:24px; background:var(--ck-paper); border-color:var(--ck-line); gap:12px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-foot-note { font:400 14px/20px var(--ck-font); white-space:normal; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-comment { padding:0 24px 24px; }

  /* Preserve the current settings navigation and all permission-controlled tabs. */
  #page-user-main.customer-kit-shell #content-settings { font:400 14px/20px var(--ck-font); color:var(--ck-text); }
  #page-user-main.customer-kit-shell #content-settings > div { max-width:1120px !important; margin:0 auto !important; border:1px solid var(--ck-line); border-radius:12px; }
  #page-user-main.customer-kit-shell #setNav { width:200px !important; padding:16px 12px !important; border-right:1px solid var(--ck-line) !important; background:var(--ck-paper) !important; }
  #page-user-main.customer-kit-shell #setNav > div:first-child { font:600 16px/24px var(--ck-font) !important; color:var(--ck-ink) !important; padding:8px 12px 16px !important; }
  #page-user-main.customer-kit-shell #setNav .set-nav-item { padding:8px 12px !important; margin:2px 0; border:0 !important; border-radius:6px; color:var(--ck-text) !important; background:transparent !important; font:600 14px/20px var(--ck-font) !important; letter-spacing:normal !important; }
  #page-user-main.customer-kit-shell #setNav .set-nav-item:is(.active,:hover) { background:var(--ck-subtle) !important; color:var(--ck-ink) !important; }
  #page-user-main.customer-kit-shell #setNav + div { padding:24px !important; background:var(--ck-paper) !important; }
  #page-user-main.customer-kit-shell #content-settings .settings-label { color:var(--ck-ink) !important; font:600 16px/24px var(--ck-font) !important; }
  #page-user-main.customer-kit-shell #content-settings .set-field-label { font:500 14px/20px var(--ck-font) !important; color:var(--ck-text) !important; }
  #page-user-main.customer-kit-shell #content-settings :is(#setMyName,#setMyLoginId,#setMyPosition) { font:400 14px/20px var(--ck-font) !important; color:var(--ck-ink) !important; }

  /* Equipment toolbar/register dialog, deliberately excluding #eqPaper. */
  #page-user-main.customer-kit-shell #content-equipment > .page-card { padding:0 !important; background:var(--ck-paper) !important; box-shadow:none !important; border:0 !important; }
  #page-user-main.customer-kit-shell #content-equipment .eq-page-paper > :is(.eq-head,.eq-crumb) { font:400 14px/20px var(--ck-font); color:var(--ck-muted); }
  #page-user-main.customer-kit-shell #content-equipment .eq-page-paper > .eq-crumb { padding:16px 20px 0; margin:0; border:1px solid var(--ck-line); border-bottom:0; border-radius:12px 12px 0 0; }
  #page-user-main.customer-kit-shell #content-equipment .eq-page-paper > .eq-head { padding:16px 20px; border:1px solid var(--ck-line); border-top:0; border-radius:0 0 12px 12px; }
  #page-user-main.customer-kit-shell #content-equipment .eq-head .eq-title { font:600 16px/24px var(--ck-font) !important; color:var(--ck-ink); }
  #page-user-main.customer-kit-shell #content-equipment .eq-head .eq-sub { font:400 14px/20px var(--ck-font); color:var(--ck-muted); }
  #page-user-main.customer-kit-shell #eqModalBox { background:var(--ck-paper); color:var(--ck-text); border-radius:16px; padding:24px; max-height:calc(100dvh - 76px); overflow:auto; font:400 14px/20px var(--ck-font); }
  #page-user-main.customer-kit-shell #eqModal .eq-modal-title { font:600 16px/24px var(--ck-font); color:var(--ck-ink); }
  #page-user-main.customer-kit-shell #eqModal label { font:500 14px/20px var(--ck-font); color:var(--ck-text); }
  #page-user-main.customer-kit-shell #eqModal summary { padding-block:12px; color:var(--ck-text); }
  /* The signing canvas and its pixel dimensions/ink are intentionally untouched. */
  body:has(#page-user-main.customer-kit-shell.active) #_signOverlay > div { background:var(--ck-paper) !important; border-radius:16px !important; padding:24px !important; }
  body:has(#page-user-main.customer-kit-shell.active) #_signOverlay > div > div:first-child { font:600 16px/24px var(--ck-font) !important; color:var(--ck-ink) !important; }
  body:has(#page-user-main.customer-kit-shell.active) #_signOverlay > div > div:nth-child(2) { font:400 14px/20px var(--ck-font) !important; color:var(--ck-muted) !important; }

  #page-user-main.customer-kit-shell :is(#content-settings,#content-approval,#eqModal,.eq-head) :is(button,input,select,textarea,summary):focus-visible,
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal,#profileEditModal,#_signOverlay) :is(button,input):focus-visible { outline:2px solid var(--ck-text) !important; outline-offset:3px; }
  #page-user-main.customer-kit-shell :is(#content-settings,#eqModal) :is(button,input,select):disabled,
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal,#profileEditModal) :is(button,input):disabled { opacity:.5; cursor:not-allowed; }
}
@media screen and (max-width:768px) {
  #page-user-main.customer-kit-shell #setNav { width:100% !important; border-right:0 !important; border-bottom:1px solid var(--ck-line) !important; padding:12px !important; }
  #page-user-main.customer-kit-shell #setNav + div { padding:16px !important; }
  #page-user-main.customer-kit-shell #content-settings :is(.set-btn,.set-btn-outline,.set-theme-btn,[id="openProfileEditBtn"]),
  #page-user-main.customer-kit-shell #content-approval :is(.apv-tab,.apv-hist-quick button),
  #page-user-main.customer-kit-shell #content-equipment :is(.eq-head .eq-btn,#eqModal .eq-btn),
  body:has(#page-user-main.customer-kit-shell.active) :is(#apvDetailModal button,#profileEditModal button,#_signOverlay button) { min-height:44px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal { padding:12px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-head { padding:16px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .ccp-modal-body { padding:0 16px 16px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-kv table,
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-kv tbody { display:block; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-kv tr { display:grid; grid-template-columns:96px minmax(0,1fr); }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-kv :is(th,td),
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-kv td.ovv { width:auto !important; height:auto; min-height:44px; padding:12px; overflow:visible; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-sign-table :is(th,td) { padding:12px 8px; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-foot { padding:16px; grid-template-columns:1fr; }
  body:has(#page-user-main.customer-kit-shell.active) #apvDetailModal .apv-detail-foot-note { text-align:left; }
}