/* ============================================================
   WPPEI CRM v003 — Global Premium Design System
   Graphite navy + champagne gold. High readability, restrained motion,
   consistent role shell, multilingual typography, desktop/mobile layouts.
   ============================================================ */
:root {
  --navy-950: #08131d;
  --navy-900: #0c1b28;
  --navy-850: #102333;
  --navy-800: #142b3d;
  --navy-700: #203d52;
  --gold-50: #fcf8ef;
  --gold-100: #f5ead0;
  --gold-200: #e9d39d;
  --gold-400: #cba75b;
  --gold-500: #b88a35;
  --gold-600: #96702e;
  --canvas: #f3f5f7;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --line: #e3e8ec;
  --line-strong: #d4dce2;
  --text: #152331;
  --muted: #687887;
  --muted-2: #91a0ad;
  --success: #1e7b59;
  --danger: #be3e3e;
  --warning: #ad721f;
  --info: #376f9b;
  --shadow-sm: 0 1px 2px rgba(8, 19, 29, .04), 0 5px 16px rgba(8, 19, 29, .035);
  --shadow-md: 0 18px 45px -28px rgba(8, 19, 29, .42), 0 5px 18px rgba(8, 19, 29, .04);
  --shadow-lg: 0 30px 80px -30px rgba(2, 10, 18, .55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--canvas); }
body {
  font-family: 'Inter', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 85% -10%, rgba(203, 167, 91, .09), transparent 28rem),
    var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-100); color: var(--navy-950); }
* { scrollbar-width: thin; scrollbar-color: #bcc6ce transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #bdc7cf; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #94a1ac; }

/* Brand */
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%; position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #e1c47f 0%, #b78a35 55%, #8c6428 100%);
  color: #0d1923; box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 10px 25px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
}
.brand-mark::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(8,19,29,.2); border-radius: 50%; }
.brand-mark span { font-size: 18px; font-weight: 800; font-style: italic; transform: skew(-7deg); letter-spacing: -.1em; margin-left: -.08em; }
.brand-mark-large { width: 54px; height: 54px; }
.brand-mark-large span { font-size: 25px; }

/* App shell */
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: 284px; display: flex; flex-direction: column;
  color: #fff; background:
    radial-gradient(circle at 25% 5%, rgba(203,167,91,.12), transparent 16rem),
    linear-gradient(180deg, var(--navy-850), var(--navy-950));
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 20px 0 50px -35px rgba(0,0,0,.8);
  transform: translateX(-100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.app-sidebar.is-open { transform: translateX(0); }
.app-sidebar-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(3,12,20,.65); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.app-sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }
.app-main { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .app-sidebar { position: sticky; top: 0; height: 100vh; transform: none; flex: 0 0 284px; }
  .app-sidebar-overlay { display: none; }
}
.brand-lockup { height: 82px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand-copy { min-width: 0; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.brand-name span, .login-wordmark span { color: var(--gold-400); }
.brand-subtitle { margin-top: 3px; color: #8193a2; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-close { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255,255,255,.06); color: #b7c3cd; cursor: pointer; }
.sidebar-context { padding: 22px 22px 12px; display: flex; flex-direction: column; gap: 5px; }
.sidebar-context-label { font-size: 10px; color: #6e8394; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.sidebar-context strong { font-size: 14px; color: #f3f5f7; font-weight: 650; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 12px 18px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 3px 0; padding: 0 13px; border-radius: 12px; color: #91a3b2; font-size: 14px; font-weight: 560; transition: color .15s, background .15s, transform .15s; }
.nav-link:hover { color: #eef2f5; background: rgba(255,255,255,.055); transform: translateX(2px); }
.nav-icon { width: 29px; height: 29px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #718696; background: rgba(255,255,255,.035); transition: all .15s; }
.nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(203,167,91,.15), rgba(203,167,91,.045)); box-shadow: inset 0 0 0 1px rgba(203,167,91,.1); }
.nav-link.active .nav-icon { color: #e2c67e; background: rgba(203,167,91,.12); }
.nav-link.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(#e4ca8a, #a97c2e); box-shadow: 0 0 16px rgba(203,167,91,.4); }
.sidebar-footer { padding: 18px 20px 22px; border-top: 1px solid rgba(255,255,255,.06); }
.sidebar-footer p { margin: 9px 0 0; color: #617587; font-size: 10px; line-height: 1.45; }
.local-build-pill { width: fit-content; display: inline-flex; gap: 7px; align-items: center; color: #d9c38b; background: rgba(203,167,91,.08); border: 1px solid rgba(203,167,91,.13); padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; }

/* Header */
.app-header { height: 76px; position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 22px; background: rgba(255,255,255,.88); backdrop-filter: blur(20px) saturate(145%); border-bottom: 1px solid rgba(211,219,225,.85); }
.header-left, .header-actions, .user-block { display: flex; align-items: center; }
.header-left { gap: 12px; min-width: 0; }
.header-actions { gap: 10px; flex: 0 0 auto; }
.page-title { font-size: 18px; line-height: 1.15; font-weight: 750; letter-spacing: -.025em; color: var(--navy-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-kicker { margin-top: 4px; color: var(--muted-2); font-size: 10px; letter-spacing: .075em; text-transform: uppercase; font-weight: 650; }
.header-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: #738391; background: transparent; border: 1px solid transparent; cursor: pointer; transition: .15s; }
.header-icon-btn:hover { color: var(--navy-850); background: #f4f6f8; border-color: #e7ebee; }
.header-icon-btn.danger-hover:hover { color: var(--danger); background: #fff4f4; border-color: #f2dada; }
.language-control { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #e0e6ea; border-radius: 11px; background: #fff; color: #60717f; box-shadow: 0 1px 2px rgba(8,19,29,.03); }
.language-control i { font-size: 12px; color: var(--gold-600); }
.language-control select { border: 0; outline: 0; background: transparent; color: #344756; font-size: 12px; font-weight: 650; cursor: pointer; max-width: 92px; }
.role-chip { align-items: center; height: 29px; padding: 0 11px; border-radius: 999px; color: var(--role-color); background: color-mix(in srgb, var(--role-color) 9%, white); border: 1px solid color-mix(in srgb, var(--role-color) 20%, white); font-size: 10px; letter-spacing: .04em; font-weight: 750; white-space: nowrap; }
.user-block { gap: 9px; padding-left: 10px; margin-left: 2px; border-left: 1px solid #e3e8ec; }
.avatar { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; font-size: 12px; font-weight: 800; }
.user-copy { max-width: 150px; line-height: 1.2; }
.user-copy strong, .user-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { color: #283a49; font-size: 12px; font-weight: 700; }
.user-copy span { margin-top: 4px; color: #94a1ab; font-size: 9px; }
.content-area { width: 100%; max-width: 1560px; margin: 0 auto; padding: 28px 24px 46px; }
@media (min-width: 1440px) { .content-area { padding: 34px 38px 56px; } }
@media (max-width: 640px) { .app-header { height: 68px; padding: 0 13px; } .content-area { padding: 18px 13px 36px; } .language-control { padding: 0 7px; } .language-control select { max-width: 58px; } .page-kicker { display: none; } }

/* Buttons and fields */
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, #17344a, #0d2030); border-color: #10283b; box-shadow: 0 8px 20px -12px rgba(5,18,28,.85), inset 0 1px rgba(255,255,255,.12); }
.btn-primary:hover { background: linear-gradient(135deg, #20445f, #10293c); box-shadow: 0 13px 25px -14px rgba(5,18,28,.85); }
.btn-primary i { color: #d9bd78; }
.btn-secondary { color: #415563; background: #fff; border-color: #dfe5e9; box-shadow: 0 1px 2px rgba(8,19,29,.03); }
.btn-secondary:hover { background: #f8fafb; border-color: #cfd8de; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-sm { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 11px; }
.btn-lg { min-height: 50px; border-radius: 13px; font-size: 14px; }
.btn-block { width: 100%; }
.field-label { display: block; margin: 0 0 7px; color: #374b5a; font-size: 12px; font-weight: 700; }
.field { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d9e0e5; border-radius: 11px; outline: 0; background: #fff; color: #172735; font-size: 13px; box-shadow: 0 1px 2px rgba(8,19,29,.025); transition: border .15s, box-shadow .15s, background .15s; }
.field:hover { border-color: #c7d1d8; }
.field:focus { border-color: #b4914e; box-shadow: 0 0 0 4px rgba(184,138,53,.11); background: #fff; }
.field::placeholder { color: #a5b0b9; }
.field-lg { min-height: 50px; padding: 12px 14px; font-size: 14px; }
textarea.field { resize: vertical; min-height: 90px; }
.field-inline { min-height: 34px; padding: 5px 30px 5px 9px; border: 1px solid #dbe2e7; border-radius: 9px; background: #fff; color: #354957; font-size: 11px; font-weight: 650; outline: 0; }
.field-inline:focus { border-color: #b4914e; box-shadow: 0 0 0 3px rgba(184,138,53,.1); }
.form-stack { display: grid; gap: 17px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.form-error, .error-inline, .form-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.form-error, .error-inline { color: #a53535; background: #fff3f3; border: 1px solid #f1d6d6; }
.form-note.warning { color: #92601d; background: #fff9eb; border: 1px solid #efe0b8; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* Page intro and panels */
.page-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 21px; }
.page-intro-icon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #9a742e; background: linear-gradient(145deg, #fffaf0, #f3e7c9); border: 1px solid #ead9b2; box-shadow: inset 0 1px #fff; }
.page-intro h1 { margin: 0; color: var(--navy-950); font-size: 23px; font-weight: 780; letter-spacing: -.035em; }
.page-intro p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.panel { background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); }
.panel-pad { padding: 22px; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-toolbar h2 { margin: 0; color: #1b2c39; font-size: 15px; font-weight: 750; letter-spacing: -.015em; }
.panel-toolbar p { margin: 5px 0 0; color: var(--muted-2); font-size: 11px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: 999px; color: #765b29; background: var(--gold-50); border: 1px solid #eee0bd; font-size: 10px; vertical-align: 1px; }
@media (max-width: 640px) { .panel-pad { padding: 16px; } .panel-toolbar { align-items: flex-start; flex-direction: column; } .toolbar-actions, .toolbar-actions .btn { width: 100%; } }

/* Dashboard */
.dashboard-hero { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 34px 36px; margin-bottom: 20px; border-radius: 20px; color: #fff; overflow: hidden; position: relative; background: radial-gradient(circle at 85% 15%, rgba(203,167,91,.22), transparent 18rem), linear-gradient(125deg, #10283a, #091722 72%); box-shadow: var(--shadow-md); }
.dashboard-hero::after { content: ''; position: absolute; right: -30px; bottom: -100px; width: 280px; height: 280px; border: 1px solid rgba(203,167,91,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(203,167,91,.025), 0 0 0 58px rgba(203,167,91,.018); }
.dashboard-hero-copy { position: relative; z-index: 2; max-width: 780px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #c7d2da; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; }
.eyebrow > span { width: 18px; height: 1px; background: var(--gold-400); }
.dashboard-hero h1 { margin: 15px 0 8px; max-width: 780px; font-size: clamp(23px, 2.3vw, 35px); line-height: 1.25; letter-spacing: -.04em; font-weight: 760; }
.dashboard-hero p { margin: 0; color: #9eb0bd; font-size: 13px; line-height: 1.65; }
.dashboard-hero-emblem { position: relative; z-index: 2; width: 105px; height: 105px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: rgba(255,255,255,.035); backdrop-filter: blur(10px); }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.compact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stat-card { position: relative; min-height: 148px; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.stat-label { color: #697b89; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .065em; font-weight: 720; }
.stat-icon { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.stat-value { margin-top: 24px; color: #10202d; font-size: clamp(23px, 2vw, 31px); line-height: 1.1; font-weight: 790; letter-spacing: -.045em; overflow-wrap: anywhere; }
.stat-line { position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 4px 4px 0 0; opacity: .9; }
.stat-blue .stat-icon { color: #346b94; background: #edf5fb; } .stat-blue .stat-line { background: #4c8bb7; }
.stat-violet .stat-icon { color: #745b8f; background: #f4f0f8; } .stat-violet .stat-line { background: #8e72a8; }
.stat-orange .stat-icon { color: #a65c25; background: #fcf1e8; } .stat-orange .stat-line { background: #c77637; }
.stat-green .stat-icon { color: #28725b; background: #edf7f3; } .stat-green .stat-line { background: #3c8a6f; }
.workflow-track { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 11px; padding: 10px 3px 3px; }
.workflow-step { min-height: 95px; display: grid; grid-template-columns: 34px 38px 1fr; align-items: center; gap: 10px; padding: 15px; border: 1px solid #e6eaed; border-radius: 14px; background: linear-gradient(145deg,#fff,#fafbfc); }
.workflow-no { color: #a8b2ba; font-size: 10px; font-weight: 750; }
.workflow-icon { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #99732d; background: var(--gold-50); }
.workflow-step strong { color: #344755; font-size: 12px; line-height: 1.4; }
.workflow-arrow { color: #c5cdd3; font-size: 11px; }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .workflow-track { grid-template-columns: 1fr; } .workflow-arrow { transform: rotate(90deg); justify-self: center; } }
@media (max-width: 600px) { .dashboard-hero { min-height: 0; padding: 26px 22px; } .dashboard-hero-emblem { display: none; } .stat-grid, .compact-grid { grid-template-columns: 1fr; } .stat-card { min-height: 130px; } }

/* Tables and mobile cards */
.table-wrap { display: none; overflow-x: auto; border: 1px solid #e3e8ec; border-radius: 13px; background: #fff; }
@media (min-width: 900px) { .table-wrap { display: block; } }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table thead { background: #f7f9fa; }
.data-table th { padding: 12px 14px; color: #71818e; font-size: 9px; line-height: 1.35; font-weight: 780; text-transform: uppercase; letter-spacing: .075em; text-align: left; white-space: nowrap; border-bottom: 1px solid #e1e7eb; }
.data-table td { padding: 14px; color: #2e414f; vertical-align: middle; border-bottom: 1px solid #eef1f3; line-height: 1.5; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .13s; }
.data-table tbody tr:hover { background: #fbfcfc; }
.mobile-card-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .mobile-card-list { display: none; } }
.mobile-card { padding: 15px; border: 1px solid #e3e8ec; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px rgba(8,19,29,.025); }
.mobile-card-title { margin-bottom: 9px; color: #1d303e; font-size: 14px; font-weight: 750; }
.mobile-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #e8ecef; }
.mobile-card-row:last-child { border-bottom: 0; }
.mc-label { color: #8b99a4; font-size: 10px; font-weight: 650; }
.mc-value { color: #3c4e5b; font-size: 11px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 3px 9px; border-radius: 999px; font-size: 10px; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-neutral { color: #60717f; background: #f0f3f5; border: 1px solid #e3e8eb; }
.badge-info { color: #376f9b; background: #edf5fb; border: 1px solid #dceaf4; }
.badge-success { color: #247254; background: #eaf6f1; border: 1px solid #d8ece3; }
.badge-warning { color: #9b681f; background: #fff7e7; border: 1px solid #f0e0bb; }
.badge-danger { color: #ad3d3d; background: #fff0f0; border: 1px solid #f0d8d8; }
.badge-purple { color: #70578a; background: #f4f0f8; border: 1px solid #e7dfed; }
.status-action { display: inline-flex; align-items: center; gap: 9px; }
.text-action { border: 0; background: none; padding: 0; color: #8a692c; font-size: 10px; font-weight: 750; cursor: pointer; }
.text-action:hover { text-decoration: underline; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 35px; color: #8998a4; text-align: center; }
.empty-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 13px; color: #a68952; background: #faf6ec; border: 1px solid #eee3c8; border-radius: 15px; }
.empty-state p { margin: 0; font-size: 12px; }

/* Modal / toast / loading */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(4,13,21,.65); backdrop-filter: blur(7px); animation: fadeIn .16s ease; }
.modal-panel { width: 100%; max-width: 540px; max-height: 92vh; overflow: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); animation: modalIn .18s cubic-bezier(.2,.9,.2,1); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid #e7ebee; }
.modal-header h3 { margin: 0; display: flex; align-items: center; gap: 9px; color: #1d303e; font-size: 14px; font-weight: 760; }
.modal-header h3 i { color: #9a742e; }
.modal-body { padding: 21px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 200; max-width: 390px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; color: #fff; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); font-size: 12px; font-weight: 600; transition: .2s; animation: toastIn .2s ease; }
.toast-info { background: #263b4b; } .toast-success { background: #246c52; } .toast-error { background: #a83c3c; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.loading-state { min-height: 240px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #7a8995; font-size: 12px; }
.loading-ring { width: 22px; height: 22px; border: 2px solid #e2e7ea; border-top-color: #ad8436; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Settings */
.settings-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; }
.setting-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.setting-icon { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: #92702e; background: var(--gold-50); border: 1px solid #eddfbd; }
.setting-card-head h3 { margin: 1px 0 5px; color: #203340; font-size: 14px; font-weight: 750; }
.setting-card-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.language-setting { display: flex; align-items: center; gap: 10px; }
.language-setting > i { color: #9a742e; }
.settings-list { display: grid; gap: 5px; }
.settings-row { min-height: 52px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 11px; transition: background .15s; }
.settings-row:hover { background: #f7f9fa; }
.settings-row > span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #687b88; background: #f0f3f5; }
.settings-row strong { color: #3a4d5a; font-size: 12px; }
.settings-row > i { color: #b1bcc4; font-size: 10px; }
@media (max-width: 850px) { .settings-grid { grid-template-columns: 1fr; } }

/* Login */
.login-page { min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 28px; background: linear-gradient(145deg,#07131d,#102838 70%,#162f40); }
.login-page::before { content: ''; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom,black,transparent 80%); }
.login-ambient { position: absolute; border-radius: 50%; filter: blur(5px); }
.login-ambient-one { width: 420px; height: 420px; top: -210px; right: 5%; background: radial-gradient(circle,rgba(203,167,91,.22),transparent 65%); }
.login-ambient-two { width: 500px; height: 500px; bottom: -330px; left: 6%; background: radial-gradient(circle,rgba(48,104,141,.25),transparent 65%); }
.login-shell { position: relative; z-index: 2; width: min(1180px,100%); min-height: 690px; display: grid; grid-template-columns: .94fr 1.06fr; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: #fff; box-shadow: 0 45px 100px -35px rgba(0,0,0,.7); }
.login-brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 42px; color: #fff; overflow: hidden; background: radial-gradient(circle at 70% 15%,rgba(203,167,91,.16),transparent 19rem), linear-gradient(155deg,#10283a,#091722 72%); }
.login-brand-panel::after { content: ''; position: absolute; width: 330px; height: 330px; right: -170px; bottom: -100px; border: 1px solid rgba(203,167,91,.14); border-radius: 50%; box-shadow: 0 0 0 35px rgba(203,167,91,.025),0 0 0 75px rgba(203,167,91,.018); }
.login-brand-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.login-wordmark { font-size: 19px; font-weight: 820; letter-spacing: -.03em; }
.login-platform { margin-top: 3px; color: #7f95a5; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.version-badge { margin-left: auto; padding: 6px 9px; border-radius: 999px; color: #d7c188; background: rgba(203,167,91,.08); border: 1px solid rgba(203,167,91,.14); font-size: 9px; font-weight: 750; }
.login-brand-content { position: relative; z-index: 2; margin: 70px 0; }
.login-brand-content h1 { margin: 16px 0 16px; max-width: 470px; font-size: clamp(31px,3vw,47px); line-height: 1.16; font-weight: 730; letter-spacing: -.052em; }
.login-brand-content > p { margin: 0; max-width: 470px; color: #9bafbd; font-size: 13px; line-height: 1.75; }
.feature-list { display: grid; gap: 14px; margin-top: 38px; }
.feature-item { display: flex; align-items: center; gap: 12px; }
.feature-item > span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 11px; color: #d4b873; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.055); }
.feature-item p { margin: 0; color: #b7c5ce; font-size: 12px; line-height: 1.45; }
.login-disclaimer { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 9px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.07); color: #647c8d; font-size: 10px; line-height: 1.55; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 45px 54px; background: radial-gradient(circle at 100% 0,rgba(203,167,91,.055),transparent 18rem),#fff; }
.login-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.login-form-header h2 { margin: 0; color: #132633; font-size: 29px; font-weight: 790; letter-spacing: -.04em; }
.login-form-header p { margin: 7px 0 0; color: #7a8995; font-size: 12px; }
.login-language { flex: 0 0 auto; }
.mobile-login-brand { display: none; align-items: center; gap: 9px; margin-bottom: 28px; }
.mobile-login-brand strong { color: #172a38; font-size: 15px; }
.login-form { display: grid; gap: 16px; }
@media (max-width: 940px) { .login-shell { grid-template-columns: 1fr; max-width: 640px; min-height: 0; } .login-brand-panel { display: none; } .mobile-login-brand { display: flex; } .login-form-panel { padding: 38px; } }
@media (max-width: 560px) { .login-page { padding: 0; align-items: stretch; } .login-shell { border: 0; border-radius: 0; min-height: 100vh; } .login-form-panel { padding: 28px 20px 36px; justify-content: flex-start; } .login-form-header { margin-top: 15px; } .login-language { position: absolute; top: 20px; right: 18px; } }

.hidden { display: none !important; }


/* ============================================================
   WPPEI CRM v010 — Editorial Enterprise System
   Bespoke B2B interface: warm architectural canvas, ink navigation,
   precise typography, restrained petrol accent and paper data surfaces.
   No glow, glass, decorative gradients or generic dashboard hero cards.
   ============================================================ */
:root {
  --atelier-ink-1000: #101315;
  --atelier-ink-950: #15191c;
  --atelier-ink-900: #1b2023;
  --atelier-ink-800: #282e32;
  --atelier-ink-700: #3b4348;
  --atelier-canvas: #e9e7e1;
  --atelier-canvas-2: #efede8;
  --atelier-paper: #fbfaf7;
  --atelier-paper-2: #f5f3ee;
  --atelier-line: #d7d3ca;
  --atelier-line-strong: #c7c2b8;
  --atelier-text: #1a1e20;
  --atelier-muted: #697176;
  --atelier-muted-2: #949a9d;
  --atelier-petrol: #176a63;
  --atelier-petrol-dark: #0f4f4a;
  --atelier-petrol-soft: #e2ece9;
  --atelier-brass: #987540;
  --atelier-brass-soft: #eee7da;
  --atelier-red: #a8423f;
  --atelier-amber: #9a6b2d;
  --atelier-blue: #476d86;
  --canvas: var(--atelier-canvas);
  --surface: var(--atelier-paper);
  --surface-soft: var(--atelier-paper-2);
  --line: var(--atelier-line);
  --line-strong: var(--atelier-line-strong);
  --text: var(--atelier-text);
  --muted: var(--atelier-muted);
  --muted-2: var(--atelier-muted-2);
  --success: #39705c;
  --danger: var(--atelier-red);
  --warning: var(--atelier-amber);
  --info: var(--atelier-blue);
  --shadow-sm: 0 1px 1px rgba(20, 24, 26, .025);
  --shadow-md: 0 12px 34px rgba(20, 24, 26, .06);
  --shadow-lg: 0 28px 70px rgba(12, 15, 16, .17);
}

html { background: var(--atelier-canvas); }
body {
  color: var(--atelier-text);
  background: var(--atelier-canvas);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  letter-spacing: -.008em;
}
::selection { color: #fff; background: var(--atelier-petrol); }
* { scrollbar-color: #aaa69d transparent; }
*::-webkit-scrollbar-thumb { background: #aaa69d; }
*::-webkit-scrollbar-thumb:hover { background: #8d8981; }

/* Brand and shell */
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  color: #d2b77e;
  background: transparent;
  border: 1px solid rgba(210,183,126,.58);
  box-shadow: none;
}
.brand-mark::before { display: none; }
.brand-mark span {
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 720;
  letter-spacing: -.08em;
  transform: none;
}
.brand-mark-large { width: 46px; height: 46px; border-radius: 6px; }
.brand-mark-large span { font-size: 21px; }

.app-shell { background: var(--atelier-canvas); }
.app-sidebar {
  width: 260px;
  color: #d8dcda;
  background: var(--atelier-ink-950);
  border-right: 1px solid #2a3033;
  box-shadow: none;
}
@media (min-width: 1024px) { .app-sidebar { flex-basis: 260px; } }
.app-sidebar-overlay { background: rgba(10,12,13,.58); backdrop-filter: none; }
.brand-lockup {
  height: 74px;
  gap: 11px;
  padding: 0 19px;
  border-bottom-color: #2a3033;
}
.brand-name { color: #f1f2ef; font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.brand-name span, .login-wordmark span { color: #c3a46b; }
.brand-subtitle {
  margin-top: 4px;
  color: #6f787c;
  font-size: 8px;
  font-weight: 620;
  letter-spacing: .12em;
}
.sidebar-context { padding: 20px 19px 12px; gap: 4px; }
.sidebar-context-label { color: #697276; font-size: 8px; letter-spacing: .13em; }
.sidebar-context strong { color: #e8eae7; font-size: 13px; font-weight: 610; }
.context-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #747e80; font-size: 8px; }
.context-state i { width: 5px; height: 5px; border-radius: 50%; background: #6f9f8c; box-shadow: none; }
.sidebar-nav { padding: 9px 9px 20px; }
.nav-link {
  min-height: 44px;
  gap: 11px;
  margin: 2px 0;
  padding: 0 11px;
  border-radius: 5px;
  color: #8e979a;
  font-size: 12px;
  font-weight: 570;
  transform: none;
}
.nav-link:hover { color: #e7e9e6; background: #202529; transform: none; }
.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #7d878a;
  background: transparent;
  border: 1px solid transparent;
}
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-chevron { display: none; }
.nav-link.active {
  color: #fff;
  background: #272d30;
  box-shadow: inset 0 0 0 1px #30373a;
}
.nav-link.active .nav-icon { color: #9cc3ba; background: #202827; border-color: #34413f; }
.nav-link.active::before {
  left: -9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0;
  background: #8bb8ae;
  box-shadow: none;
}
.sidebar-footer { padding: 15px 19px 20px; border-top-color: #2a3033; }
.sidebar-footer p { margin-top: 8px; color: #596266; font-size: 8px; }
.local-build-pill {
  gap: 6px;
  color: #bca471;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 8px;
  letter-spacing: .08em;
}
.sidebar-close { border-radius: 4px; background: #22282b; color: #a6adaf; }

.app-main { background: var(--atelier-canvas); }
.app-header {
  height: 72px;
  padding: 0 26px;
  color: var(--atelier-text);
  background: rgba(248,247,243,.96);
  border-bottom: 1px solid var(--atelier-line);
  box-shadow: none;
  backdrop-filter: none;
}
.page-title { color: #1b2023; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.page-kicker { margin-top: 4px; color: #8a9093; font-size: 8px; font-weight: 600; letter-spacing: .075em; }
.page-kicker i { width: 2px; height: 2px; border-radius: 50%; background: #9d988e; }
.header-date { gap: 7px; height: 34px; color: #777e82; font-size: 9px; }
.header-live { display: none !important; }
.header-icon-btn { border-radius: 5px; color: #747c80; }
.header-icon-btn:hover { color: #1d2326; background: #eceae5; border-color: #d8d4cb; }
.header-icon-btn.danger-hover:hover { color: var(--atelier-red); background: #f5eae7; border-color: #ead2cd; }
.language-control {
  height: 36px;
  padding: 0 9px;
  color: #687075;
  background: transparent;
  border-color: #d2cec5;
  border-radius: 5px;
  box-shadow: none;
}
.language-control i { color: var(--atelier-brass); }
.language-control select { color: #394044; font-size: 11px; font-weight: 580; }
.user-block { border-left-color: #d5d1c8; }
.avatar {
  width: 34px;
  height: 34px;
  color: #f4f5f2;
  background: #25302f;
  border-radius: 5px;
  box-shadow: none;
}
.user-copy strong { color: #2a3033; font-size: 11px; font-weight: 650; }
.user-copy span { color: #8d9396; font-size: 8px; }
.content-area { max-width: 1540px; padding: 38px 34px 60px; }

/* Shared surfaces and controls */
.page-intro { margin-bottom: 22px; }
.page-intro-icon {
  width: 40px;
  height: 40px;
  color: var(--atelier-petrol);
  background: var(--atelier-petrol-soft);
  border: 1px solid #cbdcd7;
  border-radius: 5px;
  box-shadow: none;
}
.page-intro h1 { color: #1a1f21; font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.page-intro p { color: #727a7e; font-size: 11px; }
.panel,
.table-wrap,
.mobile-card,
.modal-panel,
.surface-section {
  background: var(--atelier-paper);
  border: 1px solid var(--atelier-line);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.panel-pad { padding: 24px; }
.panel-toolbar { margin-bottom: 18px; padding-bottom: 15px; border-bottom-color: var(--atelier-line); }
.panel-toolbar h2 { color: #202527; font-size: 14px; font-weight: 650; }
.panel-toolbar p { color: #7e8588; font-size: 10px; }
.count-pill { color: #5f6669; background: #efede8; border-color: #dcd8cf; border-radius: 4px; }

.btn {
  min-height: 39px;
  border-radius: 5px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 630;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { transform: none; }
.btn-primary {
  color: #fff;
  background: var(--atelier-petrol-dark);
  border-color: var(--atelier-petrol-dark);
  box-shadow: none;
}
.btn-primary:hover { background: #0b403c; border-color: #0b403c; box-shadow: none; }
.btn-secondary { color: #32383b; background: #f7f5f1; border-color: #d4d0c7; box-shadow: none; }
.btn-secondary:hover { color: #171b1d; background: #fff; border-color: #bbb6ac; }
.btn-danger { box-shadow: none; }
.field,
.search-field,
.filter-select,
.field-inline {
  color: #202527;
  background: #fff;
  border-color: #d3cfc6;
  border-radius: 5px;
}
.field:focus,
.search-field:focus,
.filter-select:focus,
.field-inline:focus {
  border-color: #6a9a91;
  box-shadow: 0 0 0 2px rgba(23,106,99,.11);
}
.field-label { color: #60686c; font-size: 9px; font-weight: 650; letter-spacing: .045em; }

.table-wrap { overflow: hidden; box-shadow: none; }
.data-table { font-size: 12px; }
.data-table thead { background: #eeece7; }
.data-table th { padding: 12px 14px; color: #6b7276; font-size: 8px; letter-spacing: .08em; border-bottom-color: #d4d0c7; }
.data-table td { padding: 14px; color: #343a3d; border-bottom-color: #e3e0d9; }
.data-table tbody tr:hover { background: #f5f3ef; }
.badge { min-height: 22px; border-radius: 4px; font-size: 8px; font-weight: 650; }
.badge::before { width: 4px; height: 4px; }
.mobile-card { border-radius: 6px; }
.empty-icon { border-radius: 5px; color: var(--atelier-petrol); background: var(--atelier-petrol-soft); border-color: #cfddd9; }
.modal-overlay { background: rgba(16,19,21,.58); backdrop-filter: none; }
.modal-panel { border-radius: 7px; }
.modal-header { background: #f8f7f3; border-bottom-color: var(--atelier-line); }
.modal-header h3 i { color: var(--atelier-petrol); }
.toast { border-radius: 5px; }
.loading-ring { border-color: #d4d0c7; border-top-color: var(--atelier-petrol); }
.loading-state { color: #7a8184; }

/* Editorial dashboard */
.overview-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--atelier-line-strong);
}
.overview-meta { display: flex; align-items: center; gap: 8px; color: #777e81; font-size: 9px; font-weight: 620; letter-spacing: .035em; }
.overview-meta i { width: 3px; height: 3px; border-radius: 50%; background: #9a958b; }
.overview-copy h1 { margin: 10px 0 7px; color: #15191b; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; font-weight: 610; letter-spacing: -.055em; }
.overview-copy p { margin: 0; color: #6f777a; font-size: 11px; line-height: 1.65; }
.overview-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.as-of-block { min-width: 112px; margin-right: 5px; padding-right: 17px; border-right: 1px solid var(--atelier-line-strong); text-align: right; }
.as-of-block span, .as-of-block strong { display: block; }
.as-of-block span { color: #949a9c; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.as-of-block strong { margin-top: 5px; color: #353b3e; font-size: 10px; font-weight: 620; }

.summary-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--atelier-paper);
  border: 1px solid var(--atelier-line);
  border-radius: 6px;
}
.ledger-metric { min-height: 135px; padding: 21px 22px 18px; border-right: 1px solid var(--atelier-line); }
.ledger-metric:last-child { border-right: 0; }
.ledger-metric-top { display: flex; align-items: center; gap: 9px; }
.ledger-index { color: #aaa59b; font-size: 8px; font-weight: 650; letter-spacing: .08em; }
.ledger-label { color: #5f676a; font-size: 10px; font-weight: 620; }
.ledger-metric > strong { display: block; margin-top: 18px; color: #1a1f21; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; font-weight: 620; letter-spacing: -.045em; }
.ledger-metric > small { display: block; margin-top: 10px; color: #858c8f; font-size: 9px; }

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .75fr); gap: 16px; margin-bottom: 16px; }
.surface-section { padding: 23px; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 19px; padding-bottom: 16px; border-bottom: 1px solid var(--atelier-line); }
.section-heading.compact { margin-bottom: 10px; }
.section-heading > div:first-child > span { display: block; margin-bottom: 6px; color: var(--atelier-brass); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.section-heading h2 { margin: 0; color: #1c2123; font-size: 16px; font-weight: 640; letter-spacing: -.025em; }
.section-heading p { margin: 6px 0 0; color: #858b8e; font-size: 9px; line-height: 1.5; }
.section-number { flex: 0 0 auto; text-align: right; }
.section-number strong, .section-number span { display: block; }
.section-number strong { color: #202527; font-size: 22px; font-weight: 620; }
.section-number span { margin-top: 4px; color: #92989a; font-size: 8px; }
.operations-list { display: grid; }
.operations-row {
  display: grid;
  grid-template-columns: 28px minmax(125px, .8fr) minmax(160px, 1.4fr) 52px;
  align-items: center;
  gap: 13px;
  min-height: 55px;
  border-bottom: 1px solid #e4e1da;
}
.operations-row:last-child { border-bottom: 0; }
.operations-row:hover .operations-name { color: var(--atelier-petrol-dark); }
.operations-index { color: #aaa69d; font-size: 8px; letter-spacing: .08em; }
.operations-name { color: #444b4e; font-size: 10px; font-weight: 610; transition: color .12s; }
.operations-track { height: 3px; background: #dedbd4; }
.operations-track i { display: block; height: 100%; background: #638f87; }
.operations-row > strong { color: #252a2c; font-size: 13px; font-weight: 650; text-align: right; }
.action-list { display: grid; }
.action-row { display: grid; grid-template-columns: 7px 1fr auto 12px; align-items: center; gap: 10px; min-height: 68px; border-bottom: 1px solid #e3e0d9; }
.action-row:last-child { border-bottom: 0; }
.action-row:hover .action-copy strong { color: var(--atelier-petrol-dark); }
.action-marker { width: 5px; height: 22px; background: #8b8f8d; }
.action-contract .action-marker { background: #7a6d8a; }
.action-installation .action-marker { background: #527b8e; }
.action-settlement .action-marker { background: #9b7a43; }
.action-copy { min-width: 0; }
.action-copy strong, .action-copy small { display: block; }
.action-copy strong { color: #3c4346; font-size: 10px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-copy small { margin-top: 4px; color: #999e9f; font-size: 8px; }
.action-value { color: #202527; font-size: 19px; font-weight: 620; letter-spacing: -.03em; }
.action-row > i { color: #a2a6a7; font-size: 8px; }

.recent-ledger { padding-bottom: 13px; }
.recent-heading { align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--atelier-petrol); font-size: 9px; font-weight: 650; }
.text-link:hover { color: var(--atelier-petrol-dark); }
.ledger-table-head, .ledger-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(120px, .55fr) minmax(100px, .45fr) minmax(90px, .4fr); gap: 16px; align-items: center; }
.ledger-table-head { padding: 0 7px 9px; color: #8b9193; font-size: 8px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.ledger-table-head span:nth-child(n+2) { text-align: right; }
.ledger-row { min-height: 60px; padding: 8px 7px; border-top: 1px solid #e1ded7; }
.ledger-primary { min-width: 0; }
.ledger-primary strong, .ledger-primary small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger-primary strong { color: #303638; font-size: 10px; font-weight: 630; }
.ledger-primary small { margin-top: 5px; color: #8a9193; font-size: 8px; }
.ledger-amount { color: #2f3537; font-size: 10px; font-weight: 650; text-align: right; }
.ledger-row > div:nth-child(3) { justify-self: end; }
.ledger-row time { color: #848b8d; font-size: 8px; text-align: right; }

/* Login: quiet, architectural and deliberately non-template-like */
.login-page {
  padding: 30px;
  background: var(--atelier-canvas);
}
.login-page::before, .login-ambient { display: none; }
.login-shell {
  width: min(1160px, 100%);
  min-height: 680px;
  grid-template-columns: .88fr 1.12fr;
  overflow: hidden;
  background: var(--atelier-paper);
  border: 1px solid #cbc7be;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.login-brand-panel {
  padding: 40px;
  color: #fff;
  background: var(--atelier-ink-950);
  border-right: 1px solid #2b3134;
}
.login-brand-panel::before, .login-brand-panel::after { display: none; }
.login-platform { color: #707a7d; font-size: 8px; }
.version-badge { color: #c8ac74; background: transparent; border-color: #5d5039; border-radius: 4px; }
.login-brand-content { margin: 88px 0 76px; }
.eyebrow { color: #8d9698; font-size: 8px; }
.eyebrow span { background: #b5945b; box-shadow: none; }
.login-brand-content h1 { max-width: 470px; margin: 18px 0; font-size: clamp(31px, 3.5vw, 50px); line-height: 1.08; font-weight: 560; letter-spacing: -.055em; }
.login-brand-content > p { color: #9da5a6; font-size: 11px; line-height: 1.8; }
.feature-list { gap: 0; margin-top: 38px; border-top: 1px solid #303639; }
.feature-item { min-height: 55px; gap: 12px; border-bottom: 1px solid #303639; }
.feature-item > span { width: 29px; height: 29px; color: #bca36f; background: transparent; border: 0; border-radius: 0; font-size: 9px; font-weight: 650; }
.feature-item p { color: #b0b7b7; font-size: 10px; }
.login-disclaimer { color: #6b7477; font-size: 8px; }
.login-form-panel { padding: 48px 58px; background: var(--atelier-paper); }
.login-form-header h2 { color: #1a1f21; font-size: 28px; font-weight: 620; }
.login-form-header p { color: #7b8285; font-size: 10px; }
@media (max-width: 1180px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .summary-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-metric:nth-child(2n) { border-right: 0; }
  .ledger-metric:nth-child(n+3) { border-top: 1px solid var(--atelier-line); }
}
@media (max-width: 1023px) {
  .app-sidebar { width: 260px; }
  .content-area { padding: 30px 24px 48px; }
}
@media (max-width: 760px) {
  .overview-header { align-items: flex-start; flex-direction: column; }
  .overview-actions { width: 100%; flex-wrap: wrap; }
  .as-of-block { margin-right: auto; text-align: left; border-right: 0; padding-right: 0; }
  .ledger-table-head { display: none; }
  .ledger-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .ledger-amount { grid-column: 1; text-align: left; }
  .ledger-row > div:nth-child(3) { grid-column: 2; grid-row: 1; }
  .ledger-row time { grid-column: 2; grid-row: 2; }
}
@media (max-width: 640px) {
  .app-header { height: 66px; padding: 0 13px; }
  .content-area { padding: 24px 12px 38px; }
  .overview-copy h1 { font-size: 30px; }
  .overview-actions .btn { flex: 1; }
  .summary-ledger { grid-template-columns: 1fr; }
  .ledger-metric { min-height: 116px; border-right: 0; border-top: 1px solid var(--atelier-line); }
  .ledger-metric:first-child { border-top: 0; }
  .operations-row { grid-template-columns: 24px 1fr 46px; }
  .operations-track { grid-column: 2 / -1; }
  .surface-section { padding: 18px; }
  .login-page { padding: 0; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; }
}

/* ============================================================
   WPPEI CRM v011 — Aurelia Command System
   A disciplined enterprise interface with a bespoke navigation model,
   high-contrast operational surfaces and a single signature ultramarine.
   ============================================================ */
:root {
  --aurelia-ink: #12161c;
  --aurelia-ink-2: #191e25;
  --aurelia-ink-3: #242a32;
  --aurelia-canvas: #eef0f2;
  --aurelia-canvas-warm: #f3f2ef;
  --aurelia-paper: #fdfdfc;
  --aurelia-paper-2: #f8f8f6;
  --aurelia-line: #d9dde1;
  --aurelia-line-strong: #c8cdd3;
  --aurelia-text: #171b21;
  --aurelia-muted: #68717c;
  --aurelia-muted-2: #939aa3;
  --aurelia-ultra: #3f54c7;
  --aurelia-ultra-dark: #3143a7;
  --aurelia-ultra-soft: #eceeff;
  --aurelia-copper: #a58a5f;
  --aurelia-green: #2c745e;
  --aurelia-amber: #a66f2e;
  --aurelia-violet: #745b9d;
  --aurelia-red: #b54a4d;
  --canvas: var(--aurelia-canvas);
  --surface: var(--aurelia-paper);
  --surface-soft: var(--aurelia-paper-2);
  --line: var(--aurelia-line);
  --line-strong: var(--aurelia-line-strong);
  --text: var(--aurelia-text);
  --muted: var(--aurelia-muted);
  --muted-2: var(--aurelia-muted-2);
  --success: var(--aurelia-green);
  --warning: var(--aurelia-amber);
  --danger: var(--aurelia-red);
  --info: var(--aurelia-ultra);
  --shadow-sm: 0 1px 2px rgba(18, 22, 28, .025), 0 4px 14px rgba(18, 22, 28, .025);
  --shadow-md: 0 18px 50px -28px rgba(18, 22, 28, .28), 0 2px 8px rgba(18, 22, 28, .035);
  --shadow-lg: 0 38px 100px -38px rgba(8, 10, 14, .48);
}

html, body { background: var(--aurelia-canvas); }
body {
  color: var(--aurelia-text);
  background: var(--aurelia-canvas);
  font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv05' 1;
  letter-spacing: -.009em;
}
body.command-open { overflow: hidden; }
::selection { color: #fff; background: var(--aurelia-ultra); }

/* Shell and navigation */
.app-shell {
  min-height: 100vh;
  background: var(--aurelia-canvas);
}
.app-sidebar {
  width: 272px;
  flex-basis: 272px;
  color: #d7dbe0;
  background: var(--aurelia-ink);
  border-right: 1px solid #262c34;
  box-shadow: none;
  transition: width .22s cubic-bezier(.2,.8,.2,1), flex-basis .22s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 1024px) {
  .app-sidebar { flex-basis: 272px; }
  .app-shell.sidebar-collapsed .app-sidebar { width: 82px; flex-basis: 82px; }
}
.brand-lockup {
  height: 78px;
  padding: 0 18px;
  gap: 12px;
  border-bottom: 1px solid #272d35;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid #4a4d48;
  border-radius: 8px;
  color: #d7c29b;
  background: #1c2127;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.brand-mark span { font-size: 17px; font-weight: 760; letter-spacing: -.09em; }
.brand-mark-large { width: 50px; height: 50px; border-radius: 10px; }
.brand-mark-large span { font-size: 23px; }
.brand-copy { transition: opacity .15s, width .2s; }
.brand-name { color: #f4f5f6; font-size: 15px; font-weight: 700; letter-spacing: -.025em; }
.brand-name span { margin-left: 3px; color: #a58a5f; font-size: 7px; vertical-align: top; }
.brand-subtitle { margin-top: 5px; color: #666f79; font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.sidebar-collapse {
  margin-left: auto;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: #717a84;
  background: transparent;
  border: 1px solid #2d343d;
  border-radius: 6px;
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
}
.sidebar-collapse:hover { color: #fff; background: #232931; border-color: #3b434d; }
.sidebar-context {
  padding: 20px 18px 14px;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.sidebar-context-label { color: #626b75; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.sidebar-context strong { color: #e6e8ea; font-size: 12px; font-weight: 620; }
.context-state { margin-top: 5px; color: #737d87; font-size: 8px; }
.context-state i { width: 5px; height: 5px; background: #62a88d; box-shadow: 0 0 0 3px rgba(98,168,141,.08); }
.sidebar-nav { padding: 12px 10px 22px; }
.nav-group + .nav-group { margin-top: 18px; }
.nav-group-label {
  height: 20px;
  padding: 0 10px;
  color: #545d67;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.nav-link {
  min-height: 44px;
  margin: 2px 0;
  padding: 0 10px;
  gap: 11px;
  color: #939ba5;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 570;
  transform: none;
  transition: color .14s, background .14s;
}
.nav-link:hover { color: #eef0f2; background: #1d232a; transform: none; }
.nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #7f8994;
  background: transparent;
  border: 1px solid transparent;
  transition: color .14s, background .14s, border-color .14s;
}
.nav-label { flex: 1; }
.nav-shortcut { width: 12px; color: #616a74; font-size: 7px; text-align: center; }
.nav-link.active {
  color: #fff;
  background: #222934;
  box-shadow: inset 0 0 0 1px #2c3440;
}
.nav-link.active::before {
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #7f91ff;
  box-shadow: none;
}
.nav-link.active .nav-icon {
  color: #aab4ff;
  background: #252d48;
  border-color: #343f67;
}
.sidebar-footer { padding: 17px 18px 20px; border-top: 1px solid #272d35; }
.environment-row { display: flex; align-items: center; gap: 7px; color: #737d87; font-size: 8px; }
.environment-row strong { margin-left: auto; color: #aaa089; font-size: 8px; font-weight: 700; }
.environment-dot { width: 6px; height: 6px; border-radius: 50%; background: #5b9e83; }
.sidebar-footer p { margin: 8px 0 0; color: #515a64; font-size: 7px; line-height: 1.45; }

@media (min-width: 1024px) {
  .sidebar-collapsed .brand-lockup { justify-content: center; padding: 0 12px; }
  .sidebar-collapsed .brand-copy,
  .sidebar-collapsed .sidebar-context,
  .sidebar-collapsed .nav-group-label,
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .nav-shortcut,
  .sidebar-collapsed .sidebar-footer p,
  .sidebar-collapsed .environment-row span,
  .sidebar-collapsed .environment-row strong { display: none; }
  .sidebar-collapsed .sidebar-collapse { position: absolute; top: 86px; right: 24px; margin: 0; }
  .sidebar-collapsed .sidebar-nav { padding: 54px 10px 20px; }
  .sidebar-collapsed .nav-group + .nav-group { margin-top: 9px; padding-top: 9px; border-top: 1px solid #272d35; }
  .sidebar-collapsed .nav-link { justify-content: center; padding: 0; }
  .sidebar-collapsed .nav-icon { width: 34px; height: 34px; }
  .sidebar-collapsed .nav-link.active::before { left: -10px; }
  .sidebar-collapsed .sidebar-footer { display: flex; justify-content: center; }
}

/* Header and global command */
.app-main { background: var(--aurelia-canvas); }
.app-header {
  height: 76px;
  padding: 0 26px;
  color: var(--aurelia-text);
  background: rgba(253,253,252,.94);
  border-bottom: 1px solid var(--aurelia-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(120%);
}
.header-left { min-width: 210px; }
.header-title-block { min-width: 0; }
.header-breadcrumb { display: flex; align-items: center; gap: 7px; color: #8d949d; font-size: 8px; line-height: 1; }
.header-breadcrumb i { font-size: 5px; color: #b1b6bc; }
.header-breadcrumb strong { color: #5f6771; font-weight: 620; }
.page-title { margin-top: 7px; color: #171b21; font-size: 17px; font-weight: 680; letter-spacing: -.03em; }
.page-kicker { display: none; }
.command-trigger {
  width: min(340px, 30vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 13px;
  color: #818993;
  background: #f5f6f7;
  border: 1px solid #dfe2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.command-trigger:hover { color: #59626d; background: #fff; border-color: #ccd1d6; box-shadow: 0 4px 14px rgba(20,24,30,.045); }
.command-trigger > span { flex: 1; text-align: left; font-size: 10px; }
.command-trigger kbd,
.command-input-wrap kbd,
.command-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 21px;
  padding: 0 6px;
  color: #737b85;
  background: #fff;
  border: 1px solid #d7dbe0;
  border-bottom-color: #c6cbd1;
  border-radius: 5px;
  box-shadow: 0 1px 0 #d5d9de;
  font-family: inherit;
  font-size: 7px;
  font-weight: 650;
}
.header-date { height: 34px; color: #8a929b; font-size: 9px; }
.language-control { height: 36px; border-radius: 7px; border-color: #d9dde1; background: #fff; }
.language-control i { color: var(--aurelia-ultra); }
.language-control select { color: #4d5661; font-size: 10px; }
.user-block { border-left-color: #dde0e4; }
.avatar { width: 34px; height: 34px; color: #fff; background: #242a32; border-radius: 8px; }
.user-copy strong { color: #242931; font-size: 10px; }
.user-copy span { color: #8e959e; font-size: 8px; }
.header-icon-btn { border-radius: 7px; }
.header-icon-btn:hover { background: #f1f2f4; border-color: #dce0e4; }
.content-area { width: 100%; max-width: 1600px; padding: 34px 34px 58px; }

.command-palette { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 12vh 18px 30px; }
.command-palette.is-open { display: flex; }
.command-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15,18,23,.52); backdrop-filter: blur(5px); cursor: default; }
.command-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  overflow: hidden;
  background: #fdfdfc;
  border: 1px solid #cfd3d8;
  border-radius: 12px;
  box-shadow: 0 34px 100px -24px rgba(8,11,16,.56), 0 10px 30px rgba(8,11,16,.12);
  animation: command-in .16s ease-out;
}
@keyframes command-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.command-input-wrap { height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #e0e3e6; }
.command-input-wrap > i { color: var(--aurelia-ultra); }
.command-input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1d2229; font-size: 14px; }
.command-input-wrap input::placeholder { color: #9ca2aa; }
.command-caption { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: #9299a1; background: #f7f7f5; border-bottom: 1px solid #e5e6e5; font-size: 7px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.command-caption small { min-width: 21px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: #5e6670; background: #e9ebee; border-radius: 999px; font-size: 7px; }
.command-results { max-height: 370px; overflow-y: auto; padding: 7px; }
.command-result { width: 100%; min-height: 58px; display: grid; grid-template-columns: 38px 1fr 26px; align-items: center; gap: 11px; padding: 0 11px; color: #2d333b; background: transparent; border: 0; border-radius: 8px; text-align: left; cursor: pointer; }
.command-result.is-selected { background: var(--aurelia-ultra-soft); }
.command-result-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #6b7480; background: #f0f1f2; border: 1px solid #e1e3e6; border-radius: 7px; }
.command-result.is-selected .command-result-icon { color: var(--aurelia-ultra); background: #fff; border-color: #cfd4f7; }
.command-result-copy strong, .command-result-copy small { display: block; }
.command-result-copy strong { font-size: 10px; font-weight: 650; }
.command-result-copy small { margin-top: 4px; color: #969ca4; font-size: 8px; }
.command-result-enter { color: #a6abb2; font-size: 8px; text-align: center; }
.command-empty { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: #969da5; font-size: 10px; }
.command-empty i { font-size: 21px; }
.command-footer { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 14px; color: #9198a0; background: #f7f7f5; border-top: 1px solid #e3e5e7; font-size: 7px; }
.command-footer span { display: inline-flex; align-items: center; gap: 5px; }
.command-footer kbd { min-width: 20px; height: 18px; padding: 0 4px; }

/* Shared enterprise surfaces */
.page-intro { margin-bottom: 22px; }
.page-intro-icon { width: 42px; height: 42px; color: var(--aurelia-ultra); background: var(--aurelia-ultra-soft); border-color: #d7dbfb; border-radius: 8px; }
.page-intro h1 { color: #191d23; font-size: 24px; font-weight: 680; }
.page-intro p { color: #717984; font-size: 11px; }
.panel,
.table-wrap,
.mobile-card,
.modal-panel,
.cockpit-panel {
  background: var(--aurelia-paper);
  border: 1px solid var(--aurelia-line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.panel-pad { padding: 24px; }
.panel-toolbar { border-bottom-color: #e2e4e7; }
.panel-toolbar h2 { color: #252a31; font-size: 14px; }
.panel-toolbar p { color: #828a94; font-size: 9px; }
.count-pill { color: #5e6670; background: #eff1f3; border-color: #dfe2e5; border-radius: 6px; }
.btn { min-height: 40px; padding: 0 15px; border-radius: 7px; font-size: 10px; font-weight: 650; letter-spacing: -.005em; }
.btn:hover { transform: none; }
.btn-primary { color: #fff; background: var(--aurelia-ultra); border-color: var(--aurelia-ultra); box-shadow: 0 5px 14px rgba(63,84,199,.16); }
.btn-primary:hover { background: var(--aurelia-ultra-dark); border-color: var(--aurelia-ultra-dark); box-shadow: 0 7px 18px rgba(49,67,167,.2); }
.btn-secondary { color: #3d454f; background: #fff; border-color: #d5d9de; }
.btn-secondary:hover { color: #20252c; background: #f8f9fa; border-color: #c5cad0; }
.field,
.search-field,
.filter-select,
.field-inline { color: #22272e; background: #fff; border-color: #d5d9de; border-radius: 7px; }
.field:focus,
.search-field:focus,
.filter-select:focus,
.field-inline:focus { border-color: #8897e4; box-shadow: 0 0 0 3px rgba(63,84,199,.10); }
.field-label { color: #59626d; font-size: 9px; letter-spacing: .035em; }
.table-wrap { box-shadow: none; }
.data-table { font-size: 11px; }
.data-table thead { background: #f2f3f4; }
.data-table th { padding: 12px 14px; color: #747c86; font-size: 8px; border-bottom-color: #d8dce0; }
.data-table td { padding: 14px; color: #353b43; border-bottom-color: #e5e7e9; }
.data-table tbody tr:hover { background: #f7f8fb; }
.badge { min-height: 22px; border-radius: 999px; font-size: 8px; }
.modal-overlay { background: rgba(15,18,23,.58); backdrop-filter: blur(3px); }
.modal-panel { border-radius: 11px; box-shadow: var(--shadow-lg); }

/* Executive dashboard */
.executive-header {
  min-height: 112px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 18px;
  padding: 0 2px 22px;
  border-bottom: 1px solid #d6dade;
}
.executive-copy { max-width: 780px; }
.executive-eyebrow { display: flex; align-items: center; gap: 8px; color: #838b95; font-size: 8px; font-weight: 650; letter-spacing: .055em; }
.executive-eyebrow i { width: 18px; height: 1px; background: #b9bec5; }
.executive-copy h1 { margin: 12px 0 8px; color: #15191f; font-size: clamp(30px, 3vw, 44px); line-height: 1; font-weight: 650; letter-spacing: -.055em; }
.executive-copy p { margin: 0; color: #707985; font-size: 11px; line-height: 1.65; }
.executive-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.executive-date { min-width: 118px; margin-right: 6px; padding-right: 18px; border-right: 1px solid #cfd3d7; text-align: right; }
.executive-date span, .executive-date strong { display: block; }
.executive-date span { color: #969da5; font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.executive-date strong { margin-top: 6px; color: #4b535d; font-size: 10px; font-weight: 620; }

.metric-deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.metric-tile {
  position: relative;
  min-height: 164px;
  overflow: hidden;
  padding: 18px 18px 15px;
  background: var(--aurelia-paper);
  border: 1px solid var(--aurelia-line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.metric-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--metric-color, var(--aurelia-ultra)); }
.metric-blue { --metric-color: #5269d3; }
.metric-violet { --metric-color: #7a64a8; }
.metric-green { --metric-color: #3d806b; }
.metric-amber { --metric-color: #aa7639; }
.metric-head { display: flex; align-items: center; justify-content: space-between; }
.metric-index { color: #a0a6ad; font-size: 7px; font-weight: 700; letter-spacing: .11em; }
.metric-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--metric-color); background: color-mix(in srgb, var(--metric-color) 9%, white); border: 1px solid color-mix(in srgb, var(--metric-color) 17%, white); border-radius: 7px; font-size: 10px; }
.metric-copy { margin-top: 15px; }
.metric-copy span { display: block; color: #66707b; font-size: 9px; font-weight: 620; }
.metric-copy strong { display: block; margin-top: 8px; color: #181c22; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; font-weight: 650; letter-spacing: -.045em; }
.metric-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; }
.metric-foot span { min-width: 0; color: #858d96; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-foot small { color: var(--metric-color); font-size: 8px; font-weight: 680; white-space: nowrap; }
.metric-progress { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: #e8eaec; }
.metric-progress i { display: block; height: 100%; background: var(--metric-color); }

.cockpit-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); gap: 14px; margin-bottom: 14px; }
.cockpit-panel { padding: 22px; }
.panel-heading-v11 { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 13px; padding-bottom: 16px; border-bottom: 1px solid #e1e4e7; }
.panel-heading-v11 > div:first-child > span { display: block; margin-bottom: 6px; color: var(--aurelia-ultra); font-size: 7px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.panel-heading-v11 h2 { margin: 0; color: #1c2128; font-size: 15px; font-weight: 660; letter-spacing: -.025em; }
.panel-heading-v11 p { margin: 6px 0 0; color: #878e97; font-size: 8px; line-height: 1.5; }
.panel-heading-row { align-items: center; }
.attention-total { flex: 0 0 auto; padding-left: 18px; border-left: 1px solid #e0e3e6; text-align: right; }
.attention-total strong, .attention-total span { display: block; }
.attention-total strong { color: #252a31; font-size: 24px; font-weight: 650; }
.attention-total span { margin-top: 4px; color: #9299a2; font-size: 7px; }
.pipeline-list { display: grid; }
.pipeline-stage {
  min-height: 64px;
  display: grid;
  grid-template-columns: 28px minmax(150px, .8fr) minmax(130px, 1.35fr) 50px 14px;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #e7e9eb;
}
.pipeline-stage:last-child { border-bottom: 0; }
.pipeline-stage:hover .pipeline-title strong { color: var(--aurelia-ultra-dark); }
.pipeline-index { color: #a2a8af; font-size: 7px; letter-spacing: .1em; }
.pipeline-title strong, .pipeline-title small { display: block; }
.pipeline-title strong { color: #3a414a; font-size: 10px; font-weight: 630; transition: color .14s; }
.pipeline-title small { margin-top: 4px; color: #9aa0a7; font-size: 7px; }
.pipeline-bar { height: 4px; overflow: hidden; background: #e4e6e9; border-radius: 999px; }
.pipeline-bar i { display: block; height: 100%; background: var(--aurelia-ultra); border-radius: inherit; }
.pipeline-value { color: #242930; font-size: 13px; font-weight: 680; text-align: right; }
.pipeline-arrow { color: #b1b6bd; font-size: 7px; }
.decision-list { display: grid; }
.decision-item { min-height: 70px; display: grid; grid-template-columns: 36px 1fr auto 10px; align-items: center; gap: 10px; border-bottom: 1px solid #e5e7e9; }
.decision-item:last-child { border-bottom: 0; }
.decision-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 10px; }
.decision-contract .decision-icon { color: #725d99; background: #f0edf6; }
.decision-installation .decision-icon { color: #3c7284; background: #eaf1f3; }
.decision-settlement .decision-icon { color: #94682f; background: #f5efe6; }
.decision-copy strong, .decision-copy small { display: block; }
.decision-copy strong { color: #3a4149; font-size: 9px; font-weight: 630; }
.decision-copy small { margin-top: 4px; color: #9aa0a7; font-size: 7px; }
.decision-value { color: #1d2228; font-size: 18px; font-weight: 650; }
.decision-item > i { color: #b0b5bb; font-size: 7px; }

.insight-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); gap: 14px; }
.quiet-link { display: inline-flex; align-items: center; gap: 7px; color: var(--aurelia-ultra); font-size: 8px; font-weight: 650; }
.quiet-link:hover { color: var(--aurelia-ultra-dark); }
.contract-list { display: grid; }
.contract-row { min-height: 66px; display: grid; grid-template-columns: 34px minmax(200px, 1.4fr) minmax(100px, .5fr) minmax(90px, .4fr) minmax(82px, .35fr) 10px; align-items: center; gap: 12px; border-bottom: 1px solid #e5e7e9; }
.contract-row:last-child { border-bottom: 0; }
.contract-row:hover .contract-primary strong { color: var(--aurelia-ultra-dark); }
.contract-monogram { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #506078; background: #eef0f3; border: 1px solid #dfe2e6; border-radius: 7px; font-size: 9px; font-weight: 700; }
.contract-primary { min-width: 0; }
.contract-primary strong, .contract-primary small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contract-primary strong { color: #343b43; font-size: 9px; font-weight: 650; transition: color .14s; }
.contract-primary small { margin-top: 5px; color: #9097a0; font-size: 7px; }
.contract-amount { color: #333941; font-size: 9px; font-weight: 650; text-align: right; }
.contract-status { justify-self: end; }
.contract-row time { color: #8a929b; font-size: 8px; text-align: right; }
.contract-row > i { color: #b2b7bd; font-size: 7px; }
.health-score-row { display: flex; align-items: center; gap: 17px; padding: 4px 0 18px; border-bottom: 1px solid #e3e5e8; }
.health-gauge { --score: 0; width: 86px; height: 86px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--aurelia-ultra) calc(var(--score) * 1%), #e5e7ea 0); }
.health-gauge::before { content: ''; grid-area: 1 / 1; width: 70px; height: 70px; border-radius: 50%; background: var(--aurelia-paper); }
.health-gauge > div { position: relative; z-index: 1; display: flex; align-items: baseline; }
.health-gauge strong { color: #20252c; font-size: 24px; font-weight: 650; letter-spacing: -.04em; }
.health-gauge span { color: #777f89; font-size: 8px; }
.health-summary strong, .health-summary span { display: block; }
.health-summary strong { color: #2d343c; font-size: 11px; font-weight: 650; }
.health-summary span { margin-top: 6px; color: #9299a2; font-size: 8px; }
.health-list { padding-top: 8px; }
.health-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e9eaec; }
.health-row:last-child { border-bottom: 0; }
.health-row span { color: #737b85; font-size: 8px; }
.health-row strong { color: #363d45; font-size: 9px; font-weight: 650; }
.health-row strong.is-good { color: var(--aurelia-green); }
.health-row strong.is-warning { color: var(--aurelia-amber); }

/* Login refinement */
.login-page { padding: 28px; background: #e9ebee; }
.login-shell { width: min(1200px, 100%); min-height: 700px; grid-template-columns: 1.02fr .98fr; border: 1px solid #cbd0d5; border-radius: 14px; box-shadow: 0 38px 110px -32px rgba(11,14,19,.44); }
.login-brand-panel { padding: 42px; background: var(--aurelia-ink); border-right-color: #292f37; }
.login-brand-content { margin: 95px 0 82px; }
.login-brand-content h1 { max-width: 520px; font-size: clamp(34px, 3.8vw, 54px); font-weight: 590; letter-spacing: -.06em; }
.login-brand-content > p { color: #9da4ad; }
.feature-list { border-top-color: #2b323a; }
.feature-item { border-bottom-color: #2b323a; }
.feature-item > span { color: #b7a174; }
.login-form-panel { padding: 52px 62px; background: #fdfdfc; }
.login-form-header h2 { font-size: 29px; font-weight: 660; }
@media (max-width: 1220px) {
  .metric-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-grid, .insight-grid { grid-template-columns: 1fr; }
  .command-trigger { width: 260px; }
}
@media (max-width: 1023px) {
  .app-sidebar { width: 272px; }
  .content-area { padding: 30px 24px 48px; }
  .command-trigger { width: 210px; }
  .command-trigger span { display: none; }
  .command-trigger { justify-content: space-between; }
}
@media (max-width: 820px) {
  .command-trigger { display: none; }
  .executive-header { align-items: flex-start; flex-direction: column; }
  .executive-actions { width: 100%; flex-wrap: wrap; }
  .executive-date { margin-right: auto; padding-right: 0; border-right: 0; text-align: left; }
  .contract-row { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 9px 0; }
  .contract-amount { grid-column: 2; text-align: left; }
  .contract-status { grid-column: 3; grid-row: 1; }
  .contract-row time { grid-column: 3; grid-row: 2; }
  .contract-row > i { display: none; }
}
@media (max-width: 640px) {
  .app-header { height: 68px; padding: 0 13px; }
  .header-breadcrumb { display: none; }
  .page-title { margin-top: 0; font-size: 15px; }
  .content-area { padding: 24px 12px 38px; }
  .executive-header { min-height: 0; padding-bottom: 18px; }
  .executive-copy h1 { font-size: 31px; }
  .executive-actions .btn { flex: 1; }
  .metric-deck { grid-template-columns: 1fr; }
  .metric-tile { min-height: 148px; }
  .cockpit-panel { padding: 17px; }
  .pipeline-stage { grid-template-columns: 25px 1fr 44px 10px; gap: 9px; }
  .pipeline-bar { grid-column: 2 / -1; }
  .pipeline-title small { display: none; }
  .command-palette { padding: 0; }
  .command-panel { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .command-results { max-height: calc(100vh - 138px); }
  .login-page { padding: 0; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; }
}

/* v011 readability calibration — designed for long desktop sessions */
.nav-group-label { font-size: 9px; }
.nav-link { font-size: 13px; }
.sidebar-context-label { font-size: 9px; }
.sidebar-context strong { font-size: 14px; }
.context-state, .environment-row { font-size: 9px; }
.sidebar-footer p { font-size: 9px; }
.header-breadcrumb { font-size: 10px; }
.page-title { font-size: 18px; }
.command-trigger > span { font-size: 12px; }
.header-date { font-size: 11px; }
.language-control select { font-size: 12px; }
.user-copy strong { font-size: 12px; }
.user-copy span { font-size: 10px; }
.btn { font-size: 12px; }
.field-label { font-size: 11px; }
.panel-toolbar h2 { font-size: 16px; }
.panel-toolbar p { font-size: 12px; }
.data-table { font-size: 13px; }
.data-table th { font-size: 10px; }
.data-table td { font-size: 13px; }
.badge { font-size: 10px; }
.executive-eyebrow { font-size: 10px; }
.executive-copy p { font-size: 13px; }
.executive-date span { font-size: 9px; }
.executive-date strong { font-size: 12px; }
.metric-index { font-size: 9px; }
.metric-copy span { font-size: 12px; }
.metric-foot span, .metric-foot small { font-size: 10px; }
.panel-heading-v11 > div:first-child > span { font-size: 9px; }
.panel-heading-v11 h2 { font-size: 17px; }
.panel-heading-v11 p { font-size: 11px; }
.attention-total span { font-size: 9px; }
.pipeline-index { font-size: 9px; }
.pipeline-title strong { font-size: 12px; }
.pipeline-title small { font-size: 10px; }
.pipeline-value { font-size: 15px; }
.decision-copy strong { font-size: 12px; }
.decision-copy small { font-size: 10px; }
.quiet-link { font-size: 10px; }
.contract-primary strong { font-size: 12px; }
.contract-primary small { font-size: 10px; }
.contract-amount { font-size: 12px; }
.contract-row time { font-size: 10px; }
.health-summary strong { font-size: 13px; }
.health-summary span { font-size: 10px; }
.health-row span { font-size: 11px; }
.health-row strong { font-size: 12px; }
.command-result-copy strong { font-size: 12px; }
.command-result-copy small { font-size: 10px; }
.command-footer, .command-caption { font-size: 9px; }

/* ============================================================
   WPPEI CRM v012 — Executive Readability Calibration
   Larger multilingual type, stronger contrast, quieter premium color system.
   ============================================================ */
:root {
  --aurelia-canvas: #f0f2f4;
  --aurelia-paper: #ffffff;
  --aurelia-paper-2: #f7f8fa;
  --aurelia-line: #d7dce2;
  --aurelia-line-strong: #c3cad2;
  --aurelia-text: #121920;
  --aurelia-muted: #4f5b66;
  --aurelia-muted-2: #6d7883;
  --aurelia-ultra: #354dc4;
  --aurelia-ultra-dark: #263ba5;
  --aurelia-ultra-soft: #edf0ff;
  --aurelia-green: #246b55;
  --aurelia-amber: #8d5b20;
  --aurelia-violet: #694f93;
  --aurelia-red: #a83e43;
  --text: var(--aurelia-text);
  --muted: var(--aurelia-muted);
  --muted-2: var(--aurelia-muted-2);
  --line: var(--aurelia-line);
  --line-strong: var(--aurelia-line-strong);
}

html { font-size: 16px; }
body {
  color: var(--aurelia-text);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.006em;
}

/* Navigation: readable without losing enterprise density */
.app-sidebar { color: #e1e5e9; }
.brand-name { font-size: 17px; font-weight: 720; }
.brand-name span { font-size: 9px; }
.brand-subtitle { color: #87919c; font-size: 9px; }
.sidebar-context-label { color: #89939e; font-size: 10px; }
.sidebar-context strong { color: #f3f5f7; font-size: 15px; font-weight: 650; }
.context-state { color: #9aa4ae; font-size: 11px; }
.nav-group-label { height: 24px; color: #7d8792; font-size: 10px; letter-spacing: .13em; }
.nav-link {
  min-height: 48px;
  color: #b8c0c9;
  font-size: 14px;
  font-weight: 590;
}
.nav-link:hover { color: #ffffff; background: #202731; }
.nav-link.active { color: #ffffff; background: #252d39; border-color: #343e4c; }
.nav-icon { color: #9aa5b0; font-size: 14px; }
.nav-shortcut { color: #87919b; font-size: 10px; }
.environment-row { color: #99a3ad; font-size: 11px; }
.environment-row strong { color: #c5b38e; font-size: 11px; }
.sidebar-footer p { color: #7e8994; font-size: 10px; }

/* Header and global controls */
.app-header { height: 82px; background: rgba(255,255,255,.97); }
.header-breadcrumb { color: #727d88; font-size: 11px; }
.header-breadcrumb strong { color: #4e5964; }
.page-title { margin-top: 8px; color: #10171e; font-size: 22px; font-weight: 720; }
.command-trigger { height: 42px; color: #66717d; background: #f6f7f8; }
.command-trigger > span { font-size: 13px; }
.command-trigger kbd,
.command-input-wrap kbd,
.command-footer kbd { font-size: 10px; }
.header-date { color: #68737e; font-size: 12px; }
.language-control { height: 40px; }
.language-control select { color: #333d47; font-size: 13px; font-weight: 620; }
.avatar { width: 38px; height: 38px; font-size: 13px; }
.user-copy { max-width: 176px; }
.user-copy strong { color: #1d252d; font-size: 13px; }
.user-copy span { color: #6f7a85; font-size: 11px; }
.header-icon-btn { width: 40px; height: 40px; font-size: 14px; }
.content-area { padding-top: 38px; }

/* Core controls and forms */
.btn { min-height: 44px; padding-inline: 18px; font-size: 14px; font-weight: 680; }
.btn-sm { min-height: 38px; font-size: 13px; }
.field-label { margin-bottom: 8px; color: #38434d; font-size: 13px; font-weight: 680; }
.field { min-height: 48px; color: #141d25; font-size: 15px; border-color: #cfd5dc; }
.field-lg { min-height: 54px; font-size: 16px; }
.field-inline, .search-field, .filter-select { min-height: 40px; font-size: 13px; }
.field::placeholder, .search-field::placeholder { color: #8b96a0; }
.form-error, .error-inline, .form-note { font-size: 13px; }

/* Page hierarchy and reusable panels */
.page-intro h1 { color: #111a22; font-size: 28px; font-weight: 730; }
.page-intro p { color: #596570; font-size: 14px; }
.panel, .cockpit-panel, .metric-tile { border-color: #d4dae0; }
.panel-toolbar h2 { color: #17212a; font-size: 19px; }
.panel-toolbar p { color: #5e6974; font-size: 14px; }
.count-pill { font-size: 12px; }
.empty-state { color: #68747f; }
.empty-state p { font-size: 14px; }

/* Tables and mobile records */
.data-table { color: #202a33; font-size: 14px; }
.data-table thead { background: #f4f6f8; }
.data-table th {
  padding: 14px 16px;
  color: #55616d;
  font-size: 12px;
  font-weight: 740;
  letter-spacing: .045em;
}
.data-table td {
  padding: 16px;
  color: #293640;
  font-size: 14px;
  line-height: 1.55;
}
.mobile-card-title { font-size: 16px; }
.mc-label { color: #68747f; font-size: 12px; }
.mc-value { color: #28343e; font-size: 13px; }
.badge { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.text-action, .quiet-link { font-size: 12px; }

/* Modal, toast and command palette */
.modal-header h3 { color: #17212a; font-size: 18px; }
.modal-body { color: #28343e; font-size: 14px; }
.toast { max-width: 440px; font-size: 14px; }
.command-input-wrap input { font-size: 16px; }
.command-caption { color: #6f7984; font-size: 10px; }
.command-caption small { font-size: 10px; }
.command-result-copy strong { color: #222c35; font-size: 14px; }
.command-result-copy small { color: #68737e; font-size: 12px; }
.command-result-enter, .command-empty, .command-footer { font-size: 11px; }

/* Executive dashboard */
.executive-eyebrow { color: #526070; font-size: 11px; }
.executive-copy h1 { color: #111920; font-size: clamp(34px, 3vw, 45px); font-weight: 680; }
.executive-copy p { color: #53606b; font-size: 15px; line-height: 1.7; }
.executive-date span { color: #68747f; font-size: 11px; }
.executive-date strong { color: #222c34; font-size: 14px; }
.metric-index { color: #757f89; font-size: 10px; }
.metric-copy span { color: #4f5b66; font-size: 14px; }
.metric-copy strong { color: #111820; font-size: clamp(30px, 2.5vw, 40px); }
.metric-foot span { color: #68747f; font-size: 12px; }
.metric-foot small { font-size: 12px; }
.panel-heading-v11 > div:first-child > span { font-size: 10px; }
.panel-heading-v11 h2 { color: #161e26; font-size: 20px; }
.panel-heading-v11 p { color: #5b6671; font-size: 13px; }
.attention-total strong { font-size: 28px; }
.attention-total span { color: #68747f; font-size: 11px; }
.pipeline-index { color: #77828c; font-size: 10px; }
.pipeline-title strong { color: #27323c; font-size: 14px; }
.pipeline-title small { color: #68747f; font-size: 12px; }
.pipeline-value { color: #171f27; font-size: 18px; }
.pipeline-arrow { font-size: 10px; }
.decision-item { min-height: 78px; }
.decision-copy strong { color: #27323c; font-size: 14px; }
.decision-copy small { color: #68747f; font-size: 12px; }
.decision-value { font-size: 22px; }
.contract-row { min-height: 74px; }
.contract-monogram { width: 34px; height: 34px; font-size: 11px; }
.contract-primary strong { color: #252f38; font-size: 14px; }
.contract-primary small { color: #68747f; font-size: 12px; }
.contract-amount { color: #222c35; font-size: 14px; }
.contract-row time { color: #68747f; font-size: 12px; }
.health-gauge strong { font-size: 28px; }
.health-gauge span { color: #616d78; font-size: 11px; }
.health-summary strong { color: #27323c; font-size: 15px; }
.health-summary span { color: #68747f; font-size: 12px; }
.health-row { min-height: 48px; }
.health-row span { color: #56626d; font-size: 13px; }
.health-row strong { color: #26313a; font-size: 14px; }

/* Login readability */
.login-platform { color: #929ca6; font-size: 10px; }
.login-brand-content > p { color: #b5bdc6; font-size: 15px; }
.login-disclaimer { color: #9ba5af; font-size: 12px; }
.login-form-header h2 { color: #111920; font-size: 32px; }
.login-form-header p { color: #596570; font-size: 14px; }
@media (max-width: 1023px) {
  .page-title { font-size: 20px; }
  .content-area { padding-top: 30px; }
}

@media (max-width: 640px) {
  html { font-size: 15px; }
  .app-header { height: 72px; }
  .page-title { font-size: 18px; }
  .nav-link { font-size: 14px; }
  .page-intro h1 { font-size: 24px; }
  .executive-copy h1 { font-size: 32px; }
  .executive-copy p { font-size: 14px; }
  .metric-copy strong { font-size: 34px; }
  .data-table td { font-size: 13px; }
  .login-form-header h2 { font-size: 29px; }
}

/* ============================================================
   WPPEI CRM v013 - Customer & contract workflow workspaces
   ============================================================ */
.btn-sm { min-height: 34px; padding: 0 11px; font-size: 13px; gap: 7px; }
.btn-success { background: #13775f; color: #fff; border-color: #13775f; }
.btn-success:hover { background: #0f654f; }
.btn-warning { background: #9a6a16; color: #fff; border-color: #9a6a16; }
.btn-warning:hover { background: #805611; }
.btn-danger { background: #fff; color: #aa2f37; border-color: #e5b8bc; }
.btn-danger:hover { background: #fff4f4; border-color: #d88d93; }
.hidden { display: none !important; }
.span-2 { grid-column: 1 / -1; }
.table-subline { display: block; margin-top: 4px; color: #6f7884; font-size: 12px; font-weight: 500; line-height: 1.45; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 210px; }
.rejection-inline { display: block; max-width: 210px; margin-top: 6px; color: #a13d43; line-height: 1.35; }

.customer-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid #d7dce3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 27, 38, .05);
  overflow: hidden;
}
.customer-summary-strip > div { padding: 20px 22px; border-right: 1px solid #e3e6eb; }
.customer-summary-strip > div:last-child { border-right: 0; }
.customer-summary-strip span { display: block; color: #68717e; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.customer-summary-strip strong { display: block; margin-top: 7px; color: #18202c; font-size: 27px; line-height: 1; }
.contract-summary-strip > div:nth-child(2) strong { color: #1f5e99; }
.contract-summary-strip > div:nth-child(3) strong { color: #a33c45; }
.contract-summary-strip > div:nth-child(4) strong { color: #16715a; }

.crm-filter-row { display: flex; gap: 12px; align-items: center; margin: 0 0 18px; }
.search-field { position: relative; flex: 1 1 420px; }
.search-field > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #7b8490; }
.search-field .field { padding-left: 42px; }
.compact-field { flex: 0 0 230px; }

.form-stack.wide-form { width: min(920px, calc(100vw - 48px)); }
.form-section-title { display: flex; align-items: center; gap: 13px; padding: 16px 0 9px; border-bottom: 1px solid #e2e5e9; }
.form-section-title:first-child { padding-top: 0; }
.form-section-title > span { display: inline-grid; place-items: center; width: 31px; height: 31px; border-radius: 6px; background: #172331; color: #fff; font-size: 11px; font-weight: 800; }
.form-section-title strong { display: block; font-size: 15px; color: #18212c; }
.form-section-title small { display: block; margin-top: 2px; color: #707985; font-size: 12px; }
.form-grid { display: grid; gap: 15px 18px; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #dce1e6; border-radius: 6px; background: #f7f8fa; color: #3c4652; }
.check-row input { margin-top: 3px; }
.upload-box { padding: 16px; border: 1px dashed #bfc7d0; border-radius: 7px; background: #fafbfc; }
.upload-box input[type=file] { display: block; width: 100%; margin-top: 7px; }
.upload-box small { display: block; margin-top: 8px; color: #737d89; }
.ownership-note { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #d9e2df; border-radius: 7px; background: #f3f8f6; grid-column: 1 / -1; }
.ownership-note > i { color: #17735b; font-size: 20px; }
.ownership-note strong, .ownership-note span { display: block; }
.ownership-note span { margin-top: 3px; color: #66716e; font-size: 12px; }
.duplicate-warning { display: flex; gap: 12px; padding: 14px; border: 1px solid #e2c37f; border-radius: 7px; background: #fffaf0; color: #594316; }
.duplicate-warning > i { margin-top: 2px; }
.duplicate-warning strong, .duplicate-warning span, .duplicate-warning small { display: block; }
.duplicate-warning span { margin-top: 5px; color: #5f6570; }
.duplicate-warning small { margin-top: 8px; color: #795f27; }
.sticky-actions { position: sticky; bottom: -20px; z-index: 2; margin: 10px -20px -20px; padding: 16px 20px; border-top: 1px solid #e0e4e8; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }

.detail-hero { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin: -2px -2px 18px; padding: 20px; border-radius: 8px; background: #172331; color: #fff; }
.detail-hero span { color: #b9c3ce; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.detail-hero h2 { margin: 5px 0 3px; font-size: 25px; }
.detail-hero p { color: #d2d8de; }
.detail-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-block, .detail-section { border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; }
.detail-block { padding: 17px; }
.detail-block h3, .detail-section h3 { margin: 0; color: #1d2732; font-size: 15px; }
.detail-list { margin: 12px 0 0; }
.detail-list > div { display: grid; grid-template-columns: 125px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #edf0f2; }
.detail-list dt { color: #77808c; font-size: 12px; font-weight: 700; }
.detail-list dd { color: #242d38; font-size: 13px; font-weight: 600; }
.detail-section { margin-top: 14px; overflow: hidden; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e4e7eb; background: #f7f8fa; }
.site-card, .document-row, .contract-mini-row { display: grid; align-items: center; gap: 15px; padding: 14px 16px; border-bottom: 1px solid #eaedf0; }
.site-card:last-child, .document-row:last-child, .contract-mini-row:last-child { border-bottom: 0; }
.site-card { grid-template-columns: minmax(220px, 1fr) auto; }
.site-card strong, .site-card span { display: block; }
.site-card span { margin-top: 4px; color: #68717d; font-size: 12px; }
.site-meta { display: flex; align-items: center; gap: 12px; }
.site-meta > span { margin: 0; }
.site-card.is-archived { opacity: .55; }
.document-row { grid-template-columns: 36px minmax(220px, 1fr) auto; }
.document-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: #eef2f6; color: #35485b; }
.document-row strong, .document-row small { display: block; }
.document-row small { margin-top: 4px; color: #6f7884; }
.document-row p { margin: 6px 0 0; color: #9c3d44; font-size: 12px; }
.document-actions { display: flex; gap: 6px; }
.contract-mini-row { grid-template-columns: minmax(220px, 1fr) auto auto; color: inherit; text-decoration: none; }
.contract-mini-row:hover { background: #f7f9fb; }
.contract-mini-row strong, .contract-mini-row span { display: block; }
.contract-mini-row span { margin-top: 3px; color: #727c88; font-size: 12px; }

.workflow-legend { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid #d8dfe6; border-radius: 7px; background: #f7f9fb; color: #394554; font-size: 12px; font-weight: 700; }
.workflow-legend i { flex: 1 1 50px; height: 1px; background: #bdc6d0; }
.readiness-note, .draft-notice, .readonly-summary, .rejection-panel { padding: 13px 15px; border-radius: 7px; }
.readiness-note { background: #f3f7f6; border: 1px solid #d5e3df; color: #315e52; }
.readiness-note i, .draft-notice i { margin-right: 8px; }
.draft-notice { display: flex; gap: 9px; background: #f3f5f8; border: 1px solid #dde2e8; color: #4b5664; }
.readonly-summary { background: #172331; color: #fff; }
.readonly-summary strong, .readonly-summary span { display: block; }
.readonly-summary span { margin-top: 4px; color: #c5cdd5; }
.rejection-panel { border: 1px solid #e2b7ba; background: #fff5f5; color: #8d333b; }
.rejection-panel p { margin: 6px 0 0; line-height: 1.55; }
.timeline-list { padding: 4px 16px; }
.timeline-item { display: grid; grid-template-columns: 14px minmax(220px, 1fr) auto; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #e8ebee; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #2b66a0; box-shadow: 0 0 0 4px #eaf1f7; }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item small { margin-top: 4px; color: #727b87; }
.timeline-item p { margin: 7px 0 0; color: #8b363d; }

.dashboard-alert-stack { margin-bottom: 18px; border: 1px solid #d6c69d; border-radius: 8px; background: #fffdf7; box-shadow: 0 8px 24px rgba(20,27,38,.04); overflow: hidden; }
.dashboard-alert-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid #e7dcc0; }
.dashboard-alert-head span { color: #8b7240; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-alert-head h2 { margin: 2px 0 0; font-size: 17px; }
.dashboard-alert-head > strong { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: #9a6a16; color: #fff; }
.dashboard-alert-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto 16px; gap: 12px; align-items: center; padding: 13px 17px; border-bottom: 1px solid #eee5d1; color: inherit; text-decoration: none; }
.dashboard-alert-item:last-child { border-bottom: 0; }
.dashboard-alert-item:hover { background: #fff9e8; }
.dashboard-alert-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #f2e6c7; color: #7a5718; }
.dashboard-alert-item strong, .dashboard-alert-item small { display: block; }
.dashboard-alert-item small { margin-top: 3px; color: #6c727b; }
.dashboard-alert-item time { color: #7b828b; font-size: 12px; }

@media (max-width: 980px) {
  .customer-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-summary-strip > div:nth-child(2) { border-right: 0; }
  .customer-summary-strip > div:nth-child(-n+2) { border-bottom: 1px solid #e3e6eb; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .customer-summary-strip { grid-template-columns: 1fr 1fr; }
  .crm-filter-row { flex-direction: column; align-items: stretch; }
  .compact-field { flex-basis: auto; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .detail-hero { flex-direction: column; }
  .site-card, .document-row, .contract-mini-row { grid-template-columns: 1fr; }
  .site-meta, .document-actions { flex-wrap: wrap; }
  .workflow-legend { flex-wrap: wrap; }
  .workflow-legend i { flex-basis: 26px; }
  .dashboard-alert-item { grid-template-columns: 34px minmax(0,1fr) 14px; }
  .dashboard-alert-item time { display: none; }
}

/* ============================================================
   WPPEI CRM v015 - staged customer registration and snapshots
   ============================================================ */
.registration-progress {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid #d9dfe5;
  border-radius: 9px;
  background: #f7f9fb;
}
.registration-progress.compact { margin: 7px 0 0; padding: 8px 9px; border: 0; background: transparent; }
.registration-progress > i { height: 1px; background: #cbd2da; }
.registration-step { display: flex; align-items: center; gap: 9px; min-width: 0; color: #7a8490; }
.registration-step span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border: 1px solid #c8d0d9; border-radius: 50%; background: #fff; color: #68737e; font-size: 10px; font-weight: 800; }
.registration-step strong { overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: 12px; white-space: nowrap; }
.registration-step.active { color: #1f5e99; }
.registration-step.active span { border-color: #1f5e99; background: #1f5e99; color: #fff; }
.registration-step.done { color: #17705a; }
.registration-step.done span { border-color: #17705a; background: #e9f5f1; color: #17705a; }
.registration-progress.compact .registration-step span { width: 23px; height: 23px; flex-basis: 23px; font-size: 8px; }
.registration-progress.compact .registration-step strong { font-size: 10px; }

.wizard-section-head { display: block; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid #e2e6ea; }
.wizard-section-head > strong { display: block; color: #18212c; font-size: 17px; }
.wizard-section-head > span { display: block; margin-top: 4px; color: #697480; font-size: 12px; line-height: 1.55; }
.wizard-subsection { margin-top: 16px; padding: 16px; border: 1px solid #dfe4e9; border-radius: 8px; background: #fafbfc; }
.wizard-success-line { display: flex; gap: 10px; align-items: center; padding: 13px 15px; border: 1px solid #cfe3dc; border-radius: 7px; background: #f1f8f5; color: #25614f; font-weight: 700; }

.evidence-panel { padding: 16px; border: 1px solid #d9dfe5; border-radius: 8px; background: #f9fafb; }
.evidence-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 13px; }
.evidence-panel-head strong { display: block; color: #202a34; font-size: 14px; }
.evidence-panel-head small { display: block; margin-top: 4px; color: #697480; font-size: 12px; line-height: 1.5; }
.step-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; background: #edf2f6; color: #526170; font-size: 10px; font-weight: 800; white-space: nowrap; }
.step-pill.step-2 { background: #edf4fb; color: #2d6598; }
.step-pill.step-3 { background: #eaf6f1; color: #176b55; }

.site-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.site-power-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #e6eaee; }
.site-power-grid > div span { display: block; margin: 0 0 3px; color: #77818c; font-size: 10px; font-weight: 700; }
.site-power-grid > div strong { color: #28333d; font-size: 12px; }
.site-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.locked-note { display: flex; gap: 7px; align-items: center; margin-top: 9px; color: #8a5a14; font-size: 11px; }
.policy-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 15px; padding: 12px 14px; border: 1px solid #d8dfe6; border-radius: 7px; background: #f6f8fa; color: #465363; font-size: 12px; line-height: 1.55; }
.policy-note i { margin-top: 2px; color: #315e83; }
.policy-note strong { color: #253441; }
.field-help { display: block; margin-top: 7px; color: #747e89; font-size: 11px; line-height: 1.5; }

.revision-tag { display: inline-flex; align-items: center; width: fit-content; min-height: 22px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #eaf1f7; color: #2e608c; font-size: 10px; font-weight: 800; }
.detail-hero .revision-tag { background: rgba(255,255,255,.13); color: #e5edf4; }
.superseded-note { display: block; margin-top: 6px; color: #756454; font-size: 11px; }
.snapshot-banner, .superseded-panel { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; padding: 13px 15px; border-radius: 7px; }
.snapshot-banner { border: 1px solid #cfe0eb; background: #f1f7fb; color: #315a78; }
.snapshot-banner i, .superseded-panel i { margin-top: 2px; }
.snapshot-banner strong, .snapshot-banner span { display: block; }
.snapshot-banner span { margin-top: 3px; color: #5e7180; font-size: 12px; line-height: 1.5; }
.superseded-panel { border: 1px solid #ddcfbf; background: #faf6f1; color: #705b45; }
.snapshot-document-list { padding: 0 16px; }
.snapshot-document-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #e8ecef; }
.snapshot-document-row:last-child { border-bottom: 0; }
.snapshot-document-row > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #edf2f6; color: #486176; }
.snapshot-document-row strong, .snapshot-document-row small { display: block; }
.snapshot-document-row small { margin-top: 3px; color: #737d87; font-size: 11px; }

@media (max-width: 820px) {
  .registration-progress { grid-template-columns: 1fr; }
  .registration-progress > i { width: 1px; height: 14px; margin-left: 15px; }
  .registration-progress.compact { display: none; }
  .site-power-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-card-head { flex-direction: column; }
  .site-card-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .site-power-grid { grid-template-columns: 1fr; }
  .snapshot-document-row { grid-template-columns: 30px 1fr; }
  .snapshot-document-row .badge { grid-column: 2; justify-self: start; }
}

/* ============================================================
   WPPEI CRM v018 - compact responsive customer registration modal
   ============================================================ */
.modal-panel .wide-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.customer-registration-modal {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  overflow-x: hidden;
}
.customer-registration-modal .modal-body,
.customer-registration-modal #customer-wizard,
.customer-registration-modal .wizard-form,
.customer-registration-modal .form-grid,
.customer-registration-modal .form-grid > div {
  min-width: 0;
  max-width: 100%;
}
.customer-registration-modal .field,
.customer-registration-modal .field-file,
.customer-registration-modal input,
.customer-registration-modal select,
.customer-registration-modal textarea {
  min-width: 0;
  max-width: 100%;
}
.customer-registration-modal .sticky-actions {
  flex-wrap: wrap;
}
.customer-registration-modal .customer-basic-grid {
  gap: 13px 14px;
}
.customer-registration-modal .customer-memo-field textarea {
  min-height: 66px;
  resize: vertical;
}

@media (max-width: 600px) {
  .modal-overlay { padding: 10px; align-items: flex-start; }
  .customer-registration-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    margin-top: 0;
  }
  .customer-registration-modal .modal-body { padding: 16px; }
  .customer-registration-modal .form-grid-2 { grid-template-columns: 1fr; }
  .customer-registration-modal .span-2 { grid-column: auto; }
  .customer-registration-modal .registration-progress {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .customer-registration-modal .registration-progress > i {
    width: 1px;
    height: 10px;
    margin-left: 15px;
  }
  .customer-registration-modal .sticky-actions {
    bottom: -16px;
    margin: 8px -16px -16px;
    padding: 12px 16px;
  }
  .customer-registration-modal .sticky-actions .btn { flex: 1 1 140px; }
}

@media (max-width: 460px) {
  .customer-registration-modal .modal-header { padding: 14px 15px; }
  .customer-registration-modal .modal-header h3 { font-size: 16px; }
  .customer-registration-modal .registration-step strong { white-space: normal; }
}

/* ============================================================
   WPPEI CRM v017 - installation country settings
   ============================================================ */
.settings-country-panel { margin-bottom: 18px; }
.settings-country-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.settings-country-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.settings-country-counts span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #d9dfe5;
  border-radius: 999px;
  background: #f7f9fb;
  color: #465463;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.settings-country-section { padding: 17px 0; border-top: 1px solid #e4e8ec; }
.settings-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.settings-section-label > span { color: #28343f; font-size: 13px; font-weight: 780; }
.settings-section-label > small { color: #6d7883; font-size: 11px; line-height: 1.5; }
.selected-country-badges,
.linked-language-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.operation-country-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid #cadbd5;
  border-radius: 999px;
  background: #eef7f4;
  color: #2d5c50;
  font-size: 12px;
  font-weight: 680;
}
.operation-country-badge strong { color: #176b55; font-size: 10px; letter-spacing: .05em; }
.settings-empty-inline { color: #87919b; font-size: 12px; }
.country-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.country-choice {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #dce1e6;
  border-radius: 8px;
  background: #fff;
  color: #33404b;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.country-choice:hover { border-color: #aebac4; background: #fafbfc; }
.country-choice.is-selected { border-color: #2d7563; background: #f1f8f5; box-shadow: inset 0 0 0 1px rgba(45,117,99,.1); }
.country-choice-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #cbd3da;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 10px;
}
.country-choice.is-selected .country-choice-check { border-color: #24725d; background: #24725d; color: #fff; }
.country-choice-copy { min-width: 0; }
.country-choice-copy strong,
.country-choice-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-choice-copy strong { color: #24313b; font-size: 12px; }
.country-choice-copy small { margin-top: 4px; color: #75808a; font-size: 10px; }
.language-link-badge {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 7px;
  min-height: 46px;
  padding: 7px 11px;
  border: 1px solid #d9dfe5;
  border-radius: 8px;
  background: #fff;
}
.language-link-badge > strong { grid-row: 1 / 3; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 6px; background: #edf1f5; color: #445362; font-size: 9px; }
.language-link-badge > span { color: #293641; font-size: 12px; font-weight: 700; }
.language-link-badge > small { color: #75808a; font-size: 9px; }
.language-link-badge.is-ready { border-color: #cfe1db; background: #f5faf8; }
.language-link-badge.is-ready > strong { background: #e4f2ed; color: #216b57; }
.language-link-badge.is-fallback > small { color: #9a6a16; }
.language-fallback-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: #727d87; font-size: 10px; line-height: 1.55; }
.language-fallback-note i { margin-top: 2px; color: #527493; }
.settings-save-row { display: flex; justify-content: flex-end; padding-top: 17px; border-top: 1px solid #e4e8ec; }
.settings-secondary-grid { margin-top: 22px; }

@media (max-width: 1040px) {
  .country-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .settings-country-head { flex-direction: column; }
  .settings-country-counts { justify-content: flex-start; }
  .settings-section-label { align-items: flex-start; flex-direction: column; gap: 4px; }
  .country-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-save-row .btn { width: 100%; }
}
@media (max-width: 460px) {
  .country-choice-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WPPEI CRM v020 - customer registration guidance and consent UI
   ============================================================ */
.field-label-with-help {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-tooltip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f7080;
  cursor: help;
  font-size: 12px;
}
.field-tooltip:hover,
.field-tooltip:focus-visible {
  background: #edf3f7;
  color: #1f5e99;
  outline: none;
}
.field-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 40;
  left: 50%;
  top: calc(100% + 9px);
  width: min(280px, calc(100vw - 42px));
  padding: 10px 12px;
  border: 1px solid #cfd7df;
  border-radius: 7px;
  background: #1f2a35;
  box-shadow: 0 8px 22px rgba(17, 29, 40, .2);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease;
}
.field-tooltip:hover::after,
.field-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.country-phone-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}
.country-phone-prefix {
  display: flex;
  align-items: center;
  min-width: 58px;
  padding: 0 12px;
  border: 1px solid #cfd6de;
  border-right: 0;
  border-radius: 7px 0 0 7px;
  background: #f5f7f9;
  color: #344453;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.customer-registration-modal .country-phone-local {
  border-radius: 0 7px 7px 0;
}
.compact-help { margin-top: 5px; }
.coordinator-owner-grid { margin-top: 3px; }
.coordinator-owner-note { margin: 0; }
.wizard-subsection > strong,
.wizard-subsection > span { display: block; }
.wizard-subsection > strong { color: #26333e; font-size: 13px; }
.wizard-subsection > span { margin-top: 4px; color: #6f7a85; font-size: 11px; line-height: 1.5; }

.consent-confirmation-panel {
  display: grid;
  gap: 14px;
  padding: 15px;
  background: #f8fafb;
}
.consent-confirmation-panel .evidence-panel-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  justify-content: initial;
  gap: 10px;
  margin-bottom: 0;
}
.consent-confirmation-panel .evidence-panel-head > i {
  margin-top: 2px;
  color: #315e83;
}
.consent-confirmation-panel .evidence-panel-head strong,
.consent-confirmation-panel .evidence-panel-head span {
  display: block;
}
.consent-confirmation-panel .evidence-panel-head span {
  margin-top: 4px;
  color: #697480;
  font-size: 11px;
  line-height: 1.5;
}
.consent-file-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce3e9;
  border-radius: 7px;
  background: #fff;
}
.consent-file-main { min-width: 0; }
.consent-file-main .field-file { width: 100%; }
.consent-preview-btn { min-height: 42px; white-space: nowrap; }
.consent-preview-help {
  display: block;
  margin-top: -8px;
  color: #6f7b86;
  font-size: 10px;
  line-height: 1.5;
}
.consent-meta-grid { gap: 11px 12px; }
.compact-consent-version { max-width: 220px; }
.consent-final-check {
  margin: 0;
  border-color: #cbdcd6;
  background: #f0f7f4;
}

@media (max-width: 600px) {
  .field-tooltip::after {
    left: auto;
    right: -8px;
    transform: translateY(4px);
  }
  .field-tooltip:hover::after,
  .field-tooltip:focus-visible::after { transform: translateY(0); }
  .consent-file-stage { grid-template-columns: 1fr; }
  .consent-preview-btn { width: 100%; }
  .compact-consent-version { max-width: none; }
}


/* ============================================================
   WPPEI CRM v021 - protected customer registration and duplicate-check state
   ============================================================ */
.modal-overlay-locked { cursor: default; }
.duplicate-check-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d7dde4;
  border-radius: 7px;
  background: #f7f9fb;
  color: #5c6874;
  font-size: 12px;
  line-height: 1.45;
}
.duplicate-check-state.pending { border-color: #e4d19c; background: #fffaf0; color: #735a1f; }
.duplicate-check-state.complete { border-color: #bcd9c8; background: #f2faf5; color: #22613d; }
.customer-registration-modal .sticky-actions button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: .48;
}

/* ============================================================
   WPPEI CRM v022 - floating tooltips, compact consent row, unified duplicate card
   ============================================================ */
.field-tooltip::after { display: none !important; }
.floating-field-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: #1f2a35;
  box-shadow: 0 10px 26px rgba(17, 29, 40, .28);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
.floating-field-tooltip[hidden] { display: none !important; }

.customer-registration-modal .evidence-panel-head .field-label-with-help {
  margin: 0;
  color: inherit;
  font-size: inherit;
}
.customer-registration-modal .consent-file-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.customer-registration-modal .consent-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 10px;
}
.customer-registration-modal .consent-meta-grid > div { min-width: 0; }

.duplicate-status-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #d7dde4;
  border-radius: 7px;
  background: #f7f9fb;
  color: #5c6874;
  font-size: 12px;
  line-height: 1.5;
}
.duplicate-status-card > i { margin-top: 2px; }
.duplicate-status-card strong,
.duplicate-status-card span,
.duplicate-status-card small { display: block; }
.duplicate-status-card span { margin-top: 4px; }
.duplicate-status-card small { margin-top: 5px; color: inherit; opacity: .86; }
.duplicate-status-card .btn { margin-top: 9px; }
.duplicate-status-card.pending { border-color: #e4d19c; background: #fffaf0; color: #735a1f; }
.duplicate-status-card.complete { border-color: #bcd9c8; background: #f2faf5; color: #22613d; }
.duplicate-status-card.warning { border-color: #e1c47f; background: #fff8e8; color: #72551b; }
.duplicate-status-card.blocked { border-color: #e4b7b7; background: #fff3f3; color: #8d3030; }

@media (max-width: 600px) {
  .customer-registration-modal .consent-file-stage { grid-template-columns: 1fr; }
  .customer-registration-modal .consent-file-actions { width: 100%; }
  .customer-registration-modal .consent-meta-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   WPPEI CRM v024 - desktop/mobile phone placeholder and consent form action
   ============================================================ */
.customer-registration-modal .country-phone-local::placeholder {
  color: #8b96a0;
  opacity: 1;
}
.customer-registration-modal .consent-form-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e0e6;
  border-radius: 7px;
  background: #fff;
}
.customer-registration-modal .consent-form-stage .consent-preview-help {
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .customer-registration-modal .consent-form-stage {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ============================================================
   WPPEI CRM v025 - consent heading alignment and copy cleanup
   ============================================================ */
.customer-registration-modal .consent-confirmation-panel .consent-panel-title {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  text-align: center;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > i {
  margin-top: 0;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > strong {
  display: inline-block;
}


/* ============================================================
   WPPEI CRM v027 - compact three-column registration and fixed actions
   ============================================================ */
.customer-registration-modal {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.customer-registration-modal .modal-header {
  flex: 0 0 auto;
}
.customer-registration-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.customer-registration-modal .customer-basic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 12px;
}
.customer-registration-modal .customer-basic-grid .span-2 {
  grid-column: span 2;
}
.customer-registration-modal .customer-basic-grid .span-3 {
  grid-column: 1 / -1;
}
.customer-registration-modal .customer-basic-grid .field-label,
.customer-registration-modal .customer-basic-grid .field-label-with-help {
  margin-bottom: 6px;
  font-size: 12px;
}
.customer-registration-modal .customer-basic-grid .field,
.customer-registration-modal .customer-basic-grid input,
.customer-registration-modal .customer-basic-grid select {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
}
.customer-registration-modal .customer-basic-grid textarea.field {
  min-height: 58px;
  padding: 9px 10px;
  font-size: 13px;
}
.customer-registration-modal .customer-basic-grid .country-phone-prefix {
  min-width: 50px;
  padding: 0 9px;
  font-size: 12px;
}
.customer-registration-modal .sticky-actions {
  position: sticky;
  z-index: 8;
  bottom: -21px;
  flex-wrap: nowrap;
  margin: 10px -21px -21px;
  padding: 13px 21px;
  background: #fff;
  box-shadow: 0 -7px 16px rgba(17, 29, 40, .08);
}
.customer-registration-modal .sticky-actions .btn {
  flex: 0 0 auto;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title {
  justify-content: flex-start;
  text-align: left;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > i,
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > strong {
  align-self: center;
  line-height: 1.2;
}

@media (max-width: 700px) {
  .customer-registration-modal {
    width: min(540px, calc(100vw - 20px));
  }
  .customer-registration-modal .customer-basic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-registration-modal .customer-basic-grid .span-3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .customer-registration-modal .customer-basic-grid {
    grid-template-columns: 1fr;
  }
  .customer-registration-modal .customer-basic-grid .span-2,
  .customer-registration-modal .customer-basic-grid .span-3 {
    grid-column: auto;
  }
  .customer-registration-modal .sticky-actions {
    flex-wrap: wrap;
    bottom: -16px;
    margin: 8px -16px -16px;
    padding: 12px 16px;
  }
  .customer-registration-modal .sticky-actions .btn {
    flex: 1 1 120px;
  }
}

/* ============================================================
   WPPEI CRM v028 - compact privacy confirmation typography
   ============================================================ */
.customer-registration-modal .consent-confirmation-panel {
  gap: 11px;
  padding: 13px;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title {
  gap: 7px;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > i {
  font-size: 12px;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > strong {
  font-size: 13px;
}
.customer-registration-modal .consent-form-stage {
  gap: 10px;
  padding: 10px;
}
.customer-registration-modal .consent-preview-btn {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12px;
}
.customer-registration-modal .consent-form-stage .consent-preview-help {
  font-size: 10px;
  line-height: 1.5;
}
.customer-registration-modal .consent-meta-grid {
  gap: 10px 10px;
}
.customer-registration-modal .consent-meta-grid .field-label {
  margin-bottom: 6px;
  font-size: 12px;
}
.customer-registration-modal .consent-meta-grid .field,
.customer-registration-modal .consent-meta-grid input,
.customer-registration-modal .consent-meta-grid select {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
}
.customer-registration-modal .consent-final-check {
  padding: 10px 12px;
  font-size: 12px;
}

/* ============================================================
   WPPEI CRM v029 - consistent step 2/3 registration layout
   ============================================================ */
.customer-registration-modal .registration-step-form .customer-step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 12px;
}
.customer-registration-modal .registration-step-form .customer-step-grid .span-2 {
  grid-column: span 2;
}
.customer-registration-modal .registration-step-form .customer-step-grid .span-3 {
  grid-column: 1 / -1;
}
.customer-registration-modal .registration-step-form .field-label {
  margin-bottom: 6px;
  font-size: 12px;
}
.customer-registration-modal .registration-step-form .field,
.customer-registration-modal .registration-step-form input,
.customer-registration-modal .registration-step-form select {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
}
.customer-registration-modal .registration-step-form textarea.field {
  min-height: 58px;
  padding: 9px 10px;
  font-size: 13px;
}
.customer-registration-modal .registration-step-form .wizard-success-line {
  min-height: 38px;
  padding: 9px 11px;
  font-size: 12px;
}
.customer-registration-modal .registration-step-form .compact-upload-box {
  padding: 11px 12px;
}
.customer-registration-modal .registration-step-form .compact-upload-box input[type="file"] {
  min-height: auto;
  padding: 0;
  font-size: 12px;
}
.customer-registration-modal .registration-step-form .compact-upload-box small {
  font-size: 10px;
  line-height: 1.45;
}
.customer-registration-modal .registration-step-form .customer-environment-field textarea {
  resize: vertical;
}
@media (max-width: 700px) {
  .customer-registration-modal .registration-step-form .customer-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .customer-registration-modal .registration-step-form .customer-step-grid .span-3 {
    grid-column: 1 / -1;
  }
  .customer-registration-modal .registration-step-form .step-grid-spacer {
    display: none;
  }
}
@media (max-width: 520px) {
  .customer-registration-modal .registration-step-form .customer-step-grid {
    grid-template-columns: 1fr;
  }
  .customer-registration-modal .registration-step-form .customer-step-grid .span-2,
  .customer-registration-modal .registration-step-form .customer-step-grid .span-3 {
    grid-column: auto;
  }
}

/* ============================================================
   WPPEI CRM v030 - guided site naming, contact and Korean address search
   ============================================================ */
.customer-registration-modal .postcode-search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
}
.customer-registration-modal .postcode-search-field .field {
  min-width: 0;
}
.customer-registration-modal .postcode-search-btn {
  min-height: 40px;
  padding: 7px 10px;
  white-space: nowrap;
  font-size: 11px;
}
.customer-registration-modal .postcode-search-btn[hidden] {
  display: none;
}
.customer-registration-modal .site-contact-sync {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 7px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d8e0e7;
  border-radius: 7px;
  background: #f7fafc;
  color: #43515d;
  font-size: 11px;
  line-height: 1.35;
}
.customer-registration-modal .site-contact-sync input {
  flex: 0 0 auto;
  width: 14px;
  min-height: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
}
.customer-registration-modal .registration-step-form .field.is-readonly {
  background: #f3f6f8;
  color: #5a6772;
}
.customer-registration-modal .address-search-help {
  margin-top: -3px;
  color: #687682;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .customer-registration-modal .site-contact-sync {
    align-self: stretch;
  }
}

@media (max-width: 520px) {
  .customer-registration-modal .postcode-search-field {
    grid-template-columns: 1fr;
  }
  .customer-registration-modal .postcode-search-btn {
    width: 100%;
  }
}


/* ============================================================
   WPPEI CRM v031 - guided 12-month electricity totals
   ============================================================ */
.customer-registration-modal .power-step-grid .locked-power-field,
#power-form .power-step-grid .locked-power-field {
  position: relative;
}
.customer-registration-modal .power-step-grid .locked-power-field .field,
#power-form .power-step-grid .locked-power-field .field {
  padding-right: 30px;
  background: #f3f6f8;
  color: #46545f;
  cursor: not-allowed;
}
.customer-registration-modal .power-step-grid .locked-power-field > i,
#power-form .power-step-grid .locked-power-field > i {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  color: #75838f;
  font-size: 11px;
  pointer-events: none;
}
.customer-registration-modal .power-entry-method,
#power-form .power-entry-method {
  padding: 11px 12px;
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  background: #f8fafb;
}
.customer-registration-modal .power-entry-method-head,
#power-form .power-entry-method-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.customer-registration-modal .power-entry-method-head .field-label,
#power-form .power-entry-method-head .field-label {
  margin: 0;
}
.customer-registration-modal .power-entry-mode-buttons,
#power-form .power-entry-mode-buttons {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid #d5dde5;
  border-radius: 7px;
  background: #fff;
}
.customer-registration-modal .power-mode-btn,
#power-form .power-mode-btn {
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #596772;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.customer-registration-modal .power-mode-btn.active,
#power-form .power-mode-btn.active {
  background: #1f5fa7;
  color: #fff;
}
.customer-registration-modal .monthly-power-calculator,
#power-form .monthly-power-calculator {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #dce3e9;
}
.customer-registration-modal .monthly-power-calculator > p,
#power-form .monthly-power-calculator > p {
  margin: 0 0 8px;
  color: #66747f;
  font-size: 10px;
  line-height: 1.5;
}
.customer-registration-modal .monthly-power-row,
#power-form .monthly-power-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.customer-registration-modal .monthly-power-row > strong,
#power-form .monthly-power-row > strong {
  font-size: 11px;
  color: #46535e;
  text-align: center;
}
.customer-registration-modal .monthly-power-head,
#power-form .monthly-power-head {
  margin-bottom: 5px;
  color: #53616d;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.customer-registration-modal .monthly-power-row .field,
#power-form .monthly-power-row .field {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 12px;
}
.customer-registration-modal .monthly-power-summary,
#power-form .monthly-power-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  background: #eaf5ef;
  color: #1f5e43;
  font-size: 11px;
}
.customer-registration-modal .monthly-power-summary strong,
#power-form .monthly-power-summary strong {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .customer-registration-modal .power-entry-method-head,
  #power-form .power-entry-method-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 520px) {
  .customer-registration-modal .power-entry-mode-buttons,
  #power-form .power-entry-mode-buttons {
    width: 100%;
  }
  .customer-registration-modal .power-mode-btn,
  #power-form .power-mode-btn {
    flex: 1 1 0;
  }
  .customer-registration-modal .monthly-power-row,
  #power-form .monthly-power-row {
    grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }
  .customer-registration-modal .monthly-power-summary,
  #power-form .monthly-power-summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* ============================================================
   WPPEI CRM v032 - customer table alignment and readable contacts
   ============================================================ */
.customer-data-table th.customer-table-heading {
  text-align: center;
}
.customer-data-table td.customer-cell-center {
  text-align: center;
}
.customer-data-table td[data-column-key="contact"] {
  white-space: nowrap;
  line-height: 1.65;
}
.customer-data-table td[data-column-key="registration_step"],
.customer-data-table td[data-column-key="status"] {
  white-space: nowrap;
}

/* ============================================================
   WPPEI CRM v033 - lavender-indigo customer registration theme
   Reference: rounded indigo header, soft lavender canvas, warm consent card
   ============================================================ */
.customer-registration-modal {
  --customer-wizard-indigo-700: #3b49ae;
  --customer-wizard-indigo-600: #4658c7;
  --customer-wizard-indigo-500: #5a63d7;
  --customer-wizard-violet-400: #8278e8;
  --customer-wizard-canvas: #f7f8fc;
  --customer-wizard-line: #e1e4ee;
  --customer-wizard-text: #222938;
  --customer-wizard-muted: #788195;
  --customer-wizard-gold: #bd9144;
  --customer-wizard-cream: #fffaf1;
  --customer-wizard-mint: #e9f7f0;
  border: 0;
  border-radius: 22px;
  background: var(--customer-wizard-canvas);
  box-shadow: 0 34px 90px -24px rgba(24, 28, 70, .58), 0 10px 28px rgba(25, 31, 76, .16);
}

.customer-registration-modal .modal-header {
  min-height: 76px;
  padding: 18px 28px;
  color: #fff;
  background: linear-gradient(110deg, var(--customer-wizard-indigo-700) 0%, var(--customer-wizard-indigo-600) 46%, var(--customer-wizard-violet-400) 100%);
  border-bottom: 0;
  backdrop-filter: none;
  box-shadow: 0 10px 28px rgba(57, 68, 169, .16);
}
.customer-registration-modal .modal-header h3 {
  gap: 11px;
  color: #fff;
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.025em;
}
.customer-registration-modal .modal-header h3 i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ffe39a;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.customer-registration-modal .modal-body {
  padding: 14px 28px 21px;
  background:
    radial-gradient(circle at 86% 4%, rgba(110, 103, 226, .08), transparent 220px),
    linear-gradient(180deg, #f9f9fd 0%, #f5f6fb 100%);
}

.customer-registration-modal .registration-progress {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid #e6e7f0;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 28px -20px rgba(34, 39, 85, .42), 0 4px 12px rgba(39, 45, 94, .045);
}
.customer-registration-modal .registration-progress {
  grid-template-columns: max-content minmax(60px, 1fr) max-content minmax(60px, 1fr) max-content;
}
.customer-registration-modal .registration-step {
  justify-self: center;
}
.customer-registration-modal .registration-progress > i {
  width: 64px;
  height: 22px;
  justify-self: center;
  align-self: center;
  background: linear-gradient(135deg, #cbd1f3 0%, #aeb7eb 100%);
  clip-path: polygon(0 0, 66% 0, 100% 50%, 66% 100%, 0 100%, 28% 50%);
  box-shadow: inset 0 0 0 1px rgba(105, 115, 184, .18), 0 2px 5px rgba(69, 80, 155, .12);
  border-radius: 2px;
}
.customer-registration-modal .registration-step.active + i {
  background: linear-gradient(135deg, #7a73e7 0%, #5364d5 100%);
  box-shadow: inset 0 0 0 1px rgba(66, 76, 177, .16), 0 4px 10px rgba(76, 88, 190, .22);
}
.customer-registration-modal .registration-step.done + i {
  background: linear-gradient(135deg, #70c8ad 0%, #319477 100%);
  box-shadow: inset 0 0 0 1px rgba(36, 121, 94, .15), 0 4px 10px rgba(42, 137, 107, .18);
}
.customer-registration-modal .registration-step {
  color: #9ba1b0;
}
.customer-registration-modal .registration-step span {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-color: #e0e2eb;
  color: #71798b;
  background: #fff;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(42, 48, 94, .04);
}
.customer-registration-modal .registration-step strong {
  color: inherit;
  font-size: 12px;
  font-weight: 720;
}
.customer-registration-modal .registration-step.active {
  color: #242b3c;
}
.customer-registration-modal .registration-step.active span {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(145deg, #4c5bd0, #6d67dc);
  box-shadow: 0 0 0 6px rgba(83, 94, 214, .10), 0 7px 16px rgba(69, 80, 190, .23);
}
.customer-registration-modal .registration-step.done {
  color: #27735f;
}
.customer-registration-modal .registration-step.done span {
  border-color: #5ab69b;
  color: #17705a;
  background: #effaf6;
  box-shadow: none;
}

.customer-registration-modal .wizard-section-head {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 12px 14px;
  border-bottom-color: #dfe2eb;
}
.customer-registration-modal .wizard-section-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5966df, #7d73e7);
}
.customer-registration-modal .wizard-section-head > strong {
  color: var(--customer-wizard-text);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.025em;
}
.customer-registration-modal .wizard-section-head > span {
  margin-top: 5px;
  color: var(--customer-wizard-muted);
  font-size: 11px;
}

.customer-registration-modal .field-label,
.customer-registration-modal .field-label-with-help {
  color: #343c4e;
  font-weight: 730;
}
.customer-registration-modal .field-tooltip {
  color: #727b8d;
}
.customer-registration-modal .field-tooltip:hover,
.customer-registration-modal .field-tooltip:focus-visible {
  color: #4d59c7;
  background: #eceefd;
}
.customer-registration-modal .field,
.customer-registration-modal input,
.customer-registration-modal select,
.customer-registration-modal textarea {
  border-color: #dfe2ec;
  border-radius: 10px;
  background: #fff;
  color: #283041;
  box-shadow: 0 4px 10px rgba(35, 41, 82, .035);
}
.customer-registration-modal .field:hover,
.customer-registration-modal input:hover,
.customer-registration-modal select:hover,
.customer-registration-modal textarea:hover {
  border-color: #cfd3e3;
}
.customer-registration-modal .field:focus,
.customer-registration-modal input:focus,
.customer-registration-modal select:focus,
.customer-registration-modal textarea:focus {
  border-color: #7d88df;
  box-shadow: 0 0 0 3px rgba(82, 97, 208, .11), 0 5px 14px rgba(35, 41, 82, .045);
  outline: 0;
}
.customer-registration-modal .country-phone-prefix {
  border-color: #dfe2ec;
  border-radius: 10px 0 0 10px;
  background: #f4f5fa;
  color: #323a4d;
}
.customer-registration-modal .country-phone-local {
  border-radius: 0 10px 10px 0;
}

.customer-registration-modal .consent-confirmation-panel {
  padding: 14px;
  border-color: #f0e5cf;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff9ef, #fffdf9);
  box-shadow: 0 8px 22px -19px rgba(135, 91, 23, .35);
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title {
  color: #332f29;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #c59a4d, #ae7f32);
  box-shadow: 0 5px 12px rgba(169, 120, 44, .19);
}
.customer-registration-modal .consent-form-stage {
  border-color: #ebe4da;
  border-radius: 13px;
  background: rgba(255,255,255,.82);
}
.customer-registration-modal .consent-preview-help {
  color: #8b8790;
}
.customer-registration-modal .consent-final-check {
  border-color: #bfe2d1;
  border-radius: 11px;
  background: var(--customer-wizard-mint);
  color: #295d4c;
}

.customer-registration-modal .wizard-success-line {
  border-color: #bfe1d2;
  border-radius: 11px;
  background: #eaf8f2;
  color: #23644f;
}
.customer-registration-modal .evidence-panel,
.customer-registration-modal .wizard-subsection,
.customer-registration-modal .power-entry-method {
  border-color: #e1e4ed;
  border-radius: 14px;
  background: rgba(255,255,255,.76);
}
.customer-registration-modal .site-contact-sync {
  border-color: #dfe3ed;
  border-radius: 10px;
  background: #f6f7fb;
}
.customer-registration-modal .registration-step-form .field.is-readonly,
.customer-registration-modal .power-step-grid .locked-power-field .field {
  background: #f1f2f7;
  color: #626a7b;
}

.customer-registration-modal .duplicate-status-card {
  border-radius: 14px;
  box-shadow: 0 7px 18px -18px rgba(37, 43, 78, .48);
}
.customer-registration-modal .duplicate-status-card.pending {
  border-color: #eadbb5;
  background: #fff9ed;
}
.customer-registration-modal .duplicate-status-card.complete {
  border-color: #bfe1d0;
  background: #eaf8f1;
}
.customer-registration-modal .duplicate-status-card.warning {
  border-color: #e8cf91;
  background: #fff7e4;
}
.customer-registration-modal .duplicate-status-card.blocked {
  border-color: #ecc6c8;
  background: #fff2f3;
}

.customer-registration-modal .sticky-actions {
  margin-top: 14px;
  border-top: 1px solid #e7e8ef;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -11px 22px rgba(31, 36, 72, .07);
  backdrop-filter: blur(12px);
}
.customer-registration-modal .sticky-actions .btn {
  min-height: 44px;
  border-radius: 11px;
  font-size: 12px;
}
.customer-registration-modal .sticky-actions .btn-secondary {
  color: #343b4c;
  border-color: #e0e2eb;
  background: #fff;
  box-shadow: 0 3px 9px rgba(40, 45, 80, .035);
}
.customer-registration-modal .sticky-actions .btn-secondary:hover {
  color: #313a8b;
  border-color: #cdd2ef;
  background: #f8f8ff;
}
.customer-registration-modal .sticky-actions .btn-primary {
  border-color: #4c59c6;
  background: linear-gradient(135deg, #4658c7, #5d62d8);
  box-shadow: 0 9px 18px -10px rgba(66, 77, 185, .72);
}
.customer-registration-modal .sticky-actions .btn-primary:hover {
  border-color: #3f4eb7;
  background: linear-gradient(135deg, #3e50bd, #545acb);
  box-shadow: 0 11px 20px -10px rgba(66, 77, 185, .76);
}
.customer-registration-modal .sticky-actions .btn-primary i {
  color: #fff0a9;
}
.customer-registration-modal .sticky-actions button[type="submit"]:disabled {
  color: #fff;
  border-color: #c9ccd5;
  background: #c9ccd5;
  box-shadow: none;
}

@media (max-width: 700px) {
  .customer-registration-modal .modal-header {
    min-height: 68px;
    padding: 15px 20px;
  }
  .customer-registration-modal .modal-body {
    padding: 12px 20px 18px;
  }
  .customer-registration-modal .registration-progress {
    border-radius: 15px;
  }
}

@media (max-width: 520px) {
  .customer-registration-modal {
    border-radius: 18px;
  }
  .customer-registration-modal .modal-header {
    padding: 14px 16px;
  }
  .customer-registration-modal .modal-header h3 {
    font-size: 16px;
  }
  .customer-registration-modal .modal-header h3 i {
    width: 31px;
    height: 31px;
  }
  .customer-registration-modal .modal-body {
    padding: 10px 16px 16px;
  }
  .customer-registration-modal .registration-progress {
    padding: 13px 12px;
  }
  .customer-registration-modal .registration-step span {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .customer-registration-modal .consent-confirmation-panel {
    border-radius: 15px;
  }
}

/* ============================================================
   WPPEI CRM v034 - customer list centered key columns and clearer progress badges
   ============================================================ */
.customer-data-table td[data-column-key="customer_number"],
.customer-data-table td[data-column-key="contract_count"],
.customer-data-table td[data-column-key="action"] {
  text-align: center;
}
.customer-data-table td[data-column-key="customer_number"] .table-subline,
.customer-data-table td[data-column-key="contract_count"] .table-subline {
  text-align: center;
}
.customer-data-table td[data-column-key="action"] .btn {
  margin-inline: auto;
}

.customer-data-table .step-pill {
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid #a78bfa;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 10px;
  font-weight: 850;
  box-shadow: 0 2px 5px rgba(91, 33, 182, .10);
}
.customer-data-table .step-pill.step-2 {
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: 0 2px 5px rgba(29, 78, 216, .10);
}
.customer-data-table .step-pill.step-3 {
  border-color: #4ade80;
  background: #dcfce7;
  color: #15803d;
  box-shadow: 0 2px 5px rgba(21, 128, 61, .10);
}

/* ============================================================
   WPPEI CRM v035 - high-visibility customer progress and status badges
   ============================================================ */
.customer-data-table td[data-column-key="created_at"] {
  white-space: nowrap;
}

.customer-data-table .step-pill {
  min-height: 29px;
  padding: 5px 12px;
  border-color: #5b21b6;
  background: #6d28d9;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 3px 8px rgba(91, 33, 182, .22);
}
.customer-data-table .step-pill.step-2 {
  border-color: #075985;
  background: #0369a1;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(3, 105, 161, .22);
}
.customer-data-table .step-pill.step-3 {
  border-color: #166534;
  background: #15803d;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(21, 128, 61, .22);
}

.customer-data-table .customer-status-badge {
  min-height: 29px;
  padding: 5px 12px;
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 3px 8px rgba(31, 41, 55, .16);
}
.customer-data-table .customer-status-additional_info_required {
  border-color: #9a3412;
  background: #c2410c;
}
.customer-data-table .customer-status-contract_ready {
  border-color: #065f46;
  background: #047857;
}

/* ============================================================
   WPPEI CRM v036 - unified Korean-mode typography
   Use Noto Sans KR for Korean, Latin text, and numerals in Korean mode.
   ============================================================ */
html[data-locale="ko"] body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   WPPEI CRM v038 - customer detail card readability
   Keep the existing modal width and reorganize only inner columns.
   ============================================================ */
.customer-detail-modal .detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.customer-detail-modal .detail-block {
  min-width: 0;
  padding: 14px;
}
.customer-detail-modal .detail-list > div {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.customer-detail-modal .detail-list dt,
.customer-detail-modal .detail-list dd {
  min-width: 0;
  line-height: 1.55;
}
.customer-detail-modal .detail-list dt {
  word-break: keep-all;
}
.customer-detail-modal .detail-list dd {
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.customer-detail-modal .customer-status-badge {
  min-height: 29px;
  padding: 5px 12px;
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}
.customer-detail-modal .customer-status-additional_info_required {
  border-color: #9a3412;
  background: #c2410c;
}
.customer-detail-modal .customer-status-contract_ready {
  border-color: #065f46;
  background: #047857;
}

@media (max-width: 980px) {
  .customer-detail-modal .detail-grid {
    grid-template-columns: 1fr;
  }
  .customer-detail-modal .detail-list > div {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* ============================================================
   WPPEI CRM v039 - customer detail status/action consistency
   ============================================================ */
.customer-detail-modal .detail-action-row {
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.customer-detail-modal .detail-action-row .btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 10px;
  gap: 6px;
  font-size: 12px;
}
.customer-detail-modal .legal-status-row dd {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   WPPEI CRM v040 - compact customer detail card and persistent modals
   ============================================================ */
.customer-detail-modal .modal-header {
  padding: 11px 16px;
}
.customer-detail-modal .modal-header h3 {
  gap: 8px;
  font-size: 17px;
}
.customer-detail-modal .modal-body {
  padding: 16px 18px 18px;
}
.customer-detail-modal .detail-hero {
  margin: 0 0 13px;
  padding: 14px 18px;
  gap: 14px;
  align-items: center;
}
.customer-detail-modal .detail-hero h2 {
  margin: 3px 0 1px;
  font-size: 22px;
  line-height: 1.3;
}
.customer-detail-modal .detail-hero p {
  margin: 0;
  line-height: 1.4;
}
.customer-detail-modal .detail-block {
  padding: 12px 13px;
}
.customer-detail-modal .detail-list {
  margin-top: 8px;
}
.customer-detail-modal .detail-list > div {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 5px;
  padding: 5px 0;
  align-items: center;
}
.customer-detail-modal .detail-list dt,
.customer-detail-modal .detail-list dd {
  line-height: 1.35;
}
.customer-detail-modal .detail-list dd {
  overflow-wrap: normal;
  word-break: keep-all;
}
.customer-detail-modal .country-row dd,
.customer-detail-modal .phone-row dd,
.customer-detail-modal .email-row dd {
  min-width: 0;
  white-space: nowrap;
}
.customer-detail-modal .email-row dd {
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-detail-modal .legal-status-row dd {
  min-height: 28px;
}

@media (max-width: 980px) {
  .customer-detail-modal .detail-list > div {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

/* ============================================================
   WPPEI CRM v041 - site modal postcode search and compact header
   ============================================================ */
.customer-site-modal .modal-header {
  padding: 11px 16px;
}
.customer-site-modal .modal-header h3 {
  gap: 8px;
  font-size: 17px;
}
.customer-site-modal .postcode-search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
}
.customer-site-modal .postcode-search-field .field {
  min-width: 0;
}
.customer-site-modal .postcode-search-btn {
  min-height: 40px;
  padding: 7px 10px;
  white-space: nowrap;
  font-size: 11px;
}
.customer-site-modal .postcode-search-btn[hidden] {
  display: none;
}
.customer-site-modal .address-search-help {
  margin-top: -3px;
  color: #687682;
  font-size: 10px;
  line-height: 1.45;
}
.customer-site-modal .field[readonly] {
  background: #f3f6f8;
  color: #5a6772;
}
@media (max-width: 520px) {
  .customer-site-modal .postcode-search-field {
    grid-template-columns: 1fr;
  }
  .customer-site-modal .postcode-search-btn {
    width: 100%;
  }
}



/* ============================================================
   WPPEI CRM v044 - centered colored step arrows and compact consent header
   ============================================================ */
.customer-registration-modal .consent-confirmation-panel .consent-panel-title {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  gap: 9px;
  width: 100%;
  text-align: left;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title > strong {
  min-width: 0;
}
.customer-registration-modal .consent-confirmation-panel .consent-panel-title .consent-preview-btn {
  justify-self: end;
  min-height: 36px;
  margin: 0;
  padding: 7px 11px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .customer-registration-modal .registration-progress {
    grid-template-columns: 1fr;
  }
  .customer-registration-modal .registration-step {
    justify-self: stretch;
  }
  .customer-registration-modal .registration-progress > i,
  .customer-registration-modal .registration-step.active + i,
  .customer-registration-modal .registration-step.done + i {
    width: 1px;
    height: 10px;
    margin-left: 15px;
    justify-self: start;
    clip-path: none;
    background: #dfe2e9;
    box-shadow: none;
  }
}
@media (max-width: 520px) {
  .customer-registration-modal .consent-confirmation-panel .consent-panel-title {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .customer-registration-modal .consent-confirmation-panel .consent-panel-title .consent-preview-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}


/* ============================================================
   WPPEI CRM v045 - customer site card readability
   ============================================================ */
.customer-detail-modal .site-card,
.modal-overlay .site-card {
  grid-template-columns: minmax(170px, .9fr) minmax(235px, 1.1fr);
  align-items: start;
  gap: 14px 20px;
}
.customer-detail-modal .site-card-head,
.modal-overlay .site-card-head {
  display: block;
  min-width: 0;
}
.customer-detail-modal .site-status-row,
.modal-overlay .site-status-row {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 10px;
}
.customer-detail-modal .site-status-badge,
.modal-overlay .site-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(23, 62, 48, .16);
}
.customer-detail-modal .site-status-badge.is-ready,
.modal-overlay .site-status-badge.is-ready {
  color: #fff;
  border: 1px solid #08734f;
  background: #07865d;
}
.customer-detail-modal .site-status-badge.is-pending,
.modal-overlay .site-status-badge.is-pending {
  color: #fff;
  border: 1px solid #b9440c;
  background: #c84a0b;
}
.customer-detail-modal .site-location-summary > span,
.modal-overlay .site-location-summary > span {
  margin: 0 0 3px;
}
.customer-detail-modal .site-power-grid,
.modal-overlay .site-power-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 2px 0 0;
  border-top: 0;
}
.customer-detail-modal .site-power-grid > div,
.modal-overlay .site-power-grid > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}
.customer-detail-modal .site-power-grid dt,
.modal-overlay .site-power-grid dt {
  color: #576270;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}
.customer-detail-modal .site-power-grid dt b,
.modal-overlay .site-power-grid dt b {
  font-weight: 700;
}
.customer-detail-modal .site-power-grid dd,
.modal-overlay .site-power-grid dd {
  min-width: 0;
  margin: 0;
  color: #202a35;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.customer-detail-modal .site-card-actions,
.modal-overlay .site-card-actions,
.customer-detail-modal .site-card > .locked-note,
.modal-overlay .site-card > .locked-note {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
@media (max-width: 720px) {
  .customer-detail-modal .site-card,
  .modal-overlay .site-card {
    grid-template-columns: 1fr;
  }
  .customer-detail-modal .site-power-grid,
  .modal-overlay .site-power-grid {
    margin-top: 2px;
  }
}

/* ============================================================
   WPPEI CRM v046 - customer detail section title bars
   ============================================================ */
.customer-detail-modal .customer-info-card {
  padding: 0;
  overflow: hidden;
}
.customer-detail-modal .detail-card-head,
.customer-detail-modal .detail-section-head.detail-section-head-sky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 13px;
  border-bottom: 1px solid #63b7e7;
  background: linear-gradient(180deg, #9bdcff 0%, #76c5f4 100%);
}
.customer-detail-modal .detail-card-head h3,
.customer-detail-modal .detail-section-head.detail-section-head-sky h3 {
  margin: 0;
  color: #103f5c;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.3;
  white-space: nowrap;
}
.customer-detail-modal .detail-card-body {
  padding: 0 13px 10px;
}
.customer-detail-modal .detail-card-body .detail-list {
  margin-top: 0;
}
.customer-detail-modal .detail-section-head.detail-section-head-sky p {
  min-width: 0;
  margin: 0 0 0 auto;
  color: #214f6a;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
}
@media (max-width: 720px) {
  .customer-detail-modal .detail-section-head.detail-section-head-sky {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .customer-detail-modal .detail-section-head.detail-section-head-sky p {
    margin-left: 0;
    text-align: left;
  }
}

/* ============================================================
   WPPEI CRM v047 - consistent detail section headers and history layout
   ============================================================ */
.customer-detail-modal .detail-section-head.detail-section-head-sky {
  min-height: 42px;
}
.customer-detail-modal .document-verification-status .badge-warning {
  color: #fff;
  background: #c84a0a;
  border-color: #a93d06;
  box-shadow: 0 4px 10px rgba(168, 61, 6, .18);
}
.customer-detail-modal .document-verification-status .badge-warning::before {
  background: #fff;
}
.customer-detail-modal .timeline-item {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: start;
}
.customer-detail-modal .timeline-item > small {
  margin-top: 0;
  padding-top: 1px;
  color: #727b87;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}
.customer-detail-modal .timeline-main {
  min-width: 0;
}
.customer-detail-modal .timeline-main strong {
  display: block;
}
.customer-detail-modal .timeline-main p {
  margin: 7px 0 0;
}
@media (max-width: 720px) {
  .customer-detail-modal .timeline-item {
    grid-template-columns: 14px minmax(0, 1fr);
  }
  .customer-detail-modal .timeline-item > small {
    grid-column: 2;
    justify-self: end;
    margin-top: 3px;
    white-space: normal;
  }
}

/* ============================================================
   WPPEI CRM v048 - compact empty contract and activity rows
   ============================================================ */
.customer-detail-modal .contract-detail-section.is-empty .empty-state {
  min-height: 88px;
  padding: 14px 18px 16px;
}
.customer-detail-modal .contract-detail-section.is-empty .empty-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 7px;
  border-radius: 9px;
  font-size: 12px;
}
.customer-detail-modal .contract-detail-section.is-empty .empty-state p {
  font-size: 11px;
}
.customer-detail-modal .timeline-list {
  padding: 2px 13px;
}
.customer-detail-modal .timeline-item {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px 0;
}
.customer-detail-modal .timeline-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  box-shadow: 0 0 0 3px #eaf1f7;
}
.customer-detail-modal .timeline-main strong {
  font-size: 13px;
  line-height: 1.3;
}
.customer-detail-modal .timeline-main p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}
.customer-detail-modal .timeline-item > small {
  padding-top: 0;
  font-size: 9px;
  line-height: 1.3;
}
@media (max-width: 720px) {
  .customer-detail-modal .timeline-item {
    grid-template-columns: 12px minmax(0, 1fr);
  }
}


/* ============================================================
   WPPEI CRM v049 - customer documents are upload-complete at registration
   ============================================================ */
.customer-detail-modal .document-verification-status .badge-success {
  color: #fff;
  background: #07845f;
  border-color: #066d50;
  box-shadow: 0 4px 10px rgba(6, 109, 80, .20);
}
.customer-detail-modal .document-verification-status .badge-success::before {
  background: #fff;
}

/* ============================================================
   WPPEI CRM v050 - customer list search width and six-row viewport
   ============================================================ */
.customer-list-filter-row {
  justify-content: flex-start;
}
.customer-list-filter-row .customer-search-field {
  flex: 0 1 360px;
  width: min(360px, 100%);
  max-width: 360px;
}
#customer-table-host .table-wrap.customer-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#customer-table-host .table-wrap.customer-table-scroll .customer-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f6f8;
  box-shadow: 0 1px 0 #d8dde3;
}
@media (max-width: 720px) {
  .customer-list-filter-row .customer-search-field {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}


/* ============================================================
   WPPEI CRM v051 - compact customer list row height
   ============================================================ */
#customer-table-host .customer-data-table td {
  padding: 9px 12px;
  line-height: 1.35;
}
#customer-table-host .customer-data-table td[data-column-key="contact"] {
  line-height: 1.35;
}
#customer-table-host .customer-data-table .table-subline {
  margin-top: 2px;
  line-height: 1.3;
}

/* ============================================================
   WPPEI CRM v052 - customer table column sorting controls
   ============================================================ */
#customer-table-host .customer-sort-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
#customer-table-host .customer-sort-controls {
  display: inline-flex;
  flex: 0 0 12px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 12px;
}
#customer-table-host .customer-sort-btn {
  position: relative;
  width: 12px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  opacity: .38;
}
#customer-table-host .customer-sort-btn::before {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  transform: translateX(-50%);
}
#customer-table-host .customer-sort-btn.sort-asc::before {
  bottom: 1px;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #617083;
  border-left: 4px solid transparent;
}
#customer-table-host .customer-sort-btn.sort-desc::before {
  top: 1px;
  border-top: 5px solid #617083;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
#customer-table-host .customer-sort-btn:hover,
#customer-table-host .customer-sort-btn:focus-visible,
#customer-table-host .customer-sort-btn.active {
  opacity: 1;
}
#customer-table-host .customer-sort-btn.active.sort-asc::before {
  border-bottom-color: #245da8;
}
#customer-table-host .customer-sort-btn.active.sort-desc::before {
  border-top-color: #245da8;
}
#customer-table-host .customer-sort-btn:focus-visible {
  outline: 2px solid rgba(36, 93, 168, .35);
  outline-offset: 1px;
}

/* ============================================================
   WPPEI CRM v053 - inline customer page and list descriptions
   ============================================================ */
.customer-page-intro {
  margin-bottom: 14px;
}
.customer-page-intro > div:last-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 14px;
}
.customer-page-intro h1,
.customer-page-intro p {
  flex: 0 0 auto;
  margin: 0;
}
.customer-page-intro p {
  line-height: 1.35;
  white-space: nowrap;
}
.customer-list-toolbar > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.customer-list-toolbar h2,
.customer-list-toolbar p {
  flex: 0 0 auto;
  margin: 0;
}
.customer-list-toolbar p {
  line-height: 1.35;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .customer-page-intro > div:last-child,
  .customer-list-toolbar > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .customer-page-intro p,
  .customer-list-toolbar p {
    white-space: normal;
  }
}


/* ============================================================
   WPPEI CRM v054 - compact list heading spacing and seven-row viewport
   ============================================================ */
.customer-list-toolbar {
  margin-bottom: 9px;
  padding-bottom: 8px;
}
.customer-list-toolbar > div:first-child {
  align-items: baseline;
}
.customer-list-toolbar p {
  position: relative;
  top: 1px;
}
@media (max-width: 900px) {
  .customer-list-toolbar > div:first-child {
    align-items: flex-start;
  }
  .customer-list-toolbar p {
    top: 0;
  }
}


/* ============================================================
   WPPEI CRM v056 - recovered v054 layout + electricity input formatting
   ============================================================ */
.customer-registration-modal .registration-step-form .power-step-grid,
#power-form .power-step-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#power-form .power-step-grid > .span-3 {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .customer-registration-modal .registration-step-form .power-step-grid,
  #power-form .power-step-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WPPEI CRM v058 - compact power memo and highlighted header
   ============================================================ */
.power-information-modal .modal-header {
  color: #fff;
  background: linear-gradient(110deg, #4053c7 0%, #5662d9 48%, #8373e8 100%);
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: 0 8px 22px rgba(57, 68, 169, .16);
}
.power-information-modal .modal-header h3,
.power-information-modal .modal-header h3 i {
  color: #fff;
}
.power-information-modal .header-icon-btn {
  color: #fff;
}
.power-information-modal .header-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}
#power-form .customer-environment-field textarea.field {
  height: 54px;
  min-height: 54px;
  resize: vertical;
}

/* ============================================================
   WPPEI CRM v059 - unified title-row background for customer detail flow
   Applies the same high-contrast header used by the power-information modal
   to every modal opened from the customer detail card.
   ============================================================ */
.customer-detail-flow-modal .modal-header {
  color: #fff;
  background: linear-gradient(110deg, #4053c7 0%, #5662d9 48%, #8373e8 100%);
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: 0 8px 22px rgba(57, 68, 169, .16);
}
.customer-detail-flow-modal .modal-header h3,
.customer-detail-flow-modal .modal-header h3 i {
  color: #fff;
}
.customer-detail-flow-modal .header-icon-btn {
  color: #fff;
}
.customer-detail-flow-modal .header-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

/* ============================================================
   WPPEI CRM v061 - scalable country catalog filters
   ============================================================ */
.settings-country-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 220px);
  gap: 9px;
  margin-bottom: 11px;
}
.settings-country-search {
  position: relative;
  display: block;
  min-width: 0;
}
.settings-country-search > i {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 50%;
  color: #7a8792;
  font-size: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}
.settings-country-search .field { width: 100%; padding-left: 36px; }
.country-choice[hidden] { display: none; }
.settings-country-no-results {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 78px;
  margin-top: 9px;
  border: 1px dashed #d5dce2;
  border-radius: 8px;
  background: #fafbfc;
  color: #7b8791;
  font-size: 12px;
}
.settings-country-no-results:not([hidden]) { display: flex; }

@media (max-width: 760px) {
  .settings-country-toolbar { grid-template-columns: 1fr; }
  .settings-country-toolbar .compact-field { width: 100%; }
}

/* ============================================================
   WPPEI CRM v063 - unified list headings and custom country form
   ============================================================ */
.crm-inline-intro {
  margin-bottom: 14px;
}
.crm-inline-intro > div:last-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 14px;
}
.crm-inline-intro h1,
.crm-inline-intro p {
  flex: 0 0 auto;
  margin: 0;
}
.crm-inline-intro p {
  line-height: 1.35;
  white-space: nowrap;
}
.crm-list-toolbar {
  margin-bottom: 9px;
  padding-bottom: 8px;
}
.crm-list-toolbar > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}
.crm-list-toolbar h2,
.crm-list-toolbar p {
  flex: 0 0 auto;
  margin: 0;
}
.crm-list-toolbar p {
  line-height: 1.35;
  white-space: nowrap;
  position: relative;
  top: 1px;
}
.crm-list-filter-row {
  justify-content: flex-start;
}
.crm-list-filter-row .crm-search-field {
  flex: 0 1 360px;
  width: min(360px, 100%);
  max-width: 360px;
}
.custom-country-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #4861d4;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.settings-country-form {
  gap: 16px;
}
.settings-country-form-grid {
  gap: 14px;
}
.settings-language-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.settings-language-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d8dde6;
  border-radius: 12px;
  background: #fff;
}
.settings-language-check input {
  width: 16px;
  height: 16px;
  accent-color: #4e61d8;
}
.settings-language-check span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-language-check small {
  color: #6c7683;
}
.settings-inline-actions {
  display: flex;
  justify-content: flex-start;
}
.field-help {
  display: block;
  margin-top: 8px;
  color: #66717f;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .crm-inline-intro > div:last-child,
  .crm-list-toolbar > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .crm-inline-intro p,
  .crm-list-toolbar p {
    white-space: normal;
    top: 0;
  }
}
@media (max-width: 720px) {
  .crm-list-filter-row .crm-search-field {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   WPPEI CRM v064 - compact country settings
   ============================================================ */
.compact-settings-country-panel {
  padding: 20px 22px;
}
.compact-country-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.compact-country-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.compact-country-title h3 {
  margin: 1px 0 3px;
  color: #25313c;
  font-size: 16px;
}
.compact-country-title p {
  margin: 0;
  color: #687582;
  font-size: 11px;
  line-height: 1.45;
}
.compact-country-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.compact-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #d9dfe5;
  border-radius: 999px;
  background: #f7f9fb;
  color: #465463;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.compact-selected-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0 12px;
  border-top: 1px solid #e4e8ec;
}
.compact-selected-row > strong {
  color: #3b4854;
  font-size: 12px;
  white-space: nowrap;
}
.selected-country-badges.compact {
  gap: 5px;
  min-width: 0;
}
.operation-country-badge.compact {
  min-height: 27px;
  padding: 3px 8px;
  gap: 5px;
  font-size: 10px;
}
.operation-country-badge.compact strong {
  font-size: 9px;
}
.settings-country-toolbar.compact {
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px);
  margin: 0 0 9px;
}
.compact-country-picker {
  max-height: 226px;
  overflow-y: auto;
  padding: 1px 5px 1px 1px;
  scrollbar-gutter: stable;
}
.country-choice-grid.compact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.country-choice.compact {
  min-height: 42px;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 7px;
  border-radius: 7px;
}
.country-choice.compact .country-choice-check {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.country-choice.compact .country-choice-copy strong {
  font-size: 10px;
}
.country-choice.compact .country-choice-copy small {
  margin-top: 1px;
  font-size: 8px;
}
.country-choice.compact .custom-country-tag {
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 8px;
}
.compact-language-details {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #e4e8ec;
}
.compact-language-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #34414d;
  cursor: pointer;
  list-style: none;
}
.compact-language-details summary::-webkit-details-marker {
  display: none;
}
.compact-language-details summary > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 780;
}
.compact-language-details summary > span::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-size: 9px;
  font-weight: 900;
  transition: transform .15s ease;
}
.compact-language-details[open] summary > span::after {
  transform: rotate(180deg);
}
.compact-language-details summary > small {
  overflow: hidden;
  color: #77828d;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linked-language-badges.compact {
  gap: 6px;
  margin-top: 11px;
}
.language-link-badge.compact {
  min-height: 36px;
  padding: 5px 8px;
  gap: 1px 5px;
}
.language-link-badge.compact > strong {
  min-width: 23px;
  height: 23px;
  font-size: 8px;
}
.language-link-badge.compact > span {
  font-size: 10px;
}
.language-link-badge.compact > small {
  font-size: 8px;
}
.compact-country-modal-form {
  gap: 15px;
}
.compact-modal-help {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f6f8fb;
  color: #687480;
  font-size: 11px;
  line-height: 1.5;
}
.settings-language-check-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.settings-language-check.compact {
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 8px;
}
.settings-language-check.compact strong {
  font-size: 11px;
}
.settings-language-check.compact small {
  font-size: 9px;
}
@media (max-width: 1440px) {
  .country-choice-grid.compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 1240px) {
  .country-choice-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .country-choice-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .compact-country-head {
    flex-direction: column;
  }
  .compact-country-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .country-choice-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-language-check-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .compact-settings-country-panel {
    padding: 16px;
  }
  .compact-selected-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .settings-country-toolbar.compact {
    grid-template-columns: 1fr;
  }
  .country-choice-grid.compact,
  .settings-language-check-grid.compact {
    grid-template-columns: 1fr;
  }
  .compact-language-details summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .compact-language-details summary > small {
    white-space: normal;
  }
  .compact-country-actions .btn {
    flex: 1 1 130px;
  }
}

/* ============================================================
   WPPEI CRM v065 - searchable world country selector
   ============================================================ */
.country-catalog-modal-form {
  gap: 15px;
}
.country-catalog-combobox {
  position: relative;
}
.country-catalog-search-field {
  position: relative;
}
.country-catalog-search-field > i {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  color: #74808d;
  font-size: 13px;
  transform: translateY(-50%);
  pointer-events: none;
}
.country-catalog-search-field .field {
  padding-right: 42px;
  padding-left: 40px;
}
.country-catalog-clear {
  position: absolute;
  top: 50%;
  right: 9px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #71808d;
  cursor: pointer;
  transform: translateY(-50%);
}
.country-catalog-clear:hover {
  background: #eef1f5;
  color: #273744;
}
.country-catalog-results {
  max-height: 244px;
  margin-top: 7px;
  overflow-y: auto;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 43, 56, .10);
  scrollbar-gutter: stable;
}
.country-catalog-option {
  display: grid;
  width: 100%;
  min-height: 50px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  color: #263542;
  text-align: left;
  cursor: pointer;
}
.country-catalog-option:last-child {
  border-bottom: 0;
}
.country-catalog-option:hover,
.country-catalog-option:focus-visible {
  background: #f4f6ff;
  outline: none;
}
.country-catalog-option.is-registered {
  background: #fafbfc;
}
.country-catalog-option-code {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #edf0ff;
  color: #485cd2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.country-catalog-option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.country-catalog-option-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-catalog-option-copy small {
  overflow: hidden;
  color: #74808b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-catalog-option > em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef1f4;
  color: #66727d;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}
.country-catalog-option > i {
  color: #87929d;
  font-size: 9px;
}
.country-catalog-empty {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #77838e;
  font-size: 11px;
}
.country-auto-preview {
  overflow: hidden;
  border: 1px solid #d9dfe6;
  border-radius: 11px;
  background: #fbfcfd;
}
.country-auto-preview-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-bottom: 1px solid #e3e7eb;
  background: #f4f6ff;
}
.country-auto-code {
  display: inline-flex;
  min-height: 33px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #4c5fd5;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
}
.country-auto-preview-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.country-auto-preview-head strong {
  overflow: hidden;
  color: #263541;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-auto-preview-head small {
  overflow: hidden;
  color: #6d7985;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-registration-state {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.country-registration-state.is-ready {
  background: #e8f7f0;
  color: #08744f;
}
.country-registration-state.is-registered {
  background: #eef1f4;
  color: #65717d;
}
.country-auto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 5px 13px;
}
.country-auto-grid > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f3;
}
.country-auto-grid > div:nth-last-child(-n+2) {
  border-bottom: 0;
}
.country-auto-grid > div:nth-child(odd) {
  padding-right: 12px;
  border-right: 1px solid #edf0f3;
}
.country-auto-grid > div:nth-child(even) {
  padding-left: 12px;
}
.country-auto-grid span {
  color: #73808c;
  font-size: 10px;
  white-space: nowrap;
}
.country-auto-grid strong {
  overflow: hidden;
  color: #293844;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-auto-language-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.country-auto-language-list span {
  padding: 3px 6px;
  border-radius: 999px;
  background: #eef1ff;
  color: #4d60c9;
  font-size: 9px;
  font-weight: 700;
}
.country-auto-help {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 9px 13px;
  border-top: 1px solid #e4e8ec;
  background: #fff;
  color: #6d7984;
  font-size: 10px;
  line-height: 1.45;
}
.country-auto-help i {
  margin-top: 2px;
  color: #5769d5;
}
@media (max-width: 620px) {
  .country-auto-preview-head {
    grid-template-columns: 43px minmax(0, 1fr);
  }
  .country-registration-state {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .country-auto-grid {
    grid-template-columns: 1fr;
  }
  .country-auto-grid > div,
  .country-auto-grid > div:nth-child(odd),
  .country-auto-grid > div:nth-child(even) {
    padding: 9px 0;
    border-right: 0;
    border-bottom: 1px solid #edf0f3;
  }
  .country-auto-grid > div:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   WPPEI CRM v067 - compact workflow and registration help icons
   ============================================================ */
.crm-list-toolbar h2,
.customer-list-toolbar h2 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.crm-list-toolbar h2 .count-pill,
.customer-list-toolbar h2 .count-pill {
  margin-left: 2px;
}
.crm-help-tooltip {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-left: 1px;
  color: #53657a;
  font-size: 13px;
  vertical-align: middle;
}
.crm-help-tooltip:hover,
.crm-help-tooltip:focus-visible {
  background: #eaf0ff;
  color: #4054cd;
}
.crm-floating-help-tooltip {
  max-width: min(420px, calc(100vw - 24px));
  white-space: pre-line;
}

/* ============================================================
   WPPEI CRM v068 - contract list row height aligned with customers
   ============================================================ */
#contract-table-host .data-table td {
  padding: 9px 12px;
  line-height: 1.35;
}
#contract-table-host .data-table .table-subline {
  margin-top: 2px;
  line-height: 1.3;
}

/* ============================================================
   WPPEI CRM v069 - balanced contract table alignment and sorting
   ============================================================ */
#contract-table-host .table-wrap {
  overflow-x: auto;
}
#contract-table-host .contract-data-table {
  width: 100%;
  min-width: 1160px;
  table-layout: fixed;
}
#contract-table-host .contract-data-table th.contract-table-heading,
#contract-table-host .contract-data-table td.contract-cell-center {
  text-align: center;
  vertical-align: middle;
}
#contract-table-host .contract-data-table th[data-column-key="contract_number"] { width: 13%; }
#contract-table-host .contract-data-table th[data-column-key="customer_name"] { width: 18%; }
#contract-table-host .contract-data-table th[data-column-key="product_type"] { width: 10%; }
#contract-table-host .contract-data-table th[data-column-key="monthly_fee"] { width: 12%; }
#contract-table-host .contract-data-table th[data-column-key="workflow_status"] { width: 14%; }
#contract-table-host .contract-data-table th[data-column-key="updated_at"] { width: 11%; }
#contract-table-host .contract-data-table th[data-column-key="action"] { width: 22%; }
#contract-table-host .contract-data-table td[data-column-key="contract_number"],
#contract-table-host .contract-data-table td[data-column-key="product_type"],
#contract-table-host .contract-data-table td[data-column-key="monthly_fee"],
#contract-table-host .contract-data-table td[data-column-key="workflow_status"],
#contract-table-host .contract-data-table td[data-column-key="updated_at"] {
  white-space: nowrap;
}
#contract-table-host .contract-data-table td[data-column-key="customer_name"] strong,
#contract-table-host .contract-data-table td[data-column-key="customer_name"] .table-subline,
#contract-table-host .contract-data-table td[data-column-key="contract_number"] strong,
#contract-table-host .contract-data-table td[data-column-key="contract_number"] .table-subline {
  display: block;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contract-table-host .contract-data-table td[data-column-key="action"] {
  padding-right: 10px;
  padding-left: 10px;
}
#contract-table-host .contract-data-table td[data-column-key="action"] .row-actions {
  justify-content: center;
  min-width: 0;
  width: 100%;
}
#contract-table-host .contract-data-table td[data-column-key="action"] .btn {
  white-space: nowrap;
}
#contract-table-host .contract-sort-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
#contract-table-host .contract-sort-controls {
  display: inline-flex;
  flex: 0 0 12px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 12px;
}
#contract-table-host .contract-sort-btn {
  position: relative;
  width: 12px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  opacity: .38;
}
#contract-table-host .contract-sort-btn::before {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  transform: translateX(-50%);
}
#contract-table-host .contract-sort-btn.sort-asc::before {
  bottom: 1px;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #617083;
  border-left: 4px solid transparent;
}
#contract-table-host .contract-sort-btn.sort-desc::before {
  top: 1px;
  border-top: 5px solid #617083;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
#contract-table-host .contract-sort-btn:hover,
#contract-table-host .contract-sort-btn:focus-visible,
#contract-table-host .contract-sort-btn.active {
  opacity: 1;
}
#contract-table-host .contract-sort-btn.active.sort-asc::before {
  border-bottom-color: #245da8;
}
#contract-table-host .contract-sort-btn.active.sort-desc::before {
  border-top-color: #245da8;
}
#contract-table-host .contract-sort-btn:focus-visible {
  outline: 2px solid rgba(36, 93, 168, .35);
  outline-offset: 1px;
}


/* ============================================================
   WPPEI CRM v070 - contract table fits without horizontal scroll
   ============================================================ */
#contract-table-host .table-wrap {
  max-width: 100%;
  overflow-x: hidden;
}
#contract-table-host .contract-data-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}
#contract-table-host .contract-data-table th,
#contract-table-host .contract-data-table td {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}
#contract-table-host .contract-data-table th[data-column-key="contract_number"] { width: 14%; }
#contract-table-host .contract-data-table th[data-column-key="customer_name"] { width: 17%; }
#contract-table-host .contract-data-table th[data-column-key="product_type"] { width: 9%; }
#contract-table-host .contract-data-table th[data-column-key="monthly_fee"] { width: 11%; }
#contract-table-host .contract-data-table th[data-column-key="workflow_status"] { width: 14%; }
#contract-table-host .contract-data-table th[data-column-key="updated_at"] { width: 12%; }
#contract-table-host .contract-data-table th[data-column-key="action"] { width: 23%; }
#contract-table-host .contract-data-table td[data-column-key="product_type"],
#contract-table-host .contract-data-table td[data-column-key="monthly_fee"],
#contract-table-host .contract-data-table td[data-column-key="workflow_status"],
#contract-table-host .contract-data-table td[data-column-key="updated_at"] {
  padding-right: 8px;
  padding-left: 8px;
  text-overflow: ellipsis;
}
#contract-table-host .contract-data-table td[data-column-key="action"] {
  padding-right: 6px;
  padding-left: 6px;
}
#contract-table-host .contract-data-table td[data-column-key="action"] .row-actions {
  max-width: 100%;
  gap: 4px;
}
#contract-table-host .contract-data-table td[data-column-key="action"] .btn {
  min-height: 30px;
  max-width: 100%;
  padding-right: 8px;
  padding-left: 8px;
  gap: 5px;
  font-size: 12px;
}

/* ============================================================
   WPPEI CRM v072 - contract create/detail modals aligned to customer UI
   ============================================================ */
.contract-create-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}
.contract-create-modal .header-icon-btn {
  color: #fff;
}
.contract-create-modal .header-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}
.contract-create-modal .contract-create-form {
  gap: 16px;
}
.contract-create-modal .contract-section-title {
  position: relative;
  gap: 11px;
  margin: 2px 0 0;
  padding: 0 0 12px 14px;
  border-bottom: 1px solid #dfe2eb;
}
.contract-create-modal .contract-section-title:first-child {
  padding-top: 0;
}
.contract-create-modal .contract-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5966df, #7d73e7);
}
.contract-create-modal .contract-section-title > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #4658c7, #7069df);
  box-shadow: 0 7px 14px -9px rgba(62, 74, 178, .75);
}
.contract-create-modal .contract-section-title strong {
  color: #222938;
  font-size: 17px;
  font-weight: 780;
  letter-spacing: -.025em;
}
.contract-create-modal .contract-section-title small {
  margin-top: 4px;
  color: #788195;
  font-size: 11px;
}
.contract-create-modal .readiness-note {
  border-color: #bfe1d2;
  border-radius: 11px;
  background: #eaf8f2;
  color: #23644f;
}
.contract-create-modal .draft-notice {
  border-color: #dfe3ed;
  border-radius: 11px;
  background: #f3f5fa;
  color: #536071;
}
.contract-create-modal .form-grid-2 {
  gap: 13px 15px;
}
.contract-create-modal textarea.field {
  min-height: 86px;
  resize: vertical;
}

.contract-detail-modal {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #f7f8fc;
  box-shadow: 0 34px 90px -24px rgba(24, 28, 70, .55), 0 10px 28px rgba(25, 31, 76, .15);
}
.contract-detail-modal .modal-header {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 14px 20px;
}
.contract-detail-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 20px;
  background:
    radial-gradient(circle at 88% 2%, rgba(110, 103, 226, .07), transparent 230px),
    linear-gradient(180deg, #fafafd 0%, #f6f7fb 100%);
}
.contract-detail-modal .detail-hero {
  border-radius: 12px;
  background: linear-gradient(112deg, #172331 0%, #24384d 100%);
  box-shadow: 0 10px 24px -18px rgba(18, 32, 48, .7);
}
.contract-detail-modal .contract-detail-grid {
  gap: 12px;
  margin-top: 12px;
}
.contract-detail-modal .contract-detail-grid:first-of-type {
  margin-top: 0;
}
.contract-detail-modal .detail-card-body .detail-list > div {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 0;
}
.contract-detail-modal .detail-card-body .detail-list dd {
  overflow-wrap: anywhere;
}
.contract-detail-modal .snapshot-banner,
.contract-detail-modal .superseded-panel,
.contract-detail-modal .policy-note,
.contract-detail-modal .rejection-panel {
  margin-bottom: 12px;
  border-radius: 11px;
}
.contract-detail-modal .snapshot-document-row {
  min-width: 0;
}
.contract-detail-modal .timeline-list {
  background: #fff;
}

@media (max-width: 760px) {
  .contract-create-modal,
  .contract-detail-modal {
    width: min(100%, calc(100vw - 20px));
  }
  .contract-create-modal .form-grid-2,
  .contract-detail-modal .contract-detail-grid {
    grid-template-columns: 1fr;
  }
  .contract-detail-modal .detail-card-body .detail-list > div {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .contract-create-modal .contract-section-title {
    align-items: flex-start;
  }
  .contract-create-modal .contract-section-title strong {
    font-size: 15px;
  }
  .contract-detail-modal {
    border-radius: 17px;
  }
  .contract-detail-modal .modal-body {
    padding: 12px 14px 16px;
  }
  .contract-detail-modal .detail-card-body .detail-list > div {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

/* ============================================================
   WPPEI CRM v073 - contract autosave and simplified e-signature
   ============================================================ */
.contract-autosave-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  background: #f7f9fb;
  color: #667281;
  font-size: 12px;
  font-weight: 650;
}
.contract-autosave-status.is-saving {
  border-color: #ccd5f5;
  background: #f2f4ff;
  color: #455ac7;
}
.contract-autosave-status.is-saved {
  border-color: #bfe2d4;
  background: #eff9f5;
  color: #216d54;
}
.contract-autosave-status.is-error {
  border-color: #efc9c7;
  background: #fff4f3;
  color: #a44440;
}
.contract-draft-lock-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f2f4f8;
  color: #5f6977;
  font-size: 11px;
  line-height: 1.45;
}
.contract-draft-lock-note[hidden] { display: none; }
.contract-status-stack,
.contract-detail-statuses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.contract-signing-badge {
  white-space: nowrap;
}
.contract-signing-badge .badge-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
}
.contract-execution-section {
  margin-top: 12px;
}
.contract-execution-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  background: #fff;
}
.contract-execution-card.is-completed {
  border-color: #bfe1d2;
  background: linear-gradient(180deg, #fbfffd 0%, #f2faf6 100%);
}
.contract-execution-state {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contract-execution-state > i {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf1ff;
  color: #4b5cd1;
}
.contract-execution-card.is-completed .contract-execution-state > i {
  background: #e6f6ef;
  color: #187258;
}
.contract-execution-state strong,
.contract-execution-state small {
  display: block;
}
.contract-execution-state small {
  margin-top: 3px;
  color: #6e7885;
  font-size: 11px;
}
.contract-signature-list {
  margin: 0;
}
.contract-verification-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  color: #4057c6;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.contract-verification-link:hover { text-decoration: underline; }
.contract-sign-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}
.contract-sign-form {
  gap: 15px;
}
.signature-contract-summary {
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(112deg, #172331, #263d56);
  color: #fff;
}
.signature-contract-summary span,
.signature-contract-summary strong,
.signature-contract-summary small {
  display: block;
}
.signature-contract-summary span {
  color: #b9c8d7;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
}
.signature-contract-summary strong {
  margin-top: 4px;
  font-size: 20px;
}
.signature-contract-summary small {
  margin-top: 4px;
  color: #d8e0e8;
}
.signature-simple-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.signature-simple-flow > span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid #dfe4ea;
  border-radius: 10px;
  color: #697483;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.signature-simple-flow > span.done {
  border-color: #bfe1d2;
  background: #eef8f4;
  color: #24705a;
}
.signature-simple-flow > span.active {
  border-color: #c9d0f6;
  background: #f0f2ff;
  color: #4659c5;
}
.signature-simple-flow > i {
  color: #a3abb5;
  font-size: 9px;
}
.signature-pad-field {
  display: grid;
  gap: 7px;
}
.signature-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#contract-signature-canvas {
  width: 100%;
  height: 170px;
  border: 1px dashed #aeb8c4;
  border-radius: 12px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.signature-pad-field > small {
  color: #75808d;
  font-size: 11px;
}
.signature-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #dfe4ea;
  border-radius: 11px;
  background: #fafbfc;
  color: #44505d;
  font-size: 12px;
  line-height: 1.55;
}
.signature-consent-check input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: #4c5fd2;
}
@media (max-width: 680px) {
  .signature-simple-flow {
    grid-template-columns: 1fr;
  }
  .signature-simple-flow > i {
    transform: rotate(90deg);
    justify-self: center;
  }
  #contract-signature-canvas { height: 150px; }
}

/* ============================================================
   WPPEI CRM v074 - preliminary agreement and final contract flow
   ============================================================ */
.contract-kind-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: 0 auto 4px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.contract-kind-badge.is-pre {
  color: #6e4e16;
  background: #fff8e7;
  border-color: #ead6a5;
}
.contract-kind-badge.is-final {
  color: #3153a6;
  background: #eef3ff;
  border-color: #cad6f8;
}
.contract-detail-statuses .contract-kind-badge,
.detail-hero .contract-kind-badge {
  margin: 6px 0 0;
}
#contract-kind-filter {
  flex: 0 0 170px;
  max-width: 170px;
}
.contract-convert,
#detail-contract-convert {
  white-space: nowrap;
}
@media (max-width: 720px) {
  #contract-kind-filter {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   WPPEI CRM v075 - customer preliminary/final contract progress
   ============================================================ */
.customer-contract-progress-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
}
.customer-contract-progress-cell > small {
  max-width: 150px;
  overflow: hidden;
  color: #6d7784;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-contract-progress {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.customer-contract-progress i {
  font-size: 9px;
}
.customer-contract-progress.is-pre-progress {
  border-color: #d7c5f5;
  background: #f5f0ff;
  color: #6d3db4;
}
.customer-contract-progress.is-pre-completed {
  border-color: #9fd5c1;
  background: #edf9f4;
  color: #176b55;
}
.customer-contract-progress.is-final-progress {
  border-color: #a9c7ee;
  background: #eef5ff;
  color: #245da8;
}
.customer-contract-progress.is-completed {
  border-color: #79c6a7;
  background: #e8f8f1;
  color: #087052;
}
.customer-contract-progress.is-compact {
  min-height: 23px;
  padding: 3px 8px;
  font-size: 9px !important;
}
.customer-contract-none {
  color: #98a1aa;
}
.customer-detail-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.customer-detail-modal .detail-hero .customer-contract-progress {
  border-color: rgba(255,255,255,.25);
  box-shadow: none;
}
.customer-detail-modal .detail-hero .customer-contract-progress.is-pre-progress {
  background: rgba(139, 92, 246, .18);
  color: #f0e9ff;
}
.customer-detail-modal .detail-hero .customer-contract-progress.is-pre-completed,
.customer-detail-modal .detail-hero .customer-contract-progress.is-completed {
  background: rgba(16, 185, 129, .18);
  color: #e4fff4;
}
.customer-detail-modal .detail-hero .customer-contract-progress.is-final-progress {
  background: rgba(59, 130, 246, .20);
  color: #e8f2ff;
}
.contract-mini-row > div:first-child {
  min-width: 0;
}
.contract-mini-row .contract-kind-badge {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 5px;
}
.contract-mini-row .customer-contract-progress {
  margin: 0;
}
@media (max-width: 720px) {
  .customer-detail-status-stack {
    align-items: flex-start;
  }
  .customer-contract-progress {
    white-space: normal;
    text-align: center;
  }
}

/* ============================================================
   WPPEI CRM v078 - subscription pricing and contract documents
   ============================================================ */
.subscription-pricing-panel {
  margin-top: 22px;
}
.subscription-pricing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.subscription-pricing-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(170px, .8fr) minmax(190px, .9fr);
  gap: 14px;
}
.input-suffix {
  position: relative;
}
.input-suffix .field {
  padding-right: 64px;
}
.input-suffix > span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #66717f;
  font-size: 12px;
  font-weight: 750;
  transform: translateY(-50%);
  pointer-events: none;
}
.subscription-pricing-preview {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #d8e0eb;
  border-radius: 10px;
  background: #f7f9fc;
  color: #536170;
  font-size: 12px;
  line-height: 1.5;
}
.subscription-pricing-preview i {
  margin-top: 2px;
  color: #4157c9;
}
.subscription-estimate-card {
  overflow: hidden;
  border: 1px solid #bfd9f0;
  border-radius: 12px;
  background: #f6fbff;
}
.subscription-estimate-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #e4f3ff;
}
.subscription-estimate-title > i {
  color: #2671ad;
}
.subscription-estimate-title div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.subscription-estimate-title strong {
  color: #173d5c;
  font-size: 13px;
}
.subscription-estimate-title small {
  color: #667789;
  font-size: 10px;
  line-height: 1.4;
}
.subscription-estimate-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.subscription-estimate-values > div {
  display: flex;
  min-height: 64px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px 13px;
  border-right: 1px solid #d8e6f2;
}
.subscription-estimate-values > div:last-child {
  border-right: 0;
}
.subscription-estimate-values span {
  color: #738091;
  font-size: 10px;
}
.subscription-estimate-values strong {
  color: #203247;
  font-size: 13px;
}
.subscription-estimate-values .is-highlight {
  background: #fffaf0;
}
.subscription-estimate-values .is-highlight strong {
  color: #9b6613;
  font-size: 15px;
}
.subscription-estimate-card.is-empty .subscription-estimate-values strong {
  color: #98a3af;
}
.calculated-contract-field {
  background: #f4f7fa;
  color: #24364a;
  font-weight: 750;
}
.contract-estimate-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: -2px;
  padding: 11px 13px;
  border: 1px solid #cfe1f2;
  border-radius: 10px;
  background: #f4faff;
  color: #496175;
}
.contract-estimate-note > i {
  margin-top: 3px;
  color: #2d72ab;
}
.contract-estimate-note > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contract-estimate-note strong {
  color: #214b6e;
  font-size: 12px;
}
.contract-estimate-note span {
  font-size: 11px;
  line-height: 1.45;
}
.generated-contract-documents {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
}
.generated-contract-document-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid #dce2e9;
  border-radius: 10px;
  background: #fff;
}
.generated-contract-document-row.is-current {
  border-color: #a8c8e9;
  background: #f7fbff;
}
.generated-document-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fceeee;
  color: #b83e3e;
}
.generated-document-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.generated-document-copy strong {
  overflow: hidden;
  color: #25313f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generated-document-copy small {
  color: #7a8590;
  font-size: 10px;
}
.generated-document-actions {
  display: flex;
  gap: 6px;
}
.generated-document-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 76px;
  border: 1px dashed #ccd5df;
  border-radius: 10px;
  color: #798592;
  font-size: 12px;
}
.generated-document-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 3px;
}
.generated-document-footer small {
  max-width: 560px;
  color: #7b8691;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}
@media (max-width: 900px) {
  .subscription-pricing-grid {
    grid-template-columns: 1fr;
  }
  .subscription-estimate-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .subscription-estimate-values > div:nth-child(2) {
    border-right: 0;
  }
  .subscription-estimate-values > div:nth-child(-n+2) {
    border-bottom: 1px solid #d8e6f2;
  }
  .generated-contract-document-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .generated-document-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
@media (max-width: 620px) {
  .subscription-pricing-head,
  .generated-document-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .subscription-estimate-values {
    grid-template-columns: 1fr;
  }
  .subscription-estimate-values > div {
    border-right: 0;
    border-bottom: 1px solid #d8e6f2;
  }
  .subscription-estimate-values > div:last-child {
    border-bottom: 0;
  }
  .generated-document-actions {
    flex-direction: column;
  }
  .generated-document-footer small {
    text-align: left;
  }
}

#ui-modal-overlay .site-power-grid .site-estimated-fee {
  border-radius: 8px;
  background: #fff8e8;
}
#ui-modal-overlay .site-power-grid .site-estimated-fee dt,
#ui-modal-overlay .site-power-grid .site-estimated-fee dd {
  color: #875812;
  font-weight: 750;
}


/* ============================================================
   WPPEI CRM v081 - upload button radius and estimate card cleanup
   ============================================================ */
.customer-registration-modal .registration-step-form .compact-upload-box input[type="file"],
.customer-registration-modal .field-file,
.upload-box input[type=file] {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.customer-registration-modal .registration-step-form .compact-upload-box input[type="file"]::file-selector-button,
.customer-registration-modal .field-file::file-selector-button,
.upload-box input[type=file]::file-selector-button {
  margin-right: 10px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #f7f9fc;
  padding: 8px 12px;
  color: #223041;
  cursor: pointer;
}
.customer-registration-modal .registration-step-form .compact-upload-box input[type="file"]::-webkit-file-upload-button,
.customer-registration-modal .field-file::-webkit-file-upload-button,
.upload-box input[type=file]::-webkit-file-upload-button {
  margin-right: 10px;
  border: 1px solid #d7dee7;
  border-radius: 8px;
  background: #f7f9fc;
  padding: 8px 12px;
  color: #223041;
  cursor: pointer;
}


/* ============================================================
   WPPEI CRM v083 - compact site information columns
   ============================================================ */
.customer-detail-modal .site-card,
.modal-overlay .site-card {
  gap: 12px 14px;
}
.customer-detail-modal .site-power-grid > div,
.modal-overlay .site-power-grid > div {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 4px;
}


/* ============================================================
   WPPEI CRM v085 - currency rounding unit selector
   ============================================================ */
.subscription-pricing-grid .subscription-rounding-help {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.45;
}


/* ============================================================
   WPPEI CRM v088 - compact legal document heading alignment
   ============================================================ */
.customer-registration-modal .legal-document-panel-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  justify-content: initial;
  gap: 8px;
  margin-bottom: 12px;
}
.customer-registration-modal .legal-document-panel-head > i {
  margin-top: 3px;
  color: #526274;
  text-align: center;
}
.customer-registration-modal .legal-document-panel-copy {
  min-width: 0;
  text-align: left;
}
.customer-registration-modal .legal-document-panel-copy .field-label-with-help {
  justify-content: flex-start;
}
.customer-registration-modal .legal-document-panel-copy > span {
  display: block;
  margin-top: 2px;
  color: #6f7884;
  font-size: 10px;
  line-height: 1.35;
}

/* ============================================================
   WPPEI CRM v089 - product code settings and contract money fields
   ============================================================ */
.product-code-panel {
  display: grid;
  gap: 16px;
}
.product-code-form {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
}
.product-code-form .btn {
  min-height: 42px;
  white-space: nowrap;
}
.product-code-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.product-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid #dbe1e8;
  border-radius: 10px;
  background: #fff;
}
.product-code-copy {
  min-width: 0;
}
.product-code-copy strong,
.product-code-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-code-copy strong {
  color: #202c3a;
  font-size: 12px;
}
.product-code-copy small {
  margin-top: 3px;
  color: #75808d;
  font-size: 10px;
}
.product-code-state {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}
.product-code-state.is-enabled {
  background: #e8f7f0;
  color: #087052;
}
.product-code-state.is-disabled {
  background: #f0f2f5;
  color: #717b87;
}
.product-code-toggle {
  width: 17px;
  height: 17px;
  accent-color: #4255cf;
}
.product-code-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #ccd4de;
  border-radius: 10px;
  color: #77818c;
  text-align: center;
}
.contract-create-form input[inputmode="numeric"],
.contract-edit-form input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .product-code-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .product-code-form,
  .product-code-list {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   WPPEI CRM v090 - clearer contract list wording and vivid badges
   ============================================================ */
.contract-data-table .contract-kind-badge,
.contract-detail-modal .contract-kind-badge,
.contract-kind-badge {
  min-height: 24px;
  padding: 3px 9px;
  border-width: 1px;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  box-shadow: 0 3px 8px rgba(31, 41, 55, .16);
}
.contract-kind-badge.is-pre {
  border-color: #a16207;
  background: #d97706;
  color: #fff;
}
.contract-kind-badge.is-final {
  border-color: #3730a3;
  background: #4f46e5;
  color: #fff;
}
.contract-workflow-badge,
.contract-signing-badge {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(31, 41, 55, .16);
}
.contract-workflow-badge::before,
.contract-signing-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: currentColor;
}
.contract-workflow-badge.is-draft {
  border-color: #5b21b6;
  background: #6d28d9;
}
.contract-workflow-badge.is-waiting-distributor {
  border-color: #9a3412;
  background: #c2410c;
}
.contract-workflow-badge.is-waiting-master {
  border-color: #075985;
  background: #0369a1;
}
.contract-workflow-badge.is-rejected,
.contract-workflow-badge.is-rejected-forward {
  border-color: #991b1b;
  background: #b91c1c;
}
.contract-workflow-badge.is-approved,
.contract-signing-badge.is-completed {
  border-color: #065f46;
  background: #047857;
}
.contract-workflow-badge.is-archived,
.contract-workflow-badge.is-neutral {
  border-color: #475569;
  background: #64748b;
}
.contract-signing-badge.is-pending {
  border-color: #1e40af;
  background: #2563eb;
}
.contract-workflow-badge::before,
.contract-signing-badge::before {
  color: #fff;
}

/* ============================================================
   WPPEI CRM v091 - contract readiness and staged snapshot review
   ============================================================ */
.contract-readiness-panel {
  margin: 12px 0;
  padding: 14px 15px;
  border: 1px solid #d9e1e8;
  border-radius: 12px;
  background: #fff;
}
.contract-readiness-panel.is-ready {
  border-color: #b9decf;
  background: #f2faf6;
}
.contract-readiness-panel.is-incomplete {
  border-color: #f0d3a0;
  background: #fff9ef;
}
.contract-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.contract-readiness-state {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
}
.contract-readiness-state > i {
  margin-top: 2px;
  color: #26795f;
  font-size: 17px;
}
.contract-readiness-panel.is-incomplete .contract-readiness-state > i {
  color: #b86e11;
}
.contract-readiness-state strong,
.contract-readiness-state small {
  display: block;
}
.contract-readiness-state strong {
  color: #20303d;
  font-size: 13px;
}
.contract-readiness-state small {
  margin-top: 3px;
  color: #667481;
  font-size: 11px;
  line-height: 1.45;
}
.contract-readiness-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.contract-readiness-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid #dfe5ea;
  border-radius: 8px;
  background: #fff;
  color: #53616d;
  font-size: 11px;
  font-weight: 700;
}
.contract-readiness-item i {
  display: inline-grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border-radius: 50%;
  font-size: 8px;
}
.contract-readiness-item.is-ready {
  border-color: #8bd0ac;
  background: #eefaf3;
  color: #156746;
  box-shadow: inset 0 0 0 1px rgba(56, 161, 105, 0.08);
}
.contract-readiness-item.is-ready i {
  background: #21a366;
  color: #ffffff;
}
.contract-readiness-item.is-missing {
  border-color: #f1d6ad;
  color: #945914;
}
.contract-readiness-item.is-missing i {
  background: #fff0d9;
  color: #b96c0b;
}
.contract-source-change-panel {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 12px 0;
  padding: 13px 15px;
  border: 1px solid #f0c98f;
  border-radius: 11px;
  background: #fff8ed;
  color: #714710;
}
.contract-source-change-panel > i {
  margin-top: 2px;
  color: #bd7411;
}
.contract-source-change-panel strong,
.contract-source-change-panel p {
  display: block;
  margin: 0;
}
.contract-source-change-panel p {
  margin-top: 3px;
  color: #80623e;
  font-size: 11px;
  line-height: 1.45;
}
.contract-source-change-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.contract-source-change-tags span {
  padding: 4px 8px;
  border: 1px solid #e8c58f;
  border-radius: 999px;
  background: #fff;
  color: #875514;
  font-size: 10px;
  font-weight: 750;
}
@media (max-width: 900px) {
  .contract-readiness-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .contract-readiness-head {
    align-items: stretch;
    flex-direction: column;
  }
  .contract-readiness-head .btn {
    width: 100%;
  }
  .contract-readiness-items {
    grid-template-columns: 1fr;
  }
}
.contract-readiness-item > div {
  min-width: 0;
}
.contract-readiness-item span,
.contract-readiness-item small {
  display: block;
}
.contract-readiness-item small {
  margin-top: 2px;
  color: #8d6a3c;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}


/* WPPEI CRM v093 - stronger readiness check visibility */
.contract-readiness-item.is-ready span {
  color: #156746;
}


/* ============================================================
   WPPEI CRM v095 - document verification actions
   ============================================================ */
.customer-detail-modal .document-row .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.customer-detail-modal .document-row .row-actions .btn {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .customer-detail-modal .document-row .row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* ============================================================
   WPPEI CRM v096 - document review clarity and compact actions
   ============================================================ */
.customer-detail-modal .document-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.customer-detail-modal .document-row .document-verification-status {
  justify-self: end;
}
.customer-detail-modal .document-row .row-actions {
  grid-column: 2 / 4;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}
.customer-detail-modal .document-row .row-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.contract-mini-status.is-draft .badge,
.contract-mini-row .contract-mini-status.is-draft .badge {
  border-color: #5b21b6;
  background: #6d28d9;
  color: #fff;
  box-shadow: 0 3px 8px rgba(91, 33, 182, .22);
}
.contract-mini-status.is-draft .badge::before {
  background: #fff;
}
.snapshot-document-row {
  grid-template-columns: 30px minmax(0, 1fr) minmax(270px, auto);
}
.snapshot-document-review {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.snapshot-document-status {
  flex: 0 0 auto;
}
.snapshot-document-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
}
.snapshot-document-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.document-review-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.document-review-summary.is-ready {
  border-color: #a7d9c1;
  background: #eaf8f1;
  color: #14704b;
}
.document-review-summary.is-pending {
  border-color: #efd39d;
  background: #fff5df;
  color: #9a5c08;
}
.contract-detail-modal .snapshot-document-row .badge-neutral {
  border-color: #efc979;
  background: #fff3d4;
  color: #8a5408;
}
@media (max-width: 860px) {
  .snapshot-document-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .snapshot-document-review {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }
  .snapshot-document-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media (max-width: 620px) {
  .customer-detail-modal .document-row .row-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
}


/* ============================================================
   WPPEI CRM v097 - high-visibility badge policy
   Pastel status badges are not used across CRM screens.
   ============================================================ */
.badge-neutral {
  border-color: #334155 !important;
  background: #475569 !important;
  color: #ffffff !important;
}
.badge-info {
  border-color: #075985 !important;
  background: #0369a1 !important;
  color: #ffffff !important;
}
.badge-success {
  border-color: #065f46 !important;
  background: #047857 !important;
  color: #ffffff !important;
}
.badge-warning {
  border-color: #92400e !important;
  background: #b45309 !important;
  color: #ffffff !important;
}
.badge-danger {
  border-color: #991b1b !important;
  background: #b91c1c !important;
  color: #ffffff !important;
}
.badge-purple {
  border-color: #5b21b6 !important;
  background: #6d28d9 !important;
  color: #ffffff !important;
}
.badge::before {
  background: #ffffff !important;
}
.document-review-summary.is-ready {
  border-color: #065f46 !important;
  background: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(4, 120, 87, .22);
}
.document-review-summary.is-pending {
  border-color: #92400e !important;
  background: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(180, 83, 9, .22);
}
.contract-detail-modal .snapshot-document-row .badge-neutral {
  border-color: #92400e !important;
  background: #b45309 !important;
  color: #ffffff !important;
}
.customer-contract-progress.is-pre-progress {
  border-color: #5b21b6 !important;
  background: #6d28d9 !important;
  color: #ffffff !important;
}
.customer-contract-progress.is-pre-completed,
.customer-contract-progress.is-completed {
  border-color: #065f46 !important;
  background: #047857 !important;
  color: #ffffff !important;
}
.customer-contract-progress.is-final-progress {
  border-color: #1e40af !important;
  background: #2563eb !important;
  color: #ffffff !important;
}
.operation-country-badge {
  border-color: #115e59 !important;
  background: #0f766e !important;
  color: #ffffff !important;
}
.operation-country-badge strong {
  color: #ffffff !important;
}
.language-link-badge.is-ready {
  border-color: #065f46 !important;
  background: #047857 !important;
}
.language-link-badge.is-ready > strong,
.language-link-badge.is-ready > span,
.language-link-badge.is-ready > small {
  color: #ffffff !important;
}
.language-link-badge.is-ready > strong {
  background: #065f46 !important;
}
.language-link-badge.is-fallback {
  border-color: #92400e !important;
  background: #b45309 !important;
}
.language-link-badge.is-fallback > strong,
.language-link-badge.is-fallback > span,
.language-link-badge.is-fallback > small {
  color: #ffffff !important;
}
.language-link-badge.is-fallback > strong {
  background: #92400e !important;
}
.verify-document:disabled,
.contract-document-verify:disabled {
  cursor: not-allowed;
  filter: grayscale(.15);
  opacity: .48;
}


/* ============================================================
   WPPEI CRM v100 - uploaded state before formal contract review
   ============================================================ */
.document-review-summary.is-uploaded {
  border-color: #1d4ed8 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(37, 99, 235, .24);
}

/* ============================================================
   WPPEI CRM v101 - compact contract kind badge in list rows
   ============================================================ */
#contract-table-host .contract-number-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
#contract-table-host .contract-number-line > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#contract-table-host .contract-number-line .contract-kind-badge {
  min-height: 18px;
  margin: 0;
  padding: 1px 6px;
  flex: 0 0 auto;
  border-width: 0;
  font-size: 8px;
  line-height: 1.2;
  box-shadow: none;
}
#contract-table-host .contract-data-table td[data-column-key="contract_number"] {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ============================================================
   WPPEI CRM v102 - consistent contract kind badge in every role
   ============================================================ */
#contract-table-host .contract-number-line,
.contract-data-table .contract-number-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
#contract-table-host .contract-number-line > strong,
.contract-data-table .contract-number-line > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#contract-table-host .contract-number-line .contract-list-kind-badge,
.contract-data-table .contract-number-line .contract-list-kind-badge {
  min-height: 18px;
  margin: 0;
  padding: 1px 6px;
  flex: 0 0 auto;
  border-width: 0;
  font-size: 9px;
  line-height: 1.2;
  box-shadow: none;
}
#contract-table-host .contract-data-table td[data-column-key="contract_number"],
.contract-data-table td[data-column-key="contract_number"] {
  padding-top: 9px;
  padding-bottom: 9px;
}


/* ============================================================
   WPPEI CRM v104 - role-aware contract organization columns
   ============================================================ */
.contract-list-filter-row {
  flex-wrap: wrap;
}
.contract-list-filter-row .crm-search-field {
  flex: 1 1 280px;
  width: min(340px, 100%);
  max-width: 340px;
}
.contract-list-filter-row .compact-field {
  flex: 0 1 185px;
  width: 185px;
  max-width: 100%;
}
.contract-list-filter-row .contract-organization-filter {
  flex-basis: 175px;
  width: 175px;
}
#contract-table-host .contract-organization-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #263548;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contract-table-host .contract-data-table td[data-column-key="distributor_name"],
#contract-table-host .contract-data-table td[data-column-key="coordinator_name"] {
  padding-right: 7px;
  padding-left: 7px;
  white-space: nowrap;
}

/* Coordinator: the signed-in coordinator already owns every visible contract. */
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="contract_number"] { width: 14%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="customer_name"] { width: 17%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="product_type"] { width: 9%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="monthly_fee"] { width: 11%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="workflow_status"] { width: 14%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="updated_at"] { width: 12%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="action"] { width: 23%; }

/* Distributor: group and sort contracts by the assigned coordinator. */
#contract-table-host .contract-data-table-role-distributor th[data-column-key="contract_number"] { width: 13%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="coordinator_name"] { width: 11%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="customer_name"] { width: 15%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="product_type"] { width: 8%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="monthly_fee"] { width: 10%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="workflow_status"] { width: 13%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="updated_at"] { width: 9%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="action"] { width: 21%; }

/* Head office: independently group and sort by distributor and coordinator. */
#contract-table-host .contract-data-table-role-master th[data-column-key="contract_number"] { width: 12%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="distributor_name"] { width: 10%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="coordinator_name"] { width: 9%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="customer_name"] { width: 13%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="product_type"] { width: 7%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="monthly_fee"] { width: 9%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="workflow_status"] { width: 12%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="updated_at"] { width: 8%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="action"] { width: 20%; }

@media (max-width: 720px) {
  .contract-list-filter-row .crm-search-field,
  .contract-list-filter-row .compact-field,
  .contract-list-filter-row .contract-organization-filter {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
}

/* v105: approval actions are available directly in the contract detail view. */
.contract-detail-approval-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  background: #f8fafc;
}
.contract-detail-approval-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.contract-detail-approval-copy strong { color: #172033; font-size: 14px; }
.contract-detail-approval-copy small { color: #637083; line-height: 1.45; }
.contract-detail-approval-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .contract-detail-approval-panel { align-items: stretch; flex-direction: column; }
  .contract-detail-approval-actions { width: 100%; }
  .contract-detail-approval-actions .btn { flex: 1 1 0; justify-content: center; }
}


/* ============================================================
   WPPEI CRM v106 - agreement review and WPPEI electronic seal
   ============================================================ */
.contract-sign-modal {
  width: min(940px, calc(100vw - 32px));
  max-width: 940px;
}
.signature-simple-flow.has-company-seal {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}
.signing-document-review {
  overflow: hidden;
  border: 1px solid #d7dfea;
  border-radius: 13px;
  background: #fff;
}
.signing-document-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid #e4e9ef;
  background: #f7f9fc;
}
.signing-document-review-head > div:first-child strong,
.signing-document-review-head > div:first-child small {
  display: block;
}
.signing-document-review-head > div:first-child strong {
  color: #253548;
  font-size: 14px;
}
.signing-document-review-head > div:first-child small {
  margin-top: 3px;
  color: #6c7887;
  font-size: 11px;
}
.signing-document-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}
.signing-term-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.signing-term-grid > div {
  min-width: 0;
  padding: 11px 13px;
  border-right: 1px solid #e8ecf1;
  border-bottom: 1px solid #e8ecf1;
}
.signing-term-grid > div:nth-child(3n) { border-right: 0; }
.signing-term-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.signing-term-grid dt,
.signing-term-grid dd {
  margin: 0;
}
.signing-term-grid dt {
  color: #7a8592;
  font-size: 10px;
  font-weight: 750;
}
.signing-term-grid dd {
  overflow: hidden;
  margin-top: 4px;
  color: #253548;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-electronic-seal-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 15px;
  border: 1px solid #efc9cc;
  border-radius: 12px;
  background: #fff9f9;
}
.company-electronic-seal-card img {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  opacity: .82;
}
.company-electronic-seal-card strong,
.company-electronic-seal-card span,
.company-electronic-seal-card small {
  display: block;
}
.company-electronic-seal-card strong {
  color: #9f2630;
  font-size: 13px;
}
.company-electronic-seal-card span {
  margin-top: 4px;
  color: #4c5866;
  font-size: 12px;
  font-weight: 650;
}
.company-electronic-seal-card small {
  margin-top: 4px;
  color: #8a6266;
  font-size: 10px;
}
.final-contract-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid #cddbf2;
  border-radius: 11px;
  background: #f4f8ff;
  color: #3e536d;
  font-size: 12px;
  line-height: 1.55;
}
.final-contract-notice > i {
  margin-top: 2px;
  color: #356fc2;
}
.final-contract-notice strong,
.final-contract-notice span {
  display: block;
}
.final-contract-notice strong {
  margin-bottom: 3px;
  color: #294d7a;
}
.contract-company-seal-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contract-company-seal-inline img {
  width: 42px;
  height: 42px;
}
.contract-company-seal-inline span,
.contract-company-seal-inline strong,
.contract-company-seal-inline small {
  display: block;
}
.contract-company-seal-inline strong {
  color: #9f2630;
  font-size: 11px;
}
.contract-company-seal-inline small {
  margin-top: 2px;
  color: #75808d;
  font-size: 10px;
}
@media (max-width: 760px) {
  .signature-simple-flow.has-company-seal { grid-template-columns: 1fr; }
  .signing-document-review-head { align-items: stretch; flex-direction: column; }
  .signing-document-actions { width: 100%; }
  .signing-document-actions .btn { flex: 1; }
  .signing-term-grid { grid-template-columns: 1fr; }
  .signing-term-grid > div,
  .signing-term-grid > div:nth-child(3n),
  .signing-term-grid > div:nth-last-child(-n+3) {
    border-right: 0;
    border-bottom: 1px solid #e8ecf1;
  }
  .signing-term-grid > div:last-child { border-bottom: 0; }
}

/* ============================================================
   WPPEI CRM v133 - monthly subscription fee column
   ============================================================ */
#contract-table-host .contract-data-table td[data-column-key="monthly_fee"] {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
#contract-table-host .contract-money-summary {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  line-height: 1.2;
}
#contract-table-host .contract-money-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  white-space: nowrap;
}
#contract-table-host .contract-money-label {
  flex: 0 1 auto;
  overflow: hidden;
  color: #6f7884;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
}
#contract-table-host .contract-money-value {
  flex: 0 0 auto;
  color: #263548;
  font-size: 12px;
  font-weight: 700;
}
#contract-table-host .contract-money-summary-pre .contract-money-row {
  flex-direction: column;
  gap: 1px;
}
#contract-table-host .contract-money-summary-final .contract-money-row {
  justify-content: space-between;
  width: 100%;
}
#contract-table-host .contract-money-summary-final .contract-money-label {
  text-align: left;
}
#contract-table-host .contract-money-summary-final .contract-money-value {
  text-align: right;
}

/* Give the monthly subscription fee column enough room while preserving the full-width table. */
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="monthly_fee"] { width: 13%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="action"] { width: 21%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="monthly_fee"] { width: 12%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="action"] { width: 19%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="monthly_fee"] { width: 11%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="action"] { width: 18%; }

@media (max-width: 1100px) {
  #contract-table-host .contract-money-summary-final .contract-money-row {
    flex-direction: column;
    gap: 0;
  }
  #contract-table-host .contract-money-summary-final .contract-money-label,
  #contract-table-host .contract-money-summary-final .contract-money-value {
    text-align: center;
  }
}


/* ============================================================
   WPPEI CRM v125 - customer/site contract stage clarity
   ============================================================ */
.customer-detail-modal .customer-contract-summary,
.modal-overlay .customer-contract-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.customer-contract-progress.is-pre-available {
  border-color: #0f766e !important;
  background: #0f766e !important;
  color: #ffffff !important;
}
.customer-contract-progress.is-final-ready {
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
}
.customer-detail-modal .site-status-badge,
.modal-overlay .site-status-badge {
  gap: 5px;
  color: #ffffff;
  border: 1px solid transparent;
}
.customer-detail-modal .site-status-badge i,
.modal-overlay .site-status-badge i {
  font-size: 9px;
}
.customer-detail-modal .site-status-badge.is-pre-available,
.modal-overlay .site-status-badge.is-pre-available {
  border-color: #0f766e;
  background: #0f766e;
}
.customer-detail-modal .site-status-badge.is-pre-progress,
.modal-overlay .site-status-badge.is-pre-progress {
  border-color: #5b21b6;
  background: #6d28d9;
}
.customer-detail-modal .site-status-badge.is-final-ready,
.modal-overlay .site-status-badge.is-final-ready {
  border-color: #1e40af;
  background: #1d4ed8;
}
.customer-detail-modal .site-status-badge.is-final-progress,
.modal-overlay .site-status-badge.is-final-progress {
  border-color: #1e3a8a;
  background: #2563eb;
}
.customer-detail-modal .site-status-badge.is-completed,
.modal-overlay .site-status-badge.is-completed {
  border-color: #065f46;
  background: #047857;
}
.customer-detail-modal .site-status-badge.is-pending,
.modal-overlay .site-status-badge.is-pending {
  border-color: #9a3412;
  background: #c2410c;
}
.customer-detail-modal .site-card-actions .site-contract-action,
.modal-overlay .site-card-actions .site-contract-action {
  order: -1;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .customer-detail-modal .customer-contract-summary,
  .modal-overlay .customer-contract-summary {
    align-items: flex-start;
  }
}


/* ============================================================
   WPPEI CRM v126 - restore customer detail header badge size
   Keep v125 stage wording while preserving the pre-v125 badge size.
   ============================================================ */
.customer-detail-modal .detail-hero .customer-contract-progress,
.modal-overlay .detail-hero .customer-contract-progress {
  min-height: 29px;
  padding: 5px 12px;
  font-size: 11px !important;
  font-weight: 850;
  line-height: 1.2;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}
.customer-detail-modal .detail-hero .customer-contract-progress i,
.modal-overlay .detail-hero .customer-contract-progress i {
  font-size: 10px;
}


/* ============================================================
   WPPEI CRM v136 - distinguish current status from historical status
   ============================================================ */
.contract-history-status-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #d5dbe4;
  border-radius: 999px;
  background: #f3f5f8;
  color: #596474;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: none;
}
.timeline-item > span:last-child {
  justify-self: end;
}
@media (max-width: 720px) {
  .timeline-item {
    grid-template-columns: 14px minmax(0, 1fr);
  }
  .timeline-item > span:last-child {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }
  .contract-history-status-badge {
    white-space: normal;
  }
}


/* ============================================================
   WPPEI CRM v138 - simplified contract approval history
   ============================================================ */
.contract-detail-modal .timeline-item.contract-history-item {
  grid-template-columns: 14px minmax(0, 1fr);
}
.contract-detail-modal .timeline-item.contract-history-item > div {
  min-width: 0;
}


/* WPPEI CRM v139: make Headquarters document re-check and locked final approval unmistakable. */
.contract-detail-approval-actions .btn.is-review-locked:disabled {
  opacity: 1 !important;
  color: #7b8490 !important;
  background: #e7ebf0 !important;
  border-color: #d4dae2 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
.contract-detail-modal .snapshot-document-status .badge {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}


/* ============================================================
   WPPEI CRM v144 - contract list clarity
   - show full contract number in every role, especially Headquarters
   - add contract period before monthly subscription fee
   - remove the redundant recent-change column
   ============================================================ */
#contract-table-host .table-wrap {
  overflow-x: auto;
}
#contract-table-host .contract-data-table-role-master {
  min-width: 1180px;
}
#contract-table-host .contract-data-table td[data-column-key="contract_number"] {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
#contract-table-host .contract-data-table td[data-column-key="duration_months"] {
  white-space: nowrap;
}
#contract-table-host .contract-data-table td[data-column-key="contract_number"] .contract-number-line > strong,
.contract-data-table td[data-column-key="contract_number"] .contract-number-line > strong {
  display: inline;
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
#contract-table-host .contract-duration-value {
  color: #263548;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Coordinator list: 7 visible columns. */
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="contract_number"] { width: 17%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="customer_name"] { width: 20%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="product_type"] { width: 9%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="duration_months"] { width: 10%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="monthly_fee"] { width: 12%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="workflow_status"] { width: 15%; }
#contract-table-host .contract-data-table-role-coordinator th[data-column-key="action"] { width: 17%; }

/* Distributor list: 8 visible columns. */
#contract-table-host .contract-data-table-role-distributor th[data-column-key="contract_number"] { width: 16%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="coordinator_name"] { width: 10%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="customer_name"] { width: 15%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="product_type"] { width: 7%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="duration_months"] { width: 8%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="monthly_fee"] { width: 10%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="workflow_status"] { width: 14%; }
#contract-table-host .contract-data-table-role-distributor th[data-column-key="action"] { width: 20%; }

/* Headquarters list: 9 visible columns; contract number is never ellipsized. */
#contract-table-host .contract-data-table-role-master th[data-column-key="contract_number"] { width: 16%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="distributor_name"] { width: 9%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="coordinator_name"] { width: 8%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="customer_name"] { width: 13%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="product_type"] { width: 6%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="duration_months"] { width: 7%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="monthly_fee"] { width: 8%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="workflow_status"] { width: 14%; }
#contract-table-host .contract-data-table-role-master th[data-column-key="action"] { width: 19%; }


/* WPPEI CRM v161 - attached brand logo asset */
.brand-logo-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  padding-right: 8px;
}
.brand-logo-image {
  display: block;
  width: min(100%, 210px);
  height: auto;
  object-fit: contain;
}
.login-brand-top {
  justify-content: space-between;
  gap: 16px;
}
.login-brand-logo {
  display: block;
  width: min(100%, 330px);
  max-width: 330px;
  height: auto;
  object-fit: contain;
}
.mobile-login-brand {
  display: none;
}
.mobile-login-brand-logo {
  display: block;
  width: min(100%, 260px);
  height: auto;
  object-fit: contain;
}
@media (max-width: 940px) {
  .mobile-login-brand {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
  }
}
@media (min-width: 1025px) {
  .sidebar-collapsed .brand-logo-wrap {
    justify-content: center;
    padding-right: 0;
  }
  .sidebar-collapsed .brand-logo-image {
    width: 52px;
  }
}


/* WPPEI CRM v163 - stronger but subtle outline/shadow for attached brand logo */
.brand-logo-image,
.login-brand-logo,
.mobile-login-brand-logo {
  filter:
    brightness(1.2)
    saturate(1.08)
    drop-shadow(0 0 0.8px rgba(248, 229, 176, 0.42))
    drop-shadow(0 0 2px rgba(12, 18, 28, 0.42))
    drop-shadow(0 1px 6px rgba(12, 18, 28, 0.28));
}


/* WPPEI CRM v178 - scheduled installation status badge */
.badge-primary {
  border-color: #3730a3 !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
}


/* WPPEI CRM v185 - header work notification center */
.notification-center { position: relative; display: inline-flex; align-items: center; }
.notification-trigger { position: relative; }
.notification-count { position: absolute; top: -4px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.notification-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; width: min(390px, calc(100vw - 28px)); max-height: 520px; display: none; overflow: hidden; border: 1px solid #d9e0e7; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.18); }
.notification-panel.is-open { display: block; }
.notification-panel-head { height: 52px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7ebef; }
.notification-panel-head strong { color: #17212b; font-size: 14px; }
.notification-read-all { border: 0; background: transparent; color: #4f46e5; font-size: 12px; font-weight: 700; cursor: pointer; }
.notification-read-all:disabled { color: #aab2bc; cursor: default; }
.notification-list { max-height: 440px; overflow-y: auto; }
.notification-item { position: relative; width: 100%; padding: 13px 36px 13px 14px; display: flex; align-items: flex-start; gap: 11px; border: 0; border-bottom: 1px solid #eef1f4; background: #fff; text-align: left; cursor: pointer; }
.notification-item:hover { background: #f8fafc; }
.notification-item.is-unread { background: #f6f7ff; }
.notification-item-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #eef2ff; color: #4f46e5; }
.notification-item-copy { min-width: 0; display: grid; gap: 4px; }
.notification-item-copy strong { color: #1f2937; font-size: 13px; line-height: 1.35; }
.notification-item-copy span { color: #52606d; font-size: 12px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.notification-item-copy small { color: #8b96a3; font-size: 10px; }
.notification-unread-dot { position: absolute; top: 17px; right: 15px; width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; }
.notification-empty { min-height: 110px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8b96a3; font-size: 12px; text-align: center; }
@media (max-width: 640px) { .notification-panel { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; } }


/* WPPEI CRM v186 - persistent confirmation alerts and dashboard unread badge */
.nav-link[data-menu-key="dashboard"] .nav-shortcut { width: auto; min-width: 12px; margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; }
.nav-alert-count { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.07); }
.notification-confirm-bar { position: fixed; right: 24px; bottom: 24px; z-index: 120; width: min(520px, calc(100vw - 32px)); padding: 15px 16px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.22); }
.notification-confirm-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #eef2ff; color: #4f46e5; font-size: 15px; }
.notification-confirm-copy { min-width: 0; display: grid; gap: 4px; }
.notification-confirm-meta { display: flex; align-items: center; gap: 9px; color: #64748b; font-size: 10px; }
.notification-confirm-meta > span { color: #4f46e5; font-weight: 800; }
.notification-confirm-copy > strong { color: #17212b; font-size: 13px; line-height: 1.35; }
.notification-confirm-copy > span { color: #52606d; font-size: 12px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 1025px) { .sidebar-collapsed .nav-link[data-menu-key="dashboard"] .nav-shortcut { display: flex; position: absolute; top: 4px; right: 4px; } .sidebar-collapsed .nav-alert-count { min-width: 17px; height: 17px; padding: 0 4px; font-size: 9px; } }
@media (max-width: 640px) { .notification-confirm-bar { right: 12px; bottom: 12px; width: calc(100vw - 24px); grid-template-columns: 34px minmax(0,1fr); } .notification-confirm-icon { width: 34px; height: 34px; } .notification-confirm-bar .btn { grid-column: 1 / -1; width: 100%; } }


/* WPPEI CRM v188 - engineer today work */
.engineer-work-hero{display:flex;align-items:stretch;justify-content:space-between;gap:20px;margin-bottom:18px;padding:24px 26px;border:1px solid #dfe6eb;border-radius:18px;background:linear-gradient(135deg,#ffffff 0%,#f7fafc 100%);box-shadow:0 8px 24px rgba(33,48,66,.05)}
.engineer-work-hero-copy{min-width:0}.engineer-work-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:7px;color:#647487;font-size:12px;font-weight:800}.engineer-work-hero h1{margin:0;color:#24364b;font-size:28px;line-height:1.2}.engineer-work-hero p{margin:7px 0 0;color:#6b7887;font-size:14px;line-height:1.55}
.engineer-work-summary{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:9px;min-width:260px}.engineer-work-summary>div{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px;border:1px solid #e0e6eb;border-radius:13px;background:#fff}.engineer-work-summary span{color:#758294;font-size:11px;font-weight:800}.engineer-work-summary strong{margin-top:2px;color:#26394e;font-size:23px;line-height:1.1}
.engineer-active-alert{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:14px 16px;border:1px solid #f1d5a6;border-radius:13px;background:#fff9ef;color:#765421}.engineer-active-alert>i{font-size:21px}.engineer-active-alert div{display:flex;flex-direction:column;gap:2px}.engineer-active-alert strong{font-size:14px}.engineer-active-alert span{font-size:12px;line-height:1.45}
.engineer-work-tabs{display:flex;gap:8px;margin:0 0 18px;padding:5px;border:1px solid #dfe5ea;border-radius:13px;background:#f7f9fb;overflow-x:auto}.engineer-work-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:128px;padding:10px 14px;border:0;border-radius:9px;background:transparent;color:#667587;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}.engineer-work-tab strong{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#e8edf2;color:#5e6d7e;font-size:11px}.engineer-work-tab.is-active{background:#fff;color:#2b4056;box-shadow:0 2px 8px rgba(36,54,75,.08)}.engineer-work-tab.is-active strong{background:#2f6274;color:#fff}
.engineer-work-panel{display:none}.engineer-work-panel.is-active{display:block}.engineer-overdue-block{margin-bottom:24px;padding:16px;border:1px solid #f0d2d2;border-radius:15px;background:#fffafa}.engineer-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:4px 2px 12px}.engineer-section-heading>div{min-width:0}.engineer-section-heading span{display:block;margin-bottom:2px;color:#8290a0;font-size:11px;font-weight:800}.engineer-section-heading h2{margin:0;color:#293b50;font-size:18px}.engineer-section-heading p{margin:0;max-width:520px;color:#738092;font-size:12px;line-height:1.5;text-align:right}
.engineer-job-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.engineer-job-card{min-width:0;padding:18px;border:1px solid #dde4ea;border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(37,52,69,.04)}.engineer-job-card.is-active{border-color:#e4c47b;box-shadow:0 6px 22px rgba(158,114,27,.09)}.engineer-job-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid #edf0f3}.engineer-job-time{display:flex;align-items:baseline;gap:10px}.engineer-job-time strong{color:#22374c;font-size:27px;line-height:1}.engineer-job-time span{color:#758294;font-size:12px;font-weight:700}.engineer-job-head-copy{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.engineer-job-head-copy small{color:#919baa;font-size:10px}
.engineer-job-state{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.engineer-job-state.is-today{background:#e9f3f6;color:#316576}.engineer-job-state.is-upcoming{background:#eef2f7;color:#596b80}.engineer-job-state.is-progress{background:#fff1d8;color:#8b5c0d}.engineer-job-state.is-done{background:#eaf5ee;color:#3e7150}.engineer-job-state.is-attention{background:#fdecec;color:#a14b4b}.engineer-job-state.is-muted{background:#eff1f3;color:#6f7b88}
.engineer-job-customer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 12px}.engineer-job-customer>div{display:flex;align-items:baseline;gap:9px;min-width:0}.engineer-job-customer strong{overflow:hidden;color:#24364b;font-size:18px;text-overflow:ellipsis;white-space:nowrap}.engineer-job-label{display:flex;align-items:center;gap:5px;color:#8290a0;font-size:11px;font-weight:800}.engineer-phone-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 11px;border:1px solid #dce6ec;border-radius:10px;background:#f8fbfc;color:#335f72;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}.engineer-phone-link.is-disabled{color:#86929f}
.engineer-job-info-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(150px,.55fr);gap:10px}.engineer-job-info{min-width:0;padding:11px 12px;border-radius:11px;background:#f8fafb}.engineer-job-info strong{display:block;margin-top:5px;color:#35475b;font-size:13px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}.engineer-job-info strong span{color:#667587;font-weight:700}.engineer-job-notes{margin-top:10px;padding:11px 12px;border:1px solid #e7ebef;border-radius:11px;background:#fff}.engineer-job-notes p{margin:5px 0 0;color:#495b6f;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:keep-all}.engineer-job-notes.is-empty p{color:#8a95a2}.engineer-job-actions{margin-top:13px}.engineer-primary-action{width:100%;justify-content:center;min-height:44px}.engineer-complete-summary,.engineer-help-note{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 10px;border-radius:10px;background:#f3f7f4;color:#54705e;font-size:12px;font-weight:700;text-align:center}.engineer-help-note{background:#f7f9fb;color:#768394;font-weight:600}.engineer-help-note.attention{background:#fff3f3;color:#986060}.engineer-work-empty{display:flex;grid-column:1/-1;flex-direction:column;align-items:center;justify-content:center;min-height:210px;padding:30px;border:1px dashed #d7dee5;border-radius:15px;background:#fbfcfd;text-align:center}.engineer-work-empty>i{margin-bottom:10px;color:#93a0ad;font-size:28px}.engineer-work-empty strong{color:#405267;font-size:15px}.engineer-work-empty span{margin-top:5px;color:#8793a0;font-size:12px;line-height:1.5}
@media(max-width:980px){.engineer-job-list{grid-template-columns:1fr}.engineer-work-hero{align-items:flex-start}.engineer-work-summary{min-width:230px}.engineer-section-heading{align-items:flex-start;flex-direction:column;gap:4px}.engineer-section-heading p{text-align:left}}
@media(max-width:640px){.engineer-work-hero{flex-direction:column;padding:18px}.engineer-work-hero h1{font-size:24px}.engineer-work-summary{width:100%;min-width:0}.engineer-work-tabs{margin-left:-2px;margin-right:-2px}.engineer-work-tab{min-width:116px}.engineer-job-card{padding:15px}.engineer-job-card-head{align-items:flex-start}.engineer-job-time{align-items:flex-start;flex-direction:column;gap:4px}.engineer-job-time strong{font-size:25px}.engineer-job-customer{align-items:flex-start;flex-direction:column}.engineer-job-customer>div{width:100%}.engineer-phone-link{width:100%}.engineer-job-info-grid{grid-template-columns:1fr}.engineer-overdue-block{padding:12px}}


/* WPPEI CRM v189 - engineer installation checklist */
.engineer-checklist-action{display:grid;gap:9px;padding:11px 12px;border:1px solid #e2e7ec;border-radius:12px;background:#f8fafb}.engineer-checklist-action.is-complete{border-color:#cfe3d5;background:#f6fbf8}.engineer-checklist-progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#607083;font-size:12px;font-weight:800}.engineer-checklist-progress-head span{display:inline-flex;align-items:center;gap:6px}.engineer-checklist-progress-head strong{color:#2f475e;font-size:12px}.engineer-checklist-progress-bar{height:6px;overflow:hidden;border-radius:999px;background:#e5eaef}.engineer-checklist-progress-bar>span{display:block;height:100%;border-radius:inherit;background:#557b8e;transition:width .18s ease}.engineer-checklist-action.is-complete .engineer-checklist-progress-bar>span{background:#5b8567}.engineer-action-stack{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}.engineer-action-stack .btn{min-height:42px;justify-content:center}
.installation-checklist-form{gap:14px}.installation-checklist-summary{display:grid;gap:7px;padding:12px 13px;border:1px solid #dfe6eb;border-radius:11px;background:#f8fafb}.installation-checklist-summary>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.installation-checklist-summary span{color:#687789;font-size:12px;font-weight:750}.installation-checklist-summary strong{color:#2f465c;font-size:13px}.installation-checklist-bar{height:7px;overflow:hidden;border-radius:999px;background:#e2e8ed}.installation-checklist-bar>span{display:block;width:0;height:100%;border-radius:inherit;background:#4f7486;transition:width .18s ease}.installation-checklist-groups{display:grid;gap:12px}.installation-checklist-group{display:grid;gap:2px;padding:10px;border:1px solid #e3e8ed;border-radius:12px;background:#fff}.installation-checklist-group h4{margin:0 0 5px;padding:0 3px;color:#657487;font-size:11px;font-weight:850}.installation-checklist-item{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:9px;padding:9px 8px;border-radius:9px;cursor:pointer}.installation-checklist-item:hover{background:#f7f9fb}.installation-checklist-item>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.installation-checklist-box{display:inline-flex;grid-column:1;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid #cbd4dc;border-radius:6px;background:#fff;color:transparent;transition:.15s ease}.installation-checklist-copy{grid-column:2;color:#3e5165;font-size:12px;line-height:1.45;word-break:keep-all}.installation-checklist-item>input:checked+.installation-checklist-box{border-color:#4f7486;background:#4f7486;color:#fff}.installation-checklist-item>input:focus-visible+.installation-checklist-box{outline:3px solid rgba(79,116,134,.18);outline-offset:2px}.installation-checklist-help{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:10px;background:#f4f7f9;color:#6d7a89;font-size:11px;line-height:1.5}.installation-checklist-help i{margin-top:2px}.installation-checklist-actions{gap:7px}.installation-checklist-actions .btn{flex:1;justify-content:center}.installation-checklist-actions #checklist-next:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:640px){.engineer-action-stack{grid-template-columns:1fr}.installation-checklist-actions{display:grid;grid-template-columns:1fr 1fr}.installation-checklist-actions #checklist-next{grid-column:1/-1}.installation-checklist-item{padding:10px 6px}.installation-checklist-copy{font-size:13px}}

/* v190 - checklist PDF / structured completion evidence */
.installation-context-note{display:grid;gap:4px;align-items:start}.installation-context-note strong{display:block;color:#33475b;font-size:13px;line-height:1.4;word-break:break-word}.installation-context-note>span{display:block;color:#69798b;font-size:12px;line-height:1.55;word-break:keep-all}.installation-document-tools{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #e1e7ec;border-radius:11px;background:#fbfcfd}.installation-document-tools .btn{flex:0 0 auto;justify-content:center}.installation-document-tools>span{color:#7b8795;font-size:11px;line-height:1.45}.installation-document-tools.is-two{display:grid;grid-template-columns:1fr 1fr}.installation-document-tools.is-two .btn{width:100%;min-height:40px}.engineer-action-stack.is-checklist-ready{grid-template-columns:1fr 1fr}.engineer-action-stack.is-checklist-ready .btn-work-complete{grid-column:1/-1}.engineer-completed-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.engineer-completed-actions .btn{min-height:40px;justify-content:center}.installation-completion-modal{max-width:820px}.installation-completion-form{gap:15px}.installation-evidence-section{display:grid;gap:10px}.installation-evidence-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.installation-evidence-title>div{display:grid;gap:2px}.installation-evidence-title span{color:#768497;font-size:11px;font-weight:800}.installation-evidence-title h4{margin:0;color:#31475d;font-size:14px}.installation-evidence-title small{max-width:430px;color:#8793a1;font-size:11px;line-height:1.45;text-align:right}.installation-evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.installation-evidence-card{display:grid;gap:9px;padding:12px;border:1px solid #e1e7ec;border-radius:12px;background:#fbfcfd}.installation-evidence-card.is-required{border-color:#d4e0e7;background:#f9fbfc}.installation-evidence-head{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:9px}.installation-evidence-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#edf3f6;color:#527287}.installation-evidence-head>div{display:grid;gap:2px;min-width:0}.installation-evidence-head strong{color:#3a4d61;font-size:12px;line-height:1.35}.installation-evidence-head span{color:#7b8897;font-size:10px;line-height:1.45;word-break:keep-all}.installation-evidence-card input[type=file]{width:100%;padding:8px;border:1px dashed #ccd6df;border-radius:9px;background:#fff;color:#526375;font-size:11px}.installation-evidence-section.is-optional{padding-top:2px}.installation-completion-help{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:10px;background:#f4f7f9;color:#6d7a89;font-size:11px;line-height:1.5}.installation-completion-help i{margin-top:2px}.installation-checklist-modal{max-width:620px}
@media(max-width:700px){.installation-completion-modal{max-width:calc(100vw - 18px)}.installation-evidence-grid{grid-template-columns:1fr}.installation-evidence-title{align-items:flex-start;flex-direction:column;gap:4px}.installation-evidence-title small{text-align:left}.installation-document-tools.is-two{grid-template-columns:1fr}.installation-document-tools{align-items:stretch;flex-direction:column}.installation-document-tools .btn{width:100%}.installation-document-tools>span{text-align:center}.engineer-completed-actions{grid-template-columns:1fr}.engineer-action-stack.is-checklist-ready{grid-template-columns:1fr}.engineer-action-stack.is-checklist-ready .btn-work-complete{grid-column:auto}}

/* v191: customer installation completion electronic signature */
.engineer-completed-document-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.engineer-completed-document-actions .btn{min-height:40px;justify-content:center}
.installation-confirmation-status{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 13px;border:1px solid #dfe6eb;border-radius:12px;background:#f8fafb}.installation-confirmation-status-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:#edf2f5;color:#577084;font-size:17px}.installation-confirmation-status>div:nth-child(2){display:grid;gap:3px;min-width:0}.installation-confirmation-status strong{color:#334b61;font-size:13px}.installation-confirmation-status span{color:#718092;font-size:11px;line-height:1.45}.installation-confirmation-status.is-signed{border-color:#cfe2d9;background:#f4faf7}.installation-confirmation-status.is-signed .installation-confirmation-status-icon{background:#e2f2e9;color:#327158}.installation-confirmation-status.is-required{border-color:#eadfc5;background:#fffbf1}.installation-confirmation-status.is-required .installation-confirmation-status-icon{background:#f5ecd7;color:#8a6b2c}.installation-confirmation-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.installation-confirmation-actions .btn{white-space:nowrap}
.customer-confirmation-modal{max-width:760px}.customer-confirmation-form{gap:14px}.customer-confirmation-saved{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #cfe2d9;border-radius:11px;background:#f4faf7;color:#327158}.customer-confirmation-saved>i{font-size:20px}.customer-confirmation-saved>div{display:grid;gap:2px;min-width:0}.customer-confirmation-saved strong{font-size:12px}.customer-confirmation-saved span{color:#62796f;font-size:10px;line-height:1.4}.customer-confirmation-document{display:grid;gap:12px;padding:14px;border:1px solid #dfe6eb;border-radius:13px;background:#fbfcfd}.customer-confirmation-document-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.customer-confirmation-document-head>span{color:#344a60;font-size:14px;font-weight:850}.customer-confirmation-document-head>small{color:#8190a0;font-size:10px}.customer-confirmation-checks{display:grid;gap:6px}.customer-confirmation-check{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:9px;padding:9px 10px;border:1px solid #e3e8ed;border-radius:10px;background:#fff;cursor:pointer}.customer-confirmation-check>input,.customer-confirmation-consent>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.customer-confirmation-check>.installation-checklist-box,.customer-confirmation-consent>.installation-checklist-box{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid #cbd4dc;border-radius:6px;background:#fff;color:transparent;transition:.15s ease}.customer-confirmation-check>span:last-child{color:#405368;font-size:12px;line-height:1.45}.customer-confirmation-check>input:checked+.installation-checklist-box,.customer-confirmation-consent>input:checked+.installation-checklist-box{border-color:#4f7486;background:#4f7486;color:#fff}.customer-confirmation-check>input:focus-visible+.installation-checklist-box,.customer-confirmation-consent>input:focus-visible+.installation-checklist-box{outline:3px solid rgba(79,116,134,.18);outline-offset:2px}.customer-confirmation-fields{gap:10px}.customer-signature-field{display:grid;gap:7px}.customer-signature-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.customer-signature-head .field-label{margin:0}.customer-signature-field canvas{display:block;width:100%;height:170px;border:1.5px dashed #bdc9d4;border-radius:11px;background:#fff;touch-action:none;cursor:crosshair}.customer-signature-field>small{color:#7d8997;font-size:10px;line-height:1.4}.customer-confirmation-consent{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:9px;padding:11px 12px;border-radius:10px;background:#f0f5f7;cursor:pointer}.customer-confirmation-consent>span:last-child{color:#4e6276;font-size:11px;line-height:1.55}.customer-confirmation-privacy{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:10px;background:#f5f7f9;color:#6d7b89;font-size:10px;line-height:1.5}.customer-confirmation-privacy i{margin-top:2px}
@media(max-width:700px){.installation-confirmation-status{grid-template-columns:38px minmax(0,1fr)}.installation-confirmation-status>.btn,.installation-confirmation-actions{grid-column:1/-1;width:100%}.installation-confirmation-actions{display:grid;grid-template-columns:1fr 1fr}.installation-confirmation-actions .btn{width:100%;justify-content:center}.customer-confirmation-modal{max-width:calc(100vw - 18px)}.customer-confirmation-saved{grid-template-columns:30px minmax(0,1fr)}.customer-confirmation-saved .btn{grid-column:1/-1;width:100%;justify-content:center}.customer-confirmation-document{padding:11px}.customer-confirmation-document-head{align-items:flex-start;flex-direction:column;gap:3px}.customer-confirmation-check>span:last-child{font-size:12px}.customer-signature-field canvas{height:190px}.engineer-completed-document-actions{display:grid;grid-template-columns:1fr;width:100%}.engineer-completed-document-actions .btn{width:100%}}

/* v192: engineer checklist signature + compact installation completion report */
.installation-engineer-signature-box{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:12px;border:1px solid #dfe6eb;border-radius:12px;background:#f8fafb}.installation-engineer-signature-box.is-signed{border-color:#cfe2d9;background:#f5faf7}.installation-engineer-signature-identity{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding-right:12px;border-right:1px solid #e1e7ec}.installation-engineer-signature-identity>span{color:#788799;font-size:10px;font-weight:850}.installation-engineer-signature-identity>strong{color:#31475d;font-size:15px;line-height:1.35;word-break:break-word}.installation-engineer-signature-identity>small{color:#778697;font-size:10px;line-height:1.45;word-break:keep-all}.installation-engineer-signature-box.is-signed .installation-engineer-signature-identity>small{color:#3e7458;font-weight:700}.installation-engineer-signature-pad{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;min-width:0}.installation-engineer-signature-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}.installation-engineer-signature-head>span{color:#526579;font-size:11px;font-weight:800}.installation-engineer-signature-pad canvas{display:block;grid-column:1/-1;width:100%;height:92px;border:1.5px dashed #bdc9d4;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}.installation-engineer-signature-pad>#save-engineer-signature{grid-column:2;justify-self:end;min-width:112px}.installation-engineer-signature-pad>#save-engineer-signature:disabled{opacity:.48;cursor:not-allowed}
.installation-completion-form.is-compact-layout{gap:10px}.installation-completion-status-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:9px}.installation-completion-checklist-status{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 11px;border:1px solid #cfe2d9;border-radius:11px;background:#f4faf7}.installation-completion-checklist-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:#e2f2e9;color:#327158}.installation-completion-checklist-status>div:nth-child(2){display:grid;gap:2px;min-width:0}.installation-completion-checklist-status strong{color:#334b61;font-size:12px}.installation-completion-checklist-status span{color:#6b7c72;font-size:10px;line-height:1.4}.installation-confirmation-status.is-compact{min-height:58px;padding:9px 10px;grid-template-columns:36px minmax(0,1fr) auto;gap:8px}.installation-confirmation-status.is-compact .installation-confirmation-status-icon{width:36px;height:36px;border-radius:9px;font-size:15px}.installation-confirmation-status.is-compact strong{font-size:12px}.installation-confirmation-status.is-compact span{font-size:10px}.installation-confirmation-status.is-compact .btn{min-height:32px;padding-left:9px;padding-right:9px;font-size:10px}.installation-evidence-section.is-required-section{padding:11px;border:1px solid #e1e7ec;border-radius:12px;background:#fbfcfd}.installation-completion-form.is-compact-layout .installation-evidence-title{align-items:center}.installation-completion-form.is-compact-layout .installation-evidence-grid{gap:8px}.installation-completion-form.is-compact-layout .installation-evidence-card{gap:7px;padding:9px 10px;border-radius:10px;background:#fff}.installation-completion-form.is-compact-layout .installation-evidence-card.is-required{background:#fff}.installation-completion-form.is-compact-layout .installation-evidence-head{grid-template-columns:30px minmax(0,1fr);gap:7px}.installation-completion-form.is-compact-layout .installation-evidence-icon{width:30px;height:30px;border-radius:8px;font-size:12px}.installation-completion-form.is-compact-layout .installation-evidence-head strong{font-size:11px}.installation-completion-form.is-compact-layout .installation-evidence-head span{font-size:9px}.installation-completion-form.is-compact-layout .installation-evidence-card input[type=file]{padding:6px 7px;font-size:10px}.installation-completion-bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}.installation-completion-bottom-grid>.installation-evidence-section,.installation-completion-note-panel{display:grid;align-content:start;gap:8px;padding:10px 11px;border:1px solid #e1e7ec;border-radius:12px;background:#fbfcfd}.installation-evidence-grid.is-optional-grid{grid-template-columns:1fr}.installation-completion-note-panel textarea{min-height:134px;resize:vertical}.installation-completion-note-panel .installation-completion-help{padding:8px 9px;font-size:9px}.installation-completion-document-note{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;background:#f4f7f9;color:#6f7d8c;font-size:10px;line-height:1.4}.installation-completion-document-note i{color:#63788d}.installation-completion-actions{margin-top:0}.installation-completion-actions .btn-primary{min-width:240px}.installation-completion-modal{max-width:820px}
@media(max-width:700px){.installation-engineer-signature-box{grid-template-columns:1fr}.installation-engineer-signature-identity{padding-right:0;padding-bottom:9px;border-right:0;border-bottom:1px solid #e1e7ec}.installation-engineer-signature-pad canvas{height:120px}.installation-completion-status-grid,.installation-completion-bottom-grid{grid-template-columns:1fr}.installation-confirmation-status.is-compact{grid-template-columns:36px minmax(0,1fr)}.installation-confirmation-status.is-compact>.btn,.installation-confirmation-status.is-compact .installation-confirmation-actions{grid-column:1/-1;width:100%}.installation-confirmation-status.is-compact .installation-confirmation-actions{display:grid;grid-template-columns:1fr 1fr}.installation-completion-form.is-compact-layout .installation-evidence-grid{grid-template-columns:1fr}.installation-completion-actions{display:grid;grid-template-columns:1fr}.installation-completion-actions .btn,.installation-completion-actions .btn-primary{width:100%;min-width:0}.installation-completion-checklist-status{grid-template-columns:34px minmax(0,1fr)}.installation-completion-checklist-status>.btn{grid-column:1/-1;width:100%;justify-content:center}}

/* v194 engineer checklist guided workflow */
.installation-workflow-steps{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:7px;padding:9px 10px;border:1px solid #dfe6eb;border-radius:12px;background:#f8fafb}.installation-workflow-step{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:7px 8px;border-radius:9px;color:#7c8997}.installation-workflow-step-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#e8edf1;color:#6d7c8b;font-size:12px;font-weight:900}.installation-workflow-step>div{display:grid;gap:1px;min-width:0}.installation-workflow-step strong{overflow:hidden;color:inherit;font-size:11px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.installation-workflow-step small{overflow:hidden;color:#929daa;font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.installation-workflow-step.is-active{background:#edf4f7;color:#365f72}.installation-workflow-step.is-active .installation-workflow-step-no{background:#4f7486;color:#fff}.installation-workflow-step.is-complete{background:#f0f8f4;color:#357052}.installation-workflow-step.is-complete .installation-workflow-step-no{background:#4f8b69;color:#fff}.installation-workflow-step.is-ready{background:#f5f7fa;color:#4e6175}.installation-workflow-step.is-ready .installation-workflow-step-no{background:#60768b;color:#fff}.installation-workflow-arrow{color:#b2bcc5;font-size:10px;text-align:center}.installation-workflow-steps.is-completion-stage{padding:8px 10px}.installation-checklist-summary.is-autosave{grid-template-columns:1fr auto}.installation-checklist-summary.is-autosave>div:first-child{grid-column:1}.installation-checklist-summary.is-autosave>.installation-checklist-bar{grid-column:1/-1;width:100%}.installation-checklist-autosave{grid-column:2;grid-row:1;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;color:#718092;font-size:10px;font-weight:700;white-space:nowrap}.installation-checklist-autosave.is-saved{color:#46745b}.installation-checklist-autosave.is-saving{color:#567386}.installation-checklist-autosave.is-error{color:#b25050}.installation-engineer-signature-box.is-locked{background:#f6f8fa}.installation-engineer-signature-box.is-locked .installation-engineer-signature-pad canvas{opacity:.48;cursor:not-allowed}.installation-engineer-signature-pad{position:relative;grid-template-columns:1fr}.installation-engineer-signature-head{grid-column:1;min-height:30px}.installation-engineer-signature-tools{display:flex;align-items:center;gap:6px}.installation-engineer-signature-pad canvas{grid-column:1}.installation-signature-lock{position:absolute;z-index:2;left:8px;right:8px;top:38px;bottom:0;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;background:rgba(248,250,251,.86);color:#778696;font-size:10px;font-weight:750;text-align:center;pointer-events:none}.installation-signature-lock[hidden]{display:none!important}.installation-document-tools.is-checklist-document{padding:8px 10px}.installation-document-tools.is-checklist-document .btn{min-height:34px;padding-top:7px;padding-bottom:7px}.installation-checklist-actions.is-single-action{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;position:sticky;bottom:-1px;z-index:4;margin:0 -2px -2px;padding:10px 2px 2px;background:linear-gradient(to bottom,rgba(255,255,255,.2),#fff 30%)}.installation-checklist-actions.is-single-action .btn{width:100%;min-height:42px}.installation-checklist-actions.is-single-action #checklist-primary-action:disabled{opacity:.62;cursor:not-allowed}.installation-checklist-form.is-step-flow .installation-checklist-groups{gap:9px}.installation-checklist-form.is-step-flow .installation-checklist-group{padding:9px}.installation-checklist-form.is-step-flow .installation-checklist-item{padding:8px}.installation-checklist-form.is-step-flow .installation-engineer-signature-box{margin-top:1px}
@media(max-width:700px){.installation-workflow-steps{grid-template-columns:1fr;gap:4px}.installation-workflow-arrow{display:none}.installation-workflow-step{grid-template-columns:28px minmax(0,1fr);padding:6px 7px}.installation-workflow-step-no{width:28px;height:28px}.installation-workflow-step strong{font-size:12px}.installation-workflow-step small{font-size:10px}.installation-checklist-summary.is-autosave{grid-template-columns:1fr}.installation-checklist-autosave{grid-column:1;grid-row:auto;justify-content:flex-start}.installation-checklist-actions.is-single-action{grid-template-columns:78px minmax(0,1fr)}.installation-engineer-signature-tools{flex-wrap:wrap;justify-content:flex-end}.installation-signature-lock{top:40px}.installation-workflow-steps.is-completion-stage{grid-template-columns:1fr}.installation-workflow-steps.is-completion-stage .installation-workflow-step{grid-template-columns:28px minmax(0,1fr)}}

/* ============================================================
   WPPEI CRM v195 - field hold safety + completion evidence review
   ============================================================ */
.engineer-work-hold-button{margin-top:7px;width:100%;min-height:34px;border-color:#e4c8a4!important;background:#fffaf3!important;color:#8b5a24!important;font-weight:750}
.engineer-work-hold-button:hover{background:#fff4e4!important}
.installation-work-hold-warning{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid #f0d2a8;border-radius:12px;background:#fff8ed;color:#7c4b19}.installation-work-hold-warning>i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:#fff0d7;color:#a86522}.installation-work-hold-warning>div{display:grid;gap:3px}.installation-work-hold-warning strong{font-size:12px}.installation-work-hold-warning span{font-size:10px;line-height:1.55;color:#8a6742}.installation-work-hold-detail-help{display:block;margin-top:5px;color:#7f8a96;font-size:10px}.installation-reschedule-reason{display:grid;gap:4px;padding:10px 12px;border:1px solid #f0cfa0;border-radius:12px;background:#fff8eb;color:#6f4317}.installation-reschedule-reason strong{font-size:11px}.installation-reschedule-reason span{font-size:11px;line-height:1.5}.installation-hold-reason-inline{display:block;margin-top:4px;color:#9a692e;font-size:10px;white-space:normal}
.installation-checklist-autosave.is-error{flex-wrap:wrap}.installation-checklist-autosave.is-error .btn{min-height:28px;padding:4px 8px;font-size:9px}.installation-checklist-autosave.is-error span{font-weight:800}
.installation-completion-order-guide{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr);gap:6px;align-items:center;padding:8px 9px;border:1px solid #e1e7ec;border-radius:11px;background:#fafbfd}.installation-completion-order-guide>div{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:6px 7px;border-radius:8px;color:#7e8995}.installation-completion-order-guide>div>span{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#edf0f3;font-size:10px;font-weight:900}.installation-completion-order-guide strong{font-size:10px;line-height:1.25}.installation-completion-order-guide small{font-size:8px;line-height:1.25;color:#98a1aa}.installation-completion-order-guide>i{color:#bdc5cd;font-size:9px;text-align:center}.installation-completion-order-guide>div.is-active{background:#edf5f8;color:#315d71}.installation-completion-order-guide>div.is-active>span{background:#4d7588;color:#fff}.installation-completion-order-guide>div.is-complete{background:#eff8f3;color:#327050}.installation-completion-order-guide>div.is-complete>span{background:#4d8a67;color:#fff}.installation-completion-order-guide>div.is-locked{opacity:.58}.installation-completion-first-action{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #cbdce5;border-radius:10px;background:#f1f7fa;color:#476779;font-size:10px;line-height:1.45}.installation-completion-first-action i{color:#4f788b}.installation-evidence-section.is-step-locked{position:relative;background:#f7f8f9}.installation-evidence-step-lock{display:flex;align-items:center;gap:7px;margin-bottom:8px;padding:7px 9px;border-radius:8px;background:#eef1f4;color:#74808c;font-size:9px;font-weight:700}.installation-evidence-card.is-locked{opacity:.55}.installation-evidence-card.is-locked input{cursor:not-allowed}
.btn-completion-detail{white-space:nowrap;color:#385f72!important;background:#f4f8fa!important;border:1px solid #d6e2e8!important;font-weight:800!important}.btn-completion-detail:hover{background:#eaf3f7!important}.installation-completion-detail-host:empty{display:none}.installation-completion-detail-host{margin-top:14px}.installation-completion-detail-loading{min-height:120px;display:grid;place-items:center}.installation-completion-detail-panel{display:grid;gap:12px;padding:14px;border:1px solid #d7e0e7;border-radius:14px;background:#f9fbfc;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.installation-completion-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:2px 2px 10px;border-bottom:1px solid #dfe6eb}.installation-completion-detail-head>div{min-width:0;display:grid;gap:3px}.installation-completion-detail-head>div>span,.installation-completion-section-head span,.installation-completion-document-head span,.installation-completion-notes-section>div>span{color:#778697;font-size:9px;font-weight:800}.installation-completion-detail-head h3{margin:0;color:#23384c;font-size:15px;line-height:1.35}.installation-completion-detail-head p{margin:0;color:#667789;font-size:10px;line-height:1.45;word-break:keep-all}.installation-completion-detail-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.installation-completion-detail-meta>div{display:grid;gap:3px;padding:9px 10px;border:1px solid #e0e6eb;border-radius:9px;background:#fff}.installation-completion-detail-meta span{color:#85919d;font-size:8px;font-weight:750}.installation-completion-detail-meta strong{overflow:hidden;color:#34495d;font-size:10px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.installation-completion-document-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.installation-completion-document-card,.installation-completion-photo-section,.installation-completion-notes-section{padding:11px;border:1px solid #dde5ea;border-radius:11px;background:#fff}.installation-completion-document-head,.installation-completion-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.installation-completion-document-head>div,.installation-completion-section-head>div,.installation-completion-notes-section>div{display:grid;gap:2px}.installation-completion-document-head h4,.installation-completion-section-head h4,.installation-completion-notes-section h4{margin:0;color:#31465a;font-size:12px}.installation-completion-checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.installation-completion-check-item{display:grid;grid-template-columns:16px minmax(0,1fr);gap:5px;align-items:start;padding:5px 6px;border-radius:7px;background:#f7f9fa;color:#6d7985;font-size:9px;line-height:1.4}.installation-completion-check-item.is-checked{background:#f0f8f4;color:#416c56}.installation-completion-check-item i{margin-top:1px}.installation-completion-sign-meta{display:flex;align-items:center;gap:6px;margin-top:8px;padding:7px 8px;border-radius:8px;background:#f4f7f9;color:#6e7d8b;font-size:9px;line-height:1.4}.installation-completion-confirmation-copy{display:grid;grid-template-columns:1fr 1fr;gap:6px}.installation-completion-confirmation-copy>div{display:grid;gap:2px;padding:7px 8px;border-radius:8px;background:#f7f9fa}.installation-completion-confirmation-copy>div.is-wide{grid-column:1/-1}.installation-completion-confirmation-copy span{color:#87929d;font-size:8px}.installation-completion-confirmation-copy strong{color:#45586a;font-size:10px;line-height:1.4;font-weight:700}.installation-completion-evidence-group{display:grid;gap:7px;padding-top:9px;border-top:1px solid #edf0f2}.installation-completion-evidence-group:first-of-type{padding-top:0;border-top:0}.installation-completion-evidence-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.installation-completion-evidence-group-head strong{color:#43586a;font-size:10px}.installation-completion-evidence-group-head span{color:#7f8c98;font-size:9px}.installation-completion-preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.installation-completion-file-card{display:grid;gap:6px;align-content:start;padding:7px;border:1px solid #e1e7eb;border-radius:9px;background:#fbfcfd;min-width:0}.installation-completion-image-wrap{position:relative;overflow:hidden;width:100%;aspect-ratio:4/3;border-radius:7px;background:#edf1f4}.installation-completion-preview-image{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s ease}.installation-completion-image-loading{position:absolute;inset:0;display:grid;place-items:center;color:#83909d;font-size:14px}.installation-completion-image-wrap.is-loaded .installation-completion-preview-image{opacity:1}.installation-completion-image-wrap.is-loaded .installation-completion-image-loading{display:none}.installation-completion-image-wrap.is-error .installation-completion-image-loading:before{content:'미리보기 실패';font-size:9px}.installation-completion-image-wrap.is-error .installation-completion-image-loading i{display:none}.installation-completion-file-icon{display:grid;place-items:center;aspect-ratio:4/3;border-radius:7px;background:#f1f3f5;color:#778493;font-size:26px}.installation-completion-file-copy{display:grid;gap:2px;min-width:0}.installation-completion-file-copy strong{overflow:hidden;color:#4a5b6c;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.installation-completion-file-copy span{color:#8d98a3;font-size:8px}.installation-completion-file-card .btn{width:100%;min-height:27px;padding:4px 6px;font-size:8px}.installation-completion-notes-section{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px;align-items:start}.installation-completion-notes-section p{margin:0;padding:9px 10px;border-radius:8px;background:#f7f9fa;color:#556779;font-size:10px;line-height:1.55;white-space:pre-wrap}.installation-completion-empty-inline{padding:14px;border-radius:8px;background:#f6f8f9;color:#8a949d;font-size:9px;text-align:center}
@media(max-width:900px){.installation-completion-detail-meta{grid-template-columns:1fr 1fr}.installation-completion-preview-grid{grid-template-columns:1fr 1fr}.installation-completion-document-grid{grid-template-columns:1fr}}
@media(max-width:700px){.installation-completion-order-guide{grid-template-columns:1fr;gap:4px}.installation-completion-order-guide>i{display:none}.installation-completion-detail-head{display:grid;grid-template-columns:1fr}.installation-completion-detail-head .btn{justify-self:start}.installation-completion-detail-meta{grid-template-columns:1fr}.installation-completion-checklist-grid{grid-template-columns:1fr}.installation-completion-preview-grid{grid-template-columns:1fr 1fr}.installation-completion-notes-section{grid-template-columns:1fr}}
.installation-reschedule-photos{display:grid;gap:7px;padding:9px;border:1px solid #eadbc5;border-radius:10px;background:#fff}.installation-reschedule-photos-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.installation-reschedule-photos-head strong{color:#765129;font-size:10px}.installation-reschedule-photos-head span{color:#9a7a55;font-size:9px}.installation-reschedule-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.installation-reschedule-photo{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:8px;background:#f2ede6}.installation-reschedule-photo img{display:block;width:100%;height:100%;object-fit:cover;opacity:0}.installation-reschedule-photo>i{position:absolute;inset:0;display:grid;place-items:center;color:#9b8267}.installation-reschedule-photo.is-loaded img{opacity:1}.installation-reschedule-photo.is-loaded>i{display:none}.installation-reschedule-photo.is-error>i:before{content:'사진 확인 실패';font-family:inherit;font-size:9px}.installation-reschedule-photo.is-error>i{font-size:0}
@media(max-width:700px){.installation-reschedule-photo-grid{grid-template-columns:1fr 1fr}}

/* v196 - completion bundle download actions */
.installation-completion-detail-head>.installation-completion-detail-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:auto}
.installation-completion-detail-actions .btn{white-space:nowrap}
@media(max-width:700px){.installation-completion-detail-head>.installation-completion-detail-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.installation-completion-detail-actions .btn{width:100%;justify-content:center}}


/* WPPEI CRM v197 - completed work footer clarity */
.engineer-completed-actions{grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.engineer-complete-summary{justify-content:flex-start;min-width:0;padding:8px 10px;font-size:11px;white-space:nowrap;overflow:hidden}
.engineer-complete-summary>span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.engineer-complete-summary strong{font-size:inherit;color:inherit}
.engineer-completed-document-actions{flex-wrap:nowrap;gap:7px}
.engineer-completed-document-actions .btn{min-height:40px;padding:8px 11px;color:#fff!important;background:var(--aurelia-ultra)!important;border-color:var(--aurelia-ultra)!important;box-shadow:0 5px 14px rgba(63,84,199,.18)!important;white-space:nowrap}
.engineer-completed-document-actions .btn:hover{color:#fff!important;background:var(--aurelia-ultra-dark)!important;border-color:var(--aurelia-ultra-dark)!important;box-shadow:0 7px 18px rgba(49,67,167,.22)!important}
.engineer-completed-document-actions .btn i{color:#fff!important}
@media(max-width:700px){.engineer-completed-actions{grid-template-columns:1fr}.engineer-complete-summary{justify-content:center;white-space:normal;overflow:visible}.engineer-complete-summary>span{white-space:normal;overflow:visible;text-overflow:clip;text-align:center}.engineer-completed-document-actions{display:grid;grid-template-columns:1fr;width:100%}.engineer-completed-document-actions .btn{width:100%;justify-content:center}}


/* WPPEI CRM v198 - completion detail document download buttons */
.installation-completion-document-head .btn-detail-checklist-pdf,
.installation-completion-document-head .btn-detail-confirmation-pdf{color:#fff!important;background:var(--aurelia-ultra)!important;border-color:var(--aurelia-ultra)!important;box-shadow:0 5px 14px rgba(63,84,199,.18)!important}
.installation-completion-document-head .btn-detail-checklist-pdf:hover,
.installation-completion-document-head .btn-detail-confirmation-pdf:hover{color:#fff!important;background:var(--aurelia-ultra-dark)!important;border-color:var(--aurelia-ultra-dark)!important;box-shadow:0 7px 18px rgba(49,67,167,.22)!important}
.installation-completion-document-head .btn-detail-checklist-pdf i,
.installation-completion-document-head .btn-detail-confirmation-pdf i{color:#fff!important}

/* v199: 현장 완료 증빙을 자료 종류별 큰 행 없이 연속 카드로 표시 */
.installation-completion-preview-grid.is-continuous{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-items:start;gap:8px}
.installation-completion-preview-grid.is-continuous .installation-completion-file-card{grid-template-rows:auto auto auto auto;height:100%;padding:8px}
.installation-completion-file-kind{overflow:hidden;color:#34495d;font-size:9px;font-weight:850;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.installation-completion-preview-grid.is-continuous .installation-completion-file-copy{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px}
.installation-completion-preview-grid.is-continuous .installation-completion-file-copy strong{font-weight:700}
.installation-completion-preview-grid.is-continuous .installation-completion-file-copy span{white-space:nowrap}
@media (max-width:900px){.installation-completion-preview-grid.is-continuous{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.installation-completion-preview-grid.is-continuous{grid-template-columns:1fr}}

/* WPPEI CRM v200 - field visit outcomes / installation completion report */
.installation-status-with-history{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0}.installation-status-with-history .btn-work-history{min-height:24px;padding:3px 7px;border-color:#d9e1e8;background:#fff;color:#607184;font-size:9px;font-weight:800;white-space:nowrap}.installation-status-with-history .btn-work-history:hover{background:#f4f7fa;color:#334a60}
.installation-hold-outcome-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.installation-hold-outcome-card{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1.5px solid #dce4ea;border-radius:12px;background:#fbfcfd;cursor:pointer;transition:.15s ease}.installation-hold-outcome-card>input{position:absolute;width:1px;height:1px;opacity:0}.installation-hold-outcome-card>span:last-child{display:grid;gap:3px}.installation-hold-outcome-card strong{color:#344b60;font-size:12px}.installation-hold-outcome-card small{color:#758497;font-size:10px;line-height:1.45;word-break:keep-all}.installation-hold-outcome-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eef3f6;color:#527287}.installation-hold-outcome-card.is-selected{border-color:#4f7486;background:#f4f9fb;box-shadow:0 0 0 2px rgba(79,116,134,.08)}.installation-hold-outcome-card.is-selected .installation-hold-outcome-icon{background:#4f7486;color:#fff}.installation-hold-outcome-card.is-unavailable.is-selected{border-color:#b65a50;background:#fff6f4;box-shadow:0 0 0 2px rgba(182,90,80,.08)}.installation-hold-outcome-card.is-unavailable.is-selected .installation-hold-outcome-icon{background:#a95047;color:#fff}.installation-work-hold-warning.is-unavailable{border-color:#efc8c1;background:#fff3f1;color:#8d3f36}.installation-work-hold-warning.is-unavailable>i{background:#fbe3df;color:#a95047}.installation-work-hold-warning.is-unavailable span{color:#8e615c}
.installation-reschedule-reason{grid-template-columns:minmax(0,1fr) auto;align-items:center}.installation-reschedule-reason strong,.installation-reschedule-reason span{grid-column:1}.installation-reschedule-reason .btn{grid-column:2;grid-row:1/3;align-self:center;white-space:nowrap}.installation-reschedule-reason.is-unavailable{border-color:#efc8c1;background:#fff3f1;color:#873e36}
.installation-completion-work-history{padding:11px;border:1px solid #dde5ea;border-radius:11px;background:#fff}.installation-work-history-list{display:grid;gap:7px}.installation-work-history-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:start;padding:8px;border:1px solid #e3e8ed;border-radius:9px;background:#fafbfc}.installation-work-history-item.is-hold{border-left:3px solid #c58a43}.installation-work-history-item.is-unavailable{border-left:3px solid #b65a50}.installation-work-history-item.is-completed{border-left:3px solid #4d8061;background:#f7fbf8}.installation-work-history-marker{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#edf1f4;color:#526579;font-size:9px;font-weight:900}.installation-work-history-copy{display:grid;gap:4px;min-width:0}.installation-work-history-title{display:flex;align-items:center;gap:7px;min-width:0}.installation-work-history-title strong{overflow:hidden;color:#405469;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.installation-work-history-badge{display:inline-flex;align-items:center;padding:3px 6px;border-radius:999px;font-size:8px;font-weight:900;white-space:nowrap}.installation-work-history-badge.is-hold{background:#fff0d9;color:#875a20}.installation-work-history-badge.is-unavailable{background:#fbe5e1;color:#984b42}.installation-work-history-badge.is-completed{background:#e6f2ea;color:#3f7353}.installation-work-history-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#7b8896;font-size:8px}.installation-work-history-meta span{display:inline-flex;align-items:center;gap:4px}.installation-work-history-copy p{margin:0;color:#617183;font-size:9px;line-height:1.45;white-space:pre-wrap}.installation-work-history-actions{display:flex;align-items:center;gap:6px}.installation-work-history-actions>span{color:#8793a0;font-size:8px;white-space:nowrap}.installation-work-history-actions .btn{min-height:26px;padding:4px 7px;font-size:8px}.installation-work-history-first-visit{display:flex;align-items:center;gap:7px;margin-bottom:7px;padding:8px 10px;border-radius:8px;background:#f3f8f5;color:#52705d;font-size:9px;font-weight:700}
.installation-work-history-panel{gap:10px}.installation-work-history-summary{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;padding:9px 11px;border-radius:9px;background:#f4f7f9;color:#6c7a89;font-size:9px}.installation-work-history-summary strong{color:#34495d;font-size:12px}.installation-work-history-summary small{justify-self:end;color:#82909d;font-size:8px}.installation-work-history-detail-card{display:grid;gap:8px;padding:11px;border:1px solid #e0e6eb;border-radius:11px;background:#fff}.installation-work-history-detail-card.is-hold{border-left:4px solid #c58a43}.installation-work-history-detail-card.is-unavailable{border-left:4px solid #b65a50}.installation-work-history-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.installation-work-history-detail-head>div{display:grid;gap:4px}.installation-work-history-detail-head h4{margin:0;color:#364b60;font-size:12px}.installation-work-history-detail-head p{margin:0;color:#7a8795;font-size:9px}.installation-work-history-detail-note{padding:8px 9px;border-radius:8px;background:#f7f9fa;color:#596b7c;font-size:9px;line-height:1.5;white-space:pre-wrap}.installation-work-history-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.installation-work-history-photo{display:grid;gap:5px;padding:7px;border:1px solid #e3e8ed;border-radius:9px;background:#fbfcfd}.installation-work-history-photo>div:nth-child(2){display:grid;gap:2px;min-width:0}.installation-work-history-photo strong{color:#405469;font-size:9px}.installation-work-history-photo span{overflow:hidden;color:#88939f;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.installation-work-history-photo .btn{width:100%;min-height:27px;padding:4px 6px;font-size:8px}.btn-completion-report-download{color:#fff!important;background:var(--aurelia-ultra)!important;border-color:var(--aurelia-ultra)!important}.btn-completion-report-download:hover{color:#fff!important;background:var(--aurelia-ultra-dark)!important;border-color:var(--aurelia-ultra-dark)!important}
@media(max-width:900px){.installation-work-history-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.installation-hold-outcome-options{grid-template-columns:1fr}.installation-reschedule-reason{grid-template-columns:1fr}.installation-reschedule-reason .btn{grid-column:1;grid-row:auto;width:100%;justify-content:center}}
@media(max-width:700px){.installation-completion-detail-head>.installation-completion-detail-actions{grid-template-columns:1fr}.installation-work-history-item{grid-template-columns:28px minmax(0,1fr)}.installation-work-history-actions{grid-column:2;justify-content:flex-start}.installation-work-history-summary{grid-template-columns:auto 1fr}.installation-work-history-summary small{grid-column:1/-1;justify-self:start}.installation-work-history-detail-head{display:grid}.installation-work-history-detail-head .btn{width:100%;justify-content:center}.installation-work-history-photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.installation-work-history-photo-grid{grid-template-columns:1fr}.installation-work-history-meta{display:grid;gap:3px}}

/* WPPEI CRM v201 - engineer field visit history / completed-record cleanup */
.engineer-work-summary.is-four{grid-template-columns:repeat(4,minmax(68px,1fr));min-width:340px}
.engineer-work-tabs.is-four .engineer-work-tab{min-width:118px;flex:1}
.engineer-revisit-note{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #ead7b9;border-radius:10px;background:#fff9ef}.engineer-revisit-note>div{display:grid;gap:2px;min-width:0}.engineer-revisit-note span{display:flex;align-items:center;gap:5px;color:#8a632e;font-size:9px;font-weight:850}.engineer-revisit-note strong{overflow:hidden;color:#5f4b30;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.engineer-revisit-note.is-unavailable{border-color:#efcbc5;background:#fff6f4}.engineer-revisit-note.is-unavailable span{color:#9c5148}.engineer-revisit-note.is-unavailable strong{color:#75453f}.engineer-revisit-note .btn{flex:0 0 auto;min-height:30px;padding:5px 8px;font-size:9px}
.engineer-visit-history-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.engineer-visit-history-card{display:grid;gap:10px;padding:14px;border:1px solid #dfe5ea;border-left:4px solid #c58a43;border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(34,52,72,.05)}.engineer-visit-history-card.is-unavailable{border-left-color:#b65a50}.engineer-visit-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.engineer-visit-history-head>div:first-child{display:grid;gap:6px;min-width:0}.engineer-visit-history-head h3{margin:0;color:#2f4357;font-size:15px;line-height:1.3}.engineer-visit-history-head h3 small{color:#84909d;font-size:10px;font-weight:700}.engineer-visit-history-date{display:grid;justify-items:end;gap:2px;flex:0 0 auto}.engineer-visit-history-date strong{color:#53677b;font-size:9px}.engineer-visit-history-date span{color:#909aa4;font-size:8px}.engineer-visit-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.engineer-visit-history-grid>div{display:grid;gap:3px;padding:8px 9px;border-radius:8px;background:#f7f9fa}.engineer-visit-history-grid span{color:#8b96a1;font-size:8px;font-weight:700}.engineer-visit-history-grid strong{overflow:hidden;color:#43586c;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.engineer-visit-history-address{display:flex;align-items:center;gap:7px;min-width:0;color:#617385;font-size:9px}.engineer-visit-history-address>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.engineer-visit-history-address>a{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:#3f627c;font-weight:800;text-decoration:none;white-space:nowrap}.engineer-visit-history-note{min-height:42px;padding:9px 10px;border-radius:8px;background:#f7f9fb;color:#586b7d;font-size:9px;line-height:1.55;white-space:pre-wrap}.engineer-visit-followup{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid #dce4ea;border-radius:9px;background:#fbfcfd}.engineer-visit-followup>div{display:grid;gap:2px}.engineer-visit-followup>div+div{margin-left:auto;text-align:right}.engineer-visit-followup span{color:#8995a1;font-size:8px}.engineer-visit-followup strong{color:#40576a;font-size:10px}.engineer-visit-followup small{color:#788797;font-size:8px}.engineer-visit-followup.is-completed{border-color:#cfe2d5;background:#f6fbf8}.engineer-visit-followup.is-completed strong{color:#3f7353}.engineer-visit-followup.is-coordination{border-color:#ead9bd;background:#fffaf2}.engineer-visit-followup.is-coordination strong{color:#84612f}.engineer-visit-history-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.engineer-visit-history-actions .btn{min-height:34px;padding:6px 9px;font-size:9px}.engineer-visit-delete-lock{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:#8b96a1;font-size:8px;font-weight:700}.engineer-work-detail-host:not(:empty){margin-top:14px}
@media(max-width:980px){.engineer-work-summary.is-four{min-width:300px}.engineer-visit-history-list{grid-template-columns:1fr}}
@media(max-width:640px){.engineer-work-summary.is-four{grid-template-columns:repeat(2,1fr);min-width:0}.engineer-revisit-note{align-items:stretch;flex-direction:column}.engineer-revisit-note .btn{width:100%;justify-content:center}.engineer-visit-history-head{display:grid}.engineer-visit-history-date{justify-items:start}.engineer-visit-history-grid{grid-template-columns:1fr}.engineer-visit-history-address{align-items:flex-start;flex-wrap:wrap}.engineer-visit-history-address>span{width:calc(100% - 24px);white-space:normal}.engineer-visit-history-address>a{margin-left:24px}.engineer-visit-followup{align-items:flex-start;flex-direction:column}.engineer-visit-followup>div+div{margin-left:0;text-align:left}.engineer-visit-history-actions{display:grid;grid-template-columns:1fr}.engineer-visit-history-actions .btn{width:100%;justify-content:center}.engineer-visit-delete-lock{margin-left:0;justify-content:center;padding:5px}}

/* ============================================================
   WPPEI CRM v203 - compact list pagination
   ============================================================ */
.engineer-job-list.engineer-job-list-single{grid-template-columns:1fr}
.crm-list-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 2px 0;color:#657285;font-size:12px}
.crm-pagination-summary{font-weight:700;white-space:nowrap}
.crm-pagination-controls{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.crm-pagination-page,.crm-pagination-nav{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid #d6dde5;border-radius:8px;background:#fff;color:#425166;font-size:12px;font-weight:800;cursor:pointer;transition:.15s ease}
.crm-pagination-page:hover,.crm-pagination-nav:hover:not(:disabled){border-color:#3b50c8;color:#2f43bd;background:#f6f7ff}
.crm-pagination-page.is-active{border-color:#354bcc;background:#354bcc;color:#fff;box-shadow:0 4px 10px rgba(53,75,204,.18)}
.crm-pagination-nav:disabled{opacity:.42;cursor:not-allowed}
.crm-pagination-gap{min-width:18px;text-align:center;color:#99a3af;font-weight:800}
@media(max-width:640px){.crm-list-pagination{align-items:flex-start;flex-direction:column}.crm-pagination-controls{width:100%;justify-content:flex-start}.crm-pagination-nav span{display:none}.crm-pagination-nav{min-width:34px;padding:0 8px}}

/* WPPEI CRM v213 - compact single-column today work cards */
.engineer-job-card.is-today-compact{padding:14px 16px}
.engineer-job-card.is-today-compact .engineer-job-card-head-compact{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;grid-template-areas:"time customer state";align-items:center;gap:16px;padding-bottom:10px}
.engineer-job-card.is-today-compact .engineer-job-time{grid-area:time}
.engineer-job-card.is-today-compact .engineer-job-head-copy{grid-area:state}
.engineer-job-customer-inline{grid-area:customer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:0 4px}
.engineer-job-customer-inline>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.engineer-job-customer-inline strong{overflow:hidden;color:#24364b;font-size:17px;text-overflow:ellipsis;white-space:nowrap}
.engineer-job-card.is-today-compact .engineer-phone-link{min-height:32px;padding:0 10px}
.engineer-job-card.is-today-compact .engineer-job-info-grid{margin-top:9px;grid-template-columns:minmax(0,1.65fr) minmax(190px,.6fr);gap:8px}
.engineer-job-card.is-today-compact .engineer-job-info{padding:8px 10px}
.engineer-job-card.is-today-compact .engineer-job-info strong{margin-top:3px;line-height:1.35}
.engineer-job-context-grid{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:8px;margin-top:8px}
.engineer-job-context-grid>.engineer-job-notes{margin-top:0;display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px}
.engineer-job-context-grid>.engineer-job-notes:only-child{grid-column:1/-1}
.engineer-job-context-grid>.engineer-job-notes p{flex:1;min-width:0;margin:0;line-height:1.4}
.engineer-job-context-grid>.engineer-revisit-note{margin:0;min-width:0;padding:7px 9px}
.engineer-job-card.is-today-compact .engineer-job-actions{margin-top:9px}
.engineer-job-card.is-today-compact .engineer-primary-action{min-height:40px}
@media(max-width:1100px){.engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time state" "customer customer";gap:8px 14px}.engineer-job-customer-inline{padding:0}.engineer-job-context-grid{grid-template-columns:1fr}.engineer-job-context-grid>.engineer-job-notes:only-child{grid-column:auto}}
@media(max-width:640px){.engineer-job-card.is-today-compact{padding:15px}.engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time state" "customer customer"}.engineer-job-card.is-today-compact .engineer-job-time{align-items:flex-start;flex-direction:column;gap:4px}.engineer-job-customer-inline{align-items:stretch;flex-direction:column}.engineer-job-customer-inline>div{width:100%}.engineer-job-customer-inline .engineer-phone-link{width:100%}.engineer-job-card.is-today-compact .engineer-job-info-grid{grid-template-columns:1fr}.engineer-job-context-grid>.engineer-job-notes{align-items:flex-start;flex-direction:column;gap:4px}}

/* v214 - 엔지니어 오늘 작업 카드 / 이전 현장 이력 가독성 개선 */
.engineer-job-card.is-today-compact .engineer-job-time strong{font-size:28px}
.engineer-job-card.is-today-compact .engineer-job-time span{font-size:13px}
.engineer-job-card.is-today-compact .engineer-job-head-copy small{font-size:11px}
.engineer-job-card.is-today-compact .engineer-job-state{font-size:12px}
.engineer-job-card.is-today-compact .engineer-job-label{font-size:12px}
.engineer-job-card.is-today-compact .engineer-job-customer-inline strong{font-size:18px}
.engineer-job-card.is-today-compact .engineer-phone-link{font-size:13px}
.engineer-job-card.is-today-compact .engineer-job-info strong{font-size:14px}
.engineer-job-card.is-today-compact .engineer-job-notes p{font-size:13px}
.engineer-job-card.is-today-compact .engineer-revisit-note span{font-size:10px}
.engineer-job-card.is-today-compact .engineer-revisit-note strong{font-size:11px}
.engineer-job-card.is-today-compact .engineer-revisit-note .btn{font-size:10px}
.engineer-job-card.is-today-compact .engineer-primary-action{font-size:14px}

/* 넓은 화면에서는 이미 같은 행에 들어갈 수 있는 정보는 한 줄로 정리 */
@media(min-width:1201px){
  .engineer-job-card.is-today-compact .engineer-job-info{display:flex;align-items:center;gap:10px;min-height:44px}
  .engineer-job-card.is-today-compact .engineer-job-info .engineer-job-label{flex:0 0 auto;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-job-info strong{min-width:0;margin-top:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note>div{display:flex;align-items:center;gap:8px;min-width:0}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note span{flex:0 0 auto;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes .engineer-job-label{flex:0 0 auto;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 이전 이력 보기 패널 - 기존 대비 글자 크기 한 단계 확대 + 주요 정보 강조 */
.installation-work-history-panel .installation-completion-detail-head>div>span{font-size:10px}
.installation-work-history-panel .installation-completion-detail-head h3{font-size:16px;font-weight:800}
.installation-work-history-panel .installation-completion-detail-head p{font-size:11px}
.installation-work-history-panel .installation-work-history-summary{font-size:10px}
.installation-work-history-panel .installation-work-history-summary strong{font-size:13px;font-weight:800}
.installation-work-history-panel .installation-work-history-summary small{font-size:9px}
.installation-work-history-panel .installation-work-history-badge{font-size:9px;font-weight:900}
.installation-work-history-panel .installation-work-history-detail-head h4{font-size:13px;font-weight:800}
.installation-work-history-panel .installation-work-history-detail-head p{font-size:10px}
.installation-work-history-panel .installation-work-history-detail-note{font-size:10px;font-weight:600;line-height:1.55}
.installation-work-history-panel .installation-work-history-detail-card.is-unavailable .installation-work-history-detail-note{color:#4d5967;font-weight:700}
.installation-work-history-panel .installation-work-history-photo strong{font-size:10px;font-weight:800}
.installation-work-history-panel .installation-work-history-photo span{font-size:9px}
.installation-work-history-panel .installation-work-history-photo .btn{font-size:9px}
.installation-work-history-panel .btn-field-visit-report{font-size:10px;font-weight:800}

/* v215 - 엔지니어 오늘 작업 카드: 넓은 화면에서 본문 + 작업 버튼을 한 행으로 압축 */
@media(min-width:1401px){
  .engineer-job-card.is-today-compact{
    display:grid;
    grid-template-columns:minmax(240px,1.45fr) minmax(135px,.58fr) minmax(220px,.95fr) minmax(270px,1.3fr) minmax(150px,.62fr);
    grid-template-areas:
      "head head head head head"
      "address product revisit notes actions";
    column-gap:8px;
    row-gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-area:head}
  .engineer-job-card.is-today-compact .engineer-job-info-grid,
  .engineer-job-card.is-today-compact .engineer-job-context-grid{display:contents}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{grid-area:revisit}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes{grid-area:notes}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes:only-child{grid-column:3 / 5;grid-row:2}
  .engineer-job-card.is-today-compact .engineer-job-actions{grid-area:actions;margin-top:0;display:flex;align-items:stretch;min-width:0}
  .engineer-job-card.is-today-compact .engineer-primary-action{width:100%;height:100%;min-height:44px;padding-left:12px;padding-right:12px;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-revisit-note,
  .engineer-job-card.is-today-compact .engineer-job-notes{min-height:44px;margin-top:0}
  .engineer-job-card.is-today-compact .engineer-job-notes{display:flex;align-items:center;gap:10px;padding:8px 10px}
  .engineer-job-card.is-today-compact .engineer-job-notes p{margin:0}
}

/* v216 - v215 과도한 1행 압축 해제: 읽기 쉬운 2단 압축 카드 */
@media(min-width:1401px){
  .engineer-job-card.is-today-compact{
    display:grid;
    grid-template-columns:minmax(320px,1.35fr) minmax(210px,.62fr) minmax(360px,1.35fr);
    grid-template-areas:
      "head head head"
      "address product notes"
      "revisit actions actions";
    column-gap:8px;
    row-gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-area:head}
  .engineer-job-card.is-today-compact .engineer-job-info-grid,
  .engineer-job-card.is-today-compact .engineer-job-context-grid{display:contents}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes:only-child{grid-area:notes;grid-column:auto;grid-row:auto}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{grid-area:revisit}
  .engineer-job-card.is-today-compact .engineer-job-actions{grid-area:actions;margin-top:0;min-width:0}
  .engineer-job-card.is-today-compact:not(:has(.engineer-revisit-note)) .engineer-job-actions{grid-column:1/-1;grid-row:3}

  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-revisit-note,
  .engineer-job-card.is-today-compact .engineer-job-notes{min-height:44px;margin-top:0}
  .engineer-job-card.is-today-compact .engineer-job-info{padding:8px 10px}
  .engineer-job-card.is-today-compact .engineer-job-info strong{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }
  .engineer-job-card.is-today-compact .engineer-job-notes{display:flex;align-items:center;gap:10px;padding:8px 10px}
  .engineer-job-card.is-today-compact .engineer-job-notes p{
    margin:0;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    white-space:normal;
    text-overflow:clip;
    line-height:1.4;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note{padding:8px 10px}
  .engineer-job-card.is-today-compact .engineer-revisit-note>div{display:grid;gap:2px;min-width:0}
  .engineer-job-card.is-today-compact .engineer-revisit-note span{white-space:normal}
  .engineer-job-card.is-today-compact .engineer-revisit-note strong{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.35}

  .engineer-job-card.is-today-compact .engineer-primary-action{min-height:42px}
  .engineer-job-card.is-today-compact .engineer-checklist-action{padding:8px 10px;gap:7px}
  .engineer-job-card.is-today-compact .engineer-work-hold-button{margin-top:5px}
}

/* 진행 중 작업은 넓은 화면에서 체크리스트 조작부를 가로로 활용 */
@media(min-width:1501px){
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete){
    grid-template-columns:minmax(170px,.62fr) minmax(250px,1.25fr) minmax(165px,.62fr);
    grid-template-areas:
      "progress primary hold"
      "bar primary hold";
    align-items:center;
    column-gap:10px;
    row-gap:5px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-head{grid-area:progress}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-bar{grid-area:bar}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-primary-action{grid-area:primary;height:100%;min-height:44px}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-work-hold-button{grid-area:hold;margin-top:0;height:100%;min-height:44px}
}

/* v217 - 재방문 이력 안내 글꼴을 현장 전달사항과 동일 기준으로 통일 */
.engineer-job-card.is-today-compact .engineer-revisit-note span{
  font-size:12px;
  font-weight:800;
  line-height:1.4;
}
.engineer-job-card.is-today-compact .engineer-revisit-note strong{
  font-size:13px;
  font-weight:400;
  line-height:1.4;
}
.engineer-job-card.is-today-compact .engineer-revisit-note .btn{
  font-size:11px;
}

/* v218 - 엔지니어 오늘 작업: 본문 4개 정보는 1행, 체크리스트/작업 조작은 2행 전체 폭 */
@media(min-width:1281px){
  .engineer-job-card.is-today-compact{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.62fr) minmax(0,1.28fr) minmax(0,1.30fr);
    grid-template-areas:
      "head head head head"
      "address product notes revisit"
      "actions actions actions actions";
    column-gap:8px;
    row-gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-area:head}
  .engineer-job-card.is-today-compact .engineer-job-info-grid,
  .engineer-job-card.is-today-compact .engineer-job-context-grid{display:contents}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes:only-child{
    grid-area:notes;
    grid-column:auto;
    grid-row:auto;
  }
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{grid-area:revisit}
  .engineer-job-card.is-today-compact .engineer-job-actions{
    grid-area:actions;
    grid-column:1/-1;
    grid-row:3;
    margin-top:0;
    min-width:0;
  }
  .engineer-job-card.is-today-compact:not(:has(.engineer-revisit-note)) .engineer-job-context-grid>.engineer-job-notes{
    grid-column:3 / 5;
    grid-row:2;
  }

  /* 첫째 행 높이를 일정하게 유지하면서 핵심 텍스트는 한 줄로 정리 */
  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-revisit-note{
    min-height:44px;
    margin-top:0;
    padding:8px 10px;
  }
  .engineer-job-card.is-today-compact .engineer-job-info{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .engineer-job-card.is-today-compact .engineer-job-info .engineer-job-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-job-info strong{
    min-width:0;
    margin-top:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-job-notes{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .engineer-job-card.is-today-compact .engineer-job-notes .engineer-job-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-job-notes p{
    min-width:0;
    margin:0;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.4;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note>div{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note span{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 둘째 행 전체 폭을 체크리스트/현장 작업 조작에 사용 */
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete){
    grid-template-columns:minmax(180px,.62fr) minmax(300px,1.25fr) minmax(180px,.68fr);
    grid-template-areas:
      "progress primary hold"
      "bar primary hold";
    align-items:center;
    column-gap:10px;
    row-gap:5px;
    padding:8px 10px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-head{grid-area:progress}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-bar{grid-area:bar}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-primary-action{
    grid-area:primary;
    height:100%;
    min-height:44px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-work-hold-button{
    grid-area:hold;
    margin-top:0;
    height:100%;
    min-height:44px;
  }
}

/* v220 - 엔지니어 오늘 작업 카드: 정보 2행 + 체크리스트 전체 폭 */
@media(min-width:1281px){
  .engineer-job-card.is-today-compact{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
    grid-template-areas:
      "head head"
      "address product"
      "notes revisit"
      "actions actions";
    column-gap:8px;
    row-gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-area:head}
  .engineer-job-card.is-today-compact .engineer-job-info-grid,
  .engineer-job-card.is-today-compact .engineer-job-context-grid{display:contents}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes:only-child{
    grid-area:notes;
    grid-column:auto;
    grid-row:auto;
  }
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{grid-area:revisit}
  .engineer-job-card.is-today-compact:not(:has(.engineer-revisit-note)) .engineer-job-context-grid>.engineer-job-notes{
    grid-column:1/-1;
    grid-row:3;
  }

  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-revisit-note{
    min-height:42px;
    margin-top:0;
    padding:7px 10px;
  }
  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-job-notes{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .engineer-job-card.is-today-compact .engineer-job-info .engineer-job-label,
  .engineer-job-card.is-today-compact .engineer-job-notes .engineer-job-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-job-info strong,
  .engineer-job-card.is-today-compact .engineer-job-notes p{
    min-width:0;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note>div{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note span{flex:0 0 auto;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-revisit-note strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 체크리스트/작업 영역은 별도 행 전체 폭 사용 */
  .engineer-job-card.is-today-compact .engineer-job-actions{
    grid-area:actions;
    grid-column:1/-1;
    grid-row:4;
    display:block;
    width:100%;
    min-width:0;
    margin-top:0;
  }
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-checklist-action{
    width:100%;
    box-sizing:border-box;
  }
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-primary-action,
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-help-note,
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-completed-actions{
    width:100%;
    box-sizing:border-box;
  }

  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete){
    grid-template-columns:minmax(180px,.58fr) minmax(320px,1.35fr) minmax(190px,.68fr);
    grid-template-areas:
      "progress primary hold"
      "bar primary hold";
    align-items:center;
    column-gap:10px;
    row-gap:5px;
    padding:8px 10px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-head{grid-area:progress}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-bar{grid-area:bar}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-primary-action{
    grid-area:primary;
    height:100%;
    min-height:42px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-work-hold-button{
    grid-area:hold;
    margin-top:0;
    height:100%;
    min-height:42px;
  }
}

/* v221 - 엔지니어 오늘 작업 카드: 2행 x 3영역, 작업 조작 영역은 우측 2행 통합 */
@media(min-width:1281px){
  .engineer-job-card.is-today-compact{
    display:grid;
    grid-template-columns:minmax(280px,1.05fr) minmax(360px,1.30fr) minmax(430px,1.30fr);
    grid-template-areas:
      "head head head"
      "address notes actions"
      "product revisit actions";
    column-gap:8px;
    row-gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-job-card-head-compact{grid-area:head}
  .engineer-job-card.is-today-compact .engineer-job-info-grid,
  .engineer-job-card.is-today-compact .engineer-job-context-grid{display:contents}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-job-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes:only-child{
    grid-area:notes;
    grid-column:auto;
    grid-row:auto;
  }
  .engineer-job-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{grid-area:revisit}

  /* 우측 체크리스트/작업 조작은 두 정보 행을 모두 사용 */
  .engineer-job-card.is-today-compact .engineer-job-actions{
    grid-area:actions;
    grid-column:3;
    grid-row:2 / 4;
    display:flex;
    align-items:stretch;
    width:100%;
    min-width:0;
    margin-top:0;
  }
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-checklist-action,
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-primary-action,
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-help-note,
  .engineer-job-card.is-today-compact .engineer-job-actions>.engineer-completed-actions{
    width:100%;
    height:100%;
    box-sizing:border-box;
  }

  /* 재방문 이력이 없으면 현장 전달사항이 가운데 두 행을 모두 사용 */
  .engineer-job-card.is-today-compact:not(:has(.engineer-revisit-note)) .engineer-job-context-grid>.engineer-job-notes{
    grid-column:2;
    grid-row:2 / 4;
  }

  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-job-notes,
  .engineer-job-card.is-today-compact .engineer-revisit-note{
    min-height:42px;
    margin-top:0;
    padding:7px 10px;
  }
  .engineer-job-card.is-today-compact .engineer-job-info,
  .engineer-job-card.is-today-compact .engineer-job-notes{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .engineer-job-card.is-today-compact .engineer-job-info .engineer-job-label,
  .engineer-job-card.is-today-compact .engineer-job-notes .engineer-job-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-job-info strong,
  .engineer-job-card.is-today-compact .engineer-job-notes p{
    min-width:0;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note>div{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .engineer-job-card.is-today-compact .engineer-revisit-note span{flex:0 0 auto;white-space:nowrap}
  .engineer-job-card.is-today-compact .engineer-revisit-note strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 진행 중 체크리스트 조작부는 우측 통합영역 안에서 세로 공간을 알차게 사용 */
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete){
    display:grid;
    grid-template-columns:minmax(150px,.72fr) minmax(190px,1fr);
    grid-template-areas:
      "progress primary"
      "bar primary"
      "hold hold";
    align-content:center;
    align-items:center;
    column-gap:9px;
    row-gap:6px;
    padding:8px 10px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-head{grid-area:progress}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete) .engineer-checklist-progress-bar{grid-area:bar}
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-primary-action{
    grid-area:primary;
    height:100%;
    min-height:44px;
  }
  .engineer-job-card.is-today-compact .engineer-checklist-action:not(.is-complete)>.engineer-work-hold-button{
    grid-area:hold;
    margin-top:0;
    min-height:36px;
  }
}

/* v222: single-line 6-step installation workflow */
.installation-workflow-steps.is-six-step-flow{display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;padding:8px 9px;scrollbar-width:thin}
.installation-workflow-steps.is-six-step-flow .installation-workflow-step{flex:1 1 0;min-width:122px;padding:6px 7px;grid-template-columns:27px minmax(0,1fr);gap:6px}
.installation-workflow-steps.is-six-step-flow .installation-workflow-step-no{width:27px;height:27px;font-size:11px;flex:0 0 27px}
.installation-workflow-steps.is-six-step-flow .installation-workflow-step strong{font-size:10px}
.installation-workflow-steps.is-six-step-flow .installation-workflow-step small{font-size:8.5px}
.installation-workflow-steps.is-six-step-flow .installation-workflow-arrow{display:block;flex:0 0 9px;width:9px;font-size:9px}
.installation-workflow-steps.is-six-step-flow.is-completion-stage{padding:8px 9px}
@media(max-width:1100px){.installation-workflow-steps.is-six-step-flow .installation-workflow-step{min-width:132px;flex:0 0 132px}}
@media(max-width:700px){.installation-workflow-steps.is-six-step-flow{display:flex;grid-template-columns:none;gap:4px;overflow-x:auto}.installation-workflow-steps.is-six-step-flow .installation-workflow-arrow{display:block;flex:0 0 8px}.installation-workflow-steps.is-six-step-flow .installation-workflow-step{grid-template-columns:26px minmax(0,1fr);min-width:138px;flex:0 0 138px;padding:6px}.installation-workflow-steps.is-six-step-flow .installation-workflow-step-no{width:26px;height:26px}.installation-workflow-steps.is-six-step-flow .installation-workflow-step strong{font-size:11px}.installation-workflow-steps.is-six-step-flow .installation-workflow-step small{font-size:9px}}


/* v223: fit six installation workflow steps without a desktop scrollbar; keep v222 font sizes */
.installation-workflow-steps.is-six-step-flow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr);
  align-items:center;
  gap:2px;
  overflow-x:hidden;
  overflow-y:hidden;
  padding:8px 6px;
  scrollbar-width:none;
}
.installation-workflow-steps.is-six-step-flow::-webkit-scrollbar{display:none}
.installation-workflow-steps.is-six-step-flow .installation-workflow-step{
  width:100%;
  min-width:0;
  padding:6px 4px;
  grid-template-columns:27px minmax(0,1fr);
  gap:4px;
}
.installation-workflow-steps.is-six-step-flow .installation-workflow-arrow{
  display:block;
  width:5px;
  min-width:5px;
  font-size:9px;
  text-align:center;
}
.installation-workflow-steps.is-six-step-flow .installation-workflow-step strong,
.installation-workflow-steps.is-six-step-flow .installation-workflow-step small{
  min-width:0;
}
@media (max-width:1100px) and (min-width:701px){
  .installation-workflow-steps.is-six-step-flow{
    grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr) 4px minmax(0,1fr) 4px minmax(0,1fr) 4px minmax(0,1fr) 4px minmax(0,1fr);
    gap:1px;
    padding-left:5px;
    padding-right:5px;
  }
  .installation-workflow-steps.is-six-step-flow .installation-workflow-step{
    min-width:0;
    flex:none;
    padding-left:3px;
    padding-right:3px;
    grid-template-columns:27px minmax(0,1fr);
    gap:3px;
  }
  .installation-workflow-steps.is-six-step-flow .installation-workflow-arrow{
    width:4px;
    min-width:4px;
    flex:none;
  }
}
/* On phones keep one-line swipe behavior, but hide the visual scrollbar. */
@media(max-width:700px){
  .installation-workflow-steps.is-six-step-flow{
    display:flex;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 6px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .installation-workflow-steps.is-six-step-flow::-webkit-scrollbar{display:none}
  .installation-workflow-steps.is-six-step-flow .installation-workflow-step{
    grid-template-columns:26px minmax(0,1fr);
    min-width:138px;
    flex:0 0 138px;
    padding:6px;
    gap:6px;
  }
  .installation-workflow-steps.is-six-step-flow .installation-workflow-arrow{
    display:block;
    flex:0 0 8px;
    width:8px;
  }
}

/* ============================================================
   WPPEI CRM v224 - engineer field-history readability / full-width cards
   ============================================================ */
/* 현장 이력은 누적 기록을 빠르게 읽을 수 있도록 한 행에 카드 1개만 사용 */
.engineer-visit-history-list{
  grid-template-columns:1fr;
  gap:12px;
  width:100%;
}
.engineer-visit-history-card{
  width:100%;
  gap:11px;
  padding:15px 16px;
}
/* 고객명·계약번호는 다른 관리 화면과 동일하게 핵심 식별정보로 강조 */
.engineer-visit-history-head h3{
  font-size:16px;
  font-weight:850;
}
.engineer-visit-history-head h3 small{
  color:#6f7f8f;
  font-size:11px;
  font-weight:850;
}
.engineer-visit-history-date strong{
  font-size:10px;
  font-weight:850;
}
.engineer-visit-history-date span{font-size:9px}
/* 넓어진 카드 폭을 활용해 방문 일정·사유·제품·증빙을 한 행에 정리 */
.engineer-visit-history-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.engineer-visit-history-grid>div{
  gap:4px;
  padding:9px 11px;
}
.engineer-visit-history-grid span{
  font-size:9px;
  font-weight:800;
}
.engineer-visit-history-grid strong{
  color:#344b60;
  font-size:11px;
  font-weight:850;
}
.engineer-visit-history-address{
  gap:8px;
  font-size:10px;
}
.engineer-visit-history-address>span{
  color:#4d6275;
  font-weight:800;
}
.engineer-visit-history-address>a{
  font-size:10px;
  font-weight:850;
}
/* 현장 보고의 핵심 상세내용은 일반 보조문구보다 한 단계 강하게 표시 */
.engineer-visit-history-note{
  min-height:0;
  padding:10px 11px;
  color:#43586b;
  font-size:10px;
  font-weight:700;
  line-height:1.6;
}
.engineer-visit-followup{
  padding:10px 11px;
}
.engineer-visit-followup span{
  font-size:9px;
  font-weight:750;
}
.engineer-visit-followup strong{
  font-size:11px;
  font-weight:850;
}
.engineer-visit-followup small{
  font-size:9px;
  font-weight:700;
}
.engineer-visit-history-actions .btn{
  min-height:35px;
  padding:6px 10px;
  font-size:10px;
  font-weight:800;
}
.engineer-visit-delete-lock{
  font-size:9px;
  font-weight:800;
}
/* 설치 불가/보류 결과 배지도 핵심 결과로 유지 */
.engineer-visit-history-card .installation-work-history-badge{
  font-size:9px;
  font-weight:900;
}
@media(max-width:1100px){
  .engineer-visit-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .engineer-visit-history-grid{grid-template-columns:1fr}
  .engineer-visit-history-card{padding:13px}
}

/* ============================================================
   WPPEI CRM v225 - A/S base management
   ============================================================ */
.as-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.as-summary-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border:1px solid #dfe5eb;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(32,51,70,.04)}
.as-summary-card span{font-size:13px;font-weight:700;color:#68778a}.as-summary-card strong{font-size:25px;line-height:1;color:#22384d}.as-summary-card.is-warning{border-color:#f0c98c;background:#fffaf1}
.as-list-note{margin:0 0 12px}.as-customer-cell,.as-issue-cell{display:flex;flex-direction:column;align-items:center;gap:2px}.as-customer-cell strong,.as-issue-cell strong{font-weight:800}.as-customer-cell small,.as-issue-cell small{font-size:11px;color:#758398;max-width:220px;white-space:normal;line-height:1.25}.as-issue-cell .badge{margin-bottom:2px}.as-photo-count{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#4e6075}
.as-modal .modal-panel{width:min(900px,calc(100vw - 28px));max-width:900px;max-height:calc(100vh - 24px);overflow:hidden;display:flex;flex-direction:column}.as-modal .modal-body{overflow:auto}.as-create-form{gap:14px}.as-source-info{padding:12px;border:1px solid #dfe5eb;border-radius:12px;background:#f8fafc}.as-source-empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:76px;color:#758398;font-size:13px}.as-source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.as-source-grid>div{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:9px;background:#fff;border:1px solid #e8edf2;min-width:0}.as-source-grid>div.is-wide{grid-column:span 2}.as-source-grid span{font-size:11px;font-weight:700;color:#748297}.as-source-grid strong{font-size:13px;color:#293f55;overflow-wrap:anywhere}.as-source-grid small{font-size:11px;color:#7b8797}.as-photo-selection{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;padding:8px 10px;border:1px dashed #cdd6df;border-radius:9px;background:#fbfcfd;color:#738196;font-size:12px}.as-photo-selection span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#eef3f8;color:#45586e}
.as-detail-host{margin-top:18px}.as-detail-panel{scroll-margin-top:90px}.as-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:13px;border-bottom:1px solid #e4e9ee}.as-detail-head>div{min-width:0}.as-detail-head span{font-size:11px;font-weight:800;color:#738196}.as-detail-head h2{margin:3px 0 4px;font-size:20px;color:#22384d}.as-detail-head p{margin:0;color:#6c7b8d;font-size:12px}.as-detail-state{display:grid;grid-template-columns:auto minmax(150px,.6fr) minmax(250px,1.5fr);align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid #dfe7ee;border-radius:12px;background:#f8fafc}.as-detail-state>div{display:flex;gap:6px}.as-detail-state>strong{font-size:14px;color:#263d53}.as-detail-state>span{font-size:13px;color:#40556a;font-weight:700}.as-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.as-detail-grid>div,.as-detail-notes,.as-detail-assignment{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid #e2e8ee;border-radius:10px;background:#fff}.as-detail-grid span,.as-detail-notes span,.as-detail-assignment span{font-size:11px;font-weight:800;color:#748297}.as-detail-grid strong,.as-detail-notes strong,.as-detail-assignment strong{font-size:13px;color:#2a4055}.as-detail-notes,.as-detail-assignment{margin-top:9px}.as-detail-assignment small{font-size:11px;color:#788598}.as-detail-photo-section{margin-top:14px;padding-top:13px;border-top:1px solid #e5eaf0}.as-detail-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.as-detail-section-title span{font-size:12px;font-weight:800;color:#68778a}.as-detail-section-title strong{font-size:14px;color:#253b51}.as-detail-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.as-detail-photo{display:flex;flex-direction:column;gap:7px;padding:8px;border:1px solid #dde5ec;border-radius:10px;background:#fff;min-width:0}.as-detail-photo-image{position:relative;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:#eef2f5}.as-detail-photo-image img{width:100%;height:100%;object-fit:cover;display:block}.as-detail-photo-image .as-photo-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8492a2}.as-detail-photo>div:not(.as-detail-photo-image){display:flex;flex-direction:column;gap:2px}.as-detail-photo strong{font-size:12px;color:#30465c}.as-detail-photo span{font-size:10px;color:#7b8796;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-no-photo{grid-column:1/-1;padding:22px;border:1px dashed #d4dde5;border-radius:10px;text-align:center;color:#7b8796;font-size:12px}
@media(max-width:1100px){.as-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.as-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.as-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.as-detail-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.as-detail-state{grid-template-columns:1fr}}
@media(max-width:700px){.as-summary-grid{grid-template-columns:1fr 1fr;gap:8px}.as-summary-card{padding:12px}.as-summary-card strong{font-size:21px}.as-source-grid{grid-template-columns:1fr}.as-source-grid>div.is-wide{grid-column:auto}.as-detail-head{flex-direction:column}.as-detail-grid{grid-template-columns:1fr}.as-detail-photo-grid{grid-template-columns:1fr}.as-modal .modal-panel{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}}
.installation-completed-row-actions{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
@media(max-width:700px){.installation-completed-row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end}}

/* v226 A/S schedule / engineer assignment */
.as-summary-grid-v226{grid-template-columns:repeat(5,minmax(0,1fr))}
.as-assignment-cell,.as-schedule-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.as-assignment-cell strong,.as-schedule-cell strong{font-weight:800;color:#2b4055}.as-assignment-cell small,.as-schedule-cell small,.as-schedule-cell span{font-size:11px;color:#758398}.as-schedule-empty{font-size:12px;color:#8895a4}
.as-detail-grid-v226{grid-template-columns:repeat(4,minmax(0,1fr))}
.as-workflow-card{margin-top:12px;padding:14px;border:1px solid #dbe5ec;border-radius:12px;background:#f8fbfd}.as-workflow-card.is-warning{border-color:#efd19b;background:#fffaf1}.as-workflow-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.as-workflow-card-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}.as-workflow-card-head span{font-size:11px;font-weight:800;color:#708096}.as-workflow-card-head strong{font-size:15px;color:#263e54}.as-workflow-card-head small{font-size:12px;color:#6f7f91;line-height:1.4}
.as-company-assign-row{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;margin-top:12px}.as-company-assign-row select{min-height:38px}
.as-schedule-form{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(130px,.6fr) minmax(220px,1fr) minmax(0,1.8fr) auto;gap:9px;align-items:end;margin-top:12px}.as-schedule-form .field{margin:0}.as-schedule-form .field.is-wide{min-width:0}.as-schedule-form .field span{font-size:11px;font-weight:800;color:#68798d}.as-schedule-form input,.as-schedule-form select{min-height:38px}.as-schedule-form>button{min-height:38px;white-space:nowrap}.as-engineer-availability{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:32px;padding:7px 10px;border-radius:8px;background:#eef5f8;color:#65778a;font-size:11px}.as-engineer-availability strong{color:#2c5c6b;font-size:12px}.as-engineer-availability span{font-size:11px}
.as-schedule-history{margin-top:14px;padding-top:13px;border-top:1px solid #e5eaf0}.as-schedule-history-row{display:grid;grid-template-columns:28px 150px 120px minmax(180px,1fr) 210px;gap:8px;align-items:center;padding:9px 10px;border:1px solid #e3e9ef;border-radius:9px;background:#fff;margin-top:7px}.as-schedule-history-row>span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#eef3f7;color:#607388;font-size:11px;font-weight:800}.as-schedule-history-row>strong,.as-schedule-history-row>b{font-size:12px;color:#2d4358}.as-schedule-history-row>p{margin:0;font-size:12px;color:#526578;overflow-wrap:anywhere}.as-schedule-history-row>small{font-size:10px;color:#8390a0;text-align:right}
@media(max-width:1300px){.as-summary-grid-v226{grid-template-columns:repeat(3,minmax(0,1fr))}.as-detail-grid-v226{grid-template-columns:repeat(3,minmax(0,1fr))}.as-schedule-form{grid-template-columns:1fr 1fr 1.2fr}.as-schedule-form .field.is-wide{grid-column:1/3}.as-schedule-form>button{grid-column:3}.as-schedule-history-row{grid-template-columns:28px 140px 110px minmax(160px,1fr)}.as-schedule-history-row>small{grid-column:2/-1;text-align:left}}
@media(max-width:900px){.as-summary-grid-v226{grid-template-columns:repeat(2,minmax(0,1fr))}.as-detail-grid-v226{grid-template-columns:repeat(2,minmax(0,1fr))}.as-schedule-form{grid-template-columns:1fr 1fr}.as-schedule-form .field.is-wide{grid-column:1/-1}.as-schedule-form>button{grid-column:1/-1}.as-schedule-history-row{grid-template-columns:28px 1fr 1fr}.as-schedule-history-row>p{grid-column:2/-1}.as-schedule-history-row>small{grid-column:2/-1}.as-workflow-card-head{align-items:flex-start}}
@media(max-width:700px){.as-summary-grid-v226{grid-template-columns:1fr 1fr}.as-detail-grid-v226{grid-template-columns:1fr}.as-company-assign-row,.as-schedule-form{grid-template-columns:1fr}.as-schedule-form .field.is-wide,.as-schedule-form>button{grid-column:auto}.as-workflow-card-head{flex-direction:column}.as-workflow-card-head>button{width:100%}.as-schedule-history-row{grid-template-columns:28px 1fr}.as-schedule-history-row>strong,.as-schedule-history-row>b,.as-schedule-history-row>p,.as-schedule-history-row>small{grid-column:2}}


/* WPPEI CRM v227 - A/S intake form label/input separation */
.as-create-form .as-create-control-grid{gap:13px}
.as-create-form .as-create-control{display:flex;flex-direction:column;gap:7px;min-width:0}
.as-create-form .as-create-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.as-create-form .as-create-label{display:block;margin:0;color:#394f64;font-size:13px;font-weight:800;line-height:1.35;white-space:normal}
.as-create-form .as-create-label strong{color:#b64e45;font-weight:900}
.as-create-form .as-create-help{color:#758398;font-size:11px;font-weight:650;line-height:1.4;text-align:right;white-space:normal}
.as-create-form .as-create-input,.as-create-form .as-create-textarea,.as-create-form .as-create-file{width:100%;margin:0;box-sizing:border-box}
.as-create-form .as-create-input{min-height:46px;padding:10px 38px 10px 13px}
.as-create-form .as-create-textarea{min-height:96px;padding:12px 13px;line-height:1.55;resize:vertical;white-space:pre-wrap;overflow-wrap:anywhere}
.as-create-form .as-create-summary{min-height:72px}
.as-create-form .as-create-file{min-height:48px;padding:8px 10px;overflow:visible}
.as-create-form .as-create-file::file-selector-button{margin-right:10px;min-height:30px;padding:5px 10px;border:1px solid #cfd8e1;border-radius:7px;background:#f7f9fb;color:#354b60;font-weight:750;cursor:pointer}
@media(max-width:700px){.as-create-form .as-create-label-row{align-items:flex-start;flex-direction:column;gap:3px}.as-create-form .as-create-help{text-align:left}}

/* WPPEI CRM v229 - A/S completed installation searchable picker */
.as-installation-picker{position:relative;z-index:12}
.as-installation-search-box{position:relative;display:flex;align-items:center;min-width:0}
.as-installation-search-box>i{position:absolute;left:13px;z-index:1;color:#708198;font-size:13px;pointer-events:none}
.as-create-form .as-installation-search-input{width:100%;min-height:46px;margin:0;padding:10px 42px 10px 38px;box-sizing:border-box;font-size:13px;font-weight:700;color:#31485e}
.as-installation-search-input::placeholder{font-weight:600;color:#8794a3}
.as-installation-search-clear{position:absolute;right:8px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:#8390a0;cursor:pointer}
.as-installation-search-clear:hover{background:#eef3f7;color:#435a70}
.as-installation-results{position:absolute;left:0;right:0;top:73px;z-index:40;padding:7px;border:1px solid #cfd9e3;border-radius:11px;background:#fff;box-shadow:0 14px 34px rgba(32,51,70,.16)}
.as-installation-results[hidden]{display:none}
.as-installation-search-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 8px 7px;color:#758398;font-size:11px;font-weight:750}
.as-installation-search-head strong{color:#40566c;font-size:11px}
.as-installation-search-list{max-height:286px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.as-installation-search-item{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:8px;background:#fff;text-align:left;cursor:pointer;color:#2f455a}
.as-installation-search-item:hover,.as-installation-search-item:focus-visible{border-color:#c8d7e5;background:#f3f7fb;outline:none}
.as-installation-search-main{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.as-installation-search-main strong{font-size:13px;font-weight:850;color:#253d53}
.as-installation-search-main b{font-size:13px;font-weight:800;color:#314b62;overflow:hidden;text-overflow:ellipsis}
.as-installation-search-meta{min-width:0;color:#778597;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.as-installation-search-empty,.as-installation-search-more{padding:12px 10px;color:#748397;font-size:12px;line-height:1.45;text-align:center}
.as-installation-search-more{padding:8px 10px 5px;border-top:1px solid #eef2f5;font-size:10px}
.as-installation-search-guide{color:#758398;font-size:11px;font-weight:650;line-height:1.4}
@media(max-width:700px){
  .as-installation-results{top:73px}
  .as-installation-search-item{align-items:flex-start;flex-direction:column;gap:3px}
  .as-installation-search-main{width:100%}
  .as-installation-search-meta{width:100%;text-align:left}
}
/* v230: A/S 접수 메모 영역 1행 2열 배치 */
.as-create-form .as-create-notes-grid{align-items:stretch;gap:13px}
.as-create-form .as-create-notes-grid .as-create-control{height:100%}
.as-create-form .as-create-notes-grid .as-create-textarea{min-height:112px;height:112px}
@media(max-width:700px){
  .as-create-form .as-create-notes-grid{grid-template-columns:1fr}
  .as-create-form .as-create-notes-grid .as-create-textarea{height:auto;min-height:96px}
}

/* v241 - 엔지니어 오늘 작업(A/S): 정보 4칸 1행 + 중앙 시작 버튼 */
@media(min-width:1281px){
  .engineer-after-sales-card.is-today-compact{
    display:grid;
    grid-template-columns:minmax(260px,1.2fr) minmax(190px,.72fr) minmax(320px,1.25fr) minmax(300px,1.1fr);
    grid-template-areas:
      "head head head head"
      "address product notes issue"
      ". actions actions .";
    column-gap:8px;
    row-gap:8px;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-card-head-compact{grid-area:head}
  .engineer-after-sales-card.is-today-compact .engineer-job-info-grid,
  .engineer-after-sales-card.is-today-compact .engineer-job-context-grid{display:contents}
  .engineer-after-sales-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-after-sales-card.is-today-compact .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-after-sales-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes,
  .engineer-after-sales-card.is-today-compact .engineer-job-context-grid>.engineer-job-notes:only-child{
    grid-area:notes;
    grid-column:auto;
    grid-row:auto;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{grid-area:issue}
  .engineer-after-sales-card.is-today-compact .engineer-job-info,
  .engineer-after-sales-card.is-today-compact .engineer-job-notes,
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note{
    min-height:42px;
    margin-top:0;
    padding:7px 10px;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-info,
  .engineer-after-sales-card.is-today-compact .engineer-job-notes{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-info .engineer-job-label,
  .engineer-after-sales-card.is-today-compact .engineer-job-notes .engineer-job-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-info strong,
  .engineer-after-sales-card.is-today-compact .engineer-job-notes p{
    min-width:0;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-start;
  }
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note>div{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1 1 auto;
  }
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note span{flex:0 0 auto;white-space:nowrap}
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note strong,
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note>span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-actions{
    grid-area:actions;
    grid-column:2 / 4;
    grid-row:3;
    margin-top:0;
    width:100%;
    min-width:0;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-actions.is-centered-start{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-actions.is-centered-start>.engineer-primary-action{
    width:min(100%, 360px);
    flex:0 1 360px;
    min-height:46px;
  }
}

/* v242 - 오늘 A/S 카드: 4개 정보영역 폭 재조정 + 시작 버튼 폭 축소 */
@media(min-width:1281px){
  .engineer-after-sales-card.is-today-compact{
    grid-template-columns:minmax(300px,1.05fr) minmax(210px,.68fr) minmax(360px,1.12fr) minmax(440px,1.42fr);
  }

  /* 4개 정보 카드의 내용은 말줄임표로 자르지 않고 필요 시 자연스럽게 표시 */
  .engineer-after-sales-card.is-today-compact .engineer-job-info strong,
  .engineer-after-sales-card.is-today-compact .engineer-job-notes p{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.35;
  }

  /* A/S 유형: 유형명 + 증상 문구가 모두 보이도록 우측 카드 공간을 적극 활용 */
  .engineer-after-sales-card.is-today-compact .engineer-job-context-grid>.engineer-revisit-note{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:10px;
  }
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note>div{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:max-content;
    flex:none;
  }
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note>div>span,
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note>div>strong{
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
  }
  .engineer-after-sales-card.is-today-compact .engineer-revisit-note>span{
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.35;
  }

  .engineer-after-sales-card.is-today-compact .engineer-job-actions.is-centered-start>.engineer-primary-action{
    width:min(100%, 300px);
    flex:0 1 300px;
  }
}


/* v243 - 오늘 A/S 카드: 시작 버튼 폭 추가 축소 + 카드 정중앙 배치 */
@media(min-width:1281px){
  .engineer-after-sales-card.is-today-compact .engineer-job-actions{
    grid-column:1 / -1;
    grid-row:3;
    width:100%;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-actions.is-centered-start{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
  }
  .engineer-after-sales-card.is-today-compact .engineer-job-actions.is-centered-start>.engineer-primary-action{
    width:min(100%, 280px);
    flex:0 1 280px;
    margin:0 auto;
  }
}

/* v244 - 오늘 A/S 진행 중: 하단 2개 버튼 중앙 정렬 + 버튼 간격 확대 */
.engineer-after-sales-card.is-today-compact .engineer-after-sales-progress-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.engineer-after-sales-card.is-today-compact .engineer-after-sales-progress-actions>.btn{
  flex:0 0 auto;
}
@media(max-width:640px){
  .engineer-after-sales-card.is-today-compact .engineer-after-sales-progress-actions{
    width:100%;
    gap:12px;
  }
  .engineer-after-sales-card.is-today-compact .engineer-after-sales-progress-actions>.btn{
    flex:1 1 0;
  }
}

/* v245 - A/S 예외 처리: 현장 사진 안내문구를 라벨 상단 한 줄에 표시 */
.after-sales-exception-form .after-sales-evidence-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.after-sales-exception-form .after-sales-evidence-label>small{
  flex:0 0 auto;
  margin:0;
  color:#7d8997;
  font-size:10px;
  font-weight:500;
  line-height:1.35;
  white-space:nowrap;
}


/* v246 - 완료 작업(설치): 주소/제품/전달사항 3개 카드를 1행 배치 */
@media(min-width:1281px){
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact){
    display:grid;
    grid-template-columns:minmax(300px,1.2fr) minmax(210px,.65fr) minmax(330px,1.25fr);
    grid-template-areas:
      "head head head"
      "address product notes"
      "actions actions actions";
    column-gap:8px;
    row-gap:10px;
  }
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-card-head{grid-area:head}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info-grid,
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-context-grid{display:contents}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info-grid>.engineer-job-info:first-child{grid-area:address}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info-grid>.engineer-job-info:nth-child(2){grid-area:product}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-context-grid>.engineer-job-notes,
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact)>.engineer-job-notes{grid-area:notes;margin-top:0}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info,
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-notes{min-height:52px;margin-top:0;padding:10px 12px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-actions{grid-area:actions;grid-column:1 / -1;margin-top:0}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-completed-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-completed-document-actions{justify-content:flex-end}
}

/* v247 - A/S 전용 체크리스트 */
.engineer-after-sales-workflow-actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.engineer-as-checklist-strip{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:center;gap:14px;width:min(100%,760px);padding:10px 12px;border:1px solid #dbe3ea;border-radius:12px;background:#f8fafc;box-sizing:border-box}
.engineer-as-checklist-strip.is-complete{border-color:#cfe3d6;background:#f3f8f5}
.engineer-as-checklist-progress{min-width:0}.engineer-as-checklist-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;color:#5d6e80;font-size:11px;font-weight:800}.engineer-as-checklist-progress>div:first-child span{display:inline-flex;align-items:center;gap:6px}.engineer-as-checklist-progress>div:first-child strong{color:#32475b;font-size:12px}.engineer-as-checklist-progress-bar{height:6px;overflow:hidden;border-radius:999px;background:#e3e8ee}.engineer-as-checklist-progress-bar>span{display:block;height:100%;border-radius:inherit;background:#4055c8;transition:width .18s ease}.engineer-as-checklist-strip.is-complete .engineer-as-checklist-progress-bar>span{background:#4d8a68}.engineer-as-checklist-strip>.btn{min-width:190px;justify-content:center}
.engineer-after-sales-workflow-actions .engineer-after-sales-progress-actions{margin-top:0}

.after-sales-checklist-modal .modal-panel{max-width:980px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;overflow:hidden}
.after-sales-checklist-modal .modal-body{overflow-y:auto;padding:18px 22px 20px}
.as-checklist-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px;padding:12px 14px;border:1px solid #dce4eb;border-radius:12px;background:#f8fafc}.as-checklist-head>div:first-child{min-width:0}.as-checklist-head strong{display:block;color:#2c4055;font-size:14px}.as-checklist-head span{display:block;margin-top:3px;color:#7b8998;font-size:11px}.as-checklist-head-progress{flex:0 0 auto;text-align:right}.as-checklist-head-progress span{margin:0}.as-checklist-head-progress strong{margin-top:2px;color:#4055c8;font-size:18px}
.as-checklist-guide{margin-bottom:12px}.as-checklist-guide b{color:#b44a3f}
.as-checklist-form{display:flex;flex-direction:column;gap:0}.as-checklist-table-head,.as-checklist-row{display:grid;grid-template-columns:minmax(300px,1.55fr) minmax(130px,.5fr) minmax(240px,1fr);align-items:center;gap:10px}.as-checklist-table-head{padding:7px 10px;color:#7d8997;font-size:10px;font-weight:800}.as-checklist-row{padding:8px 10px;border-top:1px solid #edf0f3}.as-checklist-row:first-child{border-top:1px solid #dfe5eb}.as-checklist-row.is-abnormal{background:#fff8f5}.as-checklist-item-copy{display:flex;align-items:center;gap:10px;min-width:0}.as-checklist-item-copy>span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:#eef2f6;color:#6e7c8b;font-size:10px;font-weight:900}.as-checklist-item-copy strong{min-width:0;color:#33485d;font-size:12px;line-height:1.35}.as-checklist-row.is-abnormal .as-checklist-item-copy>span{background:#fff0ea;color:#b44f3e}.as-checklist-row .field{min-height:38px;font-size:12px}.as-checklist-actions{margin-top:16px}
@media(max-width:760px){.engineer-as-checklist-strip{grid-template-columns:1fr}.engineer-as-checklist-strip>.btn{width:100%;min-width:0}.after-sales-checklist-modal .modal-body{padding:14px}.as-checklist-head{align-items:flex-start}.as-checklist-table-head{display:none}.as-checklist-row{grid-template-columns:1fr;gap:7px;padding:12px 8px}.as-checklist-item-copy{margin-bottom:2px}.as-checklist-row .field{width:100%}.as-checklist-actions{display:grid;grid-template-columns:1fr;gap:8px}.as-checklist-actions .btn{width:100%}}


/* v248 - 완료 작업 카드: 설치/A/S 헤더·폰트 통일 */
@media(min-width:1281px){
  /* 설치 완료 헤더를 A/S 완료 헤더와 동일한 시간-고객-상태 구조로 배치 */
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-card-head-completed{
    display:grid;
    grid-template-columns:auto minmax(260px,1fr) auto;
    grid-template-areas:"time customer state";
    align-items:center;
    gap:16px;
    padding-bottom:10px;
  }
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-card-head-completed .engineer-job-time{grid-area:time}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-card-head-completed .engineer-job-customer-inline{
    grid-area:customer;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
    padding:0 4px;
  }
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-card-head-completed .engineer-job-customer-inline>div{
    display:flex;
    align-items:baseline;
    gap:9px;
    min-width:0;
  }
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-card-head-completed .engineer-job-head-copy{grid-area:state}

  /* A/S 완료 카드의 가독성 기준과 동일한 폰트 체계 */
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-time strong{font-size:28px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-time span{font-size:13px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-head-copy small{font-size:11px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-state{font-size:12px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-label{font-size:12px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-customer-inline strong{font-size:18px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-phone-link{font-size:13px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info strong{font-size:14px}
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-notes p{font-size:13px}
}

/* A/S 완료 요약 문구는 기존 완료 요약보다 한 단계 크게 */
.engineer-after-sales-card .engineer-complete-summary{
  font-size:12px;
}

@media(max-width:1279px){
  .engineer-job-card.is-installation-completed-card .engineer-job-card-head-completed{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"time state" "customer customer";
    gap:8px 14px;
  }
  .engineer-job-card.is-installation-completed-card .engineer-job-card-head-completed .engineer-job-time{grid-area:time}
  .engineer-job-card.is-installation-completed-card .engineer-job-card-head-completed .engineer-job-customer-inline{grid-area:customer;justify-content:flex-start;padding:0}
  .engineer-job-card.is-installation-completed-card .engineer-job-card-head-completed .engineer-job-head-copy{grid-area:state}
}
@media(max-width:640px){
  .engineer-job-card.is-installation-completed-card .engineer-job-card-head-completed .engineer-job-customer-inline{align-items:stretch;flex-direction:column}
  .engineer-job-card.is-installation-completed-card .engineer-job-card-head-completed .engineer-job-customer-inline .engineer-phone-link{width:100%}
}


/* v249 - 완료 작업 카드 배치 통일 */
@media(min-width:1281px){
  /* A/S 완료: 고객명 바로 오른쪽에 전화번호 배치 */
  .engineer-after-sales-card.is-completed .engineer-job-customer-inline{
    justify-content:flex-start;
    gap:12px;
  }
  .engineer-after-sales-card.is-completed .engineer-job-customer-inline>div{
    flex:0 0 auto;
  }
  .engineer-after-sales-card.is-completed .engineer-job-customer-inline .engineer-phone-link{
    flex:0 0 auto;
    width:auto;
  }

  /* 설치 완료: 설치 주소 / 제품·수량 / 현장 전달사항을 각 소카드 안에서 1행 표시 */
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info,
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-notes{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
  }
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info .engineer-job-label,
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-notes .engineer-job-label{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-info strong,
  .engineer-job-card.is-installation-completed-card:not(.is-today-compact) .engineer-job-notes p{
    min-width:0;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* v250 - 전역 알림: 확인은 알림만 처리, 보기는 관련 화면 이동 */
.notification-panel{width:min(440px,calc(100vw - 28px))}
.notification-item{padding:13px 14px;cursor:default;align-items:center}
.notification-item:hover{background:#fff}
.notification-item.is-unread:hover{background:#f6f7ff}
.notification-item-copy{flex:1 1 auto}
.notification-item-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}
.notification-item-actions .btn{min-width:48px;min-height:30px;padding:0 9px;font-size:10px}
.notification-item-actions .btn:disabled{opacity:.5;cursor:not-allowed}
.notification-confirm-bar{width:min(590px,calc(100vw - 32px));grid-template-columns:38px minmax(0,1fr) auto}
.notification-confirm-actions{display:flex;align-items:center;gap:9px}
.notification-confirm-actions .btn{min-width:58px;justify-content:center}
@media(max-width:640px){
  .notification-item{align-items:flex-start;flex-wrap:wrap}
  .notification-item-copy{flex:1 1 calc(100% - 48px)}
  .notification-item-actions{width:100%;justify-content:flex-end;margin-left:43px}
  .notification-confirm-bar{grid-template-columns:34px minmax(0,1fr)}
  .notification-confirm-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%}
  .notification-confirm-actions .btn{width:100%}
}

/* v250 - 오늘 A/S 진행 중: 체크리스트와 현장 조치 버튼을 한 행에 배치 */
@media(min-width:1281px){
  .engineer-after-sales-card.is-today-compact .engineer-after-sales-workflow-actions{
    display:grid;
    grid-template-columns:minmax(520px,1fr) auto;
    align-items:center;
    gap:22px;
    width:min(100%,1120px);
    margin:0 auto;
  }
  .engineer-after-sales-card.is-today-compact .engineer-as-checklist-strip{
    width:100%;
    min-width:0;
  }
  .engineer-after-sales-card.is-today-compact .engineer-after-sales-progress-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    width:auto;
    max-width:none;
    margin:0;
    white-space:nowrap;
  }
}
@media(max-width:1280px){
  .engineer-after-sales-card.is-today-compact .engineer-after-sales-workflow-actions{display:flex;flex-direction:column}
}


/* v251 - A/S 전용 체크리스트: 모달 폭/열 비율/행 높이 압축 */
.modal-panel.after-sales-checklist-modal{
  width:min(860px,calc(100vw - 28px));
  max-width:860px;
  max-height:calc(100vh - 16px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-panel.after-sales-checklist-modal .modal-body{
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 16px 14px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-head{
  gap:14px;
  margin-bottom:8px;
  padding:9px 12px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-head strong{font-size:13px}
.modal-panel.after-sales-checklist-modal .as-checklist-head span{font-size:10px}
.modal-panel.after-sales-checklist-modal .as-checklist-head-progress strong{font-size:17px}
.modal-panel.after-sales-checklist-modal .as-checklist-guide{
  margin-bottom:7px;
  padding-top:7px;
  padding-bottom:7px;
  font-size:11px;
  line-height:1.45;
}
.modal-panel.after-sales-checklist-modal .as-checklist-table-head,
.modal-panel.after-sales-checklist-modal .as-checklist-row{
  grid-template-columns:minmax(0,1fr) 118px minmax(190px,230px);
  gap:8px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-table-head{
  padding:4px 8px;
  font-size:9.5px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-row{
  min-height:38px;
  padding:3px 8px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-item-copy{gap:8px}
.modal-panel.after-sales-checklist-modal .as-checklist-item-copy>span{
  width:24px;
  height:24px;
  flex-basis:24px;
  border-radius:7px;
  font-size:9px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-item-copy strong{
  font-size:11.5px;
  line-height:1.25;
}
.modal-panel.after-sales-checklist-modal .as-checklist-row .field{
  width:100%;
  min-height:32px;
  height:32px;
  padding-top:4px;
  padding-bottom:4px;
  font-size:11px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-note{padding-left:9px;padding-right:9px}
.modal-panel.after-sales-checklist-modal .as-checklist-actions{
  margin-top:9px;
  gap:8px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-actions .btn{
  min-height:36px;
  padding-top:7px;
  padding-bottom:7px;
}
@media(max-width:760px){
  .modal-panel.after-sales-checklist-modal{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 12px);
  }
  .modal-panel.after-sales-checklist-modal .modal-body{padding:11px 12px 12px}
  .modal-panel.after-sales-checklist-modal .as-checklist-table-head{display:none}
  .modal-panel.after-sales-checklist-modal .as-checklist-row{
    grid-template-columns:minmax(0,1fr) 108px minmax(150px,.8fr);
    gap:6px;
    padding:4px 6px;
  }
  .modal-panel.after-sales-checklist-modal .as-checklist-row .field{
    min-width:0;
    height:31px;
    min-height:31px;
  }
  .modal-panel.after-sales-checklist-modal .as-checklist-actions{
    display:flex;
    justify-content:flex-end;
    gap:7px;
  }
  .modal-panel.after-sales-checklist-modal .as-checklist-actions .btn{width:auto}
}
@media(max-width:560px){
  .modal-panel.after-sales-checklist-modal .as-checklist-row{
    grid-template-columns:minmax(0,1fr) 102px minmax(125px,.72fr);
  }
  .modal-panel.after-sales-checklist-modal .as-checklist-item-copy strong{font-size:10.5px}
  .modal-panel.after-sales-checklist-modal .as-checklist-row .field{font-size:10.5px}
}


/* v252 - A/S 전용 체크리스트: 점검항목 여백 축소 + 모달 폭 재조정 */
@media(min-width:761px){
  .modal-panel.after-sales-checklist-modal{
    width:min(720px,calc(100vw - 28px));
    max-width:720px;
  }
  .modal-panel.after-sales-checklist-modal .as-checklist-table-head,
  .modal-panel.after-sales-checklist-modal .as-checklist-row{
    grid-template-columns:minmax(250px,1fr) 112px 210px;
    gap:7px;
  }
}

/* v253 - A/S 체크리스트 담당 엔지니어 전자서명 */
.modal-panel.after-sales-checklist-modal .as-checklist-engineer-signature{
  display:grid;
  grid-template-columns:155px minmax(0,1fr);
  gap:10px;
  align-items:stretch;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid #d9e2ea;
  border-radius:10px;
  background:#f8fafc;
}
.modal-panel.after-sales-checklist-modal .as-checklist-engineer-signature.is-signed{
  border-color:#c8ded1;
  background:#f4faf6;
}
.modal-panel.after-sales-checklist-modal .as-checklist-engineer-signature.is-locked{
  background:#f6f8fa;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-identity{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  gap:3px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-identity>span{
  color:#758496;
  font-size:9.5px;
  font-weight:800;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-identity>strong{
  color:#2b4055;
  font-size:12.5px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-identity>small{
  color:#7d8a98;
  font-size:9.5px;
  line-height:1.35;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-pad-wrap{min-width:0}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-head>span{
  color:#43566a;
  font-size:10px;
  font-weight:800;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-tools{
  display:flex;
  align-items:center;
  gap:5px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-tools .btn{
  min-height:27px;
  padding:4px 8px;
  font-size:9.5px;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-canvas-box{
  position:relative;
  min-width:0;
}
.modal-panel.after-sales-checklist-modal #as-engineer-signature-pad{
  display:block;
  width:100%;
  height:82px;
  border:1px solid #cfd9e2;
  border-radius:8px;
  background:#fff;
  touch-action:none;
  cursor:crosshair;
}
.modal-panel.after-sales-checklist-modal .as-checklist-engineer-signature.is-signed #as-engineer-signature-pad{cursor:default}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-lock{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:8px;
  background:rgba(246,248,250,.9);
  color:#7b8794;
  font-size:10px;
  font-weight:700;
}
.modal-panel.after-sales-checklist-modal .as-checklist-signature-lock[hidden]{display:none}
@media(max-width:620px){
  .modal-panel.after-sales-checklist-modal .as-checklist-engineer-signature{grid-template-columns:1fr}
  .modal-panel.after-sales-checklist-modal .as-checklist-signature-identity{padding-bottom:2px}
  .modal-panel.after-sales-checklist-modal .as-checklist-signature-head{align-items:flex-start;flex-direction:column}
  .modal-panel.after-sales-checklist-modal #as-engineer-signature-pad{height:76px}
}

/* v259 - A/S final regression UI: lifecycle summary + detail progress */
.as-summary-grid-v259{
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.as-workflow-progress{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #dce4eb;
  border-radius:12px;
  background:#fbfcfd;
}
.as-workflow-progress-steps{
  display:grid;
  grid-template-columns:auto 18px auto 18px auto 18px auto 18px auto;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.as-workflow-progress-steps>i{
  color:#aab4c0;
  font-size:10px;
  text-align:center;
}
.as-workflow-progress-step{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#7c8998;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.as-workflow-progress-step>span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  background:#e9eef3;
  color:#748294;
  font-size:10px;
  font-weight:900;
}
.as-workflow-progress-step.is-done{color:#547161}
.as-workflow-progress-step.is-done>span{background:#dfeee5;color:#3c7254}
.as-workflow-progress-step.is-current{color:#2e4054}
.as-workflow-progress-step.is-current>span{background:#3f54c7;color:#fff;box-shadow:0 0 0 3px rgba(63,84,199,.10)}
.as-workflow-progress.has-exception .as-workflow-progress-step.is-current>span{background:#b97827;box-shadow:0 0 0 3px rgba(185,120,39,.12)}
.as-workflow-progress-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #eadfcf;
  color:#7b5a2c;
  font-size:11px;
  line-height:1.45;
}
.as-workflow-progress-note>i{color:#b97827}
.as-workflow-progress-note>strong{flex:0 0 auto}
.as-workflow-progress-note>span{min-width:0;color:#746958}
@media(max-width:1100px){
  .as-workflow-progress{overflow-x:auto}
  .as-workflow-progress-steps{justify-content:start;min-width:720px}
}
@media(max-width:700px){
  .as-summary-grid-v259{grid-template-columns:1fr 1fr}
  .as-workflow-progress-note{align-items:flex-start;flex-wrap:wrap}
  .as-workflow-progress-note>span{flex-basis:100%;padding-left:20px}
}


/* v265 - A/S final UI / narrow-screen polish */
.as-detail-final-guide{margin-top:12px}
.as-detail-final-guide.is-completed{border-color:#cfe0d6;background:#f5faf7;color:#456455}

@media(max-width:900px){
  .as-completion-summary-panel .as-detail-section-title{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .as-completion-summary-panel .btn-group{
    width:100%;
  }
  .as-completion-summary-panel .btn-group .btn{
    flex:1 1 180px;
    justify-content:center;
  }
}

@media(max-width:700px){
  .as-detail-head>.btn{
    width:100%;
    justify-content:center;
  }
  .as-completion-summary-panel .btn-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .as-completion-summary-panel .btn-group .btn{
    width:100%;
    min-width:0;
  }
  .mobile-card .btn-as-detail{
    width:100%;
    justify-content:center;
  }
  .as-workflow-progress{
    overflow:visible;
    padding:10px;
  }
  .as-workflow-progress-steps{
    display:grid;
    grid-template-columns:1fr;
    min-width:0;
    gap:6px;
  }
  .as-workflow-progress-steps>i{display:none}
  .as-workflow-progress-step{
    min-height:36px;
    padding:6px 9px;
    border:1px solid #e2e8ee;
    border-radius:9px;
    background:#fff;
    white-space:normal;
  }
  .as-workflow-progress-step.is-done{border-color:#d5e5db;background:#f6faf7}
  .as-workflow-progress-step.is-current{border-color:#ccd3f5;background:#f6f7ff}
  .as-workflow-progress.has-exception .as-workflow-progress-step.is-current{border-color:#ead7bd;background:#fffaf2}
  .as-workflow-progress-note>span{padding-left:0}
  .as-field-event-card{
    grid-template-columns:1fr!important;
  }
  .as-field-event-icon{
    width:36px!important;
    height:36px!important;
  }
  .as-field-event-copy>div{
    align-items:flex-start!important;
    flex-direction:column;
    gap:3px!important;
  }
}

@media(max-width:480px){
  .as-summary-grid-v259{grid-template-columns:1fr 1fr}
  .as-completion-summary-panel .btn-group{grid-template-columns:1fr}
}

/* ============================================================
   WPPEI CRM v266 - supply partner / HQ warehouse inventory
   ============================================================ */
.product-code-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.product-code-row .product-code-edit { min-height: 31px; padding: 0 9px; }

.model-component-panel { display: grid; gap: 15px; }
.model-component-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.model-component-toolbar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.model-component-toolbar .field { width: min(310px, 32vw); min-width: 210px; }
.model-component-table-wrap { overflow-x: auto; border: 1px solid #dfe4ea; border-radius: 11px; background: #fff; }
.model-component-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.model-component-table th,
.model-component-table td { padding: 12px 13px; border-bottom: 1px solid #edf0f3; text-align: left; font-size: 12px; vertical-align: middle; }
.model-component-table th { background: #f5f7f9; color: #68737e; font-size: 10px; font-weight: 800; white-space: nowrap; }
.model-component-table tr:last-child td { border-bottom: 0; }
.model-component-table td:nth-child(3),
.model-component-table td:nth-child(4),
.model-component-table th:nth-child(3),
.model-component-table th:nth-child(4) { text-align: center; }
.model-component-actions { text-align: right !important; white-space: nowrap; }
.component-placeholder-badge { display: inline-flex; margin-left: 7px; padding: 2px 5px; border: 1px solid #e1d5b2; border-radius: 4px; background: #faf6e9; color: #846d31; font-size: 8px; font-weight: 800; vertical-align: 1px; }
.component-enabled-check { display: inline-flex; align-items: center; gap: 8px; color: #394958; font-size: 12px; font-weight: 700; }
.component-enabled-check input { width: 17px; height: 17px; accent-color: #4255cf; }

.inventory-v266 { display: grid; gap: 14px; }
.inventory-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.inventory-summary-card { min-height: 112px; padding: 17px 18px; border: 1px solid #dce2e7; border-radius: 12px; background: #fff; }
.inventory-summary-card span { display: flex; align-items: center; gap: 7px; color: #687582; font-size: 11px; font-weight: 750; }
.inventory-summary-card strong { display: block; margin-top: 13px; color: #17222d; font-size: 27px; line-height: 1; }
.inventory-summary-card small { display: block; margin-top: 8px; color: #89939c; font-size: 10px; line-height: 1.4; }
.inventory-summary-card.is-alert strong { color: #a23b31; }
.inventory-summary-card.is-warning strong { color: #9a671f; }
.inventory-summary-card.is-good strong { color: #246c58; }
.inventory-tabs { display: flex; gap: 4px; padding: 4px; width: fit-content; border: 1px solid #dfe4e8; border-radius: 9px; background: #f4f6f8; }
.inventory-tab { min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: #65717c; font-size: 11px; font-weight: 800; cursor: pointer; }
.inventory-tab.is-active { background: #fff; color: #26384c; box-shadow: 0 1px 3px rgba(23,34,45,.12); }
.inventory-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.inventory-section-head h3 { margin: 0; color: #273542; font-size: 15px; }
.inventory-section-head p { margin: 4px 0 0; color: #75808a; font-size: 11px; }
.inventory-section-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.inventory-filter { min-width: 200px; max-width: 280px; }
.inventory-risk-badge,
.supply-status-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.inventory-risk-badge::before,
.supply-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.inventory-risk-normal { color: #166247; background: #eaf7f1; border-color: #cde9dc; }
.inventory-risk-below_safety,
.inventory-risk-order_review { color: #8c6219; background: #fff7df; border-color: #efdfa9; }
.inventory-risk-lead_time_risk { color: #a04422; background: #fff0e8; border-color: #f0c9b8; }
.inventory-risk-supply_shortage,
.inventory-risk-no_confirmed_supply { color: #9d2e36; background: #fff0f1; border-color: #efc9cd; }
.supply-status-confirmed { color: #166247; background: #eaf7f1; border-color: #cde9dc; }
.supply-status-pending_hq { color: #855f1b; background: #fff7df; border-color: #efdfa9; }
.supply-status-rejected { color: #9d2e36; background: #fff0f1; border-color: #efc9cd; }
.supply-status-none { color: #65717c; background: #f2f4f6; border-color: #dfe3e7; }
.supply-status-fresh { color: #166247; background: #eaf7f1; border-color: #cde9dc; }
.supply-status-current { color: #2d5f8a; background: #eef6fc; border-color: #cfe2f2; }
.supply-status-refresh_due { color: #855f1b; background: #fff7df; border-color: #efdfa9; }
.supply-status-outdated { color: #9d2e36; background: #fff0f1; border-color: #efc9cd; }
.supply-status-stock-warning { margin-left: 5px; color: #a04422; background: #fff0e8; border-color: #f0c9b8; }
.supply-change-state { display:flex; align-items:center; gap:8px; min-height:38px; padding:9px 11px; border:1px solid #dfe5ea; border-radius:8px; font-size:11px; font-weight:700; }
.supply-change-state.is-unchanged { color:#6d7882; background:#f7f9fa; }
.supply-change-state.is-changed { color:#3049b5; background:#f1f4ff; border-color:#cfd7ff; }
.field.is-supply-changed { border-color:#6c7ee8; background:#f8f9ff; box-shadow:0 0 0 2px rgba(66,85,207,.08); }
.availability-auto-date { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 12px; padding:11px 13px; border:1px solid #dfe5ea; border-radius:9px; background:#f8fafb; }
.availability-auto-date span { color:#6e7b87; font-size:10px; font-weight:800; }
.availability-auto-date strong { color:#273542; font-size:13px; }
.availability-auto-date small { grid-column:1 / -1; color:#7f8992; font-size:10px; line-height:1.45; }
.inventory-availability-v292 td { vertical-align:middle; }
.inventory-part-cell strong { display: block; color: #243340; }
.inventory-part-cell small { display: block; margin-top: 3px; color: #7a8690; font-size: 10px; }
.inventory-num { font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; }
.inventory-num.is-short { color: #a13b32; }
.inventory-action-stack { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.inventory-note { padding: 11px 13px; border: 1px solid #dfe5ea; border-radius: 9px; background: #f8fafb; color: #65717c; font-size: 11px; line-height: 1.55; }
.inventory-note strong { color: #334454; }
.inventory-empty-setup { display: grid; place-items: center; min-height: 260px; padding: 30px; text-align: center; }
.inventory-empty-setup i { font-size: 30px; color: #a4adb6; }
.inventory-empty-setup h3 { margin: 15px 0 7px; color: #344454; }
.inventory-empty-setup p { max-width: 560px; margin: 0; color: #76818b; font-size: 12px; line-height: 1.7; }
.supplier-management-list { display: grid; gap: 8px; }
.supplier-management-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(160px, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #e0e5ea; border-radius: 10px; background: #fff; }
.supplier-management-row strong,
.supplier-management-row small { display: block; }
.supplier-management-row small { margin-top: 3px; color: #7c8791; font-size: 10px; }
.supplier-management-actions { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.supplier-component-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 360px; overflow-y: auto; padding: 2px; }
.supplier-component-check { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border: 1px solid #e0e5e9; border-radius: 8px; background: #fff; }
.supplier-component-check input { margin-top: 2px; accent-color: #4255cf; }
.supplier-component-check strong,
.supplier-component-check small { display: block; }
.supplier-component-check small { margin-top: 2px; color: #7b8791; font-size: 9px; }
.supply-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.supply-compare > div { padding: 10px 11px; border: 1px solid #e1e6ea; border-radius: 9px; background: #fafbfc; }
.supply-compare span { display: block; color: #7b8791; font-size: 9px; font-weight: 750; }
.supply-compare strong { display: block; margin-top: 4px; color: #334454; font-size: 12px; }
.supply-confirm-help { padding: 11px 13px; border-left: 3px solid #bea45f; background: #faf8f1; color: #6a6559; font-size: 11px; line-height: 1.55; }

@media (max-width: 1050px) {
  .inventory-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-component-head { flex-direction: column; }
  .model-component-toolbar { width: 100%; }
  .model-component-toolbar .field { flex: 1; width: auto; max-width: none; }
  .product-code-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .product-code-row .product-code-state { display: none; }
}
@media (max-width: 720px) {
  .inventory-summary-grid { grid-template-columns: 1fr 1fr; }
  .inventory-section-head { align-items: stretch; flex-direction: column; }
  .inventory-section-actions { justify-content: flex-start; }
  .inventory-filter { max-width: none; width: 100%; }
  .supplier-management-row { grid-template-columns: 1fr; }
  .supplier-management-actions { justify-content: flex-start; }
  .supplier-component-checks { grid-template-columns: 1fr; }
  .supply-compare { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .inventory-summary-grid { grid-template-columns: 1fr; }
  .model-component-toolbar { align-items: stretch; flex-direction: column; }
  .product-code-row { grid-template-columns: minmax(0,1fr) auto; }
  .product-code-row .product-code-edit { grid-column: 1 / -1; justify-self: start; }
}

/* ============================================================
   WPPEI CRM v267 - settings spacing / product model UX
   ============================================================ */
.settings-card-v267 + .settings-card-v267 { margin-top: 22px !important; }
.settings-card-v267 + .settings-secondary-grid { margin-top: 22px; }
.product-code-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.product-code-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.product-code-actions .btn { min-height: 31px; padding: 0 9px; }
.product-code-actions .btn-danger { background: #fff !important; color: #a43e36 !important; border-color: #e5c7c4 !important; }
.product-code-actions .btn-danger:hover { background: #fff5f4 !important; border-color: #d9aaa6 !important; }
.delete-model-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid #ecd1cd;
  border-radius: 10px;
  background: #fff7f6;
  color: #8d4943;
  font-size: 12px;
  line-height: 1.55;
}
.delete-model-warning i { margin-top: 3px; color: #b44940; }
@media (max-width: 1160px) {
  .product-code-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .product-code-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .product-code-state { justify-self: end; }
  .product-code-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* v268: component-centric supply partner assignment */
.model-component-supplier-table { min-width: 1040px; }
.component-supplier-badge { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; min-width: 150px; }
.component-supplier-badge > i { grid-row: 1 / span 2; color: #59707f; font-size: 12px; }
.component-supplier-badge strong { color: #263744; font-size: 11px; line-height: 1.3; }
.component-supplier-badge small { color: #87919a; font-size: 9px; line-height: 1.3; }
.component-supplier-unassigned { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px dashed #cfd7de; border-radius: 999px; color: #7a858f; background: #f8f9fa; font-size: 10px; font-weight: 750; }
.model-component-actions { display: flex; justify-content: flex-end; gap: 6px; }
.component-new-supplier-details { border-top: 1px solid #e7ebef; padding-top: 10px; }
.component-new-supplier-details > summary { display: flex; align-items: center; gap: 7px; color: #3f5363; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.component-new-supplier-details > summary::-webkit-details-marker { display: none; }
.component-new-supplier-details > form { margin-top: 12px; padding: 12px; border: 1px solid #e3e8ec; border-radius: 10px; background: #fafbfc; }

/* v269 - 구성부품과 공급 파트너사 지정을 독립 카드로 분리 */
.component-partner-panel { display: grid; gap: 15px; }
.component-partner-assignment-table { min-width: 820px; }
.component-partner-assignment-table th:nth-child(3),
.component-partner-assignment-table td:nth-child(3) { width: 34%; }
.component-partner-assignment-table th:last-child,
.component-partner-assignment-table td:last-child { width: 132px; text-align: right; }

/* ============================================================
   WPPEI CRM v271 - compact shared actions / centered inventory setup tables
   ============================================================ */
/* Product model: compact input widths + shared edit/delete actions */
.product-code-form {
  grid-template-columns: minmax(220px, 340px) minmax(300px, 520px) auto;
  justify-content: start;
  align-items: end;
  gap: 10px;
}
.product-code-form-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}
.product-code-form-actions .btn { min-height: 42px; white-space: nowrap; }
.product-code-form-actions .product-model-common-delete {
  background: #fff !important;
  color: #a43e36 !important;
  border-color: #e5c7c4 !important;
}
.product-code-form-actions .product-model-common-delete:hover:not(:disabled) {
  background: #fff5f4 !important;
  border-color: #d9aaa6 !important;
}
.product-code-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.product-code-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 50px;
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.product-code-row:hover { border-color: #bcc7d2; background: #fbfcfd; }
.product-code-row.is-selected {
  border-color: #7383da;
  background: #f7f8ff;
  box-shadow: 0 0 0 2px rgba(66, 85, 207, .09);
}
.product-code-row:focus-visible { outline: 2px solid rgba(66, 85, 207, .3); outline-offset: 2px; }

/* Component / component-supplier tables: center every column and compact data rows */
.model-component-table th,
.model-component-table td { text-align: center !important; }
.model-component-table tbody td { padding: 8px 10px; line-height: 1.3; }
.model-component-table thead th { padding: 9px 10px; }
.model-component-table .model-component-actions {
  display: table-cell;
  text-align: center !important;
  white-space: nowrap;
}
.model-component-table .model-component-actions .btn { min-height: 31px; padding: 0 10px; }
.model-component-table .component-supplier-badge { text-align: center; justify-content: center; }
.component-partner-assignment-table th:last-child,
.component-partner-assignment-table td:last-child { text-align: center !important; }

/* Supplier manager: one shared edit/delete control, selectable compact cards, in-place editor */
.supplier-manager-shell { gap: 10px; }
.supplier-manager-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 1px;
}
.supplier-manager-selection { min-width: 0; }
.supplier-manager-selection strong,
.supplier-manager-selection small { display: block; }
.supplier-manager-selection strong { color: #263744; font-size: 12px; }
.supplier-manager-selection small { margin-top: 2px; color: #7c8791; font-size: 9px; }
.supplier-manager-common-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.supplier-manager-common-actions .supplier-manager-delete {
  background: #fff !important;
  color: #a43e36 !important;
  border-color: #e5c7c4 !important;
}
.supplier-management-list { gap: 6px; }
.supplier-management-row {
  appearance: none;
  width: 100%;
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 10px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.supplier-management-row:hover { border-color: #bcc7d2; background: #fbfcfd; }
.supplier-management-row.is-selected {
  border-color: #7383da;
  background: #f7f8ff;
  box-shadow: 0 0 0 2px rgba(66, 85, 207, .08);
}
.supplier-management-main,
.supplier-management-meta { min-width: 0; }
.supplier-management-main strong,
.supplier-management-main small,
.supplier-management-meta small { display: block; }
.supplier-management-main strong { font-size: 12px; line-height: 1.2; }
.supplier-management-main small,
.supplier-management-meta small { margin-top: 2px; font-size: 9px; line-height: 1.2; }
.supplier-management-meta { display: grid; justify-items: end; gap: 1px; }
.supplier-manager-edit-panel {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid #dfe5ea;
  border-radius: 10px;
  background: #fafbfc;
}
.supplier-manager-edit-head strong,
.supplier-manager-edit-head small { display: block; }
.supplier-manager-edit-head strong { color: #2f4050; font-size: 12px; }
.supplier-manager-edit-head small { margin-top: 3px; color: #7c8791; font-size: 9px; line-height: 1.45; }
.supplier-manager-editor-actions { display: flex; justify-content: flex-end; gap: 7px; }

@media (max-width: 1280px) {
  .product-code-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-code-form { grid-template-columns: minmax(200px, 300px) minmax(260px, 420px) auto; }
  .product-code-form-actions { flex-wrap: wrap; }
}
@media (max-width: 980px) {
  .product-code-form { grid-template-columns: 1fr 1fr; }
  .product-code-form-actions { grid-column: 1 / -1; }
  .product-code-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .product-code-form { grid-template-columns: 1fr; }
  .product-code-form-actions { grid-column: auto; flex-wrap: wrap; }
  .product-code-list { grid-template-columns: 1fr; }
  .supplier-manager-toolbar { align-items: stretch; flex-direction: column; }
  .supplier-manager-common-actions { justify-content: flex-start; }
  .supplier-management-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* v272 - supply mutual-confirmation workflow */
.inventory-row-actions { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.inventory-note.is-warning { color: #8b4f16; background: #fff8e8; border-color: #ecd9aa; }
.supply-version-history { display: grid; gap: 8px; }
.supply-version-card { padding: 11px 12px; border: 1px solid #dfe5ea; border-radius: 10px; background: #fff; }
.supply-version-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #edf0f2; }
.supply-version-head strong { color: #2f4050; font-size: 12px; }
.supply-version-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; padding-top: 8px; }
.supply-version-grid > div { min-width: 0; padding: 7px 8px; border-radius: 7px; background: #f7f9fa; }
.supply-version-grid span { display: block; color: #7a8791; font-size: 9px; }
.supply-version-grid strong { display: block; margin-top: 2px; color: #314252; font-size: 11px; word-break: break-word; }
.supply-version-meta, .supply-review-meta { display: grid; gap: 3px; margin-top: 8px; color: #7a8791; font-size: 9px; line-height: 1.45; }
.supply-version-card .inventory-note { margin-top: 7px; }

@media (max-width: 720px) {
  .supply-version-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* v273 - user management alignment and sorting */
.users-table-host .users-data-table th,
.users-table-host .users-data-table td {
  text-align: center;
  vertical-align: middle;
}
.users-table-host .users-data-table .status-action {
  justify-content: center;
}
.users-sort-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.users-sort-btn i {
  font-size: 9px;
  opacity: .55;
}
.users-sort-btn:hover,
.users-sort-btn.is-active {
  color: #3449c9;
}
.users-sort-btn.is-active i {
  opacity: 1;
}

/* v274 - compact user rows, integrated search and pagination */
.users-table-host .users-data-table thead th {
  padding: 10px 12px;
  line-height: 1.25;
}
.users-table-host .users-data-table tbody td {
  padding: 8px 12px;
  line-height: 1.3;
}
.users-table-host .users-data-table .badge {
  min-height: 24px;
  padding: 3px 9px;
}
.users-table-host .users-data-table .status-action { gap: 7px; }
.users-list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}
.users-search-wrap {
  position: relative;
  flex: 1 1 520px;
  max-width: 640px;
}
.users-search-wrap > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #84909c;
  font-size: 12px;
  pointer-events: none;
}
.users-search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 38px 8px 36px;
  font-size: 13px;
}
.users-search-clear {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7b8794;
  cursor: pointer;
}
.users-search-clear.is-visible { display: inline-flex; }
.users-search-clear:hover { background: #f1f4f6; color: #35485a; }
.users-list-control-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
.users-search-result {
  color: #6c7885;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.users-page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #667482;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.users-page-size {
  width: 100px;
  min-width: 100px;
  min-height: 38px;
  padding: 6px 34px 6px 12px;
  font-size: 12px;
  box-sizing: border-box;
}
.users-pagination { margin-top: 10px; }
@media (max-width: 820px) {
  .users-list-controls { align-items: stretch; flex-direction: column; }
  .users-search-wrap { max-width: none; flex-basis: auto; }
  .users-list-control-right { justify-content: space-between; }
}
@media (max-width: 520px) {
  .users-list-control-right { align-items: stretch; flex-direction: column; gap: 8px; }
  .users-page-size-label { justify-content: space-between; }
}

/* ============================================================
   v282 - HQ central warehouse inventory stage 1
   ============================================================ */
.inventory-v282 .inventory-stage-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.inventory-v282 .inventory-stage-note > i { margin-top: 2px; }
.inventory-v282 .inventory-warehouse-v282 th,
.inventory-v282 .inventory-warehouse-v282 td,
.inventory-v282 .inventory-history-table th,
.inventory-v282 .inventory-history-table td {
  text-align: center;
  vertical-align: middle;
}
.inventory-v282 .inventory-warehouse-v282 td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.inventory-v282 .inventory-warehouse-v282 .inventory-part-cell,
.inventory-v282 .inventory-history-table .inventory-part-cell {
  text-align: center;
}
.inventory-v282 .inventory-row-actions { justify-content: center; }
.inventory-risk-attention { color: #8c6219; background: #fff7df; border-color: #efdfa9; }
.inventory-risk-shortage { color: #9d2e36; background: #fff0f1; border-color: #efc9cd; }
.inventory-risk-target_unset { color: #5f6973; background: #f3f5f7; border-color: #d9dee3; }
.inventory-current-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid #dfe5ea;
  border-radius: 10px;
  background: #f8fafb;
}
.inventory-current-box span { color: #6d7882; font-size: 12px; font-weight: 750; }
.inventory-current-box strong { color: #243340; font-size: 18px; font-variant-numeric: tabular-nums; }
.inventory-move-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid #dfe5ea;
  border-radius: 10px;
  background: #fbfcfd;
  color: #66727e;
  font-size: 12px;
}
.inventory-move-preview strong { color: #243340; font-size: 16px; font-variant-numeric: tabular-nums; }
.inventory-move-preview strong.is-negative { color: #a23b31; }
.inventory-last-move { font-size: 11px; }
.table-muted { color: #929ca5; font-size: 11px; }
@media (max-width: 1100px) {
  .inventory-v282 .inventory-warehouse-v282 { min-width: 1120px; }
}

/* ============================================================
   v283 - HQ warehouse compact selectable rows + shared actions
   ============================================================ */
.inventory-v283 .warehouse-section-head {
  align-items: flex-start;
}
.inventory-v283 .warehouse-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  margin-left: auto;
}
.inventory-v283 .warehouse-filter-group,
.inventory-v283 .warehouse-common-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}
.inventory-v283 .warehouse-filter-group .inventory-filter {
  width: 190px;
  min-width: 190px;
  max-width: 190px;
}
.inventory-v283 .warehouse-common-actions .btn {
  white-space: nowrap;
}
.inventory-v283 .inventory-warehouse-v282 tbody td {
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.18;
}
.inventory-v283 .inventory-warehouse-v282 .table-subline,
.inventory-v283 .inventory-warehouse-v282 .inventory-part-cell small {
  margin-top: 2px;
  line-height: 1.15;
}
.inventory-v283 .warehouse-select-row {
  cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.inventory-v283 .warehouse-select-row:hover td {
  background: #f7f9fc;
}
.inventory-v283 .warehouse-select-row.is-selected td {
  background: #eef3ff;
}
.inventory-v283 .warehouse-select-row.is-selected td:first-child {
  box-shadow: inset 3px 0 0 #4054d6;
}
.inventory-v283 .warehouse-select-row:focus-visible {
  outline: 2px solid #6575df;
  outline-offset: -2px;
}
@media (max-width: 1280px) {
  .inventory-v283 .warehouse-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .inventory-v283 .warehouse-toolbar {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}
@media (max-width: 860px) {
  .inventory-v283 .warehouse-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .inventory-v283 .warehouse-filter-group,
  .inventory-v283 .warehouse-common-actions {
    width: 100%;
  }
  .inventory-v283 .warehouse-filter-group .inventory-filter {
    width: 50%;
    max-width: none;
    min-width: 0;
  }
  .inventory-v283 .warehouse-common-actions .btn {
    flex: 1 1 0;
  }
}

/* ============================================================
   v284 - warehouse history pagination + installation reservation
   ============================================================ */
.inventory-v283 .warehouse-table-scroll {
  max-height: 454px; /* header + 10 compact data rows */
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.inventory-v283 .warehouse-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f6f8;
}
.inventory-v283 .warehouse-select-row td {
  height: 42px;
  box-sizing: border-box;
}
.inventory-v283 .warehouse-sort-th {
  cursor: pointer;
  user-select: none;
}
.inventory-v283 .warehouse-sort-th > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.inventory-v283 .warehouse-sort-th i {
  color: #8a96a3;
  font-size: 10px;
}
.inventory-v283 .warehouse-sort-th:focus-visible {
  outline: 2px solid #6575df;
  outline-offset: -2px;
}
.inventory-v283 .is-negative-stock {
  color: #a23b31;
  font-weight: 800;
}
.modal-panel.warehouse-component-history-modal {
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  overflow: hidden;
}
.modal-panel.warehouse-component-history-modal .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-panel.warehouse-component-history-modal .model-component-table-wrap {
  width: 100%;
  overflow-x: hidden;
}
.modal-panel.warehouse-component-history-modal .inventory-history-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}
.modal-panel.warehouse-component-history-modal .inventory-history-table th,
.modal-panel.warehouse-component-history-modal .inventory-history-table td {
  padding: 8px 7px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  font-size: 11px;
  line-height: 1.3;
}
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(1),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(1) { width: 12%; }
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(2),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(2) { width: 20%; }
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(3),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(3) { width: 10%; }
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(4),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(4) { width: 15%; }
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(5),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(5) { width: 21%; }
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(6),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(6) { width: 10%; }
.modal-panel.warehouse-component-history-modal .inventory-history-table th:nth-child(7),
.modal-panel.warehouse-component-history-modal .inventory-history-table td:nth-child(7) { width: 12%; }
.warehouse-history-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
}
.warehouse-history-pager button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #d9e0e6;
  border-radius: 7px;
  background: #fff;
  color: #4c5b69;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.warehouse-history-pager button.is-active {
  border-color: #4054d6;
  background: #4054d6;
  color: #fff;
}
.warehouse-history-pager button:disabled {
  opacity: .42;
  cursor: default;
}
@media (max-width: 720px) {
  .modal-panel.warehouse-component-history-modal {
    width: calc(100vw - 16px);
  }
  .modal-panel.warehouse-component-history-modal .inventory-history-table th,
  .modal-panel.warehouse-component-history-modal .inventory-history-table td {
    font-size: 9.5px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* v285 - HQ model installation capacity */
.warehouse-model-capacity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}
.warehouse-model-capacity-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dfe5eb;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 3px;
}
.warehouse-model-capacity-card:hover { border-color: #aab8c7; background: #fbfcfd; }
.warehouse-model-capacity-card > span { color: #657184; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warehouse-model-capacity-card > strong { color: #253244; font-size: 14px; line-height: 1.25; }
.warehouse-model-capacity-card > small { color: #82909d; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warehouse-model-capacity-card.is-ready { border-color: #b9dfd1; background: #f4fbf8; }
.warehouse-model-capacity-card.is-shortage { border-color: #f0d19b; background: #fffaf0; }
.warehouse-model-capacity-card.is-unconfigured { border-style: dashed; background: #fafbfc; }
@media (max-width: 1100px) { .warehouse-model-capacity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .warehouse-model-capacity-grid { grid-template-columns: 1fr; } }

/* v285 - installation set warehouse readiness */
.installation-stock-readiness-button {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.installation-stock-readiness-button small { color: #7b8793; font-size: 10px; white-space: nowrap; }
.installation-stock-readiness-button .badge { display: inline-flex; align-items: center; gap: 5px; }
.installation-stock-readiness-detail { display: grid; gap: 12px; }
.installation-stock-readiness-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  background: #f8fafc;
}
.installation-stock-readiness-summary > div { display: flex; align-items: center; gap: 10px; }
.installation-stock-readiness-summary > div:last-child { flex-direction: column; align-items: flex-end; gap: 1px; }
.installation-stock-readiness-summary > div:last-child span { color: #7b8793; font-size: 10px; }
.installation-stock-readiness-summary > div:last-child strong { font-size: 16px; }
.installation-stock-readiness-table { min-width: 720px; }
.installation-stock-readiness-table th,
.installation-stock-readiness-table td { text-align: center; vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
.installation-stock-readiness-table td:first-child { text-align: left; }
.installation-stock-readiness-table td:first-child strong,
.installation-stock-readiness-table td:first-child small { display: block; }
.installation-stock-readiness-table td:first-child small { color: #83909d; font-size: 10px; margin-top: 2px; }
.installation-stock-readiness-table tr.is-shortage td { background: #fff8f3; }
.installation-schedule-stock-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #dce4eb;
  border-radius: 12px;
  background: #f8fafc;
}
.installation-schedule-stock-card > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.installation-schedule-stock-card > p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.installation-schedule-stock-card > .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.installation-schedule-stock-card.is-ready,
.installation-schedule-stock-card.is-reserved { border-color: #b8decf; background: #f3fbf7; }
.installation-schedule-stock-card.is-shortage { border-color: #f1c9b6; background: #fff7f2; }
.installation-schedule-stock-card.is-bom_unconfigured,
.installation-schedule-stock-card.is-model_unmatched { border-color: #edd69c; background: #fffaf0; }
.installation-schedule-stock-detail-panel {
  padding: 12px;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  background: #fff;
  max-height: 320px;
  overflow: auto;
}
@media (max-width: 720px) {
  .installation-schedule-stock-card { grid-template-columns: 1fr; }
  .installation-schedule-stock-card > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .installation-stock-readiness-summary { align-items: flex-start; flex-direction: column; }
  .installation-stock-readiness-summary > div:last-child { align-items: flex-start; }
}

/* ============================================================
   v286 - HQ complete installation-set issue
   ============================================================ */
.inventory-v286 .installation-issue-table-scroll {
  max-height: 454px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.inventory-v286 .installation-issue-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f6f8;
}
.inventory-v286 .installation-issue-table th,
.inventory-v286 .installation-issue-table td {
  text-align: center;
  vertical-align: middle;
  padding-top: 8px;
  padding-bottom: 8px;
}
.inventory-v286 .installation-issue-select-row {
  cursor: pointer;
}
.inventory-v286 .installation-issue-select-row:hover td {
  background: #f8fafc;
}
.inventory-v286 .installation-issue-select-row.is-selected td {
  background: #eef3ff;
  box-shadow: inset 0 1px 0 #cbd7ff, inset 0 -1px 0 #cbd7ff;
}
.inventory-v286 .installation-issue-select-row:focus-visible {
  outline: 2px solid #6575df;
  outline-offset: -2px;
}
.installation-issue-modal-content .model-component-table th,
.installation-issue-modal-content .model-component-table td {
  text-align: center;
  vertical-align: middle;
}
.installation-schedule-stock-card.is-issued {
  border-color: #a9d7c5;
  background: #effaf5;
}

/* v290 notification deep-link focus */
.notification-deep-link-focus {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(49, 83, 200, .78);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(49, 83, 200, .10);
  transition: outline-color .25s ease, box-shadow .25s ease;
}

/* ============================================================
   v293 - Supplier document library
   ============================================================ */
.supplier-document-library{display:grid;gap:16px}
.supplier-document-section{display:grid;gap:10px;padding-top:2px}
.supplier-document-section+.supplier-document-section{padding-top:16px;border-top:1px solid #e5e9ef}
.supplier-document-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.supplier-document-section-head>div{min-width:0}
.supplier-document-section-head h4{margin:0;color:#1f2b3a;font-size:14px;font-weight:800;letter-spacing:-.02em}
.supplier-document-section-head p{margin:4px 0 0;color:#7a8594;font-size:11px;line-height:1.45}
.supplier-document-table td{vertical-align:middle}
.supplier-document-category{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border:1px solid #dbe2ea;border-radius:999px;background:#f7f9fb;color:#4a5869;font-size:11px;font-weight:700;white-space:nowrap}
.supplier-document-file{display:flex;align-items:center;gap:9px;min-width:170px}
.supplier-document-file>i{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:#eef3ff;color:#3857c8;font-size:14px}
.supplier-document-file>div{min-width:0}
.supplier-document-file strong{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#263445}
.supplier-document-file small{display:block;margin-top:2px;color:#8a94a2;font-size:10px}
.supplier-document-description{max-width:320px;white-space:normal;line-height:1.45}
.supplier-document-empty{display:flex;align-items:center;justify-content:center;gap:9px;min-height:76px;border:1px dashed #d7dee7;border-radius:10px;background:#fafbfc;color:#8a94a2;font-size:12px}
.supplier-document-file-input{padding:8px 10px;height:auto;min-height:44px}
.supplier-document-current-file{display:flex;align-items:center;gap:7px;margin-top:7px;padding:8px 10px;border:1px solid #e3e8ef;border-radius:8px;background:#f8fafc;color:#667384;font-size:11px}
.supplier-document-history-list{display:grid;gap:9px;max-height:min(62vh,560px);overflow:auto;padding-right:2px}
.supplier-document-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 13px;border:1px solid #e1e6ed;border-radius:10px;background:#fff}
.supplier-document-history-row>div:first-child{min-width:0}
.supplier-document-history-row strong{display:block;color:#263445;font-size:12px}
.supplier-document-history-row span,.supplier-document-history-row small{display:block;margin-top:3px;color:#7c8795;font-size:10px;line-height:1.4}
.supplier-document-history-row>div:last-child{display:grid;justify-items:end;gap:5px;min-width:132px}
.supplier-document-history-row>div:last-child .status-badge{margin:0}
.field-help{display:block;margin-top:5px;color:#818c9a;font-size:10px;line-height:1.4}
@media(max-width:900px){
  .supplier-document-section-head{align-items:flex-start;flex-direction:column}
  .supplier-document-section-head .btn{width:100%;justify-content:center}
  .supplier-document-history-row{grid-template-columns:1fr}
  .supplier-document-history-row>div:last-child{justify-items:start;min-width:0}
}

/* ============================================================
   v298 - Inventory top tab visibility
   ============================================================ */
.inventory-tabs {
  gap: 5px;
  padding: 5px;
  border-color: #cfd7e2;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(32, 51, 70, .08);
}
.inventory-tab {
  border: 1px solid #dce3ea;
  background: #f3f6f9;
  color: #516071;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.inventory-tab:hover {
  border-color: #c7d0da;
  background: #e9eef4;
  color: #26384c;
}
.inventory-tab.is-active {
  border-color: var(--aurelia-ultra);
  background: var(--aurelia-ultra);
  color: #ffffff;
  box-shadow: 0 3px 9px rgba(63, 84, 199, .22);
}
.inventory-tab:focus-visible {
  outline: 2px solid rgba(63, 84, 199, .34);
  outline-offset: 2px;
}

/* ============================================================
   v299 - HQ production + finished goods foundation
   ============================================================ */
.inventory-v299 .inventory-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.inventory-v299 .inventory-tab { flex: 0 0 auto; }
.production-order-table-wrap,
.finished-product-table-wrap { max-height: 500px; overflow-y: auto; scrollbar-gutter: stable; }
.production-order-table-wrap thead th,
.finished-product-table-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f4f6f8; }
.production-order-table th,
.production-order-table td,
.finished-product-table th,
.finished-product-table td { text-align: center !important; vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.production-order-table .model-component-actions { min-width: 260px; }
.production-order-table .inventory-row-actions { justify-content: center; flex-wrap: nowrap; }
.production-order-table .btn:disabled { opacity: .45; cursor: not-allowed; }
.production-mini-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 2px 0 12px; }
.production-mini-card { padding: 11px 13px; border: 1px solid #dfe5eb; border-radius: 10px; background: #f8fafc; }
.production-mini-card span { display: block; color: #74808d; font-size: 10px; font-weight: 750; }
.production-mini-card strong { display: block; margin-top: 5px; color: #253244; font-size: 18px; font-variant-numeric: tabular-nums; }
.finished-serial { font-family: Inter, monospace; letter-spacing: .01em; white-space: nowrap; }
.production-detail-status { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.production-bom-table { min-width: 780px; }
.production-bom-table th,
.production-bom-table td { text-align: center !important; vertical-align: middle; }
.production-bom-table td:first-child { text-align: left !important; }
.production-bom-table tr.is-shortage td { background: #fff6f4; }
.production-create-form .form-grid-2 { align-items: end; }
@media (max-width: 820px) {
  .production-mini-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .production-order-table .inventory-row-actions { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .production-mini-summary { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v300 - simplified finished-goods production planning
   ============================================================ */
.inventory-v300 .production-plan-wrap { margin-top: 12px; }
.inventory-v300 .production-plan-table { min-width: 940px; }
.inventory-v300 .production-plan-table th,
.inventory-v300 .production-plan-table td { text-align: center !important; vertical-align: middle; }
.inventory-v300 .production-plan-table th:first-child,
.inventory-v300 .production-plan-table td:first-child { text-align: left !important; }
.inventory-v300 .production-plan-table .model-component-actions { min-width: 305px; }
.inventory-v300 .production-plan-table .inventory-row-actions { justify-content: center; flex-wrap: nowrap; }
.inventory-v300 .production-recommend-badge { white-space: nowrap; }
.inventory-v300 .inventory-subsection-title { margin: 18px 0 9px; padding-top: 14px; border-top: 1px solid #e2e7ec; color: #344253; font-size: 13px; }
.inventory-unit-field { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.inventory-unit-field > span { min-width: 34px; color: #667382; font-size: 12px; font-weight: 800; text-align: center; }
@media (max-width: 900px) {
  .inventory-v300 .production-plan-table .inventory-row-actions { flex-wrap: wrap; }
}

/* ============================================================
   v304 - Installation manager stock cards: 1 row / 2 columns
   ============================================================ */
.inventory-installation-manager-readonly .installation-manager-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.inventory-installation-manager-readonly .installation-manager-stock-card {
  min-width: 0;
  margin-top: 0 !important;
}
.inventory-installation-manager-readonly .installation-manager-stock-card .model-component-table-wrap {
  width: 100%;
  overflow-x: hidden;
}
.inventory-installation-manager-readonly .installation-manager-stock-card .model-component-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.inventory-installation-manager-readonly .installation-manager-stock-card .model-component-table th,
.inventory-installation-manager-readonly .installation-manager-stock-card .model-component-table td {
  padding-left: 7px;
  padding-right: 7px;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.inventory-installation-manager-readonly .installation-manager-stock-card .model-component-table th {
  white-space: normal;
  line-height: 1.25;
}
.inventory-installation-manager-readonly .installation-manager-stock-card .table-subline {
  white-space: normal;
  overflow-wrap: anywhere;
}
.inventory-installation-manager-readonly .installation-manager-stock-card .inventory-num,
.inventory-installation-manager-readonly .installation-manager-stock-card .supply-status-badge {
  white-space: nowrap;
}
.inventory-installation-manager-readonly .installation-manager-as-card .warehouse-section-head {
  display: block;
}
.inventory-installation-manager-readonly .installation-manager-as-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  margin: 10px 0 0;
  gap: 8px;
}
.inventory-installation-manager-readonly .installation-manager-as-filters .inventory-filter {
  width: 100%;
  min-width: 0;
  max-width: none;
}
@media (max-width: 1180px) {
  .inventory-installation-manager-readonly .installation-manager-stock-grid {
    grid-template-columns: 1fr;
  }
  .inventory-installation-manager-readonly .installation-manager-stock-card .model-component-table-wrap {
    overflow-x: auto;
  }
  .inventory-installation-manager-readonly .installation-manager-finished-table {
    min-width: 560px;
  }
  .inventory-installation-manager-readonly .installation-manager-as-table {
    min-width: 760px;
  }
}
@media (max-width: 640px) {
  .inventory-installation-manager-readonly .installation-manager-as-filters {
    grid-template-columns: 1fr;
  }
}

/* v305 production execution */
.production-mini-summary { grid-template-columns: repeat(5,minmax(0,1fr)); }
.production-test-result-options { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.production-test-result-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.production-serial-list { display: flex; flex-wrap: wrap; gap: 7px; }
.production-serial-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #dde4ec; border-radius: 8px; background: #f8fafc; font-size: 11px; font-weight: 700; color: #334155; }
.production-execution-history { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid #e1e6ec; border-radius: 10px; background: #fbfcfd; }
.production-execution-history > div:not(.inventory-note) { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #52606d; }
.production-execution-history > div:not(.inventory-note) i { color: #1f7a5a; font-size: 10px; }
@media (max-width: 900px) { .production-mini-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }


/* ============================================================
   v306 - Unified HQ inventory: finished goods + component stock
   ============================================================ */
.inventory-v306 .inventory-unified-stock-title {
  margin-top: 18px;
  padding-top: 16px;
}
.inventory-v306 .inventory-unified-stock-title > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.inventory-v306 .inventory-unified-stock-title strong {
  font-size: 15px;
  color: #202c39;
}
.inventory-v306 .inventory-unified-stock-title small {
  color: #6f7c8b;
  font-size: 12px;
  font-weight: 500;
}
.inventory-v306 .inventory-component-toolbar {
  margin-top: 0;
}
.inventory-v306 .finished-product-grouped-table {
  table-layout: fixed;
}
.inventory-v306 .finished-product-grouped-table th:nth-child(1) { width: 30%; }
.inventory-v306 .finished-product-grouped-table th:nth-child(2),
.inventory-v306 .finished-product-grouped-table th:nth-child(3),
.inventory-v306 .finished-product-grouped-table th:nth-child(4) { width: 14%; }
.inventory-v306 .finished-product-grouped-table th:nth-child(5) { width: 15%; }
.inventory-v306 .finished-product-grouped-table th:nth-child(6) { width: 13%; }
.inventory-v306 .finished-product-grouped-table td,
.inventory-v306 .finished-product-grouped-table th {
  vertical-align: middle;
}
@media (max-width: 980px) {
  .inventory-v306 .finished-product-grouped-table {
    table-layout: auto;
    min-width: 720px;
  }
}

/* ============================================================
   v309 - inventory table fit + local inventory test controls
   ============================================================ */
.inventory-v306 .finished-product-grouped-wrap {
  width: 100%;
  overflow-x: hidden;
}
.inventory-v306 .finished-product-grouped-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.inventory-v306 .finished-product-grouped-table th,
.inventory-v306 .finished-product-grouped-table td {
  padding-left: 8px;
  padding-right: 8px;
  overflow-wrap: anywhere;
}
.inventory-v306 .finished-product-grouped-table th {
  white-space: normal;
  line-height: 1.25;
}
.inventory-v306 .finished-product-grouped-table .inventory-num,
.inventory-v306 .finished-product-grouped-table .supply-status-badge,
.inventory-v306 .finished-product-grouped-table .btn {
  white-space: nowrap;
}
.inventory-subsection-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 900px) {
  .inventory-v306 .finished-product-grouped-wrap {
    overflow-x: auto;
  }
  .inventory-v306 .finished-product-grouped-table {
    min-width: 760px;
    table-layout: auto;
  }
  .inventory-subsection-with-action {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   v310 - Installation manager A/S stock card: match left card height
   ============================================================ */
@media (min-width: 1181px) {
  .inventory-installation-manager-readonly .installation-manager-stock-grid {
    align-items: stretch;
  }
  .inventory-installation-manager-readonly .installation-manager-stock-card {
    min-height: 0;
  }
  .inventory-installation-manager-readonly .installation-manager-as-card {
    contain: size;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .inventory-installation-manager-readonly .installation-manager-as-card .inventory-section-head {
    flex: 0 0 auto;
  }
  .inventory-installation-manager-readonly .installation-manager-as-card .model-component-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .inventory-installation-manager-readonly .installation-manager-as-card .model-component-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f6f8;
  }
  .inventory-installation-manager-readonly .installation-manager-as-card #installation-manager-as-empty {
    flex: 0 0 auto;
  }
}

/* ============================================================
   v314 - HQ procurement planning
   ============================================================ */
.inventory-v314 .procurement-summary-grid {
  margin: 14px 0;
}
.inventory-v314 .procurement-as-of {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #dfe5ec;
  border-radius: 10px;
  background: #f8fafc;
  white-space: nowrap;
}
.inventory-v314 .procurement-as-of span {
  color: #6b7785;
  font-size: 12px;
}
.inventory-v314 .procurement-as-of strong {
  color: #243447;
  font-size: 13px;
}
.inventory-v314 .procurement-toolbar {
  margin-top: 8px;
}
.inventory-v314 .procurement-table-wrap {
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.inventory-v314 .procurement-table {
  table-layout: fixed;
  min-width: 0;
}
.inventory-v314 .procurement-table th,
.inventory-v314 .procurement-table td,
.inventory-v314 .procurement-supplier-table th,
.inventory-v314 .procurement-supplier-table td {
  text-align: center !important;
  vertical-align: middle;
}
.inventory-v314 .procurement-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f6f8;
}
.inventory-v314 .procurement-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}
.procurement-status-sufficient { background:#e7f7ef !important; color:#0d7a4c !important; }
.procurement-status-order_review,
.procurement-status-additional_supply_review { background:#fff4d8 !important; color:#9a6b00 !important; }
.procurement-status-lead_time_risk,
.procurement-status-supply_shortage,
.procurement-status-supplier_info_required,
.procurement-status-availability_required,
.procurement-status-availability_outdated { background:#fde8e8 !important; color:#b42318 !important; }
.procurement-status-target_unset { background:#eef1f4 !important; color:#667085 !important; }
.modal-panel.procurement-detail-modal,
.modal-panel:has(.procurement-detail-modal) {
  width: min(1120px, calc(100vw - 28px));
  max-width: 1120px;
}
.procurement-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.procurement-detail-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  padding: 8px;
  border: 1px solid #e2e7ed;
  border-radius: 9px;
  background: #fafbfc;
  text-align: center;
}
.procurement-detail-grid span {
  color: #73808f;
  font-size: 11px;
}
.procurement-detail-grid strong {
  color: #223247;
  font-size: 13px;
}
.procurement-supplier-table {
  min-width: 900px;
}
@media (max-width: 1050px) {
  .procurement-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-v314 .procurement-table-wrap { overflow-x: auto; }
  .inventory-v314 .procurement-table { min-width: 1050px; }
}

/* ============================================================
   v315 Purchase Orders + procurement action
   ============================================================ */
.procurement-row-actions{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.orders-summary-grid{margin-bottom:14px}
.orders-table th,.orders-table td{text-align:center;vertical-align:middle}
.orders-table-wrap{max-height:560px;overflow:auto}
.purchase-order-create-modal{min-width:0}
.modal-panel:has(.purchase-order-create-modal){width:min(980px,calc(100vw - 32px));max-width:980px}
.modal-panel:has(.order-detail-modal){width:min(1180px,calc(100vw - 32px));max-width:1180px}
.po-line-row{display:grid;grid-template-columns:minmax(360px,1.8fr) minmax(110px,.45fr) minmax(130px,.55fr) auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid #e4e9ef}
.po-line-row:first-child{padding-top:0}.po-line-action{padding-bottom:1px}.po-line-meta{display:block;margin-top:5px;color:#728092;font-size:11px;line-height:1.4}
.po-document{border:1px solid #d8dfe7;border-radius:12px;background:#fff;padding:22px;color:#162233}
.po-doc-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:2px solid #1c2d43;padding-bottom:14px}.po-doc-head>div{display:flex;flex-direction:column;gap:5px}.po-doc-head img{display:block;width:225px;max-width:48vw;background:#17283e;padding:11px 14px;border-radius:7px}.po-doc-head small{font-size:10px;font-weight:700;letter-spacing:.06em}.po-doc-head h1{margin:5px 0 0;font-size:25px;letter-spacing:.08em;color:#14253a}
.po-doc-meta,.po-terms-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid #d8dfe7;border-top:1px solid #d8dfe7;margin-top:14px}.po-doc-meta>div,.po-terms-grid>div{padding:9px 10px;border-right:1px solid #d8dfe7;border-bottom:1px solid #d8dfe7;min-width:0}.po-doc-meta span,.po-terms-grid span{display:block;color:#718093;font-size:10px;text-transform:uppercase}.po-doc-meta strong,.po-terms-grid strong{display:block;margin-top:3px;font-size:12px;word-break:break-word}
.po-party-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.po-party-grid section{border:1px solid #d8dfe7;border-radius:8px;padding:11px}.po-party-grid h3,.po-notes h3{margin:0 0 7px;color:#6c7a8b;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.po-party-grid strong{font-size:13px}.po-party-grid p{margin:5px 0 0;font-size:11px;color:#566477}
.po-item-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:11px}.po-item-table th,.po-item-table td{border:1px solid #d8dfe7;padding:7px 8px;text-align:center;vertical-align:middle}.po-item-table th{background:#f2f5f8;color:#425166;font-weight:700}.po-item-table .num{text-align:right}.po-item-table tfoot td{text-align:right;font-weight:800;background:#fafbfc}.po-notes{margin-top:12px;padding:10px;border:1px solid #d8dfe7;border-radius:8px;font-size:11px;line-height:1.55}.po-notes p{margin:0}.po-sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:22px}.po-sign-grid>div>span{display:block;font-size:10px;font-weight:700;color:#536176;margin-bottom:7px}.po-company-seal{width:84px;height:84px;flex:0 0 84px}.po-seal-record,.po-supplier-ack-record,.po-evidence-pending{min-height:104px;border:1px solid #d8dfe7;border-radius:10px;padding:10px;background:#fff}.po-seal-record{display:flex;align-items:center;gap:12px;border-color:#efc4c8;background:#fff8f8}.po-seal-record strong,.po-seal-record small,.po-supplier-ack-record strong,.po-supplier-ack-record small,.po-evidence-pending strong,.po-evidence-pending small{display:block}.po-seal-record small,.po-supplier-ack-record small,.po-evidence-pending small{margin-top:4px;color:#7a8795;font-size:9px}.po-supplier-ack-record{display:flex;align-items:center;gap:12px;border-color:#b9d7c2;background:#f7fcf8}.po-supplier-ack-badge{width:104px;height:64px;border:2px solid #2d7b47;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#2d7b47;transform:rotate(-2deg)}.po-supplier-ack-badge strong{font-size:10px}.po-supplier-ack-badge span{font-size:9px!important;margin-top:3px}.po-evidence-pending{display:flex;flex-direction:column;justify-content:center;color:#7a8795;background:#fafbfc}.po-sign-grid>div>small{display:block;margin-top:5px;color:#7a8795;font-size:9px}
@media(max-width:900px){.po-line-row{grid-template-columns:1fr 1fr}.po-line-action{grid-column:2;text-align:right}.po-doc-meta,.po-terms-grid{grid-template-columns:1fr 1fr}.po-party-grid{grid-template-columns:1fr}.po-document{padding:14px;overflow:auto}.po-item-table{min-width:820px}.po-doc-head img{width:180px}.po-doc-head h1{font-size:20px}}

/* ============================================================
   v316 - Orders toolbar single-row layout
   ============================================================ */
.orders-v315 .warehouse-section-head {
  align-items: flex-start;
}
.orders-v315 .warehouse-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  margin-left: auto;
}
.orders-v315 .warehouse-toolbar #order-search {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  margin: 0;
}
.orders-v315 .warehouse-toolbar #order-status-filter {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  margin: 0;
}
.orders-v315 .warehouse-toolbar #order-new {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 980px) {
  .orders-v315 .warehouse-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .orders-v315 .warehouse-toolbar {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
    flex-wrap: wrap;
  }
}
@media (max-width: 680px) {
  .orders-v315 .warehouse-toolbar #order-search,
  .orders-v315 .warehouse-toolbar #order-status-filter {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 100%;
  }
}

/* ============================================================
   v317 - Korean PO labels + aligned item fields
   ============================================================ */
.purchase-order-create-modal .po-line-row {
  align-items: start;
}
.purchase-order-create-modal .po-line-row > div:not(.po-line-action) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.purchase-order-create-modal .po-line-row .field-label {
  display: flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 7px;
  line-height: 1.25;
}
.purchase-order-create-modal .po-line-row .field {
  height: 44px;
  min-height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.purchase-order-create-modal .po-line-action {
  display: flex;
  align-items: flex-start;
  padding-top: 29px;
  padding-bottom: 0;
}
.purchase-order-create-modal .po-line-action .btn {
  min-height: 44px;
  height: 44px;
  white-space: nowrap;
}

/* ============================================================
   v321 - Orders internal approval
   ============================================================ */
.orders-v321 .warehouse-section-head { align-items:flex-start; }
.orders-v321 .warehouse-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap; margin-left:auto; }
.orders-v321 .warehouse-toolbar #order-search { width:280px; min-width:280px; max-width:280px; margin:0; }
.orders-v321 .warehouse-toolbar #order-status-filter { width:220px; min-width:220px; max-width:220px; margin:0; }
.orders-v321 .warehouse-toolbar #order-new { flex:0 0 auto; white-space:nowrap; margin:0; }
.po-approval-panel{border:1px solid #d7dee7;border-radius:12px;background:#f8fafc;padding:16px;margin-bottom:14px}
.po-approval-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.po-approval-head>div{display:flex;align-items:center;gap:9px}.po-approval-head>div:last-child{flex-direction:column;align-items:flex-end;gap:2px}.po-approval-head>div:last-child span{font-size:11px;color:#6f7d8e}.po-approval-head>div:last-child strong{font-size:18px;color:#14253a}
.po-approval-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.po-approval-meta>div{background:#fff;border:1px solid #e1e7ee;border-radius:8px;padding:9px 10px}.po-approval-meta span{display:block;font-size:10px;color:#768394;margin-bottom:3px}.po-approval-meta strong{font-size:12px;color:#263546;word-break:break-word}
.po-approval-context-wrap{max-height:260px;overflow:auto}.po-approval-context{min-width:1080px}.po-approval-context th,.po-approval-context td{text-align:center;vertical-align:middle;font-size:11px;padding:7px 8px}
.po-approval-history{display:grid;gap:7px}.po-approval-history-row{background:#fff;border:1px solid #e1e7ee;border-radius:8px;padding:9px 10px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}.po-approval-history-row>strong{font-size:12px}.po-approval-history-row>span{font-size:11px;color:#718093;text-align:right}.po-approval-history-row>p{grid-column:1/-1;margin:2px 0 0;font-size:11px;color:#4e5d6c;line-height:1.45}
.modal-panel:has(.order-detail-modal){width:min(1180px,calc(100vw - 32px));max-width:1180px}
@media(max-width:980px){.orders-v321 .warehouse-section-head{flex-direction:column;align-items:stretch}.orders-v321 .warehouse-toolbar{width:100%;justify-content:flex-start;margin-left:0;flex-wrap:wrap}.po-approval-meta{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.orders-v321 .warehouse-toolbar #order-search,.orders-v321 .warehouse-toolbar #order-status-filter{width:100%;min-width:0;max-width:none;flex:1 1 100%}.po-approval-meta{grid-template-columns:1fr}.po-approval-head{align-items:flex-start;flex-direction:column}.po-approval-head>div:last-child{align-items:flex-start}}

/* ============================================================
   v324 - Purchase Order execution / LC / shipment tracking
   ============================================================ */
.po-execution-panel{border:1px solid #d6e2ea;border-radius:12px;background:#f7fbfd;padding:16px;margin-bottom:14px}
.po-execution-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.po-execution-head>div:first-child strong{display:block;font-size:14px;color:#15324a}
.po-execution-head>div:first-child p{margin:4px 0 0;font-size:11px;line-height:1.45;color:#6f7e8c}
.po-execution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.po-execution-grid>div{min-height:64px;border:1px solid #dce6ed;border-radius:9px;background:#fff;padding:9px 10px;display:flex;flex-direction:column;justify-content:center}
.po-execution-grid span{display:block;font-size:10px;color:#768493;margin-bottom:4px}
.po-execution-grid strong{font-size:12px;color:#24384b;word-break:break-word}
.po-execution-grid small{display:block;margin-top:3px;font-size:9px;color:#8492a0}
.po-execution-history{display:grid;gap:7px}
.po-execution-history-row{border:1px solid #dde6ed;border-radius:8px;background:#fff;padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:center}
.po-execution-history-row>div{display:flex;align-items:center;gap:8px;min-width:0}
.po-execution-history-row>div>strong{font-size:12px;color:#263a4c}
.po-execution-history-row>span{font-size:10px;color:#748292;text-align:right;white-space:nowrap}
.po-execution-history-row>p{grid-column:1/-1;margin:0;font-size:11px;color:#4f6172;line-height:1.45}
.po-delay-note{border-color:#edd9a7;background:#fffaf0;color:#76561d}
.po-delay-note>div,.inventory-note>div{display:flex;flex-direction:column;gap:2px}
.po-delay-note strong,.inventory-note>div>strong{font-size:10px}
.po-delay-note span,.inventory-note>div>span{font-size:11px;line-height:1.45}
@media(max-width:900px){.po-execution-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.po-execution-head{flex-direction:column}.po-execution-grid{grid-template-columns:1fr}.po-execution-history-row{grid-template-columns:1fr}.po-execution-history-row>span{text-align:left;white-space:normal}}


/* ============================================================
   v327 - Orders toolbar regression fix + wider warehouse receipt modal
   ============================================================ */
.orders-v327 .warehouse-section-head {
  align-items: flex-start;
}
.orders-v327 .warehouse-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  margin-left: auto;
}
.orders-v327 .warehouse-toolbar #order-search {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  margin: 0;
}
.orders-v327 .warehouse-toolbar #order-status-filter {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  margin: 0;
}
.orders-v327 .warehouse-toolbar #order-new {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}

/* Receiving inspection has eight columns. Give the modal enough width so
   desktop users can review the complete row without a horizontal scrollbar. */
.modal-panel:has(#po-receipt-form) {
  width: min(1120px, calc(100vw - 40px));
  max-width: 1120px;
}
#po-receipt-form .model-component-table-wrap {
  overflow-x: visible;
}
#po-receipt-form .model-component-table {
  min-width: 0;
  table-layout: fixed;
}
#po-receipt-form .model-component-table th,
#po-receipt-form .model-component-table td {
  padding: 8px 7px;
  font-size: 11px;
  white-space: normal;
  word-break: keep-all;
}
#po-receipt-form .model-component-table th:first-child,
#po-receipt-form .model-component-table td:first-child {
  width: 22%;
}
#po-receipt-form .model-component-table th:not(:first-child),
#po-receipt-form .model-component-table td:not(:first-child) {
  width: 11.14%;
}
#po-receipt-form .model-component-table .field {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding-left: 8px;
  padding-right: 8px;
}

@media (max-width: 980px) {
  .orders-v327 .warehouse-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .orders-v327 .warehouse-toolbar {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
    flex-wrap: wrap;
  }
  .modal-panel:has(#po-receipt-form) {
    width: min(940px, calc(100vw - 24px));
  }
  #po-receipt-form .model-component-table-wrap {
    overflow-x: auto;
  }
  #po-receipt-form .model-component-table {
    min-width: 920px;
    table-layout: auto;
  }
}
@media (max-width: 680px) {
  .orders-v327 .warehouse-toolbar #order-search,
  .orders-v327 .warehouse-toolbar #order-status-filter {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 100%;
  }
}

/* v328 - PO warehouse receipt exception workflow */
.orders-v328 .warehouse-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.orders-v328 .warehouse-toolbar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}
.orders-v328 .warehouse-toolbar #order-search { width:280px; min-width:240px; }
.orders-v328 .warehouse-toolbar #order-status-filter { width:220px; min-width:190px; }
.orders-v328 .warehouse-toolbar #order-new { flex:0 0 auto; white-space:nowrap; }
.po-exception-panel{border:1px solid #ecd4c2;border-radius:12px;background:#fffaf6;padding:16px;margin-bottom:14px}
.po-exception-list{display:grid;gap:10px}
.po-exception-card{border:1px solid #e4d8cf;border-radius:10px;background:#fff;padding:12px}
.po-exception-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.po-exception-card-head>div:first-child strong{display:block;font-size:13px;color:#24384b}
.po-exception-card-head>div:first-child span{display:block;margin-top:3px;font-size:10px;color:#788694}
.po-exception-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:9px}
.po-exception-grid>div{border:1px solid #e4e9ee;border-radius:8px;background:#fafcfd;padding:8px 9px;min-height:54px}
.po-exception-grid span{display:block;font-size:9px;color:#7b8997;margin-bottom:4px}
.po-exception-grid strong{display:block;font-size:11px;color:#263a4c;word-break:break-word}
.po-exception-history{display:grid;gap:4px;margin-top:8px}
.po-exception-history-row{display:grid;grid-template-columns:140px 110px minmax(0,1fr);gap:8px;align-items:start;border-top:1px dashed #e4e8ec;padding-top:5px;font-size:10px;color:#687786}
.po-exception-history-row strong{color:#35485a;font-size:10px}.po-exception-history-row p{margin:0;line-height:1.4}
.po-exception-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}
.po-exception-summary{border:1px solid #dce5eb;border-radius:9px;background:#f7fafc;padding:11px 12px}
.po-exception-summary strong{display:block;font-size:13px;color:#20364b}.po-exception-summary span{display:block;margin-top:4px;font-size:11px;color:#6e7e8d}
.modal-panel:has(#po-exception-response-form),
.modal-panel:has(#po-exception-review-form),
.modal-panel:has(#po-exception-receipt-form),
.modal-panel:has(#po-exception-close-form){width:min(720px,calc(100vw - 32px));max-width:720px}
@media(max-width:1080px){.po-exception-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.orders-v328 .warehouse-section-head{align-items:stretch;flex-direction:column}.orders-v328 .warehouse-toolbar{justify-content:flex-start;flex-wrap:wrap}.orders-v328 .warehouse-toolbar #order-search,.orders-v328 .warehouse-toolbar #order-status-filter{width:min(100%,320px)}.po-exception-grid{grid-template-columns:1fr 1fr}.po-exception-history-row{grid-template-columns:1fr}.po-exception-actions{justify-content:flex-start;flex-wrap:wrap}}

/* ============================================================
   v329 Supply Chain Alerts
   ============================================================ */
.supply-alert-summary{margin-bottom:18px}
.supply-alert-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.supply-alert-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.supply-alert-filters .field{width:190px;min-width:160px;height:44px}
.supply-alert-table th,.supply-alert-table td{text-align:center;vertical-align:middle}
.supply-alert-table .supply-alert-copy{text-align:left;min-width:360px}
.supply-alert-copy strong,.supply-alert-copy span,.supply-alert-copy small{display:block}
.supply-alert-copy span{margin-top:4px;color:#4e5b68;line-height:1.45}
.supply-alert-copy small{margin-top:5px;color:#8a95a3;font-size:11px}
.supply-alert-severity,.supply-alert-status{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.supply-alert-severity.is-critical{background:#fff0f0;color:#b4232d;border:1px solid #f4caca}
.supply-alert-severity.is-warning{background:#fff7e7;color:#956a17;border:1px solid #ead6a5}
.supply-alert-severity.is-info{background:#eef5ff;color:#315f9d;border:1px solid #cedcf0}
.supply-alert-status.is-open{background:#f1f4f7;color:#42505f;border:1px solid #d8dee5}
.supply-alert-status.is-resolved{background:#ecf8f2;color:#227356;border:1px solid #cbe8db}
.supply-alert-row.severity-critical{background:linear-gradient(90deg,rgba(180,35,45,.025),transparent 42%)}
@media(max-width:900px){.supply-alert-toolbar{align-items:stretch;flex-direction:column}.supply-alert-filters{display:grid;grid-template-columns:1fr}.supply-alert-filters .field{width:100%}.supply-alert-table-wrap{overflow-x:auto}.supply-alert-table{min-width:920px}}

/* v330 - monthly subscription billing / settlement */
.settlement-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.settlement-summary-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #dbe2ea;border-radius:14px;padding:16px;min-height:88px}
.settlement-summary-card>i{width:36px;height:36px;border-radius:10px;background:#eef3ff;color:#3457d5;display:grid;place-items:center}
.settlement-summary-card div{display:flex;flex-direction:column;min-width:0}.settlement-summary-card span{font-size:12px;color:#657187;font-weight:700}.settlement-summary-card strong{font-size:22px;line-height:1.2;color:#172033;margin-top:4px}.settlement-summary-card small{font-size:11px;color:#8994a3;margin-top:2px}
.settlement-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px}.settlement-policy{display:flex;flex-direction:column;gap:4px;max-width:820px}.settlement-policy strong{font-size:14px}.settlement-policy span,.settlement-policy small{color:#687587;font-size:12px;line-height:1.5}.settlement-month-tools{display:flex;align-items:flex-end;gap:8px;white-space:nowrap}.settlement-month-tools label{font-size:12px;font-weight:700;color:#657187;padding-bottom:12px}.settlement-month-tools .field{width:155px}
.settlement-tabs{display:flex;gap:6px;border-bottom:1px solid #dde4ec;margin-bottom:14px}.settlement-tabs button{border:0;background:transparent;padding:10px 16px;font-weight:800;color:#667385;cursor:pointer;border-bottom:2px solid transparent}.settlement-tabs button.active{color:#2849c7;border-color:#3457d5}
.settlement-table th,.settlement-table td{text-align:center;vertical-align:middle}.settlement-table td small{display:block;color:#7e8998;font-size:11px;margin-top:3px}.settlement-table td .btn+.btn{margin-left:5px}
.settlement-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#eef1f5;color:#4f5b69;font-size:11px;font-weight:800}.settlement-badge.is-good{background:#e6f7f0;color:#14785b}.settlement-badge.is-warning{background:#fff4d8;color:#8a6500}.settlement-badge.is-alert{background:#fee9e7;color:#b4382d}.settlement-badge.is-info{background:#e8efff;color:#3457d5}
.settlement-integration-note,.settlement-policy-note{display:flex;align-items:flex-start;gap:8px;background:#f7f9fc;border:1px solid #dce3eb;border-radius:10px;padding:10px 12px;color:#677486;font-size:12px;margin-bottom:12px}.settlement-withdraw-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.settlement-notice-sheet{border:1px solid #d9e1ea;border-radius:12px;padding:20px;background:#fff}.settlement-notice-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:2px solid #162b45;padding-bottom:14px}.settlement-notice-head>div{display:flex;flex-direction:column;gap:4px}.settlement-notice-head strong{font-size:18px}.settlement-notice-head span,.settlement-notice-head small{color:#697789}.settlement-notice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.settlement-notice-grid>div{display:flex;flex-direction:column;gap:4px;background:#f8fafc;border-radius:8px;padding:10px}.settlement-notice-grid span{font-size:11px;color:#758194}.settlement-section-title{margin:16px 0 8px}.settlement-detail-row{display:grid;grid-template-columns:120px minmax(160px,1fr) 140px auto;gap:10px;align-items:center;border-bottom:1px solid #edf0f4;padding:9px 4px}.settlement-detail-row span,.settlement-detail-row em,.settlement-detail-row small{font-size:12px;color:#6d7887;font-style:normal}.settlement-detail-row b{font-size:13px}.info-strip{background:#f6f8fb;border:1px solid #dbe3ec;border-radius:10px;padding:12px;color:#5f6b7b}
@media(max-width:1200px){.settlement-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.settlement-toolbar{align-items:stretch;flex-direction:column}.settlement-month-tools{justify-content:flex-end}.settlement-notice-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.settlement-summary-grid{grid-template-columns:1fr 1fr}.settlement-month-tools{flex-wrap:wrap}.settlement-detail-row{grid-template-columns:1fr}.settlement-notice-grid{grid-template-columns:1fr}}


/* v332 customer billing notice */
.settlement-customer-notice{background:#fff;border:1px solid #d6dee8;border-radius:14px;padding:22px;overflow:hidden;word-break:keep-all}
.settlement-customer-notice-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:16px;border-bottom:3px solid #17314e}
.settlement-customer-brand{display:flex;flex-direction:column;gap:5px;min-width:0}.settlement-customer-brand strong{font-size:19px;color:#17314e;letter-spacing:-.01em}.settlement-customer-brand span{font-size:14px;font-weight:800;color:#2c3949}
.settlement-customer-no{text-align:right;min-width:180px}.settlement-customer-no span{display:block;font-size:11px;color:#718094}.settlement-customer-no strong{display:block;font-size:15px;margin-top:4px;color:#172033;white-space:nowrap}
.settlement-customer-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #dce3eb;border-radius:9px;overflow:hidden;margin-top:16px}.settlement-customer-meta>div{padding:11px 13px;border-right:1px solid #e3e8ee;min-width:0}.settlement-customer-meta>div:last-child{border-right:0}.settlement-customer-meta span,.settlement-customer-info-grid span{display:block;font-size:10px;color:#718094;margin-bottom:4px}.settlement-customer-meta strong,.settlement-customer-info-grid strong{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.settlement-customer-section{margin-top:18px}.settlement-customer-section h4{margin:0 0 8px;font-size:13px;color:#17314e}.settlement-customer-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #dce3eb;border-left:1px solid #dce3eb}.settlement-customer-info-grid>div{min-width:0;min-height:62px;padding:11px 13px;border-right:1px solid #dce3eb;border-bottom:1px solid #dce3eb}.settlement-customer-info-grid small{display:block;margin-top:4px;color:#748195;font-size:11px;line-height:1.35;overflow-wrap:anywhere}
.settlement-charge-table{border:1px solid #dce3eb;border-radius:9px;overflow:hidden}.settlement-charge-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}.settlement-charge-row>*{min-width:0;padding:11px 13px;border-right:1px solid #e3e8ee;text-align:right}.settlement-charge-row>*:last-child{border-right:0}.settlement-charge-head{background:#f3f6f9;color:#5f6d7e;font-size:11px;font-weight:800}.settlement-charge-row:not(.settlement-charge-head){border-top:1px solid #e3e8ee}.settlement-charge-row strong{font-size:13px}.settlement-charge-row small{font-size:10px;color:#748195}
.settlement-amount-due{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:12px;padding:15px 18px;border-radius:9px;background:#17314e;color:#fff}.settlement-amount-due span{font-size:11px}.settlement-amount-due strong{font-size:23px;line-height:1.2}.settlement-amount-due small{margin-left:auto;color:#dbe4ed;font-size:11px;text-align:right;white-space:nowrap}
.settlement-customer-policy{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:13px 15px;border:1px solid #edcf7d;border-radius:9px;background:#fff9e8;color:#66501f;font-size:11px;line-height:1.65}.settlement-customer-policy i{margin-top:3px}.settlement-customer-policy strong{display:block;margin-bottom:3px}.settlement-customer-policy p{margin:0}
.settlement-admin-panel{margin-top:16px;padding-top:14px;border-top:1px solid #dce3eb}.settlement-admin-note{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-radius:8px;background:#f5f7fa;color:#687587;font-size:11px;line-height:1.5}.settlement-admin-note i{margin-top:2px}
@media(max-width:760px){.settlement-customer-notice{padding:14px}.settlement-customer-notice-top{flex-direction:column;gap:10px}.settlement-customer-no{text-align:left;min-width:0}.settlement-customer-meta,.settlement-customer-info-grid{grid-template-columns:1fr}.settlement-customer-meta>div{border-right:0;border-bottom:1px solid #e3e8ee}.settlement-customer-meta>div:last-child{border-bottom:0}.settlement-charge-row{grid-template-columns:1fr}.settlement-charge-row>*{text-align:left;border-right:0;border-bottom:1px solid #e3e8ee}.settlement-charge-row>*:last-child{border-bottom:0}.settlement-amount-due{align-items:flex-start;flex-direction:column}.settlement-amount-due small{margin-left:0;text-align:left;white-space:normal}}

/* v333 - billing notice modal fit / internal delivery layout */
.modal-panel.settlement-notice-modal{
  width:min(820px,calc(100vw - 28px));
  max-width:820px;
  max-height:calc(100vh - 20px);
  overflow:auto;
}
.modal-panel.settlement-notice-modal .modal-header{
  padding:14px 18px;
}
.modal-panel.settlement-notice-modal .modal-body{
  padding:15px 17px 16px;
  overflow-x:hidden;
}
.modal-panel.settlement-notice-modal .settlement-customer-notice{
  padding:18px 20px;
}
.modal-panel.settlement-notice-modal .settlement-customer-notice-top{
  gap:18px;
  padding-bottom:12px;
}
.modal-panel.settlement-notice-modal .settlement-customer-meta{
  margin-top:12px;
}
.modal-panel.settlement-notice-modal .settlement-customer-meta>div{
  padding:9px 12px;
}
.modal-panel.settlement-notice-modal .settlement-customer-section{
  margin-top:13px;
}
.modal-panel.settlement-notice-modal .settlement-customer-section h4{
  margin-bottom:6px;
}
.modal-panel.settlement-notice-modal .settlement-customer-info-grid>div{
  min-height:54px;
  padding:9px 12px;
}
.modal-panel.settlement-notice-modal .settlement-charge-row>*{
  padding:9px 12px;
}
.modal-panel.settlement-notice-modal .settlement-amount-due{
  gap:14px;
  margin-top:9px;
  padding:12px 16px;
}
.modal-panel.settlement-notice-modal .settlement-customer-policy{
  gap:9px;
  margin-top:12px;
  padding:11px 14px;
  line-height:1.55;
}
.modal-panel.settlement-notice-modal .settlement-admin-panel{
  margin-top:12px;
  padding-top:11px;
}
.modal-panel.settlement-notice-modal .settlement-admin-note{
  padding:7px 10px;
  line-height:1.45;
}
.modal-panel.settlement-notice-modal .settlement-section-title{
  margin:10px 0 5px;
}
.modal-panel.settlement-notice-modal .settlement-detail-row{
  grid-template-columns:72px minmax(0,1fr) 100px 96px;
  gap:8px;
  min-width:0;
  padding:7px 2px;
}
.modal-panel.settlement-notice-modal .settlement-detail-row>*{
  min-width:0;
}
.modal-panel.settlement-notice-modal .settlement-detail-row>strong{
  overflow-wrap:anywhere;
}
.modal-panel.settlement-notice-modal .settlement-detail-row>.btn{
  width:96px;
  min-width:96px;
  justify-content:center;
  white-space:nowrap;
}
.modal-panel.settlement-notice-modal .empty-inline{
  padding-top:8px;
  padding-bottom:8px;
}
.modal-panel.settlement-notice-modal .modal-actions{
  margin-top:12px;
  padding-top:10px;
}
@media(max-width:760px){
  .modal-panel.settlement-notice-modal{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 12px);
  }
  .modal-panel.settlement-notice-modal .modal-body{padding:12px}
  .modal-panel.settlement-notice-modal .settlement-customer-notice{padding:14px}
  .modal-panel.settlement-notice-modal .settlement-detail-row{
    grid-template-columns:64px minmax(0,1fr) 92px;
  }
  .modal-panel.settlement-notice-modal .settlement-detail-row>.btn{
    grid-column:1/-1;
    width:100%;
    min-width:0;
  }
}


/* v334 - compact customer notice / two-column internal management */
.modal-panel.settlement-notice-modal{
  width:min(760px,calc(100vw - 28px));
  max-width:760px;
  max-height:calc(100vh - 16px);
}
.modal-panel.settlement-notice-modal .modal-header{padding:12px 17px}
.modal-panel.settlement-notice-modal .modal-body{padding:12px 15px 14px}
.modal-panel.settlement-notice-modal .settlement-customer-notice{padding:16px 18px}
.modal-panel.settlement-notice-modal .settlement-customer-notice-top{padding-bottom:10px}
.modal-panel.settlement-notice-modal .settlement-customer-meta{margin-top:10px}
.modal-panel.settlement-notice-modal .settlement-customer-meta>div{padding:8px 11px}
.modal-panel.settlement-notice-modal .settlement-customer-section{margin-top:11px}
.modal-panel.settlement-notice-modal .settlement-customer-info-grid>div{min-height:50px;padding:8px 11px}
.modal-panel.settlement-notice-modal .settlement-charge-row>*{padding:8px 11px}
.modal-panel.settlement-notice-modal .settlement-amount-due{margin-top:8px;padding:10px 14px}
.modal-panel.settlement-notice-modal .settlement-customer-policy{margin-top:10px;padding:9px 12px;line-height:1.5}
.modal-panel.settlement-notice-modal .settlement-admin-panel{margin-top:10px;padding-top:9px}
.modal-panel.settlement-notice-modal .settlement-admin-note{padding:7px 9px}
.modal-panel.settlement-notice-modal .settlement-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:8px}
.modal-panel.settlement-notice-modal .settlement-admin-section{min-width:0;border:1px solid #e1e6ed;border-radius:9px;padding:8px 10px;background:#fff}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-section-title{margin:0 0 4px}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row{grid-template-columns:62px minmax(0,1fr);gap:4px 7px;padding:6px 1px}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>span{grid-column:1}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>strong{grid-column:2;overflow-wrap:anywhere}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>em{grid-column:1}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>small{grid-column:2;overflow-wrap:anywhere}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>.btn{grid-column:2;width:auto;min-width:0;justify-self:end;padding-left:10px;padding-right:10px}
.modal-panel.settlement-notice-modal .settlement-admin-section .empty-inline{padding:10px 2px}
.modal-panel.settlement-notice-modal .modal-actions{margin-top:9px;padding-top:8px}
@media(max-width:760px){
  .modal-panel.settlement-notice-modal{width:calc(100vw - 16px)}
  .modal-panel.settlement-notice-modal .settlement-admin-grid{grid-template-columns:1fr}
}

/* v335 - reduce billing notice modal height without shrinking typography */
.modal-panel.settlement-notice-modal .settlement-customer-meta>div{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 10px;
}
.modal-panel.settlement-notice-modal .settlement-customer-meta span{
  display:inline;
  margin:0;
  flex:0 0 auto;
  white-space:nowrap;
}
.modal-panel.settlement-notice-modal .settlement-customer-meta strong{
  display:inline;
  margin:0;
  min-width:0;
  white-space:nowrap;
}
.modal-panel.settlement-notice-modal .settlement-customer-info-grid>div{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 10px;
  white-space:nowrap;
}
.modal-panel.settlement-notice-modal .settlement-customer-info-grid span,
.modal-panel.settlement-notice-modal .settlement-customer-info-grid strong,
.modal-panel.settlement-notice-modal .settlement-customer-info-grid small{
  display:inline;
  margin:0;
  min-width:0;
  white-space:nowrap;
  overflow-wrap:normal;
}
.modal-panel.settlement-notice-modal .settlement-customer-info-grid span{
  flex:0 0 auto;
}
.modal-panel.settlement-notice-modal .settlement-customer-section{
  margin-top:9px;
}
.modal-panel.settlement-notice-modal .settlement-customer-section h4{
  margin-bottom:5px;
}
.modal-panel.settlement-notice-modal .settlement-admin-grid{
  grid-template-columns:minmax(430px,1.25fr) minmax(230px,.75fr);
  gap:10px;
}
.modal-panel.settlement-notice-modal .settlement-admin-section{
  padding:7px 9px;
}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row{
  grid-template-columns:42px minmax(125px,1fr) 88px auto;
  gap:7px;
  align-items:center;
  padding:5px 1px;
}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>span,
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>strong,
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>em,
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>small,
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>.btn{
  grid-column:auto;
  white-space:nowrap;
  overflow-wrap:normal;
}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>strong{
  overflow:hidden;
  text-overflow:ellipsis;
}
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>.btn{
  justify-self:end;
}
.modal-panel.settlement-notice-modal .settlement-admin-note{
  white-space:nowrap;
  align-items:center;
  padding:6px 9px;
}
.modal-panel.settlement-notice-modal .settlement-admin-note i{
  margin-top:0;
}
.modal-panel.settlement-notice-modal .modal-actions{
  margin-top:7px;
  padding-top:7px;
}
@media(max-width:760px){
  .modal-panel.settlement-notice-modal .settlement-customer-meta>div,
  .modal-panel.settlement-notice-modal .settlement-customer-info-grid>div{
    white-space:normal;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .modal-panel.settlement-notice-modal .settlement-customer-info-grid span,
  .modal-panel.settlement-notice-modal .settlement-customer-info-grid strong,
  .modal-panel.settlement-notice-modal .settlement-customer-info-grid small,
  .modal-panel.settlement-notice-modal .settlement-admin-note{
    white-space:normal;
  }
  .modal-panel.settlement-notice-modal .settlement-admin-grid{
    grid-template-columns:1fr;
  }
  .modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row{
    grid-template-columns:56px minmax(0,1fr) 90px;
  }
  .modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>.btn{
    grid-column:1/-1;
    width:100%;
  }
}
/* v335 follow-up: preserve full internal text without clipping */
.modal-panel.settlement-notice-modal .settlement-admin-section .settlement-detail-row>strong{
  overflow:visible;
  text-overflow:clip;
}
.modal-panel.settlement-notice-modal .settlement-admin-note{
  white-space:normal;
}

/* v340 - bank transaction bulk import */
.bank-import-note{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;padding:13px 15px;border:1px solid #dce3eb;border-radius:11px;background:#f7f9fc;color:#5f6c7c}
.bank-import-note>i{margin-top:3px;color:#3457d5}.bank-import-note>div{display:flex;flex-direction:column;gap:3px;min-width:0}.bank-import-note strong{font-size:14px;color:#253246}.bank-import-note span,.bank-import-note small{font-size:12px;line-height:1.5}.bank-import-note small{color:#7a8697}
.bank-upload-panel{margin-bottom:16px;padding:14px;border:1px solid #dce3eb;border-radius:12px;background:#fff}.bank-file-row{display:flex;align-items:center;gap:12px;min-height:38px}.bank-file-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5f6c7c;font-size:12px}.bank-file-button{flex:0 0 auto}
.bank-mapping-title,.bank-preview-title{margin-top:14px;margin-bottom:8px;font-size:12px;color:#647184}.bank-mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bank-mapping-grid label{display:flex;flex-direction:column;gap:5px;min-width:0}.bank-mapping-grid label>span{font-size:11px;font-weight:800;color:#667385}.bank-mapping-grid .field{width:100%}
.bank-preview-table th,.bank-preview-table td{text-align:left}.bank-upload-actions{display:flex;justify-content:flex-end;margin-top:12px}.bank-import-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px;align-items:start}.bank-import-grid>section{min-width:0;border:1px solid #e0e6ed;border-radius:11px;background:#fff;padding:12px}.bank-import-grid>section>h4{margin:0 0 9px;font-size:13px;color:#263448}.bank-history-table td:first-child{text-align:left}.bank-review-scroll{max-height:430px;overflow:auto}
@media(max-width:1100px){.bank-import-grid{grid-template-columns:1fr}.bank-mapping-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.bank-file-row{align-items:flex-start;flex-direction:column}.bank-mapping-grid{grid-template-columns:1fr}.bank-upload-actions .btn{width:100%}.bank-import-grid>section{padding:9px}}

/* ============================================================
   WPPEI CRM v348 - Integrated Executive Dashboard
   ============================================================ */
.v348-exec-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 16px;padding:28px 30px;border:1px solid #202b38;border-radius:14px;background:linear-gradient(126deg,#101822 0%,#182738 64%,#22364c 100%);color:#fff;box-shadow:0 18px 42px rgba(16,24,34,.13);overflow:hidden;position:relative}
.v348-exec-hero:after{content:'';position:absolute;right:-70px;top:-95px;width:300px;height:300px;border:1px solid rgba(214,179,102,.15);border-radius:50%;box-shadow:0 0 0 32px rgba(214,179,102,.035),0 0 0 68px rgba(214,179,102,.018)}
.v348-exec-hero>div{position:relative;z-index:1}.v348-eyebrow{display:flex;align-items:center;gap:9px;color:#b9c6d2;font-size:10px;font-weight:750;letter-spacing:.12em}.v348-eyebrow i{width:28px;height:1px;background:#b89955}.v348-exec-hero h1{margin:13px 0 8px;font-size:clamp(29px,3vw,43px);line-height:1;font-weight:680;letter-spacing:-.055em}.v348-exec-hero p{max-width:880px;margin:0;color:#acbac8;font-size:13px;line-height:1.6}.v348-hero-side{min-width:190px;padding-left:24px;border-left:1px solid rgba(255,255,255,.14);text-align:right}.v348-hero-side span,.v348-hero-side strong,.v348-hero-side em{display:block}.v348-hero-side span{color:#9bacbb;font-size:10px}.v348-hero-side strong{margin-top:7px;font-size:15px;font-weight:650}.v348-hero-side em{margin-top:12px;color:#e4c77f;font-size:12px;font-style:normal;font-weight:700}
.v348-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.v348-kpi{min-height:122px;display:grid;grid-template-columns:38px minmax(0,1fr) 12px;align-items:center;gap:12px;padding:16px 15px;border:1px solid #d7dce1;border-radius:10px;background:#fff;color:inherit;box-shadow:0 5px 18px rgba(20,31,44,.035);position:relative;overflow:hidden}.v348-kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v348-tone,#5269d3)}.v348-kpi:hover{border-color:#bec7d1;box-shadow:0 10px 24px rgba(20,31,44,.07)}.v348-kpi-blue{--v348-tone:#4d6b9f}.v348-kpi-violet{--v348-tone:#73609b}.v348-kpi-green{--v348-tone:#3f7e69}.v348-kpi-amber{--v348-tone:#a97735}.v348-kpi-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--v348-tone) 10%,white);color:var(--v348-tone);font-size:13px}.v348-kpi-copy{min-width:0}.v348-kpi-copy small,.v348-kpi-copy strong,.v348-kpi-copy em{display:block}.v348-kpi-copy small{color:#69737e;font-size:11px;font-weight:650}.v348-kpi-copy strong{margin-top:8px;color:#18212a;font-size:22px;line-height:1.1;font-weight:720;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v348-kpi-copy em{margin-top:7px;color:#87919b;font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v348-kpi-arrow{color:#b0b7bf;font-size:8px}
.v348-two-col{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(340px,.78fr);gap:14px;margin-bottom:14px}.v348-panel{padding:20px;border:1px solid #d8dde2;background:#fff}.v348-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #e2e6e9}.v348-panel-head>div:first-child>span{display:block;margin-bottom:5px;color:#536a89;font-size:9px;font-weight:800;letter-spacing:.13em}.v348-panel-head h2{margin:0;color:#19222b;font-size:17px;font-weight:700;letter-spacing:-.025em}.v348-panel-head p{margin:6px 0 0;color:#7f8993;font-size:11px;line-height:1.5}.v348-panel-head>b{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#283a50;color:#fff;font-size:14px}.v348-pipeline-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.v348-pipeline-columns>div+div{padding-left:20px;border-left:1px solid #e5e8eb}.v348-pipeline-columns h3{margin:0 0 10px;color:#46515c;font-size:12px;font-weight:750}.v348-bar-row{margin:12px 0}.v348-bar-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.v348-bar-row span{color:#747f89;font-size:10px}.v348-bar-row strong{color:#2e3944;font-size:11px}.v348-bar-track{height:6px;overflow:hidden;border-radius:999px;background:#edf0f2}.v348-bar-track i{display:block;height:100%;border-radius:inherit}.v348-bar-blue{background:#5877a6}.v348-bar-violet{background:#78669d}.v348-bar-green{background:#4b856f}.v348-bar-amber{background:#b18448}.v348-bar-neutral{background:#7e8a95}
.v348-action-list{display:grid}.v348-action{min-height:56px;display:grid;grid-template-columns:32px minmax(0,1fr) auto 10px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #e8ebee;color:inherit}.v348-action:last-child{border-bottom:0}.v348-action:hover strong{color:#345c8c}.v348-action-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:#eef2f5;color:#52677e;font-size:10px}.v348-action-violet .v348-action-icon{background:#f1eef7;color:#725f96}.v348-action-blue .v348-action-icon{background:#edf3f9;color:#4d6d91}.v348-action-green .v348-action-icon{background:#edf7f2;color:#3d7a64}.v348-action-amber .v348-action-icon{background:#f9f2e9;color:#9a6d34}.v348-action strong,.v348-action small{display:block}.v348-action strong{color:#34404b;font-size:11px;font-weight:680}.v348-action small{margin-top:3px;color:#8a949e;font-size:9px}.v348-action b{color:#202a34;font-size:17px;font-weight:700}.v348-action>i{color:#b7bdc4;font-size:7px}
.v348-insight-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-bottom:14px}.v348-collection-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:center}.v348-ring{--pct:0;width:126px;height:126px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#4c7e6d calc(var(--pct)*1%),#e7ebee 0);position:relative}.v348-ring:before{content:'';position:absolute;width:96px;height:96px;border-radius:50%;background:#fff}.v348-ring>div{position:relative;z-index:1;text-align:center}.v348-ring strong{font-size:32px;font-weight:720;color:#20302a}.v348-ring span{font-size:12px;color:#607069}.v348-ring small{display:block;margin-top:3px;color:#89928e;font-size:9px}.v348-money-list{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e1e5e8;border-radius:9px;overflow:hidden}.v348-money-list>div{min-height:72px;padding:14px;border-bottom:1px solid #e8ebed}.v348-money-list>div:nth-child(odd){border-right:1px solid #e8ebed}.v348-money-list>div:nth-last-child(-n+2){border-bottom:0}.v348-money-list span,.v348-money-list strong{display:block}.v348-money-list span{color:#7c8791;font-size:10px}.v348-money-list strong{margin-top:7px;color:#25313c;font-size:15px}.v348-money-list strong.is-warning{color:#9a672f}.v348-status-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px}.v348-status-cards>div{min-height:89px;padding:14px;border:1px solid #e0e4e8;border-radius:9px;background:#fafbfc}.v348-status-cards span,.v348-status-cards strong{display:block}.v348-status-cards span{color:#6e7984;font-size:10px}.v348-status-cards span i{width:20px;color:#58708c}.v348-status-cards strong{margin-top:12px;color:#1f2933;font-size:24px;font-weight:720}
.v348-carbon-panel{margin-bottom:4px}.v348-carbon-head{align-items:center}.v348-carbon-head>div:last-child{min-width:215px}.v348-carbon-head label{display:block;margin-bottom:6px;color:#73808c;font-size:10px;font-weight:650}.v348-carbon-head .field{height:37px;min-height:37px}.v348-carbon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.v348-carbon-card{padding:15px;border:1px solid #dce1e5;border-radius:10px;background:#fbfcfd}.v348-carbon-card-head{display:flex;justify-content:space-between;gap:12px}.v348-carbon-card-head strong,.v348-carbon-card-head small{display:block}.v348-carbon-card-head strong{color:#26323e;font-size:12px}.v348-carbon-card-head small{margin-top:4px;color:#89939d;font-size:9px}.v348-carbon-card-head>span{max-width:42%;color:#81909b;font-size:9px;text-align:right}.v348-carbon-price{margin:15px 0 10px}.v348-carbon-price strong,.v348-carbon-price span{display:block}.v348-carbon-price strong{color:#18222c;font-size:20px;font-weight:720;letter-spacing:-.03em}.v348-carbon-price span{margin-top:4px;color:#537290;font-size:10px;font-weight:650}.v348-carbon-bar{height:5px;overflow:hidden;border-radius:999px;background:#e9edf0}.v348-carbon-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#496987,#9a7c45)}.v348-carbon-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:9px;margin-top:10px}.v348-carbon-meta>span{color:#8c969f;font-size:8px;line-height:1.4}.v348-carbon-meta a{display:inline-flex;align-items:center;gap:4px;color:#55728e;font-size:8px;font-weight:650;text-align:right}.v348-carbon-lower{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,.7fr);gap:14px}.v348-carbon-trend{min-height:292px;padding:14px;border:1px solid #e0e4e7;border-radius:10px;background:#fff}.v348-subhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.v348-subhead strong{color:#34404b;font-size:11px}.v348-subhead span{color:#8a949d;font-size:9px}.v348-line-chart{display:block;width:100%;height:250px}.v348-line-chart .grid line{stroke:#e8ebee;stroke-width:1}.v348-line-chart .grid text,.v348-line-chart .labels text{fill:#8a949e;font-size:9px}.v348-line-chart .trend{fill:none;stroke:#567493;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.v348-line-chart circle{fill:#fff;stroke:#567493;stroke-width:3}.v348-chart-empty,.v348-chart-single{min-height:225px;display:grid;place-items:center;align-content:center;text-align:center;color:#87919b}.v348-chart-single strong{color:#243442;font-size:34px}.v348-chart-single span{margin-top:5px}.v348-chart-single small{margin-top:7px}.v348-carbon-note{display:flex;gap:12px;padding:18px;border:1px solid #dfd5bd;border-radius:10px;background:#fffaf0;color:#5a513f}.v348-carbon-note>i{margin-top:2px;color:#9d7a35}.v348-carbon-note strong{font-size:11px}.v348-carbon-note p{margin:8px 0 10px;color:#726750;font-size:10px;line-height:1.65}.v348-carbon-note small{color:#8f8269;font-size:9px;line-height:1.55}
@media(max-width:1280px){.v348-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v348-two-col,.v348-insight-grid{grid-template-columns:1fr}.v348-carbon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.v348-pipeline-columns{grid-template-columns:1fr}.v348-pipeline-columns>div+div{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid #e5e8eb}.v348-carbon-lower{grid-template-columns:1fr}.v348-exec-hero{align-items:flex-start;flex-direction:column}.v348-hero-side{width:100%;padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.14);text-align:left}}
@media(max-width:640px){.v348-kpi-grid,.v348-carbon-grid,.v348-status-cards{grid-template-columns:1fr}.v348-exec-hero{padding:23px 20px}.v348-exec-hero h1{font-size:30px}.v348-kpi{min-height:106px}.v348-panel{padding:16px}.v348-collection-body{grid-template-columns:1fr}.v348-ring{margin:auto}.v348-money-list{grid-template-columns:1fr}.v348-money-list>div{border-right:0!important;border-bottom:1px solid #e8ebed!important}.v348-money-list>div:last-child{border-bottom:0!important}.v348-carbon-head{align-items:stretch;flex-direction:column}.v348-carbon-head>div:last-child{min-width:0;width:100%}}

/* ============================================================
   WPPEI CRM v350 - Carbon market intelligence refinement
   ============================================================ */
.v350-carbon-panel{overflow:hidden}.v350-carbon-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:-2px 0 16px}.v350-carbon-summary-card{min-height:84px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:center;padding:13px 14px;border:1px solid #dfe4e8;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfcfd)}.v350-carbon-summary-card>span{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#edf2f7;color:#536f8b;font-size:12px}.v350-carbon-summary-card small,.v350-carbon-summary-card strong,.v350-carbon-summary-card em{display:block}.v350-carbon-summary-card small{color:#7b8792;font-size:9px;font-weight:700}.v350-carbon-summary-card strong{margin-top:5px;color:#1f2b35;font-size:19px;font-weight:730;letter-spacing:-.03em}.v350-carbon-summary-card em{margin-top:4px;color:#8a949d;font-size:8px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v350-carbon-analytics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;margin-bottom:16px}.v350-carbon-compare,.v350-carbon-trend{min-height:308px;padding:14px;border:1px solid #e0e4e7;border-radius:10px;background:#fff}.v350-carbon-ranking{display:grid;gap:13px;padding:8px 2px 0}.v350-carbon-rank-row{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(160px,1.2fr) 86px;gap:12px;align-items:center}.v350-carbon-rank-label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center}.v350-carbon-rank-label>b{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:#f1f3f5;color:#7a858f;font-size:8px}.v350-carbon-rank-label strong,.v350-carbon-rank-label small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v350-carbon-rank-label strong{color:#303c47;font-size:10px}.v350-carbon-rank-label small{margin-top:2px;color:#9099a1;font-size:8px}.v350-carbon-rank-track{height:8px;overflow:hidden;border-radius:999px;background:#edf0f2}.v350-carbon-rank-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#526f8c,#b29658)}.v350-carbon-rank-value{text-align:right}.v350-carbon-rank-value strong,.v350-carbon-rank-value small{display:block}.v350-carbon-rank-value strong{color:#25323e;font-size:12px}.v350-carbon-rank-value small{margin-top:2px;color:#8d979f;font-size:8px}.v350-carbon-market-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 10px}.v350-carbon-market-head strong,.v350-carbon-market-head span{display:block}.v350-carbon-market-head strong{color:#33404b;font-size:11px}.v350-carbon-market-head span{margin-top:3px;color:#8c969f;font-size:9px}.v350-carbon-market-head em{color:#687989;font-size:9px;font-style:normal;font-weight:650}.v350-carbon-note{margin-top:16px}.v350-carbon-empty{grid-column:1/-1;min-height:150px;display:grid;place-items:center;align-content:center;gap:7px;border:1px dashed #d9dfe4;border-radius:10px;background:#fbfcfd;color:#84909a;text-align:center}.v350-carbon-empty i{font-size:20px;color:#6d8298}.v350-carbon-empty strong{color:#47545f;font-size:12px}.v350-carbon-empty span{font-size:9px}.v350-carbon-trend .v348-line-chart{height:250px}
@media(max-width:1280px){.v350-carbon-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.v350-carbon-analytics{grid-template-columns:1fr}.v350-carbon-compare,.v350-carbon-trend{min-height:280px}}
@media(max-width:720px){.v350-carbon-summary{grid-template-columns:1fr}.v350-carbon-rank-row{grid-template-columns:minmax(120px,1fr) minmax(90px,1fr) 72px;gap:8px}.v350-carbon-market-head{align-items:flex-start;flex-direction:column}.v350-carbon-market-head em{display:none}}

/* ============================================================
   WPPEI CRM v351 - 12 month trends + sustainability/carbon value
   ============================================================ */
.v351-trends-panel{margin-bottom:14px}.v351-trends-panel>.v348-panel-head>em{color:#7f8a94;font-size:9px;font-style:normal}.v351-trend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.v351-trend-card{min-width:0;padding:14px;border:1px solid #dfe4e8;border-radius:10px;background:#fff}.v351-trend-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}.v351-trend-card>div:first-child strong{color:#33414d;font-size:11px}.v351-trend-card>div:first-child span{color:#64798b;font-size:10px;font-weight:700}.v351-trend-svg{display:block;width:100%;height:210px}.v351-trend-svg .grid line{stroke:#e8ecef;stroke-width:1}.v351-trend-svg .grid text,.v351-trend-svg .labels text,.v351-bars text{fill:#8a959e;font-size:8px}.v351-trend-svg .series{fill:none;stroke:#567795;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.v351-trend-svg circle{fill:#fff;stroke:#567795;stroke-width:2.5}.v351-chart-wrap{position:relative}.v351-chart-legend{display:flex;gap:12px;justify-content:flex-end;min-height:18px;color:#7c8790;font-size:8px}.v351-chart-legend span{display:inline-flex;align-items:center;gap:4px}.v351-chart-legend i{width:7px;height:7px;border-radius:2px;background:#587b99}.v351-chart-legend i.b{background:#93a276}.v351-bars rect.a{fill:#587b99}.v351-bars rect.b{fill:#93a276}.v351-chart-empty{min-height:210px;display:grid;place-items:center;color:#88939c;font-size:10px}

.v351-sustainability-panel{margin-bottom:14px;background:linear-gradient(180deg,#fff 0%,#fbfcfa 100%)}.v351-sustainability-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.v351-sustainability-kpis>div{min-height:105px;padding:14px;border:1px solid #dde4df;border-radius:10px;background:#fff}.v351-sustainability-kpis span,.v351-sustainability-kpis strong,.v351-sustainability-kpis em{display:block}.v351-sustainability-kpis span{color:#6e7b73;font-size:9px;font-weight:700}.v351-sustainability-kpis span i{width:20px;color:#5d806f}.v351-sustainability-kpis strong{margin-top:13px;color:#24342c;font-size:21px;font-weight:730;letter-spacing:-.03em}.v351-sustainability-kpis strong small{font-size:9px;color:#7a8880;font-weight:600}.v351-sustainability-kpis em{margin-top:7px;color:#8b958f;font-size:8px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v351-sustainability-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.v351-sustainability-grid>article{min-height:280px;padding:14px;border:1px solid #dfe5e1;border-radius:10px;background:#fff}.v351-performance-bars{height:220px;display:flex;align-items:stretch;gap:8px;padding:15px 6px 0}.v351-performance-bar{min-width:0;flex:1;display:grid;grid-template-rows:minmax(0,1fr) 18px;gap:5px;text-align:center}.v351-performance-bar>div{height:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid #e7ece8}.v351-performance-bar i{position:relative;display:block;width:min(25px,72%);min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#5f8874,#9aaf83)}.v351-performance-bar i span{position:absolute;left:50%;top:-17px;transform:translateX(-50%);color:#6b7870;font-size:7px;white-space:nowrap}.v351-performance-bar small{color:#89938d;font-size:7px}.v351-performance-empty{min-height:215px;display:grid;place-items:center;align-content:center;gap:7px;color:#87918b;text-align:center}.v351-performance-empty i{font-size:22px;color:#71917f}.v351-performance-empty strong{color:#536158;font-size:11px}.v351-performance-empty span{max-width:360px;font-size:8px;line-height:1.5}.v351-value-list{display:grid;gap:15px;padding:12px 2px}.v351-value-list>div{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(140px,1.2fr) 100px;gap:12px;align-items:center}.v351-value-list span strong,.v351-value-list span small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v351-value-list span strong{color:#33433a;font-size:10px}.v351-value-list span small{margin-top:3px;color:#919a94;font-size:8px}.v351-value-list em{height:8px;overflow:hidden;border-radius:999px;background:#edf1ee}.v351-value-list em i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#678b78,#b19b64)}.v351-value-list b{text-align:right;color:#334239;font-size:11px}.v351-value-empty{min-height:215px;display:grid;place-items:center;color:#87928c;text-align:center;font-size:9px}.v351-sustainability-note{display:flex;align-items:flex-start;gap:9px;margin-top:13px;padding:11px 13px;border:1px solid #dce6df;border-radius:9px;background:#f6faf7;color:#66776c;font-size:8px;line-height:1.6}.v351-sustainability-note i{margin-top:2px;color:#638171}

.modal-panel.v351-sustainability-modal-panel{width:min(920px,calc(100vw - 24px));max-width:920px;max-height:calc(100vh - 24px)}.v351-sustainability-modal{display:grid;gap:12px}.v351-modal-section{padding:14px;border:1px solid #e0e5e2;border-radius:10px;background:#fff}.v351-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}.v351-modal-head strong,.v351-modal-head span{display:block}.v351-modal-head strong{color:#334139;font-size:12px}.v351-modal-head span{margin-top:4px;color:#87918b;font-size:9px;line-height:1.45}.v351-modal-section .field-label+small,.v351-modal-section small{display:block;margin-top:4px;color:#8b958f;font-size:8px;line-height:1.4}.v351-inline-actions{display:flex;justify-content:flex-end;margin-top:10px}.v351-modal-note{display:flex;gap:9px;padding:10px 12px;border-radius:9px;background:#f7f9f7;color:#748077;font-size:8px;line-height:1.55}.v351-modal-note i{margin-top:2px;color:#688170}
@media(max-width:1280px){.v351-sustainability-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.v351-trend-grid,.v351-sustainability-grid{grid-template-columns:1fr}}
@media(max-width:700px){.v351-sustainability-kpis{grid-template-columns:1fr}.v351-value-list>div{grid-template-columns:minmax(95px,1fr) minmax(80px,1fr) 78px;gap:7px}.v351-performance-bars{gap:4px}.v351-sustainability-panel>.v348-panel-head{align-items:flex-start;flex-direction:column}.v351-sustainability-panel>.v348-panel-head .btn{width:100%}}

/* ============================================================
   WPPEI CRM v352 - Global business footprint & portfolio intelligence
   ============================================================ */
.v352-global-panel{margin-bottom:14px;background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
.v352-global-panel>.v348-panel-head>em{color:#748492;font-size:9px;font-style:normal;font-weight:650}
.v352-global-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.v352-map-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);gap:12px;margin-bottom:12px}
.v352-map-card,.v352-country-card,.v352-portfolio-grid>article,.v352-region-wrap{min-width:0;padding:14px;border:1px solid #dfe5ea;border-radius:10px;background:#fff}
.v352-map-card{overflow:hidden;background:radial-gradient(circle at 75% 15%,rgba(91,124,153,.08),transparent 38%),linear-gradient(180deg,#fbfdff,#f7fafc)}
.v352-world-map{display:block;width:100%;height:auto;max-height:390px;margin-top:6px}.v352-world-map .grid line{stroke:#e4eaf0;stroke-width:1;stroke-dasharray:3 7}.v352-world-map .land polygon{fill:#e8eef3;stroke:#d2dce5;stroke-width:1.4}.v352-world-map .v352-map-node>circle:first-child{fill:rgba(53,91,126,.24);stroke:#496f91;stroke-width:2}.v352-world-map .v352-map-node .core{fill:#365d80;stroke:#fff;stroke-width:1.5}.v352-world-map .v352-map-label rect{fill:rgba(255,255,255,.94);stroke:#d9e2e9;stroke-width:1}.v352-world-map .v352-map-label text{fill:#3f5060;font-size:10px;font-weight:700;dominant-baseline:middle}.v352-map-empty{min-height:310px;display:grid;place-items:center;align-content:center;gap:8px;color:#82909c;text-align:center}.v352-map-empty i{font-size:27px;color:#66839c}.v352-map-empty strong{font-size:12px;color:#455767}.v352-map-empty span{font-size:9px;max-width:390px;line-height:1.5}
.v352-map-legend{display:flex;align-items:center;gap:10px;margin-top:5px;padding-top:9px;border-top:1px solid #e8edf1;color:#788793;font-size:8px}.v352-map-legend>span{display:flex;align-items:center;gap:5px;white-space:nowrap;font-weight:700;color:#5c7081}.v352-map-legend>span i{width:9px;height:9px;border-radius:50%;background:rgba(53,91,126,.28);border:1.5px solid #496f91}.v352-map-legend small{margin-left:auto;text-align:right;line-height:1.45}
.v352-country-list{display:grid;gap:7px;margin-top:4px}.v352-country-row{display:grid;grid-template-columns:25px minmax(115px,.9fr) minmax(145px,1fr) minmax(80px,.75fr) minmax(104px,.7fr);gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf1f4}.v352-country-row:last-child{border-bottom:0}.v352-country-row>b{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:#f0f3f6;color:#84909b;font-size:8px}.v352-country-row .country strong,.v352-country-row .country small,.v352-country-row .value strong,.v352-country-row .value small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v352-country-row .country strong{font-size:10px;color:#354654}.v352-country-row .country small{margin-top:2px;font-size:7px;color:#929ca5}.v352-country-row .metrics{display:flex;gap:6px;flex-wrap:wrap}.v352-country-row .metrics em{font-size:7px;color:#778591;font-style:normal;background:#f6f8fa;border-radius:5px;padding:3px 5px}.v352-country-row .track{height:7px;overflow:hidden;border-radius:999px;background:#edf1f4}.v352-country-row .track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#527493,#9ba985)}.v352-country-row .value{text-align:right}.v352-country-row .value strong{font-size:9px;color:#3e5263}.v352-country-row .value small{margin-top:2px;font-size:7px;color:#909ba4}
.v352-region-wrap{margin-bottom:12px}.v352-region-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:8px}.v352-region-cards article{min-width:0;padding:11px 12px;border:1px solid #e2e7eb;border-radius:9px;background:linear-gradient(180deg,#fff,#fafcfd)}.v352-region-cards article>span{display:block;color:#71808d;font-size:8px;font-weight:750}.v352-region-cards article>strong{display:block;margin-top:7px;color:#304452;font-size:18px;letter-spacing:-.03em}.v352-region-cards article>strong small{font-size:8px;color:#8d98a1;font-weight:600}.v352-region-cards article>div{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.v352-region-cards article>div em{padding:3px 5px;border-radius:5px;background:#f2f5f7;color:#7a8792;font-size:7px;font-style:normal}.v352-region-cards article>b{display:block;margin-top:9px;padding-top:8px;border-top:1px solid #edf1f3;color:#526f87;font-size:9px}.v352-region-cards article>b small{color:#99a2a9;font-size:7px;font-weight:600}
.v352-portfolio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.v352-portfolio-grid>article{min-height:285px}.v352-model-list,.v352-supplier-list{display:grid;gap:9px;margin-top:7px}.v352-model-list>div{display:grid;grid-template-columns:minmax(145px,.9fr) minmax(100px,1.15fr) 68px;gap:10px;align-items:center}.v352-model-list>div>span{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 7px;align-items:center}.v352-model-list>div>span>b{grid-row:1/3;display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#f0f4f6;color:#83909a;font-size:7px}.v352-model-list>div>span>strong,.v352-model-list>div>span>small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v352-model-list>div>span>strong{font-size:9px;color:#394c5b}.v352-model-list>div>span>small{font-size:7px;color:#929da5}.v352-model-list>div>em{height:7px;overflow:hidden;border-radius:999px;background:#eef2f4}.v352-model-list>div>em i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#526f8c,#a79261)}.v352-model-list>div>strong{text-align:right;font-size:10px;color:#42586a}.v352-model-list>div>strong small{font-size:7px;color:#929ca4;font-weight:600}
.v352-supplier-list>div{display:grid;grid-template-columns:minmax(115px,.85fr) minmax(90px,1.15fr) 58px 58px;gap:9px;align-items:center;padding:6px 0;border-bottom:1px solid #edf1f3}.v352-supplier-list>div:last-child{border-bottom:0}.v352-supplier-list>div>span:first-child strong,.v352-supplier-list>div>span:first-child small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v352-supplier-list>div>span:first-child strong{font-size:9px;color:#3a4c5a}.v352-supplier-list>div>span:first-child small{margin-top:2px;font-size:7px;color:#919ca4}.v352-supplier-list>div>em{height:7px;overflow:hidden;border-radius:999px;background:#eef2f4}.v352-supplier-list>div>em i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#697f94,#91a787)}.v352-supplier-list .supplier-meta{text-align:right}.v352-supplier-list .supplier-meta b,.v352-supplier-list .supplier-meta small{display:block}.v352-supplier-list .supplier-meta b{font-size:10px;color:#435868}.v352-supplier-list .supplier-meta small{font-size:7px;color:#929da5}
.v352-list-empty{min-height:220px;display:grid;place-items:center;color:#8c98a2;text-align:center;font-size:9px}.v352-global-note{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 12px;border:1px solid #dfe6eb;border-radius:9px;background:#f7fafc;color:#6d7e8b;font-size:8px;line-height:1.55}.v352-global-note i{margin-top:2px;color:#607f99}
@media(max-width:1360px){.v352-map-layout{grid-template-columns:1fr}.v352-country-row{grid-template-columns:25px minmax(130px,.9fr) minmax(140px,1fr) minmax(100px,.8fr) minmax(110px,.7fr)}.v352-region-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1120px){.v352-global-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.v352-portfolio-grid{grid-template-columns:1fr}.v352-world-map{max-height:none}}
@media(max-width:760px){.v352-global-kpis,.v352-region-cards{grid-template-columns:1fr}.v352-country-row{grid-template-columns:24px minmax(110px,1fr) 76px}.v352-country-row .metrics,.v352-country-row .track{display:none}.v352-map-legend{align-items:flex-start;flex-direction:column}.v352-map-legend small{margin-left:0;text-align:left}.v352-model-list>div{grid-template-columns:minmax(120px,1fr) 68px}.v352-model-list>div>em{display:none}.v352-supplier-list>div{grid-template-columns:minmax(100px,1fr) 52px 52px}.v352-supplier-list>div>em{display:none}}

/* ============================================================
   WPPEI CRM v353 - Executive Forecast & Risk intelligence
   ============================================================ */
.v353-forecast-risk-panel{margin-bottom:14px;background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
.v353-forecast-risk-panel>.v348-panel-head{align-items:flex-start}
.v353-executive-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px;margin-bottom:12px}
.v353-target-card,.v353-outlook-card,.v353-risk-card{min-width:0;padding:14px;border:1px solid #dfe5ea;border-radius:10px;background:#fff}
.v353-target-list{display:grid;gap:9px;margin-top:8px}.v353-target-row{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(100px,1.15fr) 45px;gap:10px;align-items:center}.v353-target-row>span strong,.v353-target-row>span small{display:block}.v353-target-row>span strong{font-size:9px;color:#3c4e5c}.v353-target-row>span small{margin-top:2px;color:#8c98a2;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v353-target-row>em{height:8px;overflow:hidden;border-radius:999px;background:#edf1f4}.v353-target-row>em i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f7393,#83a286)}.v353-target-row>b{text-align:right;color:#415769;font-size:9px}.v353-target-memo{display:flex;align-items:flex-start;gap:7px;margin:11px 0 0;padding:8px 9px;border-radius:7px;background:#f7f9fa;color:#768590;font-size:7px;line-height:1.5}.v353-target-memo i{margin-top:2px;color:#71889b}
.v353-outlook-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 12px}.v353-outlook-summary>div{padding:9px 10px;border:1px solid #e4e9ed;border-radius:8px;background:#fafcfd}.v353-outlook-summary span,.v353-outlook-summary strong{display:block}.v353-outlook-summary span{font-size:7px;color:#85919b}.v353-outlook-summary strong{margin-top:5px;color:#344a5c;font-size:11px}
.v353-forecast-chart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-height:190px}.v353-forecast-chart article{display:grid;grid-template-rows:auto 1fr auto;min-width:0;padding:10px;border:1px solid #e4e9ed;border-radius:9px;background:linear-gradient(180deg,#fff,#fafcfd)}.v353-forecast-month strong,.v353-forecast-month small{display:block}.v353-forecast-month strong{font-size:9px;color:#3d5060}.v353-forecast-month small{margin-top:2px;font-size:7px;color:#8c98a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v353-forecast-bars{display:flex;align-items:flex-end;justify-content:center;gap:12px;height:105px;padding-top:10px}.v353-forecast-bars>span{display:grid;grid-template-rows:1fr auto;align-items:end;width:28px;height:100%;gap:4px;text-align:center}.v353-forecast-bars>span i{display:block;align-self:end;min-height:4px;border-radius:5px 5px 2px 2px;background:#587994}.v353-forecast-bars>span:nth-child(2) i{background:#7e9b82}.v353-forecast-bars>span small{font-size:6px;color:#8b969f}.v353-forecast-foot{display:flex;align-items:baseline;justify-content:center;gap:4px;padding-top:7px;border-top:1px solid #edf1f3}.v353-forecast-foot b{color:#41596b;font-size:11px}.v353-forecast-foot span{color:#8b979f;font-size:6px}
.v353-risk-card{margin-bottom:10px}.v353-risk-layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:18px;align-items:center;margin-top:5px}.v353-radar{min-width:0;text-align:center}.v353-radar svg{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}.v353-radar .grid polygon,.v353-radar .grid line{fill:none;stroke:#dfe6eb;stroke-width:1}.v353-radar .risk{fill:rgba(74,104,130,.18);stroke:#4a6882;stroke-width:2}.v353-radar text{fill:#677986;font-size:8px;font-weight:700}.v353-radar>small{display:block;margin-top:-3px;color:#9aa3aa;font-size:7px}.v353-risk-list{display:grid;gap:7px}.v353-risk-list>a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid #e2e7eb;border-radius:8px;background:#fbfcfd;text-decoration:none}.v353-risk-list>a>span{display:grid;grid-template-columns:25px minmax(0,1fr);gap:0 8px;align-items:center}.v353-risk-list>a>span>i{grid-row:1/3;display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#eef2f5;color:#687d8e}.v353-risk-list>a strong,.v353-risk-list>a small{display:block;min-width:0}.v353-risk-list>a strong{font-size:9px;color:#3e5060}.v353-risk-list>a small{margin-top:2px;color:#87939d;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v353-risk-list>a>em{padding:4px 7px;border-radius:999px;font-size:7px;font-style:normal;font-weight:800}.v353-risk-list>a.risk-low>em{background:#edf7f1;color:#3f7956}.v353-risk-list>a.risk-medium>em{background:#fff6e8;color:#986e20}.v353-risk-list>a.risk-high>em{background:#fff0f0;color:#af3a43}.v353-risk-list>a.risk-high{border-color:#efd4d5;background:#fffafa}.v353-risk-list>a.risk-medium{border-color:#eadfc7;background:#fffdf8}
.v353-method-note{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid #dfe6eb;border-radius:9px;background:#f7fafc;color:#6f7f8b;font-size:8px;line-height:1.55}.v353-method-note i{margin-top:2px;color:#607f99}.v353-empty{min-height:160px;display:grid;place-items:center;color:#8c98a2;text-align:center;font-size:9px}
.modal-panel.v353-target-modal-panel{width:min(760px,calc(100vw - 24px));max-width:760px}.v353-target-form{display:grid;gap:13px}.v353-target-note{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid #dfe6eb;border-radius:9px;background:#f7fafc;color:#6f7f8b;font-size:9px;line-height:1.55}.v353-target-note i{margin-top:2px;color:#607f99}.v353-target-form .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
@media(max-width:1180px){.v353-executive-grid,.v353-risk-layout{grid-template-columns:1fr}.v353-radar svg{max-width:320px}}
@media(max-width:760px){.v353-forecast-risk-panel>.v348-panel-head{flex-direction:column}.v353-forecast-risk-panel>.v348-panel-head .btn{width:100%}.v353-outlook-summary,.v353-forecast-chart{grid-template-columns:1fr}.v353-forecast-chart{min-height:0}.v353-forecast-chart article{grid-template-columns:minmax(105px,.8fr) minmax(95px,1fr) 80px;grid-template-rows:auto;align-items:center}.v353-forecast-bars{height:72px}.v353-forecast-foot{border-top:0;border-left:1px solid #edf1f3;padding:0 0 0 8px;display:grid}.v353-target-row{grid-template-columns:minmax(125px,1fr) 70px}.v353-target-row>em{display:none}}

/* ============================================================
   WPPEI CRM v354 - Real maps & Korea installation locations
   ============================================================ */
.v354-real-map-card{position:relative}.v354-leaflet-map{position:relative;width:100%;height:370px;margin-top:8px;overflow:hidden;border:1px solid #dce4ea;border-radius:10px;background:#eef3f6}.v354-leaflet-map.korea{height:430px;margin-top:0}.v354-map-loading{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:#7c8b96;font-size:9px;background:linear-gradient(180deg,#f7fafc,#eef3f6)}.v354-map-loading i{font-size:24px;color:#63809a}.v354-leaflet-map .leaflet-control-attribution{font-size:8px}.v354-leaflet-map .leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 10px 28px rgba(25,42,55,.16)}.v354-leaflet-map .leaflet-popup-content{margin:11px 13px}.v354-map-popup{min-width:190px;color:#40515f}.v354-map-popup>strong{display:block;color:#293c4a;font-size:11px}.v354-map-popup>small{display:block;margin-top:3px;color:#7e8b95;font-size:8px}.v354-map-popup>p{margin:7px 0;color:#6f7d88;font-size:8px;line-height:1.5}.v354-map-popup>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px}.v354-map-popup>div span{padding:5px 6px;border-radius:6px;background:#f3f6f8;color:#7b8790;font-size:7px}.v354-map-popup>div b{display:block;margin-top:2px;color:#405665;font-size:8px}.v354-map-popup>a{display:inline-flex;margin-top:8px;color:#486d8c;font-size:8px;font-weight:700;text-decoration:none}
.v354-korea-panel{margin:12px 0;padding:14px;border:1px solid #dde5ea;border-radius:10px;background:linear-gradient(180deg,#fbfdfe,#f8fafb)}.v354-korea-panel>.v348-panel-head{margin-bottom:10px}.v354-korea-panel>.v348-panel-head h3{margin:3px 0 0;color:#2f4352;font-size:14px}.v354-korea-panel>.v348-panel-head p{max-width:760px}.v354-korea-panel>.v348-panel-head>em{color:#61798e;font-size:8px;font-style:normal;font-weight:700}.v354-korea-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);gap:12px}.v354-korea-map-card,.v354-korea-side-card{min-width:0;padding:10px;border:1px solid #dfe5ea;border-radius:10px;background:#fff}.v354-korea-map-card{padding:8px}.v354-status-legend{display:flex;align-items:center;gap:13px;padding:8px 4px 2px;color:#7c8891;font-size:8px}.v354-status-legend span{display:flex;align-items:center;gap:5px}.v354-status-legend i{width:9px;height:9px;border-radius:50%}.v354-status-legend i.completed{background:#3f7f62}.v354-status-legend i.progress{background:#b07937}.v354-status-legend i.pending{background:#4f7198}
.v354-korea-side{display:grid;gap:10px}.v354-korea-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.v354-korea-stats>div{padding:9px 8px;border:1px solid #e2e7eb;border-radius:8px;background:#f8fafb}.v354-korea-stats span,.v354-korea-stats strong{display:block}.v354-korea-stats span{color:#88949d;font-size:7px}.v354-korea-stats strong{margin-top:4px;color:#354b5a;font-size:15px}.v354-install-head{margin-top:1px}.v354-install-list{display:grid;gap:1px}.v354-install-row,.v354-location-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;padding:8px 2px;border:0;border-bottom:1px solid #edf1f3;background:transparent;text-align:left;text-decoration:none}.v354-install-row>i{width:7px;height:7px;border-radius:50%}.v354-install-row span strong,.v354-install-row span small,.v354-location-row span strong,.v354-location-row span small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v354-install-row span strong,.v354-location-row span strong{color:#3d5060;font-size:8px}.v354-install-row span small,.v354-location-row span small{margin-top:2px;color:#909aa2;font-size:7px}.v354-install-row em{color:#73828d;font-size:7px;font-style:normal}.v354-location-missing{padding:9px;border:1px solid #eadfcb;border-radius:8px;background:#fffaf2}.v354-location-missing>div:first-child strong,.v354-location-missing>div:first-child span{display:block}.v354-location-missing>div:first-child strong{color:#6d5834;font-size:9px}.v354-location-missing>div:first-child span{margin-top:2px;color:#9b896b;font-size:7px}.v354-location-row{grid-template-columns:minmax(0,1fr) 22px;cursor:pointer}.v354-location-row:hover{background:#fffdf8}.v354-location-row>i{color:#9c7a44}.v354-more-missing{display:block;padding-top:6px;color:#9b896b;font-size:7px;text-align:right}
.v354-map-picker-panel{width:min(920px,94vw)!important}.v354-picker-help{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid #dce5eb;border-radius:8px;background:#f5f9fb;color:#667b8b;font-size:8px;line-height:1.55}.v354-picker-help i{margin-top:2px;color:#557b98}.v354-location-picker-map{width:100%;height:470px;overflow:hidden;border:1px solid #dce4ea;border-radius:10px;background:#eef3f6}.v354-location-picker-map .leaflet-control-attribution{font-size:8px}
@media(max-width:1360px){.v354-korea-layout{grid-template-columns:1fr}.v354-korea-side-card{min-height:0}.v354-korea-stats{grid-template-columns:repeat(4,minmax(90px,1fr))}}
@media(max-width:820px){.v354-leaflet-map,.v354-leaflet-map.korea{height:360px}.v354-korea-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v354-location-picker-map{height:390px}}

/* v355: self-hosted WPPEI tile-map engine (no external map-library CDN dependency) */
.wppei-map-host{position:relative;isolation:isolate;background:#e9eff3;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.wppei-map-viewport,.wppei-map-tiles,.wppei-map-markers,.wppei-map-popups{position:absolute;inset:0;overflow:hidden}
.wppei-map-viewport{cursor:grab;background:#e8eef2}.wppei-map-viewport.is-dragging{cursor:grabbing}
.wppei-map-tiles{z-index:1;background:#e6edf1}.wppei-map-tile{position:absolute;width:256px;height:256px;max-width:none!important;pointer-events:none;-webkit-user-drag:none}.wppei-map-tile.is-error{visibility:hidden}
.wppei-map-markers{z-index:4;pointer-events:none}.wppei-map-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;padding:0;margin:0;box-sizing:border-box;box-shadow:0 2px 7px rgba(27,55,74,.22)}
.wppei-map-circle{border-style:solid;border-radius:999px;min-width:8px;min-height:8px}
.wppei-map-pin{width:23px;height:23px;border:3px solid #fff;border-radius:50% 50% 50% 0;background:#3f6f91;transform:translate(-50%,-78%) rotate(-45deg);box-shadow:0 3px 9px rgba(27,55,74,.3)}.wppei-map-pin:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.wppei-map-popups{z-index:7;pointer-events:none;overflow:visible}.wppei-map-popup{position:absolute;min-width:220px;max-width:min(330px,78vw);transform:translate(-50%,calc(-100% - 14px));padding:0;border:1px solid #d9e2e8;border-radius:11px;background:#fff;box-shadow:0 12px 34px rgba(25,42,55,.2);pointer-events:auto}.wppei-map-popup:after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;border-right:1px solid #d9e2e8;border-bottom:1px solid #d9e2e8;background:#fff;transform:translateX(-50%) rotate(45deg)}.wppei-map-popup .v354-map-popup{padding:12px 14px}.wppei-map-popup-close{position:absolute;right:5px;top:4px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#73818b;font-size:18px;line-height:20px;cursor:pointer;z-index:2}.wppei-map-popup-close:hover{background:#eef3f6;color:#304958}
.wppei-map-zoom{position:absolute;z-index:8;left:10px;top:10px;display:flex;flex-direction:column;border:1px solid #cfd9df;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(20,42,58,.12)}.wppei-map-zoom button{width:30px;height:30px;border:0;background:#fff;color:#344c5c;font-size:20px;line-height:28px;cursor:pointer}.wppei-map-zoom button+button{border-top:1px solid #dbe3e8}.wppei-map-zoom button:hover{background:#f3f6f8}
.wppei-map-attribution{position:absolute;z-index:8;right:0;bottom:0;padding:2px 5px;background:rgba(255,255,255,.86);font-size:7px;color:#6d7880}.wppei-map-attribution a{color:#5f7482;text-decoration:none}.wppei-map-attribution a:hover{text-decoration:underline}
.wppei-map-notice{position:absolute;z-index:9;left:50%;top:10px;max-width:calc(100% - 100px);transform:translateX(-50%);padding:6px 9px;border:1px solid #e5c79c;border-radius:6px;background:#fff8ec;color:#856027;font-size:8px;box-shadow:0 2px 8px rgba(48,37,21,.08)}
.v354-leaflet-map.wppei-map-host,.v354-location-picker-map.wppei-map-host{display:block}.v354-leaflet-map.wppei-map-host>.v354-map-loading{display:none}


/* ============================================================
   WPPEI CRM v356 - 30-second Executive Snapshot
   ============================================================ */
.v356-executive-snapshot{margin:12px 0 14px;padding:16px;border:1px solid #dce4e9;border-radius:12px;background:linear-gradient(145deg,#ffffff 0%,#f7fafc 62%,#f3f7f9 100%);box-shadow:0 8px 24px rgba(31,49,63,.045)}
.v356-snapshot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:13px;border-bottom:1px solid #e5eaee}.v356-snapshot-head>div:first-child>span{display:block;color:#648097;font-size:7px;font-weight:800;letter-spacing:.16em}.v356-snapshot-head h2{margin:4px 0 0;color:#293d4d;font-size:17px;letter-spacing:-.025em}.v356-snapshot-head p{margin:5px 0 0;color:#7d8993;font-size:8px;line-height:1.55}
.v356-overall{min-width:205px;padding:10px 12px;border:1px solid #dce4e9;border-radius:10px;background:#fff}.v356-overall>span,.v356-overall>strong,.v356-overall>small{display:block}.v356-overall>span{color:#8a959d;font-size:7px}.v356-overall>strong{display:flex;align-items:center;gap:7px;margin-top:4px;color:#405565;font-size:14px}.v356-overall>small{margin-top:4px;color:#7f8c95;font-size:7px}.v356-overall.is-stable{border-color:#cfe4d8;background:#f8fcfa}.v356-overall.is-stable>strong{color:#3d7655}.v356-overall.is-watch{border-color:#eadfc7;background:#fffdf8}.v356-overall.is-watch>strong{color:#946b25}.v356-overall.is-danger{border-color:#ecd0d2;background:#fff9f9}.v356-overall.is-danger>strong{color:#aa3c46}
.v356-pulse-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.v356-pulse-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;min-height:88px;padding:11px 12px;border:1px solid #e0e6ea;border-radius:10px;background:#fff;overflow:hidden}.v356-pulse-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#6687a2}.v356-pulse-green:before{background:#5c8e70}.v356-pulse-violet:before{background:#766d9c}.v356-pulse-amber:before{background:#b08a4c}.v356-pulse-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#eef4f8;color:#5e7f99}.v356-pulse-green .v356-pulse-icon{background:#eef7f1;color:#53816a}.v356-pulse-violet .v356-pulse-icon{background:#f2f0f8;color:#726a93}.v356-pulse-amber .v356-pulse-icon{background:#fbf5e9;color:#a07b3f}.v356-pulse-copy span,.v356-pulse-copy strong,.v356-pulse-copy small{display:block}.v356-pulse-copy span{color:#7c8992;font-size:7px}.v356-pulse-copy strong{margin-top:3px;color:#2f4453;font-size:14px}.v356-pulse-copy small{margin-top:3px;color:#98a1a8;font-size:7px}.v356-delta{position:absolute;right:9px;top:9px;display:flex;align-items:center;gap:3px;padding:3px 5px;border-radius:999px;font-size:6.5px;font-style:normal;font-weight:800}.v356-delta.v356-good{background:#edf7f1;color:#3e7955}.v356-delta.v356-watch{background:#fff3e7;color:#9a6928}.v356-delta.v356-neutral{background:#f0f3f5;color:#7f8b94}
.v356-snapshot-lower{display:grid;grid-template-columns:minmax(250px,.78fr) minmax(360px,1.32fr) minmax(235px,.7fr);gap:9px;margin-top:9px}.v356-readiness-card,.v356-priority-card,.v356-data-card{min-width:0;border:1px solid #e0e6ea;border-radius:10px;background:#fff}.v356-readiness-card{display:flex;align-items:center;gap:12px;padding:11px 13px}.v356-readiness-ring{--score:0;display:grid;place-items:center;flex:0 0 62px;width:62px;height:62px;border-radius:50%;background:conic-gradient(#587a94 calc(var(--score)*1%),#edf1f4 0)}.v356-readiness-ring:before{content:"";grid-area:1/1;width:48px;height:48px;border-radius:50%;background:#fff}.v356-readiness-ring>div{grid-area:1/1;z-index:1;text-align:center}.v356-readiness-ring strong{color:#344d5f;font-size:14px}.v356-readiness-ring span{color:#8b979f;font-size:6px}.v356-readiness-card>div:last-child>span,.v356-readiness-card>div:last-child>strong,.v356-readiness-card>div:last-child>small{display:block}.v356-readiness-card>div:last-child>span{color:#84919a;font-size:7px}.v356-readiness-card>div:last-child>strong{margin-top:3px;color:#334b5d;font-size:11px}.v356-readiness-card>div:last-child>small{margin-top:3px;color:#8d989f;font-size:6.5px;line-height:1.45}
.v356-priority-card{padding:10px}.v356-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 2px 7px}.v356-card-head span,.v356-card-head strong{display:block}.v356-card-head span{color:#8a959d;font-size:6.5px}.v356-card-head strong{margin-top:2px;color:#405462;font-size:9px}.v356-card-head em{color:#687e8e;font-size:7px;font-style:normal;font-weight:700}.v356-priority-list{display:grid;gap:4px}.v356-priority-row{display:grid;grid-template-columns:25px minmax(0,1fr) auto 10px;gap:7px;align-items:center;padding:6px 7px;border:1px solid #e7ebee;border-radius:7px;background:#fafcfd;text-decoration:none}.v356-priority-rank{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#eef3f6;color:#637b8e;font-size:7px;font-weight:800}.v356-priority-main strong,.v356-priority-main small{display:block;min-width:0}.v356-priority-main strong{color:#40515f;font-size:8px}.v356-priority-main small{margin-top:1px;color:#89949c;font-size:6.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v356-priority-row>em{padding:3px 5px;border-radius:999px;background:#edf7f1;color:#4b795c;font-size:6px;font-style:normal;font-weight:800}.v356-priority-row.is-medium>em{background:#fff5e7;color:#946a25}.v356-priority-row.is-high>em{background:#fff0f0;color:#a83e47}.v356-priority-row>i{color:#a0a9af;font-size:7px}.v356-priority-empty{display:flex;align-items:center;gap:7px;padding:12px;color:#6f8979;font-size:8px}
.v356-data-card{display:flex;align-items:center;gap:10px;padding:12px}.v356-data-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:9px;background:#edf7f1;color:#477a5c}.v356-data-icon.is-watch{background:#fff4e8;color:#9d6d2d}.v356-data-card span,.v356-data-card strong,.v356-data-card small{display:block}.v356-data-card span{color:#87939b;font-size:7px}.v356-data-card strong{margin-top:3px;color:#3b5160;font-size:10px}.v356-data-card small{margin-top:3px;color:#909aa2;font-size:6.5px;line-height:1.5}
.v356-section-nav{position:sticky;top:8px;z-index:12;display:flex;align-items:center;gap:6px;margin-top:10px;padding:6px;border:1px solid #dfe6eb;border-radius:10px;background:rgba(255,255,255,.94);box-shadow:0 7px 18px rgba(34,52,66,.055);backdrop-filter:blur(8px)}.v356-section-nav button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:#657987;font-size:7px;font-weight:700;cursor:pointer}.v356-section-nav button:hover{background:#eef4f7;color:#36566d}.v356-section-nav button i{color:#6c879c}
#v356-operations,#v356-trends,#v356-global,#v356-sustainability,#v356-carbon{scroll-margin-top:18px}
@media(max-width:1280px){.v356-pulse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v356-snapshot-lower{grid-template-columns:1fr 1.2fr}.v356-data-card{grid-column:1/-1}}
@media(max-width:820px){.v356-snapshot-head{flex-direction:column}.v356-overall{width:100%;min-width:0}.v356-pulse-grid,.v356-snapshot-lower{grid-template-columns:1fr}.v356-data-card{grid-column:auto}.v356-section-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.v356-section-nav button:last-child{grid-column:1/-1}.v356-priority-row{grid-template-columns:25px minmax(0,1fr) auto}.v356-priority-row>i{display:none}}

/* ============================================================
   WPPEI CRM v357 — Monthly Executive Report
   ============================================================ */
.v357-hero-side { gap: 14px; align-items: stretch; }
.v357-hero-side > div { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.v357-report-launch { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.v357-report-launch:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); transform: translateY(-1px); }
.v357-report-launch i { color: #dfc47b; }
.v357-report-modal { width: min(1080px, 86vw); }
.v357-report-controls { display: grid; grid-template-columns: minmax(180px, 230px) auto auto auto; gap: 9px; align-items: end; padding-bottom: 13px; border-bottom: 1px solid #e4e8ed; }
.v357-report-controls > div { min-width: 0; }
.v357-report-controls .btn { white-space: nowrap; }
.v357-report-help { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border: 1px solid #dfe5eb; border-radius: 7px; background: #f8fafb; color: #657180; font-size: 11px; line-height: 1.55; }
.v357-report-help i { margin-top: 2px; color: #536b82; }
.v357-report-preview { min-height: 360px; max-height: 65vh; overflow: auto; padding: 2px; }
.v357-report-preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 14px 2px 10px; border-bottom: 2px solid #172331; }
.v357-report-preview-head div { display: flex; flex-direction: column; gap: 3px; }
.v357-report-preview-head span { color: #7b8794; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.v357-report-preview-head strong { color: #172331; font-size: 24px; letter-spacing: -.03em; }
.v357-report-preview-head em { color: #8a6a2d; font-size: 10px; font-style: normal; font-weight: 800; }
.v357-preview-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; padding: 12px 0; }
.v357-preview-kpis article { min-height: 96px; padding: 13px; border: 1px solid #dfe4e9; border-radius: 7px; background: #fff; }
.v357-preview-kpis span, .v357-preview-kpis em { display: block; color: #7a8490; font-size: 10px; font-style: normal; }
.v357-preview-kpis strong { display: block; margin: 7px 0 5px; color: #192431; font-size: 17px; letter-spacing: -.03em; }
.v357-preview-two { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr); gap: 11px; }
.v357-preview-two > article { border: 1px solid #dfe4e9; border-radius: 7px; background: #fff; overflow: hidden; }
.v357-preview-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #e7ebef; background: #fafbfc; }
.v357-preview-title strong { font-size: 12px; }
.v357-preview-title span { color: #8b949e; font-size: 9px; }
.v357-preview-table { min-width: 580px; font-size: 10px; }
.v357-preview-table th, .v357-preview-table td { padding-top: 9px; padding-bottom: 9px; }
.v357-preview-risk-list { padding: 7px 12px; }
.v357-preview-risk { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; min-height: 39px; border-bottom: 1px solid #edf0f3; }
.v357-preview-risk:last-child { border-bottom: 0; }
.v357-preview-risk span { font-weight: 750; color: #364152; }
.v357-preview-risk strong { padding: 3px 6px; border-radius: 4px; background: #eef4f0; color: #38714c; font-size: 9px; }
.v357-preview-risk.is-medium strong { background: #fff6df; color: #8a6315; }
.v357-preview-risk.is-high strong { background: #fff0ef; color: #b44238; }
.v357-preview-risk em { min-width: 64px; color: #7b8794; font-size: 9px; font-style: normal; text-align: right; }
.v357-preview-empty { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 240px; color: #8b96a3; text-align: center; }
.v357-preview-empty i { font-size: 28px; color: #a9b3bd; }
.v357-preview-empty strong { font-size: 12px; }
.v357-preview-warning { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 10px 12px; border: 1px solid #ead5a8; border-radius: 7px; background: #fffaf0; color: #7a612c; font-size: 10px; }
@media (max-width: 1050px) {
  .v357-report-controls { grid-template-columns: 1fr 1fr; }
  .v357-preview-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v357-preview-two { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .v357-hero-side { width: 100%; flex-direction: column; align-items: stretch; }
  .v357-hero-side > div { align-items: flex-start; }
  .v357-report-modal { width: 92vw; }
  .v357-report-controls, .v357-preview-kpis { grid-template-columns: 1fr; }
  .v357-report-preview-head { align-items: flex-start; flex-direction: column; }
}

/* WPPEI CRM v358 - integrated notification center */
.notification-panel{width:min(520px,calc(100vw - 28px));max-height:640px}
.notification-panel-head{height:auto;min-height:58px;padding:10px 15px;align-items:center}
.notification-panel-head>div{display:grid;gap:2px;min-width:0}
.notification-panel-head small{font-size:10px;color:#7a8795;font-weight:500}
.notification-priority-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px 12px 8px;background:#f8fafc;border-bottom:1px solid #edf1f5}
.notification-summary-chip{display:flex;align-items:center;justify-content:center;gap:5px;min-height:31px;padding:0 8px;border:1px solid #e3e8ee;border-radius:9px;background:#fff;color:#5f6c7b;font-size:10px;font-weight:700}
.notification-summary-chip strong{font-size:12px;color:#17212b}
.notification-summary-chip.critical{border-color:#f4c9c9;background:#fff7f7;color:#b63838}
.notification-summary-chip.critical strong{color:#a92f2f}
.notification-summary-chip.high{border-color:#ead9b3;background:#fffbf1;color:#9b701f}
.notification-summary-chip.high strong{color:#8b6218}
.notification-filter-tabs{display:flex;align-items:center;gap:5px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid #edf1f5;background:#fff;scrollbar-width:thin}
.notification-filter-tabs button{position:relative;flex:0 0 auto;min-height:29px;padding:0 10px;border:1px solid #dfe5eb;border-radius:8px;background:#fff;color:#687586;font-size:10px;font-weight:700;cursor:pointer}
.notification-filter-tabs button.active{border-color:#8f9bf0;background:#f2f4ff;color:#3f4bc4}
.notification-filter-tabs button[data-count]:not([data-count="0"])::after{content:attr(data-count);display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:5px;padding:0 4px;border-radius:9px;background:#eef1f5;color:#5b6673;font-size:9px}
.notification-filter-tabs button.active[data-count]:not([data-count="0"])::after{background:#dfe4ff;color:#3945ba}
.notification-list{max-height:410px;overflow-y:auto}
.notification-item.priority-critical{border-left:3px solid #cf4a4a;background:#fff9f9}
.notification-item.priority-high{border-left:3px solid #c89a42;background:#fffdf8}
.notification-item-meta{display:flex!important;align-items:center;gap:6px;color:#8b96a3!important;font-size:9px!important;line-height:1.2!important}
.notification-item-meta em{font-style:normal;font-weight:800;color:#64748b}
.notification-item-meta small{margin-left:auto;color:#8b96a3;font-size:9px}
.notification-priority-badge{display:inline-flex;align-items:center;min-height:17px;padding:0 5px;border-radius:5px;font-size:9px;font-weight:800}
.notification-priority-badge.critical{background:#fde7e7;color:#b23030}
.notification-priority-badge.high{background:#fbf0d8;color:#8b641b}
.notification-item.priority-critical .notification-item-icon{background:#fdecec;color:#bd3838}
.notification-item.priority-high .notification-item-icon{background:#fbf1de;color:#956a1b}
.notification-read-all{white-space:nowrap}
@media(max-width:640px){
  .notification-panel{max-height:calc(100vh - 82px)}
  .notification-priority-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .notification-summary-chip{padding:0 5px;font-size:9px}
  .notification-list{max-height:calc(100vh - 260px)}
}

/* ============================================================
   WPPEI CRM v366 - Headquarters dashboard high-contrast modern palette
   Scope: master/headquarters executive dashboard only
   ============================================================ */
.v366-executive-contrast{
  --v365-ink:#1f2d3a;
  --v365-muted:#5f6f7d;
  --v365-soft:#7a8792;
  --v365-blue:#3f6f9b;
  --v365-green:#3f7b61;
  --v365-violet:#6e6097;
  --v365-amber:#9a6a2f;
}

/* Executive hero */
.v366-executive-contrast .v348-eyebrow{font-size:12px;color:#d2dce5}
.v366-executive-contrast .v348-exec-hero p{font-size:15px;color:#c6d1db;line-height:1.65}
.v366-executive-contrast .v348-hero-side span{font-size:12px;color:#b9c7d3}
.v366-executive-contrast .v348-hero-side strong{font-size:17px}
.v366-executive-contrast .v348-hero-side em{font-size:14px;color:#f0d286}
.v366-executive-contrast .v357-report-launch{min-height:44px;font-size:13px;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}

/* 30-second snapshot */
.v366-executive-contrast .v356-executive-snapshot{padding:19px;border-color:#cddce6;background:linear-gradient(145deg,#fff 0%,#f4f9fc 60%,#eef5f9 100%);box-shadow:0 9px 25px rgba(40,72,94,.07)}
.v366-executive-contrast .v356-snapshot-head>div:first-child>span{font-size:10px;color:#4d7390}
.v366-executive-contrast .v356-snapshot-head h2{font-size:21px;color:#243b4c}
.v366-executive-contrast .v356-snapshot-head p{font-size:12px;color:#647683;line-height:1.6}
.v366-executive-contrast .v356-overall{min-width:225px;padding:12px 14px}
.v366-executive-contrast .v356-overall>span{font-size:10px;color:#697985;font-weight:700}
.v366-executive-contrast .v356-overall>strong{margin-top:6px;font-size:18px}
.v366-executive-contrast .v356-overall>small{margin-top:6px;font-size:10px;line-height:1.45;color:#667783}
.v366-executive-contrast .v356-overall.is-stable{border-color:#b9dcc7;background:#f2fbf6}
.v366-executive-contrast .v356-overall.is-watch{border-color:#e2ca98;background:#fff8e9}
.v366-executive-contrast .v356-overall.is-danger{border-color:#e2b4b8;background:#fff3f3}

.v366-executive-contrast .v356-pulse-grid{gap:11px;margin-top:14px}
.v366-executive-contrast .v356-pulse-card{min-height:104px;padding:14px 14px;grid-template-columns:40px minmax(0,1fr);gap:11px;border-color:#d8e1e7;box-shadow:0 5px 14px rgba(35,55,70,.035)}
.v366-executive-contrast .v356-pulse-icon{width:40px;height:40px;font-size:15px}
.v366-executive-contrast .v356-pulse-copy span{font-size:11px;color:#60727f;font-weight:700}
.v366-executive-contrast .v356-pulse-copy strong{margin-top:5px;font-size:19px;color:#263d4d}
.v366-executive-contrast .v356-pulse-copy small{margin-top:5px;font-size:10px;color:#71808a}
.v366-executive-contrast .v356-delta{right:10px;top:10px;padding:4px 7px;font-size:9px}
.v366-executive-contrast .v356-pulse-card:before{width:5px}
.v366-executive-contrast .v356-pulse-card{background:linear-gradient(180deg,#fff,#f8fbfd)}
.v366-executive-contrast .v356-pulse-green{background:linear-gradient(180deg,#fff,#f5fbf7)}
.v366-executive-contrast .v356-pulse-violet{background:linear-gradient(180deg,#fff,#f8f6fc)}
.v366-executive-contrast .v356-pulse-amber{background:linear-gradient(180deg,#fff,#fff9f1)}

.v366-executive-contrast .v356-snapshot-lower{gap:11px;margin-top:11px}
.v366-executive-contrast .v356-readiness-card,.v366-executive-contrast .v356-priority-card,.v366-executive-contrast .v356-data-card{border-color:#d7e1e7;box-shadow:0 3px 10px rgba(35,55,70,.025)}
.v366-executive-contrast .v356-readiness-card{padding:14px 15px;background:#f7fbfe}
.v366-executive-contrast .v356-readiness-ring{flex-basis:70px;width:70px;height:70px}
.v366-executive-contrast .v356-readiness-ring:before{width:54px;height:54px}
.v366-executive-contrast .v356-readiness-ring strong{font-size:18px}
.v366-executive-contrast .v356-readiness-ring span{font-size:9px}
.v366-executive-contrast .v356-readiness-card>div:last-child>span{font-size:10px;color:#627583;font-weight:700}
.v366-executive-contrast .v356-readiness-card>div:last-child>strong{margin-top:5px;font-size:14px;color:#29475b}
.v366-executive-contrast .v356-readiness-card>div:last-child>small{margin-top:5px;font-size:10px;color:#6d7c87;line-height:1.5}

.v366-executive-contrast .v356-priority-card{padding:13px;background:#fffdf9}
.v366-executive-contrast .v356-card-head{padding:0 3px 10px}
.v366-executive-contrast .v356-card-head span{font-size:10px;color:#7a694e;font-weight:700}
.v366-executive-contrast .v356-card-head strong{margin-top:3px;font-size:13px;color:#4c4234}
.v366-executive-contrast .v356-card-head em{font-size:10px;color:#8a672e}
.v366-executive-contrast .v356-priority-list{gap:6px}
.v366-executive-contrast .v356-priority-row{min-height:45px;grid-template-columns:30px minmax(0,1fr) auto 12px;gap:9px;padding:8px 9px;border-color:#e5ded1;background:#fff}
.v366-executive-contrast .v356-priority-rank{width:30px;height:30px;font-size:10px;background:#f3eee5;color:#785f3b}
.v366-executive-contrast .v356-priority-main strong{font-size:12px;color:#374956}
.v366-executive-contrast .v356-priority-main small{margin-top:3px;font-size:10px;color:#71808a}
.v366-executive-contrast .v356-priority-row>em{padding:4px 7px;font-size:9px}
.v366-executive-contrast .v356-priority-row>i{font-size:10px}
.v366-executive-contrast .v356-priority-empty{font-size:11px}

.v366-executive-contrast .v356-data-card{padding:14px;background:#f4faf6}
.v366-executive-contrast .v356-data-icon{flex-basis:42px;width:42px;height:42px;font-size:15px}
.v366-executive-contrast .v356-data-card span{font-size:10px;color:#60766a;font-weight:700}
.v366-executive-contrast .v356-data-card strong{margin-top:5px;font-size:14px;color:#315641}
.v366-executive-contrast .v356-data-card small{margin-top:5px;font-size:10px;color:#687d70;line-height:1.5}

/* Colored section navigation */
.v366-executive-contrast .v356-section-nav{gap:8px;padding:8px;border-color:#d3dfe7;background:rgba(255,255,255,.97)}
.v366-executive-contrast .v356-section-nav button{min-height:36px;padding:8px 13px;font-size:11px;border:1px solid transparent}
.v366-executive-contrast .v356-section-nav button:nth-child(1){background:#eef5fb;color:#315f86;border-color:#d7e7f2}
.v366-executive-contrast .v356-section-nav button:nth-child(2){background:#f5f1fb;color:#66528f;border-color:#e4dcf1}
.v366-executive-contrast .v356-section-nav button:nth-child(3){background:#edf7f9;color:#36717b;border-color:#d4eaee}
.v366-executive-contrast .v356-section-nav button:nth-child(4){background:#eef8f1;color:#3f7354;border-color:#d6eadc}
.v366-executive-contrast .v356-section-nav button:nth-child(5){background:#fff6e9;color:#8c642c;border-color:#eeddbc}
.v366-executive-contrast .v356-section-nav button:hover{filter:brightness(.97);transform:translateY(-1px)}

/* Primary KPI cards */
.v366-executive-contrast .v348-kpi-grid{gap:12px;margin-bottom:16px}
.v366-executive-contrast .v348-kpi{min-height:138px;padding:18px 17px;border-color:#d3dce3;box-shadow:0 6px 18px rgba(28,44,58,.05)}
.v366-executive-contrast .v348-kpi:before{width:5px}
.v366-executive-contrast .v348-kpi-blue{background:linear-gradient(135deg,#fff 35%,#eef5fb 100%)}
.v366-executive-contrast .v348-kpi-violet{background:linear-gradient(135deg,#fff 35%,#f5f0fb 100%)}
.v366-executive-contrast .v348-kpi-green{background:linear-gradient(135deg,#fff 35%,#eef8f2 100%)}
.v366-executive-contrast .v348-kpi-amber{background:linear-gradient(135deg,#fff 35%,#fff5e8 100%)}
.v366-executive-contrast .v348-kpi-icon{width:40px;height:40px;font-size:15px}
.v366-executive-contrast .v348-kpi-copy small{font-size:13px;color:#4f606e;font-weight:750}
.v366-executive-contrast .v348-kpi-copy strong{margin-top:9px;font-size:26px;color:#172633}
.v366-executive-contrast .v348-kpi-copy em{margin-top:8px;font-size:12px;color:#63727e}
.v366-executive-contrast .v348-kpi-arrow{font-size:11px;color:#82919d}

/* Main panels and operational detail */
.v366-executive-contrast .v348-panel{padding:22px;border-color:#d4dde3;border-radius:11px;box-shadow:0 4px 14px rgba(28,44,58,.035)}
.v366-executive-contrast .v348-panel-head{margin-bottom:18px;padding-bottom:16px;border-bottom-color:#dce4e9}
.v366-executive-contrast .v348-panel-head>div:first-child>span{font-size:11px;color:#476c89}
.v366-executive-contrast .v348-panel-head h2{font-size:20px;color:#172936}
.v366-executive-contrast .v348-panel-head h3{font-size:17px;color:#203746}
.v366-executive-contrast .v348-panel-head p{font-size:13px;color:#64727d;line-height:1.6}
.v366-executive-contrast .v348-panel-head>em,.v366-executive-contrast .v351-trends-panel>.v348-panel-head>em,.v366-executive-contrast .v352-global-panel>.v348-panel-head>em{font-size:11px;color:#657989}
.v366-executive-contrast .v348-pipeline-columns h3{font-size:14px;color:#344956}
.v366-executive-contrast .v348-bar-row{margin:14px 0}
.v366-executive-contrast .v348-bar-row span{font-size:12px;color:#596a77}
.v366-executive-contrast .v348-bar-row strong{font-size:13px;color:#223643}
.v366-executive-contrast .v348-bar-track{height:8px}
.v366-executive-contrast .v348-action{min-height:64px;padding:9px 0}
.v366-executive-contrast .v348-action-icon{width:36px;height:36px;font-size:12px}
.v366-executive-contrast .v348-action strong{font-size:13px;color:#2d414f}
.v366-executive-contrast .v348-action small{margin-top:4px;font-size:11px;color:#687883}
.v366-executive-contrast .v348-action b{font-size:20px;color:#152834}
.v366-executive-contrast .v348-action>i{font-size:10px}

/* Collection / status / subheads */
.v366-executive-contrast .v348-ring small{font-size:11px;color:#67766f}
.v366-executive-contrast .v348-money-list span{font-size:12px;color:#5f6f7b}
.v366-executive-contrast .v348-money-list strong{font-size:17px;color:#213543}
.v366-executive-contrast .v348-status-cards span{font-size:12px;color:#526574}
.v366-executive-contrast .v348-status-cards strong{font-size:27px}
.v366-executive-contrast .v348-subhead strong{font-size:13px;color:#273c49}
.v366-executive-contrast .v348-subhead span{font-size:11px;color:#647480}
.v366-executive-contrast .v348-line-chart .grid text,.v366-executive-contrast .v348-line-chart .labels text{font-size:10px;fill:#657681}

/* Trend panels */
.v366-executive-contrast .v351-trend-card{padding:16px;background:linear-gradient(180deg,#fff,#f9fbfd);border-color:#d7e0e6}
.v366-executive-contrast .v351-trend-card>div:first-child strong{font-size:13px;color:#2c4352}
.v366-executive-contrast .v351-trend-card>div:first-child span{font-size:12px;color:#4e718a}
.v366-executive-contrast .v351-trend-svg .grid text,.v366-executive-contrast .v351-trend-svg .labels text,.v366-executive-contrast .v351-bars text{font-size:10px;fill:#667781}
.v366-executive-contrast .v351-chart-legend{font-size:10px;color:#5e6f7a}
.v366-executive-contrast .v351-chart-empty{font-size:12px}

/* Sustainability */
.v366-executive-contrast .v351-sustainability-panel{background:linear-gradient(180deg,#fff 0%,#f4faf6 100%);border-top:4px solid #5e8e70}
.v366-executive-contrast .v351-sustainability-kpis>div{min-height:122px;padding:16px;border-color:#d3e3d8;background:#fbfefc}
.v366-executive-contrast .v351-sustainability-kpis span{font-size:11px;color:#526a5c}
.v366-executive-contrast .v351-sustainability-kpis strong{font-size:24px;color:#203d2e}
.v366-executive-contrast .v351-sustainability-kpis strong small{font-size:11px}
.v366-executive-contrast .v351-sustainability-kpis em{font-size:10px;color:#68796e}
.v366-executive-contrast .v351-performance-bar i span,.v366-executive-contrast .v351-performance-bar small{font-size:9px}
.v366-executive-contrast .v351-performance-empty strong{font-size:13px}
.v366-executive-contrast .v351-performance-empty span{font-size:10px}
.v366-executive-contrast .v351-value-list span strong{font-size:12px;color:#2f4a39}
.v366-executive-contrast .v351-value-list span small{font-size:10px}
.v366-executive-contrast .v351-value-list b{font-size:13px}
.v366-executive-contrast .v351-value-empty{font-size:11px}
.v366-executive-contrast .v351-sustainability-note{font-size:10px;color:#546c5c;background:#eef8f1;border-color:#d3e6d9}

/* Global business */
.v366-executive-contrast .v352-global-panel{background:linear-gradient(180deg,#fff 0%,#f4f9fd 100%);border-top:4px solid #537fa3}
.v366-executive-contrast .v352-map-empty strong{font-size:14px}
.v366-executive-contrast .v352-map-empty span{font-size:11px}
.v366-executive-contrast .v352-map-legend{font-size:10px;color:#5e7080}
.v366-executive-contrast .v352-country-row>b{font-size:10px}
.v366-executive-contrast .v352-country-row .country strong{font-size:12px;color:#2c4352}
.v366-executive-contrast .v352-country-row .country small{font-size:10px;color:#6b7b86}
.v366-executive-contrast .v352-country-row .metrics em{font-size:9px}
.v366-executive-contrast .v352-country-row .value strong{font-size:12px;color:#2e4b5e}
.v366-executive-contrast .v352-country-row .value small{font-size:9px}
.v366-executive-contrast .v352-region-cards article{background:#f8fbfe;border-color:#d7e4ed}
.v366-executive-contrast .v352-region-cards article>span{font-size:10px;color:#5e7282}
.v366-executive-contrast .v352-region-cards article>strong{font-size:21px;color:#29495d}
.v366-executive-contrast .v352-region-cards article>strong small{font-size:10px}
.v366-executive-contrast .v352-region-cards article>div em{font-size:9px}
.v366-executive-contrast .v352-region-cards article>b{font-size:11px}
.v366-executive-contrast .v352-region-cards article>b small{font-size:9px}
.v366-executive-contrast .v352-model-list>div>span>b{font-size:9px}
.v366-executive-contrast .v352-model-list>div>span>strong,.v366-executive-contrast .v352-supplier-list>div>span:first-child strong{font-size:11px}
.v366-executive-contrast .v352-model-list>div>span>small,.v366-executive-contrast .v352-supplier-list>div>span:first-child small{font-size:9px}
.v366-executive-contrast .v352-model-list>div>strong,.v366-executive-contrast .v352-supplier-list .supplier-meta b{font-size:12px}
.v366-executive-contrast .v352-model-list>div>strong small,.v366-executive-contrast .v352-supplier-list .supplier-meta small{font-size:9px}
.v366-executive-contrast .v352-list-empty{font-size:11px}
.v366-executive-contrast .v352-global-note{font-size:10px}

/* Forecast / executive risk */
.v366-executive-contrast .v353-target-row>span strong,.v366-executive-contrast .v353-risk-list>a strong{font-size:12px;color:#314754}
.v366-executive-contrast .v353-target-row>span small,.v366-executive-contrast .v353-risk-list>a small{font-size:10px;color:#697983}
.v366-executive-contrast .v353-target-row>b{font-size:12px}
.v366-executive-contrast .v353-target-memo{font-size:10px}
.v366-executive-contrast .v353-outlook-summary span{font-size:10px}
.v366-executive-contrast .v353-outlook-summary strong{font-size:14px}
.v366-executive-contrast .v353-forecast-month strong{font-size:12px}
.v366-executive-contrast .v353-forecast-month small{font-size:10px}
.v366-executive-contrast .v353-forecast-bars>span small{font-size:9px}
.v366-executive-contrast .v353-forecast-foot b{font-size:13px}
.v366-executive-contrast .v353-forecast-foot span{font-size:9px}
.v366-executive-contrast .v353-radar text{font-size:10px}
.v366-executive-contrast .v353-radar>small{font-size:10px}
.v366-executive-contrast .v353-risk-list>a>em{font-size:9px}
.v366-executive-contrast .v353-method-note,.v366-executive-contrast .v353-empty,.v366-executive-contrast .v353-target-note{font-size:10px}

/* Korea installation map */
.v366-executive-contrast .v354-korea-panel{background:linear-gradient(180deg,#fff 0%,#f7fbfd 100%);border-top:4px solid #577d99}
.v366-executive-contrast .v354-map-loading{font-size:11px}
.v366-executive-contrast .v354-map-popup>strong{font-size:13px}
.v366-executive-contrast .v354-map-popup>small,.v366-executive-contrast .v354-map-popup>p{font-size:10px}
.v366-executive-contrast .v354-map-popup>div span{font-size:9px}
.v366-executive-contrast .v354-map-popup>div b,.v366-executive-contrast .v354-map-popup>a{font-size:10px}
.v366-executive-contrast .v354-status-legend{font-size:10px}
.v366-executive-contrast .v354-korea-stats span{font-size:10px;color:#5c7080}
.v366-executive-contrast .v354-korea-stats strong{font-size:18px;color:#27475b}
.v366-executive-contrast .v354-install-row span strong,.v366-executive-contrast .v354-location-row span strong{font-size:11px}
.v366-executive-contrast .v354-install-row span small,.v366-executive-contrast .v354-location-row span small{font-size:9px}
.v366-executive-contrast .v354-install-row em{font-size:9px}
.v366-executive-contrast .v354-location-missing>div:first-child strong{font-size:11px}
.v366-executive-contrast .v354-location-missing>div:first-child span,.v366-executive-contrast .v354-more-missing{font-size:9px}

/* Carbon market */
.v366-executive-contrast .v348-carbon-panel{background:linear-gradient(180deg,#fff 0%,#fffaf1 100%);border-top:4px solid #a77a39}
.v366-executive-contrast .v350-carbon-summary-card{min-height:100px;padding:15px;background:#fffdf8;border-color:#eadfc9}
.v366-executive-contrast .v350-carbon-summary-card small{font-size:11px;color:#75664e}
.v366-executive-contrast .v350-carbon-summary-card strong{font-size:22px;color:#3e3326}
.v366-executive-contrast .v350-carbon-summary-card em{font-size:10px;color:#7d705d}
.v366-executive-contrast .v350-carbon-rank-label>b{font-size:10px}
.v366-executive-contrast .v350-carbon-rank-label strong{font-size:12px}
.v366-executive-contrast .v350-carbon-rank-label small{font-size:10px}
.v366-executive-contrast .v350-carbon-rank-value strong{font-size:14px}
.v366-executive-contrast .v350-carbon-rank-value small{font-size:10px}
.v366-executive-contrast .v350-carbon-market-head strong{font-size:13px}
.v366-executive-contrast .v350-carbon-market-head span,.v366-executive-contrast .v350-carbon-market-head em{font-size:11px}
.v366-executive-contrast .v348-carbon-card-head strong{font-size:14px}
.v366-executive-contrast .v348-carbon-card-head small,.v366-executive-contrast .v348-carbon-card-head>span{font-size:11px}
.v366-executive-contrast .v348-carbon-price strong{font-size:23px}
.v366-executive-contrast .v348-carbon-price span{font-size:12px}
.v366-executive-contrast .v348-carbon-meta>span,.v366-executive-contrast .v348-carbon-meta a{font-size:10px}
.v366-executive-contrast .v348-carbon-note strong{font-size:13px}
.v366-executive-contrast .v348-carbon-note p{font-size:12px}
.v366-executive-contrast .v348-carbon-note small{font-size:10px}

/* Dashboard notifications are also part of the headquarters overview */
.v366-executive-contrast .dashboard-alert-stack{border-color:#dfc47f;background:#fffaf0}
.v366-executive-contrast .dashboard-alert-head span{font-size:12px;color:#806323}
.v366-executive-contrast .dashboard-alert-head h2{font-size:19px;color:#3f3422}
.v366-executive-contrast .dashboard-alert-item strong{font-size:13px;color:#3f3527}
.v366-executive-contrast .dashboard-alert-item small{font-size:11px;color:#6d6659;line-height:1.45}
.v366-executive-contrast .dashboard-alert-item time{font-size:11px;color:#756d60}

@media(max-width:1280px){
  .v366-executive-contrast .v348-kpi{min-height:132px}
  .v366-executive-contrast .v356-snapshot-lower{grid-template-columns:1fr 1.2fr}
}
@media(max-width:820px){
  .v366-executive-contrast .v356-section-nav button{font-size:11px}
  .v366-executive-contrast .v356-priority-row{grid-template-columns:30px minmax(0,1fr) auto}
}
@media(max-width:640px){
  .v366-executive-contrast .v348-exec-hero p{font-size:14px}
  .v366-executive-contrast .v348-kpi-copy small{font-size:12px}
  .v366-executive-contrast .v348-kpi-copy strong{font-size:24px}
  .v366-executive-contrast .v348-panel-head h2{font-size:19px}
  .v366-executive-contrast .v348-panel-head p{font-size:12px}
}

/* ============================================================
   WPPEI CRM v366 - Modern high-contrast executive palette
   Design principle: neutral surfaces + saturated semantic accents.
   Pastel/tinted card backgrounds are intentionally removed.
   ============================================================ */
.v366-executive-contrast{
  --v366-navy:#0f172a;
  --v366-slate:#334155;
  --v366-muted:#64748b;
  --v366-line:#d9e1e8;
  --v366-surface:#ffffff;
  --v366-canvas:#f6f8fb;
  --v366-blue:#2563eb;
  --v366-indigo:#4f46e5;
  --v366-violet:#7c3aed;
  --v366-cyan:#0891b2;
  --v366-teal:#0f766e;
  --v366-emerald:#059669;
  --v366-orange:#ea580c;
  --v366-amber:#d97706;
  --v366-rose:#e11d48;
  --v366-red:#dc2626;
}

/* Canvas and hero: crisp dark header, no washed gradients */
.v366-executive-contrast{background:var(--v366-canvas)}
.v366-executive-contrast .v348-exec-hero{
  background:linear-gradient(118deg,#0b1324 0%,#172554 54%,#0e7490 135%);
  border:1px solid #243552;
  box-shadow:0 16px 36px rgba(15,23,42,.16);
}
.v366-executive-contrast .v348-eyebrow{color:#93c5fd}
.v366-executive-contrast .v348-exec-hero p{color:#dbeafe}
.v366-executive-contrast .v348-hero-side span{color:#bfdbfe}
.v366-executive-contrast .v348-hero-side em{color:#fbbf24}
.v366-executive-contrast .v357-report-launch{background:#fff;color:#172554;border-color:#fff;font-weight:800;box-shadow:0 5px 15px rgba(0,0,0,.14)}
.v366-executive-contrast .v357-report-launch:hover{background:#eff6ff}

/* 30-second snapshot: white command surface with unmistakable accents */
.v366-executive-contrast .v356-executive-snapshot{
  background:#fff;border:1px solid var(--v366-line);border-top:5px solid var(--v366-blue);
  box-shadow:0 8px 24px rgba(15,23,42,.07)
}
.v366-executive-contrast .v356-snapshot-head>div:first-child>span{color:var(--v366-blue);font-weight:900;letter-spacing:.05em}
.v366-executive-contrast .v356-snapshot-head h2{color:var(--v366-navy)}
.v366-executive-contrast .v356-snapshot-head p{color:var(--v366-muted)}
.v366-executive-contrast .v356-overall{border:0;color:#fff;box-shadow:0 7px 18px rgba(15,23,42,.14)}
.v366-executive-contrast .v356-overall>span,.v366-executive-contrast .v356-overall>small{color:rgba(255,255,255,.85)}
.v366-executive-contrast .v356-overall>strong{color:#fff}
.v366-executive-contrast .v356-overall.is-stable{background:var(--v366-teal)}
.v366-executive-contrast .v356-overall.is-watch{background:var(--v366-amber)}
.v366-executive-contrast .v356-overall.is-danger{background:var(--v366-red)}

/* Pulse cards: neutral cards, solid icon blocks, unique accents */
.v366-executive-contrast .v356-pulse-card{background:#fff;border:1px solid var(--v366-line);box-shadow:0 5px 14px rgba(15,23,42,.05)}
.v366-executive-contrast .v356-pulse-card:before{background:var(--pulse-accent)!important}
.v366-executive-contrast .v356-pulse-card:nth-child(1){--pulse-accent:var(--v366-blue)}
.v366-executive-contrast .v356-pulse-card:nth-child(2){--pulse-accent:var(--v366-emerald)}
.v366-executive-contrast .v356-pulse-card:nth-child(3){--pulse-accent:var(--v366-violet)}
.v366-executive-contrast .v356-pulse-card:nth-child(4){--pulse-accent:var(--v366-orange)}
.v366-executive-contrast .v356-pulse-card .v356-pulse-icon{background:var(--pulse-accent)!important;color:#fff!important;box-shadow:0 5px 12px color-mix(in srgb,var(--pulse-accent) 24%,transparent)}
.v366-executive-contrast .v356-pulse-copy span{color:var(--pulse-accent);font-weight:850}
.v366-executive-contrast .v356-pulse-copy strong{color:var(--v366-navy)}
.v366-executive-contrast .v356-pulse-copy small{color:var(--v366-muted)}

/* Lower snapshot: intentionally different surfaces */
.v366-executive-contrast .v356-readiness-card{background:var(--v366-navy);border:1px solid var(--v366-navy);color:#fff;box-shadow:0 7px 18px rgba(15,23,42,.14)}
.v366-executive-contrast .v356-readiness-ring{background:conic-gradient(var(--v366-cyan) calc(var(--score)*1%),#334155 0)}
.v366-executive-contrast .v356-readiness-ring:before{background:var(--v366-navy)}
.v366-executive-contrast .v356-readiness-ring strong,.v366-executive-contrast .v356-readiness-ring span{color:#fff}
.v366-executive-contrast .v356-readiness-card>div:last-child>span{color:#67e8f9}
.v366-executive-contrast .v356-readiness-card>div:last-child>strong{color:#fff}
.v366-executive-contrast .v356-readiness-card>div:last-child>small{color:#cbd5e1}
.v366-executive-contrast .v356-priority-card{background:#fff;border:1px solid var(--v366-line);border-left:5px solid var(--v366-orange)}
.v366-executive-contrast .v356-card-head span{color:var(--v366-orange)}
.v366-executive-contrast .v356-card-head strong{color:var(--v366-navy)}
.v366-executive-contrast .v356-card-head em{color:#9a3412;font-weight:800}
.v366-executive-contrast .v356-priority-row{background:#fff;border-color:#e2e8f0}
.v366-executive-contrast .v356-priority-rank{background:var(--v366-navy);color:#fff}
.v366-executive-contrast .v356-priority-main strong{color:var(--v366-slate)}
.v366-executive-contrast .v356-data-card{background:#fff;border:1px solid var(--v366-line);border-left:5px solid var(--v366-teal)}
.v366-executive-contrast .v356-data-icon{background:var(--v366-teal)!important;color:#fff!important}
.v366-executive-contrast .v356-data-card span{color:var(--v366-teal)}
.v366-executive-contrast .v356-data-card strong{color:var(--v366-navy)}
.v366-executive-contrast .v356-data-card small{color:var(--v366-muted)}

/* Section navigation: solid jewel colors instead of pale pills */
.v366-executive-contrast .v356-section-nav{background:#fff;border:1px solid var(--v366-line);box-shadow:0 5px 14px rgba(15,23,42,.04)}
.v366-executive-contrast .v356-section-nav button{color:#fff!important;border:0!important;font-weight:850;box-shadow:0 4px 10px rgba(15,23,42,.10)}
.v366-executive-contrast .v356-section-nav button:nth-child(1){background:var(--v366-blue)}
.v366-executive-contrast .v356-section-nav button:nth-child(2){background:var(--v366-violet)}
.v366-executive-contrast .v356-section-nav button:nth-child(3){background:var(--v366-cyan)}
.v366-executive-contrast .v356-section-nav button:nth-child(4){background:var(--v366-emerald)}
.v366-executive-contrast .v356-section-nav button:nth-child(5){background:var(--v366-orange)}
.v366-executive-contrast .v356-section-nav button:hover{filter:saturate(1.08) brightness(.94);transform:translateY(-1px)}

/* Eight primary KPIs: eight distinguishable accents, white surfaces */
.v366-executive-contrast .v348-kpi{--kpi-accent:var(--v366-blue);background:#fff!important;border:1px solid var(--v366-line);border-top:4px solid var(--kpi-accent);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.v366-executive-contrast .v348-kpi:before{display:none}
.v366-executive-contrast .v348-kpi:nth-child(1){--kpi-accent:var(--v366-indigo)}
.v366-executive-contrast .v348-kpi:nth-child(2){--kpi-accent:var(--v366-blue)}
.v366-executive-contrast .v348-kpi:nth-child(3){--kpi-accent:var(--v366-teal)}
.v366-executive-contrast .v348-kpi:nth-child(4){--kpi-accent:var(--v366-emerald)}
.v366-executive-contrast .v348-kpi:nth-child(5){--kpi-accent:var(--v366-cyan)}
.v366-executive-contrast .v348-kpi:nth-child(6){--kpi-accent:var(--v366-orange)}
.v366-executive-contrast .v348-kpi:nth-child(7){--kpi-accent:var(--v366-violet)}
.v366-executive-contrast .v348-kpi:nth-child(8){--kpi-accent:var(--v366-rose)}
.v366-executive-contrast .v348-kpi-icon{background:var(--kpi-accent)!important;color:#fff!important;border:0!important;box-shadow:0 5px 12px color-mix(in srgb,var(--kpi-accent) 22%,transparent)}
.v366-executive-contrast .v348-kpi-copy small{color:var(--kpi-accent);font-weight:850}
.v366-executive-contrast .v348-kpi-copy strong{color:var(--v366-navy)}
.v366-executive-contrast .v348-kpi-copy em{color:var(--v366-muted)}
.v366-executive-contrast .v348-kpi-arrow{color:var(--kpi-accent)}
.v366-executive-contrast .v348-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.10)}

/* Main panels: white, readable, differentiated by compact accent labels */
.v366-executive-contrast .v348-panel{background:#fff;border:1px solid var(--v366-line);box-shadow:0 5px 15px rgba(15,23,42,.045)}
.v366-executive-contrast .v348-panel-head{border-bottom-color:#e2e8f0}
.v366-executive-contrast .v348-panel-head>div:first-child>span{display:inline-flex;width:max-content;padding:4px 8px;border-radius:5px;background:var(--v366-navy);color:#fff;font-weight:850;letter-spacing:.04em}
.v366-executive-contrast .v348-panel-head h2,.v366-executive-contrast .v348-panel-head h3{color:var(--v366-navy)}
.v366-executive-contrast .v348-panel-head p{color:var(--v366-muted)}

/* Trends: indigo; global: cyan; sustainability: emerald; Korea: blue; carbon market: orange */
.v366-executive-contrast .v351-trend-card{background:#fff;border:1px solid var(--v366-line);border-top:4px solid var(--v366-indigo)}
.v366-executive-contrast .v351-trend-card>div:first-child strong{color:var(--v366-indigo)}
.v366-executive-contrast .v351-sustainability-panel{background:#fff;border:1px solid var(--v366-line);border-top:5px solid var(--v366-emerald)}
.v366-executive-contrast .v351-sustainability-kpis>div{background:#fff;border:1px solid #d7e0e7;border-left:4px solid var(--v366-emerald)}
.v366-executive-contrast .v351-sustainability-kpis span{color:var(--v366-teal)}
.v366-executive-contrast .v351-sustainability-kpis strong{color:var(--v366-navy)}
.v366-executive-contrast .v351-sustainability-note{background:#fff;border:1px solid #a7f3d0;border-left:4px solid var(--v366-emerald);color:#065f46}

.v366-executive-contrast .v352-global-panel{background:#fff;border:1px solid var(--v366-line);border-top:5px solid var(--v366-cyan)}
.v366-executive-contrast .v352-region-cards article{background:#fff;border:1px solid var(--v366-line);border-top:3px solid var(--v366-cyan)}
.v366-executive-contrast .v352-region-cards article>span{color:#0e7490}
.v366-executive-contrast .v352-region-cards article>strong{color:var(--v366-navy)}
.v366-executive-contrast .v354-korea-panel{background:#fff;border:1px solid var(--v366-line);border-top:5px solid var(--v366-blue)}
.v366-executive-contrast .v354-korea-stats strong{color:var(--v366-blue)}

.v366-executive-contrast .v348-carbon-panel{background:#fff;border:1px solid var(--v366-line);border-top:5px solid var(--v366-orange)}
.v366-executive-contrast .v350-carbon-summary-card{background:#fff;border:1px solid var(--v366-line);border-top:3px solid var(--v366-orange)}
.v366-executive-contrast .v350-carbon-summary-card small{color:#9a3412}
.v366-executive-contrast .v350-carbon-summary-card strong{color:var(--v366-navy)}
.v366-executive-contrast .v350-carbon-summary-card em{color:var(--v366-muted)}
.v366-executive-contrast .v348-carbon-note{background:#fff;border:1px solid #fed7aa;border-left:4px solid var(--v366-orange)}
.v366-executive-contrast .v348-carbon-note strong{color:#9a3412}
.v366-executive-contrast .v348-carbon-note p,.v366-executive-contrast .v348-carbon-note small{color:#64748b}

/* Queue/status blocks: preserve semantic contrast */
.v366-executive-contrast .v348-action-icon{color:#fff!important;background:var(--v366-slate)!important}
.v366-executive-contrast .v348-action strong{color:var(--v366-slate)}
.v366-executive-contrast .v348-action b{color:var(--v366-navy)}
.v366-executive-contrast .v348-status-cards>div{background:#fff;border-color:var(--v366-line)}
.v366-executive-contrast .v348-status-cards strong{color:var(--v366-blue)}

/* Dashboard notifications: high signal, not beige/pastel */
.v366-executive-contrast .dashboard-alert-stack{background:#fff;border:1px solid var(--v366-line);border-left:5px solid var(--v366-rose);box-shadow:0 5px 16px rgba(15,23,42,.05)}
.v366-executive-contrast .dashboard-alert-head span{color:var(--v366-rose);font-weight:850}
.v366-executive-contrast .dashboard-alert-head h2{color:var(--v366-navy)}
.v366-executive-contrast .dashboard-alert-item{background:#fff}
.v366-executive-contrast .dashboard-alert-item strong{color:var(--v366-slate)}
.v366-executive-contrast .dashboard-alert-item small,.v366-executive-contrast .dashboard-alert-item time{color:var(--v366-muted)}

/* Charts and microcopy stay neutral so data color carries meaning */
.v366-executive-contrast .v348-line-chart .grid text,
.v366-executive-contrast .v348-line-chart .labels text,
.v366-executive-contrast .v351-trend-svg .grid text,
.v366-executive-contrast .v351-trend-svg .labels text,
.v366-executive-contrast .v351-bars text{fill:#64748b}

@media(max-width:640px){
  .v366-executive-contrast .v356-section-nav{background:#fff}
  .v366-executive-contrast .v356-section-nav button{box-shadow:none}
}

/* ============================================================
   WPPEI CRM v367 - Program-wide visual clarity system
   Neutral surfaces + saturated semantic accents + Korean-first readability.
   This final layer intentionally overrides legacy compact/pastel styles.
   ============================================================ */
:root{
  --v367-bg:#f4f7fb;
  --v367-surface:#ffffff;
  --v367-surface-2:#f8fafc;
  --v367-ink:#132238;
  --v367-ink-2:#334155;
  --v367-muted:#64748b;
  --v367-line:#d6dee8;
  --v367-line-strong:#c2cfdd;
  --v367-navy:#0f172a;
  --v367-blue:#2563eb;
  --v367-indigo:#4f46e5;
  --v367-violet:#7c3aed;
  --v367-cyan:#0891b2;
  --v367-teal:#0f766e;
  --v367-emerald:#059669;
  --v367-amber:#d97706;
  --v367-orange:#ea580c;
  --v367-rose:#e11d48;
  --v367-red:#dc2626;
  --v367-shadow:0 8px 24px rgba(15,23,42,.065);
  --v367-shadow-hover:0 14px 34px rgba(15,23,42,.11);
  --canvas:var(--v367-bg);
  --surface:var(--v367-surface);
  --surface-soft:var(--v367-surface-2);
  --line:var(--v367-line);
  --line-strong:var(--v367-line-strong);
  --text:var(--v367-ink);
  --muted:var(--v367-muted);
  --muted-2:#7b8796;
  --success:var(--v367-emerald);
  --danger:var(--v367-red);
  --warning:var(--v367-amber);
  --info:var(--v367-blue);
}

html{background:var(--v367-bg)}
body{
  background:var(--v367-bg)!important;
  color:var(--v367-ink);
  font-size:16px;
  line-height:1.58;
  letter-spacing:-.01em;
}
body[data-role]{--role-accent:var(--v367-blue)}
body[data-role="master"]{--role-accent:var(--v367-blue)}
body[data-role="distributor"]{--role-accent:var(--v367-teal)}
body[data-role="coordinator"]{--role-accent:var(--v367-violet)}
body[data-role="engineer"]{--role-accent:var(--v367-orange)}
body[data-role="installation_manager"]{--role-accent:var(--v367-cyan)}
body[data-role="partner"]{--role-accent:var(--v367-indigo)}
body[data-role="finance_admin"]{--role-accent:var(--v367-rose)}

/* Shell */
.app-sidebar{
  background:linear-gradient(180deg,#0b1526 0%,#101b31 52%,#0a1220 100%)!important;
  border-right:1px solid #1f2c42;
  box-shadow:18px 0 45px -32px rgba(15,23,42,.75);
}
.brand-lockup{border-bottom-color:#253249}
.sidebar-context{padding-top:20px}
.sidebar-context-label,.nav-group-label{
  color:#91a0b4!important;
  font-size:11px!important;
  font-weight:760!important;
  letter-spacing:.09em!important;
}
.sidebar-context strong{font-size:15px!important;color:#f8fafc!important}
.context-state,.environment-row,.sidebar-footer p{font-size:11px!important;color:#9aa8ba!important}
.nav-link{
  min-height:49px!important;
  color:#c3ccda!important;
  font-size:14px!important;
  font-weight:650!important;
  border:1px solid transparent;
  border-radius:10px!important;
}
.nav-link:hover{color:#fff!important;background:#17243a!important;border-color:#263750!important;transform:none}
.nav-link.active{
  color:#fff!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--role-accent) 27%,#111c2f),#17243a)!important;
  border-color:color-mix(in srgb,var(--role-accent) 38%,#263750)!important;
  box-shadow:inset 3px 0 0 var(--role-accent)!important;
}
.nav-link.active::before{display:none!important}
.nav-icon{color:#9ba8b9!important;background:#18253a!important}
.nav-link.active .nav-icon{color:#fff!important;background:var(--role-accent)!important}
.nav-shortcut{font-size:11px!important}
.local-build-pill{font-size:11px!important}

.app-header{
  height:80px!important;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid var(--v367-line)!important;
  box-shadow:0 2px 10px rgba(15,23,42,.035);
}
.header-breadcrumb{font-size:12px!important;color:#6b7888!important}
.header-breadcrumb strong{color:#334155!important}
.page-title{font-size:22px!important;font-weight:780!important;color:var(--v367-ink)!important}
.command-trigger{height:42px!important;border-color:var(--v367-line)!important;background:#f8fafc!important;color:#526174!important}
.command-trigger>span{font-size:13px!important}
.header-date{font-size:12px!important}
.language-control{height:40px!important;border-color:var(--v367-line)!important}
.language-control select{font-size:13px!important}
.user-copy strong{font-size:13px!important;color:#1f2e43!important}
.user-copy span{font-size:11px!important;color:#6d7b8c!important}
.header-icon-btn{font-size:14px!important}
.content-area{max-width:1600px;padding-top:34px}

/* Page hierarchy */
.page-intro{gap:14px;margin-bottom:23px!important}
.page-intro-icon{
  width:46px!important;height:46px!important;border-radius:12px!important;
  color:#fff!important;background:var(--role-accent)!important;border:0!important;
  box-shadow:0 7px 16px color-mix(in srgb,var(--role-accent) 22%,transparent)!important;
}
.page-intro h1{font-size:27px!important;font-weight:790!important;color:var(--v367-ink)!important;letter-spacing:-.035em!important}
.page-intro p{font-size:14px!important;line-height:1.58!important;color:#58687a!important}
.crm-inline-intro strong,.section-heading h2,.inventory-section-head h2,.detail-section-head h3{color:var(--v367-ink)!important}

/* Core surfaces */
.panel,.cockpit-panel,.table-wrap,.mobile-card,.modal-panel,
[class*="-admin-panel"],[class*="-detail-card"],[class*="-summary-card"],[class*="-data-card"],
[class*="-info-card"],[class*="-action-card"],[class*="-status-card"]{
  background:#fff;
  border-color:var(--v367-line)!important;
}
.panel,.cockpit-panel{box-shadow:var(--v367-shadow)!important;border-radius:14px!important}
.panel:hover,.cockpit-panel:hover{border-color:var(--v367-line-strong)!important}
.panel-pad{padding:24px!important}
.panel-toolbar{
  position:relative;
  margin-bottom:20px!important;padding:0 0 16px 15px!important;
  border-bottom:1px solid #e5eaf0!important;
}
.panel-toolbar::before{
  content:"";position:absolute;left:0;top:2px;width:4px;height:26px;border-radius:999px;background:var(--role-accent)
}
.panel-toolbar h2{font-size:18px!important;font-weight:780!important;color:var(--v367-ink)!important}
.panel-toolbar p{font-size:13px!important;line-height:1.55!important;color:#617084!important}
.section-heading>div:first-child>span,.panel-heading-v11>div:first-child>span,[class*="-section-title"]>span{
  color:var(--role-accent)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important;
}
.section-heading h2,.panel-heading-v11 h2{font-size:18px!important;font-weight:780!important}
.section-heading p,.panel-heading-v11 p{font-size:13px!important;color:#617084!important}

/* Controls */
.btn{
  min-height:43px!important;padding:0 16px!important;border-radius:9px!important;
  font-size:14px!important;font-weight:750!important;letter-spacing:-.01em!important;
  box-shadow:none!important;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.10)!important}
.btn-primary{background:var(--role-accent)!important;border-color:var(--role-accent)!important;color:#fff!important}
.btn-secondary{background:#fff!important;border-color:#bfcbd8!important;color:#314157!important}
.btn-secondary:hover{border-color:var(--role-accent)!important;color:var(--role-accent)!important;background:#fff!important}
.btn-success{background:var(--v367-emerald)!important;border-color:var(--v367-emerald)!important;color:#fff!important}
.btn-warning{background:var(--v367-amber)!important;border-color:var(--v367-amber)!important;color:#fff!important}
.btn-danger{background:var(--v367-red)!important;border-color:var(--v367-red)!important;color:#fff!important}
.btn-sm{min-height:37px!important;font-size:13px!important}
.btn-xs{min-height:32px!important;font-size:12px!important}
.field-label{font-size:13px!important;font-weight:730!important;color:#37475b!important;line-height:1.35!important}
.field,.search-field,.filter-select,.field-inline,textarea.field{
  min-height:44px!important;border:1px solid #c8d2df!important;border-radius:9px!important;
  background:#fff!important;color:#17263a!important;font-size:14px!important;
}
textarea.field{line-height:1.55!important}
.field:focus,.search-field:focus,.filter-select:focus,.field-inline:focus{
  border-color:var(--role-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--role-accent) 13%,transparent)!important;
}
.field::placeholder,.search-field::placeholder{color:#8a97a7!important}
.field-help,.form-note,.info-strip,.inventory-note,.policy-note,.readonly-summary{font-size:13px!important;line-height:1.55!important}
.field-tooltip{color:var(--role-accent)!important}

/* Tables */
.table-wrap,.model-component-table-wrap{border-radius:11px!important;overflow:auto!important;background:#fff!important}
.data-table,.model-component-table,.settlement-table,.inventory-main-table,.bank-preview-table,.bank-history-table{
  font-size:14px!important;color:#253448!important;
}
.data-table thead,.model-component-table thead,.settlement-table thead,.inventory-main-table thead,.bank-preview-table thead,.bank-history-table thead{
  background:#eef3f8!important;
}
.data-table th,.model-component-table th,.settlement-table th,.inventory-main-table th,.bank-preview-table th,.bank-history-table th{
  color:#45566b!important;font-size:12px!important;font-weight:800!important;letter-spacing:.015em!important;text-transform:none!important;
  padding:13px 14px!important;border-bottom:1px solid #cfd9e5!important;
}
.data-table td,.model-component-table td,.settlement-table td,.inventory-main-table td,.bank-preview-table td,.bank-history-table td{
  color:#27374b!important;font-size:14px!important;line-height:1.55!important;padding:14px!important;border-bottom-color:#e5eaf0!important;
}
.data-table tbody tr:hover,.model-component-table tbody tr:hover,.settlement-table tbody tr:hover,.inventory-main-table tbody tr:hover{background:#f8fafc!important}
.table-subline{font-size:12px!important;line-height:1.45!important;color:#68788b!important}
.empty-inline,.text-muted{font-size:13px!important;color:#6b7a8b!important}

/* Strong semantic badges - no washed pastel chips */
.badge,.settlement-badge,.supply-status-badge,[class*="status-badge"]{
  min-height:27px!important;padding:4px 9px!important;border-radius:999px!important;font-size:12px!important;font-weight:780!important;line-height:1.25!important;
}
.badge-neutral{color:#475569!important;background:#f8fafc!important;border:1px solid #bac6d4!important}
.badge-info{color:#fff!important;background:var(--v367-blue)!important;border-color:var(--v367-blue)!important}
.badge-success{color:#fff!important;background:var(--v367-emerald)!important;border-color:var(--v367-emerald)!important}
.badge-warning{color:#fff!important;background:var(--v367-amber)!important;border-color:var(--v367-amber)!important}
.badge-danger{color:#fff!important;background:var(--v367-red)!important;border-color:var(--v367-red)!important}
.badge-purple{color:#fff!important;background:var(--v367-violet)!important;border-color:var(--v367-violet)!important}
.settlement-badge.is-good,.supply-status-confirmed{color:#fff!important;background:var(--v367-emerald)!important;border-color:var(--v367-emerald)!important}
.settlement-badge.is-warning{color:#fff!important;background:var(--v367-amber)!important;border-color:var(--v367-amber)!important}
.settlement-badge.is-alert,.supply-status-rejected{color:#fff!important;background:var(--v367-red)!important;border-color:var(--v367-red)!important}
.settlement-badge.is-info{color:#fff!important;background:var(--v367-blue)!important;border-color:var(--v367-blue)!important}

/* Tabs and filters */
.settlement-tabs,.inventory-tabs,[class*="filter-tabs"],[class*="-tabs"]{
  gap:6px!important;
}
.settlement-tabs button,.inventory-tab,[class*="filter-tabs"] button{
  min-height:38px!important;font-size:13px!important;font-weight:730!important;color:#526175!important;background:#fff!important;border:1px solid #cbd5e1!important;
}
.settlement-tabs button.active,.inventory-tab.active,[class*="filter-tabs"] button.active{
  color:#fff!important;background:var(--role-accent)!important;border-color:var(--role-accent)!important;
}

/* Summary cards across modules - white surfaces, distinct accents */
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid,.supply-alert-summary){
  gap:12px!important;
}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > *{
  --v367-card-accent:var(--v367-blue);
  background:#fff!important;border:1px solid var(--v367-line)!important;border-top:4px solid var(--v367-card-accent)!important;
  box-shadow:0 5px 15px rgba(15,23,42,.045)!important;border-radius:11px!important;
}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > :nth-child(6n+1){--v367-card-accent:var(--v367-blue)}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > :nth-child(6n+2){--v367-card-accent:var(--v367-teal)}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > :nth-child(6n+3){--v367-card-accent:var(--v367-violet)}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > :nth-child(6n+4){--v367-card-accent:var(--v367-orange)}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > :nth-child(6n+5){--v367-card-accent:var(--v367-cyan)}
:is(.settlement-summary-grid,.inventory-summary-grid,.as-summary-grid,.procurement-summary-grid,.recovery-inventory-summary-grid,.orders-summary-grid) > :nth-child(6n+6){--v367-card-accent:var(--v367-rose)}
.settlement-summary-card>i,.inventory-summary-icon,.as-summary-card>i{
  color:#fff!important;background:var(--v367-card-accent,var(--role-accent))!important;border-radius:9px!important;
}
.settlement-summary-card span,.inventory-summary-card span,.as-summary-card span{font-size:12px!important;color:#5c6b7d!important;font-weight:700!important}
.settlement-summary-card strong,.inventory-summary-card strong,.as-summary-card strong{font-size:20px!important;color:var(--v367-ink)!important;font-weight:820!important}

/* Module-specific information bands */
.info-strip,.inventory-note,.form-note,.policy-note,.settlement-integration-note{
  background:#fff!important;border:1px solid #cbd5e1!important;border-left:4px solid var(--role-accent)!important;color:#3c4b5f!important;
}
.form-note.warning{border-left-color:var(--v367-amber)!important;color:#7c4a07!important}
.error-inline,.form-error{background:#fff!important;border:1px solid #fecaca!important;border-left:4px solid var(--v367-red)!important;color:#991b1b!important}

/* Modal and notifications */
.modal-overlay{background:rgba(15,23,42,.64)!important;backdrop-filter:blur(5px)!important}
.modal-panel{border-radius:13px!important;border:1px solid #d3dce7!important;box-shadow:0 28px 70px rgba(15,23,42,.28)!important}
.modal-header{padding:18px 21px!important;background:#fff!important;border-bottom:1px solid var(--v367-line)!important}
.modal-header h3{font-size:18px!important;font-weight:790!important;color:var(--v367-ink)!important}
.modal-header h3 i{color:var(--role-accent)!important}
.modal-body{font-size:14px!important;color:#2f3e52!important}
.notification-panel{border-color:var(--v367-line)!important;box-shadow:0 22px 55px rgba(15,23,42,.22)!important}
.notification-panel-head strong{font-size:15px!important;color:var(--v367-ink)!important}
.notification-panel-head small{font-size:12px!important;color:#637287!important}
.notification-read-all{font-size:12px!important;color:var(--v367-blue)!important}
.notification-summary-chip{font-size:12px!important;font-weight:780!important}
.notification-summary-chip.critical{background:var(--v367-red)!important;color:#fff!important;border-color:var(--v367-red)!important}
.notification-summary-chip.high{background:var(--v367-amber)!important;color:#fff!important;border-color:var(--v367-amber)!important}
.notification-summary-chip.total{background:var(--v367-blue)!important;color:#fff!important;border-color:var(--v367-blue)!important}
.notification-filter-tabs button{font-size:12px!important}
.notification-filter-tabs button.active{color:#fff!important;background:var(--v367-blue)!important;border-color:var(--v367-blue)!important}
.notification-item strong{font-size:13px!important}
.notification-item small,.notification-item time{font-size:11px!important}
.toast{font-size:14px!important}

/* Mobile records */
.mobile-card{border-radius:11px!important;box-shadow:0 4px 13px rgba(15,23,42,.045)!important}
.mobile-card-title{font-size:16px!important;font-weight:780!important;color:var(--v367-ink)!important}
.mc-label{font-size:12px!important;color:#69788a!important;font-weight:700!important}
.mc-value{font-size:13px!important;color:#2b3b50!important}

/* Legacy microcopy calibration: never render core operational text at 6-10px */
:is(.count-pill,.quiet-link,.text-action,.field-help,.table-subline,.crm-pagination-summary,.inventory-stage-note,
.engineer-job-label,.engineer-work-summary,.engineer-logistics-summary,.engineer-setting-summary,
.installation-work-history-summary,.installation-action-summary,.installation-stock-readiness-summary,
.as-create-label,.as-completion-field,.settlement-section-title,.bank-mapping-title,.bank-preview-title,
.inventory-subsection-title,.detail-card-head,.warehouse-section-head,.crm-list-toolbar){
  font-size:12px!important;
}
:is(.detail-list,.detail-card-body,.installation-workflow-step,.engineer-job-info,.customer-info-card,.settlement-detail-row){font-size:13px!important}

/* Login - stronger first impression */
.login-page{background:#eef3f8!important}
.login-shell{border-color:#cbd5e1!important;box-shadow:0 30px 70px rgba(15,23,42,.16)!important}
.login-hero{background:linear-gradient(135deg,#0f172a 0%,#172554 52%,#0e7490 128%)!important}
.login-hero p{color:#dbeafe!important;font-size:14px!important}
.login-form h1{font-size:28px!important;color:var(--v367-ink)!important}
.login-form p{font-size:14px!important;color:#5d6c7d!important}
/* Dashboard v366 remains vivid; align it with the global v367 language */
.v366-executive-contrast{--v366-line:var(--v367-line);--v366-canvas:var(--v367-bg)}
.v366-executive-contrast .v348-panel,.v366-executive-contrast .v348-kpi,.v366-executive-contrast .v356-executive-snapshot{border-radius:13px!important}

@media(max-width:900px){
  .content-area{padding:24px 16px 42px}
  .panel-pad{padding:19px!important}
  .page-intro h1{font-size:24px!important}
  .panel-toolbar{align-items:flex-start!important;flex-direction:column!important}
  .toolbar-actions{width:100%;flex-wrap:wrap}
}
@media(max-width:640px){
  body{font-size:15px}
  .app-header{height:68px!important}
  .page-title{font-size:18px!important}
  .content-area{padding:20px 12px 36px}
  .page-intro{align-items:flex-start}
  .page-intro-icon{width:42px!important;height:42px!important}
  .page-intro h1{font-size:22px!important}
  .page-intro p{font-size:13px!important}
  .btn{font-size:13px!important}
  .data-table th{font-size:11px!important}
  .data-table td{font-size:13px!important}
}

/* v367 readability guard for historical inline microcopy. */
.content-area small,.modal-body small{font-size:12px!important;line-height:1.48!important}
body [style*="font-size:6px"],body [style*="font-size:7px"],body [style*="font-size:8px"],body [style*="font-size:9px"],body [style*="font-size:10px"],body [style*="font-size:11px"]{font-size:12px!important;line-height:1.48!important}

/* Clear focus and interaction feedback across all operational screens. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--role-accent) 28%,transparent)!important;outline-offset:2px!important}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.12)}
.btn-danger{background:var(--v367-red)!important;border-color:var(--v367-red)!important;color:#fff!important}

/* Functional section accents: distinguish modules without tinting the whole surface. */
.as-workflow-card,.engineer-job-card{border-left:4px solid var(--v367-violet)!important;background:#fff!important}
.inventory-section,.warehouse-section,.inventory-card{background:#fff!important}
.purchase-order-card,.po-detail-section{border-color:var(--v367-line)!important;background:#fff!important}
.settlement-section,.collection-panel{background:#fff!important}
.supply-alert-item.is-critical{border-left:4px solid var(--v367-red)!important}
.supply-alert-item.is-warning{border-left:4px solid var(--v367-amber)!important}
.supply-alert-item.is-info{border-left:4px solid var(--v367-blue)!important}

/* Korean labels can be slightly longer after acronym expansion. */
.data-table th,.model-component-table th,.settlement-table th{word-break:keep-all;white-space:normal!important}
.badge,.settlement-badge,[class*="status-badge"]{word-break:keep-all;white-space:nowrap}


/* v369 - executive hero visibility and action summary clarity */
.v366-executive-contrast .v357-report-launch span{color:#172554}
.v366-executive-contrast .v357-report-launch i{color:#1d4ed8}
.v357-hero-side small{display:block;margin-top:6px;color:#dbeafe;font-size:11px;line-height:1.45}
.v366-executive-contrast .v357-action-summary{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;padding:8px 12px;border-radius:999px;background:#f59e0b;color:#111827;font-size:12px;font-weight:900;line-height:1;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.v366-executive-contrast .v357-action-summary:hover{background:#fbbf24;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.v366-executive-contrast .v357-action-summary:focus-visible{outline:3px solid rgba(255,255,255,.4);outline-offset:2px}


/* v370 - wider monthly executive report modal */
.v357-report-modal-panel{
  width:min(1280px, calc(100vw - 32px));
  max-width:min(1280px, calc(100vw - 32px));
}
.v357-report-modal{
  width:100%;
}
@media (max-width: 1200px){
  .v357-report-modal-panel{
    width:min(1120px, calc(100vw - 24px));
    max-width:min(1120px, calc(100vw - 24px));
  }
}


/* v371 - executive snapshot layout refinement */
.v366-executive-contrast .v356-head-side{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:250px}
.v366-executive-contrast .v356-data-pill{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--v366-line);background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.05)}
.v366-executive-contrast .v356-data-pill i{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:#ecfdf5;color:#059669;font-size:14px;flex:0 0 32px}
.v366-executive-contrast .v356-data-pill.is-watch i{background:#fff7ed;color:#d97706}
.v366-executive-contrast .v356-data-pill span,.v366-executive-contrast .v356-data-pill strong{display:block}
.v366-executive-contrast .v356-data-pill span{font-size:10px;color:#64748b;font-weight:700}
.v366-executive-contrast .v356-data-pill strong{margin-top:2px;font-size:14px;color:var(--v366-navy)}
.v366-executive-contrast .v356-snapshot-lower{grid-template-columns:minmax(280px,.82fr) minmax(420px,1.38fr);gap:12px}
.v366-executive-contrast .v356-readiness-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:18px 16px;gap:14px;min-height:232px}
.v366-executive-contrast .v356-readiness-ring{flex:0 0 102px;width:102px;height:102px;background:conic-gradient(#22d3ee calc(var(--score)*1%),rgba(255,255,255,.14) 0)}
.v366-executive-contrast .v356-readiness-ring:before{width:76px;height:76px;background:#0f172a}
.v366-executive-contrast .v356-readiness-ring strong{font-size:30px;color:#fff}
.v366-executive-contrast .v356-readiness-ring span{font-size:11px;color:#cbd5e1}
.v366-executive-contrast .v356-readiness-card>div:last-child{display:flex;flex-direction:column;align-items:center}
.v366-executive-contrast .v356-readiness-card>div:last-child>span{font-size:12px;color:#67e8f9;font-weight:800}
.v366-executive-contrast .v356-readiness-card>div:last-child>strong{margin-top:6px;font-size:20px;color:#fff}
.v366-executive-contrast .v356-readiness-card>div:last-child>small{margin-top:8px;max-width:250px;font-size:11px;line-height:1.6;color:#cbd5e1}
.v366-executive-contrast .v356-priority-card{min-height:232px}
.v366-executive-contrast .v356-section-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:10px}
.v366-executive-contrast .v356-section-nav button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:46px;padding:9px 12px;border-radius:10px;color:#fff!important;font-size:12px;line-height:1.2}
.v366-executive-contrast .v356-section-nav .v356-nav-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);flex:0 0 26px}
.v366-executive-contrast .v356-section-nav .v356-nav-icon i{color:#fff;font-size:12px}
.v366-executive-contrast .v356-section-nav .v356-nav-label{display:block;color:#fff;font-weight:850}
@media (max-width: 1280px){
  .v366-executive-contrast .v356-snapshot-lower{grid-template-columns:1fr}
  .v366-executive-contrast .v356-section-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 820px){
  .v366-executive-contrast .v356-head-side{width:100%}
  .v366-executive-contrast .v356-section-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v366-executive-contrast .v356-section-nav button:last-child{grid-column:auto}
}


/* v372 - executive hierarchy and clarity refinement */
.v366-executive-contrast .v348-exec-hero{padding:22px 30px;align-items:center;gap:22px}
.v366-executive-contrast .v348-exec-hero h1{margin:10px 0 6px}
.v366-executive-contrast .v348-exec-hero p{max-width:820px;font-size:14px;line-height:1.55}
.v366-executive-contrast .v357-hero-side{display:flex;align-items:stretch;gap:12px;min-width:320px}
.v366-executive-contrast .v357-hero-side > div{gap:8px}
.v366-executive-contrast .v357-report-launch{min-height:48px;padding:0 18px;font-size:15px;font-weight:900;letter-spacing:-.01em}
.v366-executive-contrast .v357-report-launch i{font-size:15px}
.v366-executive-contrast .v357-hero-data-pill{display:flex;align-items:center;gap:10px;align-self:flex-end;max-width:100%;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}
.v366-executive-contrast .v357-hero-data-pill i{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#ecfdf5;color:#059669;font-size:13px;flex:0 0 28px}
.v366-executive-contrast .v357-hero-data-pill.is-watch i{background:#fff7ed;color:#d97706}
.v366-executive-contrast .v357-hero-data-pill span,.v366-executive-contrast .v357-hero-data-pill strong{display:block}
.v366-executive-contrast .v357-hero-data-pill span{color:#bfdbfe;font-size:10px;font-weight:800}
.v366-executive-contrast .v357-hero-data-pill strong{margin-top:1px;color:#fff;font-size:13px;font-weight:850}
.v366-executive-contrast .v356-executive-snapshot{padding:16px 18px}
.v366-executive-contrast .v356-snapshot-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding-bottom:11px}
.v366-executive-contrast .v356-head-side{min-width:230px}
.v366-executive-contrast .v356-overall{padding:10px 12px;min-width:220px}
.v366-executive-contrast .v356-pulse-grid{margin-top:12px}
.v366-executive-contrast .v356-snapshot-lower{margin-top:10px;grid-template-columns:minmax(285px,.85fr) minmax(430px,1.4fr);align-items:stretch}
.v366-executive-contrast .v356-readiness-card{min-height:214px;padding:16px 14px;gap:12px}
.v366-executive-contrast .v356-readiness-ring{width:96px;height:96px;flex-basis:96px}
.v366-executive-contrast .v356-readiness-ring:before{width:70px;height:70px}
.v366-executive-contrast .v356-readiness-ring strong{font-size:28px}
.v366-executive-contrast .v356-readiness-card>div:last-child>span{font-size:11px}
.v366-executive-contrast .v356-readiness-card>div:last-child>strong{font-size:18px}
.v366-executive-contrast .v356-readiness-card>div:last-child>small{font-size:10.5px;max-width:270px}
.v366-executive-contrast .v356-readiness-legend{display:block;margin-top:7px;color:#93c5fd;font-size:10px;font-style:normal;font-weight:800}
.v366-executive-contrast .v356-priority-card{min-height:214px;padding:11px 12px}
.v366-executive-contrast .v356-card-head{padding-bottom:6px}
.v366-executive-contrast .v356-card-head strong{font-size:12px}
.v366-executive-contrast .v356-card-head em{font-size:10px}
@media (max-width: 1100px){
  .v366-executive-contrast .v348-exec-hero{align-items:flex-start;flex-direction:column}
  .v366-executive-contrast .v357-hero-side{width:100%;min-width:0;flex-direction:column}
  .v366-executive-contrast .v357-hero-data-pill{align-self:flex-start}
  .v366-executive-contrast .v356-snapshot-head{grid-template-columns:1fr}
}


/* v373 - report button sizing, conditional data-health warning, neutral overview copy */
.v366-executive-contrast .v357-hero-side{align-items:center}
.v366-executive-contrast .v357-report-launch{
  height:44px;
  min-height:44px;
  padding:0 16px;
  align-self:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:16px;
  line-height:1;
  font-weight:900;
  text-align:center;
}
.v366-executive-contrast .v357-report-launch span{display:inline-flex;align-items:center;justify-content:center;line-height:1;color:#172554}
.v366-executive-contrast .v357-report-launch i{font-size:15px;line-height:1}
.v366-executive-contrast .v357-hero-health-warning{display:flex;align-items:center;gap:8px;margin-top:4px;padding:7px 9px;border-radius:9px;background:rgba(245,158,11,.16);border:1px solid rgba(251,191,36,.34);text-align:left}
.v366-executive-contrast .v357-hero-health-warning>i{display:grid;place-items:center;width:25px;height:25px;border-radius:999px;background:#fff7ed;color:#d97706;font-size:12px;flex:0 0 25px}
.v366-executive-contrast .v357-hero-health-warning span,.v366-executive-contrast .v357-hero-health-warning strong,.v366-executive-contrast .v357-hero-health-warning small{display:block}
.v366-executive-contrast .v357-hero-health-warning span{font-size:9px;color:#fed7aa;font-weight:800}
.v366-executive-contrast .v357-hero-health-warning strong{margin-top:1px;font-size:12px;color:#fff}
.v366-executive-contrast .v357-hero-health-warning small{margin-top:1px;font-size:9px;color:#ffedd5}


/* v374 - executive hero right panel refinement */
.v366-executive-contrast .v357-hero-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:10px;
  min-width:290px;
}
.v366-executive-contrast .v357-hero-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  width:100%;
}
.v366-executive-contrast .v357-date-line{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:100%;
}
.v366-executive-contrast .v357-date-line span,
.v366-executive-contrast .v357-date-line strong{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.v366-executive-contrast .v357-date-line span{
  color:#bfdbfe;
  font-size:12px;
  font-weight:800;
}
.v366-executive-contrast .v357-date-line strong{
  color:#fff;
  font-size:16px;
  font-weight:900;
}
.v366-executive-contrast .v357-report-launch{
  align-self:flex-end;
  height:42px;
  min-height:42px;
  padding:0 16px;
  border-radius:10px;
  font-size:15px;
  line-height:1;
}
.v366-executive-contrast .v357-report-launch span{
  font-size:15px;
  font-weight:900;
}
.v366-executive-contrast .v357-action-summary{
  margin-top:0;
  align-self:flex-end;
}
.v366-executive-contrast .v357-hero-health-warning{
  align-self:flex-end;
  max-width:100%;
}
@media (max-width: 1100px){
  .v366-executive-contrast .v357-hero-side,
  .v366-executive-contrast .v357-hero-meta{
    align-items:flex-start;
  }
  .v366-executive-contrast .v357-date-line{
    justify-content:flex-start;
  }
  .v366-executive-contrast .v357-report-launch,
  .v366-executive-contrast .v357-action-summary,
  .v366-executive-contrast .v357-hero-health-warning{
    align-self:flex-start;
  }
}


/* v375 - consolidated top management/operations KPI composition */
.v366-executive-contrast .v375-overview{
  margin:12px 0 16px;
  padding:18px;
  border:1px solid var(--v366-line);
  border-top:5px solid var(--v366-blue);
  border-radius:13px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.07);
}
.v366-executive-contrast .v375-overview-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:20px;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid #e2e8f0;
}
.v366-executive-contrast .v375-overview-title>span{display:block;color:var(--v366-blue);font-size:10px;font-weight:900;letter-spacing:.07em}
.v366-executive-contrast .v375-overview-title h2{margin:5px 0 0;color:var(--v366-navy);font-size:22px;line-height:1.2;letter-spacing:-.03em}
.v366-executive-contrast .v375-overview-title p{margin:6px 0 0;color:var(--v366-muted);font-size:12px;line-height:1.55}
.v366-executive-contrast .v375-status-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v366-executive-contrast .v375-status-item{min-width:0;padding:10px 11px;border:1px solid #dbe3eb;border-radius:10px;background:#f8fafc;text-decoration:none}
.v366-executive-contrast .v375-status-item span,.v366-executive-contrast .v375-status-item strong{display:block}
.v366-executive-contrast .v375-status-item span{color:#64748b;font-size:9px;font-weight:800}
.v366-executive-contrast .v375-status-item strong{margin-top:4px;color:#172554;font-size:13px;line-height:1.25;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v366-executive-contrast .v375-status-item strong i{margin-right:6px}
.v366-executive-contrast .v375-status-item.is-stable{border-color:#a7f3d0;background:#ecfdf5}.v366-executive-contrast .v375-status-item.is-stable strong{color:#047857}
.v366-executive-contrast .v375-status-item.is-watch{border-color:#fed7aa;background:#fff7ed}.v366-executive-contrast .v375-status-item.is-watch strong{color:#c2410c}
.v366-executive-contrast .v375-status-item.is-danger{border-color:#fecaca;background:#fef2f2}.v366-executive-contrast .v375-status-item.is-danger strong{color:#b91c1c}
.v366-executive-contrast .v375-status-action{border-color:#bfdbfe;background:#eff6ff;cursor:pointer}.v366-executive-contrast .v375-status-action strong{color:#1d4ed8;font-size:17px}
.v366-executive-contrast .v375-kpi-group{margin-top:15px}
.v366-executive-contrast .v375-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:8px;padding:0 2px}
.v366-executive-contrast .v375-group-head>div span,.v366-executive-contrast .v375-group-head>div strong{display:block}
.v366-executive-contrast .v375-group-head>div span{color:#64748b;font-size:9px;font-weight:900;letter-spacing:.07em}
.v366-executive-contrast .v375-group-head>div strong{margin-top:2px;color:var(--v366-navy);font-size:13px}
.v366-executive-contrast .v375-group-head>small{color:#94a3b8;font-size:10px}
.v366-executive-contrast .v375-metric-grid{display:grid;gap:10px}
.v366-executive-contrast .v375-performance-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.v366-executive-contrast .v375-operations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.v366-executive-contrast .v375-metric-card{
  --metric-accent:var(--v366-blue);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 12px;
  align-items:center;
  gap:11px;
  min-height:104px;
  padding:13px 13px;
  border:1px solid #dbe3eb;
  border-top:4px solid var(--metric-accent);
  border-radius:11px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(15,23,42,.045);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.v366-executive-contrast .v375-metric-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(15,23,42,.09);border-color:#cbd5e1}
.v366-executive-contrast .v375-metric-card.is-blue{--metric-accent:#2563eb}.v366-executive-contrast .v375-metric-card.is-emerald{--metric-accent:#059669}.v366-executive-contrast .v375-metric-card.is-amber{--metric-accent:#d97706}.v366-executive-contrast .v375-metric-card.is-cyan{--metric-accent:#0891b2}.v366-executive-contrast .v375-metric-card.is-green{--metric-accent:#16a34a}.v366-executive-contrast .v375-metric-card.is-indigo{--metric-accent:#4f46e5}.v366-executive-contrast .v375-metric-card.is-violet{--metric-accent:#7c3aed}.v366-executive-contrast .v375-metric-card.is-orange{--metric-accent:#ea580c}.v366-executive-contrast .v375-metric-card.is-rose{--metric-accent:#e11d48}.v366-executive-contrast .v375-metric-card.is-red{--metric-accent:#dc2626}
.v366-executive-contrast .v375-metric-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--metric-accent);color:#fff;font-size:15px;box-shadow:0 5px 13px color-mix(in srgb,var(--metric-accent) 24%,transparent)}
.v366-executive-contrast .v375-metric-copy{min-width:0}
.v366-executive-contrast .v375-metric-copy small,.v366-executive-contrast .v375-metric-copy strong,.v366-executive-contrast .v375-metric-copy em{display:block}
.v366-executive-contrast .v375-metric-copy small{color:var(--metric-accent);font-size:10px;font-weight:850}
.v366-executive-contrast .v375-metric-copy strong{margin-top:5px;color:var(--v366-navy);font-size:20px;line-height:1.1;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v366-executive-contrast .v375-metric-copy em{margin-top:5px;color:#64748b;font-size:10px;line-height:1.35;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v366-executive-contrast .v375-metric-arrow{color:var(--metric-accent);font-size:9px}
.v366-executive-contrast .v375-operations-group{padding-top:2px}
.v366-executive-contrast .v375-section-nav{margin-top:15px}
@media(max-width:1280px){
  .v366-executive-contrast .v375-overview-head{grid-template-columns:1fr}
  .v366-executive-contrast .v375-performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v366-executive-contrast .v375-operations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .v366-executive-contrast .v375-status-strip,.v366-executive-contrast .v375-performance-grid,.v366-executive-contrast .v375-operations-grid{grid-template-columns:1fr}
  .v366-executive-contrast .v375-group-head{align-items:flex-start;flex-direction:column}
}


/* v376 - top KPI emphasis + tabbed detail dashboard */
.v366-executive-contrast .v375-performance-grid .v375-metric-card{
  border:0;
  border-top:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--metric-accent) 86%,#0f172a),var(--metric-accent));
  box-shadow:0 9px 22px color-mix(in srgb,var(--metric-accent) 22%,transparent);
  color:#fff;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-card:hover{
  border-color:transparent;
  box-shadow:0 13px 28px color-mix(in srgb,var(--metric-accent) 30%,transparent);
}
.v366-executive-contrast .v375-performance-grid .v375-metric-icon{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  box-shadow:none;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy small,
.v366-executive-contrast .v375-performance-grid .v375-metric-copy strong,
.v366-executive-contrast .v375-performance-grid .v375-metric-copy em,
.v366-executive-contrast .v375-performance-grid .v375-metric-arrow{color:#fff}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy small{color:rgba(255,255,255,.9)}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy em{color:rgba(255,255,255,.78)}
.v366-executive-contrast .v375-operations-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.v366-executive-contrast .v375-operations-grid .v375-metric-card{
  background:#fff;
  border:1px solid #dbe3eb;
  border-top:4px solid var(--metric-accent);
  box-shadow:0 4px 12px rgba(15,23,42,.045);
}
.v366-executive-contrast .v376-tab-nav{
  position:static;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-top:16px;
  padding:0;
  border:0;
  border-bottom:1px solid #d6dee8;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.v366-executive-contrast .v376-tab-nav button{
  --tab-accent:var(--v366-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:9px 12px;
  border:0!important;
  border-bottom:4px solid var(--tab-accent)!important;
  border-radius:9px 9px 0 0!important;
  background:#fff!important;
  color:var(--tab-accent)!important;
  box-shadow:none!important;
  font-size:12px;
  font-weight:850;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.v366-executive-contrast .v376-tab-nav button:nth-child(1){--tab-accent:var(--v366-blue)}
.v366-executive-contrast .v376-tab-nav button:nth-child(2){--tab-accent:var(--v366-violet)}
.v366-executive-contrast .v376-tab-nav button:nth-child(3){--tab-accent:var(--v366-cyan)}
.v366-executive-contrast .v376-tab-nav button:nth-child(4){--tab-accent:var(--v366-emerald)}
.v366-executive-contrast .v376-tab-nav button:nth-child(5){--tab-accent:var(--v366-orange)}
.v366-executive-contrast .v376-tab-nav button .v356-nav-icon{
  width:27px;height:27px;flex:0 0 27px;
  background:var(--tab-accent);
  color:#fff;
  border:0;
  box-shadow:none;
}
.v366-executive-contrast .v376-tab-nav button .v356-nav-icon i{color:#fff}
.v366-executive-contrast .v376-tab-nav button .v356-nav-label{color:inherit}
.v366-executive-contrast .v376-tab-nav button.is-active{
  background:var(--tab-accent)!important;
  color:#fff!important;
  transform:translateY(-1px);
}
.v366-executive-contrast .v376-tab-nav button.is-active .v356-nav-icon{
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.v366-executive-contrast [data-v376-panel][hidden]{display:none!important}
.v366-executive-contrast [data-v376-panel]{margin-top:14px}
@media(max-width:1280px){
  .v366-executive-contrast .v375-operations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .v366-executive-contrast .v376-tab-nav{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0;gap:6px}
  .v366-executive-contrast .v376-tab-nav button{border:1px solid #d6dee8!important;border-bottom:3px solid var(--tab-accent)!important;border-radius:8px!important}
}
@media(max-width:760px){
  .v366-executive-contrast .v375-operations-grid{grid-template-columns:1fr}
}


/* v377 - detail tabs moved outside KPI card and given a clear tab surface */
.v366-executive-contrast .v377-tab-shell{
  position:static;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:12px 0 0;
  padding:8px;
  border:1px solid #d8e2ec;
  border-radius:12px;
  background:#eef3f8;
  box-shadow:0 5px 14px rgba(15,23,42,.045);
}
.v366-executive-contrast .v377-tab-shell button{
  --tab-accent:var(--v366-blue);
  min-height:46px;
  padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--tab-accent) 22%,#dbe4ed)!important;
  border-bottom:3px solid var(--tab-accent)!important;
  border-radius:9px!important;
  background:color-mix(in srgb,var(--tab-accent) 8%,#fff)!important;
  color:color-mix(in srgb,var(--tab-accent) 82%,#334155)!important;
  box-shadow:0 2px 6px rgba(15,23,42,.025)!important;
}
.v366-executive-contrast .v377-tab-shell button:hover{
  background:color-mix(in srgb,var(--tab-accent) 13%,#fff)!important;
  transform:translateY(-1px);
}
.v366-executive-contrast .v377-tab-shell button.is-active{
  background:var(--tab-accent)!important;
  color:#fff!important;
  border-color:var(--tab-accent)!important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--tab-accent) 20%,transparent)!important;
}
.v366-executive-contrast .v377-tab-shell button:not(.is-active) .v356-nav-icon{
  background:#fff;
  color:var(--tab-accent);
  border:1px solid color-mix(in srgb,var(--tab-accent) 25%,#dbe4ed);
  box-shadow:none;
}
.v366-executive-contrast .v377-tab-shell button:not(.is-active) .v356-nav-icon i{color:var(--tab-accent)}
.v366-executive-contrast .v377-tab-shell button.is-active .v356-nav-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.24);
}
.v366-executive-contrast .v377-tab-shell button.is-active .v356-nav-icon i{color:#fff}
@media(max-width:820px){
  .v366-executive-contrast .v377-tab-shell{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}
}


/* ============================================================
   WPPEI CRM v378 - active action queue + high-contrast detail tabs
   ============================================================ */
.v366-executive-contrast .v378-action-empty{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:88px;
  padding:16px 14px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#334155;
}
.v366-executive-contrast .v378-action-empty>i{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  background:#059669;
  color:#fff;
  font-size:16px;
}
.v366-executive-contrast .v378-action-empty strong,
.v366-executive-contrast .v378-action-empty small{display:block}
.v366-executive-contrast .v378-action-empty strong{font-size:14px;color:#0f172a}
.v366-executive-contrast .v378-action-empty small{margin-top:4px;font-size:11px;color:#64748b}

/* Action rows: only active rows render; make the remaining rows visually explicit. */
.v366-executive-contrast .v348-action{
  min-height:66px;
  padding:10px 4px;
  border-bottom:1px solid #d8e1ea;
  background:#fff;
}
.v366-executive-contrast .v348-action:hover{background:#f8fafc}
.v366-executive-contrast .v348-action-icon{color:#fff!important;background:#334155!important}
.v366-executive-contrast .v348-action-violet .v348-action-icon{background:#7c3aed!important}
.v366-executive-contrast .v348-action-blue .v348-action-icon{background:#2563eb!important}
.v366-executive-contrast .v348-action-green .v348-action-icon{background:#059669!important}
.v366-executive-contrast .v348-action-amber .v348-action-icon{background:#d97706!important}
.v366-executive-contrast .v348-action b{font-weight:900}

/* Every detail-tab panel uses one strong semantic accent and neutral surfaces. */
.v366-executive-contrast [data-v376-panel="operations"]{--v378-detail-accent:#2563eb;--v378-detail-dark:#1e3a8a}
.v366-executive-contrast [data-v376-panel="trends"]{--v378-detail-accent:#7c3aed;--v378-detail-dark:#4c1d95}
.v366-executive-contrast [data-v376-panel="global"]{--v378-detail-accent:#0891b2;--v378-detail-dark:#155e75}
.v366-executive-contrast [data-v376-panel="sustainability"]{--v378-detail-accent:#059669;--v378-detail-dark:#065f46}
.v366-executive-contrast [data-v376-panel="carbon"]{--v378-detail-accent:#ea580c;--v378-detail-dark:#9a3412}

.v366-executive-contrast [data-v376-panel].v348-panel,
.v366-executive-contrast [data-v376-panel] .v348-panel{
  background:#fff!important;
  border:1px solid #d6dee8!important;
  border-top:5px solid var(--v378-detail-accent)!important;
  box-shadow:0 7px 20px rgba(15,23,42,.065)!important;
}
.v366-executive-contrast [data-v376-panel] .v348-panel-head>div:first-child>span,
.v366-executive-contrast [data-v376-panel].v348-panel>.v348-panel-head>div:first-child>span{
  background:var(--v378-detail-accent)!important;
  color:#fff!important;
  border-radius:6px!important;
  padding:5px 9px!important;
}
.v366-executive-contrast [data-v376-panel] .v348-panel-head h2,
.v366-executive-contrast [data-v376-panel] .v348-panel-head h3,
.v366-executive-contrast [data-v376-panel].v348-panel>.v348-panel-head h2,
.v366-executive-contrast [data-v376-panel].v348-panel>.v348-panel-head h3{color:#0f172a!important}
.v366-executive-contrast [data-v376-panel] .v348-panel-head p,
.v366-executive-contrast [data-v376-panel].v348-panel>.v348-panel-head p{color:#526274!important}

/* Operations */
.v366-executive-contrast [data-v376-panel="operations"] .v348-status-cards>div{
  background:#fff!important;
  border:1px solid #d6dee8!important;
  border-left:4px solid #2563eb!important;
}
.v366-executive-contrast [data-v376-panel="operations"] .v348-status-cards span{color:#334155!important;font-weight:750}
.v366-executive-contrast [data-v376-panel="operations"] .v348-status-cards strong{color:#0f172a!important}
.v366-executive-contrast [data-v376-panel="operations"] .v348-money-list{border-color:#cbd5e1!important;background:#fff!important}
.v366-executive-contrast [data-v376-panel="operations"] .v348-money-list>div{background:#fff!important;border-color:#d8e1ea!important}
.v366-executive-contrast [data-v376-panel="operations"] .v348-money-list strong.is-warning{color:#c2410c!important}
.v366-executive-contrast [data-v376-panel="operations"] .v348-ring{background:conic-gradient(#059669 calc(var(--pct)*1%),#dbe3eb 0)!important}

/* Trends & risk */
.v366-executive-contrast [data-v376-panel="trends"] .v351-trend-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-target-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-outlook-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-card{
  background:#fff!important;
  border:1px solid #d6dee8!important;
  border-top:4px solid #7c3aed!important;
  box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a{
  background:#fff!important;
  border:1px solid #d8e1ea!important;
  border-left:4px solid #64748b!important;
}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-low{border-left-color:#059669!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-medium{border-left-color:#d97706!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-high{border-left-color:#dc2626!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-low>em{background:#059669!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-medium>em{background:#d97706!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-high>em{background:#dc2626!important;color:#fff!important}

/* Global business */
.v366-executive-contrast [data-v376-panel="global"].v352-global-panel,
.v366-executive-contrast [data-v376-panel="global"] .v354-korea-panel,
.v366-executive-contrast [data-v376-panel="global"] .v352-map-card,
.v366-executive-contrast [data-v376-panel="global"] .v352-country-card,
.v366-executive-contrast [data-v376-panel="global"] .v352-region-wrap,
.v366-executive-contrast [data-v376-panel="global"] .v352-portfolio-grid>article{
  background:#fff!important;
  border-color:#d6dee8!important;
}
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article{
  background:#fff!important;
  border:1px solid #d6dee8!important;
  border-top:4px solid #0891b2!important;
}
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article>span{color:#0e7490!important;font-weight:800}
.v366-executive-contrast [data-v376-panel="global"] .v352-country-row>b,
.v366-executive-contrast [data-v376-panel="global"] .v352-model-list>div>span>b{background:#0891b2!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="global"] .v352-country-row .metrics em,
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article>div em{background:#e2e8f0!important;color:#334155!important}
.v366-executive-contrast [data-v376-panel="global"] .v354-korea-stats>div{background:#fff!important;border:1px solid #d6dee8!important;border-top:3px solid #2563eb!important}
.v366-executive-contrast [data-v376-panel="global"] .v352-global-note{background:#fff!important;border-left:4px solid #0891b2!important;color:#475569!important}

/* Energy & carbon */
.v366-executive-contrast [data-v376-panel="sustainability"].v351-sustainability-panel{background:#fff!important}
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis>div{
  background:#fff!important;
  border:1px solid #d6dee8!important;
  border-top:4px solid #059669!important;
  border-left:1px solid #d6dee8!important;
  box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
}
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis span{color:#047857!important;font-weight:850}
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis strong{color:#0f172a!important}
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-grid>article{background:#fff!important;border:1px solid #d6dee8!important;border-top:4px solid #059669!important}
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-note{background:#fff!important;border:1px solid #a7f3d0!important;border-left:4px solid #059669!important;color:#334155!important}

/* Carbon markets */
.v366-executive-contrast [data-v376-panel="carbon"].v348-carbon-panel{background:#fff!important}
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card{
  background:#fff!important;
  border:1px solid #d6dee8!important;
  border-top:4px solid #ea580c!important;
  box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
}
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card>span{background:#ea580c!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card small{color:#9a3412!important;font-weight:850}
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card strong{color:#0f172a!important}
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-compare,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-trend{background:#fff!important;border:1px solid #d6dee8!important;border-top:4px solid #ea580c!important}
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-rank-label>b{background:#ea580c!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="carbon"] .v348-carbon-note{background:#fff!important;border:1px solid #fed7aa!important;border-left:4px solid #ea580c!important}

/* v379 - Korea installation map interaction */
.v366-executive-contrast .v354-install-row{
  cursor:pointer;
  border-radius:7px;
  padding-left:6px;
  padding-right:6px;
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.v366-executive-contrast .v354-install-row:hover{
  background:#f1f5f9;
  transform:translateX(2px);
}
.v366-executive-contrast .v354-install-row:focus-visible{
  outline:3px solid rgba(37,99,235,.22);
  outline-offset:1px;
}
.v366-executive-contrast .v354-install-row.is-map-focused{
  background:#eff6ff;
  box-shadow:inset 3px 0 0 #2563eb;
}
.v366-executive-contrast #v354-korea-map .wppei-map-viewport{
  cursor:grab;
}
.v366-executive-contrast #v354-korea-map .wppei-map-viewport.is-dragging{
  cursor:grabbing;
}


/* v380 - Korea address auto-geocoding controls */
.v366-executive-contrast .v380-location-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:6px;align-items:center;border-bottom:1px solid #e2e8f0}
.v366-executive-contrast .v380-location-row .v354-location-row{grid-template-columns:minmax(0,1fr) auto;border-bottom:0;padding:9px 4px;background:transparent}
.v366-executive-contrast .v380-location-row .v354-location-row em{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;background:#e0f2fe;color:#0369a1;font-size:9px;font-style:normal;font-weight:850;white-space:nowrap}
.v366-executive-contrast .v380-manual-location{display:grid;place-items:center;width:34px;height:34px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#475569;cursor:pointer}
.v366-executive-contrast .v380-manual-location:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff}
.v366-executive-contrast .v380-manual-location:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}


/* v382 - Korea map/list one-to-one selection */
.v366-executive-contrast .v354-install-row.is-map-focused{
  background:#fef2f2!important;
  box-shadow:inset 4px 0 0 #dc2626!important;
}
.v366-executive-contrast .v354-install-row.is-map-focused strong{color:#991b1b!important}
.v366-executive-contrast #v354-korea-map .wppei-map-circle{transition:width .14s ease,height .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease}


/* v383 - selected/nearby Korea installation marker clarity */
.v366-executive-contrast .v354-status-legend i.selected{background:#ef4444;border:2px solid #991b1b}
.v366-executive-contrast .v354-status-legend i.completed{background:#0f766e}
.v366-executive-contrast .v354-status-legend{flex-wrap:wrap;row-gap:7px}
.v366-executive-contrast #v354-korea-map .wppei-map-circle{box-shadow:0 1px 4px rgba(15,23,42,.18)}


/* ============================================================
   WPPEI CRM v385 - Executive Enterprise UI
   Quiet hierarchy, restrained color, precise alignment.
   ============================================================ */
.v366-executive-contrast{
  --v385-ink:#172033;
  --v385-muted:#667085;
  --v385-line:#e2e7ee;
  --v385-line-strong:#d2d9e3;
  --v385-surface:#ffffff;
  --v385-canvas:#f6f8fb;
  --v385-blue:#2459d3;
  --v385-blue-soft:#eef4ff;
  --v385-green:#15803d;
  --v385-amber:#b45309;
  --v385-red:#c62828;
  background:var(--v385-canvas)!important;
}

/* Header: shorter, quieter, no decorative rings. */
.v366-executive-contrast .v348-exec-hero{
  min-height:0;
  margin-bottom:12px;
  padding:19px 26px;
  border:0;
  border-radius:10px;
  background:#14213d!important;
  box-shadow:none!important;
  align-items:center;
}
.v366-executive-contrast .v348-exec-hero:after{display:none!important}
.v366-executive-contrast .v348-eyebrow{font-size:10px!important;color:#9db1d0!important;letter-spacing:.08em!important}
.v366-executive-contrast .v348-exec-hero h1{margin:7px 0 4px!important;font-size:32px!important;line-height:1.08!important;font-weight:760!important;letter-spacing:-.035em!important}
.v366-executive-contrast .v348-exec-hero p{margin:0!important;max-width:720px!important;color:#c5d0e2!important;font-size:12px!important;line-height:1.5!important}
.v366-executive-contrast .v348-hero-side{padding-left:20px!important;border-left:1px solid rgba(255,255,255,.14)!important}
.v366-executive-contrast .v357-hero-side{min-width:285px!important;gap:8px!important}
.v366-executive-contrast .v357-report-launch{
  height:38px!important;min-height:38px!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:7px!important;
  background:#fff!important;color:#172033!important;font-size:13px!important;font-weight:780!important;box-shadow:none!important;
}
.v366-executive-contrast .v357-report-launch span{font-size:13px!important;font-weight:780!important}
.v366-executive-contrast .v357-report-launch i{font-size:12px!important;color:var(--v385-blue)!important}
.v366-executive-contrast .v357-report-launch:hover{background:#f5f7fa!important;transform:none!important}
.v366-executive-contrast .v357-date-line span{font-size:10px!important;color:#9db1d0!important}
.v366-executive-contrast .v357-date-line strong{font-size:13px!important;color:#fff!important;font-weight:720!important}
.v366-executive-contrast .v357-action-summary{
  margin:0!important;padding:6px 9px!important;border-radius:6px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;
  font-size:11px!important;font-weight:760!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.14)!important;
}
.v366-executive-contrast .v357-action-summary:hover{background:rgba(255,255,255,.16)!important;transform:none!important}

/* Management overview: flat surface, limited copy. */
.v366-executive-contrast .v375-overview{
  margin:0 0 12px!important;padding:18px!important;border:1px solid var(--v385-line)!important;border-top:0!important;border-radius:10px!important;
  background:var(--v385-surface)!important;box-shadow:none!important;
}
.v366-executive-contrast .v375-overview-head{grid-template-columns:minmax(0,1fr) 330px!important;gap:20px!important;padding-bottom:12px!important;border-bottom:1px solid var(--v385-line)!important}
.v366-executive-contrast .v375-overview-title>span{color:var(--v385-blue)!important;font-size:9px!important;font-weight:800!important;letter-spacing:.06em!important}
.v366-executive-contrast .v375-overview-title h2{margin:3px 0 0!important;color:var(--v385-ink)!important;font-size:20px!important;font-weight:760!important;letter-spacing:-.025em!important}
.v366-executive-contrast .v375-overview-title p{margin:4px 0 0!important;color:var(--v385-muted)!important;font-size:11px!important;line-height:1.45!important}
.v366-executive-contrast .v375-status-strip{gap:6px!important}
.v366-executive-contrast .v375-status-item{
  min-height:54px!important;padding:8px 10px!important;border:1px solid var(--v385-line)!important;border-radius:7px!important;background:#fff!important;box-shadow:none!important;
}
.v366-executive-contrast .v375-status-item span{font-size:9px!important;color:#7b8798!important;font-weight:700!important}
.v366-executive-contrast .v375-status-item strong{margin-top:3px!important;font-size:12px!important;color:var(--v385-ink)!important;font-weight:780!important}
.v366-executive-contrast .v375-status-item.is-stable{border-left:3px solid var(--v385-green)!important}.v366-executive-contrast .v375-status-item.is-stable strong{color:var(--v385-green)!important}
.v366-executive-contrast .v375-status-item.is-watch{border-left:3px solid var(--v385-amber)!important}.v366-executive-contrast .v375-status-item.is-watch strong{color:var(--v385-amber)!important}
.v366-executive-contrast .v375-status-item.is-danger{border-left:3px solid var(--v385-red)!important}.v366-executive-contrast .v375-status-item.is-danger strong{color:var(--v385-red)!important}

/* Group headings: plain typography, no visual decoration. */
.v366-executive-contrast .v375-kpi-group{margin-top:14px!important}
.v366-executive-contrast .v375-group-head{margin-bottom:7px!important;padding:0!important;align-items:center!important}
.v366-executive-contrast .v375-group-head>div span{display:none!important}
.v366-executive-contrast .v375-group-head>div strong{margin:0!important;color:#344054!important;font-size:12px!important;font-weight:760!important}
.v366-executive-contrast .v375-group-head>small{color:#98a2b3!important;font-size:9px!important}
.v366-executive-contrast .v375-metric-grid{gap:8px!important}
.v366-executive-contrast .v375-performance-grid,.v366-executive-contrast .v375-operations-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* KPI cards: one restrained system. Color is no longer the container. */
.v366-executive-contrast .v375-performance-grid .v375-metric-card,
.v366-executive-contrast .v375-operations-grid .v375-metric-card,
.v366-executive-contrast .v375-metric-card{
  --metric-accent:var(--v385-blue)!important;
  min-height:92px!important;padding:12px!important;grid-template-columns:36px minmax(0,1fr) 9px!important;gap:10px!important;
  border:1px solid var(--v385-line)!important;border-top:1px solid var(--v385-line)!important;border-radius:8px!important;
  background:#fff!important;color:inherit!important;box-shadow:none!important;transform:none!important;
}
.v366-executive-contrast .v375-metric-card:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--v385-blue);border-radius:0 2px 2px 0}
.v366-executive-contrast .v375-metric-card{position:relative}
.v366-executive-contrast .v375-metric-card:hover{border-color:#bfc8d5!important;background:#fafbfc!important;box-shadow:none!important;transform:none!important}
.v366-executive-contrast .v375-performance-grid .v375-metric-icon,
.v366-executive-contrast .v375-operations-grid .v375-metric-icon,
.v366-executive-contrast .v375-metric-icon{
  width:36px!important;height:36px!important;border:0!important;border-radius:7px!important;background:var(--v385-blue-soft)!important;color:var(--v385-blue)!important;
  font-size:13px!important;box-shadow:none!important;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy small,
.v366-executive-contrast .v375-operations-grid .v375-metric-copy small,
.v366-executive-contrast .v375-metric-copy small{color:#667085!important;font-size:9px!important;font-weight:720!important}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy strong,
.v366-executive-contrast .v375-operations-grid .v375-metric-copy strong,
.v366-executive-contrast .v375-metric-copy strong{margin-top:4px!important;color:var(--v385-ink)!important;font-size:19px!important;font-weight:780!important}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy em,
.v366-executive-contrast .v375-operations-grid .v375-metric-copy em,
.v366-executive-contrast .v375-metric-copy em{margin-top:4px!important;color:#8a94a4!important;font-size:9px!important;font-weight:500!important}
.v366-executive-contrast .v375-performance-grid .v375-metric-arrow,
.v366-executive-contrast .v375-operations-grid .v375-metric-arrow,
.v366-executive-contrast .v375-metric-arrow{color:#a4adba!important;font-size:8px!important}

/* Tabs: true enterprise tabs. Only the active state uses brand color. */
.v366-executive-contrast .v377-tab-shell,.v366-executive-contrast .v376-tab-nav{
  margin:0 0 12px!important;padding:0 4px!important;gap:0!important;border:1px solid var(--v385-line)!important;border-radius:8px!important;
  background:#fff!important;box-shadow:none!important;overflow:hidden!important;
}
.v366-executive-contrast .v377-tab-shell button,.v366-executive-contrast .v376-tab-nav button{
  --tab-accent:var(--v385-blue)!important;min-height:43px!important;padding:8px 12px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;
  background:#fff!important;color:#667085!important;box-shadow:none!important;font-size:11px!important;font-weight:680!important;transform:none!important;
}
.v366-executive-contrast .v377-tab-shell button+button,.v366-executive-contrast .v376-tab-nav button+button{border-left:1px solid #edf0f4!important}
.v366-executive-contrast .v377-tab-shell button:hover,.v366-executive-contrast .v376-tab-nav button:hover{background:#f8fafc!important;color:#344054!important;transform:none!important}
.v366-executive-contrast .v377-tab-shell button.is-active,.v366-executive-contrast .v376-tab-nav button.is-active{
  background:#fff!important;color:var(--v385-blue)!important;border-bottom-color:var(--v385-blue)!important;font-weight:800!important;
}
.v366-executive-contrast .v377-tab-shell button .v356-nav-icon,.v366-executive-contrast .v376-tab-nav button .v356-nav-icon{
  width:24px!important;height:24px!important;flex:0 0 24px!important;border-radius:6px!important;background:#f1f4f8!important;border:0!important;box-shadow:none!important;
}
.v366-executive-contrast .v377-tab-shell button .v356-nav-icon i,.v366-executive-contrast .v376-tab-nav button .v356-nav-icon i{color:#7a8698!important;font-size:10px!important}
.v366-executive-contrast .v377-tab-shell button.is-active .v356-nav-icon,.v366-executive-contrast .v376-tab-nav button.is-active .v356-nav-icon{background:var(--v385-blue-soft)!important}
.v366-executive-contrast .v377-tab-shell button.is-active .v356-nav-icon i,.v366-executive-contrast .v376-tab-nav button.is-active .v356-nav-icon i{color:var(--v385-blue)!important}

/* Detail panels: neutral structure. Semantic colors stay inside actual statuses/charts. */
.v366-executive-contrast [data-v376-panel]{--v378-detail-accent:var(--v385-blue)!important;--v378-detail-dark:#1f3f83!important;margin-top:0!important}
.v366-executive-contrast [data-v376-panel].v348-panel,
.v366-executive-contrast [data-v376-panel] .v348-panel,
.v366-executive-contrast .v348-panel{
  border:1px solid var(--v385-line)!important;border-top:1px solid var(--v385-line)!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important;
}
.v366-executive-contrast .v348-panel{padding:16px!important}
.v366-executive-contrast [data-v376-panel] .v348-panel-head>div:first-child>span,
.v366-executive-contrast [data-v376-panel].v348-panel>.v348-panel-head>div:first-child>span,
.v366-executive-contrast .v348-panel-head>div:first-child>span{
  display:block!important;width:auto!important;padding:0!important;border-radius:0!important;background:transparent!important;color:#7b8798!important;
  font-size:9px!important;font-weight:720!important;letter-spacing:.04em!important;
}
.v366-executive-contrast .v348-panel-head{padding-bottom:10px!important;margin-bottom:12px!important;border-bottom:1px solid #edf0f4!important}
.v366-executive-contrast .v348-panel-head h2,.v366-executive-contrast .v348-panel-head h3{margin-top:3px!important;color:var(--v385-ink)!important;font-size:16px!important;font-weight:760!important}
.v366-executive-contrast .v348-panel-head p{margin-top:4px!important;color:#7b8798!important;font-size:10px!important;line-height:1.45!important}
.v366-executive-contrast .v348-panel-head>b,.v366-executive-contrast .v348-panel-head>em{color:#475467!important}

/* Remove decorative domain-colored borders from detail cards. */
.v366-executive-contrast [data-v376-panel="trends"] .v351-trend-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-target-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-outlook-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-card,
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article,
.v366-executive-contrast [data-v376-panel="global"] .v354-korea-stats>div,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis>div,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-grid>article,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-compare,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-trend{
  background:#fff!important;border:1px solid var(--v385-line)!important;border-top:1px solid var(--v385-line)!important;border-left:1px solid var(--v385-line)!important;border-radius:7px!important;box-shadow:none!important;
}
.v366-executive-contrast [data-v376-panel="global"] .v352-country-row>b,
.v366-executive-contrast [data-v376-panel="global"] .v352-model-list>div>span>b,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card>span,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-rank-label>b{
  background:#eef2f7!important;color:#475467!important;
}
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article>span,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis span,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card small{color:#667085!important;font-weight:720!important}

/* Actual state/risk colors remain strong and meaningful. */
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-low{border-left:3px solid var(--v385-green)!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-medium{border-left:3px solid var(--v385-amber)!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-high{border-left:3px solid var(--v385-red)!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-low>em{background:var(--v385-green)!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-medium>em{background:var(--v385-amber)!important;color:#fff!important}
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-list>a.risk-high>em{background:var(--v385-red)!important;color:#fff!important}

/* Action queue: dense, list-like, not card-heavy. */
.v366-executive-contrast .v348-action{min-height:58px!important;padding:8px 2px!important;border-bottom:1px solid #edf0f4!important}
.v366-executive-contrast .v348-action:hover{background:#fafbfc!important}
.v366-executive-contrast .v348-action-icon{width:32px!important;height:32px!important;border-radius:7px!important;background:#344054!important;box-shadow:none!important}
.v366-executive-contrast .v348-action-violet .v348-action-icon,
.v366-executive-contrast .v348-action-blue .v348-action-icon,
.v366-executive-contrast .v348-action-green .v348-action-icon,
.v366-executive-contrast .v348-action-amber .v348-action-icon{background:#344054!important}

@media(max-width:1280px){
  .v366-executive-contrast .v375-overview-head{grid-template-columns:1fr!important}
  .v366-executive-contrast .v375-performance-grid,.v366-executive-contrast .v375-operations-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  .v366-executive-contrast .v377-tab-shell,.v366-executive-contrast .v376-tab-nav{grid-template-columns:1fr!important;padding:0!important}
  .v366-executive-contrast .v377-tab-shell button+button,.v366-executive-contrast .v376-tab-nav button+button{border-left:0!important;border-top:1px solid #edf0f4!important}
  .v366-executive-contrast .v375-performance-grid,.v366-executive-contrast .v375-operations-grid{grid-template-columns:1fr!important}
}


/* ============================================================
   WPPEI CRM v386 - Contrast & Surface Clarity
   Stronger canvas/card separation without returning to decorative color.
   ============================================================ */
.v366-executive-contrast{
  --v386-ink:#172033;
  --v386-muted:#596579;
  --v386-muted-soft:#7b8798;
  --v386-line:#cdd5df;
  --v386-line-strong:#b8c2cf;
  --v386-surface:#ffffff;
  --v386-canvas:#eef2f6;
  --v386-blue:#2459d3;
  --v386-blue-soft:#edf3ff;
  --v386-shadow:0 2px 8px rgba(15,23,42,.055);
  --v386-shadow-hover:0 5px 16px rgba(15,23,42,.08);
  background:var(--v386-canvas)!important;
  color:var(--v386-ink)!important;
}

/* The overview is no longer a white card containing more white cards. */
.v366-executive-contrast .v375-overview{
  margin:0 0 14px!important;
  padding:5px 4px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.v366-executive-contrast .v375-overview-head{
  gap:22px!important;
  padding:2px 0 14px!important;
  border-bottom:1px solid var(--v386-line)!important;
}
.v366-executive-contrast .v375-overview-title>span{
  color:var(--v386-blue)!important;
  font-size:10px!important;
}
.v366-executive-contrast .v375-overview-title h2{
  color:var(--v386-ink)!important;
  font-size:22px!important;
}
.v366-executive-contrast .v375-overview-title p{
  margin-top:5px!important;
  color:var(--v386-muted)!important;
  font-size:12px!important;
  line-height:1.5!important;
}

/* Compact status cards retain semantic color, but their physical edges are clearer. */
.v366-executive-contrast .v375-status-strip{gap:8px!important}
.v366-executive-contrast .v375-status-item{
  min-height:58px!important;
  padding:9px 11px!important;
  border:1px solid var(--v386-line)!important;
  border-radius:8px!important;
  background:var(--v386-surface)!important;
  box-shadow:var(--v386-shadow)!important;
}
.v366-executive-contrast .v375-status-item span{font-size:10px!important;color:var(--v386-muted)!important}
.v366-executive-contrast .v375-status-item strong{font-size:13px!important}

/* Group labels remain quiet, but no longer disappear into the page. */
.v366-executive-contrast .v375-kpi-group{margin-top:16px!important}
.v366-executive-contrast .v375-group-head{margin-bottom:9px!important}
.v366-executive-contrast .v375-group-head>div strong{
  color:#344054!important;
  font-size:13px!important;
  font-weight:780!important;
}
.v366-executive-contrast .v375-group-head>small{
  color:#667085!important;
  font-size:10.5px!important;
}
.v366-executive-contrast .v375-metric-grid{gap:10px!important}

/* KPI cards: pure white cards on a distinctly cooler canvas. */
.v366-executive-contrast .v375-performance-grid .v375-metric-card,
.v366-executive-contrast .v375-operations-grid .v375-metric-card,
.v366-executive-contrast .v375-metric-card{
  min-height:100px!important;
  padding:14px!important;
  grid-template-columns:38px minmax(0,1fr) 10px!important;
  gap:11px!important;
  border:1px solid var(--v386-line)!important;
  border-radius:9px!important;
  background:var(--v386-surface)!important;
  box-shadow:var(--v386-shadow)!important;
}
.v366-executive-contrast .v375-metric-card:before{
  top:16px!important;
  bottom:16px!important;
  width:3px!important;
  background:var(--v386-blue)!important;
}
.v366-executive-contrast .v375-metric-card:hover{
  border-color:var(--v386-line-strong)!important;
  background:#fff!important;
  box-shadow:var(--v386-shadow-hover)!important;
  transform:translateY(-1px)!important;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-icon,
.v366-executive-contrast .v375-operations-grid .v375-metric-icon,
.v366-executive-contrast .v375-metric-icon{
  width:38px!important;
  height:38px!important;
  border:1px solid #d9e3f4!important;
  border-radius:8px!important;
  background:var(--v386-blue-soft)!important;
  color:var(--v386-blue)!important;
  font-size:14px!important;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy small,
.v366-executive-contrast .v375-operations-grid .v375-metric-copy small,
.v366-executive-contrast .v375-metric-copy small{
  color:#475467!important;
  font-size:11.5px!important;
  font-weight:760!important;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy strong,
.v366-executive-contrast .v375-operations-grid .v375-metric-copy strong,
.v366-executive-contrast .v375-metric-copy strong{
  margin-top:4px!important;
  color:var(--v386-ink)!important;
  font-size:22px!important;
  line-height:1.15!important;
  font-weight:790!important;
}
.v366-executive-contrast .v375-performance-grid .v375-metric-copy em,
.v366-executive-contrast .v375-operations-grid .v375-metric-copy em,
.v366-executive-contrast .v375-metric-copy em{
  margin-top:5px!important;
  color:var(--v386-muted)!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
.v366-executive-contrast .v375-metric-arrow{color:#7d8998!important;font-size:9px!important}

/* Tabs now read as a real control group rather than faint text floating on white. */
.v366-executive-contrast .v377-tab-shell,
.v366-executive-contrast .v376-tab-nav{
  margin:0 0 14px!important;
  padding:4px 5px 0!important;
  border:1px solid var(--v386-line)!important;
  border-radius:9px!important;
  background:#f5f7fa!important;
  box-shadow:0 1px 3px rgba(15,23,42,.035)!important;
}
.v366-executive-contrast .v377-tab-shell button,
.v366-executive-contrast .v376-tab-nav button{
  min-height:44px!important;
  background:#f5f7fa!important;
  color:#475467!important;
  font-size:12px!important;
  font-weight:700!important;
}
.v366-executive-contrast .v377-tab-shell button+button,
.v366-executive-contrast .v376-tab-nav button+button{border-left:1px solid #dfe5ec!important}
.v366-executive-contrast .v377-tab-shell button:hover,
.v366-executive-contrast .v376-tab-nav button:hover{background:#eef2f6!important;color:#243249!important}
.v366-executive-contrast .v377-tab-shell button.is-active,
.v366-executive-contrast .v376-tab-nav button.is-active{
  background:#fff!important;
  color:var(--v386-blue)!important;
  border-bottom-color:var(--v386-blue)!important;
  box-shadow:0 -1px 0 #fff,0 1px 3px rgba(15,23,42,.035)!important;
}
.v366-executive-contrast .v377-tab-shell button .v356-nav-icon,
.v366-executive-contrast .v376-tab-nav button .v356-nav-icon{
  background:#e8edf3!important;
}
.v366-executive-contrast .v377-tab-shell button.is-active .v356-nav-icon,
.v366-executive-contrast .v376-tab-nav button.is-active .v356-nav-icon{
  background:var(--v386-blue-soft)!important;
}

/* Detail surfaces gain just enough depth to be distinguishable from the canvas. */
.v366-executive-contrast [data-v376-panel].v348-panel,
.v366-executive-contrast [data-v376-panel] .v348-panel,
.v366-executive-contrast .v348-panel{
  border-color:var(--v386-line)!important;
  border-radius:9px!important;
  background:var(--v386-surface)!important;
  box-shadow:0 1px 5px rgba(15,23,42,.045)!important;
}
.v366-executive-contrast .v348-panel{padding:17px!important}
.v366-executive-contrast .v348-panel-head{
  padding-bottom:11px!important;
  margin-bottom:13px!important;
  border-bottom-color:#dfe5ec!important;
}
.v366-executive-contrast .v348-panel-head>div:first-child>span{
  color:#667085!important;
  font-size:10px!important;
}
.v366-executive-contrast .v348-panel-head h2,
.v366-executive-contrast .v348-panel-head h3{
  color:var(--v386-ink)!important;
  font-size:17px!important;
}
.v366-executive-contrast .v348-panel-head p{
  color:var(--v386-muted)!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}

/* Nested cards are slightly stronger than v385, while still staying neutral. */
.v366-executive-contrast [data-v376-panel="trends"] .v351-trend-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-target-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-outlook-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-card,
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article,
.v366-executive-contrast [data-v376-panel="global"] .v354-korea-stats>div,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis>div,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-grid>article,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-compare,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-trend{
  border-color:var(--v386-line)!important;
  background:#fff!important;
  box-shadow:0 1px 4px rgba(15,23,42,.035)!important;
}

/* Lists are still dense, but rows are easier to track visually. */
.v366-executive-contrast .v348-action{
  border-bottom-color:#dfe5ec!important;
}
.v366-executive-contrast .v348-action:hover{background:#f6f8fb!important}

@media(max-width:820px){
  .v366-executive-contrast .v375-overview{padding-left:0!important;padding-right:0!important}
}


/* ============================================================
   WPPEI CRM v387 - Layered Cool-Gray Canvas
   Three-level luminance system: canvas / surface / supporting surface.
   ============================================================ */
.v366-executive-contrast{
  --v387-canvas:#e8edf3;
  --v387-surface:#ffffff;
  --v387-support:#f3f6f9;
  --v387-support-strong:#edf1f5;
  --v387-line:#c8d1dc;
  --v387-line-soft:#d8e0e8;
  --v387-ink:#172033;
  --v387-muted:#596579;
  --v387-blue:#2459d3;
  --v387-shadow:0 2px 7px rgba(15,23,42,.055);
  background:var(--v387-canvas)!important;
}

/* Overview remains open on the canvas so individual cards read as distinct objects. */
.v366-executive-contrast .v375-overview{
  background:transparent!important;
}
.v366-executive-contrast .v375-overview-head{
  border-bottom-color:var(--v387-line)!important;
}

/* Primary surfaces: clean white, clear edge, restrained depth. */
.v366-executive-contrast .v375-status-item,
.v366-executive-contrast .v375-metric-card,
.v366-executive-contrast [data-v376-panel].v348-panel,
.v366-executive-contrast [data-v376-panel] .v348-panel,
.v366-executive-contrast .v348-panel{
  background:var(--v387-surface)!important;
  border-color:var(--v387-line)!important;
  box-shadow:var(--v387-shadow)!important;
}
.v366-executive-contrast .v375-metric-card:hover{
  border-color:#aeb9c7!important;
  background:#fff!important;
}

/* Secondary surfaces inside white panels: one step darker than the card surface. */
.v366-executive-contrast [data-v376-panel="trends"] .v351-trend-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-target-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-outlook-card,
.v366-executive-contrast [data-v376-panel="trends"] .v353-risk-card,
.v366-executive-contrast [data-v376-panel="global"] .v352-region-cards article,
.v366-executive-contrast [data-v376-panel="global"] .v354-korea-stats>div,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-kpis>div,
.v366-executive-contrast [data-v376-panel="sustainability"] .v351-sustainability-grid>article,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-compare,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-trend{
  background:var(--v387-support)!important;
  border-color:var(--v387-line-soft)!important;
  box-shadow:none!important;
}

/* Tabs: visible inactive state, crisp active state. */
.v366-executive-contrast .v377-tab-shell,
.v366-executive-contrast .v376-tab-nav{
  background:var(--v387-support-strong)!important;
  border-color:var(--v387-line)!important;
}
.v366-executive-contrast .v377-tab-shell button,
.v366-executive-contrast .v376-tab-nav button{
  background:var(--v387-support)!important;
  color:#475467!important;
}
.v366-executive-contrast .v377-tab-shell button+button,
.v366-executive-contrast .v376-tab-nav button+button{
  border-left-color:var(--v387-line-soft)!important;
}
.v366-executive-contrast .v377-tab-shell button:hover,
.v366-executive-contrast .v376-tab-nav button:hover{
  background:#e9eef4!important;
}
.v366-executive-contrast .v377-tab-shell button.is-active,
.v366-executive-contrast .v376-tab-nav button.is-active{
  background:#fff!important;
  color:var(--v387-blue)!important;
  border-bottom-color:var(--v387-blue)!important;
}
.v366-executive-contrast .v377-tab-shell button .v356-nav-icon,
.v366-executive-contrast .v376-tab-nav button .v356-nav-icon{
  background:#e4eaf1!important;
}
.v366-executive-contrast .v377-tab-shell button.is-active .v356-nav-icon,
.v366-executive-contrast .v376-tab-nav button.is-active .v356-nav-icon{
  background:#edf3ff!important;
}

/* Panel headings and table heads create a stable third level without decorative color. */
.v366-executive-contrast .v348-panel-head{
  border-bottom-color:var(--v387-line-soft)!important;
}
.v366-executive-contrast .table thead th,
.v366-executive-contrast table thead th{
  background:var(--v387-support)!important;
  color:#475467!important;
  border-bottom-color:var(--v387-line)!important;
}
.v366-executive-contrast .table tbody tr:hover,
.v366-executive-contrast table tbody tr:hover{
  background:#f7f9fb!important;
}

/* Supporting chips/labels stay neutral, not washed-out white. */
.v366-executive-contrast [data-v376-panel="global"] .v352-country-row>b,
.v366-executive-contrast [data-v376-panel="global"] .v352-model-list>div>span>b,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-summary-card>span,
.v366-executive-contrast [data-v376-panel="carbon"] .v350-carbon-rank-label>b{
  background:#e7edf3!important;
  color:#475467!important;
}

/* Slightly stronger row tracking on the action queue. */
.v366-executive-contrast .v348-action{
  border-bottom-color:var(--v387-line-soft)!important;
}
.v366-executive-contrast .v348-action:hover{
  background:var(--v387-support)!important;
}

/* ============================================================
   WPPEI CRM v388 - login / access approval workflow
   ============================================================ */
.access-request-entry{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 22px;padding:14px 15px;border:1px solid #cfd8e3;border-radius:10px;background:#f5f8fb}
.access-request-entry strong{display:block;color:#25364a;font-size:12px;font-weight:800}.access-request-entry p{margin:4px 0 0;color:#68778a;font-size:10px;line-height:1.55}.access-request-entry .btn{flex:0 0 auto}
.access-request-modal .modal-panel{max-width:920px;max-height:calc(100vh - 28px);border-radius:14px}.access-request-modal .modal-body{padding:18px 20px 22px;background:#f4f7fa}.access-request-form{display:flex;flex-direction:column;gap:14px}.access-request-intro{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid #ced8e3;border-radius:10px;background:#fff}.access-request-intro-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#edf3fb;color:#2459d3}.access-request-intro strong{display:block;color:#1f3147;font-size:14px}.access-request-intro p{margin:4px 0 0;color:#69798b;font-size:11px;line-height:1.55}
.access-form-section{padding:16px;border:1px solid #d3dce6;border-radius:11px;background:#fff}.access-form-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid #e5eaf0}.access-form-section-head>span{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#243b5a;color:#fff;font-size:10px;font-weight:800}.access-form-section-head strong{display:block;color:#26384d;font-size:13px}.access-form-section-head small{display:block;margin-top:2px;color:#7a8796;font-size:10px}.access-form-grid{display:grid;gap:12px}.access-form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.access-form-grid .span-2{grid-column:span 2}.access-role-block{display:flex;flex-direction:column;gap:12px}.access-role-extra{margin-top:2px}.access-choice-row{display:flex;flex-wrap:wrap;gap:8px}.access-choice-row label{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #d5dde6;border-radius:8px;background:#f8fafc;color:#45566c;font-size:11px;font-weight:700;cursor:pointer}.access-choice-row input{accent-color:#2459d3}.access-company-new-fields{display:flex;flex-direction:column;gap:14px}.access-service-area-wrap{padding:12px;border:1px solid #dce3ea;border-radius:9px;background:#f8fafc}.access-service-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:8px}.access-service-area-grid label{display:flex;align-items:center;gap:6px;color:#485a70;font-size:10.5px}.access-service-area-grid input{accent-color:#2459d3}.access-service-area-wrap small{display:block;margin-top:9px;color:#7a8795;font-size:10px;line-height:1.5}
.access-photo-field{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin-top:14px;padding:12px;border:1px solid #d9e1e8;border-radius:9px;background:#f8fafc}.access-photo-preview{width:96px;height:112px;display:grid;place-items:center;overflow:hidden;border:1px solid #ccd6df;border-radius:8px;background:#e9eef4;color:#8a98a8;font-size:28px}.access-photo-preview img{width:100%;height:100%;object-fit:cover}.access-photo-copy small{display:block;margin-top:6px;color:#6f7d8d;font-size:10px;line-height:1.5}.access-photo-copy em{display:block;margin-top:6px;color:#227359;font-size:10px;font-style:normal;font-weight:700}.access-file-field{padding:7px 9px!important}.access-policy-note,.access-warning-note{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border:1px solid #dbe3ea;border-radius:8px;background:#f6f8fb;color:#58697d;font-size:10.5px;line-height:1.55}.access-policy-note i{margin-top:2px;color:#2459d3}.access-warning-note{border-color:#ead9b3;background:#fff9ec;color:#795a20}.access-warning-note i{margin-top:2px;color:#b7791f}.access-bank-section{border-color:#cfd9e4}.access-request-actions{margin-top:0;padding:4px 0 0}.access-request-actions .btn-primary{min-width:150px}

.access-status-shell{min-height:650px}.access-status-panel{justify-content:center}.access-status-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.access-status-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;border:1px solid #d6dde6;background:#f5f7fa;color:#536375;font-size:10px;font-weight:800}.access-status-badge.pending{border-color:#cbd9ec;background:#eef4fd;color:#315c9d}.access-status-badge.supplement{border-color:#ead7aa;background:#fff8e9;color:#8b6220}.access-status-badge.rejected{border-color:#ebc6c8;background:#fff2f2;color:#a33e45}.access-status-badge.approved{border-color:#c7e1d5;background:#eef8f3;color:#267159}.access-status-hero{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid #cfdae6;border-radius:12px;background:#f7f9fc}.access-status-hero-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#e8eef7;color:#315d99;font-size:17px}.access-status-hero h2{margin:0;color:#203247;font-size:18px}.access-status-hero p{margin:6px 0 0;color:#66778a;font-size:11px;line-height:1.6}.access-status-hero.supplement{border-color:#ead9b5;background:#fffaf0}.access-status-hero.supplement .access-status-hero-icon{background:#fff0ca;color:#9a6a19}.access-status-hero.rejected{border-color:#edcacc;background:#fff6f6}.access-status-hero.rejected .access-status-hero-icon{background:#ffe4e5;color:#a7444a}.access-status-summary{margin:18px 0 0;border-top:1px solid #dce3ea}.access-status-summary>div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 2px;border-bottom:1px solid #e5eaf0}.access-status-summary dt{color:#758292;font-size:10px}.access-status-summary dd{margin:0;color:#2d3e52;font-size:11px;font-weight:750;word-break:break-word}.access-review-reason{margin-top:16px;padding:13px 14px;border:1px solid #ead6a8;border-radius:9px;background:#fff9ed}.access-review-reason strong{color:#845d1c;font-size:11px}.access-review-reason p{margin:6px 0 0;color:#69583b;font-size:11px;line-height:1.6}.access-review-reason.rejected{border-color:#e9c6c8;background:#fff5f5}.access-review-reason.rejected strong{color:#9c3f45}.access-review-reason.rejected p{color:#70474a}.access-status-actions{display:flex;gap:9px;margin-top:20px}.access-status-actions .btn-primary{flex:1}

.users-toolbar-actions{display:flex;align-items:center;gap:8px}.users-approval-count{min-width:20px;height:20px;display:inline-grid;place-items:center;margin-left:3px;padding:0 5px;border-radius:999px;background:#c74646;color:#fff;font-size:9px;font-weight:900}.access-admin-modal .modal-panel{max-width:900px;max-height:calc(100vh - 28px);border-radius:14px}.access-admin-modal .modal-body{padding:18px;background:#f3f6f9}.access-admin-wrap{display:flex;flex-direction:column;gap:13px}.access-admin-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;border:1px solid #d2dbe4;border-radius:10px;background:#fff}.access-admin-summary strong{display:block;color:#26384c;font-size:13px}.access-admin-summary p{margin:3px 0 0;color:#748193;font-size:10px}.access-admin-summary>span{display:flex;align-items:baseline;gap:4px;color:#68788a;font-size:10px}.access-admin-summary>span b{color:#b63d43;font-size:21px}.access-admin-filters{display:flex;flex-wrap:wrap;gap:6px}.access-admin-filter{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #d2dae3;border-radius:8px;background:#f8fafc;color:#596a7d;font-size:10px;font-weight:750;cursor:pointer}.access-admin-filter em{min-width:18px;padding:2px 5px;border-radius:999px;background:#e8edf3;color:#5d6c7d;font-size:9px;font-style:normal;text-align:center}.access-admin-filter.is-active{border-color:#8aa9db;background:#edf4ff;color:#2459b7}.access-admin-filter.is-active em{background:#2459d3;color:#fff}.access-admin-list{display:flex;flex-direction:column;gap:7px}.access-admin-row{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;padding:12px 13px;border:1px solid #d6dee6;border-radius:9px;background:#fff}.access-admin-row-main{min-width:0}.access-admin-row-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}.access-admin-row-top>span:last-child{color:#8793a1;font-size:9px}.access-admin-row-main>strong{color:#2a3a4d;font-size:12px}.access-admin-row-main>strong small{margin-left:5px;color:#637387;font-size:9px}.access-admin-row-main>p{margin:4px 0 0;color:#768393;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-admin-row-side{display:grid;grid-template-columns:auto auto;align-items:center;gap:5px 9px;text-align:right}.access-admin-row-side>span,.access-admin-row-side>small{color:#7c8997;font-size:9px}.access-admin-row-side>.btn{grid-row:1/3;grid-column:2}.access-admin-status{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:999px;border:1px solid #d4dce5;background:#f6f8fa;color:#5f6d7c;font-size:9px;font-weight:800}.access-admin-status.pending{border-color:#cbd9eb;background:#eef4fc;color:#315d9b}.access-admin-status.reapplied{border-color:#c4d9ef;background:#eaf4ff;color:#28639e}.access-admin-status.supplement{border-color:#e9d6a8;background:#fff8e9;color:#8d621c}.access-admin-status.approved{border-color:#c7e0d5;background:#eef8f3;color:#26715a}.access-admin-status.rejected{border-color:#ebc8ca;background:#fff3f3;color:#a23f46}.access-admin-empty{display:grid;place-items:center;gap:7px;min-height:190px;color:#8794a2}.access-admin-empty i{font-size:24px}.access-admin-empty strong{font-size:11px}

.access-review-modal .modal-panel{max-width:820px;max-height:calc(100vh - 28px);border-radius:14px}.access-review-modal .modal-body{padding:18px;background:#f3f6f9}.access-review-detail{display:flex;flex-direction:column;gap:12px}.access-review-hero{display:grid;grid-template-columns:94px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid #d4dce5;border-radius:10px;background:#fff}.access-review-photo{width:94px;height:112px;overflow:hidden;border:1px solid #ccd6df;border-radius:8px;background:#e9eef4}.access-review-photo img{width:100%;height:100%;object-fit:cover}.access-review-photo-empty{width:100%;height:100%;display:grid;place-items:center;color:#8a98a8;font-size:26px}.access-review-title-line{display:flex;align-items:center;gap:8px}.access-review-title-line>span:last-child{color:#8693a1;font-size:9px}.access-review-hero h3{margin:8px 0 0;color:#23364b;font-size:18px}.access-review-hero h3 small{margin-left:7px;color:#5f7186;font-size:11px}.access-review-hero p{margin:5px 0 0;color:#738091;font-size:10px}.access-review-section{padding:13px 14px;border:1px solid #d4dce5;border-radius:10px;background:#fff}.access-review-section.sensitive{border-color:#d6dde6;background:#fbfcfd}.access-review-section h4{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid #e4e9ee;color:#34475c;font-size:11px}.access-review-section h4 i{color:#476b9c}.access-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}.access-review-grid>div{display:grid;grid-template-columns:105px 1fr;gap:9px;padding:8px 0;border-bottom:1px solid #edf0f3}.access-review-grid>div:nth-last-child(-n+2){border-bottom:0}.access-review-grid>div.span-2{grid-column:span 2}.access-review-grid dt{color:#7c8896;font-size:9.5px}.access-review-grid dd{margin:0;color:#35475b;font-size:10.5px;font-weight:700;word-break:break-word}.access-bank-full{letter-spacing:.03em}.access-review-policy{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:9px;border-radius:7px;background:#f1f6fc;color:#55708f;font-size:9.5px;line-height:1.5}.access-review-policy i{margin-top:2px;color:#287158}.access-review-existing-reason{padding:11px 12px;border:1px solid #e9d6a8;border-radius:8px;background:#fff9ed}.access-review-existing-reason.rejected{border-color:#e8c5c7;background:#fff5f5}.access-review-existing-reason strong{color:#755b2f;font-size:10px}.access-review-existing-reason p{margin:5px 0 0;color:#6f6045;font-size:10px;line-height:1.55}.access-review-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px}.access-review-actions>div{display:flex;gap:7px}.access-review-target{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border:1px solid #dce3ea;border-radius:8px;background:#f7f9fb}.access-review-target strong{color:#2d4055;font-size:12px}.access-review-target span{color:#788696;font-size:10px}.access-reapply-check{display:flex;align-items:center;gap:8px;color:#546579;font-size:10.5px}.access-reapply-check input{accent-color:#2459d3}

@media(max-width:760px){.access-request-modal .modal-panel,.access-admin-modal .modal-panel,.access-review-modal .modal-panel{max-width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.access-form-grid.two,.access-review-grid{grid-template-columns:1fr}.access-form-grid .span-2,.access-review-grid>div.span-2{grid-column:auto}.access-service-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.access-photo-field{grid-template-columns:76px 1fr}.access-photo-preview{width:76px;height:92px}.access-request-entry{align-items:stretch;flex-direction:column}.access-status-summary>div{grid-template-columns:95px 1fr}.access-admin-row{grid-template-columns:1fr}.access-admin-row-side{display:flex;justify-content:space-between;text-align:left}.access-admin-row-side>.btn{grid-row:auto;grid-column:auto}.access-review-hero{grid-template-columns:76px 1fr}.access-review-photo{width:76px;height:92px}.access-review-actions{align-items:stretch;flex-direction:column}.access-review-actions>div{display:grid;grid-template-columns:1fr 1fr}.access-review-actions>div .btn-primary{grid-column:span 2}.users-toolbar-actions{flex-wrap:wrap}}


/* ============================================================
   WPPEI CRM v392 — production utility subset
   Tailwind Play CDN removed. Only the responsive utility classes used by
   the application shell are defined locally, avoiding runtime CSS generation.
   ============================================================ */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (min-width: 640px) { .sm\:block { display: block !important; } }
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .lg\:inline-flex { display: inline-flex !important; }
}
@media (min-width: 1280px) { .xl\:flex { display: flex !important; } }