/* ==========================================
   NEWPOINTS COMPLETE SYSTEM - GUIDEBOOK STYLE
   All pages included: Home, Shop, Lottery, Statistics, Logs
   ========================================== */


.newpoints-wrapper {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  padding: 1em;
  font-family: var(--font-read);
  color: var(--text-color);

border-radius: 5px;
}

.newpoints-sidebar {
  flex: 0 0 250px;
  min-width: 250px;
  background: var(--block-med);
  border-radius: 5px;
  padding: 0;
  height: fit-content;
  position: sticky;
  top: 150px;
  border: 1px solid var(--accent1);
}

.newpoints-content {
    flex: 1;
    min-width: 0;
}
.newpoints-body {
	margin-top: 20px;
  border-radius: 5px;
  border: 1px solid var(--accent2);
  line-height: 1.8;
}
/* ============================================
   INFO BLOCKS
   ============================================ */

.newpoints-info-block {
     background: var(--block-med);
    border: 1px solid var(--accent3);
    border-radius: var(--br-med);
    overflow: hidden;
    margin-bottom: 20px;
}

.newpoints-header {
  background: var(--block-dark);
  padding: 25px;
  border-radius: 5px;
  border: 1px solid var(--accent1);
  margin-bottom: 20px;
  font-family: var(--font-title);
  font-size: 36px;
  color: var(--text-color);
  margin: 0;
  text-align: center;
}




.newpoints-info-body {
    padding: 20px;
    color: var(--text-color);
    font-family: var(--font-read);
    line-height: 1.6;
}

/* ============================================
   MENU SYSTEM
   ============================================ */
.newpoints-menu {
    background: var(--block-dark);
    border: 1px solid var(--accent3);
    border-radius: var(--br-med);
    overflow: hidden;
}


/* Sidebar Header - Guidebook Style */
.newpoints-menu-header {
    background: var(--block-darker);
    padding: 15px;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-title);
    font-size: 24px;
  color: var(--text-color);
    text-align: center;
}

/* Menu Categories */
.newpoints-menu-category {
	    display: flex;
    flex-direction: column;
    gap: 8px;
	width: 100%;
}



/* Menu Items - Guidebook Style */
.newpoints-menu-item {
    display: block;
    padding: 1em;
    background: var(--block-light);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.2s ease;
    font-size: 14px;
    border-left: 3px solid transparent;
    margin-bottom: 8px;
    font-family: var(--font-read);
}

.newpoints-menu-item:hover {
    background: var(--block-lighter);
    color: var(--accent1);
    border-left-color: var(--accent1);
    transform: translateX(3px);
}

.newpoints-menu-item.active {
    background: var(--block-dark);
    color: var(--accent1);
    border-left-color: var(--accent1);
    font-weight: 600;
}

/* ==========================================
   HOME PAGE - Guidebook Style
   ========================================== */

.newpoints-wrapper {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    margin-bottom: 25px;
}



.newpoints-home-header h1 {
    font-family: var(--font-title);
    font-size: 36px;
    color: var(--text-color);
    margin: 0;
    text-align: center;
}

.newpoints-content {
	padding: .2em;
    background: var(--block-med);
    font-family: var(--font-read);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
}

.newpoints-content p {
    margin: 0 0 15px 0;
}

/* Income Settings Table - Guidebook Style */
.newpoints-income-table {
    background: var(--block-dark);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    overflow: hidden;
    margin: 20px 0;
}

.income-table-header {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    padding: 12px;
    background: var(--block-dark);
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
      color: var(--text-color);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.income-table-body {
    background: var(--block-med);
}

.newpoints-income-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--block-light);
    transition: background 0.2s ease;
}

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

.newpoints-income-row:hover {
    background: var(--block-light);
}

.income-setting-label {
    font-weight: 700;
      color: var(--text-color);
    font-family: var(--font-header);
    border-bottom: 1px dashed var(--accent2);
    cursor: help;
    width: fit-content;
}

.income-setting-value {
    color: var(--text-color);
    text-align: right;
    font-family: var(--font-read);
    font-weight: 600;
}

/* Latest Transactions */
.newpoints-transactions-wrapper {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    margin-bottom: 25px;
}

.newpoints-transactions-header {
    background: var(--block-dark);
    padding: 15px;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
    font-size: 22px;
  color: var(--text-color);
    text-align: center;
}

.newpoints-transactions-content {
    padding: 1em;
    background: var(--block-light);
    font-family: var(--font-read);
    line-height: 1.7;
}

/* ==========================================
   STATISTICS PAGE - Guidebook Style
   ========================================== */

.newpoints-stats-page-header {
    background: var(--block-dark);
    padding: 25px;
    border-radius: 5px;
    border: 1px solid var(--accent1);
    margin-bottom: 25px;
}

.newpoints-stats-page-header h1 {
    font-family: var(--font-title);
    font-size: 36px;
    color: var(--accent1);
    margin: 0;
    text-align: center;
}

/* Richest Users Table - Guidebook Style */
.newpoints-richest-wrapper {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 25px;
}

.newpoints-richest-header {
    background: var(--block-dark);
    padding: 15px;
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
    font-size: 22px;
  color: var(--text-color);
    text-align: center;
}

.newpoints-richest-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 12px;
    background: var(--block-dark);
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
    color: var(--accent1);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.newpoints-richest-table-body {
    background: var(--block-light);
}

.newpoints-richest-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--block-med);
    transition: background 0.2s ease;
    font-family: var(--font-read);
    font-size: 14px;
}

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

.newpoints-richest-row:hover {
    background: var(--block-med);
}

.newpoints-richest-user {
    color: var(--text-color);
}

.newpoints-richest-amount {
    text-align: center;
    color: var(--accent1);
    font-weight: 600;
}

/* Last Donations Table - Guidebook Style */
.newpoints-donations-wrapper {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 25px;
}

.newpoints-donations-header {
    background: var(--block-dark);
    padding: 15px;
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
    font-size: 22px;
  color: var(--text-color);
    text-align: center;
}

.newpoints-donations-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 140px;
    gap: 15px;
    padding: 12px;
    background: var(--block-dark);
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
  color: var(--text-color);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.newpoints-donations-table-body {
    background: var(--block-light);
}

.newpoints-donation-row {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 140px;
    gap: 15px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--block-med);
    transition: background 0.2s ease;
    font-family: var(--font-read);
    font-size: 14px;
}

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

.newpoints-donation-row:hover {
    background: var(--block-med);
}

.newpoints-donation-from,
.newpoints-donation-to {
    color: var(--text-color);
}

.newpoints-donation-amount {
    text-align: center;
  color: var(--text-color);
    font-weight: 600;
}

.newpoints-donation-date {
    text-align: center;
    color: var(--text-color-muted);
}

/* ==========================================
   LOGS PAGE - Guidebook Style
   ========================================== */

.newpoints-logs-wrapper {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 25px;
}

.newpoints-logs-header {
    background: var(--block-dark);
    padding: 15px;
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
    font-size: 22px;
    color: var(--accent1);
    text-align: center;
}

.newpoints-logs-table-header {
    display: grid;
    grid-template-columns: 50px 130px 100px 85px 120px 120px 120px 60px 120px 90px;
    gap: 8px;
    padding: 12px;
    background: var(--block-dark);
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
  color: var(--text-color);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow-x: auto;
}

.newpoints-logs-table-body {
    background: var(--block-light);
}

.newpoints-log-row {
    display: grid;
    grid-template-columns: 50px 130px 100px 85px 120px 120px 120px 60px 120px 90px;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--block-med);
    transition: background 0.2s ease;
    font-family: var(--font-read);
    font-size: 13px;
    align-items: center;
}

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

.newpoints-log-row:hover {
    background: var(--block-med);
}

.newpoints-log-id,
.newpoints-log-action,
.newpoints-log-user,
.newpoints-log-points,
.newpoints-log-primary,
.newpoints-log-secondary,
.newpoints-log-tertiary,
.newpoints-log-type,
.newpoints-log-date,
.newpoints-log-options {
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.newpoints-log-id,
.newpoints-log-type {
    text-align: center;
}

.newpoints-log-points {
    text-align: center;
    color: var(--accent1);
    font-weight: 600;
}

.newpoints-log-date {
    text-align: center;
    color: var(--text-color-muted);
    font-size: 12px;
}

.newpoints-log-options {
    text-align: center;
}

.newpoints-log-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic;
    padding: 20px;
}

/* ==========================================
   SHOP TABS (Structure Unchanged)
   ========================================== */

.shop-tabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.shop-tab-btn {
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
	  font-family: var(--font-read);
}



.shop-tab-content {
    display: none;
}

.shop-tab-content.active {
    display: block;
}

/* ==========================================
   SHOP CATEGORY - Guidebook Style
   ========================================== */

.shop-category-header {
    background: var(--block-dark);
    padding: 25px;
    border-radius: 5px;
    border: 1px solid var(--accent1);
    margin-bottom: 25px;
}

.shop-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
  color: var(--text-color);
    margin-bottom: 10px;
    font-family: var(--font-header);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent1);
}

.shop-category-description {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.7;
    font-family: var(--font-read);
    margin-top: 15px;
}


/* ============================================
   SHOP ITEMS HEADER
   ============================================ */

.shop-items-header {
    display: grid;
    grid-template-columns: 60px 2fr 70px 70px auto auto;
    gap: 15px;
    padding: 12px 20px;
    background: var(--block-med);
    border-bottom: 1px solid var(--accent3);
    font-family: var(--font-header);
    font-weight: bold;
  color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

.shop-items-header:has(> :nth-child(5):last-child) {
    grid-template-columns:60px 2fr 70px 70px auto;
}

.shop-items-header:has(> :nth-child(6)) {
    grid-template-columns: 60px 2fr 70px 70px minmax(100px, auto) minmax(150px, auto);
}

.shop-header-icon,
.shop-header-price,
.shop-header-stock,
.shop-header-extra,
.shop-header-options {
    text-align: center;
}

.shop-items-list {
    background: var(--block-dark);
}

.shop-category-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic;
    background: var(--block-dark);
    border-bottom: 1px solid var(--accent3);
}

.shop-admin-links {
    font-size: 0.6em;
    color: var(--text-color-muted);
}

.shop-admin-links a {
    color: var(--text-color-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.shop-admin-links a:hover {
    color: var(--accent1);
    text-decoration: underline;
}

/* ============================================
   SHOP ITEMS
   ============================================ */

.shop-item {
    display: grid;
    grid-template-columns: 60px 2fr 70px 70px auto auto;
    gap: 15px;
    padding: 15px 20px;
    background: var(--block-dark);
    border-bottom: 1px solid var(--accent3);
    align-items: center;
    transition: background 0.2s ease;
}

.shop-item:hover {
    background: var(--block-med);
}

.shop-item:last-child {
    border-bottom: none;
}

.shop-item:has(> :nth-child(5):last-child) {
    grid-template-columns: 60px 2fr 70px 70px auto;
}

.shop-item:has(> :nth-child(6)) {
    grid-template-columns: 60px 2fr 70px 70px minmax(100px, auto) minmax(150px, auto);
}

.shop-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-item-icon img {
    max-width: 40px;
    max-height: 40px;
    border-radius: var(--br-small);
}

.shop-item-details {
    min-width: 0;
}

.shop-item-name {
    font-family: var(--font-header);
    font-size: 1.05em;
    margin-bottom: 5px;
}

.shop-item-name a {
    color: var(--accent2);
    text-decoration: none;
    transition: color 0.2s ease;
}

.shop-item-name a:hover {
    color: var(--accent1);
    text-decoration: underline;
}

.shop-item-description {
    color: var(--text-color);
    font-size: 0.85em;
    line-height: 1.4;
    font-style: italic;
}

.shop-item-price {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shop-price-label {
    display: none;
    font-size: 0.75em;
    color: var(--text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shop-item-price span[class*="funds"] {
    font-family: var(--font-header);
    font-size: 1.1em;
    font-weight: bold;
}

.insufficient_funds {
    color: #c0392b;
}

.sufficient_funds {
    color: #27ae60;
}

.shop-item-stock {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shop-stock-label {
    display: none;
    font-size: 0.75em;
    color: var(--text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shop-stock-value {
    font-family: var(--font-header);
    color: var(--text-color);
}

/* ============================================
   SHOP ITEM ACTIONS
   ============================================ */

.shop-item-purchase-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-item-purchase-col form {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.shop-purchase-btn {
    font-weight: bold;
    font-size: 0.8em!important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
	  letter-spacing: 0px!important;
  text-transform: normal!important;
	  font-family: var(--font-read);
}



.shop-item-options-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop-options-form {
    margin: 0;
    width: 100%;
}

.shop-options-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.shop-options-select {
    padding: 1em;
    background: var(--block-med);
    border: 1px solid var(--accent3);
    border-radius: var(--br-small);
    color: var(--text-color);
    font-family: var(--font-read);
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 50px;
}

.shop-options-select:hover {
    border-color: var(--accent2);
    background: var(--block-light);
}

.shop-options-select:focus {
    outline: none;
    border-color: var(--accent1);
    box-shadow: 0 0 0 2px rgba(186, 142, 67, 0.2);
}

.shop-options-btn {
    font-weight: bold;
    font-size: 0.8em!important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
	  letter-spacing: 0px!important;
  text-transform: normal!important;
	  font-family: var(--font-read);
}



/* ==========================================
   LOTTERY PAGE - Guidebook Style
   ========================================== */

.lottery-page {
    width: 100%;
}

.lottery-header {
    background: var(--block-dark);
    padding: 25px;
    border-radius: 5px;
    border: 1px solid var(--accent1);
    margin-bottom: 25px;
}

.lottery-header h1 {
    font-family: var(--font-title);
    font-size: 36px;
  color: var(--text-color);
    margin: 0;
    text-align: center;
}

.lottery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.lottery-column-left,
.lottery-column-right {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.lottery-card {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    overflow: hidden;
}

.lottery-card-header {
    background: var(--block-dark);
    padding: 15px;
    font-family: var(--font-header);
    font-size: 22px;
  color: var(--text-color);
    border-bottom: 2px solid var(--accent1);
    text-align: center;
}

.lottery-card-content {
    padding: 1em;
    background: var(--block-light);
    color: var(--text-color);
    font-family: var(--font-read);
    line-height: 1.8;
}

.lottery-info-card {
    height: fit-content;
    position: sticky;
    top: 20px;
}

.lottery-buy-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.lottery-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 16px;
}

.lottery-price-label {
    color: var(--text-color-muted);
    font-family: var(--font-read);
    font-size: 14px;
}

.lottery-price-amount {
    color: var(--accent1);
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-header);
}

.lottery-buy-btn {
    background: var(--accent1);
    border: none;
    color: var(--block-dark);
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 700;
  font-family: var(--font-read);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lottery-buy-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.lottery-tickets-list {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.8;
    min-height: 60px;
    font-family: var(--font-read);
}

.lottery-info-card .lottery-card-content {
    color: var(--text-color);
    line-height: 1.8;
    font-family: var(--font-read);
    font-size: 15px;
}

.lottery-info-card .lottery-card-content > div {
    margin-bottom: 15px;
}

.lottery-info-card .lottery-card-content > div:last-child {
    margin-bottom: 0;
}

.lottery-winner-info {
    padding-top: 15px;
    border-top: 1px solid var(--accent2);
    margin-top: 15px !important;
}

.lottery-winner-info strong {
    color: var(--accent1);
    font-family: var(--font-header);
}

.lottery-last-winner {
    margin-top: 10px;
    color: var(--text-color-muted);
    font-size: 14px;
}

.lottery-countdown {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
    font-family: var(--font-read);
    text-align: center;
}

.countdown-number {
    color: var(--accent1);
    font-weight: 700;
    font-size: 24px;
    font-family: var(--font-header);
    display: inline-block;
    min-width: 30px;
    text-align: center;
}

/* Lottery Statistics - Guidebook Style */
.lottery-stats-wrapper {
    background: var(--block-med);
    border: 1px solid var(--accent2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}

.lottery-stats-header {
    background: var(--block-dark);
    padding: 15px;
    font-family: var(--font-header);
    font-size: 22px;
    color: var(--accent1);
    border-bottom: 2px solid var(--accent1);
    font-weight: 600;
    text-align: center;
}

.lottery-stats-table {
    display: flex;
    flex-direction: column;
}

.lottery-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--block-med);
    transition: background 0.2s ease;
}

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

.lottery-stats-row:not(.lottery-stats-row-header):hover {
    background: var(--block-light);
}

.lottery-stats-row-header {
    background: var(--block-dark);
    font-weight: 700;
  color: var(--text-color);
    font-family: var(--font-header);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lottery-stats-cell {
    color: var(--text-color);
    font-family: var(--font-read);
    font-size: 14px;
}

.lottery-stats-date {
    text-align: center;
}

.lottery-stats-no-winners {
    grid-template-columns: 1fr;
    justify-items: center;
    color: var(--text-color-muted);
    font-style: italic;
}

/* ==========================================
   RESPONSIVE STYLES (Structure Unchanged)
   ========================================== */

@media (max-width: 1100px) {
    .newpoints-logs-table-header,
    .newpoints-log-row {
        grid-template-columns: 40px 110px 90px 75px 100px 100px 100px 50px 100px 80px;
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .newpoints-wrapper {
        flex-direction: column;
    }
    
    .newpoints-sidebar {
        position: static;
        width: 100%;
    }
    
    .lottery-grid {
        grid-template-columns: 1fr;
    }
    
    .lottery-info-card {
        position: static;
    }
    
    .shop-item-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .shop-items-header {
        display: none;
    }
    
    .newpoints-donations-table-header,
    .newpoints-donation-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .lottery-header h1,
    .shop-item-detail-header h1,
    .newpoints-home-header h1,
    .newpoints-stats-page-header h1 {
        font-size: 28px;
    }
    
    .lottery-card-header,
    .shop-category-title,
    .newpoints-richest-header,
    .newpoints-donations-header,
    .newpoints-logs-header {
        font-size: 20px;
    }
    
    .lottery-stats-row,
    .shop-item-attribute-row,
    .newpoints-richest-row,
    .newpoints-income-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .lottery-stats-cell,
    .shop-item-attribute-value,
    .newpoints-richest-amount,
    .income-setting-value {
        text-align: left !important;
    }
    
    .newpoints-logs-table-header {
        display: none;
    }
    
    .newpoints-log-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .lottery-grid,
    .lottery-column-left,
    .lottery-column-right {
        gap: 15px;
    }
    
    .lottery-buy-btn,
    .shop-purchase-button button {
        width: 100%;
    }
    
    .income-table-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ============================================
   LOGS TABLE
   (Add to newpoints_optimized.css)
   ============================================ */

.newpoints-logs-table {
    background: var(--block-dark);
    border: 1px solid var(--accent3);
    border-radius: var(--br-med);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Logs Table Header */
.logs-table-header {
    background: var(--block-med);
    border-bottom: 2px solid var(--accent1);
    padding: 15px 20px;
    font-family: var(--font-header);
    font-size: 1.2em;
  color: var(--text-color);
}

/* Column Headers */
.logs-table-columns {
    display: grid;
    grid-template-columns: 50px 130px 100px 85px 100px 100px 100px 70px 120px auto;
    gap: 8px;
    padding: 12px 15px;
    background: var(--block-med);
    border-bottom: 1px solid var(--accent3);
    font-family: var(--font-header);
    font-weight: bold;
  color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.5px;
}

.logs-table-columns > div {
    text-align: center;
}

/* Adjust grid when delete column is present */
.logs-table-columns:has(.logs-col-delete) {
    grid-template-columns: 50px 130px 100px 85px 100px 100px 100px 70px 120px 90px;
}

/* Adjust grid when user column is present */
.logs-table-columns:has(.logs-col-user):not(:has(.logs-col-delete)) {
    grid-template-columns: 50px 130px 100px 85px 100px 100px 100px 70px 120px;
}

/* Table Body */
.logs-table-body {
    background: var(--block-dark);
}

/* Log Row */
.logs-table-row {
    display: grid;
    grid-template-columns: 50px 130px 100px 85px 100px 100px 100px 70px 120px auto;
    gap: 8px;
    padding: 12px 15px;
    background: var(--block-dark);
    border-bottom: 1px solid var(--accent3);
    align-items: center;
    transition: background 0.2s ease;
}

.logs-table-row:hover {
    background: var(--block-med);
}

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

/* Adjust row grid when delete column is present */
.logs-table-row:has(.logs-cell-delete) {
    grid-template-columns: 50px 130px 100px 85px 100px 100px 100px 70px 120px 90px;
}

/* Adjust row grid when user column is present */
.logs-table-row:has(.logs-cell-user):not(:has(.logs-cell-delete)) {
    grid-template-columns: 50px 130px 100px 85px 100px 100px 100px 70px 120px;
}

/* Log Cells */
.logs-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.logs-cell-value {
    color: var(--text-color);
    font-family: var(--font-read);
    font-size: 0.9em;
}

.logs-mobile-label {
    display: none;
    font-size: 0.75em;
    color: var(--text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

/* Special cell styling */
.logs-cell-id .logs-cell-value {
    color: var(--accent3);
    font-family: var(--font-header);
    font-weight: bold;
}

.logs-cell-action {
    align-items: flex-start;
    text-align: left;
}

.logs-cell-action .logs-cell-value {
    font-weight: bold;
    color: var(--accent2);
}

.logs-points-value {
    color: var(--accent1);
    font-family: var(--font-header);
    font-weight: bold;
    font-size: 1em;
}

/* Delete Button */
.logs-delete-form {
    margin: 0;
    width: 100%;
}

.logs-delete-btn {
    padding: 6px 12px;
    background: #c0392b;
    border: 1px solid #c0392b;
    border-radius: var(--br-small);
    color: #fff;
  font-family: var(--font-read);
    font-weight: bold;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.logs-delete-btn:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    transform: translateY(-2px);
}

.logs-delete-btn:active {
    transform: translateY(0);
}

/* Empty State */
.logs-table-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic;
    background: var(--block-dark);
    border-bottom: 1px solid var(--accent3);
}

/* ============================================
   RESPONSIVE: TABLET (≤1100px)
   ============================================ */

@media (max-width: 1100px) {
    .logs-table-columns,
    .logs-table-row {
        grid-template-columns: 45px 110px 90px 75px 85px 85px 85px 60px 100px auto;
        gap: 6px;
        padding: 10px 12px;
        font-size: 0.75em;
    }
    
    .logs-table-columns:has(.logs-col-delete),
    .logs-table-row:has(.logs-cell-delete) {
        grid-template-columns: 45px 110px 90px 75px 85px 85px 85px 60px 100px 80px;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (≤768px)
   ============================================ */

@media (max-width: 768px) {
    .logs-table-columns {
        display: none;
    }
    
    .logs-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 15px;
        border: 1px solid var(--accent3);
        border-radius: var(--br-small);
        margin: 10px;
    }
    
    .logs-cell {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 10px;
        align-items: center;
        text-align: left;
        padding: 8px 0;
        border-bottom: 1px solid var(--accent3);
    }
    
    .logs-cell:last-child {
        border-bottom: none;
    }
    
    .logs-mobile-label {
        display: block;
        text-align: left;
        font-weight: bold;
    }
    
    .logs-cell-value {
        text-align: left;
    }
    
    .logs-cell-action {
        align-items: center;
    }
    
    .logs-cell-delete {
        grid-template-columns: 1fr;
        padding-top: 10px;
        border-top: 2px solid var(--accent3);
    }
    
    .logs-delete-btn {
        width: 100%;
    }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .logs-table-header {
        padding: 12px 15px;
        font-size: 1.1em;
    }
    
    .logs-table-row {
        padding: 12px;
        margin: 8px;
    }
    
    .logs-cell {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 5px;
    }
    
    .logs-mobile-label,
    .logs-cell-value {
        text-align: center;
    }
}

/* ============================================
   STATISTICS TABLES
   (Add to newpoints_optimized.css)
   ============================================ */

.newpoints-statistics-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Stats Table Container */
.newpoints-stats-table {
    background: var(--block-dark);
    border: 1px solid var(--accent3);
    border-radius: var(--br-med);
    overflow: hidden;
}

/* Stats Table Header */
.stats-table-header {
    background: var(--block-med);
    border-bottom: 2px solid var(--accent1);
    padding: 15px 20px;
    font-family: var(--font-header);
    font-size: 1.2em;
    color: var(--accent1);
}

/* Stats Table Column Headers */
.stats-table-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 12px 20px;
    background: var(--block-med);
    border-bottom: 1px solid var(--accent3);
    font-family: var(--font-header);
    font-weight: bold;
  color: var(--text-color);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

/* Donations table has 4 columns */
.donations-columns {
    grid-template-columns: 1fr 1fr 150px 150px;
}

.stats-col-user,
.stats-col-from,
.stats-col-to {
    text-align: left;
}

.stats-col-amount,
.stats-col-date {
    text-align: center;
}

/* Stats Table Body */
.stats-table-body {
    background: var(--block-dark);
}

/* Stats Table Row */
.stats-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px 20px;
    background: var(--block-dark);
    border-bottom: 1px solid var(--accent3);
    align-items: center;
    transition: background 0.2s ease;
}

.stats-table-row:hover {
    background: var(--block-med);
}

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

/* Donation rows have 4 columns */
.donation-row {
    grid-template-columns: 1fr 1fr 150px 150px;
}

/* Stats Cells */
.stats-cell {
    color: var(--text-color);
    font-family: var(--font-read);
}

.stats-cell-user,
.stats-cell-from,
.stats-cell-to {
    text-align: left;
}

.stats-cell-user {
    font-weight: bold;
    color: var(--accent2);
}

.stats-cell-from,
.stats-cell-to {
    color: var(--text-color);
}

.stats-cell-amount {
    text-align: center;
    color: var(--accent1);
    font-family: var(--font-header);
    font-weight: bold;
    font-size: 1.05em;
}

.stats-cell-date {
    text-align: center;
    color: var(--text-color-muted);
    font-size: 0.9em;
}

.stats-mobile-label {
    display: none;
    font-size: 0.75em;
    color: var(--text-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
    font-weight: bold;
}

/* Ranking styling for richest users */
.richest-user-row:nth-child(1) .stats-cell-user::before {
    content: '? ';
    margin-right: 5px;
}

.richest-user-row:nth-child(2) .stats-cell-user::before {
    content: '? ';
    margin-right: 5px;
}

.richest-user-row:nth-child(3) .stats-cell-user::before {
    content: '? ';
    margin-right: 5px;
}

/* ============================================
   RESPONSIVE: TABLET (≤900px)
   ============================================ */

@media (max-width: 900px) {
    .donations-columns {
        grid-template-columns: 1fr 1fr 120px 120px;
    }
    
    .donation-row {
        grid-template-columns: 1fr 1fr 120px 120px;
    }
    
    .stats-table-header {
        font-size: 1.1em;
        padding: 12px 15px;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (≤768px)
   ============================================ */

@media (max-width: 768px) {
    .newpoints-statistics-wrapper {
        gap: 15px;
    }
    
    .stats-table-columns {
        display: none;
    }
    
    /* Richest users - keep 2 column on mobile */
    .richest-user-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 12px 15px;
    }
    
    .richest-user-row .stats-cell-amount {
        min-width: 100px;
    }
    
    /* Donations - stack on mobile */
    .donation-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 15px;
    }
    
    .donation-row .stats-cell {
        display: flex;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid var(--accent3);
    }
    
    .donation-row .stats-cell:last-child {
        border-bottom: none;
    }
    
    .donation-row .stats-mobile-label {
        display: inline-block;
        min-width: 70px;
    }
    
    .donation-row .stats-cell-from,
    .donation-row .stats-cell-to,
    .donation-row .stats-cell-amount,
    .donation-row .stats-cell-date {
        text-align: left;
    }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .stats-table-header {
        padding: 10px 12px;
        font-size: 1em;
    }
    
    .stats-table-row {
        padding: 10px 12px;
    }
    
    .richest-user-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 5px;
    }
    
    .richest-user-row .stats-cell-user,
    .richest-user-row .stats-cell-amount {
        text-align: center;
    }
    
    .richest-user-row .stats-cell-amount {
        min-width: auto;
        padding-top: 5px;
        border-top: 1px solid var(--accent3);
    }
}


/* ============================================
   SHOP STATISTICS TABLE
   (Add to statistics_tables_css.css or main CSS)
   ============================================ */

/* Shop Stats Columns - 3 column grid */
.shop-stats-columns {
    grid-template-columns: 2fr 2fr 1fr;
}

.shop-stats-columns .stats-col-user {
    text-align: left;
}

.shop-stats-columns .stats-col-item {
    text-align: left;
}

.shop-stats-columns .stats-col-date {
    text-align: center;
}

/* Shop Stats Row - 3 column grid */
.shop-stats-row {
    grid-template-columns: 2fr 2fr 1fr;
}

.shop-stats-row .stats-cell-user {
    text-align: left;
}

.shop-stats-row .stats-cell-user a {
    color: var(--accent2);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}

.shop-stats-row .stats-cell-user a:hover {
    color: var(--accent1);
    text-decoration: underline;
}

.shop-stats-row .stats-cell-item {
    text-align: left;
    color: var(--text-color);
}

.shop-stats-row .stats-cell-date {
    text-align: center;
    color: var(--text-color-muted);
    font-size: 0.9em;
}

/* Empty State */
.stats-table-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-color-muted);
    font-style: italic;
    background: var(--block-dark);
}



/* Shop Item View Purchase Section */
.shop-item-view-purchase {
    padding: 20px;
    background: var(--block-med);
    border-top: 2px solid var(--accent1);
    text-align: center;
}

.shop-purchase-form {
    margin: 0;
    display: inline-block;
}

.shop-purchase-btn, .shop-options-btn {
    padding: 12px 40px;
    background: var(--accent1);
    border: 2px solid var(--accent1);
    border-radius: var(--br-med);
    color: var(--block-dark);
  font-family: var(--font-read);
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(186, 142, 67, 0.3);
}

.shop-purchase-large-btn:hover {
    background: var(--accent2);
    border-color: var(--accent2);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(186, 142, 67, 0.4);
}

.shop-purchase-large-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(186, 142, 67, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .shop-item-view-purchase {
        padding: 15px;
    }
    
    .shop-purchase-large-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .shop-purchase-large-btn {
        padding: 10px 30px;
        font-size: 1em;
        max-width: 100%;
    }
}


/* ============================================
   RESPONSIVE: MOBILE (≤768px)
   ============================================ */

@media (max-width: 768px) {
    .shop-stats-columns {
        display: none;
    }
    
    .shop-stats-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 15px;
    }
    
    .shop-stats-row .stats-cell {
        display: flex;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid var(--accent3);
        text-align: left;
    }
    
    .shop-stats-row .stats-cell:last-child {
        border-bottom: none;
    }
    
    .shop-stats-row .stats-mobile-label {
        display: inline-block;
        min-width: 60px;
        margin-right: 8px;
    }
    
    .shop-stats-row .stats-cell-user,
    .shop-stats-row .stats-cell-item,
    .shop-stats-row .stats-cell-date {
        text-align: left;
    }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .shop-stats-row {
        padding: 12px;
    }
    
    .shop-stats-row .stats-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    
    .shop-stats-row .stats-mobile-label {
        min-width: auto;
        margin-right: 0;
    }
}


/* ============================================
   RESPONSIVE: SMALL MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .shop-stats-row {
        padding: 12px;
    }
    
    .shop-stats-row .stats-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    
    .shop-stats-row .stats-mobile-label {
        min-width: auto;
        margin-right: 0;
    }
}


/* ============================================
   INCOME SETTINGS TABLE
   (Add to newpoints_optimized.css)
   ============================================ */

.newpoints-income-table {
    background: var(--block-dark);
    border: 1px solid var(--accent3);
    border-radius: var(--br-med);
    overflow: hidden;
    margin-bottom: 20px;
}

.income-table-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 12px 20px;
    background: var(--block-med);
    border-bottom: 2px solid var(--accent1);
    font-family: var(--font-header);
      color: var(--text-color);
}

.income-header-label {
    text-align: left;
}

.income-header-value {
    text-align: right;
    min-width: 120px;
}

.income-table-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.newpoints-income-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 10px 15px;
    background: var(--block-med);
    border-radius: var(--br-small);
    align-items: center;
    transition: background 0.2s ease;
}

.newpoints-income-row:hover {
    background: var(--block-light);
}

.income-setting-label {
    color: var(--text-color);
    font-family: var(--font-read);
    border-bottom: 1px dashed var(--accent3);
    cursor: help;
    display: inline-block;
    transition: border-color 0.2s ease;
}

.income-setting-label:hover {
    border-bottom-color: var(--accent2);
    color: var(--accent2);
}

.income-setting-value {
    text-align: right;
    color: var(--accent1);
    font-family: var(--font-header);
    font-weight: bold;
    min-width: 120px;
}

/* Add to existing responsive section at ≤768px */
@media (max-width: 768px) {
    .income-table-header,
    .newpoints-income-row {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }
    
    .income-header-value,
    .income-setting-value {
        text-align: center;
        min-width: auto;
    }
    
    .income-setting-label {
        display: block;
        text-align: center;
    }
}

/* Add to existing responsive section at ≤480px */
@media (max-width: 480px) {
    .income-table-header {
        padding: 10px 15px;
    }
    
    .newpoints-income-row {
        padding: 8px 12px;
    }
}


.admin-btn-wrap {margin: 2em 1em; gap: 10px;}