/*
Name: PIVOT Admin UI — "Stadium" design system
Purpose: Modern redesign of the PIVOT Management System, aligned with the
         book.bookpivot.com brand (ink navy / paper cream / pivot pink / cyan).
How it works: loaded AFTER css/style.css and overrides the legacy template's
         selectors. Remove this single <link> (and the font files) to fully
         roll back to the old look. No markup contract is changed.
Date: 2026-07-19
*/

/* ============================================================
   0. Fonts (self-hosted, no CDN)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin.woff2') format('woff2');
}

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  /* surfaces */
  --pv-ink: #0A0E1A;
  --pv-ink-2: #131826;
  --pv-ink-3: #1d2538;
  --pv-line-dark: #2a3247;
  --pv-paper: #F6F4EE;
  --pv-paper-2: #EFEBE0;
  --pv-paper-line: #E2DCCB;
  --pv-card: #FFFFFF;
  --pv-card-line: #E7E2D4;

  /* text */
  --pv-text: #14181F;
  --pv-text-soft: #353a47;
  --pv-text-mute: #757b88;
  --pv-text-faint: #9aa0ab;

  /* brand */
  --pv-pink: #E91E63;
  --pv-pink-bright: #FF2E78;
  --pv-pink-dark: #C2185B;
  --pv-pink-soft: #FDE9F0;
  --pv-cyan: #1BA8D0;
  --pv-cyan-bright: #36D6FF;
  --pv-cyan-soft: #E4F5FA;
  --pv-navy: #2C3A5C;

  /* status */
  --pv-green: #2E9E5B;
  --pv-green-deep: #227544;
  --pv-green-soft: #E7F4EC;
  --pv-amber: #E8A23D;
  --pv-amber-deep: #8a5a10;
  --pv-amber-soft: #FBF1DF;
  --pv-red: #D64545;
  --pv-red-deep: #a92f2f;
  --pv-red-soft: #FBEAEA;

  /* misc */
  --pv-radius-sm: 8px;
  --pv-radius: 12px;
  --pv-radius-lg: 16px;
  --pv-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --pv-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --pv-shadow-md: 0 10px 26px -8px rgba(16, 24, 40, 0.16);
  --pv-shadow-lg: 0 24px 60px -16px rgba(10, 14, 26, 0.35);
  --pv-font-ui: 'Inter', 'Poppins Regular', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pv-font-display: 'Bebas Neue', 'Inter', sans-serif;
}

/* ============================================================
   2. Base
   ============================================================ */
* { font-family: var(--pv-font-ui); box-sizing: border-box; }
.fa, .fas, .far, .fal, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands,
[class^="fa-"]::before, [class*=" fa-"]::before {
  font-family: 'Font Awesome 6 Pro' !important;
}
.fa-brands::before { font-family: 'Font Awesome 6 Brands' !important; }

body {
  font-family: var(--pv-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pv-text);
  background-color: var(--pv-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--pv-pink-dark); transition: color .15s ease; }
a:hover { color: var(--pv-pink-bright); border-bottom-color: transparent; }

hr {
  background-image: none;
  background: var(--pv-paper-line);
  height: 1px;
}

/* thin, quiet scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
::-webkit-scrollbar-track { background-color: transparent; -webkit-box-shadow: none !important; }
::-webkit-scrollbar-thumb { background-color: #CFC9B8; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background-color: #B9B2A0; }
* { scrollbar-color: #CFC9B8 transparent; }

/* ============================================================
   3. Loaders — swap hourglass/gif for a clean brand spinner
   ============================================================ */
@keyframes pv-spin { to { transform: rotate(360deg); } }

#exelodingdiv::before { background-color: var(--pv-paper); }
#exelodingdiv img { display: none; }
#exelodingdiv > div::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid var(--pv-paper-line);
  border-top-color: var(--pv-pink);
  border-radius: 50%;
  animation: pv-spin .7s linear infinite;
}

#loadingScreen { background: rgba(246, 244, 238, 0.65); }
.lds-hourglass { width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; }
.lds-hourglass:after {
  width: 42px; height: 42px;
  margin: 0;
  border: 3px solid var(--pv-paper-line);
  border-color: var(--pv-paper-line);
  border-top-color: var(--pv-pink);
  animation: pv-spin .7s linear infinite;
  box-sizing: border-box;
}

/* ============================================================
   4. Cards / panels
   ============================================================ */
.boxShaow {
  background: var(--pv-card);
  border: 1px solid var(--pv-card-line);
  border-radius: var(--pv-radius);
  box-shadow: var(--pv-shadow-xs);
}
.boxShaow:hover { box-shadow: var(--pv-shadow-sm); border-radius: var(--pv-radius); }

.shPanel, .shPanelCollapsed { padding: 24px; }
.shPanel .shPanelHeading h2, .shPanelCollapsed .shPanelHeading h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pv-text);
}
.shPanel .shPanelHeading span, .shPanelCollapsed .shPanelHeading span {
  border: 1px solid var(--pv-card-line);
  background: var(--pv-paper);
  color: var(--pv-text-mute);
  transition: all .15s ease;
}
.shPanel .shPanelHeading span:hover, .shPanelCollapsed .shPanelHeading span:hover {
  border-color: var(--pv-pink);
  color: var(--pv-pink);
}
.shPanelContentInner { overflow-x: auto; }
.shPanel .reloadingDIV { background: rgba(255, 255, 255, 0.8); border-radius: var(--pv-radius); }

#wrapper .emptywidget h2 {
  background: var(--pv-paper);
  border-left: 4px solid var(--pv-pink);
  border-bottom: 0;
  border-radius: 6px;
  color: var(--pv-text-soft);
}

/* ============================================================
   5. Buttons
   ============================================================ */
.button {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 11px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--pv-pink);
  background-image: none;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(233, 30, 99, 0.45);
  transition: all .15s ease;
}
.button:hover { background: var(--pv-pink-bright); transform: translateY(-1px); color: #fff; }

/* legacy gradient buttons → flat brand mapping (keep old semantics) */
.gradient-button-1, .gradient-button-2, .gradient-button-3, .gradient-button-4,
.gradient-button-5, .gradient-button-6, .gradient-button-7 { background-image: none !important; }
.btn-success, .gradient-button-1, .updateButton { background-color: var(--pv-green); border-color: var(--pv-green); color: #fff; }
.btn-info, .gradient-button-2, .editButton { background-color: var(--pv-cyan); border-color: var(--pv-cyan); color: #fff; }
.btn-danger, .gradient-button-3, .deleteButton { background-color: var(--pv-red); border-color: var(--pv-red); color: #fff; }
.btn-primary, .gradient-button-4 { background-color: var(--pv-navy); border-color: var(--pv-navy); color: #fff; }
.cancelButton { background-color: #fff; border: 1px solid var(--pv-paper-line); color: var(--pv-text-soft); }
.btn-default, .gradient-button-5 { background-color: #fff; border-color: var(--pv-paper-line); color: var(--pv-text-soft); }
.gradient-button-6 { background-color: var(--pv-pink); border-color: var(--pv-pink); color: #fff; }
.gradient-button-7 { background-color: var(--pv-cyan); border-color: var(--pv-cyan); color: #fff; }
.gradient-button-1:hover, .gradient-button-2:hover, .gradient-button-3:hover,
.gradient-button-4:hover, .gradient-button-5:hover, .gradient-button-6:hover {
  filter: brightness(1.08);
}
.cancelButton, .updateButton, .deleteButton, .editButton {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 24px;
  box-shadow: var(--pv-shadow-xs);
}

.btn { border-radius: var(--pv-radius-sm); font-weight: 600; }

.simpleButton {
  background: #fff;
  border: 1px solid #D8D2C2;
  color: var(--pv-text-soft);
  border-radius: var(--pv-radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 7px 14px;
  text-shadow: none;
  box-shadow: var(--pv-shadow-xs);
  transition: all .15s ease;
}
.simpleButton:hover { box-shadow: var(--pv-shadow-sm); border-color: var(--pv-text-faint); color: var(--pv-text); }
.simpleButton-success { background-color: var(--pv-green-soft) !important; border: 1px solid #BBDCC8 !important; color: var(--pv-green-deep) !important; }
.simpleButton-info    { background-color: var(--pv-cyan-soft) !important; border: 1px solid #B8E0EE !important; color: #106A85 !important; }
.simpleButton-warning { background-color: var(--pv-amber-soft) !important; border: 1px solid #ECD4A8 !important; color: var(--pv-amber-deep) !important; }
.simpleButton-danger  { background-color: var(--pv-red-soft) !important; border: 1px solid #EFC4C4 !important; color: var(--pv-red-deep) !important; }
.simpleButton-success:hover, .simpleButton-info:hover, .simpleButton-warning:hover, .simpleButton-danger:hover {
  filter: brightness(0.97);
  box-shadow: var(--pv-shadow-sm);
}

.tablebutton { background: var(--pv-red-soft); color: var(--pv-red-deep); border-radius: 8px; font-weight: 700; }

.textButton { border-bottom-style: solid; color: var(--pv-cyan); border-color: var(--pv-cyan); }
.textButton-danger { color: var(--pv-red); border-color: var(--pv-red); }
.textButton-success { color: var(--pv-green); border-color: var(--pv-green); }

.button_1-dark { background-color: var(--pv-pink); border-color: var(--pv-pink); border-radius: 10px; }
.button_1-dark:hover { background-color: var(--pv-pink-bright); border-color: var(--pv-pink-bright); }

.alertButton { border-radius: 8px; box-shadow: var(--pv-shadow-xs); font-weight: 600; }
.alertButton-success { background-color: var(--pv-green) !important; border-color: var(--pv-green) !important; }
.alertButton-info    { background-color: var(--pv-cyan) !important; border-color: var(--pv-cyan) !important; }
.alertButton-warning { background-color: var(--pv-amber) !important; border-color: var(--pv-amber) !important; }
.alertButton-danger  { background-color: var(--pv-red) !important; border-color: var(--pv-red) !important; }

/* ============================================================
   6. Alerts
   ============================================================ */
.alert {
  border-radius: var(--pv-radius-sm);
  box-shadow: none;
  border-width: 1px;
  border-left-width: 4px;
  font-weight: 500;
}
.alert-success { background-color: var(--pv-green-soft); color: var(--pv-green-deep); border-color: #BBDCC8; border-left-color: var(--pv-green); }
.alert-info    { background-color: var(--pv-cyan-soft); color: #106A85; border-color: #B8E0EE; border-left-color: var(--pv-cyan); }
.alert-warning { background-color: var(--pv-amber-soft); color: var(--pv-amber-deep); border-color: #ECD4A8; border-left-color: var(--pv-amber); }
.alert-danger  { background-color: var(--pv-red-soft); color: var(--pv-red-deep); border-color: #EFC4C4; border-left-color: var(--pv-red); }
.alert-danger a { background: var(--pv-red); border-radius: 6px; }
.alert-warning a { background: var(--pv-amber-deep); border-radius: 6px; }

/* status badges */
.double-val-label > span { background-color: var(--pv-ink-3); font-weight: 600; }
.double-val-label > span:first-child { border-radius: 6px 0 0 6px; }
.double-val-label > span:nth-child(2) { border-radius: 0 6px 6px 0; background-color: var(--pv-pink); }
.double-val-label > span.primary { background-color: var(--pv-navy); }
.double-val-label > span.success { background-color: var(--pv-green); }
.double-val-label > span.info    { background-color: var(--pv-cyan); }
.double-val-label > span.warning { background-color: var(--pv-amber); }
.double-val-label > span.danger  { background-color: var(--pv-red); }

/* solid color chips → brand palette */
.solidBGcolor1 { background: var(--pv-cyan) !important; }
.solidBGcolor2 { background: var(--pv-green) !important; }
.solidBGcolor3 { background: var(--pv-amber) !important; }
.solidBGcolor4 { background: var(--pv-pink) !important; }
.solidBGcolor5 { background: #3a4258 !important; }
.solidBGcolor6 { background: var(--pv-navy) !important; }
.solidBGcolor7 { background: var(--pv-pink-dark) !important; }
.solidBGcolor8 { background: var(--pv-ink-3) !important; }
.color1 { color: var(--pv-pink) !important; }
.color2 { color: var(--pv-cyan) !important; }
.color4 { color: var(--pv-green) !important; }
.color6 { color: var(--pv-navy) !important; }
.color7 { color: var(--pv-pink-dark) !important; }

/* legacy gradient swatches → calm brand fills */
.gradient-1-v, .gradient-1-h { background: var(--pv-amber) !important; }
.gradient-2-v, .gradient-2-h { background: var(--pv-cyan) !important; }
.gradient-3-v, .gradient-3-h { background: var(--pv-green) !important; }
.gradient-4-v, .gradient-4-h { background: var(--pv-green-deep) !important; }
.gradient-5-v, .gradient-5-h { background: #9aa0ab !important; }
.gradient-6-v, .gradient-6-h { background: var(--pv-pink) !important; }
.gradient-7-v, .gradient-7-h { background: var(--pv-cyan) !important; }
.animatedBG { background: var(--pv-ink) !important; animation: none !important; }

/* ============================================================
   7. Forms
   ============================================================ */
form label { font-size: 13px; font-weight: 600; color: var(--pv-text-soft); }
form h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pv-text-mute);
  border-bottom: 1px solid var(--pv-paper-line);
  padding-bottom: 6px;
}
form .custom-file-upload, form input[type="file"], form input[type="url"], form input[type="color"],
form input[type="date"], form input[type="month"], form input[type="number"],
form input[type="datetime-local"], form input[type="time"], form input[type="text"],
form input[type="password"], form input[type="email"], form textarea, form select {
  border: 1px solid #DCD6C6;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--pv-text);
  width: calc(100% - 30px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
form input[type="file"]:focus, form input[type="url"]:focus, form input[type="date"]:focus,
form input[type="month"]:focus, form input[type="number"]:focus, form input[type="datetime-local"]:focus,
form input[type="time"]:focus, form input[type="text"]:focus, form input[type="password"]:focus,
form input[type="email"]:focus, form textarea:focus, form select:focus {
  border: 1px solid var(--pv-pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12);
  background: #fff;
  outline: none;
}
form input[type="file"]:hover, form input[type="url"]:hover, form input[type="date"]:hover,
form input[type="month"]:hover, form input[type="number"]:hover, form input[type="datetime-local"]:hover,
form input[type="time"]:hover, form input[type="text"]:hover, form input[type="password"]:hover,
form input[type="email"]:hover, form textarea:hover, form select:hover {
  border: 1px solid #C9C2AE;
}
input[type="file"]:disabled, input[type="url"]:disabled, input[type="color"]:disabled,
input[type="date"]:disabled, input[type="number"]:disabled, input[type="time"]:disabled,
input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled,
textarea:disabled, select:disabled,
form .custom-file-upload:disabled, form input[type="file"]:disabled, form input[type="month"]:disabled,
form input[type="datetime-local"]:disabled, form textarea:disabled, form select:disabled {
  border: 1px solid var(--pv-paper-line);
  background: var(--pv-paper);
  color: var(--pv-text-mute);
}
form .form_field_error { color: var(--pv-red); font-style: normal; letter-spacing: 0; font-weight: 600; font-size: 12px; }

form .exe_switch input:checked + .exe_slider { background-color: var(--pv-pink); }
form .exe_switch input:focus + .exe_slider { box-shadow: 0 0 1px var(--pv-pink); }

.container input:checked ~ .checkmark { background-color: var(--pv-pink); }
.container input:checked ~ .radiomark { background-color: var(--pv-pink); }
.checkmark, .radiomark { background-color: #EAE6DA; }

.execb { border-color: var(--pv-text-mute); }
input[type=checkbox]:checked + .execb, .execb.checked { border-color: var(--pv-pink); }
.execb::before, .execb::after { background-color: var(--pv-pink); }

.radioButton_list .radioButton span {
  border-color: var(--pv-pink);
  color: var(--pv-pink);
  border-radius: 8px;
}
.radioButton_list .radioButton:hover span,
.radioButton_list .radioButton input:checked + span { background: var(--pv-pink); color: #fff; }

/* ============================================================
   8. Top bar (nav.php)
   ============================================================ */
#navBar { border-radius: 0; }
#navBar.boxShaow { border: 0; border-bottom: 1px solid var(--pv-paper-line); box-shadow: none; }
#navBar .navBar {
  border-bottom: 0;
  height: 64px;
  line-height: 64px;
  background: #FFFFFF;
}
#navBar .navBar span.showMenu {
  font-size: 19px;
  color: var(--pv-text-mute);
  border-radius: 10px;
  transition: all .15s ease;
}
#navBar .navBar span.showMenu:hover { background: var(--pv-paper); box-shadow: none; color: var(--pv-text); }
#navBar .navBar span.showMenu b {
  background: var(--pv-pink) !important;
  bottom: 12px;
  font-weight: 600;
  border: 2px solid #fff;
}
#navBar .navBar span.user { padding: 12px 15px; }
#navBar .navBar span.user img {
  border: 2px solid var(--pv-pink);
  box-shadow: none;
}
#navBar .notificationDIV {
  top: 64px;
  border: 1px solid var(--pv-card-line);
  border-radius: 0 0 var(--pv-radius) var(--pv-radius);
  box-shadow: var(--pv-shadow-md);
  /* legacy fixed height:300px left a huge empty gap between the list and the
     footer bar when there were few/no items — hug the content instead */
  height: auto;
}
#navBar .notificationDIV ul,
#navBar .notificationDIV ol {
  height: auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}
#navBar .notificationDIV ul { max-height: 223px; }
#navBar .notificationDIV ol { max-height: 188px; }
/* legacy style.css sizes these with fixed content-box heights (26px + padding);
   our global border-box reset shrank them so text overlapped — let them size
   naturally instead */
#navBar .notificationDIV .notiTitle,
#navBar .notificationDIV .notiSubTitle,
#navBar .notificationDIV ol li {
  height: auto;
}
#navBar .notificationDIV .notiTitle { padding: 12px 15px; line-height: 1.4; }
/* the anchor wrapping each .notiTitle is inline, so its block child overflowed
   it and the next sibling rendered 20px too high — make the anchor a block */
#navBar .notificationDIV > a { display: block; }
/* .notiTitle/.notiSubTitle children (.left/.right) are floats, so height:auto
   collapses to padding-only — contain the floats with a BFC */
#navBar .notificationDIV .notiTitle,
#navBar .notificationDIV .notiSubTitle { overflow: hidden; }
#navBar .notificationDIV .notiSubTitle { padding: 6px 15px; line-height: 1.6; }
#navBar .notificationDIV ol li { padding: 10px 12px; line-height: 27px; }
#navBar .notificationDIV ol li h3 { display: inline-block; }
#navBar .notificationDIV .notiTitle { font-size: 14px; font-weight: 700; letter-spacing: 0.03em; }
#navBar .notificationDIV ul li h3, #navBar .notificationDIV ol li h3 { color: var(--pv-text-soft); }
#navBar .notificationDIV .notiSubTitle { background: var(--pv-paper); border-bottom: 1px solid var(--pv-paper-line); }
#navBar .notificationDIV ul li, #navBar .notificationDIV ol li { border-bottom: 1px solid var(--pv-paper-2); }

/* ============================================================
   9. Sidebar
   ============================================================ */
#sidebar {
  background: var(--pv-ink) !important;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(27, 168, 208, 0.10), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(233, 30, 99, 0.10), transparent 70%) !important;
  color: #aeb6c8;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
}
#sidebar:hover { box-shadow: none !important; }

#sidebar .sidebar_logo {
  background: transparent !important;
  animation: none !important;
  box-shadow: none;
  border-bottom: 1px solid var(--pv-line-dark);
  height: auto;
  padding: 20px 12px 16px 12px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
}
#sidebar .sidebar_logo img {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  background-color: #fff;
}
#sidebar .sidebar_logo .fa-div { color: #8b93a7; margin-top: 8px; }
#sidebar .sidebar_logo .fa-div a { color: #8b93a7; }
#sidebar .sidebar_logo .fa-div a:hover { color: var(--pv-cyan-bright); }
#sidebar .sidebar_logo .double-val-label { font-size: 11px; margin-top: 4px; }

#sidebar ul.sidebar_menu {
  flex: 1 1 auto;
  height: auto !important;
  overflow-y: auto;
  padding: 10px 8px;
}
#sidebar ul.sidebar_menu::-webkit-scrollbar { width: 6px; }
#sidebar ul.sidebar_menu::-webkit-scrollbar-thumb { background-color: var(--pv-line-dark); }
#sidebar ul.sidebar_menu { scrollbar-color: var(--pv-line-dark) transparent; }

#sidebar ul .sidebar_title {
  color: #6b7488;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 18px 12px 6px 12px;
}
#sidebar ul a { color: #aeb6c8; }
#sidebar ul .text { color: #aeb6c8; font-size: 13.5px; line-height: 22px; }
#sidebar ul #first_level {
  padding: 9px 10px;
  border-radius: 10px;
  margin: 1px 4px;
  transition: background .15s ease;
}
#sidebar ul #first_level .fa-div { width: 26px; margin-right: 10px; color: #7c86a0; }
#sidebar ul #first_level .fa-div .fa-regular,
#sidebar ul #first_level .fa-div .fa-solid { font-size: 16px; }

/* kill the old gradient-text hover trick; use clean states */
#sidebar #first_level:hover { background: rgba(255, 255, 255, 0.06); }
#sidebar #first_level:hover .text, #sidebar #first_level .text_active {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #FFFFFF;
}
#sidebar #first_level:hover .fa-div, #sidebar #first_level .fa-div_active { color: var(--pv-cyan-bright) !important; }
#sidebar #first_level:hover .show, #sidebar #first_level .show_active { color: var(--pv-cyan-bright) !important; }
#sidebar #second_level:hover .text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #FFFFFF;
}
#sidebar ul .active { background: rgba(233, 30, 99, 0.14); border-radius: 10px; box-shadow: inset 3px 0 0 var(--pv-pink); }
#sidebar ul .active .text { color: #fff; }
#sidebar ul ul #second_level { padding: 8px 0 8px 48px; border-radius: 10px; margin: 0 4px; }
#sidebar ul ul #second_level:hover { background: rgba(255, 255, 255, 0.06); }
#sidebar ul ul #second_level:hover a {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #fff;
}
#sidebar ul #first_level .show { color: #6b7488; }

/* collapsed rail */
.small_sidebar .small_sidebar_logo {
  background: transparent !important;
  box-shadow: none;
  height: 64px;
  line-height: 64px;
  border-bottom: 1px solid var(--pv-line-dark);
}
.small_sidebar ul.sidebar_menu { height: auto !important; }
.small_sidebar ul #first_level { padding: 10px 6px !important; text-align: center; }
.small_sidebar ul ul.children {
  background: var(--pv-ink-2);
  border: 1px solid var(--pv-line-dark);
  border-radius: var(--pv-radius);
  box-shadow: var(--pv-shadow-lg);
  padding: 6px;
}

/* ============================================================
   10. Wrapper / breadcrumb / page headings
   ============================================================ */
#wrapper { background: var(--pv-paper); }
#breadcrumb { background: transparent; }
#breadcrumb .breadcrumb { padding: 12px 24px 0 24px; font-size: 12px; color: var(--pv-text-faint); }
#breadcrumb .breadcrumb a { color: var(--pv-text-mute); font-weight: 500; }
#breadcrumb .breadcrumb a:hover { color: var(--pv-pink); }

.wrapper { padding: 20px 24px 0 24px; overflow-y: auto; height: calc(100vh - 158px); }
.wrapper #pageHeading h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.wrapper .welcomeGreetings h2 { font-size: 24px !important; font-weight: 700; }
.wrapper .welcomeGreetings h2 span { font-size: 24px !important; color: var(--pv-text-mute); font-weight: 400; }
.wrapper .welcomeGreetings p { color: var(--pv-text-mute); }

#PageTitleBanner {
  background: var(--pv-ink);
  background-image:
    radial-gradient(ellipse at top right, rgba(27, 168, 208, 0.25), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(233, 30, 99, 0.28), transparent 55%);
  height: auto;
  border-radius: var(--pv-radius-lg);
}
#PageTitleBanner h1 {
  font-family: var(--pv-font-display);
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.045em;
  padding: 22px 28px;
  line-height: 1;
}

/* ============================================================
   11. Dashboard tiles & widgets
   ============================================================ */
#wrapper .summaryTiles8, #wrapper .summaryTiles9 { border-radius: var(--pv-radius-lg); }
/* beat the inline card1.png mosaic on the dashboard banner */
#wrapper .summaryTiles8 {
  background: var(--pv-ink) !important;
  background-image:
    radial-gradient(ellipse at top right, rgba(27, 168, 208, 0.30), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(233, 30, 99, 0.30), transparent 55%) !important;
}
#wrapper .summaryTiles9::before { opacity: 0.14; font-size: 170px; }
#wrapper .summaryTiles9 h2, #wrapper .summaryTiles8 h2 { font-size: 26px; font-weight: 600; }
#wrapper .summaryTiles9 h2 b, #wrapper .summaryTiles8 h2 b {
  font-family: var(--pv-font-display);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0.03em;
  margin-right: 4px;
}
#wrapper .summaryTiles9 p, #wrapper .summaryTiles8 p { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
#wrapper .summaryTiles8 a, #wrapper .summaryTiles9 a { color: #fff; }
#wrapper .summaryTiles8 a:hover, #wrapper .summaryTiles9 a:hover { color: var(--pv-cyan-bright); }
#wrapper .summaryTiles8 .button_1, #wrapper .summaryTiles9 .button_1 { border-radius: 10px; }

#wrapper .summaryTiles10 { border-radius: var(--pv-radius-lg); border: 1px solid var(--pv-card-line); }
#wrapper .summaryTiles10 .top {
  background: var(--pv-ink);
  background-image:
    radial-gradient(ellipse at top right, rgba(27, 168, 208, 0.3), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(233, 30, 99, 0.3), transparent 60%);
}
#wrapper .summaryTiles10 .bottom .icon .fa-div { border-radius: var(--pv-radius); }
#wrapper .summaryTiles10 .bottom .icon b, #wrapper .summaryTiles10 .bottom .icon i { color: var(--pv-text); }

#wrapper .widget { border-radius: var(--pv-radius); }
#wrapper .widget h1.heading { font-size: 22px; font-weight: 700; }

#wrapper ul.widgetList li { border-bottom: 1px solid var(--pv-paper-2); }
#wrapper ul.widgetList li:nth-child(even) { background: transparent; }
#wrapper ul.widgetList li:hover { border-left: 3px solid var(--pv-pink); background: var(--pv-pink-soft); }
#wrapper ul.widgetList li h4 { color: var(--pv-text); font-weight: 600; }
#wrapper ul.widgetList li a { color: var(--pv-cyan); }
#wrapper ul.widgetList li a:hover { color: var(--pv-pink); }

#wrapper ul.widgetDualList li:before { border-left: 2px dotted #D8D2C2; }

/* form widget (side panels like "Settings: UPDATE") */
#wrapper .formWidget { border: 1px solid var(--pv-card-line); border-radius: var(--pv-radius); background: #fff; }
#wrapper .formWidget .heading {
  border-bottom: 1px solid var(--pv-paper-line);
  background: #FBFAF6;
  color: var(--pv-text-mute);
  font-size: 12px;
  letter-spacing: 0.07em;
  border-radius: var(--pv-radius) var(--pv-radius) 0 0;
}

/* graph & caption blocks */
.graphWidgetCaption { background: var(--pv-paper); box-shadow: none; border: 1px solid var(--pv-paper-line); border-radius: var(--pv-radius-sm); }
.widgetTableDIV { background: var(--pv-amber-soft); border: 1px solid #ECD4A8; border-radius: var(--pv-radius-sm); }

marquee.marquee_notification { background: var(--pv-ink-2); border-radius: var(--pv-radius); font-weight: 500; }
marquee.marquee_notification span { color: var(--pv-ink-2); border-radius: 6px; }

/* ============================================================
   11b. Admin analytics dashboard (dashboard.php)
   ============================================================ */
.pv-kpi {
  margin: 10px;
  padding: 18px 20px;
  border-radius: var(--pv-radius);
  display: block;
}
.pv-kpi-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pv-text-mute);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-kpi-label .fa-regular, .pv-kpi-label .fa-solid { color: var(--pv-pink); margin-right: 4px; }
.pv-kpi-value {
  display: block;
  font-family: var(--pv-font-display);
  font-size: 34px;
  line-height: 1.1;
  color: var(--pv-text);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.pv-delta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  vertical-align: middle;
}
.pv-delta-up { background: var(--pv-green-soft); color: var(--pv-green-deep); }
.pv-delta-down { background: var(--pv-red-soft); color: var(--pv-red-deep); }
.pv-delta-flat { background: var(--pv-paper-2); color: var(--pv-text-mute); }
.pv-kpi-vs { font-size: 11px; color: var(--pv-text-faint); margin-left: 4px; }

.pv-chartbox { position: relative; height: 220px; width: 100%; }
.pv-chartbox-tall { height: 280px; }

.pv-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: 0.03em;
}
.pv-chip-green { background: var(--pv-green-soft); color: var(--pv-green-deep); }
.pv-chip-red   { background: var(--pv-red-soft); color: var(--pv-red-deep); }
.pv-chip-amber { background: var(--pv-amber-soft); color: var(--pv-amber-deep); }
.pv-chip-gray  { background: var(--pv-paper-2); color: var(--pv-text-mute); }

.pv-quicklink {
  display: block !important;
  width: 100%;
  margin: 8px 0;
  padding: 10px 14px !important;
  font-size: 12px !important;
  text-align: left;
  border-radius: 10px;
}
.pv-quicklink .fa-regular, .pv-quicklink .fa-solid { margin-right: 8px; width: 16px; text-align: center; }

/* Quick-access bar pinned to the very top of the dashboard. Horizontal pills
   that wrap, so the common daily screens are one tap away without scrolling.
   Distinct from .pv-quicklink, which stacks full-width inside a side widget. */
.pv-quickbar {
  margin: 16px 10px 0 10px;
  padding: 13px 16px;
  border-radius: var(--pv-radius);
  background: var(--pv-paper);
  border: 1px solid var(--pv-paper-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.pv-quickbar .pv-qb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pv-text-mute);
  margin-right: 2px;
}
.pv-quickbar a.pv-qb {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 9px 15px !important;
  font-size: 12px !important;
  border-radius: 999px;
  white-space: nowrap;
}
.pv-quickbar a.pv-qb .fa-regular,
.pv-quickbar a.pv-qb .fa-solid { margin: 0; width: auto; text-align: center; }

@media only screen and (max-width: 640px) {
  /* Grid rather than flex-basis: the labels are long enough that a 50% basis
     still overflows and each pill claims its own row, which buried the dashboard
     under nine rows of buttons. Two fixed columns keeps the bar compact. */
  .pv-quickbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }
  .pv-quickbar .pv-qb-label { grid-column: 1 / -1; margin: 0; }
  .pv-quickbar a.pv-qb {
    width: 100%;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px !important;
    font-size: 11px !important;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media only screen and (max-width: 966px) {
  .pv-kpi { margin: 10px 10px 0 10px; }
  .pv-chartbox, .pv-chartbox-tall { height: 220px; }
}

/* ============================================================
   11c. Shared list-page redesign (.pv-list) — players, clubs, etc.
        Toolbar, avatars, chips, NULL dashes. The players-only password
        column hide stays scoped to .pv-players below.
   ============================================================ */
.pv-toolbar { margin: 16px 10px; padding: 16px 18px 14px 18px; border-radius: var(--pv-radius); }
.pv-toolbar-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.pv-toolbar-row:last-of-type { margin-bottom: 0; }
.pv-field { display: flex; flex-direction: column; min-width: 140px; }
.pv-field-grow { flex: 1 1 220px; }
.pv-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pv-text-mute);
  margin-bottom: 5px;
}
.pv-list .pv-field input[type="text"],
.pv-list .pv-field input[type="number"],
.pv-list .pv-field select {
  width: 100%;
  border: 1px solid #DCD6C6;
  background: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--pv-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pv-list .pv-field input[type="text"]:focus,
.pv-list .pv-field input[type="number"]:focus,
.pv-list .pv-field select:focus {
  outline: none;
  border-color: var(--pv-pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12);
}
.pv-search-wrap { position: relative; display: block; }
.pv-search-wrap .fa-solid {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--pv-text-faint); font-size: 13px; pointer-events: none;
}
.pv-list .pv-search-wrap input[type="text"] { padding-left: 34px; }
.pv-field-btn { min-width: 0; justify-content: flex-end; }
.pv-list .pv-field-btn .simpleButton { width: 100%; padding: 9px 14px; }
.pv-toolbar-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pv-paper-line); flex-wrap: wrap; }
.pv-toolbar-actions .simpleButton { font-size: 12px; }

/* table card + slimmer player rows */
.pv-tablecard { padding: 8px 10px 14px 10px; }
/* per-column deep-filter row (2nd head row): hidden by default — the toolbar covers
   the common cases — but restorable via the "Column Filters" toolbar toggle, which
   sets body.pv-colfilters. The inputs stay in the DOM either way so the toolbar can
   still drive them, and typed values survive toggling (the head renders only once). */
.pv-list:not(.pv-colfilters) #ViewTable_showTableDataHead .tableRowHead:nth-child(2) { display: none !important; }
/* restyle that row when shown */
.pv-list.pv-colfilters #ViewTable_showTableDataHead .tableRowHead:nth-child(2) .tableCell {
  background: var(--pv-paper);
  padding: 8px 6px;
  vertical-align: middle;
}
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell input[type="text"],
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell input[type="number"],
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell input[type="date"],
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell select {
  width: 100%;
  min-width: 88px;
  border: 1px solid #DCD6C6;
  background: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--pv-text);
  margin: 2px 0;
  box-sizing: border-box;
}
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell select { min-width: 64px; }
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell input:focus,
.pv-list.pv-colfilters .tableRowHead:nth-child(2) .tableCell select:focus {
  outline: none;
  border-color: var(--pv-pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12);
}
/* the toolbar toggle button while the row is shown */
.pv-list .pv-colfilter-btn.pv-colfilter-on {
  background: var(--pv-pink) !important;
  border-color: var(--pv-pink) !important;
  color: #fff !important;
}
/* hide the niche "Password" admin-action column (2nd cell: after Action) in BOTH
   head rows (title + filter row — players' filter cell there is "Filter Disabled")
   so columns stay aligned when the filter row is toggled on.
   PLAYERS ONLY — scoped to .pv-players; other list pages have no such column. */
.pv-players #ViewTable_showTableDataHead .tableRowHead .tableCell:nth-child(2),
.pv-players .divTable .tableRow .tableCell:nth-child(2) { display: none !important; }
/* muted placeholder for empty / NULL values */
.pv-list .pv-null { color: var(--pv-text-faint); }
/* round avatar thumbnails instead of giant banners */
.pv-list .divTable .tableRow .tableCell img {
  width: 42px; height: 42px; object-fit: cover; border-radius: 50%;
  margin: 0; border: 1px solid var(--pv-card-line); background: var(--pv-paper);
}
.pv-list .divTable .tableRow .tableCell { vertical-align: middle; }

/* status / verification chips injected by JS */
.pv-list .pv-chip {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.pv-list .pv-chip-green { background: var(--pv-green-soft); color: var(--pv-green-deep); }
.pv-list .pv-chip-amber { background: var(--pv-amber-soft); color: var(--pv-amber-deep); }
.pv-list .pv-chip-red   { background: var(--pv-red-soft); color: var(--pv-red-deep); }

@media only screen and (max-width: 600px) {
  .pv-field, .pv-field-grow { flex: 1 1 100%; min-width: 0; }
}

/* ============================================================
   12. Tables
   ============================================================ */
#table { overflow-x: auto; }
.table, .divTable {
  border: 1px solid var(--pv-card-line);
  border-radius: var(--pv-radius);
  overflow: hidden;
}
.table th,
.divTable .tableRowHead .tableCell {
  background: #FBFAF6;
  color: var(--pv-text-mute);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pv-card-line);
  border-right: 0;
  padding: 12px 14px;
}
.table td,
.divTable .tableRow .tableCell {
  border-right: 0;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--pv-text-soft);
}
.table tr, .divTable .tableRow, .divTable .tableRowHead {
  border-top: 0;
  border-bottom: 1px solid var(--pv-paper-2);
  font-size: 13px;
}
.table tr:nth-child(odd), .divTable .tableRow:nth-child(odd) { background: #FAF9F4; }
.table tr:hover td, .divTable .tableRow:hover .tableCell { background: rgba(233, 30, 99, 0.055); }
.table tr:nth-child(odd):hover, .divTable .tableRow:nth-child(odd):hover { background: transparent; }
.table .link, .divTable .link { color: var(--pv-cyan); }
.table a span.fa, .divTable a span.fa-solid { color: var(--pv-cyan); }
.divTable a.simpleButton { border-radius: 999px; line-height: 22px; }

/* filter row under table headers */
.table tr:nth-child(2) th,
.divTable .tableRowHead:nth-child(2) .tableCell { background: #FFFFFF; padding: 8px; }
.table tr input[type="date"], .table tr input[type="number"], .table tr input[type="time"],
.table tr input[type="text"], .table tr input[type="password"], .table tr input[type="email"],
.table tr textarea, .table tr select,
.divTable .tableRowHead select, .divTable .tableRowHead input[type="date"],
.divTable .tableRowHead input[type="number"], .divTable .tableRowHead input[type="time"],
.divTable .tableRowHead input[type="text"], .divTable .tableRowHead input[type="password"],
.divTable .tableRowHead input[type="email"], .divTable .tableRowHead textarea {
  border: 1px solid var(--pv-paper-line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.divTable .tableRowHead input[type="button"] { border-radius: 8px; font-weight: 700; }

table.widgetTable th {
  color: var(--pv-text-mute);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
table.widgetTable td { font-size: 13px; color: var(--pv-text-soft); }
table.widgetTable tr:nth-child(odd) { background: #FAF9F4; }
table.widgetTable td a { color: var(--pv-cyan); }

/* pagination — sized to fit content so 3+ digit counts and the
   First/Last Page labels never clip (2026-07-20). */
.showPaginationData { line-height: 2; }
.showPaginationData p { border-bottom: 0; }
.showPaginationData p label { font-size: 13px; }
.showPaginationData p input[type="text"] {
  border: 1px solid var(--pv-paper-line);
  border-radius: 8px;
  padding: 5px 8px;
  width: 58px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
}
.showPaginationData p select { border: 1px solid var(--pv-paper-line); border-radius: 8px; padding: 4px 8px; height: auto; }
.showPaginationData .paginationPages a {
  box-sizing: border-box;
  border: 1px solid var(--pv-paper-line);
  border-radius: 8px;
  color: var(--pv-text-mute);
  min-width: 32px;
  width: auto;
  height: auto;
  line-height: 1.5;
  padding: 6px 10px;
  margin: 0 2px;
  background: #fff;
  font-size: 12px;
  text-align: center;
  transition: all .15s ease;
}
.showPaginationData .paginationPages a:hover { background: var(--pv-paper); border-color: var(--pv-text-faint); color: var(--pv-text); }
.showPaginationData .paginationPages a.currentPage {
  background: var(--pv-ink);
  border-color: var(--pv-ink);
  color: #fff;
  padding: 6px 10px;
  font-weight: 700;
}
.showPaginationData .paginationPages a.currentPage:hover { background: var(--pv-ink-3); color: #fff; }
.showPaginationData .paginationPages a.firstPage,
.showPaginationData .paginationPages a.lastPage { width: auto; min-width: 0; height: auto; padding: 6px 14px; background: #fff; }
.showPaginationData .paginationPages a.previousPage,
.showPaginationData .paginationPages a.nextPage { width: auto; min-width: 36px; height: auto; padding: 6px 11px; background: #fff; }
#showTableFooter a { border-radius: 8px; }

/* ============================================================
   13. Tabs / accordions / misc panels
   ============================================================ */
.tabs label.tabButton {
  border: 1px solid var(--pv-paper-line);
  border-radius: 10px 10px 0 0;
  background: var(--pv-paper);
  color: var(--pv-text-mute);
  font-weight: 600;
}
.tabs input[type="radio"]:checked + label.tabButton {
  color: var(--pv-pink);
  border-bottom: 1px solid #FFFFFF;
  font-weight: 700;
}
.tabs .tab { border: 1px solid var(--pv-paper-line); border-radius: 0 var(--pv-radius) var(--pv-radius) var(--pv-radius); background: #fff; overflow-x: auto; }

.exeDIRECTtabsDIV .exeDIRECTtabsDIV-nav li { background-color: var(--pv-paper-2); text-indent: 0; padding: 10px 16px; font-size: 15px; border-radius: 10px; }
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-nav li:after { border-left-color: var(--pv-paper-2); }
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-nav li.active { background-color: var(--pv-pink); }
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-nav li.active:after { border-left-color: var(--pv-pink); }
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-nav li:hover { background-color: #DDD6C4; }
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-nav li:hover:after { border-left-color: #DDD6C4; }
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-content,
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-content { border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-xs); border: 1px solid var(--pv-card-line); }

/* vertical tab variant → readable horizontal pills */
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-nav { border-bottom: 0; padding-bottom: 8px; }
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-nav > li > a {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  transform: none;
  height: auto;
  border: 1px solid var(--pv-paper-line);
  border-radius: 10px;
  background: var(--pv-paper);
  color: var(--pv-text-mute);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  margin: 0 6px 0 0;
}
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-nav > li > a:hover { border-color: var(--pv-text-faint); color: var(--pv-text); }
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-nav > li.active > a,
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-nav > li.active > a:hover,
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-nav > li.active > a:focus {
  background: var(--pv-ink);
  border: 1px solid var(--pv-ink);
  color: #fff;
}
.exeDIRECTtabsDIV .exeDIRECTtabsDIV-content > .exeDIRECTtabsDIV-pane.active,
.exeDIRECTtabsDIV-V .exeDIRECTtabsDIV-content > .exeDIRECTtabsDIV-pane.active { overflow-x: auto; }

#accordion .accordion { background-color: var(--pv-paper); border-radius: 8px; font-weight: 600; }
#accordion .active, #accordion .accordion:hover { background-color: var(--pv-paper-2) !important; }
#accordion .panel { background-color: #fff; border-radius: 0 0 8px 8px; }

.faq-number { background-color: var(--pv-pink); }
.faq-icon::before, .faq-icon::after { background-color: var(--pv-pink); }
.faq-accordion { border: 1px solid var(--pv-card-line); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-xs); }
.faq-subject { background-color: #FBFAF6; }

.dividerHeading { border-bottom: 1px solid var(--pv-paper-line); }
.dividerHeading span { background: #fff; color: var(--pv-text-mute); font-weight: 600; }

/* pop-ups */
#popupDIV { background: rgba(10, 14, 26, 0.45); }
#popupDIV #popupDIVcontentInner {
  border: 1px solid var(--pv-card-line);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-lg);
  overflow: hidden;
}
#popupDIV .popupClose {
  background: var(--pv-ink);
  transition: background .15s ease;
  border-radius: 99px;
}
#popupDIV .popupClose:hover { background: var(--pv-red); }
#popupDIV .popupData .popupDataHeading {
  font-family: var(--pv-font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--pv-paper-line);
}
#popupDIV .popupData .popupDataRow { border-bottom: 1px dashed var(--pv-paper-line); }

.custom_modal { background-color: rgba(10, 14, 26, 0.45); }
.custom_modal-content { border-radius: var(--pv-radius-lg); box-shadow: var(--pv-shadow-lg); }
.custom_close-button { background-color: var(--pv-ink); border-radius: 99px; }
.custom_close-button:hover { background-color: var(--pv-red); }

/* tickets / forum */
.exe_tik_main { background: #fff; border: 1px solid var(--pv-card-line); border-radius: var(--pv-radius); }
.exe_tik_main .exe_tik_title { font-size: 20px; }
.exe_tik_replies .exe_tik_reply, .exe_tik_add { border: 1px solid var(--pv-paper-line); border-radius: var(--pv-radius-sm); background: #fff; }
.exe_forum_replies { border: 1px solid var(--pv-paper-line); border-radius: var(--pv-radius-sm); background: #FBFAF6; }

/* chat */
#chatmessagesbox { background-image: none; background: var(--pv-paper); border-radius: var(--pv-radius); }
#chatmessagesbox .chatmessagesboxInner { background: transparent; }
#chatmessagesbox .chatmessagesboxInner .chatmessageME .chatmessage_msg {
  background: #fff; border: 1px solid var(--pv-paper-line);
  border-radius: 14px 14px 14px 4px;
}
#chatmessagesbox .chatmessagesboxInner .chatmessageOTHER .chatmessage_msg {
  background: var(--pv-cyan-soft); border: 1px solid #B8E0EE;
  border-radius: 14px 14px 4px 14px;
}

/* calendar */
#exeCalenderTable table { border: 1px solid var(--pv-card-line); border-radius: var(--pv-radius); overflow: hidden; }
#exeCalenderTable table th { background: #FBFAF6; color: var(--pv-text-mute); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; }
#exeCalenderTable table td { font-size: 15px; font-weight: 600; }
#exeCalenderTable table tr:nth-child(odd) { background: #FAF9F4; }
#exeCalenderTable .events { background: var(--pv-cyan-soft); border-radius: 8px; }
#exeCalenderTable .naviBtn { background: #fff; border: 1px solid var(--pv-paper-line); box-shadow: var(--pv-shadow-xs); }

/* progress */
#progressBarMain .progressBarResult { background-color: var(--pv-cyan); }
#progressBarMain #progressBar { background-color: var(--pv-paper-2); }

/* pricing tables */
.pricing-table { box-shadow: var(--pv-shadow-md); border-radius: var(--pv-radius-lg); overflow: hidden; }
.pricing-features { color: var(--pv-cyan); }
.pricing-price { color: var(--pv-pink); }
.pricing-button { border: 1px solid var(--pv-pink); color: var(--pv-pink); border-radius: 10px; }
.pricing-button:focus, .pricing-button:hover { background-color: var(--pv-pink-soft); }
.pricing-button.is-featured { background-color: var(--pv-pink); }
.pricing-button.is-featured:active, .pricing-button.is-featured:hover { background-color: var(--pv-pink-bright); }

/* profile card widget */
#profile .profile-card { border: 1px solid var(--pv-card-line); }
#profile .profile-card::before { background: var(--pv-ink); background-image: radial-gradient(ellipse at top right, rgba(27,168,208,.35), transparent 60%), radial-gradient(ellipse at bottom left, rgba(233,30,99,.35), transparent 60%); }
#profile .badge { background: var(--pv-pink-soft); color: var(--pv-pink-dark); }

/* ============================================================
   14. Footer
   ============================================================ */
#footer { color: var(--pv-text-faint); font-size: 12px; height: auto; line-height: 46px; }
#footer a { color: var(--pv-text-mute); font-weight: 600; }
#footer a:hover { color: var(--pv-pink); border-bottom: 0; }

/* ============================================================
   15. Login & landing pages
   ============================================================ */
/* Management login (home.php) */
.loginCard_2 {
  background-image:
    radial-gradient(ellipse at top right, rgba(27, 168, 208, 0.22), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(233, 30, 99, 0.26), transparent 60%),
    repeating-linear-gradient(135deg, #2c3a5c 0 32px, #243151 32px 64px);
}
.loginCard_2 .loginCardMain {
  border: 0;
  box-shadow: var(--pv-shadow-lg);
  border-radius: var(--pv-radius-lg);
}
.loginCard_2 .loginCardMain .login { border-radius: var(--pv-radius-lg); }
.loginCard_2 .loginCardMain .Login-Circle-1, .loginCard_2 .loginCardMain .Login-Circle-2 { display: none; }
.loginCard_2 .loginCardMain .login_title {
  background: var(--pv-ink);
  background-image:
    radial-gradient(ellipse at top right, rgba(27, 168, 208, 0.30), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(233, 30, 99, 0.30), transparent 60%);
  border-radius: var(--pv-radius-lg) var(--pv-radius-lg) 0 0;
  box-shadow: none;
}
.loginCard_2 .loginCardMain .login_form input[type="submit"] {
  box-shadow: 0 6px 16px -6px rgba(233, 30, 99, 0.45) !important;
  border: 0 !important;
}
.loginCard_2 .loginCardMain .login_form span { font-style: normal; color: var(--pv-text-faint); }
.loginCard_2 .loginCardMain .login_credit i { color: var(--pv-text-mute); font-size: 12px; }

/* Landing (index.php, loginCard_3) */
.loginCard_3 .loginCardMain .left::before {
  background: linear-gradient(0deg, rgba(10, 14, 26, 0.92) 0%, rgba(29, 37, 56, 0.72) 55%, rgba(10, 14, 26, 0.55) 100%);
  opacity: 1;
}
.loginCard_3 .loginCardMain #intro { background: rgba(10, 14, 26, 0.78); border-radius: var(--pv-radius-lg); }
.loginCard_3 .loginCardMain .left h1 { font-family: var(--pv-font-display); letter-spacing: 0.04em; }
.loginCard_3 .loginCardMain .right h1 { color: var(--pv-text); font-weight: 800; letter-spacing: -0.02em; }
.loginCard_3 .loginCardMain .right h2 { border-bottom: 1px solid var(--pv-paper-line); }
.loginCard_3 #toggleText a {
  background: var(--pv-pink);
  border: 0;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
}

/* Onboarding / club-owner login (login.php, setup-*.php) */
.landingPageForm .lpf_Body .lpf_Login h1 { color: var(--pv-text); text-shadow: none; font-weight: 800; letter-spacing: -0.02em; }
.landingPageForm .lpf_Body .lpf_Login h2 { color: var(--pv-text-soft); }
.landingPageForm .lpf_Body .lpf_Login .lpf_RequiredBox { background: var(--pv-paper); border-radius: var(--pv-radius-sm); border: 1px solid var(--pv-paper-line); }
.landingPageForm .lpf_Body video { background: var(--pv-ink); border-radius: var(--pv-radius); }
.landingPageForm .lpf_Header h2 { color: var(--pv-text); }

/* email verification */
#Section_EmailVerification .status { border: 1px solid var(--pv-card-line); background: #fff; border-radius: var(--pv-radius-lg); box-shadow: var(--pv-shadow-sm); }
#Section_EmailVerification .status h1 { color: var(--pv-green); }

/* ============================================================
   16. Responsive fixes (override legacy `overflow:hidden` traps)
   ============================================================ */
@media only screen and (min-width: 601px) and (max-width: 1280px) {
  body { overflow: auto !important; }
}
@media only screen and (min-width: 320px) and (max-width: 600px) {
  body { overflow: auto !important; }
  .wrapper { padding: 14px 14px 0 14px; }
  #breadcrumb .breadcrumb { padding: 10px 14px 0 14px; }
  #PageTitleBanner h1 { font-size: 26px; padding: 16px 18px; }
  #navBar .navBar { height: 56px !important; line-height: 56px !important; }
  #navBar .notificationDIV { top: 56px !important; }
}
@media only screen and (min-width: 1px) and (max-width: 319px) {
  body { display: block; } /* the old sheet hid the whole app below 320px */
}