/* Ticker Grid Layout */
ul#tickersList.tickers-grid {
    list-style-type: none; 
    padding: 0; 
    display: grid;
    /* Default for smaller screens, allows tickers to fill width and wrap */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); 
    gap: 12px; 
    width: 100%;
}

/* Media query for wider screens to achieve ~6 columns of ~290px */
/* (288px width + 12px gap) * 6 columns = 1800px. */
/* (288px width + 12px gap) * 5 columns = 1500px. */
@media (min-width: 1500px) { /* Start fixing column width for 5+ columns */
  ul#tickersList.tickers-grid {
    /* Fixed width columns on larger screens */
    grid-template-columns: repeat(auto-fill, 288px); 
  }
}

/* Ticker Card Specific Styles */
li.item-card.ticker-card-grid {
    /* background-color is inherited from .item-card in base.css or can be overridden here */
    /* padding is inherited or can be set */
    display: flex; 
    flex-direction: column; 
    min-height: 330px; 
    height: 330px; /* Fixed height for consistent proportions */
    position: relative; /* For absolute positioning of the remove button */
    transition: background-color 0.2s ease; /* For hover effects */
}

/* Hover states for ticker cards */
li.item-card.ticker-card-grid[style*="cursor: pointer"]:hover { /* Clickable (non-admin) */
    background-color: #525568; 
}
.ticker-card-grid[draggable="true"]:hover { /* Draggable (admin) */
    background-color: #505366; 
}
.ticker-card-grid.dragging { /* While being dragged */
    opacity: 0.4; 
    background-color: #282a36;
    border: 2px dashed #bd93f9 !important; /* Overrides card's border:none */
}

/* Internal Sections of a Ticker Card */
.ticker-card-grid .ticker-title-area {
    flex-shrink: 0; /* Prevent shrinking */
    height: 28%;    /* Percentage of the card's fixed height */
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
    padding: 5px; 
    box-sizing: border-box;
    overflow: hidden; /* JS will try to prevent overflow by shrinking font */
}
.ticker-card-grid .ticker-title-area .name { 
    font-weight: bold; 
    font-size: 1.2em; /* Base size, JS adjusts */
    color: #f8f8f2; 
    word-break: break-word; /* Allow title to wrap */
    line-height: 1.2; 
    max-width: 100%;
}
.ticker-card-grid .ticker-title-area .name[contenteditable="true"] {
    outline: 1px solid #8be9fd; 
    background-color: #3a3c4e; 
    padding: 3px 5px; 
    margin: -3px -5px; /* Counteract padding to try and keep original flow */
    border-radius: 2px; 
    cursor: text;
    width: calc(100% - 10px); /* Ensure it fits within padding of title-area */
    box-sizing: border-box; /* Include padding in width calculation */
}
.ticker-card-grid .ticker-title-area .name[contenteditable="true"]:focus {
    background-color: #2f313e; 
    outline-color: #bd93f9; 
}

.ticker-card-grid .ticker-count-area {
    flex-shrink: 0;
    height: 22%;    /* Percentage of the card's fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.ticker-card-grid .ticker-count-area .count { 
    font-size: 3.5em; /* Base large size, JS adjusts */
    color: #50fa7b; 
    font-weight: bold; 
    line-height: 1; /* Critical for vertical fit */
}
.ticker-card-grid .ticker-count-area .count[contenteditable="true"] {
    outline: 1px solid #8be9fd;
    background-color: #3a3c4e;
    padding: 0 5px; 
    border-radius: 2px;
    cursor: text;
    min-width: 50px; /* Ensure it has some width even if empty */
    text-align: center;
}
.ticker-card-grid .ticker-count-area .count[contenteditable="true"]:focus {
    background-color: #2f313e;
    outline-color: #bd93f9;
}

.ticker-card-grid .ticker-crab-area {
    flex-grow: 1; /* Takes up remaining space */
    min-height: 0; /* Allows shrinking in flex context */
    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    overflow: hidden; 
    box-sizing: border-box;
    padding: 5px 0; /* Vertical padding for the crab area */
}
.ticker-card-grid .ticker-crab-area .crab-display {
    font-size: 3.5em; /* Base large size, JS adjusts */
    line-height: 0.9; /* Pack crabs tightly */
    color: #ffb86c; 
    word-break: break-all; /* Allows long string of crabs to wrap if needed */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allow crabs to wrap to new lines */
}

/* Remove Ticker Button (X) */
.remove-ticker-btn {
    position: absolute;
    bottom: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    background-color: #ff5555;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    display: flex; /* Used with align/justify to center the X */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1; /* For better vertical centering of the X character */
    z-index: 10; /* Ensure it's above other content if overlap occurs */
}
.remove-ticker-btn:hover {
    background-color: #e04444; /* Darker red on hover */
}
.remove-ticker-btn.hidden { /* If the button itself has .hidden */
    display: none !important;
}

/* Hide old admin controls block for tickers specifically if it exists (should be removed from HTML) */
.ticker-card-grid .admin-controls-bottom.admin-action { 
    display: none; /* This entire block is no longer used for tickers. remove-ticker-btn is used instead. */
}

/* If .admin-action is applied directly to .remove-ticker-btn for visibility toggling via JS */
.remove-ticker-btn.admin-action.hidden {
    display: none !important;
}

/* --- TEMPORARY DEBUG BACKGROUNDS --- */
/*
.ticker-card-grid .ticker-title-area { background-color: rgba(255, 0, 0, 0.1); }
.ticker-card-grid .ticker-title-area .name { background-color: rgba(255, 165, 0, 0.15); } 
.ticker-card-grid .ticker-count-area { background-color: rgba(0, 255, 0, 0.1); } 
.ticker-card-grid .ticker-count-area .count { background-color: rgba(0, 255, 255, 0.15); } 
.ticker-card-grid .ticker-crab-area { background-color: rgba(0, 0, 255, 0.1); }
.ticker-card-grid .ticker-crab-area .crab-display { background-color: rgba(75, 0, 130, 0.15); } 
.remove-ticker-btn { background-color: rgba(255, 0, 255, 0.2); }
*/