@import url("sysimple-surfaces.css?v=20260920");
@import url("sysimple-actions.css?v=20260910-global");
/*
  Sysimple UX Foundation
  Objectif: uniformiser l'administration sans réécrire chaque écran.
  Cette feuille doit être chargée APRÈS les CSS locaux, sysimple-unified.css et sysimple-admin-themes.css.
*/

:root,
html[data-theme],
body[data-theme]{
  --ux-radius-xs:3px;
  --ux-radius-sm:5px;
  --ux-radius:7px;
  --ux-radius-lg:10px;
  --ux-radius-pill:999px;
  --ux-control-height:36px;
  --ux-control-height-sm:30px;
  --ux-control-padding-x:12px;
  --ux-focus:0 0 0 3px color-mix(in srgb, var(--adm-primary, #2563eb) 22%, transparent);
  --ux-shadow-card:0 8px 24px rgba(15,23,42,.08);
  --ux-shadow-card-dark:0 10px 26px rgba(0,0,0,.24);
  --ux-border:var(--adm-border, var(--sys-card-border, #d9e0e8));
  --ux-bg:var(--adm-bg, #f3f5f8);
  --ux-surface:var(--adm-panel, var(--sys-surface, #ffffff));
  --ux-surface-2:var(--adm-panel-2, var(--sys-surface-alt, #f8fafc));
  --ux-text:var(--adm-text, var(--sys-header-text, #162235));
  --ux-muted:var(--adm-text-soft, var(--sys-muted, #6f819b));
  --ux-primary:var(--adm-primary, var(--sys-primary, #2563eb));
  --adm-radius:var(--ux-radius);
  --sys-radius:var(--ux-radius);
  --radius:var(--ux-radius-lg);
  --radius-sm:var(--ux-radius);
}

html[data-theme="light"],
body[data-theme="light"]{
  --ux-shadow-card:0 8px 22px rgba(15,23,42,.06);
}

html[data-theme="dark"],
body[data-theme="dark"],
html[data-theme="sysimple"],
body[data-theme="sysimple"]{
  --ux-shadow-card:var(--ux-shadow-card-dark);
}

/* Base lisible et stable */
html,body{
  font-family:var(--adm-font, var(--sys-font, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)) !important;
  text-rendering:optimizeLegibility;
}

body[data-theme]{
  color:var(--ux-text) !important;
}

/* Enlever les formes trop rondes sauf vrais avatars/dots/switches */
.btn,
.btn-mini,
.btn-default,
.btn-primary,
.btn-danger,
.btn-warning,
.btn-light,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
label.btn,
a.btn,
a.btn-mini,
.topbar button,
.toolbar button,
.mode-buttons button,
.widget-menu button,
#header .get-started-btn,
.topbar-theme-select,
.select-mini,
.input-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.input,
.control,
.url-input,
.card,
.panel,
.surface-card,
.surface-panel,
.panel-card,
.pane,
.editor-zone,
.right-zone,
.sidebar,
#sidebar,
aside.sidebar,
#palette,
#rightbar,
.schema-bar,
.ocr-panel,
.ocr-form-card,
.ocr-map-wrap,
.ocr-json-wrap,
.builder-left,
.builder-right,
.builder-toolbox,
.published-page-card,
.theme-manager-card,
.properties-panel,
.hero-main,
.hero-side-panel,
.login-card,
.modal-content,
.dropdown-menu{
  border-radius:var(--ux-radius) !important;
}

/* Exceptions contrôlées: petit indicateur ou avatar seulement */
.avatar,
.user-image,
.img-circle,
.execution-summary-status .dot,
.status-dot,
.badge-dot,
input[type="radio"]{
  border-radius:50% !important;
}

.pill,
.chip,
.badge,
.status-pill,
.sys-tag,
.sys-pill-link,
.nav-pills > li > a{
  border-radius:var(--ux-radius) !important;
}

/* Boutons: hauteur, alignement, moins de fantaisie */
.btn,
.btn-mini,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.btn-mini,
label.btn,
#header .get-started-btn{
  min-height:var(--ux-control-height) !important;
  padding:8px 12px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-weight:600;
  line-height:1.15 !important;
  letter-spacing:0;
  border:1px solid var(--ux-border) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transform:none !important;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease !important;
}

.btn-mini,
a.btn-mini,
button.btn-mini,
.btn.icon,
.btn.btn-sm,
.btn-sm,
.select-mini{
  min-height:var(--ux-control-height-sm) !important;
  padding:6px 10px !important;
  font-size:12px !important;
}

.btn.icon,
button.icon,
.btn-mini.icon{
  width:var(--ux-control-height) !important;
  min-width:var(--ux-control-height) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.btn:hover,
.btn-mini:hover,
button:hover,
a.btn:hover,
a.btn-mini:hover,
label.btn:hover{
  transform:none !important;
  filter:none !important;
}

.btn:focus,
.btn-mini:focus,
button:focus,
a.btn:focus,
a.btn-mini:focus,
input:focus,
select:focus,
textarea:focus,
.input:focus,
.control:focus{
  outline:none !important;
  box-shadow:var(--ux-focus) !important;
}

/* Couleurs de boutons standardisées par thème */
body[data-theme] .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger):not(.warn):not(.btn-warning),
body[data-theme] .btn-mini:not(.primary):not(.danger):not(.warn),
body[data-theme] button:not(.primary):not(.danger):not(.warn):not(.btn-primary):not(.btn-danger):not(.btn-warning):not(.main-tab):not(.nav-item),
body[data-theme] a.btn:not(.primary):not(.danger):not(.warn),
body[data-theme] a.btn-mini:not(.primary):not(.danger):not(.warn){
  background:var(--adm-surface, var(--sys-surface, #fff)) !important;
  color:var(--ux-text) !important;
  border-color:var(--ux-border) !important;
}

body[data-theme] .btn.primary,
body[data-theme] .btn.btn-primary,
body[data-theme] button.primary,
body[data-theme] a.btn.primary,
body[data-theme] a.btn-mini.primary,
body[data-theme] #header .get-started-btn{
  background:var(--ux-primary) !important;
  border-color:var(--ux-primary) !important;
  color:#fff !important;
}

body[data-theme] .btn.danger,
body[data-theme] .btn.btn-danger,
body[data-theme] button.danger,
body[data-theme] a.btn.danger,
body[data-theme] a.btn-mini.danger{
  background:color-mix(in srgb, var(--adm-danger, #dc2626) 12%, var(--ux-surface)) !important;
  border-color:color-mix(in srgb, var(--adm-danger, #dc2626) 40%, var(--ux-border)) !important;
  color:var(--adm-danger, #dc2626) !important;
}

body[data-theme] .btn.warn,
body[data-theme] .btn.btn-warning,
body[data-theme] button.warn,
body[data-theme] a.btn.warn,
body[data-theme] a.btn-mini.warn{
  background:color-mix(in srgb, var(--adm-warning, #d97706) 14%, var(--ux-surface)) !important;
  border-color:color-mix(in srgb, var(--adm-warning, #d97706) 38%, var(--ux-border)) !important;
  color:var(--adm-warning, #d97706) !important;
}

/* Formulaires */
body[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body[data-theme] select,
body[data-theme] textarea,
body[data-theme] .input,
body[data-theme] .control,
body[data-theme] .input-control,
body[data-theme] .url-input,
body[data-theme] .topbar-theme-select,
body[data-theme] .select-mini{
  min-height:var(--ux-control-height) !important;
  padding:7px 10px !important;
  background:var(--adm-input-bg, var(--ux-surface)) !important;
  color:var(--ux-text) !important;
  border:1px solid var(--ux-border) !important;
  box-shadow:none !important;
}

body[data-theme] textarea{
  min-height:96px !important;
  line-height:1.45 !important;
}

/* Tables: moins lourdes, plus cohérentes */
body[data-theme] table{
  border-color:var(--ux-border) !important;
}
body[data-theme] th,
body[data-theme] td{
  border-color:var(--adm-border-soft, var(--ux-border)) !important;
}
body[data-theme] thead th,
body[data-theme] table thead td{
  background:var(--adm-surface-2, var(--ux-surface-2)) !important;
  color:var(--ux-muted) !important;
  font-weight:700;
}
body[data-theme] tr:hover td{
  background:color-mix(in srgb, var(--ux-primary) 7%, transparent) !important;
}

/* Cartes/panneaux */
body[data-theme] .card,
body[data-theme] .panel,
body[data-theme] .surface-card,
body[data-theme] .surface-panel,
body[data-theme] .panel-card,
body[data-theme] .pane,
body[data-theme] .editor-zone,
body[data-theme] .right-zone,
body[data-theme] .sidebar,
body[data-theme] #sidebar,
body[data-theme] aside.sidebar,
body[data-theme] #palette,
body[data-theme] #rightbar,
body[data-theme] .schema-bar,
body[data-theme] .ocr-panel,
body[data-theme] .ocr-form-card,
body[data-theme] .ocr-map-wrap,
body[data-theme] .ocr-json-wrap,
body[data-theme] .builder-left,
body[data-theme] .builder-right,
body[data-theme] .builder-toolbox,
body[data-theme] .published-page-card,
body[data-theme] .theme-manager-card,
body[data-theme] .properties-panel,
body[data-theme] .hero-main,
body[data-theme] .hero-side-panel{
  background:var(--ux-surface) !important;
  color:var(--ux-text) !important;
  border:1px solid var(--ux-border) !important;
  box-shadow:var(--ux-shadow-card) !important;
}

/* Topbar/navigation */
body[data-theme] .topbar,
body[data-theme] .app-topbar,
body[data-theme] header.topbar,
body[data-theme] #header.fixed-top{
  background:var(--adm-header-bg, #fff) !important;
  color:var(--adm-header-text, #162235) !important;
  border-bottom:1px solid var(--adm-header-border, var(--ux-border)) !important;
  box-shadow:none !important;
}

body[data-theme] .top-nav .nav-item,
body[data-theme] .main-nav .nav-item,
body[data-theme] #header .navbar a,
body[data-theme] .sys-pill-link,
body[data-theme] .nav a,
body[data-theme] .file-tab,
body[data-theme] .right-tab,
body[data-theme] .tool-tab{
  border-radius:var(--ux-radius) !important;
  box-shadow:none !important;
}

body[data-theme] .top-nav .nav-item.active,
body[data-theme] .main-nav .nav-item.active,
body[data-theme] .nav a.active,
body[data-theme] #header .navbar .active,
body[data-theme] .file-tab.active,
body[data-theme] .right-tab.active,
body[data-theme] .tool-tab.active{
  background:var(--adm-primary-soft, rgba(37,99,235,.12)) !important;
  color:var(--ux-primary) !important;
  border-color:color-mix(in srgb, var(--ux-primary) 30%, var(--ux-border)) !important;
}

/* Modales/toasts */
body[data-theme] .modal-content,
body[data-theme] .confirm-box,
body[data-theme] .toast,
body[data-theme] .notification{
  background:var(--ux-surface) !important;
  color:var(--ux-text) !important;
  border:1px solid var(--ux-border) !important;
  border-radius:var(--ux-radius-lg) !important;
  box-shadow:var(--ux-shadow-card) !important;
}

/* Éviter les textes gris illisibles en dark/sysimple */
body[data-theme="dark"] .text-muted,
body[data-theme="dark"] .muted,
body[data-theme="dark"] small,
body[data-theme="sysimple"] .text-muted,
body[data-theme="sysimple"] .muted,
body[data-theme="sysimple"] small{
  color:var(--ux-muted) !important;
}

/* Landing/login: garder un look professionnel mais moins rond */
#hero .btn-get-started,
.pricing .btn-buy,
.contact .php-email-form button[type="submit"],
.blog .blog-comments .reply-form .btn-primary{
  border-radius:var(--ux-radius) !important;
}

.login-card,
.login-card .form-control,
.login-card .btn{
  border-radius:var(--ux-radius) !important;
}

/* Sélecteur de thème: stable */
#themePicker,
#officialThemeSelect,
#ocrThemePicker,
[data-admin-theme-select]{
  cursor:pointer;
  min-width:118px;
}

/* One elevation scale for administration and runtime forms. */
body[data-theme]{--ux-shadow-card:var(--sys-surface-shadow);--ux-radius:var(--sys-surface-radius);}
body[data-theme] :is(.modal-content,.confirm-box){box-shadow:var(--sys-dialog-shadow)!important;}