/* Base Styles */
* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { margin: 0; padding: 10px; background-color: #f0f0f0; }

/* CSS Variable for All Tables Font Size */
:root {
   --all-tables-font-multiplier: 1.0; /* Default multiplier */
}
/* Connection Status Indicator */
#connection-status {
    position: fixed; /* Keep it fixed relative to the viewport */
    top: 5px;        /* Position near the top */
    left: 10px;       /* Position on the left */
    padding: 3px 10px;/* Adjust padding */
    border-radius: 4px;
    font-size: 0.8em; /* Small font size */
    font-weight: bold;
    z-index: 1100;    /* Ensure it's above most other elements */
    display: none;    /* Start hidden - JS will show it */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color changes */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Subtle shadow */
}


/* Layout */
.container { display: flex; height: 95vh; gap: 10px;overflow-x: hidden; }
/* New container for panel + handle */
.right-panel-container {
    position: relative; /* Needed for absolute positioning of handle */
    /* Adjust flex properties if needed, similar to old .right-panel */
    flex-shrink: 0;
    /* min-width: 300px; */
}
.right-panel { 
    flex-grow: 1; 
    min-width: 275px; 
    max-width: 400px; 
    background-color: #333; 
    color: white; 
    border-radius: 5px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    resize: horizontal; 
    overflow: hidden;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Apply hidden state to the panel, NOT the container */
.right-panel-hidden .right-panel { /* Target .right-panel INSIDE the container when hidden */
    transform: translateX(100%);
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: none !important;
    overflow: hidden;
}

/* Style the handle */
.right-panel-toggle-handle {
    position: absolute;
    top: 50%; /* Position vertically centered */
    left: -20px; /* Position sticking out slightly to the left of where the panel sits */
    transform: translateY(-50%);
    background-color: #555; /* Style as desired */
    color: white;
    padding: 10px 5px;
    border-radius: 5px 0 0 5px; /* Rounded corners */
    cursor: pointer;
    z-index: 10; /* Ensure it's above other elements */
    transition: background-color 0.2s ease;
    writing-mode: vertical-rl; /* Optional: Vertical text */
    text-orientation: mixed;   /* Optional: Vertical text */
}

.right-panel-toggle-handle:hover {
    background-color: #777;
}

/* Optional: Adjust handle position when panel is hidden */
.right-panel-hidden .right-panel-toggle-handle {
     /* Maybe move it further left or change appearance */
     left: -20px; /* Keep it fixed relative to container's original spot */
}


.left-panel {  background-color: white; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; flex-grow: 11; flex-basis: 0;}

/* Define the hidden state */
.right-panel-hidden {
    /* Slide it off-screen to the right */
    transform: translateX(100%);
    /* Optionally, reduce width/margins to ensure it's fully hidden and doesn't affect layout */
    /* Adjust these based on testing */
    width: 0 !important; /* Force width to 0 when hidden */
    min-width: 0 !important; /* Override any min-width */
    padding-left: 0 !important; /* Remove padding */
    padding-right: 0 !important;
    margin-left: 0 !important; /* Remove margins */
    margin-right: 0 !important;
    border-left: none !important; /* Hide border if any */
    overflow: hidden; /* Hide content overflowing the 0 width */
}

#timer { /* Or use .timer-display if that's more appropriate */
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
    /* Optional: Add a subtle hover effect */
    transition: background-color 0.2s ease;
}

#timer:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight on hover */
}

/* Tabs */
.tab-container { display: flex; background-color: #f0f0f0; border-bottom: 1px solid #ddd; flex-shrink: 0; overflow-x: auto; padding-bottom: 2px; }
.tab { padding: 8px 15px; cursor: pointer; background-color: #e0e0e0; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; margin-right: 2px; white-space: nowrap; }
.tab.active { background-color: white; border-bottom: 3px solid #ff8c00; position: relative; top: 1px; font-weight: bold; }

/* General Table Styles */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { border: 1px solid #ddd; padding: 4px; text-align: center; vertical-align: middle;font-size: 0.95em; }
th { background-color: #f5f5f5; font-weight: bold; font-size: 0.9em; }


/* Individual Table - Player Name Cell (with Checkbox) */   
td.player-name-cell { display: flex; align-items: center; gap: 5px; padding: 5px 5px; box-sizing: border-box; }
td.player-name-cell input[type="text"] { flex-grow: 1; min-width: 80px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 0.95em; }
td.player-name-cell input[type="checkbox"] { flex-shrink: 0; transform: scale(1.1); cursor: pointer; margin-left: 3px; }
td.player-name-cell input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
td input[type="text"]:focus { border-color: #ff8c00; outline: none; box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.2); }

/* Ensure general input styling applies or add specific */
td input[type="number"].chip-count-input {
    /* --- Adjust width as needed --- */
    display: block;
    width: 100%; /* Or adjust based on typical chip count length */
    text-align: center; /* Center the number */
    padding: 4px 5px; /* Match other inputs/dropdowns if needed */
    font-size: 0.95em; /* Match other cell content */
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0 auto;
    box-sizing: border-box;
    
    /* Remove spinner arrows on number input (optional, cross-browser) */
    /* -moz-appearance: textfield; Firefox */
}
/* Hide spinner arrows in WebKit browsers (Chrome, Safari, Edge) */
td input[type="number"].chip-count-input::-webkit-outer-spin-button,
td input[type="number"].chip-count-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Style for the dropdown specifically */
select.player-assign-dropdown {
    width: 100%; /* Make dropdown fill the cell width */
    padding: 4px 6px; /* Adjust padding for appearance */
    margin: 0; /* Remove default margins */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em; /* Match other input font sizes */
    line-height: normal; /* Reset line height */
    box-sizing: border-box; /* Include padding/border in width */
    /* Optionally set a min-height if needed, but auto is usually better */
    /* min-height: 28px; */
    vertical-align: middle; /* Helps sometimes with alignment */
    flex-grow: 1; /* Allow dropdown to grow if using flex */
}

/* Style for the readonly player name display */
span.player-name-display {
    display: inline-block; /* Allow padding/margins */
    padding: 4px 6px; /* Match dropdown padding roughly */
    width: 100%;      /* Fill cell */
    text-align: left; /* Align text left */
    box-sizing: border-box;
    white-space: nowrap;      /* Prevent wrapping */
    overflow: hidden;         /* Hide overflow */
    text-overflow: ellipsis;  /* Add ellipsis (...) if name too long */
    min-height: 28px; /* Ensure minimum height matches inputs/dropdowns */
    line-height: 1.4;  /* Adjust for vertical centering */
}

/* Info Box */
.info-box { border: 1px solid #ddd; padding: 8px 12px; background-color: #f9f9f9; margin: 10px; border-radius: 3px; }
.info-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9em; flex-wrap: wrap; }
.info-row span { margin: 2px 5px; }
.info-row span:nth-child(odd) { font-weight: bold; color: #555; }

/* Right Panel - Timer */
.timer-container { position: relative; flex-shrink: 0; padding: 10px; }
.timer-display { font-size: 4rem; text-align: center; color: #ff8c00; font-weight: bold; margin: 10px 0 5px 0; line-height: 1.1; }
/*.secondary-timers { display: flex; justify-content: space-between; padding: 0 5px; margin-bottom: 10px; } */
.secondary-timers {
    display: flex;
    justify-content: space-evenly; /* Spread them out evenly */
    padding: 0 5px;
    margin-bottom: 10px;
    gap: 10px; /* Force a minimum gap between them */
    flex-wrap: wrap; /* Allow them to stack if the screen is tiny */
}
.secondary-timer { font-size: 0.9rem; color: #aaa; }

/* Right Panel - Section Headers */
.panel-section-header {
    background-color: #444;
    color: #ddd;
    font-size: 0.75em;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    border-top: 1px solid #555;
    border-bottom: 1px solid #222;
}

/* Right Panel - Blind Structure */
.blind-structure-container { 
    flex-grow: 0; /* Stop taking up all available space */
    height: auto; /* Shrink to fit content if less than 10 rows */
    max-height: 300px; /* Cap height at approx 10 rows */
    min-height: 100px; /* Ensure at least a few rows are always visible */
    overflow-y: auto; 
    border-top: none; 
    border-bottom: none; 
}

/* Right Panel - Payout Structure */
.payout-display-container {
    /* Takes remaining space */
    flex-grow: 1;
    min-height: 100px;
    overflow-y: auto;
    border-top: none; /* Handled by header */
    border-bottom: 1px solid #444;
    background-color: #2b2b2b; /* Slightly darker to distinguish */
}

/* Styles for the rows in Payout Display */
.payout-row {
    display: flex;
    padding: 6px 8px;
    border-bottom: 1px solid #444;
    font-size: 0.9em;
    justify-content: space-between;
    align-items: center;
}
.payout-row:last-child { border-bottom: none; }
.payout-pos { width: 30px; font-weight: bold; color: #ff8c00; text-align: center;}
.payout-pct { color: #aaa; font-size: 0.85em; width: 50px; text-align: right;}
.payout-amt { font-weight: bold; color: #fff; flex: 1; text-align: right;}

.blind-level { display: flex; border-bottom: 1px solid #444; padding: 8px; align-items: center; font-size: 0.95em; transition: background-color 0.3s ease; }
.blind-level:last-child { border-bottom: none; }
.level-number { width: 30px; text-align: center; color: #ff8c00; font-weight: bold; }
.level-time { width: 40px; text-align: center; color: #999; font-size: 0.9em; }
.level-blinds { flex: 1; text-align: right; font-weight: bold; padding-right: 8px; white-space: nowrap; }
.current-level { background-color: rgba(255, 140, 0, 0.25); }

/* Right Panel & Other Controls */
.control-buttons { display: flex; justify-content: space-around; padding: 10px 5px; flex-shrink: 0; }
.control-btn { width: 32px; height: 32px; padding: 0; border: none; background-color: #555; color: white; border-radius: 3px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
.control-btn:hover:not(:disabled) { background-color: #666; }
.control-btn:active:not(:disabled) { background-color: #777; }
.control-btn:disabled { opacity: 0.5; cursor: not-allowed; background-color: #999 !important; } /* Ensure disabled style overrides hover */

/* Left Panel - Bottom Controls */
.bottom-controls { margin: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-shrink: 0; border-top: 1px solid #eee; padding-top: 10px; }
/* Optional: Style the divs within bottom-controls if needed for grouping */
.bottom-controls > div {
    display: flex; /* Make internal divs flex too if they contain multiple buttons */
    gap: 10px;     /* Space between buttons within a group */
}
/* Style for the Back Button */
.back-btn {
    /* Inherits .btn styles if defined, or add base styles here */
    display: inline-block; /* Behave like a button */
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none; /* Remove underline from link */
    font-size: 0.95em;     /* Match other buttons */

    /* Specific colors for back button */
    background-color: #6c757d; /* Secondary/Gray color */
    color: white;
    border: 1px solid #6c757d; /* Add border for consistency? */
}

.back-btn:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: white; /* Ensure text color stays white on hover */
}
.add-table-btn, .settings-btn { padding: 8px 15px; border: none; background-color: #555; color: white; border-radius: 3px; cursor: pointer; transition: background-color 0.2s ease; }
.add-table-btn:hover, .settings-btn:hover { background-color: #666; }

/* Player Controls (Rebuy/Addon) */
.player-controls { display: flex; align-items: center; justify-content: center; gap: 4px; }
.player-controls button { width: 25px; height: 25px; padding: 0; font-size: 16px; font-weight: bold; background-color: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; line-height: 25px; transition: background-color 0.2s ease; }
.player-controls button:hover:not(:disabled) { background-color: #5a6268; }
.player-controls button:disabled { background-color: #aaa; cursor: not-allowed; opacity: 0.7; }
.addon-controls { display: flex; align-items: center; justify-content: center; gap: 8px; }
.addon-count { width: 25px; text-align: center; font-weight: bold; font-size: 0.95em; }
.input-value { width: 25px; text-align: center; font-weight: bold; font-size: 0.95em; }

/* Table Content Area */
#tableContent { flex: 1; overflow-y: auto; padding: 0 10px 10px 10px; }

/* All Tables View Grid */
.tables-grid { display: grid; gap: 15px; padding-top: 10px; /* grid-template-columns set by JS */ }
.table-card { border: 1px solid #ddd; border-radius: 5px; overflow: hidden; background-color: #fff; display: flex; flex-direction: column; }
.table-header {
    background-color: #f5f5f5; padding: 8px; border-bottom: 1px solid #ddd;
    text-align: center; font-weight: bold;
    /* Use CSS variable for font size */
    font-size: calc(1.0em * var(--all-tables-font-multiplier));
}
.compact-table { border: none; margin-top: 0; }
.compact-table th {
    padding: 5px; border: none; border-bottom: 1px solid #eee;
    text-align: center; font-weight: bold;
    /* Use CSS variable for font size */
    font-size: calc(0.85em * var(--all-tables-font-multiplier));
}
.compact-table td {
    padding: 5px; height: 30px; border: none; border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
     /* Use CSS variable for font size */
    font-size: calc(0.90em * var(--all-tables-font-multiplier));
}
.compact-table tr:last-child td { border-bottom: none; }
.compact-table td:first-child { text-align: left; padding-left: 8px; word-break: break-all; }
.compact-table td:last-child { text-align: center; font-weight: bold; width: 35px; padding-right: 8px; }

/* Modal Styles */
 .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); overflow: auto; }
 .modal-content { background-color: white; margin: 5% auto; padding: 25px; border-radius: 8px; width: 90%; max-width: 900px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
 .close-modal { color: #aaa; position: absolute; top: 5px; right: 8px; font-size: 24px; font-weight: bold; cursor: pointer; line-height: 1; padding: 2px 4px; }
 .close-modal:hover { color: black; }
 .modal h2 { margin-top: 0; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
 .settings-sections { display: flex; gap: 30px; flex-wrap: wrap; }
 .settings-general { flex: 1; min-width: 250px; }
 .settings-structure { flex: 2; min-width: 450px; }
 .settings-sections h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; color: #333; }
 .settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; margin-bottom: 20px; }
 .form-group { display: flex; flex-direction: column; }
 .form-group label { margin-bottom: 5px; font-weight: bold; font-size: 0.9em; color: #555; }
 .form-group input[type="number"], .form-group input[type="text"] { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; font-size: 0.95em; }
 .form-group input:focus { border-color: #ff8c00; outline: none; box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2); }

 /* Settings Modal - Font Size Controls Specific Styles */
 .font-size-control-group {
    grid-column: 1 / -1; /* Span across both columns */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0; /* Add some vertical padding */
 }
 .font-size-label {
     margin-bottom: 0 !important; /* Override default form-group label margin */
 }
 .font-size-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
 }
 .font-size-btn { /* Style the +/- buttons */
     width: 30px !important; /* Use !important if needed to override .control-btn */
     height: 30px !important;
     font-size: 20px !important;
     line-height: 28px; /* Adjust line height for vertical centering */
 }
 .font-size-display {
    font-weight: bold;
    min-width: 40px;
    text-align: center;
 }

 /* --- NEW: Styles for Blind Structure Modal --- */

#blindStructureModal {
    z-index: 1070; /* Ensure it's above settings (1000), player (1050), payout (1060) modals */
}

#blindStructureModal .modal-content {
    max-width: 850px; /* Make wider to accommodate editor and generator */
}

/* Generator Section Styles */
#structureGenerator {
    border: 1px solid #ddd;
    padding: 15px 20px; /* Add more padding */
    border-radius: 5px;
    margin-bottom: 25px;
    background-color: #f8f9fa; /* Light background */
}

#structureGenerator h4 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.1em;
    color: #333;
}

/* Use existing .form-group and input styles, ensure grid works */
#structureGenerator .form-group {
    /* Inherits from general form-group */
}
#structureGenerator input[type="number"][disabled] {
    background-color: #e9ecef; /* Standard disabled background */
    cursor: not-allowed;
}

/* Style the auto-calc checkbox label nicely */
#structureGenerator label[for="genAutoCalcDuration"] { /* Or style the container div */
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal; /* Make checkbox label normal weight */
    cursor: pointer;
}
#structureGenerator input[type="checkbox"]#genAutoCalcDuration {
     margin: 0;
     cursor: pointer;
     transform: scale(1.1); /* Slightly larger checkbox */
}

/* Style the output display area */
#structureGenerator .generator-output span {
    display: block; /* Each result on new line */
    margin-bottom: 3px;
    color: #555;
}
#structureGenerator .generator-output strong {
    color: #0056b3; /* Highlight results */
    margin-left: 5px;
}

/* Style the Generate button area */
#structureGenerator .generate-button-container { /* Create a container if needed for layout */
     display: flex;
     justify-content: space-between; /* Pushes output and button apart */
     align-items: center;
     border-top: 1px dashed #eee;
     padding-top: 15px;
     margin-top: 15px; /* Space above separator */
}

#structureGenerator #generateStructureBtn {
     /* Reuse existing button style or customize */
     /* Example reuse: */
     padding: 8px 18px;
     font-size: 0.95em;
     background-color: #5cb85c; /* Green */
     border-color: #4cae4c;
}
#structureGenerator #generateStructureBtn:hover {
    background-color: #4cae4c;
    border-color: #398439;
}


/* Manual Editor Section Styles */
.structure-editor {
    /* Add padding/margin if needed */
     margin-top: 20px; /* Space below generator */
}
.structure-editor h4 {
    margin-top: 0;
    margin-bottom: 10px;
     font-size: 1.1em;
    color: #333;
}

 /* Structure Editor Styles */
 .structure-editor-container { max-height: 400px; overflow-y: auto; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; }
 .structure-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 0; }
 .structure-table th, .structure-table td { padding: 6px 8px; font-size: 0.9em; text-align: center; vertical-align: middle; border-bottom: 1px solid #eee; border-right: 1px solid #eee; }
 .structure-table th { background-color: #f9f9f9; position: sticky; top: 0; z-index: 1; font-weight: bold; border-top: 1px solid #eee; }
 .structure-table th:first-child, .structure-table td:first-child { border-left: 1px solid #eee; }
 .structure-table tr:last-child td { border-bottom: none; }
 .structure-table input[type="number"] { width: 65px; padding: 5px; text-align: center; border: 1px solid #ccc; border-radius: 3px; font-size: 0.95em; }
 .structure-table input[type="text"] { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 3px; font-size: 0.95em; }
 .structure-table input[type="number"]:disabled, .structure-table input[type="text"]:disabled { background-color: #f8f8f8; cursor: not-allowed; }
 .structure-table input[type="checkbox"] { transform: scale(1.2); cursor: pointer; vertical-align: middle;}
 .structure-actions button { background: none; border: none; cursor: pointer; font-size: 1.2em; padding: 0 4px; margin: 0 2px; color: #777; vertical-align: middle; }
 .structure-actions button:hover:not(:disabled) { color: #000; }
 .structure-actions button:disabled { color: #ccc; cursor: not-allowed; opacity: 0.6; }
 .add-level-btn { padding: 7px 14px; border: none; background-color: #4CAF50; color: white; border-radius: 4px; cursor: pointer; margin-bottom: 15px; font-size: 0.9em; transition: background-color 0.2s ease; }
 .add-level-btn:hover { background-color: #45a049; }

 /* Modal Actions */
 .settings-actions { display: flex; justify-content: flex-end; margin-top: 25px; gap: 10px; width: 100%; border-top: 1px solid #eee; padding-top: 20px; }
 .save-settings-btn { padding: 10px 25px; border: none; background-color: #28a745; color: white; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.2s ease; }
 .save-settings-btn:hover { background-color: #218838; }

/* Utility classes & Specific Buttons */
.hidden { display: none; }
/* Specific button overrides */
button.control-btn[title="Delete Table"] { background-color: #dc3545; width: 30px; height: 30px; font-size: 14px; line-height: 30px; }
button.control-btn[title="Delete Table"]:hover:not(:disabled) { background-color: #c82333; }
button.control-btn[title="Clear Seat"] { background-color: #dc3545; width: 24px; height: 24px; font-size: 14px; line-height: 28px; }
button.control-btn[title="Clear Seat"]:hover:not(:disabled) { background-color: #c82333; }
button.control-btn[title="Clear Seat"]:disabled { background-color: #f5c6cb; opacity: 0.6; }

/* Add these styles to your existing styles.css */

/* --- NEW: Styles for Player Management Modal --- */

#playerManagementModal {
    z-index: 1050; /* Make sure it appears ABOVE the settings modal */
}

#playerManagementModal .modal-content {
    max-width: 800px; /* Adjust width as needed for the table */
    /* margin: 3% auto; */ /* Slightly higher maybe? */
}



/* Add New Player Area */
.player-add-area {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.player-add-area label { /* Style the label */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    font-size: 0.95em;
    color: #333;
}
/* Use existing .player-input-area style if defined, otherwise: */
.player-input-area {
    display: flex;
    gap: 10px;
}
.player-input-area input[type="text"] {
    flex-grow: 1;
    /* Inherit general input styles */
}
.player-input-area button.create-btn { /* Style the add button */
    flex-shrink: 0; /* Prevent button from shrinking */
    padding: 8px 15px; /* Adjust padding */
    font-size: 0.9em;
    background-color: #4CAF50; /* Green */
}
.player-input-area button.create-btn:hover {
     background-color: #45a049;
}


/* Player List Area */
.player-list-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.player-list-controls h3 {
    margin: 0;
    font-size: 1.1em;
    color: #444;
}
.player-list-controls button#reshufflePlayersBtn {
    /* Style the reshuffle button (reused .load-file-btn or create new) */
    font-size: 0.9em;
    padding: 6px 12px;
    background-color: #ffc107; /* Warning color? */
    border-color: #ffc107;
    color: #333;
}
.player-list-controls button#reshufflePlayersBtn:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

/* Container for the player table */
.player-management-list-container {
    max-height: 50vh; /* Limit height, adjust as needed */
    overflow-y: auto;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border-radius: 4px; /* Optional */
}

/* Player table itself */
.player-management-table {
    width: 100%;
    border-collapse: collapse; /* Use collapse for cleaner look */
}

.player-management-table thead tr {
    background-color: #f8f8f8; /* Header background */
    position: sticky; /* Keep header visible on scroll */
    top: 0;
    z-index: 1; /* Ensure header stays above scrolling content */
}

.player-management-table th {
    padding: 8px 6px; /* Adjust padding */
    text-align: left; /* Default align headers left */
    border-bottom: 2px solid #ddd; /* Stronger border under header */
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap; /* Prevent headers wrapping */
}
/* Center specific headers */
.player-management-table th:not(:first-child) {
     text-align: center;
}
.player-management-table th:last-child {
     text-align: right; /* Align Actions header right */
     padding-right: 10px;
}


.player-management-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
}
.player-management-table tbody tr:hover {
    background-color: #f0f8ff; /* Hover effect */
}


.player-management-table td {
    padding: 6px 6px; /* Adjust cell padding */
    border-bottom: 1px solid #eee; /* Lighter border between rows */
    font-size: 0.9em;
    text-align: left; /* Default align cell data left */
    vertical-align: middle;
}
/* Center specific columns */
.player-management-table td:nth-child(2), /* BuyIn */
.player-management-table td:nth-child(3), /* RB */
.player-management-table td:nth-child(4), /* AO */
.player-management-table td:nth-child(5), /* Status */
.player-management-table td:nth-child(6) { /* Location */
    text-align: center;
}
/* Style action buttons column */
.player-management-table td:last-child {
    text-align: right;
    white-space: nowrap; /* Prevent action buttons wrapping */
     padding-right: 10px;
}

/* Style action buttons within the table */
.player-management-table .action-btn {
    /* Use existing .btn style or define new */
    padding: 3px 8px;
    font-size: 0.8em;
    margin-left: 4px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
}
.player-management-table .action-btn.move-btn { background-color: #5bc0de; border-color: #46b8da; color: white;}
.player-management-table .action-btn.move-btn:hover { background-color: #31b0d5; border-color: #269abc;}
.player-management-table .action-btn.unseat-btn { background-color: #f0ad4e; border-color: #eea236; color: white;}
.player-management-table .action-btn.unseat-btn:hover { background-color: #ec971f; border-color: #d58512;}
.player-management-table .action-btn.delete-btn { background-color: #d9534f; border-color: #d43f3a; color: white;}
.player-management-table .action-btn.delete-btn:hover { background-color: #c9302c; border-color: #ac2925;}
.player-management-table .action-btn:disabled { background-color: #ccc; border-color: #ccc; cursor: not-allowed; opacity: 0.6; }


/* Player Modal Actions Area (Done button) */
.player-modal-actions { /* Reuse existing style if defined */
    text-align: right;
    margin-top: 15px;
    padding-top: 15px; /* Optional separation */
    border-top: 1px solid #eee; /* Optional separation */
}
.player-modal-actions button.done-btn {
     /* Reuse .save-settings-btn style or define */
     /* Example reuse: */
    padding: 10px 25px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
}
.player-modal-actions button.done-btn:hover {
     background-color: #4cae4c;
}


/* --- End of Player Management Modal Styles --- */

/* Nested Add Players Modal Styles */
#addPlayersModal {
    z-index: 1050; /* Ensure it's above the create modal (default modal z-index is usually 1000) */
}

#addPlayersModal .modal-content {
    max-width: 500px; /* Or desired width */
}

.player-input-area {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.player-input-area input[type="text"] {
    flex-grow: 1; /* Allow input to take available space */
    /* Inherit general input styles */
}

.player-list-container {
    max-height: 250px; /* Limit height and enable scrolling */
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

#playerPoolList {
    list-style: none;
    padding: 0;
    margin: 0;
}

#playerPoolList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px dashed #ddd;
    font-size: 0.95em;
}

#playerPoolList li:last-child {
    border-bottom: none;
}

.delete-player-btn {
    background: none;
    border: none;
    color: #dc3545; /* Red color for delete */
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 5px;
    line-height: 1; /* Prevent extra spacing */
}
.delete-player-btn:hover {
    color: #a91e2c;
}


.file-input-area {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.file-input-area label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.9em;
}

.file-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.file-input-group input[type="file"] {
    /* Basic styling, browser default is often sufficient */
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    flex-grow: 1;
    font-size: 0.9em;
    /* Remove default browser button for more control if needed */
}


/* Payout Management Modal */
#payoutManagementModal { z-index: 1060; } #payoutManagementModal .modal-content { max-width: 750px; }
.payout-settings-form { border-bottom: 1px solid #eee; padding-bottom: 15px; } /* Reuses .settings-form grid */
#payoutRatioR { width: 70px !important; text-align: center; } .payout-control-btn { width: 28px !important; height: 28px !important; font-size: 18px !important; line-height: 26px; padding: 0; flex-shrink: 0; }
.payout-pot-info { margin-bottom: 20px; padding: 10px; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; font-size: 0.95em; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-around; } .payout-pot-info span { white-space: nowrap; } .payout-pot-info strong { color: #0056b3; }
.payout-structure-area { margin-bottom: 15px; } .payout-structure-area h3 { margin: 0 0 10px 0; font-size: 1.1em; color: #444; }
.payout-structure-container { max-height: 40vh; overflow-y: auto; border: 1px solid #ccc; margin-bottom: 10px; border-radius: 4px; }
#payoutStructureTable { width: 100%; border-collapse: collapse; } #payoutStructureTable thead tr { background-color: #f8f8f8; position: sticky; top: 0; z-index: 1; }
#payoutStructureTable th { padding: 8px 6px; text-align: center; border-bottom: 2px solid #ddd; font-size: 0.85em; font-weight: bold; white-space: nowrap; } #payoutStructureTable th:first-child { text-align: left; padding-left: 10px;} #payoutStructureTable th:last-child { text-align: center;}
#payoutStructureTable tbody tr:nth-child(even) { background-color: #f9f9f9; } #payoutStructureTable tbody tr:hover { background-color: #eef; }
#payoutStructureTable td { padding: 4px 6px; border-bottom: 1px solid #eee; font-size: 0.9em; text-align: center; vertical-align: middle; } #payoutStructureTable td:first-child { text-align: left; padding-left: 10px; font-weight: bold;}
#payoutStructureTable input[type="number"] { width: 85px; text-align: right; padding: 3px 5px; font-size: 0.95em; border: 1px solid #ddd; border-radius: 3px; box-sizing: border-box; -moz-appearance: textfield; }
#payoutStructureTable input[type="number"]::-webkit-outer-spin-button, #payoutStructureTable input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#payoutStructureTable input[type="number"]:focus { border-color: #ff8c00; outline: none; box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.2); }
#payoutStructureTable td:last-child { text-align: center; }
#payoutStructureTable .delete-payout-btn { background: none; border: none; color: #dc3545; cursor: pointer; font-size: 1.2em; line-height: 1; padding: 0 5px; vertical-align: middle; } #payoutStructureTable .delete-payout-btn:hover { color: #a91e2c; }
#addPayoutPositionBtn { margin-top: 10px; padding: 6px 12px; font-size: 0.9em; } /* Uses .add-level-btn */
.payout-summary { margin-top: 15px; padding: 10px 5px; border-top: 1px solid #eee; text-align: right; font-weight: bold; font-size: 0.95em; } .payout-summary span { margin-left: 20px; } #payoutTotalSum { color: #28a745; }
#payoutVarianceAmount.positive { color: #ff8c00; } #payoutVarianceAmount.negative { color: #dc3545; } #payoutVarianceAmount.zero { color: #28a745; }


/* General Button Style (If not already defined) */
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff; /* Default button text color */
    transition: background-color 0.2s, border-color 0.2s;
}
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}


/* Specific button colors */
.load-file-btn {
    font-size: 0.9em;
    padding: 6px 12px;
    background-color: #6c757d; /* Gray */
    border-color: #6c757d;
}
.load-file-btn:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.done-btn {
    background-color: #5cb85c; /* Green */
    border-color: #4cae4c;
}
.done-btn:hover {
    background-color: #4cae4c;
    border-color: #4cae4c;
}

.add-players-btn, .payout-manage-btn, .blind-structure-btn { /* Style for button on create modal */
    background-color: #5bc0de; /* Info blue */
    border-color: #46b8da;
    font-size: 0.9em;
    padding: 8px 15px;
}
.add-players-btn:hover, .payout-manage-btn, .blind-structure-btn {
    background-color: #31b0d5;
    border-color: #269abc;
}
/* #openBlindStructureModalBtn { background-color: #6c757d; border-color: #6c757d; color: white; }
#openBlindStructureModalBtn:hover { background-color: #5a6268; border-color: #545b62; } */

/* Style for the form groups containing action buttons */
.form-group-action-button {
    /* grid-column: 1 / -1; */ /* Remove grid-specific property if not needed */
    margin-top: 15px;       /* Keep top margin */
    padding-top: 15px;      /* Keep top padding */
    border-top: 1px solid #eee; /* Keep separator */
    /* Add bottom margin for spacing between button groups */
    margin-bottom: 10px;
}

/* Ensure first action button group doesn't have double top border/margin */
.settings-structure .form-group-action-button:first-child {
     margin-top: 0;
     padding-top: 0;
     border-top: none;
}


.form-group-action-button button {
    width: auto; /* Allow button to size naturally */
    padding: 10px 20px; /* Consistent padding */
    margin-right: 10px; /* Space if multiple buttons in one group */
    /* Ensure display allows margin */
    display: inline-block; /* Or block if you want full width */
}

.form-group-action-button small {
    display: block; /* Make small text appear below button */
    margin-top: 5px;
    color: #666;
}


.player-modal-actions {
    text-align: right;
    margin-top: 15px;
}


/* --- NEW: Results / Leaderboard View Styles --- */

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.results-table th {
    background-color: #444; /* Dark header to distinguish from seating */
    color: white;
    padding: 10px 8px;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

.results-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    font-size: 1em;
}

/* Rank Column Styling */
.rank-cell { font-weight: bold; color: #777; width: 50px; }
.rank-1 .rank-cell { color: #d4af37; font-size: 1.3em; text-shadow: 0 1px 0px rgba(0,0,0,0.2); } /* Gold */
.rank-2 .rank-cell { color: #a9a9a9; font-size: 1.2em; text-shadow: 0 1px 0px rgba(0,0,0,0.2); } /* Silver */
.rank-3 .rank-cell { color: #cd7f32; font-size: 1.2em; text-shadow: 0 1px 0px rgba(0,0,0,0.2); } /* Bronze */

/* Payout Column Styling */
.payout-cell { font-weight: bold; color: #28a745; font-size: 1.1em; }
.payout-cell.zero { color: #ccc; font-weight: normal; font-size: 0.9em; }

/* Profit Column Styling */
.net-cell.positive { color: #28a745; font-weight: bold; }
.net-cell.negative { color: #dc3545; }
.net-cell.even { color: #999; }

/* Row Status Highlighting */
tr.result-row-itm { background-color: rgba(40, 167, 69, 0.08); } /* Subtle Green for Winners */
tr.result-row-bubble { background-color: rgba(255, 193, 7, 0.15); border-left: 4px solid #ffc107; } /* Warning Orange for Bubble */
tr.result-row-eliminated { opacity: 0.9; }
tr.result-row-active { color: #999; font-style: italic; background-color: #fafafa; } /* Ghosted for projected slots */

/* --- Break Mode Visuals --- */
.timer-break {
    color: #00e5ff !important; /* Bright Cyan */
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.3); /* Subtle Glow */
}

/* --- Seat Selection Grid Styles --- */
.seat-select-btn {
    width: 100%;
    padding: 15px 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.seat-select-btn:hover {
    background-color: #e2e6ea;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.seat-select-btn strong {
    font-size: 1.1em;
    color: #007bff;
}

/* --- Notification Bar (Table Balancing) --- */
.notification-bar {
    background-color: #fff3cd; /* Warning Yellow background */
    color: #856404;
    border-bottom: 1px solid #ffeeba;
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* Separate from tabs */
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-small {
    padding: 4px 12px;
    font-size: 0.85em;
    font-weight: bold;
    border-radius: 3px;
    border: 1px solid #856404;
    background-color: rgba(255, 255, 255, 0.6);
    color: #856404;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-small:hover {
    background-color: #fff;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.4em;
    line-height: 0.8;
    cursor: pointer;
    color: #856404;
    padding: 0 5px;
}

.close-btn:hover {
    color: #533f03;
}

/* Modifier for Seat Buttons when used in Balance Wizard */
.seat-select-btn.balance-source {
    border-color: #ffc107; /* Warning Yellow border */
    background-color: #fffbf2;
}

.seat-select-btn.balance-source strong {
    color: #d39e00; /* Darker yellow/orange text */
}

.seat-select-btn.balance-source:hover {
    background-color: #fff3cd;
    border-color: #ba8b00;
}
/* --- Player History Log Styles --- */

.history-entry {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
}

.history-entry:last-child {
    border-bottom: none;
}

.history-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: #888;
    font-size: 0.85em;
}

.history-action {
    font-weight: bold;
    color: #333;
}

.history-details {
    color: #555;
    margin-top: 2px;
}