/* === Base === */

body {
  font-family: "Inter", Arial, sans-serif;
  background: #0d1117;
  color: #e6edf3;
  margin: 0;
  padding: 1.0rem;
  display: flex;
  flex-direction: column; /* This enforces stacking on all screen sizes */
  align-items: center;
  -webkit-text-size-adjust: none; /* stop Chrome from shrinking text */
}
/* Theme Overrides */
body.dark { background: #0d1117; color: #e6edf3; } /* Use base colors for dark */
body.light { background: #fff; color: #000; }

/* ===== BEGIN: Header Styles ===== */
header {
    width: 100%;
    /* Max width ensures the header matches the card width */
    max-width: 480px;
    display: flex;
    /* Pushes h1 to the left, and buttons to the right */
    justify-content: space-between;
    /* Vertically centers items */
    align-items: center;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

header h1 {
    /* Override global h1 center alignment and reduce size for header */
    text-align: left;
    margin: 0;
    font-size: 1.5rem;
}

.header-actions {
    /* Ensure buttons align nicely on the right */
    display: flex;
    gap: 0.5rem;
}

.header-actions button {
    /* Adjust buttons to be less imposing in the header */
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    width: auto; /* Allow buttons to size based on content */
}

/* ===== END: Header Styles ===== */


/* === Headings === */
h1 {
  color: #58a6ff; /* Dark Mode Accent Color */
  font-size: 1.8rem;
  margin-bottom: 0.5rem; /* Reduced margin for the collapsible header */
  text-align: center;
}
/* LIGHT MODE Heading Override */
body.light h1 {
  color: #007bff; /* Light Mode Accent Color */
}


/* Sub-headings within the combined content */
.collapsible-content h1 {
  font-size: 1.5rem; /* Smaller size for sub-headings */
  margin-top: 0;
}

/* === Collapsible Section Containers (DETAILS) === */
details {
  background: #161b22; /* Dark Mode Card Background */
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 480px; /* Limits the width for a comfortable reading experience */
  box-sizing: border-box;
  margin-bottom: 1rem; /* Adds space between stacked details sections */
}
/* LIGHT MODE Details Override */
body.light details {
  background: #f7f7f7; /* Light Mode Card Background */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* --- Internal Divs should not have card styling --- */
#trade-inputs, #trade-plan, #ot{
  /* Remove inherited card styles from internal divs */
  background: none;
  padding: 0;
  box-shadow: none;
  margin-bottom: 0;
}

/* === Collapsible Header (SUMMARY) === */
.collapsible-header {
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  list-style: none; /* Hide default arrow/marker */
  /* --- FIX: Use Flexbox to align arrow and title --- */
  display: flex;
  align-items: center;
}

/* FIX: Target h1 inside the summary to override global margins/alignment */
.collapsible-header h1 {
  margin: 0; /* Remove block margins */
  text-align: left;
}

/* Custom arrow/marker for the summary tag - a common trick */
.collapsible-header::-webkit-details-marker {
  display: none;
}
.collapsible-header::before {
  content: '▶'; /* Default arrow (closed) */
  margin-right: 0.7rem;
  display: inline-block;
  transition: transform 0.2s;
  color: #58a6ff; /* Dark Mode Arrow Color */
}
/* LIGHT MODE Arrow Color Override */
body.light .collapsible-header::before {
  color: #007bff;
}

details[open] .collapsible-header::before {
  content: '▼'; /* Open arrow */
  transform: rotate(0deg);
}

/* === Collapsible Content (DIVs inside DETAILS) === */
.collapsible-content {
  padding: 0 1.4rem 1.2rem 1.4rem; /* Match original padding but remove top padding (it's on the summary) */
}

/* --- Horizontal Rule (HR) --- */
hr {
  border: 1px solid #30363d; /* Dark Mode HR Color */
  margin: 1.5rem 0;
}
/* LIGHT MODE HR Override */
body.light hr {
  border-color: #eee;
}

/* === Table (labels inline) === */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0.2rem 0.2rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 1.1rem;
}

td:first-child {
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}

label: { font-size: 1.1rem;  }

/* === Inputs === */
input[type="number"] {
  padding: 0.3rem 0.5rem;
  font-size: 1.1rem;
  border-radius: 8px;
  border: 1px solid #30363d; /* Dark Mode Border */
  background: #0d1117; /* Dark Mode Background */
  color: #e6edf3; /* Dark Mode Text */
  text-align: right;
  width: 100%;
  box-sizing: border-box;
}
/* LIGHT MODE Input Override */
body.light input[type="number"] {
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
}

/* Compact inline inputs for SL & Target */
#slPrice, #targetPrice, #ot-slPrice, #ot-targetPrice {
  width: 6.0rem;
  display: inline-block;
  margin: 0 0.2rem;
}

#slPercent, #targetPercent, #ot-slPercent, #ot-targetPercent {
  width: 5.0rem;
  display: inline-block;
  margin: 0 0.2rem;
}

/* ...... Remove up/down arrows from number inputs ...... */

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* ...... End ...... */

/* ...... Force vertical gap after each inline-row ...... */
div.inline-row {
  flex-wrap: wrap;         /* keep items tidy if they overflow */
  align-items: center;     /* vertically center label + inputs */
  gap: 0.4rem;             /* small spacing between children */
  margin-bottom: 1.2rem !important;  /* 🔥 force gap to apply */
}
/* ...... End ...... */

/* === Checkboxes === */
input[type="checkbox"]{
  transform: scale(1.4);
  margin-right: 0.4rem;
}


/* === Make radio buttons larger === */
input[type="radio"] {
  transform: scale(1.6);      /* increase size (1.0 = normal) */
  margin-right: 0.5rem;       /* small gap between circle and label */
  cursor: pointer;            /* show pointer on hover */
}

/* === Buttons === */
button {
  background-color: #238636;
  color: #fff;
  border: none;
  padding: 1rem 1.2rem;
  font-size: 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}

button:hover { background-color: #2ea043; }

/* ....... Refresh Button Styling ....... */

.tradeEntryButtons {
  background-color: #007bff;       /* Active = blue */
  color: #fff;
  border: none;
  padding: 1rem 1.2rem;
  font-size: 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  width: 100%;
}

.tradeEntryButtons:hover:not(:disabled) {
  background-color: #0a84ff;       /* Lighter blue on hover */
}

.tradeEntryButtons:disabled {
  background-color: #444c56;       /* Grayish when disabled */
  color: #999;
  cursor: not-allowed;
  opacity: 0.8;
}

/* === Desktop layout only === */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  /*
    * REMOVED: flex-direction: row; justify-content: center; align-items: flex-start; gap: 2rem;
    * The body now maintains its default flex-direction: column (stacked).
  */

  h1 { font-size: 1.6rem; }
  .collapsible-content h1 { font-size: 1.3rem; } /* Adjusted sub-heading size for desktop */
  td, input[type="number"] { font-size: 1rem; }
  button { font-size: 1.1rem; padding: 0.8rem 1rem; }
}

/* === Force large comfortable UI for touch devices === */
@media (hover: none) and (pointer: coarse) {
  body { padding: 1rem; }

  h1 { font-size: 2rem; }
  .collapsible-content h1 { font-size: 1.7rem; } /* Adjusted sub-heading size for mobile */

  td { font-size: 1.4rem; }

  label {font-size: 1.4rem;}

  input[type="number"] {
    font-size: 1.4rem;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
  }

  button {
    font-size: 1.5rem;
    padding: 1.1rem;
    border-radius: 12px;
  }

  #slPrice, #slPercent, #targetPrice, #targetPercent {
    width: 5rem;
  }
}

/* === Increase vertical spacing between lines === */
#trade-inputs table tr,
#trade-plan table tr {
  line-height: 1.8;        /* increases text line spacing */
}

#trade-inputs td,
#trade-plan td {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;  /* adds vertical breathing space */
}

#trade-inputs div,
#trade-plan div {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;   /* adds gap between inline blocks like SL/Target */
}

/* ===== BEGIN: Open Trades Styles ===== */

/* Base style for the PnL container (Large Text) */
.ot-pnl {
    font-size: 2.2rem; /* Large text for PnL */
    font-weight: bold;
    text-align: center;
    margin: 1rem 0; /* Add vertical spacing */
}

/* Color classes applied to the span inside ot-pnl */
#ot-current-profit.positive {
    color: #38a169; /* Green for positive PnL */
}

#ot-current-profit.negative {
    color: #e53e3e; /* Red for negative PnL */
}

/* Styles for Target/SL/Option/Updated (Smaller, Bold, White) */
.ot-target-sl-etc {
    font-size: 1.1rem; /* Smaller text */
    color: #e6edf3; /* Default white/light text color */
    margin-bottom: 0.5rem; /* Spacing between detail lines */
    display: flex; /* Use flexbox for label-value alignment */
}
/* LIGHT MODE Muted Label Override */
body.light .ot-target-sl-etc {
    color: #000;
}


/* Bold and slightly muted color for the labels (Target:, SL:, Updated:) */
.ot-target-sl-etc > span:first-child {
    display: inline-block;
    width: 6rem; /* Fixed width for alignment */
    font-weight: normal;
    color: #99a2ad; /* Muted label color */
}
/* LIGHT MODE Muted Label Color Override */
body.light .ot-target-sl-etc > span:first-child {
    color: #6a737d; /* Darker muted color */
}


/* Bold the actual value */
.ot-target-sl-etc > span:last-child {
    font-weight: bold;
    flex-grow: 1;
}
/* LIGHT MODE PnL Value Override */
body.light .ot-target-sl-etc > span:last-child {
    color: #000;
}

/* Fix 1: Add right padding to the whole "Update Target SL" content area */
.ot {
    padding-right: 1.4rem;
}

/* Fix 2: Make the buttons side-by-side and evenly spaced */
.button-row {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Optional: Make buttons share the width evenly */
.button-row button {
    flex-grow: 1;
}
/* ===== END: Open Trades Styles ===== */

/* ===== BEGIN: Closed Trades Styles (New) ===== */

/* Daily PnL Stats */
/* Ensure PnL values in the daily stats follow the Open Trades styling for consistency */
#day-stats .pnl-value {
    font-weight: bold;
    flex-grow: 1;
}

/* Base style for individual closed trade items (the container for each trade row) */
.closed-trade-item {
    font-size: 1.1rem; /* Smaller base text */
    color: #e6edf3; /* Default white/light text color */
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: #161b22; /* Darker background for contrast */
    border-radius: 8px;
    display: flex;
    justify-content: space-between; /* Space out left and right content */
    align-items: center; /* Vertically centers content */
}

/* Light mode override for closed trade items */
body.light .closed-trade-item {
    background: #f7f7f7;
    border: 1px solid #ccc;
    color: #000;
}

/* Style for the LEFT side content container (Trade #, Option Name, Entry Time) */
.closed-trade-item .trade-info-left {
    flex-grow: 1;
    line-height: 1.3; /* Tighter line height for trade info */
}

/* Style for Trade ID and Option Name for subtle emphasis */
.closed-trade-item strong {
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Style for the Entry Time line (Make it smaller and muted) */
.closed-trade-item .trade-time-label {
    color: #99a2ad; /* Muted color for "Entry:" label */
    font-size: 0.95rem;
}
.closed-trade-item .trade-time {
    font-size: 0.95rem; /* Smaller size for time value */
}
body.light .closed-trade-item .trade-time-label {
    color: #6a737d;
}

/* Style for the RIGHT side PnL container (PnL % and PnL Amount) */
.closed-trade-pnl {
    text-align: right;
    display: flex;
    flex-direction: column; /* Stacks the percentage and amount */
    align-items: flex-end; /* Right-aligns the text stack */
    padding-left: 0.0rem;
}

/* PnL Percentage Value (Primary focus) */
.closed-trade-pnl .pnl-pct-val {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
}

/* PnL Net Amount Value (Secondary, smaller focus) */
.closed-trade-pnl .pnl-net-val {
    font-size: 0.95rem; /* Smaller size for the absolute amount */
    font-weight: normal; /* Less bold emphasis */
    line-height: 1.2;
}


/* Color classes for PnL (reusing open trade colors) */
.closed-trade-pnl.positive, #day-net-pnl.positive {
    color: #38a169; /* Green for positive PnL */
}

.closed-trade-pnl.negative, #day-net-pnl.negative {
    color: #e53e3e; /* Red for negative PnL */
}


/* Mobile/Touch Overrides for better readability */
@media (hover: none) and (pointer: coarse) {
    .closed-trade-item {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
    .closed-trade-pnl .pnl-pct-val {
        font-size: 1.4rem;
    }
    .closed-trade-pnl .pnl-net-val {
        font-size: 1.1rem;
    }
}

/* ===== END: Closed Trades Styles ===== */