/* www/custom.css */

/*—— Tooltip —————————————————————————————————————————*/
.tooltip-left-align {
  text-align: left !important;
}
.tooltip-inner {
  max-width: none !important;
  font-size: 16px !important;
  background-color: #2d3a46 !important; 
  color: #eae9e4 !important;
}

/*—— Sidebar font & styling —————————————————————————*/
.sidebar-menu > li > a {
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #edefec !important;
}
.sidebar-menu > li.header {
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #3e3e40 !important;
}

/*—— Box headers to match dashboard header —————————————*/
.box-header {
  background-color: #2d3a46 !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
}

/*—— DataTable styling —————————————————————————————————*/
table.dataTable thead {
  background-color: #2d3a46 !important;
  color: #FFFFFF !important;
  font-weight: bold;
  border-bottom: 2px solid #2d3a46 !important;
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 700 !important;
  font-size: 14x;
}
table.dataTable thead th {
  border-bottom: none !important;
  font-family: 'Nanum Myeongjo', serif !important;
  font-size: 15px !important;       /* larger and valid unit */
  padding: 0.5px 0.5px;
  min-height: 24px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.dataTables_wrapper {
  padding: 0px !important;
  margin: 0px !important;
}
table.dataTable tbody tr:nth-child(odd) {
  background-color: #eae9e4 !important;
}
table.dataTable tbody tr:nth-child(even) {
  background-color: #dedbd3 !important;
}
table.dataTable tbody tr:hover {
  background-color: #E3D8C8 !important;
}
table.dataTable tbody td {
  border: 1px solid #eae9e4 !important;
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 400 !important;
  font-size: 15px;
}

/* enlarge the DT search label */
.dataTables_wrapper .dataTables_filter label {
  font-size: 1em !important;    /* or 1.1em, 1.2em… */
  font-weight: 500 !important;   /* optional: make it a bit bolder */
}

/* 1) Lighten the table header a touch more */
.dataTables_wrapper .dataTables_scrollHeadInner table th {
  background-color: #3a4552 !important;   /* tweak this hex to taste # #3a4552 304051 32495e*/ 
  color:           #eef1f5 !important;
  border-bottom:   1px solid rgba(255,255,255,0.2) !important;
}

/* Selected row styling using box-shadow */
    table.dataTable tbody tr.selected td,
    table.dataTable tbody td.selected {
      box-shadow: inset 0 0 0 9999px ##2d1dde !important;
    }

    
/* Ensure no default background colors interfere */
    :root {
      --dt-row-selected: transparent !important;
      --dt-row-selected-text: #3e3e40 !important;
    }

/*—— Global font application —————————————————————————*/
body, .box, .info-box, .dataTables_wrapper, table.dataTable {
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 400 !important;
}

h1, h2, h3, h4 {
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 400 !important;
}

/* in www/custom.css, after your other DataTable rules */
.dataTables_wrapper .dataTables_filter {
  /* still float right, but inset 30px from the edge */
  float: right !important;
  margin-right: 18px !important;
}

/* Increase box title size */
.box-header .box-title {
  font-size: 1.6em !important;     /* tweak this to taste */
}

/*—— Reactable polished to match DT exactly —————————————————*/

/* Ensure consistent box sizing */
.reactable,
.reactable * {
  box-sizing: border-box !important;
}

/* 1) Striping & hover on entire row container (full width) */
.reactable .rt-tbody .rt-tr-group:nth-child(odd) {
  background-color: #eae9e4 !important;
}
.reactable .rt-tbody .rt-tr-group:nth-child(even) {
  background-color: #dedbd3 !important;
}
.reactable .rt-tbody .rt-tr-group:hover {
  background-color: #E3D8C8 !important;
}

/* 2) Remove any background on cells so row color shows through */
.reactable .rt-td,
.reactable .rt-td-inner {
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Cell padding & left-border on inner element (no bottom-border) */
.reactable .rt-td-inner {
  padding: 4px 6px !important;
  border-left: 1px solid #eae9e4 !important;
  border-bottom: none !important;
  background-clip: padding-box !important;
}

/* no left border on first column */
.reactable .rt-td-inner:first-child {
  border-left: none !important;
}

/* 4) Single thin border under each row container */
.reactable .rt-tbody .rt-tr-group {
  border-bottom: 2px solid #eae9e4 !important;
}

/* 5) Header background & full-width bottom border on the header row-group */
.reactable .rt-thead {
  background-color: #3a4552 !important;
}
.reactable .rt-thead .rt-tr-group {
  border-bottom: 2px solid #3a4552 !important;
}

/* Adjust table header */
.reactable .rt-thead .rt-th {
  padding-top: 7px;    /* Line 27 - vertical padding adds height */
  padding-bottom: 4px;
  font-size: 15px !important;      /* Line 25 - larger font increases height */
  border-bottom: none !important;
  font-family: 'Nanum Myeongjo', serif !important;
}

/* remove cell-level bottom borders in the header */
.reactable .rt-thead .rt-th-inner {
  border-bottom: none !important;
  padding: 4px 6px !important;
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  border-left: 1px solid #eae9e4 !important;
  background-clip: padding-box !important;
}
/* no left border on first header cell */
.reactable .rt-thead .rt-th-inner:first-child {
  border-left: none !important;
}

/* 6) Vertical cell dividers on inner so never hidden */
.reactable .rt-th-inner,
.reactable .rt-td-inner {
  border-right: 2px solid #eae9e4 !important;
}

/* remove right border on last column */
.reactable .rt-th-inner:last-child,
.reactable .rt-td-inner:last-child {
  border-right: none !important;
}

/* 7) Table container styling */
.reactable .rt-table {
  background-color: transparent !important;
  width: 100% !important;
  table-layout:  fixed !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 8) Header and body container styling */
.reactable .rt-thead,
.reactable .rt-tbody {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 9) Remove any default reactable row or cell borders */
.reactable .rt-tr,
.reactable .rt-tr-group .rt-td {
  border: none !important;
}

/* 10) Ensure proper scrolling behavior */
.reactable {
  overflow: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ——— Fill the “empty” part of a reactable with stripe background ——— */
.reactable {
  background-color: #eae9e4 !important;
}
.reactable .rt-table {
  background-color: #eae9e4 !important;
}
/* ensure the tbody area (beyond the last row) also picks up that color */
.reactable .rt-tbody {
  background-color: #eae9e4 !important;
}

/* kill any extra bottom-margin from Shiny’s .form-group wrapper */
.box-body .form-group {
  margin-bottom: 0 !important;
}

/* Target only the Reactable search label */
.box-body > .dataTables_wrapper > .dataTables_filter label {
  font-size: 14px !important;
}

/* Auto-Map button styling */
.btn-primary {
    color: white !important;
    background-color: #2d3a46 !important;
    border-color: #2d3a46 !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    white-space: normal !important;     /* Allow text wrapping */
    min-height: 38px !important;        /* Ensure consistent height */
    height: auto !important;            /* Allow height to grow with wrapped text */
    padding: 6px 8px !important;        /* Slightly reduced padding */
    font-size: 0.9em !important;        /* Slightly smaller font */
    max-width: 100% !important;         /* Ensure button doesn't overflow container */
    overflow-wrap: break-word !important; /* Force word breaking if needed */
    word-wrap: break-word !important;    /* For broader browser support */
}

.btn-primary:hover {
    color: #FFFFFF !important;
    background-color: #3d4a56 !important;
    border-color: #3d4a56 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* enlarge & nudge down the per-bank heading */
.bank-name {
  font-size:     1.3em !important;   /* keep your size */
  margin-top:    0.8em !important;   /* ↑ move it down a bit more */
  margin-bottom: -0.6em !important;  /* pull the box up slightly */
  line-height:   1.2 !important;
}

.connect-bank-btn {
  /* modest resting blue */
  background-color:    #40505c !important;
  border-color:        #40505c !important;
  color:               #fff    !important;
  margin-top: 4px;       /* nudge it down */
  font-size: 1.1em;      /* bump up the size */
  padding: 6px 10px;     /* a bit roomier */
  margin-left:         0.7rem  !important;   /* nudge it over */
  transition:          background-color 0.2s ease, color 0.2s ease !important;
}

/* on hover, invert to white */
.connect-bank-btn:hover {
  background-color:    #ffffff !important;
  border-color:        #ddd    !important;
  color:               #2d3a46 !important;
}

/* Success (green) buttons */
/* Toned-down Success (green) buttons */
button.btn-success,
a.btn-success,
.btn-success.action-button {
  background-color: #5e6f0d !important;
  border-color:     #5e6f0d !important;
  color:            #ffffff !important;
}
button.btn-success:hover,
a.btn-success:hover,
.btn-success.action-button:hover {
  background-color: #4e5a0b !important;
  border-color:     #4e5a0b !important;
}

/* Danger (red) buttons */
button.btn-danger,
a.btn-danger,
.btn-danger.action-button {
  background-color: #9f2c36 !important;
  border-color:     #9f2c36 !important;
  color:            #ffffff !important;
}
button.btn-danger:hover,
a.btn-danger:hover,
.btn-danger.action-button:hover {
  background-color: #7a2228 !important;  /* darker on hover */
  border-color:     #7a2228 !important;
}

/* ---------- Modal title ---------- */
.modal-header .modal-title {
  font-size: 15pt !important;
  font-weight: 600 !important;
}

/* ---------- Modal body text ---------- */
.modal-body {
  font-size: 12pt !important;
  font-weight: 400 !important;
}

/* ---------- Everything inside the body (p, br, DTOutput, etc.) */
.modal-body * {
  font-size: 12pt !important;
}

/* ---------- Modal footer (buttons) ---------- */
.modal-footer {
  font-size: 12pt !important;
}

/* ─── DataTables header font ───────────────────────────────────────── */
table.dataTable thead th {
  font-size: 17px !important;        /* or whatever size you prefer */
  line-height: 1.2 !important;        /* keep the cells tall enough */
}

/* if you have a scroll-head wrapper too: */
.dataTables_wrapper .dataTables_scrollHeadInner table th {
  font-size: 17px !important;
}

/* ─── Reactable header font ───────────────────────────────────────── */
.reactable .rt-thead .rt-th-inner {
  font-size: 17px !important;        /* match your DT size */
  line-height: 1.3 !important;
}

/* (optional) increase the little sorting arrows a bit to match: */
.reactable .rt-thead .rt-th {
  padding-top: 8px !important;
  padding-bottom: 6px !important;
}