:root {
--purple: #5c2d91;
--purple-dark: #3b1a5e;
--purple-light: #ede7f6;
--purple-mid: #b39ddb;
--accent: #7c4dff;
--text: #212121;
--muted: #757575;
--border: #e0e0e0;
--danger: #c62828;
--success-bg: #e8f5e9;
--success-text: #2e7d32;
--error-bg: #ffebee;
--error-text: #c62828;
--row-latest: #d1c4e9;
--row-hover: #f3e5f5;
--white: #ffffff;
--body-bg: #fafafa;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-size: 14px;
  background: var(--body-bg);
  color: var(--text);
}

/*     Top Nav     */
.topnav {
  background: var(--purple-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.2rem; height: 50px;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.nav-brand { color:#fff; font-size:1.1rem; font-weight:700; letter-spacing:.06em; }
.nav-links { display:flex; align-items:center; gap:.15rem; }
.nav-links a {
  color:#ce93d8; text-decoration:none;
  padding:.35rem .65rem; border-radius:4px;
  font-size:.82rem; transition:background .15s; white-space:nowrap;
}
.nav-links a:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-logout { color:#ef9a9a !important; }
.btn-nav-login {
  background:var(--accent); color:#fff !important;
  padding:.3rem .8rem !important; border-radius:4px;
}
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; background:none; border:none;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:#ce93d8; border-radius:2px;
}
.nav-mobile-menu {
  display:none; position:fixed; top:50px; right:0; left:0;
  background:var(--purple-dark); z-index:199;
  flex-direction:column; padding:.5rem 1rem .8rem;
  box-shadow:0 4px 8px rgba(0,0,0,.3);
}
.nav-mobile-menu a {
  color:#ce93d8; text-decoration:none;
  padding:.55rem .4rem; font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-mobile-menu a:last-child { border-bottom:none; }
.nav-mobile-menu.open { display:flex; }

/*     Hero / Search     */
#hero {
  display:flex; flex-direction:column; align-items:center;
  padding:8vh 1rem 1.5rem;
}
#site-title {
  font-size:1.9rem; font-weight:700;
  color:var(--purple); margin:0 0 1.4rem; letter-spacing:-.5px;
}
#search-row { display:flex; align-items:center; gap:.5rem; width:100%; max-width:420px; }
#search-wrap { position:relative; flex:1; }
#search-input {
  width:100%; padding:.72rem 2.8rem .72rem 1.1rem;
  font-size:1rem; border:2px solid var(--purple-mid);
  border-radius:28px; outline:none;
  transition:border-color .2s,box-shadow .2s; background:#fff;
}
#search-input:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,77,255,.15); }
#search-icon {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:var(--purple-mid); font-size:1.1rem; pointer-events:none;
}
#search-clear {
    position: absolute;
    right: 4rem;
    cursor: pointer;
    color: var(--purple);
    user-select: none;
    font-size: 1rem;
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    line-height: 1;
    -webkit-text-stroke: .5px var(--purple);  /* ← adds stroke for extra weight */
    text-stroke: .5px var(--purple);
}
#search-clear:hover {
    color: #fff;
    background: var(--purple);
    border-radius: 50%;
    -webkit-text-stroke: .5px #fff;
    text-stroke: .5px #fff;
}
#search-clear.visible {
    display: block;
}
#filter-btn {
  background:var(--purple-light); border:1px solid var(--purple-mid);
  color:var(--purple); border-radius:20px;
  padding:.5rem .9rem; font-size:.82rem; cursor:pointer; white-space:nowrap;
}
#filter-btn:hover { background:var(--purple-mid); color:#fff; }
#filter-panel {
  display:none; width:100%; max-width:620px;
  background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:1rem 1.2rem;
  margin-top:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#filter-panel.open { display:block; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; }
.filter-grid label { font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:.2rem; }
.filter-grid input, .filter-grid select {
  width:100%; padding:.38rem .6rem;
  border:1px solid var(--border); border-radius:5px; font-size:.85rem;
}
.filter-actions { margin-top:.7rem; display:flex; gap:.5rem; }

/*     Results     */
#results { padding:0 .5rem 3rem; }
.results-meta { font-size:.8rem; color:var(--muted); margin:.4rem 0; padding:0 .3rem; text-align:center; }
.results-wrap { overflow-x:auto; width:100%; text-align:center; }
.results-table { width:auto; max-width:max-content; border-collapse:collapse; font-size:.82rem; margin:0.3rem auto 0; text-align:left; }
.results-table thead th {
  background:var(--purple); color:#fff;
  text-align:left; padding:.5rem .65rem;
  white-space:nowrap; font-weight:600;
}
.results-table tbody tr { border-bottom:1px solid var(--border); }
.results-table tbody tr:hover { background:var(--row-hover); }
.results-table tbody td { padding:.42rem .65rem; vertical-align:middle; white-space:nowrap; }
.row-latest { background:var(--row-latest) !important; font-weight:500; }
td.pn { font-weight:600; color:var(--purple-dark); white-space:nowrap; }
td.num { text-align:right; white-space:nowrap; }
td.date { white-space:nowrap; color:var(--text); }
td.actions { white-space:nowrap; }

/*     Results - REMARKS Column     */
//.results-table tbody td.remarks { white-space:normal !important; min-width:100px; max-width:280px; word-break:break-word; }
.results-table tbody td.remarks,
.results-table tbody td.description { white-space:normal !important; min-width:100px; max-width:280px; word-break:break-word; }

/*     Pagination     */
.pagination {
  display:flex; justify-content:center; align-items:center;
  gap:.3rem; margin-top:1rem; flex-wrap:wrap;
}
.pagination button {
  background:#fff; border:1px solid var(--border);
  color:var(--purple); border-radius:5px;
  padding:.3rem .6rem; font-size:.82rem; cursor:pointer;
}
.pagination button.active { background:var(--purple); color:#fff; border-color:var(--purple); }
.pagination button:hover:not(.active) { background:var(--purple-light); }

/*     Overlay     */
.overlay-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:300;
  align-items:center; justify-content:center;
}
.overlay-bg.open { display:flex; }
.overlay-box {
  background:#fff; border-radius:10px;
  padding:1.6rem 1.8rem; width:90%; max-width:640px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  position:relative;
}
.overlay-close {
  position: absolute;
  top: .6rem; right: .7rem;
  background: var(--purple-light);    /* subtle background so it stands out */
  border: none;
  border-radius: 50%;                 /* circle shape */
  width: 1.6rem; height: 1.6rem; font-size: 1rem;
  cursor: pointer; color: var(--purple); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  
  /* ↓ Added these to make the X bolder ↓ */
  font-weight: 900;
  -webkit-text-stroke: .5px var(--purple);
  text-stroke: .5px var(--purple);
}
.overlay-close:hover {
  background: var(--purple-mid);
  color: #fff;
}
.overlay-close:hover { color:var(--text); }

/*     Toast     */
#toast {
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  background:var(--purple); color:#fff;
  padding:.6rem 1.4rem; border-radius:20px;
  font-size:.9rem; font-weight:500;
  z-index:500; opacity:0; pointer-events:none;
  transition:opacity .3s;
  box-shadow:0 3px 12px rgba(0,0,0,.2);
}
#toast.show { opacity:1; }

/*     Layout     */
main { padding:1rem 1.2rem; }
.card {
  background:#fff; border:1px solid var(--border);
  border-radius:8px; padding:1.2rem 1.5rem;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.center-card { max-width:380px; margin:6vh auto; }

/*     Forms     */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; }
.form-group { display:flex; flex-direction:column; gap:.22rem; }
.form-group.full-width { grid-column:1/-1; }
label {
  font-size:.76rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
input[type=text], input[type=number], input[type=password],
select, textarea {
  padding:.48rem .65rem; border:1px solid var(--border);
  border-radius:6px; font-size:.9rem; outline:none;
  transition:border-color .2s; background:#fff; color:var(--text); width:100%;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--purple); box-shadow:0 0 0 2px rgba(92,45,145,.12);
}
textarea { resize:vertical; }

/*     Autocomplete     */
.autocomplete-wrap { position:relative; }
.ac-wrap { display:flex; align-items:stretch; }
.ac-wrap input[type=text] {
  border-radius:6px 0 0 6px;
  flex:1;
  border-right:none;
}
.ac-toggle {
  background:var(--purple-light);
  border:1px solid var(--border);
  border-radius:0 6px 6px 0;
  padding:0 .55rem;
  cursor:pointer;
  color:var(--purple);
  font-size:.7rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
}
.ac-toggle:hover { background:var(--purple-mid); color:#fff; }
.autocomplete-list {
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border:1px solid var(--border);
  border-radius:0 0 6px 6px; z-index:100;
  max-height:180px; overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,.1); display:none;
}
.autocomplete-list div { padding:.42rem .65rem; cursor:pointer; font-size:.9rem; }
.autocomplete-list div:hover,
.autocomplete-list div.active { background:var(--purple-light); color:var(--purple-dark); }

/*     Buttons     */
.btn-primary {
  background:var(--purple); color:#fff; border:none;
  padding:.52rem 1.2rem; border-radius:6px;
  font-size:.9rem; cursor:pointer; font-weight:600; transition:background .15s;
}
.btn-primary:hover { background:var(--purple-dark); }
.btn-ghost {
  background:transparent; color:var(--purple);
  border:1px solid var(--purple-mid);
  padding:.48rem 1rem; border-radius:6px;
  font-size:.9rem; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn-ghost:hover { background:var(--purple-light); }
.btn-danger {
  background:var(--danger); color:#fff; border:none;
  border-radius:4px; cursor:pointer; font-weight:500;
}
.btn-danger:hover { background:#b71c1c; }
.btn-edit {
  background:var(--accent); color:#fff; border:none;
  border-radius:4px; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn-edit:hover { background:#651fff; }
.btn-sm { padding:.22rem .5rem; font-size:.76rem; }

/*     Tables     */
table { width:auto; border-collapse:collapse; font-size:.88rem; }
table thead th {
  background:var(--purple-light); color:var(--purple-dark);
  text-align:left; padding:.48rem .65rem;
  font-weight:700; border-bottom:2px solid var(--purple-mid);
}
table tbody td { padding:.42rem .65rem; border-bottom:1px solid var(--border); }
table tbody tr:hover { background:var(--row-hover); }

/*     Alerts     */
.error {
  background:var(--error-bg); color:var(--error-text);
  padding:.55rem .85rem; border-radius:6px;
  border-left:3px solid var(--error-text); margin-bottom:.7rem;
}
.success {
  background:var(--success-bg); color:var(--success-text);
  padding:.55rem .85rem; border-radius:6px;
  border-left:3px solid var(--success-text); margin-bottom:.7rem;
}
.muted { color:var(--muted); }

/*     Badge     */
.badge-admin {
  background:var(--purple-light); color:var(--purple-dark);
  font-size:.72rem; font-weight:700;
  padding:.15rem .45rem; border-radius:4px;
  letter-spacing:.03em; text-transform:uppercase;
}

/*     Responsive     */
@media(max-width:700px){
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .form-grid { grid-template-columns:1fr; }
  .filter-grid { grid-template-columns:1fr; }
  #site-title { font-size:1.35rem; }
  .overlay-box { padding:1.1rem 1rem; }
  .hide-mobile { display:none; }
}

/*     Mobile Cards     */
.mobile-cards { display:none; padding:.5rem; }

.mobile-card {
    background: #fff;
    border: 2px solid var(--purple);   /* matches the purple border you see */
    border-radius: 8px;
    margin-bottom: .75rem;
    padding: 0;                            /* ← remove padding, let rows fill fully */
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    overflow: hidden;                      /* ← critical: clips row bg to radius */
}
.mobile-card.row-latest {
    border-left:3px solid var(--purple);
}
.mc-pn {
    font-weight: 700;
    background: #fff;
    color: var(--purple);
    font-size: 1rem;
    padding: .35rem .65rem;
    border-radius: 0;                      /* ← remove individual radius, card clips it */
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;                      /* ← remove gap between P/N and first row */
}
.mc-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    font-size: .8rem;
    border-bottom: 1px solid rgba(255,255,255,0.4);  /* subtle white divider only */
    overflow: hidden;
    background: var(--purple-light);
}

.mc-row:last-child {
    border-bottom: none;
}

.mc-row span:first-child {
    background: var(--purple);
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
    padding: .28rem .6rem;             /* ← tighter vertical padding */
    min-width: 90px;
    width: 90px;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-right: 0;
}

.mc-row span:last-child {
    padding: .28rem .65rem;
    text-align: right;
    word-break: break-word;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;                      /* ← force white on value side */
}

/* Latest Row Styling */
.mc-row.row-latest span:last-child {
    background: var(--row-latest);
    font-weight: 600;
}

/* Alternate Row Styling (Combined for cleaner code) */
.mc-row.alt,
.mc-row.alt span:last-child {
    background: var(--purple-light);
}

/* Markup Column - Forces white background on the outer cell only */
.mc-row.markup-col > span:last-child {
    background: #ffffff !important;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .results-wrap { display:none; }
    .mobile-cards { display:block; }
}

/* Hamburger   X animation */
.nav-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav-hamburger span {
  transition: transform .2s, opacity .2s;
}

/* Markup column — purple background, white bold text */
td.markup-col {
    text-align: left;
    padding-left: .4rem;
}

th.markup-col {
    background-color: #4a1a8c !important;
    color: #fff !important;
    font-weight: bold !important;
}

/* Settings Dropdown */
.nav-dropdown { position: relative; display: flex; align-items: center; height: 100%; }
.dropdown-content {
  display: none; position: absolute; top: 100%; right: 0;
  background: var(--purple-dark); min-width: 140px;
  box-shadow: 0 8px 16px rgba(0,0,0,.3); border-radius: 0 0 4px 4px; z-index: 201;
}
.dropdown-content a {
  display: block; padding: .65rem 1rem; color: #ce93d8;
  text-decoration: none; font-size: .85rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.dropdown-content a:hover { background: rgba(255,255,255,.1); color: #fff; }
.dropdown-content a:last-child { border-bottom: none; }
.nav-dropdown:hover .dropdown-content { display: block; }