/* BidSmart professional interaction layer */
:root {
  --ui-accent: #c4161c;
  --ui-accent-dark: #981116;
  --ui-ink: #111419;
  --ui-shadow: 0 18px 38px rgba(15, 20, 28, .10);
  --ui-shadow-hover: 0 24px 48px rgba(15, 20, 28, .14);
  --ui-focus: 0 0 0 4px rgba(196, 22, 28, .13);
}

html { scroll-behavior: smooth; }
body.ui-ready { animation: uiPageEnter .34s ease both; }
@keyframes uiPageEnter { from { opacity: .01; } to { opacity: 1; } }

/* Scroll-reveal system */
.ui-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.ui-reveal.ui-visible { opacity: 1; transform: translateY(0); }
.ui-reveal[data-ui-delay="1"] { transition-delay: 70ms; }
.ui-reveal[data-ui-delay="2"] { transition-delay: 140ms; }
.ui-reveal[data-ui-delay="3"] { transition-delay: 210ms; }

/* Tactile components */
.ui-interactive-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  transform: translateZ(0);
}
.ui-interactive-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-hover) !important;
  border-color: rgba(196,22,28,.13) !important;
}
.ui-interactive-card:focus-within {
  border-color: rgba(196,22,28,.22) !important;
  box-shadow: var(--ui-shadow-hover), var(--ui-focus) !important;
}

button, a[class*="btn"], a[class*="button"], .roof-select-btn, .portal-top-menu-link, .sidebar-menu a {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled), a[class*="btn"], a[class*="button"], .roof-select-btn {
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease !important;
}
button:not(:disabled):active, a[class*="btn"]:active, a[class*="button"]:active, .roof-select-btn:active {
  transform: translateY(1px) scale(.985) !important;
}
.ui-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,.35);
  transform: translate(-50%, -50%) scale(0);
  animation: uiRipple .55s ease-out forwards;
  z-index: 2;
}
.admin-btn-neutral .ui-ripple, .hero-secondary-btn .ui-ripple, .header-btn:first-child .ui-ripple {
  background: rgba(196,22,28,.16);
}
@keyframes uiRipple { to { transform: translate(-50%, -50%) scale(20); opacity: 0; } }

/* Form focus feedback */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus, textarea:focus {
  border-color: rgba(196,22,28,.5) !important;
  box-shadow: var(--ui-focus) !important;
  outline: none !important;
}
input[type="range"] { accent-color: var(--ui-accent); }

/* Navigation motion */
.portal-topbar, .admin-sidebar, .landing-site-header {
  transition: box-shadow .22s ease, background-color .22s ease, border-color .22s ease, backdrop-filter .22s ease !important;
}
.portal-topbar.ui-scrolled, .landing-site-header.ui-scrolled {
  box-shadow: 0 14px 34px rgba(10,14,20,.10) !important;
  backdrop-filter: blur(16px);
}
.portal-top-menu-link, .sidebar-menu a { transition: color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease !important; }
.portal-top-menu-link:hover { transform: translateY(-1px); }
.sidebar-menu a:hover { transform: translateX(3px); }
.portal-top-menu-link.active::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--ui-accent);
  animation: uiNavLine .28s ease both;
}
@keyframes uiNavLine { from { transform: scaleX(.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Tables */
tbody tr { transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
tbody tr:hover { background: rgba(196,22,28,.035) !important; }
.admin-clean-table tbody tr:hover, .client-bids-table tbody tr:hover { box-shadow: inset 3px 0 0 rgba(196,22,28,.48); }

/* Status/notification feedback */
.notification-card, .alert, .database-warning, .hyperledger-inline-alert { transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.notification-card:hover { transform: translateY(-2px); }
.alert { position: relative; padding-right: 44px !important; }
.alert.ui-alert-enter { animation: uiAlertIn .36s ease both; }
.alert.ui-alert-exit { opacity: 0; transform: translateY(-8px); }
@keyframes uiAlertIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.ui-alert-close {
  position: absolute;
  top: 8px;
  right: 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.08rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  padding: 4px 7px;
  border-radius: 8px;
}
.ui-alert-close:hover { opacity: 1; background: rgba(0,0,0,.05); }

/* Numeric dashboard feedback */
.ui-counting { font-variant-numeric: tabular-nums; }

/* Landing page interactive depth */
.hero-browser-card, .hero-roof-showcase, .platform-dashboard-mock {
  transform-style: preserve-3d;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.hero-roof-showcase img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s ease !important; }
.hero-roof-showcase:hover img { transform: scale(1.025); filter: saturate(1.03) contrast(1.02); }
.workflow-card, .capability-card, .platform-panel { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
.workflow-card:hover, .capability-card:hover { transform: translateY(-5px); box-shadow: var(--ui-shadow-hover) !important; }

/* Read-only 3D viewer */
.readonly-roof-stage-card, .visualizer-stage-3d {
  transition: box-shadow .22s ease, border-color .22s ease !important;
}
.readonly-roof-stage-card:hover, .visualizer-stage-3d:hover {
  border-color: rgba(196,22,28,.16) !important;
  box-shadow: 0 24px 50px rgba(12,16,22,.11) !important;
}
#roof3dCanvas { cursor: grab; }
#roof3dCanvas.is-dragging { cursor: grabbing; }

/* Scroll-to-top control */
.ui-scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(196,22,28,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  color: var(--ui-accent-dark);
  box-shadow: 0 14px 30px rgba(10,14,20,.13);
  display: grid;
  place-items: center;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
.ui-scroll-top.ui-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ui-scroll-top:hover { background: var(--ui-accent); color: #fff; }

/* Loading state for form submission */
.ui-submitting { pointer-events: none !important; opacity: .78 !important; }
.ui-submitting::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 9px;
  display: inline-block;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: uiSpin .65s linear infinite;
}
@keyframes uiSpin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .ui-interactive-card:hover, .workflow-card:hover, .capability-card:hover { transform: none; }
  .sidebar-menu a:hover { transform: none; }
  .ui-scroll-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.ui-ready, .ui-reveal, .ui-ripple, .alert.ui-alert-enter, .portal-top-menu-link.active::after, .ui-submitting::after {
    animation: none !important;
    transition: none !important;
  }
  .ui-reveal { opacity: 1 !important; transform: none !important; }
  .ui-interactive-card:hover, .workflow-card:hover, .capability-card:hover, .portal-top-menu-link:hover, .sidebar-menu a:hover { transform: none !important; }
}


/* ============================================================
   Shared list navigation: search + filter + 20-per-page paging
   ============================================================ */
.ui-list-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(20,24,31,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(20,24,31,.05);
}
.ui-list-search,
.ui-list-filter {
  display: grid;
  gap: 6px;
  min-width: 210px;
}
.ui-list-search { flex: 1 1 300px; }
.ui-list-filter { flex: 0 1 250px; }
.ui-list-control-label {
  color: #69717d;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ui-list-search-input,
.ui-list-filter-select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(20,24,31,.10);
  border-radius: 11px;
  padding: 0 12px;
  background: #fff;
  color: #17191d;
  outline: none;
  font: inherit;
}
.ui-list-search-input:focus,
.ui-list-filter-select:focus {
  border-color: rgba(200,25,32,.38);
  box-shadow: 0 0 0 3px rgba(200,25,32,.08);
}
.ui-list-meta {
  margin-left: auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.ui-list-clear {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(20,24,31,.09);
  border-radius: 11px;
  background: #fff;
  color: #17191d;
  font-weight: 800;
  cursor: pointer;
}
.ui-list-clear:hover { color: #c81920; border-color: rgba(200,25,32,.22); }
.ui-list-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
}
.ui-list-page-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(20,24,31,.09);
  border-radius: 10px;
  background: #fff;
  color: #17191d;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,24,31,.05);
}
.ui-list-page-btn:hover:not(:disabled) { color: #c81920; border-color: rgba(200,25,32,.20); transform: translateY(-1px); }
.ui-list-page-btn.active {
  color: #fff;
  background: linear-gradient(180deg,#d71f27,#b90f16);
  border-color: #ab0f15;
}
.ui-list-page-btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.ui-list-page-ellipsis { color: #8a919b; font-weight: 800; padding: 0 2px; }
.ui-list-empty {
  margin: 14px 0;
  padding: 18px;
  border: 1px dashed rgba(20,24,31,.13);
  border-radius: 14px;
  text-align: center;
  color: #6b7280;
  background: rgba(255,255,255,.55);
  font-weight: 700;
}
@media (max-width: 700px) {
  .ui-list-toolbar { align-items: stretch; }
  .ui-list-search, .ui-list-filter { flex: 1 1 100%; min-width: 0; }
  .ui-list-meta { width: 100%; margin-left: 0; min-height: 28px; }
  .ui-list-clear { width: 100%; }
  .ui-list-page-btn { min-width: 35px; min-height: 36px; padding: 0 9px; }
}