/* Import the Red Hat Mono font */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap');

/* Apply the font globally */
body, html, * {
  font-family: 'Red Hat Mono', monospace !important;
}

body {
  background-color: hsl(0, 46%, 17%);  /* hsl(321, 100%, 5%); */
}

/* give content a slightly transparent backdrop for readability */
#app-list, #login, #main-content {
  background-color: rgba(255, 255, 255, 0.3); /* light translucent background */
  border-radius: 10px;
  padding: 1rem;
}

/* Make app tiles semi-transparent with rounded corners and a subtle blur */
.app-tile {
  background-color: rgba(94, 247, 255, 0.4)  !important;
  border-radius: 3px !important;
  backdrop-filter: blur(3px); /* subtle background blur */
  -webkit-backdrop-filter: blur(3px); /* Safari support */
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 1) !important;
  border: 1px solid #5ef7ff !important;
}

/* On hover make them slightly brighter and scale up a bit */
.app-tile:hover {
  background-color: rgba(238, 87, 130, 0.6) !important;
  transform: scale(1.05);
}

/* Make text and logos visible with a glow */
.app-tile .app-label a {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),  /* dark shadow for contrast */
    0 0 4px rgba(94, 247, 255, 0.8);  /* glow */
}
/* Force app labels to be white overriding anything else */
.app-label,
.app-label a,
.app-label * {
  color: rgba(94, 247, 255) !important; /* Force text to white */
}


/* body {
  background-color: rgba(86, 18, 19);
} */

/* Desktop: big and centered */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(4);
  transform-origin: center;
  z-index: 10;
}

@media (max-width: 768px) {
  .logo {
    top: 35% !important;  /* Move it higher */
    transform: translate(-50%, -30%) scale(4) !important;
  }
}

@media (max-width: 500px) {
  .logo {
    top: 35% !important; 
    transform: translate(-50%, -25%) scale(2.6) !important;
  }
}




#main-footer {
  display: none !important;
}

/* Make sure the header has relative positioning so that the absolute positioning of the logo works */
header {
  position: relative;
}
  
/* Make all text inside the profile container a certain colour, except logout */
.profile {
  color: rgba(94, 247, 255, 1);
}

.profile * {
  color: rgba(94, 247, 255, 1) !important;
}

/* Don't change the logout text color */
.profile a[href*="logout"],
.profile a[href*="Logout"],
.profile a.logout {
  color: inherit !important;
}

#main-target {
  display: none !important;
}

/* Apply the app-tile look to all card sections like Change Password */
.card.card-bordered {
  background-color: rgba(94, 247, 255, 0.3) !important; /* translucent pink */
  border-radius: 3px !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
  border: none !important;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}

/* hover effect */
.card.card-bordered:hover {
  background-color: rgba(238, 87, 130, 0.6) !important;
}

/* Header area matches the blur and glow */
.card-header {
  background-color: rgba(94, 247, 255, 0.4) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Make all text inside consistent with my theme */
.card h2,
.card label span,
.card small,
.card legend,
.card span {
  color: rgba(94, 247, 255, 1) !important; /* bright cyan */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),  /* dark shadow for contrast */
    0 0 4px rgba(94, 247, 255, 0.8);  /* glow */
}

/* Inputs styled to match blurred aesthetic */
.card input.input-bordered {
  background-color: rgba(255, 243, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #000 !important;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  transition: all 0.3s ease;
}

.card input.input-bordered:focus {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(94, 247, 255, 0.8) !important;
  outline: none;
  box-shadow: 0 0 8px rgba(94, 247, 255, 0.5);
}


/* Style the Save button to fit the overall theme */
.card .btn.btn-success {
  background-color: rgba(238, 87, 130, 0.3) !important;
  border-radius: 3px !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: none !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  color: rgba(94, 247, 255, 1) !important;
  transition: all 0.3s ease;
}

.card .btn.btn-success:hover {
  background-color: rgba(238, 87, 130, 0.5) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Make all .label elements cyan */
.label {
  color: rgba(94, 247, 255, 1) !important;
}
button.btn.btn-primary {
  background-color: rgba(238, 87, 130, 0.4) !important; /* translucent pink */
  border: none !important;
  border-radius: 5px !important;
  color: #00ff9f !important; /* neon green text */
  font-weight: 600 !important;
  text-shadow: 0 0 10px rgba(0, 255, 159, 1) !important,
               0 0 20px rgba(0, 255, 159, 0.8) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important,
              0 0 10px rgba(238, 87, 130, 0.4) !important;
  transition: all 0.3s ease !important;
}

button.btn.btn-primary:hover {
  background-color: rgba(238, 87, 130, 0.6) !important;
  box-shadow: 0 0 20px rgba(238, 87, 130, 0.8) !important,
              0 0 25px rgba(0, 255, 159, 0.6) !important;
  transform: translateY(-2px) !important;
}

/* Hide the login page image */
main.w-50 img[src="https://cloud.tekhne.dev/yunohost/sso/customassets/4a6e193b1b1e51c364134b8edf9a9d1c2e972064ac3b2395d32141135f2fa5d6.png"] {
  display: none !important;
}

/* Target the form on the login page */
main.w-50 form {
  background-color: rgba(238, 87, 130, 0.3) !important; /* semi-transparent pink */
  border-radius: 3px !important;
  backdrop-filter: blur(3px); /* background blur */
  -webkit-backdrop-filter: blur(3px); /* Safari support */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
  padding: 1rem; /* padding */
  position: relative;
  z-index: 5;
  transition: all 0.3s ease;
}

/* hover effect on the login form */
main.w-50 form:hover {
  background-color: rgba(238, 87, 130, 0.5) !important; /* slightly stronger blur on hover */
  transform: scale(1.02); /* Slight zoom effect on hover */
}

/* Add focus effect for inputs inside the login form */
main.w-50 form input:focus {
  border-bottom: 2px solid rgba(94, 247, 255, 1) !important; /* bright cyan on focus */
  outline: none;
  background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  /* Create a fixed container at the bottom at full width */
  body::before {
    content: "";
    display: none; /* Hide any previous background effects */
  }

  /* Container for profile text */
  .profile {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    max-width: 60%; /* restrict width */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
    line-height: 40px;
  }