/* ---------------------------------------------------------------------------
   Podešavanja: the three tab sections.

   Kept in its own file for the same reason notice.css is: public/css/style.css
   is generated from public/sass by gulp (see public/gulpfile.js), so anything
   hand-edited into it is lost on the next build. This file is loaded after
   style.css by layouts/master.twig, which is also what lets the few overrides
   at the bottom win.

   No framework. Bootstrap is not loaded anywhere in this app, so there are no
   nav-tabs/btn rules to inherit; the values below are the app's own, from
   public/sass:

     #2f1f1a  $mainFontColor - text, borders, the dark fill buttons invert to
     #e6d8c3  $brown         - the light warm fill of the app's small .bttn
     #d9cfbf                 - the page background these sit on
     3px      $base-border-radius
   --------------------------------------------------------------------------- */

.settingsTabsNav {
    list-style: none;
    margin: 0 0 0 1em;
    padding: 0;
    border-bottom: 2px solid #2f1f1a;
}

.settingsTabsNav li {
    display: inline-block;
    margin: 0 .3em 0 0;
}

/* the app's own small button shape (.bttn in support/_mainStyle.scss): light
   warm fill, thin dark border, dark text, inverting on hover */
.settingsTabsNav a {
    display: block;
    padding: .5em 1.2em;
    border: 1px solid #2f1f1a;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background: #e6d8c3;
    color: #2f1f1a;
    font-size: 1.3rem;
    font-weight: 300;
    text-decoration: none;
}

.settingsTabsNav a:hover {
    background: #2f1f1a;
    color: #fff;
}

/* The open tab joins the content below it: white fill, pushed down so it sits
   over the nav's bottom rule instead of behind it.

   colour is repeated on the hover state on purpose. Without it the :hover rule
   above still wins for `color` (it is the only rule setting it), while this
   more specific rule holds the background at white - so hovering the open tab
   painted white text on white and the label disappeared.  */
.settingsTabsNav li.isActive a,
.settingsTabsNav li.isActive a:hover {
    position: relative;
    top: 2px;
    background: #fff;
    color: #2f1f1a;
    font-weight: 700;
}

.settingsTabContent {
    clear: both;
    padding: 1.5em 1em 0 1em;
}

/* Hidden only once settingsTabs.js has run and added .jsReady. With javascript
   off nothing here applies and all three sections show one under the other,
   each under its own <h2> - the page exactly as it was. Hiding panes from
   plain CSS would strand two thirds of the settings page. */
.settingsTabs.jsReady .settingsTabPane {
    display: none;
}

.settingsTabs.jsReady .settingsTabPane.isActive {
    display: block;
}

/* The tab already names the section, so the heading is only there for the
   no-javascript fallback above. */
.settingsTabs.jsReady .settingsTabHeading {
    display: none;
}

/* .tests and .permissions are span-columns(6) in support/_mainStyle.scss
   because they used to sit side by side on one long page. One per tab now, so
   each takes the full width instead of leaving half the pane empty. */
.settingsTabs .tests,
.settingsTabs .permissions {
    float: none;
    width: 100%;
    margin-right: 0;
}

/* ---------------------------------------------------------------------- *
 * Analyses table: hold the page still while it is being searched.
 *
 * The DataTable on this page filters 49 analyses down to one as you type in
 * its Search box, and the page height went with it - measured, the wrapper
 * dropped from 1048px to 184px and everything below jumped up 864px, then
 * back again when the search was cleared.
 *
 * The reserved height itself is an inline style on this element, written by
 * settings.twig from the number of analyses (min(n, 25) rows at 36px, plus
 * 244px for everything that is not rows) - it depends on the data, so it
 * cannot live here. This rule only makes sure the holder behaves like a plain block and
 * adds nothing of its own.
 *
 * Deliberately a reserved height rather than anything that argues with
 * DataTables' own rendering: sorting, paging and the 25-per-page default are
 * untouched.
 * ---------------------------------------------------------------------- */
.analysesTableHold {
    display: block;
    width: 100%;
}

/* The save button sat immediately under the Tip switch, close enough to read
   as part of it. It is a different kind of thing - one chooses, the other
   commits - so it gets its own air. */
.noticeForm .noticeSave {
    margin-top: 2.8rem;
}

/* EVERY field name in this form sits close to the thing it names.

   They were written as `<label>…</label><br>`, and style.css adds
   `label { margin-bottom: .375em }` on top of the line break, so each name
   floated between its own control and the field above it - near enough to
   neither to be read as belonging to one. A block label with a small margin
   and no <br> puts the name against its control; the space between FIELDS is
   set separately, below, so the grouping is the thing that carries. */
.noticeForm label,
.noticeForm .noticeEnabledLabel {
    display: block;
    margin-bottom: .35rem;
}

/* the on/off field's name is a <span>, not a <label>, so that clicking it
   cannot flip the switch - which also means style.css's label weight no
   longer reaches it, and it should still read as a field name */
.noticeForm .noticeEnabledLabel {
    font-weight: bold;
}

/* The space between FIELDS, in one place. It was on the on/off switch alone,
   which separated that field from the next one and left every other pair to
   whatever the paragraph margin happened to be. */
.noticeForm > p {
    margin-bottom: 1.9rem;
}

/* A page-level message, at the right-hand end of the tab bar.

   It is a <li> of the tab list so that it shares that row without a wrapper
   and without being positioned over anything: float:right puts it at the far
   end, and because the row already sits above the panes it cannot push the
   form down when it appears. It reads the same wherever it is shown, whichever
   tab happens to be open. */
.settingsTabsNav .settingsTabsNotice {
    float: right;
    max-width: 40%;
    margin: 0 0 .4em 1em;
    padding: .4em .8em;
    border-radius: 3px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
}

.settingsTabsNav .settingsTabsNotice--error {
    background: #f7e4e2;
    border: 1px solid #e0b3ae;
    color: #8a1f1a;
}