/* Reset body & html to allow full-height layout without overflow issues */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;  /* Prevent horizontal scroll from fixed sidebar */
}

/* Use flexbox on body to create the two-column structure */
body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: #f5f5f5;  /* subtle background for empty spaces */
}

/* ASIDE: fixed width 280px, stays on left, takes full height */
aside {
    width: 280px;            /* exactly 280px as requested */
    flex-shrink: 0;          /* prevents shrinking in flex layout */
    background-color: #fafafa;
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    height: 100vh;            /* full viewport height */
    position: sticky;         /* keeps it visible when scrolling main content */
    top: 0;
    overflow-y: auto;         /* allows scrolling inside aside if content overflows */
    padding: 16px 8px 20px 8px;
    box-sizing: border-box;
    z-index: 10;
}

/* mainPage: fills the rest of the screen, centers image properly */
#mainPage {
    flex: 1;                 /* takes all remaining space to the right of aside */
    min-width: 0;            /* flex children can shrink below content size — helps responsiveness */
    height: 100vh;
    display: flex;
    align-items: center;     /* vertical centering for the image container */
    justify-content: center; /* horizontal centering */
    background-color: #1e1e2f;  /* dark background makes image pop, optional but modern */
    overflow: hidden;
    position: relative;
}

/* inner div that holds the image — perfect centering and filling */
#mainPage .center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;   /* breathing space around image */
}

/* responsive image: preserves aspect ratio and fills available space gracefully */
#sessionImage {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;  /* keeps entire image visible without cropping */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    border-radius: 12px;
    transition: all 0.2s ease;
}

/* preserve original inline styles but override what's needed for flex layout */
/* keep existing classes from your CSS but avoid breaking the sidebar */
.sameLine {
    display: inline-block !important;
}

input.rpg_w30, select.rpg_w30 {
    width: 30px !important;
}

input.qs_w75, select.qs_w75 {
    width: 75px !important;
}

/* make the card inside aside look consistent and not overflow */
aside .card {
    margin-left: 0 !important;   /* override inline style margin-left:18px */
    width: 100% !important;       /* use full width of aside (280px) */
    max-width: 100%;
    box-sizing: border-box;
}

/* adjust the logo to fit nicely inside aside */
aside .center img {
    max-width: 100%;
    height: auto;
}

/* headings inside aside shouldn't overflow */
aside h3, aside h4 {
    word-break: break-word;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

aside h3 {
    font-size: 1.5rem;
}

aside h4 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #555;
}

/* Buttons and form spacing improved in sidebar */
aside .btn {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

/* alertBox inside the card should wrap nicely */
#alertBox {
    font-size: 0.9rem;
    padding: 8px;
    word-break: break-word;
}

/* Materialize overrides for cleaner gap */
.input-field {
    margin-top: 0;
    margin-bottom: 0;
}

/* make preloader (loaderDiv1) stay on top properly if used */
.wrapper-load.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* small responsive: for very narrow screens (tablets) the aside might shrink a bit? no, keep 280px but allow horizontal scroll? we force body flex wrap on very small? but typically > 600px is fine.
   if screen width < 600px, we could stack but brief said left side always 280px, so we keep it. */
@media (max-width: 600px) {
    body {
        flex-direction: column;
    }
    aside {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    #mainPage {
        height: 70vh;
    }
}

/* improve dice controls row wrapping inside card */
.card-content strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}