/* -------------------------------------------------
   tools.css  – shared styling for Navy Graphics tools
   ------------------------------------------------- */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../../assets/fonts/BigShouldersDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('../../assets/fonts/Barlow-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- GLOBAL ---------- */
:root{
  --color-primary:#000f29;      /* body background */
  --color-header:#00163b;       /* full-width banner */
  --color-accent:#3aefe4;       /* RN radar blue */
  --color-light:#ffffff;
  --color-dark:#000000;
  --color-nav:#010814;
  --color-accentsec:#A3BADA;
  --max-width:1200px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Barlow',sans-serif;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-header) 50%, var(--color-primary) 100%);
  color:var(--color-light);
  display:flex; flex-direction:column; min-height:100vh;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url('../../assets/images/bg.svg');
  background-size:40px 40px;
  background-repeat:repeat;
  background-position:0 0;
  opacity:0.15;
  pointer-events:none;
  z-index:0;
}
main{flex:1; max-width:var(--max-width); margin:0 auto; padding:1rem 2rem 3rem; position:relative; z-index:1;}

/* ---------- VERY TOP NAV ---------- */
.top-nav{
  background:rgba(1, 8, 20, 0.9);
  backdrop-filter:blur(10px);
  height:3rem;
  width:100%;
  display:flex; align-items:center;
  font-size:0.9rem;
  border-bottom:1px solid rgba(58, 239, 228, 0.2);
  position:relative;
  z-index:10;
}
.top-nav-inner{
  max-width:var(--max-width);
  width:100%;
  margin:0 auto;
  padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  font-family:'Big Shoulders Display',cursive;
  font-size:1.2rem;
  letter-spacing:1.5px;
  color:var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-logo:hover{
  opacity:0.8;
}
.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.5rem;
}
.nav-links a{
  color:var(--color-light);
  text-decoration:none;
  padding:0.4rem 0.75rem;
  border-radius:6px;
  transition:all .2s;
  font-size:0.95rem;
  position:relative;
}
.nav-links a::before{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:var(--color-accent);
  transform:scaleX(0);
  transition:transform 0.2s;
}
.nav-links a:hover{
  background:rgba(58, 239, 228, 0.1);
  color:var(--color-accent);
}
.nav-links a:hover::before{
  transform:scaleX(1);
}

/* ---------- BANNER / HEADER ---------- */
header.banner{
  background:rgba(0, 22, 59, 0.6);
  backdrop-filter:blur(10px);
  padding:1.5rem 0;
  position:relative;
  width:100%;
  border-bottom:1px solid rgba(58, 239, 228, 0.2);
  z-index:5;
}
.banner-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 2rem;
  display:flex; align-items:center; gap:1.5rem;
  flex-wrap:wrap;
}
h1.title{
  margin:0;
  font-family:'Big Shoulders Display',cursive;
  font-size:2.5rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-accent);
  flex-shrink:0;
  text-shadow:0 2px 8px rgba(0, 0, 0, 0.3);
}
/* back / logo icons */
#back-btn,#ngs-icon{
  width:44px;
  height:44px;
  transition:transform 0.2s, opacity 0.2s;
  border-radius:8px;
  overflow:hidden;
}
#back-btn:hover,#ngs-icon:hover{
  transform:scale(1.05);
  opacity:0.9;
}
#back-btn img,#ngs-icon img{width:100%; height:100%; object-fit:contain;}

/* ---------- FILTER BAR (Fleet) ---------- */
#search{
  background:rgba(255, 255, 255, 0.95);
  color:var(--color-dark);
  border:1px solid rgba(58, 239, 228, 0.3);
  border-radius:6px;
  padding:0.5rem 0.85rem;
  font-size:1rem;
  width:18rem;
  transition:all 0.2s;
}
#search:focus{
  outline:none;
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(58, 239, 228, 0.1);
}
label{font-size:0.9rem; font-weight:500; display:flex; align-items:center; gap:0.5rem;}
.filters{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0.75rem 2rem 0;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
}
.filters select,.filters input[type="checkbox"]{margin-left:0.4rem; font-size:0.9rem;}

/* ---------- TABLE (Fleet) ---------- */
.table-wrapper{margin:0 auto; padding:1rem 2rem 3rem; overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:800px;}
thead{position:sticky; top:0; z-index:2; cursor:pointer;}
th,td{padding:0.5rem 0.75rem; border:1px solid #002049; text-align:left; font-size:0.9rem;}
th{background:var(--color-header); font-weight:600; user-select:none;}
th.sort-asc::after{content:" ▲";}
th.sort-desc::after{content:" ▼";}
tbody tr:nth-child(even){background:#00163b;}
tbody tr:nth-child(odd){background:#0b2147;}
tbody tr:hover{background:var(--color-accent); color:var(--color-dark);}

/* ---------- ICON-LIBRARY COMPONENTS ---------- */

/* ▸ colour palette --------------------------------------------------------- */
#palette{
  display:flex; flex-wrap:wrap; gap:0.4rem;
  align-items:center; margin-left:1rem;
}
.swatch{
  width:26px; height:26px; flex:0 0 26px;
  border:2px solid var(--color-light);
  border-radius:4px; cursor:pointer;
  transition:transform .1s;
}
.swatch:hover{transform:scale(1.12);}
.swatch.selected{box-shadow:0 0 0 2px var(--color-accent) inset;}

#custom-color{
  width:34px; height:34px; padding:0;
  background:transparent; border:none; cursor:pointer;
}

/* ▸ category buttons (collapsed <summary>) --------------------------------- */
/* wrap each category in a centered, max-width panel */
details {
  margin: 1rem auto;
  max-width: var(--max-width);  /* e.g. 1200px */
  width: 100%;
  background: rgba(0, 22, 59, 0.6);
  backdrop-filter:blur(10px);
  border: 1px solid rgba(58, 239, 228, 0.2);
  border-radius: 10px;
  overflow: hidden;
  transition:border-color 0.2s;
}
details:hover{
  border-color:rgba(58, 239, 228, 0.4);
}


/* ------------------ CATEGORY HEADER (SUMMARY) ------------------ */

details > summary {
  /* 1) Make it a true block that we can size */
  display: block !important;

  /* 2) Fix its width to our max, and centre it */
  width: var(--max-width) !important;  /* 1200px */
  margin: 0 auto !important;

  /* 3) Respect padding */
  box-sizing: border-box !important;

  /* 4) All your existing styling */
  padding: 1rem 1.25rem;
  background: rgba(0, 22, 59, 0.8);
  font-weight: 600;
  font-size:1.1rem;
  cursor: pointer;
  user-select: none;
  border-radius: 10px 10px 0 0;
  list-style: none;
  text-align: left;
  transition:background 0.2s;
}
details > summary:hover{
  background: rgba(0, 22, 59, 0.95);
}

/* hide that default arrow */
summary::-webkit-details-marker {
  display: none;
}



/* ▸ grid of icon cards ----------------------------------------------------- */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  grid-auto-rows:1fr;
  gap:1rem; padding:1rem;
}
.icon-card{
  background:repeating-conic-gradient(#1e1e1e 0% 25%, #111 0% 50%) 0 0/12px 12px;
  border-radius:8px;
  padding:0.6rem 0.6rem 0.4rem;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:0.25rem;
  min-height:180px;
}
.icon-card svg{width:64px; height:64px; fill:var(--color-light); stroke:var(--color-light);}
.icon-name{
  font-size:0.75rem; text-align:center; word-break:break-word; font-weight:500;
  min-height:2.4em; display:flex; align-items:center; justify-content:center;
}
.actions{display:flex; gap:0.4rem; width:100%;}
.btn{
  flex:1; min-width:0;
  background:var(--color-accent);
  color:var(--color-dark);
  border:none; border-radius:4px;
  padding:0.28rem 0.4rem;
  font-size:0.72rem;
  cursor:pointer; font-weight:500;
  transition:opacity .2s;
}
.btn:hover{opacity:0.85;}

/* ---------- FOOTER ---------- */
footer{background:var(--color-header); text-align:center; font-size:0.75rem; padding:0.75rem;}

.color-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 50px;
    margin-left: 40px;
    margin-right: 40px;
}

.core-color {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    cursor: pointer;
}

.color-variant {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
}

.color-variant.light {
    left: -22px;
    bottom: -55px;
}

.color-variant.dark {
    right: -22px;
    bottom: -55px;
}

@keyframes flash {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.color-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 50px;
    background: rgb(255, 255, 255);
    backdrop-filter:blur(10px);
    border: 1px solid rgba(58, 239, 228, 0.2);
    border-radius: 12px;
    padding: 50px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    overflow: auto;
}

.color-name {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    color: #000000;
    margin-bottom: 10px;
}


/* ========== MARGIN CARDS LAYOUT ========== */
.layout-margins {
  display: grid;
  grid-template-columns: minmax(270px, 400px) 1fr;
  gap: 3rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .layout-margins {
    grid-template-columns: 1fr;
  }
}

/* ========== LEFT PANEL (ASIDE) ========== */
.panel-margins {
  background: rgba(0, 22, 59, 0.6);
  backdrop-filter:blur(10px);
  border: 1px solid rgba(58, 239, 228, 0.2);
  color: var(--color-light);
  padding: 2.5rem 2rem;
  border-radius: 12px;
}
.panel-margins h2 {
  font-family: 'Big Shoulders Display', cursive;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}
.panel-margins ul {
  padding-left: 1rem;
  line-height: 1.7;
}
.panel-margins li {
  margin-bottom: 0.5rem;
}
.panel-margins h3 {
  font-family: 'Big Shoulders Display', cursive;
  font-size: 1.3rem;
  margin-top: 2rem;
  color: var(--color-accent);
}

/* ========== RIGHT CARDS ========== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  gap: 2rem;
}
.margin-card {
  background: rgba(0, 22, 59, 0.6);
  backdrop-filter:blur(10px);
  border: 1px solid rgba(58, 239, 228, 0.2);
  border-radius: 12px;
  padding: 2rem 1.5rem 2.5rem;
  position: relative;
  color: var(--color-light);
  transition:transform 0.2s, border-color 0.2s;
}
.margin-card:hover{
  transform:translateY(-4px);
  border-color:rgba(58, 239, 228, 0.4);
}
.margin-card h4 {
  font-family: 'Big Shoulders Display', cursive;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.margin-card .badge {
  position: absolute;
  top: -1.4rem;
  left: 1.4rem;
  background: var(--color-accent);
  color: var(--color-dark);
  font-family: 'Big Shoulders Display', cursive;
  font-size: 1.2rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.3rem;
}
.download-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--color-accentsec);
  color: var(--color-dark);
  font-family: 'Big Shoulders Display', cursive;
  font-size: 0.8rem;
  text-decoration: none;
  border-radius: 0.3rem;
  transition: transform 0.15s ease-in-out;
}