/* Totem CRM — light, modern overlay (Pipedrive / HubSpot style).
   Green is an accent, not a wash. Loaded last. */

:root {
  --mint-50: #f3f6f4;
  --green-light: #e7f0ea;
  --green-dark: #1e4841;
  --gray-30: #6b7271;
  --ink: #1f2a28;
  --paper: #f6f7f6;
  --line: #eceeed;
  --font: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 10px;
}

html,
body,
.font-sans {
  font-family: var(--font) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--paper);
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.bg-paper {
  background-color: var(--paper) !important;
}

.text-base-content {
  color: var(--ink) !important;
}

input,
textarea,
select,
button,
optgroup {
  font-family: inherit;
  letter-spacing: 0;
}

/* ---------- Type: one size for chrome, not 12px/600 ---------- */
.tw-label-12,
.tw-label-10,
.tw-cta-sm,
.tw-th-cell,
.tw-td,
.tw-th {
  font-family: var(--font) !important;
  letter-spacing: 0 !important;
}

.tw-label-12 {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

.tw-page-title {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}

/* ---------- Buttons ---------- */
.tw-btn,
.tw-btn-primary,
.tw-btn-outline,
.tw-btn-danger,
.tw-btn-secondary {
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
}

.tw-btn-primary {
  background-color: var(--green-dark);
  color: #fff;
}

.tw-btn-primary:hover {
  background-color: #173833;
  opacity: 1;
}

.tw-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease;
}

.tw-btn-secondary:hover {
  background: var(--mint-50);
  border-color: var(--line);
  color: var(--ink);
}

.tw-btn-outline:hover {
  background: var(--mint-50);
  border-color: var(--line);
}

/* ---------- Fields ---------- */
.tw-label {
  font-family: var(--font);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--gray-30);
}

.tw-input,
.tw-select,
.tw-textarea,
.tw-totem-dropdown-btn {
  border-radius: var(--radius-sm) !important;
  border-color: var(--line) !important;
  background-color: #fff !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ink);
}

.tw-totem-dropdown-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.tw-input:focus,
.tw-select:focus,
.tw-textarea:focus,
.tw-totem-dropdown-btn:focus,
.tw-totem-dropdown-btn:focus-visible {
  outline: none !important;
  border-color: var(--green-dark) !important;
  box-shadow: 0 0 0 3px rgba(30, 72, 65, 0.12);
  --tw-ring-color: transparent;
}

.focus\:border-yellow-300:focus,
.focus\:ring-yellow-400:focus,
.focus\:border-yellow-400:focus {
  border-color: var(--green-dark) !important;
  --tw-ring-color: rgba(30, 72, 65, 0.12) !important;
}

/* ---------- Sidebar + topbar: white chrome ---------- */
aside.bg-mint-50 {
  background: #fff !important;
  border-right: 1px solid var(--line);
  color: #5c6564;
}

.tw-topbar {
  box-shadow: none;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.nav-item {
  transition: background-color .15s ease, color .15s ease;
  border-radius: 8px;
}

.nav-item:hover {
  background: var(--mint-50);
  color: var(--ink);
}

.nav-item:hover .nav-icon--inactive,
.nav-item:hover .nav-label--inactive {
  color: var(--ink);
}

.nav-item--active {
  background: var(--green-light) !important;
}

aside .header-pill {
  border-color: var(--line);
  background: #fff;
}

#quickAddButton {
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-width: 1px;
  border-radius: var(--radius-sm);
}

/* ---------- Filter / views bar (was mint + 12px bold) ---------- */
.tw-toolbar,
.bg-\[\#ECF4E9\].rounded-\[8px\] {
  background: #fff !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}

.tw-segmented {
  background: transparent !important;
  gap: 4px !important;
}

.tw-toolbar,
.tw-toolbar a,
.tw-toolbar button,
.tw-toolbar span,
.tw-segmented,
.tw-segmented a,
.tw-segmented button {
  font-family: var(--font) !important;
  letter-spacing: 0 !important;
}

.tw-toolbar a,
.tw-toolbar button,
.tw-toolbar span,
.tw-segmented a,
.tw-segmented button,
.tw-toolbar .tw-label-12,
.tw-segmented .tw-label-12 {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

.tw-segmented .is-active,
.tw-btn-filter-active {
  background: var(--green-light) !important;
  color: var(--green-dark) !important;
  font-weight: 600 !important;
}

.tw-btn-filter-active:hover {
  background: #dce8e2 !important;
  color: var(--green-dark) !important;
}

#rowsPerPageBtn,
#rowsPerPageSelect {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#rowsPerPageBtn {
  width: 84px;
  justify-content: space-between;
}

/* Login keeps a light mint wash; app chrome stays white */
main.h-screen.bg-mint-50,
footer.bg-mint-50,
.h-screen.flex.flex-col.justify-center.items-center.bg-mint-50 {
  background-color: #eef3ee !important;
}

/* ---------- Cards ---------- */
.tw-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}

.auth-card {
  height: auto !important;
  min-height: 0;
  box-shadow: 0 8px 32px rgba(31, 42, 40, 0.08);
}

.rounded.shadow-md,
.rounded.shadow-sm {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--line);
  box-shadow: none !important;
}

.tw-form-shell {
  background: var(--paper) !important;
}

/* Soft surfaces instead of mint / lime */
thead.bg-gray-50,
th.bg-gray-50,
.hover\:bg-gray-50:hover,
.hover\:bg-\[\#ECF4E9\]:hover {
  background-color: var(--mint-50) !important;
}

.hover\:bg-\[\#BBF49C\]:hover,
.hover\:bg-\[\#BBF49C\]\/80:hover,
.hover\:bg-\[\#BBF49C\]\/60:hover {
  background-color: var(--mint-50) !important;
}

#scorecardTable thead,
#scorecardTable thead th {
  background-color: #f7f8f7 !important;
  color: var(--gray-30);
  font-weight: 500;
}

/* ---------- Tables ---------- */
.tw-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border-color: var(--line);
  background: #fff;
}

.tw-table thead,
.twc-green-head {
  background-color: #f7f8f7 !important;
}

.tw-table tbody tr {
  transition: background-color .12s ease;
}

.tw-table tbody tr:hover {
  background-color: var(--mint-50);
}

.tw-dropdown-item:hover,
.tw-dropdown-item-active {
  background: var(--mint-50) !important;
}

/* ---------- Filter panel + modals ---------- */
#filterPanel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(31, 42, 40, 0.12);
}

#filterPanel > .flex.shrink-0 {
  background: #fff !important;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

#filterPanel > .flex.shrink-0 .tw-label-12 {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: var(--ink) !important;
}

.tw-modal {
  font-family: var(--font);
}

.bg-\[\#ECF4E9\] {
  background-color: #f7f8f7 !important;
}

/* ---------- Third-party widgets ---------- */
.select2-container,
.select2-dropdown,
.select2-search--dropdown .select2-search__field,
.select2-results,
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.flatpickr-calendar,
.tagify {
  font-family: var(--font) !important;
}

.select2-container .select2-selection--single {
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  border-color: var(--line) !important;
  background: #fff !important;
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important;
  line-height: 30px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
  background-color: var(--green-light) !important;
  color: var(--ink) !important;
}

.select2-dropdown {
  border-color: var(--line) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.ui-autocomplete {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  padding: 4px !important;
}

.ui-menu .ui-menu-item-wrapper {
  border-radius: 6px;
  font-size: 13px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: var(--green-light) !important;
  border-color: var(--green-light) !important;
  color: var(--ink) !important;
}

.flatpickr-calendar {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px rgba(31, 42, 40, 0.1) !important;
  font-size: 13px;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
}

.flatpickr-day:hover {
  background: var(--green-light) !important;
  border-color: var(--green-light) !important;
}

.tagify {
  border-radius: var(--radius-sm) !important;
  border-color: var(--line) !important;
  --tag-bg: var(--mint-50);
  --tag-text-color: var(--ink);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #d5ddd8 transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: #d5ddd8;
  border-radius: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

#resultsDealsCard > .border-b,
#resultsOffersCard > .border-b {
  background: #f7f8f7;
}

.tw-td-compact a,
.tw-table a {
  color: var(--ink);
}

.tw-td-compact a:hover,
.tw-table a:hover {
  color: var(--green-dark);
}

a.tw-link-muted,
button.tw-link-muted {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}