/* ==========================================================================
   EduSaaS Pro — Main Stylesheet
   CodeCanyon Compliance: No CDN, No Inline Styles, Local Assets Only
   ========================================================================== */

/* ── 1. CSS Custom Properties (Design Tokens) ─────────────────────────── */
:root {
    /* Brand */
    --school-primary:     #6366f1; /* Indigo — overridden by school branding */
    --school-primary-rgb: 99, 102, 241;

    /* Sidebar */
    --sidebar-bg:         #0f1117;
    --sidebar-width:      260px;
    --sidebar-collapsed:  72px;
    --sidebar-text:       #a0aec0;
    --sidebar-text-hover: #ffffff;
    --sidebar-item-hover: rgba(99, 102, 241, 0.12);
    --sidebar-item-active:rgba(99, 102, 241, 0.20);
    --sidebar-border:     rgba(255,255,255,0.06);

    /* Topbar */
    --topbar-height:      64px;
    --topbar-bg:          #ffffff;
    --topbar-border:      #e8ecf0;
    --topbar-shadow:      0 1px 4px rgba(0,0,0,0.06);

    /* Content */
    --content-bg:         #f4f6fb;
    --card-bg:            #ffffff;
    --card-shadow:        0 2px 8px rgba(0,0,0,0.06);
    --card-radius:        12px;
    --border-color:       #e8ecf0;

    /* Typography */
    --text-primary:       #1a202c;
    --text-secondary:     #718096;
    --text-muted:         #a0aec0;
    --font-family:        'Inter', system-ui, -apple-system, sans-serif;

    /* States */
    --success:            #10b981;
    --danger:             #ef4444;
    --warning:            #f59e0b;
    --info:               #3b82f6;

    /* Transitions */
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-slow:    350ms ease;
}

/* ── 2. Google Font (Self-Hosted Inter) ───────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* ── 3. Base Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family:      var(--font-family);
    font-size:        14px;
    line-height:      1.6;
    color:            var(--text-primary);
    background-color: var(--content-bg);
    margin:           0;
    padding:          0;
    overflow-x:       hidden;
}

/* ── 4. Sidebar ──────────────────────────────────────────────────────── */
.sidebar {
    position:         fixed;
    top:              0;
    left:             0;
    width:            var(--sidebar-width);
    height:           100vh;
    background:       var(--sidebar-bg);
    display:          flex;
    flex-direction:   column;
    z-index:          1000;
    transition:       width var(--transition-base), transform var(--transition-base);
    overflow:         hidden;
    border-right:     1px solid var(--sidebar-border);
}

/* Sidebar Brand */
.sidebar-brand {
    display:         flex;
    align-items:     center;
    padding:         20px 20px 16px;
    min-height:      var(--topbar-height);
    border-bottom:   1px solid var(--sidebar-border);
    flex-shrink:     0;
}

.sidebar-logo {
    height:          36px;
    max-width:       160px;
    object-fit:      contain;
}

.sidebar-logo-text {
    display:         flex;
    align-items:     center;
    gap:             10px;
    color:           #ffffff;
    font-size:       18px;
    font-weight:     700;
    letter-spacing:  -0.3px;
}

.sidebar-logo-text i {
    font-size:       24px;
    color:           var(--school-primary);
    filter:          drop-shadow(0 0 8px rgba(var(--school-primary-rgb), 0.4));
}

/* Sidebar Navigation */
.sidebar-nav {
    flex:            1;
    padding:         12px 10px;
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 4px; }

/* Nav Groups */
.nav-group-label {
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  1.2px;
    text-transform:  uppercase;
    color:           var(--text-muted);
    padding:         16px 12px 6px;
    display:         block;
}

/* Nav Items */
.nav-item { margin-bottom: 2px; }

.nav-link {
    position:        relative;
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         10.5px 16px;
    border-radius:   8px;
    color:           var(--sidebar-text);
    text-decoration: none;
    font-size:       13.5px;
    font-weight:     500;
    transition:      all var(--transition-fast);
    white-space:     nowrap;
    overflow:        hidden;
}

.nav-link i {
    font-size:       18px;
    flex-shrink:     0;
    width:           20px;
    text-align:      center;
    transition:      all var(--transition-fast);
}

.nav-link:hover {
    background:      var(--sidebar-item-hover);
    color:           var(--sidebar-text-hover);
}

.nav-link:hover i { 
    color:           var(--school-primary); 
    transform:       translateX(2px);
}

.nav-link.active {
    background:      var(--sidebar-item-active);
    color:           #ffffff;
    font-weight:     600;
}

.nav-link.active i { color: var(--school-primary); }

.nav-link.active::before {
    content:         '';
    position:        absolute;
    left:            0;
    top:             20%;
    height:          60%;
    width:           3.5px;
    background:      var(--school-primary);
    border-radius:   0 4px 4px 0;
    box-shadow:      0 0 10px var(--school-primary);
}

.nav-link .nav-badge {
    margin-left:     auto;
    background:      var(--school-primary);
    color:           white;
    font-size:       10px;
    padding:         2px 6px;
    border-radius:   20px;
    font-weight:     600;
}

/* Nav Sub-menu */
.nav-submenu { padding-left: 16px; }
.nav-submenu .nav-link { font-size: 13px; padding: 8px 12px; }
.nav-collapse-btn { cursor: pointer; }

/* ── 5. Sidebar Footer ───────────────────────────────────────────────── */
.sidebar-footer {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 16px;
    border-top:      1px solid var(--sidebar-border);
    flex-shrink:     0;
}

.sidebar-user {
    display:         flex;
    align-items:     center;
    gap:             10px;
    flex:            1;
    overflow:        hidden;
}

.sidebar-user-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    object-fit:      cover;
    border:          2px solid var(--sidebar-border);
    flex-shrink:     0;
}

.sidebar-user-info {
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
}

.sidebar-user-name {
    font-size:       13px;
    font-weight:     600;
    color:           #ffffff;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.sidebar-user-role {
    font-size:       10px;
    background:      rgba(var(--school-primary-rgb), 0.2);
    color:           var(--school-primary);
    padding:         1px 6px;
    border-radius:   4px;
    font-weight:     500;
    width:           fit-content;
}

.btn-logout {
    background:      none;
    border:          none;
    color:           var(--sidebar-text);
    font-size:       18px;
    cursor:          pointer;
    padding:         6px;
    border-radius:   6px;
    transition:      all var(--transition-fast);
    flex-shrink:     0;
}

.btn-logout:hover {
    background:      rgba(239, 68, 68, 0.15);
    color:           var(--danger);
}

/* ── 6. Main Wrapper ─────────────────────────────────────────────────── */
.main-wrapper {
    margin-left:     var(--sidebar-width);
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    transition:      margin-left var(--transition-base);
}

/* ── 7. Topbar ───────────────────────────────────────────────────────── */
.topbar {
    position:        sticky;
    top:             0;
    z-index:         900;
    height:          var(--topbar-height);
    background:      var(--topbar-bg);
    border-bottom:   1px solid var(--topbar-border);
    box-shadow:      var(--topbar-shadow);
    display:         flex;
    align-items:     center;
    padding:         0 24px;
    gap:             16px;
}

.topbar-left {
    display:         flex;
    align-items:     center;
    gap:             16px;
    flex:            1;
}

.topbar-right {
    display:         flex;
    align-items:     center;
    gap:             8px;
}

.sidebar-toggle {
    background:      none;
    border:          none;
    font-size:       22px;
    color:           var(--text-secondary);
    cursor:          pointer;
    padding:         6px;
    border-radius:   6px;
    line-height:     1;
    transition:      all var(--transition-fast);
}
.sidebar-toggle:hover { background: var(--content-bg); color: var(--school-primary); }

/* Breadcrumb */
.breadcrumb {
    font-size:       13px;
    gap:             4px;
}
.breadcrumb-item a {
    color:           var(--text-secondary);
    text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--school-primary); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 500; }

/* Topbar Elements */
.topbar-school-name {
    font-size:       13px;
    font-weight:     600;
    color:           var(--text-secondary);
    padding:         6px 12px;
    background:      var(--content-bg);
    border-radius:   6px;
    align-items:     center;
}

.topbar-datetime {
    font-size:       12.5px;
    color:           var(--text-muted);
    align-items:     center;
    padding:         6px 10px;
}

/* Topbar Icon Buttons */
.topbar-icon-btn {
    position:        relative;
    background:      none;
    border:          none;
    width:           38px;
    height:          38px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    color:           var(--text-secondary);
    cursor:          pointer;
    transition:      all var(--transition-fast);
}
.topbar-icon-btn:hover { background: var(--content-bg); color: var(--school-primary); }
.topbar-icon-btn::after { display: none; } /* remove BS dropdown caret */

.topbar-badge {
    position:        absolute;
    top:             4px;
    right:           4px;
    background:      var(--danger);
    color:           white;
    font-size:       9px;
    font-weight:     700;
    min-width:       16px;
    height:          16px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0 4px;
    display:         none; /* hidden when 0 */
}
.topbar-badge.has-items { display: flex; }

/* Topbar User Menu Styling */
.topbar-user {
    display:         flex;
    align-items:     center;
    gap:             12px;
    background:      #f8fafc;
    border:          1px solid #e2e8f0;
    padding:         6px 14px 6px 6px;
    border-radius:   30px;
    cursor:          pointer;
    transition:      all var(--transition-fast);
    text-align:      left;
}

.topbar-user:hover {
    background:      #f1f5f9;
    border-color:    #cbd5e1;
    box-shadow:      0 2px 8px rgba(0, 0, 0, 0.05);
}

.topbar-user::after {
    display:         none !important; /* Hide default bootstrap dropdown caret indicator */
}

.topbar-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--school-primary) 0%, color-mix(in srgb, var(--school-primary) 70%, #000) 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #ffffff;
    font-weight:     700;
    font-size:       0.9rem;
    box-shadow:      0 2px 8px rgba(var(--school-primary-rgb), 0.3);
    text-transform:  uppercase;
    flex-shrink:     0;
}

.topbar-user-info {
    display:         flex;
    flex-direction:  column;
}

.topbar-user-name {
    font-size:       0.88rem;
    font-weight:     700;
    color:           #1e293b;
    line-height:     1.2;
}

.topbar-user-role {
    font-size:       0.72rem;
    font-weight:     600;
    color:           #64748b;
    text-transform:  uppercase;
    letter-spacing:  0.5px;
}

/* Premium Dropdown Menus */
.dropdown-menu {
    border:          1px solid #e2e8f0 !important;
    border-radius:   12px !important;
    box-shadow:      0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding:         8px !important;
    animation:       fadeInDropdown 0.2s ease;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    padding:         8px 16px !important;
    border-radius:   8px !important;
    font-size:       13.5px !important;
    font-weight:     500 !important;
    color:           #334155 !important;
    transition:      all var(--transition-fast) !important;
    display:         flex !important;
    align-items:     center !important;
    gap:             8px !important;
}

.dropdown-item:hover {
    background-color: var(--content-bg) !important;
    color:           var(--school-primary) !important;
}

.dropdown-item i {
    font-size:       16px;
    vertical-align:  middle;
}

/* ── 8. Page Content ─────────────────────────────────────────────────── */
.page-content {
    flex:            1;
    padding:         24px;
}

/* Page Header */
.page-header {
    margin-bottom:   24px;
}

.page-title {
    font-size:       22px;
    font-weight:     700;
    color:           var(--text-primary);
    margin:          0;
    letter-spacing:  -0.3px;
}

.page-subtitle {
    font-size:       13.5px;
    color:           var(--text-secondary);
    margin:          4px 0 0;
}

/* ── 9. Cards ────────────────────────────────────────────────────────── */
.card {
    background:      var(--card-bg);
    border:          1px solid var(--border-color);
    border-radius:   var(--card-radius);
    box-shadow:      var(--card-shadow);
    transition:      box-shadow var(--transition-fast);
}

.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }

.card-header {
    background:      transparent;
    border-bottom:   1px solid var(--border-color);
    padding:         16px 20px;
    font-weight:     600;
    font-size:       14.5px;
    display:         flex;
    align-items:     center;
    gap:             8px;
}

.card-header i { color: var(--school-primary); font-size: 18px; }

.card-body { padding: 20px; }

/* ── 10. Stat Cards (Dashboard) ─────────────────────────────────────── */
.stat-card {
    padding:         20px;
    border-radius:   var(--card-radius);
    border:          1px solid var(--border-color);
    background:      var(--card-bg);
    display:         flex;
    align-items:     center;
    gap:             16px;
    transition:      all var(--transition-base);
    text-decoration: none;
    box-shadow:      var(--card-shadow);
}

.stat-card:hover {
    transform:       translateY(-2px);
    box-shadow:      0 8px 24px rgba(0,0,0,0.1);
}

.stat-icon {
    width:           52px;
    height:          52px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    flex-shrink:     0;
}

.stat-icon.indigo   { background: rgba(99,102,241,0.1);  color: #6366f1; }
.stat-icon.green    { background: rgba(16,185,129,0.1);  color: #10b981; }
.stat-icon.orange   { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.stat-icon.blue     { background: rgba(59,130,246,0.1);  color: #3b82f6; }
.stat-icon.pink     { background: rgba(236,72,153,0.1);  color: #ec4899; }
.stat-icon.purple   { background: rgba(168,85,247,0.1);  color: #a855f7; }
.stat-icon.red      { background: rgba(239,68,68,0.1);   color: #ef4444; }
.stat-icon.teal     { background: rgba(20,184,166,0.1);  color: #14b8a6; }

.stat-info { flex: 1; }

.stat-value {
    font-size:       26px;
    font-weight:     700;
    color:           var(--text-primary);
    line-height:     1;
    margin-bottom:   4px;
}

.stat-label {
    font-size:       12.5px;
    color:           var(--text-secondary);
    font-weight:     500;
}

.stat-trend {
    font-size:       12px;
    font-weight:     600;
    margin-top:      2px;
}
.stat-trend.up   { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* ── 11. Data Tables ─────────────────────────────────────────────────── */
.datatable-wrapper {
    border-radius:   var(--card-radius);
    overflow:        hidden;
    border:          1px solid var(--border-color);
}

.table {
    margin-bottom:   0;
    font-size:       13.5px;
}

.table thead th {
    background:      #f8fafc;
    border-bottom:   2px solid var(--border-color);
    font-weight:     600;
    font-size:       12px;
    text-transform:  uppercase;
    letter-spacing:  0.5px;
    color:           var(--text-secondary);
    padding:         12px 16px;
    white-space:     nowrap;
}

.table tbody td {
    padding:         12px 16px;
    vertical-align: middle;
    border-bottom:   1px solid var(--border-color);
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background: rgba(99,102,241,0.03); }

/* Student Photo in Table */
.student-photo {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    object-fit:      cover;
    border:          2px solid var(--border-color);
}

/* ── 12. Forms ───────────────────────────────────────────────────────── */
.form-label {
    font-weight:     500;
    font-size:       13px;
    color:           var(--text-secondary);
    margin-bottom:   6px;
}

.form-control, .form-select {
    border:          1px solid var(--border-color);
    border-radius:   8px;
    padding:         9px 12px;
    font-size:       13.5px;
    color:           var(--text-primary);
    transition:      border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus, .form-select:focus {
    border-color:    var(--school-primary);
    box-shadow:      0 0 0 3px rgba(var(--school-primary-rgb), 0.15);
    outline:         none;
}

/* ── 13. Buttons ─────────────────────────────────────────────────────── */
.btn {
    border-radius:   8px;
    font-size:       13.5px;
    font-weight:     500;
    padding:         8px 16px;
    transition:      all var(--transition-fast);
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
}

.btn-primary {
    background:      var(--school-primary);
    border-color:    var(--school-primary);
    color:           white;
}

.btn-primary:hover {
    background:      color-mix(in srgb, var(--school-primary) 85%, black);
    border-color:    color-mix(in srgb, var(--school-primary) 85%, black);
    transform:       translateY(-1px);
    box-shadow:      0 4px 12px rgba(var(--school-primary-rgb), 0.3);
}

.btn-sm { padding: 5px 12px; font-size: 12.5px; }

.btn-icon {
    width:           34px;
    height:          34px;
    padding:         0;
    justify-content: center;
    border-radius:   8px;
}

/* ── 14. Badges ──────────────────────────────────────────────────────── */
.badge-status {
    padding:         4px 10px;
    border-radius:   20px;
    font-size:       11.5px;
    font-weight:     600;
}

.badge-active    { background: rgba(16,185,129,0.12); color: #059669; }
.badge-inactive  { background: rgba(161,161,170,0.15); color: #71717a; }
.badge-suspended { background: rgba(239,68,68,0.12);  color: #dc2626; }
.badge-pending   { background: rgba(245,158,11,0.12); color: #d97706; }
.badge-paid      { background: rgba(16,185,129,0.12); color: #059669; }
.badge-unpaid    { background: rgba(239,68,68,0.12);  color: #dc2626; }

/* ── 15. Student Photo Circle ────────────────────────────────────────── */
.student-avatar-circle {
    width:           80px;
    height:          80px;
    border-radius:   50%;
    object-fit:      cover;
    border:          3px solid var(--school-primary);
    box-shadow:      0 0 0 4px rgba(var(--school-primary-rgb), 0.15);
}

/* ── 16. Alert (Flash Messages) ──────────────────────────────────────── */
.alert-floating {
    border-radius:   10px;
    border:          none;
    box-shadow:      0 4px 20px rgba(0,0,0,0.1);
    margin-bottom:   20px;
    font-size:       13.5px;
}

/* ── 17. Page Footer ─────────────────────────────────────────────────── */
.page-footer {
    padding:         16px 24px;
    background:      var(--card-bg);
    border-top:      1px solid var(--border-color);
    font-size:       12.5px;
    color:           var(--text-muted);
    display:         flex;
    align-items:     center;
}

/* ── 18. Sidebar Collapsed State ──────────────────────────────────────── */
.sidebar-collapsed .sidebar {
    width:           var(--sidebar-collapsed);
}

.sidebar-collapsed .sidebar .nav-link span,
.sidebar-collapsed .sidebar .nav-group-label,
.sidebar-collapsed .sidebar .sidebar-user-info,
.sidebar-collapsed .sidebar .sidebar-logo-text span,
.sidebar-collapsed .sidebar .nav-badge,
.sidebar-collapsed .sidebar .sidebar-logo { display: none; }

.sidebar-collapsed .main-wrapper {
    margin-left:     var(--sidebar-collapsed);
}

/* ── 19. Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar {
        transform:   translateX(-100%);
        z-index:     1050;
    }

    .sidebar.mobile-open {
        transform:   translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }

    .page-content { padding: 16px; }
}

@media (max-width: 575.98px) {
    .topbar { padding: 0 16px; }
    .stat-value { font-size: 22px; }
}

/* ── 20. Micro Animations ────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-content { animation: fadeInUp 0.25s ease; }

.stat-card { animation: fadeInUp 0.3s ease both; }
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }

/* Skeleton Loader */
.skeleton {
    background:      linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation:       shimmer 1.5s infinite;
    border-radius:   4px;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}