/* =========================================================
   Imports
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');


/* =========================================================
   Base / Resets
   ========================================================= */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

html, body {
  font-family: "IBM Plex Serif", serif;
}

/* put this inside the CSS your GetThemeCSSAsync returns */
:root {
  --bg-img: url('/images/backdrop/default.png');
}

/* tablets and down */
/* @media (max-width: 991.98px) { 
  :root { --bg-img: url('/images/backdrop/bg-tablet.png'); }
} */

/* phones */
@media (max-width: 767.98px) { 
  :root { --bg-img: url('/images/backdrop/mb-default'); }
}

body {
  margin-bottom: 60px;
  width: 100%;
  height: 100%;
  background-color: #000; 
  background-image: var(--bg-img);  /*url(/images/backdrop/default.png);*/
    
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;           /* ensures full image fits inside screen */
  background-attachment: fixed;       /* optional: keeps it still when scrolling */
}

.body-background {
    /* Just the background image */
        background-image: url(/images/backdrop/default-mb.png) !important;
}


@media (max-width: 768px) {
    body {
        margin-bottom: 60px;
        width: 100%;
        height: 100%;

        /* Simple solid base color behind image (optional) */
        background-color: #000000;

        /* Just the background image */
        background-image: url(/images/backdrop/default-mb.png) !important;

        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;   /* fits the image entirely */
        background-attachment: fixed; /* keeps image static when scrolling */
    }
}




a { color: #0366d6; }                 /* contrast on white */
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

small,
.table-responsive,
.card-body,
.btn-primary,
.btn-secondary,
.btn-icon,
.badge-pill-shared-green,
.badge-pill-shared-grey,
.badge-pill-shared-blue,
.badge-pill-shared-red {
  font-family: "IBM Plex Sans", sans-serif;
}

h3 { font-size: 24px; }


/* =========================================================
   Layout helpers
   ========================================================= */
.main-container {
  min-height: 500px !important;
  padding-top: 15px;
  padding-bottom: 80px;
}

.obd-pointer:hover { cursor: pointer; }
.obd-not-allowed:hover { cursor: not-allowed; }

.FormFieldErrorMsg,
.clsDivError { color: red; font-size: small; }


/* =========================================================
   Panels / Cards / Boxes
   ========================================================= */

.inner-panel {
  background-color: rgba(254,254,254,0.8) !important;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid gray;
}

.box-shadow,
.card {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5) !important;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .box-shadow {
    min-height: 140px;
  }
}


.card-header {
  font-family: "IBM Plex Serif", serif;
  border-bottom: 1px solid rgba(0,0,0,.25);
}

/* Themed cards */
.secuura-card,
.secuura-card .secuura-card-body,
.secuura-card .secuura-card-header {
  background-color: rgba(15,27,51,0.7) !important;
  color: white;
  border: none !important;
}
.secuura-card .secuura-card-header { color: yellow; }
.secuura-card .secuura-card-body {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.secuura-card .secuura-card-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.secuura_about_left {
    width: 30%;
}

.secuura_about_right {
    width: 70%;
}

@media (max-width: 768px) {
    .secuura_about_left {
        width: 0%;
    }

    .secuura_about_right {
        width: 100%;
    }
}



/* Login card */
.login-card,
.login-card .login-card-body,
.login-card .login-card-header {
  background-color: rgba(254,254,254,0.8) !important;
  color: #0F1B33;
  border: none !important;
  border-radius: 8px;
}
.login-card .login-card-body {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.login-card .login-card-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


/* =========================================================
   Footer
   ========================================================= */
.footerSummary {
  background-color: rgba(254,254,254,0.8);
  padding: 20px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.footerSummary h4 { color: #000; }
.footerSummary ul { list-style: none; margin: 0; padding: 0; }
.footerSummary li {
  position: relative;
  padding-left: 14px;
  margin-bottom: .5em;
}
.footerSummary li::before {
  position: absolute; top: 9px; left: 0;
  border-width: 3px; border-style: solid; border-radius: 3px;
  content: ""; color: #0063af;
}

.footer-copyright {
  font-size: 10px;
  background-color: rgba(254,254,254,0.8);
  color: #000;
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.footer-copyright a {
  color: #000;
  background: transparent !important;
  padding: 6px;
  margin: 0;
  text-decoration: none;
  transition: opacity .3s ease-in-out;
  text-align: left !important;
}
.footer-copyright a:hover { opacity: .7; }


/* =========================================================
   Navbar
   ========================================================= */
.navbar {
  border: none;
  background-color: rgba(254,254,254,0.8) !important;
  backdrop-filter: blur(6px);
  font-weight: 600;
  position: relative;
  z-index: 1050;
  overflow: visible;
}

.navbar-logo {
  background-image: url(../images/logos/ssd-banner-logo.svg);
  background-size: cover;
  height: 60px;
  width: 200px;
}

.nav-item { display: inline-block !important; padding-right: 12px; }

.nav-link {
  color: rgba(0,0,0,0.6) !important;
  opacity: .7;
}
.nav-link:hover,
.nav-item:hover > .nav-link {
  color: #0F1B33 !important;
  opacity: .5;
}
.nav-item.active > .nav-link {
  color: #0F1B33 !important;
  opacity: 1;
}

/* Secondary nav variants */
.nav-link2 {
  color: rgba(0,0,0,.5) !important;
  font-weight: 600;
  display: block;
  /* padding: .5rem 1rem; */
  /* padding: 8px 8px 8px 8px; */
  text-decoration: none !important;
}
.nav-item2 {
  color: rgba(0,0,0,.5) !important;
  font-weight: 600;
  display: inline-block !important;
  /* padding-right: 12px; */
  align-items: center;
  text-decoration: none !important;
}
.nav-item2:hover { opacity: 1; transition: all .4s ease-in-out; visibility: inherit !important; }
.nav-item2.active > .nav-link2 { color: #0F1B33 !important; visibility: inherit !important; }
.nav-link2:hover { opacity: 1 !important; color: #0F1B33 !important; }

/* Fade behaviour */
.navbar .nav-link { opacity: .9; transition: opacity .2s ease-in-out; }
.navbar .nav-link:hover,
.navbar .nav-item:hover > .nav-link { opacity: .35 !important; }
.navbar .nav-item.active > .nav-link { opacity: .9; }
.navbar .nav-item.active > .nav-link:hover { opacity: .35 !important; }
.navbar .show .nav-link:hover { opacity: .35 !important; }

/* Focus cleanup */
.nav-link2:focus,
.nav-link2:active,
.nav-link2:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Prevent Bootstrap’s click/focus visual toggle for the secondary nav variant */
.nav-item2 .nav-link2,
.nav-item2.dropdown .nav-link2 { pointer-events: none; }
.nav-item2.dropdown:hover > .nav-link2 { pointer-events: auto; }


/* =========================================================
   Dropdowns
   ========================================================= */
/* Show on hover (desktop) */
.dropdown:hover .dropdown-menu,
.dropdown-menu:hover { display: block; }

/* Container setup */
.navbar .dropdown { position: relative; }

/* Menu box */
.dropdown-menu {
  border-top: 3px solid #0F1B33;
  opacity: 1 !important;
  background-color: #fff;
  width: 240px !important;
  transition: none !important;
  margin-top: 0;                 /* remove gap */
  z-index: 1060 !important;      /* above cards, below modals */
}


/* Default (desktop + iPad)  */
/* Ensure it overlays correctly under navbar; keep absolute to avoid push */
.navbar .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  overflow: visible !important;
}

/* Mobile fix: inside collapsed hamburger menu, make dropdown full-width and static */
@media (max-width: 768px) {
  .navbar-collapse.show .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0;
    border-top: none;
    box-shadow: none;
    background-color: rgba(254,254,254,0.95);
  }
  .navbar-collapse.show .dropdown-item {
    padding-left: 1.5rem; /* slight indent for clarity */
  }
}

/* Hover bridge to prevent flicker when moving from toggle to menu */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
}

/* Dropdown items */
.dropdown-menu .dropdown-item {
  font-family: "IBM Plex Serif", serif !important;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 18px;
  color: rgba(0,0,0,0.7);
  background-color: rgba(254,254,254,0.9);
  transition: background-color .2s ease, color .2s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(15,27,51,0.1);
  color: #0F1B33 !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: #0F1B33 !important;
  color: #fff !important;
}


/* =========================================================
   Tables
   ========================================================= */
.table-fixed { table-layout: fixed !important; width: 100%; }
.table-lesshzpad td,
.table-lesshzpad th { padding: .3rem .5rem; }
.table-noheadrow-topborder th { border: none; }
.table td .file-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   Buttons
   ========================================================= */
.btn-primary {
  background-color: #0F1B33 !important;
  border-color: #0F1B33 !important;
}
.btn-primary:hover {
  background-color: #162850 !important;
  border-color: #162850 !important;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.btn-icon img {
  width: 16px; height: 16px; margin-right: 6px; vertical-align: middle;
  filter: brightness(0) invert(1); /* white inside dark buttons */
}
.btn-secondary.btn-icon img { filter: none; }  /* dark icons on light buttons */
.btn-icon i { font-size: 16px; margin-right: 6px; vertical-align: middle; color: inherit; }


/* =========================================================
   Badges
   ========================================================= */
.badge-pill-shared-green,
.badge-pill-shared-grey,
.badge-pill-shared-blue,
.badge-pill-shared-red {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .2px;
}
.badge-pill-shared-green { background: #29a34a; }
.badge-pill-shared-grey  { background: grey; }
.badge-pill-shared-blue  { background: blue; }
.badge-pill-shared-red   { background: red; }


/* =========================================================
   Forms
   ========================================================= */
select[multiple] option { padding: 6px 10px; margin: 2px 0; }
select[multiple] {
  font-size: .95rem;
  line-height: 1.6;
  padding: 6px 10px;
  margin: 2px 0;
}


/* =========================================================
   Assessment report blocks
   ========================================================= */
.assessment-report-critical    { padding: 15px; background-color: #ff695a; border: 1px solid #ffb020; border-radius: 8px; }
.assessment-report-warning     { padding: 15px; background-color: #ffb55a; border: 1px solid #ffb020; border-radius: 8px; }
.assessment-report-information { padding: 15px; background-color: #99e6aa; border: 1px solid #d8d5cf; border-radius: 8px; }
.assessment-report-response    { padding: 15px; background-color: #e6e6e6; border: 1px solid #d8d5cf; border-radius: 8px; }
.assessment-report-cell-critical    { background-color: #ff695a; }
.assessment-report-cell-warning     { background-color: #ffb55a; }
.assessment-report-cell-information { background-color: #99e6aa; }


/* =========================================================
   Utilities / Misc
   ========================================================= */
.purple-anchor { color: #0063af; }
.white-anchor  { color: #fff; }
.black-anchor  { color: #000; }
.anchor-uline  { text-decoration: underline; }

.bg-blue { background-color: #0063af !important; }

.import-licence-summary td:nth-child(2) {
  width: 50px;
  text-align: right;
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}