/* INDA HOUSE Portal Dashboard — Extracted Styles */

/* Add Vehicle / Log Expense / Works modals — Bento / inset-grouped field chrome */
#add-vehicle-modal .inda-bento-field,
#add-expense-modal .inda-bento-field,
#view-expense-modal .inda-bento-field,
#add-work-modal .inda-bento-field {
  border-radius: 0.75rem;
  border: 1px solid rgb(243 244 246);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dark #add-vehicle-modal .inda-bento-field,
.dark #add-expense-modal .inda-bento-field,
.dark #view-expense-modal .inda-bento-field,
.dark #add-work-modal .inda-bento-field {
  border-color: rgb(38 38 38);
  background: rgb(20 20 20);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
#add-vehicle-modal .inda-bento-field:focus,
#add-expense-modal .inda-bento-field:focus,
#view-expense-modal .inda-bento-field:focus,
#add-work-modal .inda-bento-field:focus {
  border-color: rgb(229 231 235);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.dark #add-vehicle-modal .inda-bento-field:focus,
.dark #add-expense-modal .inda-bento-field:focus,
.dark #view-expense-modal .inda-bento-field:focus,
.dark #add-work-modal .inda-bento-field:focus {
  border-color: rgb(64 64 64);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.06);
}
#add-vehicle-modal button.inda-bento-field:focus-visible,
#add-expense-modal button.inda-bento-field:focus-visible,
#view-expense-modal button.inda-bento-field:focus-visible,
#add-work-modal button.inda-bento-field:focus-visible {
  border-color: rgb(229 231 235);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.dark #add-vehicle-modal button.inda-bento-field:focus-visible,
.dark #add-expense-modal button.inda-bento-field:focus-visible,
.dark #view-expense-modal button.inda-bento-field:focus-visible,
.dark #add-work-modal button.inda-bento-field:focus-visible {
  border-color: rgb(64 64 64);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* Property modal — iOS Safari: momentum scroll inside overlay; reduce scroll chaining */
#add-property-modal .inda-modal-body-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Premium toast (portal + pages using #toast-container) */
.toast-premium {
  pointer-events: auto;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  z-index: 10000;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  animation: toast-premium-in 0.35s ease;
}
html:not(.dark) .toast-premium {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(183, 110, 121, 0.35);
  color: #111827;
}
.dark .toast-premium {
  background: rgba(10, 10, 10, 0.97);
  border-color: rgba(183, 110, 121, 0.45);
  color: #e5e7eb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.toast-premium.toast-premium--error {
  border-color: rgba(183, 110, 121, 0.55) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}
.dark .toast-premium.toast-premium--error {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.toast-premium.toast-premium--success {
  border-color: rgba(34, 197, 94, 0.5) !important;
}
html:not(.dark) .toast-premium.toast-premium--success {
  color: #166534;
}
.dark .toast-premium.toast-premium--success {
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #bbf7d0;
}
@keyframes toast-premium-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }
@keyframes inda-spin {
  to { transform: rotate(360deg); }
}
.inda-spinner {
  animation: inda-spin 0.85s linear infinite;
  transform-origin: center;
  display: inline-block;
  vertical-align: middle;
}
/* Native date/datetime popovers follow page theme (Safari/WebKit) */
html:not(.dark) input[type="date"],
html:not(.dark) input[type="datetime-local"],
html:not(.dark) input[type="month"],
html:not(.dark) input[type="week"] {
  color-scheme: light;
}
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="month"],
html.dark input[type="week"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* iPad / One-Page Optimization */
#dashboard-spaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}
#space-grouped-assets-container {
  gap: 1.25rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#space-grouped-assets-container::-webkit-scrollbar {
  display: none;
}
/* Horizontal carousels (dashboard vehicles, etc.) */
.inda-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.inda-hide-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Alias for Tailwind-friendly class names in markup */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.font-display {
  letter-spacing: -0.02em;
}
/* iPad Pro / A4 Optimization */
.vault-card {
  padding: 1.25rem !important;
}
#vault-global-search {
  margin-bottom: 1.5rem !important;
}

/* Property & Tenancy modal — primary lease contract actions */
#GLOBAL-DANGER-BTN {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  transition: all 0.2s ease !important;
  visibility: visible !important;
}
#GLOBAL-DANGER-BTN:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
.dark #GLOBAL-DANGER-BTN {
  background-color: transparent !important;
  border-color: #374151 !important;
  color: #9ca3af !important;
}
.dark #GLOBAL-DANGER-BTN:hover {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
  color: #f9fafb !important;
}

@media (min-width: 640px) {
  #GLOBAL-DANGER-BTN {
    min-height: 0 !important;
    padding: 8px 16px !important;
  }
}

/* Vehicle edit modal — attachment dropzone */
.vehicle-history-dropzone.vehicle-history-dropzone-active {
  border-color: #b76e79 !important;
  background-color: rgba(183, 110, 121, 0.07) !important;
}
.dark .vehicle-history-dropzone.vehicle-history-dropzone-active {
  border-color: #c48b96 !important;
  background-color: rgba(183, 110, 121, 0.12) !important;
}

/* Brand mark — INDA-HOUSE.svg (monochrome; sync with css/shared-styles.css) */
a.brand-logo-link,
.brand-logo-link {
  display: inline-flex !important;
  align-items: center;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: inherit;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
  padding: 0 !important;
  margin: 0;
  border-radius: 0;
}
.brand-logo-link:focus:not(:focus-visible) {
  outline: none;
}
.brand-logo-link:focus-visible {
  outline: 2px solid rgba(17, 24, 39, 0.28);
  outline-offset: 4px;
  border-radius: 0;
}
/* Universal wordmark — Quiet Luxury scale (header ~15% under legacy 28px) */
.brand-logo-img,
.logo-image {
  max-height: 24px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  vertical-align: middle;
  display: block;
  border: none !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  mix-blend-mode: normal;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  -webkit-user-drag: none;
  /* SVG wordmark: crisp scaling; flex-shrink avoids squish in toolbars */
  image-rendering: auto;
  flex-shrink: 0;
  align-self: center;
}
footer .brand-logo-img,
footer .logo-image,
footer img[alt="INDA HOUSE Logo"] {
  max-height: 21px;
}
#document-preview-target .brand-logo-img,
#document-preview-target .logo-image,
.doc-paper .brand-logo-img,
.doc-paper .logo-image,
.a4-preview .brand-logo-img,
.a4-preview .logo-image {
  max-height: 22px;
}
html.dark .brand-logo-img,
html.dark .logo-image {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}
.brand-logo-img--on-dark,
.logo-image--on-dark {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

/* Vault — minimal search field (no browser chrome) */
.vault-doc-search-input {
  -webkit-appearance: none;
  appearance: none;
}
.vault-doc-search-input::-webkit-search-decoration,
.vault-doc-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Native <select> — unified INDA styling (closed control + WebKit popup color-scheme) */
select.inda-form-select,
select.inda-bento-field,
select.inda-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  accent-color: #111827;
  color-scheme: light;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}
html.dark select.inda-form-select,
html.dark select.inda-bento-field,
html.dark select.inda-select {
  color-scheme: dark;
  accent-color: #e5e7eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
select.inda-form-select:focus,
select.inda-bento-field:focus,
select.inda-select:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.22);
}
html.dark select.inda-form-select:focus,
html.dark select.inda-bento-field:focus,
html.dark select.inda-select:focus {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Compact selects (e.g. currency pill) — tighter chevron padding */
select.inda-select--compact {
  padding-right: 1.75rem;
  background-position: right 0.35rem center;
  background-size: 0.75rem 0.75rem;
}

/* Magic Plus — simplified modals (secondary fields hidden) */
#add-property-modal.inda-magic-simplified .magic-plus-secondary,
#add-property-modal.inda-magic-simplified #prop-rental-fields,
#add-property-modal.inda-magic-simplified #GLOBAL-DANGER-BTN {
  display: none !important;
}
#add-vehicle-modal.inda-magic-simplified #vehicle-magic-secondary-blocks {
  display: none !important;
}
#asset-create-view.inda-magic-simplified .magic-plus-secondary {
  display: none !important;
}
#timeline-add-task-modal.inda-magic-simplified .magic-plus-secondary {
  display: none !important;
}