/* ============================================================
   Rashown — assets/css/style.css
   Professional school-admin theme: navy + teal.
   Bootstrap 5 ke saath use hota hai (CDN se aata hai).
   ============================================================ */

:root {
    --navy: #16294d;        /* sidebar + headings */
    --navy-dark: #0f1e3a;
    --teal: #0e9f8a;        /* main accent colour */
    --teal-dark: #0b7d6d;
    --bg: #f2f4f8;          /* page background */
    --card-border: #e3e8f0;
    --text-muted: #6b7686;
}

body {
    background: var(--bg);
    font-family: "Segoe UI", Arial, sans-serif;
    color: #222;
}

/* ---------- Layout: sidebar left, content right ---------- */
.app-wrap { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Brand (logo area) ---------- */
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-logo {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--teal); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
}
.brand-name { font-size: 20px; font-weight: 700; line-height: 1.1; }
.brand-sub { font-size: 11px; color: #9fb0cc; }

/* ---------- Sidebar menu ---------- */
.menu { padding: 14px 10px; flex: 1; }
.menu-item {
    display: block; padding: 10px 14px; margin-bottom: 4px;
    border-radius: 8px; color: #cdd7e8; text-decoration: none;
    font-size: 15px;
}
a.menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-item.active { background: var(--teal); color: #fff; font-weight: 600; }
.menu-item.disabled { color: #7d8aa5; cursor: default; }
.badge-soon {
    font-size: 10px; background: #33456b; color: #cdd7e8;
    border-radius: 20px; padding: 2px 8px; margin-left: 6px;
}
.sidebar-foot { padding: 14px 10px; border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- Topbar ---------- */
.topbar {
    background: #fff; border-bottom: 1px solid var(--card-border);
    padding: 14px 24px; display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 10;
}
.page-title { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0; flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-name { font-weight: 600; }
.user-role {
    font-size: 12px; background: #e6f5f2; color: var(--teal-dark);
    border-radius: 20px; padding: 3px 10px; text-transform: capitalize;
}

/* ---------- Content + cards ---------- */
.content { padding: 24px; flex: 1; }
.app-footer { text-align: center; color: var(--text-muted); font-size: 12px; padding: 14px; }

.card { border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.card-header { background: #fff; border-bottom: 1px solid var(--card-border); font-weight: 600; color: var(--navy); }

/* Stat cards (dashboard) */
.stat-card { border-left: 4px solid var(--teal); }
.stat-card .stat-num { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat-card .stat-label { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }

/* ---------- Tables ---------- */
.table thead th { background: var(--navy); color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.table { background: #fff; }

/* Status badges */
.badge-active { background: #e6f5f2; color: var(--teal-dark); }
.badge-inactive { background: #fdecea; color: #b3261e; }

/* ---------- Buttons ---------- */
.btn-primary { background: var(--teal); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

/* ---------- Login page ---------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-dark); padding: 20px; }
.login-card { width: 100%; max-width: 400px; border-radius: 14px; }
.login-logo {
    width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 12px;
    background: var(--teal); color: #fff; font-size: 34px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Photos: round thumbnails + initial circle ---------- */
.thumb-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.thumb-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.topbar-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.avatar-initial {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--navy); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase;
}
.avatar-initial.avatar-lg { width: 96px; height: 96px; font-size: 40px; }

/* ---------- Mobile: sidebar upar se slide hoti hai ---------- */
@media (max-width: 991px) {
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 1000;
        transform: translateX(-100%); transition: transform .25s ease;
    }
    .sidebar.open { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.4); }
    .content { padding: 16px; }
    .page-title { font-size: 17px; }
    .user-name { display: none; }
}