@charset "UTF-8";

/* ==========================================================
   BPMGC DESIGN TOKENS — v1.1
   Source of truth for all color, typography, and border values.
   ========================================================== */
:root {

  /* --- Brand --- */
  --bpmgc-green:       #0f4717;
  --bpmgc-charcoal:    #333638;
  --bpmgc-navy:        #253e5a;  /* LEGACY — 2d4166 do not use 253e5a for new layouts */
  --bpmgc-white:       #ffffff;

  /* --- POP Tier Colors (row/cell shading — dark text on light bg) --- */
  --pop-fast-bg:       #c8e6c9;
  --pop-fast-text:     #1b5e20;
  --pop-ok-bg:         #dff0d8;
  --pop-ok-text:       #2e6b3e;
  --pop-caution-bg:    #fff3cd;
  --pop-caution-text:  #856404;
/*  --pop-slow1-bg:      #fde0d0;
  --pop-slow1-text:    #7a2500;
  --pop-slow2-bg:      #f5c6cb;
  --pop-slow2-text:    #721c24;*/
	
--pop-slow1-bg:   #fde0d0;   /* keep as-is */
--pop-slow1-text: #7a2500;   /* keep as-is */
--pop-slow2-bg:   #f1a8ae;   /* noticeably deeper/more saturated */
--pop-slow2-text: #7f0000;   /* near-black red */	

  /* --- Bootstrap Contextual — coordinated with tier palette --- */
  --bs-success-row-bg:      #c8e6c9;
  --bs-success-row-text:    #1b5e20;
  --bs-success-btn:         #2e7d32;
  --bs-success-btn-hover:   #1b5e20;
  --bs-success-alert-bg:    #c8e6c9;
  --bs-success-alert-border:#a5d6a7;
  --bs-success-alert-text:  #1b5e20;

  --bs-warning-row-bg:      #fff3cd;
  --bs-warning-row-text:    #856404;
  --bs-warning-btn:         #d4970a;
  --bs-warning-btn-hover:   #b07d08;
  --bs-warning-alert-bg:    #fff3cd;
  --bs-warning-alert-border:#ffe69c;
  --bs-warning-alert-text:  #856404;

  --bs-danger-row-bg:       #f5c6cb;
  --bs-danger-row-text:     #721c24;
  --bs-danger-btn:          #c0392b;
  --bs-danger-btn-hover:    #a93226;
  --bs-danger-alert-bg:     #f5c6cb;
  --bs-danger-alert-border: #f1aeb5;
  --bs-danger-alert-text:   #721c24;

  --bs-info-row-bg:         #d1ecf1;
  --bs-info-row-text:       #0c5460;
  --bs-info-btn:            #17a2b8;
  --bs-info-btn-hover:      #138496;
  --bs-info-alert-bg:       #d1ecf1;
  --bs-info-alert-border:   #bee5eb;
  --bs-info-alert-text:     #0c5460;

  --bs-default-btn-bg:      #eeeeee;
  --bs-default-btn-text:    #333333;
  --bs-default-btn-hover-bg:#d6d6d6;

  --bs-primary:         #337ab7;
  --bs-primary-hover:   #2565a0;

  /* --- Row states (non-pace) --- */
  --penalty-bg:         #f1a8ae;
  --penalty-text:       #7f0000;
  --default-row-bg:     #cccccc;
  --default-row-text:   #333333;

  /* --- Event Type Colors ---
     Keyed to event_types_tbl.event_type_label. Class suffix is the
     lowercased, hyphenated label: "Major Tournament" -> major-tournament.
     -bg/-text drive the .etp-* pills. (Row-tint tokens were tried 2026-09-11
     and removed: at a tint light enough to keep text readable, the rows were
     not distinguishable from each other.) */
  --etype-weekday-bg:       #d4edda;
  --etype-weekday-text:     #155724;

  --etype-weekend-bg:       #cce5ff;
  --etype-weekend-text:     #004085;

  --etype-major-bg:         #fff3cd;
  --etype-major-text:       #7c5c00;

  --etype-away-bg:          #e2d9f3;
  --etype-away-text:        #5a3e85;

  --etype-board-bg:         #e2e3e5;
  --etype-board-text:       #3d454d;

  --etype-happyhour-bg:     #ffe5d0;
  --etype-happyhour-text:   #7c4000;

  --etype-banquet-bg:       #d0f0ea;
  --etype-banquet-text:     #0a5040;

  --etype-scga-bg:          #d6e0ea;
  --etype-scga-text:        #1a3a5c;

  --etype-maint-bg:         #f5e6cc;
  --etype-maint-text:       #6b4a00;

  --etype-unknown-bg:       #e2e3e5;
  --etype-unknown-text:     #555555;

  /* --- Surface / chrome --- */
  --surface-footer:     #f5f5f5;
  --tab-inactive-bg:    #e5e5e5;
  --tab-inactive-text:  #222222;

  /* --- Borders --- */
  --border-panel:       #dddddd;
  --border-table:       #dddddd;
  --border-separator:   #f0f0f0;
  --border-input:       #cccccc;
  --border-input-focus: #66afe9;
  --border-divider:     #e5e5e5;
  --border-accent-px:   3px;

  /* --- Typography --- */
  --font-heading:       'Nunito', sans-serif;
  --font-ui:            'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-base:     15px;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;
}


/* ==========================================================
   BASE — html / body
   ========================================================== */

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 80px;
  background-color: var(--bpmgc-navy);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  line-height: 1.65;
}


/* ==========================================================
   TYPOGRAPHY — Headings (Nunito)
   ========================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
}

h1, .h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

h2, .h2 {
  font-size: 22px;
  font-weight: 800;
}

h3, .h3 {
  font-size: 17px;
  font-weight: 700;
}

h4, .h4 {
  font-size: 14px;
  font-weight: 700;
}

h5, .h5 {
  font-size: 13px;
  font-weight: 700;
}

h6, .h6 {
  font-size: 12px;
  font-weight: 700;
}

/* h1 in page-header: white text; <small> subtitle uses Inter */
h1,
h1 small {
  color: #fff;
}

h1 small {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

/* Mobile heading scale */
@media screen and (max-width: 767px) {
  h1, .h1 {
    font-size: 24px;
  }

  h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 10px;
    margin-bottom: 5px;
    line-height: 1.1;
  }
}


/* ==========================================================
   TYPOGRAPHY — Tables (Inter)
   ========================================================== */

/* Table headers: Inter semibold, uppercase label style */
.table > thead > tr > th {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #666;
}

/* Table cells: tabular numerics for score columns */
.table > tbody > tr > td,
.table > tfoot > tr > td {
  font-family: var(--font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}


.table-bordered
 {
    border: 1px solid var(--border-panel);
}

.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td

 {
    border: 1px solid var(--border-panel);
}



/* ==========================================================
   TYPOGRAPHY — Panel headings (Inter)
   ========================================================== */

.panel-heading {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Override Bootstrap's panel-title so it inherits the panel-heading treatment */
.panel-heading .panel-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.panel-footer {

    background-color: #f5f5f5;
    border-top: 1px solid var(--border-panel);

}

.panel-default>.panel-heading
 {
    border-color: var(--border-panel);
}



/* ==========================================================
   TYPOGRAPHY — help text / .help-block
   ========================================================== */

.help-block {
  font-size: 13px;
  color: #999;
}

hr {
    border-top: 1px solid var(--border-panel);
}


/* ==========================================================
   BOOTSTRAP OVERRIDES — Contextual row colors
   Specificity matches Bootstrap 3's own selectors.
   ========================================================== */

/* Success */
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th,
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success {
  background-color: var(--bs-success-row-bg);
  color: var(--bs-success-row-text);
}

/* Warning */
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th,
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning {
  background-color: var(--bs-warning-row-bg);
  color: var(--bs-warning-row-text);
}

/* Danger */
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th,
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger {
  background-color: var(--bs-danger-row-bg);
  color: var(--bs-danger-row-text);
}

/* Info */
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th,
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info {
  background-color: var(--bs-info-row-bg);
  color: var(--bs-info-row-text);
}

/* .bg-* utility classes */
.bg-success { background-color: var(--bs-success-row-bg) !important; color: var(--bs-success-row-text) !important; }
.bg-warning { background-color: var(--bs-warning-row-bg) !important; color: var(--bs-warning-row-text) !important; }
.bg-danger  { background-color: var(--bs-danger-row-bg)  !important; color: var(--bs-danger-row-text)  !important; }
.bg-info    { background-color: var(--bs-info-row-bg)    !important; color: var(--bs-info-row-text)    !important; }


/* ==========================================================
   BOOTSTRAP OVERRIDES — Contextual text colors
   ========================================================== */

.text-success { color: var(--bs-success-row-text) !important; }
.text-warning { color: var(--bs-warning-row-text) !important; }
.text-danger  { color: var(--bs-danger-row-text)  !important; }
.text-info    { color: var(--bs-info-row-text)     !important; }


/* ==========================================================
   BOOTSTRAP OVERRIDES — Buttons
   ========================================================== */

.btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
}

.btn-success {
  background-color: var(--bs-success-btn);
  border-color: var(--bs-success-btn);
  color: #fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--bs-success-btn-hover);
  border-color: var(--bs-success-btn-hover);
  color: #fff;
}

.btn-warning {
  background-color: var(--bs-warning-btn);
  border-color: var(--bs-warning-btn);
  color: #fff;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: var(--bs-warning-btn-hover);
  border-color: var(--bs-warning-btn-hover);
  color: #fff;
}

.btn-danger {
  background-color: var(--bs-danger-btn);
  border-color: var(--bs-danger-btn);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: var(--bs-danger-btn-hover);
  border-color: var(--bs-danger-btn-hover);
  color: #fff;
}

.btn-info {
  background-color: var(--bs-info-btn);
  border-color: var(--bs-info-btn);
  color: #fff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: var(--bs-info-btn-hover);
  border-color: var(--bs-info-btn-hover);
  color: #fff;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  color: #fff;
}

.btn-default {
  background-color: var(--bs-default-btn-bg);
  color: var(--bs-default-btn-text);
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  background-color: var(--bs-default-btn-hover-bg);
  color: var(--bs-default-btn-text);
  border-color: #bbb;
}


/* ==========================================================
   BOOTSTRAP OVERRIDES — Alerts
   ========================================================== */

.alert-success {
  background-color: var(--bs-success-alert-bg);
  border-color: var(--bs-success-alert-border);
  color: var(--bs-success-alert-text);
}

.alert-warning {
  background-color: var(--bs-warning-alert-bg);
  border-color: var(--bs-warning-alert-border);
  color: var(--bs-warning-alert-text);
}

.alert-danger {
  background-color: var(--bs-danger-alert-bg);
  border-color: var(--bs-danger-alert-border);
  color: var(--bs-danger-alert-text);
}

.alert-info {
  background-color: var(--bs-info-alert-bg);
  border-color: var(--bs-info-alert-border);
  color: var(--bs-info-alert-text);
}


/* ==========================================================
   BORDER RADIUS — design system consistency
   Bootstrap 3 defaults to 4px on alerts and panels. The rest
   of the design system uses 8px for rounded surfaces, so
   override to match. Panel-heading uses 7px (8px outer minus
   1px border) to keep the inner edge tight against the outer.
   ========================================================== */

.alert {
  border-radius: 8px;
}

.panel {
  border-radius: 8px;
}
.panel-heading {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}



/* ==========================================================
   NAVBAR
   ========================================================== */

#navLoginForm  {}
#navLoginGHIN  {}
#navLoginPWD   {}

/* Brand: logo ink green */
.navbar-default .navbar-brand {
  color: var(--bpmgc-green);
  font-family: var(--font-heading);
  font-weight: 800;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #0a2e0f;
}

/* Nav links: green to match brand identity */
.navbar-default .navbar-nav > li > a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--bpmgc-green);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #0a2e0f;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
  color: #0a2e0f;
}

@media screen and (max-width: 370px) {
  .navbar-brand {
    font-size: 13px;
    margin-top: 0;
  }
}

@media screen and (max-width: 374px) {
  #loginBtnXS {
    display: none;
  }
}


/* ==========================================================
   PAGE HEADER
   ========================================================== */

.page-header {
  padding-bottom: 0;
  margin: 0 0 15px;
}

.page-header .text-muted {
	color: var(--bpmgc-white);
	 color: rgba(255, 255, 255, 0.65);
}

@media screen and (max-width: 767px) {
  .page-header {
    padding-bottom: 0;
    margin: 0 0 5px;
  }

  #subNavMobile {
    margin-bottom: 5px;
  }
}


/* ==========================================================
   MEMBER / FORM CHROME
   ========================================================== */

.memberActions {
  margin-top: 20px;
}

#memberLogin.in,
#memberLogin.collapsing {
  display: block !important;
}

.breadcrumb {
  margin-bottom: 0;
}

div.alertDiv {
  margin-top: 20px;
  margin-bottom: 20px;
}


/* ==========================================================
   CONTAINER BACKGROUNDS
   ========================================================== */

.container-home, .container-members {
  min-height: 1000px;
  margin-bottom: 10px;
}

.container-membership
 {
  background: url('../images/bkgd_membership_1500.jpg') center / cover no-repeat;
  min-height: 1000px;
  margin-bottom: 10px;
}

.container-myaccount {
/*  background: url('../images/sunset_1500_929.jpg') center / cover no-repeat;*/
  min-height: 929px;
}

.container-event {
/*  background: url('../images/bkgd_h14_1500-848.jpg') center / cover no-repeat;*/
  min-height: 848px;
}

.homeContent p,
.homeContent h1,
.homeContent h2 {
  color: #ffffff;
}

@media screen and (max-width: 1024px) {
  .tooltip {
    display: none !important;
  }
}


/* ==========================================================
   JUMBOTRON — Membership
   ========================================================== */

.jumboMembership {
  background: url('../images/bkgd_membership_1500.jpg') center / cover no-repeat;
  min-height: 300px;
  color: #ffffff;
  background-color: #545759;
  margin-bottom: 10px;
}

.jumboMembership li {
  font-size: 18px;
}


/* ==========================================================
   STICKY FOOTER
   ========================================================== */

/*.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: var(--surface-footer);
  padding-top: 10px;
}*/

    .footer {
      width: 100%;
      background-color: var(--surface-footer);
      padding: 18px 0 16px;          /* was a fixed 60px tall absolute box;
                                        now grows to fit its content */
    }

    /* Play Fast Golf "Powered by" footer block */
    .footer .pf-poweredby {
      display: inline-block;
      margin-bottom: 8px;
      opacity: .95;
      transition: opacity .15s ease, transform .15s ease;
    }
    .footer .pf-poweredby:hover {
      opacity: 1;
      transform: translateY(-1px);
    }
    .footer .pf-poweredby-img {
      display: inline-block;
      width: auto;                   /* height set by HTML attr; width follows */
      vertical-align: middle;
    }
    .footer .pf-poweredby-line {
      font-size: 13px;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .footer .pf-poweredby-line .pf-poweredby-cta {
      color: #0097BF;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
    }
    .footer .pf-poweredby-line .pf-poweredby-cta:hover {
      color: #002D62;
      text-decoration: underline;
    }

.footer  .footer-legal {
	
	font-size: 11px;

}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  background-color: #777;
  border-left: 1px solid #000;
}
::-webkit-scrollbar-thumb {
  background-color: #e8e8e8;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #f7f7f7;
}


/* ==========================================================
   FORMS
   ========================================================== */

#editEventForm .inputGroupContainer .form-control-feedback,
#editEventForm .selectContainer .form-control-feedback {
  top: 0;
  right: -15px;
}

@media (max-width: 767px) {
  table.colsFixeds {
    table-layout: fixed;
  }
}

table.colsFixed {
  table-layout: fixed;
}


/* ==========================================================
   NAV TABS
   ========================================================== */

.nav-tabs {
  border-bottom: 1px solid transparent;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  color: var(--tab-inactive-text);
  background-color: var(--tab-inactive-bg);
  border: 1px solid transparent;
  border-bottom-color: #ffffff;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
  border: 1px solid #777777;
  border-bottom-color: transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #337ab7;
  background-color: #ffffff;
  border: 1px solid #fff;
  border-bottom-color: transparent;
  cursor: default;
}

/* ==========================================================
   NAV TABS — mobile horizontal scroll
   Prevents ugly wrapping when tabs don't fit viewport width.
   Converts float layout to flex so scroll works cleanly.
   ========================================================== */

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border-table);
  }

  .nav-tabs > li {
    float: none;
    flex-shrink: 0;
  }

  .nav-tabs > li > a {
    white-space: nowrap;
  }

  /* Hide scrollbar visually; scroll still works via swipe */
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs {
    scrollbar-width: none;
  }
}



/* ==========================================================
   THUMBNAIL
   ========================================================== */

.thumbnail {
  display: block;
  padding: 10px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: border 0.2s ease-in-out;
}


/* ==========================================================
   ROW STATES — Penalty / Default
   ========================================================== */

/* Penalty row: no-show / late withdrawal */
.table > thead > tr > td.penalty,
.table > tbody > tr > td.penalty,
.table > tfoot > tr > td.penalty,
.table > thead > tr > th.penalty,
.table > tbody > tr > th.penalty,
.table > tfoot > tr > th.penalty,
.table > thead > tr.penalty > td,
.table > tbody > tr.penalty > td,
.table > tfoot > tr.penalty > td,
.table > thead > tr.penalty > th,
.table > tbody > tr.penalty > th,
.table > tfoot > tr.penalty > th {
  background-color: var(--penalty-bg);
  color: var(--penalty-text);
}

.text-penalty {
  color: var(--penalty-text);
}

.list-group-item-penalty {
  color: #000000;
  background-color: var(--penalty-bg);
}

a.list-group-item-penalty,
button.list-group-item-penalty {
  color: #000000;
}

/* Default / withdrawn row */
tr.default,
tr.default td {
  background-color: var(--default-row-bg);
  color: var(--default-row-text);
}


/* ==========================================================
   PANEL ACCENT STRIPES
   Utility classes for 3px top border accents on .panel.
   Apply alongside Bootstrap's .panel class:
     <div class="panel panel-default panel-accent-green">
   ========================================================== */

.panel-accent-green   { border-top: var(--border-accent-px) solid var(--bs-success-btn); }
.panel-accent-blue    { border-top: var(--border-accent-px) solid var(--bs-primary); }
.panel-accent-warning { border-top: var(--border-accent-px) solid var(--bs-warning-btn); }
.panel-accent-danger  { border-top: var(--border-accent-px) solid var(--bs-danger-btn); }


/* ==========================================================
   POP TIER CLASSES — 5-tier system
   .pop-tier-* for table row/cell coloring.
   .pop-chip-* for inline badge/chip coloring.

   Legacy 3-class names (.pop-rank-fast/mid/slow) remapped
   to the closest tier equivalents and kept for backward
   compatibility until templates are updated.
   ========================================================== */

/* Tier 1 — Fast */
.pop-tier-fast,
tr.pop-tier-fast > td {
  background-color: var(--pop-fast-bg);
  color: var(--pop-fast-text);
}

/* Tier 2 — On Pace (BPMGC only, no BS equivalent) */
.pop-tier-ok,
tr.pop-tier-ok > td {
  background-color: var(--pop-ok-bg);
  color: var(--pop-ok-text);
}

/* Tier 3 — Caution */
.pop-tier-caution,
tr.pop-tier-caution > td {
  background-color: var(--pop-caution-bg);
  color: var(--pop-caution-text);
}

/* Tier 4 — Slow L1 (BPMGC only, no BS equivalent) */
.pop-tier-slow1,
tr.pop-tier-slow1 > td {
  background-color: var(--pop-slow1-bg);
  color: var(--pop-slow1-text);
}

/* Tier 5 — Slow L2 */
.pop-tier-slow2,
tr.pop-tier-slow2 > td {
  background-color: var(--pop-slow2-bg);
  color: var(--pop-slow2-text);
}

/* Legacy aliases — remapped to nearest tier; remove once templates updated */
.pop-rank-fast { background-color: var(--pop-ok-bg);      color: var(--pop-ok-text); }
.pop-rank-mid  { background-color: var(--pop-caution-bg); color: var(--pop-caution-text); }
.pop-rank-slow { background-color: var(--pop-slow2-bg);   color: var(--pop-slow2-text); }

/* Chip / badge variants */
.pop-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
  margin-left: 4px;
}

.pop-chip-fast    { background-color: var(--pop-fast-bg);    color: var(--pop-fast-text); }
.pop-chip-ok      { background-color: var(--pop-ok-bg);      color: var(--pop-ok-text); }
.pop-chip-caution { background-color: var(--pop-caution-bg); color: var(--pop-caution-text); }
.pop-chip-slow1   { background-color: var(--pop-slow1-bg);   color: var(--pop-slow1-text); }
.pop-chip-slow2   { background-color: var(--pop-slow2-bg);   color: var(--pop-slow2-text); }

/* Legacy chip aliases */
.pop-chip-shortest { background-color: var(--pop-ok-bg);      color: var(--pop-ok-text); }
.pop-chip-middle   { background-color: var(--pop-caution-bg); color: var(--pop-caution-text); }
.pop-chip-longest  { background-color: var(--pop-slow2-bg);   color: var(--pop-slow2-text); }


/* ==========================================================
   POP CALLOUT
   ========================================================== */

.pop-callout {
  border-left: 4px solid #ddd;
  padding: 12px 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  background: #fff;
}

.pop-callout-body {
  line-height: 1.5;
}

.pop-callout-body .fa {
  width: 16px;
}

.pop-callout-footer {
  margin-top: 6px;
  font-size: 12px;
}

.pop-tee-breakdown {
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 6px;
}

.pop-hole-divider {
  margin: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.pop-rank-line {
  font-size: 13px;
  font-weight: 600;
}

.pop-insights-list li { margin-bottom: 6px; }
.pop-insights-list .fa { width: 16px; margin-right: 6px; }


/* ==========================================================
   BACK TO TOP BUTTON
   ========================================================== */

a.back-to-top {
  display: none;
  position: fixed;
  bottom: 70px;
  right: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 4px;
  font-size: 18px;
  z-index: 1030;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

a.back-to-top:hover,
a.back-to-top:focus {
  background-color: rgba(0, 0, 0, 0.70);
  color: #fff;
  text-decoration: none;
}


/* ==========================================================
   HOLE AVERAGES STRIP — pop_events.cfm
   Horizontal scrollable row of per-hole time cards.
   ========================================================== */

.pop-hole-panel {
  margin-top: 14px;
}

.pop-hole-heading {
  padding: 8px 12px;
  display: flex;
  align-items: center;
}

.pop-hole-title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}

.pop-hole-toggle {
  font-size: 12px;
  margin-top: 1px;
  color: #777;
  text-decoration: none;
}

.pop-hole-toggle:hover {
  color: #333;
}

.pop-hole-body {
  padding: 10px 12px 6px;
}

.hole-avgs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hole-avgs-strip-row2 {
  margin-top: 6px;
}

.hole-avg-card {
  flex: 0 0 auto;
  width: 70px;
  text-align: center;
  border: 1px solid var(--border-panel);
  border-radius: 4px;
  padding: 5px 3px 4px;
  background: #fafafa;
  transition: background 0.15s;
}

.hole-avg-card:hover {
  background: #f0f4f8;
  border-color: #bbb;
}

.hole-avg-card img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  margin: 0 auto 3px;
}

.hole-avg-card .hole-num {
  font-size: 10px;
  font-weight: 700;
  color: #777;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hole-avg-card .hole-time {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
}

.hole-avg-total-card {
  border-color: #aaa;
  background: #efefef;
  border-left: 3px solid #888;
}

.hole-avg-total-card:hover {
  background: #e4e4e4;
}

.hole-avg-total-icon {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-hole-footnote {
  font-size: 11px;
  margin: 4px 0 0;
}

/* ============================================================
   Homepage History Stat Bar — hp-stat-bar
   Full-width strip of historical callout stats.
   5 items separated by hairline dividers; wraps to 2-col on
   mobile, single-col on very small screens.
   Color: BPMGC green (#0f4717) background, white text.
============================================================ */

.hp-stat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.hp-stat-item {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 12px;
	border-top: 2px solid var(--bs-success-row-bg);

    color: #0f4717;
}

.hp-stat-value {
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f4717;
    display: block;
    margin-bottom: 4px;
}

.hp-stat-label {
    font-size: 11px;
    line-height: 1.4;
    color: #0f4717;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Vertical hairline dividers between items — hidden when wrapping */
.hp-stat-divider {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.20);
    align-self: stretch;
    flex: 0 0 1px;
    min-height: 40px;
}

@media (max-width: 767px) {
    .hp-stat-item {
        flex: 1 1 45%;   /* two columns on small screens */
    }
    .hp-stat-divider {
        display: none;   /* dividers don't make sense when wrapping */
    }
}

@media (max-width: 400px) {
    .hp-stat-item {
        flex: 1 1 100%;  /* single column on very small phones */
    }
    .hp-stat-value {
        font-size: 20px;
    }
}

/* ═══ NEW MEMBER BADGE — attendee table (Phase 5) ═══ */
.label-new-member {
    background-color: #2e7d32;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ═══ CTP SENIOR BONUS BADGE — attendee table ═══ */

.label-ctp-senior {
    background-color: #faf1d8;
    color: #7a5f14;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;

    vertical-align: middle;

}

.label-ctp-senior .fa {
    margin-right: 2px;
}

/* ============================================================
   Hole Difficulty Panel (news composer reference)
   ------------------------------------------------------------
   Compact table shown alongside Event Results in the writeup
   composer. Same visual weight as the compact results summary.
   ============================================================ */

.hole-difficulty-panel {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.hole-difficulty-header {
    font-size: 14px;
    color: #0F4717;
    margin-bottom: 6px;
}
.hole-difficulty-header .fa {
    margin-right: 4px;
}
.hole-difficulty-header .hole-difficulty-meta {
    color: #888;
    font-weight: normal;
    font-size: 12px;
    margin-left: 6px;
}

.hole-difficulty-table {
    margin-bottom: 0;
    font-size: 12px;
}
.hole-difficulty-table > thead > tr > th {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 4px 6px;
    font-weight: 600;
    color: #555;
    text-align: right;
}
.hole-difficulty-table > thead > tr > th.hd-rank,
.hole-difficulty-table > thead > tr > th.hd-hole {
    text-align: left;
}
.hole-difficulty-table > tbody > tr > td {
    padding: 4px 6px;
    text-align: right;
    border-top: 1px solid #f0f0f0;
}
.hole-difficulty-table > tbody > tr > td.hd-rank {
    text-align: left;
    color: #888;
    width: 28px;
}
.hole-difficulty-table > tbody > tr > td.hd-hole {
    text-align: left;
    font-weight: 600;
}
.hole-difficulty-table > tbody > tr:first-child > td {
    border-top: none;
}

/* par-relative coloring -- matches existing event results palette */
.hole-difficulty-table .hd-vspar {
    font-weight: 600;
}
.hole-difficulty-table .hd-vspar.hd-over  { color: #c62828; }   /* over par */
.hole-difficulty-table .hd-vspar.hd-even  { color: #1565c0; }   /* even par */
.hole-difficulty-table .hd-vspar.hd-under { color: #000000; }   /* under par */

/* Home page live stream banner */
.hp-live-banner {
    max-width: 1320px;
    margin: 0 auto 24px;
}
.hp-live-header {
    color: #fff;
    margin-bottom: 10px;
}
.hp-live-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: #c0392b;
    border-radius: 3px;
    padding: 3px 8px;
    margin-right: 8px;
    vertical-align: middle;
}
.hp-live-badge .fa-circle { font-size: 8px; margin-right: 4px; }
.hp-live-title {
    font-size: 20px;
    font-weight: 700;
    vertical-align: middle;
}
.hp-live-sub {
    font-size: 14px;
    opacity: .75;
    margin-left: 8px;
    vertical-align: middle;
}
.hp-live-yt {
    float: right;
    color: #fff;
    font-size: 13px;
    opacity: .85;
    padding-top: 4px;
}
.hp-live-yt:hover, .hp-live-yt:focus { color: #fff; opacity: 1; }

.hp-live-lb {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.hp-live-lb-head {
    background: #0f4717;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 12px;
}
.hp-live-lb-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.hp-live-lb-scroll iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
}

@media (max-width: 1199px) {
    .hp-live-lb { margin-top: 16px; }
    .hp-live-yt { float: none; display: block; margin-top: 6px; }
}
@media (max-width: 767px) {
    .hp-live-banner { margin-bottom: 16px; }
    .hp-live-title { font-size: 17px; }
    .hp-live-sub { display: block; margin-left: 0; }
    .hp-live-lb-scroll iframe { height: 420px; }
}

/* Leaderboard pending state (shown before scoring opens) */
.hp-live-lb-pending {
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: #fff;
    border-radius: 4px;
}
.hp-lbp-icon {
    font-size: 40px;
    color: #0f4717;
    opacity: .35;
    margin-bottom: 16px;
}
.hp-lbp-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f4717;
    margin-bottom: 2px;
}
.hp-lbp-sub {
    font-size: 14px;
    color: #777;
    margin-bottom: 16px;
}
.hp-lbp-msg {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
    max-width: 300px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .hp-live-lb-pending { height: 300px; padding: 20px; }
    .hp-lbp-icon { font-size: 32px; margin-bottom: 12px; }
    .hp-lbp-msg { font-size: 14px; margin-bottom: 16px; }
}

/* Match leaderboard panel height to the video column */
@media (min-width: 1200px) {
    .hp-live-banner > .row {
        display: flex;
        align-items: stretch;
    }
    .hp-live-banner > .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
    .hp-live-banner .hp-live-lb {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    .hp-live-banner .hp-live-lb-scroll {
        flex: 1 1 auto;
    }
    .hp-live-banner .hp-live-lb-scroll iframe {
        height: 100%;
        min-height: 0;
    }
    .hp-live-banner .hp-live-lb-pending {
        flex: 1 1 auto;
        height: auto;
    }
}

/* ==========================================================
   EVENT TYPE COLOR SYSTEM — shared (2026-09-11)

   Single source of truth for event-type colors. These rules
   previously lived in BOTH balboa.events.css and balboa.index.css
   and had drifted apart (weekday/weekend were swapped between the
   two). Both copies removed; this block is canonical. Colors are
   declared as tokens in :root alongside the POP tier palette.

   Class suffix is built from the event type label:
     "etp-" & LCase(Replace(Trim(label), " ", "-", "ALL"))

     .etp-*   pill / badge colors — events page, home page, member page

   NOTE: event_types_tbl label is "Banquet" (singular). The old rules
   only defined .etp-banquets, so banquet events never picked up a
   color anywhere. Both spellings are defined below.
   ========================================================== */

/* ---- Type pill (base) ---------------------------------- */
.event-type-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  background: var(--etype-unknown-bg);
  color: var(--etype-unknown-text);
}

/* ---- Type pill colors ---------------------------------- */
.etp-weekday-event      { background: var(--etype-weekday-bg);   color: var(--etype-weekday-text); }
.etp-weekend-event      { background: var(--etype-weekend-bg);   color: var(--etype-weekend-text); }
.etp-major-tournament   { background: var(--etype-major-bg);     color: var(--etype-major-text); }
.etp-away-event         { background: var(--etype-away-bg);      color: var(--etype-away-text); }
.etp-board-meeting      { background: var(--etype-board-bg);     color: var(--etype-board-text); }
.etp-happy-hour         { background: var(--etype-happyhour-bg); color: var(--etype-happyhour-text); }
.etp-banquet,
.etp-banquets           { background: var(--etype-banquet-bg);   color: var(--etype-banquet-text); }
.etp-scga-team-event    { background: var(--etype-scga-bg);      color: var(--etype-scga-text); }
.etp-course-maintenance { background: var(--etype-maint-bg);     color: var(--etype-maint-text); }

/* ---- Pills inside tables -------------------------------- */
/* Table cells have no flex gap to separate the pill from the text,
   so give it its own breathing room. Scoped to .table so the events
   and home pages (flex rows, already gapped) are untouched. */
.table .event-type-pill {
  margin-left: 6px;
  vertical-align: middle;
}

/* ==========================================================
   MEMBER EVENT TIMELINE — viewMember.cfm (2026-09-11)

   One chronological list replacing the old Order of Merit
   detail table + Upcoming Events + Waitlist History panels.
   Newest first, so future signups sit at the top.

   NOTE: admin_attendance_dashboard.cfm renders a similar
   timeline from .attd-timeline-* in balboa.attendancedashboard.css.
   These are deliberately NOT merged yet — that stylesheet wasn't
   in hand when this was written, and the admin timeline carries
   year headers this one doesn't need. Worth consolidating onto
   one .mtl-* set later.
   ========================================================== */

.mtl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mtl-item {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--border-separator);
}
.mtl-item:last-child {
  border-bottom: none;
}

/* The vertical rail, drawn per item so it closes up cleanly at
   the ends instead of overshooting the first and last dots. */
.mtl-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-divider);
}
.mtl-item:first-child::before { top: 18px; }
.mtl-item:last-child::before  { height: 18px; bottom: auto; }

.mtl-dot {
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bpmgc-white);
  border: 3px solid var(--default-row-bg);
  z-index: 1;
}
.mtl-attending  .mtl-dot { border-color: var(--bs-success-btn); }
.mtl-signedup   .mtl-dot { border-color: var(--bs-primary); }
.mtl-waitlist   .mtl-dot { border-color: var(--bs-warning-btn); }
.mtl-resultonly .mtl-dot { border-color: var(--default-row-bg); }

/* Future rows get a faint rail-side accent so the boundary between
   what's coming and what's played reads without a section header. */
.mtl-future {
  border-left: var(--border-accent-px) solid var(--bs-info-row-bg);
  margin-left: calc(-1 * var(--border-accent-px));
  padding-left: 28px;
}

.mtl-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.mtl-date {
  font-weight: var(--fw-semibold);
  color: var(--bpmgc-charcoal);
  font-size: 13px;
}
.mtl-row2 {
  line-height: 1.35;
}
.mtl-title {
  font-weight: var(--fw-semibold);
}
.mtl-sub {
  color: #888888;
  font-size: 12px;
}

.mtl-points {
  margin-top: 4px;
  font-size: 13px;
}
.mtl-points .list-inline {
  margin-bottom: 0;
}
.mtl-points .list-inline > li {
  padding-left: 0;
  padding-right: 12px;
}
.mtl-pts-amt {
  font-weight: var(--fw-bold);
  color: var(--bpmgc-charcoal);
}
.mtl-pts-note {
  color: #888888;
}

.mtl-empty {
  padding: 24px 0;
  color: #aaaaaa;
  text-align: center;
}

@media (max-width: 480px) {
  .mtl-item        { padding-left: 24px; }
  .mtl-future      { padding-left: 24px; }
  .mtl-row1        { gap: 4px; }
  .mtl-date        { font-size: 12px; }
}