/**
 * Modern Portal custom styles.
 * Extends bootstrap5/css/style.css — portal-specific overrides only.
 */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css');

/* Migrated from the old BS4 compile – portal brand tokens and base overrides. */
:root {
  --bs-primary: var(--primary-color, #0056b3);
  --bs-primary-rgb: 0, 86, 179;
  --bs-info: #006170;
  --bs-info-rgb: 0, 97, 112;
  --bs-link-color: var(--link-color, #0056b3);
  --bs-link-hover-color: #003167;
}

body {
  font-family: var(--portal-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px !important;
  height: 100%;
}

a {
  color: var(--link-color, #0056b3);
  text-decoration: none;
}

a:hover {
  color: #003167;
  text-decoration: underline;
}

.sidebar a:hover {
  text-decoration: none;
}

a.button.button-action {
  --bs-btn-color: #fff;
  --bs-btn-bg: #006170;
  --bs-btn-border-color: #006170;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00404a;
  --bs-btn-hover-border-color: #00353d;
  --bs-btn-focus-shadow-rgb: 38, 121, 133;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00353d;
  --bs-btn-active-border-color: #002a30;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #006170;
  --bs-btn-disabled-border-color: #006170;
}

.navbar-nav .nav-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.navbar-nav .dropdown-toggle::after {
  float: right;
}

.sidebar .menu--main .nav-link.dropdown-toggle::after {
  float: none;
}

@media (min-width: 992px) {
  .navbar-nav .dropdown-toggle::after {
    clear: both;
    float: none;
  }
}

@media (min-width: 992px) {
  .sidebar {
    flex: 0 0 15%;
  }
}

@media (min-width: 1200px) {
  .sidebar {
    flex: 0 0 15% !important;
  }
}

/* The sidebar is pinned to 15% above, but the markup gives the content column
   col-lg-10 (83.333%). Those do not add up, leaving a 1.667% strip of unpainted
   page down the right on every screen wide enough to trigger it. Let the content
   take whatever the sidebar leaves instead of a fixed share, so the two cannot
   drift apart again.

   The basis is 0 rather than auto: the row wraps, and a flex item is placed on a
   line using its basis, before any shrinking happens. With an auto basis a wide
   child - a subpanel table with many columns, say - sizes the column by its
   content, which then does not fit beside the sidebar and wraps below it. A zero
   basis makes the column take the free space that is left instead.

   min-width is reset for the same reason: a flex item defaults to min-width:auto,
   which lets that wide child push the column past its share. */
@media (min-width: 992px) {
  main[role="main"] > .container-fluid > .row > .content {
    flex: 1 1 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
  }
}

main[role="main"] {
  width: 100%;
  max-width: 100%;
}

main[role="main"] > .container-fluid,
footer .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-content {
  padding-left: 0;
  padding-right: 0;
}

.region-sidebar-first a {
    color: #fff;
    padding: 10px;
    font-size: 0.9rem;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 5px;
}

.region-sidebar-first a.is-active {
    background-color: rgba(255, 255, 255, 0.1); 
    color: var(--secondary-color);
}

.region-sidebar-first a:hover {
    background-color: var(--menu-hover-bg);
    color: #fff;
}

.region-nav-additional a {
    color: #333;
}




.region-content {
    padding: 20px;
}

.navbar {

    background: #fff;
    ;
    /*background: linear-gradient(0deg, rgba(223,223,223,1) 0%, rgba(255,255,255,1) 86%, rgba(255,255,255,1) 100%);*/
    padding: 0px;
    box-shadow: -5px -4px 14px 0px rgba(58, 58, 58, 0.09);
    z-index: 100;
}

.region-sidebar-first ul li {
    font-weight: 500;
    height: 50px;
}

.region-sidebar-first ul.navbar-nav li:first-child {

}

h2,
.h2 {
    font-size: 1.2rem;
}

a.scrmportal-jslink,
a.portal-column-header {}

.navbar-branding {
    /*border-right:#ccc 1px solid;*/
    padding: 5px;
    text-align: center;
    /*background: linear-gradient(0deg , rgb(167 161 0) 0%, rgb(234 213 0) 63%, rgb(255 233 0) 100%);*/
    height: 65px;
    background-color: #072b44;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-branding > *,
.navbar-branding .block {
    width: 100%;
}

/* Full width rather than shrink-to-fit, so the logo's max-width resolves against the
   branding area instead of the image itself, which squashed every logo to 80%. */
.navbar-branding .navbar-brand,
.region-nav-branding .navbar-brand {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

.navbar-branding .site-logo {
    width: 100%;
}

/* Logos come in any shape, so bound both dimensions and let the image keep its own
   aspect ratio; fixing one dimension while capping the other distorts it. */
.navbar-branding .navbar-brand img,
.region-nav-branding .navbar-brand img,
.region-nav-branding img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    margin: 0 auto;
}

.region-nav-branding {}

.navbar-brand {

    display: inline-block !important;
}

#block-accountmanagerblock {
    padding: 20px;
    color: #a0a0a0;
    border-bottom: #2b2b2b 1px solid;
    font-size: 0.8rem;
}

.region-nav-left {
    padding-left: 20px;
    padding-top: 17px;
    overflow: hidden;
    text-wrap: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.region-nav-left-two {
    padding-top: 17px;
}

.region-nav-left h1 {
    font-size: 1.71429em;
    font-style: inherit;
    color: rgb(23, 43, 77);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 32px;
    margin-top: 0px;
    outline: none;
}

.sidebar {
    background-color: #024474;
}

.region-nav-additional {
    background-color: inherit;
    margin-top: 40px;
    color: #fff;

    margin-left: auto;
    width: 100%;
    margin-right: auto;
}

.region-nav-additional li a:link,
.region-nav-additional li a:visited {
    color: #fff;
}

.region-sidebar-first {
    color: #a0a0a0;
}

.region-sidebar-first h2 {
    font-size: 1.1rem;
    color: #a0a0a0;
    font-weight: bold;
}

.scrmportal-recordview {
    background-color: #fff;
}

.scrmportal-record-header {
    border-bottom: #ccc 1px solid;
    background-color: #eee;
    margin-bottom: 10px;
    padding-top: 10px;
}

.scrmportal-table th {
    background-color: transparent !important;
    border-bottom: 0px !important;
}

.btn {
    font-size: 0.8rem;
}

.scrmportal-dashlet .scrmportal-table {
    border: #e6e6e6 1px solid !important;
    background-color: #fff;
}

.block-page-title-block {
    float: left;
    margin-right: 30px;
    text-align: left !important;
}

.block-block-scrmportal-moduletools {
    top: 2px;
    position: relative;
    margin-right: 15px;
}

.block-block-scrmportal-moduletools .form-group {
    margin-bottom: 0px !important;
}

.block-block-scrmportal-moduletools .btn {
    font-size: 100%;
    font-weight: bold;
}


.menu--account ul.nav {
    padding-top:20px;
    display: block;
    border-top: rgba(255, 255, 255, 0.05) 1px solid;
}

.menu--account ul.nav li {
    height: 40px;
}

.scrmportal-createview,
.scrmportal-editview {
    background-color: #fff;
    border: #ccc 1px solid;
}

.scrmportal-createview h5 {
    font-size: 1.0rem;
    color: #333;
    font-weight: bold;
}

#portal-listview .table {
    background-color: #fff;
    border: #ececec 1px solid;
}

.advanced-search {
    font-size: 0.8rem;
    margin-bottom: 10px;
    margin-left: 2px;
}

.block-block-scrmportal-moduletools .form-group {
    display: inline-block;
}

.block-block-scrmportal-moduletools .scrmportal-module-search {
    position: relative;
    left: 6%;
}

.block-block-scrmportal-moduletools .form-control {
    border: #e8e8e8 1px solid;
}

.portal-subpanel .scrmportal-table {
    background-color: #fff;
    border: #ececec 1px solid;
}

.block-block-scrmportal-recordlist {
    width: 100%
}

.scrmportal-dashlet {
    margin: 10px;
    max-width: 100%;
    min-height: 100% !important;
    overflow: hidden !important;
    /* overflow: scroll; */
}

.sidebar.collapse.show,
.sidebar.collapse.show+.col {
    transition: .18s linear;
    left: 0;
}

.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing+.col {
    transition: .18s linear;
    z-index: 1050;
    left: -25%;
    height: auto !important;
}

.sidebar .menu-item-icon {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  margin-right: 0.25em;
}

.sidebar a {
  color: #fff;
}

.sidebar .region-content a {
  color: var(--link-color, #0056b3);
}

.sidebar .region-content a:hover {
  color: #003167;
}

.scrmportal-dashlet .table {
    min-height: 100px;
}

td iframe {
    max-width: 170px;
    max-height: 55px;
}

.subpanel-header {
    margin-bottom: 10px;
    padding-right: 5px;
}

.scrmportal-table thead {
    background-color: #ddd;
}

.modal-header {
    padding: 10px;
    padding-left: 17px;
    background-color: var(--primary-color);
    color: #fff;
}

.modal-header h5 {
    width: 100%;
    font-size:12pt;
}

.modal-errors {
    color:rgb(207, 0, 0);
    background-color:pink;
    padding:10px;
    border:rgb(200, 93, 93) 1px solid;
    display:none;
    border-radius:4px;
    width:100%;
}

.modal-body {
    text-align:left;
}

td.row-actions, th.row-actions {
    max-width: 75px;
}

/* Row actions are always a single row of grouped buttons. A cap here cannot work:
   three buttons with labels need far more than 105px, and squeezing the group
   made each button shrink below its content so its .btn-label dropped under the
   icon. Size the column to exactly the group instead - width:1% is the
   shrink-to-fit idiom for an auto-layout table, so the column takes what the
   buttons need and every remaining pixel goes to the data columns. */
td.row-actions.with-labels, th.row-actions.with-labels {
    width: 1%;
    max-width: none;
    white-space: nowrap;
}

td.row-actions .btn-group, th.row-actions .btn-group {
    flex-wrap: nowrap;
}

td.row-actions .btn-group > .btn, th.row-actions .btn-group > .btn {
    flex: 0 0 auto;
}

.nav-pills li {
    margin-bottom: 3px;
}

.scrmportal-title {
    padding-top: 10px;
    background-color: #eee;
    border-bottom: #ccc 1px solid;
}

.scrmportal-editview {
    padding-top: 0px;
}

.modal-body .scrmportal-title {
    display: block;
}

.scrmportal-recordview {
    padding-top: 0px;
}

.scrm-input-group .col-12 {
    border-bottom: #ccc 1px dotted;
    padding: 5px;
}


.simplelogin-logo {
    padding: 15px;
}

.simplelogin-logo h1 {
    color:#fff!important;
    display:none;
}

/* The portal renders its own notifications into a div carrying both Bootstrap's
   .alert and Drupal's .messages classes. Bootstrap 5.3 styles .alert entirely
   through --bs-alert-* variables that only its own .alert-* variants set, so a
   bare .alert is transparent with 1rem of padding all round - and because it
   loads after Drupal's message styles it wins on both counts. The status icon
   then sits under the text, and the message has no background to separate it
   from the page.

   Map Drupal's message classes onto the Bootstrap variables so the box model
   stays Bootstrap's and the colours stay Drupal's. Colours are taken from
   bootstrap5/css/components/messages.css so the two agree. */
.alert.messages {
  padding-left: 35px; /* LTR: room for the status icon */
}

.alert.messages--status {
  --bs-alert-bg: #f3faef;
  --bs-alert-border-color: #c9e1bd;
  --bs-alert-color: #325e1c;
}

.alert.messages--warning {
  --bs-alert-bg: #fdf8ed;
  --bs-alert-border-color: #f4daa6;
  --bs-alert-color: #734c00;
}

.alert.messages--error {
  --bs-alert-bg: #fcf4f2;
  --bs-alert-border-color: #f9c9bf;
  --bs-alert-color: #a51b00;
}

/* Relate fields are select2 widgets. select2 draws its own box (grey #aaa border,
   28px tall, small text) and copies the 250px inline width from scrmportal's
   relate template, so in search and edit forms it looks nothing like the
   .form-control inputs around it. Give it the same size, border, radius, padding
   and text as .form-control, and let it fill its column like they do.

   `select + .select2-container` is the widget in the form; the open list is a
   separate .select2-container appended to <body>, which this leaves alone. */
select + .select2-container {
    width: 100% !important;
}

.input-group > select + .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

/* scrmportal.css sets height:100% and squares the right-hand corners with
   !important, for the relate field beside its "create" button. That hits every
   relate field, so override it here and square the corners only where something
   follows the widget in an input-group. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    font-size: 1rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius) !important;
}

.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2)) !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--bs-body-color);
}

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

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.75rem;
    height: 100%;
}

.input-group > .select2-container--default:not(:last-child) .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* While the list is open select2 squares the corners where the box meets it; the
   !important radius above would otherwise leave a rounded notch at the join.
   Square them again on the side the list opens, and draw the list in the same
   border colour so the two read as one control. */
.select2-container--default.select2-container--open.select2-container--below .select2-selection {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.select2-container--default .select2-dropdown {
    border-color: var(--bs-border-color);
}