/* ==========================================================================
   Karlia Design System : ajustements des plugins (formes, tailles, états)
   Les couleurs viennent des surcouches automatiques plugins/*.css ; ici, rayons, hauteurs, ombres et états.
   ========================================================================== */

/* ---- Select2 : mêmes mesures que .form-control ---- */
html body .select2-container--default .select2-selection--single, html body .select2-container--default .select2-selection--multiple { min-height: var(--ctl-h); background: var(--surface); border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
html body .select2-container--default .select2-selection--single { height: var(--ctl-h); }
html body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: 12px; padding-right: 30px; color: var(--text); }
html body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 6px; }
html body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--placeholder); }
html body .select2-container--default.select2-container--focus .select2-selection--single, html body .select2-container--default.select2-container--focus .select2-selection--multiple, html body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
html body .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 3px 6px 0; }
html body .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--primary-soft); border: 0; border-radius: var(--radius-xs); color: var(--primary-text); padding: 2px 8px; margin-top: 3px; }
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--primary-text); margin-right: 6px; }
html body .select2-dropdown { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
html body .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--surface); border: 1px solid var(--field-border); border-radius: 6px; color: var(--text); padding: 6px 10px; }
html body .select2-container--default .select2-results__option { color: var(--text); padding: 8px 12px; }
html body .select2-container--default .select2-results__option[aria-selected=true] { background: var(--surface-2); color: var(--text); font-weight: var(--fw-semibold); }
html body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary-soft); color: var(--primary-text); }
html body .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--placeholder); }

/* ---- DataTables ---- */
html body div.dataTables_wrapper div.dataTables_length select, html body div.dataTables_wrapper div.dataTables_filter input { height: 32px; border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 4px 10px; }
html body div.dataTables_wrapper div.dataTables_filter input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); outline: 0; }
html body div.dataTables_wrapper div.dataTables_info, html body div.dataTables_wrapper div.dataTables_length label, html body div.dataTables_wrapper div.dataTables_filter label { color: var(--text-muted); font-weight: var(--fw-regular); }
html body table.dataTable thead th, html body table.dataTable thead td { border-bottom: 1px solid var(--line-strong); }
html body table.dataTable.no-footer { border-bottom: 1px solid var(--line); }
html body table.dataTable tbody tr { background: transparent; }
html body table.dataTable.hover tbody tr:hover, html body table.dataTable.display tbody tr:hover { background: var(--primary-soft); }
html body table.dataTable tbody tr.selected { background: var(--primary-soft-hover); }
html body div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 8px 0; }

/* ---- Sélecteurs de date et d'heure ---- */
html body .datepicker { padding: 4px; }   /* explicite : bootstrap-editable.css en impose aussi 4 px ; le résultat ne dépend plus des plugins chargés */
html body .datepicker.dropdown-menu, html body .datepicker-dropdown { padding: 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
html body .datepicker table tr td, html body .datepicker table tr th { border-radius: 6px; width: 34px; height: 32px; }
html body .datepicker table tr th.dow { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; }
html body .datepicker table tr td.day:hover, html body .datepicker table tr td.focused, html body .datepicker .datepicker-switch:hover, html body .datepicker .prev:hover, html body .datepicker .next:hover { background: var(--primary-soft); color: var(--primary-text); }
html body .datepicker table tr td.today { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); }
html body .datepicker table tr td.active, html body .datepicker table tr td.active:hover, html body .datepicker table tr td.active.active, html body .datepicker table tr td.selected, html body .datepicker table tr td.selected:hover { background: var(--primary) !important; color: var(--on-primary) !important; text-shadow: none; }
html body .datepicker table tr td.old, html body .datepicker table tr td.new { color: var(--text-muted); } html body .datepicker table tr td.disabled, html body .datepicker table tr td.disabled:hover { color: var(--placeholder); background: transparent; }
html body .datepicker table tr td.range { background: var(--primary-soft); border-radius: 0; }
html body .bootstrap-timepicker-widget table td a { border-radius: 6px; color: var(--text); } html body .bootstrap-timepicker-widget table td a:hover { background: var(--primary-soft); border-color: transparent; }

/* ---- FullCalendar (agenda) : sélecteurs doublés avec #container, car fullcalendar-nifty.css en utilise ---- */
html body .fc .fc-toolbar h2, html body #container .fc-toolbar h2 { color: var(--text); font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
html body .fc .fc-button, html body .fc button, html body #container .fc-button, html body #container .fc button { border-radius: var(--btn-radius); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); text-shadow: none; box-shadow: none; height: var(--btn-h); font-weight: var(--fw-semibold); background-image: none; }
html body .fc .fc-button:hover, html body .fc .fc-state-hover, html body #container .fc-button:hover { background: var(--surface-2); border-color: var(--field-border); color: var(--text); }
html body .fc .fc-button.fc-state-active, html body .fc .fc-button:active, html body .fc button.fc-state-active, html body #container .fc-button.fc-state-active, html body #container .fc button.fc-state-active, html body #container .fc-button:not(.disabled):not(:disabled):active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: none; }
html body .fc .fc-button.fc-state-disabled, html body #container .fc-button.fc-state-disabled { opacity: .5; }
html body .fc-unthemed th, html body .fc-unthemed td, html body .fc-unthemed thead, html body .fc-unthemed tbody, html body .fc-unthemed .fc-divider, html body .fc-unthemed .fc-row, html body .fc-unthemed .fc-content, html body .fc-unthemed .fc-popover, html body .fc-unthemed .fc-list-view, html body .fc-unthemed .fc-list-heading td, html body #container .fc-unthemed th, html body #container .fc-unthemed td { border-color: var(--line); }
html body .fc .fc-widget-header, html body .fc .fc-row.fc-widget-header table th, html body #container .fc-row.fc-widget-header table th, html body .fc-day-header.fc-widget-header { background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }
html body .fc td.fc-today, html body #container .fc td.fc-today { background: var(--primary-soft) !important; }
html body .fc-day-number, html body .fc-day-top a, html body .fc-day-num { color: var(--text); }
html body .fc .fc-other-month, html body .fc .fc-day-top.fc-other-month, html body #container .fc .fc-other-month { opacity: 1 !important; } html body .fc-day-grid .fc-other-month { background: var(--surface-2); } html body .fc-other-month .fc-day-number, html body .fc-other-month .fc-day-num { color: var(--text-muted); }
html body .fc-event, html body .fc-event-dot, html body .fc-day-grid-event.fc-h-event.fc-event, html body #container .fc-event { border-radius: var(--radius-xs); border: 0; background: var(--primary); color: var(--on-primary); padding: 1px 6px; font-size: var(--fs-sm); }
html body .fc-event .fc-content, html body .fc-event:hover, html body .fc-event .fc-title, html body .fc-event .fc-time { color: var(--on-primary); }
html body .fc-event[class*="cat-"], html body #container .fc-event[class*="cat-"] { background: var(--c); border-color: var(--c); color: #fff; }
html body .fc-event.cat-soft, html body #container .fc-event.cat-soft { background: var(--cs); color: var(--ci); border-left: 3px solid var(--c); }
html body .fc-event.cat-soft .fc-content, html body .fc-event.cat-soft .fc-title, html body .fc-event.cat-soft .fc-time { color: var(--ci); }
html body .fc-popover { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: var(--surface); }

/* ---- Éditeurs : Summernote, Froala ---- */
html body .note-editor.note-frame { border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: none; overflow: hidden; }
html body .note-editor.note-frame:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
html body .note-editor .note-toolbar { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 4px 6px; }
html body .note-editor .note-toolbar .note-btn, html body .note-popover .note-btn { border-radius: var(--radius-xs); border: 1px solid transparent; background: transparent; color: var(--text); box-shadow: none; }
html body .note-editor .note-toolbar .note-btn:hover, html body .note-popover .note-btn:hover, html body .note-editor .note-btn.active, html body .note-editor .note-btn.focus { background: var(--primary-soft); color: var(--primary-text); border-color: transparent; }
html body .note-editor .note-editing-area .note-editable { color: var(--text); background: var(--surface); }
html body .note-editor .note-statusbar { background: var(--surface-2); border-top: 1px solid var(--line); }
html body .fr-box.fr-basic .fr-wrapper, html body .fr-toolbar, html body .fr-second-toolbar { border-color: var(--line-strong); border-radius: var(--radius-sm); }
html body .fr-toolbar { background: var(--surface-2); } html body .fr-box.fr-basic .fr-element { color: var(--text); }

/* ---- Dépôt de fichiers, édition en place, bascules, arbres, imbrications ---- */
html body .dropzone { border: 2px dashed var(--field-border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); min-height: 120px; }
html body .dropzone:hover, html body .dropzone.dz-drag-hover { border-color: var(--primary); background: var(--primary-soft); }
html body .dropzone .dz-message { color: var(--text-muted); font-weight: var(--fw-semibold); }
html body .dropzone .dz-preview .dz-image { border-radius: var(--radius-sm); } html body .dropzone .dz-preview .dz-error-message { background: var(--danger); color: #fff; border-radius: var(--radius-sm); }
html body a.editable-click, html body a.editable-click:hover { color: var(--link); border-bottom: 1px dashed var(--link); text-decoration: none; }
html body a.editable-empty, html body a.editable-empty:hover { color: var(--danger-text); border-bottom-color: var(--danger-text); }
html body .editable-popup .popover, html body .editableform .form-control { border-radius: var(--radius-sm); }
html body .dd-handle { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); height: auto; padding: 8px 12px; }
html body .dd-handle:hover { background: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-soft-hover); }
html body .dd-placeholder, html body .dd-empty { background: var(--primary-soft); border: 1px dashed var(--primary); border-radius: var(--radius-sm); }
html body .jstree-default .jstree-hovered { background: var(--primary-soft); border-radius: var(--radius-xs); box-shadow: none; } html body .jstree-default .jstree-clicked { background: var(--primary-soft-hover); border-radius: var(--radius-xs); box-shadow: none; color: var(--text); }
html body .ui-sortable-helper, html body .ui-draggable-dragging { box-shadow: var(--shadow-lg); } html body .ui-sortable-placeholder { background: var(--primary-soft) !important; border: 1px dashed var(--primary); visibility: visible !important; }
html body .iti__country-list { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } html body .iti__country.iti__highlight { background: var(--primary-soft); }
html body .leaflet-popup-content-wrapper, html body .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); } html body .leaflet-popup-content-wrapper { border-radius: var(--radius); }
html body .leaflet-bar a { background: var(--surface); color: var(--text); border-bottom-color: var(--line); } html body .leaflet-bar a:hover { background: var(--primary-soft); color: var(--primary-text); } html body .leaflet-bar { border-radius: var(--radius-sm); box-shadow: var(--shadow); border: 0; }
html body .tribute-container ul { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } html body .tribute-container li.highlight { background: var(--primary-soft); color: var(--primary-text); }