@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");

/* Accessibility (BLUE-595): lightened from the theme's original #1ab394
   to clear 5.0:1 contrast against #333/#000 (dark text/icons on top). */
:root, [data-bs-theme=light] {
    --ins-primary: #1bb898;
    --ins-teal: #1bb898;
    --ins-primary-rgb: 27, 184, 152;
    --ins-dark: #0f6654;
    --ins-gray-dark: #262626;
    --ins-gray-400: #dcdcdc;
    --ins-gray-700: #565e63;
    /* The dark end of the page background; a neutral gray instead of the
       theme's bluish #343a40. Nothing else uses this variable. */
    --ins-gray-800: #3a3c3a;
    /* The gray in the middle of the page background (CSS "slategray"); bluer
       than the neutral grays of the theme. */
    --ins-slate-gray: #708090;
    --ins-danger: #b22222;
    --ins-danger-rgb: 178, 34, 34;
    --ins-warning: #ffa500;
    --ins-warning-rgb: 255, 165, 0;
    --ins-light: #ededed;
    --ins-secondary: #12467a;
    --ins-blue: #12467a;
    --ins-secondary-rgb: 18, 70, 122;
    --ins-link-color: rgb(70 130 180);
    --ins-link-color-rgb: 70, 130, 180;
    --ins-link-opacity: 1;
    /* Accessibility (BLUE-595): dark-on-white text variants of
       primary/info/warning (used as text, not their usual background role). */
    --ins-primary-text-emphasis: #26BB83;
    --ins-info-text-emphasis: #136c6d;
    --ins-warning-text-emphasis: #865700;
    /* BLUE-603: the theme's 235px plus room for the sidebar's thin
       scrollbar gutter (see SIDEBAR below) - the content offset follows. */
    --ins-sidenav-width: 240px;
}

/* Accessibility (BLUE-595): retargeted app-wide, since every use is
   status text on white/light, never text on a colored fill. */
.text-info {
    color: var(--ins-info-text-emphasis) !important;
}

.text-warning {
    color: var(--ins-warning-text-emphasis) !important;
}

/* CONTRAST MODE BUTTON */

/* The button in the top bar that switches contrast mode on and off
   (core/templates/accessibility_toggle_tag.html). Both states have a box of
   the same size, so that the top bar looks the same in both modes. */
button.toggle_accessible_css {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: none;
    font-size: 200%;
    line-height: 1;
    color: var(--ins-gray-dark);
    cursor: pointer;
}

/* Contrast mode is on: the button is inverted, a white icon on a dark disc.
   The two states used to differ in colour only (black and a dark green) and
   could hardly be told apart - a filled shape is seen at a glance and does
   not depend on colour vision (WCAG 1.4.1 "Use of Color"). */
button.toggle_accessible_css[aria-pressed="true"] {
    background-color: var(--ins-gray-dark);
    color: var(--ins-white);
}

body {
    height: auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
}

body.body-small {
    padding: 0 0;
}

/* The page background: from the brand green in the lower right corner over
   gray to a dark gray in the upper left one. One definition for every kind
   of page - the theme sets a background of its own for some body classes,
   hence the list. Contrast mode keeps its former gradient, see
   accessible.css. */
body,
body.body-small,
body.blank,
body.login {
    background: linear-gradient(333deg, var(--ins-primary-text-emphasis) -3%, var(--ins-slate-gray) 27%, var(--ins-slate-gray) 50%, var(--ins-gray-800) 99%) 0 0 no-repeat;
}

body div#wrapper {
    background: transparent;
}

/* TOP BAR */

/* BLUE-604: the logout form below floats right, and the topbar didn't
   contain the float - so .content-page, a flex container with its own
   formatting context, stepped aside for it over its whole height and left
   136px unused on the right of every page. flow-root makes the topbar
   contain its float again. */
.osianto-topbar {
    position: sticky;
    top: 0;
    z-index: 1001;
    border-bottom-width: 0 !important;
    background: linear-gradient(180deg, var(--ins-white), var(--ins-gray-400)) no-repeat;
    box-shadow: var(--ins-black) 5px 0 15px;
    display: flow-root;
}

/* No bottom margin: once the topbar contains the float (above), a 10px
   bottom margin would make it 1px taller than its 55px content. */
.osianto-topbar .osianto-sign-out {
    display: block;
    float: right;
    margin: 10px 10px 0;
}
.osianto-topbar .osianto-sign-out button {
    color: maroon;
    font-weight: bold;
    background: transparent;
}
div.osianto-logo {
    display: inline-block;
    padding: 12px 5px 10px;
    width: 150px;
}

body.body-small div.logo {
    padding: 0px 0 20px;
    width: 100%;
    text-align: center;
}

div.auth-container {
    padding: 5px 0.5em;
    background-color: var(--ins-white);
    text-align: right;
}

/* SIDEBAR */

/* BLUE-603: the sidebar is fixed and exactly as tall as the window minus
   the topbar, but had no overflow handling - on a 1366x768 laptop half of
   an admin's links were cut off, unreachable by keyboard and mouse alike.
   The theme scrolls it with the SimpleBar library via a data-simplebar
   wrapper, neither of which OSIANTO ships; native scrolling does the same
   without extra JavaScript, and the browser scrolls a keyboard-focused link
   into view by itself. `width: auto` stays so the condensed layout can
   shrink to its icons; the stable gutter reserves the thin scrollbar's
   room permanently, so the sidebar's width doesn't jump with the window
   height, and --ins-sidenav-width (above) grows by that room so the
   content offset still clears it. overscroll-behavior keeps the wheel
   from scrolling the page once the sidebar's end is reached. */
body div#wrapper div.sidenav-menu {
    margin-top: 55px;
    box-shadow: none;
    background: transparent;
    border-right: 0;
    width: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    /* BLUE-604: the browser's default light track stood out as a bright
       strip against the dark sidebar - gray thumb, no track instead. */
    scrollbar-color: var(--ins-gray-600) transparent;
}

/* BLUE-604: the transparent background above works on desktop, where the
   page's dark gradient shows through beside the content. In the mobile
   off-canvas layout the panel slides in *over* the content instead, and
   its white labels ended up on top of the page text. The gradient's own
   dark end keeps the panel looking like the desktop sidebar. */
html[data-sidenav-size="offcanvas"] body div#wrapper div.sidenav-menu {
    background: var(--ins-gray-dark);
}

body div#wrapper div.sidenav-menu div.sidebar-collapse {
    overflow: hidden;
}

body div#wrapper div.sidenav-menu div.sidebar-collapse div.navbar-header {
    float: none;
}
body div#wrapper div.sidenav-menu div.sidebar-collapse div.navbar-header a {
    padding: 10px 20px 10px 25px;
}
body div#wrapper div.sidenav-menu div.sidebar-collapse div.navbar-header a .fa {
    font-size: 20px;
    font-weight: bold;
}

/* An <hr> tag in the side menu should just work as a spacer */
body ul#side-menu hr {
    margin: 10px 10% 5px;
    border: none;
    height: 0;
}

body ul#side-menu li.nav-header {
    padding-top: 0;
    background: transparent;
}

body.mini-navbar ul#side-menu li.nav-header .dropdown {
    padding: 0 20px;
}

body.mini-navbar ul#side-menu li.nav-header b.caret {
    float: right;
}

body ul#side-menu li.nav-header a {
    color: var(--ins-black);
}

body ul#side-menu li.nav-header a img.avatar {
    border: 2px solid var(--ins-gray-400);
    width: 80px;
}

body div#wrapper div.sidenav-menu ul.side-nav li a i.fa,
body div#wrapper div.sidenav-menu ul.side-nav li a span.fa {
    display: inline-block;
    margin-right: 0;
    width: 25px;
    font-size: 1.3em;
}

body div#wrapper div.sidenav-menu ul.side-nav li.active {
    border-left-width: 0px;
    border-right-width: 0px !important;
    background: transparent;
}

body div#wrapper div.sidenav-menu ul.side-nav ul.unstyled {
    padding-left: 20px;
    margin: 0 20px 0 0;
}

body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a {
    display: block;
    padding: 0.5em 0 0.5em 1em;
    line-height: 1.5em;
    color: var(--ins-light);
    cursor: pointer;
}
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a .fa {
    color: var(--ins-primary-text-emphasis);
}

body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item  {
    list-style-type: none;
}
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item a {
    padding: 0.25em 0;
}
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item .nav-label {
    display: none;
}

body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item:hover,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a:hover,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a:hover .fa,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a:focus-visible,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a:focus-visible .fa {
    background-color: var(--ins-light);
    color: var(--ins-black);
}

body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item.active,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item a:active,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item.active a,
body div#wrapper div.sidenav-menu ul.side-nav > .side-nav-item.active a .fa {
    /* White on the brand green, the same pairing as the selected tool of the
       object tools (content.css). Contrast mode keeps its dark-on-teal
       pairing, see accessible.css. */
    background-color: var(--ins-primary-text-emphasis);
    color: var(--ins-white);
}

/* MESSAGES & ERRORS */

.messagelist {
    padding: 0;
    margin: 0;
}

.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 13px;
    padding: 10px 10px 10px 10px;
    margin: 0 0 10px 0;
    background: var(--ins-success-bg-subtle);
    background-size: 16px auto;
    color: var(--ins-gray-dark);
}

.messagelist li.warning {
    background: var(--ins-warning-bg-subtle);
    background-size: 14px auto;
}

.messagelist li.error {
    background: var(--ins-danger-bg-subtle);
    background-size: 16px auto;
}

/* FOCUS VISIBILITY (BLUE-598) */

/* Accessibility: the vendored theme's app.min.css (Inspinia) ships
   "a,button{outline:0!important}", which strips the browser's focus ring
   from every link and button - a keyboard user couldn't see where they
   were (WCAG 2.4.7 "Focus Visible", BLUE-598). OSIANTO marks keyboard focus
   with one style everywhere instead of a ring, which didn't fit the design:
   a 3px line under the focused element, in its own text colour.

   Links get it as an underline: it never shifts the layout (a real
   border-bottom would push everything below a block-level link down by
   3px on every Tab press) and follows a link wrapped onto two lines.
   !important beats the theme's and Django admin's `text-decoration: none`
   on specific link groups. Buttons - often icon-only, with no text to
   underline - get the line as an inset shadow at their bottom edge, which
   likewise doesn't move anything; it also replaces Bootstrap's focus ring
   on .btn elements, including button-styled links (hence `:not(.btn)` on
   the link rule, so they don't get both). Form fields keep Bootstrap's own
   focus frame. :focus-visible only matches keyboard focus, so mouse users
   see no change. */
a:focus-visible:not(.btn) {
    text-decoration-line: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 4px !important;
}

button:focus-visible,
.btn:focus-visible {
    box-shadow: inset 0 -3px 0 currentColor !important;
}

/* Links with no text of their own have nothing to underline. A link that
   wraps an image (the topbar logo) gets the line directly below the image;
   an inset shadow would be painted behind the image content. (Links that
   wrapped a <button> are gone since BLUE-607 - they're <a class="btn">.) */
a:focus-visible:not(.btn) > img {
    box-shadow: 0 3px 0 currentColor;
}

/* The same for links that hold nothing but an icon - the edit, history and
   report links in the rows of the changelists. Font Awesome icons are
   inline-block, so the link's underline does not reach them; without this
   the focus was invisible on them (WCAG 2.4.7, found by the keyboard walk of
   osiselsuite on 2026-10-26). :only-child leaves alone links with an icon
   *and* text (toolbar, sidebar), whose text carries the underline. */
a:focus-visible:not(.btn) > .fa:only-child {
    box-shadow: 0 3px 0 currentColor;
}

/* An underline takes the link's own colour, not that of the text inside it.
   The sidebar's profile link keeps the default link blue while its name is
   white - so the line is set to match the name. */
body div#wrapper div.sidenav-menu div.sidenav-user a:focus-visible {
    text-decoration-color: var(--ins-white) !important;
}

/* A user without a name is shown by the e-mail address, which has no spaces
   to break at and may be wider than the sidebar. */
div.sidenav-user .profile-element {
    overflow-wrap: anywhere;
}

/* SKIP NAVIGATION (BLUE-597) */

/* Accessibility (BLUE-597): WCAG 2.4.1 "Bypass Blocks". The first focusable
   element on every page, moved off-screen rather than display:none so Tab and
   screen readers still reach it. It slides into view only on keyboard focus.
   Dark text on --ins-primary, because that is the pairing BLUE-595 tuned for
   contrast (white on #1bb898 would fail AA). */
.skip-link {
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 4000;
    padding: 8px 16px;
    background-color: var(--ins-primary);
    color: var(--ins-black);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    color: var(--ins-black);
}

/* #page-wrapper gets tabindex="-1" only so the skip link can move focus
   into it. It is not an interactive control, so the focus ring browsers
   draw around the whole content card after the jump is just noise. */
div#page-wrapper:focus {
    outline: none;
}

/* The skip link's fragment jump scrolls #page-wrapper flush to the viewport
   top - right underneath the sticky topbar, which then hides the breadcrumbs
   and with them the next keyboard focus stop (WCAG 2.4.11 "Focus Not
   Obscured"). Reserving the topbar height plus the wrapper's own 30px top
   margin makes the jump stop where the content normally rests. */
div#page-wrapper {
    scroll-margin-top: calc(var(--ins-topbar-height) + 30px);
}

/* Layout things */

/* BLUE-605: the context help panel (position: absolute, contained by
   .content-page) slides in and out from far beyond the right edge. clip
   keeps that one-second animation from widening the page and flashing a
   horizontal scrollbar - and unlike `hidden` it creates no scroll
   container, so sticky elements and scrolling are unaffected. */
body div.content-page {
    padding-right: 0;
    padding-left: 0;
    overflow-x: clip;
}

body.fixed-nav div#wrapper div#page-wrapper {
    margin-right: 20px;
    margin-top: 30px;
    box-shadow: var(--ins-gray-dark) 0 0 15px;
    background-color: var(--ins-white);
}

/* BLUE-604: in the phone (offcanvas) layout the card already sits flush on
   the left, so it runs edge to edge instead of keeping a right margin.
   Scoped via the theme's own layout attribute rather than repeating its
   breakpoints. */
html[data-sidenav-size="offcanvas"] body.fixed-nav div#wrapper div#page-wrapper {
    margin-right: 0;
}

/* The breadcrumb row wraps a single column, so Bootstrap's negative gutter
   margin only pushed it 10px past the card's right edge - hidden by the
   card's margin until the phone layout dropped it, then a horizontal
   scrollbar. The breadcrumbs are left-aligned, so nothing moves. */
div#page-wrapper > .row {
    margin-right: 0;
}
body.body-small div#page-wrapper {
    margin-top: 30px !important;
    margin-right: 0;
}
body.fixed-nav div.content-page div.wrapper-content {
    min-height: 800px;
}


/* CONTEXT HELP STYLES */

div#context_help {
    position: absolute;
    border: 1px solid var(--ins-gray-700);
    width: 40%;
    right: 0;
    top: 5px;
    box-shadow: -15px 5px 20px var(--ins-gray-700);
    z-index: 100;
    color: var(--ins-black);
    background-color: var(--ins-body-bg);
}

div#context_help .card-header {
    border-bottom: 2px solid var(--ins-gray-700);
}

/* BLUE-605: 40% of a phone's width was too narrow to read; in the phone
   layout the panel covers the content's full width, like the card below. */
html[data-sidenav-size="offcanvas"] div#context_help {
    width: 100%;
}

/* The heading only takes focus programmatically when the panel opens (see
   pagehelp.js), so screen readers announce it - it is no control, so no
   browser focus ring. */
div#context_help #context_help_title:focus {
    outline: none;
}

div#context_help #help_text {
    width: 95%;
    max-width: 700px;
}

div.footer {
    margin: 0;
    background-color: var(--ins-gray-400);
    color: var(--ins-gray-dark);
}