/* T3 Kingdoms - Hlavní CSS */

:root {
    --bg-dark: #1a1a2e;
    --bg-medium: #16213e;
    --bg-light: #0f3460;
    --gold: #e8b923;
    --gold-dark: #b8860b;
    --text-primary: #e0d6c8;
    --text-secondary: #a09080;
    --green: #4caf50;
    --red: #e74c3c;
    --border: #2a2a4e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
}

/* Resource Bar */
.resource-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-dark);
    border-bottom: 2px solid var(--gold-dark);
    padding: 8px 16px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
}

.resource {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.resource .icon {
    font-size: 18px;
}

.resource .value {
    font-weight: bold;
    color: var(--gold);
}

.resource .capacity {
    color: var(--text-secondary);
}

.resource .production {
    color: var(--green);
    font-size: 12px;
}

/* Navigation */
.navbar {
    background: var(--bg-medium);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.nav-brand {
    font-size: 24px;
    font-weight: bold;
    color: var(--gold);
}

.nav-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background 0.2s;
}

.nav-links a:hover {
    background: var(--bg-light);
}

.btn-logout {
    background: var(--red);
    color: white !important;
}

/* Main Content */
.main-content {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Panels */
.panel {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

/* Buttons */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-primary {
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
    color: var(--bg-dark);
    font-weight: bold;
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--text-secondary);
}

.btn-secondary {
    background: var(--bg-light);
    color: var(--text-primary);
}

.btn-large {
    padding: 12px 24px;
    font-size: 16px;
}

.btn-small {
    padding: 4px 8px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
    display: block;
}

/* Error/Success Messages */
.error-message {
    background: var(--red);
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.success-message {
    background: var(--green);
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.info-message {
    background: var(--gold);
    color: var(--bg-dark);
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Login/Register */
.login-container {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.login-panel {
    max-width: 400px;
    width: 100%;
}

.login-panel h1 {
    text-align: center;
    color: var(--gold);
    margin-bottom: 10px;
}

.tagline {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.auth-tabs {
    margin-bottom: 20px;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tab-btn.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* Forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--gold);
}

.features {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.features h3 {
    color: var(--gold);
    margin-bottom: 10px;
}

.features ul {
    list-style: none;
    padding-left: 0;
}

.features li {
    padding: 5px 0;
    color: var(--text-secondary);
}

/* Village Header */
.village-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.village-header h1 {
    color: var(--gold);
    flex: 1;
}

.village-coords {
    color: var(--text-secondary);
}

.rename-form {
    display: flex;
    gap: 10px;
}

.rename-form input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-primary);
}

/* Active Constructions/Training */
.active-constructures, .active-training {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.active-constructures h2, .active-training h2 {
    color: var(--gold);
    margin-bottom: 10px;
    font-size: 18px;
}

.construction-item, .training-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.countdown {
    color: var(--gold);
    font-weight: bold;
}

/* Buildings Grid */
.buildings-section h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.building-card {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
    text-align: center;
}

.building-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.building-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.building-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.building-level {
    color: var(--text-secondary);
    font-size: 14px;
}

.building-status {
    font-size: 12px;
    margin-top: 5px;
}

.building-status.upgrading {
    color: var(--gold);
}

.building-status.maxed {
    color: var(--green);
}

.building-timer {
    font-size: 11px;
    color: var(--gold);
    margin-top: 3px;
    font-weight: bold;
}

/* Units Section */
.units-section h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.units-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.unit-item {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.no-units {
    color: var(--text-secondary);
    font-style: italic;
}

/* Building Detail */
.building-detail {
    max-width: 800px;
}

.building-header {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.building-icon-large {
    font-size: 64px;
}

.building-title h1 {
    color: var(--gold);
    margin-bottom: 10px;
}

.building-description {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.building-level {
    font-size: 18px;
}

.production-info, .capacity-info {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.production-info h3, .capacity-info h3 {
    color: var(--gold);
    margin-bottom: 10px;
}

.upgrade-section, .upgrade-progress, .upgrade-unavailable {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.upgrade-section.locked {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.upgrade-section.locked button {
    background: var(--text-secondary);
    cursor: not-allowed;
}

.warning {
    color: var(--gold);
    font-weight: bold;
    margin: 10px 0;
    padding: 10px;
    background: var(--bg-dark);
    border-radius: 4px;
}

.upgrade-section h3, .upgrade-progress h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.upgrade-benefit {
    background: var(--bg-dark);
    padding: 12px;
    border-radius: 4px;
    margin: 12px 0;
    border-left: 3px solid var(--gold);
}

.upgrade-benefit strong {
    color: var(--gold);
}

.upgrade-benefit .current {
    color: var(--text-secondary);
}

.upgrade-benefit .new {
    color: var(--green);
    font-weight: bold;
}

.upgrade-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

.cost-item {
    background: var(--bg-dark);
    padding: 5px 10px;
    border-radius: 4px;
}

.training-section {
    margin-top: 30px;
}

.training-section h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.unit-card {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.unit-card.disabled {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.unit-card.disabled .train-form {
    display: none;
}

.unit-card.disabled button[disabled] {
    background: var(--text-secondary);
    cursor: not-allowed;
}

.unit-required.locked {
    color: var(--red);
    font-weight: bold;
}

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

.unit-header h4 {
    color: var(--gold);
}

.unit-required {
    font-size: 12px;
    color: var(--text-secondary);
}

.unit-description {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.unit-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

.unit-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.unit-train-time {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 10px;
}

.train-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.train-amount {
    width: 80px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-primary);
}

/* Map */
.map-container {
    text-align: center;
}

.map-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.map-control-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.map-nav-btn {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 18px;
}

.map-nav-btn:hover {
    border-color: var(--gold);
}

.map-info {
    margin-bottom: 20px;
}

.map-zoom-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.zoom-label {
    color: var(--text-secondary);
}

.zoom-btn {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.zoom-btn:hover {
    border-color: var(--gold);
}

.zoom-btn.active {
    background: var(--gold);
    color: var(--bg-dark);
    border-color: var(--gold);
    font-weight: bold;
}

.map-grid {
    display: inline-block;
    background: var(--bg-medium);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.map-row {
    display: flex;
}

.map-cell {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 10px;
}

.map-cell.zoom-out-2 {
    width: 25px;
    height: 25px;
    font-size: 8px;
}

.map-cell.zoom-out-3 {
    width: 17px;
    height: 17px;
    font-size: 7px;
}

.map-cell:hover {
    border-color: var(--gold);
}

.map-cell.empty {
    background: #2d4a2d;
}

.map-cell.own-village {
    background: #1e3a5f;
    border-color: var(--gold);
}

.map-cell.other-village {
    background: #3a2d2d;
}

/* Coordinate Tooltip */
.coord-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10000;
    white-space: nowrap;
    border: 1px solid var(--gold-dark);
}

.cell-icon {
    font-size: 16px;
}

.cell-label {
    margin-top: 2px;
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 3px;
}

.legend-icon.empty {
    background: #2d4a2d;
}

/* Popup */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-medium);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 20px;
    z-index: 1000;
    min-width: 300px;
}

.popup-content {
    text-align: center;
}

.popup-content h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.popup-content .btn {
    margin: 5px;
}

/* Rally Point */
.rally-container {
    max-width: 900px;
}

.rally-container h1 {
    color: var(--gold);
    margin-bottom: 20px;
}

.no-units-warning {
    background: var(--bg-medium);
    border: 1px solid var(--red);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.no-units-warning p {
    margin-bottom: 15px;
}

.attack-form-section {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.attack-form-section h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.coords-input {
    display: flex;
    gap: 10px;
}

.coords-input input {
    width: 100px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-primary);
}

.troops-selection {
    margin: 20px 0;
}

.troops-selection h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.troop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--bg-dark);
    border-radius: 4px;
    margin-bottom: 8px;
}

.troop-item label {
    flex: 1;
}

.troop-item input {
    width: 100px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-medium);
    color: var(--text-primary);
}

.attack-info {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-dark);
    border-radius: 4px;
}

.active-movements {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.active-movements h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.movement-item {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
}

.movement-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.movement-status {
    color: var(--gold);
    font-weight: bold;
}

.movement-details, .movement-troops, .movement-loot {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 5px 0;
}

/* Reports */
.reports-container {
    max-width: 900px;
}

.reports-container h1 {
    color: var(--gold);
    margin-bottom: 20px;
}

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.report-card {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
}

.report-card:hover {
    border-color: var(--gold);
}

.report-card.unread {
    border-left: 4px solid var(--gold);
    background: var(--bg-light);
}

.report-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.report-icon {
    font-size: 24px;
}

.report-title {
    font-weight: bold;
    color: var(--gold);
}

.report-date {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 12px;
}

.report-summary, .report-stats {
    color: var(--text-secondary);
    font-size: 14px;
}

.no-reports {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* Report Detail */
.report-detail {
    max-width: 900px;
}

.report-detail h1 {
    color: var(--gold);
    margin-bottom: 20px;
}

.report-meta {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.report-meta p {
    margin: 5px 0;
}

.battle-summary {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.battle-summary h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.battle-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
}

.stat-label {
    color: var(--text-secondary);
}

.stat-value {
    color: var(--gold);
    font-weight: bold;
}

.troops-breakdown {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.troops-breakdown h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.troops-table {
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
}

.troops-header, .troops-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 10px 15px;
    text-align: left;
}

.troops-header {
    background: var(--bg-light);
    font-weight: bold;
    color: var(--gold);
}

.troops-row {
    border-top: 1px solid var(--border);
}

.loot-section {
    background: var(--bg-medium);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.loot-section h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.loot-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.loot-item {
    background: var(--bg-dark);
    padding: 10px 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

/* Profile */
.profile-container {
    max-width: 600px;
}

.profile-container h1 {
    color: var(--gold);
    margin-bottom: 20px;
}

.profile-card {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.profile-header {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.profile-avatar {
    font-size: 64px;
}

.profile-info h2 {
    color: var(--gold);
    margin-bottom: 10px;
}

.profile-village, .profile-coords {
    color: var(--text-secondary);
    margin: 5px 0;
}

.profile-resources, .profile-stats {
    margin-top: 20px;
}

.profile-resources h3, .profile-stats h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

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

.resource-item {
    background: var(--bg-dark);
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}

.resource-item .icon {
    font-size: 24px;
    display: block;
    margin-bottom: 5px;
}

.resource-item .value {
    color: var(--gold);
    font-weight: bold;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-item {
    background: var(--bg-dark);
    border-radius: 4px;
    padding: 10px;
}

.stat-label {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 5px;
}

.stat-value {
    color: var(--gold);
}

/* Responsive */
@media (max-width: 768px) {
    .resource-bar {
        justify-content: flex-start;
        overflow-x: auto;
    }
    
    .buildings-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .map-cell {
        width: 30px;
        height: 30px;
    }
    
    .troops-header, .troops-row {
        grid-template-columns: 1fr 0.5fr 0.5fr;
        font-size: 12px;
    }
    
    .resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Attack Confirmation */
.attack-confirm {
    max-width: 600px;
    margin: 0 auto;
}

.confirm-panel {
    background: var(--bg-medium);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.confirm-panel h2 {
    color: var(--gold);
    margin-bottom: 15px;
}

.troops-summary {
    background: var(--bg-dark);
    border-radius: 4px;
    padding: 10px;
}

.troop-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.troop-row:last-child {
    border-bottom: none;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cancel-form {
    margin-top: 10px;
}