/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 *
 */

/*# sourceMappingURL=custom.css.map */


.pdate-time{
    direction: ltr !important;
}

.pwt-btn-calendar{
    display: none !important;
}

.modal.modal-custom{}
.modal.modal-custom .modal-header{
    background-color: #6777ef;
    color: white;
    padding: 20px 15px;
    align-items: center;
}
.modal.modal-custom .modal-header h5{
    font-size: 14px;
    padding: 0;
    margin: 0;
}
.modal.modal-custom .modal-header button{
    color: white;
    padding: 0;
    margin: 0;
}
.modal.modal-custom .modal-footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Keep two-action modal footers balanced in both RTL and LTR panels. */
.modal-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.modal-footer:has(> :nth-child(2):last-child) {
    justify-content: space-between;
}

.modal-footer:has(> :nth-child(2):last-child) > * {
    margin: 0 !important;
}

.question-box{
    border: 2px solid rgba(0,0,0,0.3);
    border-radius: 8px;
    background-color: #EEEEEE;
}
.question-box .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dotted rgba(0,0,0,0.2);
}
.question-box .footer{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dotted rgba(0,0,0,0.2);
}

.notification-count-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    padding: 3px 5px;
    font-size: 10px;
    line-height: 12px;
}

.notification-dropdown .dropdown-list-content {
    max-height: 320px;
    overflow-y: auto;
}

.notify-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.notify-page-title {
    font-weight: 800;
    margin: 0;
}

.notify-list-card {
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(24, 36, 58, .06);
}

.notify-message-item {
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    margin-bottom: 12px;
}

.notify-message-item.unread {
    background: #f4f8ff;
}

.notify-modal .modal-content {
    border: 0;
    border-radius: 18px;
}

.notify-modal .form-control,
.notify-modal .custom-select {
    border-radius: 12px;
    min-height: 46px;
}

.notify-modal .message-box {
    min-height: 180px;
    resize: vertical;
}

/* ============================================
   Course Student List Styles
   ============================================ */

/* Welcome Band */
.welcome-band {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.welcome-content {
    position: relative;
    z-index: 2;
}

.welcome-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.welcome-content p {
    opacity: 0.9;
    margin: 0;
}

.welcome-decoration .bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.welcome-decoration .bubble:nth-child(1) { width: 80px; height: 80px; top: -20px; right: 10%; animation-delay: 0s; }
.welcome-decoration .bubble:nth-child(2) { width: 60px; height: 60px; top: 20%; right: 25%; animation-delay: 1s; }
.welcome-decoration .bubble:nth-child(3) { width: 100px; height: 100px; bottom: -30px; right: 5%; animation-delay: 2s; }
.welcome-decoration .bubble:nth-child(4) { width: 40px; height: 40px; top: 30%; right: 40%; animation-delay: 3s; }
.welcome-decoration .bubble:nth-child(5) { width: 70px; height: 70px; bottom: -10px; right: 30%; animation-delay: 4s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Stat Cards */
.stat-card {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-card-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.stat-card-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 4px;
}

/* Course Cards */
.course-card {
    border-radius: 16px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 24px;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }
.course-card:nth-child(5) { animation-delay: 0.5s; }
.course-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.course-card-header {
    padding: 24px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.course-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    transition: transform 0.3s ease;
}

.course-card:hover .course-icon {
    transform: rotate(10deg) scale(1.1);
}

.course-badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
}

.course-card-body {
    padding: 24px;
}

.course-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
}

.course-description {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 16px;
    line-height: 1.5;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.course-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 20px;
}

.course-meta-item i {
    color: #667eea;
}

.course-progress-section {
    margin-top: 12px;
}

.course-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 6px;
}

.course-progress-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.course-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 1s ease;
}

.course-progress-count {
    display: block;
    margin-top: 7px;
    color: #7a8494;
    font-size: .7rem;
}

/* Student Exam List */
.slider-admin-thumb {
    width: 110px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.slider-admin-preview {
    display: block;
    width: min(100%, 520px);
    max-height: 240px;
    border-radius: 12px;
    object-fit: cover;
}

.slider-delete-button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.exam-student-page {
    direction: inherit;
}

.exam-student-page .search-panel,
.exam-student-page .exam-card {
    border-radius: 12px;
    background: #fff;
}

.exam-student-page .search-panel {
    border: 1px solid #e8ecf3;
}

.exam-student-page .exam-card {
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid #e8ecf3;
    direction: inherit;
    text-align: start;
}

.exam-student-page .exam-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(21, 34, 58, .08);
}

.exam-student-page .exam-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid #e8ecf3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    direction: inherit;
    text-align: start;
    background: linear-gradient(135deg, #f8fbff 0%, #f2f6fc 100%);
}

.exam-student-page .exam-card-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.exam-student-page .exam-card-heading > div {
    min-width: 0;
}

.exam-student-page .exam-card-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #3867d6;
    background: #eaf1ff;
}

.exam-student-page .exam-card h4 {
    margin: 0;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 800;
}

.exam-student-page .exam-card-code {
    display: block;
    margin-top: 2px;
    color: #929bad;
    font-size: .68rem;
}

.exam-student-page .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: #6b7587;
    font-size: 12px;
    margin-bottom: 12px;
}

.exam-student-page .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.exam-student-page .exam-card-body {
    padding: 12px 14px 14px;
    direction: inherit;
    text-align: start;
}

.exam-student-page .exam-hero {
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #1f3c88 0%, #2d6cdf 100%);
}

.exam-student-page .exam-hero h1 {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.exam-student-page .exam-lesson-badge {
    display: inline-flex;
    padding: 4px 7px;
    border: 1px solid #e2e8f1;
    border-radius: 7px;
    background: #f8fafc;
    color: #526074;
    font-size: .7rem;
}

.exam-student-page .exam-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
}

.exam-student-page .exam-date-item {
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #e9edf4;
    border-radius: 8px;
    background: #fbfcfe;
}

.exam-student-page .exam-date-item span,
.exam-student-page .exam-section-label {
    display: block;
    margin-bottom: 3px;
    color: #8a94a6;
    font-size: .68rem;
}

.exam-student-page .exam-date-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76rem;
}

.exam-student-page .exam-lessons {
    min-height: 49px;
}

.exam-student-page .exam-lesson-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.exam-student-page .exam-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #edf0f5;
}

.exam-student-page .exam-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 9px 10px;
    border: 1px solid #e8edf4;
    border-radius: 9px;
    background: #f8fafc;
}

.exam-student-page .exam-result-summary.is-finished {
    color: #16815f;
    border-color: #cdebdc;
    background: #f0fbf6;
}

.exam-student-page .exam-result-summary.is-progress {
    color: #9a6810;
    border-color: #f1dfb5;
    background: #fff9eb;
}

.exam-student-page .exam-result-summary.is-empty {
    color: #7d8798;
}

.exam-student-page .exam-result-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: .76rem;
    font-weight: 700;
}

.exam-student-page .exam-result-percent {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.exam-student-page .exam-result-percent small {
    font-size: .68rem;
}

.exam-student-page .exam-result-percent strong {
    font-size: 1rem;
}

.exam-student-page .exam-card-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .72rem;
}

.exam-student-page .exam-search-actions {
    display: flex;
    gap: 6px;
}

.exam-results-manager .exam-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-bottom: 1px solid #e8ecf3;
    background: linear-gradient(135deg, #f8fbff 0%, #f2f6fc 100%);
}

.exam-results-manager .exam-results-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.exam-results-manager .table th,
.exam-results-manager .table td {
    vertical-align: middle;
}

.exam-correction-progress {
    padding: 14px;
    border: 1px solid #dce6f5;
    border-radius: 11px;
    background: #f7faff;
}

.exam-correction-progress .progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5ebf4;
}

.exam-correction-progress .progress-bar {
    border-radius: 999px;
    transition: width .4s ease;
}

.exam-extra-settings {
    text-align: start;
}

.exam-setting-list {
    display: grid;
    gap: 10px;
}

.exam-setting-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e4e9f1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.exam-setting-option:hover {
    border-color: #b9c9eb;
    background: #f9fbff;
}

.exam-setting-option:has(input:checked) {
    border-color: #8facf0;
    background: #f3f7ff;
    box-shadow: 0 5px 15px rgba(58, 103, 214, .08);
}

.exam-setting-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf1ff;
    color: #3867d6;
}

.exam-setting-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: start;
}

.exam-setting-text strong {
    color: #29344a;
    font-size: .88rem;
    line-height: 1.7;
}

.exam-setting-text small {
    margin-top: 2px;
    color: #8490a3;
    font-size: .72rem;
}

.exam-setting-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.exam-setting-control {
    position: relative;
    width: 42px;
    height: 23px;
    flex: 0 0 42px;
    border-radius: 999px;
    background: #cbd3df;
    transition: background-color .18s ease;
}

.exam-setting-control::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(27, 39, 64, .22);
    transition: transform .18s ease;
}

.exam-setting-option input:checked + .exam-setting-control {
    background: #3867d6;
}

.exam-setting-option input:checked + .exam-setting-control::after {
    transform: translateX(19px);
}

[dir="rtl"] .exam-setting-option input:checked + .exam-setting-control::after {
    transform: translateX(-19px);
}

.exam-settings-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}

.exam-settings-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 120px;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .exam-extra-settings {
        padding: 12px !important;
    }

    .exam-setting-option {
        min-height: 62px;
        padding: 10px;
    }
}

@media (max-width: 767.98px) {
    .exam-results-manager .exam-results-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .exam-results-manager .exam-results-toolbar .btn {
        justify-content: center;
        width: 100%;
    }
}

.exam-student-page .exam-start-modal {
    direction: inherit;
    text-align: start;
}

.exam-student-page .exam-start-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(24, 38, 64, .2);
}

.exam-student-page .exam-start-modal .modal-header {
    align-items: center;
    padding: 15px 18px;
    border-bottom: 1px solid #e9edf4;
    background: linear-gradient(135deg, #f7faff 0%, #edf3ff 100%);
}

.exam-student-page .exam-start-modal-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.exam-student-page .exam-start-modal-heading > div {
    min-width: 0;
}

.exam-student-page .exam-start-modal-heading .modal-title {
    margin-bottom: 3px;
    font-size: .95rem;
    font-weight: 800;
}

.exam-student-page .exam-start-modal-heading span:not(.exam-start-modal-icon) {
    display: block;
    color: #7c8799;
    font-size: .75rem;
}

.exam-student-page .exam-start-modal-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e2ecff;
    color: #3867d6;
}

.exam-student-page .exam-start-modal .close {
    margin: 0;
    padding: 5px 8px;
}

.exam-student-page .exam-start-modal .modal-body {
    padding: 18px;
}

.exam-student-page .exam-start-text {
    max-height: 42vh;
    overflow-y: auto;
    color: #39465a;
    font-size: .86rem;
    line-height: 2;
    white-space: normal;
}

.exam-student-page .exam-start-modal .modal-footer {
    gap: 7px;
    padding: 12px 18px;
    border-top: 1px solid #edf0f5;
}

.exam-student-page .exam-start-modal .modal-footer .btn {
    margin: 0;
    border-radius: 8px;
}

.exam-student-page .search-panel label {
    margin-bottom: 5px;
    font-size: .76rem;
    font-weight: 700;
}

.exam-student-page .exam-search-form,
.exam-student-page .exam-search-form label,
.exam-student-page .exam-search-form .form-control {
    direction: inherit;
    text-align: start;
}

.exam-student-page[dir="rtl"] .exam-search-form .form-control {
    direction: rtl;
    text-align: right;
}

.exam-student-page[dir="ltr"] .exam-search-form .form-control {
    direction: ltr;
    text-align: left;
}

.exam-student-page[dir="rtl"] .exam-search-actions {
    flex-direction: row-reverse;
}

.exam-student-page .exam-search-form .form-control::placeholder {
    direction: inherit;
    text-align: inherit;
}

@media (max-width: 575.98px) {
    .exam-student-page .exam-date-grid {
        grid-template-columns: 1fr;
    }
}

/** Management Dashboard **/
.admin-dashboard { --dash-ink:#182235; --dash-muted:#758095; --dash-line:#e8edf4; --dash-primary:#506cf0; --dash-teal:#20a486; }
.admin-dashboard .dash-hero { position:relative; overflow:hidden; border-radius:22px; padding:30px; color:#fff; background:linear-gradient(125deg,#17213b 0%,#273d74 58%,#237f82 130%); box-shadow:0 18px 45px rgba(24,34,53,.18); }
.admin-dashboard .dash-hero:before,.admin-dashboard .dash-hero:after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.12); }
.admin-dashboard .dash-hero:before { width:280px; height:280px; inset-inline-end:-70px; top:-155px; box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025); }
.admin-dashboard .dash-hero:after { width:100px; height:100px; inset-inline-start:45%; bottom:-75px; background:rgba(80,108,240,.28); filter:blur(2px); }
.admin-dashboard .hero-kicker { color:#8de0d0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.admin-dashboard .hero-title { font-size:27px; line-height:1.5; }
.admin-dashboard .hero-copy { color:rgba(255,255,255,.72); max-width:620px; }
.admin-dashboard .hero-clock { min-width:155px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border-radius:16px; padding:15px 18px; }
.admin-dashboard .metric-card { position:relative; overflow:hidden; background:#fff; border:1px solid var(--dash-line); border-radius:18px; padding:20px; min-height:142px; box-shadow:0 10px 28px rgba(36,49,77,.06); transition:transform .25s ease,box-shadow .25s ease; animation:dashRise .55s both; }
.admin-dashboard .metric-card:hover { transform:translateY(-5px); box-shadow:0 18px 34px rgba(36,49,77,.11); }
.admin-dashboard .metric-card:after { content:""; position:absolute; width:75px; height:75px; border-radius:50%; inset-inline-end:-30px; bottom:-35px; background:var(--metric-soft); }
.admin-dashboard .metric-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--metric-soft); color:var(--metric); font-size:19px; }
.admin-dashboard .metric-label,.admin-dashboard .subtle { color:var(--dash-muted); }
.admin-dashboard .metric-value { color:var(--dash-ink); font-size:25px; font-weight:800; }
.admin-dashboard .panel { background:#fff; border:1px solid var(--dash-line); border-radius:18px; box-shadow:0 10px 28px rgba(36,49,77,.055); height:100%; overflow:hidden; }
.admin-dashboard .panel-head { padding:20px 22px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.admin-dashboard .panel-head h4 { margin:0; color:var(--dash-ink); }
.admin-dashboard .panel-body { padding:8px 22px 22px; }
.admin-dashboard .quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-dashboard .quick-link { color:var(--dash-ink); border:1px solid var(--dash-line); border-radius:13px; padding:13px; display:flex; align-items:center; gap:10px; transition:.2s ease; background:#fbfcfe; }
.admin-dashboard .quick-link:hover { color:var(--dash-primary); border-color:#cdd6ff; background:#f5f7ff; margin-inline-start:2px; text-decoration:none; }
.admin-dashboard .quick-link i { width:31px; height:31px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#e9edff; color:var(--dash-primary); flex-shrink:0; }
.admin-dashboard .panel-head { text-align:start; }
.admin-dashboard .panel-head h4,
.admin-dashboard .panel-head > a,
.admin-dashboard .panel-head > div { text-align:inherit; min-width:0; }
.admin-dashboard .ticket-row,
.admin-dashboard .sale-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.75rem;
    align-items:center;
    padding:13px 0;
    border-bottom:1px dashed var(--dash-line);
    text-align:start;
}
.admin-dashboard .ticket-row > :last-child,
.admin-dashboard .sale-row > :last-child { justify-self:end; text-align:end; white-space:nowrap; }
.admin-dashboard .ticket-row:last-child,
.admin-dashboard .sale-row:last-child { border-bottom:0; }
.admin-dashboard .sale-row-amount {
    color: #20a486;
    font-weight: 700;
}

.admin-dashboard .sale-row-amount .money-format {
    font-size: .95em;
}
.admin-dashboard .metric-value .money-format { font-size:inherit; font-weight:inherit; }
.admin-dashboard .status-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-inline-end:6px; }
.admin-dashboard .status-open { background:#ef8d32; box-shadow:0 0 0 4px rgba(239,141,50,.13); }
.admin-dashboard .status-pending { background:#506cf0; box-shadow:0 0 0 4px rgba(80,108,240,.13); }
.admin-dashboard .status-closed { background:#20a486; box-shadow:0 0 0 4px rgba(32,164,134,.13); }
.admin-dashboard .health-row { margin-bottom:20px; }
.admin-dashboard .health-track { height:8px; background:#edf1f6; border-radius:20px; overflow:hidden; }
.admin-dashboard .health-fill { height:100%; border-radius:20px; background:linear-gradient(90deg,#506cf0,#20a486); animation:dashWidth .9s ease both; }
.admin-dashboard .service-pill { display:flex; align-items:center; justify-content:space-between; border-radius:13px; padding:13px 14px; background:#f7f9fc; margin-top:10px; }
.admin-dashboard .service-state { font-size:11px; border-radius:20px; padding:4px 9px; background:#ffe9e7; color:#c65349; }
.admin-dashboard .service-state.on { background:#def7ef; color:#16856d; }
.admin-dashboard .chart-wrap { min-height:270px; position:relative; }
.admin-dashboard .empty-mini { text-align:center; color:var(--dash-muted); padding:28px 10px; }

@keyframes dashRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes dashWidth { from { width:0; } }

@media (max-width:767px) {
    .admin-dashboard .dash-hero { padding:23px; }
    .admin-dashboard .hero-clock { margin-top:20px; width:100%; }
    .admin-dashboard .quick-grid { grid-template-columns:1fr; }
    .admin-dashboard .panel-head,.admin-dashboard .panel-body { padding-inline:16px; }
}

@media (prefers-reduced-motion:reduce) {
    .admin-dashboard * { animation:none !important; transition:none !important; }
}

.dashboard-slider { overflow:hidden; border:1px solid var(--dash-line, #e8edf4); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(36,49,77,.06); }
.dashboard-slider .carousel-item { position:relative; }
.dashboard-slider .carousel-item img { width:100%; height:var(--dashboard-slider-height, 300px); object-fit:cover; display:block; }
.dashboard-slider .carousel-item::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent, rgba(24,34,53,.55)); pointer-events:none; }
.dashboard-slider .carousel-caption { z-index:2; text-align:start; padding-bottom:1.25rem; }
.dashboard-slider .carousel-caption h5 { font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.dashboard-slider-link { display:block; color:inherit; }
.dashboard-slider-link:hover { text-decoration:none; color:inherit; }
.student-dashboard .dashboard-slider { border-color:rgba(103,119,239,.16); box-shadow:0 8px 24px rgba(59,72,132,.07); }

.display-code-editor {
    height: 330px;
    min-height: 300px !important;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
}

.student-profile-summary {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 2fr);
    gap: 16px;
}

.student-grade-card,
.student-teachers-card {
    border: 1px solid rgba(103, 119, 239, .16);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(59, 72, 132, .07);
}

.student-grade-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
}

.student-summary-icon {
    display: flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    color: #6777ef;
    border-radius: 13px;
    background: rgba(103, 119, 239, .11);
    font-size: 19px;
}

.student-grade-card div:last-child,
.student-teachers-heading div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.student-grade-card span,
.student-teachers-heading span {
    margin-bottom: 3px;
    color: #8b95a7;
    font-size: 12px;
}

.student-grade-card strong {
    color: #27314a;
    font-size: 17px;
}

.student-teachers-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
}

.student-teachers-heading {
    display: flex;
    min-width: 135px;
    align-items: center;
    gap: 12px;
}

.student-teachers-heading strong {
    color: #27314a;
    font-size: 19px;
}

.student-teacher-list {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: 9px;
}

.student-teacher-chip {
    display: flex;
    min-width: 155px;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid #e7eaf4;
    border-radius: 11px;
    background: #f9faff;
}

.student-teacher-avatar {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, #6777ef, #3abaf4);
    font-weight: 700;
}

.student-teacher-chip > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.student-teacher-chip strong {
    overflow: hidden;
    color: #39435c;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-teacher-chip small,
.student-summary-empty {
    color: #8b95a7;
    font-size: 11px;
}

@media (max-width: 767px) {
    .student-profile-summary { grid-template-columns: 1fr; }
    .student-teachers-card { align-items: flex-start; flex-direction: column; }
    .student-teacher-list { width: 100%; }
    .student-teacher-chip { flex: 1 1 100%; }
}

/* Student dashboard */
.student-dashboard {
            --soft-border: rgba(103, 119, 239, 0.14);
            --soft-bg: #f8f9ff;
        }

        /* ===== Welcome Band ===== */
        .student-dashboard .welcome-band {
            background: linear-gradient(135deg, #6777ef 0%, #3abaf4 100%);
            background-size: 200% 200%;
            border-radius: 12px;
            color: #fff;
            padding: 28px;
            overflow: hidden;
            position: relative;
            animation: gradientShift 8s ease infinite;
        }

        .student-dashboard .welcome-band::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            border: 34px solid rgba(255,255,255,.12);
            border-radius: 50%;
            inset-inline-end: -70px;
            top: -80px;
            animation: floatBubble 6s ease-in-out infinite;
        }

        .student-dashboard .welcome-band::after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            border: 24px solid rgba(255,255,255,.08);
            border-radius: 50%;
            inset-inline-end: 80px;
            bottom: -50px;
            animation: floatBubble 8s ease-in-out infinite reverse;
        }

        .student-dashboard .welcome-band .welcome-content {
            animation: slideInLeft 0.6s ease-out;
            position: relative;
            z-index: 1;
        }

        .student-dashboard .welcome-band .badge {
            animation: slideInRight 0.6s ease-out;
            position: relative;
            z-index: 1;
        }

        /* ===== Metric Cards ===== */
        .student-dashboard .metric-card {
            border: 1px solid var(--soft-border);
            border-radius: 12px;
            padding: 20px;
            height: 100%;
            background: #fff;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(20px);
        }

        .student-dashboard .metric-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6777ef, #3abaf4);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }

        .student-dashboard .metric-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 40px rgba(103, 119, 239, 0.18);
            border-color: rgba(103, 119, 239, 0.3);
        }

        .student-dashboard .metric-card:hover::before {
            transform: scaleX(1);
        }

        .student-dashboard .metric-card:hover .metric-icon {
            transform: scale(1.15) rotate(5deg);
        }

        .student-dashboard .metric-card .metric-icon {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .student-dashboard .metric-card .metric-number {
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(135deg, #6777ef, #3abaf4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ===== Cards General ===== */
        .student-dashboard .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(103, 119, 239, 0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(20px);
        }

        .student-dashboard .card:hover {
            box-shadow: 0 8px 32px rgba(103, 119, 239, 0.12);
            transform: translateY(-3px);
        }

        .student-dashboard .card .card-header {
            background: transparent;
            border-bottom: 1px solid #edf0f7;
            padding: 18px 20px;
        }

        .student-dashboard .card .card-header h4 {
            margin: 0;
            font-weight: 600;
            color: #4a5568;
            font-size: 16px;
        }

        .student-dashboard .card .card-body {
            padding: 20px;
        }

        /* ===== Exam Items ===== */
        .student-dashboard .exam-item {
            border: 1px solid #edf0f7;
            border-radius: 10px;
            padding: 16px;
            background: #fff;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .student-dashboard .exam-item:hover {
            background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
            border-color: rgba(103, 119, 239, 0.2);
            transform: translateX(5px);
        }

        .student-dashboard .exam-item .exam-date {
            min-width: 64px;
            border-radius: 10px;
            background: var(--soft-bg);
            color: #6777ef;
            padding: 12px 10px;
            text-align: center;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .student-dashboard .exam-item:hover .exam-date {
            background: linear-gradient(135deg, #6777ef, #3abaf4);
            color: #fff;
            transform: scale(1.05);
        }

        /* ===== Badges ===== */
        .student-dashboard .badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .student-dashboard .badge:hover {
            transform: scale(1.05);
        }

        /* ===== Teacher Messages ===== */
        .student-dashboard .teacher-message {
            border: 1px solid #edf0f7;
            border-radius: 10px;
            padding: 16px;
            background: #fff;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .student-dashboard .teacher-message:hover {
            background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
            border-color: rgba(250, 204, 21, 0.3);
            transform: translateX(5px);
        }

        .student-dashboard .teacher-message::before {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, #f59e0b, #fbbf24);
            border-radius: 2px;
            transition: height 0.3s ease;
        }

        .student-dashboard .teacher-message:hover::before {
            height: 60%;
        }

        /* ===== Score Pill ===== */
        .student-dashboard .score-pill {
            border-radius: 999px;
            background: linear-gradient(135deg, #eafaf0, #d4f5e3);
            color: #2ca84d;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 700;
            animation: pulse 2s ease-in-out infinite;
        }

        /* ===== Progress Bar ===== */
        .student-dashboard .progress {
            height: 10px;
            border-radius: 10px;
            background: #edf0f7;
            overflow: hidden;
        }

        .student-dashboard .progress-bar {
            border-radius: 10px;
            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .student-dashboard .progress-bar::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: shimmer 2s infinite;
        }

        /* ===== Progress Chart ===== */
        .student-dashboard .progress-chart-wrap {
            min-height: 280px;
            border-radius: 10px;
            padding: 20px;
            background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
            position: relative;
        }

        .student-dashboard .progress-chart-wrap canvas {
            min-height: 240px;
        }

        /* ===== Stats Counters ===== */
        .student-dashboard .stat-counter {
            display: inline-block;
        }

        /* ===== Muted Label ===== */
        .student-dashboard .muted-label {
            color: #8b95a7;
            font-size: 12px;
        }

        /* ===== Animations ===== */
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes floatBubble {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
        }

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(44, 168, 77, 0.2); }
            50% { box-shadow: 0 0 0 8px rgba(44, 168, 77, 0); }
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 200%; }
        }

        /* ===== Stagger Animation Delays ===== */
        .student-dashboard .metric-card:nth-child(1) { animation: fadeInUp 0.5s ease-out 0.1s forwards; }
        .student-dashboard .metric-card:nth-child(2) { animation: fadeInUp 0.5s ease-out 0.2s forwards; }
        .student-dashboard .metric-card:nth-child(3) { animation: fadeInUp 0.5s ease-out 0.3s forwards; }

        .student-dashboard .card:nth-of-type(1) { animation: fadeInUp 0.5s ease-out 0.35s forwards; }
        .student-dashboard .card:nth-of-type(2) { animation: fadeInUp 0.5s ease-out 0.45s forwards; }
        .student-dashboard .card:nth-of-type(3) { animation: fadeInUp 0.5s ease-out 0.55s forwards; }
        .student-dashboard .card:nth-of-type(4) { animation: fadeInUp 0.5s ease-out 0.65s forwards; }

        /* ===== Dark Mode Support ===== */
        @media (prefers-color-scheme: dark) {
            .student-dashboard .metric-card {
                background: #1e2433;
                border-color: rgba(103, 119, 239, 0.2);
            }
            .student-dashboard .metric-card:hover {
                box-shadow: 0 12px 40px rgba(103, 119, 239, 0.25);
            }
            .student-dashboard .card {
                background: #1e2433;
            }
            .student-dashboard .card .card-header {
                border-color: #2d3748;
            }
            .student-dashboard .card .card-header h4 {
                color: #e2e8f0;
            }
            .student-dashboard .exam-item,
            .student-dashboard .teacher-message {
                background: #1e2433;
                border-color: #2d3748;
            }
            .student-dashboard .progress {
                background: #2d3748;
            }
            .student-dashboard .progress-chart-wrap {
                background: linear-gradient(180deg, #1e2433 0%, #1a1f2e 100%);
            }
        }

        /* ===== RTL Support ===== */
        [dir="rtl"] .student-dashboard .exam-item:hover,
        [dir="rtl"] .student-dashboard .teacher-message:hover {
            transform: translateX(-5px);
        }
        [dir="rtl"] .student-dashboard .teacher-message::before {
            right: auto;
            left: 0;
        }


/* Course editor */
.course-editor-navs .nav-link.active{
            background: #6777ef !important;
            color: white !important;
            cursor: revert;
        }
        .course-editor-navs .nav-link{
            cursor: pointer;
        }
        .course-editor-page .video-wrapper iframe,
        .course-editor-page .video-wrapper video {
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }


/* Exam editor */
.exam-editor-navs .nav-link.active{
            background: #0a53be !important;
            color: white !important;
            cursor: revert;
        }
        .exam-editor-navs .nav-link{
            cursor: pointer;
        }


/* CKEditor */
.ck{
            font-family: "Vazir", serif !important;
        }
        .ck-button__label{
            font-family: "Vazir", serif !important;
        }
        .ck-powered-by-balloon{
            display: none !important;
        }


/* Course sections */
#course-sections-sortable .course-section-item {
            cursor: default;
            user-select: none;
        }

        #course-sections-sortable .course-section-item:hover {
            cursor: move;
        }

        #course-sections-sortable .course-section-item.ui-sortable-helper {
            opacity: 0.55;
        }

        #course-sections-sortable .course-section-placeholder {
            height: 68px;
            margin-bottom: 1rem;
            border: 2px dashed #cfd7e6;
            border-radius: .25rem;
            background: #f8fbff;
        }


/* Panel layout */
.panel-fixed-layout {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .panel-fixed-layout #app,
    .panel-fixed-layout .main-wrapper {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .panel-fixed-layout .main-navbar {
        position: fixed;
    }

    .ck-editor__editable {
        min-height: 300px;
    }

    .panel-content-shell {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: 22px;
        overflow: hidden;
    }

    .panel-content-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep the content spacing while moving its scrollbar to the panel edge. */
    html[dir="rtl"] .panel-fixed-layout .panel-content-body {
        margin-left: -30px;
        padding-left: 30px;
        direction: rtl;
    }

    html[dir="ltr"] .panel-fixed-layout .panel-content-body {
        margin-right: -30px;
        padding-right: 30px;
        direction: ltr;
    }

    @media print {
        .panel-fixed-layout,
        .panel-fixed-layout #app,
        .panel-fixed-layout .main-wrapper {
            height: auto;
            overflow: visible;
        }

        .panel-fixed-layout .panel-content-shell {
            height: auto;
            overflow: visible;
        }

        .panel-fixed-layout .panel-content-body {
            margin-inline: 0;
            padding-inline: 0;
            overflow: visible;
        }
    }

    .panel-content-footer {
        position: fixed;
        inset-inline-start: 0;
        inset-inline-end: 0;
        bottom: 0;
        z-index: 840;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        border-top: 1px solid #dfe4ee;
        color: #5f6878;
        font-size: 10px;
        line-height: 1;
        background: #f3f6fb;
        box-shadow: 0 -1px 4px rgba(25, 32, 56, .04);
        padding: 0 12px;
        direction: ltr;
        text-align: left;
    }

    .panel-content-footer span + span:before {
        content: "•";
        margin-right: 8px;
        color: #aeb7c6;
    }

/* Shared Blade utilities */
.auth-site-logo { display:block; width:auto; max-width:50%; max-height:180px; height:auto; margin:0 auto; object-fit:contain; }
.auth-cover-panel { background-repeat:no-repeat; background-position:center top; background-size:cover; }
.auth-light-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 28px 18px;
    background: linear-gradient(135deg, #6777ef 0%, #8c6ee8 52%, #4f9be8 100%);
}

.auth-light-card {
    width: min(100%, 460px);
    padding: 34px 38px 38px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(38, 43, 92, .25);
}

.auth-light-card .auth-site-logo {
    display: block;
    max-width: 190px;
    max-height: 72px;
    margin: 0 auto 28px;
}

.auth-light-content { width: 100%; }

.login-style-card {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 104px;
    gap: 14px;
    padding: 15px;
    cursor: pointer;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.login-style-card:has(input:checked) { border-color: #6777ef; background: #f5f6ff; box-shadow: 0 4px 15px rgba(103, 119, 239, .12); }
.login-style-card > input { flex: 0 0 auto; }
.login-style-preview { position: relative; display: block; width: 82px; height: 55px; flex: 0 0 82px; overflow: hidden; border-radius: 7px; background: #6777ef; }
.login-style-preview-default i { position: absolute; inset: 0 0 0 34%; background: linear-gradient(145deg, #7f8ef2, #38499f); }
.login-style-preview-default b { position: absolute; inset: 8px auto 8px 7px; width: 22px; border-radius: 4px; background: #fff; }
.login-style-preview-light { display: grid; background: linear-gradient(135deg, #6777ef, #986fe6); place-items: center; }
.login-style-preview-light b { display: block; width: 32px; height: 38px; border-radius: 5px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); }

@media (max-width: 575.98px) {
    .auth-light-shell { align-items: flex-start; padding: 18px 12px; }
    .auth-light-card { margin: auto 0; padding: 28px 22px 30px; border-radius: 16px; }
}
.auth-remember-group { width:100%; margin-bottom:25px; }
.auth-remember-control { display:flex; align-items:center; width:100%; min-height:24px; }
.auth-remember-control .custom-control-label { margin-bottom:0; }
.panel-overflow-hidden { overflow-x:hidden; }
.dashboard-progress-compact { height:8px; }
.dashboard-progress-86 { width:86%; }
.connected-alert { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.section-actions-width { width:200px; }
.cursor-pointer { cursor:pointer; }
.cursor-move { cursor:move; }
.dropdown-layer { z-index:2000; }
.flex-gap-8 { gap:8px; }
.flex-gap-12 { gap:12px; }
.settings-message-textarea { height:120px; }
.settings-large-textarea { height:200px; }
.setting-logo-preview { max-width:180px; max-height:90px; object-fit:contain; }
.setting-favicon-preview { width:48px; height:48px; object-fit:contain; }
.ticket-message-box { min-height:200px !important; height:200px; resize:vertical; }
.font-weight-800 { font-weight:800; }

/* Question editor */
#question_new_form img { max-width:100%; overflow:hidden; }
.question-editor-page .ql-editor { line-height:2 !important; height:300px !important; overflow-y:auto !important; text-align:start !important; font-family:Vazirmatn, sans-serif !important; }
.question-editor-rtl .ql-editor { direction:rtl !important; }
.question-editor-ltr .ql-editor { direction:ltr !important; }
.question-editor-rtl .ql-editor .ql-direction-rtl,
.question-editor-rtl .ql-direction-rtl { text-align:end !important; }
.question-editor-ltr .ql-editor .ql-direction-rtl,
.question-editor-ltr .ql-direction-rtl { text-align:start !important; }
.question-editor-page .ql-toolbar { direction:ltr !important; text-align:left !important; }
.question-editor-page .ql-toolbar svg { width:20px !important; height:20px !important; }
.question-editor-page .ql-picker { direction:ltr !important; }

/* Student course section */
.section-detail-hero { padding:32px; margin-bottom:24px; color:#fff; border-radius:16px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); }
.section-video iframe,
.section-video video { width:100%; border-radius:12px; box-shadow:0 8px 25px rgba(0,0,0,.15); }
.section-text { line-height:1.9; }
.breadcrumb-nav { margin-bottom:24px; }
.student-section-page .breadcrumb-nav a { color:var(--section-color); }

.image-upload{
    direction: ltr;
}

.setting-media-sidebar { position:sticky; top:90px; }
.course-short-description { height:110px; resize:vertical; }
.setting-media-item { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #eef0f5; }
.setting-media-item:last-child { padding-bottom:0; margin-bottom:0; border-bottom:0; }
.setting-media-preview { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:130px; overflow:hidden; border:2px dashed #d9dce6; border-radius:12px; background:#f8f9fb; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; }
.setting-media-preview:hover, .setting-media-preview:focus { border-color:#6777ef; box-shadow:0 0 0 3px rgba(103,119,239,.12); outline:0; }
.setting-media-preview-dark { background:#242634; border-color:#4b4e61; }
.setting-media-preview-login_cover_image { height:180px; }
.setting-media-preview-site_favicon { height:110px; }
.setting-media-preview img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; padding:12px; }
.setting-media-preview.has-image .setting-media-placeholder { display:none; }
.setting-media-preview-login_cover_image img { object-fit:cover; padding:0; }
.setting-media-preview-site_favicon img { width:64px; height:64px; padding:0; }
.setting-media-placeholder { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#a5a9b8; }
.setting-media-placeholder i { font-size:28px; }
.setting-media-delete[hidden] { display:none !important; }
@media (max-width:991.98px) {
    .setting-media-sidebar { position:static; }
}
@media (min-width:992px) {
    html[dir="rtl"] .setting-media-sidebar-column { order:2; }
    html[dir="rtl"] .setting-main-content-column { order:1; }
    html[dir="ltr"] .setting-media-sidebar-column { order:1; }
    html[dir="ltr"] .setting-main-content-column { order:2; }
}

/* Student products and blog catalogs */
.student-catalog-page .student-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.student-catalog-page .student-catalog-header .section-title {
    margin-top: 0;
}

.student-catalog-page .student-catalog-header p {
    margin: 7px 0 0;
    color: #8b95a7;
}

.student-catalog-page .catalog-search-bar {
    display: flex;
    justify-content: flex-start;
}

html[dir="rtl"] .student-catalog-page .catalog-search-bar {
    justify-content: flex-end;
}

.student-catalog-page .catalog-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

html[dir="rtl"] .student-catalog-page .catalog-list-header {
    flex-direction: row-reverse;
}

.student-catalog-page .catalog-list-tabs {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid #e8ebf2;
    border-radius: 999px;
    background: #eef1f6;
    gap: 4px;
}

.student-catalog-page .catalog-list-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    color: #6c757d;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.student-catalog-page .catalog-list-tab:hover {
    color: #34395e;
    text-decoration: none;
}

.student-catalog-page .catalog-list-tab.is-active {
    color: #fff;
    background: #6777ef;
    box-shadow: 0 4px 12px rgba(103, 119, 239, .28);
}

.student-catalog-page .catalog-list-header .catalog-search-form {
    width: 100%;
    max-width: 380px;
}

.student-catalog-page .catalog-search-input {
    overflow: hidden;
    border: 1px solid #e8ebf2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.student-catalog-page .catalog-search-input .form-control {
    height: 38px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.student-catalog-page .catalog-search-input .form-control:focus {
    box-shadow: none;
}

.student-catalog-page .catalog-search-input .input-group-append {
    display: flex;
}

.student-catalog-page .catalog-search-input .input-group-append .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 0;
    border-radius: 0;
}

.student-catalog-page .catalog-search-input .input-group-append .btn-primary {
    border-radius: 0 999px 999px 0;
    padding-inline: 18px;
}

html[dir="rtl"] .student-catalog-page .catalog-search-input .input-group-append .btn-primary {
    border-radius: 999px 0 0 999px;
}

.student-catalog-page .catalog-search-input .input-group-append .btn-light {
    border-inline-start: 1px solid #e8ebf2;
}

.student-catalog-page .catalog-tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.student-catalog-page .catalog-tag-filter-label {
    color: #6f7a8c;
    font-size: .78rem;
    font-weight: 600;
}

.student-catalog-page .catalog-tag-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--course-card-tag-border);
    border-radius: 999px;
    background: var(--course-card-tag-bg);
    color: var(--course-card-tag-color);
    font-size: .74rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.student-catalog-page .catalog-tag-filter-chip:hover,
.student-catalog-page .catalog-tag-filter-chip:focus {
    background: var(--course-card-tag-hover-bg);
    border-color: var(--course-card-tag-hover-border);
    color: var(--course-card-tag-hover-color);
    text-decoration: none;
}

.student-catalog-page .catalog-tag-filter-chip i {
    font-size: .68rem;
    opacity: .75;
}

.student-catalog-page .catalog-card {
    display: flex;
    height: 100%;
    overflow: hidden;
    color: #34395e;
    border: 1px solid #e8ebf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
    transition: transform .3s ease, box-shadow .3s ease;
    flex-direction: column;
}

.student-catalog-page .catalog-card:hover {
    color: #34395e;
    text-decoration: none;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

.student-catalog-page .catalog-media {
    position: relative;
    display: grid;
    height: 190px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf0ff 0%, #e8faf4 100%);
    place-items: center;
}

.student-catalog-page .catalog-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.student-catalog-page .catalog-card:hover .catalog-media img {
    transform: scale(1.04);
}

.student-catalog-page .catalog-placeholder {
    color: #6777ef;
    font-size: 3.2rem;
    font-weight: 800;
}

.student-catalog-page .catalog-badge {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    padding: 5px 11px;
    color: #fff;
    border-radius: 18px;
    background: rgba(103, 119, 239, .94);
    font-size: .72rem;
}

.student-catalog-page .catalog-badge-purchased {
    inset-inline-start: 12px;
    inset-inline-end: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(71, 195, 99, .95);
    font-weight: 700;
}

.student-catalog-page .catalog-promo-badges {
    position: absolute;
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.student-catalog-page .catalog-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.student-catalog-page .catalog-promo-badge-featured {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.student-catalog-page .catalog-promo-badge-discount {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.student-product-promo-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-product-promo-badges .catalog-promo-badge {
    font-size: .75rem;
}

.student-catalog-page .catalog-card-purchased {
    border-color: rgba(71, 195, 99, .45);
}

.student-catalog-page .catalog-action-purchased {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #47c363;
}

.student-catalog-page .catalog-body {
    display: flex;
    padding: 20px;
    flex: 1;
    flex-direction: column;
}

.student-catalog-page .catalog-date {
    display: block;
    margin-bottom: 7px;
    color: #6777ef;
    font-size: .75rem;
}

.student-catalog-page .catalog-title {
    margin: 0 0 9px;
    color: #34395e;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8;
}

.student-catalog-page .catalog-excerpt {
    margin-bottom: 16px;
    color: #7b8494;
    font-size: .84rem;
    line-height: 1.9;
}

.student-catalog-page .catalog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #edf0f4;
}

.student-catalog-page .catalog-price {
    display: flex;
    color: #47c363;
    font-weight: 700;
    flex-direction: column;
}

.student-catalog-page .catalog-price del {
    color: #a5abb3;
    font-size: .72rem;
    font-weight: 400;
}

.student-catalog-page .catalog-action {
    color: #6777ef;
    font-size: .78rem;
    font-weight: 700;
}

.student-catalog-page .catalog-empty {
    padding: 65px 20px;
    text-align: center;
}

.student-catalog-page .catalog-empty i {
    margin-bottom: 16px;
    color: #c6cbd3;
    font-size: 3.5rem;
}

@media (max-width: 575.98px) {
    .student-catalog-page .student-catalog-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .student-catalog-page .catalog-list-header {
        flex-direction: column;
        align-items: stretch;
    }

    html[dir="rtl"] .student-catalog-page .catalog-list-header {
        flex-direction: column;
    }

    .student-catalog-page .catalog-list-header .catalog-search-form {
        max-width: none;
    }

    .student-catalog-page .catalog-list-tabs {
        width: 100%;
        justify-content: center;
    }

    .student-catalog-page .catalog-media {
        height: 210px;
    }
}

/* Student product and blog details */
.discount-search-actions > * + * {
    margin-inline-start: 8px;
}

.excel-export-option {
    height: 100%;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.excel-export-option:has(input:checked) {
    border-color: #6777ef !important;
    background: #f2f4ff;
    box-shadow: 0 3px 12px rgba(103, 119, 239, .1);
}

.excel-export-option .custom-control-label {
    display: flex;
    min-height: 44px;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.excel-export-option .custom-control-label strong {
    color: #34395e;
    font-size: .88rem;
}

.excel-export-option .custom-control-label small {
    display: block;
    margin-top: 5px;
    color: #8b95a7;
    font-size: .72rem;
    line-height: 1.7;
}

.student-product-page,
.student-blog-page {
    --student-detail-ink: #34395e;
    --student-detail-muted: #8b95a7;
    --student-detail-line: #e8ebf2;
    --student-detail-soft: #f7f9fc;
}

.student-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #6777ef;
    font-size: .88rem;
    font-weight: 700;
}

.student-product-hero {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--student-detail-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
}

.student-product-cover {
    position: relative;
    display: grid;
    min-height: 330px;
    overflow: hidden;
    color: #6777ef;
    background: linear-gradient(135deg, #edf0ff 0%, #e8faf4 100%);
    font-size: 5.2rem;
    font-weight: 800;
    place-items: center;
}

.student-product-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-product-type {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    padding: 6px 12px;
    color: #fff;
    border-radius: 20px;
    background: rgba(103, 119, 239, .94);
    font-size: .76rem;
}

.student-product-summary {
    display: flex;
    align-items: flex-start;
    padding: clamp(25px, 4vw, 46px);
    flex-direction: column;
}

.student-product-kicker,
.student-product-content-head > div > span {
    color: #6777ef;
    font-size: .76rem;
    font-weight: 700;
}

.student-product-summary h1,
.student-blog-header h1 {
    margin: 9px 0 12px;
    color: var(--student-detail-ink);
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.65;
}

.student-product-summary > p {
    margin: 0 0 20px;
    color: var(--student-detail-muted);
    line-height: 2;
}

.student-product-tags,
.student-product-lessons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.student-product-tags {
    margin: 0 0 20px;
}

.student-product-tags span,
.student-product-lessons span {
    padding: 5px 10px;
    color: #5869db;
    border-radius: 20px;
    background: #eef0ff;
    font-size: .74rem;
}

.student-product-price {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--student-detail-line);
}

.student-product-price > div {
    display: flex;
    flex-direction: column;
}

.student-product-price small {
    color: var(--student-detail-muted);
}

.student-product-price strong {
    color: #47c363;
    font-size: 1.3rem;
}

.student-product-price del {
    color: var(--student-detail-muted);
    font-size: .75rem;
}

.student-product-item-count {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 10px;
    color: #6777ef;
    border-radius: 20px;
    background: #eef0ff;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

.student-product-description,
.student-blog-page {
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--student-detail-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}

.student-product-description {
    margin-bottom: 28px;
    color: var(--student-detail-ink);
    line-height: 2.15;
}

.student-product-description h2,
.student-product-content-head h2 {
    margin: 0 0 16px;
    color: var(--student-detail-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.student-product-description img,
.student-blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.student-product-content-head {
    margin: 0 0 18px;
}

.student-product-content-head h2 {
    margin: 5px 0 0;
}

.student-product-prerequisites {
    text-align: start;
    margin-bottom: 28px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid #eadfb9;
    border-radius: 15px;
    background: linear-gradient(145deg, #fffdf6, #fff9e8);
    box-shadow: 0 5px 20px rgba(121, 91, 16, .07);
}

.student-product-prerequisite-text {
    text-align: start;
    margin-bottom: 20px;
    color: var(--student-detail-ink);
    line-height: 2;
}

.student-product-prerequisite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.student-product-prerequisite-card {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
    padding: 13px;
    color: var(--student-detail-ink);
    border: 1px solid #ece5ce;
    border-radius: 12px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.student-product-prerequisite-card:hover {
    color: var(--student-detail-ink);
    border-color: #d8bd64;
    box-shadow: 0 7px 18px rgba(121, 91, 16, .12);
    transform: translateY(-2px);
}

.student-product-prerequisite-cover {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    color: #a77a08;
    border-radius: 10px;
    background: #fff4c9;
    place-items: center;
}

.student-product-prerequisite-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-product-prerequisite-info {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    text-align: start;
}

.student-product-prerequisite-info small { color: #a17b22; }
.student-product-prerequisite-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-product-prerequisite-info span { color: var(--student-detail-muted); font-size: .76rem; }

.student-product-item {
    display: flex;
    height: 100%;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--student-detail-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}

.student-product-item-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    color: #6777ef;
    border-radius: 12px;
    background: #eef0ff;
    place-items: center;
}

.student-product-exam .student-product-item-icon {
    color: #2a9d8f;
    background: #e4f7f2;
}

.student-product-item-main {
    min-width: 0;
    flex: 1;
}

.student-product-item-type {
    color: var(--student-detail-muted);
    font-size: .72rem;
}

.student-product-item h3 {
    margin: 2px 0 7px;
    color: var(--student-detail-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.7;
}

.student-product-item p {
    margin: 0 0 12px;
    color: var(--student-detail-muted);
    font-size: .84rem;
    line-height: 1.9;
}

.student-product-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    color: var(--student-detail-muted);
    font-size: .76rem;
}

.student-product-item-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.student-product-lessons {
    margin-top: 13px;
}

.student-product-item .student-product-item-count {
    margin-inline-start: auto;
}

.student-product-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    gap: 10px;
    color: var(--student-detail-muted);
    border: 1px dashed var(--student-detail-line);
    border-radius: 13px;
    background: var(--student-detail-soft);
}

.student-blog-header time {
    color: #6777ef;
    font-size: .8rem;
}

.student-blog-header .student-product-tags {
    margin-bottom: 0;
}

.student-blog-cover {
    display: block;
    width: 100%;
    max-height: 520px;
    margin: 25px 0;
    border-radius: 13px;
    object-fit: cover;
}

.student-blog-body {
    color: var(--student-detail-ink);
    line-height: 2.2;
}

.student-blog-layout {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 24px;
    text-align: start;
}

.student-blog-body,
.student-blog-header,
.student-related-blogs,
.student-related-blog-info {
    text-align: start;
}

.student-blog-body :is(h2, h3, h4) {
    margin: 28px 0 12px;
    color: var(--student-detail-ink);
    line-height: 1.8;
}

.student-blog-body :is(p, ul, ol) {
    margin-bottom: 16px;
}

.student-related-blogs {
    height: 100%;
    padding: 20px;
    border: 1px solid var(--student-detail-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}

.student-related-blogs-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.student-related-blogs-head > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #6777ef;
    border-radius: 11px;
    background: #eef0ff;
    place-items: center;
}

.student-related-blogs-head h2 { margin: 0; color: var(--student-detail-ink); font-size: 1rem; }
.student-related-blogs-head small { color: var(--student-detail-muted); font-size: .72rem; }

.student-related-blog-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    color: var(--student-detail-ink);
    border-top: 1px solid var(--student-detail-line);
}

.student-related-blog-card:hover { color: #6777ef; }
.student-related-blog-cover { width: 68px; height: 58px; flex: 0 0 68px; overflow: hidden; border-radius: 9px; background: var(--student-detail-soft); }
.student-related-blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.student-related-blog-cover > i { display: grid; width: 100%; height: 100%; color: #6777ef; place-items: center; }
.student-related-blog-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.student-related-blog-info strong { display: -webkit-box; overflow: hidden; font-size: .82rem; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.student-related-blog-info small { color: var(--student-detail-muted); font-size: .7rem; }
.student-related-blogs-empty { padding: 16px 0 4px; color: var(--student-detail-muted); font-size: .8rem; border-top: 1px solid var(--student-detail-line); }

@media (max-width: 767.98px) {
    .student-blog-layout { grid-template-columns: 1fr; }
    .student-related-blogs { height: auto; }
    .student-product-hero {
        grid-template-columns: 1fr;
    }

    .student-product-cover {
        min-height: 250px;
    }

    .student-product-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .student-product-item .student-product-item-count {
        margin-inline-start: 0;
    }
}
/* Keep finance gateway status text and its toggle on one visual line. */
.finance-settings-page .gateway-title-wrap {
    min-width: 0;
}

.finance-settings-page .gateway-toggle-control {
    flex: 0 0 auto;
    min-height: 1.5rem;
    white-space: nowrap;
}

.finance-settings-page .gateway-toggle-label,
.finance-settings-page .gateway-toggle-control .custom-control-label {
    margin-bottom: 0;
}

.finance-settings-page .gateway-toggle-control .custom-switch {
    flex: 0 0 auto;
    height: 1.5rem;
    margin: 0;
}

/* Optional Fluent 3D sidebar icon pack. */
.main-sidebar .sidebar-menu .sidebar-fluent-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-inline-end: 13px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(32, 39, 54, .14));
    transition: transform .2s ease, filter .2s ease;
}

.main-sidebar .sidebar-menu li > a:hover .sidebar-fluent-icon,
.main-sidebar .sidebar-menu li.active > a .sidebar-fluent-icon {
    transform: translateY(-1px) scale(1.06);
    filter: drop-shadow(0 5px 6px rgba(32, 39, 54, .2));
}

body.sidebar-mini .main-sidebar .sidebar-menu > li > a .sidebar-fluent-icon {
    margin-inline: auto;
}

/* Sidebar mini: keep every menu icon centered inside the active square. */
body.sidebar-mini .main-sidebar .sidebar-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li > a > i,
body.sidebar-mini .main-sidebar .sidebar-menu > li > a .sidebar-font-icon,
body.sidebar-mini .main-sidebar .sidebar-menu > li > a .sidebar-fluent-icon {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto;
    min-width: 0;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a > i,
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a .sidebar-font-icon,
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a .sidebar-fluent-icon {
    float: none !important;
    margin: 0 !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li > a span {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.sidebar-mini .main-sidebar .sidebar-menu li.active > a .sidebar-fluent-icon,
body.sidebar-mini .main-sidebar .sidebar-menu li > a:hover .sidebar-fluent-icon,
body.sidebar-mini .sidebar-menu-outline li.active > a .sidebar-font-icon,
body.sidebar-mini .sidebar-menu-outline li > a:hover .sidebar-font-icon,
body.sidebar-mini .sidebar-menu-soft li.active > a .sidebar-font-icon,
body.sidebar-mini .sidebar-menu-soft li > a:hover .sidebar-font-icon {
    transform: none;
}

/*
 * Keep management/action icons in list pages in sync with the icon pack
 * selected in panel settings. The selectors intentionally target semantic
 * Font Awesome action icons, so existing and newly-added lists inherit the
 * selected pack without page-specific markup.
 */
.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button) > :is(
    .fa-edit, .fa-pencil, .fa-trash, .fa-trash-alt, .fa-eye, .fa-user-check,
    .fa-plus, .fa-copy, .fa-download, .fa-print, .fa-key, .fa-check,
    .fa-times, .fa-play, .fa-pause, .fa-chart-bar, .fa-list
) {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-inline: 2px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 9px;
    color: #fff !important;
    background: linear-gradient(145deg, #7f8cff, #5364e8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        0 4px 9px rgba(69, 82, 180, .25);
    text-shadow: 0 1px 2px rgba(26, 34, 91, .28);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button):hover > :is(
    .fa-edit, .fa-pencil, .fa-trash, .fa-trash-alt, .fa-eye, .fa-user-check,
    .fa-plus, .fa-copy, .fa-download, .fa-print, .fa-key, .fa-check,
    .fa-times, .fa-play, .fa-pause, .fa-chart-bar, .fa-list
) {
    transform: translateY(-2px) scale(1.04);
    filter: saturate(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 6px 12px rgba(69, 82, 180, .32);
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button) > :is(.fa-edit, .fa-pencil) {
    background: linear-gradient(145deg, #56a8ff, #3377e8);
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button) > :is(.fa-trash, .fa-trash-alt, .fa-times) {
    background: linear-gradient(145deg, #ff7588, #e83f5b);
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button) > :is(.fa-eye, .fa-list) {
    background: linear-gradient(145deg, #a77bff, #7650d8);
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button) > :is(.fa-user-check, .fa-check, .fa-play) {
    background: linear-gradient(145deg, #4ed9a4, #20a979);
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) :is(a, button) > :is(.fa-plus, .fa-copy, .fa-download, .fa-print, .fa-key) {
    background: linear-gradient(145deg, #ffc768, #ec8f26);
}

.panel-icon-pack-colored :is(.table, .list-group, .card-body) .slider-delete-button {
    color: inherit;
}

/* Font-only panel packs: no extra image or network payload. */
.sidebar-menu-outline .sidebar-font-icon,
.sidebar-menu-soft .sidebar-font-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin-inline-end: 9px;
    border-radius: 9px;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}

.sidebar-menu-outline .sidebar-font-icon {
    color: transparent;
    -webkit-text-stroke: 1.15px #6c7590;
}

.sidebar-menu-outline li > a:hover .sidebar-font-icon,
.sidebar-menu-outline li.active > a .sidebar-font-icon {
    -webkit-text-stroke-color: #6777ef;
    transform: scale(1.06);
}

.sidebar-menu-soft .sidebar-font-icon,
.sidebar-icon-preview-soft {
    color: #5868d9;
    background: #eef0ff;
    box-shadow: inset 0 0 0 1px rgba(103, 119, 239, .1);
}

.sidebar-menu-soft li > a:hover .sidebar-font-icon,
.sidebar-menu-soft li.active > a .sidebar-font-icon {
    color: #fff;
    background: #6777ef;
    transform: translateY(-1px);
}

.sidebar-icon-preview-outline i {
    color: transparent;
    -webkit-text-stroke: 1.3px #6777ef;
}

.panel-icon-pack-outline :is(.table, .list-group, .card-body) :is(a, button) > i[class*="fa-"],
.panel-icon-pack-soft :is(.table, .list-group, .card-body) :is(a, button) > i[class*="fa-"] {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-inline: 2px;
    border-radius: 9px;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}

.panel-icon-pack-outline :is(.table, .list-group, .card-body) :is(a, button) > i[class*="fa-"] {
    color: transparent !important;
    border: 1px solid #d9ddea;
    background: transparent;
    -webkit-text-stroke: 1px #68718a;
}

.panel-icon-pack-outline :is(.table, .list-group, .card-body) :is(a, button):hover > i[class*="fa-"] {
    border-color: #6777ef;
    -webkit-text-stroke-color: #6777ef;
    transform: translateY(-1px);
}

.panel-icon-pack-soft :is(.table, .list-group, .card-body) :is(a, button) > i[class*="fa-"] {
    color: #5969d9 !important;
    background: #eef0ff;
}

.panel-icon-pack-soft :is(.table, .list-group, .card-body) :is(a, button):hover > i[class*="fa-"] {
    color: #fff !important;
    background: #6777ef;
    transform: translateY(-1px);
}

body.sidebar-mini .main-sidebar .sidebar-menu > li > a .sidebar-font-icon {
    margin-inline: auto;
}

/*
 * Unified management-table actions.
 * Every icon-only action receives a stable hit area and at least 6px visual
 * separation. Semantic colors stay consistent across every selectable pack.
 */
.table tbody td :is(a, button):has(> i[class*="fa-"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-inline: 3px !important;
}

.table tbody td form:has(> button > i[class*="fa-"]) {
    display: inline-block;
    margin: 0;
}

.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-edit, .fa-pencil) { color: #2878d0 !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-trash, .fa-trash-alt, .fa-times, .fa-ban) { color: #dc3545 !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-eye, .fa-search, .fa-list, .fa-file-alt) { color: #7650d8 !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-user-check, .fa-check, .fa-check-circle, .fa-play) { color: #15966b !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-credit-card, .fa-print, .fa-download, .fa-copy, .fa-key) { color: #d57b12 !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-box, .fa-book-open, .fa-certificate) { color: #138c96 !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-lock, .fa-pause) { color: #70798d !important; }
.panel-icon-pack-default .table tbody td :is(a, button) > :is(.fa-redo, .fa-refresh, .fa-sync) { color: #b58300 !important; }

.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-edit, .fa-pencil) { -webkit-text-stroke-color: #2878d0; border-color: #b9d7f5; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-trash, .fa-trash-alt, .fa-times, .fa-ban) { -webkit-text-stroke-color: #dc3545; border-color: #f1bbc1; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-eye, .fa-search, .fa-list, .fa-file-alt) { -webkit-text-stroke-color: #7650d8; border-color: #d2c4ef; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-user-check, .fa-check, .fa-check-circle, .fa-play) { -webkit-text-stroke-color: #15966b; border-color: #b5dfd1; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-credit-card, .fa-print, .fa-download, .fa-copy, .fa-key) { -webkit-text-stroke-color: #d57b12; border-color: #efd1a9; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-box, .fa-book-open, .fa-certificate) { -webkit-text-stroke-color: #138c96; border-color: #addde1; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-lock, .fa-pause) { -webkit-text-stroke-color: #70798d; border-color: #d3d7df; }
.panel-icon-pack-outline .table tbody td :is(a, button) > :is(.fa-redo, .fa-refresh, .fa-sync) { -webkit-text-stroke-color: #b58300; border-color: #ead99f; }

.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-edit, .fa-pencil) { color: #2878d0 !important; background: #e7f2fd; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-trash, .fa-trash-alt, .fa-times, .fa-ban) { color: #dc3545 !important; background: #fdebed; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-eye, .fa-search, .fa-list, .fa-file-alt) { color: #7650d8 !important; background: #f0ebfb; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-user-check, .fa-check, .fa-check-circle, .fa-play) { color: #15966b !important; background: #e5f6f0; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-credit-card, .fa-print, .fa-download, .fa-copy, .fa-key) { color: #d57b12 !important; background: #fff3df; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-box, .fa-book-open, .fa-certificate) { color: #138c96 !important; background: #e4f5f6; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-lock, .fa-pause) { color: #70798d !important; background: #eef0f4; }
.panel-icon-pack-soft .table tbody td :is(a, button) > :is(.fa-redo, .fa-refresh, .fa-sync) { color: #a87800 !important; background: #fff6d9; }

.panel-icon-pack-colored .table tbody td :is(a, button) > i[class*="fa-"] {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 9px;
    color: #fff !important;
    background: linear-gradient(145deg, #7f8cff, #5364e8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 4px 9px rgba(69, 82, 180, .25);
}

.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-edit, .fa-pencil) { background: linear-gradient(145deg, #56a8ff, #3377e8); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-trash, .fa-trash-alt, .fa-times, .fa-ban) { background: linear-gradient(145deg, #ff7588, #e83f5b); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-eye, .fa-search, .fa-list, .fa-file-alt) { background: linear-gradient(145deg, #a77bff, #7650d8); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-user-check, .fa-check, .fa-check-circle, .fa-play) { background: linear-gradient(145deg, #4ed9a4, #20a979); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-credit-card, .fa-print, .fa-download, .fa-copy, .fa-key) { background: linear-gradient(145deg, #ffc768, #ec8f26); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-box, .fa-book-open, .fa-certificate) { background: linear-gradient(145deg, #42ced5, #168f99); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-lock, .fa-pause) { background: linear-gradient(145deg, #9da5b8, #697286); }
.panel-icon-pack-colored .table tbody td :is(a, button) > :is(.fa-redo, .fa-refresh, .fa-sync) { background: linear-gradient(145deg, #f3cf62, #bd8b08); }

.sidebar-icon-style-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 14px 16px;
    border: 1px solid #e8e9ef;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sidebar-icon-style-card:has(input:checked) {
    border-color: #6777ef;
    background: rgba(103, 119, 239, .06);
    box-shadow: 0 5px 16px rgba(103, 119, 239, .12);
}

.sidebar-icon-style-card input {
    flex: 0 0 auto;
}

.sidebar-icon-style-preview {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #6777ef;
}

.sidebar-icon-style-preview img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
/* Links */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* Administration report center. */
.report-page { --report-ink: #27304a; --report-muted: #77809a; }
.report-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; padding:24px 28px; color:#fff; border-radius:16px; background:linear-gradient(135deg,#5265e8,#7650d8); box-shadow:0 10px 25px rgba(82,101,232,.2); }
.report-hero h1 { margin:3px 0 4px; color:#fff; font-size:1.55rem; font-weight:900; }
.report-hero p { margin:0; color:rgba(255,255,255,.78); }
.report-hero > i { font-size:3rem; opacity:.35; }
.report-kicker { font-size:.75rem; font-weight:800; letter-spacing:.04em; }
.report-stat { display:flex; align-items:center; height:100%; min-height:105px; gap:14px; padding:18px; border:1px solid #edf0f6; border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(36,46,80,.06); }
.report-stat > span { display:grid; width:48px; height:48px; flex:0 0 48px; color:#6777ef; border-radius:13px; background:#eef0ff; place-items:center; font-size:1.15rem; }
.report-stat div { display:flex; min-width:0; flex-direction:column; }
.report-stat small { color:var(--report-muted); }
.report-stat strong { color:var(--report-ink); font-size:1.35rem; font-weight:900; }
.report-stat-success > span { color:#19966b; background:#e7f7f1; }
.report-stat-info > span { color:#168f99; background:#e5f6f7; }
.report-stat-warning > span { color:#c48413; background:#fff4df; }
.report-stat-danger > span { color:#dc3545; background:#fdebed; }
.report-chart-card .card-body { min-height:260px; }
.report-table-head { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; }
.report-search { display:flex; align-items:center; gap:7px; }
.report-search .form-control { width:min(280px,55vw); }
.report-page .table th { white-space:nowrap; color:#626c87; font-size:.78rem; }
.report-page .table td { vertical-align:middle; }
.report-user-agent { max-width:330px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:575.98px){ .report-hero{padding:20px}.report-hero>i{display:none}.report-search{width:100%}.report-search .form-control{width:auto;flex:1}.report-stat{min-height:88px} }

/* Course certificate */
:root {
    --cert-accent: #e8b923;
    --cert-accent-soft: #f6e27a;
    --cert-ink: #5c4300;
    --cert-ink-muted: #8a6a14;
    --cert-badge-bg: linear-gradient(135deg, #fff4c2 0%, #ffe08a 100%);
    --cert-badge-border: rgba(232, 185, 35, .55);
    --cert-badge-color: var(--cert-ink);
    --cert-badge-icon: #b8860b;
    --cert-card-bg: linear-gradient(180deg, #fffbeb 0%, #fff8e1 100%);
    --cert-card-border: #d7b84a;
    --cert-card-color: var(--cert-ink);
    --cert-card-muted: var(--cert-ink-muted);
    --cert-seal-bg: linear-gradient(145deg, #ffe28a 0%, #e0a800 100%);
    --cert-seal-color: var(--cert-ink);
    --cert-seal-border: rgba(255, 255, 255, .9);
    --cert-seal-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    --cert-hero-badge-bg: rgba(255, 210, 122, .14);
    --cert-hero-badge-border: rgba(255, 210, 122, .42);
    --cert-hero-badge-color: #fff3cf;
    --cert-hero-badge-icon: #ffd27a;
    --course-hero-tag-bg: rgba(255, 255, 255, .12);
    --course-hero-tag-border: rgba(255, 255, 255, .22);
    --course-hero-tag-color: #fff3cf;
    --course-hero-tag-hover-bg: rgba(255, 255, 255, .22);
    --course-hero-tag-hover-border: rgba(255, 255, 255, .36);
    --course-hero-tag-hover-color: #fff;
    --course-card-tag-bg: #eef0ff;
    --course-card-tag-border: #d8deea;
    --course-card-tag-color: #5869db;
    --course-card-tag-hover-bg: #e3e7ff;
    --course-card-tag-hover-border: #c5ccf5;
    --course-card-tag-hover-color: #4556c9;
}

.course-certificate-panel {
    direction: inherit;
    text-align: start;
    color: var(--dark-text, #1f2a3d);
}

.course-certificate-panel .min-width-zero {
    min-width: 0;
}

.course-certificate-panel .certificate-muted,
.course-certificate-panel .text-muted {
    color: var(--dark-muted, #6f7b8f) !important;
}

.course-certificate-panel .certificate-warning-text {
    color: #c48a00;
}

.certificate-info-alert,
.certificate-enable-box,
.course-certificate-panel .certificate-canvas-card,
.course-certificate-panel .certificate-field-card {
    border: 1px solid var(--dark-border, #e3e8ef);
    border-radius: 12px;
    background: var(--dark-surface, #fff);
    color: inherit;
}

.certificate-info-alert,
.certificate-enable-box {
    padding: 14px 16px;
}

.certificate-info-icon {
    flex: 0 0 auto;
    margin-inline-end: .65rem;
}

.certificate-inline-icon {
    margin-inline-end: .4rem;
}

.certificate-enable-copy {
    flex: 1 1 auto;
    padding-inline-end: 12px;
}

.certificate-enable-title {
    display: block;
    font-weight: 700;
    color: var(--dark-text, #1f2a3d);
    cursor: pointer;
}

/* Keep switch geometry LTR so the knob stays usable in RTL pages. */
.certificate-enable-switch {
    direction: ltr;
    flex: 0 0 auto;
    padding-left: 2.25rem;
    padding-right: 0;
    margin-top: .15rem;
}

.certificate-enable-switch .custom-control-label::before {
    left: -2.25rem;
    right: auto;
}

.certificate-enable-switch .custom-control-label::after {
    left: calc(-2.25rem + 2px);
    right: auto;
}

.course-certificate-panel .certificate-canvas-head,
.course-certificate-panel .certificate-field-card {
    padding: 14px 16px;
}

.course-certificate-panel .certificate-canvas-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid var(--dark-border-soft, #eef2f7);
    background: var(--dark-surface-2, #f8fafc);
    text-align: start;
}

.course-certificate-panel .certificate-field-card {
    overflow: hidden;
}

.course-certificate-panel .certificate-field-card h6 {
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--dark-text, #1f2a3d);
}

.course-certificate-panel .certificate-field-card h6 i {
    margin-inline-end: 6px;
    color: var(--dark-primary, #6777ef);
}

.course-certificate-panel .certificate-field-card label {
    display: block;
    text-align: start;
}

.certificate-color-input {
    min-height: 38px;
    padding: 4px;
}

.certificate-canvas-wrap {
    position: relative;
    min-height: 280px;
    background-color: var(--dark-surface-2, #f8fafc);
    background-image:
        linear-gradient(45deg, var(--dark-border-soft, #f1f5f9) 25%, transparent 25%),
        linear-gradient(-45deg, var(--dark-border-soft, #f1f5f9) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--dark-border-soft, #f1f5f9) 75%),
        linear-gradient(-45deg, transparent 75%, var(--dark-border-soft, #f1f5f9) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.certificate-canvas-empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--dark-muted, #8b97a8);
    text-align: center;
    padding: 20px;
}

.certificate-canvas-empty i {
    font-size: 2rem;
    opacity: .55;
}

.certificate-canvas {
    position: relative;
    width: 100%;
    user-select: none;
    direction: ltr;
}

.certificate-canvas img {
    display: block;
    width: 100%;
    height: auto;
}

.certificate-marker {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--dark-surface, #fff);
    box-shadow: var(--dark-shadow, 0 8px 22px rgba(24, 40, 72, .18));
    color: var(--dark-text, #1f2a3d);
    font-size: .78rem;
    font-weight: 700;
    cursor: grab;
    white-space: nowrap;
}

.certificate-marker:active {
    cursor: grabbing;
}

.certificate-marker.is-name {
    border-color: var(--dark-primary, #6777ef);
    color: var(--dark-primary, #3b4ccc);
}

.certificate-marker.is-national {
    border-color: #3abaf4;
    color: #3abaf4;
}

.certificate-marker.is-dragging {
    opacity: .92;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.certificate-actions {
    text-align: start;
}

.course-certificate-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--cert-badge-border);
    border-radius: 999px;
    background: var(--cert-badge-bg);
    color: var(--cert-badge-color);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    vertical-align: middle;
}

.course-certificate-badge i {
    color: var(--cert-badge-icon);
    font-size: .75rem;
}

.student-course-meta .course-certificate-badge {
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    border-color: var(--cert-hero-badge-border);
    background: var(--cert-hero-badge-bg);
    color: var(--cert-hero-badge-color);
    font-size: .74rem;
    font-weight: 700;
}

.student-course-meta .course-certificate-badge i {
    color: var(--cert-hero-badge-icon);
    font-size: .74rem;
}

.course-card-header .course-title {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.course-card-header-title {
    padding-inline-end: 48px;
    width: 100%;
}

.course-card-cert-seal {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--cert-seal-border);
    background: var(--cert-seal-bg);
    color: var(--cert-seal-color);
    box-shadow: var(--cert-seal-shadow);
    line-height: 1;
}

.course-card-cert-seal svg {
    display: block;
    flex-shrink: 0;
}

.course-card-media {
    position: relative;
    display: grid;
    height: 170px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf0ff 0%, #e8faf4 100%);
    place-items: center;
}

.course-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-card-media-placeholder {
    color: #6777ef;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.course-meta-certificate {
    background: var(--cert-badge-bg) !important;
    color: var(--cert-badge-color) !important;
    border: 1px solid var(--cert-badge-border);
    font-weight: 700;
}

.course-meta-certificate i {
    color: var(--cert-badge-icon);
}

.student-course-certificate-card {
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed var(--cert-card-border);
    border-radius: 12px;
    background: var(--cert-card-bg);
    text-align: start;
    color: var(--cert-card-color);
}

.student-course-certificate-card .text-muted,
.student-course-certificate-card .certificate-muted {
    color: var(--cert-card-muted) !important;
}

.student-course-certificate-card .btn {
    width: 100%;
}

/* Profile page layout */
.profile-page-row {
    align-items: stretch;
}

.profile-page-col {
    margin-bottom: 0;
}

.profile-page-col + .profile-page-col {
    margin-top: 0;
}

@media (max-width: 1199.98px) {
    .profile-page-col + .profile-page-col {
        margin-top: 1rem;
    }
}

.profile-page-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-page-stack .profile-page-stack-card {
    margin-bottom: 0;
}

.profile-page-stack .profile-page-stack-card + .profile-page-stack-card {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.profile-page-stack .profile-page-stack-card:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

@media (min-width: 992px) {
    .profile-page-admin-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .profile-page-admin-grid .profile-page-stack-card,
    .profile-page-admin-grid .profile-page-stack-card + .profile-page-stack-card {
        height: 100%;
        margin-top: 0;
        border-radius: .25rem;
    }
}

.profile-page-side-card {
    margin-bottom: 0;
}

.profile-contact-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0 !important;
}

/* Student course page */
.student-course-page {
    --course-ink: #172033;
    --course-muted: #6f7a8c;
    --course-line: #e4eaf2;
    --course-surface: #fff;
    --course-soft: #f5f8fc;
    --course-accent: #176b78;
    --course-accent-2: #0f4f59;
    direction: inherit;
    color: var(--course-ink);
}

.student-course-page[dir="rtl"].text-start,
.student-course-page[dir="rtl"] .text-start {
    direction: rtl;
    text-align: right !important;
}

.student-course-page[dir="ltr"].text-start,
.student-course-page[dir="ltr"] .text-start {
    direction: ltr;
    text-align: left !important;
}

.student-course-text.text-start * {
    text-align: inherit !important;
}

.student-course-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 210px;
    margin-bottom: 18px;
    padding: 30px 34px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 210, 122, .22), transparent 28%),
        linear-gradient(125deg, #0b3540 0%, #176b78 58%, #238a8d 100%);
    box-shadow: 0 18px 38px rgba(15, 79, 89, .18);
}

.student-course-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -55px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border: 42px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.student-course-hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.student-course-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .72rem;
}

.student-course-hero h1 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    font-weight: 900;
    line-height: 1.5;
}

.student-course-hero p {
    max-width: 680px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .86rem;
    line-height: 1.9;
}

.student-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.student-course-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(4, 30, 36, .25);
    font-size: .74rem;
}

.student-course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.student-course-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid var(--course-hero-tag-border);
    border-radius: 999px;
    background: var(--course-hero-tag-bg);
    color: var(--course-hero-tag-color);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.student-course-tag:hover,
.student-course-tag:focus {
    background: var(--course-hero-tag-hover-bg);
    border-color: var(--course-hero-tag-hover-border);
    color: var(--course-hero-tag-hover-color);
    text-decoration: none;
}

.course-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.course-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--course-card-tag-border);
    border-radius: 999px;
    background: var(--course-card-tag-bg);
    color: var(--course-card-tag-color);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.course-card-tag:hover,
.course-card-tag:focus {
    background: var(--course-card-tag-hover-bg);
    border-color: var(--course-card-tag-hover-border);
    color: var(--course-card-tag-hover-color);
    text-decoration: none;
}

.student-course-count {
    position: relative;
    z-index: 1;
    width: 116px;
    height: 116px;
    flex: 0 0 116px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.student-course-count strong {
    font-size: 2rem;
    line-height: 1;
}

.student-course-count span {
    margin-top: 7px;
    font-size: .72rem;
}

.student-course-progress-ring {
    --progress: 0;
    position: relative;
    z-index: 1;
    width: 126px;
    height: 126px;
    flex: 0 0 126px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#ffd27a calc(var(--progress) * 1%), rgba(255, 255, 255, .16) 0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.student-course-progress-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    background: #125864;
}

.student-course-progress-ring > div {
    position: relative;
    display: grid;
    gap: 4px;
    text-align: center;
}

.student-course-progress-ring strong {
    font-size: 1.55rem;
}

.student-course-progress-ring span {
    color: rgba(255, 255, 255, .76);
    font-size: .68rem;
}

.student-course-layout {
    align-items: flex-start;
}

.student-course-summary,
.student-course-sections {
    border: 1px solid var(--course-line);
    border-radius: 16px;
    background: var(--course-surface);
    box-shadow: 0 10px 26px rgba(25, 41, 70, .06);
}

.student-course-summary {
    position: sticky;
    top: 88px;
    padding: 16px;
}

.student-course-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--course-line);
}

.student-course-summary-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--course-accent);
    background: #e8f4f4;
}

.student-course-summary h2,
.student-course-sections h2 {
    margin: 0;
    font-size: .95rem;
    font-weight: 900;
}

.student-course-summary-head div > span,
.student-course-sections-kicker {
    color: var(--course-muted);
    font-size: .68rem;
}

.student-course-stat-list {
    padding: 8px 0;
}

.student-course-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--course-line);
    font-size: .75rem;
}

.student-course-stat > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--course-muted);
}

.student-course-stat strong {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .74rem;
}

.student-course-progress {
    padding-top: 10px;
}

.student-course-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: var(--course-muted);
    font-size: .68rem;
}

.student-course-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--course-soft);
}

.student-course-progress-track span {
    display: block;
    width: 18%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--course-accent), #e0a84f);
}

.student-course-sections {
    overflow: hidden;
}

.student-course-sections-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--course-line);
}

.student-course-total {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--course-accent);
    background: #e8f4f4;
    font-size: .7rem;
    font-weight: 800;
}

.student-course-accordion {
    display: grid;
    gap: 9px;
    padding: 12px;
}

.student-course-section {
    overflow: hidden;
    border: 1px solid var(--course-line);
    border-radius: 12px;
    background: var(--course-surface);
}

.student-course-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 0;
    color: var(--course-ink);
    background: var(--course-soft);
    text-align: start;
    cursor: pointer;
}

.student-course-section-toggle:focus {
    outline: 2px solid rgba(23, 107, 120, .28);
    outline-offset: -2px;
}

.student-course-section-number {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--course-line);
    border-radius: 9px;
    color: var(--course-accent);
    background: var(--course-surface);
    font-size: .75rem;
    font-weight: 900;
}

.student-course-section-type-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--course-line);
    border-radius: 11px;
    color: var(--course-accent);
    background: var(--course-surface);
}

.student-course-section.is-exam {
    border-color: rgba(217, 145, 38, .42);
    background: #fffaf1;
}

.student-course-section.is-exam .student-course-section-toggle {
    background: #fff6e5;
}

.student-course-section.is-exam .student-course-section-type-icon {
    color: #b66e0a;
    background: #ffedc9;
    border-color: #f4d79e;
}

.student-course-section.is-locked {
    opacity: .7;
}

.student-course-section.is-locked .student-course-section-toggle {
    cursor: not-allowed;
}

.student-course-section-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--course-muted);
    background: var(--course-surface);
    font-size: .65rem;
    white-space: nowrap;
}

.student-course-section-status.is-done {
    color: #16835b;
    background: #e5f7ef;
}

.student-course-exam-block {
    padding: 18px;
    border: 1px dashed #e7bd73;
    border-radius: 12px;
    background: #fffaf1;
}

.student-course-exam-block p {
    color: var(--course-muted);
    font-size: .76rem;
}

.student-course-exam-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #bfe8d4;
    border-radius: 10px;
    color: #157553;
    background: #ecfaf3;
    font-size: .76rem;
}

.student-course-exam-result span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

.student-course-exam-result strong {
    font-size: 1rem;
}

.student-course-exam-result small {
    color: var(--course-muted);
}

.student-course-section-title {
    min-width: 0;
    flex: 1;
}

.student-course-section-title strong,
.student-course-section-title small {
    display: block;
}

.student-course-section-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}

.student-course-section-title small {
    margin-top: 3px;
    color: var(--course-muted);
    font-size: .66rem;
}

.student-course-section-title small i {
    margin-inline-end: 4px;
}

.student-course-section-arrow {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--course-muted);
    background: var(--course-surface);
}

.student-course-section-arrow i {
    transition: transform .2s ease;
}

.student-course-section.is-open {
    border-color: rgba(23, 107, 120, .35);
}

.student-course-section.is-open .student-course-section-toggle {
    background: #edf7f7;
}

.student-course-section.is-open .student-course-section-arrow i {
    transform: rotate(180deg);
}

.student-course-section-content {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.student-course-content-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--course-muted);
    font-size: .72rem;
    font-weight: 700;
}

.student-course-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #0b111b;
}

.student-course-video iframe,
.student-course-video video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.student-course-text {
    padding: 15px;
    overflow-wrap: anywhere;
    border: 1px solid var(--course-line);
    border-radius: 11px;
    color: #3f4c60;
    background: var(--course-soft);
    font-size: .82rem;
    line-height: 2;
}

.student-course-text img,
.student-course-text video,
.student-course-text iframe {
    max-width: 100%;
}

.student-course-no-content,
.student-course-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    color: var(--course-muted);
}

.student-course-empty span {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--course-soft);
    font-size: 1.2rem;
}

.student-course-empty h3 {
    margin: 0;
    font-size: .9rem;
}

@media (max-width: 991.98px) {
    .student-course-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .student-course-hero {
        min-height: 0;
        align-items: flex-start;
        padding: 20px;
        border-radius: 15px;
    }

    .student-course-count {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        border-radius: 20px;
    }

    .student-course-progress-ring {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }

    .student-course-progress-ring::before {
        inset: 7px;
    }

    .student-course-progress-ring strong {
        font-size: 1rem;
    }

    .student-course-progress-ring span {
        font-size: .55rem;
    }

    .student-course-count strong {
        font-size: 1.35rem;
    }

    .student-course-count span {
        font-size: .62rem;
    }

    .student-course-hero p {
        display: none;
    }

    .student-course-meta {
        display: grid;
    }

    .student-course-section-content {
        padding: 11px;
    }

    .student-course-section-status {
        display: none;
    }
}

/* Icon + text spacing across panel UI */
.btn,
a.btn,
button.btn,
input.btn[type="submit"],
input.btn[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.btn.btn-block {
    display: flex;
}

a:has(> i[class*="fa-"]),
a:has(> i.fa),
a:has(> i.fas),
a:has(> i.far),
a:has(> i.fab),
button:has(> i[class*="fa-"]),
button:has(> i.fa),
button:has(> i.fas),
button:has(> i.far),
button:has(> i.fab) {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.quick-link,
.student-detail-back,
.catalog-promo-badge,
.catalog-badge-purchased,
.student-product-item-meta span,
.meta-item,
.student-course-hero-meta span,
.student-course-meta span,
.student-product-empty,
.exam-student-info .label,
.exam-info-row .label,
.student-course-content-label,
.report-stat-card span,
.discount-search-actions .btn,
.discount-search-actions a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.alert > i[class*="fa-"]:first-child,
.alert > i.fa:first-child,
h4 > i[class*="fa-"]:first-child,
h5 > i[class*="fa-"]:first-child,
h6 > i[class*="fa-"]:first-child,
.label > i[class*="fa-"]:first-child,
div[class*="label"] > i[class*="fa-"]:first-child {
    margin-inline-end: .45rem;
}

.btn > i[class*="fa-"]:last-child:not(:first-child),
.btn > i.fa:last-child:not(:first-child) {
    margin-inline-start: .45rem;
    margin-inline-end: 0;
}

.purchase-terms-content :last-child {
    margin-bottom: 0;
}

.student-checkout-page .alert .btn + .btn,
.student-checkout-result .card-footer .btn + .btn {
    margin-inline-start: .5rem;
}

.student-checkout-result .card-footer .d-flex > .btn + .btn {
    margin-inline-start: .75rem;
}

.money-format {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.money-format-value {
    direction: ltr;
    unicode-bidi: isolate;
}

.money-format-currency {
    unicode-bidi: plaintext;
}

/* Dashboard widget customizer (WordPress-style) */
.admin-dashboard[data-dashboard-customizable="1"] {
    position: relative;
}

.dashboard-screen-options-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .35rem;
}

.dashboard-screen-options {
    position: relative;
    z-index: 20;
}

.dashboard-screen-options-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(117, 128, 149, .22);
    border-radius: .45rem;
    background: rgba(255, 255, 255, .92);
    color: #667085;
    font-size: .82rem;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.dashboard-screen-options-toggle:hover,
.dashboard-screen-options-toggle[aria-expanded="true"] {
    opacity: 1;
    border-color: rgba(80, 108, 240, .35);
    color: #506cf0;
    box-shadow: 0 4px 14px rgba(80, 108, 240, .12);
}

.dashboard-screen-options-panel {
    position: absolute;
    top: calc(100% + .45rem);
    inset-inline-end: 0;
    width: min(18rem, calc(100vw - 2rem));
    padding: .85rem 1rem;
    border: 1px solid rgba(117, 128, 149, .18);
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.dashboard-screen-options-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dashboard-screen-options-title {
    font-size: .88rem;
    font-weight: 700;
    color: #344054;
    margin-bottom: .25rem;
}

.dashboard-screen-options-hint {
    font-size: .75rem;
    color: #98a2b3;
    margin-bottom: .65rem;
}

.dashboard-screen-options-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow: auto;
}

.dashboard-screen-options-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem 0;
    margin: 0;
    font-size: .82rem;
    color: #475467;
    cursor: pointer;
}

.dashboard-screen-options-item input {
    margin: 0;
    flex-shrink: 0;
}

.dashboard-widgets-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.dashboard-widgets-grid > .dashboard-widget {
    float: none !important;
    position: relative;
}

.dashboard-widget-inner {
    position: relative;
    height: 100%;
}

.dashboard-widget-inner .panel-head,
.dashboard-widget-inner .metric-card {
    padding-inline-end: 2.85rem;
}

.dashboard-widget-controls {
    position: absolute;
    top: .45rem;
    inset-inline-end: .45rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.dashboard-widget:hover .dashboard-widget-controls,
.dashboard-is-sorting .dashboard-widget-controls {
    opacity: 1;
    pointer-events: auto;
}

.dashboard-widget-handle,
.dashboard-widget-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: none;
    border-radius: .35rem;
    background: rgba(255, 255, 255, .88);
    color: #98a2b3;
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
    opacity: .35;
    transition: opacity .2s ease, color .2s ease, background .2s ease;
}

.dashboard-widget:hover .dashboard-widget-handle,
.dashboard-widget:hover .dashboard-widget-dismiss,
.dashboard-is-sorting .dashboard-widget-handle {
    opacity: .65;
}

.dashboard-widget-handle:hover {
    opacity: 1;
    color: #506cf0;
    background: rgba(80, 108, 240, .1);
    cursor: move;
}

.dashboard-widget-dismiss:hover {
    opacity: 1;
    color: #d75b75;
    background: rgba(215, 91, 117, .12);
}

.dashboard-widget-hidden {
    display: none !important;
}

.dashboard-widget-placeholder {
    min-height: 6rem;
    margin-bottom: 1.5rem;
    border: 2px dashed rgba(80, 108, 240, .28);
    border-radius: .75rem;
    background: rgba(80, 108, 240, .04);
    box-sizing: border-box;
    flex: 0 0 auto;
}

.dashboard-widget .dashboard-slider {
    margin-bottom: 0 !important;
}

.dashboard-widget .panel,
.dashboard-widget .metric-card {
    height: 100%;
}

.dashboard-is-sorting .dashboard-widget {
    cursor: move;
}

.dashboard-is-sorting .dashboard-widget-inner {
    user-select: none;
}