/* =========================================================
   GLOBAL LAYOUT & TYPOGRAPHY
   ========================================================= */

:root{
  --bg: #f5f7fb;
  --page: #ffffff;
  --ink: #222;
  --ink-soft: #334155;
  --muted: #556;
  --border: #dde2f0;
  --boxbg: #f9faff;

  --nav: #202055;
  --nav-hover: #4040aa;

  --link: #2563eb;
  --link-hover: #1d4ed8;

  --danger1: #E23737;
  --danger2: #C81E1E;

  /* Admin nav theme */
  --admin-nav: #08541b;
  --admin-nav-hover: #0f6a3f;

  /* SC (Staff) nav theme */
  --sc-nav: #9A2459;
  --sc-nav-text: #d7f0b9;
  --sc-nav-hover: #BB356A;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding: 0;
  line-height: 1.5;

  scrollbar-width: auto;
  scrollbar-color: #00f0ff #ff0000;
}

/* Primary page wrapper used on most Rusty Coins pages */
#page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px 40px;
  background: var(--page);
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  min-height: 100vh;
}

/* common headings */
h1, h2 {
  font-weight: 600;
  color: #1b2a4a;
}
h1 { margin: 0 0 6px 0; }
h2 { margin: 0 0 8px 0; }

h1 span.subtitle {
  display: block;
  font-size: 0.6em;
  font-weight: normal;
  color: var(--muted);
  margin-top: 4px;
}

.section-tag {
  font-size: 0.8em;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 18px;
}

.box {
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--boxbg);
  margin-top: 10px;
}

/* Basic links */
a { color: var(--link); }
a:hover { color: var(--link-hover); }

a.simple-link {
  color: var(--link);
  text-decoration: none;
}
a.simple-link:hover { text-decoration: underline; }

.muted { color:#475569; }
.mono { font-family: "Consolas","Courier New",monospace; }

/* ---------------------------
   Sandbox Fonts
   --------------------------- */
@font-face { font-family: 'Balgruf'; src: url('./fonts/Balgruf.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Balgruf_Italic'; src: url('./fonts/Balgruf_Italic.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Beth-Ellen'; src: url('./fonts/Beth-Ellen-2.0.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Calligraffiti'; src: url('./fonts/Calligraffiti.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Dearest'; src: url('./fonts/Dearest.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Dearest_open'; src: url('./fonts/Dearest_open.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Dearest_outline'; src: url('./fonts/Dearest_outline.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Digory_Doodles_PS'; src: url('./fonts/Digory_Doodles_PS.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'journal'; src: url('./fonts/journal.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Kalam-Bold'; src: url('./fonts/Kalam-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Kalam-Light'; src: url('./fonts/Kalam-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Kalam-Regular'; src: url('./fonts/Kalam-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Merienda-Bold'; src: url('./fonts/Merienda-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Merienda-Regular'; src: url('./fonts/Merienda-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'odstemplikBold'; src: url('./fonts/odstemplikBold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'rothenbg'; src: url('./fonts/rothenbg.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Trickster-Reg'; src: url('./fonts/Trickster-Reg.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'zenda'; src: url('./fonts/zenda.ttf') format('truetype'); font-display: swap; }

/* =========================================================
   SHARED BUTTON STYLES (REAL <button> ELEMENTS)
   ========================================================= */

button.button,
button.input {
  background-image: linear-gradient(-180deg, #37AEE2 0%, #1E96C8 100%);
  border-radius: 0.5rem;
  color: #FFFFFF;
  font-size: 14px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 1px solid #1E96C8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.2;
}

button.button:hover,
button.input:hover {
  background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%);
}

/* Reset browser button weirdness */
button.button,
button.input {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
}

/* ---- COLOR VARIANTS ---- */

button.button.r, button.input.r{
  background-image: linear-gradient(-180deg, #ff5b5b 0%, #d81f1f 100%);
  border: 1px solid #b91c1c;
}
button.button.r:hover, button.input.r:hover{
  background-image: linear-gradient(-180deg, #e63a3a 0%, #991b1b 100%);
}

button.button.g, button.input.g{
  background-image: linear-gradient(-180deg, #45d28d 0%, #168b56 100%);
  border: 1px solid #0f7a49;
}
button.button.g:hover, button.input.g:hover{
  background-image: linear-gradient(-180deg, #2fbf78 0%, #0f6a3f 100%);
}

button.button.o, button.input.o{
  background-image: linear-gradient(-180deg, #ffb04a 0%, #e36a00 100%);
  border: 1px solid #c05600;
}
button.button.o:hover, button.input.o:hover{
  background-image: linear-gradient(-180deg, #f39a2b 0%, #b84e00 100%);
}

button.button.v, button.input.v{
  background-image: linear-gradient(-180deg, #b07cff 0%, #6d28d9 100%);
  border: 1px solid #5b21b6;
}
button.button.v:hover, button.input.v:hover{
  background-image: linear-gradient(-180deg, #9b63ff 0%, #4c1d95 100%);
}

button.button.y, button.input.y{
  background-image: linear-gradient(-180deg, #ffe66a 0%, #eab308 100%);
  border: 1px solid #ca8a04;
  color: #111827;
}
button.button.y:hover, button.input.y:hover{
  background-image: linear-gradient(-180deg, #ffd84a 0%, #ca8a04 100%);
}

button.button.k, button.input.k{
  background-image: linear-gradient(-180deg, #3b3b3b 0%, #000000 100%);
  border: 1px solid #000000;
}
button.button.k:hover, button.input.k:hover{
  background-image: linear-gradient(-180deg, #1f1f1f 0%, #000000 100%);
}

button.button.s, button.input.s{
  background-image: linear-gradient(-180deg, #e5e7eb 0%, #6b7280 100%);
  border: 1px solid #64748b;
  color: #111827;
}
button.button.s:hover, button.input.s:hover{
  background-image: linear-gradient(-180deg, #d1d5db 0%, #4b5563 100%);
}

button.button.w, button.input.w{
  background-image: linear-gradient(-180deg, #ffffff 0%, #e5e7eb 100%);
  border: 1px solid #cbd5e1;
  color: #111827;
}
button.button.w:hover, button.input.w:hover{
  background-image: linear-gradient(-180deg, #f8fafc 0%, #dbe3ee 100%);
}

button.button.t, button.input.t{
  background-image: linear-gradient(-180deg, #f3e7d3 0%, #c7a97a 100%);
  border: 1px solid #b08d57;
  color: #111827;
}
button.button.t:hover, button.input.t:hover{
  background-image: linear-gradient(-180deg, #ead8bf 0%, #9a7a46 100%);
}

/* ---- BUTTON VARIANTS ---- */

button.button.ghost,
button.input.ghost{
  background-image: none !important;
  background: transparent !important;
  border: 2px solid currentColor !important;
  box-shadow: none !important;
}

button.button.ghost:hover,
button.input.ghost:hover{
  filter: brightness(0.95);
}

button.button:disabled,
button.input:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

/* =========================================================
   BUTTON SIZE VARIANTS
   ========================================================= */

button.button,
b.button {
  font-family: inherit;
}

/* Small button */
button.button.small,
b.button.small {
  font-size: 12px;
  padding: 0.3rem 0.6rem;
}

/* Icon button (square) */
button.button.icon,
b.button.icon {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* =========================================================
   BUTTON GROUP (TOOLBAR)
   ========================================================= */

.button.group {
  display: inline-flex;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid currentColor;
}

.button.group > button.button,
.button.group > b.button {
  border-radius: 0;
  border: none;
  border-right: 1px solid rgba(0,0,0,0.25);
}

.button.group > button.button:last-child,
.button.group > b.button:last-child {
  border-right: none;
}

/* =========================================================
   TOGGLE BUTTONS
   ========================================================= */

/* Default OFF state */
button.button.toggle,
b.button.toggle {
  background-image: linear-gradient(-180deg, #e5e7eb 0%, #9ca3af 100%);
  border: 1px solid #6b7280;
  color: #111827;
}

/* ON state */
button.button.toggle.active,
b.button.toggle.active {
  background-image: linear-gradient(-180deg, #45d28d 0%, #168b56 100%);
  border: 1px solid #0f7a49;
  color: #ffffff;
}

/* Hover polish */
button.button.toggle:hover,
b.button.toggle:hover {
  filter: brightness(0.98);
}

/* =========================================================
   GROUPED TOGGLES (EDITOR STYLE)
   ========================================================= */

.button.group .toggle.active {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}

/* =========================================================
   DISABLED STATES (works for <button> and your <b> wrappers)
   ========================================================= */

button.button:disabled,
button.button.disabled,
b.button.disabled {
  opacity: 0.45;
  filter: grayscale(25%);
  cursor: not-allowed !important;
  pointer-events: none; /* prevents clicks */
}

/* If you wrap inner elements inside b.button (links/spans/etc) */
b.button.disabled *,
button.button.disabled * {
  pointer-events: none;
}

/* Optional: keep text readable on light buttons */
button.button:disabled,
b.button.disabled {
  color: inherit;
}


/* =========================================================
   RADIO-STYLE TOGGLE GROUPS (only one active)
   ========================================================= */

/* Visual hint: active button in group gets a little inset ring */
.button.group .toggle.active {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18);
}

/* Optional: pressed look */
.button.group .toggle:active {
  transform: translateY(1px);
}
/* =========================================================
   SHARED BUTTON STYLES old do not use
   ========================================================= */

b.button,
b.input {
  background-image: linear-gradient(-180deg, #37AEE2 0%, #1E96C8 100%);
  border-radius: 0.5rem;
  color: #FFFFFF;
  font-size: 14px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 1px solid #1E96C8;
  cursor: pointer;
  display: inline-block;
  font-weight: 800;
}

b.button:hover,
b.input:hover {
  background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%);
}

/* Make everything inside a button wrapper inherit nicely */
b.button input,
b.input input,
b.button button,
b.input button,
b.button a,
b.input a {
  background:none;
  border:none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: none;
}

/* ---- COLOR VARIANTS (as class) ---- */
b.button.r, b.input.r{
  background-image: linear-gradient(-180deg, #ff5b5b 0%, #d81f1f 100%);
  border: 1px solid #b91c1c;
}
b.button.r:hover, b.input.r:hover{
  background-image: linear-gradient(-180deg, #e63a3a 0%, #991b1b 100%);
}

b.button.g, b.input.g{
  background-image: linear-gradient(-180deg, #45d28d 0%, #168b56 100%);
  border: 1px solid #0f7a49;
}
b.button.g:hover, b.input.g:hover{
  background-image: linear-gradient(-180deg, #2fbf78 0%, #0f6a3f 100%);
}

b.button.o, b.input.o{
  background-image: linear-gradient(-180deg, #ffb04a 0%, #e36a00 100%);
  border: 1px solid #c05600;
}
b.button.o:hover, b.input.o:hover{
  background-image: linear-gradient(-180deg, #f39a2b 0%, #b84e00 100%);
}

b.button.v, b.input.v{
  background-image: linear-gradient(-180deg, #b07cff 0%, #6d28d9 100%);
  border: 1px solid #5b21b6;
}
b.button.v:hover, b.input.v:hover{
  background-image: linear-gradient(-180deg, #9b63ff 0%, #4c1d95 100%);
}

b.button.y, b.input.y{
  background-image: linear-gradient(-180deg, #ffe66a 0%, #eab308 100%);
  border: 1px solid #ca8a04;
  color: #111827;
}
b.button.y:hover, b.input.y:hover{
  background-image: linear-gradient(-180deg, #ffd84a 0%, #ca8a04 100%);
}

b.button.k, b.input.k{
  background-image: linear-gradient(-180deg, #3b3b3b 0%, #000000 100%);
  border: 1px solid #000000;
}
b.button.k:hover, b.input.k:hover{
  background-image: linear-gradient(-180deg, #1f1f1f 0%, #000000 100%);
}

b.button.s, b.input.s{
  background-image: linear-gradient(-180deg, #e5e7eb 0%, #6b7280 100%);
  border: 1px solid #64748b;
  color: #111827;
}
b.button.s:hover, b.input.s:hover{
  background-image: linear-gradient(-180deg, #d1d5db 0%, #4b5563 100%);
  color: #111827;
}

b.button.w, b.input.w{
  background-image: linear-gradient(-180deg, #ffffff 0%, #e5e7eb 100%);
  border: 1px solid #cbd5e1;
  color: #111827;
}
b.button.w:hover, b.input.w:hover{
  background-image: linear-gradient(-180deg, #f8fafc 0%, #dbe3ee 100%);
  color: #111827;
}

b.button.t, b.input.t{
  background-image: linear-gradient(-180deg, #f3e7d3 0%, #c7a97a 100%);
  border: 1px solid #b08d57;
  color: #111827;
}
b.button.t:hover, b.input.t:hover{
  background-image: linear-gradient(-180deg, #ead8bf 0%, #9a7a46 100%);
  color: #111827;
}

/* ---- BUTTON VARIANTS ---- */
b.button.ghost,
b.input.ghost{
  background-image: none !important;
  background: transparent !important;
  border: 2px solid currentColor !important;
  box-shadow: none !important;
}

b.button.ghost:hover,
b.input.ghost:hover{
  filter: brightness(0.95);
}

b.button.disabled,
b.input.disabled{
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(30%);
}

b.button button:disabled,
b.input input:disabled,
b.input button:disabled{
  cursor: not-allowed;
}

/* =========================================================
   MESSAGES / ALERT BOXES (common)
   ========================================================= */

.error-msg {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.95em;
}

.success-msg {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.95em;
}

.note-msg {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #164e63;
  font-size: 0.95em;
}

/* =========================================================
   FORMS
   ========================================================= */

label { font-weight: 600; font-size: 0.95em; }
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  max-width: 520px;
  padding: 6px 8px;
  font-size: 0.95em;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}

textarea { min-height: 80px; }

/* =========================================================
   ITEM CARD LAYOUT (shop)
   ========================================================= */

.item-card{
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f9fafb;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.item-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.item-body{ flex:1; min-width:260px; }
.item-media{ width:220px; max-width:100%; display:flex; justify-content:flex-end; }

.item-thumb{
  display:block;
  width:100%;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#fff;
  object-fit:contain;
}

.item-thumb.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
  border-radius:10px;
  border:1px dashed #cbd5e1;
  color:#64748b;
  background:#fff;
}

.cart-actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

@media (max-width: 720px){
  .item-row{ flex-direction:column; }
  .item-media{ width:100%; justify-content:flex-start; }
}

/* File upload control */
input[type="file"]::file-selector-button{
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #ca8a04;
  background-image: linear-gradient(-180deg, #ffe66a 0%, #eab308 100%);
  color: #111827;
  font-weight: 900;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover{
  background-image: linear-gradient(-180deg, #ffd84a 0%, #ca8a04 100%);
}

/* The inner button portion (Chromium/Edge + modern Firefox support via pseudo) */
input[type="file"]::file-selector-button{
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  font-weight: 900;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover{
  background: #dbeafe;
}


/* =========================================================
   NAVBAR & DROPDOWN (float version)
   ========================================================= */

.navbar{
  background-color: var(--nav);
  overflow: visible;
  width: 100%;
  display: block; /* NOT flex */
}

.navbar::after{
  content:"";
  display:block;
  clear:both;
}

.navbar a{
  float:left;
  display:block;
  font-size:16px;
  color:#fff;
  text-align:center;
  padding:12px 14px;
  text-decoration:none;
  white-space:nowrap;
}

.navbar a:hover{
  background-color: var(--nav-hover);
}

/* =========================================================
   LEGACY .dropdown (kept for older markup)
   ========================================================= */

.dropdown{
  float:left;
  position:relative;
}

.dropdown .dropbtn{
  display:block;
  font-size:16px;
  border:none;
  outline:none;
  color:#fff;
  padding:12px 14px;
  background-color:inherit;
  font-family:inherit;
  margin:0;
  cursor:pointer;
  white-space:nowrap;
}

.dropdown:hover .dropbtn{
  background-color: var(--nav-hover);
}

.dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background-color:#fff;
  min-width:180px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  z-index:9999;
  padding:6px;
}

.dropdown-content a{
  float:none;
  display:block;
  color:#0f172a;
  padding:8px 10px;
  text-decoration:none;
  text-align:left;
  border-radius:0;
  font-weight:700;
}

.dropdown-content a:hover{ background:#e0e7ff; }
.dropdown:hover .dropdown-content{ display:block; }

/* sub navigation */

.dd-sub { position: relative; }

.dd-sub-menu{
  display:none;
  position:absolute;
  top:0;
  left:100%;
  min-width: 240px;
  z-index: 9999;
  background: #fff;
  border: 1px solid #dde2f0;
  border-radius: 10px;
  padding: 6px 0;
  margin-left: 6px;
}

/* Show on hover */
.dd-sub:hover .dd-sub-menu { display:block; }

/* Optional: make the parent row feel like a submenu */
.dd-sub-toggle{ display:flex; justify-content:space-between; align-items:center; }

/* =========================================================
   ADMIN NAV BAR (GREEN)
   ========================================================= */

.navbar-admin{
  background-color: var(--admin-nav);
}

.navbar-admin a:hover{
  background-color: var(--admin-nav-hover);
}

.navbar-admin .dropdown:hover .dropbtn{
  background-color: var(--admin-nav-hover);
}

/* Admin entry link (user navbar) */
.navbar .admin-link{
  background-color:#08541b;
  color:#ffffff;
  font-weight:800;
}

.navbar .admin-link:hover{
  background-color:#063f15;
}

/* User dashboard link inside admin bar */
.navbar-admin .user-dash-link{
  background-color:#202055; /* main nav blue */
  color:#ffffff;
}

.navbar-admin .user-dash-link:hover{
  background-color:#4040aa;
}

/* Staff dashboard link inside admin bar */
.navbar.navbar-admin a.staff-dash-link{
  background-color:#9A2459;
  color:#d7f0b9;
//  display:inline-block;
//  padding:6px 10px;
//  border-radius:10px;
//  text-decoration:none;
}

.navbar.navbar-admin a.staff-dash-link:hover{
  background-color:#BB356A;
}

/* Staff Dashboard link in ANY navbar */
.navbar .staff-dash-link{
  background-color:#9A2459;
  color:#d7f0b9;
}
.navbar .staff-dash-link:hover{
  background-color:#BB356A;
}


/* =========================================================
   DROPDOWNS: .dd / .dd-menu (your "new" system)
   ========================================================= */

.navbar .dd{
  float:left;
  position: relative;
}

.navbar .dd-toggle{
  float:left;
  display:block;
  font-size:16px;
  color:#fff;
  text-align:center;
  padding:12px 14px;
  text-decoration:none;
  white-space:nowrap;
}

.navbar .dd:hover .dd-toggle{
  background-color: var(--nav-hover);
}

.navbar .dd-topline{
  float:left;
  display:flex;
  align-items:center;
}

.navbar .dd-topline > a{
  float:none;
  display:block;
  padding:12px 14px;
}

.navbar .dd-caret-only{
  padding-left:6px !important;
  padding-right:10px !important;
}

.navbar .dd-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:0;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  z-index:9999;
  padding:6px;
}

.navbar .dd-menu a{
  float:none;
  display:block;
  color:#0f172a;
  padding:8px 10px;
  text-decoration:none;
  text-align:left;
  border-radius:0;
  font-weight:700;
  white-space:nowrap;
}

.navbar .dd-menu a:hover{ background:#e0e7ff; }

.navbar .dd:hover .dd-menu,
.navbar .dd.open .dd-menu{
  display:block;
}

.navbar .dd-menu hr{
  border:none;
  border-top:1px solid #e2e8f0;
  margin:6px 2px;
}

/* TU dropdown disabled/ghost links */
.dd-menu a.disabled,
.dd-menu a.disabled:hover {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  filter: grayscale(100%);
  text-decoration: none;
}

@media (max-width: 720px){
  .navbar a,
  .dropdown,
  .navbar .dd{
    float:none;
    width:100%;
  }

  .dropdown .dropbtn,
  .navbar .dd-toggle{
    width:100%;
    text-align:left;
  }

  .dropdown-content,
  .navbar .dd-menu{
    position:static;
    min-width:0;
    margin:0 0 6px 0;
  }

  .navbar .dd-topline{
    width:100%;
    justify-content:space-between;
  }
}

/* =========================================================
   SC (Staff) NAV THEME (purple/green)
   Use: <div class="navbar sc"> ... </div>
   ========================================================= */

.navbar.sc{
  background-color: var(--sc-nav);
}

.navbar.sc a,
.navbar.sc .dd-toggle,
.navbar.sc .dropbtn{
  color: var(--sc-nav-text) !important;
}

.navbar.sc a:hover,
.navbar.sc .dd:hover .dd-toggle,
.navbar.sc .dropdown:hover .dropbtn{
  background-color: var(--sc-nav-hover);
}

.navbar.sc .dd-menu{
  background: var(--sc-nav-hover) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 0 !important;
}

.navbar.sc .dd-menu a{
  color: var(--sc-nav-text) !important;
  border-radius: 0 !important;
}

.navbar.sc .dd-menu a:hover{
  background: rgba(255,255,255,0.12) !important;
  color: var(--sc-nav-text) !important;
}

/* =========================================================
   LEGACY HELPERS (from old sheets)
   ========================================================= */

.Bimage{ border: 10px solid #eeeeff; }

h2.left{
  background-color: #202055;
  color: #ffffff;
  text-decoration: none;
}

a.menu:link,
a.menu:visited,
a.menu:active{
  color:#000000;
  text-decoration:none;
}
a.menu:hover{
  color:#4444aa;
  text-decoration:none;
}

a.menuHL:link,
a.menuHL:visited,
a.menuHL:active{
  color:#ffffff;
  text-decoration:none;
}
a.menuHL:hover{
  color:#ffff00;
  text-decoration:none;
}

table.db{ border: 1px solid; border-collapse: collapse; }
tr.db{ border: 1px solid; border-collapse: collapse; }
td.db{ border: 1px solid; border-collapse: collapse; }

blockquote.reply{
  font-style: italic;
  font-size: 16px;
  margin-left: 80px;
  margin-right: 80px;
  font-family: Courier, Candara, Verdana, monospace;
  padding-left: 50px;
  padding-right: 150px;
}

div.reply{
  height: 300px;
  width: 70%;
  margin: auto;
  border: 1px solid transparent;
  background-color: #eeffee;
  padding: 5px;
  overflow: auto;
}

/* =========================================================
   COMMENTS TOGGLE BUTTON
   ========================================================= */

.sc-comments-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:12px;
  border:1px solid #6366f1;
  background:linear-gradient(180deg,#eef2ff 0%,#c7d2fe 100%);
  color:#1e3a8a;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:all .15s ease;
}

.sc-comments-btn.small{
  padding:6px 12px;
  font-size:14px;
}

.sc-comments-btn:hover{
  background:linear-gradient(180deg,#c7d2fe 0%,#a5b4fc 100%);
  box-shadow:0 3px 10px rgba(0,0,0,0.25);
}

.sc-comments-btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}

/* =========================================================
   Metronome / tempo UI (from old sheet)
   ========================================================= */

#play-button{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

#tempo{
  font-size: 40px;
  color: navy;
}

.bpm{
  font-size: 14px;
  text-align: center;
  color: black;
}

.tempo-controls{
  margin-top: 0px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row;
}

.tempo-container{
  margin: 0 15px;
}

button:focus{
  outline: none;
}

.tempo-change{
  width: 50px;
  height: 30px;
}

.play{
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 40px solid #00ff00;
  margin-left: 15px;
}

.pause{
  width: 15px;
  height: 60px;
  border: none;
  border-left: 15px solid #ff0000;
  border-right: 15px solid #ff0000;
}

/* ============================================================
   TU Shared UI (student/admin pages)
   ============================================================ */

#page{
  max-width:1100px;
  margin:0 auto;
  padding:16px 18px 40px;
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,0.08);
  min-height:85vh;
  box-sizing:border-box;
}

.box{
  border-radius:10px;
  padding:12px 14px;
  border:1px solid #dde2f0;
  background:#f9faff;
  margin-top:12px;
}

.item{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0;
  background:#fbfdff;
}

.muted{
  color:#556;
  font-size:0.95em;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

.indent{
  padding-left:14px;
  margin-top:8px;
}

code{
  background:#f1f5f9;
  padding:2px 6px;
  border-radius:8px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid #cbd5f5;
  background:#fff;
  font-weight:900;
  text-decoration:none;
  color:#0f172a;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{ background:#eef2ff; }

.btn.blue{  background:#eff6ff; border-color:#bfdbfe; }
.btn.green{ background:#ecfdf5; border-color:#86efac; }
.btn.teal{  background:#f0fdfa; border-color:#99f6e4; }
.btn.gray{  background:#f1f5f9; border-color:#cbd5e1; color:#475569; }

/* Pills / tags */
.pill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:0.85em;
  border:1px solid #cbd5f5;
  background:#fff;
}
.pill.pub{   background:#dbeafe; border-color:#bfdbfe; color:#1e40af; }
.pill.draft{ background:#fef9c3; border-color:#fde68a; color:#854d0e; }
.pill.on{    background:#dcfce7; border-color:#86efac; color:#166534; }

.brandpill{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:0.85em;
  background:#f5f3ff;
  border:1px solid #ddd6fe;
  color:#4c1d95;
}

.edu-name{ font-weight:900; }
.edu-id{ color:#667; font-size:0.9em; }

/* Details / lesson cards */
details{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0;
}
summary{
  cursor:pointer;
  font-weight:900;
  color:#0f172a;
}

.lesson{
  margin:8px 0;
  padding:8px 10px;
  border:1px dashed #e2e8f0;
  border-radius:10px;
  background:#fbfdff;
}
.lesson b{ display:block; }

/* Warnings */
.warn{
  background:#fff7ed;
  border:1px solid #fdba74;
  color:#9a3412;
}

.box {
  background: #fff;
  border: 1px solid #dde2f0;
  border-radius: 10px;
  padding: 14px 16px;
}

.flex-2 {
  display: flex;
  gap: 16px;
}

.flex-2 > * {
  flex: 1;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}