/* ====================================================================
   akta. — Frappe v16 Theme Override
   Palette :
     Deep Blue  #1a3a6b  – sidebar, navbars, headings
     Amber      #e8a33c  – CTA, accents, liens, focus (ex-emerald)
     Ink        #0C0E1A  – texte principal
     Off-white  #f7f6f2  – fond général
     Border     #e2e8f0

   Stratégie :
     1. Override des CSS variables Frappe v16 (:root)
     2. Body sidebar → fond deep blue + texte blanc
     3. Desktop home navbar → fond deep blue
     4. Boutons primary → emerald
     5. Liens → emerald
     6. Focus rings → emerald
     7. Page head → off-white
   ==================================================================== */

/* ── 1. CSS Variable Overrides ──────────────────────────────────── */
:root {
  /* Primary / CTA → Emerald */
  --btn-primary:          #e8a33c;
  --primary-color:        #e8a33c;
  --primary:              #e8a33c;

  /* Background → off-white (plus chaud que le blanc pur de Frappe) */
  --bg-color:             #f7f6f2;

  /* Headings → Deep Blue */
  --heading-color:        #1a3a6b;

  /* Borders → légèrement plus doux */
  --border-color:         #e2e8f0;

  /* Sidebar token overrides — Option C (off-white + amber accent) */
  --sidebar-hover-color:  #ffffff;
  --sidebar-active-color: #ffffff;
  --sidebar-border-color: #e2e8f0;
  --sidebar-select-color: #ffffff;
}

/* ── 2. Body Sidebar → Off-White + Rail Amber (Option C) ────────── */

.body-sidebar {
  background-color: #f7f6f2 !important;
  border-right: 1px solid #e2e8f0 !important;
}

/* Texte des items de navigation */
.body-sidebar .standard-sidebar-item > a,
.body-sidebar .standard-sidebar-item .sidebar-item-label,
.body-sidebar .item-anchor {
  color: #0C0E1A !important;
}

/* Icônes SVG dans la sidebar (état neutre) */
.body-sidebar .sidebar-item-icon svg,
.body-sidebar .sidebar-item-icon .icon,
.body-sidebar .standard-sidebar-item svg {
  stroke: #64748B !important;
  color: #64748B !important;
}

/* Hover item */
.body-sidebar .standard-sidebar-item {
  position: relative;
  transition: background-color 0.1s;
}
.body-sidebar .standard-sidebar-item:hover {
  background-color: #ffffff !important;
}
.body-sidebar .standard-sidebar-item:hover > a,
.body-sidebar .standard-sidebar-item:hover .sidebar-item-label {
  color: #1a3a6b !important;
}
.body-sidebar .standard-sidebar-item:hover svg {
  stroke: #1a3a6b !important;
}

/* Item actif / sélectionné — rail amber à gauche */
.body-sidebar .standard-sidebar-item.selected {
  background-color: #ffffff !important;
  box-shadow: inset 3px 0 0 #e8a33c;
}
.body-sidebar .standard-sidebar-item.selected > a,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-label {
  color: #1a3a6b !important;
  font-weight: 600;
}
.body-sidebar .standard-sidebar-item.selected svg {
  stroke: #e8a33c !important;
  color: #e8a33c !important;
}

/* Labels de section (uppercase type "MODULES", "REVENUS") */
.body-sidebar .standard-sidebar-label {
  color: #94a3b8 !important;
  letter-spacing: 0.12em;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem !important;
}

/* Séparateur */
.body-sidebar .divider {
  border-top-color: #e2e8f0 !important;
}

/* Resize handle */
.body-sidebar .sidebar-resize-handle {
  background: transparent;
}
.body-sidebar .sidebar-resize-handle:hover {
  background: rgba(232, 163, 60, 0.15);
}

/* Zone utilisateur en bas de la sidebar */
.body-sidebar .sidebar-user-button {
  color: #0C0E1A !important;
  border-top: 1px solid #e2e8f0 !important;
}
.body-sidebar .sidebar-user-button:hover {
  background-color: #ffffff !important;
}
.body-sidebar .avatar-name-email span {
  color: #0C0E1A !important;
}
.body-sidebar .avatar-name-email .text-secondary,
.body-sidebar .avatar-name-email .d-block:last-child {
  color: #64748B !important;
}

/* Dropdown notifications (icône cloche) */
.body-sidebar .dropdown-notifications {
  background-color: #f7f6f2 !important;
}
.body-sidebar .dropdown-notifications .btn-reset svg,
.body-sidebar .nav-link svg {
  stroke: #64748B !important;
}
.body-sidebar .nav-link {
  color: #0C0E1A !important;
}
.body-sidebar .nav-link:hover svg {
  stroke: #1a3a6b !important;
}

/* ── 3. Sidebar Header (icône workspace + titre) ────────────────── */

.sidebar-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.sidebar-header .header-title {
  color: #1a3a6b !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sidebar-header .header-subtitle {
  color: #64748B !important;
}
/* Replace the auto-generated letter icon with the Akta logo.
   The icon container is styled as a square tile; we hide the inner letter
   and render the logo as a background-image so it works regardless of
   which workspace is selected. */
.sidebar-header .sidebar-item-icon {
  background-color: #fdf5e1 !important;
  border: 1px solid #fce8b8 !important;
  background-image: url("/assets/erp_lite/icons/akta-logo.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}
.sidebar-header .sidebar-item-icon > * {
  visibility: hidden;
}
.sidebar-header .header-logo img {
  filter: none;
}
.sidebar-header .drop-icon svg {
  stroke: #64748B !important;
}

/* ── 4. Desktop Home Page Navbar → Deep Blue ────────────────────── */

.desktop-navbar {
  background-color: #1a3a6b !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Logo #brand-logo sur la navbar */
.desktop-navbar #brand-logo {
  height: 28px;
  width: auto;
}

/* Barre de recherche */
.desktop-navbar .desktop-navbar-modal-search {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.desktop-navbar .desktop-navbar-modal-search:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.desktop-navbar .desktop-search-icon,
.desktop-navbar .desktop-search-icon span,
.desktop-navbar .desktop-keyboard-shortcut {
  color: rgba(255, 255, 255, 0.55) !important;
}
.desktop-navbar .desktop-search-icon svg {
  stroke: rgba(255, 255, 255, 0.55) !important;
}

/* Icônes et liens navbar (cloche, user…) */
.desktop-navbar .nav-link,
.desktop-navbar .btn-reset {
  color: rgba(255, 255, 255, 0.78) !important;
}
.desktop-navbar .nav-link:hover,
.desktop-navbar .btn-reset:hover {
  color: #ffffff !important;
}
.desktop-navbar .nav-link svg,
.desktop-navbar .btn-reset svg,
.desktop-navbar .icon {
  stroke: rgba(255, 255, 255, 0.78) !important;
}
.desktop-navbar .nav-link:hover svg,
.desktop-navbar .btn-reset:hover svg {
  stroke: #ffffff !important;
}

/* ── 5. Page Head → off-white ────────────────────────────────────── */

.page-head {
  background-color: #f7f6f2 !important;
  border-bottom-color: #e2e8f0 !important;
}

/* Sidebar toggle (bouton hamburger dans le page-head) */
.page-head .sidebar-toggle-btn svg {
  stroke: #1a3a6b !important;
}
.page-head .sidebar-toggle-btn:hover svg {
  stroke: #e8a33c !important;
}

/* ── 6. Boutons Primary → Emerald ───────────────────────────────── */

.btn-primary,
.btn.btn-primary,
button.btn-primary {
  background-color: #e8a33c !important;
  border-color: #e8a33c !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
  background-color: #c88725 !important;
  border-color: #c88725 !important;
}
.btn-primary:focus,
.btn.btn-primary:focus {
  background-color: #c88725 !important;
  border-color: #c88725 !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 60, 0.28) !important;
}

/* Save button dans les formulaires Frappe */
[data-fieldtype="Button"] .btn-primary,
.form-save-btn .btn-primary {
  background-color: #e8a33c !important;
  border-color: #e8a33c !important;
}

/* ── 7. Liens → Emerald ─────────────────────────────────────────── */

/* Dans le contenu principal uniquement (pas dans la sidebar ni navbar) */
.layout-main-section a:not(.btn):not(.nav-link):not([class*="sidebar"]):not(.dropdown-item) {
  color: #e8a33c;
}
.layout-main-section a:not(.btn):not(.nav-link):not([class*="sidebar"]):not(.dropdown-item):hover {
  color: #c88725;
}

/* Liens dans les breadcrumbs */
.navbar-breadcrumbs a,
.breadcrumb-container a {
  color: #e8a33c !important;
}

/* ── 8. Focus Ring → Emerald ────────────────────────────────────── */

*:focus-visible {
  outline-color: #e8a33c !important;
}
.form-control:focus,
.frappe-control input:focus,
.frappe-control textarea:focus,
.frappe-control select:focus {
  border-color: #e8a33c !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 60, 0.18) !important;
}

/* Awesomplete (autocomplete) focus */
.awesomplete input:focus {
  border-color: #e8a33c !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 60, 0.18) !important;
}

/* ── 9. Indicateurs de statut → couleurs Akta ───────────────────── */

.indicator.green,
.indicator-pill.green {
  background: #fce8b8;
  color: #8a5a14;
}
.indicator.green::before,
.indicator-pill.green::before {
  background: #e8a33c;
}

/* ── 10. Checkbox / Toggle → Emerald ───────────────────────────── */

input[type="checkbox"]:checked {
  accent-color: #e8a33c;
}

/* Frappe custom toggle */
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:checked + .toggle-indicator,
.toggle-field input[type="checkbox"]:checked + .toggle-indicator {
  background-color: #e8a33c !important;
  border-color: #e8a33c !important;
}

/* ── 11. Workspace cards sur la home ──────────────────────────── */

/* Fond des cartes workspace légèrement off-white */
.desk-workspace-grid .card,
.workspace-card {
  background: #ffffff;
  border-color: #e2e8f0;
}
.desk-workspace-grid .card:hover,
.workspace-card:hover {
  border-color: #e8a33c;
  box-shadow: 0 4px 16px rgba(232, 163, 60, 0.14);
}

/* Icônes workspace sur la home → teinte deep blue */
.desk-workspace-grid .sidebar-item-icon {
  background-color: #e8eef8 !important;
}
.desk-workspace-grid .sidebar-item-icon svg {
  stroke: #1a3a6b !important;
}

/* ── 12. Titre de page → Deep Blue ─────────────────────────────── */

h1, h2, h3,
.page-title .title-text,
.form-page .page-head .title-area h3 {
  color: #1a3a6b;
}

/* ── 13. Selected rows / active states → Emerald tint ──────────── */

.list-row.list-row-checked,
.list-row-container .list-row.selected {
  background-color: rgba(232, 163, 60, 0.07) !important;
}

/* ── 14. Scroll accent → Emerald ───────────────────────────────── */

::-webkit-scrollbar-thumb {
  background-color: rgba(26, 58, 107, 0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(232, 163, 60, 0.55);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}