/* ============================================================
   KELLERSTORE — Theme Refresh 2026 (visual update +25%)
   ============================================================
   Ce fichier est chargé APRÈS layout-theme.css.
   Il apporte un rafraîchissement visuel cohérent en surchargeant
   les composants clés. L'identité HKI Purple Horizon (#7A4183)
   reste la signature de marque.
   ============================================================ */

/* ── Palette élargie ───────────────────────────────────────── */
:root {
    --ks-purple-50:   #f6f1f7;
    --ks-purple-100:  #ecdef0;
    --ks-purple-200:  #d4afd9;
    --ks-purple-400:  #9c5fa6;
    --ks-purple-500:  #7A4183;   /* Brand */
    --ks-purple-600:  #683670;
    --ks-purple-700:  #5c2f61;
    --ks-purple-900:  #3d1f40;

    --ks-amber-400:   #d4b34d;
    --ks-amber-500:   #c8a84b;
    --ks-coral-500:   #F87C56;
    --ks-emerald-500: #10b981;
    --ks-rose-500:    #ef4444;
    --ks-sky-500:     #41B6E6;

    /* Élévations standardisées */
    --ks-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --ks-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --ks-shadow-md: 0 6px 18px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --ks-shadow-lg: 0 20px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);
    --ks-shadow-glow: 0 0 0 4px rgba(122, 65, 131, 0.12);

    /* Rayons standardisés */
    --ks-radius-xs: 6px;
    --ks-radius-sm: 10px;
    --ks-radius-md: 14px;
    --ks-radius-lg: 18px;
    --ks-radius-xl: 24px;

    /* Transitions communes */
    --ks-ease:      cubic-bezier(.4, 0, .2, 1);
    --ks-ease-out:  cubic-bezier(.16, 1, .3, 1);
    --ks-t-fast:    .15s;
    --ks-t-base:    .25s;
    --ks-t-slow:    .4s;
}

/* ============================================================
   GLOBAL — micro-typographie + smoothing
   ============================================================ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    letter-spacing: -.01em;
}

/* Focus accessible global */
*:focus-visible {
    outline: 3px solid rgba(122, 65, 131, .35);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   CARDS — ombre douce, hover lift, headers gradients
   ============================================================ */
.card,
.sc-card-hover,
.app-content-inner.card {
    border: 1px solid var(--ks-border-soft) !important;
    border-radius: var(--ks-radius-md) !important;
    box-shadow: var(--ks-shadow-sm) !important;
    transition: box-shadow var(--ks-t-base) var(--ks-ease),
                transform var(--ks-t-base) var(--ks-ease);
}

/* Hover lift uniquement pour les cartes "tuiles" (KPI, listes interactives) */
.kpi-card:hover,
.dashboard-tile:hover,
.sc-card-hover.is-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-md) !important;
}

/* Card header purple : finition gradient + texte + arrondi */
.sc-card-head,
.card-header[style*="7A4183"],
.card-header[style*="purple"] {
    background: linear-gradient(135deg, var(--ks-purple-500) 0%, var(--ks-purple-700) 100%) !important;
    color: #fff !important;
    border-radius: var(--ks-radius-md) var(--ks-radius-md) 0 0 !important;
    border: none !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

/* ============================================================
   BUTTONS — refresh radius, focus ring, transitions
   ============================================================ */
.btn {
    border-radius: var(--ks-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .5rem 1.1rem;
    transition: all var(--ks-t-fast) var(--ks-ease);
    box-shadow: var(--ks-shadow-xs);
}
.btn:active {
    transform: translateY(1px);
}
.btn-pill {
    border-radius: 999px !important;
}

/* Bouton primaire HKI — gradient subtil */
.btn-primary,
.btn-primary-legacy,
.ks-btn-login {
    background: linear-gradient(135deg, var(--ks-purple-500), var(--ks-purple-700)) !important;
    border: none !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary-legacy:hover,
.ks-btn-login:hover {
    background: linear-gradient(135deg, var(--ks-purple-600), var(--ks-purple-900)) !important;
    box-shadow: 0 8px 22px rgba(122, 65, 131, .28);
    transform: translateY(-1px);
}
.btn-primary:focus-visible,
.btn-primary-legacy:focus-visible,
.ks-btn-login:focus-visible {
    box-shadow: var(--ks-shadow-glow);
    outline: none;
}

/* Bouton danger — rose plus moderne */
.btn-danger {
    background: linear-gradient(135deg, #f43f5e, #be123c) !important;
    border: none !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #e11d48, #9f1239) !important;
    box-shadow: 0 8px 22px rgba(225, 29, 72, .28);
    transform: translateY(-1px);
}

/* Bouton outline — bordure 1.5px + hover fill subtil */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning {
    border-width: 1.5px;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: var(--ks-purple-50);
    border-color: var(--ks-purple-500);
    color: var(--ks-purple-700);
}

/* ============================================================
   BADGES — style "soft" moderne (fond pâle + bord coloré)
   ============================================================ */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .35em .75em;
    font-size: .72rem;
    letter-spacing: .02em;
}

.badge.bg-success,
.badge-success {
    background: rgba(16, 185, 129, .12) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, .25);
}
.badge.bg-warning,
.badge-warning {
    background: rgba(245, 158, 11, .14) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, .28);
}
.badge.bg-danger,
.badge-danger {
    background: rgba(239, 68, 68, .12) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, .25);
}
.badge.bg-info,
.badge-info {
    background: rgba(65, 182, 230, .12) !important;
    color: #0369a1 !important;
    border: 1px solid rgba(65, 182, 230, .28);
}
.badge.bg-secondary {
    background: rgba(91, 103, 112, .10) !important;
    color: #475569 !important;
    border: 1px solid rgba(91, 103, 112, .22);
}
.badge.bg-primary {
    background: rgba(122, 65, 131, .12) !important;
    color: var(--ks-purple-700) !important;
    border: 1px solid rgba(122, 65, 131, .28);
}

/* ============================================================
   TABLES — header gradient, zebra subtil, hover doux
   ============================================================ */
.sc-table thead th,
table.dataTable.sc-table thead th {
    background: linear-gradient(135deg, var(--ks-purple-500), var(--ks-purple-700)) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .76rem !important;
    font-weight: 700 !important;
    padding: .85rem 1rem !important;
    border: none !important;
}
.sc-table tbody tr:nth-child(even) {
    background-color: rgba(122, 65, 131, .015);
}
.sc-table tbody td {
    padding: .8rem 1rem;
    border-color: rgba(122, 65, 131, .08) !important;
    vertical-align: middle;
}

/* Lignes cliquables : juste le curseur (pas de changement visuel au hover) */
.sc-table tbody tr[data-href],
.sc-table tbody tr[data-ks-crud] {
    cursor: pointer;
}

/* Override final : neutralise tous les hovers de lignes hérités
   des thèmes (light/mid/dark) — on garde uniquement la zebra pour la
   lisibilité, mais sans changement au passage de la souris. */
.sc-table tbody tr:hover,
.sc-table tbody tr[data-href]:hover,
.sc-table tbody tr[data-ks-crud]:hover,
table.dataTable tbody tr:hover,
[data-theme="light"] .sc-table tbody tr[data-href]:hover,
[data-theme="mid"]   .sc-table tbody tr[data-href]:hover,
[data-theme="dark"]  .sc-table tbody tr[data-href]:hover,
[data-theme="dark"]  table.dataTable tbody tr:hover,
tr[data-ks-crud]:hover {
    background-color: inherit !important;
}
/* Garder la zebra : lignes paires gardent leur teinte même au hover */
.sc-table tbody tr:nth-child(even):hover {
    background-color: rgba(122, 65, 131, .015) !important;
}

/* ============================================================
   FORMS — focus purple + transitions + labels
   ============================================================ */
.form-control,
.form-select {
    border-radius: var(--ks-radius-sm);
    border: 1.5px solid var(--ks-border-soft);
    padding: .55rem .9rem;
    transition: border-color var(--ks-t-fast) var(--ks-ease),
                box-shadow var(--ks-t-fast) var(--ks-ease);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ks-purple-500);
    box-shadow: 0 0 0 3px rgba(122, 65, 131, .14) !important;
    outline: none;
}
.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ks-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.form-check-input:checked {
    background-color: var(--ks-purple-500);
    border-color: var(--ks-purple-500);
}
.form-check-input:focus {
    border-color: var(--ks-purple-500);
    box-shadow: 0 0 0 .2rem rgba(122, 65, 131, .15);
}

/* ============================================================
   SIDEBAR — indicateur actif lateral, hover doux
   ============================================================ */
.ks-nav-link {
    position: relative;
    transition: background-color var(--ks-t-fast) var(--ks-ease),
                color var(--ks-t-fast) var(--ks-ease);
}
.ks-nav-link.ks-nav-active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--ks-amber-500);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px rgba(200, 168, 75, .5);
}
.ks-nav-link:hover {
    background: var(--lb-hover-bg);
}

/* Animation subtile à l'expand de la sidebar */
.ks-sidebar-expanded .nav-text {
    animation: ksFadeIn .25s var(--ks-ease-out);
}
@keyframes ksFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   TOPBAR — glassmorphism léger + sticky
   ============================================================ */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #D8E0EA;                           /* slate-100 — scloud-skin surcharge */
    border-bottom: 1px solid var(--ks-border-soft);
}
[data-theme="dark"] .app-topbar {
    background: rgba(15, 23, 42, .95);
}

/* ============================================================
   MODALS — backdrop blur amélioré, animations + focus
   ============================================================ */
.ks-modal {
    background: rgba(15, 23, 42, .55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    animation: ksModalFadeIn var(--ks-t-base) var(--ks-ease-out) !important;
}
.ks-modal-content {
    border-radius: var(--ks-radius-lg) !important;
    box-shadow: var(--ks-shadow-lg) !important;
    border: 1px solid rgba(122, 65, 131, .12) !important;
    animation: ksModalPop var(--ks-t-slow) var(--ks-ease-out) !important;
}
@keyframes ksModalPop {
    from { transform: translateY(-16px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Modal CRUD : header sticky avec gradient */
.ks-modal-crud {
    border-radius: var(--ks-radius-lg) !important;
    box-shadow: var(--ks-shadow-lg) !important;
    width: 96vw !important;
    max-width: 1600px !important;
    overflow-y: auto !important;
}
.ks-crud-close-btn {
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid var(--ks-border-soft) !important;
    box-shadow: var(--ks-shadow-sm);
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    transition: all var(--ks-t-fast) var(--ks-ease);
}
.ks-crud-close-btn:hover {
    background: #fff !important;
    transform: rotate(90deg);
    color: var(--ks-rose-500);
}

/* Drawer mobile : ombre + animation plus naturelle */
@media (max-width: 991.98px) {
    .ks-sidebar.ks-drawer-open {
        box-shadow: 8px 0 32px rgba(15, 23, 42, .25);
    }
    .ks-drawer-backdrop {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* ============================================================
   ALERTS — design moderne (fond pâle + bord épais à gauche)
   ============================================================ */
.alert {
    border-radius: var(--ks-radius-sm);
    border: 1px solid transparent;
    padding: .85rem 1.1rem;
    box-shadow: var(--ks-shadow-xs);
}
.alert-success {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .25);
    color: #047857;
    border-left: 4px solid var(--ks-emerald-500);
}
.alert-danger {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .25);
    color: #b91c1c;
    border-left: 4px solid var(--ks-rose-500);
}
.alert-warning {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .28);
    color: #b45309;
    border-left: 4px solid #f59e0b;
}
.alert-info {
    background: rgba(65, 182, 230, .08);
    border-color: rgba(65, 182, 230, .25);
    color: #0369a1;
    border-left: 4px solid var(--ks-sky-500);
}

/* ============================================================
   PAGE TRANSITIONS — entrée subtile du contenu
   ============================================================ */
.app-content-inner {
    animation: ksContentIn var(--ks-t-slow) var(--ks-ease-out);
}
@keyframes ksContentIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LOGIN — refresh subtle (déjà beau, on affine)
   ============================================================ */
.ks-login-brand {
    background: linear-gradient(160deg,
                var(--ks-purple-500) 0%,
                var(--ks-purple-700) 50%,
                var(--ks-purple-900) 100%) !important;
}
.ks-login-card .form-control {
    border-radius: var(--ks-radius-sm);
    border-width: 1.5px;
}
.ks-login-card .ks-btn-login {
    border-radius: var(--ks-radius-sm) !important;
    padding: .75rem !important;
    font-weight: 600 !important;
    box-shadow: var(--ks-shadow-md);
}
.ks-login-card .ks-btn-login:hover {
    box-shadow: 0 12px 28px rgba(122, 65, 131, .35);
}

/* ============================================================
   KPI / DASHBOARD TILES — modernisation
   ============================================================ */
.kpi-card,
.dashboard-tile {
    border-radius: var(--ks-radius-md) !important;
    transition: all var(--ks-t-base) var(--ks-ease);
}
.kpi-card .kpi-value,
.dashboard-tile .kpi-value {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ============================================================
   SCROLLBAR — discrète et élégante
   ============================================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(122, 65, 131, .25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(122, 65, 131, .45);
    background-clip: content-box;
}

/* ============================================================
   UTILITY CLASSES — petits raffinements
   ============================================================ */
.shadow-soft   { box-shadow: var(--ks-shadow-sm) !important; }
.shadow-medium { box-shadow: var(--ks-shadow-md) !important; }
.shadow-large  { box-shadow: var(--ks-shadow-lg) !important; }

.rounded-soft  { border-radius: var(--ks-radius-sm) !important; }
.rounded-mid   { border-radius: var(--ks-radius-md) !important; }
.rounded-card  { border-radius: var(--ks-radius-lg) !important; }

/* Indicateur "nouveau" version 2.9 — petit dot pour signaler les changements */
.ks-update-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ks-coral-500);
    border-radius: 50%;
    animation: ksPulse 2.5s var(--ks-ease) infinite;
    margin-left: .25rem;
    vertical-align: super;
    box-shadow: 0 0 0 0 rgba(248, 124, 86, .6);
}
@keyframes ksPulse {
    0%   { box-shadow: 0 0 0 0 rgba(248, 124, 86, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(248, 124, 86, 0); }
    100% { box-shadow: 0 0 0 0 rgba(248, 124, 86, 0); }
}

/* ============================================================
   P8 — Badges status uniformes (.ks-b)
   ============================================================ */
.ks-b {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ks-b__dot { font-size: .7rem; line-height: 1; }

.ks-b--success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.ks-b--warn    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ks-b--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.ks-b--info    { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.ks-b--muted   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Dark theme — variations subtiles */
[data-theme="dark"] .ks-b--success { background: rgba(16,185,129,.18); color: #6ee7b7; border-color: rgba(16,185,129,.35); }
[data-theme="dark"] .ks-b--warn    { background: rgba(212,179,77,.18);  color: #fcd34d; border-color: rgba(212,179,77,.35); }
[data-theme="dark"] .ks-b--danger  { background: rgba(239,68,68,.18);   color: #fca5a5; border-color: rgba(239,68,68,.35); }
[data-theme="dark"] .ks-b--info    { background: rgba(65,182,230,.18);  color: #67e8f9; border-color: rgba(65,182,230,.35); }
[data-theme="dark"] .ks-b--muted   { background: rgba(148,163,184,.15); color: #cbd5e1; border-color: rgba(148,163,184,.30); }

/* ============================================================
   P8 — Empty states (tableaux vides, listes vides)
   ============================================================ */
.ks-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ks-text-muted, #94a3b8);
}
.ks-empty__icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ks-purple-50, #f6f1f7);
    color: var(--ks-purple-500, #7A4183);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
}
.ks-empty__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ks-text-main, #1a1a1a);
    margin-bottom: .35rem;
}
.ks-empty__hint {
    font-size: .88rem;
    margin-bottom: 1.25rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
}
.ks-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.15rem;
    background: var(--ks-purple-500, #7A4183);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: background .2s, transform .15s;
}
.ks-empty__cta:hover {
    background: var(--ks-purple-600, #683670);
    color: #fff;
    transform: translateY(-1px);
}

[data-theme="dark"] .ks-empty__icon {
    background: rgba(122,65,131,.18);
    color: var(--ks-purple-200, #d4afd9);
}

/* ============================================================
   P8 — Skeleton loaders (animation pulse)
   ============================================================ */
.ks-skeleton {
    background: linear-gradient(90deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.10) 50%,
        rgba(0,0,0,.05) 100%);
    background-size: 200% 100%;
    animation: ksSkeletonShimmer 1.4s linear infinite;
    border-radius: 6px;
    height: 1rem;
    margin-bottom: .6rem;
}
.ks-skeleton--line   { height: .9rem; }
.ks-skeleton--title  { height: 1.5rem; width: 60%; margin-bottom: 1rem; }
.ks-skeleton--card   { height: 80px;  border-radius: 12px; }
.ks-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; display: inline-block; }

@keyframes ksSkeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

[data-theme="dark"] .ks-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,.10) 50%,
        rgba(255,255,255,.05) 100%);
    background-size: 200% 100%;
}