/* =========================================================
   BIVA V2
   COMPANY FINANCE — TRANSACTIONS
   ========================================================= */

.company-finance-transactions-page {
  --finance-bg:
    #f5f7fb;

  --finance-surface:
    rgba(
      255,
      255,
      255,
      0.94
    );

  --finance-surface-soft:
    #f8fafc;

  --finance-border:
    rgba(
      15,
      23,
      42,
      0.09
    );

  --finance-text:
    #0f172a;

  --finance-muted:
    #64748b;

  --finance-primary:
    #173b7a;

  --finance-primary-dark:
    #0b1f48;

  --finance-primary-soft:
    #eef4ff;

  --finance-gold:
    #f4bb18;

  --finance-success:
    #0f9f6e;

  --finance-success-soft:
    #eafaf4;

  --finance-danger:
    #dc3545;

  --finance-danger-soft:
    #fff0f1;

  --finance-warning:
    #d59600;

  --finance-warning-soft:
    #fff8e4;

  --finance-shadow:
    0 18px 45px
    rgba(
      15,
      23,
      42,
      0.07
    );

  --finance-radius:
    22px;

  --finance-radius-sm:
    14px;

  min-height:
    100%;

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



/* =========================================================
   WORKSPACE
   ========================================================= */

.company-finance-workspace {
  display:
    flex;

  flex-direction:
    column;

  gap:
    24px;

  width:
    100%;

  padding-bottom:
    36px;
}



/* =========================================================
   PANEL
   ========================================================= */

.company-finance-panel {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(
      --finance-surface
    );

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

  border-radius:
    var(
      --finance-radius
    );

  box-shadow:
    var(
      --finance-shadow
    );

  padding:
    24px;
}


.company-finance-panel::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(
        --finance-gold
      ),
      #ffda62 35%,
      #2f65ca 72%,
      var(
        --finance-primary
      )
    );
}



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

.company-finance-panel__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    24px;
}


.company-finance-panel__header > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.company-finance-panel__header span {
  display:
    inline-flex;

  width:
    fit-content;

  color:
    var(
      --finance-primary
    );

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.company-finance-panel__header h2 {
  margin:
    0;

  color:
    var(
      --finance-text
    );

  font-size:
    clamp(
      22px,
      2vw,
      29px
    );

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    -0.03em;
}


.company-finance-panel__header p {
  max-width:
    720px;

  margin:
    4px 0 0;

  color:
    var(
      --finance-muted
    );

  font-size:
    14px;

  line-height:
    1.65;
}



/* =========================================================
   FILTERS
   ========================================================= */

.company-finance-filters {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;

  padding:
    20px;

  background:
    linear-gradient(
      180deg,
      #fbfcff,
      #f6f8fc
    );

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

  border-radius:
    18px;
}


.company-finance-filters label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;
}


.company-finance-filters label > span {
  color:
    #334155;

  font-size:
    12px;

  font-weight:
    700;
}


.company-finance-filters input,
.company-finance-filters select {
  width:
    100%;

  min-height:
    46px;

  padding:
    0 13px;

  border:
    1px solid
    #dce3ef;

  border-radius:
    12px;

  outline:
    none;

  background:
    #ffffff;

  color:
    var(
      --finance-text
    );

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    600;

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


.company-finance-filters input:hover,
.company-finance-filters select:hover {
  border-color:
    #c3cfe0;
}


.company-finance-filters input:focus,
.company-finance-filters select:focus {
  border-color:
    #376ac7;

  background:
    #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(
      55,
      106,
      199,
      0.11
    );
}


.company-finance-filter-actions {
  grid-column:
    1 / -1;

  display:
    flex;

  justify-content:
    flex-end;

  align-items:
    center;

  gap:
    10px;

  padding-top:
    4px;
}


.company-finance-filter-actions .btn {
  min-width:
    130px;
}



/* =========================================================
   STATUS MESSAGE
   ========================================================= */

.company-finance-status {
  min-height:
    18px;

  margin-top:
    14px;

  color:
    var(
      --finance-muted
    );

  font-size:
    12px;

  font-weight:
    600;
}


.company-finance-status[data-type="success"] {
  color:
    var(
      --finance-success
    );
}


.company-finance-status[data-type="error"] {
  color:
    var(
      --finance-danger
    );
}



/* =========================================================
   TRANSACTION TABLE WRAPPER
   ========================================================= */

.company-finance-table-wrap {
  width:
    100%;

  overflow-x:
    auto;

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

  border-radius:
    18px;

  background:
    #ffffff;

  scrollbar-width:
    thin;

  scrollbar-color:
    #cbd5e1
    transparent;
}


.company-finance-table-wrap::-webkit-scrollbar {
  height:
    8px;
}


.company-finance-table-wrap::-webkit-scrollbar-thumb {
  background:
    #cbd5e1;

  border-radius:
    999px;
}



/* =========================================================
   TABLE
   ========================================================= */

.company-finance-table {
  width:
    100%;

  min-width:
    1080px;

  border-collapse:
    separate;

  border-spacing:
    0;
}


.company-finance-table thead th {
  padding:
    14px 16px;

  background:
    #f8fafc;

  border-bottom:
    1px solid
    #e8edf5;

  color:
    #64748b;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.company-finance-table tbody td {
  padding:
    17px 16px;

  border-bottom:
    1px solid
    #edf1f6;

  color:
    #334155;

  font-size:
    13px;

  vertical-align:
    middle;
}


.company-finance-table tbody tr:last-child td {
  border-bottom:
    none;
}


.company-finance-table tbody tr {
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}


.company-finance-table tbody tr:hover {
  background:
    #f8fbff;
}


.company-finance-table td strong {
  display:
    block;

  color:
    var(
      --finance-text
    );

  font-size:
    13px;

  font-weight:
    800;
}


.company-finance-table td small {
  display:
    block;

  max-width:
    250px;

  margin-top:
    4px;

  overflow:
    hidden;

  color:
    var(
      --finance-muted
    );

  font-size:
    11px;

  line-height:
    1.45;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}



/* =========================================================
   BETTER EMPHASIS
   ========================================================= */

.company-finance-table tbody td:nth-child(2) {
  font-weight:
    700;
}


.company-finance-table tbody td:nth-child(6) strong {
  color:
    var(
      --finance-primary-dark
    );

  white-space:
    nowrap;
}


.company-finance-table tbody td:nth-child(7) {
  font-weight:
    700;
}



/* =========================================================
   EMPTY STATE
   ========================================================= */

.company-finance-empty {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    190px;

  padding:
    30px;

  border:
    1px dashed
    #ccd6e5;

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      #fbfcfe,
      #f7f9fc
    );

  color:
    var(
      --finance-muted
    );

  font-size:
    13px;

  font-weight:
    600;

  text-align:
    center;
}



/* =========================================================
   PAGINATION
   ========================================================= */

.company-finance-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-top:
    18px;

  padding:
    14px 16px;

  background:
    #f8fafc;

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

  border-radius:
    16px;
}


.company-finance-pagination span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    90px;

  color:
    #334155;

  font-size:
    12px;

  font-weight:
    800;
}


.company-finance-pagination .btn {
  min-width:
    110px;
}


.company-finance-pagination .btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;

  transform:
    none;
}



/* =========================================================
   PAGE ACTION
   ========================================================= */

.company-finance-transactions-page
.btn-primary {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  background:
    linear-gradient(
      135deg,
      #112d63,
      #1d4f9e
    );

  color:
    #ffffff;

  box-shadow:
    0 8px 20px
    rgba(
      23,
      59,
      122,
      0.18
    );

  font-weight:
    700;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}


.company-finance-transactions-page
.btn-primary:hover {
  transform:
    translateY(
      -1px
    );

  box-shadow:
    0 12px 25px
    rgba(
      23,
      59,
      122,
      0.25
    );

  filter:
    brightness(
      1.04
    );
}


.company-finance-transactions-page
.btn-outline {
  border:
    1px solid
    #d9e1ec;

  background:
    #ffffff;

  color:
    #334155;

  box-shadow:
    0 3px 10px
    rgba(
      15,
      23,
      42,
      0.04
    );

  font-weight:
    700;
}


.company-finance-transactions-page
.btn-outline:hover:not(:disabled) {
  border-color:
    #bdc9da;

  background:
    #f8fafc;

  color:
    var(
      --finance-primary
    );
}



/* =========================================================
   RECORD TRANSACTION HERO BUTTON
   ========================================================= */

#companyFinanceRecordBtn {
  min-height:
    46px;

  padding:
    0 20px;

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      #0c1d43,
      #173b7a
    );

  color:
    #ffffff;

  box-shadow:
    0 10px 25px
    rgba(
      4,
      15,
      38,
      0.25
    );
}


#companyFinanceRecordBtn::before {
  content:
    "+";

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    20px;

  height:
    20px;

  margin-right:
    7px;

  border-radius:
    6px;

  background:
    var(
      --finance-gold
    );

  color:
    #111827;

  font-size:
    16px;

  font-weight:
    900;

  line-height:
    1;
}



/* =========================================================
   DESKTOP — SMALLER ADMIN WIDTH
   ========================================================= */

@media (
  max-width:
    1180px
) {

  .company-finance-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
    900px
) {

  .company-finance-workspace {
    gap:
      18px;
  }


  .company-finance-panel {
    padding:
      20px;
  }


  .company-finance-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    padding:
      16px;
  }


  .company-finance-filter-actions {
    justify-content:
      stretch;
  }


  .company-finance-filter-actions .btn {
    flex:
      1;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width:
    640px
) {

  .company-finance-workspace {
    gap:
      14px;
  }


  .company-finance-panel {
    padding:
      16px;

    border-radius:
      18px;
  }


  .company-finance-panel__header {
    margin-bottom:
      18px;
  }


  .company-finance-panel__header h2 {
    font-size:
      22px;
  }


  .company-finance-panel__header p {
    font-size:
      13px;
  }


  .company-finance-filters {
    grid-template-columns:
      1fr;

    gap:
      12px;

    padding:
      14px;

    border-radius:
      15px;
  }


  .company-finance-filters input,
  .company-finance-filters select {
    min-height:
      48px;

    font-size:
      14px;
  }


  .company-finance-filter-actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .company-finance-filter-actions .btn {
    width:
      100%;

    min-height:
      46px;
  }


  .company-finance-table-wrap {
    border-radius:
      15px;
  }


  .company-finance-table {
    min-width:
      930px;
  }


  .company-finance-table thead th {
    padding:
      12px;

    font-size:
      9px;
  }


  .company-finance-table tbody td {
    padding:
      14px 12px;
  }


  .company-finance-pagination {
    display:
      grid;

    grid-template-columns:
      1fr 80px 1fr;

    padding:
      10px;

    border-radius:
      14px;
  }


  .company-finance-pagination .btn {
    min-width:
      0;

    width:
      100%;
  }


  #companyFinanceRecordBtn {
    width:
      100%;
  }

}



/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (
  max-width:
    420px
) {

  .company-finance-panel {
    padding:
      13px;
  }


  .company-finance-panel__header h2 {
    font-size:
      20px;
  }


  .company-finance-pagination {
    grid-template-columns:
      1fr;

    text-align:
      center;
  }


  .company-finance-pagination span {
    order:
      -1;

    width:
      100%;
  }

}




/* =========================================================
   RECORD TRANSACTION MODAL
   ========================================================= */

.company-finance-record-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  padding-top:
    4px;
}


.company-finance-record-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;
}


.company-finance-record-form label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.company-finance-record-form label > span {
  color:
    #334155;

  font-size:
    12px;

  font-weight:
    800;
}


.company-finance-record-form input,
.company-finance-record-form select,
.company-finance-record-form textarea {
  width:
    100%;

  border:
    1px solid
    #dbe3ef;

  border-radius:
    12px;

  outline:
    none;

  background:
    #ffffff;

  color:
    #0f172a;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    600;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.company-finance-record-form input,
.company-finance-record-form select {
  min-height:
    46px;

  padding:
    0 13px;
}


.company-finance-record-form textarea {
  min-height:
    90px;

  padding:
    12px 13px;

  resize:
    vertical;

  line-height:
    1.55;
}


.company-finance-record-form input:focus,
.company-finance-record-form select:focus,
.company-finance-record-form textarea:focus {
  border-color:
    #376ac7;

  box-shadow:
    0 0 0 4px
    rgba(
      55,
      106,
      199,
      0.1
    );
}


.company-finance-record-form
[hidden] {
  display:
    none !important;
}


@media (
  max-width:
    640px
) {

  .company-finance-record-grid {
    grid-template-columns:
      1fr;
  }

}




/* =========================================================
   FINANCE BADGES
   ========================================================= */

.company-finance-type-badge,
.company-finance-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;

  padding: 4px 9px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  white-space: nowrap;
}


.company-finance-type-badge.is-income {
  background: #e8faf2;
  color: #087a55;
}


.company-finance-type-badge.is-expense {
  background: #fff0f1;
  color: #c83245;
}


.company-finance-type-badge.is-transfer {
  background: #edf4ff;
  color: #285da8;
}


.company-finance-type-badge.is-neutral {
  background: #f1f5f9;
  color: #475569;
}


.company-finance-status-badge.is-completed {
  background: #e8faf2;
  color: #087a55;
}


.company-finance-status-badge.is-pending {
  background: #fff8df;
  color: #946900;
}


.company-finance-status-badge.is-voided {
  background: #fff0f1;
  color: #b72e3d;
}


.company-finance-status-badge.is-neutral {
  background: #f1f5f9;
  color: #475569;
}



/* =========================================================
   FX PREVIEW
   ========================================================= */

.company-finance-fx-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;

  min-height: 78px;

  padding: 12px 14px;

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

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #eef4ff
    );
}


.company-finance-fx-preview span {
  color: #64748b;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


.company-finance-fx-preview strong {
  color: #102d61;

  font-size: 18px;
  font-weight: 900;
}


.company-finance-record-form small {
  color: #64748b;

  font-size: 10px;
  line-height: 1.5;
}