/* ===================================================================
   GCMS — Facebook-inspired UI (soft light theme)
   White cards on FB-grey background, muted FB-blue accents, FB-style
   buttons. Accent colors are softened — nothing bright.
   =================================================================== */

/* ---- bundled webfonts (work fully offline — no CDN needed) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-italic.woff2') format('woff2'); }

:root {
  --fb-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fb-font-head: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fb-bg: #f0f2f5;
  --fb-card: #ffffff;
  --fb-text: #3c3f44;
  --fb-muted: #7b7f87;
  --fb-line: #e3e5ea;
  --fb-hover: #f2f3f5;
  --fb-btn-grey: #e9ebee;
  --fb-blue: #4d83bd;
  --fb-blue-dark: #43739f;
  --fb-blue-tint: #e8eff7;
  --fb-blue-ink: #3d5f86;
  --app-sidebar-w: 250px;

  --bs-primary: #4d83bd;
  --bs-primary-rgb: 77, 131, 189;
  --bs-primary-text-emphasis: #3d5f86;
  --bs-primary-bg-subtle: #e8eff7;
  --bs-primary-border-subtle: #c5d5e8;

  --bs-success: #6c9e7d;
  --bs-success-rgb: 108, 158, 125;
  --bs-success-text-emphasis: #466552;
  --bs-success-bg-subtle: #e8f1ea;
  --bs-success-border-subtle: #c5d9cb;

  --bs-warning: #bda77b;
  --bs-warning-rgb: 189, 167, 123;
  --bs-warning-text-emphasis: #6e613d;
  --bs-warning-bg-subtle: #f6f1e5;
  --bs-warning-border-subtle: #dccfab;

  --bs-danger: #c08585;
  --bs-danger-rgb: 192, 133, 133;
  --bs-danger-text-emphasis: #7e5454;
  --bs-danger-bg-subtle: #f5ebe9;
  --bs-danger-border-subtle: #ddc5c5;

  --bs-info: #7f97a3;
  --bs-info-rgb: 127, 151, 163;
  --bs-info-text-emphasis: #54636d;
  --bs-info-bg-subtle: #eceff1;
  --bs-info-border-subtle: #cbd4d9;

  --bs-dark: #555d66;
  --bs-dark-rgb: 85, 93, 102;
  --bs-secondary: #8a9098;
  --bs-secondary-rgb: 138, 144, 152;

  --bs-body-bg: var(--fb-bg);
  --bs-body-color: var(--fb-text);
  --bs-link-color: #4a6fa1;
  --bs-link-hover-color: #3d5f86;
  --bs-border-color: var(--fb-line);
}

/* ---- base (Poppins headings + Roboto body, compact & readable) ------ */
body {
  background: var(--fb-bg);
  color: var(--fb-text);
  font-family: var(--fb-font-body);
  font-size: .875rem;              /* 14px — compact but readable */
}
a { text-decoration-color: rgba(74, 111, 161, .4); }
a:hover { text-decoration-color: currentColor; }

/* headings, brand & titles use Poppins */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .card-title, .pageHeader h1, .pageHeader h2, .pageHeader h3,
.pageHeader h4, .pageHeader h5, .pageHeader h6, .modal-title, .auth-site {
  font-family: var(--fb-font-head);
  font-weight: 600;
  letter-spacing: -.1px;
}
/* compact heading scale */
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.3rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: .95rem; }
h6, .h6 { font-size: .875rem; }
.display-5 { font-size: 1.9rem; }
.display-6 { font-size: 1.6rem; }

/* compact form & table type */
.form-control, .form-select, .form-check-label, .input-group-text { font-size: .875rem; }
.col-form-label, .form-label { font-size: .85rem; }
.form-text, .small, small { font-size: .78rem; }
.table { font-size: .85rem; }

/* ---- Facebook-style buttons ----------------------------------------- */
.btn { border-radius: 6px; font-family: var(--fb-font-head); font-weight: 500; font-size: .85rem; }
.btn-sm { border-radius: 6px; font-size: .8rem; }
.btn-lg { border-radius: 8px; font-size: .9rem; }

.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #4d83bd; --bs-btn-border-color: #4d83bd;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #43739f; --bs-btn-hover-border-color: #43739f;
  --bs-btn-active-bg: #43739f; --bs-btn-active-border-color: #43739f;
  --bs-btn-disabled-bg: #9ab3ce; --bs-btn-disabled-border-color: #9ab3ce;
  --bs-btn-focus-shadow-rgb: 77, 131, 189;
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: #6c9e7d; --bs-btn-border-color: #6c9e7d;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5e8c6d; --bs-btn-hover-border-color: #598666;
  --bs-btn-active-bg: #5e8c6d; --bs-btn-active-border-color: #598666;
  --bs-btn-disabled-bg: #a3bda9; --bs-btn-disabled-border-color: #a3bda9;
}
.btn-warning {
  --bs-btn-color: #4d4530; --bs-btn-bg: #cec3a5; --bs-btn-border-color: #cec3a5;
  --bs-btn-hover-color: #4d4530; --bs-btn-hover-bg: #c3b795; --bs-btn-hover-border-color: #bdb08d;
  --bs-btn-active-bg: #c3b795; --bs-btn-active-border-color: #bdb08d;
  --bs-btn-disabled-bg: #ddd6c2; --bs-btn-disabled-border-color: #ddd6c2;
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #c08585; --bs-btn-border-color: #c08585;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ae7474; --bs-btn-hover-border-color: #a66d6d;
  --bs-btn-active-bg: #ae7474; --bs-btn-active-border-color: #a66d6d;
  --bs-btn-disabled-bg: #cfadad; --bs-btn-disabled-border-color: #cfadad;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: #7f97a3; --bs-btn-border-color: #7f97a3;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6f8693; --bs-btn-hover-border-color: #687e8b;
  --bs-btn-active-bg: #6f8693; --bs-btn-active-border-color: #687e8b;
  --bs-btn-disabled-bg: #abb8bf; --bs-btn-disabled-border-color: #abb8bf;
}
.btn-dark {
  --bs-btn-bg: #555d66; --bs-btn-border-color: #555d66;
  --bs-btn-hover-bg: #484f58; --bs-btn-hover-border-color: #434a53;
  --bs-btn-active-bg: #484f58; --bs-btn-active-border-color: #434a53;
}
/* FB secondary button: grey chip */
.btn-secondary, .btn-light {
  --bs-btn-color: #3c3f44; --bs-btn-bg: var(--fb-btn-grey); --bs-btn-border-color: var(--fb-btn-grey);
  --bs-btn-hover-color: #26282c; --bs-btn-hover-bg: #dcdfe4; --bs-btn-hover-border-color: #dcdfe4;
  --bs-btn-active-color: #26282c; --bs-btn-active-bg: #d2d6dc; --bs-btn-active-border-color: #d2d6dc;
}
.btn-outline-primary {
  --bs-btn-color: #3d5f86; --bs-btn-border-color: #b7cade;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4d83bd; --bs-btn-hover-border-color: #4d83bd;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #4d83bd; --bs-btn-active-border-color: #4d83bd;
}
.btn-outline-secondary {
  --bs-btn-color: #5a6069; --bs-btn-border-color: #ccd0d5;
  --bs-btn-hover-color: #26282c; --bs-btn-hover-bg: var(--fb-btn-grey); --bs-btn-hover-border-color: #ccd0d5;
  --bs-btn-active-color: #26282c; --bs-btn-active-bg: #dcdfe4; --bs-btn-active-border-color: #ccd0d5;
}
.btn-outline-success {
  --bs-btn-color: #4d7a5e; --bs-btn-border-color: #aec7b5;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6c9e7d; --bs-btn-hover-border-color: #6c9e7d;
}
.btn-outline-danger {
  --bs-btn-color: #946464; --bs-btn-border-color: #d0adad;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c08585; --bs-btn-hover-border-color: #c08585;
}
.btn-outline-dark {
  --bs-btn-color: #555d66; --bs-btn-border-color: #a3a9b0;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #555d66; --bs-btn-hover-border-color: #555d66;
}
.btn-outline-light {
  --bs-btn-color: #f4f5f7; --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-color: #26282c; --bs-btn-hover-bg: #f4f5f7; --bs-btn-hover-border-color: #f4f5f7;
}

/* ---- forms ------------------------------------------------------------ */
.form-control, .form-select {
  border-color: #d6d9de; color: var(--fb-text);
  background-color: #fff; border-radius: 6px;
}
.form-control:focus, .form-select:focus {
  border-color: #9ab3ce; box-shadow: 0 0 0 .18rem rgba(77, 131, 189, .18);
}
.form-control::placeholder { color: #9aa0a8; }
.input-group-text { background: var(--fb-hover); border-color: #d6d9de; color: var(--fb-muted); }

/* ---- header (FB white topbar) ---------------------------------------- */
.app-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--fb-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.app-topbar.navbar-dark, .app-topbar.navbar-light {
  --bs-navbar-color: #7b7f87;
  --bs-navbar-hover-color: #3c3f44;
  --bs-navbar-active-color: #3d5f86;
  --bs-navbar-brand-color: #3d5f86;
  --bs-navbar-brand-hover-color: #314e6e;
  --bs-navbar-toggler-border-color: rgba(70, 80, 91, .25);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28123, 127, 135, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.app-topbar .navbar-brand { letter-spacing: .1px; font-size: 1rem; font-weight: 700 !important; }
.app-topbar .nav-link { border-radius: 6px; padding: .5rem .8rem; margin: 0 1px; }
.app-topbar .nav-link:hover { background: var(--fb-hover); }

/* ---- shell + FB-style left sidebar ------------------------------------ */
.app-shell { display: flex; min-height: calc(100vh - 56px); }
.app-sidebar {
  width: var(--app-sidebar-w); flex: 0 0 var(--app-sidebar-w);
  background: var(--fb-bg); min-height: calc(100vh - 56px);
}
@media (min-width: 992px) { .app-sidebar { position: sticky; top: 56px; align-self: flex-start; } }
.app-sidebar-inner { padding: 10px 8px; }
.app-nav-link {
  display: flex; align-items: center; gap: 10px; color: #4b4f56;
  padding: 9px 10px; border-radius: 8px; text-decoration: none; margin-bottom: 2px;
  font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.app-nav-link:hover { background: var(--fb-btn-grey); color: #26282c; }
.app-nav-link.active { background: var(--fb-blue-tint); color: var(--fb-blue-ink); font-weight: 700; }
.app-nav-link.active:hover { background: var(--fb-blue-tint); }
.app-nav-icon { width: 22px; text-align: center; }
.app-content { flex: 1; padding: 16px; min-width: 0; max-width: 100%; }
@media (min-width: 1200px) { .app-content { padding: 20px 24px; } }

/* ---- cards (FB card style) -------------------------------------------- */
.card {
  border-radius: 8px; border: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
  background: var(--fb-card);
}
.card-header { background: #fff; border-bottom: 1px solid var(--fb-line); padding: .65rem 1rem; }
.card-header.fw-semibold, .card-header .fw-semibold { font-size: .875rem; font-family: var(--fb-font-head); font-weight: 600; }
.card-footer { background: #fff; border-top: 1px solid var(--fb-line); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .10) !important; }
.shadow { box-shadow: 0 2px 6px rgba(0, 0, 0, .12) !important; }
.shadow-lg { box-shadow: 0 4px 14px rgba(0, 0, 0, .14) !important; }
.text-muted { color: var(--fb-muted) !important; }

/* ---- tables (FB-ish) --------------------------------------------------- */
.table > :not(caption) > * > * { vertical-align: middle; padding: .55rem .7rem; }
.table-hover > tbody > tr:hover { background: #f5f6f7; }
.table-light { --bs-table-bg: #f7f8fa; --bs-table-color: #5a6069; }
.table thead th { font-family: var(--fb-font-head); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--fb-muted); font-weight: 600; }
.table-dark { --bs-table-bg: #565d66; --bs-table-color: #eef0f2; --bs-table-border-color: rgb(255 255 255 / 12%); --bs-link-color: #cdd8e4; }

/* ---- stat cards -------------------------------------------------------- */
.stat-card .stat-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.stat-card { border: 0; }
a .stat-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.stat-card { transition: transform .12s ease, box-shadow .12s ease; }

/* ---- public pages ------------------------------------------------------ */
.public-nav-pills .nav-link { border-radius: 20px; }
.hero {
  background: linear-gradient(150deg, #e9eff7, #dfe6ee);
  color: #35405a; border-radius: 12px; padding: 60px 0;
  border: 1px solid #dde3ea;
}
.hero .display-5 { font-weight: 800; color: #2f3a52; }
.hero .lead { color: #5c6675; }
.public-footer { background: #fff; color: var(--fb-muted); border-top: 1px solid var(--fb-line); }
.public-footer a { color: #4a6fa1; }

/* ---- auth pages (FB login look) ---------------------------------------- */
.auth-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--fb-bg); padding: 20px;
}
.auth-wrap { display: flex; align-items: center; gap: 64px; max-width: 960px; width: 100%; justify-content: center; }
.auth-brand { flex: 1 1 420px; max-width: 460px; }
.auth-logo { font-size: 3rem; line-height: 1; }
.auth-site { font-size: 2.2rem; font-weight: 700; color: var(--fb-blue-ink); letter-spacing: -.5px; }
.auth-tag { color: var(--fb-muted); font-size: 1.05rem; margin-top: 4px; max-width: 420px; }
.auth-card { width: 100%; max-width: 430px; border: 0; border-radius: 12px; flex: 0 0 430px; }
.auth-card .fw-bold { color: var(--fb-blue-ink); }

/* ---- championship cards ------------------------------------------------ */
.champ-card { transition: transform .15s ease, box-shadow .15s ease; }
.champ-card:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.champ-banner {
  height: 128px; border-radius: 8px 8px 0 0;
  background: linear-gradient(130deg, #e0e7f0, #d4dde7);
  display: flex; align-items: center; justify-content: center; font-size: 2.3rem; overflow: hidden;
}
.champ-banner img { width: 100%; height: 100%; object-fit: cover; }

/* ---- misc widgets ------------------------------------------------------- */
.score-badge { font-variant-numeric: tabular-nums; font-weight: 700; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #e7e9e5; border: 1px solid var(--fb-line); }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #e7e9e5; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.step-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.step-tabs .step-tab {
  flex: 1; min-width: 130px; text-align: center; padding: 9px 6px; border-radius: 8px;
  background: #e9ebee; color: #5a6069; font-weight: 600; font-size: .85rem; text-decoration: none;
}
.step-tabs .step-tab.active { background: #4d83bd; color: #fff; }
.step-tabs .step-tab.done { background: #dfe9e1; color: #4d6a58; }

.judge-keypad input { font-size: 1.3rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.key-hint { font-size: .72rem; color: var(--fb-muted); }
kbd { background: #555d66; color: #f5f6f7; padding: 1px 5px; border-radius: 4px; font-size: .72rem; }

.rank-1 td { background: #f6f2e3 !important; }
.rank-2 td { background: #f3f4f5 !important; }
.rank-3 td { background: #f5ece4 !important; }
.qr-box svg { width: 130px; height: 130px; border: 4px solid #d3d7dc; border-radius: 8px; background: #fff; }

/* FB-ish pills */
.nav-pills .nav-link { color: #5a6069; border-radius: 20px; padding: .45rem 1rem; }
.nav-pills .nav-link.active { background: var(--fb-blue-tint) !important; color: var(--fb-blue-ink) !important; font-weight: 700; }
.champ-tabs .nav-link:not(.active):hover { background: var(--fb-btn-grey); }

/* pagination */
.page-item .page-link { color: #4a6fa1; border-color: var(--fb-line); background: #fff; }
.page-item .page-link:hover { background: var(--fb-hover); color: #3d5f86; }
.page-item.active .page-link { background: #4d83bd; border-color: #4d83bd; }
.page-item.disabled .page-link { background: var(--fb-hover); }

/* dropdowns / modals — FB white look */
.dropdown-menu { border: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); border-radius: 8px; }
.dropdown-item { color: #3c3f44; }
.dropdown-item:hover { background: var(--fb-hover); }
.modal-content { border: 0; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }

/* badges keep soft (led by --bs-*-rgb above); make text-bg-primary soft-blue */
.text-bg-primary { background-color: #4d83bd !important; color: #fff !important; }
.badge.text-bg-primary { background-color: #4d83bd !important; color: #fff !important; }

@media (max-width: 991.98px) {
  .app-content { padding: 12px; }
  .app-sidebar { min-height: 0; border-bottom: 1px solid var(--fb-line); }
  .app-sidebar-inner { display: flex; overflow-x: auto; gap: 2px; padding: 8px; }
  .app-nav-link { white-space: nowrap; }
}
@media print {
  .app-topbar, .app-sidebar, .no-print, .public-footer, nav { display: none !important; }
  .app-content { padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none !important; border: 1px solid #ccc; }
}