/* style.css – Responsive design for TrackFolio */

:root {
  --color-bg: #111;
  --color-text: #ddd;
  --color-input-bg: #222;
  --color-border: #555;
  --color-border-light: #ccc;
  --color-warning: #f39c12;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --add-control-size: calc(1em + 2 * var(--space-xs));
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: sans-serif;
  padding: var(--space-md);
  width: 100%;
}

table {
  border-collapse: collapse;
  margin-top: var(--space-md);
}

th, td {
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid #333;
  text-align: right;
}


input, select, button {
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

form.inline {
  display: inline-block;
  margin: 0;
}

.is-hidden {
  display: none !important;
}

.errors {
  color: red;
  white-space: pre-wrap;
  margin-top: var(--space-md);
}

/* Add-holding toggle (+) button */
#add-form-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Match table row height */
  width: var(--add-control-size);
  height: var(--add-control-size);
  font-size: 1em;
  border: 2px solid var(--color-border-light);
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #8e2de2);
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

/* Hamburger menu toggle button */
#action-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1em + 2*var(--space-xs));
  height: calc(1em + 2*var(--space-xs));
  font-size: 1em;
  border: 2px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(135deg, #00d4ff, #8e2de2);
  background-origin: border-box;
  background-clip: content-box, border-box;
  color: #fff;
  cursor: pointer;
}

#action-menu-toggle:hover {
  color: #00d4ff;
}


/* Ensure the add-holding area keeps a constant height */
#add-holding-container {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 50;
  /* Match table row height */
  min-height: var(--add-control-size);
  vertical-align: top;
  /* Prevent overlap with chart and value */
/*  margin-top: calc(var(--space-md) * 2);*/
}

#add-holding-form {
  display: inline-flex;
  align-items: center;
  min-height: var(--add-control-size);
}

#add-holding-form input,
#add-holding-form select,
#add-holding-form button {
  height: var(--add-control-size);
  box-sizing: border-box;
}

#add-holding-form button {
  padding: 0 2px;
}

body.add-form-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Row‑coloring on each cell */
tr.crypto    td { background-color: #144d14; }
tr.stock     td { background-color: #14314d; }
tr.etf       td { background-color: #143838; }
tr.mf        td { background-color: #452f06; }
tr.metal     td { background-color: #3c3c3c; }
tr.cash      td { background-color: #4d4d14; }

/* Matching card colors for mobile view */
.holding-card.crypto { background-color: #144d14; }
.holding-card.stock { background-color: #14314d; }
.holding-card.etf    { background-color: #143838; }
.holding-card.mf     { background-color: #452f06; }
.holding-card.metal  { background-color: #3c3c3c; }
.holding-card.cash   { background-color: #4d4d14; }

table#holdings tbody input[name="amount"] {
  width: 60px;
}

/* there is alspo an exceptiopn for thisw column in table_init.js to set its width. */
/* Make sure DT/inline styles can't bloat the % column */
#holdings th[data-col="percent"],
#holdings td[data-col="percent"],
#holdings th.dt-col-percent,
#holdings td.dt-col-percent {
  max-width: 3.0rem !important;
  white-space: nowrap;
  text-align: right;
   padding-right: .5rem;

}

#holdings:not(.show-type) th[data-col="type"],
#holdings:not(.show-type) td[data-col="type"] {
  display: none;
}


/* Edit icon and editing row */
.edit-row {
  background: none;
  border: none;
  color: #ddd;
  cursor: pointer;
  font-size: 14px;
  margin-right: 4px;
}

tr.editing {
  filter: brightness(1.2);
}


/* warning-icon styling */
.warning-icon {
  color: var(--color-warning);
  margin-left: var(--space-xs);
  cursor: help;
}

.chart-box {
  text-align: center;   /* centers inline content */
  margin: var(--space-md) 0;     /* align left within container */
  display: inline-block;
}

.chart-box p {
  margin-top: var(--space-sm);    /* space between chart and text */
}

.chart-box p:first-of-type {
  font-weight: bold;
}

.price-error {
  color: var(--color-warning);
  font-size: 0.8em;
  margin-top: var(--space-xs);
  max-width: 200px;
  word-break: break-word;
  }
  
  #qr-code {
  top: var(--space-md);
  right: var(--space-md);
  z-index: 10;
  background: white;
  padding: var(--space-sm);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}
#qr-code img {
  display: block;
  max-width: 100%;
  height: auto;
}

#portfolioPie {
  /*
  background-image: url('/images/crycks_logo_200x200.png');
  background-repeat: no-repeat;
  background-position: center;  */
/*
  background-size: 100px 100px;   /* width height */
/*  background-position: 95px 55px; /* x y offsets */

  /* Reserve space for amount label */
  margin-bottom: 0;
}

  table { min-width: 750px; } /* tune to your needs */ 


/* Mobile responsiveness */
@media (max-width:768px) {



  table { min-width: 700px; } /* tune to your needs */ 


  body {
    /* Scales between 16px and 20px, based on viewport width */
/*    font-size: clamp(16px, 2.8vw, 24px);
    padding: 0; */
  }

  /* Better scrolling on iOS/Android */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Hide by name; stable even if you reorder columns */

/*  #holdings [data-col="price"], */
  #holdings [data-col="change365d"], 
/*  #holdings [data-col="change30d"],*/
  #holdings [data-col="percent"],
  #holdings [data-col="type"]  
/*  #holdings [data-col="amount"]*/ {
    display: none !important;
  }

  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

}