/* ============================================================
   MISTEAMS — type, cards and controls

   The layer between mis-app.css (which built the shell) and the
   per-pattern files that follow it. Three jobs, all app-wide, none
   of them needing a view to change:

     1. one type stack, with the right family doing the right job
     2. the card, as a plain white sheet
     3. one set of form controls, at one height

   LOAD ORDER. This sits directly after mis-app.css and BEFORE
   mis-forms.css, mis-crud.css and mis-table.css. That is deliberate:
   the three files after it own a specific pattern -- the account
   card, the editor modal, the list -- and each should keep beating
   this file on its own ground at equal specificity. Moving this
   later would flatten all three.
   ============================================================ */

:root {
    /* INTER FIRST, KANTUMRUY SECOND, and the order is the whole point.

       mis-app.css:2603 sets the admin body to Kantumruy Pro with
       !important, so every screen is currently setting its Latin
       copy in a Khmer-first family. Kantumruy Pro carries Latin, but
       it is drawn to sit beside Khmer, not to run a dense table of
       names and figures -- so the body text, the column labels and
       the row data were all a little narrow and a little quirky
       without there being anything nameable to point at.

       Inter has no Khmer glyphs. That is what makes this safe: every
       Khmer character falls straight through to Kantumruy Pro and
       renders exactly as it does today, while Latin picks up a face
       built for interface text. One stack, two scripts, no
       `lang=` switching and no view edits.

       Battambang stays at the end as the last resort it always was. */
    --mis-font: Inter, 'Kantumruy Pro', 'Khmer OS Battambang',
                'Noto Sans Khmer', 'Battambang', system-ui, sans-serif;

    /* Figures only. Lining, one width per digit, so a money column
       stays in column. */
    --mis-font-num: Inter, system-ui, sans-serif;

    --mis-ctl-h:      38px;   /* every control, one height */
    --mis-ctl-h-sm:   32px;
    --mis-ctl-r:      8px;
    --mis-ctl-border: #E2E8F0;
    --mis-label-ink:  #344054;
}

/* ------------------------------------------------------------
   1. Type

   Written against the same selectors mis-app.css uses, so it is a
   swap rather than a second opinion. The !important is not a
   flourish: the rule being replaced carries one.
   ------------------------------------------------------------ */

body.mis-shell-body,
body.mis-plain-body { font-family: var(--mis-font) !important; }

body.mis-shell-body h1, body.mis-shell-body h2, body.mis-shell-body h3,
body.mis-shell-body h4, body.mis-shell-body h5, body.mis-shell-body h6,
body.mis-shell-body .h1, body.mis-shell-body .h2, body.mis-shell-body .h3,
body.mis-shell-body .h4, body.mis-shell-body .h5, body.mis-shell-body .h6,
body.mis-shell-body .panel-title,
body.mis-shell-body .btn,
body.mis-shell-body .form-control,
body.mis-shell-body label,
body.mis-shell-body .control-label,
body.mis-shell-body .table,
body.mis-plain-body h1, body.mis-plain-body h2, body.mis-plain-body h3,
body.mis-plain-body h4, body.mis-plain-body h5, body.mis-plain-body h6,
body.mis-plain-body .btn,
body.mis-plain-body .form-control,
body.mis-plain-body a { font-family: var(--mis-font); }

/* The named exceptions in mis-app.css and mis-forms.css that pin
   Kantumruy Pro on their own, reached at a specificity that wins
   wherever they sit in the cascade. */
body.mis-shell-body .mis-form label,
body.mis-shell-body .mis-form .control-label,
body.mis-shell-body .mis-form .form-control,
body.mis-shell-body .mis-top-brand-text,
body.mis-shell-body .dash-page-title { font-family: var(--mis-font); }

/* Figures. Anywhere a number is compared against the number above
   it rather than read as a word. */
body.mis-shell-body .mis-kpi-value,
body.mis-shell-body .mis-stat-value,
body.mis-shell-body .kpi-val,
body.mis-shell-body .mis-num,
body.mis-shell-body .mis-delta {
    font-family: var(--mis-font-num);
    font-variant-numeric: tabular-nums;
}

/* ---- scale ----

   Inter runs a shade larger than Kantumruy Pro at the same px, so
   the headings come down slightly rather than staying where they
   were and reading heavier than before. */
.body-content h1, .body-content .h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.body-content h2, .body-content .h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.body-content h3, .body-content .h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.body-content h4, .body-content .h4 { font-size: 15px; font-weight: 600; }
.body-content h5, .body-content .h5,
.body-content h6, .body-content .h6 { font-size: 14px; font-weight: 600; }

/* Code keeps a mono face -- it is the one run of text on these
   screens that is meant to be read character by character. */
.body-content code, .body-content kbd, .body-content pre, .body-content samp {
    font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.body-content code {
    background: #F1F5F9;
    border-radius: 5px;
    color: #B4365B;
    padding: 1px 5px;
}

/* ------------------------------------------------------------
   2. The card

   .panel-primary is on 54 views and .panel-default on 38, against
   one each of success, info and danger. At that spread the coloured
   top edge is not colour-coding -- it is what got copied along with
   the rest of the block, and it puts a green rule over almost every
   card in the app.

   So the edge goes from the two that were copied, and stays on the
   three that were chosen.
   ------------------------------------------------------------ */

.body-content .panel-primary,
.body-content .panel-default {
    border: 1px solid #EEF1F6;
    border-top: 1px solid #EEF1F6;
}
.body-content .panel {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
}
.body-content .panel > .panel-heading {
    border-bottom: 1px solid #F1F5F9;
    padding: 16px 20px;
}
.body-content .panel > .panel-heading .panel-title,
.body-content .panel > .panel-heading h3,
.body-content .panel > .panel-heading h4,
.body-content .panel > .panel-heading h5 {
    color: #0F172A;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.body-content .panel > .panel-body { padding: 20px; }

/* The explanation almost every list opens with. It is read once, so
   it should sit as a subtitle rather than as a block of body copy
   the same size as the data underneath it. */
.body-content .panel > .panel-body > p.text-muted:first-child {
    color: #94A3B8;
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0 0 16px;
    max-width: 78ch;
}

/* An <hr> inside a card is a second divider in a box that already
   has edges. Where one is kept, it should be a hairline and not a
   ruled line. */
.body-content .panel-body hr,
.body-content .mis-pane-body hr {
    border-top: 1px solid #F1F5F9;
    margin: 18px 0;
}

/* ------------------------------------------------------------
   3. Controls

   One height, one radius, one focus ring. Bootstrap 3 ships
   .form-control at 34px, .input-sm at 30px and leaves selects,
   textareas, input groups and the two third-party widgets to find
   their own -- which is why a filter bar with a date box, a select
   and a Chosen dropdown never lined up.
   ------------------------------------------------------------ */

.body-content .form-control {
    background: #FFFFFF;
    border: 1px solid var(--mis-ctl-border);
    border-radius: var(--mis-ctl-r);
    box-shadow: none;
    color: var(--mis-ink);
    font-size: 13.5px;
    height: var(--mis-ctl-h);
    line-height: 1.5;
    padding: 7px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.body-content .form-control:hover { border-color: #CBD5E1; }
.body-content .form-control:focus {
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb, 30, 158, 90), .12);
    outline: 0;
}
.body-content .form-control::placeholder { color: #A9B4C4; }
.body-content .form-control[readonly],
.body-content .form-control[disabled] {
    background: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
}

/* A textarea is the one control whose height is content, not a
   token. */
.body-content textarea.form-control {
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
}

/* The native select arrow is drawn by the OS and matches nothing
   else on the page, so it is replaced with the same chevron the
   sortable column headers use. */
.body-content select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    padding-right: 32px;
}
.body-content select.form-control[multiple] { background-image: none; height: auto; padding-right: 12px; }

.body-content .input-sm,
.body-content select.input-sm { font-size: 12.5px; height: var(--mis-ctl-h-sm); padding: 4px 10px; }
.body-content textarea.input-sm { height: auto; }
.body-content .input-lg { font-size: 15px; height: 46px; padding: 10px 14px; }

/* ---- the words around a field ---- */

.body-content .form-group { margin-bottom: 16px; }
.body-content label,
.body-content .control-label {
    color: var(--mis-label-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 6px;
}
.body-content .help-block {
    color: #94A3B8;
    font-size: 12px;
    line-height: 1.6;
    margin: 6px 0 0;
}
/* A required field says so in the label, not only in the validator. */
.body-content .control-label .required,
.body-content label .required { color: var(--mis-danger); margin-left: 2px; }

/* ---- tick boxes ---- */

.body-content .checkbox,
.body-content .radio { margin: 6px 0; }
.body-content .checkbox label,
.body-content .radio label {
    color: var(--mis-ink);
    font-size: 13.5px;
    font-weight: 400;
    padding-left: 24px;
}
.body-content .checkbox input[type="checkbox"],
.body-content .radio input[type="radio"] {
    accent-color: var(--mis-accent);
    height: 16px;
    margin-left: -24px;
    margin-top: 2px;
    width: 16px;
}

/* ---- input groups ---- */

.body-content .input-group-addon {
    background: #F8FAFC;
    border: 1px solid var(--mis-ctl-border);
    border-radius: var(--mis-ctl-r);
    color: #64748B;
    font-size: 12.5px;
    padding: 6px 12px;
}
.body-content .input-group .form-control:first-child,
.body-content .input-group-addon:first-child,
.body-content .input-group-btn:first-child > .btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.body-content .input-group .form-control:last-child,
.body-content .input-group-addon:last-child,
.body-content .input-group-btn:last-child > .btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.body-content .input-group-btn > .btn { height: var(--mis-ctl-h); }

/* ---- Chosen and Select2 ----

   Thirteen views use Chosen and one uses Select2. Both draw their
   own box, and neither had been told what height the rest of the
   row is, so a filter bar mixing them with a plain select stepped
   up and down across its own baseline.
   ------------------------------------------------------------ */

.body-content .chosen-container { font-size: 13.5px; }
.body-content .chosen-container-single .chosen-single {
    background: #FFFFFF;
    border: 1px solid var(--mis-ctl-border);
    border-radius: var(--mis-ctl-r);
    box-shadow: none;
    color: var(--mis-ink);
    height: var(--mis-ctl-h);
    line-height: calc(var(--mis-ctl-h) - 2px);
    padding: 0 12px;
}
.body-content .chosen-container-active.chosen-with-drop .chosen-single {
    background: #FFFFFF;
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb, 30, 158, 90), .12);
}
.body-content .chosen-container-single .chosen-single div b { background-position: 0 6px; }
.body-content .chosen-container .chosen-drop {
    border: 1px solid #E6EAF0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    margin-top: 4px;
    overflow: hidden;
}
.body-content .chosen-container .chosen-results li.highlighted {
    background: var(--mis-accent);
    background-image: none;
}
.body-content .chosen-container-multi .chosen-choices {
    border: 1px solid var(--mis-ctl-border);
    border-radius: var(--mis-ctl-r);
    box-shadow: none;
    min-height: var(--mis-ctl-h);
    padding: 3px 8px;
}
.body-content .chosen-container-multi .chosen-choices li.search-choice {
    background: var(--mis-accent-tint, #E8F6EF);
    background-image: none;
    border: 1px solid rgba(var(--mis-accent-rgb, 30, 158, 90), .25);
    border-radius: 6px;
    box-shadow: none;
    color: var(--mis-accent-press, #126239);
}

.body-content .select2-container--default .select2-selection--single {
    border: 1px solid var(--mis-ctl-border);
    border-radius: var(--mis-ctl-r);
    height: var(--mis-ctl-h);
}
.body-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mis-ink);
    line-height: calc(var(--mis-ctl-h) - 2px);
    padding-left: 12px;
}
.body-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--mis-ctl-h) - 2px);
}

/* ---- the date picker ---- */

.body-content .bootstrap-datetimepicker-widget {
    border: 1px solid #E6EAF0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
.body-content .bootstrap-datetimepicker-widget td.active,
.body-content .bootstrap-datetimepicker-widget td.active:hover {
    background: var(--mis-accent);
    text-shadow: none;
}

/* ------------------------------------------------------------
   4. Density

   The reference reads airier than this app not because its type is
   larger but because its boxes are. Both of these are one step, not
   two: enough to stop the content touching its own edges, not
   enough to push a working screen off the fold.
   ------------------------------------------------------------ */

.body-content .mis-list-body { padding: 20px 22px 22px; }
.body-content .mis-pane-body { padding: 18px 20px; }
.body-content .row + .row { margin-top: 0; }

/* A stack of cards needs to read as a stack, not as one tall box
   with lines across it. */
.body-content .panel + .panel,
.body-content .mis-pane + .mis-pane { margin-top: 18px; }