:root {
  --wp-red: #e30613;
  --wp-red-dark: #b80510;
  --wp-red-soft: #fff1f2;
  --wp-green: #4b7f2f;
  --wp-green-dark: #2f641f;
  --wp-green-soft: #eef8ea;
  --wp-ink: #151f2e;
  --wp-ink-2: #202938;
  --wp-gray: #667085;
  --wp-border: #dfe4ec;
  --wp-surface: #fff;
  --wp-page: #f6f7f9;
}
html { font-size: 14px; min-height: 100%; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 16px; } }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem rgba(227, 6, 19, .22); }
body { background: var(--wp-page); color: #202532; margin: 0; min-height: 100vh; }
.auth-page { align-items: center; background: linear-gradient(135deg, #f7f8fa 0%, #eef3f8 100%); display: flex; justify-content: center; padding: 24px; }
.auth-card { background: #fff; border: 1px solid #dfe4ec; border-radius: 12px; box-shadow: 0 24px 70px rgba(21, 31, 46, .14); max-width: 420px; padding: 28px; width: 100%; }
.auth-logo { border: 1px solid #e5e9f0; border-radius: 8px; display: block; margin: 0 auto 18px; max-height: 76px; object-fit: contain; padding: 10px 12px; width: 220px; }
.auth-card h1 { color: var(--wp-ink); font-size: 1.55rem; font-weight: 900; margin: 0; text-align: center; }
.auth-card p { color: var(--wp-gray); font-size: .9rem; font-weight: 700; margin: 4px 0 20px; text-align: center; }
.auth-form { display: grid; gap: 13px; }
.auth-hint { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; color: #667085; font-size: .82rem; font-weight: 800; padding: 10px 12px; }
.auth-submit { border-radius: 9px; font-weight: 800; min-height: 44px; }
.auth-link { color: var(--wp-red); font-size: .88rem; font-weight: 800; justify-self: end; text-decoration: none; }
.auth-link:hover { color: var(--wp-red-dark); text-decoration: underline; }
.app-layout { display: flex; min-height: 100vh; }
.app-sidebar { background: var(--wp-ink); border-right: 4px solid var(--wp-red); color: #fff; flex: 0 0 248px; min-height: 100vh; padding: 24px 18px; position: sticky; top: 0; }
.sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .14); margin-bottom: 18px; padding-bottom: 18px; }
.brand-logo { background: #fff; border-radius: 8px; display: block; height: 70px; margin-bottom: 12px; object-fit: contain; padding: 10px 12px; width: 100%; }
.sidebar-user { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; display: grid; gap: 7px; margin: 12px 0 0; padding: 9px 10px; }
.sidebar-user span { color: #fff; display: block; font-size: .78rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user form { margin: 0; }
.sidebar-user button { background: transparent; border: 0; color: #ffb3b8; font-size: .76rem; font-weight: 800; padding: 0; }
.sidebar-user button:hover { color: #fff; text-decoration: underline; }
.sidebar-nav { display: grid; gap: 6px; }
.sidebar-link { border-radius: 8px; color: #d7deec; display: block; font-size: .92rem; font-weight: 700; padding: 10px 12px; text-decoration: none; }
.sidebar-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-link.active { background: #fff; box-shadow: inset 4px 0 0 var(--wp-red); color: var(--wp-ink); }
.sidebar-section-title { color: #91a0bb; font-size: .72rem; font-weight: 800; letter-spacing: 0; margin: 18px 8px 4px; text-transform: uppercase; }
.sidebar-sublink { border-radius: 8px; color: #d7deec; display: block; font-size: .84rem; font-weight: 650; line-height: 1.25; padding: 9px 10px 9px 22px; text-decoration: none; }
.sidebar-sublink:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-sublink.active { background: rgba(227, 6, 19, .18); box-shadow: inset 3px 0 0 var(--wp-red); color: #fff; }
.app-content { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.panel-shell { flex: 1; max-width: 1440px; padding: 24px; width: 100%; }
.panel-shell-wide { max-width: none; }
.app-footer { color: #667085; font-size: .84rem; padding: 0 24px 18px; }
.btn-primary { background-color: var(--wp-red); border-color: var(--wp-red); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--wp-red-dark); border-color: var(--wp-red-dark); }
.btn-outline-primary { border-color: var(--wp-red); color: var(--wp-red); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus { background-color: var(--wp-red); border-color: var(--wp-red); color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--wp-red); }
.page-header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 1.55rem; font-weight: 700; margin: 0; }
.page-kicker { color: #6b7280; font-size: .9rem; margin: 4px 0 0; }
.section-kicker { color: #667085; font-size: .84rem; margin: 4px 0 0; }
.subnav-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.subnav-pill { background: #fff; border: 1px solid #dfe4ec; border-radius: 8px; color: #384252; font-size: .84rem; font-weight: 700; padding: 8px 11px; text-decoration: none; }
.subnav-pill:hover { border-color: #b8c2d2; color: var(--wp-ink); }
.subnav-pill.active { background: var(--wp-ink); border-color: var(--wp-ink); box-shadow: inset 4px 0 0 var(--wp-red); color: #fff; }
.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; }
.metric-tile, .panel-section { background: #fff; border: 1px solid #dfe4ec; border-radius: 8px; box-shadow: 0 10px 24px rgba(31, 41, 55, .05); }
.metric-tile { padding: 16px; }
.metric-label { color: #667085; display: block; font-size: .82rem; font-weight: 600; margin-bottom: 8px; }
.metric-value { color: var(--wp-ink); font-size: 1.8rem; font-weight: 700; line-height: 1; }
.panel-section { margin-bottom: 18px; overflow: hidden; scroll-margin-top: 80px; }
.panel-section-header { align-items: center; border-bottom: 1px solid #e6eaf0; display: flex; gap: 12px; justify-content: space-between; padding: 14px 16px; }
.panel-section-title { font-size: 1rem; font-weight: 700; margin: 0; }
.table-panel { margin: 0; }
.table-panel th { color: #5f6b7a; font-size: .78rem; letter-spacing: 0; text-transform: uppercase; }
.compact-record-table { font-size: .78rem; min-width: max-content; white-space: nowrap; }
.compact-record-table th { font-size: .68rem; line-height: 1.15; white-space: nowrap; }
.compact-record-table td { line-height: 1.15; padding: .48rem .52rem; white-space: nowrap; }
.compact-record-table .status-pill { font-size: .68rem; padding: 5px 8px; white-space: nowrap; }
.compact-record-table .btn-sm { font-size: .72rem; padding: .24rem .48rem; white-space: nowrap; }
.compact-record-table .record-filter-row th { background: #f8fafc; padding: .32rem .36rem; }
.record-column-filter { background: #fff; border: 1px solid #cbd5e1; border-radius: 5px; color: #111827; font-size: .68rem; height: 26px; min-width: 68px; outline: 0; padding: 3px 6px; width: 100%; }
.record-column-filter:focus { border-color: var(--wp-red); box-shadow: 0 0 0 .12rem rgba(227, 6, 19, .14); }
.record-column-filter::placeholder { color: #8a95a5; }
.admin-toggle-form { display: inline-flex; margin: 0; }
.admin-toggle-checkbox { cursor: pointer; height: 18px; width: 18px; }
.status-pill { border-radius: 999px; display: inline-flex; font-size: .78rem; font-weight: 700; line-height: 1; padding: 6px 9px; }
.status-neutral { background: #eef2f7; color: #384252; }
.status-active { background: var(--wp-green-soft); color: var(--wp-green-dark); }
.status-warning { background: #fff2d8; color: #916006; }
.status-danger { background: #fde8e8; color: #b42318; }
.count-badge { background: #eef2f7; border-radius: 999px; color: #384252; display: inline-flex; font-size: .82rem; font-weight: 800; justify-content: center; min-width: 30px; padding: 5px 9px; }
.count-badge-warning { background: #fff2d8; color: #916006; }
.row-actions { align-items: flex-end; display: grid; gap: 8px; justify-items: end; min-width: 360px; }
.status-action-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.status-action-group form { margin: 0; }
.count-tabs { padding: 0 16px; }
.count-tabs .nav-link { color: #475467; font-weight: 700; }
.count-tabs .nav-link.active { color: #152033; }
.empty-state { color: #667085; padding: 28px 16px; text-align: center; }
.form-panel { padding: 16px; }
.list-filter-panel { border-bottom: 1px solid #e6eaf0; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-grid { align-items: end; grid-template-columns: repeat(5, minmax(140px, 1fr)); }
.template-form-grid { align-items: end; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto; }
.template-filter-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.report-filter-grid { grid-template-columns: repeat(6, minmax(150px, 1fr)); }
.template-submit-cell { align-items: center; display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.form-grid .full-span { grid-column: 1 / -1; }
.form-actions { align-items: center; display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.form-actions-split { justify-content: space-between; }
.form-actions-right { align-items: center; display: flex; gap: 10px; justify-content: flex-end; }
.photo-upload-panel { border-bottom: 1px solid #e6eaf0; display: grid; gap: 8px; padding: 14px 16px; }
.photo-upload-control { display: grid; gap: 6px; margin: 0; }
.photo-upload-control span { color: #475467; font-size: .78rem; font-weight: 800; }
.photo-upload-panel p { color: #667085; font-size: .82rem; margin: 0; }
.inline-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.report-selector-form { border-bottom: 0; }
.report-select-grid { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(260px, 1fr) auto; }
.report-select-grid label { display: grid; gap: 6px; }
.report-select-grid label span { color: #475467; font-size: .78rem; font-weight: 800; }
.report-summary-grid { background: #f8fafc; border-bottom: 1px solid #e6eaf0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(140px, 1fr)); padding: 14px 16px; }
.report-summary-grid span { color: #667085; display: block; font-size: .78rem; font-weight: 800; margin-bottom: 4px; }
.report-summary-grid strong { color: #111827; font-size: .98rem; }
.report-download-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(220px, 1fr)); padding: 16px; }
.report-download-card { border: 1px solid #dfe4ec; border-radius: 8px; display: grid; gap: 14px; grid-template-rows: 1fr auto; padding: 14px; }
.report-download-card h3 { color: #111827; font-size: .98rem; font-weight: 800; margin: 0 0 6px; }
.report-download-card p { color: #667085; font-size: .82rem; line-height: 1.4; margin: 0; }
.assignment-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; display: grid; gap: 12px; grid-template-columns: 2fr 1.2fr .8fr; margin-bottom: 16px; padding: 14px; }
.assignment-summary-wide { grid-template-columns: 1.5fr 1fr .75fr .75fr 1.5fr; margin-bottom: 0; }
.assignment-summary span { color: #667085; display: block; font-size: .78rem; font-weight: 700; margin-bottom: 4px; }
.assignment-summary strong { color: #111827; font-size: .92rem; }
.summary-responsibles { min-width: 0; }
.responsible-chip-list { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.responsible-chip-list em { color: #667085; font-size: .86rem; font-style: normal; }
.responsible-chip { background: var(--wp-green-soft); border: 1px solid #cfe8c6; border-radius: 999px; color: var(--wp-green-dark); display: inline-flex; font-size: .78rem; font-weight: 800; line-height: 1; padding: 6px 9px; }
.assignment-board { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.assignment-pane { border: 1px solid #dfe4ec; border-radius: 8px; display: grid; grid-template-rows: auto auto minmax(360px, 58vh); min-width: 0; overflow: hidden; }
.assignment-pane-selected { background: #fbfcff; }
.assignment-pane-header { align-items: center; border-bottom: 1px solid #e6eaf0; display: flex; justify-content: space-between; padding: 12px 14px; }
.assignment-pane-header h3 { font-size: .98rem; font-weight: 800; margin: 0; }
.assignment-pane-header span { color: #667085; display: block; font-size: .8rem; margin-top: 2px; }
.assignment-pane-header .assignment-count-line { display: inline-flex; gap: 4px; }
.assignment-pane-header .assignment-count-line span { display: inline; margin-top: 0; }
.assignment-search-box { background: #f8fafc; border-bottom: 1px solid #e6eaf0; padding: 12px; }
.assignment-search-label { color: #384252; display: block; font-size: .78rem; font-weight: 800; margin-bottom: 6px; }
.assignment-search-control { align-items: center; background: #fff; border: 1px solid #b8c2d2; border-radius: 7px; display: flex; min-height: 42px; overflow: hidden; }
.assignment-search-control:focus-within { border-color: var(--wp-red); box-shadow: 0 0 0 .18rem rgba(227, 6, 19, .14); }
.assignment-search-prefix { background: #eef2f7; border-right: 1px solid #dfe4ec; color: #384252; flex: 0 0 auto; font-size: .78rem; font-weight: 800; padding: 12px 11px; text-transform: uppercase; }
.assignment-search { background: transparent; border: 0; color: #111827; flex: 1; font-size: .92rem; min-width: 0; outline: 0; padding: 10px 12px; }
.assignment-search::placeholder { color: #7b8798; }
.assignment-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; padding: 10px; }
.assignment-person { align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; display: flex; gap: 10px; justify-content: space-between; min-height: 44px; padding: 7px 10px; }
.assignment-person:hover { border-color: #b8c2d2; }
.assignment-person.is-responsible { background: var(--wp-green-soft); border-color: #b8d9ac; }
.assignment-person-main { min-width: 0; }
.assignment-person-main strong { color: #111827; display: block; font-size: .88rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-person-main span { color: #667085; display: block; font-size: .76rem; line-height: 1.2; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-person-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 10px; }
.responsible-toggle { align-items: center; color: #384252; display: inline-flex; font-size: .82rem; font-weight: 700; gap: 6px; margin: 0; white-space: nowrap; }
.assignment-empty { align-items: center; color: #667085; display: flex; font-weight: 700; justify-content: center; min-height: 120px; text-align: center; }
.logo-upload-grid { align-items: center; display: grid; gap: 14px; grid-template-columns: 250px minmax(0, 1fr); }
.brand-logo-frame { align-items: center; background: #f8fafc; border: 1px dashed #b8c2d2; border-radius: 8px; color: #667085; display: flex; font-size: .84rem; font-weight: 700; height: 250px; justify-content: center; overflow: hidden; width: 250px; }
.brand-logo-preview { height: 250px; object-fit: contain; width: 250px; }
.brand-logo-thumb { background: #f8fafc; border: 1px solid #dfe4ec; border-radius: 6px; height: 42px; object-fit: contain; width: 42px; }
.option-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.option-check { align-items: center; border: 1px solid #dfe4ec; border-radius: 8px; display: flex; min-height: 38px; padding: 10px 12px; }
.group-stack { display: grid; gap: 12px; }
.mobile-test-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.mobile-test-flow-layout { display: flex; justify-content: center; }
.mobile-test-sidebar { display: grid; gap: 14px; }
.mobile-user-filter { display: grid; gap: 10px; padding: 16px; }
.mobile-assignment-list { display: grid; gap: 8px; max-height: 58vh; overflow: auto; padding: 12px; }
.mobile-assignment-card { background: #fff; border: 1px solid #dfe4ec; border-radius: 8px; color: #152033; display: grid; gap: 6px; padding: 12px; text-decoration: none; }
.mobile-assignment-card:hover { border-color: #e7a1a7; color: var(--wp-ink); }
.mobile-assignment-card.active { background: var(--wp-red-soft); border-color: var(--wp-red); box-shadow: inset 3px 0 0 var(--wp-red); }
.mobile-assignment-title { font-size: .92rem; font-weight: 800; line-height: 1.25; }
.mobile-assignment-meta { color: #667085; font-size: .78rem; }
.mobile-assignment-footer { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.mobile-assignment-footer > span:last-child { color: #667085; font-size: .78rem; font-weight: 700; }
.mobile-device-stage { min-width: 0; }
.mobile-device-shell { display: flex; justify-content: center; padding: 6px 0 18px; }
.mobile-device { background: var(--wp-ink); border: 8px solid var(--wp-ink); border-radius: 34px; box-shadow: 0 24px 60px rgba(21, 32, 51, .24); max-width: 420px; min-height: 760px; overflow: hidden; width: min(100%, 420px); }
.mobile-statusbar { align-items: center; color: #fff; display: flex; font-size: .78rem; font-weight: 800; justify-content: space-between; padding: 9px 18px 7px; }
.mobile-screen { background: #f3f6fa; max-height: 710px; min-height: 710px; overflow: auto; padding: 12px; position: relative; }
.mobile-login-screen { align-content: center; display: grid; gap: 22px; min-height: 680px; padding: 18px 8px; }
.mobile-login-brand { text-align: center; }
.mobile-login-logo { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 24px rgba(21, 32, 51, .08); display: inline-block; margin-bottom: 14px; max-height: 70px; object-fit: contain; padding: 10px 12px; width: 210px; }
.mobile-login-brand h2 { color: #111827; font-size: 1.35rem; font-weight: 900; margin: 0; }
.mobile-login-brand p { color: #667085; font-size: .86rem; font-weight: 700; margin: 4px 0 0; }
.mobile-login-form { background: #fff; border: 1px solid #dfe4ec; border-radius: 14px; display: grid; gap: 12px; padding: 16px; }
.mobile-login-form label { display: grid; gap: 6px; margin: 0; }
.mobile-login-form span { color: #475467; font-size: .78rem; font-weight: 800; }
.mobile-login-hint { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; color: #667085; font-size: .78rem; font-weight: 800; padding: 9px 10px; }
.mobile-forgot-link { color: var(--wp-red); font-size: .8rem; font-weight: 900; justify-self: end; text-decoration: none; }
.mobile-forgot-link:hover { color: var(--wp-red-dark); text-decoration: underline; }
.mobile-login-button { border-radius: 10px; font-weight: 800; min-height: 44px; }
.mobile-home-screen { display: grid; gap: 10px; }
.mobile-home-summary { background: #fff; border: 1px solid #dfe4ec; border-radius: 12px; display: flex; justify-content: space-between; padding: 14px; }
.mobile-home-summary span { color: #667085; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.mobile-home-summary strong { color: #111827; font-size: 1.5rem; line-height: 1; }
.mobile-count-list { display: grid; gap: 8px; }
.mobile-count-card { background: #fff; border: 1px solid #dfe4ec; border-radius: 12px; color: #152033; display: grid; gap: 7px; padding: 13px; text-decoration: none; }
.mobile-count-card:hover { border-color: var(--wp-red); color: var(--wp-ink); }
.mobile-count-title { color: #111827; font-size: .92rem; font-weight: 900; line-height: 1.25; }
.mobile-count-meta { color: #667085; font-size: .76rem; font-weight: 700; }
.mobile-count-footer { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.mobile-count-footer > span:last-child { color: #667085; font-size: .78rem; font-weight: 800; }
.mobile-logout-link { align-items: center; border: 1px solid #cbd5e1; border-radius: 999px; color: #384252; display: inline-flex; font-size: .75rem; font-weight: 900; min-height: 32px; padding: 6px 10px; text-decoration: none; }
.mobile-logout-link:hover { background: var(--wp-red-soft); border-color: #efb8bd; color: var(--wp-red-dark); }
.mobile-app-header { align-items: center; background: #fff; border: 1px solid #dfe4ec; border-left: 4px solid var(--wp-red); border-radius: 12px; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 10px; padding: 12px; }
.mobile-app-header-main { align-items: center; display: flex; gap: 10px; min-width: 0; }
.mobile-app-header-logo { background: #fff; border: 1px solid #eef1f5; border-radius: 7px; flex: 0 0 auto; height: 30px; object-fit: contain; padding: 4px 5px; width: 74px; }
.mobile-app-header span { color: #667085; display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.mobile-app-header strong { color: #111827; display: block; font-size: 1rem; line-height: 1.25; margin-top: 2px; }
.mobile-role-pill { background: var(--wp-green-soft); border: 1px solid #cfe8c6; border-radius: 999px; color: var(--wp-green-dark) !important; font-size: .72rem !important; padding: 6px 9px; text-transform: none !important; }
.mobile-card { background: #fff; border: 1px solid #dfe4ec; border-radius: 10px; margin-bottom: 10px; padding: 12px; }
.mobile-readonly-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-readonly-grid-main { grid-template-columns: 1fr; }
.mobile-field-stack { display: grid; gap: 10px; }
.mobile-field-stack label, .mobile-readonly-grid label, .mobile-form-field { display: grid; gap: 5px; margin: 0; }
.mobile-field-stack span, .mobile-readonly-grid span { color: #475467; font-size: .75rem; font-weight: 800; }
.mobile-location-list { display: grid; gap: 10px; }
.mobile-location-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.mobile-link-button { align-items: center; background: transparent; border: 0; color: var(--wp-red); display: inline-flex; font-size: .82rem; font-weight: 900; justify-self: start; line-height: 1.2; padding: 2px 0; }
.mobile-link-button:hover { color: var(--wp-red-dark); text-decoration: underline; }
.mobile-link-button-danger { color: #b42318; }
.mobile-link-button-danger:hover { color: #912018; }
.mobile-inline-status { border-radius: 8px; font-size: .75rem; font-weight: 800; padding: 8px 10px; }
.mobile-inline-status.is-success { background: var(--wp-green-soft); border: 1px solid #cfe8c6; color: var(--wp-green-dark); }
.mobile-inline-status.is-danger { background: #fff1f0; border: 1px solid #ffc9c4; color: #b42318; }
.mobile-capture-panel { display: grid; gap: 8px; }
.mobile-capture-title { color: #475467; font-size: .75rem; font-weight: 800; }
.mobile-action-row { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-secondary-button { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; color: #263244; font-size: .82rem; font-weight: 900; min-height: 40px; padding: 8px 10px; }
.mobile-secondary-button:hover { background: var(--wp-red-soft); border-color: #efb8bd; color: var(--wp-red-dark); }
.mobile-icon-button { align-items: center; display: inline-flex; gap: 7px; justify-content: center; }
.mobile-capture-preview { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; color: #667085; font-size: .78rem; font-weight: 700; line-height: 1.3; padding: 10px; }
.mobile-capture-preview.has-photos { background: #fff; border-style: solid; }
.mobile-photo-thumb-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-photo-thumb { border: 1px solid #dfe4ec; border-radius: 8px; display: grid; gap: 5px; overflow: hidden; padding: 6px; position: relative; }
.mobile-photo-thumb img { aspect-ratio: 4 / 3; background: #eef2f8; border-radius: 6px; object-fit: cover; width: 100%; }
.mobile-photo-remove { background: rgba(17, 24, 39, .78); border: 0; border-radius: 999px; color: #fff; font-size: .68rem; font-weight: 900; padding: 4px 7px; position: absolute; right: 8px; top: 8px; }
.mobile-photo-remove:hover { background: #b42318; }
.mobile-photo-thumb span, .mobile-photo-count { color: #667085; font-size: .72rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-photo-count { margin-top: 8px; }
.mobile-barcode-entry { display: grid; gap: 5px; margin: 0; }
.mobile-barcode-entry span { color: #475467; font-size: .75rem; font-weight: 800; }
.mobile-barcode-label-row { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.mobile-inline-link-button { background: transparent; border: 0; color: var(--wp-red); font-size: .75rem; font-weight: 900; line-height: 1.2; padding: 0; white-space: nowrap; }
.mobile-inline-link-button:hover { color: var(--wp-red-dark); text-decoration: underline; }
.mobile-input, .mobile-select, .mobile-combo-search { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; color: #111827; font-size: .88rem; min-height: 42px; outline: 0; padding: 9px 10px; width: 100%; }
.mobile-input[readonly] { background: #f8fafc; color: #384252; font-weight: 700; }
.mobile-input:disabled { background: #eef2f8; color: #667085; cursor: not-allowed; font-weight: 700; }
.mobile-input:focus, .mobile-select:focus, .mobile-combo-search:focus { border-color: var(--wp-red); box-shadow: 0 0 0 .18rem rgba(227, 6, 19, .14); }
.mobile-combo-search { background: #f8fafc; font-size: .82rem; min-height: 38px; }
.mobile-combo-search::placeholder { color: #7b8798; }
.mobile-search-combo { position: relative; }
.mobile-combo-native { display: none; }
.mobile-combo-button { align-items: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; color: #111827; display: flex; font-size: .88rem; justify-content: space-between; min-height: 42px; outline: 0; padding: 9px 10px; text-align: left; width: 100%; }
.mobile-combo-button::after { color: #384252; content: "⌄"; font-size: 1rem; font-weight: 900; line-height: 1; margin-left: 10px; }
.mobile-combo-button.is-empty { color: #475467; }
.mobile-combo-button:focus { border-color: var(--wp-red); box-shadow: 0 0 0 .18rem rgba(227, 6, 19, .14); }
.mobile-combo-panel { background: #fff; border: 1px solid #b8c2d2; border-radius: 8px; box-shadow: 0 14px 28px rgba(31, 41, 55, .16); display: grid; gap: 8px; left: 0; padding: 8px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; }
.mobile-combo-options { display: grid; gap: 2px; max-height: 180px; overflow: auto; }
.mobile-combo-option { background: #fff; border: 0; border-radius: 6px; color: #111827; font-size: .88rem; min-height: 36px; padding: 8px 9px; text-align: left; }
.mobile-combo-option:hover, .mobile-combo-option.selected { background: var(--wp-red-soft); color: var(--wp-red-dark); }
.mobile-combo-empty { color: #667085; font-size: .82rem; font-weight: 700; padding: 8px 4px; }
.mobile-field-error { color: #b42318; font-size: .76rem; font-weight: 800; }
.mobile-input-icon-wrap { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; position: relative; }
.mobile-input-icon-wrap .mobile-input { padding-right: 40px; }
.mobile-input-icon-wrap .mobile-field-icons { pointer-events: none; position: absolute; right: 10px; }
.mobile-mini-row { align-items: center; border-top: 1px solid #edf1f7; color: #667085; display: flex; font-size: .76rem; font-weight: 800; justify-content: space-between; margin-top: 10px; padding-top: 10px; }
.mobile-responsible-line { display: grid; gap: 4px; margin-top: 10px; }
.mobile-responsible-line span { color: #667085; font-size: .74rem; font-weight: 800; }
.mobile-responsible-line strong { color: #111827; font-size: .82rem; line-height: 1.3; }
.mobile-dynamic-fields { display: grid; gap: 10px; }
.mobile-empty-note { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; color: #667085; font-size: .82rem; padding: 12px; text-align: center; }
.mobile-field-picker-button { align-items: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; color: #111827; display: flex; font-size: .88rem; gap: 8px; justify-content: space-between; min-height: 42px; padding: 9px 10px; text-align: left; width: 100%; }
.mobile-field-picker-button:focus { border-color: var(--wp-red); box-shadow: 0 0 0 .18rem rgba(227, 6, 19, .14); outline: 0; }
.mobile-field-picker-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-field-picker-value.is-empty { color: #7b8798; }
.mobile-field-icons { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 6px; justify-content: flex-end; }
.mobile-field-icon { align-items: center; border-bottom: 2px solid #475467; color: #475467; display: inline-flex; height: 18px; justify-content: center; width: 18px; }
.mobile-field-icon-text::before { content: "✎"; font-size: .98rem; font-weight: 900; line-height: 1; transform: translateY(-1px); }
.mobile-field-icon-barcode::before { background: repeating-linear-gradient(90deg, #384252 0 2px, transparent 2px 4px, #384252 4px 5px, transparent 5px 8px); content: ""; display: block; height: 14px; width: 15px; }
.mobile-value-sheet { background: #fff; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; inset: 0; position: absolute; z-index: 20; }
.mobile-value-header { align-items: center; background: var(--wp-red); display: grid; gap: 8px; grid-template-columns: 34px minmax(0, 1fr) auto; padding: 10px; }
.mobile-value-back { background: transparent; border: 0; color: #fff; font-size: 2rem; line-height: 1; min-height: 38px; padding: 0; }
.mobile-value-search { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); border-radius: 6px; color: #fff; font-size: .9rem; min-height: 38px; outline: 0; padding: 8px 10px; width: 100%; }
.mobile-value-search::placeholder { color: rgba(255, 255, 255, .72); }
.mobile-value-add { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .34); border-radius: 6px; color: #fff; font-size: .82rem; font-weight: 900; min-height: 38px; padding: 8px 10px; white-space: nowrap; }
.mobile-value-title { border-bottom: 1px solid #eef1f5; color: var(--wp-red-dark); font-size: .95rem; font-weight: 900; padding: 8px 12px; }
.mobile-value-list { overflow: auto; padding: 0 10px 10px; }
.mobile-value-option { background: #fff; border: 0; border-bottom: 1px solid #e5e7eb; color: #263244; display: block; font-size: .95rem; min-height: 46px; padding: 11px 0; text-align: left; width: 100%; }
.mobile-value-option:hover { color: var(--wp-red); }
.mobile-value-option-row { align-items: center; border-bottom: 1px solid #e5e7eb; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 38px; }
.mobile-value-option-row .mobile-value-option { border-bottom: 0; }
.mobile-product-photo-button { align-items: center; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.mobile-product-photo-button:hover { background: var(--wp-red-soft); border-color: #efb8bd; }
.mobile-product-photo-icon { border: 2px solid #475467; border-radius: 4px; display: block; height: 18px; position: relative; width: 21px; }
.mobile-product-photo-icon::before { background: #475467; border-radius: 50%; content: ""; height: 4px; position: absolute; right: 3px; top: 3px; width: 4px; }
.mobile-product-photo-icon::after { border-bottom: 6px solid #475467; border-left: 5px solid transparent; border-right: 5px solid transparent; bottom: 3px; content: ""; left: 4px; position: absolute; width: 0; }
.mobile-value-empty { color: #667085; font-size: .84rem; font-weight: 700; padding: 18px 2px; }
.mobile-value-new-panel { border-top: 1px solid #dfe4ec; box-shadow: 0 -10px 24px rgba(31, 41, 55, .12); display: grid; gap: 10px; padding: 14px; }
.mobile-value-new-panel span { color: var(--wp-red-dark); font-size: 1rem; font-weight: 900; }
.mobile-value-new-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 42px; }
.mobile-value-new-input { border: 1px solid #dfe4ec; border-radius: 999px; color: #111827; font-size: .9rem; min-height: 42px; outline: 0; padding: 9px 14px; width: 100%; }
.mobile-value-new-input:focus { border-color: var(--wp-red); box-shadow: 0 0 0 .16rem rgba(227, 6, 19, .14); }
.mobile-value-confirm { align-items: center; background: var(--wp-green); border: 0; border-radius: 999px; color: #fff; display: flex; font-size: 1.2rem; font-weight: 900; height: 42px; justify-content: center; width: 42px; }
.mobile-photo-sheet { background: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr); inset: 0; position: absolute; z-index: 25; }
.mobile-photo-header { align-items: center; background: var(--wp-red); color: #fff; display: grid; gap: 8px; grid-template-columns: 34px minmax(0, 1fr); padding: 10px; }
.mobile-photo-header strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-photo-list { display: grid; gap: 12px; overflow: auto; padding: 12px; }
.mobile-photo-viewer-item { border: 1px solid #dfe4ec; border-radius: 10px; margin: 0; overflow: hidden; }
.mobile-photo-viewer-item img { aspect-ratio: 4 / 3; background: #eef2f8; display: block; object-fit: cover; width: 100%; }
.mobile-photo-viewer-item figcaption { color: #384252; font-size: .8rem; font-weight: 800; padding: 9px 10px; }
.mobile-toggle-row { align-items: center; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
.mobile-toggle-row label { align-items: center; background: #f8fafc; border: 1px solid #dfe4ec; border-radius: 8px; color: #384252; display: flex; font-size: .82rem; font-weight: 800; gap: 7px; margin: 0; min-height: 40px; padding: 8px 10px; }
.mobile-actions { display: flex; justify-content: stretch; margin-bottom: 10px; }
.mobile-actions .btn { border-radius: 10px; font-weight: 800; width: 100%; }
.mobile-save-actions { display: grid; gap: 8px; grid-template-columns: 1fr; }
.mobile-preview { background: #f9fbff; }
.mobile-preview-title { color: #384252; font-size: .82rem; font-weight: 900; margin-bottom: 8px; }
.mobile-preview-row { align-items: start; border-top: 1px solid #edf1f7; display: grid; gap: 8px; grid-template-columns: 120px minmax(0, 1fr); padding: 7px 0; }
.mobile-preview-row:first-child { border-top: 0; }
.mobile-preview-row span { color: #667085; font-size: .74rem; font-weight: 800; }
.mobile-preview-row strong { color: #111827; font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.mobile-bottom-nav { align-items: center; background: var(--wp-ink); display: flex; height: 28px; justify-content: center; }
.mobile-bottom-nav span { background: #fff; border-radius: 999px; display: block; height: 4px; opacity: .9; width: 96px; }
@media (max-width: 991.98px) {
  .app-layout { display: block; }
  .app-sidebar { min-height: auto; padding: 16px; position: static; }
  .sidebar-brand { margin-bottom: 12px; padding-bottom: 12px; }
  .sidebar-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .sidebar-link, .sidebar-sublink, .sidebar-section-title { flex: 0 0 auto; }
  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .template-form-grid { grid-template-columns: 1fr 1fr; }
  .template-submit-cell { grid-column: 1 / -1; }
  .mobile-test-layout { grid-template-columns: 1fr; }
  .mobile-assignment-list { max-height: none; }
}
@media (max-width: 767.98px) { .panel-shell { padding: 16px; } .page-header { display: block; } .table-responsive { border: 0; } .form-grid, .filter-grid, .template-form-grid, .template-filter-grid, .report-filter-grid, .logo-upload-grid, .assignment-summary, .assignment-board, .report-select-grid, .report-summary-grid, .report-download-grid, .mobile-readonly-grid, .mobile-toggle-row, .mobile-action-row, .mobile-save-actions { grid-template-columns: 1fr; } .template-submit-cell { justify-content: flex-start; } .assignment-pane { grid-template-rows: auto auto minmax(300px, 50vh); } .assignment-person { align-items: flex-start; flex-direction: column; } .assignment-person-actions { justify-content: space-between; width: 100%; } .mobile-device { border-width: 6px; border-radius: 28px; min-height: 720px; } .mobile-screen { max-height: 676px; min-height: 676px; } }