/*
==========================================================
A SQUARE L INNOVATE DESIGN SYSTEM (ASLDS)
Version: 1.0.0
File: utilities.css
Author: A Square L Innovate

Description:
Global utility classes for rapid development.

==========================================================
*/


/* ======================================================
   DISPLAY
====================================================== */

.d-none{display:none!important;}
.d-block{display:block!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-flex{display:flex!important;}
.d-grid{display:grid!important;}


/* ======================================================
   FLEX
====================================================== */

.flex-row{flex-direction:row;}
.flex-column{flex-direction:column;}

.flex-wrap{flex-wrap:wrap;}
.flex-nowrap{flex-wrap:nowrap;}

.justify-start{justify-content:flex-start;}
.justify-center{justify-content:center;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.justify-evenly{justify-content:space-evenly;}

.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.items-end{align-items:flex-end;}
.items-stretch{align-items:stretch;}

.gap-xs{gap:4px;}
.gap-sm{gap:8px;}
.gap-md{gap:16px;}
.gap-lg{gap:24px;}
.gap-xl{gap:32px;}


/* ======================================================
   WIDTH
====================================================== */

.w-25{width:25%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

.h-100{height:100%;}

.min-vh-100{
    min-height:100vh;
}


/* ======================================================
   MARGIN
====================================================== */

.m-0{margin:0;}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}
.mt-5{margin-top:48px;}

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}
.mb-5{margin-bottom:48px;}

.mx-auto{
    margin-left:auto;
    margin-right:auto;
}


/* ======================================================
   PADDING
====================================================== */

.p-0{padding:0;}

.p-1{padding:8px;}
.p-2{padding:16px;}
.p-3{padding:24px;}
.p-4{padding:32px;}
.p-5{padding:48px;}

.py-1{
    padding-top:8px;
    padding-bottom:8px;
}

.py-2{
    padding-top:16px;
    padding-bottom:16px;
}

.py-3{
    padding-top:24px;
    padding-bottom:24px;
}

.px-2{
    padding-left:16px;
    padding-right:16px;
}

.px-3{
    padding-left:24px;
    padding-right:24px;
}


/* ======================================================
   TEXT
====================================================== */

.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}

.text-white{color:var(--white);}
.text-gold{color:var(--primary-gold);}
.text-muted{color:var(--gray-400);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.text-warning{color:var(--warning);}
.text-info{color:var(--info);}

.fw-normal{font-weight:400;}
.fw-medium{font-weight:500;}
.fw-bold{font-weight:700;}
.fw-extra-bold{font-weight:800;}


/* ======================================================
   BACKGROUND
====================================================== */

.bg-primary{
    background:var(--primary-gold);
}

.bg-card{
    background:var(--card-bg);
}

.bg-surface{
    background:var(--surface);
}

.bg-transparent{
    background:transparent;
}


/* ======================================================
   BORDER RADIUS
====================================================== */

.rounded-sm{
    border-radius:var(--radius-sm);
}

.rounded{
    border-radius:var(--radius-md);
}

.rounded-lg{
    border-radius:var(--radius-lg);
}

.rounded-xl{
    border-radius:var(--radius-xl);
}

.rounded-circle{
    border-radius:50%;
}


/* ======================================================
   SHADOW
====================================================== */

.shadow-sm{
    box-shadow:var(--shadow-sm);
}

.shadow{
    box-shadow:var(--shadow-md);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

.shadow-xl{
    box-shadow:var(--shadow-xl);
}


/* ======================================================
   POSITION
====================================================== */

.position-relative{
    position:relative;
}

.position-absolute{
    position:absolute;
}

.position-fixed{
    position:fixed;
}

.top-0{top:0;}
.bottom-0{bottom:0;}
.left-0{left:0;}
.right-0{right:0;}


/* ======================================================
   OVERFLOW
====================================================== */

.overflow-hidden{
    overflow:hidden;
}

.overflow-auto{
    overflow:auto;
}


/* ======================================================
   CURSOR
====================================================== */

.cursor-pointer{
    cursor:pointer;
}


/* ======================================================
   TRANSITIONS
====================================================== */

.transition{
    transition:var(--transition-normal);
}


/* ======================================================
   GOLD GLOW UTILITIES
   Apply to any section or card for a premium gold
   ambient glow. Elements must have layout context.
====================================================== */

.bg-glow-top {
    position: relative;
    isolation: isolate;
}

.bg-glow-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top center,
        var(--gold-glow-medium),
        transparent 60%
    );
    pointer-events: none;
    z-index: -1;
}

.bg-glow-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bg-glow-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        var(--gold-glow-strong) 0%,
        var(--gold-glow-soft) 35%,
        transparent 72%
    );
    pointer-events: none;
    z-index: -1;
    animation: glowPulse 7s infinite alternate ease-in-out;
}

.bg-sheen-gold {
    position: relative;
    isolation: isolate;
}

.bg-sheen-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--gold-glow-medium),
        transparent 40%,
        transparent 60%,
        var(--gold-glow-soft)
    );
    pointer-events: none;
    z-index: 1;
}

/* ======================================================
   SPACING — additional padding/margin (extends existing)
====================================================== */

.p-6      { padding: var(--space-5); }              /* 40px */
.py-4     { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5     { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.px-4     { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5     { padding-left: var(--space-5); padding-right: var(--space-5); }

.ml-auto  { margin-left: auto; }
.mr-auto  { margin-right: auto; }

/* ======================================================
   ICON COLUMN — fixed-width icon for menu rows
====================================================== */

.icon-fixed {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ======================================================
   EMPTY STATE — loading / no-data placeholder block
====================================================== */

.is-empty {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--gray-500);
}


/* ======================================================
   EMPTY STATE — loading / no-data placeholder block
====================================================== */

.is-empty {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--gray-500);
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:768px){

.mobile-hidden{
    display:none!important;
}

.mobile-full{
    width:100%!important;
}

}


.lesson-num {
    min-width: 26px;
    display: inline-block;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}


.mono {
    font-family: Consolas, "Courier New", monospace;
}

/* ---------- WIDGET LIST ITEM — used in admin dashboard lists ---------- */

.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-color);
}

.list-row:last-child {
    border-bottom: none;
}

.list-row-body {
    flex: 1;
    min-width: 0;
}

.list-row-body strong,
.list-row-body div {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row-time {
    color: var(--gray-500);
    font-size: var(--fs-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- WIDGET LIST ITEM — used in admin dashboard lists ---------- */

.list-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-color);
}

.list-row:last-child {
    border-bottom: none;
}

.list-row-body {
    flex: 1;
    min-width: 0;
}

.list-row-body strong,
.list-row-body div {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row-time {
    color: var(--gray-500);
    font-size: var(--fs-xs);
    white-space: nowrap;
    flex-shrink: 0;
}


/* ======================================================
   FILTER CHIP — toggleable filter button
   (admin students page, can be reused anywhere)
====================================================== */

.filter-chip {
    padding: 6px 14px;
    border-radius: var(--radius-round);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--gray-400);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}

.filter-chip:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.filter-chip.is-active {
    background: var(--primary-gold);
    color: var(--black);
    border-color: var(--primary-gold);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.filter-bar-label {
    font-size: var(--fs-sm);
    color: var(--gray-500);
    font-weight: 600;
    margin-right: var(--space-1);
}

.filter-bar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 var(--space-1);
}

.filter-bar .search-box {
    flex: 1;
    min-width: 240px;
}

.filter-bar select.form-control {
    width: auto;
    height: 40px;
    padding: 0 var(--space-2);
    font-size: var(--fs-sm);
}