/* ============================================================================
   KAPPA - Team Website Styles
   ============================================================================ */

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

body {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

a:link,
a:visited {
    color: #0066cc;
    text-decoration: none;
}

a:hover,
a:active {
    text-decoration: none;
}

b {
    font-weight: 900 !important;
}

/* ============================================================================
   INDEX PAGE STYLES
   ============================================================================ */

/* Container */
body.index-page {
    color: black;
    background-color: white;
}

body.index-page #pageContainer {
    width: 97%;
    max-width: 400px;
    margin: 0;
    padding: 0;
}

/* Tables - Global */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 40px;
}

table tr td,
table tr th {
    padding: 2px;
    margin: 0;
    border-spacing: 0;
    border-width: 1px 0;
    border-style: solid;
    border-color: #E0E0E0;
    text-align: left;
    font-size: 10pt;
}

table tr th {
    font-weight: bolder;
    border-width: 0 0 2px 0;
    border-color: #000000;
    font-size: 10pt;
}

table caption {
    padding: 8px 0 4px 0;
    margin: 0 0 10px 0;
    text-align: center;
    font-weight: bold;
    font-size: 14pt;
    color: #000000;
    border-bottom: 2px solid #000000;
}

table caption a {
    color: inherit;
    text-decoration: none;
}

table caption a:hover {
    text-decoration: underline;
}

/* Goalies Table - Equal width columns after Name */
#tableGoalies tr td,
#tableGoalies tr th {
    font-size: 9pt;
}

#tableGoalies tr td:nth-of-type(1),
#tableGoalies tr th:nth-of-type(1) {
    width: 8%;
    text-align: center;
}

#tableGoalies tr td:nth-of-type(2),
#tableGoalies tr th:nth-of-type(2) {
    width: auto;
    white-space: nowrap;
}

#tableGoalies tr td:nth-of-type(n+3),
#tableGoalies tr th:nth-of-type(n+3) {
    width: calc((100% - 8%) / 11);
    text-align: center;
}

/* Standings Table - Equal width columns after Team */
#tableStandings tr td:nth-of-type(1),
#tableStandings tr th:nth-of-type(1) {
    width: auto;
}

#tableStandings tr td:nth-of-type(n+2),
#tableStandings tr th:nth-of-type(n+2) {
    width: calc(100% / 8);
    text-align: center;
}

/* iCal link in schedule caption */
#iCalLink {
    margin-left: 8px;
}

#iCalLink a {
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    color: #0066cc;
}

#iCalLink a:hover {
    text-decoration: underline;
}

/* Hide borders for empty tables */
table tbody.no-data tr td {
    border: none !important;
}

table:has(tbody.no-data) {
    border: none;
    margin-bottom: 20px;
}

table:has(tbody.no-data) tr {
    border: none;
}

table:has(tbody.no-data) tr td {
    border: none !important;
}

/* Welcome Table */
#tableWelcome {
    width: auto;
    margin-bottom: 15px;
}

#tableWelcome tr td {
    border: none;
}

#tableWelcome tr td:nth-of-type(2) {
    padding-left: 8px;
    padding-right: 8px;
}

#tableWelcome tr td:first-of-type img {
    width: 80px;
    height: 80px;
}

#tableWelcome tr td:nth-of-type(2) span:nth-of-type(1) {
    font-weight: bolder;
    font-size: 12pt;
}

#tableWelcome tr td:nth-of-type(2) span:nth-of-type(2) {
    font-style: italic;
    font-size: 11pt;
}

/* Lineup Table */
#tableLineup tr td,
#tableLineup tr th {
    text-align: center;
}

#tableLineup tr td:nth-of-type(1),
#tableLineup tr td:nth-of-type(5) {
    width: 5%;
    color: white;
    background-color: #A6A6A6;
    font-weight: bolder;
}

#tableLineup tr td:nth-of-type(2),
#tableLineup tr td:nth-of-type(3),
#tableLineup tr td:nth-of-type(4) {
    width: 30%;
}

/* Forward lines (rows 2-5) */
#tableLineup tr:nth-of-type(2) td:nth-of-type(1),
#tableLineup tr:nth-of-type(3) td:nth-of-type(1),
#tableLineup tr:nth-of-type(4) td:nth-of-type(1),
#tableLineup tr:nth-of-type(5) td:nth-of-type(1),
#tableLineup tr:nth-of-type(2) td:nth-of-type(5),
#tableLineup tr:nth-of-type(3) td:nth-of-type(5),
#tableLineup tr:nth-of-type(4) td:nth-of-type(5),
#tableLineup tr:nth-of-type(5) td:nth-of-type(5) {
    background-color: #F79646;
}

/* Defense pairs (rows 6-8) */
#tableLineup tr:nth-of-type(6) td:nth-of-type(1),
#tableLineup tr:nth-of-type(7) td:nth-of-type(1),
#tableLineup tr:nth-of-type(8) td:nth-of-type(1),
#tableLineup tr:nth-of-type(6) td:nth-of-type(3),
#tableLineup tr:nth-of-type(7) td:nth-of-type(3),
#tableLineup tr:nth-of-type(8) td:nth-of-type(3),
#tableLineup tr:nth-of-type(6) td:nth-of-type(5),
#tableLineup tr:nth-of-type(7) td:nth-of-type(5),
#tableLineup tr:nth-of-type(8) td:nth-of-type(5) {
    color: white;
    background-color: #50ACC4;
    font-weight: bolder;
}

/* Goalies (rows 9-10) */
#tableLineup tr:nth-of-type(9) td:nth-of-type(1),
#tableLineup tr:nth-of-type(10) td:nth-of-type(1),
#tableLineup tr:nth-of-type(9) td:nth-of-type(2),
#tableLineup tr:nth-of-type(10) td:nth-of-type(2),
#tableLineup tr:nth-of-type(9) td:nth-of-type(4),
#tableLineup tr:nth-of-type(10) td:nth-of-type(4),
#tableLineup tr:nth-of-type(9) td:nth-of-type(5),
#tableLineup tr:nth-of-type(10) td:nth-of-type(5) {
    background-color: #8165A0;
}

/* Header and separator rows */
#tableLineup tr:nth-of-type(1) td,
#tableLineup tr:nth-of-type(11) td {
    color: white;
    background-color: #A6A6A6;
    font-weight: bolder;
}

/* Player list rows (after row 11) */
#tableLineup tr:nth-of-type(n+12) td:nth-of-type(1),
#tableLineup tr:nth-of-type(n+12) td:nth-of-type(5) {
    background-color: #A6A6A6;
}

/* Bottom border row */
#tableLineup tr:last-child td {
    color: white;
    background-color: #A6A6A6;
    font-weight: bolder;
}

/* Schedule Table */
#tableSchedule tr td table tr td {
    border: none;
    padding: 0;
}

#tableSchedule tr td:nth-of-type(4) table tr td:nth-of-type(1),
#tableSchedule tr td:nth-of-type(5) table tr td:nth-of-type(1) {
    width: 22px;
}

#tableSchedule tr[data-nextgamerow='true'] {
    background-color: #ffffcc;
}

/* Status column - blue links for FINAL and game times */
#tableSchedule tr td:nth-of-type(2) a {
    color: #0066cc;
    text-transform: uppercase;
    text-decoration: none;
}

#tableSchedule tr td:nth-of-type(2) a:hover {
    text-decoration: underline;
}

/* Matchup Table 2 - 3-column grid layout */
#tableMatchup2 tr td:first-child {
    font-style: italic;
}

#tableMatchup2 tr.section-header td {
    font-weight: bolder;
    text-align: left;
    font-style: normal;
    border-width: 0 0 2px 0;
    border-color: #000000;
}

#tableMatchup2 sub {
    font-size: 0.7em;
    vertical-align: sub;
}

#tableMatchup2 a.bold {
    font-weight: bolder;
}

#tableMatchup2 td.bold {
    font-weight: bolder;
}

/* Footer */
#footer {
    text-align: center;
    padding-top: 10px;
    color: #666;
    font-size: 9pt;
    font-style: italic;
}

.footer {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 20px;
}

/* ============================================================================
   SOUNDOFF PAGE STYLES
   ============================================================================ */

body.soundoff-page {
    color: black;
    background-color: white;
}

body.soundoff-page #pageContainer {
    width: 97%;
    max-width: 400px;
    margin: 0;
    padding: 0;
}

/* Soundoff Section Tables */
#tableFunctions,
#tableMessage,
#tablePlayers {
    margin-bottom: 30px;
}

/* Soundoff and index table captions inherit from global table caption style */

#tableFunctions tbody tr td,
#tableMessage tbody tr td,
#tablePlayers tbody tr td {
    border: none;
    padding: 10px 0;
}

#tableFunctions tbody tr td {
    text-align: center;
}

#tableFunctions a {
    color: #0066cc;
    text-decoration: none;
    font-weight: 600;
    font-size: 12pt;
    padding: 4px 8px;
}

#tableFunctions a:hover {
    text-decoration: underline;
}

/* Header */
#header {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066cc;
}

#header h1 {
    margin: 0 0 5px 0;
    color: #0066cc;
    font-size: 20pt;
}

#header p {
    margin: 0;
    color: #666;
    font-size: 10pt;
}

.home-link {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10pt;
    color: #0066cc;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.home-link:hover {
    background-color: #0066cc;
    color: white;
}

/* Message Preview */
#messagePreview {
    margin-bottom: 15px;
}

#messageText {
    width: 100%;
    height: 206px;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11pt;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    resize: none;
    box-sizing: border-box;
}

#messageText:focus {
    outline: none;
    border-color: #0066cc;
}

/* Controls */
#controls {
    display: flex;
    gap: 3px;
    margin-bottom: 15px;
    width: 100%;
}

.btn {
    flex: 1;
    padding: 8px 2px;
    font-size: 8pt;
    font-weight: 700;
    border: 1px solid #ddd;
    background-color: white;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    background-color: #f0f8ff;
    border-color: #0066cc;
    color: #0066cc;
}

.btn.active {
    background-color: #0066cc;
    border-color: #0066cc;
    color: white;
}

/* Icon Buttons */
.btn-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    padding: 0;
    font-size: 24pt;
    border: 3px solid #666;
    background: linear-gradient(to bottom, #f8f8f8, #e0e0e0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
}

.btn-icon:hover {
    background: linear-gradient(to bottom, #e6f2ff, #cce5ff);
    border-color: #0066cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
}

.btn-icon:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 2px 4px rgba(0,0,0,0.1);
    background: linear-gradient(to bottom, #d0d0d0, #e8e8e8);
}

/* Player List */
#playerList {
    margin-bottom: 15px;
}

.player-link {
    display: block;
    padding: 15px;
    margin-bottom: 8px;
    background-color: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-size: 14pt;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s;
}

.player-link:hover {
    background-color: #e6f2ff;
    border-color: #0066cc;
    color: #0066cc;
}

.player-link:active {
    transform: scale(0.98);
}

.player-link.no-phone {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.player-number {
    font-size: 11pt;
    color: #999;
    margin-right: 8px;
}

.player-status {
    font-size: 9pt;
    color: #999;
    margin-left: 8px;
    font-weight: 400;
}



/* Mobile Responsive */
@media (max-width: 500px) {
    .player-link {
        font-size: 13pt;
        padding: 12px;
    }
}

/* ============================================================================
   NAVIGATION LINKS
   ============================================================================ */

.nav-link {
    color: #0066cc;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.nav-link:hover {
    background-color: #f0f0f0;
    color: #004499;
}

.nav-link.active {
    background-color: #0066cc;
    color: white;
}

.nav-link.active:hover {
    background-color: #0055aa;
}

/* ============================================================================
   UTILITY CLASSES - Extracted from inline styles
   ============================================================================ */

/* Loading indicator */
.loading-indicator {
    text-align: center;
    padding: 20px;
}

/* Error message box */
.error-message {
    display: none;
    background: #fee;
    border: 1px solid #fcc;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
    color: #c33;
}

.footer .footer-link {
    color: #666;
    text-decoration: none;
}

.footer .footer-link:hover {
    text-decoration: underline;
}

/* Message preview layout */
.message-preview-container {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: stretch;
}

.message-preview-textarea {
    flex: 1;
}

.message-preview-textarea textarea {
    height: 100%;
}

.char-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    color: #666;
    background-color: transparent;
    padding: 4px;
    height: 24px;
    flex: 0 0 24px;
}

.button-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 54px;
    flex-shrink: 0;
}

/* ============================================================================
   NAVIGATION STYLES
   ============================================================================ */

/* Hamburger Button */
.nav-hamburger {
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: color 0.2s;
    font-style: normal;
    font-size: 16pt;
}

.nav-hamburger:hover {
    color: #0066cc;
}

.nav-hamburger:active {
    transform: scale(0.95);
}

/* Bottom Sheet Menu */
.nav-menu {
    position: fixed;
    bottom: -300px;
    left: 0;
    width: 100%;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    transition: bottom 0.3s ease;
    z-index: 1999;
    padding-bottom: 20px;
}

.nav-menu.open {
    bottom: 0;
}

.nav-menu-handle {
    width: 40px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 15px auto;
}

.nav-menu a {
    display: block;
    padding: 18px 30px;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    font-size: 14pt;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.nav-menu a:last-child {
    border-bottom: none;
}

.nav-menu a:hover {
    background: #f0f8ff;
    color: #0066cc;
}

.nav-menu a.active {
    background: #e6f2ff;
    color: #0066cc;
    font-weight: 900;
}

/* Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1998;
}

.nav-overlay.open {
    opacity: 1;
    visibility: visible;
}


/* ============================================================================
   SIGNUP PAGE STYLES
   ============================================================================ */

.signup-content {
    text-align: left;
    padding: 0 10px;
}

.signup-content h4 {
    font-size: 14pt;
    margin: 20px 0 10px 0;
}

.signup-content h5 {
    font-size: 12pt;
    margin: 15px 0 10px 0;
}

.signup-content ul,
.signup-content ol {
    padding-left: 25px;
}

.signup-content li {
    padding: 8px 0;
    font-size: 10pt;
    line-height: 1.4;
}

.signup-content .li-compact {
    padding: 4px 0 0 0;
}