/* =========================================================
   1) TOKENS
   ========================================================= */

:root {
    --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --application-appbar-height: 46px;
    --color-bg-page: #ebebeb;
    --color-text-default: #000000;
    --color-border-default: #adadad;
    --color-border-strong: #929292;
    --color-border-hover: #8c8c8c;
    --color-surface-form: #f9f9f9;
    --color-surface-list: #ffffff;
    --color-surface-input: #ffffff;
    --color-surface-band: #d3d6f6;
    --color-success: #70c572;
    --color-success-hover: #63b165;
    --color-success-text: #000000;
    --color-danger: #e25f56;
    --color-danger-hover: #d9534f;
    --color-danger-active: #c94744;
    --color-danger-text: #ffffff;
    --color-error: #e50000;
    --color-valid: #26b050;
    --radius-sm: 4px;
    --notification-width: 250px;
    --notification-height: 80px;
    --notification-font-size: 1.2em;
}

/* =========================================================
   2) BASE
   ========================================================= */

html,
body {
    font-family: var(--font-family-base);
}

.content {
    padding-top: 1.1rem;
}

.hidden {
    display: none !important;
}

/* =========================================================
   3) ÉTATS / VALIDATION
   ========================================================= */

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid var(--color-valid);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.invalid,
.validation-message {
    color: var(--color-error);
}

/* =========================================================
   4) UTILITAIRES
   ========================================================= */

.u-input-text-right .k-input-inner {
    text-align: right;
}

.u-input-text-center .k-input-inner {
    text-align: center;
}

.u-input-radio .k-input-inner {
    padding-top: 0;
    padding-bottom: 0;
    height: 18px;
}

.u-checkbox-border-dark.form-check-input {
    border-color: var(--color-border-strong);
}

.u-no-form-legend > .k-form-legend {
    display: none;
}

.u-no-form-legend-border > .k-form-legend {
    border-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================
   5) LAYOUT APPLICATION
   ========================================================= */

.application-appbar {
    z-index: 10000;
}

.application-drawer .k-drawer {
    position: sticky;
    top: var(--application-appbar-height);
    height: calc(100vh - var(--application-appbar-height));
    flex: none;
}

.k-drawer-content {
    height: calc(100vh - var(--application-appbar-height));
    background-color: var(--color-bg-page);
}

.hidden-internal-search .k-searchbox {
    display: none;
}

.panel-wrapper > .k-animation-container {
    position: relative;
}

/* =========================================================
   6) NOTIFICATIONS
   ========================================================= */

.k-notification-container .k-notification {
    width: var(--notification-width);
    height: var(--notification-height);
    font-size: var(--notification-font-size);
    text-align: center;
    align-items: center;
}

    .k-notification-container .k-notification.k-notification-success,
    .k-notification-container .k-notification-success {
        background-color: var(--color-success);
        border-color: var(--color-success);
        color: var(--color-success-text);
    }

        .k-notification-container .k-notification.k-notification-success .k-notification-content,
        .k-notification-container .k-notification-success .k-notification-content,
        .k-notification-container .k-notification.k-notification-success .k-svg-icon,
        .k-notification-container .k-notification-success .k-svg-icon,
        .k-notification-container .k-notification.k-notification-success .k-notification-close-action,
        .k-notification-container .k-notification-success .k-notification-close-action {
            color: var(--color-success-text);
        }

/* =========================================================
   7) LIENS / MENUS
   ========================================================= */

.grid-link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

    .grid-link:hover {
        color: var(--kendo-color-primary);
        text-decoration: none;
    }

.k-animation-container .k-menu-popup .k-menu-link,
.k-animation-container .k-menu-popup .k-menu-link:hover,
.k-animation-container .k-menu-popup a,
.k-animation-container .k-menu-popup a:hover,
.k-dropdown-button .k-menu-link:hover {
    text-decoration: none;
}

/* =========================================================
   8) THÈME KENDO - TOKENS ERROR
   ========================================================= */

:root {
    --kendo-color-error: var(--color-danger);
    --kendo-color-error-hover: var(--color-danger-hover);
    --kendo-color-error-active: var(--color-danger-active);
    --kendo-color-error-emphasis: var(--color-danger);
    --kendo-color-error-emphasis-hover: var(--color-danger-hover);
    --kendo-color-error-emphasis-active: var(--color-danger-active);
    --kendo-color-on-error: var(--color-danger-text);
}

/* =========================================================
   9) BOUTONS
   ========================================================= */

/* Base optionnelle si tu veux un style commun */
.app-btn {
    background-image: none;
    box-shadow: none;
}

/* Danger */
.app-btn-danger,
.btn-danger-custom,
.btn-soft-red,
.k-button-solid-error,
.k-button-solid-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger-text) !important;
    background-image: none !important;
    box-shadow: none !important;
}

    .app-btn-danger:hover,
    .btn-danger-custom:hover,
    .btn-soft-red:hover,
    .k-button-solid-error:hover,
    .k-button-solid-danger:hover,
    .btn-danger:focus,
    .btn-danger:hover {
        background-color: var(--color-danger-hover) !important;
        border-color: var(--color-danger-hover) !important;
        color: var(--color-danger-text) !important;
    }

    .app-btn-danger:active,
    .btn-danger-custom:active,
    .btn-soft-red:active,
    .k-button-solid-error:active,
    .k-button-solid-danger:active,
    .btn-danger:active {
        background-color: var(--color-danger-active) !important;
        border-color: var(--color-danger-active) !important;
        color: var(--color-danger-text) !important;
    }

    .app-btn-danger .k-button-text,
    .btn-danger-custom .k-button-text,
    .btn-soft-red .k-button-text,
    .k-button-solid-error .k-button-text,
    .k-button-solid-danger .k-button-text {
        color: var(--color-danger-text) !important;
    }

/* Succès / soumission */
.app-btn-submit,
.k-button.k-button-solid-success,
.k-button.primary {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success-text) !important;
    background-image: none !important;
    box-shadow: none !important;
}

    .app-btn-submit:hover,
    .k-button.k-button-solid-success:hover,
    .k-button.primary:hover {
        background-color: var(--color-success-hover) !important;
        border-color: var(--color-success-hover) !important;
    }

    .app-btn-submit .k-button-text,
    .k-button.k-button-solid-success .k-button-text,
    .k-button.primary .k-button-text {
        color: var(--color-success-text) !important;
    }

/* =========================================================
   10) COMPOSANTS - FORM CARD
   ========================================================= */

.app-form-card,
.custom-form-card {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    overflow: hidden;
    background-color: var(--color-surface-form);
}

.app-form-card__header,
.app-form-card__footer,
.app-form-band,
.custom-form-band {
    background-color: var(--color-surface-band);
    background-image: none;
    box-shadow: none;
}

.app-form-card__header,
.app-form-band,
.k-card-header.custom-form-band {
    border-bottom: 1px solid var(--color-border-default);
}

.app-form-card__footer,
.k-card-actions.custom-form-band {
    border-top: 1px solid var(--color-border-default);
}

.app-form-card__body,
.app-form-body,
.custom-form-body {
    background-color: var(--color-surface-form);
}

    .app-form-card__body .k-input,
    .app-form-card__body .k-input-solid,
    .app-form-card__body .k-picker,
    .app-form-card__body .k-picker-solid,
    .app-form-body .k-input,
    .app-form-body .k-input-solid,
    .app-form-body .k-picker,
    .app-form-body .k-picker-solid,
    .custom-form-body .k-input,
    .custom-form-body .k-input-solid,
    .custom-form-body .k-picker,
    .custom-form-body .k-picker-solid {
        background-color: var(--color-surface-input) !important;
        border: 1px solid var(--color-border-default) !important;
    }

        .app-form-card__body .k-input:hover,
        .app-form-card__body .k-input-solid:hover,
        .app-form-card__body .k-picker:hover,
        .app-form-card__body .k-picker-solid:hover,
        .app-form-body .k-input:hover,
        .app-form-body .k-input-solid:hover,
        .app-form-body .k-picker:hover,
        .app-form-body .k-picker-solid:hover,
        .custom-form-body .k-input:hover,
        .custom-form-body .k-input-solid:hover,
        .custom-form-body .k-picker:hover,
        .custom-form-body .k-picker-solid:hover {
            border-color: var(--color-border-hover) !important;
        }

/* Actions dans le footer de formulaire */
.app-form-card__footer .k-button.primary,
.app-form-card__footer .k-button.k-button-solid-success,
.app-form-band .k-button.primary,
.app-form-band .k-button.k-button-solid-success,
.custom-form-band .k-button.primary,
.custom-form-band .k-button.k-button-solid-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

    .app-form-card__footer .k-button.primary:hover,
    .app-form-card__footer .k-button.k-button-solid-success:hover,
    .app-form-band .k-button.primary:hover,
    .app-form-band .k-button.k-button-solid-success:hover,
    .custom-form-band .k-button.primary:hover,
    .custom-form-band .k-button.k-button-solid-success:hover {
        background-color: var(--color-success-hover) !important;
        border-color: var(--color-success-hover) !important;
    }

.app-form-card__footer .k-button:not(.k-button-solid-error):not(.k-button-solid-danger):not(.btn-danger-custom) .k-button-text,
.app-form-band .k-button:not(.k-button-solid-error):not(.k-button-solid-danger):not(.btn-danger-custom) .k-button-text,
.custom-form-band .k-button:not(.k-button-solid-error):not(.k-button-solid-danger):not(.btn-danger-custom) .k-button-text {
    color: var(--color-success-text) !important;
}

/* =========================================================
   11) COMPOSANTS - LIST CARD
   ========================================================= */

.app-list-card {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    overflow: hidden;
    background-color: var(--color-surface-list);
}

.app-list-card__header,
.app-list-band {
    background-color: var(--color-surface-band);
    background-image: none;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border-default);
}

.app-list-card__body,
.app-list-body {
    background-color: var(--color-surface-list);
}

    .app-list-card .k-grid,
    .app-list-body .k-grid {
        border-color: var(--color-border-default) !important;
    }