/*
 * richText.css - what this app adds on top of Trumbowyg's own stylesheet for
 * the two rich text fields (the report header and the notice banner in
 * Podešavanja). See public/js/trumbowygInit.js.
 *
 * Kept in its own file for the same reason notice.css is: public/css/style.css
 * is generated from public/sass by gulp (public/gulpfile.js), so anything
 * hand-edited into it is lost on the next build. layouts/master.twig loads
 * style.css, then Trumbowyg's stylesheet, then this one - which is what lets
 * the few overrides below win.
 *
 * Values are the app's own, from public/sass:
 *   #ddd     $form-border-color - the border on every text input
 *   #c4c4c4  $form-border-color-hover
 *   #477dca  $form-border-color-focus
 *   3px      $base-border-radius
 *   #2f1f1a  $mainFontColor
 *   1.5      $base-line-height
 *   .5em     $base-spacing / 3, the padding inside a text input
 *
 * All of it applies to screen only; the editors live inside .no-print regions
 * of the report form, and the banner never reaches a printed nalaz.
 */

/* ---------------------------------------------------------------------- *
 * Make the editor sit in the form like the plain inputs beside it rather
 * than like a widget dropped on top of them. Trumbowyg's own box is
 * 1px solid #ecf0f1 with a 300px minimum; the minimum is replaced per field
 * from the textarea's `rows` in trumbowygInit.js.
 * ---------------------------------------------------------------------- */
.trumbowyg-box {
    margin-top: 0;
    margin-bottom: .75em;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.trumbowyg-box:hover {
    border-color: #c4c4c4;
}

/* matches the :focus of textarea / $all-text-inputs in base/_forms.scss */
.trumbowyg-box.trumbowyg-editor-visible:focus-within {
    border-color: #477dca;
}

.trumbowyg-editor,
.trumbowyg-textarea {
    padding: .5em;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    color: #2f1f1a;
}

/*
 * Neutralise the app's own button styling inside the toolbar.
 *
 * base/_buttons.scss styles bare `button` globally (%button: dark fill, white
 * bold text, .75em 1em padding, border:none) and support/_mainStyle.scss
 * styles it again scoped. Trumbowyg's toolbar is made of <button> elements, so
 * without this they inherit that dark, chunky look and the toolbar reads as a
 * row of heavy slabs instead of a set of icons - which is exactly what the
 * hand-written editor this replaced was criticised for. Everything else about
 * the buttons is left to Trumbowyg.
 */
.trumbowyg-button-pane button {
    padding: 0;
    border: none;
    border-radius: 0;
    font-weight: normal;
    color: inherit;
    background-color: transparent;
}

/* hint under the report's date field.

   .richTextHint went with the line under the notice editor: the toolbar shows
   which formatting exists, so a sentence listing it said nothing the buttons
   above it were not already saying. The rule for the report date's hint, which
   is still there, is what remains. */
.reportDateHint {
    display: block;
    padding-top: .3rem;
    font-size: 1.2rem;
    color: #666;
}

/* "Datum izveštaja" on the report form (components/reportDate.twig) */
.reportDate {
    max-width: 14rem;
}

/* ---------------------------------------------------------------------------
   TRUMBOWYG'S OWN MODALS ("Ubaci link") INSIDE THIS APPLICATION.

   Trumbowyg's modal is built for a page with no opinions about form controls.
   This one has several, and they are global:

       button, input[type=submit] { padding: .75em 1em; font-size: 1em; ... }
       input[type=text], ...      { padding: .5em; margin-bottom: .75em; ... }
       label                      { font-weight: bold; margin-bottom: .375em; }

   None of that is wrong on the rest of the site, but Trumbowyg lays its modal
   out to fixed pixel heights - 27px rows, a 35px button pinned to bottom:10px -
   inside .trumbowyg-modal, which is `height: 350px; overflow: hidden`. Every
   row grew, the content pushed past 350px, and the overflow cut the Potvrdi /
   Odustani buttons in half.

   So: let the container size to its content, and put the controls inside it
   back to the metrics Trumbowyg drew them for. Nothing here changes the
   editor itself, only the dialogs it opens.
   --------------------------------------------------------------------------- */

.trumbowyg-modal {
    /* height is set in Trumbowyg's own css and again inline while it animates
       the box in, so it has to be overridden with weight */
    height: auto !important;
    overflow: visible;
}

.trumbowyg-modal-box {
    height: auto !important;
    /* the band the absolutely positioned buttons sit in: 35px + 10px + air */
    padding-bottom: 55px;
}

.trumbowyg-modal-box .trumbowyg-input-row {
    margin: 10px 12px;
}

.trumbowyg-modal-box .trumbowyg-input-infos label,
.trumbowyg-modal-box .trumbowyg-input-infos label span {
    margin: 0;
    font-weight: normal;
    height: 32px;
    line-height: 32px;
}

.trumbowyg-modal-box .trumbowyg-input-html input,
.trumbowyg-modal-box .trumbowyg-input-html select,
.trumbowyg-modal-box .trumbowyg-input-html textarea {
    height: 32px;
    line-height: 32px;
    margin: 0;
    padding: 0 7px;
    font-size: 14px;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.trumbowyg-modal-box .trumbowyg-modal-button {
    height: 35px;
    line-height: 33px;
    padding: 0;
    border-radius: 0;
    font-size: 15px;
    font-weight: normal;
}

/* ---------------------------------------------------------------------------
   LINKS INSIDE THE EDITOR.

   Trumbowyg ships `a { color:#15c; text-decoration:underline }` but only under
   .trumbowyg-reset-css, which is its resetCss option and is not switched on
   here - deliberately, because the banner should look in the editor the way it
   will look on the page, not the way Trumbowyg would like it to.

   Without that, the application's own `a { color:#2f1f1a; text-decoration:none }`
   applies, and a link a doctor has just inserted is the same brown as the text
   around it with nothing to show it is a link at all.
   --------------------------------------------------------------------------- */

.trumbowyg-editor a,
.trumbowyg-editor a:link,
.trumbowyg-editor a:visited {
    color: #1155cc;
    text-decoration: underline;
}

/* Trumbowyg's confirm button is its own green (#2bc06a). Same specificity as
   its rule, loaded after it, so ordering decides - and the brand brown wins,
   the same #2f1f1a every other button in the application uses. Odustani keeps
   Trumbowyg's grey: it is the one that changes nothing. */
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
    background: #2f1f1a;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover,
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
    background: #50352c;
}

.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
    background: #241713;
}