/**
 * SFL Web - Pixel Art Style
 * Sunflower Land themed CSS
 */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ===== CUSTOM PROPERTIES ===== */
:root {
    --pixel-bg: #1a1a1a;
    --pixel-bg-light: #2d2d2d;
    --pixel-border: #444444;
    --pixel-border-light: #555555;
    --pixel-text: #e0e0e0;
    --pixel-text-muted: #888888;
    --pixel-accent: #f5a623;
    --pixel-accent-light: #f7b538;
    --pixel-success: #5cb85c;
    --pixel-danger: #d9534f;
    --pixel-warning: #f0ad4e;
    --pixel-info: #5bc0de;
    
    --pixel-font: 'Press Start 2P', cursive;
    --pixel-font-size: 8px;
}

/* ===== BASE STYLES ===== */
body {
    background-color: var(--pixel-bg);
    color: var(--pixel-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.pixel-font {
    font-family: var(--pixel-font);
    font-size: var(--pixel-font-size);
    letter-spacing: 1px;
}

/* ===== PIXEL BUTTONS ===== */
.pixel-btn {
    font-family: var(--pixel-font);
    font-size: 6px;
    padding: 8px 12px;
    border: 2px solid var(--pixel-border);
    border-radius: 0;
    background: linear-gradient(180deg, #3d3d3d 0%, #2d2d2d 100%);
    color: var(--pixel-text);
    cursor: pointer;
    transition: all 0.1s;
    text-transform: uppercase;
}

.pixel-btn:hover {
    background: linear-gradient(180deg, #4d4d4d 0%, #3d3d3d 100%);
    border-color: var(--pixel-border-light);
}

.pixel-btn:active {
    background: linear-gradient(180deg, #2d2d2d 0%, #1d1d1d 100%);
    transform: translateY(1px);
}

.pixel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pixel-btn.btn-success {
    background: linear-gradient(180deg, #5cb85c 0%, #4cae4c 100%);
    border-color: #4cae4c;
    color: #fff;
}

.pixel-btn.btn-success:hover {
    background: linear-gradient(180deg, #6cc86c 0%, #5cb85c 100%);
}

.pixel-btn.btn-warning {
    background: linear-gradient(180deg, #f0ad4e 0%, #eea236 100%);
    border-color: #eea236;
    color: #000;
}

.pixel-btn.btn-warning:hover {
    background: linear-gradient(180deg, #f4b95e 0%, #f0ad4e 100%);
}

.pixel-btn.btn-danger {
    background: linear-gradient(180deg, #d9534f 0%, #c9302c 100%);
    border-color: #c9302c;
    color: #fff;
}

/* ===== PIXEL INPUTS ===== */
.pixel-input {
    font-family: monospace;
    font-size: 12px;
    background-color: var(--pixel-bg);
    border: 2px solid var(--pixel-border);
    border-radius: 0;
    color: var(--pixel-text);
    padding: 8px 12px;
}

.pixel-input:focus {
    background-color: var(--pixel-bg);
    border-color: var(--pixel-accent);
    color: var(--pixel-text);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25);
}

.pixel-input::placeholder {
    color: var(--pixel-text-muted);
}

/* ===== NAVBAR ===== */
.navbar {
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border-bottom: 2px solid var(--pixel-border);
}

.navbar-brand {
    font-family: var(--pixel-font);
    font-size: 10px;
    color: var(--pixel-accent) !important;
}

.nav-link {
    font-family: monospace;
    font-size: 12px;
    color: var(--pixel-text-muted);
    border: 2px solid transparent;
    padding: 8px 12px;
    transition: all 0.1s;
}

.nav-link:hover {
    color: var(--pixel-text);
    border-color: var(--pixel-border);
    background-color: var(--pixel-bg-light);
}

.nav-link.active {
    color: var(--pixel-accent);
    border-color: var(--pixel-accent);
    background-color: var(--pixel-bg-light);
}

/* ===== TABS ===== */
.nav-tabs {
    border-bottom: 2px solid var(--pixel-border);
}

.nav-tabs .nav-link {
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
}

.nav-tabs .nav-link.active {
    border-color: var(--pixel-border);
    border-bottom: 2px solid var(--pixel-bg);
    background-color: var(--pixel-bg-light);
    color: var(--pixel-accent);
}

.nav-tabs .nav-link:hover {
    border-color: var(--pixel-border);
}

/* ===== CARDS ===== */
.card {
    background-color: var(--pixel-bg);
    border: 2px solid var(--pixel-border);
    border-radius: 0;
}

.card-header {
    background: linear-gradient(180deg, var(--pixel-bg-light) 0%, var(--pixel-bg) 100%);
    border-bottom: 2px solid var(--pixel-border);
    font-size: 12px;
}

/* ===== TABLES ===== */
.table {
    color: var(--pixel-text);
    border-color: var(--pixel-border);
}

.table thead th {
    font-family: var(--pixel-font);
    font-size: 6px;
    background-color: var(--pixel-bg-light);
    border: 2px solid var(--pixel-border);
    color: var(--pixel-text-muted);
    padding: 8px;
    text-transform: uppercase;
}

.table td {
    border-color: var(--pixel-border);
    padding: 6px 8px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--pixel-bg-light);
    color: var(--pixel-text);
}

/* ===== ALERTS ===== */
.alert {
    border: 2px solid;
    border-radius: 0;
    font-size: 12px;
}

.alert-info {
    background-color: rgba(91, 192, 222, 0.1);
    border-color: var(--pixel-info);
    color: var(--pixel-info);
}

.alert-success {
    background-color: rgba(92, 184, 92, 0.1);
    border-color: var(--pixel-success);
    color: var(--pixel-success);
}

.alert-danger {
    background-color: rgba(217, 83, 79, 0.1);
    border-color: var(--pixel-danger);
    color: var(--pixel-danger);
}

.alert-warning {
    background-color: rgba(240, 173, 78, 0.1);
    border-color: var(--pixel-warning);
    color: var(--pixel-warning);
}

/* ===== BADGES ===== */
.badge {
    font-family: var(--pixel-font);
    font-size: 6px;
    padding: 4px 8px;
    border-radius: 0;
}

/* ===== ICONS ===== */
.item-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.item-iconx {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.noresizex {
    width: auto;
}

/* ===== SECTIONS ===== */
section {
    scroll-margin-top: 60px;
}

section h5 {
    font-family: var(--pixel-font);
    font-size: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

/* ===== MODALS ===== */
.modal-content {
    border: 2px solid var(--pixel-border);
    border-radius: 0;
}

.modal-header {
    border-bottom: 2px solid var(--pixel-border);
}

.modal-footer {
    border-top: 2px solid var(--pixel-border);
}

.btn-close-white {
    filter: invert(1);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pixel-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--pixel-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pixel-border-light);
}

/* ===== ANIMATIONS ===== */
@keyframes pixel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pixel-pulse {
    animation: pixel-pulse 1s infinite;
}

@keyframes pixel-glow {
    0%, 100% { box-shadow: 0 0 5px var(--pixel-accent); }
    50% { box-shadow: 0 0 15px var(--pixel-accent); }
}

.pixel-glow {
    animation: pixel-glow 2s infinite;
}

/* ===== UTILITY CLASSES ===== */
.text-warning {
    color: var(--pixel-accent) !important;
}

.text-success {
    color: var(--pixel-success) !important;
}

.text-danger {
    color: var(--pixel-danger) !important;
}

.text-info {
    color: var(--pixel-info) !important;
}

.text-muted {
    color: var(--pixel-text-muted) !important;
}

.bg-black {
    background-color: #000 !important;
}

.bg-dark {
    background-color: var(--pixel-bg) !important;
}

.border-secondary {
    border-color: var(--pixel-border) !important;
}

.border-bottom {
    border-bottom: 2px solid var(--pixel-border) !important;
}

.border-top {
    border-top: 2px solid var(--pixel-border) !important;
}

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pixel-font {
        font-size: 8px;
    }
    
    .pixel-btn {
        font-size: 5px;
        padding: 6px 8px;
    }
    
    .nav-link {
        padding: 6px 8px;
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
}