/* ============================================================
   Internship Monitoring System — Main Styles
   Tabler-inspired mobile-first design system
   ============================================================ */

:root {
    --tblr-primary: #4f46e5;
    --tblr-primary-rgb: 79, 70, 229;
    --tblr-primary-dark: #4338ca;
    --tblr-primary-light: #eef2ff;
    --tblr-success: #16a34a;
    --tblr-warning: #f59e0b;
    --tblr-danger: #dc2626;
    --tblr-info: #0ea5e9;
    --tblr-bg: #f1f5f9;
    --tblr-bg-surface: #ffffff;
    --tblr-bg-sidebar: #1e293b;
    --tblr-bg-sidebar-hover: rgba(255,255,255,0.06);
    --tblr-bg-sidebar-active: rgba(255,255,255,0.1);
    --tblr-body-color: #1e293b;
    --tblr-muted: #64748b;
    --tblr-muted-light: #94a3b8;
    --tblr-border-color: #e2e8f0;
    --tblr-border-color-light: #f1f5f9;
    --tblr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tblr-font-size: 0.875rem;
    --tblr-font-size-sm: 0.75rem;
    --tblr-font-size-lg: 1rem;
    --tblr-font-size-h1: 1.5rem;
    --tblr-font-size-h2: 1.25rem;
    --tblr-font-size-h3: 1.125rem;
    --tblr-line-height: 1.4285714;
    --tblr-spacer: 1rem;
    --tblr-spacer-2: 0.5rem;
    --tblr-spacer-3: 0.75rem;
    --tblr-spacer-4: 1.5rem;
    --tblr-border-radius: 4px;
    --tblr-border-radius-lg: 8px;
    --tblr-border-radius-sm: 2px;
    --tblr-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --tblr-shadow-dropdown: 0 0.5rem 1rem rgba(15, 23, 42, 0.12);
    --tblr-sidebar-width: 250px;
    --tblr-navbar-height: 60px;
    --tblr-safe-top: env(safe-area-inset-top, 0px);
    --tblr-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tblr-tap: 40px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    font-family: var(--tblr-font);
    font-size: var(--tblr-font-size);
    line-height: var(--tblr-line-height);
    color: var(--tblr-body-color);
    background: var(--tblr-bg);
    min-height: 100vh; min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--tblr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { display: flex; flex-direction: column; min-height: 100vh; }

.navbar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center;
    height: var(--tblr-navbar-height);
    padding: 0 var(--tblr-spacer-4);
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    border-bottom: 1px solid var(--tblr-border-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.navbar-brand {
    display: flex; align-items: center; gap: 0.625rem;
    font-weight: 700; font-size: var(--tblr-font-size-lg);
    color: var(--tblr-body-color); text-decoration: none; white-space: nowrap;
}
.navbar-brand:hover { text-decoration: none; color: var(--tblr-primary); }

.navbar-brand-logo {
    width: 32px; height:  ️32px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: var(--tblr-border-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.5px;
    color: #fff;
}

.navbar-toggler {
    display: flex; align-items: center; justify-content: center;
    width: var(--tblr-tap); height: var(--tblr-tap);
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: var(--tblr-muted); font-size: 1.25rem;
}

.navbar-nav {
    display: none; list-style: none; gap: 0.25rem; margin-left: auto;
}

.navbar-nav .nav-link {
    padding: 0.375rem 0.75rem;
    color: var(--tblr-muted);
    font-size: var(--tblr-font-size-sm);
    border-radius: var(--tblr-border-radius);
    transition: background 0.15s, color 0.15s;
}
.navbar-nav .nav-link:hover { background: var(--tblr-primary-light); color: var(--tblr-primary); text-decoration: none; }

@media (min-width: 768px) {
    .navbar-toggler { display: none; }
    .navbar-nav { display: flex; align-items: center; }
}

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--tblr-sidebar-width);
    background: var(--tblr-bg-sidebar);
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar.show { transform: translateX(0); }

.sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5); z-index: 1035;
}
.sidebar-backdrop.show { display: block; }

.sidebar-header {
    display: flex; align-items: center;
    height: var(--tblr-navbar-height);
    padding: 0 var(--tblr-spacer-4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.sidebar-body { flex: 1; padding: var(--tblr-spacer-2) 0; }
.sidebar .nav-item { list-style: none; }

.sidebar .nav-link {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem var(--tblr-spacer-4);
    color: rgba(255,255,255,0.65);
    font-size: var(--tblr-font-size); font-weight: 400;
    line-height: 1.4; text-decoration: none;
    border-left: 3px solid transparent;
    min-height: var(--tblr-tap);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sidebar .nav-link:hover { color: #fff; background: var(--tblr-bg-sidebar-hover); text-decoration: none; }
.sidebar .nav-link.active {
    color: #fff; background: var(--tblr-bg-sidebar-active);
    border-left-color: #6366f1; font-weight: 500;
}
.sidebar .nav-icon { width: 1.25rem; text-align: center; font-size: 1.1rem; flex-shrink: 0; opacity: 0.7; }
.sidebar .nav-link.active .nav-icon, .sidebar .nav-link:hover .nav-icon { opacity: 1; }

.sidebar-footer {
    padding: var(--tblr-spacer-2) var(--tblr-spacer-4);
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .sidebar { transform: translateX(0); top: var(--tblr-navbar-height); z-index: 1020; }
    .sidebar-header { display: none; }
    .sidebar-backdrop { display: none !important; }
}

.page-wrapper { flex: 1; display: flex; flex-direction: column; }

.page-body {
    flex: 1;
    padding: var(--tblr-spacer-4);
    padding-bottom: calc(var(--tblr-spacer-4) + var(--tblr-safe-bottom));
}

@media (min-width: 768px) {
    .page-body { margin-left: var(--tblr-sidebar-width); max-width: calc(100% - var(--tblr-sidebar-width)); }
}

.page-header { margin-bottom: var(--tblr-spacer-4); }

.page-title {
    font-size: var(--tblr-font-size-h1); font-weight: 600;
    color: var(--tblr-body-color); line-height: 1.3; margin-bottom: 0.25rem;
}
.page-pretitle {
    font-size: var(--tblr-font-size-sm); color: var(--tblr-muted);
    text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; margin-bottom: 0.25rem;
}
.page-subtitle { font-size: var(--tblr-font-size-sm); color: var(--tblr-muted); }

.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--tblr-muted)!important}
.text-danger{color:var(--tblr-danger)!important}.text-success{color:var(--tblr-success)!important}
.text-warning{color:var(--tblr-warning)!important}.text-primary{color:var(--tblr-primary)!important}
.font-weight-bold{font-weight:600}.font-weight-medium{font-weight:500}
.mt-0{margin-top:0!important}.mt-2{margin-top:var(--tblr-spacer-2)!important}
.mt-3{margin-top:var(--tblr-spacer-3)!important}.mt-4{margin-top:var(--tblr-spacer-4)!important}
.mb-2{margin-bottom:var(--tblr-spacer-2)!important}.mb-3{margin-bottom:var(--tblr-spacer-3)!important}
.mb-4{margin-bottom:var(--tblr-spacer-4)!important}
.d-flex{display:flex}.flex-column{flex-direction:column}.align-items-center{align-items:center}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.gap-2{gap:var(--tblr-spacer-2)}.gap-3{gap:var(--tblr-spacer-3)}.flex-fill{flex:1}.w-100{width:100%}
.hidden{display:none!important}

.loading-spinner {
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:3rem 1rem;gap:0.75rem;color:var(--tblr-muted);
}
.spinner{width:2rem;height:2rem;border:2px solid var(--tblr-border-color);border-top-color:var(--tblr-primary);border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-sm{width:1rem;height:1rem}

.toast-container{position:fixed;bottom:1rem;right:1rem;left:1rem;z-index:2000;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none}
@media(min-width:576px){.toast-container{left:auto;min-width:320px;max-width:420px}}
.toast{padding:0.75rem 1rem;border-radius:var(--tblr-border-radius);color:#fff;font-size:var(--tblr-font-size-sm);font-weight:500;box-shadow:var(--tblr-shadow-dropdown);animation:slideUp 0.25s ease-out;pointer-events:auto}
.toast-success{background:var(--tblr-success)}.toast-error{background:var(--tblr-danger)}.toast-warning{background:var(--tblr-warning);color:#1e293b}.toast-info{background:var(--tblr-info)}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.empty-state{text-align:center;padding:3rem 1rem}
.empty-state-icon{width:3.5rem;height:3.5rem;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--tblr-muted-light);background:var(--tblr-border-color-light);border-radius:50%}
.empty-state p{color:var(--tblr-muted);font-size:var(--tblr-font-size)}
.empty-state .empty-title{font-weight:600;color:var(--tblr-body-color);margin-bottom:0.25rem}

@media(max-width:767px){.hide-mobile{display:none!important}}
@media(min-width:768px){.hide-desktop{display:none!important}}