/* AMET - ASP.NET admin styles */
:root{--bg:#f4f2ff;--surface:#fff;--text:#241b3d;--muted:#6b6488;--border:#e4e0f5;--danger:#d6204f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;min-height:100vh}
form{margin:0}h1,h2,h3{margin:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.brand img{width:80px;height:80px}
label{display:block;font-weight:700;font-size:14px;margin:12px 0 5px}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{width:100%;padding:11px 13px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:3px solid var(--c,#6a4cff);outline-offset:1px;border-color:transparent}
.btn,.logout,.btn-full,.menu-btn{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:11px 20px;font-weight:700;color:#fff;background:var(--c,#6a4cff)}
.btn:focus-visible,.btn-full:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.btn-full{width:100%;margin-top:18px;background:linear-gradient(90deg,#ff4d8d,#6a4cff)}
.btn-del{display:inline-block;background:var(--danger);color:#fff;padding:6px 12px;font-size:13px;font-weight:700;border-radius:10px;text-decoration:none}
.msg,.error{color:var(--danger);font-weight:700;display:block;margin-top:10px}
.ok{color:#1b9e5a}
.val{color:var(--danger);font-size:13px}
.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.btn-cancel {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #334155 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

    .btn-cancel:hover {
        background: #cbd5e1;
    }

/* login */
.login-page{display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#ff4d8d,#ff9f1c 35%,#2ec4b6 70%,#6a4cff)}
.login-box{background:var(--surface);width:100%;max-width:400px;border-radius:24px;padding:32px;box-shadow:0 20px 50px rgba(36,27,61,.35)}
.login-box .brand{flex-direction:column;text-align:center}
.login-box .brand img{width:120px;height:120px}
.login-box p{text-align:center;color:var(--muted)}

/* layout */
.layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#3a1c8f,#6a4cff 60%,#d63ba8);color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .brand{font-size:18px;padding:0 6px 16px}
.sidebar .brand small{display:block;font-weight:400;font-size:12px;opacity:.85}
.nav{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:#fff;text-decoration:none;font-weight:700}
.nav i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.nav:hover,.nav.on{background:rgba(255,255,255,.2)}
.nav.on{box-shadow:inset 4px 0 var(--c)}
.subnav{margin-left:22px;display:flex;flex-direction:column;gap:2px}
.subnav a{color:#fff;text-decoration:none;padding:7px 10px;border-radius:10px;font-size:14px;opacity:.9}
.subnav a.on{background:rgba(255,255,255,.22);font-weight:700;opacity:1}
.logout{margin-top:auto;background:rgba(255,255,255,.18)}
main{padding:26px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.menu-btn{display:none}

/* section colours */
.sec-dashboard{--c:#ffb300}.sec-course{--c:#ff4d8d}.sec-user{--c:#2ec4b6}.sec-staff{--c:#ff9f1c}.sec-contact{--c:#4cc9f0}.sec-password{--c:#8a5cff}
.section{background:var(--surface);border-radius:20px;border-top:8px solid var(--c);padding:24px;box-shadow:0 6px 20px rgba(60,40,140,.1);margin-bottom:20px}
.section h2{color:var(--c);margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
.wide{grid-column:1/-1}
.empty{color:var(--muted);padding:16px 0}

/* ===== Dashboard (append to the end of style.css) ===== */

/* welcome banner */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
    padding: 30px 34px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(120deg,#1d1946 0%,#3a2f95 55%,#5b5bd6 100%);
    box-shadow: 0 14px 34px rgba(58,47,149,.28)
}

.hero-text {
    position: relative;
    z-index: 1;
    min-width: 0
}

.hero-date {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #c9c6f2
}

.hero h2 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff
}

.hero-sub {
    margin: 8px 0 20px;
    color: #d7d5f5;
    max-width: 46ch
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.hbtn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    transition: background .15s
}

    .hbtn:hover {
        background: rgba(255,255,255,.24)
    }

    .hbtn.primary {
        background: #fff;
        color: #2b2370;
        border-color: #fff
    }

        .hbtn.primary:hover {
            background: #ececff
        }

    .hbtn:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px
    }

.hero-art {
    position: absolute;
    right: -30px;
    top: -40px;
    bottom: -40px;
    width: 340px;
    pointer-events: none
}

    .hero-art span {
        position: absolute;
        border-radius: 50%
    }

        .hero-art span:nth-child(1) {
            width: 230px;
            height: 230px;
            right: 30px;
            top: 10px;
            background: rgba(255,255,255,.07)
        }

        .hero-art span:nth-child(2) {
            width: 140px;
            height: 140px;
            right: 150px;
            bottom: 20px;
            background: rgba(232,70,124,.35)
        }

        .hero-art span:nth-child(3) {
            width: 70px;
            height: 70px;
            right: 70px;
            bottom: 60px;
            background: rgba(245,164,0,.55)
        }

/* key number cards */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 16px;
    margin-bottom: 22px
}

.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    transition: transform .15s,box-shadow .15s,border-color .15s
}

    .kpi:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb,var(--k) 45%,var(--border));
        box-shadow: 0 14px 30px color-mix(in srgb,var(--k) 18%,transparent)
    }

    .kpi:focus-visible {
        outline: 3px solid var(--k);
        outline-offset: 2px
    }

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    color: var(--k);
    background: color-mix(in srgb,var(--k) 14%,var(--surface))
}

    .kpi-icon svg {
        width: 22px;
        height: 22px
    }

.kpi-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted)
}

.kpi-num {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text)
}

.kpi-link {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--k)
}

.bar {
    display: block;
    height: 6px;
    margin-top: 8px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--k) 16%,var(--border));
    overflow: hidden
}

    .bar > span {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: var(--k)
    }

.k-course {
    --k: #e8467c
}

.k-user {
    --k: #22a99b
}

.k-staff {
    --k: #f08a1c
}

.k-contact {
    --k: #2fa6d6
}

.lead {
    margin: 0;
    color: var(--muted);
    max-width: 70ch
}

@media(max-width:800px) {
    .hero {
        padding: 24px 20px
    }

        .hero h2 {
            font-size: 23px
        }

    .hero-art {
        opacity: .5;
        right: -90px
    }
}

@media(prefers-reduced-motion:reduce) {
    .kpi {
        transition: none
    }

        .kpi:hover {
            transform: none
        }
}
/* GridView */
.table-wrap{overflow-x:auto}
.grid{width:100%;border-collapse:collapse;min-width:480px}
.grid th{background:var(--c);color:#fff;text-align:left;padding:10px 12px}
.grid td{padding:10px 12px;border-bottom:1px solid var(--border)}
.grid tr:nth-child(even) td{background:color-mix(in srgb,var(--c) 7%,transparent)}

/* staff cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.staff-card{border-radius:18px;padding:18px;text-align:center;color:#fff}
.g0{background:linear-gradient(135deg,#ff4d8d,#ff8a5c)}.g1{background:linear-gradient(135deg,#2ec4b6,#2a9d8f)}.g2{background:linear-gradient(135deg,#6a4cff,#9b7bff)}.g3{background:linear-gradient(135deg,#ff9f1c,#f4c430)}.g4{background:linear-gradient(135deg,#4cc9f0,#4361ee)}
.avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;font-size:24px;font-weight:800;margin:0 auto 8px}

@media (prefers-color-scheme:dark){:root{--bg:#150f2a;--surface:#211a3d;--text:#f1edff;--muted:#a9a1c9;--border:#352c5c}}
@media(max-width:800px){.layout{grid-template-columns:1fr}
.sidebar{position:fixed;left:0;top:0;z-index:5;width:260px;transform:translateX(-100%);transition:transform .2s}
.sidebar.open{transform:none}.menu-btn{display:inline-block}main{padding:16px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* course form additions */
.inline{display:flex;gap:8px}.inline select{width:auto}.inline input{min-width:0}
input[type=file]{width:100%;padding:10px;border:2px dashed var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit}
input[readonly]{background:color-mix(in srgb,var(--c) 10%,var(--surface));font-weight:800}

/* edit buttons, hints, staff photos */
.btn-edit{display:inline-block;background:#2a7de1;color:#fff;padding:6px 12px;font-size:13px;font-weight:700;border-radius:10px;text-decoration:none;margin-right:4px}
.hint{display:block;color:var(--muted);font-size:13px;margin-top:6px}
.thumb{display:block;width:90px;height:90px;object-fit:cover;border-radius:50%;margin-top:10px}
.staff-card{position:relative}
.photo{width:96px;height:96px;object-fit:cover;border-radius:50%;border:4px solid rgba(255,255,255,.6);margin:0 auto 8px;display:block}
.rank{position:absolute;top:10px;left:12px;background:rgba(255,255,255,.3);border-radius:20px;padding:2px 10px;font-weight:800}
.staff-card small{opacity:.9}



/* Course form layout only */
.sec-course {
    padding: 28px 32px;
}

.sec-course h2 {
    margin-bottom: 28px;
}

.sec-course .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 24px;
    align-items: start;
}

    .sec-course .form-grid > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .sec-course .form-grid > div.wide {
            grid-column: 1 / -1;
        }

    .sec-course .form-grid label {
        display: block;
        margin-bottom: 2px;
        font-weight: 600;
    }

    .sec-course .form-grid input[type="text"],
    .sec-course .form-grid input[type="number"],
    .sec-course .form-grid select,
    .sec-course .form-grid textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 42px;
    }

    .sec-course .form-grid .inline {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
    }

    .sec-course .form-grid .val {
        display: block;
        margin-top: 2px;
        font-size: 12px;
    }

    .sec-course .form-grid .hint {
        display: block;
        margin-top: 4px;
        overflow-wrap: anywhere;
    }

.sec-course > p {
    margin-top: 28px;
    margin-bottom: 12px;
}

/* Tablet and mobile */
@media (max-width: 700px) {
    .sec-course {
        padding: 20px 16px;
    }

        .sec-course .form-grid {
            grid-template-columns: 1fr;
            row-gap: 20px;
        }

            .sec-course .form-grid > div.wide {
                grid-column: auto;
            }

            .sec-course .form-grid .inline {
                grid-template-columns: 1fr 1fr;
            }
}