/* ========================
   GLOBAL / BASE
   cloud_style.css
======================== */

html, body {
  margin: 0;
  font-family: Poppins, Arial, sans-serif;
}

/* ========================
   FONTS
======================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://dabce.se/fonts/poppins/poppins-v23-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('https://dabce.se/fonts/poppins/poppins-v23-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('https://dabce.se/fonts/poppins/poppins-v23-latin-700.woff2') format('woff2');
}

/* ========================
   BUTTONS
======================== */
.btn_url {
  display: inline-block;
  padding: 8px 35px;
  background-color: transparent;
  color: #14d100;
  transition: all 0.3s;
  border: 1px solid #14d100;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 45px;
}

.btn_url:hover {
  color: #DDDDDD;
  background-color: #14d100;
}

.news_btn_url {
  display: inline-block;
  padding: 8px 35px;
  background-color: #00A67C;
  color: #ffffff;
  transition: all 0.3s;
  border: 1px solid transparent;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 45px;
}

.news_btn_url:hover {
  background-color: transparent;
  border-color: #00A67C;
  color: #00A67C;
}


.btn_url_yellow {
  display: inline-block;
  padding: 8px 35px;
  background-color: transparent;
  color: #FFFF00;
  transition: all 0.3s;
  border: 1px solid #FFFF00;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 45px;
}

.btn_url_yellow:hover {
  color: #000000;
  background-color: #FFFF00;
}


.btn_url_blue {
  display: inline-block;
  padding: 8px 35px;
  background-color: transparent;
  color: #2f80ff;
  transition: all 0.3s;
  border: 1px solid #2f80ff;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 45px;
}

.btn_url_blue:hover {
  color: #000000;
  background-color: #2f80ff;
}

/* ========================
   LINKS
======================== */
a.shiny-link {
  color: #c6c600;
  text-decoration: none;
  transition: color 0.3s;
}

a.shiny-link:hover {
  color: #FFFF00;
}

/* ========================
   HEADER / HERO
======================== */

.top_area {
  background-image: url(https://dabce.se/images/DABCE_bg.jpg);
  
background-size: 120%;
  background-position: center top;

}

/* Login uses full height */
.top_area.fullscreen {
  height: 100vh;
}


/* Dashboard uses compact */
.top_area.compact {
  height: 80px;
  position: relative;
}

.header_section .container-fluid {
  padding-right: 25px;
  padding-left: 25px;
}

.custom_nav-container {
  z-index: 99999;
  padding: 15px 0;
}

.custom_nav-container .navbar-toggler {
  outline: none;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img {
  width: 20px;
  margin-right: 5px;
}

.navbar-brand span {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}

/* ========================
   GENERAL
======================== */

.slider_section {
  padding: 50px;
}

@media (max-width: 768px) {
  .slider_section {
    padding: 5px !important;
  }
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

.btn,
.btn:focus {
  outline: none !important;
  box-shadow: none;
}

/* ========================
 ROLE BADGES
======================== */

.role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.role-badge {
  background-color: #2ecc71;
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  display: inline-block;
}




/* =========================================
   TOP AREA OVERLAY (fix dark coverage)
========================================= */


.top_area.compact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* make sure header content sits above overlay */
.top_area.compact > * {
  position: relative;
  z-index: 2;
}



/* =========================================
   LAYOUT FIX (sticky footer)
========================================= */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

section.container-fluid.py-4 {
  flex: 1;
}


/* Prevent margin collapse below header */
.top_area.compact + section.container-fluid {
  display: flow-root;
}


/* =========================================
   DASHBOARD CARDS (DABCE Cloud)
========================================= */

.dabce-card {
  background: #fff;
  border: 2px solid #000;
  padding: 24px;
  transition: all 0.25s ease;
}

.dabce-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}

/* Links inside cards */
.dabce-card a {
  color: #000;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.dabce-card a:hover {
  background-color: #fff6a3;
}

/* =========================================
   EXPAND / COLLAPSE (matches your JS exactly)
========================================= */

.expand-toggle {
  cursor: pointer;
  font-weight: 600;
  font-size: small;
  color: #444444;
  user-select: none;
}

.expand-toggle:hover {
  background-color: #fff6a3;
}

/* CLOSED */
.expand-content {
  display: none;
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* OPEN */
.expand-content.show {
  display: block;
  opacity: 1;
}