/* PerfectCV — Shared Component Library
 * Loaded by: hr.html, browse.html, view.html
 * (dashboard.html, create-cv.html use main.css which already covers most of this)
 * ---------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════
   1. CSS VARIABLES  — superset covering all pages
═══════════════════════════════════════════════════ */
:root {
    /* ── Core palette ── */
    --brand:   #3b7cf5;
    --brand-2: #6c5ff5;
    --accent:  #06b8ac;
    --success: #16a34a;
    --warning: #d97706;
    --danger:  #dc2626;
    --error:   #dc2626;          /* alias */
    --text:    #1a2b52;
    --muted:   #6475a0;

    /* ── Primary / secondary (blue defaults; main.css overrides to purple) ── */
    --primary:        #3b7cf5;
    --primary-dark:   #2563eb;
    --primary-light:  #a89df9;
    --secondary:      #ec4899;
    --pink:           #ec4899;   /* browse.html alias */

    /* ── Backgrounds ── */
    --bg:       #f0f5ff;
    --bg-1:     #f0f5ff;
    --bg-2:     #e8eeff;
    --bg-3:     #e0e9ff;
    /* page-specific aliases */
    --dark:       #f0f5ff;       /* hr.html, browse.html */
    --dark-2:     #e8eeff;       /* browse.html */
    --dark-3:     #e0e9ff;       /* browse.html */
    --dark-light: #e8eeff;       /* hr.html */
    --light:      #1a2b52;       /* hr.html  (= --text) */
    --gray:       #6475a0;       /* hr.html  (= --muted) */

    /* ── Glass / card ── */
    --glass:           rgba(255,255,255,0.8);
    --glass-bg:        rgba(255,255,255,0.9);   /* hr.html */
    --glass-border:    rgba(79,142,247,0.15);
    --glass-highlight: rgba(79,142,247,0.2);
    --gborder:         rgba(79,142,247,0.15);   /* browse.html */
    --card-bg:         rgba(255,255,255,0.9);   /* browse.html */
    --card:            rgba(255,255,255,0.95);  /* view.html */
    --border:          rgba(79,142,247,0.15);   /* view.html */
    --surface:         rgba(255,255,255,0.9);
    --surface-2:       rgba(248,251,255,0.95);
}

/* ═══════════════════════════════════════════════════
   2. ANIMATION KEYFRAMES
═══════════════════════════════════════════════════ */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0);    }
}

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

@keyframes chipIn {
    from { transform:scale(0.7); opacity:0; }
    to   { transform:scale(1);   opacity:1; }
}

/* ═══════════════════════════════════════════════════
   3. PAGE BACKGROUND GRADIENT  (.page-bg utility)
═══════════════════════════════════════════════════ */
.page-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 15% 10%, rgba(79,142,247,.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 85%, rgba(108,95,245,.06) 0%, transparent 55%),
        linear-gradient(160deg, #f0f5ff 0%, #eaf0ff 60%, #f0f5ff 100%);
}

/* ═══════════════════════════════════════════════════
   4. BUTTON SYSTEM
═══════════════════════════════════════════════════ */
.btn {
    padding: .75rem 1.5rem;
    border: none; border-radius: 12px;
    font-weight: 700; font-size: .9rem;
    font-family: 'Tajawal', sans-serif;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: all .25s; cursor: pointer;
}
.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    box-shadow: 0 4px 15px rgba(79,142,247,.25);
}
.btn-primary:hover {
    transform: translateY(-2px); filter: brightness(1.08);
    box-shadow: 0 8px 25px rgba(79,142,247,.45);
}
.btn-outline {
    background: rgba(79,142,247,.06);
    color: var(--brand);
    border: 1px solid rgba(79,142,247,.35);
}
.btn-outline:hover {
    background: rgba(79,142,247,.12);
    border-color: var(--brand);
}
.btn-icon {
    width: 38px; height: 38px; padding: 0;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(79,142,247,.08);
    border: 1px solid var(--glass-border);
    color: var(--muted); cursor: pointer; transition: all .25s;
}
.btn-icon:hover {
    background: var(--brand); color: #fff;
    border-color: var(--brand); transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79,142,247,.3);
}

/* ═══════════════════════════════════════════════════
   5. TOAST NOTIFICATION
═══════════════════════════════════════════════════ */
.toast {
    position: fixed; bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(79,142,247,.2);
    border-radius: 14px; padding: .85rem 1.5rem;
    display: flex; align-items: center; gap: .75rem;
    font-size: .9rem; font-weight: 600; color: var(--text);
    box-shadow: 0 10px 40px rgba(79,142,247,.15);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    z-index: 9999; backdrop-filter: blur(16px);
    font-family: 'Tajawal', sans-serif;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast i    { color: var(--success); font-size: 1.1rem; }

/* ═══════════════════════════════════════════════════
   6. GLASS CARD BASE
═══════════════════════════════════════════════════ */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 16px rgba(79,142,247,.07);
    transition: all .3s;
}
.glass-card:hover {
    border-color: rgba(79,142,247,.3);
    box-shadow: 0 20px 50px rgba(79,142,247,.12);
}

/* ═══════════════════════════════════════════════════
   7. SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar          { width:5px; height:5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(79,142,247,.2); border-radius:4px; }