:root{
  --matx-brown:#5b3a1d;
  --matx-ice:#f4f8ff;
  --matx-dark:#0e141b;
  --matx-mid:#1b2633;
  --matx-line: rgba(255,255,255,.10);
  --matx-card: rgba(255,255,255,.06);
  --matx-card2: rgba(255,255,255,.09);
  --matx-glow: rgba(255,255,255,.08);
}

/* =========================================================
   Shell
========================================================= */
.matx-wrap{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1000px 500px at 80% 15%, rgba(91,58,29,.18), transparent 55%),
    linear-gradient(180deg, var(--matx-dark), #070b10);
  border: 1px solid var(--matx-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.matx-topbar{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--matx-line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.matx-brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width: 220px;
}

.matx-title{ line-height:1.05; }
.matx-title strong{ display:block; font-size: 15px; letter-spacing:.6px; }
.matx-title span{ display:block; font-size: 12px; opacity:.75; margin-top:2px; }

.matx-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.matx-btn{
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-size: 12px;
  font-weight: 650;
  letter-spacing:.3px;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.matx-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}
.matx-btn.primary{
  background: linear-gradient(145deg, rgba(91,58,29,.95), rgba(91,58,29,.55));
  border-color: rgba(255,255,255,.20);
}

/* =========================================================
   Scoreboard
========================================================= */
.matx-scoreboard{
  flex: 1;
  max-width: 540px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(400px 120px at 50% 0%, rgba(255,255,255,.08), transparent 70%);
  padding: 10px 12px;
  display:flex;
  justify-content:space-between;
  gap: 10px;

  /* alignment fix */
  align-items: flex-start;
}

.matx-sb-left{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width: 180px;
  padding-top: 2px; /* baseline align to chips */
}
.matx-sb-left .label{
  font-size: 11px;
  opacity:.72;
  letter-spacing:.35px;
  margin-bottom: 2px;
}
.matx-sb-left .event{
  font-size: 13px;
  font-weight: 750;
  letter-spacing:.3px;
}

.matx-sb-right{
  display:flex;
  gap:10px;
  align-items:flex-start; /* alignment fix */
}

.matx-sb-chip{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  min-width: 84px;
  text-align:center;
  padding: 8px 10px;

  /* internal centering */
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 54px;
}

.matx-sb-chip .small{
  display:block;
  font-size:10px;
  opacity:.70;
  letter-spacing:.35px;
  margin-bottom: 2px;
}
.matx-sb-chip .big{
  display:block;
  font-size: 14px;
  font-weight: 900;
  letter-spacing:.8px;
}

/* make digits feel stable */
.matx-sb-chip .big,
#matxClock,
#matxDays{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* status pill (single definition; you had this twice) */
.matx-status{
  min-width: auto;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
  white-space:nowrap;
}
.matx-status.open{ box-shadow: inset 0 0 0 999px rgba(46, 204, 113, .12); }
.matx-status.wait{ box-shadow: inset 0 0 0 999px rgba(241, 196, 15, .14); }
.matx-status.closed{ box-shadow: inset 0 0 0 999px rgba(231, 76, 60, .14); }

/* =========================================================
   Ticker
========================================================= */
.matx-ticker{
  border-top: 1px solid var(--matx-line);
  border-bottom: 1px solid var(--matx-line);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.matx-ticker-inner{
  display:flex;
  gap: 28px;
  padding: 10px 0;
  white-space: nowrap;
  will-change: transform;
  animation: matxMarquee 22s linear infinite;
}
.matx-ticker-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 0 14px;
  border-right: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  opacity:.92;
}
.matx-dot{
  width:8px;
  height:8px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.matx-dot.brown{ background: rgba(91,58,29,.95); }

@keyframes matxMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-45%); }
}

/* =========================================================
   Content grid + cards
========================================================= */
.matx-body{ padding: 18px; }

.matx-grid{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 14px;
}

.matx-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.matx-card h3{
  margin:0 0 10px 0;
  font-size: 13px;
  letter-spacing:.45px;
  text-transform: uppercase;
  opacity:.9;
}

.matx-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 10px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.matx-row:first-of-type{ border-top: none; padding-top:0; }
.matx-row .left{ display:flex; flex-direction:column; gap:2px; }
.matx-row .right{ text-align:right; }

.matx-muted{ opacity:.72; font-size: 12px; }
.matx-strong{ font-weight: 800; letter-spacing:.2px; }

.matx-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 700;
  white-space:nowrap;
}

/* =========================================================
   Profile
========================================================= */
.matx-profile{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
}
.matx-avatar{
  width:120px;
  height:120px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.matx-form{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.matx-field label{
  display:block;
  font-size: 11px;
  opacity:.75;
  letter-spacing:.35px;
  margin: 0 0 4px 0;
}
.matx-field input,
.matx-field select,
.matx-field textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  padding: 10px 10px;
  outline:none;
  font-size: 12px;
}
.matx-field textarea{
  min-height: 90px;
  grid-column: 1 / -1;
  resize: vertical;
}
.matx-save{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}

/* ==========================================================
   Masters ATX Profile Page
   ========================================================== */

/* ==========================================================
   Masters ATX Profile Page
   ========================================================== */

.matx-profile-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px;
}

.matx-page-title {
  margin: 0 0 6px;
  font-size: 32px;
  line-height: 1.15;
}

.matx-muted {
  margin: 0;
  opacity: 0.8;
}

.matx-notice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 600;
}

.matx-notice-success {
  background: rgba(70, 170, 110, 0.14);
  border: 1px solid rgba(70, 170, 110, 0.35);
}

.matx-profile-header-card {
  margin-bottom: 20px;
}

.matx-profile-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.matx-profile-preview-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.matx-profile-preview-mini img,
.matx-profile-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 64px;
}

.matx-profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
}

.matx-profile-preview-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.matx-profile-preview-text span {
  font-size: 14px;
  opacity: 0.8;
}

.matx-profile-form .matx-card {
  margin-bottom: 20px;
}

.matx-card-title {
  margin: 0 0 18px;
  font-size: 22px;
}

.matx-form-grid {
  display: grid;
  gap: 18px;
}

.matx-form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matx-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.matx-field-full {
  grid-column: 1 / -1;
}

.matx-field > label {
  font-weight: 700;
}

.matx-field input[type="text"],
.matx-field input[type="url"],
.matx-field input[type="number"],
.matx-field input[type="file"],
.matx-field select,
.matx-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: inherit;
  box-sizing: border-box;
}

.matx-field textarea {
  resize: vertical;
}

.matx-help {
  font-size: 13px;
  opacity: 0.75;
}

.matx-profile-photo-current {
  margin-bottom: 10px;
}

.matx-profile-photo-current img {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

.matx-inline-check-clean {
  margin-top: 8px;
}

.matx-check-grid {
  display: grid;
  gap: 10px 14px;
}

.matx-check-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matx-check-item,
.matx-check-stack label,
.matx-inline-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.matx-check-item input[type="checkbox"],
.matx-inline-check input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.matx-check-item span,
.matx-inline-check span {
  display: inline-block;
}

.matx-check-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.matx-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 12px;
}

.matx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.matx-btn-primary {
  background: #d4af37;
  color: #111;
}

@media (max-width: 767px) {
  .matx-profile-page {
    padding: 0 10px;
  }

  .matx-profile-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .matx-form-grid-2,
  .matx-check-grid-compact {
    grid-template-columns: 1fr;
  }

  .matx-profile-actions {
    justify-content: stretch;
  }

  .matx-profile-actions .matx-btn {
    width: 100%;
  }
}

/* =========================================================
   Admin section inside dashboard
========================================================= */
.matx-admin{
  margin-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.16);
  padding-top: 14px;
}




/* =========================================================
   Ops Page Theme (scoped)
   Use either #matx-ops wrapper OR .matx-ops-wrap wrapper
========================================================= */
#matx-ops input[type="text"],
#matx-ops input[type="email"],
#matx-ops input[type="number"],
#matx-ops input[type="search"],
#matx-ops input[type="date"],
#matx-ops input[type="datetime-local"],
#matx-ops select,
#matx-ops textarea,
.matx-ops-wrap input[type="text"],
.matx-ops-wrap input[type="email"],
.matx-ops-wrap input[type="number"],
.matx-ops-wrap input[type="search"],
.matx-ops-wrap input[type="date"],
.matx-ops-wrap input[type="datetime-local"],
.matx-ops-wrap select,
.matx-ops-wrap textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  padding: 10px 10px;
  outline: none;
}

#matx-ops button,
#matx-ops input[type="submit"],
.matx-ops-wrap button,
.matx-ops-wrap input[type="submit"]{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
#matx-ops button:hover,
#matx-ops input[type="submit"]:hover,
.matx-ops-wrap button:hover,
.matx-ops-wrap input[type="submit"]:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}

#matx-ops h1, #matx-ops h2, #matx-ops h3,
.matx-ops-wrap h1, .matx-ops-wrap h2, .matx-ops-wrap h3{
  color: rgba(255,255,255,.92);
}

#matx-ops .matx-ops-section,
.matx-ops-wrap .matx-ops-section{
  margin-bottom: 14px;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .matx-topbar{ flex-wrap:wrap; justify-content:center; }
  .matx-brand{ min-width: auto; justify-content:center; }
  .matx-scoreboard{ max-width:none; width:100%; }
  .matx-actions{ width:100%; justify-content:center; }
  .matx-grid{ grid-template-columns: 1fr; }
  .matx-profile{ grid-template-columns: 1fr; }
  .matx-avatar{ width: 100%; height: 160px; }
  .matx-form{ grid-template-columns: 1fr; }
}

/* scoreboard phone tightening */
@media (max-width: 520px){
  .matx-scoreboard{ padding: 12px 12px; }
  .matx-sb-right{ gap: 8px; }
  .matx-sb-chip{ min-width: 78px; padding: 8px 8px; }
  .matx-sb-chip .big{ font-size: 16px; letter-spacing: .2px; }
}

/* =========================================================
   Ops Panel – Mobile Responsiveness
   (scoped to .matx-admin or .matx-ops-skin containers)
========================================================= */

.matx-admin,
.matx-ops-skin{ max-width: 100%; }

/* Forms stack + tables scroll */
@media (max-width: 980px){

  .matx-admin .row,
  .matx-admin .columns,
  .matx-admin .grid,
  .matx-admin .field-row,
  .matx-admin .form-row,
  .matx-ops-skin .row,
  .matx-ops-skin .columns,
  .matx-ops-skin .grid,
  .matx-ops-skin .field-row,
  .matx-ops-skin .form-row{
    display: block !important;
  }

  .matx-admin input[type="text"],
  .matx-admin input[type="email"],
  .matx-admin input[type="number"],
  .matx-admin input[type="search"],
  .matx-admin input[type="date"],
  .matx-admin input[type="datetime-local"],
  .matx-admin select,
  .matx-admin textarea,
  .matx-ops-skin input[type="text"],
  .matx-ops-skin input[type="email"],
  .matx-ops-skin input[type="number"],
  .matx-ops-skin input[type="search"],
  .matx-ops-skin input[type="date"],
  .matx-ops-skin input[type="datetime-local"],
  .matx-ops-skin select,
  .matx-ops-skin textarea{
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* prevent mobile zoom */
  }

  .matx-admin table,
  .matx-ops-skin table{
    width: 100% !important;
    border-collapse: collapse;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .matx-admin th, .matx-admin td,
  .matx-ops-skin th, .matx-ops-skin td{
    padding: 10px 10px !important;
    font-size: 14px;
  }
}

@media (max-width: 520px){
  .matx-admin label,
  .matx-ops-skin label{
    display:block;
    margin-bottom: 6px;
  }
}

/* =========================
   Scoreboard overflow fix (mobile)
   Prevent CLOCK chip from clipping off-screen
========================= */
@media (max-width: 520px){

  .matx-scoreboard{
    flex-wrap: wrap;              /* allow left/right to break lines */
    row-gap: 10px;
  }

  /* Left side gets full row */
  .matx-sb-left{
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Right side gets its own full row */
  .matx-sb-right{
    flex: 1 1 100%;
    min-width: 0;
    justify-content: space-between; /* DAYS left, CLOCK right */
  }

  /* Chips shrink to fit instead of forcing overflow */
  .matx-sb-chip{
    flex: 1 1 0;
    min-width: 0;
  }
}