/* ════════════════════════════════════════════════════════════
   Lux-World PC — Portail client Zoho Desk
   Design synchronisé avec lwpc.lu
   Palette : bleu #3d5394 · jaune #f1cb25 · fond clair #E8ECF2
   Fonts   : Outfit (texte) · JetBrains Mono (labels/buttons)
   ════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');

/* ── Variables ──────────────────────────────────────────── */
:root {
  --blue:      #3d5394;
  --blue-l:    #4a64b0;
  --blue-xl:   #5a76c0;
  --yellow:    #f1cb25;
  --bg:        #E8ECF2;
  --bg-2:      #F4F6FA;
  --bg-3:      #DDE3EE;
  --border:    #DDE1EA;
  --text:      #0D1B2E;
  --text-2:    #3A4A5C;
  --text-3:    #7A8A9C;
  --radius:    8px;
  --radius-sm: 4px;
  --sans:      'Outfit', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
  --trans:     0.22s ease;
  --shadow:    0 2px 16px rgba(61,83,148,0.08);
}

/* ── Global ─────────────────────────────────────────────── */
body {
  font-family: var(--sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

* { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────── */
.Header__header {
  background: var(--blue) !important;
  box-shadow: 0 2px 12px rgba(61,83,148,0.25) !important;
}

.Header__headerImg {
  display: none !important; /* pas d'image de fond */
}

/* Nom de marque */
.Header__brandName {
  font-family: var(--mono) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
}

/* Logo */
.Header__brandLogoImg {
  height: 52px !important;
  width: auto !important;
}

/* SignIn / SignOut link */
.Header__headerRow a,
.Header__userContainer a,
.UserMenu__userMenuLink {
  font-family: var(--mono) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: color var(--trans) !important;
}
.Header__headerRow a:hover,
.UserMenu__userMenuLink:hover {
  color: var(--yellow) !important;
}

/* ── Navigation tabs ────────────────────────────────────── */
.Header__headerNav {
  background: rgba(0,0,0,0.15) !important;
}

.Header__tabsTab a,
.Header__tabsTab span {
  font-family: var(--mono) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255,255,255,0.75) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.6rem 1rem !important;
  display: block !important;
  transition: color var(--trans) !important;
}

.Header__tabsTab a:hover,
.Header__tabsTab span:hover {
  color: var(--yellow) !important;
}

.Header__tabsTab--active a,
.Header__tabsTab--active span,
.Header__tabsTab.active a {
  color: var(--yellow) !important;
  border-bottom: 2px solid var(--yellow) !important;
}

/* ── Contenu principal ──────────────────────────────────── */
.portal-body,
.portalWrapper,
.MainContent__mainContent,
.PageContent__pageContent {
  background: var(--bg) !important;
}

.Card__card,
.cardWrapper,
[class*="Card__"],
[class*="__card"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* Titres */
h1, h2, h3, h4, h5,
[class*="__title"],
[class*="__heading"] {
  font-family: var(--sans) !important;
  color: var(--text) !important;
}

/* ── Boutons ────────────────────────────────────────────── */
.btn,
button,
[class*="__btn"],
[class*="__button"],
input[type="submit"],
input[type="button"] {
  font-family: var(--mono) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--radius-sm) !important;
  border: 2px solid transparent !important;
  transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans) !important;
  cursor: pointer !important;
}

/* Bouton primaire (bleu) */
.btn-primary,
.btnPrimary,
[class*="primary"],
input[type="submit"] {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}
.btn-primary:hover,
.btnPrimary:hover,
[class*="primary"]:hover,
input[type="submit"]:hover {
  background: var(--blue-xl) !important;
  border-color: var(--blue-xl) !important;
  transform: translateY(-1px) !important;
}

/* Bouton secondaire (contour bleu) */
.btn-default,
.btnSecondary,
[class*="secondary"],
[class*="cancel"],
[class*="Cancel"] {
  background: transparent !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
.btn-default:hover,
.btnSecondary:hover {
  background: var(--blue) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ── Formulaires ────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-control,
[class*="__input"],
[class*="__textarea"] {
  font-family: var(--sans) !important;
  font-size: 0.95rem !important;
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.6rem 0.85rem !important;
  transition: border-color var(--trans) !important;
  outline: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(61,83,148,0.12) !important;
}

label,
[class*="__label"] {
  font-family: var(--mono) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-2) !important;
  text-transform: uppercase !important;
}

/* ── Liens ──────────────────────────────────────────────── */
a { color: var(--blue) !important; text-decoration: none !important; }
a:hover { color: var(--blue-xl) !important; text-decoration: underline !important; }

/* ── Statuts des tickets ────────────────────────────────── */
[class*="status-open"],
[class*="__open"],
.status-open {
  background: rgba(61,83,148,0.12) !important;
  color: var(--blue) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

[class*="status-closed"],
[class*="__closed"],
.status-closed {
  background: rgba(122,138,156,0.12) !important;
  color: var(--text-3) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── Footer custom ──────────────────────────────────────── */
.Footer__footer {
  background: var(--blue) !important;
  color: rgba(255,255,255,0.7) !important;
}

.lwpc-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  background: var(--blue);
}

.lwpc-footer a {
  color: var(--yellow) !important;
  text-decoration: none !important;
}
.lwpc-footer a:hover {
  text-decoration: underline !important;
}