/* Operations area look (#31). Loaded by _LayoutOperations only, scoped to body.ops so nothing here
   reaches the customer site. Flatly 5 is the base; this only evens out what the pages do differently. */

body.ops {
    background-color: #f7f9f9;
}

/* Navbar: Flatly's navy, not the grey bg-dark. */
body.ops .ops-navbar {
    background-color: var(--bs-primary);
}

body.ops .ops-navbar .navbar-brand {
    letter-spacing: .04em;
    font-weight: 600;
}

/* Links: gmCore's plain blue, underline on hover only, instead of Flatly's underlined teal. Buttons
   and list-group rows that are anchors keep their own colours. */
body.ops main a:not(.btn):not(.list-group-item):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link) {
    color: #1f6fb5;
    text-decoration: none;
}

body.ops main a:not(.btn):not(.list-group-item):not(.badge):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
    color: #174f82;
    text-decoration: underline;
}

/* One page-title size everywhere. Pages wrote h1, h1.h3 and h1.h4; Flatly's bare h1 is display-sized. */
body.ops main h1 {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--bs-primary);
}

body.ops main h2.h5,
body.ops main h2.h4 {
    font-weight: 600;
    color: var(--bs-primary);
}

/* The title row every page opens with: d-flex ... mb-3 around the h1 and its actions. */
body.ops main > .container > .d-flex:first-child,
body.ops main > .container-fluid > .d-flex:first-child {
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Tables: quiet headers, white body on the tinted page. */
body.ops main .table {
    --bs-table-bg: #fff;
}

body.ops main .table > thead th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom-width: 2px;
    white-space: nowrap;
}

/* Flatly's secondary (#95a5a6) outline is too faint on the tinted page; use the slate between it and the navy. */
body.ops .btn-outline-secondary {
    --bs-btn-color: #5d6d7e;
    --bs-btn-border-color: #aab7b8;
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5d6d7e;
    --bs-btn-hover-border-color: #5d6d7e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5b69;
    --bs-btn-active-border-color: #4d5b69;
}

/* Edit pencils: no button chrome, and only on the field the pointer is over (.ops-editable) or the
   row it belongs to (.ops-row). Always shown on touch screens, which cannot hover, and when tabbed to. */
body.ops .ops-edit {
    --bs-btn-padding-x: .2rem;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-border-color: transparent;
    opacity: 0;
    transition: opacity .1s;
}

body.ops .ops-editable:hover .ops-edit,
body.ops .ops-editable:focus-within .ops-edit,
body.ops .ops-row:hover > .ops-edit,
body.ops .ops-edit:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    body.ops .ops-edit {
        opacity: 1;
    }
}

/* Flatly's "dark" is the grey #7b8a8b, so text-dark on a warning, info or light badge read grey on
   orange. Near-black instead, on every ops badge. */
body.ops .badge.text-dark {
    color: #1c2833 !important;
}

/* Today's row in a dated table: a pale tint and a navy bar, not Bootstrap's solid table-info. */
body.ops .table > tbody > tr.ops-today > * {
    --bs-table-bg: #eaf2fb;
}

body.ops .table > tbody > tr.ops-today > :first-child {
    box-shadow: inset 4px 0 0 var(--bs-primary);
}

/* A table row that opens its record anywhere you click it (js/ops/rowLink.js). */
body.ops tr[data-href] {
    cursor: pointer;
}

/* A <details> row's open/close arrow, one icon for each state, and anything shown only while closed.
   !important because a .d-block it sits on is one too. */
body.ops details:not([open]) > summary .ops-when-open,
body.ops details[open] > summary .ops-when-closed {
    display: none !important;
}

/* Inline values separated by a middle dot, wrapping as a line of text. */
body.ops .ops-dotted > * + *::before {
    content: "\00b7";
    margin: 0 .4rem;
    color: var(--bs-secondary-color);
}

body.ops .card {
    border-color: var(--bs-border-color);
}

/* A table straight inside a card ran its first and last columns into the card edge. */
body.ops main .card > .table-responsive > .table > :not(caption) > * > :first-child,
body.ops main .card > .table > :not(caption) > * > :first-child {
    padding-left: 1rem;
}

body.ops main .card > .table-responsive > .table > :not(caption) > * > :last-child,
body.ops main .card > .table > :not(caption) > * > :last-child {
    padding-right: 1rem;
}

body.ops .card-header {
    background-color: #fff;
    font-weight: 600;
    color: var(--bs-primary);
}

/* Helpdesk thread (#31): Go Massif's replies pale blue, internal notes pale amber. The theme's
   Bootstrap has no bg-*-subtle, and .card would paint over it anyway. */
body.ops .card.ops-msg-ours {
    --bs-card-bg: #eaf3fb;
    --bs-card-border-color: transparent;
}

body.ops .card.ops-msg-note {
    --bs-card-bg: #fdf3e1;
    --bs-card-border-color: #f39c12;
}

/* A button styled as a link reads as a link: the same blue, not Flatly's teal (#31). */
body.ops .btn-link {
    --bs-btn-color: #1f6fb5;
    --bs-btn-hover-color: #174f82;
    --bs-btn-active-color: #174f82;
    text-decoration: none;
}

/* A read-only form (an employee above you, an archived vehicle) reads as text, not as
   greyed-out boxes that look like they should work (#31). */
body.ops fieldset.ops-readonly:disabled .form-control,
body.ops fieldset.ops-readonly:disabled .form-select {
    background-color: transparent;
    border-color: transparent;
    background-image: none;
    padding-left: 0;
    color: inherit;
}

/* Tabs read as links, blue like every other ops link, not Flatly's teal (#31). */
body.ops .nav-tabs .nav-link:not(.active) {
    color: #1f6fb5;
}