/**
 * assets/css/app.css — Custom Application Stylesheet
 * Bootstrap 5 handles layout; this file adds design tokens,
 * sidebar layout, hero, auth pages, and micro-animations.
 */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
    --color-primary:       #5C6BC0;
    --color-primary-dark:  #3949AB;
    --color-primary-light: #E8EAF6;
    --color-accent:        #7C4DFF;
    --sidebar-bg:          #1e1f2e;
    --sidebar-text:        #9ea3c0;
    --sidebar-text-hover:  #ffffff;
    --sidebar-active-bg:   rgba(92,107,192,0.18);
    --sidebar-active-text: #818cf8;
    --sidebar-width:       260px;
    --content-bg:          #f4f5f9;
    --card-bg:             #ffffff;
    --card-border:         #e8eaed;
    --card-shadow:         0 1px 4px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);
    --font-family:         'Inter',system-ui,-apple-system,sans-serif;
    --radius-sm:           6px;
    --radius-md:           10px;
    --radius-lg:           16px;
    --radius-pill:         999px;
    --transition-base:     all 0.2s ease;
    --transition-slow:     all 0.35s cubic-bezier(0.4,0,0.2,1);
    --z-sidebar:           100;
    --z-topbar:            99;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    font-size:   0.9375rem;
    background:  var(--content-bg);
    color:       #1a1d2e;
    -webkit-font-smoothing: antialiased;
}
.fw-500 { font-weight:500!important; }
.fw-600 { font-weight:600!important; }
.fw-700 { font-weight:700!important; }
.fw-800 { font-weight:800!important; }
.text-primary { color: var(--color-primary)!important; }

/* ── 3. DASHBOARD SHELL ───────────────────────────────────── */
.dashboard-shell { display:flex; min-height:100vh; }

.app-sidebar {
    width:      var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    position:   sticky;
    top:        0;
    z-index:    var(--z-sidebar);
    flex-shrink:0;
    transition: var(--transition-slow);
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-brand { border-bottom:1px solid rgba(255,255,255,0.06); }
.sidebar-brand-text { color:#fff; letter-spacing:-0.3px; }

.sidebar-link {
    color:         var(--sidebar-text);
    border-radius: var(--radius-md);
    padding:       0.55rem 0.85rem;
    font-size:     0.875rem;
    font-weight:   500;
    transition:    var(--transition-base);
    white-space:   nowrap;
}
.sidebar-link:hover,.sidebar-link:focus-visible {
    background: rgba(255,255,255,0.06);
    color:      var(--sidebar-text-hover);
    text-decoration: none;
}
.sidebar-link.active { background:var(--sidebar-active-bg); color:var(--sidebar-active-text); }
.sidebar-link .bi { min-width:20px; text-align:center; }
.sidebar-divider { border-color:rgba(255,255,255,0.08); }

.sidebar-user { border-top:1px solid rgba(255,255,255,0.07); margin-top:auto; }
.sidebar-avatar,.topbar-avatar {
    width:36px; height:36px; border-radius:50%;
    background:var(--color-primary); color:#fff;
    font-size:.8rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.topbar-avatar { width:34px; height:34px; font-size:.78rem; }
.sidebar-user-info .fw-600 { color:#e2e5f1; }

.dashboard-content { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--content-bg); }

/* ── 4. TOP BAR ──────────────────────────────────────────── */
.app-topbar {
    background:    var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    padding:       0.75rem 1.5rem;
    position:      sticky;
    top:           0;
    z-index:       var(--z-topbar);
    display:       flex;
    align-items:   center;
    gap:           1rem;
}
.topbar-user-btn {
    background:none; border:none; display:flex; align-items:center;
    gap:.5rem; padding:.35rem .6rem; border-radius:var(--radius-md); cursor:pointer;
    transition:var(--transition-base);
}
.topbar-user-btn:hover { background:var(--color-primary-light); }
.dashboard-main { padding:2rem 1.75rem; flex:1; }

/* ── 5. CARDS ─────────────────────────────────────────────── */
.card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg)!important; box-shadow:var(--card-shadow); }
.card-header { background:transparent; border-bottom:1px solid var(--card-border); padding:1rem 1.25rem; font-weight:600; }
.card-hover { transition:var(--transition-slow); }
.card-hover:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.10); }

/* ── 6. BUTTONS ───────────────────────────────────────────── */
.btn { font-weight:500; border-radius:var(--radius-md); transition:var(--transition-base); letter-spacing:.01em; }
.btn-primary { background:var(--color-primary); border-color:var(--color-primary); }
.btn-primary:hover,.btn-primary:focus { background:var(--color-primary-dark); border-color:var(--color-primary-dark); box-shadow:0 4px 14px rgba(92,107,192,0.35); }
.btn-outline-primary { color:var(--color-primary); border-color:var(--color-primary); }
.btn-outline-primary:hover { background:var(--color-primary); border-color:var(--color-primary); }
.btn .bi { vertical-align:-0.1em; }

/* ── 7. PUBLIC NAVBAR ─────────────────────────────────────── */
#main-navbar .navbar-brand { font-weight:700; color:#1a1d2e; font-size:1.1rem; letter-spacing:-0.3px; }
#main-navbar .nav-link { font-weight:500; color:#4a5568; transition:var(--transition-base); padding:.45rem .85rem; border-radius:var(--radius-sm); }
#main-navbar .nav-link:hover,#main-navbar .nav-link.active { color:var(--color-primary); background:var(--color-primary-light); }

/* ── 8. HERO ──────────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg,#1e1f2e 0%,#2d2f4a 50%,#1a2040 100%);
    min-height: 92vh; display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero-section::before {
    content:''; position:absolute; inset:0;
    background-image: linear-gradient(rgba(92,107,192,0.08) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(92,107,192,0.08) 1px,transparent 1px);
    background-size:40px 40px; pointer-events:none;
}
.hero-badge {
    display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .85rem;
    background:rgba(92,107,192,0.15); border:1px solid rgba(92,107,192,0.3);
    border-radius:var(--radius-pill); color:#818cf8; font-size:.8rem; font-weight:600;
    margin-bottom:1.5rem; letter-spacing:.03em;
}
.hero-title { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; line-height:1.12; letter-spacing:-1.5px; color:#fff; }
.hero-title .text-gradient { background:linear-gradient(135deg,#818cf8,#c084fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:1.1rem; color:#9ea3c0; max-width:520px; line-height:1.7; }
.hero-code-card {
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
    border-radius:var(--radius-lg); padding:1.5rem; backdrop-filter:blur(10px);
    font-family:'Courier New',monospace; font-size:.82rem; color:#c8d0f0; line-height:1.8;
}
.hero-code-card .code-comment { color:#4c5578; }
.hero-code-card .code-keyword { color:#818cf8; }
.hero-code-card .code-string  { color:#a5d6a7; }
.hero-code-card .code-func    { color:#ffd54f; }

/* ── 9. FEATURE ICONS ─────────────────────────────────────── */
.feature-icon-wrap {
    width:52px; height:52px; border-radius:var(--radius-md);
    background:var(--color-primary-light); color:var(--color-primary);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; margin-bottom:1rem; transition:var(--transition-base);
}
.card-hover:hover .feature-icon-wrap { background:var(--color-primary); color:#fff; }

/* ── 10. AUTH ─────────────────────────────────────────────── */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f0f1fa,#e8eaf6); padding:2rem 1rem; }
.auth-card { width:100%; max-width:440px; border-radius:var(--radius-lg)!important; box-shadow:0 8px 40px rgba(92,107,192,0.12)!important; }
.auth-logo { font-size:1.6rem; font-weight:800; color:var(--color-primary); letter-spacing:-0.5px; }
.form-control:focus { border-color:var(--color-primary); box-shadow:0 0 0 .2rem rgba(92,107,192,0.18); }

/* ── 11. STAT CARDS ───────────────────────────────────────── */
.stat-card { border-radius:var(--radius-lg)!important; border:none!important; padding:1.5rem; position:relative; overflow:hidden; }
.stat-card-primary { background:linear-gradient(135deg,#5C6BC0,#3949AB); color:#fff; }
.stat-card-success { background:linear-gradient(135deg,#26a69a,#00897b); color:#fff; }
.stat-card-warning { background:linear-gradient(135deg,#ffa726,#fb8c00); color:#fff; }
.stat-card-info    { background:linear-gradient(135deg,#29b6f6,#0288d1); color:#fff; }
.stat-card-value { font-size:2rem; font-weight:700; line-height:1; }
.stat-card-label { font-size:.82rem; opacity:.85; font-weight:500; }
.stat-card-icon { font-size:2.2rem; opacity:.2; position:absolute; bottom:1rem; right:1.2rem; }

/* ── 12. SECTION HEADERS ──────────────────────────────────── */
.section-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:2px solid var(--color-primary-light); }
.section-header h2 { font-size:1.1rem; font-weight:700; margin:0; color:#1a1d2e; }
.section-header .bi { color:var(--color-primary); font-size:1.2rem; }

/* ── 13. DATATABLES ───────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input { border-radius:var(--radius-md)!important; font-size:.875rem!important; }
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--color-primary)!important; box-shadow:0 0 0 .2rem rgba(92,107,192,0.18)!important; outline:none; }
table.dataTable thead th { font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:#6c757d; border-bottom:2px solid var(--card-border)!important; }

/* ── 14. TOAST CONTAINER ──────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }

/* ── 15. ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.animate-fade-in-up { animation:fadeInUp 0.45s ease both; }
.animate-fade-in-up:nth-child(1){animation-delay:0s}
.animate-fade-in-up:nth-child(2){animation-delay:.08s}
.animate-fade-in-up:nth-child(3){animation-delay:.16s}
.animate-fade-in-up:nth-child(4){animation-delay:.24s}

@keyframes pulseRing {
    0%  {transform:scale(.9);box-shadow:0 0 0 0 rgba(92,107,192,.6)}
    70% {transform:scale(1); box-shadow:0 0 0 8px rgba(92,107,192,0)}
    100%{transform:scale(.9);box-shadow:0 0 0 0 rgba(92,107,192,0)}
}
.pulse-dot { width:10px; height:10px; border-radius:50%; background:var(--color-primary); display:inline-block; animation:pulseRing 1.6s infinite; }

/* ── 16. RESPONSIVE ───────────────────────────────────────── */
@media (max-width:991.98px) {
    .app-sidebar { position:fixed; left:calc(-1 * var(--sidebar-width)); top:0; height:100%; z-index:var(--z-sidebar); transition:var(--transition-slow); }
    .app-sidebar.sidebar-open { left:0; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); }
    .dashboard-main { padding:1.25rem 1rem; }
    .app-topbar { padding:.6rem 1rem; }
}

/* ── 17. PUBLIC FOOTER ────────────────────────────────────── */
.public-footer { background:#1e1f2e; color:var(--sidebar-text); padding:2.5rem 0; font-size:.875rem; }
.public-footer a { color:var(--sidebar-text); text-decoration:none; transition:var(--transition-base); }
.public-footer a:hover { color:#fff; }

/* ── 18. SELECT2 ──────────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection { border-radius:var(--radius-md)!important; }