:root {
    --g50: #e8f5f6;
    --g100: #b0dde0;
    --g400: #4ba3a8;
    --g600: #3C878B;
    --g800: #2a6063;
    --r50: #fef2f2;
    --r400: #f87171;
    --r600: #dc2626;
    --a50: #fffbeb;
    --a100: #fde68a;
    --a400: #f59e0b;
    --a800: #92400e;
    --b50: #eff6ff;
    --b400: #60a5fa;
    --b600: #2563eb;
    --s0: #fff;
    --s50: #f9fafb;
    --s100: #f3f4f6;
    --s200: #e5e7eb;
    --s300: #d1d5db;
    --s400: #9ca3af;
    --s500: #6b7280;
    --s600: #4b5563;
    --s700: #374151;
    --s800: #1f2937;
    --fn: 'DM Sans', system-ui, -apple-system, sans-serif;
    --r: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--fn);
    background: var(--s50);
    color: var(--s800);
    font-size: 14px;
    min-height: 100vh;
}

.header {
    background: var(--g800);
    color: #fff;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.header .brand {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.header .user-name {
    color: rgba(255,255,255,.85);
    font-size: 13px;
    margin-left: 8px;
}

.header nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.header nav a {
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background .12s;
}

.header nav a:hover {
    background: rgba(255,255,255,.12);
}

.container {
    padding: 16px 18px;
    max-width: 1700px;
    margin: 0 auto;
}

.card {
    background: var(--s0);
    border: 1px solid var(--s200);
    border-radius: 14px;
    padding: 16px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .12s;
    font-family: var(--fn);
    text-decoration: none;
}

.btn-primary {
    background: var(--g600);
    color: #fff;
}

.btn-primary:hover {
    background: var(--g800);
}

/* Login page */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--g50), var(--s50));
}

.login-card {
    background: var(--s0);
    border: 1px solid var(--s200);
    border-radius: 14px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
}

.login-card h1 {
    color: var(--g800);
    font-size: 22px;
    margin-bottom: 8px;
}

.login-card p {
    color: var(--s500);
    margin-bottom: 24px;
    font-size: 13px;
}

.login-card .btn {
    width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: 14px;
}

/* Tables (réutilisable pour les pages métier) */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
    background: var(--s50);
    font-weight: 600;
    color: var(--s600);
    padding: 8px 10px;
    border-bottom: 1px solid var(--s200);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: left;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--s100); }
tr:hover td { background: var(--s50); }

.badge {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 500;
}
.badge-admin    { background: var(--g50);  color: var(--g800); }
.badge-adv      { background: var(--b50);  color: var(--b600); }
.badge-hardware { background: var(--a50);  color: var(--a400); }

.row-rupture td  { background: #fff5f5; }
.row-critique td { background: #fffbeb; }
.badge-status-ok       { background: var(--g50); color: var(--g800); }
.badge-status-critique { background: var(--a50); color: var(--a400); }
.badge-status-rupture  { background: var(--r50); color: var(--r600); }

.btn-sm {
    padding: 4px 9px;
    font-size: 12px;
}

.btn-s {
    background: var(--s0);
    color: var(--s700);
    border-color: var(--s300);
}
.btn-s:hover { background: var(--s50); }

.btn-a {
    background: var(--a50);
    color: var(--a800);
    border-color: var(--a100);
}
.btn-a:hover { background: var(--a100); }

.alert {
    padding: 10px 13px;
    border-radius: var(--r);
    font-size: 13px;
    margin-bottom: 10px;
}
.al-r { background: var(--r50); color: var(--r600); border: 1px solid var(--r400); }
.al-a { background: var(--a50); color: var(--a800); border: 1px solid var(--a400); }
.al-g { background: var(--g50); color: var(--g800); border: 1px solid var(--g400); }
.al-b { background: var(--b50); color: var(--b600); border: 1px solid var(--b400); }