/* ============================================================
   css/main.css  — Global overrides and shared utility classes
   FIXES:
   1. box-shadow focus ring: replaced invalid rgba(var(--primary-color), .25)
      with rgba(var(--primary-rgb), .25). --primary-rgb holds raw channel
      values (e.g. 37, 99, 235) which is what rgba() actually requires.
   2. .alert-primary: now uses CSS vars so it themes correctly in dark mode.
   3. Removed duplicate hover-lift / hover-shadow definitions that also
      appeared in payments-list.css; one canonical copy lives here.
   ============================================================ */

/* ── Hover lift utility ────────────────────────────────────── */
.hover-lift {
    transition: var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

.hover-shadow {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.hover-shadow:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* ── Spinner alignment inside buttons ───────────────────────── */
.btn .fa-spinner {
    vertical-align: middle;
}

/* ── Alert theming ───────────────────────────────────────────── */
/* FIXED: was hardcoded hex; now uses vars so dark mode works.  */
.alert-primary {
    color:            var(--primary-dark);
    background-color: rgba(var(--primary-rgb), 0.12);
    border-color:     rgba(var(--primary-rgb), 0.30);
}

/* ── Force Bootstrap components to respect theme vars ─────────── */
.list-group-item {
    background-color: var(--bg-card);
    border-color:     var(--border-color);
    color:            var(--text-secondary);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--bg-body);
}

/* ── Form controls ───────────────────────────────────────────── */
.form-select,
.form-control {
    background-color: var(--bg-body);
    color:            var(--text-primary);
    border-color:     var(--border-color);
}

/* FIXED: was rgba(var(--primary-color), 0.25) — invalid.
   Now uses --primary-rgb channel values.                       */
.form-select:focus,
.form-control:focus {
    color:            var(--text-primary);
    background-color: var(--bg-card);
    border-color:     var(--primary-color);
    box-shadow:       0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

/* ── Modal theming ───────────────────────────────────────────── */
.modal-content {
    background-color: var(--bg-card);
    color:            var(--text-primary);
    border-color:     var(--border-color);
}
.modal-header { border-bottom-color: var(--border-color); }
.modal-footer { border-top-color:    var(--border-color); }

/* ── Content approval card animation ─────────────────────────── */
.border-left-warning {
    border-left: 0.25rem solid var(--warning-color) !important;
}

#content-approval-container .card-body {
    transition: opacity 0.3s ease;
}

/* ── Login / hero background image ─────────────────────────────── */
/* FIXED: login-img.jpg was deleted from the server (see File Manager —
   only default-avatar.png, site-img.jpg, start-school.jpg remain).
   Path resolves from css/main.css → ../assets/images/site-img.jpg
   which is root/assets/images/site-img.jpg — matches the tree.     */
.custom-bg-img {
    background-image:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../assets/images/site-img.jpg');
    background-position: center;
    background-size:     cover;
    background-repeat:   no-repeat;
}

.hiro-background{
        background-image:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../assets/images/site-img.jpg');
        background-position: center;
        background-size:     cover;
        background-repeat:   no-repeat;
}
.start-journey-img{
        background-image:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('../assets/images/start-school.jpg');
        background-position: center;
        background-size:     cover;
        background-repeat:   no-repeat;
}

/* ── Utility ─────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}