/* Cybots - Modernized CSS (2026) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ====== Reset & Base ====== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #0a0a0f;
    color: #d0d0d0;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: #7aa2f7; transition: color 0.15s; }
a:visited { color: #9aa5ce; }
a:hover { color: #c0caf5; }

UL { list-style: disc; margin-left: 20px; padding-left: 0; }

input[type="text"], input[type="password"] {
    background: #1a1b26;
    border: 1px solid #33354a;
    color: #c0caf5;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #7aa2f7;
}

input[type="submit"], .bttn {
    background: linear-gradient(180deg, #2a2b3d 0%, #1a1b26 100%);
    border: 1px solid #555;
    color: #ddd;
    padding: 7px 14px;
    border-radius: 2px;
    font: bold 11px 'Space Grotesk', 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

input[type="submit"]::before, .bttn::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,255,255,0.07) 4px, rgba(255,255,255,0.07) 5px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(255,255,255,0.07) 4px, rgba(255,255,255,0.07) 5px);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8), transparent 80%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.8), transparent 80%);
    pointer-events: none;
}

input[type="submit"]:hover, .bttn:hover {
    background: linear-gradient(180deg, #3a3b5d 0%, #2a2b46 100%);
    border-color: #7aa2f7;
    color: #fff;
}

select {
    background: #1a1b26;
    border: 1px solid #33354a;
    color: #c0caf5;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

/* ====== Header / Top Nav ====== */

.headerBody {
    background: linear-gradient(180deg, #0f0f1a 0%, #0a0a0f 100%);
    color: #fff;
    border-bottom: 1px solid #1e1e2e;
}

/* ====== Navigation Buttons ====== */

.workshopButton, .outlandsButton, .mainButton, .wideButton, .wideButtonOver,
.workshopButtonOver, .outlandsButtonOver, .mainButtonOver, .mainAdminButton, .mainAdminButtonOver {
    display: inline-block;
    font: bold 10px 'Space Grotesk', 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 10px;
    margin-bottom: 4px;
    color: #ddd;
    border: 1px solid #555;
    background: linear-gradient(180deg, #2a2b3d 0%, #16161e 100%);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.workshopButton::before, .outlandsButton::before, .mainButton::before, .wideButton::before,
.workshopButtonOver::before, .outlandsButtonOver::before, .mainButtonOver::before, .wideButtonOver::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,255,255,0.07) 4px, rgba(255,255,255,0.07) 5px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(255,255,255,0.07) 4px, rgba(255,255,255,0.07) 5px);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8), transparent 80%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.8), transparent 80%);
    pointer-events: none;
}

.mainButtonOver, .outlandsButtonOver, .workshopButtonOver {
    color: #c0caf5;
    border-color: #545c7e;
    background: linear-gradient(180deg, #24253a 0%, #1a1b2e 100%);
}

.mainAdminButton { border-color: #545c7e; color: #bb9af7; }
.mainAdminButtonOver { border-color: #bb9af7; color: #fff; background: #1e2030; }

.workshopButton a, .outlandsButton a, .mainButton a, .wideButton a,
.workshopButtonOver a, .outlandsButtonOver a, .mainButtonOver a, .wideButtonOver a,
.mainAdminButton a, .mainAdminButtonOver a {
    color: inherit !important;
    text-decoration: none !important;
}

.workshopButton, .workshopButtonOver { padding: 4px 10px; }
.outlandsButton, .outlandsButtonOver { padding: 4px 10px; margin-right: 4px; margin-bottom: 6px; }
.wideButton, .wideButtonOver { padding: 4px 12px; }

/* ====== Layout Grid & Flow ====== */

.mainBody {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.statusBarFlow {
    display: block;
    top: auto;
    height: auto;
}

.contentFlowDiv {
    flex: 1;
}

.contentDiv {
    margin: 15px;
    padding: 0 8px;
}

/* Workshop header panel */
.workshopOuterDiv, .outlandsOuterDiv {
    width: 100%;
}

.workshopOuterDiv > div:nth-child(2) {
    display: grid;
    grid-template-columns: 128px 1fr auto;
    gap: 0;
    height: auto !important;
    min-height: 96px;
}

/* Squad bot cards grid */
.workshopOuterDiv ~ div[style*="border: 1px ridge"] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ====== Panels & Cards ====== */

div[style*="border: 1px ridge"], div[style*="border:1px ridge"] {
    border: 1px solid #2a2b3d !important;
    border-radius: 4px;
    background: #13131e;
}

div[style*="border-style: solid"][style*="border-color: #666"],
div[style*="border-width:1px; border-color: #666"] {
    border: 1px solid #2a2b3d !important;
    border-bottom: 1px solid #545c7e !important;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #1e1f2e 0%, #16161e 100%);
    padding: 6px 12px !important;
}

/* ====== Status Bar ====== */

.statusBoxItem {
    margin: 2px;
    margin-bottom: 4px;
    font-size: 11px;
    padding: 3px 6px;
    text-align: center;
    background: #1a1b26;
    color: #c0caf5;
    border: 1px solid #33354a;
    border-radius: 3px;
    width: 50px;
}

/* (layout rules are in the Grid & Flow section above) */

/* ====== Table Styling ====== */

table {
    border-collapse: collapse;
}

td {
    vertical-align: top;
}

tr[bgcolor="#111111"], tr[bgcolor="#000000"] {
    background: #13131e !important;
}

.tableOutline {
    border: 1px solid #33354a;
    border-radius: 3px;
}

/* ====== Typography ====== */

.estatname {
    color: #9aa5ce;
    font-size: 11px;
}

.estatname2 {
    color: #9aa5ce;
    font-size: 10px;
}

.estatdata {
    color: #9ece6a;
    font-size: 11px;
}

.fontTop {
    font-size: 9pt;
    line-height: 14pt;
    color: #e0af68;
}

.fontOut { }

.fontbinfo {
    font-size: 10pt;
    color: #9aa5ce;
}

.fontb {
    font-size: 6em;
    color: #c0caf5;
}

/* ====== Board / Forum ====== */

.boardbody {
    color: #9aa5ce;
    font-size: 11px;
    border: 1px solid #1e1e2e;
    padding: 4px;
}

/* ====== Outlands ====== */

.outlandsEventText {
    font-size: 12px;
    min-height: 80px;
    color: #b4b4b4;
    line-height: 1.6;
}

.script {
    color: #c0caf5;
    background: #1a1b26;
    font: normal 11px 'Fira Code', 'Consolas', 'Courier New', monospace;
    padding: 8px;
    border-radius: 3px;
    border: 1px solid #33354a;
}

/* ====== Squad Action Buttons ====== */

a.squadActionBtn, a.squadActionBtn:visited, span.squadActionBtn {
    display: inline-block;
    font: bold 11px 'Space Grotesk', 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f0c878 !important;
    border: 1px solid #f0c878;
    background: linear-gradient(180deg, #2a2b3d 0%, #0a0a0f 100%);
    padding: 8px 16px;
    border-radius: 2px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

a.squadActionBtn::before, span.squadActionBtn::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(240,200,120,0.08) 4px, rgba(240,200,120,0.08) 5px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(240,200,120,0.08) 4px, rgba(240,200,120,0.08) 5px);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8), transparent 80%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.8), transparent 80%);
    pointer-events: none;
}

a.squadActionBtn:hover {
    color: #fff !important;
    border-color: #fff;
    background: linear-gradient(180deg, #2a2b3d 0%, #1a1b26 100%);
    box-shadow: 0 0 6px rgba(224, 175, 104, 0.3);
}

a.squadActionBtn.deployBtn, a.squadActionBtn.deployBtn:visited {
    padding: 20px 30px;
    font-size: 13px;
    letter-spacing: 1px;
    background: linear-gradient(180deg, rgba(42,43,61,0.7), rgba(10,10,15,0.8)), url('/images/db/outland/vulcore/battle8.jpg') center/cover no-repeat;
}

a.squadActionBtn.deployBtn:hover {
    background: linear-gradient(180deg, rgba(42,43,61,0.5), rgba(10,10,15,0.6)), url('/images/db/outland/vulcore/battle8.jpg') center/cover no-repeat;
    box-shadow: 0 0 10px rgba(224, 175, 104, 0.4);
}

span.squadActionBtn.disabled {
    color: #555 !important;
    border-color: #333;
    padding: 20px 30px;
    font-size: 13px;
    letter-spacing: 1px;
    background: linear-gradient(180deg, rgba(20,20,30,0.9), rgba(10,10,15,0.95)), url('/images/db/outland/vulcore/battle8.jpg') center/cover no-repeat;
    cursor: default;
    pointer-events: none;
}

/* ====== Bot Images ====== */

.imgbot { width: 50px; height: 50px; }
.imgbotHalf { width: 25px; height: 25px; }

/* ====== News Image ====== */

.newsImage {
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #33354a;
    border-radius: 3px;
}

/* ====== Borders ====== */

.bright { border-right: 1px solid #1e1e2e; }
.bbottom { border-bottom: 1px solid #1e1e2e; }
.bfull { border: 1px solid #1e1e2e; }

/* ====== Layout ====== */

.bodyTop { background-color: #0a0a0f; color: #d0d0d0; margin: 0; }
.bodyBattlestatus { font-size: 1pt; }

.bodyGen {
    background-color: #0a0a0f;
    margin: 0;
}

/* ====== Progress bars (jQuery UI override) ====== */

.ui-progressbar {
    background: #1a1b26 !important;
    border: 1px solid #33354a !important;
    border-radius: 3px !important;
}

.ui-progressbar-value {
    background: linear-gradient(90deg, #7aa2f7, #7dcfff) !important;
    border-radius: 2px !important;
}

/* ====== Scrollbar ====== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #33354a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #545c7e; }

/* ====== Admin ====== */

.adminList { font-size: 12px; color: #9aa5ce; }
.adminListHighlight { font-size: 12px; color: #bb9af7; }

/* ====== Font tag overrides ====== */

font[color="#FFFFFF"] { color: #d0d0d0 !important; }
font[color="#AAAAAA"], font[color="#999999"] { color: #9aa5ce !important; }
font[color="#BBBBBB"] { color: #b4b4b4 !important; }
font[color="#77FF77"] { color: #9ece6a !important; }
font[color="#88FF88"] { color: #9ece6a !important; }
font[color="#6699FF"] { color: #7aa2f7 !important; }
font[color="#FFCC66"], font[color="#FFCC00"] { color: #e0af68 !important; }
font[color="#FF0000"], font[color="#ff8888"] { color: #f7768e !important; }
font[color="#8888FF"], font[color="#AAAAFF"] { color: #7aa2f7 !important; }
font[color="#C0C0C0"] { color: #9aa5ce !important; }
font[color="#1561AE"] { color: #545c7e !important; }