/* =========================================
   1. DASHBOARD & CARDS (Restoration Force)
   ========================================= */

.dlms-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 30px !important;
    text-align: left !important;
}

.dlms-card {
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #F4F1E8 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Fix the 'Rooted' Tree Image Visibility */
.dlms-card-image {
    height: 200px !important; 
    width: 100% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #F4F1E8 !important;
}

/* DASHBOARD BUTTON FIX: Stop it from stretching to 100% */
.dlms-card .dlms-auth-btn, 
.dlms-card .et_pb_button {
    width: fit-content !important; /* Forces it to fit text, not container */
    min-width: 160px !important;
    margin: 15px auto !important; /* Centers it in the card body */
    align-self: center !important;
    padding: 12px 25px !important;
}

/* =========================================
   2. LESSON RESPONSE QUESTIONS (Isolated)
   ========================================= */

/* This targets the input boxes in your lessons to ensure they don't 
   borrow the '50px' fixed height from the login screen */
.dlms-lesson-content .dlms-input,
.dlms-question-box textarea {
    width: 100% !important;
    height: auto !important; /* Let content/padding define height */
    min-height: 100px !important; /* For textareas */
    background: #FFFFFF !important;
    border: 2px solid #C9A961 !important;
    padding: 15px !important;
    text-align: left !important;
    display: block !important;
}

/* =========================================
   3. LOGIN GATE (Auth Page Isolation)
   ========================================= */

/* We use .dlms-auth-page to ensure these TALL 100% width buttons 
   ONLY happen on the login screen, not the dashboard */
.dlms-auth-page .dlms-auth-btn {
    width: 100% !important;
    display: block !important;
    height: 52px !important;
    margin-top: 10px !important;
}

/* =========================================
   DASHBOARD CARD FINAL RESTORATION
   ========================================= */

.dlms-dashboard-wrapper .dlms-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    text-align: left !important;
    margin-top: 30px !important;
}

.dlms-dashboard-wrapper .dlms-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #F4F1E8 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Force the Background Image to show */
.dlms-dashboard-wrapper .dlms-card-image {
    height: 220px !important;
    width: 100% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.dlms-dashboard-wrapper .dlms-card-body {
    padding: 25px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Dashboard Button Styling (Isolated from Login) */
.dlms-dashboard-btn {
    background-color: #C9A961 !important; /* Gold */
    color: #1A2B4A !important; /* Navy */
    padding: 14px 24px !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.dlms-dashboard-btn:hover {
    background-color: #C9A961 !important;
    color: #1A2B4A !important;
}

.dlms-dashboard-actions {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}