@import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700,400,300,200");

html, body,  span, h1, h2, h3, h4, h5, h6,
p, a, img, header, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

h4 {
    font-size: 150px;
}

/* Basic */
body {
    background: #D4D9DD url("images/bg02.jpg");
    color: #474f51;
    font-size: 13.5pt;
    font-family: 'Yanone Kaffeesatz';
    line-height: 1.85em;
    font-weight: 300;
}

/* Container */
.container {
    margin: 0 auto;
    max-width: 100%;
    width: 1200px;
}

/* Header */
#header {
    position: relative;
    background: #3B4346 url("images/bg01.jpg");
    border-bottom: solid 1px #272d30;
    box-shadow: inset 0px -1px 0px 0px #51575a;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
}

#header > .container {
    position: relative;
    min-height: 155px;
}

#header h1 {
    position: absolute;
    left: 0;
    bottom: 35px;
    font-size: 2.75em;
}

#header h1 a {
    color: #fff;
    text-decoration: none;
}

#header nav {
    position: absolute;
    right: 0;
    bottom: 35px;
    font-weight: 200;
}

#header nav a {
    color: #c6c8c8;
    text-decoration: none;
    font-size: 1.4em;
    margin-left: 60px;
    outline: 0;
}

#header nav a:hover {
    color: #f6f8f8;
}

.subpage #header > .container {
    height: 155px;
}
/* Banner */
#banner {
    border-top: solid 1px #222628;
    box-shadow: inset 0px 1px 0px 0px #3e484a;
    padding: 35px 0 35px 0;
    color: #fff;
}

#banner p {
    font-size: 2em;
    font-weight: 200;
    line-height: 1.25em;
    padding-right: 1em;
    margin: 0 0 1em 0;
}

/* Content */
#content {
    background: #f7f7f7 url("images/bg03.png");
    border-top: solid 1px #fff;
    padding: 45px 0 45px 0;
    text-align: center;
}

#content section {
    background: #fff;
    padding: 40px 30px 45px 30px;
    box-shadow: 2px 2px 2px 1px rgba(128, 128, 128, 0.1);
    margin: 0 0 25px 0;
}

#content h2 {
    font-size: 1.8em;
    color: #373f42;
    margin: 0 0 0.25em 0;
}

#content h3 {
    color: #96a9b5;
    font-size: 1.25em;
    font-style: italic;
}

#content a {
    color: #000;
}

#content a:hover {
    color: #ED391B;
}

#content p {
    white-space: pre-wrap;
}

#content header {
    margin: 0 0 2em 0;
}

/* Copyright */
#copyright {
    border-top: solid 1px #b5bec3;
    box-shadow: inset 0px 1px 0px 0px #e0e4e7;
    text-align: center;
    padding: 45px 0 80px 0;
    color: #6b777d;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

/* --- Global Button Styles --- */
.button {
    /* Layout - Matches your preferred "Good" snippet */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between icon and text */

    /* sizing */
    padding: 10px 20px;
    border-radius: 4px;

    /* Text */
    font-weight: bold;
    font-family: inherit;
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.2;

    /* Reset & Interaction */
    cursor: pointer;
    border: none;
    transition: background-color 0.2s, transform 0.1s;

    /* Clean up rendering */
    text-shadow: none !important;
    box-shadow: none !important;
}

.button:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.button:active {
    transform: translateY(1px);
}

/* The Standard "Blue" Button */
.button.primary,
.button-blue {
    background: #0c2ccc !important;
    color: #fff !important;
}

.button.primary:hover,
.button-blue:hover {
    background-color: #0a25b0 !important;
    color: #fff !important;
}

/* Small Variant */
.button.small {
    padding: 5px 15px;
    font-size: 0.85em;
    gap: 5px; /* Smaller gap for small buttons */
}

/* Alternate (Grey) Variant */
.button.alt {
    background: #7f8c8d;
    color: #fff;
}
.button.alt:hover {
    background: #95a5a6;
    color: #fff;
}

/* Danger (Red) Variant */
.button.danger {
    background: #c0392b !important;
    color: #fff !important;
}
.button.danger:hover {
    background: #a93226 !important; /* Slightly darker red on hover */
    color: #fff !important;
}

/* Success (Green) Variant */
.button.success {
    background: #28a745 !important;
    color: #fff !important;
}
.button.success:hover {
    background: #218838 !important;
    color: #fff !important;
}

/* Table */
table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
table * {
    position: relative;
}
table thead tr {
    height: 60px;
    background: #36304a;
    color: #fff;
}
table tbody tr {
    height: 50px;
}
table tbody tr:last-child {
    border: 0;
}
table td, table th {
    text-align: left;
    padding-left: 10px;
}

table img {
    vertical-align: middle;
    max-width: 140px;
}

tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

tbody tr {
    font-family: OpenSans-Regular;
    font-size: 15px;
    color: #808080;
    line-height: 1.2;
    font-weight: unset;
}

tbody tr:hover {
    color: #555555;
    background-color: #f5f5f5;
    cursor: pointer;
}

/* Form */
.stat-group .form-group label,
.stat-group .form-group input[type="number"],
.identity-grid-4 .form-group label,
.identity-grid-4 .form-group select,
.stat-grid .form-group label,
.stat-grid .form-group input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.form-grid-container {
    display: grid;
    gap: 15px;
}

.identity-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Stars for arena score in form */
.star-rating {
    display: inline-block !important;
    direction: rtl !important;
    font-size: 30px !important;
}

.star-rating input {
    display: none !important;
}

.star-rating label {
    font-size: 30px !important;
    color: #ccc !important;
    cursor: pointer !important;
    line-height: 1 !important;
    display: inline-block !important;
    padding: 0 2px !important;
}

.star-rating label:before {
    content: '\2605' !important;
}

.star-rating label.checked-star {
    color: gold !important;
}

.star-rating label.checked-star ~ label {
    color: gold !important;
}

.star-rating label.half-click-zone {
    border-left: 2px solid rgba(255, 255, 0, 0.5) !important;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
    color: gold !important;
}

.star-rating label:hover {
    color: gold !important;
}

.star-rating.half-score-visual label.checked-star:before {
    content: '\2605' !important;
    color: transparent !important;
    background: linear-gradient(to right, gold 50%, #ccc 50%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.star-rating label.half-star-hover:before {
     content: '\2605' !important;
     color: transparent !important;
     background: linear-gradient(to right, gold 50%, #ccc 50%);
     -webkit-background-clip: text !important;
     background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
}

/* --- Clanmembers Page Styles --- */
.pending-setup-box {
    border: 2px solid #ffc107;
    background-color: #fff3cd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    color: #856404;
}

.pending-setup-box h3,
.pending-setup-box p {
    color: #856404;
}

.archive-section {
    margin-top: 50px;
    border-top: 2px dashed #ccc;
    padding-top: 20px;
}

.table-compact-view {
    width: 50%;
    margin: 0 auto;
}

/* Mobile override for compact table */
@media screen and (max-width: 1200px) {
    .table-compact-view {
        width: 100%;
    }
}

/* --- Data Health Dashboard --- */
.issue-tag {
    display: inline-block;
    background: #e44c65; /* Red background */
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-right: 5px;
    margin-bottom: 2px;
}
.issue-tag.warning {
    background: #eebb00; /* Orange/Yellow for non-critical */
    color: #333;
}

/* --- Card / Panel Styles --- */
.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden; /* Ensures content doesn't bleed out of rounded corners */
}

.card-header {
    background-color: #2c3e50;
    color: white;
    padding: 12px 20px;
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
    border-bottom: 1px solid #2c3e50;
}

/* --- Alert Utilities (Generic) --- */
.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* --- Home Page / Welcome Boxes --- */
.welcome-box {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid transparent;
}

.welcome-box.warning {
    background: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

.welcome-box.success {
    background: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.welcome-icon {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}

/* --- Login Page --- */
.discord-login-img {
    vertical-align: middle;
    margin-top: -3px;
    border: none;
    transition: opacity 0.2s;
}

.discord-login-img:hover {
    opacity: 0.9; /* Subtle hover effect */
}

/* Status Text Helper */
.text-danger { color: #dc3545; }
.text-muted { color: #888; font-size: 0.75rem; }

/* Simple styling for the filter bar */
.filter-container {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}
.filter-group {
    flex: 1;
    min-width: 150px;
}
.filter-group label {
    display: block;
    font-size: 0.9em;
    margin-bottom: 5px;
    font-weight: bold;
}
.filter-group input, .filter-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.filter-actions {
    display: flex;
    gap: 10px;
}

/* Clickable Rows */
tr.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

tr.clickable-row:hover {
    background-color: #e8e8e8 !important; /* Slightly darker than standard hover */
}

/* Simple "Bootstraps" (Card Styles) */
.details-container {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   justify-content: center;
}
.details-card {
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   flex: 1;
   min-width: 300px;
   max-width: 500px;
}
.stat-row {
   display: flex;
   justify-content: space-between;
   padding: 8px 0;
   border-bottom: 1px solid #eee;
}
.stat-row:last-child {
   border-bottom: none;
}
.badge {
   display: inline-block;
   padding: 4px 8px;
   border-radius: 4px;
   color: #fff;
   font-size: 0.9em;
   font-weight: bold;
   margin-right: 5px;
}

.badge-faction { background-color: #444; }

/* Rarity Badges */
.badge-common {
    background-color: #808080; /* Grey */
}
.badge-uncommon {
    background-color: #2e7d32; /* Deep Green */
}
.badge-rare {
    background-color: #1976d2; /* Strong Blue */
}
.badge-epic {
    background-color: #9c27b0; /* Purple */
}
.badge-legendary {
    background-color: #d4af37; /* Gold */
}
.badge-mythical {
    background-color: #d32f2f; /* Red */
}

/* Affinity Badges */
.badge-force {
    background-color: #d32f2f; /* Red */
}
.badge-magic {
    background-color: #0288d1; /* Blue */
}
.badge-spirit {
    background-color: #388e3c; /* Green */
}
.badge-void {
    background-color: #7b1fa2; /* Purple */
}

/* Faction Badges */
.badge-banner_lords { background-color: #1BE357; }
.badge-high_elves { background-color: #1B9AE3; }
.badge-sacred_order { background-color: #000000; }
.badge-ogryn_tribes { background-color: #A32900; }
.badge-lizardmen { background-color: #C3DB00; }
.badge-skinwalkers { background-color: #FF7D3D; }
.badge-orcs { background-color: #FF0A0A; }
.badge-demonspawn { background-color: #9C001A; }
.badge-undead_hordes { background-color: #0E210E; }
.badge-dark_elves { background-color: #4A104A; }
.badge-knights_revenant { background-color: #1A0000; }
.badge-barbarians { background-color: #C74C00; }
.badge-shadowkin { background-color: #595959; }
.badge-sylvan_watchers { background-color: #007804; }
.badge-dwarves { background-color: #918F5C; }
.badge-argonites { background-color: #FFB91C; }

/* --- Champion Rarity Borders --- */
.champion-portrait {
    border-radius: 4px;
}
.champion-portrait:hover {
    transform: scale(1.05);
}
.rarity-border-common { border: 4px solid #808080; box-shadow: 0 0 15px #808080; }
.rarity-border-uncommon { border: 4px solid #2e7d32; box-shadow: 0 0 15px #2e7d32; }
.rarity-border-rare { border: 4px solid #1976d2; box-shadow: 0 0 15px #1976d2; }
.rarity-border-epic { border: 4px solid #9c27b0; box-shadow: 0 0 15px #9c27b0; }
.rarity-border-legendary { border: 4px solid #d4af37; box-shadow: 0 0 15px #d4af37; }
.rarity-border-mythical { border: 4px solid #d32f2f; box-shadow: 0 0 15px #d32f2f; }

/* --- Champion Grid Layout --- */
#champion-grid-container {
    display: grid;
    gap: 15px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
}
@media (max-width: 400px) { #champion-grid-container { grid-template-columns: 1fr; } }
@media (min-width: 600px) { #champion-grid-container { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 850px) { #champion-grid-container { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { #champion-grid-container { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1350px) { #champion-grid-container { grid-template-columns: repeat(6, 1fr); } }

/* --- Champion Card Styling --- */
.champion-card {
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    transition: opacity 0.5s ease-in-out;
    position: relative;
}
.champion-image-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
    transition: transform 0.2s ease;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.champion-image-wrapper:hover { transform: scale(1.05); z-index: 10; }
.champion-image-wrapper:hover .affinity-overlay { transform: translate3d(-4px, 4px, 0); }
.affinity-overlay {
    position: absolute;
    bottom: 4px; left: 4px;
    width: 35px; height: 35px;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex; justify-content: center; align-items: center;
    z-index: 5; pointer-events: none;
    transition: transform 0.2s ease;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.affinity-overlay img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.champion-name { font-weight: bold; }
.card-hidden { opacity: 0; }

/* --- Back to Top Button --- */
#backToTopBtn {
    display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99;
    border: none; outline: none; background-color: #333; color: white;
    cursor: pointer; padding: 15px; border-radius: 50%;
    font-size: 18px; font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: background-color 0.3s, transform 0.3s;
}
#backToTopBtn:hover { background-color: #555; transform: scale(1.1); }

/* --- Data Health Dashboard Styles --- */
.status-ok { color: #27ae60; font-weight: bold; }
.status-bad { color: #c0392b; font-weight: bold; }
.sync-btn {
    background-color: #3498db; color: white; border: none;
    padding: 5px 10px; border-radius: 3px; cursor: pointer;
    font-size: 0.8rem; transition: background-color 0.2s;
}
.sync-btn:hover { background-color: #2980b9; }

/* --- Global Loading Overlay --- */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 9999;
    display: none; justify-content: center; align-items: center;
    flex-direction: column; backdrop-filter: blur(2px);
}
.spinner {
    width: 50px; height: 50px;
    border: 5px solid #f3f3f3; border-top: 5px solid #3498db;
    border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loading-text {
    color: white; font-size: 1.2rem; font-weight: bold;
    font-family: 'Roboto', sans-serif; text-shadow: 1px 1px 2px black;
}

/* --- Filter Section Styling (Common) --- */
.filter-controls-top {
    display: flex; flex-wrap: wrap; gap: 15px;
    align-items: center; margin-bottom: 20px;
    padding-bottom: 15px; border-bottom: 1px solid #eee;
}
.filter-control-group { display: flex; flex-direction: column; gap: 5px; }
.checkbox-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; cursor: pointer; transition: color 0.2s;
}
.checkbox-row:hover { color: #3498db; }
.checkbox-row input[type="checkbox"] { transform: scale(1.2); cursor: pointer; }

/* --- Siege Dashboard Styles --- */
.siege-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
    margin-top: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
}
.sticky-header-wrapper {
    position: sticky; top: 0; z-index: 100;
    background-color: #ffffff; padding-top: 20px;
    margin: -20px -20px 20px -20px;
    padding-left: 20px; padding-right: 20px;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.1);
}
.siege-header {
    display: flex; justify-content: space-between;
    align-items: center; padding-bottom: 10px; margin-bottom: 10px;
}
.siege-title { margin: 0; font-size: 1.5em; color: #333; margin-top: 5px; }
.siege-status {
    padding: 5px 12px; border-radius: 20px;
    font-size: 0.8em; font-weight: bold;
    color: white; text-transform: uppercase;
}
.status-PREP { background-color: #f39c12; }
.status-MATCHMAKING { background-color: #3498db; }
.status-BATTLE { background-color: #e74c3c; }
.status-FINISHED { background-color: #95a5a6; }

.siege-stats-ribbon {
    display: flex; justify-content: space-between;
    align-items: center; background: #f8f9fa;
    border-radius: 5px; padding: 10px 20px;
    margin-bottom: 15px; border: 1px solid #eee;
    transition: background-color 0.3s ease;
}
.ribbon-win { background-color: #d4edda !important; border-color: #c3e6cb !important; }
.ribbon-lose { background-color: #f8d7da !important; border-color: #f5c6cb !important; }

.score-side { display: flex; gap: 25px; width: 45%; justify-content: center; }
.vs-divider { font-weight: bold; font-size: 1.2em; color: #ccc; text-transform: uppercase; }
.stat-box { text-align: center; }
.stat-label { font-size: 0.75em; color: #777; text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-size: 1.2em; font-weight: bold; color: #333; }
.stat-total { color: #2980b9; }
.stat-total-opp { color: #c0392b; }

.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.map-box h3 {
    text-align: center; background-color: #f9f9f9;
    padding: 10px; border: 1px solid #eee;
    margin-bottom: 0; font-size: 1.1em;
}
.def-header { border-bottom: 3px solid #3498db !important; color: #2c3e50; }
.atk-header { border-bottom: 3px solid #e74c3c !important; color: #c0392b; }

table.siege-table { width: 100%; border-collapse: collapse; font-size: 0.85em; margin-bottom: 0; }
table.siege-table th, table.siege-table td {
    border: 1px solid #eee; padding: 8px;
    text-align: center; vertical-align: middle;
}
table.siege-table th { background-color: #fcfcfc; font-weight: bold; color: #555; }

tr.structure-lost, tr.structure-lost td { background-color: #ffebee !important; color: #c0392b !important; }
tr.structure-lost .name-cell { text-decoration: line-through; }
tr.structure-captured, tr.structure-captured td { background-color: #d4edda !important; color: #155724 !important; }
tr.structure-captured .name-cell { text-decoration: line-through; }
.structure-ok { color: #27ae60; }

.primary-highlight { border: 2px solid #3498db; }
.primary-badge {
    position: absolute; top: -12px; left: 20px;
    background: #3498db; color: white;
    padding: 3px 12px; font-size: 0.75em; border-radius: 4px;
    font-weight: bold; z-index: 101;
}

.btn-action { border: none; background: none; cursor: pointer; padding: 5px; transition: transform 0.2s; }
.btn-action:hover { transform: scale(1.1); }
.btn-destroy { color: #e74c3c; }
.btn-restore { color: #27ae60; }
.btn-capture { color: #2980b9; }

/* --- Form Specific Styles --- */
.field-error {
    color: #cc0000;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.champion-preview-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.champion-preview-img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    border: 4px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* ========================================= */
/* MOBILE OVERRIDES              */
/* ========================================= */

/* --- Mobile Responsive Header --- */
@media screen and (max-width: 1200px) {

    #header > .container {
        min-height: auto; padding: 20px 0;
        display: flex; flex-direction: column;
        align-items: center; text-align: center;
    }
    #header h1 { position: static; margin-bottom: 20px; font-size: 2.2em; }
    #header nav {
        position: static; display: flex; flex-wrap: wrap;
        justify-content: center; width: 100%;
    }
    #header nav a { margin: 5px 15px; font-size: 1.2em; display: inline-block; }

    .filter-controls-top { flex-direction: column; align-items: stretch; }

    /* Fix Profile Quick Links (Mobile) */
    .profile-container { flex-direction: column; align-items: center; }
        .profile-sidebar {
            width: 100%;       /* Take full width */
            border-left: none; /* Remove side border */
            border-top: 1px solid #eee; /* Add top border instead */
            padding-left: 0;   /* Reset padding */
            margin-left: 0;    /* Reset margin */
            margin-top: 30px;  /* Space it out from the content above */
            padding-top: 20px;
        }

    .quick-links-sidebar {
        width: 100%; border-left: none; border-top: 1px solid #eee;
        padding-left: 0; margin-left: 0; margin-top: 30px; padding-top: 20px;
    }
    .quick-links-sidebar h2 { text-align: center; }

    /* --- Siege Dashboard Mobile --- */
    .siege-section { padding: 10px; margin-top: 15px; }
    .sticky-header-wrapper { margin: -10px -10px 10px -10px; padding: 10px; }
    .siege-header { flex-direction: column; align-items: flex-start; gap: 5px; }
    .siege-title { font-size: 1.2em; }
    .primary-badge { top: -8px !important; left: 10px !important; }

    /* Force Side-by-Side Maps */
    .map-grid { grid-template-columns: 1fr 1fr !important; gap: 4px !important; }

    .map-box h3 {
        font-size: 0.8em; padding: 5px 2px;
        min-height: 50px; /* Alignment fix */
        display: flex; align-items: center; justify-content: center;
        line-height: 1.2;
    }

    table.siege-table { font-size: 0.7em; }
    table.siege-table th, table.siege-table td { padding: 4px 2px !important; }
    .btn-action { padding: 2px 4px; font-size: 0.9em; }

    .siege-stats-ribbon { display: grid !important; grid-template-columns: 1fr auto 1fr; padding: 5px !important; gap: 5px !important; }
    .score-side { width: 100%; gap: 5px; flex-wrap: wrap; justify-content: center; }
    .stat-box { min-width: 40px; }
    .stat-label { font-size: 0.6em; }
    .stat-value { font-size: 1em; }

    /* Form Responsiveness */
    .identity-grid-4,
    .stat-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columns on tablets/mobile */
    }

    /* Stack aura fields vertically on mobile */
    .aura-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* --- Roster Edit Mode Styles --- */
body.roster-editing .champion-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

body.roster-editing .champion-card a {
    pointer-events: none; /* Disable links while editing */
}

/* Unselected State: Dimmed */
body.roster-editing .champion-card:not(.selected) {
    opacity: 0.4;
    filter: grayscale(100%);
    transform: scale(0.95);
}

/* Selected State: Pop & Glow */
body.roster-editing .champion-card.selected {
    opacity: 1;
    filter: none;
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.6);
    border-radius: 8px;
}

/* Green Checkmark Overlay */
body.roster-editing .champion-card.selected::after {
    content: '\f00c'; /* FontAwesome Check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -10px;
    right: -10px;
    background: #27ae60;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 11;
}

/* Sticky Save Bar */
#save-roster-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 15px;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    transform: translateY(100%); /* Hidden by default */
    transition: transform 0.3s ease-in-out;
}

#save-roster-bar.visible {
    transform: translateY(0); /* Slide up */
}

/* High Contrast Cancel Button (Specific to Dark Bar) */
.button.cancel-btn {
    background: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.button.cancel-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* --- Clanmember Add Page --- */
.lookup-form {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
}

.discord-verified-text {
    font-weight: bold;
    color: #2c3e50;
    font-size: 1.1em;
}

/* --- Clanmember Edit & Profile Styles --- */
.linked-account-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 25px;
    border: 1px solid #e9ecef;
    text-align: center;
}

.linked-account-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: left;
}

.linked-avatar-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-center-narrow {
    max-width: 500px;
    margin: 0 auto 20px auto;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.section-divider-title {
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Extra small screens (Phones) */
@media screen and (max-width: 1200px) {
    #header h1 { font-size: 1.8em; }
    #header nav a { margin: 5px 10px; font-size: 1.1em; }
}

/* --- Responsive Table to Cards (For Clanmembers/Audit) --- */
@media screen and (max-width: 1200px) {
    table, thead, tbody, th, td, tr { display: block; width: 100% !important; box-sizing: border-box; }
    tbody tr { height: auto !important; }
    table { overflow: visible !important; background: transparent !important; box-shadow: none !important; }
    thead tr { position: absolute; top: -9999px; left: -9999px; }

    tr {
        margin-bottom: 20px; border: 1px solid #ddd; border-radius: 10px;
        background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 10px 0;
    }
    td {
        border: none; border-bottom: 1px solid #eee; position: relative;
        padding-left: 50% !important; text-align: right !important;
        min-height: 40px; display: flex; align-items: center; justify-content: flex-end;
        padding-right: 15px;
    }
    td:last-child { border-bottom: 0; }
    td:before {
        content: attr(data-label); position: absolute; left: 15px; width: 40%;
        padding-right: 10px; white-space: nowrap; text-align: left;
        font-weight: bold; color: #333; font-family: 'Yanone Kaffeesatz'; font-size: 1.1em;
    }
    .button-edit-mobile, .button-delete-mobile {
        padding: 8px 15px !important; font-size: 0.9em !important;
        margin: 5px 2px; display: inline-block;
    }
    td[data-label="Avatar"] {
        justify-content: center; padding-left: 0 !important; padding-right: 0 !important;
        background-color: #f9f9f9; border-radius: 10px 10px 0 0;
    }
    td[data-label="Avatar"]:before { display: none; }

    .form-grid-2 {
        grid-template-columns: 1fr !important; /* Stack columns on mobile */
    }

    /* Stack siege groups vertically on mobile */
    .siege-group {
        flex: 0 0 100%;
    }
}

/* --- Filter Section Mobile Overrides --- */
@media screen and (max-width: 1200px) {
    #filter-wrapper form { max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
    #filter-wrapper table, #filter-wrapper tbody, #filter-wrapper tr, #filter-wrapper td {
        display: block; width: 100% !important; border: none;
    }
    #filter-wrapper thead { display: none; }

    #filter-wrapper td {
        display: block !important; text-align: left !important;
        padding-left: 10px !important; padding-right: 0 !important;
        margin-bottom: 25px; border-bottom: 1px solid #eee;
    }
    #filter-wrapper td::before {
        content: attr(data-label); display: block; position: relative !important;
        font-weight: bold; font-size: 1.3em; margin-bottom: 10px;
        color: #333; border-bottom: 2px solid #ddd; padding-bottom: 5px;
        width: 100%; background-color: #f9f9f9; padding-left: 5px; left: auto !important;
    }
    #filter-wrapper td > span {
        display: block; width: 100%; margin-bottom: 8px;
        padding: 5px 0; border-bottom: 1px dashed #f0f0f0;
    }
    #filter-wrapper input[type="checkbox"] { transform: scale(1.3); margin-right: 15px; vertical-align: middle; }
    #filter-wrapper input[type="text"] { width: 100% !important; margin-top: 10px; }
    #filter-wrapper label { display: block; margin-bottom: 10px; }

    /* Siege Overview Mobile Overrides */
    .map-grid {
        grid-template-columns: 1fr 1fr !important; /* Force 2 columns */
        gap: 4px !important;
    }

    .map-box h3 {
        font-size: 0.8em;
        padding: 5px 2px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }

    table.siege-table {
        font-size: 0.7em;
    }

    table.siege-table th,
    table.siege-table td {
        padding: 4px 2px !important;
    }

    .btn-action {
        padding: 2px 4px;
        font-size: 0.9em;
    }

    /* Stack the Score Ribbon components */
    .siege-stats-ribbon { flex-direction: column; gap: 15px; }
    .score-side { width: 100%; justify-content: space-around; }
}

/* --- Team Builder Module --- */

/* Sticky Header */
#team-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #2c3e50;
    border-bottom: 4px solid #f39c12;
    padding: 25px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    color: white;
    transition: all 0.3s ease;
}

.builder-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 30px;
}

/* Team Slots */
.team-slots-wrapper {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.team-slot {
    width: 150px;
    height: 150px;
    background-color: rgba(0,0,0,0.3);
    border: 3px solid #555;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.team-slot img {
    width: auto;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}

.team-slot:hover {
    border-color: #fff;
    transform: scale(1.05);
}

.team-slot.selected {
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.6);
    transform: scale(1.05);
    z-index: 10;
}

/* Leader Slot Specifics */
.team-slot.leader-slot {
    border-color: #f1c40f;
}
.team-slot.leader-slot::after {
    content: 'LEADER';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(241, 196, 15, 0.9);
    color: #000;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 4px 0;
}

/* Invalid / Error State */
.team-slot.invalid-slot {
    border-color: #e74c3c !important;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
.team-slot.invalid-slot::before {
    content: 'INVALID';
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    z-index: 5;
}

/* Clear Button (X) */
.slot-clear-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.team-slot.has-champion:hover .slot-clear-btn {
    display: flex;
}

/* Form Inputs inside Sticky Header */
.team-meta-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 300px;
}
.team-meta-inputs input,
.team-meta-inputs select {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    width: 100%;
    color: #333;
    font-size: 1.1em;
}

/* Aura & Warnings */
#leader-aura-display {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9em;
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.3);
}

#aura-warning,
#condition-warning {
    color: #ffcccc;
    font-weight: bold;
    font-size: 0.9em;
    display: none;
    margin-top: 5px;
    background: rgba(231, 76, 60, 0.3);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #e74c3c;
}

/* Builder Save Button */
.save-btn {
    background-color: #27ae60;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}
.save-btn:hover { background-color: #2ecc71; }
.save-btn:disabled { background-color: #7f8c8d; cursor: not-allowed; opacity: 0.7; }

/* Roster Selection Grid */
.roster-selection-area { padding-top: 20px; }

.builder-champion-card {
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    /* Inherits general champion card sizing from main.css via IDs usually,
       but we define specific behaviors here */
}

.builder-champion-card.picked {
    opacity: 0.3;
    filter: grayscale(100%);
    pointer-events: none;
}

.builder-champion-card.filtered-out {
    display: none;
}

.builder-champion-card:hover .champion-image-wrapper {
    transform: scale(1.05);
    z-index: 10;
}

.builder-champion-card .affinity-overlay {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 35px;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.builder-champion-card:hover .affinity-overlay {
    transform: translate3d(-4px, 4px, 0);
}

.builder-champion-card .affinity-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

/* Mobile Adjustments */
@media screen and (max-width: 1200px) {
    .builder-container {
        flex-direction: column;
        gap: 20px;
    }
    .team-meta-inputs {
        width: 100%;
        min-width: 0;
    }
    .team-slots-wrapper {
        flex-wrap: wrap; /* Allow slots to wrap if screen is very small */
    }
    .team-slot {
        width: 80px;  /* Smaller slots on mobile */
        height: 80px;
    }
    .save-btn {
        width: 100%;
        padding: 10px;
    }
}

/* --- Siege Overview / Live Battlefield --- */
.siege-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
    margin-top: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
}

.siege-section.primary-highlight {
    border: 2px solid #3498db;
}

.primary-badge {
    position: absolute;
    top: -12px;
    left: 20px;
    background: #3498db;
    color: white;
    padding: 3px 12px;
    font-size: 0.75em;
    border-radius: 4px;
    font-weight: bold;
    z-index: 101;
}

/* Sticky Header Logic */
.sticky-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #ffffff;
    padding-top: 20px;
    margin: -20px -20px 20px -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.1);
}

.siege-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.siege-title {
    margin: 0;
    font-size: 1.5em;
    color: #333;
    margin-top: 5px;
}

/* Status Badges */
.siege-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}
.status-PREP { background-color: #f39c12; }
.status-MATCHMAKING { background-color: #3498db; }
.status-BATTLE { background-color: #e74c3c; }
.status-FINISHED { background-color: #95a5a6; }

/* Score Ribbon */
.siege-stats-ribbon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.ribbon-win { background-color: #d4edda !important; border-color: #c3e6cb !important; }
.ribbon-lose { background-color: #f8d7da !important; border-color: #f5c6cb !important; }

.score-side { display: flex; gap: 25px; width: 45%; justify-content: center; }
.vs-divider { font-weight: bold; font-size: 1.2em; color: #ccc; text-transform: uppercase; }

.stat-box { text-align: center; }
.stat-label { font-size: 0.75em; color: #777; text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-size: 1.2em; font-weight: bold; color: #333; }
.stat-total { color: #2980b9; }
.stat-total-opp { color: #c0392b; }

/* Map Grid */
.map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.map-box h3 {
    text-align: center;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #eee;
    margin-bottom: 0;
    font-size: 1.1em;
}
.def-header { border-bottom: 3px solid #3498db !important; color: #2c3e50; }
.atk-header { border-bottom: 3px solid #e74c3c !important; color: #c0392b; }

/* Tables */
table.siege-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    margin-bottom: 0;
}
table.siege-table th, table.siege-table td {
    border: 1px solid #eee;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}
table.siege-table th {
    background-color: #fcfcfc;
    font-weight: bold;
    color: #555;
}

/* Row States */
tr.structure-lost, tr.structure-lost td { background-color: #ffebee !important; color: #c0392b !important; }
tr.structure-lost .name-cell { text-decoration: line-through; }

tr.structure-captured, tr.structure-captured td { background-color: #d4edda !important; color: #155724 !important; }
tr.structure-captured .name-cell { text-decoration: line-through; }

.structure-ok { color: #27ae60; }

/* Action Buttons */
.btn-action {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
}
.btn-action:hover { transform: scale(1.1); }
.btn-destroy { color: #e74c3c; }
.btn-restore { color: #27ae60; }
.btn-capture { color: #2980b9; }

/* --- Hub / Landing Page Styles --- */
.hub-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

.hub-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #3498db;
    color: inherit;
    text-decoration: none;
}

.card-icon {
    font-size: 3em;
    color: #3498db;
    margin-right: 30px;
    width: 80px;
    text-align: center;
}

.card-content {
    text-align: left;
    flex-grow: 1;
}

.card-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3e50;
    display: block;
}

.card-desc {
    color: #7f8c8d;
    font-size: 1em;
    margin: 0;
}

.card-arrow {
    font-size: 1.5em;
    color: #ccc;
    margin-left: 20px;
}

/* Specific Colors */
.card-overview .card-icon { color: #e67e22; }
.card-defense .card-icon { color: #27ae60; }
.card-history .card-icon { color: #95a5a6; }

/* Mobile Card Adjustments */
@media screen and (max-width: 1200px) {
    .hub-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .card-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .card-content {
        text-align: center;
        margin-bottom: 15px;
    }
    .card-arrow {
        display: none; /* Hide arrow on mobile */
    }
}

/* --- Siege History Styles --- */
.history-container {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

.clan-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #333;
}

table.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table.history-table th,
table.history-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

table.history-table th {
    background-color: #f8f9fa;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em;
}

table.history-table tr:hover {
    background-color: #fcfcfc;
}

.score-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: bold;
    background: #eef2f5;
    color: #2c3e50;
}

.empty-state {
    text-align: center;
    padding: 30px;
    color: #999;
    font-style: italic;
}

.clan-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    margin-right: 8px;
    font-weight: bold;
}
.badge-T1 { background-color: #3498db; color: white; }
.badge-T2 { background-color: #e67e22; color: white; }

.outcome-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    min-width: 70px;
    text-align: center;
}
.outcome-win { background-color: #27ae60; }
.outcome-loss { background-color: #e74c3c; }
.outcome-draw { background-color: #95a5a6; }

/* --- Login History / Security --- */
.card-header.danger {
    background-color: #c0392b;
    border-bottom: 1px solid #a93226;
}

.timezone-badge {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    font-size: 0.9em;

    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    margin: 0px auto 15px;
    padding: 8px 15px;
    text-align: center;
}

.table-identity-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-identity-details {
    display: flex;
    flex-direction: column;
}

/* --- Profile Layout --- */
.profile-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
}

.profile-main {
    flex: 1;
    min-width: 300px;
}

.profile-sidebar {
    width: 250px;
    border-left: 1px solid #eee;
    padding-left: 30px;
    margin-left: 20px;
}

/* --- Siege Team Cards (Profile) --- */
.known-team-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
}

.known-team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.team-condition-badge {
    background-color: #f39c12;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.team-portraits {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.team-mini-portrait {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 2px solid #ccc;
    object-fit: cover;
}

.team-mini-portrait.leader {
    border-color: #f1c40f;
    box-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
}

.team-actions {
    display: flex;
    gap: 10px;
}

.team-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 5px;
    transition: color 0.2s;
    text-decoration: none;
}

.btn-edit { color: #3498db; }
.btn-edit:hover { color: #2980b9; }

.btn-delete { color: #e74c3c; }
.btn-delete:hover { color: #c0392b; }
/* --- Scraper Dashboard Styles --- */
.diff-error { color: #e44c65; font-weight: bold; }
.diff-ok { color: #4caf50; opacity: 0.7; }

table.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
}

table.dashboard-table th,
table.dashboard-table td {
    border: 1px solid #e1e1e1;
    padding: 0.5em;
    text-align: center;
    vertical-align: middle;
}

table.dashboard-table th {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
}

.border-left-thick { border-left: 2px solid #ccc !important; }
.text-left { text-align: left !important; }

/* Inline Input Styles */
input.target-input {
    width: 50px;
    padding: 2px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 1em;
    height: auto; /* Override global input height if needed */
}

input.target-input:focus {
    border-color: #0c2ccc;
    outline: none;
    background-color: #f0f8ff;
}

/* Alliance Row Header */
.alliance-header-row {
    background-color: #e0e0e0;
    border-top: 2px solid #999;
}

.alliance-header-cell {
    text-align: center !important;
    padding-left: 15px !important;
    font-weight: bold;
    color: #333;
}

/* --- Siege Defense Map --- */
.siege-map-container { display: flex; flex-direction: column; gap: 40px; }
.siege-instance { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.siege-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f4f4f4; padding-bottom: 15px; margin-bottom: 20px; }
.structure-row { margin-bottom: 30px; border: 1px solid #eee; border-radius: 6px; overflow: hidden; }
.structure-title { background: #f9f9f9; padding: 10px 15px; font-weight: bold; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }

.group-container { display: flex; flex-wrap: wrap; gap: 15px; padding: 15px; background: #fff; }
.siege-group {
    flex: 0 0 30%; /* Default desktop: 3 columns */
    min-width: 250px;
    border: 1px dashed #ccc;
    padding: 10px;
    border-radius: 4px;
    position: relative;
    margin-top: 10px;
}
.group-label { position: absolute; top: -10px; left: 10px; background: #fff; padding: 0 5px; font-size: 0.8em; color: #777; font-weight: bold; }

/* Slot Cards */
.slot-card { background: #fdfdfd; border: 1px solid #e0e0e0; margin-bottom: 8px; padding: 10px; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: space-between; }
.slot-card:hover { border-color: #3498db; background: #f0f8ff; transform: translateY(-2px); }
.slot-card.empty { border-style: dashed; color: #999; }
.slot-card.disabled { opacity: 0.6; cursor: not-allowed; background: #f9f9f9; border-color: #eee; }
.mine-highlight { border-left: 4px solid #27ae60; }

.slot-number { font-weight: bold; color: #555; margin-right: 10px; min-width: 20px; }
.slot-info { flex-grow: 1; font-size: 0.9em; }
.slot-member { font-weight: bold; color: #2980b9; display: block; }
.slot-team { font-size: 0.85em; color: #555; }

/* Utilities */
.scroll-badge { background: #e74c3c; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.85em; font-weight: bold; display: inline-block; margin-left: 10px;}
.scroll-badge.full { background: #95a5a6; }
.admin-box { background: #fff3e0; border: 1px solid #ffcc80; padding: 10px; margin-bottom: 15px; border-radius: 4px; }
.quick-select-box { background: #f0f8ff; padding: 10px; border-radius: 4px; border: 1px dashed #3498db; margin-bottom: 15px; }

/* 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.5); backdrop-filter: blur(2px); }
.modal-content { background-color: #fff; margin: 5% auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 600px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.close-modal { float: right; font-size: 28px; font-weight: bold; cursor: pointer; color: #aaa; transition: color 0.2s; }
.close-modal:hover { color: #000; }

/* --- Compact Sync Preview Table (Mobile Optimized) --- */
.compact-sync-table th,
.compact-sync-table td {
    padding: 6px 4px !important; /* Tighter padding */
    font-size: 0.9em;
}

/* Mobile Specifics for Sync Table */
@media screen and (max-width: 600px) {
    .compact-sync-table {
        font-size: 0.8em;
    }

    /* Hide non-essential columns on very small screens if needed,
       but for now we just make them small */
    .compact-sync-table .button.small {
        padding: 2px 6px;
        font-size: 0.7em;
        letter-spacing: 0;
    }

    .compact-sync-table input[type="checkbox"] {
        transform: scale(1.0); /* Smaller checkbox on mobile */
    }
}

/* Unknown Champion List Styling */
.unknown-champion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
    margin-top: 10px;
}

.unknown-champion-item {
    background: rgba(133, 100, 4, 0.1);
    border: 1px solid rgba(133, 100, 4, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
}

/* ================================================= */
/* COMPACT SYNC TABLE OVERRIDES (Force Table Layout) */
/* ================================================= */

@media screen and (max-width: 1200px) {
    /* 1. Reset the "Card View" behavior so it stays a normal table */
    table.compact-sync-table,
    .compact-sync-table tbody {
        display: table !important;
        width: 100% !important;
    }

    .compact-sync-table thead {
        display: table-header-group !important; /* Show headers again */
    }

    .compact-sync-table tr {
        display: table-row !important;
        border: 1px solid #eee !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    .compact-sync-table td,
    .compact-sync-table th {
        display: table-cell !important;
        text-align: left !important;
        padding: 6px 4px !important;
        border-bottom: 1px solid #eee !important;
        min-height: auto !important;
    }

    /* 2. Hide the "Data Label" pseudo-elements used in Card View */
    .compact-sync-table td::before {
        display: none !important;
    }

    /* 3. Mobile Optimization: Hide the "Type" Badge column on small screens */
    /* (The row color or text color already indicates the type) */
    .compact-sync-table th:nth-child(2),
    .compact-sync-table td:nth-child(2) {
        display: none !important;
    }

    /* 4. Tighter Font for Mobile */
    .compact-sync-table {
        font-size: 0.8em !important;
    }

    /* Adjust Checkbox column width */
    .compact-sync-table td:first-child,
    .compact-sync-table th:first-child {
        width: 30px !important;
        text-align: center !important;
    }
}