/**
 * KRSONS overrides on top of the Jidox theme.
 *
 * Loaded after app.min.css. The theme already styles Select2 (see
 * theme/form-advanced.html) and that styling is left alone - only the two
 * places where it does not line up with a plain input are corrected here.
 *
 * Everything uses the theme's own --ct-* custom properties, so light and dark
 * mode follow automatically.
 */

/* ---------------------------------------------------------------------------
 * 1. Horizontal alignment with .form-control
 *
 * The theme indents the rendered Select2 value by 12px, while .form-control
 * uses .9rem (14.4px). Stacked in a form grid the labels line up but the
 * values sit ~2px apart. Match the input's padding so a select and an input
 * read as the same control.
 * ------------------------------------------------------------------------- */

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0.9rem;
    padding-right: 2rem;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--ct-secondary-color);
}

/* ---------------------------------------------------------------------------
 * 2. Select2 inside an input-group
 *
 * The theme sets `.select2-container { width: 100% !important }`. Inside an
 * input-group that consumes the whole row and pushes the addon - our quick-add
 * "+" button - onto a line of its own. Restore the flex sizing Bootstrap gives
 * .form-control, and square off the joined corners so the pair reads as one
 * control.
 * ------------------------------------------------------------------------- */

.input-group > .select2-container {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.input-group > .select2-container .select2-selection--single {
    height: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .select2-container + .btn,
.input-group > .select2-container + .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------------------------------------------------------------------------
 * 3. States the theme does not cover
 * ------------------------------------------------------------------------- */

/* A select marked invalid by server-side validation should read like an
   invalid input rather than staying neutral. */
.is-invalid + .select2-container .select2-selection--single {
    border-color: var(--ct-danger);
}

/* Clear a modal's stacking context so the dropdown is reachable. */
.select2-container--open {
    z-index: 1080;
}

/* ---------------------------------------------------------------------------
 * 4. Branch branding
 *
 * An uploaded logo can be any size, so it is constrained to the space the
 * theme's own logo occupies rather than being allowed to stretch the sidebar.
 * ------------------------------------------------------------------------- */

.leftside-menu .logo .logo-lg img,
.logo-topbar .logo-lg img {
    max-height: 50px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    height: 50px !important;
}

.leftside-menu .logo .logo-sm img,
.logo-topbar .logo-sm img {
    max-height: 24px;
    max-width: 32px;
    width: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * 5. Wide tables
 *
 * A report can carry 15 columns. The page itself must never scroll sideways,
 * so the table scrolls inside its own container instead.
 * ------------------------------------------------------------------------- */

.card-body > .table-responsive {
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * 6. Small alignment fixes
 * ------------------------------------------------------------------------- */

/* The tag preview is plain text sitting where a control would be; give it the
   same vertical rhythm as the inputs beside it. */
.form-control-plaintext {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.select2-wrapper .select2-selection--single,
.select2-wrapper .select2-selection--multiple{
    height: auto !important;
    min-height: 2.3rem !important;
}
.select2-results__option--selected{
	background-color: #556c8f !important;
	color: #FFFFFF !important;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline !important;
    list-style: none !important;
    padding: 0 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body {
  font-family: 'Roboto', sans-serif !important;
}

html[data-bs-theme=dark]  .card .card{
    background:#2d333c !important;
    color: rgb(248, 249, 250) !important;
}
html[data-bs-theme=light] .card .card{
    background: #eeeef1 !important;
}
html[data-bs-theme=dark] .card-body,
html[data-bs-theme=dark] table th,
html[data-bs-theme=dark] table td{
    color: rgb(248, 249, 250);
}
html[data-bs-theme=dark] table td.table-warning,
html[data-bs-theme=dark] table th.table-danger,
html[data-bs-theme=dark] table th.table-info,
html[data-bs-theme=dark] table tr.table-secondary th,
html[data-bs-theme=dark] table tr.table-info th{
    color:#212529;
}