/* a2-common.css — styles communs + variables de thème pour tous les modules a2*.
   Préfixe: a2-*
   Charte graphique corporate partagée (alias2avatar, alias2heda, alias2pramheda, etc.).
   Police: JetBrains Mono, auto-hébergée dans data_shared/fonts/.
   Aucun style inline autorisé.

   Usage :
     <link rel="stylesheet" href="/a2common/static/css/a2-common.css" />
     <link rel="stylesheet" href="/a2common/static/css/a2-header.css" />
     <link rel="stylesheet" href="/a2common/static/css/a2-sidebar.css" />
     <link rel="stylesheet" href="/a2common/static/css/a2-template.css" />
     <!-- + CSS spécifique au module -->
     <link rel="stylesheet" href="/alias2pramheda/static/css/a2ph-specific.css" /> */

:root {
  /* Variables communes (light par défaut, surchargées par .a2-theme--dark) */
  --a2-color-bg: #ffffff;
  --a2-color-fg: #111111;
  --a2-color-muted: #6b7280;
  --a2-color-primary: #667eea;
  --a2-color-card: #f3f4f6;
  --a2-color-border: #e5e7eb;
  --a2-shadow-1: 0 1px 2px rgba(0,0,0,0.08);
  --a2-radius: 8px;
  --a2-spacing-1: 4px;
  --a2-spacing-2: 6px;
  --a2-spacing-3: 8px;
  --a2-spacing-4: 24px;
  /* Police exclusive alias2* — auto-hébergée dans data_shared/fonts/.
     Chargée via /fonts/fonts.css (@font-face, font-display: swap).
     Aucune police système ou CDN en fallback : c'est le branding. */
  --a2-font: 'JetBrains Mono';

  /* ═══ Palette corporate — partagée par tous les modules a2* ═══ */
  --a2-corporate: #600782;
  --a2-corporate-2: #667eea;
  --a2-corporate-3: #69089f;
  --a2-corporate-glow: rgba(102, 126, 234, 0.12);
  --a2-corporate-border: rgba(102, 126, 234, 0.22);
  --a2-corporate-grad: linear-gradient(135deg, #600782 0%, #69089f 50%, #667eea 100%);
  --a2-corporate-grad-soft: linear-gradient(135deg, rgba(96,7,130,0.08) 0%, rgba(105,8,159,0.06) 50%, rgba(102,126,234,0.08) 100%);
  /* Nébuleuse (fond logo) */
  --a2-nebula: #4d695f;
  --a2-nebula-2: #51695e;
  --a2-nebula-glow: rgba(77, 105, 95, 0.12);
  --a2-nebula-border: rgba(77, 105, 95, 0.22);
  /* Vert corporate */
  --a2-corp-green: #178121;
  --a2-corp-green-light: #86efac;
  --a2-corp-green-bg: rgba(23, 129, 33, 0.15);
  --a2-corp-green-border: rgba(23, 129, 33, 0.35);
  /* Rouge — alertes, erreurs */
  --a2-corp-red: #c0392b;
  --a2-corp-red-light: #fca5a5;
  --a2-corp-red-bg: rgba(192, 57, 43, 0.15);
  --a2-corp-red-border: rgba(192, 57, 43, 0.35);
  /* Orange — avertissements */
  --a2-corp-orange: #d97706;
  --a2-corp-orange-light: #fcd34d;
  --a2-corp-orange-bg: rgba(217, 119, 6, 0.15);
  --a2-corp-orange-border: rgba(217, 119, 6, 0.35);
  --a2-header-h: 112px;
}

.a2-theme--dark {
  --a2-color-bg: #0a0a0f;
  --a2-color-fg: #e2e8f0;
  --a2-color-muted: #7c7c95;
  --a2-color-primary: #818cf8;
  --a2-color-card: #11111a;
  --a2-color-border: #1e1e2e;
  --a2-shadow-1: 0 1px 3px rgba(0,0,0,0.4);
  --a2-corporate-glow: rgba(102, 126, 234, 0.10);
  --a2-corporate-border: rgba(102, 126, 234, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--a2-color-bg);
  color: var(--a2-color-fg);
  font-family: var(--a2-font);
  font-size: 0.7em;
  line-height: 1.5;
}

/* ═══ Header ═══ */
.a2-common-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--a2-header-h, 112px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--a2-corporate-border);
  background: #0d0d14;
  box-shadow: 0 1px 8px rgba(96, 7, 130, 0.08);
}

.a2-common-appname {
  margin: 0;
  font-size: 1rem;
}

.a2-common-btn {
  padding: var(--a2-spacing-2) var(--a2-spacing-3);
  border: 1px solid var(--a2-color-border);
  background: transparent;
  color: var(--a2-color-fg);
  border-radius: var(--a2-radius);
  cursor: pointer;
  margin: 2px 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.a2-common-btn:hover {
  border-color: var(--a2-corporate-2);
  box-shadow: 0 0 12px var(--a2-corporate-glow);
  background: var(--a2-corporate-grad-soft);
}

.a2-common-btn:focus {
  outline: 2px solid var(--a2-color-primary);
  outline-offset: 2px;
}

/* ═══ Layout principal ═══ */
.a2-common-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100dvh - var(--a2-header-h, 112px));
  align-items: start;
}

.a2-common-main {
  padding: var(--a2-spacing-4);
  min-width: 0;
  overflow-x: clip;
}

.a2-common-muted {
  color: var(--a2-color-muted);
}

/* Reset neutre des contrôles de formulaire */
button,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: inherit;
  border: none;
  font: inherit;
}

code, pre, sub, sup, kbd, samp {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: inherit;
  border: none;
  font: inherit;
}

/* ═══ Focus accessible ═══ */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--a2-color-primary);
  outline-offset: 2px;
}

/* ═══ Brand (texte, logo à venir) ═══ */
.a2-header-brand-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--a2-corporate-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback gracieux */
  white-space: nowrap;
}

/* Toolbar partagée (pattern a2a) */
.alias-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--a2-spacing-2);
  margin-bottom: var(--a2-spacing-4);
}

.alias-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--a2-spacing-2);
}

.alias-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--a2-spacing-2);
}