/* ═══════════════════════════════════════════════════════════════
   MORPHmaster editor — modern look (Designs-4)
   Loaded after morphmaster-editor.css, paginatedlists.css, translations.css
   and fileuploader.css (the editor master pages add it last, in PreRender).
   It restyles the editor's existing classes only: no markup changes, and
   nothing moves sideways — the page stays 960px, the menu column 270px and
   the content column 670px, with the same 200px labels, field widths,
   button rows and grid columns. The header is slimmer, so screens start
   higher.

   Colours come from the same tokens as the site (morphmaster-site-v4.css),
   written from web.config by Tools.InsertSiteColours, so each site's editor
   is in its own palette. The values below are the fallback (Pro-Coast).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --accent:          #0075B8;
  --accent-rgb:      0, 117, 184;
  --accent-light:    #E1EEF5;
  --accent-mid:      #42BDDC;
  --accent-dark:     #083650;
  --accent-dark-rgb: 8, 54, 80;
  --page-bg:         #D0E1EB;
  --muted-text:      #58707E;
  --line:            rgba(0, 0, 0, 0.12);
  --line-strong:     rgba(0, 0, 0, 0.22);
}

/* Inter, hosted locally as on the site (fonts/Inter-OFL.txt) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-greek-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-greek-wght-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html { background: var(--page-bg); }
body { background: var(--page-bg); font-family: 'Inter', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #1a1a1a; }
input, textarea, select { font-family: inherit; font-size: 14px; }
a:link, a:visited, a:active { color: var(--accent); }
a:hover { color: var(--accent-dark); text-decoration: underline; }
em { font-family: inherit; font-weight: 600; color: #b00020; }
p { line-height: 1.55; }

/* the page: a white sheet on the tinted background, same width */
.page { background: #fff; margin: 0 auto; padding: 0 20px 8px; box-shadow: 0 0 0 0.5px var(--line), 0 4px 24px rgba(0,0,0,0.06); }
/* the bars run the full width of the white sheet; the 960px content inside stays where it was */
.topMenu, .editorHeader { margin-left: -20px; margin-right: -20px; width: auto; }

/* user line: a thin bar across the top */
.topMenu { background: var(--accent-dark); color: rgba(255,255,255,0.85); padding: 6px 20px; margin: 0 -20px; font-size: 13px; }
.topMenu a:link, .topMenu a:visited { color: #fff; }

/* header: the site name, smaller, on the accent */
.editorHeader { background: var(--accent); border: 0; padding: 0; color: #fff; }
.editorHeader h1 { font-size: 26px; font-weight: 500; color: #fff; padding: 14px 20px 14px 10px; letter-spacing: -0.2px; }

/* the screen's title */
h2 { font-size: 22px; font-weight: 500; color: #1a1a1a; padding: 18px 0 12px; border-bottom: 1px solid var(--line); }

/* columns: same widths, a light rule between them instead of the image */
/* the divider runs the full height, as the old image did */
.editorMain { background: linear-gradient(var(--line), var(--line)) no-repeat 280px 0 / 1px 100%; margin: 16px 0; }
.editorMain .editorLeftColumn { box-sizing: border-box; padding-right: 12px; }

/* menu: link on its own line, the description muted under it */
.editorMenuItem { margin-bottom: 10px; font-size: 13px; color: var(--muted-text); line-height: 1.4; }
.editorMenuItem a:link, .editorMenuItem a:visited { font-size: 14px; font-weight: 500; text-decoration: none; }
.editorMenuItem a:hover { text-decoration: underline; }

/* section headings */
div.legend, div.buttonLegend { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* fields: same 200px labels and input widths */
/* labels line up with the 32px fields by padding, not line height, so a label that wraps stays compact
   and is never taller than its row (a taller floated label pushed the next row's label sideways) */
.countForm label { font-weight: 500; line-height: 1.4; padding-top: 7px; color: #333; }
.countForm div.formLine { margin-bottom: 8px; display: flow-root; } /* each row contains its own floats */
/* every text box, including ones without the editor classes (e.g. the image filename) */
.countForm input[type="text"], .countForm input[type="password"], .countForm input.editorTextbox, .countForm .wideEditorTextbox, .countForm select, .countForm textarea {
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 6px 8px; box-sizing: border-box; min-height: 32px;
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.countForm input[type="text"]:focus, .countForm input[type="password"]:focus, .countForm input.editorTextbox:focus, .countForm .wideEditorTextbox:focus, .countForm select:focus, .countForm textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
/* multi-line boxes and list boxes keep the height the page gives them */
.countForm textarea, .countForm select[size], .countForm select[multiple] { height: auto; }
.countForm input[readonly] { background: #f5f5f3; color: #555; }
.countForm input[type="checkbox"] { width: 16px; height: 16px; margin: 8px 0 0; accent-color: var(--accent); }
/* lists of checkboxes (CheckBoxList, class checkboxList): each checkbox then its name, unfloated (the old
   stylesheet floated a 110px label to the left of its checkbox, leaving each tick between two names).
   The whole choice highlights on hover, and ticked names are dark while unticked ones are muted.
   Two layouts: a table (RepeatColumns, e.g. cultures, user permissions), whose columns size to the names,
   and an unordered list (RepeatLayout="UnorderedList", the language lists) in as many columns as fit.
   Selectors start .countForm table/ul.checkboxList to outrank .countForm label and .countForm td label */
.countForm table.checkboxList td,
.countForm ul.checkboxList li { padding: 3px 8px 3px 6px; border-radius: 4px; white-space: nowrap; }
.countForm table.checkboxList td:hover,
.countForm ul.checkboxList li:hover { background: var(--accent-light); }
.countForm table.checkboxList input[type="checkbox"],
.countForm ul.checkboxList input[type="checkbox"] { float: none; margin: 0 6px 0 0; vertical-align: -3px; cursor: pointer; }
.countForm table.checkboxList label,
.countForm ul.checkboxList label { float: none; width: auto; display: inline; padding: 0; line-height: 20px; cursor: pointer;
  font-weight: 400; color: var(--muted-text); }
.countForm table.checkboxList input:checked + label,
.countForm ul.checkboxList input:checked + label { color: #1a1a1a; font-weight: 500; }
.countForm ul.checkboxList { list-style: none; margin: 0; padding: 0; column-width: 150px; column-gap: 12px; }
.countForm ul.checkboxList li { break-inside: avoid; margin-bottom: 2px; }

/* the image uploader (fileuploader.css): a 350px strip showing the filename, clicked to choose a file */
.countForm .qq-upload-button { box-sizing: border-box; min-height: 32px; padding: 6px 8px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 4px; transition: background 0.15s, border-color 0.15s; }
.countForm .qq-upload-button-hover { background: var(--accent-light); border-color: var(--accent-mid); }

/* buttons: same rows (no wider than before, so a row of seven still fits); Save is the primary action */
.countForm div.button { margin-right: 6px; }
.countForm div.button input { font-size: 13px; font-weight: 400; color: var(--accent-dark); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 4px 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
  height: auto; /* translations.css fixes every button at 23px, which cut off the bottom padding on that screen */ }
.countForm div.button input:hover { background: var(--accent-light); border-color: var(--accent-mid); }
.countForm div.button input[id$="saveButton"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.countForm div.button input[id$="saveButton"]:hover { background: var(--accent-dark); }
.countForm div.formStatus { padding-top: 6px; font-size: 13px; color: var(--accent); }
.errorMessage { color: #b00020; font-weight: 600; }

/* grid */
.listDefault { border: 1px solid var(--line-strong); border-radius: 6px; border-collapse: separate; overflow: hidden; }
.listDefault th { background: #f5f5f3; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); }
/* the columns have fixed widths, so header and cell text keep to the old padding */
.listDefault th span, .listDefault th a, .listDefault th div a { background: transparent !important; line-height: 32px; padding-left: 5px;
  font-size: 13px; font-weight: 600; color: #444; }
.listDefault td { border-right: 1px solid var(--line); border-top: 1px solid var(--line); line-height: 30px; padding-left: 5px; font-size: 13px; }
/* the first data row has no top line, as the header's bottom line is already there.
   Every grid has its header row in a <thead> (App_Code\Controls\*ListControl.cs) */
.listDefault tbody > tr:first-child > td { border-top: 0; }
/* sponsor logos in the sponsors grid (SponsorElementListControl) at no more than 64px high, keeping their shape.
   (The grid also writes an inline margin-top:5px on the image, which wins over the 4px top margin here) */
.listDefault[columnSizeId="listSponsorElements"] td img { margin: 4px 0; max-height: 64px; width: auto; vertical-align: middle; }
.listDefault tr.hover { background: var(--accent-light); }
.listDefault tr.selected { background: rgba(var(--accent-rgb), 0.16) !important; }
.listDefault tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pageBrowser { padding-top: 6px; color: #555; }

/* pop-up panels (Westwind DragPanel on translations.aspx: Translation Progress, Comment).
   The plugins add an inline box-shadow and a close image, hence the !important */
.dialog { border: 1px solid var(--line-strong) !important; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important; font-family: 'Inter', Arial, sans-serif; }
.dialog .dialog-header { background: var(--accent); color: #fff; font-size: 14px; font-weight: 500;
  padding: 10px 44px 10px 14px; border-radius: 0; cursor: move; }
.dialog .dialog-content, .dialog .dialog-content.gridalternate { background: #fff; padding: 16px; }
/* the close button (CloseBoxImage = images/fixed/dialog_close.svg), centred in the header bar */
.dialog .closebox { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 4px; box-sizing: border-box; border-radius: 50%;
  background: transparent; transition: background 0.15s; }
.dialog .closebox:hover { background: rgba(255, 255, 255, 0.2); }

/* translation progress bars */
.progressLine { margin-bottom: 10px; }
.progressLabel { font-weight: 500; line-height: 22px; }
.progress { border: 1px solid var(--line-strong); border-radius: 4px; height: 22px; overflow: hidden; background: #f5f5f3; }
.progress .progressValue { background: rgba(var(--accent-rgb), 0.25); height: 22px; }
.progress .progressValueComplete { background: #CFE8CF; height: 22px; }
.progress .progressText { line-height: 22px; padding-left: 8px; font-size: 13px; }

/* footer */
.mm-footer { border-top: 1px solid var(--line); font-size: 12px; color: var(--muted-text); padding: 12px 0 20px; margin-top: 16px; }
.mm-footer-links { margin-top: 8px; }
.mm-footer-links a:link, .mm-footer-links a:visited { color: var(--muted-text); text-decoration: none; }
.mm-footer-links a:hover { color: var(--accent); text-decoration: underline; }