/* main.css — clean baseline for REPortal
   Includes: header + desktop nav + mobile hamburger dropdown + left sidebar + full-width content
   Ensures: sidebar stacks above content on small screens
*/

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f5f5f5;
  color: #111827;
  overflow-x: auto; /* prevent accidental horizontal scroll */
}

/* ---------- Header ---------- */
header {
  background: #1f2937;
  color: #ffffff;
  padding: 0.75rem 1rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative; /* needed for mobile dropdown positioning */
  width: 100%;
}
/* Right-aligned container */
.header-right {
  margin-left: auto; /* THIS pushes menu + user icon right */
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Ensure HTML hidden attribute always wins */
[hidden] { display: none !important; }

#ac-portal-menu {
  right: auto;
  bottom: auto;
  max-height: 280px;
  overflow: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.logo {
  height: 40px;
  width: auto;
  display: block;
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Desktop nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.main-nav a {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 500;
  padding: 0.35rem 0.25rem;
  border-radius: 10px;
}

.main-nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Hamburger button (hidden on desktop) */
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Layout (Sidebar + Content) ---------- */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr); /* sidebar + content (minmax prevents overflow) */
  width: 100%;
  min-height: calc(100vh - 64px); /* header height approx */
}
.layout--nosidebar {
  grid-template-columns: 1fr;
}

.layout--nosidebar > * {
  grid-column: 1 / -1;
}

/* Sidebar */
.sidebar {
  background: #ffffff;
  padding: 1.25rem 1rem;
  border-right: 1px solid #e5e7eb;

  /* Rounded right edge (since sidebar is flush left) */
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  /* Optional subtle separation */
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.04);
}

.sidebar-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #111827;
}

.sidebar-link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  color: #111827;
  text-decoration: none;
}

.sidebar-link:hover {
  background: #f3f4f6;
}

/* Content takes all remaining space with 10px padding */
.content {
  background: #f5f5f5;
  padding: 10px;
  min-width: 0; /* critical in grid layouts */
}
.content-full {
  padding: 20px;
  margin: 0 auto;
  width: 100%;
}

.content-inner {
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
}

.page {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
}

/* Allow specific pages to use full width */
.page--wide{
  max-width: 100% !important;
  margin: 0;
}

/* ---------- Showing form helpers ---------- */
.showing-context-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.showing-context-help{
  margin: 0;
}

.showing-inline-hint{
  margin-bottom: 10px;
}

@media (max-width: 720px){
  .showing-context-grid{
    grid-template-columns: 1fr;
  }
}

/* ---------- User Menu ---------- */
.user-menu {
  position: relative;
  margin-left: auto; /* pushes it to the far right */
  display: flex;
  align-items: center;
}

.user-avatar,
.user-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #374151;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.user-avatar-btn {
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.workspace-chip:hover .user-avatar,
.workspace-chip:hover .user-avatar-btn {
  background: #4b5563;
}
.user-dropdown {
  position: fixed;
  top: 64px;
  right: 16px;
  width: min(320px, calc(100vw - 24px));
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  z-index: 4000;
}

.user-dropdown__section {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-dropdown__label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px 4px;
}

.user-dropdown__current {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-weight: 700;
  color: #111827;
}

.user-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  color: #111827;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.user-dropdown__item:hover {
  background: #f3f4f6;
  text-decoration: none;
}

.user-dropdown__item.is-active {
  background: #f9fafb;
  border-color: #e5e7eb;
  font-weight: 600;
}

.user-dropdown__item--danger {
  color: #b91c1c;
}

.user-dropdown__item--danger:hover {
  background: #fef2f2;
}

.user-dropdown__item--simple{
  justify-content: flex-start;
}

.user-dropdown__item--simple .icon{
  flex: 0 0 auto;
}
.workspace-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 6px 4px 12px;

  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;

  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

  appearance: none;
  -webkit-appearance: none;
}

.workspace-chip:hover {
  background: rgba(255, 255, 255, 0.14);
}

.workspace-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.workspace-chip__name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
}
.account-inline{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.account-inline__name{
  font-weight:700;
  color:#111827;
}

.account-inline__email{
  margin:0;
  font-size:.92rem;
}

.workspace-current-row{
  display:block;
}

.user-dropdown__current--workspace{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;

  background:#dbeafe;
  border-color:#bfdbfe;
  color:#1e3a8a;
}

.workspace-current-row__name{
  min-width:0;
  flex:1 1 auto;
}

.tag--workspace-role{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.field-readonly{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 14px;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:#f8fafc; /* slightly muted vs input */
}

.field-readonly-value{
  font-size:15px;
  color:#111827;
  font-weight:500;
}

@media (max-width: 900px) {
  .workspace-chip {
    padding-left: 8px;
    gap: 8px;
  }

  .workspace-chip__name {
    max-width: 110px;
    font-size: 0.88rem;
  }
}

/* =====================================================
   CRM Settings
   ===================================================== */

.crm-settings-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.crm-settings-nav__title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6b7280;
  padding:4px 8px 8px;
}

.crm-settings-nav__link{
  display:flex;
  align-items:center;
  gap:10px;
}

.crm-settings-nav__link.is-active,
.sidebar-link.crm-settings-nav__link.is-active{
  background:#eaf2ff;
  color:#111827;
  font-weight:700;
  border-radius:10px;
}

.settings-overview-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.settings-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.settings-card{
  height:100%;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.settings-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-color:#d1d5db;
}

.settings-card__icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  color:#111827;
}

.settings-card__body{
  flex:1 1 auto;
  min-width:0;
}

.settings-card__title{
  font-weight:800;
  color:#111827;
  margin-bottom:4px;
}

.settings-card__desc{
  color:#6b7280;
  font-size:.94rem;
  line-height:1.45;
}

.settings-card__cta{
  flex:0 0 auto;
  align-self:flex-start;
}

.settings-placeholder{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.settings-placeholder__title{
  font-weight:800;
  color:#111827;
}

.settings-bullets{
  margin:0;
  padding-left:18px;
  color:#111827;
}

.settings-bullets li + li{
  margin-top:6px;
}

.settings-links-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.settings-mini-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#111827;
  text-decoration:none;
}

.settings-mini-link:hover{
  background:#f9fafb;
  text-decoration:none;
}

.settings-mini-link.is-active{
  background:#eaf2ff;
  border-color:#bfdbfe;
  font-weight:700;
}

@media (max-width: 1100px){
  .settings-overview-grid,
  .settings-links-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .settings-overview-grid,
  .settings-links-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- List Widget (tables) ---------- */
.list-widget,
.list-table-wrap,
.list-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* lets columns expand naturally */
}

/* List widget: match your actual markup */
.list-widget .table-wrap{
  width: 100%;
  overflow-x: auto;
}

.list-widget .table{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.list-widget .table th,
.list-widget .table td{
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
}


.list-table th,
.list-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
}

.list-table th {
  font-weight: 700;
  color: #111827;
}

/* clickable row affordance */
.list-table tr.is-clickable { cursor: pointer; }
.list-table tr.is-clickable:hover { filter: brightness(0.98); }

/* Keep the table usable if it gets wide */
.list-table-wrap {
  overflow-x: auto;
}

/* Optional: make header controls align nicely */
.list-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.list-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 7px;

  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  align-items: center;
  justify-content: center;

  background: #f1f5f9;       /* soft slate */
  color: #334155;            /* slate text */
  border: 1px solid #e2e8f0; /* subtle border */
}

:root{
  --opp-buy-bg: rgba(37, 99, 235, 0.14);
  --opp-buy-fg: #1d4ed8;

  --opp-sell-bg: rgba(22, 163, 74, 0.14);
  --opp-sell-fg: #166534;

  --opp-rent-bg: rgba(245, 158, 11, 0.16);
  --opp-rent-fg: #92400e;

  --opp-rentout-bg: rgba(124, 58, 237, 0.14);
  --opp-rentout-fg: #5b21b6;
}

.pill--buy{ background:var(--opp-buy-bg); color:var(--opp-buy-fg); }
.pill--sell{ background:var(--opp-sell-bg); color:var(--opp-sell-fg); }
.pill--rent{ background:var(--opp-rent-bg); color:var(--opp-rent-fg); }
.pill--rentout{ background:var(--opp-rentout-bg); color:var(--opp-rentout-fg); }


@keyframes danger-pulse {
  0% {
    background-color: rgba(239, 68, 68, 0.18);
  }
  50% {
    background-color: rgba(239, 68, 68, 0.35);
  }
  100% {
    background-color: rgba(239, 68, 68, 0.18);
  }
}

.tag--flash {
  animation: danger-pulse 1.3s ease-in-out infinite;
}
/* OK: more than 30 days */
.tag--ok{
  background: rgba(22, 163, 74, 0.15);   /* green */
  color: #166534;
}

/* Warning: less than 30 days */
.tag--warning{
  background: rgba(245, 158, 11, 0.18);  /* orange */
  color: #92400e;
}

/* Danger: overdue or today */
.tag--danger{
  background: rgba(239, 68, 68, 0.18);   /* red */
  color: #991b1b;
}
The
.muted { color: #6b7280; }

/* Default pages stay centered/narrow */
.page{
  max-width: 920px;
  margin: 0 auto;
  padding: 1.25rem;
}

/* Wide pages (like boards) use full width */
.page.page--wide{
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem 0;
}

.page h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.muted {
  margin: 0.25rem 0 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  padding: 1.25rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Normalize form controls */
.form input[type="text"],
.form input[type="number"],
.form input[type="date"],
.form select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 16px;
  background: #fff;
  color: #111827;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Apply same styling as other form inputs */

/* Remove number spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}


/* One true definition */
.board-cols{
  display: flex;
  gap: 12px;
  align-items: stretch;

  flex-wrap: nowrap;
  overflow-x: auto;
}
.board-col__head { display:flex; justify-content:space-between; padding:12px 12px 8px; border-bottom:1px solid var(--border); }
.board-col__body { padding:0px; min-height:100px; }
.board-card { width: 100%; background:#fff; border:1px solid var(--border); border-radius:6px; padding:8px; margin-bottom:8px; cursor:pointer;}
.board-card.dragging { opacity:.6; }
.board-empty { padding:14px 8px; }
.board-col__title{
  font-size:clamp(11px, 3.5cqw, 14px);      /* smaller header text */
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.board-card__actions .remove-icon{
  appearance:none;
  background:transparent;
  border:1px;

  width:16px;
  height:16px;
  position:relative;
  cursor:pointer;
  opacity:.4;
}

.board-card__actions .remove-icon:hover{
  opacity:.8;
}

.board-card__actions .remove-icon::before,
.board-card__actions .remove-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:2px;
  background:#111;
  border-radius:2px;
}

.board-card__actions .remove-icon::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.board-card__actions .remove-icon::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.board-col__meta{
  font-size:11px;
}

/* =====================================================
   Prospects board — keep your current widths
   Goal: aligned cards + nicer borders
   ===================================================== */

/* Auto-fit columns with a minimum width */
.board-col{
  flex: 1 1 120px;     /* grow, don’t shrink below 280px */
  min-width: 100px;
  max-width: 420px;   /* optional cap so columns don’t get huge */
  transition: width 0.15s ease;
  container-type: inline-size;
}
.board-col__body{ container-type: inline-size; }

.board-title-wrap{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.board-title-meta{
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}

/* Force real overflow by preventing columns from shrinking too much */
.page--wide .board-col{
  flex: 1 1 120px !important;  /* fixed column width so overflow happens */
  min-width: 100px !important;
  max-width: 280px !important;
}

/* Optional: slightly narrower on very small screens */
@media (max-width: 600px){
  .page--wide .board-col{
    flex-basis: 240px !important;
    min-width: 100px !important;
    max-width: 240px !important;
  }
}

/* IMPORTANT: same padding on header and body = perfect alignment */
.board-col__head{
  box-sizing: border-box;
  padding: 10px 12px;           /* <-- choose one value and reuse below */
  border-radius: 10px;          /* visual polish */
}

.board-col__body{
  box-sizing: border-box;
  padding: 0px 0px;           /* <-- same as header */
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* spacing between cards */
}

/* Card styling */
.board-card{
  box-sizing: border-box;
  width: 100%;                  /* fills exactly under the header */
  margin: 0;                    /* avoid shifting */
  background: #fff;
  border: 1px solid #e5e7eb;    /* card border */
  border-radius: 5px;          /* rounded corners */
  padding: 3px 3px;           /* slightly roomier */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font-size: clamp(11px, 3.5cqw, 14px);
  line-height: 1.35;
    min-height: 50px;
}

.board-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

/* Optional: make the empty state align visually too */
.board-col__body > .muted,
.board-empty{
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.board-card__header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.board-card__title {
  flex: 1 1 auto;     /* 👈 allow shrinking, not forced wrap */
  min-width: 0;       /* 👈 critical for flex overflow logic */
  font-weight: 600;
  line-height: 1.25;
}

/* Right side container for (type + revenue) */
.board-card__header-right{
  margin-left: auto;          /* pushes BOTH tags to the right */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Keep header tags neat (but don't auto-push each tag) */
.board-card__header-right .tag{
  white-space: nowrap;
  width: max-content;
}

/* Revenue pill */
.tag--revenue{
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  border: 1px solid rgba(17, 24, 39, 0.14);
}


/* ===== Board: opportunity type tag ===== */
.board-card__tags{
  display:flex;
  gap:6px;
  margin-bottom:4px;
}

/* Make tags slightly smaller in cards than elsewhere */
.board-card .tag{
  font-size: 10px;
  line-height: 16px;
  padding: 1px 6px;
  font-weight: 700;
}

/* Color variants by opportunity type */
.board-card .tag--buy{
  background: rgba(37, 99, 235, 0.14);
  color: #1d4ed8;
}

.board-card .tag--sell{
  background: rgba(22, 163, 74, 0.14);
  color: #166534;
}

.board-card .tag--rent{
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
}

.board-card .tag--rentout{
  background: rgba(124, 58, 237, 0.14);
  color: #5b21b6;
}


.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: #111827;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.login-card input[type="password"]{
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #ffffff;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

/* --- Make ALL inputs in .field match (date/time/number were using browser defaults) --- */
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.list-widget .list-search{
  width: 100%;
  display: block;
  box-sizing: border-box;

  padding: 0.7rem 0.8rem;
  height: 48px;
  line-height: 1.2;
  font-size: 1rem;
  font-family: inherit;

  color: #111827;
  background-color: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 12px;

  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* List search: add magnifying glass icon (reliable, Safari-proof) */
.list-widget .list-search{
  padding-left: 2.6rem; /* room for icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.35-4.35M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 1.15rem;
}

/* Keep your focus style consistent */
.field input[type="date"]:focus,
.field input[type="time"]:focus,
.field input[type="number"]:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* Optional: make date/time icons less aggressive on Safari */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{
  opacity: 0.7;
}

/* Remove number spinners only inside fields (nice + consistent) */
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="number"]{
  -moz-appearance: textfield;
}
/* ---------- Date + Time (datetime-local) ---------- */
.field input[type="datetime-local"]{
  width: 100%;
  display: block;
  box-sizing: border-box;

  height: 48px;
  padding: 0.7rem 0.8rem;
  line-height: 1.2;
  font-size: 1rem;
  font-family: inherit;

  color: #111827;
  background-color: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 12px;

  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.field input[type="datetime-local"]:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* If your select is inside .field-row, force it to expand */
.field-row {
  align-items: stretch; /* not baseline */
}

.field-row select {
  flex: 1 1 auto;
  min-width: 0;
}

.field input:focus,
.list-widget .list-search:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

.field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
/* ---------- Selects inside .field (match inputs exactly) ---------- */
.field select {
  width: 100%;
  display: block;
  box-sizing: border-box;

  /* match input sizing */
  padding: 0.7rem 2.6rem 0.7rem 0.8rem;
  height: 48px;              /* matches your input visual height */
  line-height: 1.2;
  font-size: 1rem;
  font-family: inherit;

  color: #111827;
  background-color: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 12px;

  outline: none;
  cursor: pointer;

  /* remove native look */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.field select:hover {
  border-color: #9ca3af;
}

.field select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* optional: placeholder option color */
.field select option[value=""] {
  color: #9ca3af;
}

.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--card, #fff);
  font: inherit;
  resize: vertical;
}

.hint {
  color: #6b7280;
  font-size: 0.9rem;
}

.divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.25rem 0;
}

/* ---------- “Pill” Checkbox Group ---------- */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  cursor: pointer;
  user-select: none;
}

.pill input {
  width: 18px;
  height: 18px;
}

.pill span {
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
}

/* Make checked pills feel “selected” */
.pill:has(input:checked) {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.55);
}

.pill.pill--buy{ background:var(--opp-buy-bg); color:var(--opp-buy-fg); }
.pill.pill--sell{ background:var(--opp-sell-bg); color:var(--opp-sell-fg); }
.pill.pill--rent{ background:var(--opp-rent-bg); color:var(--opp-rent-fg); }
.pill.pill--rentout{ background:var(--opp-rentout-bg); color:var(--opp-rentout-fg); }

/* ---------- Actions ---------- */
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: #2563eb;
  color: #ffffff;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-ghost {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}

.btn-ghost:hover {
  background: #f9fafb;
}

/* Red outline, white background */
.btn-danger-outline{
  background:#ffffff;
  color:#b91c1c;
  border:1px solid #ef4444;
}

.btn-danger-outline:hover{
  background:#fef2f2;
}

.btn-danger-outline:focus-visible{
  outline:3px solid rgba(239,68,68,.25);
  outline-offset:2px;
}
/* ---------- Global Select (Dropdown) Styling ---------- */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;

  font-size: 0.95rem;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 12px;

  cursor: pointer;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

/* Hover */
select:hover {
  border-color: #9ca3af;
}

/* Focus */
select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Disabled */
select:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Placeholder-like option */
select option[value=""] {
  color: #9ca3af;
}

.suggest{
  position: absolute;          /* <-- key change */
  top: calc(100% + 6px);
  left: 0;
  right: 0;

  margin-top: 0;               /* don't push layout */
  z-index: 5000;               /* above dialog body */

  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  overflow: hidden;

  max-height: 280px;
  overflow: auto;
}


.suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.suggest-item:hover {
  background: #f3f4f6;
}

.suggest-name {
  font-weight: 600;
}

.suggest-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Bulletproof select styling (Safari-proof) ---------- */
.select-wrap {
  position: relative;
  width: 100%;
}

.select-wrap select {
  width: 100% !important;
  display: block;
  box-sizing: border-box;

  height: 48px;
  padding: 0.7rem 3rem 0.7rem 0.8rem;

  font: inherit;
  font-size: 1rem;
  line-height: 1.2;

  color: #111827;
  background: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 12px;

  outline: none;
  cursor: pointer;

  /* kill native select look */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* ensure Safari doesn't apply weird inner styles */
  background-image: none !important;
}

/* draw arrow ourselves */
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;

  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.select-wrap select:hover {
  border-color: #9ca3af;
}

.select-wrap select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

/* ===== DEBUG: if you don't see a pink dropdown, CSS isn't applying ===== */
#preferred_contact_method {
  background: #ffd1dc !important; /* pink */
  border: 2px solid #ff3b30 !important;
}

/* ===== FORCE: bulletproof dropdown styling ===== */
.form-grid .field select,
.form-grid .field .select-wrap select,
#preferred_contact_method {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: 48px !important;
  padding: 0.7rem 3rem 0.7rem 0.8rem !important;

  font: inherit !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;

  color: #111827 !important;
  background-color: #ffffff !important;

  border: 1px solid #d1d5db !important;
  border-radius: 12px !important;

  outline: none !important;
  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  background-image: none !important; /* we'll draw arrow via wrapper if desired */
}

/* ---------- Nested / Mini grids ---------- */
.sub-grid{
  display:grid;
  gap: 1rem;
}

/* Column variants */
.sub-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Mobile: always stack */
@media (max-width: 720px){
  .sub-grid--2,
  .sub-grid--3,
  .sub-grid--4{
    grid-template-columns: 1fr;
  }
}

/* ---------- Reusable Field Group Card ---------- */
.field-card{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.field-card__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;
  background: #EAF2FF;
  border-bottom: 1px solid #e5e7eb;
}

.field-card__title{
  font-weight: 700;
  color: #111827;
  font-size: 15px;
}

.field-card__actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-card__body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 0;
}

.btn-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color: #111827;
  text-decoration: none;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover{
  background:#f9fafb;
}

/* Dialog */
.dialog{
  border:none;
  padding:0;
  background:transparent;
}

.dialog::backdrop{
  background: rgba(0,0,0,0.35);
}

.dialog-card{
  width:min(520px, calc(100vw - 32px));
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  padding:16px;
}

/* When a dialog needs autocomplete dropdowns, don't clip them */
.dialog-card.dialog--ac { overflow: visible !important; }
.dialog-card.dialog--ac .dialog-body { overflow: visible !important; }

/* When a dialog is forced tall, ensure the body can grow */
.dialog-card.dialog--tall { display: flex; flex-direction: column; }
.dialog-card.dialog--tall .dialog-body { flex: 1 1 auto; min-height: 0; }

.dialog-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.dialog-title{
  font-size:16px;
  font-weight:800;
  color:#111827;
}

.dialog-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

/* ===== Dialog: make the dialog itself fixed + scroll inside ===== */
.dialog[open]{
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 16px;              /* space around the card on small screens */
  display: grid;
  place-items: center;
  background: transparent;
  z-index: 3000;
}

/* Card should never exceed viewport height */
.dialog-card{
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); /* d(vh) is best on mobile */
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* keep header/footer fixed, body scrolls */
}

/* Only the body scrolls */
.dialog-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;              /* critical so flex children can shrink */
}

/* Optional: keep actions visible */
.dialog-actions{
  flex: 0 0 auto;
}

/* Lock page scroll when any dialog is open (modern browsers) */
body:has(dialog[open]){
  overflow: hidden;
}

.hidden { display: none !important; }

/* hide but keep accessible */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* segmented control */
.type-toggle{
  display:flex;
  gap:8px;
  flex-wrap:wrap;              /* wraps nicely on smaller screens */
  margin-top:6px;
}

.type-btn{
  appearance:none;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition:transform .05s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.type-btn:active{ transform:scale(0.98); }
.type-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.25); }

/* Active base */
.type-btn.is-active{
  background:#2563eb; /* blue */
  border-color:transparent;
  color:#fff;
}

/* Color coding by type */
.type-btn[data-value="Buy"].is-active{ background:#2563eb; }     /* blue */
.type-btn[data-value="Sell"].is-active{ background:#16a34a; }    /* green */
.type-btn[data-value="Rent"].is-active{ background:#f59e0b; }    /* purple */
.type-btn[data-value="RentOut"].is-active{ background:#7c3aed; } /* amber */


/* Grid helpers (works with your 2-col .form-grid) */
.span-2{ grid-column: span 2; } /* full width */
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

/* spacer remains useful when you want a half-width “solo row” */
.grid-spacer{ min-height: 1px; }
@media (max-width: 720px){
  .grid-spacer{ display:none; }
}

.contract-group {
  grid-column: 1 / 2; /* one column only */
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.contract-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;

  font-weight: 700;
  color: #111827;
}
.contract-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.contract-title{
  font-weight: 700;
  color: #111827;
}

.contract-dates{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.grid-spacer {
  grid-column: 2 / 3;
}

.property-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* On mobile your form-grid becomes 1 column; the spacer should disappear */
@media (max-width: 720px){
  .grid-spacer{ display:none; }
  .property-form-grid{ grid-template-columns: 1fr; }

}


/* ---------- Tabs (Contact edit: below intentions) ---------- */
.tabs {
  margin-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}

.tabs-header {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tab-btn {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.tab-btn.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tabs-panels {
  margin-top: 1rem;
}

.tab-panel {
  display: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px; /* match your card-ish feel */
  padding: 1rem;
}

.tab-panel.is-active {
  display: block;
}

.tab-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.tab-title {
  margin: 0;
  font-size: 1.05rem;
}

/* table inside tabs */
.tabs-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.tabs-table {
  width: 100%;
  border-collapse: collapse;
}

.tabs-table th,
.tabs-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #e5e7eb;
}

.tabs-right {
  text-align: right;
  white-space: nowrap;
}

.tabs-link {
  color: #2563eb;
  text-decoration: none;
}

.tabs-link:hover {
  text-decoration: underline;
}

.tabs-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,.55); z-index: 1000; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 1001; padding: 16px; }
.modal-card { width: min(760px, 100%); background:#fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow:hidden; max-height: calc(100vh - 48px);}
.modal-header { display:flex; justify-content:space-between; align-items:center; padding: 16px 18px; border-bottom: 1px solid #e5e7eb; }
.modal-body { padding: 16px 18px 6px; overflow: auto;max-height: calc(100vh - 140px); }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding: 14px 18px 18px; }
/* Icon buttons: make <a> and <button> look the same */
.icon-btn{
  border:0;
  background:transparent;
  cursor:pointer;

  /* key: stop <a> from turning icons blue */
  color: inherit;
  text-decoration: none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 4px;
  border-radius: 10px;
}

/* Ensure visited/hover links don't change icon color unless you want it */
a.icon-btn:link,
a.icon-btn:visited{
  color: inherit;
  text-decoration: none;
}

.icon-btn:hover{
  background:#f3f4f6;
}

/* Optional: standardize icon sizing inside icon-btn */
.icon-btn .icon{
  width:14px;
  height:14px;
}
.icon-btn--danger:hover{ color:#b91c1c; background:#fef2f2; }

.autocomplete {
  position:absolute; top: calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  max-height: 260px; overflow:auto; z-index: 2000;
}
.ac-item { width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; cursor:pointer; }
.ac-item:hover, .ac-item.active { background:#f3f4f6; }
.ac-title { font-weight:600; }
.ac-sub { font-size:12px; color:#6b7280; margin-top:2px; }
.ac-wrap{
  position: relative;
}

.btn-link { border:0; background:transparent; color:#4f46e5; cursor:pointer; padding:0; margin-top:6px; }
.form-error { margin: 8px 0 14px; padding: 10px 12px; background:#fee2e2; color:#7f1d1d; border-radius:10px; }

.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.label{font-weight:650}
.hint{margin:.35rem 0 0;color:#6b7280;font-size:.9rem}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:46px;height:28px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;inset:0;border-radius:999px;
  background:#e5e7eb; transition:200ms;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.switch .slider::before{
  content:""; position:absolute; height:22px; width:22px;
  left:3px; top:3px; border-radius:999px; background:#fff;
  transition:200ms; box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.switch input:checked + .slider{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:focus-visible + .slider{
  outline:3px solid rgba(37,99,235,.25);
  outline-offset:2px;
}

/* Percentage number as a pill */
.pct-wrap{
  position:relative; display:inline-flex; align-items:center;
  border-radius:12px; padding:10px 12px;
  background:#f9fafb; border:1px solid #e5e7eb;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  width:140px;
}
.pct-number{
  border:0; outline:0; background:transparent;
  width:90px; font-size:1.05rem; font-weight:650;
}
.pct-suffix{color:#6b7280;font-weight:650}

/* Range slider */
.pct-range{width:100%; margin-top:12px}
.pct-range:focus-visible{outline:3px solid rgba(37,99,235,.25); outline-offset:2px}
.pct-meta{
  display:flex; justify-content:space-between;
  color:#9ca3af; font-size:.85rem; margin-top:6px;
}

/* Shared row */
.form-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* Ownership row specifics */
.form-row--ownership{
  margin-top:16px;
}

/* Grow vs compact */
.field--grow{
  flex:1 1 auto;
}
.field--compact{
  flex:0 0 220px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Align switch nicely */
.field--compact .switch{
  align-self:flex-start;
}

/* Responsive: stack on small screens */
@media (max-width: 640px){
  .form-row{
    flex-direction:column;
  }
  .field--compact{
    flex:1 1 auto;
  }
}
/* Shared row */
.form-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* Ownership row specifics */
.form-row--ownership{
  margin-top:16px;
}

/* Grow vs compact */
.field--grow{
  flex:1 1 auto;
}
.field--compact{
  flex:0 0 220px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Align switch nicely */
.field--compact .switch{
  align-self:flex-start;
}

/* Responsive: stack on small screens */
@media (max-width: 900px){
  .form-row{
    flex-direction:column;
  }
  .field--compact{
    flex:1 1 auto;
  }
}

/* =====================================================
   Tools page
   ===================================================== */

.tools-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tools-page-header {
  margin-bottom: 0;
}

.tools-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.tools-hero__content {
  max-width: 760px;
}

.tools-hero__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}

.tools-hero__title {
  margin: 0;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #111827;
}

.tools-hero__text {
  margin: 10px 0 0;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.6;
}

.tools-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  min-width: 280px;
}

.tools-stat {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  text-align: center;
}

.tools-stat__value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
}

.tools-stat__label {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #6b7280;
}

.tools-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tools-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.tools-section__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #111827;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tools-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 230px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  color: inherit;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.tools-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
  text-decoration: none;
}

.tools-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tools-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tools-card__icon--blue { background: #e8f0ff; color: #2563eb; }
.tools-card__icon--violet { background: #efeaff; color: #6d28d9; }
.tools-card__icon--green { background: #e9f8ee; color: #15803d; }
.tools-card__icon--orange { background: #fff1e8; color: #ea580c; }
.tools-card__icon--amber { background: #fff6df; color: #a16207; }
.tools-card__icon--sky { background: #eaf6ff; color: #0284c7; }
.tools-card__icon--purple { background: #f2ebff; color: #7c3aed; }
.tools-card__icon--emerald { background: #e8fbf4; color: #059669; }
.tools-card__icon--pink { background: #fdeaf1; color: #be185d; }
.tools-card__icon--indigo { background: #eaf0ff; color: #4f46e5; }
.tools-card__icon--mint { background: #e8f8ef; color: #0f766e; }
.tools-card__icon--sand { background: #f9f1dc; color: #92400e; }

.tools-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.tools-card__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.tools-card__title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 800;
  color: #111827;
}

.tools-card__desc {
  margin: 0;
  color: #4b5563;
  line-height: 1.55;
  font-size: 0.95rem;
}

.tools-card__arrow {
  align-self: flex-end;
  font-size: 1.25rem;
  line-height: 1;
  color: #6b7280;
}

@media (max-width: 980px) {
  .tools-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .tools-hero__stats {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tools-card {
    min-height: 0;
  }

  .tools-card__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Mobile / Small Screens ---------- */
@media (max-width: 900px) {
  /* Show hamburger */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile dropdown nav: hidden until JS adds .open */
  .main-nav {
    display: none;
    position: absolute;
    right: 0.5rem;
    top: 56px; /* dropdown under header; adjust if needed */
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.75rem;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 220px;
    z-index: 1000;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
  }

  .main-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
  }

  /* STACK SIDEBAR ABOVE CONTENT */
  .layout {
    grid-template-columns: 1fr; /* single column */
    grid-auto-rows: min-content;
  }

  /* Sidebar becomes a card with margin */
  .sidebar {
    border-right: none;
    box-shadow: none;
    border-radius: 12px;
    margin: 10px;
  }

  /* Content stays full width with 10px padding */
  .content {
    padding: 10px;
  }

  .content-inner {
    padding: 1.25rem;
  }

  .lw-actions-col { width: 1%; white-space: nowrap; text-align: right; }

  .lw-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
  }
  .lw-icon-btn:hover{ background:#f9fafb; }
  .lw-icon{ width:18px; height:18px; color:#6b7280; }
  .lw-icon-btn:hover .lw-icon{ color:#111827; }

}

/* Board column header: stacked title + meta */
.board-col__head{
  display: flex;
  flex-direction: column;    /* stack title + meta */
  align-items: flex-start;   /* left align */
  justify-content: flex-start; /* undo space-between */
  gap: 2px;                  /* subtle vertical spacing */
}

.note-details {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--panel, #fff);
}
.note-summary { cursor: pointer; font-weight: 600; }
.note-body { margin-top: 8px; white-space: pre-wrap; }
/* =====================================================
   Auth landing / pricing page
   Reuses existing: .card, .form-grid, .field, .actions, .btn
   ===================================================== */

.auth-landing{
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 20px 36px;
}

.auth-top{
  display: block;
  margin-bottom: 20px;
}

.auth-hero{
  min-width: 0;
}

.auth-hero__eyebrow{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}

.auth-hero__title{
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  color: #1f2937;
}

.auth-hero__text{
  max-width: 980px;
  font-size: 1.06rem;
  line-height: 1.6;
  margin-top: 14px;
}

/* Registration card */
.auth-card{
  max-width: 760px;
  margin: 20px auto 0;
  padding: 18px 18px 16px;
  scroll-margin-top: 24px;
}

.auth-card__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.auth-card__title{
  font-size: 1.2rem;
  font-weight: 800;
  color: #111827;
}

.auth-card__text{
  margin-top: 6px;
  max-width: 780px;
}

.auth-card__text--compact{
  max-width: 560px;
}

/* Selected plan badge */
.auth-selected-plan{
  flex: 0 0 auto;
  min-width: 170px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
}

.auth-selected-plan__label{
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

/* Plan tiles */
.plan-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 24px;
  scroll-margin-top: 24px;
}

.plan-card{
  position: relative;
  text-align: left;
  width: 100%;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(17,24,39,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}

.plan-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(17,24,39,.10);
  border-color: #c7cfd9;
}

.plan-card.is-selected{
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 20px 36px rgba(17,24,39,.12);
  background: #fbfdff;
}

.plan-card__inner{
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 22px 18px 18px;
}

.plan-card__name{
  font-size: 1.15rem;
  font-weight: 800;
  color: #374151;
  text-align: center;
}

.plan-card__name--featured{
  color: #2d66ca;
}

.plan-card__name--elite{
  color: #d4a24d;
}

.plan-card__price{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  color: #374151;
  text-align: center;
}

.plan-card__price--featured{
  color: #2d66ca;
}

.plan-card__price--elite{
  color: #d4a24d;
}

.plan-card__price-value{
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
}

.plan-card__price-period{
  font-size: 1rem;
  font-weight: 700;
  color: #6b7280;
  margin-top: 4px;
}

.plan-card__desc{
  margin: 0;
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}

.plan-card__features{
  margin: 0;
  padding-left: 18px;
  color: #111827;
}

.plan-card__features li + li{
  margin-top: 6px;
}

.plan-card__corner-badge{
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  text-align: center;
  padding: 8px 0;
  background: #5f95e6;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translate(32px, 18px) rotate(45deg);
  transform-origin: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.plan-card__corner-badge--elite{
  background: #dfb462;
}

/* Auth form tweaks that sit on top of existing .form-grid / .field */
.auth-form-grid{
  margin-bottom: 8px;
}

.auth-form-grid--compact{
  gap: 12px;
}

.auth-form-grid--compact .field{
  margin-bottom: 0;
}

.auth-form-grid--compact .field label{
  margin-bottom: 4px;
  font-size: .92rem;
}

.auth-form-grid--compact input{
  min-height: 40px;
  padding: 9px 11px;
}

.auth-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #374151;
  font-size: .96rem;
  line-height: 1.5;
  margin-top: 6px;
}

.auth-check input{
  margin-top: 3px;
  flex: 0 0 auto;
}

.auth-check a{
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.auth-check a:hover{
  text-decoration: underline;
}

.auth-actions{
  margin-top: 14px;
  justify-content: flex-end;
}

.auth-actions--center{
  justify-content: center;
}

.auth-submit-btn{
  min-width: 220px;
}

/* Responsive */
@media (max-width: 1380px){
  .plan-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .plan-grid{
    grid-template-columns: 1fr;
  }

  .auth-card{
    max-width: none;
    margin-top: 18px;
  }

  .auth-card__header{
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-landing{
    padding-left: 14px;
    padding-right: 14px;
  }
}