/* Page: dashboard.html — Borrower Dashboard */

    /* ── Edit Case dropdown ── */
    #editCaseMenu.open { display: block !important; }
    .edit-case-item {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px; text-decoration: none; color: var(--ink);
      font-size: 12px; transition: background .12s; cursor: pointer; border: none;
      background: none; width: 100%; text-align: left;
    }
    .edit-case-item:hover { background: var(--off); }
    .edit-case-item__addr { font-weight: 600; font-size: 12px; color: var(--ink); }
    .edit-case-item__ref { font-size: 9px; color: var(--text-m); font-family: monospace; margin-top: 1px; }
    .edit-case-item__status { font-size: 9px; padding: 2px 6px; border-radius: 8px; background: var(--off); color: var(--text-m); margin-left: auto; }

    /* ═══ LAYOUT ═══ */
    /* body background, layout shell, sidebar and nav styles
       are now in assets/css/components.css — do not duplicate here */

    /* ═══ PAGE BODY ═══ */
    .db-page { max-width: 1400px; margin: 0 auto; padding: var(--s8); }

    /* ── GREETING BAR — now in borrower-shared.css ── */
    .db-greeting__ref-badge { font-family: var(--font-b); font-weight: 700; color: var(--blue); }

    /* ── STAGE PROGRESS BAR ── */
    .db-stages { margin-bottom: var(--s8);     overflow: hidden;
    border-radius: var(--r-2xl);}
    .db-stages__track {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-2xl); padding: var(--s5) var(--s3);
      display: flex; align-items: center; gap: 0;
      width: 100%; box-sizing: border-box;
    }
    .db-stage { padding:0 1rem;
      display: flex; flex-direction: column; align-items: center; gap: var(--s2);
      flex: 1 1 0%; min-width: 0; text-align: center; position: relative;
    }
    .db-stage + .db-stage::before {
      content: ''; position: absolute; top: 16px; left: -50%;
      width: 100%; height: 2px;
      background: var(--border); z-index: 0;
      transition: background var(--t-slow);
    }
    .db-stage.done + .db-stage::before,
    .db-stage.active + .db-stage::before { background: var(--blue); }

    .db-stage__dot {
      width: 32px; height: 32px; border-radius: 50%;
      border: 2px solid var(--border); background: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #000;
      position: relative; z-index: 1; flex-shrink: 0;
      transition: all var(--t-base);
    }

     [data-theme="dark"] .db-stage__dot{color: #fff;}
    .db-stage.done   .db-stage__dot { background: var(--blue); border-color: var(--blue); color: var(--white); }
    .db-stage.active .db-stage__dot { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: 0 0 0 6px var(--blue-glow); }
    .db-stage__label { font-size: var(--t-xs); font-weight: 600; color: var(--text-m); line-height: 1.3; min-height: 2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-word; padding: 0 2px; }
    .db-stage.done   .db-stage__label { color: var(--blue); }
    .db-stage.active .db-stage__label { color: var(--blue); font-weight: 700; }

    /* ═══ MAIN GRID ═══ */
    .db-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--s6); align-items: start; }

    /* ── PANELS — now in borrower-shared.css ── */

    /* ── PHONE VERIFICATION BANNER ── */
    .verify-phone-banner {
      background: linear-gradient(135deg, #ff8900  0%, #f1ae04 100%);
      border-radius: var(--r-xl); padding: var(--s5) var(--s6);
      display: flex; align-items: center; gap: var(--s5);
      position: relative; overflow: hidden;margin-bottom: 2rem;
    }
    .verify-phone-banner::before {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .verify-phone-banner__icon { font-size: 1.8rem; flex-shrink: 0; position: relative; z-index: 1; }
    .verify-phone-banner__content { flex: 1; position: relative; z-index: 1; }
    .verify-phone-banner__title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 0; }
    .verify-phone-banner__sub { font-size: var(--t-sm); color: rgba(255,255,255,.8); line-height: 1.5; }
    .verify-phone-banner__actions { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; gap: var(--s3); }
    .verify-phone-banner__close {
      background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer;
      font-size: 1.2rem; padding: 4px; line-height: 1; transition: color .2s;
    }
    .verify-phone-banner__close:hover { color: #fff; }
    @media (max-width: 700px) {
      .verify-phone-banner { flex-wrap: wrap; }
      .verify-phone-banner__actions { width: 100%; justify-content: flex-end; }
    }

    /* ── ACTION REQUIRED BANNER ── */
    .action-banner {
      background: linear-gradient(135deg, var(--blue) 0%, #1D4ED8 100%);
      border-radius: var(--r-xl); padding: var(--s5) var(--s6);
      display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s6);
      position: relative; overflow: hidden;
    }
    .action-banner::before {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .action-banner__icon { font-size: 2rem; flex-shrink: 0; position: relative; z-index: 1; }
    .action-banner__content { flex: 1; position: relative; z-index: 1; }
    .action-banner__title { font-size: var(--t-md); font-weight: 700; color: var(--white); margin-bottom: var(--s1); }
    .action-banner__sub { font-size: var(--t-sm); color: rgba(255,255,255,.8); line-height: 1.5; }
    .action-banner__cta { position: relative; z-index: 1; flex-shrink: 0; }

    /* ── ACTIVE CASES ── */
    .case-card-item { border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s5); background: var(--off); }
    .case-card-item:not(:last-child) { margin-bottom: var(--s4); }
    .case-card-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); gap: var(--s3); }
    .case-card-item__addr { font-weight: 700; font-size: var(--t-sm); color: var(--ink); }
    .case-card-item__ref { font-size: 9px; color: var(--text-m); font-family: monospace; margin-top: 1px; }
    .case-card-item__stats {border-bottom: 1px dotted #cecece75;border-top: 1px dotted #cecece87; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s3); margin-bottom: var(--s4); }
    .case-card-item__stat-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-m); margin-bottom: 2px; }
    .case-card-item__stat-val { font-family: var(--font-d); font-size: var(--t-lg); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
    .case-card-item__stat-val.blue { color: var(--blue); }
    .case-card-item__stat-val.green { color: var(--ok); }
    .case-card-item__details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
    .case-card-item__detail-label { font-size: 10px; color: var(--text-m); }
    .case-card-item__detail-val { font-size: var(--t-xs); font-weight: 600; color: var(--ink); }

    /* ── LENDER OFFERS ── */
    .offer-row {
      display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5);
      border-bottom: 1px solid var(--border); transition: background var(--t-fast);
      cursor: pointer;
    }
    .offer-row:hover { background: var(--off); }
    .offer-row:last-child { border-bottom: none; }
    .offer-row__rank { width: 28px; height: 28px; border-radius: 50%; background: var(--off); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-s); flex-shrink: 0; }
    .offer-row__rank.best { background: var(--blue); border-color: var(--blue); color: var(--white); }
    .offer-row__lender { flex: 1; font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
    .offer-row__rate   { font-family: var(--font-d); font-size: var(--t-xl); font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }
    .offer-row__meta   { font-size: var(--t-xs); color: var(--text-m); text-align: right; }
    .offer-row__status { flex-shrink: 0; }

    /* ── DOCUMENT REQUESTS ── */
    .doc-request-intro {
      background: var(--off); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: var(--s5); margin-bottom: var(--s5);
      display: flex; align-items: flex-start; gap: var(--s4);
    }
    .doc-request-intro__icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
    .doc-request-intro__title { font-size: var(--t-md); font-weight: 700; color: var(--ink); margin-bottom: var(--s1); }
    .doc-request-intro__sub { font-size: var(--t-sm); color: var(--text-s); line-height: 1.6; }

    .doc-group { margin-bottom: var(--s6); }
    .doc-group__title { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-m); margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
    .doc-group__badge { font-size: 10px; background: var(--blue-pale); color: var(--blue); padding: 2px 8px; border-radius: var(--r-pill); }
    .doc-group__badge.amber { background: var(--amber-pale); color: var(--amber); }

    .doc-item-card {
      border: 1.5px solid var(--border); border-radius: var(--r-lg);
      padding: var(--s4); margin-bottom: var(--s3);
      transition: all var(--t-base); background: var(--white);
    }
    .doc-item-card:hover { border-color: var(--blue-light); box-shadow: var(--sh-sm); }
    .doc-item-card.uploaded { border-color: var(--ok); background: rgba(5,150,105,.03); }
    .doc-item-card__inner { display: flex; align-items: center; gap: var(--s4); }
    .doc-item-card__icon { font-size: 1.4rem; flex-shrink: 0; }
    .doc-item-card__info { flex: 1; min-width: 0; }
    .doc-item-card__name { font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin-bottom: 2px; }
    .doc-item-card__hint { font-size: var(--t-xs); color: var(--text-m); line-height: 1.5; }
    .doc-item-card__action { flex-shrink: 0; }
    .doc-item-card__uploaded-info { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--ok); font-weight: 600; margin-top: var(--s2); }

    /* Upload mini zone */
    .doc-upload-zone {
      border: 2px dashed var(--border-hi); border-radius: var(--r-md);
      padding: var(--s4); text-align: center; margin-top: var(--s3);
      cursor: pointer; transition: all var(--t-base); display: none;
    }
    .doc-upload-zone.open { display: block; }
    .doc-upload-zone:hover { border-color: var(--blue); background: rgba(37,99,235,.04); }
    .doc-upload-zone.dragging { border-color: var(--blue); background: rgba(37,99,235,.08); transform: scale(1.01); }
    .doc-upload-zone__text { font-size: var(--t-xs); color: var(--text-m); }
    .doc-upload-zone__preview { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s3); padding: var(--s3); background: var(--off); border-radius: var(--r-md); border: 1px solid var(--border); }
    .doc-upload-zone__preview img { max-height: 48px; border-radius: 6px; }
    .doc-upload-zone__preview-name { font-size: var(--t-xs); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .doc-upload-zone__preview-size { font-size: 10px; color: var(--text-m); }
    .doc-upload-zone.uploading { pointer-events: none; opacity: .7; }

    /* ── ACTIVITY / TIMELINE ── */
    .timeline { display: flex; flex-direction: column; }
    .tl-item { display: flex; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); position: relative; }
    .tl-item:last-child { border-bottom: none; }
    .tl-item__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
    .tl-item__dot.blue   { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-glow); }
    .tl-item__dot.ok     { background: var(--ok); }
    .tl-item__dot.amber  { background: var(--amber); }
    .tl-item__dot.grey   { background: var(--border-hi); }
    .tl-item__content { flex: 1; min-width: 0; }
    .tl-item__title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-bottom: 2px; }
    .tl-item__sub   { font-size: var(--t-xs); color: var(--text-m); line-height: 1.5; }
    .tl-item__time  { font-size: var(--t-xs); color: var(--text-m); flex-shrink: 0; white-space: nowrap; }

    /* ── COMMS CHANNEL CHIP ── */
    .channel-list { display: flex; flex-direction: column; gap: var(--s3); }
    .channel-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1.5px solid var(--border); border-radius: var(--r-lg); transition: all var(--t-base); }
    .channel-row.active { border-color: var(--blue); background: var(--blue-pale); }
    .channel-row__icon { font-size: 1.2rem; flex-shrink: 0; }
    .channel-row__label { flex: 1; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
    .channel-row__status { font-size: var(--t-xs); font-weight: 600; }
    .channel-row__status.on  { color: var(--ok); }
    .channel-row__status.off { color: var(--text-m); }
    .channel-toggle { width: 38px; height: 22px; border-radius: 11px; background: var(--border); position: relative; cursor: pointer; transition: background var(--t-base); flex-shrink: 0; border: none; }
    .channel-toggle.on { background: var(--blue); }
    .channel-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform var(--t-base); }
    .channel-toggle.on::after { transform: translateX(16px); }

    /* ── AI PANEL ── */
    .db-ai {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--r-2xl); overflow: hidden;
    }
    .db-ai__head { background: var(--blue); padding: var(--s4) var(--s5); display: flex; align-items: center; gap: var(--s3); }
    .db-ai__ava { width: 34px; height: 34px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; color: var(--white); flex-shrink: 0; }
    .db-ai__name { font-weight: 700; color: var(--white); font-size: var(--t-sm); }
    .db-ai__status { font-size: var(--t-xs); color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 4px; }
    .db-ai__status-dot { width: 6px; height: 6px; background: #4ADE80; border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

    .db-ai__msgs { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); max-height: 320px; overflow-y: auto; background: var(--off); }
    .db-ai__msgs::-webkit-scrollbar { width: 3px; }
    .db-ai__msgs::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

    .ai-bub { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3) var(--s4); font-size: var(--t-xs); line-height: 1.55; box-shadow: var(--sh-sm); animation: fadeUp .35s var(--ease) both; }
    .ai-bub.user { background: var(--blue); color: var(--white); border-color: var(--blue); align-self: flex-end; max-width: 88%; }

    .db-ai__input { padding: var(--s3) var(--s4); border-top: 1px solid var(--border); display: flex; gap: var(--s2); background: var(--white); }
    .db-ai__field { flex: 1; border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: var(--s2) var(--s3); font-size: var(--t-xs); outline: none; transition: border-color var(--t-fast); }
    .db-ai__field:focus { border-color: var(--blue); }
    .db-ai__send { width: 30px; height: 30px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--t-fast); }
    .db-ai__send:hover { background: var(--blue-light); }

    /* ── QUICK ACTIONS ── */
    .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
    .qa-btn { border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); cursor: pointer; background: var(--white); text-align: center; transition: all var(--t-base); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
    .qa-btn:hover { border-color: var(--blue); background: var(--blue-pale); }
    .qa-btn__icon { font-size: 1.4rem; }
    .qa-btn__label { font-size: var(--t-xs); font-weight: 700; color: var(--ink); line-height: 1.3; }

    /* ── CASE DETAIL ── */
    .case-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
    .case-detail-item { }
    .case-detail-item__label { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-m); margin-bottom: var(--s1); }
    .case-detail-item__val { font-size: var(--t-md); font-weight: 700; color: var(--ink); }

    /* ── RESPONSIVE ── */
    @media(max-width:1100px) {
      .db-grid { grid-template-columns: 1fr; }
      .db-nav__title { display: none; }
    }
    @media(max-width:768px) {
      .db-page { padding: var(--s5) var(--s4); }
      .case-grid { grid-template-columns: 1fr 1fr; }
      .case-detail-grid { grid-template-columns: 1fr 1fr; }
      .db-stages__track { gap: 0; padding: var(--s4) var(--s2); }
      .db-stage { min-width: 0; }
      .action-banner { flex-wrap: wrap; }
      .action-banner__cta { width: 100%; }
      .db-nav__inner { padding: 0 var(--s5); }
      .db-nav__sep { display: none; }
    }
    @media(max-width:480px) {
      .case-grid { grid-template-columns: 1fr; }
      .quick-actions { grid-template-columns: 1fr 1fr; }
    }

    /* Layout shell + sidebar CSS moved to assets/css/components.css */