/**
 * EVE Injector Planner - Frontend CSS
 * Author: C4813
 */

/* ===================================================================
   CSS CUSTOM PROPERTIES
=================================================================== */
#eip-app {
    --eip-bg-deep:     #070a10;
    --eip-bg-panel:    #0a0c10;
    --eip-bg-header:   #0f1318;
    --eip-bg-hover:    #1a2030;
    --eip-bg-selected: #0e2218;
    --eip-border:      #1e2a3a;
    --eip-border-acc:  #2a3f5a;
    --eip-border-sel:  #40a060;
    --eip-teal:        #47b3d5;
    --eip-teal-dark:   #2a6a8a;
    --eip-green:       #40c060;
    --eip-green-dark:  #1a6a30;
    --eip-gold:        #c8a840;
    --eip-red:         #c84040;
    --eip-text-bright: #e8f0f8;
    --eip-text-dim:    #7a8898;
    --eip-text-teal:   #6ad8f8;
    --eip-text-green:  #80e0a0;
    --eip-radius:      3px;
    --eip-font:        'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
}

/* ===================================================================
   BASE RESET
=================================================================== */
#eip-app {
    all:         initial;
    display:     block !important;
    font-family: var(--eip-font) !important;
    font-size:   14px !important;
    color:       var(--eip-text-bright) !important;
    background:  var(--eip-bg-panel) !important;
    line-height: 1.4 !important;
    box-sizing:  border-box !important;
}

#eip-app *, #eip-app *::before, #eip-app *::after {
    box-sizing:  border-box !important;
    font-family: var(--eip-font) !important;
}

#eip-app a             { color: var(--eip-teal) !important; text-decoration: none !important; }
#eip-app a:hover       { color: var(--eip-text-teal) !important; }
#eip-app p, #eip-app div,
#eip-app span          { margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; }

/* ===================================================================
   NOTICES
=================================================================== */
#eip-app .eip-notice {
    padding:     10px 14px !important;
    border-left: 3px solid var(--eip-border-acc) !important;
    font-size:   13px !important;
    color:       var(--eip-text-dim) !important;
    background:  rgba(255,255,255,0.03) !important;
}
#eip-app .eip-notice-error { border-left-color: var(--eip-red) !important; color: #e08080 !important; background: rgba(200,64,64,0.08) !important; }
#eip-app .eip-notice-warn  { border-left-color: var(--eip-gold) !important; color: #e8c860 !important; }

/* ===================================================================
   BUTTONS
=================================================================== */
#eip-app button,
#eip-app .eip-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         8px 16px !important;
    border:          1px solid var(--eip-border-acc) !important;
    border-radius:   var(--eip-radius) !important;
    background:      linear-gradient(to bottom, #1e3050, #101e38) !important;
    color:           var(--eip-text-bright) !important;
    font-family:     var(--eip-font) !important;
    font-size:       12px !important;
    font-weight:     bold !important;
    cursor:          pointer !important;
    text-transform:  uppercase !important;
    letter-spacing:  0.05em !important;
    transition:      background 0.15s, border-color 0.15s !important;
    outline:         none !important;
    margin:          0 !important;
    line-height:     1 !important;
}
#eip-app button:hover,
#eip-app .eip-btn:hover    { background: linear-gradient(to bottom, #285080, #1a3860) !important; border-color: var(--eip-teal) !important; }
#eip-app button:disabled,
#eip-app .eip-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

#eip-app .eip-btn-sm { padding: 5px 10px !important; font-size: 11px !important; }

#eip-app .eip-btn-login {
    padding:    4px 8px !important;
    background: transparent !important;
    border:     none !important;
}
#eip-app .eip-btn-login img { height: 30px !important; width: auto !important; display: block !important; }
#eip-app .eip-btn-login-text::after { content: 'LOG IN with EVE Online' !important; font-size: 11px !important; font-weight: bold !important; color: var(--eip-text-bright) !important; letter-spacing: 0.05em !important; }

#eip-app .eip-btn-deselect-all { background: linear-gradient(to bottom, #1e2a3a, #111820) !important; }
#eip-app .eip-btn-logout { background: linear-gradient(to bottom, #3a1010, #200a0a) !important; border-color: #5a2020 !important; color: #e08080 !important; }
#eip-app .eip-btn-logout:hover { background: linear-gradient(to bottom, #5a1818, #301010) !important; border-color: var(--eip-red) !important; }

#eip-app .eip-btn-export-queue {
    background:   linear-gradient(to bottom, #1a5a1a, #0e3a0e) !important;
    border-color: #2a7a2a !important;
    color:        var(--eip-text-green) !important;
}
#eip-app .eip-btn-export-queue:hover:not(:disabled) { background: linear-gradient(to bottom, #267a26, #164a16) !important; border-color: #40a040 !important; }

#eip-app .eip-btn-export-books {
    background:   linear-gradient(to bottom, #1a3a5a, #0e2038) !important;
    border-color: #2a5a8a !important;
    color:        var(--eip-text-teal) !important;
}
#eip-app .eip-btn-export-books:hover:not(:disabled) { background: linear-gradient(to bottom, #265080, #163060) !important; border-color: var(--eip-teal) !important; }

/* ===================================================================
   LOGIN BAR
=================================================================== */
#eip-app .eip-login-bar {
    display:        flex !important;
    align-items:    center !important;
    gap:            12px !important;
    padding:        8px 16px !important;
    background:     var(--eip-bg-header) !important;
    border-bottom:  1px solid var(--eip-border) !important;
}
#eip-app .eip-login-hint { font-size: 12px !important; color: var(--eip-text-dim) !important; }

/* ===================================================================
   CHARACTER TABS
=================================================================== */
#eip-app .eip-char-tabs {
    display:        flex !important;
    gap:            2px !important;
    padding:        8px 16px 0 !important;
    background:     var(--eip-bg-header) !important;
    border-bottom:  1px solid var(--eip-border) !important;
    flex-wrap:      wrap !important;
}

#eip-app .eip-tab {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            6px !important;
    padding:        6px 12px !important;
    background:     rgba(255,255,255,0.03) !important;
    border:         1px solid var(--eip-border) !important;
    border-bottom:  none !important;
    border-radius:  var(--eip-radius) var(--eip-radius) 0 0 !important;
    color:          var(--eip-text-dim) !important;
    font-size:      12px !important;
    font-weight:    normal !important;
    cursor:         pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition:     background 0.1s !important;
}
#eip-app .eip-tab:hover { background: rgba(255,255,255,0.06) !important; color: var(--eip-text-bright) !important; }
#eip-app .eip-tab.eip-tab-active {
    background:  var(--eip-bg-panel) !important;
    border-color: var(--eip-border-acc) !important;
    color:        var(--eip-text-bright) !important;
    font-weight:  bold !important;
}
#eip-app .eip-tab-portrait { width: 20px !important; height: 20px !important; border-radius: 2px !important; }
#eip-app .eip-tab-name     { max-width: 140px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#eip-app .eip-tab-count {
    background:    var(--eip-green-dark) !important;
    color:         var(--eip-text-green) !important;
    font-size:     10px !important;
    padding:       1px 5px !important;
    border-radius: 10px !important;
    font-weight:   bold !important;
}

/* ===================================================================
   CHARACTER PANEL
=================================================================== */
#eip-app .eip-char-panel  { margin: 0 !important; padding: 0 !important; }

#eip-app .eip-char-header {
    display:        flex !important;
    align-items:    center !important;
    gap:            12px !important;
    padding:        12px 16px !important;
    background:     var(--eip-bg-header) !important;
    border-bottom:  1px solid var(--eip-border) !important;
}
#eip-app .eip-char-portrait { width: 64px !important; height: 64px !important; border-radius: var(--eip-radius) !important; border: 1px solid var(--eip-border-acc) !important; flex-shrink: 0 !important; }
#eip-app .eip-char-portrait-zero {
    width:           64px !important;
    height:          64px !important;
    border-radius:   var(--eip-radius) !important;
    border:          1px solid var(--eip-border-acc) !important;
    background:      #1a2a3a !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       12px !important;
    font-weight:     bold !important;
    color:           var(--eip-text-dim) !important;
    flex-shrink:     0 !important;
}
#eip-app .eip-char-info   { flex: 1 !important; min-width: 0 !important; }
#eip-app .eip-char-name   { font-size: 16px !important; font-weight: bold !important; color: var(--eip-text-bright) !important; margin: 0 0 3px 0 !important; }
#eip-app .eip-char-stats  { display: flex !important; gap: 12px !important; font-size: 12px !important; color: var(--eip-text-dim) !important; flex-wrap: wrap !important; }
#eip-app .eip-char-sel-count { color: var(--eip-text-green) !important; }
#eip-app .eip-char-actions { display: flex !important; gap: 8px !important; flex-shrink: 0 !important; }

/* Character totals */
#eip-app .eip-char-totals {
    display:        flex !important;
    gap:            20px !important;
    padding:        6px 16px !important;
    background:     rgba(0,0,0,0.2) !important;
    border-bottom:  1px solid var(--eip-border) !important;
    flex-wrap:      wrap !important;
}
#eip-app .eip-char-total-item  { display: flex !important; align-items: baseline !important; gap: 6px !important; }
#eip-app .eip-char-total-label { font-size: 10px !important; color: var(--eip-text-dim) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
#eip-app .eip-char-total-val   { font-size: 14px !important; font-weight: bold !important; color: var(--eip-text-green) !important; }

/* ===================================================================
   SKILL CATEGORIES
=================================================================== */
#eip-app .eip-skill-categories { padding: 0 !important; }
#eip-app .eip-category          { border-bottom: 1px solid var(--eip-border) !important; }
#eip-app .eip-category:last-child { border-bottom: none !important; }

#eip-app .eip-category-header {
    display:        flex !important;
    align-items:    center !important;
    gap:            8px !important;
    padding:        8px 16px !important;
    cursor:         pointer !important;
    background:     rgba(15,19,24,0.8) !important;
    user-select:    none !important;
    transition:     background 0.1s !important;
}
#eip-app .eip-category-header:hover { background: rgba(26,32,48,0.9) !important; }
#eip-app .eip-category-header::before {
    content:     '▶' !important;
    font-size:   10px !important;
    color:       var(--eip-text-dim) !important;
    transition:  transform 0.15s !important;
    flex-shrink: 0 !important;
    display:     inline-block !important;
}
#eip-app .eip-category-header.eip-category-open::before { transform: rotate(90deg) !important; }
#eip-app .eip-category-name  { font-size: 12px !important; font-weight: bold !important; color: var(--eip-text-bright) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; flex: 1 !important; }
#eip-app .eip-category-count { font-size: 11px !important; color: var(--eip-text-dim) !important; }
#eip-app .eip-category-sel   { font-size: 11px !important; color: var(--eip-text-green) !important; font-weight: bold !important; }

/* ===================================================================
   SKILL ROWS
=================================================================== */
#eip-app .eip-skill-row {
    display:        flex !important;
    border-bottom:  1px solid rgba(30,42,58,0.5) !important;
    padding:        8px 16px !important;
    background:     var(--eip-bg-panel) !important;
    transition:     background 0.1s !important;
}
#eip-app .eip-skill-row:last-child  { border-bottom: none !important; }
#eip-app .eip-skill-row:hover       { background: var(--eip-bg-hover) !important; }

#eip-app .eip-skill-row.eip-skill-selected {
    background:   var(--eip-bg-selected) !important;
    border-left:  3px solid var(--eip-border-sel) !important;
    padding-left: 13px !important;
}
#eip-app .eip-skill-row.eip-skill-maxed  { opacity: 0.4 !important; }
#eip-app .eip-skill-row.eip-skill-locked { opacity: 0.55 !important; }

#eip-app .eip-skill-main  { display: flex !important; align-items: flex-start !important; gap: 12px !important; width: 100% !important; }
#eip-app .eip-skill-info  { flex: 1 !important; min-width: 0 !important; }
#eip-app .eip-skill-controls { flex-shrink: 0 !important; display: flex !important; align-items: center !important; }

#eip-app .eip-skill-name { font-size: 13px !important; color: var(--eip-text-bright) !important; margin: 0 0 4px 0 !important; }
#eip-app .eip-skill-row.eip-skill-selected .eip-skill-name { color: var(--eip-text-green) !important; }

#eip-app .eip-skill-meta { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 4px 0 !important; flex-wrap: wrap !important; }
#eip-app .eip-skill-sp, #eip-app .eip-skill-rank { font-size: 11px !important; color: var(--eip-text-dim) !important; }

#eip-app .eip-prereq-missing { font-size: 10px !important; color: #c87060 !important; margin-top: 2px !important; font-style: italic !important; }
#eip-app .eip-inject-cost    { font-size: 11px !important; color: var(--eip-text-green) !important; margin-top: 3px !important; }
#eip-app .eip-inject-free    { color: var(--eip-text-dim) !important; }

/* ===================================================================
   LEVEL DOTS
=================================================================== */
#eip-app .eip-level-dot                { display: inline-block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--eip-border-acc) !important; margin-right: 2px !important; }
#eip-app .eip-level-dot-trained        { background: var(--eip-teal) !important; }
#eip-app .eip-level-dot-target         { background: var(--eip-green) !important; }
#eip-app .eip-level-dot-partial        { background: linear-gradient(to right, var(--eip-teal) 50%, var(--eip-border-acc) 50%) !important; }
#eip-app .eip-level-dot-partial-selected { background: linear-gradient(to right, var(--eip-teal) 50%, var(--eip-green) 50%) !important; }

/* ===================================================================
   SP BAR
=================================================================== */
#eip-app .eip-sp-bar-wrap { margin-top: 4px !important; }
#eip-app .eip-sp-bar {
    position:      relative !important;
    height:        3px !important;
    background:    var(--eip-border) !important;
    border-radius: 2px !important;
    overflow:      visible !important;
}
#eip-app .eip-sp-fill {
    height:        100% !important;
    background:    linear-gradient(to right, var(--eip-green-dark), var(--eip-green)) !important;
    border-radius: 2px !important;
    max-width:     100% !important;
}
#eip-app .eip-sp-marker {
    position:   absolute !important;
    top:        -2px !important;
    width:      1px !important;
    height:     7px !important;
    background: rgba(255,255,255,0.2) !important;
    transform:  translateX(-50%) !important;
}
#eip-app .eip-sp-target-marker {
    position:      absolute !important;
    top:           -3px !important;
    width:         2px !important;
    height:        9px !important;
    background:    var(--eip-green) !important;
    transform:     translateX(-50%) !important;
    border-radius: 1px !important;
    box-shadow:    0 0 4px rgba(64,192,96,0.6) !important;
}

/* ===================================================================
   LEVEL SELECTOR BUTTONS
=================================================================== */
#eip-app .eip-level-selector {
    display:     flex !important;
    align-items: center !important;
    gap:         3px !important;
    flex-wrap:   nowrap !important;
}
#eip-app .eip-lvl-label { font-size: 10px !important; color: var(--eip-text-dim) !important; white-space: nowrap !important; margin-right: 2px !important; }

#eip-app .eip-lvl-btn {
    min-width:     28px !important;
    height:        26px !important;
    border-radius: var(--eip-radius) !important;
    font-size:     11px !important;
    font-weight:   bold !important;
    display:       inline-flex !important;
    align-items:   center !important;
    justify-content: center !important;
    padding:       0 5px !important;
    transition:    background 0.1s, border-color 0.1s !important;
    background:    linear-gradient(to bottom, #1e3050, #101e38) !important;
    border:        1px solid var(--eip-border-acc) !important;
    color:         var(--eip-text-dim) !important;
    cursor:        pointer !important;
}
#eip-app .eip-lvl-btn:hover { background: linear-gradient(to bottom, #285080, #1a3860) !important; border-color: var(--eip-green) !important; color: var(--eip-text-green) !important; }

#eip-app .eip-lvl-btn.eip-lvl-active {
    background:   linear-gradient(to bottom, var(--eip-green-dark), #1a5030) !important;
    border-color: var(--eip-green) !important;
    color:        var(--eip-text-bright) !important;
    box-shadow:   0 0 6px rgba(64,192,96,0.3) !important;
}

#eip-app .eip-lvl-btn.eip-lvl-trained {
    background:  var(--eip-bg-panel) !important;
    border:      1px solid var(--eip-border) !important;
    color:       rgba(64,192,96,0.4) !important;
    cursor:      default !important;
}

#eip-app .eip-lvl-btn.eip-lvl-clear {
    background:   linear-gradient(to bottom, #3a1010, #200a0a) !important;
    border-color: #5a2020 !important;
    color:        #e08080 !important;
}
#eip-app .eip-lvl-btn.eip-lvl-clear:hover { background: linear-gradient(to bottom, #5a1818, #301010) !important; border-color: var(--eip-red) !important; }

#eip-app .eip-maxed-label { font-size: 11px !important; color: var(--eip-text-green) !important; font-weight: bold !important; opacity: 0.6 !important; }

/* ===================================================================
   FOOTER — sticky
=================================================================== */
#eip-app .eip-footer {
    position:   sticky !important;
    bottom:     0 !important;
    background: linear-gradient(to bottom, #0a0e14, #070a10) !important;
    border-top: 2px solid var(--eip-green-dark) !important;
    z-index:    100 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.8) !important;
    padding:    0 !important;
    margin:     0 !important;
}

#eip-app .eip-footer-stats {
    display:     flex !important;
    align-items: center !important;
    gap:         24px !important;
    padding:     10px 24px !important;
    flex-wrap:   wrap !important;
}
#eip-app .eip-stat-item  { display: flex !important; flex-direction: column !important; gap: 2px !important; }
#eip-app .eip-stat-label { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--eip-text-dim) !important; }
#eip-app .eip-stat-value { font-size: 20px !important; font-weight: bold !important; color: var(--eip-text-green) !important; line-height: 1.2 !important; }

#eip-app .eip-footer-actions {
    display:     flex !important;
    gap:         8px !important;
    padding:     0 24px 10px !important;
    flex-wrap:   wrap !important;
}

#eip-app .eip-footer-warnings {
    padding: 0 !important;
}

#eip-app .eip-warn-block {
    display:         flex !important;
    align-items:     flex-start !important;
    gap:             8px !important;
    padding:         6px 24px !important;
    border-top:      1px solid rgba(200,168,64,0.15) !important;
    background:      rgba(180,140,20,0.06) !important;
    font-size:       12px !important;
    color:           #c8a840 !important;
    font-family:     var(--eip-font) !important;
    line-height:     1.5 !important;
    word-wrap:       break-word !important;
}
#eip-app .eip-warn-icon { flex-shrink: 0 !important; font-size: 14px !important; }
#eip-app .eip-warn-text { flex: 1 !important; color: #c8a840 !important; }
#eip-app .eip-warn-text strong { color: #f0d060 !important; }

/* ===================================================================
   CONTENT AREA
=================================================================== */
#eip-app .eip-content { display: block !important; }

/* ===================================================================
   SCROLLBAR
=================================================================== */
#eip-app ::-webkit-scrollbar       { width: 6px !important; height: 6px !important; }
#eip-app ::-webkit-scrollbar-track { background: var(--eip-bg-deep) !important; }
#eip-app ::-webkit-scrollbar-thumb { background: var(--eip-border) !important; border-radius: 3px !important; }
#eip-app ::-webkit-scrollbar-thumb:hover { background: var(--eip-border-acc) !important; }

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 600px) {
    #eip-app .eip-char-header  { flex-wrap: wrap !important; }
    #eip-app .eip-char-actions { width: 100% !important; justify-content: flex-end !important; }
    #eip-app .eip-footer-stats { gap: 12px !important; padding: 8px 16px !important; }
    #eip-app .eip-footer-actions { padding: 0 16px 8px !important; }
}