/* MetaboAnalyst 7.0 - layout and page classes.
   Components (buttons, inputs, tables, tabs, dialogs, tree) are styled by the PrimeFaces theme
   (primefaces-ma7: Verona 7 in the MetaboAnalyst blue, built by tools/build_theme.sh). This file
   only lays out the frame (header, rail, content, footer) and defines the MetaboAnalyst page
   classes; it must not restyle .ui-* components. */

:root {
    /* palette: navy rail, emerald accent, white ground with cool light cards */
    --ma-font: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ma-mono: Menlo, Consolas, "Courier New", monospace;
    --ma-ink: #1F2937;
    --ma-muted: #5B6470;
    --ma-primary: #1F3A5F;
    --ma-accent: #2C8C5A;
    --ma-accent-dark: #23704A;
    --ma-accent-tint: #E2F3EA;
    --ma-line: #D6DDE5;
    --ma-line-soft: #E6EBF0;
    --ma-ground: #FFFFFF;
    --ma-card: #F3F6F9;
    --ma-rail: #1F3A5F;
    --ma-rail-dark: #16294A;
    --ma-nav-active: #E4ECF7;
}

/* ---------- frame ---------- */
html, body { margin: 0; padding: 0; }
html { font-size: 13px; }   /* the theme sizes in rem: 1rem = the 13 px base */
body { font-family: var(--ma-font); font-size: 13px; color: var(--ma-ink); background: var(--ma-ground); }
a, a:link, a:visited { color: var(--ma-accent); text-decoration: none; }
a:hover { color: var(--ma-accent-dark); text-decoration: underline; }
code, pre, .mono { font-family: var(--ma-mono); }
#cover { background: var(--ma-ground) !important; }

.ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd { border: none; }
.ui-layout-north { z-index: 20 !important; overflow: visible !important; }
.ui-layout-north .ui-layout-unit-content { overflow: visible !important; }
.ui-layout-unit .ui-layout-unit-content { padding: 0 !important; }
body > .ui-layout-north, .ui-layout-north .ui-layout-unit-content { background: #FFFFFF; }
body > .ui-layout-center, .ui-layout-center .ui-layout-unit-content { background: var(--ma-ground); }
body > .ui-layout-west, .ui-layout-west .ui-layout-unit-content { background: var(--ma-rail) !important; border: 0 !important; }
body > .ui-layout-east, .ui-layout-east .ui-layout-unit-content { background: #FFFFFF !important; border-left: 1px solid var(--ma-line) !important; }

#header { height: 120px; margin: 0; padding: 0 !important; position: relative; background: #FFFFFF; border: 0; border-bottom: 1px solid var(--ma-line); border-radius: 0; color: var(--ma-ink); }
#header.ui-widget-header { padding-left: 0 !important; }
#header.ui-widget-header { padding-left: 0 !important; }
.ma7-header { display: flex; align-items: center; gap: 22px; height: 120px; padding: 0 28px 0 36px; }
.ma7-header a.ma7-brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.ma7-header a.ma7-brand:hover { text-decoration: none; }
.ma7-logo { height: 110px; width: auto; display: block; }
.ma7-wordmark { font-family: var(--ma-font); font-size: 34px; font-weight: 600; color: var(--ma-primary); letter-spacing: 0; white-space: nowrap; }
.ma7-wordmark .v { color: var(--ma-accent); }

/* slim header of the analysis pages: small brand + the navigation history (breadcrumb) */
#header.ma-slim { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 18px !important; background: var(--ma-rail); border-bottom: 2px solid #C0C0C0; box-sizing: content-box; }
#header.ma-slim .ma-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
#header.ma-slim .ma-brand img { height: 34px; width: auto; }
#header.ma-slim .ma-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; margin-left: 4px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); font-size: 12.5px; }
#header.ma-slim .ma-crumbs a { color: rgba(255,255,255,0.75); white-space: nowrap; }
#header.ma-slim .ma-crumbs a:hover { color: #FFFFFF; text-decoration: underline; }
#header.ma-slim .ma-crumbs .sep { color: rgba(255,255,255,0.4); padding: 0 2px; }
#header.ma-slim .ma-crumbs .cur { color: #FFFFFF; font-weight: 700; white-space: nowrap; }
#header.ma-slim .ma-crumbs .ma-module { color: #FFFFFF; font-weight: 600; white-space: nowrap; letter-spacing: 0.01em; }
#header.ma-slim .ma-spacer { flex-grow: 1; }
#header.ma-slim .ma-rcmd a { color: #FFFFFF; font-size: 12.5px; white-space: nowrap; opacity: 0.9; }
.ma7-tagline { font-family: var(--ma-font); font-size: 18px; white-space: nowrap; color: var(--ma-muted); border-left: 2px solid var(--ma-line); padding-left: 22px; line-height: 1.25; }
.ma7-header .ma7-nav { display: flex; gap: 4px; margin-left: 8px; }
.ma7-header .ma7-nav a { color: var(--ma-muted); font-size: 13.5px; white-space: nowrap; padding: 6px 10px; border-radius: 6px; }
.ma7-header .ma7-nav a:hover { background: var(--ma-card); color: var(--ma-primary); text-decoration: none; }
.ma7-spacer { flex-grow: 1; }

#footer { clear: both; padding: 0; position: relative; text-align: center; vertical-align: middle; background: var(--ma-card) !important; border: 0 !important; border-top: 1px solid var(--ma-line) !important; border-radius: 0 !important; color: var(--ma-muted) !important; }
#footer a { color: var(--ma-accent) !important; }

/* ---------- rail: the navigation tree on a teal band, in a white card (6.0) ---------- */
#navi { padding: 18px 12px 12px 12px !important; line-height: 22px; font-size: 13px; }
#navi .pi-home, #navi .pi-comments { color: #FFFFFF !important; }
#navi .ui-tree { background: #FFFFFF; border: 1px solid var(--ma-rail-dark); border-radius: 4px; width: 100% !important; padding: 6px 4px; }
#navi .ui-tree .ui-treenode-icon { display: none; }
#navi .ui-tree .ui-treenode-content { padding: 2px 4px; }
#navi .ui-tree .ui-treenode-label { padding: 1px 6px; font-size: 13px; }
#navi .ui-tree .ui-treenode-content.ui-state-highlight,
#navi .ui-tree .ui-treenode-content.ui-state-highlight .ui-treenode-label { background: var(--ma-nav-active); color: var(--ma-primary); font-weight: 700; }
#navi .ui-tree .ui-treenode-children { padding-left: 14px; }
/* one current node (bold, tinted); the pages already visited keep a muted check mark */
#navi .ui-tree .ma-visited > .ui-treenode-content .ui-treenode-label { color: var(--ma-accent-dark); }
#navi .ui-tree .ma-visited > .ui-treenode-content .ui-treenode-label::after { content: "\2713"; margin-left: 6px; font-size: 11px; color: var(--ma-accent); }
#navi #accountPane .ui-button { width: 100%; }

/* documentation / overview pages: a white rail with plain site links and the sponsor logos (no tree) */
body.ma-doc-body > .ui-layout-west, body.ma-doc-body .ui-layout-west .ui-layout-unit-content { background: #FFFFFF !important; border-right: 1px solid var(--ma-line) !important; }
#navi.ma-doc-nav { padding: 26px 15px 8px 24px !important; line-height: 34px; font-size: 14px; }
#navi.ma-doc-nav a { color: var(--ma-ink); display: inline-block; padding: 0 10px; border-radius: 4px; }
#navi.ma-doc-nav a:hover { background: var(--ma-card); text-decoration: none; }
#navi.ma-doc-nav br { display: none; }
#navi.ma-doc-nav a { display: block; }
.ma-sponsors { padding: 16px 0 30px 0; text-align: center; line-height: 30px; }
.ma-sponsors img { max-width: 145px; }

/* ---------- page contract (parameter / upload / result pages) ---------- */
/* legacy pages carry bare h2 / h3 titles: give them the .ma-title / .ma-subtitle scale so a module
   reads the same from its 7.0 pages to its 6.0 pages (documentation pages override below) */
.ui-layout-center h2 { font-size: 20px; font-weight: 700; color: var(--ma-ink); margin: 0 0 8px 0; line-height: 26px; }
.ui-layout-center h3 { font-size: 14px; font-weight: 700; color: var(--ma-ink); margin: 16px 0 6px 0; line-height: 20px; }
/* figure and table options next to a plot (was a raster palette icon) */
.ma-figopt { color: var(--ma-accent); font-size: 17px; vertical-align: middle; cursor: pointer; }
a:hover .ma-figopt, .ma-figopt:hover { color: var(--ma-accent-dark); }
.ma-page { width: 92%; max-width: 1320px; box-sizing: border-box; padding: 36px 40px 32px 56px; line-height: 20px; }   /* 92% of the pane (Jeff); capped so cards do not stretch on very wide screens */
.ma-title { font-size: 20px; font-weight: 700; color: var(--ma-ink); margin: 0 0 8px 0; }
.ma-subtitle { font-size: 14px; font-weight: 700; color: var(--ma-ink); margin: 18px 0 4px 0; }
.ma-lead { margin: 0 0 14px 0; color: var(--ma-muted); }
.ma-card { background: var(--ma-card); border: 1px solid var(--ma-line-soft); border-radius: 4px; padding: 12px 16px; margin: 6px 0 14px 0; }
.ma-card table { border-collapse: collapse; }
.ma-card td { padding: 4px 6px; vertical-align: middle; }
.ma-card .ma-label, .ma-label { font-weight: 700; white-space: nowrap; width: 140px; }
.ma-card .ma-help { color: var(--ma-muted); font-size: 12.5px; line-height: 18px; }
.ma-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 3px 0; }
.ma-submit { text-align: center; padding: 6px 0 2px 0; }
.ma-submit-right { text-align: right; }
.ma-note { color: var(--ma-muted); font-style: italic; font-size: 12.5px; line-height: 18px; margin: 4px 0 10px 0; }
.ma-fig { text-align: center; padding: 8px 0; }
.ma-fig img { max-width: 100%; border: 1px solid var(--ma-line-soft); background: #FFFFFF; }
.ma-msgs { margin: 6px 0 0 0; padding-left: 18px; }
.ma-msgs li { margin: 2px 0; }
hr.style-one { border: 0; height: 1px; background: var(--ma-line); margin: 12px 0; }

/* ---------- legacy helper classes used across the 6.0 pages ---------- */
.helpTip { width: 600px; line-height: 1.6em; background: #FFF4DF; border: 1px solid #F0DDB5; border-radius: 4px; padding: 6px 10px; }
.noBorders tr, .noBorders td { background: none !important; border: none !important; }
table.nopadding td { padding: 0; }
.ui-panelgrid .firstcolumn { background: #EAF0F8; color: #000000; font-weight: bold; }
.ui-datalist-content { border: 0; background: none; }
.selectable td.ui-selection-column input { display: none; }
.unselectable td.ui-selection-column input { display: block; }
.panelColumns td { vertical-align: top; }
.ui-selectonemenu label.ui-selectonemenu-label { width: 100% !important; }
.ui-datatable table, .ui-datatable-resizable table { table-layout: auto !important; }
/* links stay readable on a selected (highlighted) row */
.ui-datatable .ui-datatable-data > tr.ui-state-highlight a, .ui-datatable .ui-datatable-data > tr.ui-state-highlight a:hover { color: #FFFFFF; text-decoration: underline; }
/* a wide result table scrolls inside its wrapper instead of pushing the page past the pane */
.ui-datatable .ui-datatable-tablewrapper { overflow-x: auto; }
table.ma-page { table-layout: fixed; }
table.ma-page > tbody > tr > td { overflow: hidden; }
.ui-datatable .ui-datatable-footer { text-align: right; padding: 4px 10px; }
.ui-menu .ui-menu-parent .ui-menu-child { margin-left: 4px; margin-right: 20px; }
.ui-growl-icon-close { width: 100%; height: 100%; background-image: none !important; }
.ui-dialog.customDialog .ui-dialog-content { font-size: 13px; }
.ui-dialog-titlebar.ui-widget-header.customDialog { font-size: 15px; }

/* ---------- module overview (ModuleView.xhtml): the 6.0 layout ---------- */
.ma7-page { padding: 30px 40px 32px 40px; max-width: 1480px; }
.ma7-page h1 { margin: 0 0 14px 0; font-size: 20px; font-weight: 700; color: rgb(74, 91, 112); }
/* a table-like CSS grid: one row per input data type, modules in fixed columns */
.ma7-grid { display: grid; grid-template-columns: 210px repeat(4, minmax(0, 1fr)); border-top: 1px solid #C7CCD3; border-bottom: 1px solid #C7CCD3; margin: 0 20px; }
.ma7-grid > * { box-sizing: border-box; height: 88px; overflow: hidden; }   /* every row the same height: all cards the same size */
.ma7-gh { height: 40px; padding: 10px 8px 8px 8px; font-size: 15px; color: var(--ma-ink); border-bottom: 1px solid #C7CCD3; }
.ma7-gh-mod { grid-column: 2 / -1; padding-left: 18px; }
.ma7-gh-mod a { color: #8B1A1A; font-weight: 600; text-decoration: underline; }
.ma7-gr { padding: 10px 8px; border-right: 1px solid #C7CCD3; border-bottom: 1px solid #DCE0E5; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 15px; color: var(--ma-ink); }
.ma7-gr span { font-size: 12px; line-height: 15px; color: #6B7280; }
.ma7-gr em { font-style: normal; font-size: 11px; font-weight: 600; color: #2F6DB5; }
.ma7-ge { background: #EEF3FA; border-bottom: 1px solid #DCE0E5; }
a.ma7-gm, a.ma7-gm:link, a.ma7-gm:visited { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 88px; margin: 0; padding: 6px; font-size: 16px; line-height: 23px; color: #FFFFFF; text-decoration: none; background: var(--gm); border-radius: 0; border: 2px solid; border-color: rgba(255, 255, 255, 0.55) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.38) rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); transition: transform 0.15s ease, box-shadow 0.15s ease; }
/* 3D: the card rises towards the viewer on hover, presses down on click */
a.ma7-gm:hover, a.ma7-gm:focus { color: #FFFFFF; text-decoration: none; cursor: pointer; z-index: 2; transform: translateY(-6px) scale(1.04); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.30), 0 3px 6px rgba(0, 0, 0, 0.18); filter: brightness(1.06); }
a.ma7-gm:active { transform: translateY(-1px) scale(1.01); border-color: rgba(0, 0, 0, 0.38) rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.55) rgba(0, 0, 0, 0.38); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); filter: brightness(0.96); }
.ma7-gm.c1 { --gm: #08B2E3; }   /* spectra and peaks */
.ma7-gm.c2 { --gm: #8CB369; }   /* peaks (6.0) */
.ma7-gm.c3 { --gm: #1F7A8C; }   /* tables */
.ma7-gm.c4 { --gm: #F4A259; }   /* annotated features */
.ma7-gm.c5 { --gm: #EE6352; }   /* translational and utilities */
.ma7-gm.c6 { --gm: #7B61A8; }   /* spatial */
.ma7-gm.c7 { --gm: #374785; }   /* the 6.0 default pane */
.ma7-h2 { margin: 30px 20px 12px 20px; font-size: 20px; font-weight: 700; color: rgb(74, 91, 112); }
@media (max-width: 1100px) {
    .ma7-grid { grid-template-columns: 160px repeat(4, minmax(0, 1fr)); }
    .ma7-gm { font-size: 14px; line-height: 20px; }
}
.ma7-details { margin: 28px 20px 0 20px; }
.ma7-details h2 { font-size: 20px; font-weight: 700; color: rgb(74, 91, 112); margin: 0 0 4px 0; }
.ma7-details p.lead { margin: 0 0 12px 0; color: var(--ma-muted); font-size: 13.5px; }
.ma7-details .ui-fieldset { border-radius: 10px !important; }
.ma7-details .ui-fieldset-content { color: var(--ma-muted); font-size: 13px; }

/* example-data tables inside a card */
.ma-examples td { padding: 5px 8px; vertical-align: top; line-height: 18px; }
.ma-examples td.ma-label { width: auto; }

/* p:panelGrid is used as a layout table on every page: no cell borders (as in 6.0) */
.ui-panelgrid, .ui-panelgrid > * > tr, .ui-panelgrid .ui-panelgrid-cell { border: 0 !important; }
.ui-panelgrid .ui-panelgrid-cell { padding: 4px 6px; }
table.ma-page { border-collapse: separate; border-spacing: 0; }
table.ma-page > tbody > tr > td { padding: 0; }
table.ma-page > tbody > tr > td > p { margin: 0 0 12px 0; color: var(--ma-muted); }
.ui-panelgrid.ma-card { width: 100%; table-layout: fixed; }   /* fixed: the nowrap control column cannot push the card past the page */
.ui-panelgrid.ma-card, .ui-panelgrid.ma-card > tbody > tr, .ui-panelgrid.ma-card .ui-panelgrid-cell { background: var(--ma-card) !important; }
.ma-card .ui-panelgrid-cell { padding: 4px 6px; }
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(3) { width: 300px; color: var(--ma-muted); font-size: 12.5px; line-height: 18px; }
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(2) { overflow: visible; }
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(2) td { white-space: normal; }   /* labels may wrap when the column is tight */
.ma-card.ui-panelgrid > tbody > tr > td:nth-child(1) { width: 200px; white-space: nowrap; font-weight: 700; }

/* ---------- home page ---------- */
.ma-home { padding: 26px 5% 30px 40px; }
.ma-news-card { background: var(--ma-card); border: 1px solid var(--ma-line-soft); border-radius: 4px; padding: 20px 40px 10px 30px; }
ul.ma-news { margin: 4px 0 6px 0; padding-left: 18px; line-height: 20px; }
ul.ma-news li { margin: 3px 0; }
.ma-start { position: sticky; top: 0; z-index: 5; text-align: center; padding: 16px 0 14px 0; margin: 4px 0 6px 0; background: var(--ma-ground); border-bottom: 1px solid var(--ma-line); }
.ma-start .ma-start-btn { font-size: 15px !important; font-weight: 700 !important; padding: 9px 28px !important; }
.ma-home-mods { border-collapse: separate; }
.ma-home-mods > tbody > tr > td { vertical-align: top; padding: 6px 4px 14px 4px; }
.ma-home-mods img { width: 250px; border: 1px solid var(--ma-line-soft); border-radius: 4px; background: #FFFFFF; }
.ma-home-mods h3 { margin: 4px 0 6px 0; font-size: 15px; font-weight: 700; color: var(--ma-ink); }
.ma-home-mods p { margin: 0 0 8px 0; line-height: 20px; color: var(--ma-muted); font-size: 13.5px; }

/* ---------- documentation frame (_doc_template: docs/*, home, module overview) ---------- */
.ma-doc { padding: 26px 5% 30px 40px; }
.ma-doc > table.ui-panelgrid, .ma-doc > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 21px; }
.ma-doc > table > tbody > tr > td { padding: 0; }
.ma-doc h2 { font-size: 18px; font-weight: 700; color: var(--ma-ink); margin: 0 0 10px 0; }
.ma-doc h3 { font-size: 15px; font-weight: 700; color: var(--ma-ink); margin: 18px 0 6px 0; }
.ma-doc h4 { font-size: 13.5px; font-weight: 700; color: var(--ma-ink); margin: 14px 0 4px 0; }
.ma-doc p { margin: 0 0 10px 0; }
.ma-doc li { margin: 2px 0; }
.ma-doc .ma-home, .ma-doc .ma7-page { padding: 0; }
.ma-doc .ma7-page { max-width: 1400px; }

/* aligned parameter rows: label column, control, optional help icon with a tooltip */
table.ma-form { border-collapse: separate; border-spacing: 0; }
table.ma-form td { padding: 3px 6px 3px 0; vertical-align: middle; line-height: 24px; }
table.ma-form td.ma-label { width: 218px; min-width: 218px; font-weight: 600; white-space: nowrap; }
table.ma-form td .ma-help { padding-left: 8px; }
.ma-help-icon { vertical-align: middle; margin-left: 6px; cursor: help; color: var(--ma-accent); font-size: 15px; }
.ma-help-icon:hover { color: var(--ma-accent-dark); }

/* task groups (Study Design): name and description on the left, parameters on the right, one rule between groups */
table.ma-tasks { width: 100%; border-collapse: separate; border-spacing: 0; }
table.ma-tasks > tbody > tr > td { vertical-align: top; padding: 14px 10px 14px 0; border-top: 1px solid var(--ma-line-soft); }
table.ma-tasks > tbody > tr:first-child > td { border-top: 0; padding-top: 4px; }
table.ma-tasks td.ma-task-head { width: 250px; padding-right: 20px; }
.ma-task-name { font-weight: 700; font-size: 13.5px; line-height: 24px; }
.ma-task-name span { padding-left: 2px; }
.ma-task-desc { color: var(--ma-muted); font-size: 12.5px; line-height: 18px; padding-left: 28px; }

/* layout helpers */
.topAlign { vertical-align: top !important; }
/* compact count table inside a result summary (one row per contrast; the open contrast is marked) */
.ui-datatable.ma-counts { font-size: 12.5px; }
.ui-datatable.ma-counts .ui-datatable-data > tr > td, .ui-datatable.ma-counts thead th { padding: 3px 10px; }
.ui-datatable.ma-counts .ma-row-cur > td { background: var(--ma-accent-tint) !important; font-weight: 700; }

/* secondary block (summaries, example data, notes): bordered, not shaded - one shaded focus per page */
.ma-panel { background: #FFFFFF; border: 1px solid var(--ma-line-soft); border-radius: 4px; padding: 12px 16px; margin: 6px 0 14px 0; }
/* a result summary spans the page like the parameter card above it (a content-sized box sat alone at the left) */
table.ma-panel { width: 100%; box-sizing: border-box; }
.ma-panel table { border-collapse: collapse; }
.ma-panel td { padding: 4px 6px; vertical-align: middle; }