/* Container Layout Spacing */
.journal-container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Hide the native tab radio inputs completely */
.tab-toggle {
    display: none !important;
}

/* Notepad strip graphic repeating down the vertical page height */
.journal-content-area {
    width: 100%;
    max-width: 880px; /* Keeps the notebook perfectly proportioned on large desktop displays */
    padding-left: 95px;  /* Clean clearance for the spiral wire graphic line */
    padding-right: 45px; /* Keeps paragraph text safely inside the right paper margin */
    padding-top: 20px;
    padding-bottom: 40px;
    background-image: url('/mother/spiral-cotton.png');
    background-repeat: repeat-y;
    background-position: left top;
    background-color: #ffffff; /* Seamless white paper background fill to prevent texture leakage */
    color: #212529; /* Dark elegant text color for crisp readability */
    border-radius: 4px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15); /* Gives the notebook an elegant drop-shadow lift */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Custom Sidebar Container Box */
.journal-sidebar-box {
    background-color: #22252a;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    overflow: hidden;
    padding-bottom: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.journal-sidebar-img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-tab-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0 0 0;
    margin: 0;
}

/* Transform HTML Labels into premium clickable sidebar menu buttons */
.sidebar-tab-btn {
    background: transparent;
    color: #cbd5e1;
    border: none;
    width: 100%;
    padding: 12px 15px;
    text-align: center;
    font-size: 1.05rem;
    font-family: sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: block;
    user-select: none;
}

.sidebar-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Hide all text panels by default */
.tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* ================================================================= */
/* PURE CSS TAB ACTIONS (RADIO TOGGLE HOOKS)                        */
/* ================================================================= */

/* Unhide the single active panel matching whichever radio button is checked */
#tab-psalm:checked ~ .row .panel-psalm,
#tab-torn:checked ~ .row .panel-torn,
#tab-no:checked ~ .row .panel-no,
#tab-letter:checked ~ .row .panel-letter,
#tab-feeling:checked ~ .row .panel-feeling,
#tab-lovenotes:checked ~ .row .panel-lovenotes,
#tab-visits:checked ~ .row .panel-visits {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Apply active highlight designs to the menu label button currently in use */
#tab-psalm:checked ~ .row .sidebar-tab-btn[for="tab-psalm"],
#tab-torn:checked ~ .row .sidebar-tab-btn[for="tab-torn"],
#tab-no:checked ~ .row .sidebar-tab-btn[for="tab-no"],
#tab-letter:checked ~ .row .sidebar-tab-btn[for="tab-letter"],
#tab-feeling:checked ~ .row .sidebar-tab-btn[for="tab-feeling"],
#tab-lovenotes:checked ~ .row .sidebar-tab-btn[for="tab-lovenotes"],
#tab-visits:checked ~ .row .sidebar-tab-btn[for="tab-visits"] {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: bold;
    border-left: 4px solid #f8f9fa;
}

/* ================================================================= */
/* MOBILE RESPONSIVE OPTIMIZATIONS                                  */
/* ================================================================= */
@media (max-width: 768px) {
    .journal-content-area {
        padding-left: 45px; /* Shaves down padding on mobile devices to optimize small-screen real estate */
        padding-right: 20px;
        background-position: -25px top; /* Softly shifts the wire binding over to allow more text room */
    }
}