/*
 * ============================================================
 * BRILL VAULT DESKTOP OS V3
 * Bills Center
 * Desktop-only / Read-only interface
 * ============================================================
 */


/* Hide legacy Bills UI only after V3 mounts successfully. */

#view-bills.bv-bills-center-ready
> :not(#bvBillsCenter) {
  display: none !important;
}


/* ============================================================
   ROOT
   ============================================================ */

#bvBillsCenter {
  --bc-panel:
    rgba(12, 19, 31, .92);

  --bc-panel-2:
    rgba(15, 24, 39, .96);

  --bc-border:
    rgba(130, 153, 190, .105);

  --bc-border-blue:
    rgba(72, 130, 224, .27);

  --bc-text:
    #edf2f8;

  --bc-muted:
    #718097;

  --bc-dim:
    #526178;

  --bc-blue:
    #4b87e8;

  --bc-green:
    #54d5a5;

  --bc-gold:
    #d4ad5d;

  --bc-red:
    #df747e;

  display:
    grid;

  gap:
    17px;

  color:
    var(--bc-text);
}


/* ============================================================
   HEADER
   ============================================================ */

.bvbc-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  min-height:
    80px;
}

.bvbc-heading {
  display:
    grid;

  gap:
    4px;
}

.bvbc-kicker {
  margin:
    0;

  color:
    #6e91c4;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .19em;

  text-transform:
    uppercase;
}

.bvbc-heading h1 {
  margin:
    0;

  color:
    #f3f6fa;

  font-size:
    31px;

  font-weight:
    780;

  letter-spacing:
    -.035em;
}

.bvbc-heading p:last-child {
  margin:
    2px
    0
    0;

  color:
    var(--bc-muted);

  font-size:
    11px;
}

.bvbc-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* Chips */

.bvbc-chip {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    34px;

  gap:
    7px;

  padding:
    0
    11px;

  border:
    1px solid
    var(--bc-border);

  border-radius:
    9px;

  background:
    rgba(14, 22, 35, .70);

  color:
    #78879d;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .07em;
}

.bvbc-chip.live {
  border-color:
    rgba(81, 196, 153, .15);

  background:
    rgba(46, 128, 96, .06);

  color:
    #8bc4ad;
}

.bvbc-chip.live::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--bc-green);

  box-shadow:
    0 0 11px
    rgba(84, 213, 165, .52);
}

.bvbc-chip.readonly {
  border-color:
    rgba(91, 134, 200, .18);

  color:
    #84a2cf;
}

.bvbc-refresh {
  min-height:
    34px !important;

  padding:
    0
    13px !important;

  border-radius:
    9px !important;

  font-size:
    9px !important;
}


/* ============================================================
   SUMMARY
   ============================================================ */

.bvbc-summary {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr
    1fr
    1.12fr;

  overflow:
    hidden;

  border:
    1px solid
    var(--bc-border);

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 21, 34, .91),
      rgba(8, 14, 23, .92)
    );
}

.bvbc-stat {
  display:
    grid;

  align-content:
    center;

  min-height:
    82px;

  gap:
    5px;

  padding:
    15px
    18px;

  border-right:
    1px solid
    var(--bc-border);
}

.bvbc-stat:last-child {
  border-right:
    0;
}

.bvbc-stat span {
  color:
    #606f86;

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.bvbc-stat strong {
  color:
    #edf1f7;

  font-size:
    20px;

  font-weight:
    760;
}

.bvbc-stat.due strong {
  color:
    #e1bb76;
}

.bvbc-stat.engine strong {
  font-size:
    11px;

  letter-spacing:
    .04em;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.bvbc-toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    275px;

  align-items:
    center;

  gap:
    15px;
}

.bvbc-filters {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}

.bvbc-filter {
  min-height:
    34px;

  padding:
    0
    13px;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  background:
    transparent;

  color:
    #77859a;

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  transition:
    .16s ease;
}

.bvbc-filter:hover {
  color:
    #dce3ed;

  background:
    rgba(50, 73, 108, .075);
}

.bvbc-filter.active {
  border-color:
    rgba(73, 128, 220, .23);

  background:
    rgba(47, 89, 157, .13);

  color:
    #dfe9fa;
}


/* Search */

.bvbc-search-wrap {
  position:
    relative;
}

.bvbc-search-wrap::before {
  content:
    "⌕";

  position:
    absolute;

  top:
    50%;

  left:
    12px;

  z-index:
    2;

  transform:
    translateY(-50%);

  color:
    #6683ad;

  font-size:
    14px;
}

.bvbc-search {
  width:
    100%;

  min-height:
    36px !important;

  padding:
    0
    12px
    0
    33px !important;

  border:
    1px solid
    rgba(128, 151, 187, .12) !important;

  border-radius:
    10px !important;

  background:
    rgba(8, 14, 23, .72) !important;

  color:
    #e6ebf3 !important;

  font-size:
    10px !important;
}


/* ============================================================
   SPLIT VIEW
   ============================================================ */

.bvbc-split {
  display:
    grid;

  grid-template-columns:
    minmax(520px, 1fr)
    390px;

  align-items:
    start;

  gap:
    14px;
}


/* ============================================================
   BILL BROWSER
   ============================================================ */

.bvbc-browser {
  min-height:
    590px;

  overflow:
    hidden;

  border:
    1px solid
    var(--bc-border);

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 19, 31, .90),
      rgba(8, 14, 23, .93)
    );
}

.bvbc-browser-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    50px;

  padding:
    0
    16px;

  border-bottom:
    1px solid
    var(--bc-border);
}

.bvbc-browser-head strong {
  color:
    #dce3ed;

  font-size:
    10px;

  font-weight:
    780;
}

.bvbc-browser-head span {
  color:
    #58667c;

  font-size:
    8px;
}

.bvbc-list {
  min-height:
    530px;

  max-height:
    calc(100vh - 345px);

  overflow-y:
    auto;

  padding:
    9px;
}


/* Groups */

.bvbc-group {
  margin-bottom:
    13px;
}

.bvbc-group-title {
  padding:
    8px
    10px
    7px;

  color:
    #4f5f76;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;
}


/* Bill row */

.bvbc-item {
  display:
    grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  width:
    100%;

  min-height:
    79px;

  gap:
    12px;

  margin-bottom:
    5px;

  padding:
    10px
    12px;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  background:
    transparent;

  color:
    inherit;

  cursor:
    pointer;

  font:
    inherit;

  text-align:
    left;

  transition:
    .15s ease;
}

.bvbc-item:hover {
  border-color:
    rgba(125, 151, 193, .09);

  background:
    rgba(42, 62, 94, .075);
}

.bvbc-item.selected {
  border-color:
    var(--bc-border-blue);

  background:
    linear-gradient(
      90deg,
      rgba(43, 84, 151, .18),
      rgba(27, 43, 68, .07)
    );

  box-shadow:
    inset 3px 0 0
    var(--bc-blue);
}


/* Icon */

.bvbc-item-icon {
  display:
    grid;

  width:
    38px;

  height:
    38px;

  place-items:
    center;

  border:
    1px solid
    rgba(77, 123, 198, .16);

  border-radius:
    10px;

  background:
    rgba(44, 83, 145, .085);

  color:
    #7ca3df;

  font-size:
    13px;
}

.bvbc-item-icon.finance {
  color:
    #83abeb;
}

.bvbc-item-icon.impound {
  border-color:
    rgba(213, 164, 79, .18);

  background:
    rgba(147, 103, 34, .07);

  color:
    #d2a95f;
}

.bvbc-item-icon.depot {
  color:
    #8998ad;
}


/* Copy */

.bvbc-item-copy {
  display:
    grid;

  min-width:
    0;

  gap:
    4px;
}

.bvbc-item-copy strong {
  overflow:
    hidden;

  color:
    #e6ebf3;

  font-size:
    11px;

  font-weight:
    760;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvbc-item-copy small {
  overflow:
    hidden;

  color:
    #647289;

  font-size:
    8px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* Money */

.bvbc-item-money {
  display:
    grid;

  justify-items:
    end;

  gap:
    5px;
}

.bvbc-item-money strong {
  color:
    #e6ebf3;

  font-size:
    11px;

  font-weight:
    760;
}

.bvbc-item-money span {
  display:
    inline-flex;

  min-height:
    22px;

  align-items:
    center;

  padding:
    0
    7px;

  border:
    1px solid
    rgba(129, 151, 185, .11);

  border-radius:
    999px;

  color:
    #68768c;

  font-size:
    7px;

  font-weight:
    750;
}

.bvbc-item-money span.obligation {
  border-color:
    rgba(218, 168, 81, .15);

  color:
    #caa566;
}


/* Empty */

.bvbc-empty {
  display:
    grid;

  min-height:
    300px;

  place-items:
    center;

  padding:
    35px;

  color:
    #65748a;

  font-size:
    10px;

  line-height:
    1.7;

  text-align:
    center;
}

.bvbc-empty-state {
  display:
    grid;

  max-width:
    300px;

  justify-items:
    center;

  gap:
    10px;
}

.bvbc-empty-symbol {
  display:
    grid;

  width:
    48px;

  height:
    48px;

  place-items:
    center;

  border:
    1px solid
    rgba(75, 132, 222, .17);

  border-radius:
    14px;

  background:
    rgba(47, 88, 153, .07);

  color:
    #75a0e1;

  font-size:
    17px;
}

.bvbc-empty-state strong {
  color:
    #dbe2ec;

  font-size:
    12px;
}

.bvbc-empty.error {
  color:
    #cf8088;
}


/* ============================================================
   BILL INSPECTOR
   ============================================================ */

.bvbc-inspector {
  position:
    sticky;

  top:
    83px;

  min-height:
    590px;

  overflow:
    hidden;

  border:
    1px solid
    var(--bc-border);

  border-radius:
    17px;

  background:
    linear-gradient(
      150deg,
      rgba(15, 24, 39, .96),
      rgba(8, 14, 23, .98)
    );

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, .15);
}

.bvbc-inspector-empty {
  display:
    grid;

  min-height:
    590px;

  place-items:
    center;

  padding:
    35px;

  color:
    #617086;

  font-size:
    10px;

  text-align:
    center;
}


/* Inspector header */

.bvbc-inspector-head {
  display:
    grid;

  gap:
    6px;

  padding:
    19px;

  border-bottom:
    1px solid
    var(--bc-border);
}

.bvbc-inspector-type {
  color:
    #6888b8;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;
}

.bvbc-inspector-head h2 {
  margin:
    0;

  color:
    #f2f5fa;

  font-size:
    21px;

  font-weight:
    770;

  letter-spacing:
    -.03em;
}

.bvbc-inspector-sub {
  color:
    #6d7b91;

  font-size:
    9px;
}


/* Amount */

.bvbc-amount-block {
  display:
    grid;

  gap:
    4px;

  padding:
    18px
    19px;

  border-bottom:
    1px solid
    var(--bc-border);
}

.bvbc-amount-block span {
  color:
    #596a83;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.bvbc-amount-block strong {
  color:
    #f1f4f9;

  font-size:
    26px;

  font-weight:
    650;

  letter-spacing:
    -.035em;
}

.bvbc-amount-block.info strong {
  color:
    #aeb8c7;
}


/* Inspector section */

.bvbc-inspector-section {
  display:
    grid;

  gap:
    11px;

  padding:
    16px
    19px;

  border-bottom:
    1px solid
    var(--bc-border);
}

.bvbc-section-title {
  color:
    #53647d;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;
}

.bvbc-info-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    25px;

  gap:
    18px;
}

.bvbc-info-row span {
  color:
    #68768c;

  font-size:
    9px;
}

.bvbc-info-row strong {
  max-width:
    225px;

  overflow:
    hidden;

  color:
    #dce3ed;

  font-size:
    9px;

  font-weight:
    720;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* Payment policy panel */

.bvbc-policy {
  display:
    grid;

  gap:
    7px;

  padding:
    15px;

  border:
    1px solid
    rgba(78, 126, 201, .14);

  border-radius:
    11px;

  background:
    rgba(43, 77, 132, .055);
}

.bvbc-policy strong {
  color:
    #8fadda;

  font-size:
    9px;
}

.bvbc-policy span {
  color:
    #64758d;

  font-size:
    8px;

  line-height:
    1.55;
}


/* Actions */

.bvbc-actions {
  display:
    grid;

  gap:
    8px;

  padding:
    16px
    19px
    19px;
}

.bvbc-action {
  min-height:
    39px;

  border:
    1px solid
    rgba(77, 132, 223, .21);

  border-radius:
    10px;

  background:
    rgba(44, 83, 147, .10);

  color:
    #a7c3ef;

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    760;

  transition:
    .15s ease;
}

.bvbc-action:hover {
  border-color:
    rgba(77, 132, 223, .36);

  background:
    rgba(48, 91, 161, .17);

  color:
    #dceaff;
}


/* ============================================================
   FOOTER
   ============================================================ */

.bvbc-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    35px;

  padding:
    0
    3px;

  color:
    #4f5e73;

  font-size:
    8px;
}

.bvbc-footer-left,
.bvbc-footer-right {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}

.bvbc-footer-dot {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--bc-green);
}


/* ============================================================
   DESKTOP RESOLUTIONS
   ============================================================ */

@media (max-width: 1450px) {

  .bvbc-split {
    grid-template-columns:
      minmax(480px, 1fr)
      350px;
  }

}

@media (max-width: 1250px) {

  .bvbc-split {
    grid-template-columns:
      minmax(450px, 1fr)
      320px;
  }

  .bvbc-toolbar {
    grid-template-columns:
      minmax(0, 1fr)
      220px;
  }

}