/* ==========================================================================
   Geri Care UI Overrides
   Loaded last (geri_care is the final app in apps.txt) — all rules here
   take final precedence over naidapa_theme, frappe, erpnext, etc.
   ========================================================================== */
 
/* --------------------------------------------------------------------------
   1. GLOBAL FONT — SF Pro Display
   Overrides Frappe's --font-stack (Inter) and naidapa_theme's Outfit.
   SF Pro is Apple's system font; it falls back gracefully on non-Apple OS.
   -------------------------------------------------------------------------- */
:root {
    --font-stack: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
 
body,
input,
p,
span,
label,
div,
textarea,
select,
button,
.form-control,
.btn,
.nav,
.navbar,
.sidebar-item-label,
.widget-title,
.page-title,
.frappe-list .list-row,
.data-pill,
.indicator,
.modal-title,
.modal-body {
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
 
/* --------------------------------------------------------------------------
   2. SIDEBAR ICON SIZE — 34px
   Overrides naidapa_theme's 20px default and Frappe's desk bundle styles.
   -------------------------------------------------------------------------- */
.sidebar-item-icon {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
 
.sidebar-item-icon iconify-icon {
    font-size: 22px !important;
}
 
/* --------------------------------------------------------------------------
   3. LOGO AREA — prevent overflow into nav items
   -------------------------------------------------------------------------- */
nav .app-logo {
    min-height: 70px !important;
    overflow: hidden !important;
}
 
nav .app-logo img {
    max-height: 42px !important;
    width: auto !important;
    display: block !important;
}
 
/* --------------------------------------------------------------------------
   4. SIDEBAR WIDTH
   Override --sidebar-width so both .body-sidebar and .body-sidebar-placeholder
   stay in sync. Setting them separately causes the overlay issue.
   -------------------------------------------------------------------------- */
:root {
    --sidebar-width: 14rem !important;
}
 
.body-sidebar-container.expanded .body-sidebar {
    width: 14rem !important;
}
 
.body-sidebar-container.expanded .body-sidebar-placeholder {
    width: 14rem !important;
    display: flex !important;
}
 
/* --------------------------------------------------------------------------
   5. SIDEBAR COLOR — Geri Care wine (lightened)
   Overrides naidapa_theme + desk bundle sidebar background/text.
   -------------------------------------------------------------------------- */
.body-sidebar-container.expanded .body-sidebar {
    background: linear-gradient(180deg, #8f2456 0%, #6e1642 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15) !important;
}
 
/* Text + icons — force white on SVG-use icons (stroke: currentColor) */
.body-sidebar-container.expanded .body-sidebar,
.body-sidebar-container.expanded .body-sidebar a,
.body-sidebar-container.expanded .body-sidebar .sidebar-item-label,
.body-sidebar-container.expanded .body-sidebar .icon,
.body-sidebar-container.expanded .body-sidebar .sidebar-item-icon iconify-icon {
    color: rgba(255, 255, 255, 0.92) !important;
}
 
/* SVG icons use stroke/fill: currentColor — pin them white */
.body-sidebar-container.expanded .body-sidebar .icon,
.body-sidebar-container.expanded .body-sidebar .icon use,
.body-sidebar-container.expanded .body-sidebar .sidebar-item-icon svg,
.body-sidebar-container.expanded .body-sidebar .sidebar-item-icon svg use {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;   /* line icons; change to #ffffff if a solid icon disappears */
}
 
/* App title / header */
.body-sidebar-container.expanded .body-sidebar .sidebar-header {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
 
/* Sidebar header hover — subtle translucent, keep text/icons white */
.body-sidebar-container.expanded .body-sidebar .sidebar-header:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.body-sidebar-container.expanded .body-sidebar .sidebar-header:hover,
.body-sidebar-container.expanded .body-sidebar .sidebar-header:hover .icon,
.body-sidebar-container.expanded .body-sidebar .sidebar-header:hover .icon use,
.body-sidebar-container.expanded .body-sidebar .sidebar-header:hover .sidebar-item-label {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
 
/* Sidebar header — stay wine with white text even when clicked (active-sidebar) */
.body-sidebar-container.expanded .body-sidebar .sidebar-header.active-sidebar,
.body-sidebar-container.expanded .body-sidebar .sidebar-header.active-sidebar:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.body-sidebar-container.expanded .body-sidebar .sidebar-header.active-sidebar,
.body-sidebar-container.expanded .body-sidebar .sidebar-header.active-sidebar .sidebar-item-label,
.body-sidebar-container.expanded .body-sidebar .sidebar-header.active-sidebar .icon,
.body-sidebar-container.expanded .body-sidebar .sidebar-header.active-sidebar .icon use {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
 
/* Menu items */
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item {
    border-radius: 8px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
 
/* Hover — background shifts, icon + label stay white */
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateX(2px) !important;
}
 
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item:hover .icon,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item:hover .icon use,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item:hover .sidebar-item-icon svg,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item:hover .sidebar-item-label {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
 
/* Active / selected — light highlight with wine text/icon for contrast
   NOTE: Frappe v16 uses the class "active-sidebar" for the selected item */
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-left: 3px solid #f0c14b !important;   /* gold accent */
    font-weight: 600 !important;
}
 
/* Selected item: text + icon become wine so they read on the white highlight */
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar .icon,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar .icon use,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg use {
    color: #7c1b49 !important;
    stroke: #7c1b49 !important;
}
 
/* Keep the selected item wine-on-white even on hover (stays white bg, wine text) */
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar:hover {
    background: #ffffff !important;
    transform: none !important;
}
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar:hover .sidebar-item-label,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar:hover .icon,
.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item.active-sidebar:hover .icon use {
    color: #7c1b49 !important;
    stroke: #7c1b49 !important;
}
 
/* Section titles */
.body-sidebar-container.expanded .body-sidebar .sidebar-section-title {
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}
 
/* Search box */
.body-sidebar-container.expanded .body-sidebar .sidebar-search input,
.body-sidebar-container.expanded .body-sidebar input[type="text"] {
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
.body-sidebar-container.expanded .body-sidebar .sidebar-search input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
 
/* Collapse/toggle button */
.body-sidebar-container.expanded .body-sidebar .sidebar-toggle-btn {
    color: rgba(255, 255, 255, 0.8) !important;
}
.body-sidebar-container.expanded .body-sidebar .sidebar-toggle-btn:hover {
    color: #ffffff !important;
}
 
/* --------------------------------------------------------------------------
   6. PRIMARY BUTTONS — Geri Care wine (#7c1b49)
   Overrides Frappe's default dark primary + naidapa_theme.
   Covers .btn-primary, .primary-action, and page-head action buttons.
   -------------------------------------------------------------------------- */
.btn-primary,
.btn.btn-primary,
.page-head .btn-primary,
button.primary-action,
.btn-primary.primary-action {
    background-color: #7c1b49 !important;
    border-color: #7c1b49 !important;
    color: #ffffff !important;
}
 
/* Icon inside primary button stays white */
.btn-primary .icon,
.btn-primary .icon use,
button.primary-action .icon,
button.primary-action .icon use {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
 
/* Hover — slightly darker wine */
.btn-primary:hover,
.btn.btn-primary:hover,
button.primary-action:hover,
.btn-primary.primary-action:hover {
    background-color: #641540 !important;
    border-color: #641540 !important;
    color: #ffffff !important;
}
 
/* Active / focus — keep wine, add subtle focus ring */
.btn-primary:active,
.btn-primary:focus,
button.primary-action:active,
button.primary-action:focus {
    background-color: #5e1338 !important;
    border-color: #5e1338 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(124, 27, 73, 0.25) !important;
}
 
/* Disabled state — muted wine */
.btn-primary:disabled,
.btn-primary.disabled,
button.primary-action:disabled {
    background-color: #b98aa0 !important;
    border-color: #b98aa0 !important;
    color: #ffffff !important;
    opacity: 0.7 !important;
}
 
/* Grid delete-row highlight */
.grid-delete-row {
    background-color: #7c1b49 !important;
}
 
/* Select filter fields — vertically center text/placeholder */
.form-group.frappe-control[data-fieldtype="Select"] {
    line-height: 35px !important;
}
 
/* ID filter field — space out and align the match-type (≈) button */
.input-group .input-group-btn.mr-0 {
    margin-left: 6px !important;
}
.input-group .input-group-btn.mr-0 .btn {
    margin-top: 6px !important;
}
.frappe-control[data-fieldtype=Select] .control-input .select-icon, .frappe-control[data-fieldtype=Select].form-group .select-icon {
    top: 7px!important;
}
/* --------------------------------------------------------------------------
   7. SIDEBAR COLLAPSE TOGGLE — round wine button, white chevron, always visible
   -------------------------------------------------------------------------- */
.collapse-sidebar-link.sidebar-toggle-btn {
    background: #7c1b49 !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    z-index: 1030 !important;   /* above the .overlay (z-index 1021) */
    transition: background 0.15s ease, transform 0.15s ease !important;
}
 
/* Always visible, not just on sidebar hover */
.body-sidebar-container.expanded .body-sidebar .collapse-sidebar-link.sidebar-toggle-btn {
    opacity: 1 !important;
    visibility: visible !important;
}
 
/* Chevron icon — white, overrides the inline red */
.collapse-sidebar-link.sidebar-toggle-btn .icon,
.collapse-sidebar-link.sidebar-toggle-btn .icon use,
.collapse-sidebar-link.sidebar-toggle-btn svg,
.collapse-sidebar-link.sidebar-toggle-btn svg use {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}
 
/* Hover — slightly lighter wine + tiny grow */
.collapse-sidebar-link.sidebar-toggle-btn:hover {
    background: #8f2456 !important;
    transform: scale(1.08) !important;
}
 
 
.header-toggle {
 display: none !important;
}
 
.frappe-control[data-fieldtype=Select] .control-input .select-icon.xs, .frappe-control[data-fieldtype=Select].form-group .select-icon.xs {
top: 1px !important
}
 
/* --------------------------------------------------------------------------
   8. SIDEBAR USER PROFILE (bottom) — fix hover contrast
   -------------------------------------------------------------------------- */
.body-sidebar-container.expanded .body-sidebar .dropdown-navbar-user:hover,
.body-sidebar-container.expanded .body-sidebar .sidebar-user-button:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: transparent !important;
}
.body-sidebar-container.expanded .body-sidebar .dropdown-navbar-user:hover,
.body-sidebar-container.expanded .body-sidebar .dropdown-navbar-user:hover *,
.body-sidebar-container.expanded .body-sidebar .sidebar-user-button:hover,
.body-sidebar-container.expanded .body-sidebar .sidebar-user-button:hover * {
    color: #7c1b49 !important;
}
 
.grid-remove-rows {
background: #7c1b49 !important;
}
 
.btn.btn-secondary:hover {
color: #fff !important;
}
 
 
/* --------------------------------------------------------------------------
   10. CHECKBOXES — Geri Care wine when checked (keeps white checkmark)
   Frappe uses appearance:none + a green (--ki-primary) gradient background;
   we override the whole background to keep the SVG check on solid wine.
   -------------------------------------------------------------------------- */
.checkbox input[type="checkbox"]:checked,
input.input-with-feedback[type="checkbox"]:checked {
    background:
        url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat 50% 50% / 57%,
        #7c1b49 !important;
    border-color: #7c1b49 !important;
}
 
/* --------------------------------------------------------------------------
   11. ICON PICKER FIELD — stop icon overlapping placeholder text
   -------------------------------------------------------------------------- */
.frappe-control[data-fieldtype="Icon"] .control-input input.form-control {
    padding-left: 35px !important;
}

.awesomebar-input-row {

  height: 65px !important;

  min-height: 65px !important;

  display: flex !important;

  align-items: center !important;

  padding: 0 8px !important;

  gap: 8px !important;

  box-sizing: border-box !important;

}
 
.awesomebar-input-row #navbar-search {

  flex: 1 1 auto !important;

  max-height: none !important;

  height: 40px !important;

  line-height: 40px !important;

  padding: 0 10px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

}
 
.awesomebar-input-row #navbar-search:focus {

  border: 1px solid #7c1b49 !important;

  box-shadow: 0 0 0 2px rgba(124, 27, 73, 0.15) !important;

}
 
.navbar-modal-wrapper .awesomebar-search-icon {

  display: flex !important;

  align-items: center !important;

  padding-left: 0 !important;

}
 
.modal-divider {

  top: 70px !important;

}
 
.sidebar-item-suffix .keyboard-shortcut {

  color: white !important;

}
 
.form-control:not([type="checkbox"]):not([type="radio"]):focus,

.input-with-feedback:not([type="checkbox"]):not([type="radio"]):focus,

.frappe-control input:not([type="checkbox"]):not([type="radio"]):focus,

.frappe-control select:focus,

.frappe-control textarea:focus,

.awesomplete > input:focus {

  border-color: transparent !important;

  box-shadow: none !important;

}
footer {
  display: none !important;
}
/* --------------------------------------------------------------------------
   13. LIST PAGING AREA — wine-tinted footer + active button
   -------------------------------------------------------------------------- */
.list-paging-area {
    background: #faf4f7 !important;
    border-top: 1px solid #7c1b49 !important;
}
 
/* Active paging button — wine */
.list-paging-area .btn-paging.btn-info,
.list-paging-area .btn-paging.btn-info:disabled {
    background-color: #7c1b49 !important;
    border-color: #7c1b49 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
.body-sidebar .sidebar-user-button .avatar-name-email.w-75 {
    width: calc(100% - 40px) !important;
}

.form-grid .grid-heading-row.with-filter .filter-row .col.search .form-control.input-xs {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 6px !important;
    line-height: 24px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
 
.form-grid .grid-heading-row.with-filter .filter-row .col.search {
    padding: 4px 8px !important;
    right: 2px !important;
}
.grid-remove-all-rows {
background: #7c1b49 !important;
}
 
.multiselect-list .status-text {
    top: 8px !important;
}
.ellipsis {
max-width: stretch !important;
}
.editor-js-container{
    margin-left: 15px !important;
    margin-right: 15px !important;
}
/* --------------------------------------------------------------------------

   14. CONFIGURE COLUMNS DIALOG — row alignment & compact width input

   Neutralizes hardcoded per-column padding-top/margin-top; flex-centers rows.

   -------------------------------------------------------------------------- */

.control-input.fields_order {

  display: flex !important;

  align-items: center !important;

  height: 32px !important;

  margin-bottom: 6px !important;

}

.control-input.fields_order .row {

  flex: 1 !important;

  align-items: center !important;

  margin: 0 !important;

  width: 100% !important;

}

.control-input.fields_order .row > [class*="col-"] {

  padding-top: 0 !important;

  margin-top: 0 !important;

  display: flex !important;

  align-items: center !important;

}

.control-input.fields_order .col-1 { justify-content: center !important; }

.control-input.fields_order .col-5 { justify-content: flex-start !important; }

.control-input.fields_order .col-2 { justify-content: center !important; }

.control-input.fields_order input.column-width {

  margin: 0 auto !important;

  height: 24px !important;

  min-height: 24px !important;

  max-height: 24px !important;

  line-height: 24px !important;

  padding: 0 4px !important;

  max-width: 35px !important;

  box-sizing: border-box !important;

}

.control-input.fields_order .sticky-column { margin: 0 !important; }

.recent-item notification-item {
    background: #c98caa !important;
}

/* --------------------------------------------------------------------------
   15. LINK FIELD ACTION BUTTONS (clear × / open →) — clean icons, no boxes
   Frappe absolutely-positions .link-btn over the input's right edge with
   grey boxed buttons; strip the boxes, wine-tint the icons, remove the gap.
   -------------------------------------------------------------------------- */
.control-input .link-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.control-input .link-btn .btn-clear,
.control-input .link-btn .btn-open {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}
.control-input .link-btn .btn-clear:hover,
.control-input .link-btn .btn-open:hover {
  background-color: rgba(124, 27, 73, 0.1) !important;
}
.control-input .link-btn .icon,
.control-input .link-btn .icon use {
  color: #7c1b49 !important;
  stroke: #7c1b49 !important;
}
.control-input .awesomplete input.form-control {
  padding-right: 58px !important;
}

.awesomplete > [role="listbox"] {   
    z-index: 10 !important; 
}

/* ============================================
   Always-visible horizontal scrollbars
   (form tab strip + child-table grids)
   ============================================ */
 
/* --- Tab strip --- */
.nav.form-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav.form-tabs::-webkit-scrollbar {
  display: none;
}
.nav.form-tabs .nav-item {
  flex-shrink: 0;
}
 
/* --- Child-table grids --- */
.form-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.form-grid::-webkit-scrollbar {
  display: none;
}
 
/* --- Shared fake-scrollbar styling --- */
.gc-fake-sb,
.gc-grid-sb {
  height: 8px;
  background: #f7eef2;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.gc-fake-sb {
  margin: 2px 0 0;
}
.gc-grid-sb {
  margin: 2px 0 4px;
}
.gc-fake-sb-thumb,
.gc-grid-sb-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 40px;
  background: #7c1b49;
  border-radius: 4px;
}
.gc-fake-sb-thumb:hover,
.gc-grid-sb-thumb:hover {
  background: #5f1438;
}