@import '../../shared/uc-design.css';

/* espace particuliers uniquement, le reste vient de shared/uc-design.css */

/*  PART LAYOUT WRAPPER  */
body.part-layout { display: flex; overflow-x: hidden; }

/*  LOGIN HERO : brand photo background  */
.login-hero {
  background:
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 60%, var(--hero-overlay-end) 100%),
    url('../../brand_assets/projet4.jpeg');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* Logo flottant en haut, séparé du contenu centré */
.login-hero-logo {
  position: absolute;
  top: 36px;
  left: 56px;
  height: 52px;
  width: auto;
  margin-bottom: 0;
  z-index: 2;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.32));
}

/* Cartes de rôle - panneau gauche login (maquette) */
.login-role-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
  margin-top: 8px;
}
.login-role-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: default;
}
.login-role-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(178,222,195,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-200);
  font-size: 15px;
  flex-shrink: 0;
}
.login-role-name {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.login-role-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}

/*  Annonce cards */
.annonce-card { padding: 0 !important; }
.annonce-card-img {
  height: 140px;
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
  overflow: hidden;
}
.annonce-card-img i { font-size: 40px; color: var(--green-200); }
.annonce-card-img img { width: 100%; height: 100%; object-fit: cover; }
.annonce-card-img .badge { position: absolute; top: 10px; left: 10px; }
.annonce-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.annonce-meta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.annonce-meta-item { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.annonce-meta-item i { font-size: 11px; }
.annonce-card-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

/*  PART-SPECIFIC RESPONSIVE  */
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
}
@media (max-width: 768px) {
  .annonces-grid  { grid-template-columns: 1fr; }
  .formations-grid { grid-template-columns: 1fr; }
  .page-title-row { flex-direction: column; align-items: flex-start; }
}

/* notif-bell, msg-bubble, filtre-tab → shared/uc-design.css */

/* Dashboard inline styles extraits */
.dash-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
.dash-score-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
}
.dash-score-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-score-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-score-icon i { color: var(--teal-600); font-size: 15px; }
.dash-score-title { margin: 0; font-size: 16px; font-weight: 600; }
.dash-score-badge {
  background: var(--teal-600);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}
.dash-score-body { padding: 0; }
.dash-score-loading { text-align: center; padding: 30px; color: var(--text-muted); }
.dash-annonces-body { padding: 16px; }
.annonces-grid-2col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dash-events-body { padding: 14px; }
.dash-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.quick-action-btn {
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  text-align: center;
  height: auto;
  justify-content: center;
}
.quick-action-btn i { font-size: 18px; color: var(--teal-700); }
.quick-action-btn span { font-size: 12px; }
@media (max-width: 900px) {
  .dash-main-grid { grid-template-columns: 1fr; }
  .dash-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .annonces-grid-2col { grid-template-columns: 1fr; }
}