/* ==========================================================================
   SafeTradex Admin - Page-specific styles
   ========================================================================== */

/* Profile cover */
.profile-cover {
  height: 180px;
  background-image: linear-gradient(120deg, rgba(20,195,142,.55), rgba(99,102,241,.35)),
                    url('../images/unsplash/profile-cover.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}
.profile-cover::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 10% 30%, rgba(255,255,255,.15) 0, transparent 30%),
                    radial-gradient(circle at 80% 70%, rgba(0,0,0,.25) 0, transparent 40%);
}
.mt-n5 { margin-top: -3rem; }

/* Settings tabs */
.settings-side .nav-pills .nav-link {
  display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem;
  color: var(--rt-text); font-weight: 500; border-radius: 10px;
}
.settings-side .nav-pills .nav-link.active {
  background: var(--rt-primary-soft); color: var(--rt-primary);
}
.settings-side .nav-pills .nav-link i { font-size: 18px; }

/* Wizard steps */
.wizard-steps { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; padding: 0; list-style: none; counter-reset: step; position: relative; }
.wizard-steps::before { content: ''; position: absolute; top: 18px; left: 5%; right: 5%;
  height: 2px; background: var(--rt-border); z-index: 0; }
.wizard-steps li { position: relative; z-index: 1; flex: 1; text-align: center;
  font-size: 12px; color: var(--rt-text-muted); }
.wizard-steps li::before { counter-increment: step; content: counter(step);
  display: block; width: 36px; height: 36px; line-height: 36px; border-radius: 50%;
  background: var(--rt-card-bg); color: var(--rt-text-muted); margin: 0 auto 6px;
  border: 2px solid var(--rt-border); font-weight: 600; }
.wizard-steps li.completed::before { background: var(--rt-primary); color: #fff; border-color: var(--rt-primary); content: '✓'; }
.wizard-steps li.active::before { background: var(--rt-primary); color: #fff; border-color: var(--rt-primary); }
.wizard-steps li.active { color: var(--rt-primary); font-weight: 600; }

/* Mini calendar */
.mini-calendar { width: 100%; border-collapse: collapse; }
.mini-calendar th, .mini-calendar td { text-align: center; padding: 6px 0;
  font-size: 12px; color: var(--rt-text); }
.mini-calendar thead th { color: var(--rt-text-muted); font-weight: 500; }
.mini-calendar td.disabled { color: var(--rt-text-soft); }
.mini-calendar td.today { background: var(--rt-primary); color: #fff; border-radius: 50%; }
.mini-calendar td.has-event { font-weight: 600; color: var(--rt-primary); }

/* Big calendar */
.big-calendar { width: 100%; border-collapse: collapse; background: var(--rt-card-bg); }
.big-calendar th, .big-calendar td { border: 1px solid var(--rt-border);
  padding: 6px; vertical-align: top; height: 110px; }
.big-calendar thead th { background: var(--rt-body-bg); padding: 8px;
  font-weight: 600; font-size: 12px; color: var(--rt-text-muted); height: auto; text-align: center; }
.big-calendar .day-num { font-weight: 600; font-size: 13px; color: var(--rt-text); }
.big-calendar td.today .day-num { color: var(--rt-primary); }
.big-calendar td.muted { background: #FAFCFE; }
[data-theme="dark"] .big-calendar td.muted { background: rgba(255,255,255,.02); }

/* Calendar (table-bordered with thead.bg-light) — dark mode tweaks */
[data-theme="dark"] .calendar-table { --bs-table-bg: var(--rt-card-bg); --bs-table-color: var(--rt-text); --bs-table-border-color: var(--rt-border); }
[data-theme="dark"] .calendar-table thead.bg-light,
[data-theme="dark"] .calendar-table thead.bg-light th { background: rgba(255,255,255,.04) !important; color: var(--rt-text-muted); border-color: var(--rt-border); }
[data-theme="dark"] .calendar-table td { border-color: var(--rt-border); }
[data-theme="dark"] .calendar-table .text-muted { color: var(--rt-text-soft) !important; }
[data-theme="dark"] .calendar-table td.bg-primary-soft { background-color: rgba(20,195,142,.14) !important; border-color: rgba(20,195,142,.30); }

/* File upload area */
.upload-dropzone {
  border: 2px dashed var(--rt-border); border-radius: 14px; padding: 2.5rem 1rem;
  text-align: center; transition: var(--rt-trans); cursor: pointer; background: var(--rt-card-bg);
}
.upload-dropzone:hover { border-color: var(--rt-primary); background: var(--rt-primary-soft); }
.upload-dropzone i { font-size: 36px; color: var(--rt-primary); margin-bottom: .65rem; }

/* Treeview */
.treeview { list-style: none; padding-left: 0; margin: 0; }
.treeview ul { list-style: none; padding-left: 1.25rem; }
.treeview li { padding: 4px 0; font-size: 14px; }
.treeview li > .tv-toggle { cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--rt-text); padding: 3px 6px; border-radius: 6px; }
.treeview li > .tv-toggle:hover { background: var(--rt-body-bg); }
.treeview li > .tv-toggle i.tv-arrow { transition: transform .2s; font-size: 11px; color: var(--rt-text-muted); }
.treeview li.collapsed > ul { display: none; }
.treeview li:not(.collapsed) > .tv-toggle i.tv-arrow { transform: rotate(90deg); }
.treeview li > .tv-toggle .tv-icon { color: var(--rt-warning); margin-right: 4px; }
.treeview li.file > .tv-toggle .tv-icon { color: var(--rt-info); }

/* Animation demo box */
.anim-box { display: flex; align-items: center; justify-content: center;
  height: 120px; background: var(--rt-primary-soft); color: var(--rt-primary);
  border-radius: 12px; font-weight: 600; }

/* Code block */
pre.code-block { background: #0F172A; color: #E5E7EB; padding: 1rem;
  border-radius: 10px; font-size: 13px; overflow-x: auto; line-height: 1.5; }
pre.code-block code { color: inherit; }

/* Color swatch grid for icon pages */
.icon-list .icon-grid-item { padding: 1.25rem .5rem; }

/* Maps */
.map-canvas { width: 100%; height: 480px; background: var(--rt-map-canvas-bg, #E8ECF2); border-radius: 12px; position: relative; overflow: hidden; border: 1px solid var(--rt-border); }
[data-theme="dark"] .map-canvas { --rt-map-canvas-bg: rgba(255,255,255,.04); }

/* Vector world map (Datamaps) */
.vector-map-canvas {
  width: 100%;
  height: 480px;
  background: linear-gradient(160deg, #F4F7FB 0%, #FFFFFF 100%);
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .vector-map-canvas {
  background: linear-gradient(160deg, rgba(255,255,255,.03) 0%, var(--rt-card-bg) 100%);
}
.vector-map-canvas svg { width: 100% !important; height: 100% !important; display: block; }
.vector-map-canvas .datamap { position: absolute; inset: 0; }

/* Datamaps popup tooltip */
.datamaps-hoverover {
  position: absolute !important;
  pointer-events: none;
  z-index: 10;
  font-family: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.dm-tip {
  background: #0F172A;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  min-width: 120px;
  box-shadow: 0 8px 20px rgba(15,23,42,.2);
  white-space: nowrap;
}
.dm-tip-name { font-weight: 700; color: #fff; }
.dm-tip-row { color: rgba(255,255,255,.85); font-size: 11px; margin-top: 2px; }
.dm-tip-row strong { color: #14C38E; }
.dm-tip-row.text-muted-soft { color: rgba(255,255,255,.55); }

/* Lightbox gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery-grid a { display: block; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; position: relative; }
.gallery-grid a img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-grid a:hover img { transform: scale(1.05); }

/* Tag input */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--rt-border); border-radius: 10px; background: var(--rt-card-bg); min-height: 42px; }
.tag-input .tag { background: var(--rt-primary-soft); color: var(--rt-primary);
  padding: 2px 8px; border-radius: 6px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.tag-input .tag .remove { cursor: pointer; opacity: .7; }
.tag-input input { border: 0; outline: 0; flex: 1; min-width: 100px; padding: 4px; font-size: 13px; background: transparent; color: var(--rt-text); }

/* ==========================================================================
   Finance Dashboard
   ========================================================================== */
.finance-balance-card { overflow: hidden; }
.finance-card-visual {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, var(--rt-primary) 100%);
  border-radius: 16px; padding: 1.5rem; margin-top: 1rem; position: relative; overflow: hidden;
}
.finance-card-visual::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.05);
}
.finance-chip-dot { width: 28px; height: 18px; background: rgba(255,255,255,.5); border-radius: 4px; display: inline-block; }
.finance-card-num { font-family: 'Courier New', monospace; font-size: 20px; letter-spacing: 2px; }
.finance-mini-card {
  border-radius: 14px; padding: 1.25rem; min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.finance-mini-card::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.finance-mini-card-primary { background: linear-gradient(135deg, var(--rt-primary), #0EA475); }
.finance-mini-card-dark { background: linear-gradient(135deg, #1E293B, #334155); }
.finance-mini-card-info { background: linear-gradient(135deg, #0EA5E9, #6366F1); }
.budget-card {
  background: var(--rt-body-bg); padding: 1rem; border-radius: 12px; border: 1px solid var(--rt-border);
}
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.legend-dot.bg-primary { background: var(--rt-primary) !important; }
.legend-dot.bg-info { background: var(--rt-info) !important; }
.legend-dot.bg-warning { background: var(--rt-warning) !important; }
.legend-dot.bg-success { background: var(--rt-success) !important; }
.legend-dot.bg-danger { background: var(--rt-danger) !important; }

/* Progress bar width helpers */
.progress-bar[data-width-percent="42"] { width: 42%; }
.progress-bar[data-width-percent="55"] { width: 55%; }
.progress-bar[data-width-percent="68"] { width: 68%; }
.progress-bar[data-width-percent="82"] { width: 82%; }
.progress-bar[data-width-percent="92"] { width: 92%; }
.progress-bar[data-width-percent="12"] { width: 12%; }
.progress-bar[data-width-percent="4"]  { width: 4%; }
.progress-bar[data-width-percent="1"]  { width: 1%; }

/* ==========================================================================
   Property pages
   ========================================================================== */
.prop-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; }
.property-gallery { min-height: 380px; }
.gallery-main { flex: 2; border-radius: 14px; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.gallery-thumbs { flex: 1; }
.gallery-thumbs img { width: 100%; height: 122px; object-fit: cover; border-radius: 12px; display: block; }
.key-feature-tile {
  display: flex; align-items: center; gap: .75rem; padding: 1rem;
  background: var(--rt-body-bg); border-radius: 12px; border: 1px solid var(--rt-border);
}
.key-feature-tile i { font-size: 24px; }
.amenity-item {
  display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem;
  background: var(--rt-body-bg); border-radius: 10px; border: 1px solid var(--rt-border);
  font-size: 14px;
}
.amenity-item i { font-size: 18px; }
/* Scrollbar / scroll-area demo helpers */
.scroll-box     { overflow-y: auto; }
.scroll-box-sm  { max-height: 280px; overflow-y: auto; }
.scroll-box-md  { max-height: 400px; overflow-y: auto; }
.scroll-x       { overflow-x: auto; }
.scroll-strip   { display: flex; gap: .5rem; width: 800px; }

/* Sticky table header — uses theme card bg so it adapts to dark mode */
.table-sticky-thead { position: sticky; top: 0; z-index: 1; background: var(--rt-card-bg); }
.table-sticky-thead th { background: var(--rt-card-bg); }

.map-placeholder {
  background: linear-gradient(135deg, var(--rt-map-placeholder-1, #E8ECF2) 0%, var(--rt-map-placeholder-2, #DDE7EE) 100%);
  border-radius: 12px; min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--rt-text-muted); gap: .5rem;
}
[data-theme="dark"] .map-placeholder {
  --rt-map-placeholder-1: rgba(255,255,255,.04);
  --rt-map-placeholder-2: rgba(255,255,255,.02);
  border: 1px dashed var(--rt-border);
}
.review-item {
  padding: 1rem; background: var(--rt-body-bg); border-radius: 12px; border: 1px solid var(--rt-border);
}
.nav-tabs-fancy { border-bottom: 1px solid var(--rt-border); gap: .25rem; }
.nav-tabs-fancy .nav-link {
  border: 0; border-bottom: 2px solid transparent; color: var(--rt-text-muted);
  padding: .85rem 1rem; font-weight: 500; background: transparent;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nav-tabs-fancy .nav-link:hover { color: var(--rt-primary); border-bottom-color: var(--rt-primary-light); }
.nav-tabs-fancy .nav-link.active { color: var(--rt-primary); border-bottom-color: var(--rt-primary); background: transparent; }

.filter-sidebar .filter-group { padding-bottom: 1rem; border-bottom: 1px dashed var(--rt-border); }
.filter-sidebar .filter-group:last-of-type { border-bottom: 0; }

.form-actions-sticky {
  position: sticky; bottom: 0; background: var(--rt-card-bg); border-top: 1px solid var(--rt-border);
  padding: .85rem 1rem; margin: 1.5rem 0 0; z-index: 10;
  border-radius: 12px; box-shadow: var(--rt-shadow-xs);
}

/* ==========================================================================
   Agents
   ========================================================================== */
.agent-card {
  background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: var(--rt-radius-lg);
  overflow: hidden; transition: var(--rt-trans);
}
.agent-card:hover { transform: translateY(-3px); box-shadow: var(--rt-shadow); }
.agent-cover {
  height: 100px; background-size: cover; background-position: center;
  background-color: var(--rt-primary);
}
.agent-body { padding: 1.25rem; position: relative; padding-top: 0; }
.agent-avatar { margin-top: -42px; border: 4px solid var(--rt-card-bg); box-shadow: var(--rt-shadow-xs); }
.agent-stats {
  display: flex; justify-content: space-around; padding: .75rem 0;
  border-top: 1px dashed var(--rt-border); border-bottom: 1px dashed var(--rt-border);
  margin-top: .5rem;
}
.agent-stats > div { text-align: center; }
.agent-stats strong { display: block; font-size: 15px; color: var(--rt-heading); }

.agent-profile-cover {
  height: 200px; border-radius: var(--rt-radius-lg) var(--rt-radius-lg) 0 0;
  background-size: cover; background-position: center;
  background-color: var(--rt-primary);
}
.agent-profile-head { margin-top: -50px; }
.agent-profile-avatar { border: 4px solid var(--rt-card-bg); box-shadow: var(--rt-shadow-xs); }

/* ==========================================================================
   Contacts
   ========================================================================== */
.contact-card { transition: var(--rt-trans); }
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--rt-shadow); }

/* Invoice page - brand icon */
.brand-icon-lg {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
}

/* Hover effects */
.hover-lift { transition: transform .3s, box-shadow .3s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--rt-shadow); }
.hover-grow { transition: transform .3s; }
.hover-grow:hover { transform: scale(1.04); }

/* ==========================================================================
   Sales section helpers (used by sales-* pages)
   ========================================================================== */

/* Generic percentage width helpers for inline progress bars */
.w-2  { width: 2%  !important; }
.w-5  { width: 5%  !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-65 { width: 65% !important; }
.w-70 { width: 70% !important; }
.w-45 { width: 45% !important; }
.w-62 { width: 62% !important; }
.w-78 { width: 78% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }

/* Slim progress bars used in lists */
.progress-thin { height: 6px; border-radius: 3px; }

/* Sticky bottom action bar for forms (new product, edit order, etc.) */
.sticky-bottom-bar {
  position: sticky; bottom: 0; z-index: 5;
  border-radius: 12px;
  box-shadow: 0 -8px 20px rgba(15,23,42,.06);
}

/* Star-row label width inside ratings histogram (product details page) */
.rating-row-label { width: 42px; display: inline-block; }

/* Quantity selector width on product details */
.qty-input-group { max-width: 160px; }

/* Order page mini timeline horizontal lines */
.order-timeline .avatar { display: inline-flex; align-items: center; justify-content: center; }

/* ================================================================
   NEW: projects list / cards / tasks / settings / analytics / ai
   ================================================================ */

/* Extra width helpers */
.w-12 { width: 12% !important; }
.w-32 { width: 32% !important; }
.w-38 { width: 38% !important; }
.w-42 { width: 42% !important; }
.w-44 { width: 44% !important; }
.w-48 { width: 48% !important; }
.w-52 { width: 52% !important; }
.w-54 { width: 54% !important; }
.w-55 { width: 55% !important; }
.w-58 { width: 58% !important; }
.w-72 { width: 72% !important; }
.w-82 { width: 82% !important; }
.w-92 { width: 92% !important; }
.w-100 { width: 100% !important; }
.progress-w-100 { width: 100px; }
.progress-w-180 { width: 180px; }

/* Project cards grid */
.project-card { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--rt-shadow); }
.project-stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; }

/* Task list rows */
.task-list .task-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.task-list .task-row:hover { background: var(--rt-bg-soft, #F8FAFC); }
.task-list .task-row > small { white-space: nowrap; }

/* Mini calendar (dashboard widget) */
.mini-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; text-align: center; }
.mini-cal-d { padding: 6px 0; font-size: 13px; border-radius: 6px; color: var(--rt-heading, #0F172A); }
.mini-cal-d.head { color: var(--rt-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.mini-cal-d.muted { color: var(--rt-text-soft, #CBD5E1); }
.mini-cal-d.has-event { background: rgba(20,195,142,.12); color: var(--rt-primary); font-weight: 600; }
.mini-cal-d.today { background: var(--rt-primary); color: #fff; font-weight: 700; }

/* Compact countdown */
.countdown-sm { gap: .5rem; margin: .5rem 0; }
.cd-unit { background: var(--rt-bg-soft, #F1F5F9); padding: 8px 12px; border-radius: 8px; min-width: 60px; text-align: center; }
.cd-unit strong { display: block; font-size: 1.25rem; line-height: 1; color: var(--rt-primary); }
.cd-unit small { font-size: 11px; color: var(--rt-text-muted); text-transform: uppercase; }

/* Projects settings */
.role-select { max-width: 140px; }
.sprint-select { max-width: 280px; }

/* Funnel for analytics */
.funnel-row { display: grid; grid-template-columns: 200px 1fr 120px; gap: 1rem; align-items: center; padding: .5rem 0; }
.funnel-label { font-size: 13px; color: var(--rt-text-muted); }
.funnel-bar { height: 28px; border-radius: 6px; min-width: 2%; }
.funnel-val { text-align: right; font-weight: 700; }
.funnel-w-8  { width: 8%  !important; }
.funnel-w-22 { width: 22% !important; }
.funnel-w-42 { width: 42% !important; }
.funnel-w-44 { width: 44% !important; }
.funnel-w-58 { width: 58% !important; }
.funnel-w-72 { width: 72% !important; }

/* Forecast scenario cards */
.forecast-card { border-top-width: 4px; border-top-style: solid; }
.forecast-card.featured { box-shadow: 0 6px 20px rgba(20,195,142,.15); }

/* Reports grid */
.report-card { transition: transform .2s, box-shadow .2s; }
.report-card:hover { transform: translateY(-2px); box-shadow: var(--rt-shadow); }

/* Scrumboard 5 columns */
.kanban-board.scrum-5 { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 1rem; overflow-x: auto; }
.kanban-task.done-task { opacity: .75; }

/* Timeline gantt extras */
.g-track-6 { grid-template-columns: repeat(6, 1fr); }
.today-line { position: absolute; top: 0; bottom: 0; left: 62%; width: 2px; background: var(--rt-danger); opacity: .6; }
.timeline-full .g-bar { position: relative; }
.g-len-10 { width: 10% !important; }
.g-len-14 { width: 14% !important; }
.g-len-16 { width: 16% !important; }
.g-len-18 { width: 18% !important; }
.g-len-20 { width: 20% !important; }
.g-len-22 { width: 22% !important; }
.g-len-26 { width: 26% !important; }
.g-len-28 { width: 28% !important; }
.g-len-30 { width: 30% !important; }
.g-len-45 { width: 45% !important; }
.g-len-72 { width: 72% !important; }
.g-pos-0  { margin-left: 0%   !important; }
.g-pos-8  { margin-left: 8%   !important; }
.g-pos-10 { margin-left: 10%  !important; }
.g-pos-18 { margin-left: 18%  !important; }
.g-pos-24 { margin-left: 24%  !important; }
.g-pos-28 { margin-left: 28%  !important; }
.g-pos-34 { margin-left: 34%  !important; }
.g-pos-40 { margin-left: 40%  !important; }
.g-pos-60 { margin-left: 60%  !important; }
.g-pos-64 { margin-left: 64%  !important; }
.g-pos-70 { margin-left: 70%  !important; }
.g-pos-78 { margin-left: 78%  !important; }
.g-prog-0   { width: 0%   !important; }
.g-prog-15  { width: 15%  !important; }
.g-prog-20  { width: 20%  !important; }
.g-prog-52  { width: 52%  !important; }
.g-prog-65  { width: 65%  !important; }
.g-prog-90  { width: 90%  !important; }
.g-prog-100 { width: 100% !important; }

/* ============ AI chat ============ */
.ai-chat-app { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; min-height: calc(100vh - 200px); }
.ai-chat-sidebar { background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: 12px; padding: 1rem; overflow-y: auto; }
.ai-chat-search { position: relative; }
.ai-chat-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--rt-text-muted); }
.ai-chat-search input { padding-left: 32px; }
.ai-chat-list { list-style: none; padding: 0; margin: 0; }
.ai-chat-item { display: flex; gap: .5rem; align-items: center; padding: .5rem; border-radius: 8px; cursor: pointer; margin-bottom: 2px; font-size: 13px; }
.ai-chat-item:hover { background: var(--rt-bg-soft, #F1F5F9); }
.ai-chat-item.active { background: rgba(20,195,142,.1); color: var(--rt-primary); }
.ai-chat-item i { font-size: 16px; color: var(--rt-text-muted); }
.ai-chat-item small { display: block; color: var(--rt-text-muted); font-size: 11px; }

.ai-chat-main { background: var(--rt-card-bg); border: 1px solid var(--rt-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.ai-chat-thread { flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.ai-msg { display: flex; gap: .75rem; align-items: flex-start; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg .ai-bubble { max-width: 72%; padding: .75rem 1rem; border-radius: 14px; line-height: 1.55; }
.ai-msg.user .ai-bubble { background: var(--rt-primary); color: #fff; border-top-right-radius: 4px; }
.ai-msg.ai .ai-bubble { background: var(--rt-bg-soft, #F1F5F9); color: var(--rt-heading); border-top-left-radius: 4px; }
.ai-msg.ai .ai-bubble p:last-child { margin-bottom: 0; }

.ai-chat-composer { padding: 1rem; border-top: 1px solid var(--rt-border); background: var(--rt-card-bg); }
.ai-prompt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.ai-chip { background: var(--rt-bg-soft, #F1F5F9); border: 1px solid var(--rt-border); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--rt-heading); cursor: pointer; }
.ai-chip:hover { background: rgba(20,195,142,.1); border-color: var(--rt-primary); color: var(--rt-primary); }
[data-theme="dark"] .ai-chip { background: rgba(255,255,255,.05); color: var(--rt-text); }
[data-theme="dark"] .ai-chat-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .ai-msg.ai .ai-bubble { background: rgba(255,255,255,.05); color: var(--rt-text); }
[data-theme="dark"] .ai-template-card:hover,
[data-theme="dark"] .ai-template-card.active { background: rgba(20,195,142,.08); color: var(--rt-text); }
.ai-input-row { display: flex; gap: .5rem; align-items: flex-end; }
.ai-input-row textarea { resize: none; flex: 1; }

/* ============ AI image ============ */
.ai-image-card { overflow: hidden; }
.ai-image-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.ai-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.65)); display: flex; gap: .5rem; align-items: flex-end; justify-content: center; padding: 1rem; opacity: 0; transition: opacity .25s; }
.ai-image-wrap:hover .ai-image-overlay { opacity: 1; }

/* ============ AI writer ============ */
.ai-template-list { max-height: 600px; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.ai-template-card { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--rt-border); border-radius: 10px; color: var(--rt-heading); text-decoration: none; transition: all .2s; }
.ai-template-card:hover { border-color: var(--rt-primary); background: rgba(20,195,142,.04); color: var(--rt-heading); }
.ai-template-card.active { border-color: var(--rt-primary); background: rgba(20,195,142,.08); color: var(--rt-heading); }
.ai-output { min-height: 360px; line-height: 1.7; }

@media (max-width: 991.98px) {
  .ai-chat-app { grid-template-columns: 1fr; }
  .kanban-board.scrum-5 { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
  .funnel-row { grid-template-columns: 120px 1fr 80px; }
}

/* Solid brand-extended backgrounds for progress bars & stripes */
.bg-pink   { background-color: var(--rt-pink, #EC4899) !important; }
.bg-purple { background-color: var(--rt-purple, #8B5CF6) !important; }
.bg-teal   { background-color: var(--rt-teal, #14B8A6) !important; }
.bg-orange { background-color: var(--rt-orange, #F97316) !important; }
.progress-bar.bg-pink   { background-color: var(--rt-pink, #EC4899) !important; }
.progress-bar.bg-purple { background-color: var(--rt-purple, #8B5CF6) !important; }
.progress-bar.bg-teal   { background-color: var(--rt-teal, #14B8A6) !important; }
.progress-bar.bg-orange { background-color: var(--rt-orange, #F97316) !important; }

/* Badge-soft extended colors that may not exist */
.badge-soft-pink   { background: rgba(236,72,153,.12); color: var(--rt-pink, #EC4899); }
.badge-soft-teal   { background: rgba(20,184,166,.12); color: var(--rt-teal, #14B8A6); }
.badge-soft-orange { background: rgba(249,115,22,.12); color: var(--rt-orange, #F97316); }
.badge-soft-purple { background: rgba(139,92,246,.12); color: var(--rt-purple, #8B5CF6); }
.bg-secondary-soft { background: rgba(100,116,139,.12); color: #64748B; }