/* ---------------------------------------------------------------------------
   THE PATIENT FORMS - app/templates/components/examDetails.twig (the exam) and
   app/templates/fileDetails.twig (the karton)

   Its own file rather than public/sass: style.css is generated from the sass by
   gulp and that toolchain is not in the repo, so a rule added there by hand
   would be lost on the next build.
   --------------------------------------------------------------------------- */

/* A SECOND THERAPY GETS A BAND OF ITS OWN.

   It used to sit in the left column with its doses appearing as a second box
   beside each of the first therapy's - [Na+] [Na+ 2] - so a single row carried
   two different prescriptions. It is now a full-width band under the three
   therapy columns, laid out in the same columns, so a second therapy reads the
   way the first one does. */
.therapyBand,
.additionalTherapyBand {
  clear: both;
  float: none;
  width: 100%;
  margin-top: 1.5rem;
}

/* style.css floats .additionalTherapy left and sizes it to its content, which
   was right when it lived inside a column and is wrong now that it IS the row */
.additionalTherapyBand .additionalTherapy {
  float: none;
  width: 100%;
}

/* the band is a row of columns, so it has to close over its floats */
.therapyBand:after,
.additionalTherapyBand:after {
  content: "";
  display: block;
  clear: both;
}

/* THE PROPORTIONS: half, then a quarter, then a quarter.

   The phase and the four diet radios are wide, short lines of text; the doses
   are eight small boxes in two columns. Giving all three an equal third left
   the radios cramped and the dose columns half empty, so the controls take the
   left half and the two dose columns share the right - the same two .quarter
   widths the columns above the band use, so a dose still lines up with a dose.

   Both bands use these, so a second therapy is laid out exactly like the
   first. */
.therapyBand .atCol,
.additionalTherapyBand .atCol {
  float: left;
  /* A dose column holds a 140px box under a short label, so that is what it
       is worth. It was 24.94% of the row, which on a wide screen made each
       column a few hundred pixels of mostly empty space and pushed the one
       after it further right every time the window grew. Fixed widths and a
       fixed gap keep the three groups together and reading as one row. */
  width: 180px;
  margin-right: 2rem;
}

/* The controls column is capped rather than stretched.

   It holds a dropdown and four short radio labels, and it is sized to line up
   with the grid above rather than to its own contents - see below.

   It was 49.88% before, and with the two dose columns and the gaps that summed
   to 104.5%: over 100, so the third column had nowhere to go and dropped
   underneath the first. */
/* EXACTLY ONE .quarter WIDE, GAP INCLUDED.

   The measurement rows above are .quarter columns: 24.93772% with a 2.35765%
   margin, so the second column starts at 27.29537%. Matching those two numbers
   here is what puts Na+ on the same left edge as TA and Puls, at any window
   width - which a fixed 350px could not do, since the grid above is a
   percentage and would drift away from it as the window changed. */
.therapyBand .atColControls,
.additionalTherapyBand .atColControls {
  width: 24.93772%;
  margin-right: 2.35765%;
}

/* the last column ends the row */
.therapyBand .atCol:last-child,
.additionalTherapyBand .atCol:last-child {
  margin-right: 0;
}

/* A DOSE BOX IS 140px, NOT A SHARE OF THE COLUMN.

   style.css sizes these as `max-width: 40% !important; min-width: 40%` - a
   share of whatever column they land in, which was the width of one of a PAIR
   before the second therapy moved out of these rows. Sized that way a box for
   "2+2+2" grew every time the layout around it changed, and it was as wide as
   its column allowed rather than as wide as a dose needs.

   Both !important and min-width have to be answered: the !important is why an
   ordinary max-width here would lose, and min-width is what actually held the
   old size once max-width was beaten. This file is loaded after style.css, so
   at equal specificity these win. */
.therapyFields .fieldWrp input,
.therapyBand .therapyFields .fieldWrp input,
.additionalTherapyBand .therapyFields .fieldWrp input {
  max-width: 140px !important;
  min-width: 0 !important;
  width: 140px;
}

/* "Izmeni tip" sat directly under its label, close enough that the two read as
   one block of text with a dark rectangle in it. .editBttn is an <a> with only
   padding, so a margin needs the box to be inline-block to take effect. */
.patientTypeLbl .patientTypeBttn {
  display: inline-block;
  margin-top: 0.7rem;
}

/* "Data faza" reads as a field: the name, then the control under it. The select
   used to carry an inline `float:right; width:40%` that threw it to the far
   side of the column, a long way from the words naming it. */
/* "Data faza" reads down the page: the name, the dropdown under it, then the
   diet radios.

   The dropdown used to sit far to its right with a gap between them. Two things
   put it there and both had to go: an inline `float:right; width:40%` on the
   select itself (removed from the template - inline beats any stylesheet), and
   `.firstExam fieldset label span`, which floats every label's text left at
   26.6% with a 10% right margin. That is the convention for the measurement
   rows, where a short name sits beside its box; it is wrong for a column this
   narrow, where it left the two ends of one field at opposite edges. */
.therapyBand .atColControls label span,
.additionalTherapyBand .atColControls label span {
  float: none;
  display: block;
  width: auto;
  margin-right: 0;
}

.therapyBand .atColControls select,
.additionalTherapyBand .atColControls select {
  display: block;
  float: none;
  width: 150px;
  max-width: 100%;
  margin: 0.35rem 0 1.4rem 0;
}

/* Dijagnoza is a list of checkboxes with names like "Hypercholesterolaemia",
   so it needs more room than a dose column and reads badly wrapped. */
.therapyBand .atColDiagnose {
  width: 300px;
  margin-right: 0;
  margin-left: 3rem;
  margin-right: 0;
  position: relative;
  left: 100px;
  display: flex;
  justify-content: flex-end;
}

/* "Dijagnoza" heads a column the way Terapija heads its own, so it carries the
   same weight rather than reading as one more line of the list under it. */
.diagnose > p strong {
  font-weight: 700;
  /* the weight is what marks it as a heading; the size stays that of the
       labels it sits over, so it does not shout across the row */
  font-size: 1.3rem;
}

/* The textarea's name, for a screen reader only. Its placeholder already shows
   "Ostalo..." on screen, so a visible label would say it twice - but a
   placeholder is not a name: it disappears as soon as anything is typed, and
   assistive software is not required to read it. Clipped rather than
   display:none, which would take it out of the accessibility tree too. */
.diagnoseOtherLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}