/* ============================================================
   HBI DASHBOARD CSS v4
   Login, Dashboard, Tabs, Charts, Profile, Notifications, Memo
   Loaded ONLY on /equipe page
   ============================================================ */

/* === LOGIN SECTION === */
.section-team-login { padding:120px 0; background:var(--dark); position:relative; overflow:hidden; }
.team-login-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(92,26,58,0.5) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 10% 30%,rgba(196,150,58,0.06) 0%,transparent 60%); }
.team-login-content { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.team-info h2 { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); font-weight:700; color:var(--creme); line-height:1.15; margin-bottom:20px; }
.team-info h2 em { font-style:italic; color:var(--or-light); }
.team-info p { font-size:1rem; color:rgba(245,239,228,0.6); line-height:1.8; margin-bottom:36px; }
.staff-roles { display:flex; flex-direction:column; gap:12px; }
.role-item { display:flex; align-items:center; gap:14px; padding:14px 20px; background:rgba(255,255,255,0.04); border-radius:var(--radius-sm); border:1px solid rgba(196,150,58,0.12); }
.role-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.role-dot.or { background:var(--or); }
.role-dot.bordeaux { background:var(--bordeaux-mid); }
.role-dot.gray { background:rgba(245,239,228,0.3); }
.role-info h5 { font-size:0.82rem; font-weight:600; color:var(--creme); margin-bottom:2px; }
.role-info span { font-size:0.82rem; color:rgba(245,239,228,0.4); }
.dashboard-preview { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:32px; }
.dash-item { padding:16px 18px; background:rgba(255,255,255,0.03); border:1px solid rgba(196,150,58,0.1); border-radius:var(--radius-sm); display:flex; gap:12px; align-items:center; }
.dash-icon { font-size:1.3rem; color:var(--or); }
.dash-label { font-size:0.84rem; font-weight:500; color:rgba(245,239,228,0.45); }

/* Login card */
.login-card { background:rgba(45,18,32,0.6)!important; backdrop-filter:blur(24px) saturate(1.4)!important; border:1px solid rgba(196,150,58,0.2); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,0.4),inset 0 1px 0 rgba(196,150,58,0.1); }
.login-card-header { background:linear-gradient(135deg,var(--bordeaux-deep),var(--bordeaux)); padding:36px 44px 32px; border-bottom:1px solid rgba(196,150,58,0.2); text-align:center; }
.login-logo { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--creme); margin-bottom:4px; }
.login-logo span { color:var(--or); }
.login-sub-title { font-size:0.8rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:rgba(196,150,58,0.6); }
.login-card-body { padding:44px; }
.login-form .form-group { margin-bottom:20px; }
.login-form .form-group label { color:var(--or-pale); }
.login-form .form-group input { background:rgba(255,255,255,0.06); border-color:rgba(196,150,58,0.2); color:var(--creme); }
.login-form .form-group input::placeholder { color:rgba(245,239,228,0.3); }
.login-form .form-group input:focus { border-color:var(--or); }
.login-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; font-size:0.8rem; }
.remember-me { display:flex; align-items:center; gap:8px; color:rgba(245,239,228,0.5); cursor:pointer; }
.remember-me input[type="checkbox"] { width:14px; height:14px; accent-color:var(--or); }
.forgot-link { color:var(--or); font-size:0.84rem; transition:color 0.2s; }
.forgot-link:hover { color:var(--or-pale); }
.btn-login-full { width:100%; padding:16px; background:linear-gradient(135deg,var(--or),var(--or-light)); color:var(--bordeaux-deep); font-family:var(--font-body); font-size:0.8rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; border-radius:var(--radius-sm); transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-login-full:hover { box-shadow:0 8px 32px rgba(196,150,58,0.4); transform:translateY(-2px); }
.login-footer { text-align:center; margin-top:24px; padding-top:24px; border-top:1px solid rgba(196,150,58,0.1); font-size:0.84rem; color:rgba(245,239,228,0.35); }

/* === DASHBOARD === */
.hbi-dashboard { display:none; padding:40px 0 120px; background:var(--dark); min-height:100vh; }
.hbi-dashboard.active { display:block; }

/* Profile header */
.dash-profile { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid rgba(196,150,58,0.12); }
.dash-profile-left { display:flex; align-items:center; gap:16px; }
.dash-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--bordeaux),var(--bordeaux-mid)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--or-light); border:2px solid rgba(196,150,58,0.3); }
.dash-profile-name { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--creme); }
.dash-profile-name span { color:var(--or); }
.dash-profile-role { font-size:0.82rem; color:rgba(245,239,228,0.4); letter-spacing:0.06em; }
.dash-profile-right { display:flex; align-items:center; gap:16px; }
.dash-profile-date { font-size:0.84rem; color:rgba(245,239,228,0.35); }
.dash-notif-btn { position:relative; color:rgba(245,239,228,0.5); padding:10px; border-radius:var(--radius-sm); transition:var(--transition); border:1px solid rgba(196,150,58,0.12); }
.dash-notif-btn:hover { color:var(--or); border-color:rgba(196,150,58,0.3); background:rgba(196,150,58,0.06); }
.dash-notif-badge { position:absolute; top:-4px; right:-4px; width:18px; height:18px; background:var(--or); color:var(--bordeaux-deep); font-size:0.8rem; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dash-logout { padding:10px 24px; border:1px solid rgba(196,150,58,0.3); color:var(--or-pale); font-size:0.82rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; border-radius:var(--radius-sm); transition:var(--transition); cursor:pointer; }
.dash-logout:hover { background:rgba(196,150,58,0.1); }

/* Notifications dropdown */
.dash-notif-dropdown { position:relative; background:rgba(45,18,32,0.95); border:1px solid rgba(196,150,58,0.2); border-radius:var(--radius-md); margin-bottom:20px; overflow:hidden; animation:dashFadeUp 0.3s ease; }
.dash-notif-header { padding:16px 24px; font-size:0.8rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--or); border-bottom:1px solid rgba(196,150,58,0.1); }
.dash-notif-item { padding:14px 24px; border-bottom:1px solid rgba(255,255,255,0.03); display:flex; gap:12px; align-items:flex-start; }
.dash-notif-item:last-child { border-bottom:none; }
.dash-notif-dot { width:8px; height:8px; border-radius:50%; background:var(--or); flex-shrink:0; margin-top:6px; }
.dash-notif-dot.read { background:rgba(245,239,228,0.15); }
.dash-notif-text { font-size:0.82rem; color:rgba(245,239,228,0.6); line-height:1.5; }
.dash-notif-text strong { color:var(--or-light); }
.dash-notif-time { font-size:0.8rem; color:rgba(245,239,228,0.25); margin-top:4px; }

/* Quick memo */
.dash-memo { display:flex; align-items:center; gap:12px; padding:14px 20px; background:rgba(196,150,58,0.04); border:1px solid rgba(196,150,58,0.12); border-radius:var(--radius-sm); margin-bottom:28px; }
.dash-memo-icon { color:var(--or); flex-shrink:0; }
.dash-memo-input { flex:1; background:transparent; border:none; font-family:var(--font-body); font-size:0.88rem; color:var(--creme); outline:none; }
.dash-memo-input::placeholder { color:rgba(245,239,228,0.25); }
.dash-memo-save { padding:8px 16px; background:rgba(196,150,58,0.12); border:1px solid rgba(196,150,58,0.25); border-radius:var(--radius-sm); color:var(--or); font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:var(--transition); }
.dash-memo-save:hover { background:rgba(196,150,58,0.2); }

/* Stats cards */
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.dash-stat-card { padding:28px 24px; background:rgba(255,255,255,0.04); border:1px solid rgba(196,150,58,0.15); border-radius:var(--radius-md); transition:var(--transition); }
.dash-stat-card:hover { border-color:rgba(196,150,58,0.3); transform:translateY(-4px); }
.dash-stat-icon { margin-bottom:12px; color:var(--or); }
.dash-stat-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--or-light); margin-bottom:4px; }
.dash-stat-label { font-size:0.8rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(245,239,228,0.4); }

/* Tabs */
.dash-tabs { display:flex; gap:4px; margin-bottom:28px; border-bottom:1px solid rgba(196,150,58,0.12); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dash-tab { padding:14px 24px; font-size:0.82rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:rgba(245,239,228,0.4); border-bottom:2px solid transparent; transition:var(--transition); cursor:pointer; background:none; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.dash-tab:hover { color:rgba(245,239,228,0.7); }
.dash-tab.active { color:var(--or); border-bottom-color:var(--or); }
.dash-tab-content { display:none; }
.dash-tab-content.active { display:block; animation:dashFadeUp 0.4s ease; }
@keyframes dashFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* Panels */
.dash-panel { background:rgba(255,255,255,0.04); border:1px solid rgba(196,150,58,0.15); border-radius:var(--radius-md); overflow:hidden; margin-bottom:20px; }
.dash-panel-header { padding:20px 28px; background:rgba(196,150,58,0.06); border-bottom:1px solid rgba(196,150,58,0.12); display:flex; justify-content:space-between; align-items:center; }
.dash-panel-title { font-family:var(--font-heading); font-size:1rem; font-weight:600; color:var(--or-light); display:flex; align-items:center; gap:8px; }
.dash-panel-body { padding:24px 28px; }

/* Appointments */
.dash-appointment { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.dash-appointment:last-child { border-bottom:none; }
.dash-appt-info h5 { font-size:0.85rem; font-weight:500; color:var(--creme); margin-bottom:3px; }
.dash-appt-info span { font-size:0.82rem; color:rgba(245,239,228,0.4); }
.dash-appt-time { font-size:0.84rem; font-weight:600; color:var(--or); padding:4px 12px; background:rgba(196,150,58,0.08); border-radius:40px; }

/* Certifications */
.dash-cert-item { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.dash-cert-item:last-child { border-bottom:none; }
.dash-cert-badge { flex-shrink:0; color:var(--or); }
.dash-cert-info h5 { font-size:0.82rem; font-weight:500; color:var(--creme); margin-bottom:2px; }
.dash-cert-info span { font-size:0.8rem; color:rgba(245,239,228,0.4); }
.dash-progress-bar { width:100%; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; margin-top:8px; overflow:hidden; }
.dash-progress-fill { height:100%; border-radius:3px; transition:width 1s var(--easing-page); }
.dash-progress-fill.bronze { background:#C8973A; }
.dash-progress-fill.silver { background:#B4B4C4; }
.dash-progress-fill.gold { background:var(--or); }

/* Charts */
.dash-chart-bar { display:flex; align-items:center; gap:12px; padding:10px 0; }
.dash-chart-label { font-size:0.82rem; color:rgba(245,239,228,0.5); width:60px; flex-shrink:0; }
.dash-chart-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.dash-chart-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--or),var(--or-light)); transition:width 1.2s var(--easing-page); }
.dash-chart-value { font-size:0.84rem; font-weight:600; color:var(--or); width:55px; text-align:right; }

/* Forms inside dashboard */
.dash-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.dash-form-row.single { grid-template-columns:1fr; }
.dash-form-row input,.dash-form-row select,.dash-form-row textarea { width:100%; padding:10px 14px; background:rgba(255,255,255,0.06); border:1px solid rgba(196,150,58,0.2); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:0.85rem; color:var(--creme); outline:none; }
.dash-form-row input:focus,.dash-form-row select:focus,.dash-form-row textarea:focus { border-color:var(--or); }
.dash-form-row input::placeholder,.dash-form-row textarea::placeholder { color:rgba(245,239,228,0.3); }
.dash-form-row textarea { min-height:80px; resize:vertical; }
.dash-add-btn { padding:10px 20px; background:linear-gradient(135deg,var(--or),var(--or-light)); color:var(--bordeaux-deep); font-size:0.84rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.dash-add-btn:hover { box-shadow:0 4px 20px rgba(196,150,58,0.3); }

/* Commission card */
.dash-commission-card { padding:20px; background:rgba(255,255,255,0.03); border:1px solid rgba(196,150,58,0.1); border-radius:var(--radius-sm); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.dash-commission-info h5 { font-size:0.85rem; color:var(--creme); margin-bottom:3px; }
.dash-commission-info span { font-size:0.8rem; color:rgba(245,239,228,0.4); }
.dash-commission-amount { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--or-light); }
.dash-commission-total { padding:20px; background:rgba(196,150,58,0.08); border:1px solid rgba(196,150,58,0.25); border-radius:var(--radius-sm); display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.dash-commission-total h4 { font-family:var(--font-heading); font-size:1rem; font-weight:600; color:var(--or-light); }
.dash-commission-total .amount { font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--or); }

/* Apprentice progress cards */
.dash-apprentice-card { padding:24px; background:rgba(255,255,255,0.03); border:1px solid rgba(196,150,58,0.1); border-radius:var(--radius-md); margin-bottom:16px; }
.dash-apprentice-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.dash-apprentice-name { font-size:0.92rem; font-weight:600; color:var(--creme); }
.dash-apprentice-level { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:4px 12px; border-radius:40px; }
.dash-apprentice-level.bronze { background:rgba(200,151,58,0.15); color:#C8973A; }
.dash-apprentice-level.silver { background:rgba(180,180,196,0.15); color:#B4B4C4; }
.dash-apprentice-skills { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dash-skill-row { display:flex; align-items:center; gap:8px; }
.dash-skill-name { font-size:0.82rem; color:rgba(245,239,228,0.5); width:80px; flex-shrink:0; }
.dash-skill-bar { flex:1; height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.dash-skill-fill { height:100%; background:var(--or); border-radius:2px; transition:width 1s var(--easing-page); }

/* Responsive */
@media (max-width:1100px) {
  .team-login-content { grid-template-columns:1fr; gap:48px; }
  .dash-stats { grid-template-columns:repeat(2,1fr); }
  .dash-profile { flex-direction:column; gap:16px; align-items:flex-start; }
  .dashboard-preview { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .dash-stats { grid-template-columns:1fr; }
  .dash-form-row { grid-template-columns:1fr; }
  .dash-tabs { gap:0; }
  .dash-tab { padding:12px 16px; font-size:0.8rem; }
  .dashboard-preview { grid-template-columns:1fr; }
  .dash-apprentice-skills { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .section-team-login { padding:80px 0; }
  .login-card-header { padding:24px 20px 20px; }
  .login-card-body { padding:28px 20px; }
  .login-logo { font-size:1.1rem; }
  .dash-panel-header { padding:16px 18px; }
  .dash-panel-body { padding:18px; }
  .dash-stat-card { padding:18px 16px; }
  .dash-tab { padding:10px 12px; font-size:0.75rem; }
  .dash-profile-name { font-size:1.1rem; }
  .dash-memo { padding:12px 14px; gap:8px; }
  .dash-memo-input { font-size:0.82rem; }
  .dash-commission-card { flex-direction:column; align-items:flex-start; gap:8px; }
  .dash-commission-total { flex-direction:column; align-items:flex-start; gap:8px; }
  .hbi-dashboard { padding:24px 0 80px; }
  .dash-form-row input,.dash-form-row select,.dash-form-row textarea { font-size:16px; }
}