/*
 * 1003 Mortgage Application — admin screens. Loaded only on this plugin's
 * screens (body.mapp-ui), so the rest of wp-admin is untouched.
 *
 * One plane: white cards with a hairline edge on a light canvas. Hierarchy
 * from size, weight and space; no shadows, gradients or motion.
 * Works with WordPress markup (form-table, widefat, postbox, nav-tab) so the
 * 2.x Settings API pages and the 3.0 pages look the same.
 */
body.mapp-ui {
	--mapp-accent: var(--wp-admin-theme-color, #2271b1);
	--mapp-ink: #1d2327;
	--mapp-quiet: #646970;
	--mapp-line: #efefef;
	--mapp-divider: #f3f3f4;
	--mapp-field: #8c8f94;
	--mapp-canvas: #fbfbfb;
	--mapp-radius: 10px;
	background: var(--mapp-canvas);
}
body.mapp-ui #wpcontent,
body.mapp-ui #wpbody-content { background: var(--mapp-canvas); }
body.mapp-ui .wrap { max-width: 1040px; margin: 24px 24px 0 4px; }
body.mapp-ui .wrap.mapp-wide { max-width: none; }

/* Page header */
body.mapp-ui .wrap > h1,
body.mapp-ui .wrap h1.wp-heading-inline,
body.mapp-ui .mapp-head h1 { font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--mapp-ink); padding: 0; margin: 0 0 4px; }
body.mapp-ui .mapp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
body.mapp-ui .mapp-head p { margin: 0; color: var(--mapp-quiet); font-size: 14px; max-width: 680px; }
body.mapp-ui .mapp-head__aside { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.mapp-ui .wrap > h1 + .page-title-action,
body.mapp-ui .page-title-action { border-radius: 8px; }

/* Section titles */
body.mapp-ui .wrap h2:not(.nav-tab-wrapper):not(.hndle) { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--mapp-ink); margin: 32px 0 10px; padding: 0; }
body.mapp-ui .wrap h2 + p,
body.mapp-ui .mapp-section-desc { color: var(--mapp-quiet); margin: -4px 0 12px; max-width: 760px; }
body.mapp-ui .description,
body.mapp-ui p.description { color: var(--mapp-quiet); font-size: 13px; font-style: normal; }

/* Cards */
body.mapp-ui .mapp-card,
body.mapp-ui .wrap .form-table,
body.mapp-ui .wrap .widefat,
body.mapp-ui .wrap .wp-list-table {
	background: #fff;
	border: 1px solid var(--mapp-line);
	border-radius: var(--mapp-radius);
	box-shadow: none;
}
body.mapp-ui .mapp-card { padding: 20px 24px; margin: 0 0 16px; }
body.mapp-ui .mapp-card > :first-child { margin-top: 0; }
body.mapp-ui .mapp-card > :last-child { margin-bottom: 0; }
body.mapp-ui .mapp-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--mapp-ink); }
body.mapp-ui .mapp-card p { color: var(--mapp-quiet); margin: 0 0 12px; }
body.mapp-ui .mapp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
body.mapp-ui .mapp-cards .mapp-card { margin: 0; display: flex; flex-direction: column; }
body.mapp-ui .mapp-cards .mapp-card form,
body.mapp-ui .mapp-cards .mapp-card .mapp-card__foot { margin-top: auto; }

/* Form rows (form-table as a card of rows) */
body.mapp-ui .wrap .form-table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0 0 8px; overflow: hidden; }
body.mapp-ui .wrap .form-table th,
body.mapp-ui .wrap .form-table td { padding: 16px 24px; vertical-align: top; border-top: 1px solid var(--mapp-divider); }
body.mapp-ui .wrap .form-table tr:first-child > th,
body.mapp-ui .wrap .form-table tr:first-child > td { border-top: 0; }
body.mapp-ui .wrap .form-table tr[style*="display: none"] + tr > th,
body.mapp-ui .wrap .form-table tr[style*="display: none"] + tr > td { border-top: 1px solid var(--mapp-divider); }
body.mapp-ui .wrap .form-table th { width: 260px; font-weight: 500; color: var(--mapp-ink); padding-top: 24px; padding-right: 16px; line-height: 1.45; }
body.mapp-ui .wrap .form-table td { line-height: 1.5; }
body.mapp-ui .wrap .form-table td p.description { margin: 6px 0 0; }
body.mapp-ui .wrap .form-table td > label { display: inline-flex; align-items: center; gap: 6px; }
/* Metabox form tables sit inside a card already. */
body.mapp-ui .postbox .form-table { border: 0; border-radius: 0; background: none; margin: 0; }
body.mapp-ui .postbox .form-table th,
body.mapp-ui .postbox .form-table td { padding: 12px 0; }
body.mapp-ui .postbox .form-table th { width: 200px; padding-right: 16px; }

/* Controls */
body.mapp-ui .wrap input[type="text"],
body.mapp-ui .wrap input[type="email"],
body.mapp-ui .wrap input[type="url"],
body.mapp-ui .wrap input[type="tel"],
body.mapp-ui .wrap input[type="number"],
body.mapp-ui .wrap input[type="password"],
body.mapp-ui .wrap input[type="date"],
body.mapp-ui .wrap input[type="search"],
body.mapp-ui .wrap select,
body.mapp-ui .wrap textarea {
	border: 1px solid var(--mapp-field);
	border-radius: 8px;
	box-shadow: none;
	color: var(--mapp-ink);
	font-size: 14px;
	line-height: 1.4;
}
body.mapp-ui .wrap input[type="text"],
body.mapp-ui .wrap input[type="email"],
body.mapp-ui .wrap input[type="url"],
body.mapp-ui .wrap input[type="tel"],
body.mapp-ui .wrap input[type="number"],
body.mapp-ui .wrap input[type="password"],
body.mapp-ui .wrap input[type="date"],
body.mapp-ui .wrap input[type="search"],
body.mapp-ui .wrap select { min-height: 36px; padding: 0 10px; }
body.mapp-ui .wrap select { padding-right: 28px; }
body.mapp-ui .wrap textarea { padding: 8px 10px; }
body.mapp-ui .wrap .regular-text { width: 100%; max-width: 420px; }
body.mapp-ui .wrap input:focus,
body.mapp-ui .wrap select:focus,
body.mapp-ui .wrap textarea:focus { border-color: var(--mapp-accent); box-shadow: 0 0 0 1px var(--mapp-accent); outline: none; }
body.mapp-ui .wrap input:disabled,
body.mapp-ui .wrap select:disabled { background: #f6f7f7; color: var(--mapp-quiet); }
body.mapp-ui input[type="checkbox"],
body.mapp-ui input[type="radio"] { accent-color: var(--mapp-accent); }

/* On/off switch for single yes/no settings */
body.mapp-ui input[type="checkbox"].mapp-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 36px;
	height: 20px;
	min-width: 36px;
	margin: 0;
	border: 1px solid var(--mapp-field);
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
	vertical-align: middle;
}
body.mapp-ui input[type="checkbox"].mapp-switch::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	margin: 0;
	border-radius: 50%;
	background: var(--mapp-field);
	float: none;
}
body.mapp-ui .wrap .form-table td > input.mapp-switch:first-child { margin-top: 8px; }
body.mapp-ui .wrap .form-table td > .mapp-check-list:first-child { margin-top: 8px; }
body.mapp-ui input[type="checkbox"].mapp-switch:checked { background: var(--mapp-accent); border-color: var(--mapp-accent); }
body.mapp-ui input[type="checkbox"].mapp-switch:checked::before { left: 18px; background: #fff; content: ""; }
body.mapp-ui input[type="checkbox"].mapp-switch:focus-visible { outline: 2px solid var(--mapp-accent); outline-offset: 2px; box-shadow: none; }
body.mapp-ui input[type="checkbox"].mapp-switch:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
	body.mapp-ui input[type="checkbox"].mapp-switch::before { transition: left 0.12s ease-out; }
}
body.mapp-ui .mapp-check-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Buttons */
body.mapp-ui .wrap .button,
body.mapp-ui .wrap .button-primary,
body.mapp-ui .wrap .button-secondary,
body.mapp-ui .postbox .button { min-height: 36px; padding: 0 14px; line-height: 34px; border-radius: 8px; box-shadow: none; font-weight: 500; }
body.mapp-ui .wrap .button-small { min-height: 28px; line-height: 26px; padding: 0 10px; }
body.mapp-ui .wrap p.submit { margin: 24px 0 0; padding: 0; }

/* Tabs */
body.mapp-ui .wrap .nav-tab-wrapper,
body.mapp-ui .wrap h2.nav-tab-wrapper { border-bottom: 1px solid var(--mapp-line); margin: 0 0 24px; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
body.mapp-ui .wrap .nav-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--mapp-quiet); line-height: 1.4; }
body.mapp-ui .wrap .nav-tab:hover { color: var(--mapp-ink); background: none; }
body.mapp-ui .wrap .nav-tab-active,
body.mapp-ui .wrap .nav-tab-active:hover,
body.mapp-ui .wrap .nav-tab-active:focus { color: var(--mapp-ink); border-bottom-color: var(--mapp-accent); background: none; }
body.mapp-ui .wrap .nav-tab:focus { box-shadow: none; outline: 2px solid var(--mapp-accent); outline-offset: -2px; }

/* Data tables */
body.mapp-ui .wrap .widefat { border-collapse: separate; border-spacing: 0; overflow: hidden; }
body.mapp-ui .wrap .widefat thead th,
body.mapp-ui .wrap .widefat thead td,
body.mapp-ui .wrap .widefat tfoot th,
body.mapp-ui .wrap .widefat tfoot td { font-weight: 500; color: var(--mapp-quiet); font-size: 13px; border-bottom: 1px solid var(--mapp-line); background: #fff; }
body.mapp-ui .wrap .widefat td,
body.mapp-ui .wrap .widefat th { padding: 12px 16px; }
body.mapp-ui .wrap .widefat tbody tr + tr > * { border-top: 1px solid var(--mapp-divider); }
body.mapp-ui .wrap .striped > tbody > :nth-child(odd),
body.mapp-ui .wrap ul.striped > :nth-child(odd) { background: #fff; }
body.mapp-ui .wrap .wp-list-table tbody tr:hover { background: #fafafa; }
body.mapp-ui .wrap .wp-list-table .column-title strong a,
body.mapp-ui .wrap .wp-list-table .row-title { font-weight: 600; }
body.mapp-ui .wrap .tablenav { margin: 12px 0; }
body.mapp-ui.post-type-mortgage_application .wp-list-table .column-title { width: 30%; }
body.mapp-ui .wp-list-table td,
body.mapp-ui .wp-list-table th { padding-top: 12px; padding-bottom: 12px; }
body.mapp-ui .wrap .subsubsub { margin: 4px 0 8px; }
body.mapp-ui .wrap .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Metaboxes (application, loan officer, upload screens) */
body.mapp-ui .postbox { border: 1px solid var(--mapp-line); border-radius: var(--mapp-radius); box-shadow: none; }
body.mapp-ui .postbox .postbox-header { border-bottom: 1px solid var(--mapp-line); }
body.mapp-ui .postbox .postbox-header .hndle,
body.mapp-ui .postbox h2.hndle { font-size: 14px; font-weight: 600; padding: 14px 20px; }
body.mapp-ui .postbox .inside { padding: 4px 20px 16px; margin: 0; }
body.mapp-ui .postbox .inside .widefat { border: 1px solid var(--mapp-line); border-radius: 8px; }
body.mapp-ui #poststuff #post-body.columns-2 #side-sortables .postbox .inside p { margin: 12px 0; }

/* Applications are never "published": hide visibility and date in the Publish box. */
body.mapp-ui.post-type-mortgage_application #visibility,
body.mapp-ui.post-type-mortgage_application .misc-pub-curtime,
body.mapp-ui.post-type-mortgage_application .misc-pub-post-status,
body.mapp-ui.post-type-mapp_file_uploads #visibility,
body.mapp-ui.post-type-mapp_file_uploads .misc-pub-curtime,
body.mapp-ui.post-type-mapp_file_uploads .misc-pub-post-status { display: none; }

/* Copyable shortcodes: one click selects the whole code. */
body.mapp-ui .mapp-code-label { display: block; margin: 0 0 4px; font-weight: 500; color: var(--mapp-ink); }
body.mapp-ui code.mapp-code { display: block; padding: 8px 10px; background: #f6f7f7; border: 1px solid var(--mapp-line); border-radius: 6px; font-size: 12px; line-height: 1.5; white-space: normal; word-break: break-all; -webkit-user-select: all; user-select: all; cursor: text; }

/* Key-value tables inside metaboxes */
body.mapp-ui .mapp-kv { width: 100%; border-collapse: collapse; }
body.mapp-ui .mapp-kv th { text-align: left; font-weight: 400; color: var(--mapp-quiet); width: 42%; padding: 8px 16px 8px 0; vertical-align: top; }
body.mapp-ui .mapp-kv td { padding: 8px 0; vertical-align: top; white-space: pre-line; color: var(--mapp-ink); overflow-wrap: anywhere; }
body.mapp-ui .mapp-kv tr + tr th,
body.mapp-ui .mapp-kv tr + tr td { border-top: 1px solid var(--mapp-divider); }
body.mapp-ui .mapp-kv-title { margin: 20px 0 4px; font-size: 13px; font-weight: 600; color: var(--mapp-ink); text-transform: none; }
body.mapp-ui .mapp-kv-title:first-child { margin-top: 8px; }

/* Status list */
body.mapp-ui .mapp-status { display: grid; grid-template-columns: 200px 1fr; margin: 0; }
body.mapp-ui .mapp-status dt,
body.mapp-ui .mapp-status dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--mapp-divider); }
body.mapp-ui .mapp-status dt { color: var(--mapp-quiet); padding-right: 16px; }
body.mapp-ui .mapp-status dd { color: var(--mapp-ink); }
body.mapp-ui .mapp-status dt:first-of-type,
body.mapp-ui .mapp-status dt:first-of-type + dd { border-top: 0; padding-top: 0; }
body.mapp-ui .mapp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: #c3c4c7; }
body.mapp-ui .mapp-dot--on { background: #1e7d3a; }
body.mapp-ui .mapp-dot--warn { background: #b26200; }

/* Stat tiles and bars (Funnel) */
body.mapp-ui .mapp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0 0 8px; }
body.mapp-ui .mapp-stat { background: #fff; border: 1px solid var(--mapp-line); border-radius: var(--mapp-radius); padding: 16px 20px; }
body.mapp-ui .mapp-stat span { display: block; color: var(--mapp-quiet); font-size: 13px; }
body.mapp-ui .mapp-stat strong { display: block; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--mapp-ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
body.mapp-ui .mapp-bars { list-style: none; margin: 0; padding: 8px 24px; }
body.mapp-ui .mapp-bars li { display: grid; grid-template-columns: minmax(160px, 34%) 1fr 96px; gap: 16px; align-items: center; padding: 10px 0; margin: 0; border-top: 1px solid var(--mapp-divider); }
body.mapp-ui .mapp-bars li:first-child { border-top: 0; }
body.mapp-ui .mapp-bars__track { height: 8px; background: #f0f0f1; border-radius: 999px; overflow: hidden; }
body.mapp-ui .mapp-bars__fill { display: block; height: 100%; background: var(--mapp-accent); border-radius: 999px; }
body.mapp-ui .mapp-bars__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--mapp-ink); }
body.mapp-ui .mapp-bars__num small { color: var(--mapp-quiet); font-size: 12px; margin-left: 4px; }
body.mapp-ui .mapp-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
body.mapp-ui .mapp-filters .button { margin: 0; }

/* Notices keep WordPress colors, softer frame */
body.mapp-ui .wrap .notice { border-radius: 8px; box-shadow: none; border-top: 1px solid var(--mapp-line); border-right: 1px solid var(--mapp-line); border-bottom: 1px solid var(--mapp-line); }

/* 2.x Bulk export (undo its floating white box) */
body.mapp-ui .wrap.export-application { background: none; padding: 0; box-shadow: none; border-radius: 0; margin-top: 24px; max-width: 1040px; }
body.mapp-ui .wrap.export-application .container { margin-top: 0; }
body.mapp-ui .wrap.export-application .field-row label { font-weight: 400; }
body.mapp-ui .wrap.export-application .field-row > label { font-weight: 500; }
body.mapp-ui .wrap.export-application .field-row.date_range_class input { margin: 0 0 0 6px; }
body.mapp-ui .export-application .container { background: #fff; border: 1px solid var(--mapp-line); border-radius: var(--mapp-radius); padding: 8px 24px; }
body.mapp-ui .export-application .field-row { display: grid; grid-template-columns: 220px 1fr; gap: 8px 16px; align-items: center; padding: 16px 0; margin: 0; border-top: 1px solid var(--mapp-divider); float: none; width: auto; }
body.mapp-ui .export-application .field-row:first-child { border-top: 0; }
body.mapp-ui .export-application .field-row > label,
body.mapp-ui .export-application .mapp-row-label { font-weight: 500; color: var(--mapp-ink); margin: 0; }
body.mapp-ui .export-application .field-row > input,
body.mapp-ui .export-application .field-row > select { grid-column: 2; max-width: 420px; }
body.mapp-ui .export-application .field-row:last-child { display: block; }
body.mapp-ui .export-application .condition_table { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; flex-wrap: wrap; }
body.mapp-ui .export-application .condition_table_fields { float: none; width: auto; margin: 0; }
body.mapp-ui .export-application .condition_table_fields img { width: 20px; height: 20px; cursor: pointer; vertical-align: middle; opacity: 0.7; }
body.mapp-ui .export-application .date_range_class input { margin: 0 12px 0 6px; }

/* 2.x Settings: same width as the other pages; its red test button made a normal one. */
body.mapp-ui .mortgage-setting-container .form-table { max-width: none; }
body.mapp-ui .mortgage-setting-container textarea:not(.wp-editor-area) { min-height: 150px; height: auto; width: 100%; max-width: 640px; }

/* WordPress editors (email templates): one frame like the other fields,
   toolbar on a quiet band, tabs that read as tabs. */
body.mapp-ui .wp-editor-wrap { max-width: 720px; }
body.mapp-ui .wp-editor-tools { display: flex; align-items: flex-end; justify-content: space-between; padding: 0; margin: 0 0 8px; }
body.mapp-ui .wp-editor-tools::after { content: none; }
body.mapp-ui .wp-media-buttons .button { margin: 0; }
body.mapp-ui .wp-editor-tabs { float: none; display: inline-flex; gap: 2px; padding: 2px; background: #f0f0f1; border-radius: 8px; }
body.mapp-ui .wrap .wp-switch-editor,
body.mapp-ui .wrap .wp-switch-editor:hover { float: none; height: auto; margin: 0; padding: 4px 12px; font-size: 13px; line-height: 20px; color: var(--mapp-quiet); background: transparent; border: 0; border-radius: 6px; }
body.mapp-ui .wrap .tmce-active .switch-tmce,
body.mapp-ui .wrap .html-active .switch-html { background: #fff; color: var(--mapp-ink); box-shadow: 0 0 0 1px var(--mapp-line); }
body.mapp-ui .wp-editor-container { border: 1px solid var(--mapp-field); border-radius: 8px; overflow: hidden; box-shadow: none; background: #fff; }
body.mapp-ui .wp-editor-container:focus-within { border-color: var(--mapp-accent); box-shadow: 0 0 0 1px var(--mapp-accent); }
body.mapp-ui div.mce-toolbar-grp,
body.mapp-ui .quicktags-toolbar { background: #fbfbfb; border: 0; border-bottom: 1px solid var(--mapp-line); padding: 4px 6px; }
body.mapp-ui div.mce-toolbar-grp > div { padding: 0; }
body.mapp-ui .mce-top-part::before { box-shadow: none; }
body.mapp-ui div.mce-panel { background: #fff; }
body.mapp-ui .mce-toolbar .mce-btn-group .mce-btn:hover,
body.mapp-ui .mce-toolbar .mce-btn-group .mce-btn:focus { background: #f0f0f1; border-color: transparent; box-shadow: none; color: var(--mapp-ink); border-radius: 4px; }
body.mapp-ui .mce-toolbar .mce-btn-group .mce-btn.mce-active { background: #e8e8ea; border-color: transparent; border-radius: 4px; }
body.mapp-ui .mce-toolbar .mce-listbox { border-color: var(--mapp-line); border-radius: 4px; box-shadow: none; background: #fff; }
body.mapp-ui .mce-statusbar { border-top: 1px solid var(--mapp-line) !important; }
body.mapp-ui .wrap textarea.wp-editor-area { border: 0; border-radius: 0; box-shadow: none; padding: 12px 14px; min-height: 240px; max-width: none; font-size: 13px; line-height: 1.6; }
body.mapp-ui .wrap textarea.wp-editor-area:focus { box-shadow: none; }
body.mapp-ui .wrap .quicktags-toolbar input.button { min-height: 28px; line-height: 26px; padding: 0 8px; border-radius: 6px; margin: 2px; color: var(--mapp-ink); background: #fff; border-color: var(--mapp-line); font-weight: 400; }
body.mapp-ui .wrap .quicktags-toolbar input.button:hover { border-color: var(--mapp-field); background: #fff; }
body.mapp-ui .wp-editor-wrap + .description,
body.mapp-ui .wp-editor-wrap + p { margin-top: 8px; }
body.mapp-ui .wrap .mortgage-setting-container input[name="mortgage_application_test_webhooks"] { background: #fff; color: var(--mapp-accent); border: 1px solid var(--mapp-accent); border-radius: 8px; min-height: 36px; padding: 0 14px; opacity: 1; }

/* 2.x fields floated their input and switch, so notes wrapped beside them. */
body.mapp-ui .mortgage-setting-container .input-field,
body.mapp-ui .mortgage-setting-container .input_itself { float: none; width: auto; max-width: 640px; }
body.mapp-ui .mortgage-setting-container .switch { float: none; display: inline-block; margin: 0; vertical-align: middle; }
/* Form Settings rows: the label field and its show/hide switch on one line. */
body.mapp-ui .mortgage-setting-container .input-field:has(+ .switch) { display: inline-block; vertical-align: middle; width: calc(100% - 76px); max-width: 580px; }
body.mapp-ui .mortgage-setting-container .input-field + .switch { margin-left: 16px; }
body.mapp-ui .mortgage-setting-container td p.description,
body.mapp-ui .mortgage-setting-container td .input_description { clear: both; display: block; margin: 8px 0 0; max-width: 640px; color: var(--mapp-quiet); font-size: 13px; }
body.mapp-ui .mortgage-setting-container .input-field input[type="text"] { width: 100%; max-width: 640px; }

/* 2.x Settings: license box and terms dialog */
body.mapp-ui .licenses-key-container { background: #fff; border: 1px solid var(--mapp-line); border-radius: var(--mapp-radius); padding: 20px 24px; }
body.mapp-ui .mortgage-application-setting-overlay .overlay-container { border-radius: 12px; border: 1px solid var(--mapp-line); }

@media (max-width: 782px) {
	body.mapp-ui .wrap { margin: 16px 12px 0 0; }
	body.mapp-ui .wrap .form-table th,
	body.mapp-ui .wrap .form-table td { display: block; width: auto; padding: 12px 16px; }
	body.mapp-ui .wrap .form-table td { border-top: 0; padding-top: 0; }
	body.mapp-ui .mapp-status { grid-template-columns: 1fr; }
	body.mapp-ui .mapp-status dd { border-top: 0; padding-top: 0; }
	body.mapp-ui .mapp-bars { padding: 4px 16px; }
	body.mapp-ui .mapp-bars li { grid-template-columns: 1fr 72px; }
	body.mapp-ui .mapp-bars__track { grid-column: 1 / -1; grid-row: 2; }
	body.mapp-ui .export-application .field-row { grid-template-columns: 1fr; }
}