/**
 * MageTicket
 *
 * Fichier        : public/assets/css/components.css
 * Rôle           : Bibliothèque centrale des composants visuels et états transverses MageTicket.
 * Auteur         : Régis KREMER
 * Version        : 0.33.77
 * Version projet : 0.33.0
 * Lot            : MAGETICKET FIRST INSTALL BUTTON CONTRAST ACCESSIBILITY FIX1
 * Base requise   : 0.33.76
 * Créé le        : 2026-07-22
 * Modifié le     : 2026-07-28
 * Dépendances    : tokens.css, fonts.css et icons.css.
 * Contraintes    : WCAG 2.2 AA ; thèmes système, clair et sombre ; composants denses ; aucun comportement métier.
 * Modifications  : correction des états hover des boutons sémantiques afin de préserver le contraste texte/fond.
 */

[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Crédit de marque commun aux footers */
.magekorp-footer-brand{display:inline-flex;align-items:center;gap:4px;color:inherit!important;font-weight:750;text-decoration:none;white-space:nowrap}
.magekorp-footer-brand img{width:16px;height:16px;display:block;object-fit:contain}
.magekorp-footer-brand:hover,.magekorp-footer-brand:focus-visible{color:var(--text)!important;text-decoration:underline;text-underline-offset:3px}
.magekorp-footer-brand:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* En-tête de page authentifiée */
.app-page-header{grid-column:1/-1;width:100%;min-width:0;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line);background:linear-gradient(115deg,color-mix(in srgb,var(--brand) 9%,transparent),transparent 48%),var(--surface-soft);color:var(--text)}
.app-page-header__identity{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3)}
.app-page-header__icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--brand) 42%,var(--line));border-radius:var(--r-sm);background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand)}
.app-page-header__icon .ti{font-size:var(--icon-lg)}
.app-page-header__content{min-width:0;display:grid;gap:var(--space-1)}
.app-page-header__eyebrow{margin:0;color:var(--info);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;line-height:1.25;text-transform:uppercase}
.app-page-header__title{margin:0;color:var(--text);font-size:var(--fs-xl);font-weight:750;letter-spacing:-.02em;line-height:1.12}
.app-page-header__description{max-width:82ch;margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.42;overflow-wrap:anywhere}
.app-page-header__actions{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
.app-page-header__actions>.button{flex:0 0 auto}
.app-page-header__field{min-width:min(360px,100%);display:grid;grid-template-columns:auto minmax(190px,1fr);align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--fs-xs);font-weight:700}
.app-page-header__field select,.app-page-header__search input{width:100%;min-width:0;min-height:36px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--r-ctrl);background:var(--surface);color:var(--text);font:inherit}
.app-page-header__field select:hover,.app-page-header__search input:hover{border-color:color-mix(in srgb,var(--brand) 52%,var(--line-strong))}
.app-page-header__field select:focus-visible,.app-page-header__search input:focus-visible{border-color:var(--brand);outline:3px solid var(--focus);outline-offset:1px}
.app-page-header__search{width:min(520px,42vw)}
.app-page-header__search .knowledge-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2)}

/* Boutons */
.button,.primary-button,.secondary-button,.danger-button,.text-button,.icon-button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--r-ctrl);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:650;line-height:1.2;text-decoration:none;cursor:pointer;transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease)}
.button:hover,.primary-button:hover,.secondary-button:hover,.danger-button:hover,.text-button:hover,.icon-button:hover{border-color:var(--brand-strong);background:var(--surface-3)}
.button:active,.primary-button:active,.secondary-button:active,.danger-button:active,.text-button:active,.icon-button:active{transform:translateY(1px)}
.button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.danger-button:focus-visible,.text-button:focus-visible,.icon-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.button:disabled,.primary-button:disabled,.secondary-button:disabled,.danger-button:disabled,.text-button:disabled,.icon-button:disabled,[aria-disabled="true"].button{opacity:.52;cursor:not-allowed;transform:none}
.button.primary,.primary-button{border-color:var(--brand);background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:var(--brand-contrast)}
.button.primary:hover,.primary-button:hover{border-color:var(--brand-strong);background:var(--brand-strong);color:var(--brand-contrast)}
.button.primary:active,.primary-button:active{border-color:var(--brand-strong);background:color-mix(in srgb,var(--brand-strong) 84%,#000 16%);color:var(--brand-contrast)}
.button.secondary,.secondary-button{background:var(--surface);color:var(--text)}
.button.ghost,.text-button{border-color:transparent;background:transparent}
.button.danger,.danger-button{border-color:var(--danger-strong);background:var(--danger-soft);color:var(--danger)}
.button.compact,.button.small{min-height:28px;padding-inline:8px;font-size:var(--fs-xs)}
.button.large{min-height:42px;padding-inline:16px;font-size:var(--fs-md)}
.button.full,.primary-button.full,.secondary-button.full{width:100%}
.icon-button{width:36px;height:36px;min-height:36px;display:inline-grid;place-items:center;padding:0;color:var(--muted);background:transparent}
.icon-button.compact{width:30px;height:30px;min-height:30px}
.button .ti,.primary-button .ti,.secondary-button .ti,.danger-button .ti,.icon-button .ti{flex:0 0 auto}

/* Champs et formulaires */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{min-width:0;display:grid;align-content:start;gap:7px}
.field-wide{grid-column:1/-1}
.field>span,.field>label{font-size:var(--fs-sm);font-weight:750}
.field>span small,.field>label small{color:var(--muted);font-weight:500}
.field input,.field textarea,.field select,.control{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-ctrl);background:var(--surface);color:var(--text);font:inherit;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.field textarea,textarea.control{min-height:125px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover,.control:hover{border-color:color-mix(in srgb,var(--brand) 52%,var(--line-strong))}
.field input:focus,.field textarea:focus,.field select:focus,.control:focus{border-color:var(--brand);outline:3px solid var(--focus);outline-offset:1px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"],.control[aria-invalid="true"]{border-color:var(--danger-strong);box-shadow:0 0 0 1px var(--danger-strong)}
.field>small,.form-help,.field-help{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.field-error{color:var(--danger)!important;font-size:var(--fs-sm);font-weight:650}
.form-actions,.actions,.header-actions,.table-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Panneaux */
.panel{min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 76%,var(--surface)));box-shadow:var(--shadow-1);overflow:hidden;container-type:inline-size}
.panel__header,.panel-title{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid transparent}
.panel__header h1,.panel__header h2,.panel__header h3,.panel-title h1,.panel-title h2,.panel-title h3{margin:0;font-size:var(--fs-base)}
.panel__body{min-width:0;padding:12px}
.panel__footer,.panel-footer-link{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 13px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs);text-decoration:none}
.panel-search{min-height:34px;display:flex;align-items:center;gap:8px;margin:0 11px 8px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-ctrl);background:var(--surface-soft)}
.panel-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:var(--fs-xs)}
.panel-search .ti,.panel-search>span{color:var(--muted)}

/* Tableaux */
.table-wrap{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.data-table,.identity-table,.health-table{width:100%;border-collapse:collapse;border-spacing:0;background:var(--surface);font-variant-numeric:tabular-nums}
.data-table th,.data-table td,.identity-table th,.identity-table td,.health-table th,.health-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.data-table th,.identity-table th,.health-table th{position:relative;background:var(--surface-2);color:var(--muted);font-size:var(--fs-xs);font-weight:750;letter-spacing:.02em}
.data-table tbody tr:hover,.identity-table tbody tr:hover,.health-table tbody tr:hover{background:var(--surface-soft)}
.data-table td,.identity-table td,.health-table td{font-size:var(--fs-sm)}

/* Badges, états et compteurs */
.badge,.status-badge,.status-pill,.chip,.tag{display:inline-flex;align-items:center;width:fit-content;min-height:21px;gap:5px;padding:2px 7px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface-3);color:var(--muted);font-size:var(--fs-xs);font-style:normal;font-weight:700;line-height:1.25;white-space:nowrap}
.status-pill{text-transform:uppercase;letter-spacing:.05em}
.badge.info,.status-badge.info,.status-pill.info{border-color:var(--info-strong);background:var(--info-soft);color:var(--info)}
.badge.success,.badge.active,.status-badge.success,.status-pill.active,.status-pill.passed,.status-pill.applied,.status-pill.resolved{border-color:var(--success-strong);background:var(--success-soft);color:var(--success)}
.badge.warning,.badge.medium,.status-badge.warning,.status-pill.warning,.status-pill.pending,.status-pill.draft,.status-pill.simulated,.status-pill.locked{border-color:var(--warning-strong);background:var(--warning-soft);color:var(--warning)}
.badge.danger,.badge.high,.status-badge.danger,.status-pill.danger,.status-pill.failed,.status-pill.error,.status-pill.disabled,.status-pill.revoked{border-color:var(--danger-strong);background:var(--danger-soft);color:var(--danger)}
.badge.low{border-color:var(--success-strong);background:var(--success-soft);color:var(--success)}
.tag{margin:0 2px 2px 0;border-radius:999px;font-weight:550}
.tag.purple{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.tag.add{border-radius:var(--r-sm);background:transparent}
.count,.counter,.notification-count{min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--surface-3);color:var(--text);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}

/* Onglets */
.tabs,[role="tablist"].component-tabs{min-height:39px;display:flex;align-items:end;gap:8px;padding:0 11px;border-bottom:1px solid var(--line);overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.tabs button,.tabs [role="tab"],[role="tablist"].component-tabs [role="tab"]{min-height:38px;padding:0 7px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:var(--fs-xs);font-weight:650;white-space:nowrap}
.tabs button:hover,.tabs [role="tab"]:hover{color:var(--text)}
.tabs button.is-active,.tabs [role="tab"][aria-selected="true"],.tabs [aria-current="page"]{border-color:var(--brand);color:var(--brand)}

/* Dialogs, tiroirs et notifications */
dialog,.dialog,.reporting-dialog,.privacy-dialog{max-width:min(680px,calc(100vw - 32px));max-height:min(86dvh,900px);padding:0;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-3);overflow:auto}
dialog::backdrop,.dialog-backdrop{background:rgb(0 0 0 / 58%);backdrop-filter:blur(2px)}
.dialog__header,.dialog-header{position:sticky;top:0;z-index:2;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-raised)}
.dialog__body,.dialog-body,.reporting-dialog-body,.privacy-dialog-body{padding:14px}
.dialog__footer,.dialog-footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-raised)}
.dialog-close{width:36px;height:36px;display:inline-grid;place-items:center;padding:0;border:1px solid transparent;border-radius:var(--r-ctrl);background:transparent;color:var(--muted)}
.drawer,[data-component="drawer"]{position:fixed;z-index:180;inset:0 0 0 auto;width:min(430px,100vw);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-left:1px solid var(--line);background:var(--surface-raised);box-shadow:var(--shadow-3);transform:translateX(105%);transition:transform var(--dur-3) var(--ease)}
.drawer.is-open,[data-component="drawer"][aria-hidden="false"]{transform:translateX(0)}
.drawer__body{min-height:0;padding:14px;overflow:auto;overscroll-behavior:contain}
.toast-stack{position:fixed;z-index:300;right:max(16px,var(--safe-right));bottom:max(16px,var(--safe-bottom));width:min(380px,calc(100vw - 32px));display:grid;gap:8px;pointer-events:none}
.toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px;border:1px solid var(--line-strong);border-left:4px solid var(--info-strong);border-radius:var(--r-sm);background:var(--surface-raised);box-shadow:var(--shadow-2);pointer-events:auto}
.toast.success{border-left-color:var(--success-strong)}.toast.warning{border-left-color:var(--warning-strong)}.toast.danger{border-left-color:var(--danger-strong)}
.toast p,.toast strong{margin:0}.toast p{margin-top:3px;color:var(--muted);font-size:var(--fs-sm)}

/* États de contenu */
.empty-state,.state-surface,.empty-copy{min-height:180px;display:grid;place-content:center;justify-items:center;gap:10px;padding:28px;color:var(--muted);text-align:center}
.empty-state h2,.empty-state h3,.state-surface h2,.state-surface h3,.empty-copy h2,.empty-copy h3{margin:0;color:var(--text)}
.empty-state p,.state-surface p,.empty-copy p{max-width:560px;margin:0;line-height:1.5}
.state-icon,.empty-state__icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:var(--fs-xl)}
.content-state--loading{position:relative;overflow:hidden}.content-state--loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--surface-soft),transparent);animation:component-shimmer 1.3s linear infinite}
@keyframes component-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Avatars, aides et raccourcis */
.avatar{--avatar-size:31px;width:var(--avatar-size);height:var(--avatar-size);display:inline-grid;place-items:center;flex:0 0 auto;border-radius:var(--r-sm);background:var(--brand);color:var(--brand-contrast);font-size:var(--fs-xs);font-weight:800;line-height:1;overflow:hidden}
.avatar.tiny{--avatar-size:23px;border-radius:50%}.avatar.small{--avatar-size:28px}.avatar.medium{--avatar-size:36px}.avatar.large{--avatar-size:44px}.avatar.photo{border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--surface-3))}.avatar img{width:100%;height:100%;object-fit:cover}
kbd,.shortcut{display:inline-flex;align-items:center;justify-content:center;min-width:22px;min-height:22px;padding:2px 7px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted);font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:650;line-height:1;white-space:nowrap}
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:400;left:50%;bottom:calc(100% + 8px);max-width:240px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg-deep);color:var(--text);box-shadow:var(--shadow-2);font-size:var(--fs-xs);line-height:1.35;white-space:normal;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}

@container (max-width:680px){.form-grid{grid-template-columns:1fr}}
@media (max-width:1120px){.app-page-header{grid-template-columns:1fr;align-items:start}.app-page-header__actions{justify-content:flex-start;padding-left:54px}.app-page-header__search{width:min(100%,620px)}}
@media (max-width:700px){.app-page-header{gap:var(--space-3);padding:var(--space-3) max(var(--space-3),var(--safe-right)) var(--space-3) max(var(--space-3),var(--safe-left))}.app-page-header__identity{grid-template-columns:36px minmax(0,1fr);align-items:start;gap:var(--space-2)}.app-page-header__icon{width:36px;height:36px}.app-page-header__title{font-size:var(--fs-lg)}.app-page-header__description{font-size:var(--fs-xs);line-height:1.4}.app-page-header__actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-left:0}.app-page-header__actions>.button{width:100%;min-width:0}.app-page-header__field{grid-column:1/-1;min-width:0;grid-template-columns:1fr}.app-page-header__field select{min-height:var(--touch-target)}.app-page-header__search{grid-column:1/-1;width:100%}.app-page-header__search .knowledge-search{grid-template-columns:1fr}.app-page-header__search .button{width:100%}}
@media (max-width:700px){.button,.primary-button,.secondary-button,.danger-button{min-height:var(--touch-target)}.panel{border-radius:0}.dialog__footer,.dialog-footer{padding-bottom:max(10px,var(--safe-bottom))}.toast-stack{right:max(8px,var(--safe-right));bottom:max(8px,var(--safe-bottom));width:calc(100vw - max(16px,var(--safe-left)) - max(16px,var(--safe-right)))}}
@media (prefers-reduced-motion:reduce){.button,.primary-button,.secondary-button,.danger-button,.text-button,.icon-button,.drawer,[data-component="drawer"],[data-tooltip]::after{transition:none!important}.content-state--loading::after{animation:none}}
@media (forced-colors:active){.button,.primary-button,.secondary-button,.danger-button,.text-button,.icon-button,.badge,.status-badge,.status-pill,.chip,.tag,.panel,dialog,.dialog{border:1px solid ButtonText}.button.primary,.primary-button{background:ButtonFace;color:ButtonText}}