/* ============================================================
   menu.css — Left Column Visuals
   Gesior2012 | Dark Fantasy Theme
   ------------------------------------------------------------
   SCOPE: login panel, menu sections, menu items, submenu,
          all button variants used in the left column.
   ============================================================ */

/* ── Shared panel base ── */
.login-panel,
.menu-section {
    background:linear-gradient(180deg,#141008,#0a0806);
    border:1px solid #2a2010;
    border-top:2px solid #3a3018;
    border-radius:2px;
    margin-bottom:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.45);
    width:100%;
}

/* Panel header bar */
.panel-header,
.section-title {
    background:linear-gradient(90deg,#1e1a0e,#141008);
    padding:7px 10px;
    font-family:'Cinzel',serif;
    font-size:8px; font-weight:600;
    letter-spacing:2.5px; text-transform:uppercase;
    color:#c9a349;
    border-bottom:1px solid #2a2010;
    display:flex; align-items:center; gap:5px;
}
.panel-header::before { content:"⊹"; font-size:11px; opacity:.6; }

/* Panel body */
.panel-body { padding:8px; }

/* Login panel inputs */
.login-panel input[type=text],
.login-panel input[type=password] {
    width:100%; background:#080604;
    border:1px solid #2a2010; border-radius:2px;
    padding:5px 8px; font-size:11px; color:#c8c0b0;
    margin-bottom:5px; outline:none; transition:border-color .2s;
}
.login-panel input:focus { border-color:#c9a349; }

/* Logged-in name/points display */
.login-info {
    display:flex; justify-content:space-between; align-items:center;
    padding:4px 2px 6px; margin-bottom:4px;
    border-bottom:1px solid #1e1c14;
}
.login-name  { font-family:'Cinzel',serif; font-size:11px; color:#c9a349; }
.login-points{ font-size:10px; color:#706050; }

/* ── Button base ── */
.menu-btn {
    display:block; width:100%;
    border-radius:2px; padding:7px 0;
    text-align:center;
    font-family:'Open Sans',sans-serif;
    font-size:10px; font-weight:600;
    letter-spacing:.8px; text-transform:uppercase;
    color:#fff; cursor:pointer;
    margin-bottom:4px; text-decoration:none;
    transition:all .2s; border:1px solid transparent;
}
.menu-btn:last-child  { margin-bottom:0; }
.menu-btn:hover       { text-decoration:none; color:#fff; }

.menu-btn-login  { background:linear-gradient(180deg,#7b3fc8,#5a2d96); border-color:#9b5fe8; }
.menu-btn-login:hover  { background:linear-gradient(180deg,#9b5fe8,#7b3fc8); box-shadow:0 0 12px rgba(123,63,200,.3); }

.menu-btn-create { background:linear-gradient(180deg,#1a8c4e,#0e6035); border-color:#2ab870; }
.menu-btn-create:hover { background:linear-gradient(180deg,#22a85e,#1a8c4e); box-shadow:0 0 10px rgba(42,184,112,.25); }

.menu-btn-danger { background:linear-gradient(180deg,#8c2020,#601410); border-color:#c03030; }
.menu-btn-danger:hover { background:linear-gradient(180deg,#c03030,#8c2020); box-shadow:0 0 10px rgba(192,48,48,.25); }

.menu-btn-gold   { background:linear-gradient(180deg,#1e1a0a,#141006); border-color:#3a3010; color:#c9a349; }
.menu-btn-gold:hover   { background:linear-gradient(180deg,#2a2410,#1e1a0a); border-color:#c9a349; color:#e8c870; box-shadow:0 0 10px rgba(201,163,73,.2); }

/* ── Menu items ── */
.menu-item {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; font-size:11px; color:#806850;
    border-bottom:1px solid rgba(255,255,255,.025);
    text-decoration:none; cursor:pointer;
    transition:background .15s, color .15s, padding-left .15s;
    position:relative;
}
.menu-item:last-child    { border-bottom:none; }
.menu-item:hover         { background:rgba(201,163,73,.07); color:#c9a349; padding-left:14px; text-decoration:none; }
.menu-item.active        { color:#c9a349; background:rgba(201,163,73,.06); border-left:2px solid #c9a349; padding-left:8px; }
.menu-item .item-icon    { font-size:11px; width:14px; text-align:center; flex-shrink:0; opacity:.6; }
.menu-item:hover .item-icon { opacity:1; }
.menu-item .item-label   { flex:1; }

/* ── Submenu (Gesior .SubmenuitemLabel system) ── */
.Submenu { position:relative; margin:0; background:transparent; width:100%; }
.SubmenuitemLabel {
    margin:0; padding:7px 10px 7px 18px;
    border-bottom:1px solid rgba(255,255,255,.025);
    font-family:'Open Sans',Arial,sans-serif;
    font-size:11px; color:#706050; cursor:pointer;
    transition:background .15s, color .15s, padding-left .15s;
}
.SubmenuitemLabel:hover   { background:rgba(201,163,73,.07); color:#c9a349; padding-left:22px; }
.Submenu a:link, .Submenu a:visited, .Submenu a:focus { color:#706050; text-decoration:none; }
.Submenu a:hover  { color:#c9a349; text-decoration:none; }
.Submenu a:active { color:#e8c870; text-decoration:none; }
.ActiveSubmenuItemIcon { position:absolute; top:5px; left:3px; width:10px; height:10px; background-repeat:no-repeat; visibility:hidden; }