/**
 * EVE Extractor Simulation - Frontend CSS
 * Author: C4813
 */

/* ===================================================================
   CSS CUSTOM PROPERTIES
=================================================================== */
#ees-app {
    --ees-bg-deep:     #070a10;
    --ees-bg-panel:    #0a0c10;
    --ees-bg-header:   #0f1318;
    --ees-bg-hover:    #1a2030;
    --ees-bg-selected: #112233;
    --ees-bg-blocked:  #1a1010;
    --ees-border:      #1e2a3a;
    --ees-border-acc:  #2a3f5a;
    --ees-border-sel:  #4a90c8;
    --ees-gold:        #c8a840;
    --ees-gold-dark:   #956e10;
    --ees-teal:        #47b3d5;
    --ees-teal-dark:   #2a6a8a;
    --ees-red:         #c84040;
    --ees-text-bright: #e8f0f8;
    --ees-text-dim:    #7a8898;
    --ees-text-teal:   #6ad8f8;
    --ees-text-gold:   #e8c860;
    --ees-radius:      3px;
    --ees-font:        'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
}

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

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

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

/* ===================================================================
   NOTICES
=================================================================== */
#ees-app .ees-notice {
    padding:     10px 14px !important;
    border-left: 3px solid var(--ees-border-acc) !important;
    font-size:   13px !important;
    line-height: 1.5 !important;
    background:  rgba(255,255,255,0.03) !important;
    color:       var(--ees-text-dim) !important;
    margin:      0 !important;
}

#ees-app .ees-notice-error {
    border-left-color: var(--ees-red) !important;
    color:             #e08080 !important;
    background:        rgba(200,64,64,0.08) !important;
}

#ees-app .ees-notice-warn {
    border-left-color: var(--ees-gold) !important;
    color:             var(--ees-text-gold) !important;
}

/* ===================================================================
   BUTTONS
=================================================================== */
#ees-app button,
#ees-app .ees-btn {
    display:       inline-flex !important;
    align-items:   center !important;
    justify-content: center !important;
    padding:       8px 16px !important;
    border:        1px solid var(--ees-border-acc) !important;
    border-radius: var(--ees-radius) !important;
    background:    linear-gradient(to bottom, #1e3050, #101e38) !important;
    color:         var(--ees-text-bright) !important;
    font-family:   var(--ees-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;
    box-shadow:    none !important;
    outline:       none !important;
    margin:        0 !important;
    text-decoration: none !important;
    line-height:   1 !important;
}

#ees-app button:hover,
#ees-app .ees-btn:hover {
    background:   linear-gradient(to bottom, #285080, #1a3860) !important;
    border-color: var(--ees-teal) !important;
}

#ees-app button:disabled,
#ees-app .ees-btn:disabled {
    opacity: 0.4 !important;
    cursor:  not-allowed !important;
}

#ees-app .ees-btn-login {
    padding:    4px 8px !important;
    background: transparent !important;
    border:     none !important;
}

#ees-app .ees-btn-login img {
    height:     30px !important;
    width:      auto !important;
    display:    block !important;
}

#ees-app .ees-btn-login-text::after {
    content:     'LOG IN with EVE Online' !important;
    font-size:   11px !important;
    font-weight: bold !important;
    color:       var(--ees-text-bright) !important;
    letter-spacing: 0.05em !important;
}

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

#ees-app .ees-btn-deselect-all {
    background: linear-gradient(to bottom, #1e2a3a, #111820) !important;
}

#ees-app .ees-btn-logout {
    background:   linear-gradient(to bottom, #3a1010, #200a0a) !important;
    border-color: #5a2020 !important;
    color:        #e08080 !important;
}

#ees-app .ees-btn-logout:hover {
    background:   linear-gradient(to bottom, #5a1818, #301010) !important;
    border-color: var(--ees-red) !important;
}

#ees-app .ees-btn-copy {
    padding:      10px 20px !important;
    background:   linear-gradient(to bottom, #1a5a1a, #0e3a0e) !important;
    border-color: #2a7a2a !important;
    color:        #80e080 !important;
    font-size:    13px !important;
    white-space:  nowrap !important;
}

#ees-app .ees-btn-copy:hover:not(:disabled) {
    background:   linear-gradient(to bottom, #267a26, #164a16) !important;
    border-color: #40a040 !important;
}

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

#ees-app .ees-login-hint {
    font-size: 12px !important;
    color:     var(--ees-text-dim) !important;
}

/* ===================================================================
   CHARACTER PANEL
=================================================================== */
#ees-app .ees-char-panel {
    border-bottom: 1px solid var(--ees-border) !important;
    margin:        0 !important;
    padding:       0 !important;
}

#ees-app .ees-char-header {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    padding:     12px 16px !important;
    background:  var(--ees-bg-header) !important;
    border-bottom: 1px solid var(--ees-border) !important;
}

#ees-app .ees-char-portrait {
    flex-shrink: 0 !important;
}

#ees-app .ees-char-portrait img {
    display:       block !important;
    border-radius: var(--ees-radius) !important;
    border:        1px solid var(--ees-border-acc) !important;
}

#ees-app .ees-char-info {
    flex:     1 !important;
    min-width: 0 !important;
}

#ees-app .ees-char-name {
    font-size:   16px !important;
    font-weight: bold !important;
    color:       var(--ees-text-bright) !important;
    margin:      0 0 3px 0 !important;
    line-height: 1.2 !important;
}

#ees-app .ees-char-stats {
    display:   flex !important;
    gap:       12px !important;
    font-size: 12px !important;
    color:     var(--ees-text-dim) !important;
    flex-wrap: wrap !important;
}

#ees-app .ees-char-sel-count {
    color: var(--ees-text-teal) !important;
}

#ees-app .ees-char-actions {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
    flex-shrink: 0 !important;
}

/* ===================================================================
   CHARACTER TOTALS BAR
=================================================================== */
#ees-app .ees-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(--ees-border) !important;
    flex-wrap:     wrap !important;
}

#ees-app .ees-char-total-item {
    display:     flex !important;
    align-items: baseline !important;
    gap:         6px !important;
}

#ees-app .ees-char-total-label {
    font-size:  10px !important;
    color:      var(--ees-text-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

#ees-app .ees-char-total-val {
    font-size:   14px !important;
    font-weight: bold !important;
    color:       var(--ees-text-teal) !important;
}

/* ===================================================================
   SKILL CATEGORIES
=================================================================== */
#ees-app .ees-skill-categories {
    padding: 0 !important;
    margin:  0 !important;
}

#ees-app .ees-category {
    border-bottom: 1px solid var(--ees-border) !important;
}

#ees-app .ees-category:last-child {
    border-bottom: none !important;
}

#ees-app .ees-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;
}

#ees-app .ees-category-header:hover {
    background: rgba(26,32,48,0.9) !important;
}

#ees-app .ees-category-header::before {
    content:     '▶' !important;
    font-size:   10px !important;
    color:       var(--ees-text-dim) !important;
    transition:  transform 0.15s !important;
    flex-shrink: 0 !important;
    display:     inline-block !important;
    background:  none !important;
}

#ees-app .ees-category-header.ees-category-open::before {
    transform: rotate(90deg) !important;
}

#ees-app .ees-category-name {
    font-size:      12px !important;
    font-weight:    bold !important;
    color:          var(--ees-text-bright) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    flex:           1 !important;
}

#ees-app .ees-category-count {
    font-size: 11px !important;
    color:     var(--ees-text-dim) !important;
}

#ees-app .ees-category-sel {
    font-size:    11px !important;
    color:        var(--ees-text-teal) !important;
    font-weight:  bold !important;
}

/* ===================================================================
   SKILL ROWS
=================================================================== */
#ees-app .ees-skill-row {
    display:       flex !important;
    align-items:   stretch !important;
    border-bottom: 1px solid rgba(30, 42, 58, 0.5) !important;
    padding:       8px 16px !important;
    background:    var(--ees-bg-panel) !important;
    transition:    background 0.1s !important;
    margin:        0 !important;
    min-height:    0 !important;
}

#ees-app .ees-skill-row:last-child {
    border-bottom: none !important;
}

#ees-app .ees-skill-row:hover {
    background: var(--ees-bg-hover) !important;
}

#ees-app .ees-skill-row.ees-skill-selected {
    background:   var(--ees-bg-selected) !important;
    border-left:  3px solid var(--ees-border-sel) !important;
    padding-left: 13px !important;
}

#ees-app .ees-skill-row.ees-skill-selected:hover {
    background: #162840 !important;
}

#ees-app .ees-skill-row.ees-skill-blocked {
    opacity: 0.5 !important;
}

#ees-app .ees-skill-row.ees-skill-blocked:hover {
    opacity:    0.65 !important;
    background: var(--ees-bg-blocked) !important;
}

#ees-app .ees-skill-row.ees-skill-selected .ees-skill-name {
    color: var(--ees-text-teal) !important;
}

/* ===================================================================
   SKILL ROW LAYOUT
=================================================================== */
#ees-app .ees-skill-main {
    display:     flex !important;
    align-items: flex-start !important;
    gap:         12px !important;
    width:       100% !important;
}

#ees-app .ees-skill-info {
    flex:      1 !important;
    min-width: 0 !important;
}

#ees-app .ees-skill-controls {
    flex-shrink: 0 !important;
    display:     flex !important;
    align-items: center !important;
}

#ees-app .ees-skill-name {
    font-size:   13px !important;
    color:       var(--ees-text-bright) !important;
    margin:      0 0 4px 0 !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

#ees-app .ees-skill-meta {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    margin:      0 0 4px 0 !important;
    flex-wrap:   wrap !important;
}

#ees-app .ees-skill-sp,
#ees-app .ees-skill-rank {
    font-size: 11px !important;
    color:     var(--ees-text-dim) !important;
}

#ees-app .ees-blocked-by {
    font-size:  10px !important;
    color:      #c87060 !important;
    margin-top: 3px !important;
    font-style: italic !important;
}

/* ===================================================================
   LEVEL DOTS (trained level indicator)
=================================================================== */
#ees-app .ees-level-dot {
    display:       inline-block !important;
    width:         10px !important;
    height:        10px !important;
    border-radius: 50% !important;
    background:    var(--ees-border-acc) !important;
    margin-right:  2px !important;
}

#ees-app .ees-level-dot-filled {
    background: var(--ees-teal) !important;
}

/* ===================================================================
   SP BAR
=================================================================== */
#ees-app .ees-sp-bar-wrap {
    margin-top: 4px !important;
}

#ees-app .ees-sp-bar {
    position:      relative !important;
    height:        3px !important;
    background:    var(--ees-border) !important;
    border-radius: 2px !important;
    overflow:      visible !important;
}

#ees-app .ees-sp-fill {
    height:        100% !important;
    background:    linear-gradient(to right, var(--ees-teal-dark), var(--ees-teal)) !important;
    border-radius: 2px !important;
    min-width:     0 !important;
    max-width:     100% !important;
}

#ees-app .ees-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;
}

/* ===================================================================
   LEVEL PIP CONTROLS
=================================================================== */
#ees-app .ees-level-controls {
    display:     flex !important;
    align-items: center !important;
    gap:         3px !important;
    flex-wrap:   nowrap !important;
}

#ees-app .ees-lvl-label {
    font-size:    10px !important;
    color:        var(--ees-text-dim) !important;
    white-space:  nowrap !important;
    margin-right: 2px !important;
}

#ees-app .ees-lvl-pip-btn,
#ees-app .ees-lvl-pip {
    width:         auto !important;
    min-width:     28px !important;
    height:        26px !important;
    border-radius: var(--ees-radius) !important;
    font-size:     11px !important;
    font-weight:   bold !important;
    font-family:   var(--ees-font) !important;
    line-height:   1 !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, color 0.1s !important;
}

#ees-app button.ees-lvl-pip-btn {
    background:  linear-gradient(to bottom, #1e3050, #101e38) !important;
    border:      1px solid var(--ees-border-acc) !important;
    color:       var(--ees-text-dim) !important;
    cursor:      pointer !important;
}

#ees-app button.ees-lvl-pip-btn:hover {
    background:   linear-gradient(to bottom, #285080, #1a3860) !important;
    border-color: var(--ees-teal) !important;
    color:        var(--ees-text-teal) !important;
}

#ees-app button.ees-lvl-pip-btn.ees-lvl-pip-active {
    background:   linear-gradient(to bottom, var(--ees-teal-dark), #1a5070) !important;
    border-color: var(--ees-teal) !important;
    color:        var(--ees-text-bright) !important;
    box-shadow:   0 0 6px rgba(71,179,213,0.3) !important;
}

#ees-app button.ees-lvl-pip-btn.ees-lvl-pip-active:hover {
    background: linear-gradient(to bottom, #3a9090, #1a6080) !important;
}

#ees-app span.ees-lvl-pip {
    background: var(--ees-bg-panel) !important;
    border:     1px solid var(--ees-border) !important;
    color:      rgba(122, 136, 152, 0.3) !important;
    cursor:     not-allowed !important;
}

#ees-app .ees-skill-lock-wrap {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           32px !important;
}

#ees-app .ees-skill-lock {
    font-size:  18px !important;
    color:      rgba(200, 64, 64, 0.35) !important;
    cursor:     help !important;
}

#ees-app .ees-lvl-sp {
    font-size:   10px !important;
    color:       var(--ees-text-teal) !important;
    white-space: nowrap !important;
    margin-left: 4px !important;
}

/* ===================================================================
   GLOBAL TOTALS BAR
=================================================================== */
#ees-app .ees-totals-bar {
    position:   sticky !important;
    bottom:     0 !important;
    background: linear-gradient(to bottom, #0a0e14, #070a10) !important;
    border-top: 2px solid var(--ees-teal-dark) !important;
    z-index:    100 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8) !important;
    margin:     0 !important;
    padding:    0 !important;
}

#ees-app .ees-totals-inner {
    display:     flex !important;
    align-items: center !important;
    gap:         24px !important;
    padding:     12px 24px 12px 46px !important;
    flex-wrap:   wrap !important;
}

#ees-app .ees-total-item {
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
}

#ees-app .ees-total-label {
    font-size:      10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color:          var(--ees-text-dim) !important;
}

#ees-app .ees-total-value {
    font-size:   20px !important;
    font-weight: bold !important;
    color:       var(--ees-text-teal) !important;
    line-height: 1.2 !important;
}

#ees-app .ees-totals-inner button.ees-btn-copy {
    margin-left: auto !important;
}

/* ===================================================================
   REMAINDER WARNING — styled via JS inline, these are fallbacks
=================================================================== */
.ees-remainder-warning {
    display: none;
    width:   100%;
}

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

/* ===================================================================
   NO CHARS MESSAGE
=================================================================== */
#ees-app .ees-no-chars {
    padding:   40px 20px !important;
    text-align: center !important;
    color:     var(--ees-text-dim) !important;
    font-size: 13px !important;
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 600px) {
    #ees-app .ees-char-header   { flex-wrap: wrap !important; }
    #ees-app .ees-char-actions  { width: 100% !important; justify-content: flex-end !important; }
    #ees-app .ees-skill-row     { padding-left: 14px !important; }
    #ees-app .ees-skill-row.ees-skill-selected { padding-left: 11px !important; }
    #ees-app .ees-totals-inner  { gap: 12px !important; padding: 10px 16px !important; }
}

/* Import button */
#ees-app .ees-btn-import {
    background:   linear-gradient(to bottom, #1a3a5a, #0e2038) !important;
    border-color: #2a5a8a !important;
    color:        #80c0e0 !important;
}

#ees-app .ees-btn-import:hover {
    background:   linear-gradient(to bottom, #265080, #163060) !important;
    border-color: #47b3d5 !important;
}