/*
 * =============================================================
 *  HIRE-A-FRIEND  -  GLOBAL DESIGN SYSTEM
 *  Source of truth: layouts/app.blade.php (Homepage)
 * =============================================================
 */

/* 1. TOKENS */
:root {
    --ds-primary:        #2563eb;
    --ds-primary-hover:  #1d4ed8;
    --ds-primary-glow:   rgba(37, 99, 235, 0.15);
    --ds-secondary:      #7c3aed;
    --ds-secondary-hover:#6d28d9;
    --ds-accent:         #ec4899;
    --ds-gradient:       linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    --ds-gradient-glow:  rgba(124, 58, 237, 0.25);
    --ds-success:  #10b981;
    --ds-warning:  #f59e0b;
    --ds-danger:   #ef4444;
    --ds-info:     #06b6d4;
    --ds-bg:          #f8fafc;
    --ds-surface:     #ffffff;
    --ds-surface-2:   #f1f5f9;
    --ds-border:      #e2e8f0;
    --ds-border-soft: rgba(0,0,0,0.06);
    --ds-text:        #0f172a;
    --ds-text-2:      #475569;
    --ds-text-muted:  #64748b;
    --ds-input-bg:     #ffffff;
    --ds-input-border: #cbd5e1;
    --ds-input-focus:  #2563eb;
    --ds-input-glow:   rgba(37, 99, 235, 0.10);
    --ds-sidebar-bg:        #ffffff;
    --ds-sidebar-border:    #e2e8f0;
    --ds-sidebar-hover:     rgba(37, 99, 235, 0.05);
    --ds-sidebar-active-bg: #2563eb;
    --ds-shadow-sm: 0 1px 2px 0 rgba(15,23,42,0.05);
    --ds-shadow-md: 0 4px 6px -1px rgba(15,23,42,0.05), 0 2px 4px -2px rgba(15,23,42,0.05);
    --ds-shadow-lg: 0 20px 25px -5px rgba(15,23,42,0.08), 0 8px 10px -6px rgba(15,23,42,0.08);
    --ds-shadow-xl: 0 32px 48px -8px rgba(15,23,42,0.12);
    --ds-radius-xl: 24px;
    --ds-radius-lg: 20px;
    --ds-radius-md: 12px;
    --ds-radius-sm: 8px;
    --ds-radius-xs: 4px;
    --ds-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ds-font: 'Jost', 'Inter', sans-serif;
}

html.dark {
    --ds-bg:          #0b111e;
    --ds-surface:     #141c2f;
    --ds-surface-2:   #1e293b;
    --ds-border:      #1e293b;
    --ds-border-soft: rgba(255,255,255,0.06);
    --ds-text:       #f8fafc;
    --ds-text-2:     #94a3b8;
    --ds-text-muted: #64748b;
    --ds-input-bg:     #1e293b;
    --ds-input-border: #334155;
    --ds-input-focus:  #3b82f6;
    --ds-input-glow:   rgba(59, 130, 246, 0.20);
    --ds-sidebar-bg:     #141c2f;
    --ds-sidebar-border: #1e293b;
    --ds-sidebar-hover:  rgba(37, 99, 235, 0.10);
    --ds-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.25);
    --ds-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.25), 0 2px 4px -2px rgba(0,0,0,0.25);
    --ds-shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.35), 0 8px 10px -6px rgba(0,0,0,0.35);
    --ds-shadow-xl: 0 32px 48px -8px rgba(0,0,0,0.5);
}

/* 2. FONT ALIGNMENT - force Jost on dashboard layouts */
body, .ds-font-override,
.c-sidebar, .admin-sidebar, .c-header, .admin-header,
.c-main, .admin-body, .admin-main {
    font-family: 'Jost', 'Inter', sans-serif !important;
}

/* 3. BOOTSTRAP OVERRIDES - forms */
.form-control, .form-select {
    background-color: var(--ds-input-bg) !important;
    border-color: var(--ds-input-border) !important;
    color: var(--ds-text) !important;
    border-radius: var(--ds-radius-md) !important;
    font-family: var(--ds-font) !important;
    transition: var(--ds-transition) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ds-input-focus) !important;
    box-shadow: 0 0 0 3px var(--ds-input-glow) !important;
    background-color: var(--ds-input-bg) !important;
    color: var(--ds-text) !important;
}
.form-control::placeholder { color: var(--ds-text-muted) !important; }
.input-group-text {
    background-color: var(--ds-surface-2) !important;
    border-color: var(--ds-input-border) !important;
    color: var(--ds-text-muted) !important;
    font-family: var(--ds-font) !important;
}
.form-label { font-family: var(--ds-font) !important; font-weight: 600 !important; color: var(--ds-text-2) !important; }

/* 4. BOOTSTRAP OVERRIDES - tables */
.table { color: var(--ds-text) !important; border-color: var(--ds-border) !important; font-family: var(--ds-font) !important; }
.table-light { --bs-table-bg: var(--ds-surface-2) !important; --bs-table-border-color: var(--ds-border) !important; color: var(--ds-text) !important; }
.table > :not(caption) > * > * { border-bottom-color: var(--ds-border) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(37,99,235,0.03) !important; }

/* 5. BOOTSTRAP OVERRIDES - dropdowns */
.dropdown-menu {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: var(--ds-shadow-lg) !important;
    padding: 0.5rem !important;
    font-family: var(--ds-font) !important;
}
.dropdown-item {
    color: var(--ds-text) !important;
    border-radius: var(--ds-radius-sm) !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    transition: var(--ds-transition) !important;
    font-family: var(--ds-font) !important;
}
.dropdown-item:hover { background-color: rgba(37,99,235,0.06) !important; color: var(--ds-primary) !important; }

/* 6. BOOTSTRAP OVERRIDES - modals */
.modal-content {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-xl) !important;
    font-family: var(--ds-font) !important;
}
.modal-header { border-bottom: 1px solid var(--ds-border) !important; }
.modal-footer { border-top:  1px solid var(--ds-border) !important; }
.modal-title { font-family: var(--ds-font) !important; font-weight: 700 !important; color: var(--ds-text) !important; }

/* 7. CARDS */
.ds-card {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: var(--ds-transition);
}
.ds-card-hover:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); border-color: rgba(37,99,235,0.2); }
.portal-card { background-color: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); padding: 1.75rem; }

/* 8. BUTTONS */
.ds-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--ds-font); font-weight: 600; font-size: 0.92rem;
    padding: 0.65rem 1.5rem; border-radius: 30px;
    border: 1px solid transparent; cursor: pointer;
    transition: var(--ds-transition); text-decoration: none; outline: none;
}
.ds-btn-primary  { background: var(--ds-primary); border-color: var(--ds-primary); color:#fff !important; box-shadow:0 4px 14px var(--ds-primary-glow); }
.ds-btn-primary:hover  { background:var(--ds-primary-hover); border-color:var(--ds-primary-hover); transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,99,235,0.35); color:#fff !important; }
.ds-btn-gradient { background:var(--ds-gradient); border-color:transparent; color:#fff !important; box-shadow:0 4px 14px var(--ds-gradient-glow); }
.ds-btn-gradient:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,0.4); color:#fff !important; }
.ds-btn-outline  { background:transparent; border-color:var(--ds-border); color:var(--ds-text); }
.ds-btn-outline:hover  { border-color:var(--ds-primary); color:var(--ds-primary); background:rgba(37,99,235,0.05); transform:translateY(-1px); }
.ds-btn-danger   { background:var(--ds-danger); border-color:var(--ds-danger); color:#fff !important; }
.ds-btn-danger:hover   { background:#dc2626; transform:translateY(-2px); color:#fff !important; }
.ds-btn-sm { padding:0.4rem 1rem; font-size:0.82rem; }

/* 9. BADGES */
.ds-badge { display:inline-flex; align-items:center; font-family:var(--ds-font); font-size:0.72rem; font-weight:700; padding:0.3em 0.8em; border-radius:20px; white-space:nowrap; }
.ds-badge-primary { background:rgba(37,99,235,0.12);  color:#2563eb; }
.ds-badge-success { background:rgba(16,185,129,0.12); color:#059669; }
.ds-badge-warning { background:rgba(245,158,11,0.12); color:#d97706; }
.ds-badge-danger  { background:rgba(239,68,68,0.12);  color:#dc2626; }
.ds-badge-info    { background:rgba(6,182,212,0.12);  color:#0891b2; }
.ds-badge-muted   { background:rgba(100,116,139,0.12);color:#475569; }
.ds-badge-purple  { background:rgba(124,58,237,0.12); color:#7c3aed; }

/* Status badges (backward compat) */
.badge-status { font-size:0.72rem; padding:0.3em 0.75em; border-radius:20px; font-weight:600; display:inline-flex; align-items:center; }
.badge-pending   { background:rgba(245,158,11,0.12); color:#d97706; }
.badge-approved  { background:rgba(16,185,129,0.12); color:#059669; }
.badge-completed { background:rgba(37,99,235,0.12);  color:#2563eb; }
.badge-rejected, .badge-danger { background:rgba(239,68,68,0.12); color:#dc2626; }
.badge-cancelled { background:rgba(100,116,139,0.12);color:#475569; }
.badge-ongoing   { background:rgba(124,58,237,0.12); color:#7c3aed; }

/* 10. TYPOGRAPHY HELPERS */
.ds-page-title { font-family:var(--ds-font); font-size:1.5rem; font-weight:800; color:var(--ds-text); letter-spacing:-0.4px; margin:0; }
.ds-page-subtitle { font-family:var(--ds-font); font-size:0.875rem; color:var(--ds-text-muted); margin:0.25rem 0 0; }

/* 11. AVATARS */
.ds-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-family:var(--ds-font); font-weight:700; object-fit:cover; flex-shrink:0; border:2px solid var(--ds-primary); }
.ds-avatar-sm { width:32px; height:32px; font-size:0.75rem; }
.ds-avatar-md { width:40px; height:40px; font-size:0.9rem; }
.ds-avatar-lg { width:56px; height:56px; font-size:1.2rem; }
.ds-avatar-placeholder { background:var(--ds-gradient); color:#fff; }

/* 12. AUTH PAGES */
.ds-auth-page {
    flex:1; display:flex; align-items:center; justify-content:center; padding:2rem 1rem;
    background: radial-gradient(at 20% 20%, rgba(124,58,237,0.08) 0%, transparent 50%),
                radial-gradient(at 80% 80%, rgba(236,72,153,0.08) 0%, transparent 50%),
                var(--ds-bg);
}
.ds-auth-box { width:100%; max-width:980px; display:flex; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.08); overflow:hidden; }
.ds-auth-form-panel { flex:1; padding:3.5rem; display:flex; flex-direction:column; justify-content:center; }
.ds-auth-visual-panel { flex:1; position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; min-height:520px; background:var(--ds-gradient); }
.ds-auth-visual-content { position:relative; z-index:2; padding:3rem; color:#fff; }
@media (max-width:767.98px) {
    .ds-auth-box { flex-direction:column; }
    .ds-auth-visual-panel { min-height:180px; }
    .ds-auth-form-panel { padding:2rem 1.5rem; }
}

/* 13. ANIMATIONS */
@keyframes ds-fade-in { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
@keyframes ds-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.ds-fade-in { animation: ds-fade-in 0.35s cubic-bezier(0.16,1,0.3,1) both; }
.ds-skeleton { background:linear-gradient(90deg,var(--ds-border) 25%,var(--ds-surface-2) 50%,var(--ds-border) 75%); background-size:200% 100%; animation:ds-shimmer 1.5s infinite; border-radius:var(--ds-radius-sm); }

/* 14. UTILITY */
.ds-divider { border:none; border-top:1px solid var(--ds-border); margin:1.25rem 0; }
.ds-text-muted { color:var(--ds-text-muted) !important; }
.ds-text-brand { color:var(--ds-primary) !important; }
.ds-bg-surface { background-color:var(--ds-surface) !important; }
.ds-rounded-lg { border-radius:var(--ds-radius-lg) !important; }
.ds-rounded-md { border-radius:var(--ds-radius-md) !important; }
.ds-shadow-sm  { box-shadow:var(--ds-shadow-sm) !important; }
.ds-shadow-md  { box-shadow:var(--ds-shadow-md) !important; }

/* 15. ALERT */
.alert { border-radius: var(--ds-radius-md) !important; font-family: var(--ds-font) !important; }

/* 16. SCROLLBAR */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ds-border); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--ds-primary); }

/* 17. REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}