/* ============================
   PAGE BACKGROUND (ALBUM SURROUND)
   ============================ */

html, body{
  background-color: #2b4a4a; /* darkened brand green from #385F5F */

  background-image:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.35)
    );

  background-attachment: fixed;
}

/* ============================
   VIRTUAL ALBUM – SHEET STYLE
   ============================ */

/* ============================
   ALBUM PAPER SHEET
   ============================ */

body .album-sheet{
  max-width: 1500px;
  margin: 10px auto;
  padding: 18px 12px;

  /* Cream paper base */
  background-color: #faf7f1;

  /* Paper texture */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.015),
      rgba(0,0,0,0.015) 1px,
      rgba(255,255,255,0.015) 1px,
      rgba(255,255,255,0.015) 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.012),
      rgba(0,0,0,0.012) 1px,
      rgba(255,255,255,0.012) 1px,
      rgba(255,255,255,0.012) 2px
    ),
    radial-gradient(
      circle at 30% 25%,
      rgba(0,0,0,0.025),
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(0,0,0,0.020),
      transparent 45%
    );

  background-blend-mode: multiply;

  border: 1px solid #cfc7b8;

  /* Subtle sheet edge */
  border-radius: 8px;

  /* Depth + sheet edge highlight */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.15),
    0 0 0 1px rgba(255,255,255,0.25) inset;
}

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

body .album-sheet .album-header{
  text-align: center;
  margin-bottom: 10px;
}

body .album-sheet .album-header h1{
  font-size: 26px;
  letter-spacing: 0.5px;
  margin: 0 0 3px 0;
}

body .album-sheet .album-header h2{
  font-size: 15px;
  font-weight: normal;
  color: #555;
  margin: 0;
}

body .album-sheet .album-note{
  max-width: 1300px;
  margin: 0 auto 10px auto;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.25;
}

/* ============================
   TOOLBAR
   ============================ */

body .album-sheet .album-toolbar{
  max-width: 1300px;
  margin: 0 auto 10px auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body .album-sheet .album-search{
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid #bdb5a7;
  min-width: 420px;
  background: rgba(255,255,255,0.65);
  font-family: inherit;
}

body .album-sheet .album-count{
  padding: 4px 8px;
  border: 1px solid #d8d0c2;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: #333;
}

/* ============================
   LIST CONTAINER
   ============================ */

body .album-sheet .album-list{
  max-width: 1300px;
  margin: 0 auto;
  border: 1px solid #d8d0c2;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.35);
}

/* ============================
   ROWS
   ============================ */

body .album-sheet .album-row{
  display: grid;
  grid-template-columns:
    minmax(0, 3.1fr)
    minmax(0, 0.85fr)
    minmax(0, 0.85fr);

  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  align-items: center;

  cursor: pointer;

  /* Printed-line feel */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

body .album-sheet .album-row:first-child{
  border-top: none;
}

/* ============================
   CATEGORY HEADER ROW
   ============================ */

body .album-sheet .album-head{
  font-weight: bold;
  cursor: default;

  background-color: #f3eee4;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.020),
      rgba(0,0,0,0.020) 1px,
      rgba(255,255,255,0.020) 1px,
      rgba(255,255,255,0.020) 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.018),
      rgba(0,0,0,0.018) 1px,
      rgba(255,255,255,0.018) 1px,
      rgba(255,255,255,0.018) 2px
    ),
    radial-gradient(
      circle at 40% 30%,
      rgba(0,0,0,0.030),
      transparent 45%
    );

  background-blend-mode: multiply;
}

body .album-sheet .album-head > div{
  white-space: nowrap;
}

/* ============================
   TITLE & COLUMNS
   ============================ */

body .album-sheet .album-title{
  min-width: 0;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .album-sheet .album-col{
  min-width: 0;
  font-size: 0.92rem;
  font-weight: bold;
  color: #222;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .album-sheet .album-col-right{
  text-align: right;
}

body .album-sheet .album-muted{
  color: #777;
  font-weight: normal;
}

/* ============================
   HOVER CUE
   ============================ */

body .album-sheet .album-page:hover{
  background-color: rgba(255,255,255,0.62);
  border-left: 4px solid rgba(60,60,60,0.22);
  padding-left: 4px;
}

body .album-sheet .album-head:hover{
  border-left: none;
  padding-left: 8px;
}

/* ============================
   LINKS – NO UNDERLINE / NO PURPLE
   ============================ */

body .album-sheet .album-title a,
body .album-sheet .album-title a:visited,
body .album-sheet .album-title a:hover,
body .album-sheet .album-title a:active,
body .album-sheet .album-title a:focus{
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* Row handles clicks */
body .album-sheet .album-title a{
  pointer-events: none;
}

/* ============================
   DENOMINATION COLOUR CODING
   (TEXTURED PAPER TINTS)
   ============================ */

/* RED INK ISSUES */
body .album-sheet .album-page[data-search*="1d"],
body .album-sheet .album-page[data-search*="1.5d"],
body .album-sheet .album-page[data-search*="½d"],
body .album-sheet .album-page[data-search*="0.5d"]{
  background-color: rgba(150, 85, 70, 0.14);

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.012),
      rgba(0,0,0,0.012) 1px,
      rgba(255,255,255,0.012) 1px,
      rgba(255,255,255,0.012) 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.010),
      rgba(0,0,0,0.010) 1px,
      rgba(255,255,255,0.010) 1px,
      rgba(255,255,255,0.010) 2px
    ),
    radial-gradient(
      circle at 60% 40%,
      rgba(0,0,0,0.020),
      transparent 45%
    );

  background-blend-mode: multiply;
}

/* BLUE INK ISSUES */
body .album-sheet .album-page[data-search*="2d"]{
  background-color: rgba(90, 120, 150, 0.14);

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.012),
      rgba(0,0,0,0.012) 1px,
      rgba(255,255,255,0.012) 1px,
      rgba(255,255,255,0.012) 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.010),
      rgba(0,0,0,0.010) 1px,
      rgba(255,255,255,0.010) 1px,
      rgba(255,255,255,0.010) 2px
    ),
    radial-gradient(
      circle at 40% 60%,
      rgba(0,0,0,0.020),
      transparent 45%
    );

  background-blend-mode: multiply;
}

/* Slightly darker titles on tinted rows */
body .album-sheet .album-page[data-search*="1d"] .album-title,
body .album-sheet .album-page[data-search*="1.5d"] .album-title,
body .album-sheet .album-page[data-search*="½d"] .album-title,
body .album-sheet .album-page[data-search*="0.5d"] .album-title,
body .album-sheet .album-page[data-search*="2d"] .album-title{
  color: rgba(20,20,20,0.95);
}

/* Neutral hover over tinted rows */
body .album-sheet .album-page[data-search*="1d"]:hover,
body .album-sheet .album-page[data-search*="1.5d"]:hover,
body .album-sheet .album-page[data-search*="½d"]:hover,
body .album-sheet .album-page[data-search*="0.5d"]:hover,
body .album-sheet .album-page[data-search*="2d"]:hover{
  background-color: rgba(255,255,255,0.62);
  background-image: none;
}

/* ============================
   EMPTY STATE
   ============================ */

body .album-sheet .album-empty{
  max-width: 1300px;
  margin: 0 auto;
  padding: 12px;
  border: 1px dashed #c8c0b2;
  border-radius: 6px;
  color: #666;
  background: rgba(255,255,255,0.35);
}

/* ============================
   MOBILE
   ============================ */

@media (max-width: 900px){
  body .album-sheet{
    padding: 16px 10px;
    margin: 8px auto;
  }

  body .album-sheet .album-list,
  body .album-sheet .album-toolbar,
  body .album-sheet .album-note{
    max-width: 100%;
  }

  body .album-sheet .album-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body .album-sheet .album-col-right{
    text-align: left;
  }

  body .album-sheet .album-col{
    white-space: normal;
    font-weight: normal;
  }

  body .album-sheet .album-title{
    white-space: normal;
  }

  body .album-sheet .album-page:hover{
    border-left: none;
    padding-left: 8px;
  }

  body .album-sheet .album-head{
    display: none;
  }
}