@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root {
    color-scheme: light;
    --color-brand-blue: #1f6ebf;
    --color-brand-blue-mid: #1467b7;
    --color-brand-blue-deep: #0d4d88;
    --color-brand-teal: #009688;
    --color-bg: #f4f8fd;
    --color-surface: #ffffff;
    --color-border: #dce7f0;
    --color-border-input: #c9daea;
    --color-text-heading: #163a5c;
    --color-text-body: #20364f;
    --color-text-muted: #607b96;
    --color-focus: #1f70c2;
    --font-body: 'DM Sans', 'Segoe UI', sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --radius-sm: 0.66rem;
    --radius-md: 0.75rem;
    --radius-lg: 0.9rem;
    --shadow-card: 0 8px 24px rgba(23, 61, 105, 0.06);
    font-family: var(--font-body);
    color: var(--color-text-body);
    background: var(--color-bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--color-bg); }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text-heading); }
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 8% -10%, #dfefff 0%, transparent 40%), radial-gradient(circle at 100% 0%, #d7f3ed 0%, transparent 35%), var(--color-bg); }
.admin-login__panel { width: min(100%, 440px); padding: 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.admin-login__eyebrow { margin: 0 0 8px; color: var(--color-brand-blue-deep); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0; font-size: 2rem; }
.admin-login__intro { margin: 12px 0 28px; color: var(--color-text-muted); }
label { display: block; margin: 18px 0 7px; font-weight: 600; }
input:not([type="checkbox"]) { width: 100%; padding: 12px 13px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); font: inherit; }
input:focus { outline: 3px solid rgb(31 112 194 / 12%); border-color: var(--color-focus); }
.admin-login__remember { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.admin-login__remember input { width: 16px; height: 16px; }
button { width: 100%; margin-top: 24px; padding: 12px 16px; border: 0; border-radius: var(--radius-sm); background: var(--color-brand-blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
button:hover { background: var(--color-brand-blue-mid); transform: translateY(-1px); }
.admin-login__error { margin-top: 6px; color: #a52a2a; font-size: 0.9rem; }
.admin-dashboard { width: min(1180px, 100%); margin: 0 auto; padding: 36px 24px 56px; }
.admin-dashboard__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.admin-dashboard__header h1 { margin-top: 2px; }
.admin-dashboard__muted { margin: 8px 0 0; color: var(--color-text-muted); }
.admin-dashboard__primary-link { display: inline-block; margin: 10px 14px 0 0; color: var(--color-brand-blue-mid); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.admin-dashboard__primary-link:hover { color: var(--color-brand-blue-deep); text-decoration: underline; }
.admin-dashboard__primary-links { display: flex; align-items: center; gap: 14px; }
.admin-dashboard__primary-links .admin-dashboard__primary-link { margin-right: 0; }
.admin-dashboard__table-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.admin-dashboard__table-badges a { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1px solid var(--color-border-input); border-radius: var(--radius-full, 999px); background: #eef4fb; color: var(--color-brand-blue-deep); font-size: 0.72rem; font-weight: 700; text-decoration: none; }
.admin-dashboard__table-badges a:hover { border-color: #a9c7e3; background: #e5f0fd; color: var(--color-brand-blue-mid); }
.admin-dashboard__primary-links.admin-dashboard__table-badges { margin: 10px 0 0; }
.admin-dashboard__logout { width: auto; min-height: 34px; margin: 0; padding: 7px 11px; background: var(--color-surface); color: var(--color-brand-blue-mid); border: 1px solid var(--color-border-input); font-size: 0.76rem; line-height: 1; }
.admin-dashboard__logout:hover { background: #eef4fb; }
.admin-dashboard__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.admin-dashboard__metric { display: flex; min-height: 118px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); text-align: center; }
.admin-dashboard__metric span { color: var(--color-text-muted); font-size: 1.08rem; font-weight: 700; line-height: 1.2; }
.admin-dashboard__metric strong { color: var(--color-brand-blue-mid); font-size: 1.75rem; line-height: 1; }
.admin-dashboard__metric--attention { border-color: #bdd7ee; background: linear-gradient(135deg, #fff, #eef8f7); }
.admin-dashboard__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-dashboard__panel { min-width: 0; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.admin-dashboard__panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e1e9e9; padding-bottom: 14px; }
.admin-dashboard__panel h2 { margin: 0; font-size: 1.1rem; }
.admin-dashboard__panel a { color: var(--color-text-link, var(--color-brand-blue-mid)); font-size: 0.9rem; }
.admin-dashboard__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.admin-dashboard__list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid #edf1f1; }
.admin-dashboard__list li > div { min-width: 0; }
.admin-dashboard__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-dashboard__list strong, .admin-dashboard__list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard__list span { margin-top: 4px; color: var(--color-text-muted); font-size: 0.85rem; }
.admin-dashboard__status { flex: 0 0 auto; color: var(--color-brand-teal); font-size: 0.78rem; font-weight: 600; }
.admin-dashboard__empty { color: var(--color-text-muted); }
.admin-dashboard__primary-link, .admin-back-link { display: inline-block; margin-top: 14px; color: var(--color-brand-blue-mid); font-weight: 700; text-decoration: none; }
.admin-dashboard__primary-link:hover, .admin-back-link:hover { color: var(--color-brand-blue-deep); text-decoration: underline; }
.admin-users__filters { display: flex; align-items: end; gap: 14px; margin-bottom: 22px; padding: 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.admin-users__filters label { flex: 1; min-width: 0; margin: 0; color: var(--color-text-muted); font-size: 0.86rem; }
.admin-users__filters input, .admin-users__filters select { display: block; margin-top: 7px; }
.admin-users__filters input { min-height: 38px; padding: 8px 11px; font-size: 0.82rem; }
.admin-users__filters select { width: 100%; min-height: 47px; padding: 0 38px 0 13px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-body); font: inherit; cursor: pointer; }
.admin-users__filters select:focus { outline: 3px solid rgb(31 112 194 / 12%); border-color: var(--color-focus); }
.admin-users__filters button { width: auto; min-width: 100px; margin: 0; }
.admin-users__table-wrap { overflow-x: auto; padding: 4px 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.admin-users__table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-users__table th { padding: 11px 14px; color: var(--color-text-muted); font-size: 0.68rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border); }
.admin-users__table td { padding: 10px 14px; color: var(--color-text-body); font-size: 0.84rem; line-height: 1.25; border-bottom: 1px solid #edf2f7; }
.admin-users__table tr:last-child td { border-bottom: 0; }
.admin-users__table td:first-child strong, .admin-users__table td:first-child span { display: block; }
.admin-users__table td:first-child span { margin-top: 2px; color: var(--color-text-muted); font-size: 0.76rem; }
.admin-users__table a { color: var(--color-brand-blue-mid); font-weight: 700; }
.admin-user-details__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.admin-user-details__sql-panel { grid-column: 1 / -1; }
.admin-user-details__facts { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: 0.74rem; }
.admin-user-details__facts dt { color: var(--color-text-muted); font-weight: 700; }
.admin-user-details__facts dd { min-width: 0; margin: 0; overflow: hidden; color: var(--color-text-body); text-overflow: ellipsis; white-space: nowrap; }
.admin-user-details__stats { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 16px; }
.admin-user-details__stats strong { color: var(--color-brand-blue-mid); font-size: 1.5rem; }
.admin-user-details__stats span { color: var(--color-text-muted); font-size: 0.84rem; }
.admin-user-details__actions { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.admin-user-details__actions form { display: flex; margin: 0; }
.admin-user-details__button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 34px; margin: 0; padding: 7px 11px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-brand-blue-mid); font: inherit; font-size: 0.76rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; }
.admin-user-details__button:hover { background: #eef4fb; border-color: #a9c7e3; }
.admin-user-details__button--danger { border-color: #efc1bd; color: #a52a2a; }
.admin-user-details__button--danger:hover { background: #fff0ef; border-color: #df9b95; }
.admin-user-edit { padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.admin-user-edit__grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 16px; }
.admin-user-edit label { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; margin: 0; color: var(--color-text-muted); font-size: 0.74rem; }
.admin-user-edit input, .admin-user-edit select, .admin-user-edit textarea { display: block; width: 100%; min-height: 34px; margin: 0; padding: 6px 9px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-body); font-size: 0.76rem; }
.admin-user-edit textarea { min-height: 80px; resize: vertical; }
.admin-user-edit > label:not(.admin-user-edit__check) { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: start; gap: 16px; margin-top: 10px; }
.admin-user-edit__check { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; }
.admin-user-edit__check input { display: inline-block; width: 16px; min-height: 16px; margin: 0; }
.admin-user-edit button { width: auto; min-width: 140px; }
.admin-users__badge { display: inline-block; padding: 3px 8px; border-radius: var(--radius-full, 999px); font-size: 0.7rem; font-weight: 700; }
.admin-users__badge--active { color: #2d7252; background: #ecf6e9; }
.admin-users__badge--inactive { color: #a52a2a; background: #fff0ef; }
.admin-users__pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; color: var(--color-text-muted); font-size: 0.82rem; }
.admin-users__pagination a { padding: 7px 12px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-brand-blue-mid); font-weight: 700; text-decoration: none; }
.admin-users__pagination a:hover { background: #eef4fb; }
.admin-tickets__filters label { min-width: 150px; }
.admin-tickets__table td:nth-child(2) { color: var(--color-text-muted); font-size: 0.76rem; }
.admin-tickets__table td:nth-child(6) { white-space: nowrap; color: var(--color-text-muted); font-size: 0.74rem; }
.admin-tickets__severity { display: inline-block; padding: 3px 8px; border-radius: var(--radius-full, 999px); background: #eef4fb; color: var(--color-brand-blue-deep); font-size: 0.7rem; font-weight: 700; }
.admin-tickets__severity--critique, .admin-tickets__severity--haute { background: #fff0ef; color: #a52a2a; }
.admin-tickets__severity--moyenne { background: #fff8df; color: #8a6815; }
.admin-ticket__layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr); gap: 18px; }
.admin-ticket__content h2, .admin-ticket__layout aside h2 { margin: 0 0 16px; font-size: 1rem; }
.admin-ticket__meta { display: inline-flex; flex-direction: column; min-width: 180px; margin: 0 24px 22px 0; }
.admin-ticket__meta span { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.admin-ticket__meta strong { margin-top: 4px; font-size: 0.86rem; }
.admin-ticket__description { white-space: pre-wrap; color: var(--color-text-body); font-size: 0.88rem; line-height: 1.6; }
.admin-ticket__layout label { margin-top: 14px; }
.admin-ticket__layout select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-body); font: inherit; }
.admin-ticket__layout button { margin-top: 22px; }
.admin-ticket__success { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #b8dfc2; border-radius: var(--radius-sm); background: #ecf6e9; color: #2d7252; font-size: 0.84rem; }
.admin-ticket__error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #efc1bd; border-radius: var(--radius-sm); background: #fff0ef; color: #a52a2a; font-size: 0.84rem; }
.admin-ticket__reply { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.admin-ticket__recipient { color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.4; }
.admin-ticket__reply-date { margin: 8px 0 0; color: var(--color-brand-teal); font-size: 0.8rem; font-weight: 700; }
.admin-ticket__reply textarea { display: block; width: 100%; min-height: 130px; margin-top: 7px; padding: 10px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); color: var(--color-text-body); font: inherit; resize: vertical; }
.admin-ticket__reply textarea:focus { outline: 3px solid rgb(31 112 194 / 12%); border-color: var(--color-focus); }
.admin-ticket__audit { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.admin-ticket__audit-entry { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid #edf2f7; font-size: 0.76rem; }
.admin-ticket__audit-entry:last-child { border-bottom: 0; }
.admin-ticket__audit-entry span, .admin-ticket__audit-entry small { color: var(--color-text-muted); }
@media (max-width: 760px) { .admin-dashboard__header { flex-direction: column; } .admin-dashboard__metrics, .admin-dashboard__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .admin-dashboard { padding-inline: 16px; } .admin-dashboard__metrics, .admin-dashboard__grid { grid-template-columns: 1fr; } .admin-dashboard__panel { padding: 18px; } }
@media (max-width: 650px) { .admin-users__filters { align-items: stretch; flex-direction: column; } .admin-users__filters button { width: 100%; } }
@media (max-width: 760px) { .admin-ticket__layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .admin-user-details__facts { grid-template-columns: 130px minmax(0, 1fr); } }
@media (max-width: 650px) { .admin-user-edit__grid { grid-template-columns: 110px minmax(0, 1fr); gap: 5px 10px; } .admin-user-edit label { display: grid; grid-template-columns: subgrid; } .admin-user-edit > label:not(.admin-user-edit__check) { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; margin-top: 8px; } .admin-user-edit input, .admin-user-edit select, .admin-user-edit textarea { margin-top: 0; } }