/**
 * استایل‌های تقویم آموزشی
 * ✅ Desktop = همان استایل اصلی (بدون تغییر)
 * ✅ فقط Mobile card-week اضافه شد
 */

.ash-slot-past { 
    background: #898989 !important; 
    color: #fff !important; 
    pointer-events: none; 
    cursor: default; 
}

.ash-mchip.past {
    background: #898989 !important;
    color: #fff !important;
    pointer-events: none;
    cursor: default;
}

/* --- DESKTOP ORIGINAL (unchanged) --- */
.ash-training-calendar-wrapper { 
    direction: rtl; 
    max-width: 1200px; 
    margin: 20px 0 0 0; 
    padding: 0; 
    box-sizing: border-box; 
}

.ash-now-bar {
    background: transparent;
    color: #7a7a7a;
    font-weight: 700;
    padding: 0 10px;
    border-radius: 10px;
    margin-top: -15px;
    margin-bottom: 10px;
    text-align: right;
    font-size: calc(0.1vw + 1rem);
}

.ash-calendar-container { 
    width: 100%; 
    border: 1px solid #f9c531; 
    border-radius: 10px; 
    padding: 20px; 
    margin-bottom: 30px; 
    box-sizing: border-box !important; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ash-calendar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
    width: 100% !important;
}

.ash-cal-title { 
    margin: 0; 
    font-size: 1.5em; 
    color: #34180a; 
}

.ash-cal-nav { 
    background: #f9c531; 
    border: none; 
    padding: 5px; 
    border-radius: 50px; 
    cursor: pointer; 
    color: #34180a; 
    font-weight: bold; 
    transform: rotateZ(180deg); 
    width: 30px; 
    height: 30px;
}

.ash-cal-nav:hover { 
    background: #34180a !important; 
    color: #f9c531 !important;
}

.ash-cal-nav:focus { 
    background: #34180a !important; 
    color: #f9c531 !important;
}

.ash-calendar-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 5px; 
    text-align: center; 
    width: 100%;
}

.ash-day-header { 
    font-weight: bold; 
    padding: 10px 0; 
    background: #34180a; 
    color: #fff; 
    border-radius: 10px; 
}

.ash-cal-day { 
    padding: 7px; 
    border: none; 
    border-radius: 14px; 
    min-height: 80px; 
    position: relative; 
    cursor: default; 
    background: #fff8e580; 
    display: flex; 
    flex-direction: column; 
    gap: 5px;
}

.ash-cal-day.is-today { 
    border: 2px solid #f44336; 
    background-color: #f7f4e5;
}

.ash-cal-day.is-empty { 
    background: #f7f7f7; 
    border: 1px dashed #eee; 
}

.ash-day-number { 
    font-size: 1.1em; 
    font-weight: bold; 
    padding-right: 5px; 
    display: block; 
    width: 100%; 
    text-align: right; 
}

.ash-slot-label { 
    font-size: calc(0.1vw + 0.75rem); 
    background: #59ac77; 
    color: white; 
    padding: 2px; 
    border-radius: 7px; 
    display: block; 
    margin-top: 2px; 
    text-decoration: none; 
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical; 
}

.ash-slot-active { 
    background: #59ac77; 
}

.ash-slot-label:hover, 
.ash-slot-active:hover { 
    background: #f9c531; 
    color: #34180a; 
}

.ash-slot-full { 
    background: #f44336;     
    pointer-events: none;
    cursor: default;
}

.ash-slot-next { 
    background: #2196f3; 
}

.ash-slot-unavailable { 
    background: #aaa; 
}

.ash-slot-placeholder {
    visibility: hidden !important; 
    pointer-events: none !important;
}

.ash-slot-push-bottom {
    margin-top: auto !important;
}

.ash-course-list-table { 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    margin-top: 20px; 
    overflow: hidden; 
}

.ash-table-header, 
.ash-table-row { 
    display: grid; 
    grid-template-columns: 2.5fr 10px 4.5fr 10px 2fr 10px 1fr 0px; 
    padding: 12px 15px; 
    border-bottom: 1px solid #eee; 
    align-items: center; 
}

.ash-table-divider { 
    width: 2px; 
    height: 100%; 
    background-color: #ddd; 
}

.ash-table-header { 
    background: #34180a; 
    color: #fff; 
    font-weight: bold; 
    border-radius: 10px 10px 0 0; 
}

.ash-table-row:nth-child(even) { 
    background: #f9f9f9; 
}

.col-course-name a { 
    color: #34180a; 
    text-decoration: none; 
    font-weight: 600; 
}

.col-course-name a:hover { 
    color: #f9c531; 
}

.ash-status-btn { 
    display: inline-block; 
    padding: 5px 10px; 
    border-radius: 10px; 
    text-align: center; 
    text-decoration: none; 
    font-weight: bold; 
}

.btn-active { 
    background: #59ac77; 
    color: #fff; 
    width: 100%; 
}

.btn-active:hover { 
    background: #f9c531; 
    color: #34180a; 
    width: 100%; 
}

.btn-full { 
    background: #ff4e00; 
    color: white; 
    cursor: not-allowed; 
    width: 100%; 
}

.ash-empty-message { 
    padding: 30px; 
    text-align: center; 
    color: #777; 
}

/* Friday in desktop like original */
.ash-calendar-grid .ash-day-header:nth-child(7) {
    background: #ff4e00;
    color: #fff;
}

.ash-calendar-grid .ash-cal-day:nth-child(7n) .ash-day-number {
    color: #ff4e00;
    border-radius: 4px;
    padding: 0 4px;
}

/* --- MOBILE CARD WEEK (added) --- */
#ash-mobile-week-wrap, 
#ash-mobile-week-pager { 
    display: none; 
}

button#ash-m-month-trigger,
button#ash-m-month-trigger:hover,
button#ash-m-month-trigger:focus {
    background: #fff;
    border-radius: 10px;
    padding: 3px 5px;
    width: 100%;
    font-size: calc(0.1vw + 12px);
    border: 1px solid #ddd;
    color: #212121;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    cursor: pointer;
    color: #212121;

}

.ash-m-month-selector {
    display: none !important;
}

#ash-m-month-trigger-text {
    text-align: right;
    flex: 1;
}

.ash-m-month-trigger-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ash-m-month-trigger-icon::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: #34180a;
}

.ash-mobile-hint-pager {
    margin-top: 10px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 12px;
    display: flex;
    width: 100%;
}
    
.hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
}
    
.hint.active::before {
    content:"";
    width: 20px;
    height: 20px;
    background-color:#59ac77;
    border-radius: 5px;
}    
    
.hint.full::before {
    content:"";
    width: 20px;
    height: 20px;
    background-color:#f44e00;
    border-radius: 5px;
}  
    
.hint.pass::before {
    content:"";
    width: 20px;
    height: 20px;
    background-color:#7a7a7a;
    border-radius: 5px;
}  

.ash-m-month-trigger {
    background: #fff;
    color: #34180a;
    border: 1px solid #34180a;
    border-radius: 10px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 12px;
}

.ash-m-month-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 99999;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
}

.ash-m-month-modal.is-active {
    display: flex;
}

.ash-m-month-modal-inner {
    background: #fff;
    width: 100%;
    max-width: 95%;
    margin-inline: auto;
    border-radius: 20px;
    padding: 16px;
    box-sizing: border-box;
    position: relative;
}

.ash-m-month-modal-inner h4 {
    margin: 0 0 12px;
    text-align: center;
    color: #34180a;
    font-weight: 900;
}

.ash-m-month-option.is-active {
    background: #34180a;
    color: #fff;
    font-weight: 700;
}

.ash-m-month-modal-close {
    position: absolute;
    top: -15px;
    left: 15px;
    width: 38px!important;
    height: 38px!important;
    border-radius: 50% !important;
    border: none;
    background: #ff4e00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ash-m-month-modal-close::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
}

.ash-mobile-overview-btn {
    display: none;
}

/* ========== responsive ========== */
@media (max-width: 768px) {
    .ash-now-bar {
        text-align: center;
    }
    
    .ash-cal-nav {
        padding: 5px 10px !important;
    }
    
    .ash-cal-title {
        font-size: 1.2rem !important;
    }
    
    /* Hide desktop grid only on mobile */
    #ash-calendar-grid { 
        display: none !important; 
    }
    
    #ash-mobile-week-wrap, 
    #ash-mobile-week-pager { 
        display: flex !important; 
    }
    
    .ash-course-list-table {
        border: none !important;
        border-radius: 0 !important;
        margin-top: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    #ash-mobile-week-wrap {
        flex-direction: column;
        gap: 10px;
        margin-top: 5px;
        width: 100% !important;
    }
    
    .ash-mrow {
        display: flex;
        gap: 10px;
        align-items: stretch;
        background: #fff8e550;
        border: 1px solid #f3e7c2;
        border-radius: 12px;
        padding: 10px;
    }
    
    .ash-mrow.is-empty {
        opacity: .6;
        background: #f7f7f7;
        border-style: dashed;
    }
    
    .ash-mrow.is-today {
        border: 2px solid #f44336;
        background: #f7f4e5;
    }
    
    .ash-mday {
        width: 40px;
        min-width: 40px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        color: #34180a;
    }
    
    .ash-mdate {
        width: 56px;
        min-width: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        color: #34180a;
    }
    
    .ash-mdate .d {
        font-size: 1.15em;
        line-height: 1;
    }
    
    .ash-mdate .m {
        font-size: .75em;
        color: #777;
        line-height: 1;
        margin-top: 3px;
    }
    
    .ash-mcourses {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-wrap: wrap-reverse;
        gap: 6px;
        align-content: flex-start;
        max-height: 90px;
        overflow: auto;
        padding-left: 2px;
    }
    
    .ash-mchip {
        max-width: 100%;
        padding: 5px;
        border-radius: 10px;
        font-weight: 900;
        text-decoration: none !important;
        white-space: pre-wrap;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    
    .ash-mchip.active {
        background: #59ac77;
        color: #fff;
    }
    
    .ash-mchip.full {
        background: #f44336;
        color: #fff;
    }
    
    /* Friday red in mobile like desktop */
    .ash-mrow.is-friday .ash-mday {
        background: #ff4e00;
        color: #fff;
        border-color: #ff4e00;
    }
    
    .ash-mrow.is-friday .ash-mdate {
        color: #ff4e00;
    }
    
    .ash-mobile-hint-pager {
        justify-content: space-between !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .hint.active::before {
        width: 10px !important;
        height: 10px !important;
    }    
    
    .hint.full::before {
        width: 10px !important;
        height: 10px !important;
    }  
    
    .hint.pass::before {
        width: 10px !important;
        height: 10px !important;
    }  
        
    
    /* pager */
    #ash-mobile-week-pager {
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        margin-top: 12px;
        width: 100% !important;
    }
    
    #ash-mobile-week-pager .nav, 
    #ash-mobile-week-pager .nav:hover, 
    #ash-mobile-week-pager .nav:focus {
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        box-sizing: border-box;
        text-decoration: none;
        border-radius: 10px;
        border: 1px solid #ddd;
        color: #fff;
        font-weight: 900;
        cursor: pointer;
        background-color: #2196F3;
        gap: 5px;
    }
    
    #ash-mobile-week-pager #ash-m-prev::before {
        content: "\f061";
        font-family: "Font Awesome 5 Free";
        line-height: 1;
        font-weight: 900;
        margin-left: 5px;
        font-size: 10px;
    }
    
    #ash-mobile-week-pager #ash-m-next::after {
        content: "\f060";
        font-family: "Font Awesome 5 Free";
        line-height: 1;
        font-weight: 900;
        margin-right: 5px;
        font-size: 10px;
    }
    
    #ash-mobile-week-pager .nav:disabled {
        opacity: 0;
        cursor: not-allowed;
    }
    
    #ash-mobile-week-dots {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
        flex: 1;
        display: none;
    }
    
    .ash-m-dot, 
    .ash-m-dot:hover, 
    .ash-m-dot:focus {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        min-width: 25px;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        text-decoration: none;
        border-radius: 8px;
        color: #7a7a7a;
        transition: all 0.2s;
        background-color: transparent;
    }
    
    .ash-m-dot.active {
        background: #f9c531;
        color: #34180a !important;
        border: 1px solid #f9c531 !important;
    }
    
    /* Table cards remain like your original mobile table styles */
    .ash-table-header { 
        display: none !important; 
    }
    
    .ash-table-row { 
        display: block !important; 
        padding: 15px; 
        border: 2px solid #ddd; 
        border-radius: 10px; 
    }
    
    .ash-table-row:nth-child(even) { 
        background: #f9f9f9; 
    }
    
    .ash-table-row > div { 
        display: flex; 
        width: 100%; 
        padding: 8px 0; 
        border-bottom: 1px solid #eee; 
        box-sizing: border-box; 
        flex-direction: column; 
        gap: 5px; 
    }
    
    .ash-table-row > div:last-child { 
        border-bottom: none; 
    }
    
    .ash-table-row > div::before { 
        content: attr(data-label); 
        font-weight: bold; 
        color: #34180a; 
        margin-left: 8px; 
        float: right; 
    }
    
    .ash-table-divider { 
        display: none !important; 
    }
    
    .col-course-name::before { 
        content: "نام دوره:" !important; 
    }
    
    .col-date::before { 
        content: "تاریخ:" !important; 
    }
    
    .col-teacher::before { 
        content: "مدرس:" !important; 
    }
    
    .col-status::before { 
        content: "وضعیت:" !important; 
    }
    
    .ash-status-btn { 
        width: 100%; 
        max-width: 150px; 
        margin-top: 5px; 
        display: block; 
    }
    
    html, body { 
        overflow-x: hidden; 
    }
    
    * { 
        box-sizing: border-box; 
    }

    .ash-mobile-overview-btn {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        background: #34180a;
        color: #fff !important;
        border-radius: 12px;
        padding: 10px;
        font-weight: 700;
        font-size: 1rem;
    }

    .ash-m-month-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .ash-m-month-option {
        display: block !important;
        width: 100%!important;
        margin-bottom: 6px!important;
        padding: 8px 10px!important;
        border-radius: 10px!important;
        border: 1px solid #eee!important;
        background: #f7f4e5!important;
        color: #212121!important;
        text-align: center;
    }

    .ash-m-month-option.is-active {
        background: #34180a !important;
        color: #fff !important;
        font-weight: 900 !important;
        border-color: #34180a !important;
    }
}