@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

body, h1, h2, h3, h4, h5, h6, p, a, span, li, button {
    font-family: 'Montserrat', sans-serf;
}
[class^="fa-"], [class*=" fa-"], .fa, .material-icons {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 900;
}
html, body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
  color: #a93593;
}
a:hover, a:focus {
  color: #7a2670;
}

/* Sin sombra gris detrás del header/logo */
#header {
  box-shadow: none;
}

/*
 * Pinned across every admin page on desktop, the same way #menu (the sidebar) already
 * stays put while the page scrolls (see #menu's own `position: fixed` in assets/css/
 * style.css). Scoped to `body.admin` so the customer-facing portal, which loads this
 * same file, is untouched — and to desktop widths, since small screens swap in their
 * own `.mobile-navbar`.
 *
 * This file — not modules/idoworker_theme/assets/css/idoworker-theme-admin.css — is
 * what actually renders on SaaS tenant routes (e.g. /ido/ps/admin/...): those pages
 * never get the `body-modern-theme` class that file is scoped to, so a fix living
 * only there is invisible here. Keep both in sync for any future #header change.
 */
@media (min-width: 769px) {
  body.admin #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }

  body.admin #wrapper {
    padding-top: 57px !important;
  }
}

/* Keep desktop actions on one row so they cannot cover the page toolbar. */
@media (min-width: 1200px) {
  body.admin #header nav > .tw-flex > .tw-flex,
  body.admin #header #top_search {
    min-width: 0;
  }

  body.admin #header #search_input {
    width: 100%;
    min-width: 0;
    max-width: 350px;
  }

  body.admin #header .navbar-right,
  body.admin #header nav > .tw-flex > .tw-flex > .navbar-nav {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/*
 * Sidebar toggle — a small round button (down from a 36px bordered square) whose
 * icon morphs between hamburger and "×" as the sidebar opens/closes, so the icon
 * itself carries the state instead of just being a static glyph. Purely CSS: the
 * three <line> elements (assets/views/admin/includes/header.php) get transformed
 * by the same `hide-sidebar`/`show-sidebar`/`page-small` body classes the sidebar
 * itself already uses (assets/css/style.css) — no JS changes needed.
 */
#header .hide-menu {
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 13px;
  padding: 0;
  border-radius: 50%;
  color: #374151 !important;
  background-color: transparent !important;
  border: 0;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
#header .hide-menu:hover,
#header .hide-menu:focus {
  background-color: rgba(128, 140, 160, 0.16) !important;
}
#header .hide-menu:active {
  transform: scale(0.9);
}
#header .hide-menu:focus-visible {
  outline: 2px solid #111827 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
#header .hide-menu svg {
  width: 16px;
  height: 16px;
  color: inherit !important;
  overflow: visible;
}
#header .hide-menu .hm-line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Sidebar visible (the common case: desktop default, or revealed on mobile) —
   the icon reads as "×", since clicking it closes what's currently open. */
body:not(.hide-sidebar):not(.page-small) #header .hide-menu .hm-line-top,
body.page-small.show-sidebar #header .hide-menu .hm-line-top {
  transform: translateY(4px) rotate(45deg);
}
body:not(.hide-sidebar):not(.page-small) #header .hide-menu .hm-line-mid,
body.page-small.show-sidebar #header .hide-menu .hm-line-mid {
  opacity: 0;
}
body:not(.hide-sidebar):not(.page-small) #header .hide-menu .hm-line-bottom,
body.page-small.show-sidebar #header .hide-menu .hm-line-bottom {
  transform: translateY(-4px) rotate(-45deg);
}

.navbar, .admin-sidebar {
  background-color: #11111f;
}

.admin-sidebar .menu-item > a,
.customer-wrapper .navbar-nav > li > a {
  color: #ffffff;
}

.admin-sidebar .menu-item.active,
.customer-wrapper .navbar-nav > li.active > a {
  background-color: #a93593;
  color: #ffffff;
}

.btn-primary {
  background-color: #a93593;
  border-color: #a93593;
}

.modal-header {
  background-color: #a93593;
  color: #ffffff;
}

/* Fix caret position inside fit-width selectpickers used in totals KPI strips
   (Invoices, Estimates, Expenses). The default rule places the caret at
   right: -6px (outside the button). We move it inside, vertically center it,
   and add right padding to the button so the value text doesn't overlap. */
#invoices_total .bootstrap-select.fit-width .dropdown-toggle .caret,
#estimates_total .bootstrap-select.fit-width .dropdown-toggle .caret,
#expenses_total .bootstrap-select.fit-width .dropdown-toggle .caret {
  right: 10px !important;
  top: 50% !important;
  margin-top: 0 !important;
  transform: translateY(-50%) rotate(45deg);
}

#invoices_total .bootstrap-select.fit-width .dropdown-toggle,
#estimates_total .bootstrap-select.fit-width .dropdown-toggle,
#expenses_total .bootstrap-select.fit-width .dropdown-toggle {
  padding-right: 30px !important;
  padding-left: 12px !important;
}

#invoices_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
#estimates_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
#expenses_total .bootstrap-select.fit-width .dropdown-toggle .filter-option {
  right: 26px !important;
  left: 12px !important;
}

[dir="rtl"] #invoices_total .bootstrap-select.fit-width .dropdown-toggle .caret,
[dir="rtl"] #estimates_total .bootstrap-select.fit-width .dropdown-toggle .caret,
[dir="rtl"] #expenses_total .bootstrap-select.fit-width .dropdown-toggle .caret {
  right: auto !important;
  left: 10px !important;
}

[dir="rtl"] #invoices_total .bootstrap-select.fit-width .dropdown-toggle,
[dir="rtl"] #estimates_total .bootstrap-select.fit-width .dropdown-toggle,
[dir="rtl"] #expenses_total .bootstrap-select.fit-width .dropdown-toggle {
  padding-right: 12px !important;
  padding-left: 30px !important;
}

[dir="rtl"] #invoices_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
[dir="rtl"] #estimates_total .bootstrap-select.fit-width .dropdown-toggle .filter-option,
[dir="rtl"] #expenses_total .bootstrap-select.fit-width .dropdown-toggle .filter-option {
  right: 12px !important;
  left: 26px !important;
}