@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600&family=Rajdhani:wght@400;500&display=swap');

body {
  font-family: 'Rajdhani', sans-serif;
}

h1, h2, h3, h4,
.card-title,
.navbar,
button {
  font-family: 'Orbitron', sans-serif;
}


.header {
  background: #033259;
  border-bottom: 2px solid #c2a365;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}

.header .btn-link {
  color: #ffffff;
}

.header .btn-link:hover {
  color: #c2a365;
}

.header-logo {
  color: #ffffff;
}

.header .menu {
  background: #033259;
  border: 1px solid #c2a365;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.header .menu .btn-link {
  color: #ffffff;
}

.header .menu .btn-link:hover {
  background: #02243f;
  color: #c2a365;
}

.card {
  background: #ffffff;
  border: 1px solid #334155;
  border-radius: 8px;
}

.card-title {
  background: linear-gradient(90deg,#033259);
  color: #FFFFFF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  border-top-left-radius: 6.5px;
  border-top-right-radius: 6.5px;

}

.card-body {
  color: #000000;
  background: #f8fafc;
}






.header nav {
  justify-content: center !important;
  gap: 18px;
}

.header nav a {
  margin: 0 6px;
}


/* Make Join Us stand out */
.header a[href="/JoinUs"] {
  font-size: 1.15rem;
  font-weight: 700;
  color: #c2a365;
  padding: 6px 12px;
  border: 1px solid #033259;
  border-radius: 6px;
}

.header a[href="/JoinUs"]:hover {
  background: #c2a365;
  color: #033259;
}


.card-body.grid-xs-4.grid-sm-6.grid-md-12 {
    gap: 20px !important;
}

.card-body.grid-xs-4.grid-sm-6.grid-md-12 img:hover {
    transform: scale(1.10);
}

/* Notification dropdown text */
.menu .notification p {
  color: #ffffff !important;
}

/* EDITING PROFILE UNIFORM */

/* Move the uniform block below the main grid */
main.responsive {
  display: flex;
  flex-direction: column;
}

main.responsive > .flex.justify-between.mb-6 {
  order: 1;
}

main.responsive > .grid.gap-4 {
  order: 2;
}

main.responsive > .text-center.mb-4 {
  order: 3;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  padding: 0;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left !important;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* Fake card title bar */
main.responsive > .text-center.mb-4::before {
  content: "UNIFORM";
  display: block;
  padding: 12px 16px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.00rem;
  letter-spacing: 0.03em;
  color: #f8fafc;
  background: #033259;
  border-bottom: 1px solid rgba(3, 50, 89, 0.2);
}

/* Fake card body */
main.responsive > .text-center.mb-4 img[style*="max-height: 530px"] {
  display: block;
  width: auto;
  max-width: min(100%, 900px);
  height: auto;
  max-height: none !important;
  margin: 1rem auto;
  padding: 0 1rem 1rem 1rem;
  box-sizing: border-box;
}

/*Test Fix For Washout */

main > .text-center.mb-4 img[src*="/storage/milhq/"][style*="max-height: 530px"] {
  width: auto !important;
  max-width: none !important;
  max-height: 530px !important;
  height: auto !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}



/*Award Info Box*/

/* Base award item on soldier profile */
#assignment .card .card-body [title] {
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* Ribbon hover effect */
#assignment .card .card-body [title] img {
  transition: transform 0.18s ease, filter 0.18s ease;
}

#assignment .card .card-body [title]:hover img {
  transform: scale(1.18);
  filter: brightness(1.05);
  z-index: 3;
  position: relative;
}

/* Shared tooltip box */
#assignment .card .card-body [title]::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.75);
  border-radius: 8px;
  background: #0f1720;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

/* Small arrow */
#assignment .card .card-body [title]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #0f1720;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 21;
}

/* Show tooltip on hover */
#assignment .card .card-body [title]:hover::after,
#assignment .card .card-body [title]:hover::before {
  opacity: 1;
  visibility: visible;
}


/* AWARD TOOLTIP POPUP */

/* Full manual award descriptions for custom hover tooltip */
#assignment .card .card-body [title="UEE Medal of Valor"]::after {
  content: "UEE Medal of Valor\A\A Canon UEE valor decoration for extraordinary bravery";
  white-space: pre-line;
}

#assignment .card .card-body [title="Thorne Cross"]::after {
  content: "Thorne Cross\A\A The 173rd’s highest unit citation for command judgment under fire";
  white-space: pre-line;
}

#assignment .card .card-body [title="Special Operations Citation"]::after {
  content: "Special Operations Citation\A\A Credit for high-risk precision actions (boarding, denial, rescue)";
  white-space: pre-line;
}

#assignment .card .card-body [title="Ironclad Citation"]::after {
  content: "Ironclad Citation\A\A Kept the mission alive through damage, outages, or heavy stress";
  white-space: pre-line;
}

#assignment .card .card-body [title="Joint Operations Commendation"]::after {
  content: "Joint Operations Commendation\A\A Planned or led effective multi-unit or inter-agency operations";
  white-space: pre-line;
}

#assignment .card .card-body [title="Sentinel Citation"]::after {
  content: "Sentinel Citation\A\A Defense of 173rd assets or civilians under direct threat";
  white-space: pre-line;
}

#assignment .card .card-body [title="Perseverance Medal"]::after {
  content: "Perseverance Medal\A\A Sustained, reliable performance over a long deployment";
  white-space: pre-line;
}

#assignment .card .card-body [title="Long Term Service Award"]::after {
  content: "Long Term Service Award\A\A Two-year honorable, productive service in good standing";
  white-space: pre-line;
}

#assignment .card .card-body [title="Meritorious Service Award"]::after {
  content: "Meritorious Service Award\A\A One-year honorable, productive service in good standing";
  white-space: pre-line;
}

#assignment .card .card-body [title="Steadfast Service Award"]::after {
  content: "Steadfast Service Award\A\A Six-month service milestone toward Meritorious Service";
  white-space: pre-line;
}

#assignment .card .card-body [title="Rising Star Medal"]::after {
  content: "Rising Star Medal\A\A Early-tenure impact award for rapid growth and initiative";
  white-space: pre-line;
}

#assignment .card .card-body [title="First Deployment Commendation"]::after {
  content: "First Deployment Commendation\A\A Credit for completing a first operational deployment";
  white-space: pre-line;
}

#assignment .card .card-body [title="General Award"]::after {
  content: "General Award\A\A Commander’s discretionary recognition for notable contribution";
  white-space: pre-line;
}

#assignment .card .card-body [title="Invictus Ribbon"]::after {
  content: "Invictus Ribbon\A\A Service during Invictus operations under 173rd tasking";
  white-space: pre-line;
}

#assignment .card .card-body [title="IAE Peacekeeping Ribbon"]::after {
  content: "IAE Peacekeeping Ribbon\A\A Service during Intergalactic Aerospace Expo security";
  white-space: pre-line;
}

#assignment .card .card-body [title="Patch Day Ribbon"]::after {
  content: "Patch Day Ribbon\A\A For those who brave day one of a new major patch";
  white-space: pre-line;
}

#assignment .card .card-body [title="Campaign Commendation Ribbon"]::after {
  content: "Campaign Commendation Ribbon\A\A This is awarded to any 173rd who takes part in any operation that is primarily within a system that does not have a set ribbon";
  white-space: pre-line;
}

#assignment .card .card-body [title="Combat In Stanton Ribbon"]::after {
  content: "Combat In Stanton Ribbon\A\A This is awarded to any 173rd who takes part in any operation that is primarily within the Stanton System";
  white-space: pre-line;
}

#assignment .card .card-body [title="Combat In Pyro Ribbon"]::after {
  content: "Combat In Pyro Ribbon\A\A This is awarded to any 173rd who takes part in any operation that is primarily within the Pyro System";
  white-space: pre-line;
}

#assignment .card .card-body [title="Combat in Nyx Ribbon"]::after {
  content: "Combat in Nyx Ribbon\A\A This is awarded to any 173rd who takes part in any operation that is primarily within the Nyx System";
  white-space: pre-line;
}

#assignment .card .card-body [title="Combat In Castra Ribbon"]::after {
  content: "Combat In Castra Ribbon\A\A This is awarded to any 173rd who takes part in any operation that is primarily within the Castra System";
  white-space: pre-line;
}

#assignment .card .card-body [title="Combat in Terra Ribbon"]::after {
  content: "Combat in Terra Ribbon\A\A This is awarded to any 173rd who takes part in any operation that is primarily within the Terra System";
  white-space: pre-line;
}

/* RANK TOOLTIP POPUP */

/* =========================================================
   RANK CARD HOVER POPUP
   Full corrected version
   ========================================================= */

.col-xs-12.col-md-4.col-xl-3 .card.hide-phone {
  overflow: visible !important;
}

.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body {
  position: relative;
  overflow: visible !important;
}

.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body > img {
  position: relative;
  z-index: 2;
  transition: transform 0.18s ease, filter 0.18s ease;
  transform-origin: center center;
}

.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:hover > img {
  transform: scale(1.14);
  filter: brightness(1.04);
}

/* Popup box on the right */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body::after {
  content: "";
  position: absolute;
  left: calc(100% - 110px);
  top: 40%;
  bottom: auto;
  transform: translateY(-50%);
  min-width: 270px;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.85);
  border-radius: 8px;
  background: #0f1720;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

/* Arrow */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body::before {
  content: "";
  position: absolute;
  left: calc(100% - 115px);
  top: 40%;
  bottom: auto;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #0f1720;
  border-left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 21;
}

.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:hover::after,
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:hover::before {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   EXACT RANK CONTENT
   Most specific to least specific
   ========================================================= */

/* Legatus Navium */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="legatus-navium"])::after {
  content: "Legatus Navium\A\A Navy representative within UEE High Command, focused on policy direction, strategic governance, and fleet movement at the highest level. This rank is not a battlegroup billet and is not used for routine operational command.";
}

/* Grand Admiral */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="grand-admiral"])::after {
  content: "Grand Admiral\A\A Senior authority for overarching naval operations and major fleet level direction. Expected to oversee multi-fleet priorities, theatre resourcing, and strategic readiness.";
}

/* Vice Admiral */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="vice-admiral"])::after {
  content: "Vice Admiral\A\A Battlegroup Commander level. Expected to command a battlegroup and direct its carrier, capital line, escorts, and support elements as a unified fighting formation.";
}

/* Rear Admiral */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="rear-admiral"])::after {
  content: "Rear Admiral\A\A Senior deputy at battlegroup or fleet level. Expected billets include executive officer for a battlegroup, senior high command staff lead, or commander of multiple task elements under a battlegroup.";
}

/* Admiral */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="admiral"]):not(:has(> img[src*="vice-admiral"])):not(:has(> img[src*="rear-admiral"])):not(:has(> img[src*="grand-admiral"]))::after {
  content: "Admiral\A\A Major Fleet Commander level. Expected to command a major fleet formation and set operational intent across a broad area of responsibility.";
}

/* Commodore */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="commodore"])::after {
  content: "Commodore\A\A Task Force Commander level. Expected to command a task force of multiple ships, typically with independent mission tasking and a defined operational objective.";
}

/* Captain */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="captain"])::after {
  content: "Captain\A\A Capital ship commander and senior staff tier. Expected to command a capital hull or hold a senior battlegroup staff billet requiring independent judgement, discipline authority, and full readiness responsibility.";
}

/* Lieutenant Commander */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="lieutenant-commander-p"])::after,
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="lieutenant-commander"])::after {
  content: "Lieutenant Commander\A\A Senior officer tier. Expected billets include senior department head, senior watch officer, operations lead, or executive officer on smaller hulls and detachments.\A\A Those with the P Identifier are trained Combat Pilots and are likely Wing Commanders within squadrons";
}

/* Lieutenant Junior Grade */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="lieutenant-junior-grade-p"])::after,
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="lieutenant-junior-grade"])::after {
  content: "Lieutenant Junior Grade\A\A Junior officer tier. Expected billets include assistant department head, junior watch officer, or qualified line officer roles developing toward independent leadership.\A\A Those with the P Identifier are trained Combat Pilots and are experienced in this role";
}

/* Lieutenant */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="lieutenant-p"])::after,
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="lieutenant"]):not(:has(> img[src*="lieutenant-commander"])):not(:has(> img[src*="lieutenant-junior-grade"])):not(:has(> img[src*="lieutenant-commander-p"])):not(:has(> img[src*="lieutenant-junior-grade-p"]))::after {
  content: "Lieutenant\A\A Officer and department head tier. Expected to lead departments, divisions, or critical watch functions, and to manage standards, training, and performance of assigned teams.\A\A Those with the P Identifier are trained Combat Pilots and are likely XO's of wings within squadrons";
}

/* Commander */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="commander"]):not(:has(> img[src*="lieutenant-commander"]))::after {
  content: "Commander\A\A Ship captain and senior leadership tier. Expected to command an escort or specialist command platform, serve as executive officer aboard a larger hull, or lead a detached element under mission orders.";
}

/* Ensign */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="ensign-p"])::after,
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="ensign"])::after {
  content: "Ensign\A\A Entry level officer tier. Expected billets include trainee or junior watch officer roles, assistant division officer functions, and initial officer qualification progression following academy or commissioning track completion.\A\A Those with the P Identifier are trained Combat Pilots and are at Entry Level for this role";
}

/* Master Chief Petty Officer */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="master-chief-petty-officer"])::after {
  content: "Master Chief Petty Officer\A\A Senior enlisted advisor tier. Expected to serve as senior enlisted leader for a capital ship, detachment, or battlegroup element, enforcing standards, mentorship, discipline, and readiness across enlisted personnel.";
}

/* Chief Petty Officer */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="chief-petty-officer"]):not(:has(> img[src*="master-chief-petty-officer"]))::after {
  content: "Chief Petty Officer\A\A Senior NCO leadership tier. Expected to lead departments or major sections, supervise training enforcement, manage technical standards, and maintain operational discipline across shifts.";
}

/* Junior Petty Officer */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="junior-petty-officer"])::after {
  content: "Junior Petty Officer\A\A Mid-level enlisted leadership tier. Expected billets include assistant section lead, shift lead, or senior technician roles preparing for full Petty Officer responsibilities.";
}

/* Petty Officer */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="petty-officer"]):not(:has(> img[src*="chief-petty-officer"])):not(:has(> img[src*="master-chief-petty-officer"])):not(:has(> img[src*="junior-petty-officer"]))::after {
  content: "Petty Officer\A\A Experienced enlisted supervisory tier. Expected to be fully qualified in a specialty and capable of leading a small team, supervising watch sections, and executing tasks with minimal oversight.";
}

/* Leading Starman */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="leading-starman"])::after {
  content: "Leading Starman\A\A Experienced crew and NCO candidate tier. Expected to mentor junior crew, organize routine tasking within a section, and assume informal leadership or acting responsibilities when required.";
}

/* Starman Recruit */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="starman-recruit"])::after {
  content: "Starman Recruit\A\A Recruit and trainee tier. Expected to remain under supervision during training and probationary service until Boot Camp completion and initial qualification sign off.";
}

/* Starman */
.col-xs-12.col-md-4.col-xl-3 .card.hide-phone .card-body:has(> img[src*="starman"]):not(:has(> img[src*="leading-starman"])):not(:has(> img[src*="starman-recruit"]))::after {
  content: "Starman\A\A Qualified fleet personnel tier. Expected to perform assigned duties independently as competent crew in their role and contribute to watchstanding and routine operations.";
}