/*Style code for Alaska PRAMS R Shiny application */

/* Custom styling for Shiny notifications */
.shiny-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Modern way to perfectly center */
  width: 350px; /* A more reasonable width */
  max-width: 90%; /* Prevents overflow on very small screens */
  padding: 15px 20px; /* Controls the box size based on content */
  border-radius: 8px; /* Optional: adds rounded corners */
}

/*add underline and color for under hyperlinks*/            
a {
   text-decoration: underline;
   color: blue;
   }
a:hover, a:focus, a:active {
   color: #00008B;
   }

/* --- NAVBAR STYLING --- */

/* Default navbar background (warmer, more color than gray) */
.navbar-default {
  background-color: #d0e7e5 !important; /* soft blue-green */
  border: none;
  font-weight: bold;
  font-size: 15px; 
}

/* Navbar brand / header text */
.navbar-default .navbar-brand {
  color: #000 !important; /* black text for contrast */
  font-weight: bold;
  font-size: 15px; 
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #003E46 !important; /* dark teal on hover */
}

/* Navbar text links */
.navbar-default .navbar-nav > li > a {
  text-decoration: none;
  color: #000 !important; /* black text default */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Active tab (darkest) */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: #003E46 !important; /* deep teal */
  color: #fff !important; /* white text */
}

/* Hover over non-active tabs (medium-dark) */
.navbar-default .navbar-nav > li > a:hover {
  background-color: #005962 !important; /* slightly lighter teal */
  color: #fff !important; /* white text */
}

/* Focus state for accessibility */
.navbar-default .navbar-nav > li > a:focus {
  outline: 2px solid #ffbf47; /* gold focus ring */
  outline-offset: 2px;
}

/* --- DROPDOWN MENU STYLING (New Section) --- */

/* 1. Style the Dropdown Menu Container (The Box that opens) */
.navbar-default .dropdown-menu {
  background-color: #e7f2f1 !important; /* Matches main navbar background */
  border: 1px solid #003E46; /* A subtle border using the deep teal */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: A soft shadow */
}

/* 2. Style the individual Dropdown Items (Admin Reports, Data Requests, etc.) */
.navbar-default .dropdown-menu > li > a {
  color: #000 !important; /* Default black text */
  font-weight: bold;
  padding: 8px 15px; /* Adjust padding for better spacing */
}

/* 3. Style the Dropdown Items on Hover */
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  background-color: #005962 !important; /* Matches the main non-active tab hover color */
  color: #fff !important; /* White text on hover */
}

/* 4. Style the Dropdown Separator (The '---' line) */
.navbar-default .dropdown-menu .divider {
  background-color: #003E46; /* Matches the deep teal active color */
  height: 1px; /* Make the separator a thin line */
  margin: 5px 0;
}




/*
 * 1. Position the container absolutely within the navbar.
 * (This remains the same for placement and alignment.)
 */
#logoff-container {
  position: absolute;
  right: 15px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

/* * 2. Style the actual link (a tag) to look like a standard tab.
 */
#logoff-container a {
  /* --- MODIFICATION 1: Set color to black --- */
  color: #000000 !important;
  /* ------------------------------------------ */

  background: none !important;
  border: none !important;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 15px 0;
}

/* * 3. Hide the icon element (the <i> tag)
 */
#logoff-container a i {
  /* --- MODIFICATION 2: Hide the icon element --- */
  display: none;
  /* --------------------------------------------- */
}

/* 4. Add a hover style to mimic a tab (optional, but good practice) */
#logoff-container a:hover {
  /* Brighten the color slightly on hover, or use your theme's hover color */
  color: #333333 !important;
}

/* --- TABSET STYLING --- */
.nav-tabs > li > a {
  text-decoration: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #003E46;
  font-weight: bold;
}

.nav-tabs > li > a:hover {
  color: #003E46;
}



/*remove underline from link for images: add tag to html class*/
.nl {
    text-decoration: none !important;
    }
                 
/*selectiziseinput group title ada compliant*/
.optgroup-header {
    font-weight: bold;
    color: #003E46 !important;
    }
                 
/*download data button*/
.btn {
     font-size: 13px;
     }
.btn, .a {
    text-decoration: none !important;
     }
                 
/*set heading sizes*/
    h1 {font-size: 40px; line-height: 100%}
    h2 {font-size: 30px; line-height: 100%}
    h3 {font-size: 25px; line-height: 100%}
  /*h4 {font-size: 18px; line-height: 100%}*/

/*set size for paragraphs*/             
p {
  font-size: 15px;   
  line-height: 1.5;  
  color: #000;       
}              
                 
/*Set information button color and outline*/
.btn.btn-circle-xs {
   background-color: transparent !important;
   border: none !important;
   }
                 
/*Make default button ADA compliant*/
.btn.btn-primary {
   background-color: #003E46;
   }
.btn.btn-primary:hover {
   background-color: #002532;
   }
                 
/*Make data dictionary button ADA compliant*/
   #DtBook {color: #003E46;}
            
.form-control {
    color: black;
    }

/*Custom button for aboutIndicator*/
  .btn-custom3 {background-color: #5A5A5A !important; color: white !important;}
  .btn-custom3:hover {background-color: #363636 !important; color: white;}
  .btn-custom3:active {background-color: #363636 !important; color: white;}


 /* Hero section */
   .hero {
          background-color: #d0e7e5;
          padding: 3rem 1rem;
          text-align: center;
          border-radius: 0 0 12px 12px;
        }
    .hero h1 {
           font-size: 40px; 
          margin-bottom: 0.5rem;
          font-weight: bold;
          color: #003E46;
        }
    .hero h2 {
          font-size: 30px; 
        }
    .hero h3 {
          font-size: 25px; 
        }
    .hero p {
          font-size: 15px;
          color: #333;
          max-width: 700px;
          margin: 0 auto;
        }
        
/* Feature grid */
    .features {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 1.5rem;
          margin-top: 2rem;
        }
    .feature-card {
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-radius: 10px;
          padding: 1.5rem;
          flex: 1 1 250px;
          max-width: 300px;
          text-align: center;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .feature-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .feature-card h3 {
          color: #003E46;
          font-size: 25px;
          margin-top: 0.75rem;
        }
        .feature-card p {
          color: #555;
          font-size: 15px;
        }

        /* Call-to-action */
        .cta-section {
          text-align: center;
          margin: 3rem 0;
        }
        .cta-button {
          background-color: #003E46;
          color: #fff;
          padding: 0.75rem 2rem;
          font-size: 15px;
          border-radius: 8px;
          text-decoration: none;
          transition: background-color 0.2s ease;
        }
        .cta-button:hover {
          background-color: #005962;
          color: #fff;
        }

/* Add spacing above the footer for all tabs */
.tab-content {
    padding-bottom: 30px; /* adjust as needed */
}

/* Style user info and logout to match navbar items */
#logoff-container {
  position: absolute;
  right: 15px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
}

.navbar-user-info {
  color: #000 !important; /* Match navbar tab text color */
  font-size: 14px;
  font-weight: bold; /* Match navbar font weight */
  padding: 0;
  margin: 0;
}

.navbar-user-info i {
  margin-right: 5px;
}

#logoff-container a {
  color: #000 !important; /* Match navbar tab text color */
  text-decoration: none;
  font-size: 14px;
  font-weight: bold; /* Match navbar font weight */
  padding: 10px 15px;
  transition: color 0.2s;
}

#logoff-container a:hover {
  /* Use a slightly darker teal on hover to match tab behavior */
  color: #003E46 !important;
}

#logoff-container a i {
  margin-right: 5px;
}