/* ===== Core variables ===== */
:root {
    --body-bg: #F8F8F8;
    --body-color: #6E6B7B;
    --border-color: #EBE9F1;
    --text-dark: #5E5873;
    --text-muted: #B9B9C3;

    /* Using competitor's color variables for consistency */
    --primary: #009C4D;
    --success: #28C76F;
    --danger: #EA5455;
    --warning: #FF9F43;
    --info: #00CFE8;
    --secondary: #82868B;
}

/* ===== Base styles ===== */
[data-usn-if] {
    display: none;
}

*,
::after,
::before {
    box-sizing: border-box;
}


/* ===== Custom scrollbar (inspired by perfect-scrollbar) ===== */
.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}

.ps__rail-x,
.ps__rail-y {
    display: none;
    opacity: 0;
    position: absolute;
}

.ps__rail-x {
    height: 15px;
    bottom: 0;
}

.ps__rail-y {
    width: 15px;
    right: 0;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    display: block;
    background-color: transparent;
}

.ps__thumb-x,
.ps__thumb-y {
    background-color: #aaa;
    border-radius: 6px;
    position: absolute;
}

.ps__thumb-x {
    height: 6px;
    bottom: 2px;
}

.ps__thumb-y {
    width: 6px;
    right: 2px;
}

/* ===== Admin-specific styles ===== */

/* Course status badges */
.status-badge-active {
    background: rgba(40, 199, 111, 0.15);
    color: var(--success);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
}

.status-badge-upcoming {
    background: rgba(0, 207, 232, 0.15);
    color: var(--info);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
}

.status-badge-completed {
    background: rgba(130, 134, 139, 0.15);
    color: var(--secondary);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
}

.status-badge-paused {
    background: rgba(255, 159, 67, 0.15);
    color: var(--warning);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
}

/* ===== Reports table ===== */
.reports-table th {
    white-space: nowrap;
}

/* ===== Student list extras ===== */
.student-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===== Finance page ===== */
.finance-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
}

.finance-income {
    color: var(--success);
}

.finance-expense {
    color: var(--danger);
}

.finance-profit {
    color: var(--primary);
}

/* ===== Lead card extras ===== */
.lead-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
}

.lead-course {
    font-size: 12px;
    color: var(--text-muted);
}

.lead-phone {
    font-size: 12px;
    color: var(--body-color);
}

/* ===== Salary badge ===== */
.salary-paid {
    background: rgba(40, 199, 111, 0.12);
    color: var(--success);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
}

.salary-unpaid {
    background: rgba(234, 84, 85, 0.12);
    color: var(--danger);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
}

.salary-partial {
    background: rgba(255, 159, 67, 0.12);
    color: var(--warning);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
}