/* Kraken Theme — Dynamic accent color via CSS custom properties */
/* Default: Orange #F07840 (dark) / Red #E8304A (light) */

:root {
    --kraken-accent: #F07840;
    --kraken-accent-hover: #d46a38;
    --kraken-accent-hover: color-mix(in srgb, var(--kraken-accent), black 12%);
    --kraken-accent-active: #bb5d32;
    --kraken-accent-active: color-mix(in srgb, var(--kraken-accent), black 22%);
    --kraken-accent-rgb: 240, 120, 64;
}
/* No light override — accent color is user-chosen via kraken_accent_color localStorage
   and applied dynamically by kraken_theme_v2.js */

/* ═══ Primary buttons ═══ */
.btn-primary,
.btn-primary-dark,
.page-actions .btn-primary,
.modal-dialog .btn-primary,
.frappe-control .btn-primary {
    background-color: var(--kraken-accent) !important;
    border-color: var(--kraken-accent) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary-dark:hover,
.page-actions .btn-primary:hover,
.modal-dialog .btn-primary:hover {
    background-color: var(--kraken-accent-hover) !important;
    border-color: var(--kraken-accent-hover) !important;
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--kraken-accent-active) !important;
    border-color: var(--kraken-accent-active) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--kraken-accent-rgb), 0.3) !important;
}

/* ═══ Links ═══ */
a, .like-disabled-input a, .frappe-control .link-btn {
    color: var(--kraken-accent);
}
a:hover {
    color: var(--kraken-accent-hover);
}

/* ═══ Sidebar active indicator ═══ */
.desk-sidebar .sidebar-menu a.active,
.desk-sidebar .sidebar-menu a.selected {
    border-left-color: var(--kraken-accent) !important;
}

/* ═══ Page background — accent pastel on sidebar/gap only (JS handles it) ═══ */

/* ═══ Checkbox / toggle switches ═══ */
.frappe-control input[type="checkbox"]:checked {
    background-color: var(--kraken-accent) !important;
    border-color: var(--kraken-accent) !important;
}

/* ═══ Progress bars ═══ */
.progress-bar {
    background-color: var(--kraken-accent) !important;
}

/* ═══ Indicators / badges ═══ */
.indicator-pill.blue, .indicator-pill.green {
    --indicator-color: var(--kraken-accent);
}

/* ═══ Page head actions ═══ */
.page-head .page-actions .btn-primary-dark {
    background-color: var(--kraken-accent) !important;
    border-color: var(--kraken-accent) !important;
}

/* ═══ Navbar brand logo sizing ═══ */
.navbar-brand img {
    max-height: 28px;
}

/* ═══ Splash de chargement supprimé ═══
   Frappe affiche un écran de chargement centré avec le logo ERPNext pendant le
   boot/navigation. Le remplacer en JS laissait flasher le logo ERPNext d'origine.
   On le masque entièrement ici (CSS chargé tôt via app_include_css) → aucun logo
   ne flashe, pas de splash du tout. */
.splash,
.centered.splash,
.splash img,
.centered.splash img {
    display: none !important;
}

/* ═══ Login page — full Kraken branding ═══ */

body[data-page="login"] {
    background: #000000 !important;
    min-height: 100vh;
}
body[data-page="login"][data-theme="light"] {
    background: #ffffff !important;
}

body[data-page="login"] .page-card {
    background: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid rgba(var(--kraken-accent-rgb), 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--kraken-accent-rgb), 0.05) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    max-width: 420px !important;
    margin: 60px auto !important;
    padding: 40px 36px !important;
}
body[data-page="login"][data-theme="light"] .page-card {
    background: #ffffff !important;
    border: 1px solid rgba(var(--kraken-accent-rgb), 0.12) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 80px rgba(var(--kraken-accent-rgb), 0.04) !important;
}

body[data-page="login"] .page-card-head img,
body[data-page="login"] .app-logo {
    max-height: 56px !important;
    margin-bottom: 8px !important;
}

body[data-page="login"] .page-card-head h4,
body[data-page="login"] .page-card-head .title {
    color: var(--text-color, #e0e0e0) !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
}

body[data-page="login"] .form-control,
body[data-page="login"] input[type="text"],
body[data-page="login"] input[type="password"],
body[data-page="login"] input[type="email"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: var(--text-color, #e0e0e0) !important;
    padding: 10px 14px 10px 32px !important;
    transition: border-color 0.2s !important;
}
body[data-page="login"] .form-control:focus,
body[data-page="login"] input:focus {
    border-color: var(--kraken-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--kraken-accent-rgb), 0.15) !important;
}
body[data-page="login"][data-theme="light"] .form-control,
body[data-page="login"][data-theme="light"] input[type="text"],
body[data-page="login"][data-theme="light"] input[type="password"],
body[data-page="login"][data-theme="light"] input[type="email"] {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: var(--text-color, #333) !important;
}
body[data-page="login"][data-theme="light"] .form-control:focus,
body[data-page="login"][data-theme="light"] input:focus {
    border-color: var(--kraken-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--kraken-accent-rgb), 0.12) !important;
}

body[data-page="login"] .btn-primary,
body[data-page="login"] .btn-login {
    background: var(--kraken-accent) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}
body[data-page="login"] .btn-primary:hover,
body[data-page="login"] .btn-login:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(var(--kraken-accent-rgb), 0.35) !important;
}

body[data-page="login"] label {
    color: var(--text-muted, #999) !important;
    font-weight: 500 !important;
}

body[data-page="login"] a {
    color: var(--kraken-accent) !important;
}
body[data-page="login"] a:hover {
    color: var(--kraken-accent-hover) !important;
}

body[data-page="login"] .page-card-body .text-muted,
body[data-page="login"] .powered-by {
    opacity: 0.4 !important;
}

body[data-page="login"] .login-with-email-link,
body[data-page="login"] .email-login-section,
body[data-page="login"] .updates-section,
body[data-page="login"] .or-section {
    display: none !important;
}

body[data-page="login"] .navbar {
    display: none !important;
}

/* Hide widget on login page and landing page */
body[data-page="login"] #kraken-helm,
body[data-page="login"] #kh-chatbar,
body[data-page="login"] #kh-response,
body[data-page="kraken"] #kraken-helm,
body[data-page="kraken"] #kh-chatbar,
body[data-page="kraken"] #kh-response {
    display: none !important;
}

/* ═══ Dark mode: sidebar + layout borders + softer background ═══ */
[data-theme="dark"] .desk-sidebar,
[data-theme="dark"] .layout-side-section,
[data-theme="dark"] .sidebar-menu,
[data-theme="dark"] .layout-main-section,
[data-theme="dark"] .page-container,
[data-theme="dark"] .desk-sidebar .sidebar-menu .sidebar-group {
    border-color: #333 !important;
}
/* Softer dark: unified gray — one shade everywhere */
[data-theme="dark"] {
    --bg-color: #1e1e1e !important;
    --fg-color: #1e1e1e !important;
    --card-bg: #2a2a2a !important;
    --sidebar-bg: #1e1e1e !important;
    --navbar-bg: #1e1e1e !important;
}
[data-theme="dark"] body,
[data-theme="dark"] .main-section,
[data-theme="dark"] .page-container {
    background-color: var(--kraken-bg, #1e1e1e) !important;
}
[data-theme="dark"] .desk-sidebar,
[data-theme="dark"] .layout-side-section {
    background-color: var(--kraken-bg, #1e1e1e) !important;
}
[data-theme="dark"] .navbar,
[data-theme="dark"] header.navbar {
    background-color: transparent !important;
}
/* Navbar logo en mode sombre : PAS de filtre. L'ancien logo (sphère
   monochrome) était blanchi par brightness(0) invert(1) ; le logo bot est
   en couleur (visière bleu-violet + visage blanc) et reste lisible tel quel
   sur fond sombre -- le filtre en faisait une silhouette blanche sans visage. */
[data-theme="dark"] .navbar-brand img {
    filter: none !important;
}
[data-theme="dark"] .desk-sidebar {
    background-color: #1a1a1a !important;
}
[data-theme="dark"] .frappe-card,
[data-theme="dark"] .widget,
[data-theme="dark"] .form-group .frappe-control,
[data-theme="dark"] .modal-content {
    background-color: #2f2f2f !important;
}

/* ═══ Frappe text primary override ═══ */
.text-primary {
    color: var(--kraken-accent) !important;
}

/* ═══ Dropdown active item ═══ */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--kraken-accent) !important;
}

/* ═══ Number card accent ═══ */
.number-card .number {
    color: var(--kraken-accent) !important;
}

/* ═══ Kraken Settings Panel ═══ */
#kraken-settings-overlay {
    position: fixed; inset: 0; z-index: 1070;
    background: rgba(0,0,0,0.5); display: none;
    align-items: center; justify-content: center;
}
#kraken-settings-overlay.ksp-open { display: flex; }

#kraken-settings-panel {
    background: var(--gray-900, #1a1a2e);
    border: 1px solid var(--gray-700, #333);
    border-radius: 16px;
    padding: 28px 32px;
    width: 380px; max-width: 90vw;
    box-shadow: 0 12px 48px rgba(0,0,0,0.4);
    color: var(--text-color, #e0e0e0);
}
[data-theme="light"] #kraken-settings-panel {
    background: #fff;
    border-color: var(--gray-300, #ddd);
    box-shadow: 0 12px 48px rgba(0,0,0,0.1);
    color: var(--text-color, #333);
}

#kraken-settings-panel h3 {
    margin: 0 0 20px; font-size: 16px; font-weight: 600;
}

.ksp-section { margin-bottom: 20px; }
.ksp-section label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--text-muted, #999); margin-bottom: 8px;
}

.ksp-colors {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.ksp-color-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer;
    transition: transform 0.15s, border-color 0.2s;
    padding: 0; outline: none;
}
.ksp-color-btn:hover { transform: scale(1.12); }
.ksp-color-btn.ksp-active { border-color: var(--text-color, #fff); }

.ksp-custom-wrap {
    display: flex; align-items: center; gap: 6px;
}
.ksp-custom-color {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid var(--gray-600, #555); cursor: pointer;
    padding: 0; background: none;
}
.ksp-custom-color::-webkit-color-swatch-wrapper { padding: 0; }
.ksp-custom-color::-webkit-color-swatch { border: none; border-radius: 50%; }

.ksp-theme-btns {
    display: flex; gap: 10px;
}
.ksp-theme-btn {
    flex: 1; padding: 10px 14px; border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05); cursor: pointer;
    font-size: 14px; font-weight: 600;
    color: #e0e0e0;
    transition: border-color 0.2s, background 0.2s;
}
[data-theme="light"] .ksp-theme-btn {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.03);
    color: #333;
}
.ksp-theme-btn:hover { border-color: var(--kraken-accent); }
[data-theme="light"] .ksp-theme-btn:hover { border-color: var(--kraken-accent); }
.ksp-theme-btn.ksp-active {
    border-color: var(--kraken-accent);
    background: rgba(var(--kraken-accent-rgb), 0.15);
    color: var(--kraken-accent);
}

.ksp-footer {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px;
}
.ksp-btn {
    padding: 8px 20px; border-radius: 8px; font-size: 13px;
    font-weight: 500; cursor: pointer; border: none;
    transition: background 0.2s;
}
.ksp-btn-secondary {
    background: var(--gray-700, #333); color: var(--text-color, #ccc);
}
.ksp-btn-secondary:hover { background: var(--gray-600, #444); }
[data-theme="light"] .ksp-btn-secondary {
    background: var(--gray-200, #eee); color: var(--text-color, #333);
}
.ksp-btn-primary {
    background: var(--kraken-accent); color: #fff;
}
.ksp-btn-primary:hover { opacity: 0.9; }

.ksp-shapes {
    display: flex; gap: 8px;
}
.ksp-shape-btn {
    flex: 1; display: flex; flex-direction: row; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04); cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--text-color, #e0e0e0);
    font-size: 12px; font-weight: 500;
}
[data-theme="light"] .ksp-shape-btn {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
    color: #333;
}
.ksp-shape-btn:hover { border-color: var(--kraken-accent); }
.ksp-shape-btn.ksp-active {
    border-color: var(--kraken-accent);
    background: rgba(var(--kraken-accent-rgb), 0.12);
}
.ksp-shape-preview {
    width: 28px; height: 28px;
}
.ksp-shape-preview svg { width: 100%; height: 100%; }

/* Textarea resizable — widget Raven (#kh-input) */
#kh-input {
    resize: both !important;
    max-height: 50vh !important;
    max-width: 90vw !important;
    min-height: 38px !important;
    min-width: 200px !important;
    overflow: auto !important;
}

/* ── Fix liste : la colonne sujet (sticky) débordait sur les lignes suivantes
   quand le sujet + aperçu tient sur 2 lignes (ex. liste Communication).
   .list-row natif reste bloqué à min-height:72px + align-items:flex-start et ne
   grandit pas pour contenir le sujet. On laisse la ligne grandir et on centre. ── */
.frappe-list .list-row,
.frappe-list .list-row.level { height: auto !important; align-items: center !important; }
.frappe-list .list-row-container { height: auto !important; }
.frappe-list .list-row-col.list-subject { align-items: center !important; }

/* ── Listes "natives" (Communication & co, exclues du mode full-columns) ──
   La feature full-columns fige chaque colonne à 170px + ligne en max-content,
   ce qui tasse les listes à peu de colonnes (sujet à gauche, gros vide à droite).
   Quand body.krk-native-list est présent, on restaure le flex natif : le sujet
   remplit la largeur, les colonnes méta gardent leur largeur naturelle. */
body.krk-native-list .frappe-list .result { min-width: 0 !important; }
body.krk-native-list .frappe-list .result .list-row,
body.krk-native-list .frappe-list .result .list-row-head,
body.krk-native-list .frappe-list .result .list-row-container { width: auto !important; min-width: 0 !important; }
body.krk-native-list .frappe-list .result .list-row-col { flex: 0 0 auto !important; width: auto !important; }
body.krk-native-list .frappe-list .result .list-row-col.list-subject {
  flex: 1 1 auto !important; width: auto !important; max-width: none !important;
  min-width: 0 !important; position: static !important; left: auto !important;
}
/* Mode natif : la colonne sujet gardait un fond beige opaque (masquage de
   l'ancienne colonne gelée) -> effet "demi-carte" blanche à gauche + beige à
   droite. On la rend transparente pour un fond de ligne uniforme (frost). */
body.krk-native-list .frappe-list .result .list-row-col.list-subject,
body.krk-native-list .frappe-list .result .list-subject {
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Mode natif : le full-columns fige .level-left à flex:0 0 auto (largeur contenu)
   -> contenu tassé à gauche + survol/fond de ligne tronqué. On le fait remplir
   toute la ligne pour un rendu plein largeur. */
body.krk-native-list .frappe-list .result .list-row > .level-left,
body.krk-native-list .frappe-list .result .list-row-head > .level-left {
  flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important;
}
body.krk-native-list .frappe-list .result .list-row { width: 100% !important; }
body.krk-native-list .frappe-list .result .level-right { margin-left: auto !important; }
/* Bouton logo helm dans la sidebar sugar (remplace l'icône doc) : un poil plus
   grand que les icônes stroke pour que le gouvernail reste lisible. */
#sugar-sidebar .ss-btn-logo svg { width: 26px !important; height: 26px !important; }

/* Scroll bloqué avant la vraie fin de page, signale "systemique" par
   l'utilisateur (fenetre reduite ET plein ecran, Safari ET app Mac native) sur
   les pages longues (ex. Abonnement). Cause structurelle : le shell Desk n'a
   AUCUN scroll sur <body> (overflow: hidden, architecture Frappe native, pas
   une personnalisation Kraken) -- seul un conteneur imbrique tres profond
   (.page-container, ou .layout-main-section-wrapper/.page-body selon le type
   de page, cf. kraken_theme_v4.js::SCROLLERS pour la meme liste) scrolle
   reellement, sans overscroll-behavior:contain (premiere hypothese, deployee
   seule d'abord -- insuffisante seule, confirme par l'utilisateur en reel).

   CAUSE REELLE, confirmee par mesure DIRECTE dans la console de l'utilisateur
   (pas une supposition) : `scrollTop` atteint bien EXACTEMENT son maximum
   (`scrollTop === scrollHeight - clientHeight`, ex. 98 === 98) -- le scroll
   techniquement va bien jusqu'au bout. Mais le BAS du conteneur scrollable
   est mesure PILE au bord de la fenetre (`getBoundingClientRect().bottom ===
   window.innerHeight`, ex. 483 === 483) : zero marge de respiration. Le
   dernier contenu (ex. "Commentaires"/"Activite", confirme present dans le
   DOM) arrive donc rase au bord physique de l'ecran, sans rien pour
   confirmer visuellement qu'on est vraiment au bout -- et la moindre
   imprecision d'arrondi sub-pixel (frequente en cross-navigateur/WebKit sur
   des valeurs de scrollHeight non entieres) suffit a rendre le tout dernier
   pixel de contenu inatteignable en pratique, meme si "scrollTop === max"
   en theorie. `contain` reste utile (evite le rebond elastique en plus),
   mais la vraie fusible est cette marge de respiration ci-dessous. */
.page-container,
.layout-main-section-wrapper,
.layout-main-section,
.page-body {
  overscroll-behavior-y: contain;
}
/* Marge de respiration -- SEUL le conteneur le plus interne (.layout-main-section)
   reçoit le padding : les 3 autres l'entourent avec overflow visible/clip (pas
   une hauteur figée), donc un padding ici suffit à faire grandir toute la
   chaîne d'un coup. L'appliquer aux 4 sélecteurs à la fois les ferait
   s'additionner (imbriqués les uns dans les autres sur les pages de formulaire
   -- confirmé en lisant le DOM réel) et gonflerait le vide de 64px à
   potentiellement 250px+. */
.layout-main-section {
  padding-bottom: 64px !important;
}