/* 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: white in dark mode */
[data-theme="dark"] .navbar-brand img {
    filter: brightness(0) invert(1) !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; }