/**
 * fra2_tables.css — Unified stylesheet for FRA, Tuition, and PAL Deposit tables
 * --------------------------------------------------------------------------
 * Merged: original FRA/PAL/Tuition CSS + inline fra2.php rules
 * + corrected PO box styling + view/edit consistency.
 */

/* =======================================================
   FRA2 MAIN WRAPPER
   ======================================================= */
#fra2 {
  box-sizing: border-box;
  max-width: 100%;
  font-family: sans-serif;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Align PO box to right inside accordion */
#fra2 .po-row {
  text-align: right;
  margin-bottom: 1em;
}

/* Keep compatibility with your prior float-right layout */
.po-box-wrapper,
#fra2 .po-box-wrapper {
  display: inline-block;
  vertical-align: top;
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

/* Clearer separation for downstream elements */
.clearfix {
  clear: both;
}

/* =======================================================
   PO BOX
   ======================================================= */
.sidebar-po-box,
#fra2 .sidebar-po-box {
  width: 240px;
  border: 1px solid #dcdcdc;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border-collapse: collapse;
  font-family: sans-serif;
}

/* Blue header (as requested) */
.sidebar-po-box .po-header,
#fra2 .sidebar-po-box .po-header {
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  color: #004b7f;           /* BLUE */
  background-color: #eaf2fa;
  padding: 6px;
  border-bottom: 1px solid #ccc;
}

.sidebar-po-box td,
#fra2 .sidebar-po-box td {
  text-align: center;
  padding: 6px;
}

/* Edit-mode PO inputs */
.sidebar-po-box input[type="text"],
.sidebar-po-box input[type="date"],
#fra2 .sidebar-po-box input[type="text"],
#fra2 .sidebar-po-box input[type="date"] {
  width: 70%;
  font-size: 0.95em;
  color: #0000ff;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 3px 4px;
}

/* Date row in PO box */
.date-row,
#fra2 .date-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

/* VIEW MODE — centered vertical stacking for expiry */
.po-value-view,
#fra2 .po-value-view {
  font-weight: bold;
  color: #0000ff;
  text-align: center;
  display: block;
  margin-top: 4px;
}

/* Wrapper for centered Expires + Date in view mode */
.po-view-wrapper,
#fra2 .po-view-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* =======================================================
   FRA, Tuition, PAL Main Content
   ======================================================= */
#fra2 .fra-main {
  text-align: justify;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

/* =======================================================
   Generic Table + Container Formatting
   ======================================================= */
.table-container {
  position: relative;
}

table {
  border-collapse: collapse;
  width: 98%;
  margin: 0 auto;
  font-size: 0.95em;
}

th, td {
  padding: 6px;
  text-align: left;
  white-space: nowrap;
}

th {
  background-color: #e0e0e0;
  font-weight: bold;
  text-align: center;
}

/* =======================================================
   FRA-Specific Formatting (unchanged)
   ======================================================= */
.usd-flagged {
  color: red !important;
}

.currency-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  user-select: none;
  pointer-events: auto;
  vertical-align: middle;
}

button.currency-toggle {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 5px;
  cursor: pointer;
}

button.currency-toggle:focus {
  outline: none;
  box-shadow: none;
}

button.currency-toggle img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.exchange-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.75em;
  color: #3399ff;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* =======================================================
   Tuition and PAL Deposit Formatting (unchanged)
   ======================================================= */
.tuition-table th,
.paldeposit-table th {
  background-color: #e0e0e0;
  font-weight: bold;
  font-size: 0.95em;
  text-align: center;
  padding: 6px;
}

.tuition-table td,
.paldeposit-table td {
  padding: 6px;
  font-size: 0.95em;
}

.tuition-table td[contenteditable="true"],
.paldeposit-table td[contenteditable="true"] {
  background-color: #fdfdfd;
}

.tuition-table,
.paldeposit-table {
  border: 1px solid #dcdcdc;
}

.paldeposit-table {
  width: 98%;
  margin: 0 auto;
}

.payment-method {
  font-size: 9pt;
}

/* =======================================================
   Dropdown & Buttons (unchanged)
   ======================================================= */
#description-dropdown select {
  margin-right: 6px;
  padding: 3px;
  font-size: 0.9em;
}

#description-dropdown button {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#description-dropdown button:hover {
  background: #45a049;
}

/* =======================================================
   Date Input Styling (global)
   ======================================================= */
input[type="date"] {
  padding: 6px 12px;
  font-size: 1em;
  color: #0000ff;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9ff;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(21%) sepia(92%) saturate(7494%) hue-rotate(239deg) brightness(90%) contrast(122%);
  cursor: pointer;
  margin-left: 4px;
}

/* =======================================================
   Highlighting (unchanged)
   ======================================================= */
tr.highlight-latest td {
  color: red;
  font-weight: bold;
}

/* =======================================================
   Responsive Adjustments
   ======================================================= */
@media (max-width: 900px) {
  #fra2 .po-row {
    text-align: center;
  }

  #fra2 .sidebar-po-box {
    width: 90%;
  }

  .po-box-wrapper {
    float: none;
    margin-left: 0;
  }
}