/* =========================================================
   CASHIER CUSTOM STYLES - custom.css
   Install: place in site root, then add to every HTML page
   <link rel="stylesheet" href="custom.css">
   ========================================================= */

/* ---------- 1. GLOBAL TYPOGRAPHY (bigger letters) ---------- */
body, table, td, th, input, select, button, a, span, div, p, label {
  font-size: 15px;
}
h1, h2, h3, h4 { font-weight: 700; }

/* ---------- 2. TABLES (home, transactions, cash report) ---------- */
table thead th {
  background: #111827 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 12px !important;
}
table tbody tr:nth-child(even) td {
  background: #eef2f7 !important;
}
table tbody tr:hover td {
  background: #dbeafe !important;
}
table tbody td {
  font-size: 15px !important;
  padding: 9px 12px !important;
  color: #1f2937;
}

/* First column (USERNAME) bigger + bold on every table */
table tbody td:first-child,
table tbody td:nth-child(2) .username-cell {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* ---------- 4. INFO / HISTORY ICONS (next to usernames) ---------- */
.icon-circle {
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
  line-height: 22px !important;
  margin-right: 4px !important;
}

/* ---------- 5. ACTIVITY LOG (right sidebar) ---------- */
.log-entry { font-size: 14px !important; line-height: 1.45 !important; }
.log-entry .log-msg { font-weight: 600 !important; }

/* Keep colored log messages (In / Out / Error) but make them darker/readable */
.log-entry .log-msg[style*="color: #28a745"],
.log-entry .log-msg[style*="color:#28a745"] { color: #15803d !important; }   /* IN green   */
.log-entry .log-msg[style*="color: #dc3545"],
.log-entry .log-msg[style*="color:#dc3545"] { color: #b91c1c !important; }   /* OUT/Err red*/
.log-entry .log-msg[style*="color: #ffc107"],
.log-entry .log-msg[style*="color:#ffc107"] { color: #a16207 !important; }   /* warn amber */

/* ---------- 7. DROPDOWN MENUS (Cash ▾ , royalecashier ▾) ---------- */
.nav-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15) !important;
  border-radius: 6px !important;
  padding: 4px 0 !important;
}
.nav-dropdown-menu a,
.nav-dropdown-menu a:link,
.nav-dropdown-menu a:visited {
  color: #1f2937 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  display: block !important;
  text-decoration: none !important;
}
.nav-dropdown-menu a:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* ---------- 8. PLAYER INFO MODAL (home) ---------- */
.modal-box {
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25) !important;
}
.modal-box .modal-header,
.modal-box h3, .modal-box h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
}
.modal-box .badge {
  font-size: 13px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.modal-box .info-row,
.modal-box label,
.modal-box .value {
  font-size: 15px !important;
}
.modal-box .total-in,
.modal-box .total-out {
  font-size: 18px !important;
  font-weight: 700 !important;
  /* NOTE: no color override - kept neutral to avoid bugs */
}
.modal-box button {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
}

/* ---------- 9. BREADCRUMBS / SEARCH / PAGINATION ---------- */
.breadcrumb, .breadcrumb a {
  font-size: 15px !important;
  font-weight: 600 !important;
}
input[type="search"], input[type="text"], input[type="date"], select {
  font-size: 15px !important;
  padding: 7px 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 5px !important;
}
.pagination a, .pagination span {
  font-size: 14px !important;
  padding: 6px 11px !important;
}

/* ---------- 10. LOGIN PAGE (index.html) ---------- */
/* Scoped with body.login or fallback to form selectors so it doesn't
   accidentally turn labels white on other pages.                    */
body.login-page label,
form[action*="login"] label {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
body.login-page input,
form[action*="login"] input {
  font-size: 17px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
}
body.login-page button,
form[action*="login"] button {
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
}
body.login-page button:hover,
form[action*="login"] button:hover {
  background: #1d4ed8 !important;
}
.login-footer {
  color: #ffffff !important;
  font-size: 14px !important;
}
.login-footer a {
  color: #fbcfe8 !important;
}

/* ---------- Responsive: tablet toolbar wrap (2026-05-23) ---------- */
@media (min-width: 481px) and (max-width: 1024px) {
  .toolbar { row-gap: 6px; }
  .toolbar .search-wrap { margin-left: 0; }
}

/* ---------- Hide GB/EN flag in navbar brand (2026-05-23) ---------- */
.navbar-brand .flag { display: none; }

/* ---------- Navbar partial slot — reserve height + colour to prevent flash (2026-05-23) ---------- */
#navbar-slot { min-height: 44px; }
#navbar-slot:empty { background: var(--navbar-bg, #7a0000); }
#navbar-slot a.active { text-decoration: underline; font-weight: 700; }

/* ---------- Mobile: lock viewport, single non-scrolling page (2026-05-23) ----------
   Goal: on portrait/narrow widths the WHOLE PAGE fits the visible viewport — no body
   scrolling. Only the data table scrolls internally. Summary/balance bar stays anchored
   at the bottom of the viewport.
   Why: style.css uses `.main-layout { height: calc(100vh - 88px) }` which (a) assumes
   navbar+toolbar = 88px and (b) uses `vh` that on mobile counts hidden browser chrome.
   Both produce off-screen layout and the "sliding up and down" body scroll. */
@media (max-width: 768px) {
  html, body {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  body { display: flex; flex-direction: column; }
  .main-layout { flex: 1 1 auto; height: auto; min-height: 0; }
  .table-panel { overflow-y: hidden; }
  /* data-table-wrap keeps overflow:auto from style.css — the only scrollable area */

  /* Summary/balance bar: 3 cols x 2 rows so IN/OUT/TOTAL/BONUS/LIMIT/CREDITS don't cramp */
  .summary-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .summary-cell {
    padding: 6px 6px;
    border-right: 1px solid #0d2240;
    border-bottom: 1px solid #0d2240;
  }
  .summary-cell:nth-child(3n) { border-right: none; }
  .summary-cell:nth-last-child(-n+3) { border-bottom: none; }
  .summary-cell .label { font-size: 10px; }
  .summary-cell .value { font-size: 12px; }

  /* Info/history circles next to username — smaller on mobile */
  .icon-circle {
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    margin-right: 2px !important;
  }

  /* Username column — shrinkier (smaller font, tighter gaps) */
  table tbody td:first-child,
  table tbody td:nth-child(2) .username-cell {
    font-size: 14px !important;
  }
  .username-cell { gap: 3px; }
  .username-icons { gap: 1px; }
  .username-bonus { font-size: 12px; }

  /* IN/OUT action buttons (➕ / ➖) — clean tap targets */
  .actions-cell .btn-icon {
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    margin: 0 2px !important;
  }
}

/* ---------- END ---------- */