/* EPS calculator (React, built separately; see templates/sections.html,
   react_app) — styled in the site's own design language.

   The calculator was written for the old site's Bootstrap 4 and Glyphicons,
   neither of which this site loads, and its own main.css carries only a
   handful of Bootstrap fragments plus GLOBAL rules (`table td`, `.btn`,
   `.container`) that would restyle the rest of the page. So the page loads
   this file INSTEAD of the app's main.css: every rule here is scoped to the
   mount, #eps-container, and covers exactly the classes the app renders
   (card, table, form-control, btn, glyphicon, popup, a few utilities).

   If a new build of the calculator renders a class not covered here, it shows
   unstyled — add it below rather than loading the app's main.css. */

#eps-container {
  --eps-pad: clamp(18px, 1rem + 1.2vw, 32px);
  --eps-danger: #b42318;
  color: var(--ink);
  font-size: .95rem;
  text-align: left;
}
#eps-container *, #eps-container *::before, #eps-container *::after { box-sizing: border-box; }

/* -- layout wrappers ---------------------------------------------------- */

#eps-container .container { width: 100%; max-width: none; margin: 0; padding: 0; }

/* The app's `.card` collides with the site's own .card (hover lift, ::after
   wash, overflow: hidden, column flex). Reset all of it: a transformed card
   would also turn the quote popup's position: fixed into position: absolute. */
#eps-container .card {
  display: block; position: relative; padding: 0;
  margin-top: 0 !important;                 /* inline style in the app */
  overflow: visible; transform: none !important;
  background:
    linear-gradient(90deg, var(--accent), transparent 70%) top / 100% 2px no-repeat,
    var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--edge), var(--lift) !important;   /* inline style in the app */
}
#eps-container .card::after { content: none; }
#eps-container .card:hover { background:
    linear-gradient(90deg, var(--accent), transparent 70%) top / 100% 2px no-repeat,
    var(--surface); }

#eps-container .card-header { padding: var(--eps-pad) var(--eps-pad) 0; background: none; border: 0; }
#eps-container .card-header h5 {
  margin: 0; font-family: var(--font-display); font-weight: var(--heading-weight);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.25; color: var(--ink-strong);
}
#eps-container .card-body { padding: 16px var(--eps-pad) var(--eps-pad); }
#eps-container .card-body > p { max-width: 78ch; line-height: 1.65; }
#eps-container .card-footer {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 20px var(--eps-pad);
  background: var(--sunken); border-top: 1px solid var(--line); border-radius: 0 0 4px 4px;
}

/* -- tables ------------------------------------------------------------- */

#eps-container .table-responsive { margin-top: 28px; overflow-x: auto; }
#eps-container .table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#eps-container .table th,
#eps-container .table td { padding: 9px 12px; vertical-align: middle; text-align: left; }
#eps-container .table thead th {
  padding-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong);
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); white-space: nowrap;
}
#eps-container .table tbody td { border-bottom: 1px solid var(--line-soft, var(--line)); }
#eps-container .table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
#eps-container .table tfoot th,
#eps-container .table tfoot td {
  padding-top: 14px; border-top: 1px solid var(--line-strong);
  font-weight: 700; color: var(--ink-strong);
}
#eps-container .table tbody td:first-child { color: var(--ink-strong); }
#eps-container .table-log-source { min-width: 260px; }

/* Retention and archive size, under the main table on the right. */
#eps-container .results { width: min(420px, 100%); margin: 28px 0 0 auto; }
#eps-container .results .table th { font-weight: 600; color: var(--ink-strong); white-space: nowrap; }
#eps-container .results .table td,
#eps-container .results .table th { border-bottom: 1px solid var(--line-soft, var(--line)); }
#eps-container .results .table tr:last-child > * {
  border-bottom: 0; font-weight: 700; color: var(--ink-strong); }
#eps-container .results .table tr:last-child td { text-align: right; }

/* -- form controls ------------------------------------------------------ */

#eps-container .form-control {
  display: block; width: 100%;
  font: inherit; font-size: .95rem; color: var(--ink-strong);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 7px 10px; min-height: 38px;
  transition: border-color .15s, box-shadow .15s;
}
#eps-container .form-control:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
#eps-container .form-control:focus {
  outline: none; border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
#eps-container .custom-input { width: 96px; }
#eps-container td .form-control:not(.custom-input) { width: 96px; }
#eps-container .form-group { margin-bottom: 18px; }
#eps-container label {
  display: block; margin-bottom: 8px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); }
#eps-container .form-text { display: block; margin-top: 6px; font-size: .85rem; }
#eps-container .text-danger { color: var(--eps-danger); }

/* -- buttons (the site's own .btn base applies; these are the variants) -- */

#eps-container .btn { width: auto; }
#eps-container .btn-primary { background: var(--accent-ink); color: var(--white);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent-ink) 60%, transparent); }
#eps-container .btn-primary:hover { background: var(--accent-dark); }
#eps-container input[type="submit"].btn { min-width: 160px; }
/* The popup's close button. */
#eps-container .btn-danger {
  min-height: 40px; width: 40px; padding: 0; border-radius: 50%;
  background: var(--surface); color: var(--ink-strong); border: 1px solid var(--line-strong); }
#eps-container .btn-danger:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* -- glyphicons (the app expects the Bootstrap 3 icon font) -------------- */

#eps-container .glyphicon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
#eps-container .glyphicon-question-sign {
  width: 18px; height: 18px; border-radius: 50%; vertical-align: -3px;
  border: 1.5px solid color-mix(in srgb, var(--accent-ink) 55%, transparent);
  color: var(--accent-ink); font-size: 11px; font-weight: 700; cursor: help;
  transition: background .15s, color .15s;
}
#eps-container .glyphicon-question-sign::before { content: "?"; }
#eps-container .glyphicon-question-sign:hover { background: var(--accent-ink); color: var(--white); border-color: var(--accent-ink); }
#eps-container .glyphicon-remove { font-size: 22px; font-weight: 400; }
#eps-container .glyphicon-remove::before { content: "\00d7"; }

/* react-tooltip injects its own base styles; only the measure and type. */
#eps-container .tool-tip { max-width: 300px !important; font-size: .85rem; line-height: 1.5;
  text-transform: none; letter-spacing: 0; font-weight: 400; z-index: 30; }

/* -- the quote popup ---------------------------------------------------- */

#eps-container .popup {
  position: fixed; inset: 0; z-index: 1000;   /* over the fixed site header (100) */
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--header-h) + 24px) 16px 24px; overflow-y: auto;
  background: rgba(var(--shade), .45);
}
#eps-container .popup_inner {
  position: relative; inset: auto; width: min(520px, 100%); margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -20px rgba(var(--shade), .45);
}
#eps-container .popup_inner .container { padding: 20px var(--eps-pad) var(--eps-pad); }
#eps-container .popup_inner h1 { margin: 0; font-size: 1rem; }

/* -- the Bootstrap utilities it uses ------------------------------------ */

#eps-container .row { display: flex; flex-wrap: wrap; margin: 0; }
#eps-container .col { flex: 1 0 0; min-width: 0; padding: 0; }
#eps-container .d-flex { display: flex !important; }
#eps-container .justify-content-between { justify-content: space-between !important; }
#eps-container .justify-content-end { justify-content: flex-end !important; }
#eps-container .align-items-center { align-items: center !important; }
#eps-container .align-middle { vertical-align: middle !important; }
#eps-container .text-right { text-align: right !important; }
#eps-container .text-left { text-align: left !important; }
#eps-container .text-nowrap { white-space: nowrap !important; }
#eps-container .mr-1 { margin-right: .5rem !important; }
#eps-container .ml-1 { margin-left: .25rem !important; }
#eps-container .ml-05 { margin-left: .5rem !important; }
#eps-container .mt-3 { margin-top: 1rem !important; }
#eps-container .p-3 { padding: 1rem; }
/* In the main table the inputs line up under their column heading. */
#eps-container td.input .form-control { margin-left: 0; }
#eps-container .d-flex.justify-content-end .form-control { width: 96px; }

/* -- phones: each log source becomes a labelled block -------------------- */

@media (max-width: 767px) {
  #eps-container .table-responsive { overflow: visible; }
  #eps-container .table-responsive .table thead { display: none; }
  #eps-container .table-responsive .table,
  #eps-container .table-responsive .table tbody,
  #eps-container .table-responsive .table tfoot { display: block; }
  #eps-container .table-responsive .table tr {
    display: block; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  #eps-container .table-responsive .table td,
  #eps-container .table-responsive .table th {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: right !important; border-bottom: 1px solid var(--line-soft, var(--line)); }
  #eps-container .table-responsive .table td:last-child { border-bottom: 0; }
  #eps-container .table-responsive .table td[data-title]::before,
  #eps-container .table-responsive .table th[data-title]::before {
    content: attr(data-title); text-align: left;
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
  #eps-container .table-responsive .table td:first-child {
    background: var(--sunken); justify-content: flex-start; text-align: left !important; font-weight: 600; }
  #eps-container .table-responsive .table td:first-child::before { content: none; }
  #eps-container .table-responsive .table tfoot td:first-child,
  #eps-container .table-responsive .table tfoot th { display: none; }
  #eps-container .table-responsive .table tfoot td { border-top: 0; background: none; }
  #eps-container .table-responsive .table tfoot td:nth-child(3) { background: none; }
  #eps-container .table-log-source { min-width: 0; }
  #eps-container .table-responsive .table td,
  #eps-container .table-responsive .table th { padding: 7px 12px; }
  #eps-container .results { width: 100%; }
  #eps-container .results .table th,
  #eps-container .results .table td { padding: 8px 6px; }
  #eps-container .results td .form-control { width: 72px; }
  #eps-container .card-footer .btn { width: 100%; }
}