/* prod final hybrid */
:root { --prod-blue:#0077c0; --prod-border:#e5e7eb; --prod-text:#111827; }
*{box-sizing:border-box} html,body{height:100%;margin:0;font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--prod-text)}
.prod-container{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 !important}
.prod-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 8px}
.prod-title{font-size:28px;font-weight:700;margin:0}
.prod-filterbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-top:1px solid var(--prod-border);border-bottom:1px solid var(--prod-border);padding:12px 0;flex-wrap:wrap}
.prod-filters{display:flex;gap:12px;flex-wrap:wrap}
.prod-filter label{display:block;font-size:12px;margin-bottom:4px;font-weight:700 !important}
.prod-filter select{height:36px;border:1px solid var(--prod-border);border-radius:0;padding:0 8px;min-width:220px}
.prod-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.prod-search{height:36px;border:1px solid var(--prod-border);border-radius:0;padding:0 10px;min-width:260px}
.prod-clear{height:36px;border:1px solid var(--prod-border);border-radius:0;background:#fff;padding:0 12px;cursor:pointer}
.prod-tablewrap{padding:12px 0}
.dataTables_wrapper,#prod-table{width:100% !important}
table.dataTable.stripe tbody tr.odd{background:#fafafa}
table.dataTable.stripe tbody tr.even{background:#fff}
.prod-center{text-align:center}
.prod-link{color:var(--prod-blue);text-decoration:underline;cursor:pointer}
/* modal */
.prod-modal[aria-hidden="true"]{display:none}
.prod-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}
.prod-modal-card{background:#fff;width:min(800px,95vw);border-radius:0;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.prod-modal-title{margin:0 0 6px 0;font-size:22px}
.prod-meta{margin:2px 0 10px 0}
.prod-label{color:#6b7280;margin-right:6px}
.prod-btn-link{display:inline-block;margin-right:10px;padding:8px 12px;background:var(--prod-blue);color:#fff !important;text-decoration:none;border-radius:0}
.prod-btn-close{margin-left:auto;border:1px solid var(--prod-border);background:#fff;padding:8px 12px}
.prod-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
/* icons */
.prod-ds svg path{fill:var(--prod-blue)}
.fa.fa-at{color:var(--prod-blue)}
/* Roboto everywhere for DT UI */
.dataTables_wrapper,.dataTables_info,.dataTables_paginate,.dataTables_length,.dataTables_filter,.dt-button,.dt-buttons,label,button,input,select,textarea,table{
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}
/* center datasheet header */
table.dataTable thead th:last-child{ text-align:center; }
table.dataTable thead th.prod-center{ text-align:center; }


/* mobile stacked rows */
@media (max-width: 640px){
  /* hide the header */
  table.dataTable thead{ display:none; }
  /* each row becomes a compact card */
  table.dataTable tbody tr{
    display:block;
    border-top:1px solid var(--prod-border);
    margin:0 0 8px 0;
    padding:0;
    background:#fff;
  }
  table.dataTable tbody tr td{
    display:block;             /* flush-left stack */
    width:100%;
    white-space:normal !important;
    padding:8px 10px;          /* tighter spacing */
    border-bottom:1px solid var(--prod-border);
    text-align:left;           /* ensure left */
  }
  table.dataTable tbody tr td:last-child{
    border-bottom:none;
  }
  /* label above each value, subtle & compact */
  table.dataTable tbody tr td::before{
    content: attr(data-label);
    display:block;
    font-weight:600;
    font-size:12px;
    line-height:1.1;
    color:#6b7280;
    margin:0 0 2px 0;          /* tight leading */
    text-align:left;
  }
  /* ensure values are flush-left */
  .prod-center{ text-align:left; }
  .prod-link{ display:inline-block; line-height:1.25; } /* tighter product name */
}



/* mobile refiners polish */
@media (max-width: 640px){
  .prod-filterbar{
    padding:12px;                 /* left/right padding requested */
    gap:12px;                     /* more breathing room */
    background:#f9fafb;           /* gentle bar tint for separation */
  }
  .prod-filters{
    width:100%;
    display:grid;
    grid-template-columns: 1fr;   /* one per row */
    gap:10px;
  }
  .prod-filter{ width:100%; }
  .prod-filter label{ font-size:12px; margin-bottom:4px; }
  .prod-filter select{
    width:100%;
    height:40px;
    padding:0 10px;
    border:1px solid var(--prod-border);
    border-radius:0;
    background:#fff;
  }
  .prod-actions{
    width:100%;
    margin-top:2px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .prod-search{
    width:100%;
    min-width:0;
    flex:1 1 auto;
    height:40px;
    padding:0 10px;
  }
  .prod-clear{
    height:40px;
    padding:0 14px;
    border:1px solid var(--prod-border);
    background:#fff;
  }
  .prod-clear:active, .prod-clear:hover{
    background:#f3f4f6;
  }
}


/* v6g overrides */
.prod-container{ margin-top:0px; }               /* add top spacing for the whole solution */
.prod-filterbar{ border-top:0 !important; }       /* remove the top horizontal rule */


/* v6h: iframe/embed-safe overrides to prevent right overflow */
html.prod-embedded, .prod-embedded body{ overflow-x:hidden; }
.prod-embedded .prod-container{ width:100% !important; margin-left:0 !important; margin-right:0 !important; }
.prod-embedded .prod-tablewrap{ overflow-x:auto; }
.prod-embedded .dataTables_wrapper{ overflow-x:auto; }
.prod-embedded table.dataTable th,
.prod-embedded table.dataTable td{ white-space:normal !important; word-break:break-word; }


/* DataTables bottom bar layout + baseline alignment */
.dataTables_wrapper .bottom{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.dataTables_wrapper .dataTables_length label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
}
.dataTables_wrapper .dataTables_length select{
  margin:0;
  vertical-align:middle;
}
.dataTables_wrapper .dataTables_info{
  margin:0;
  padding-top:0 !important;
  align-self:center;
}
.dataTables_wrapper .dataTables_paginate{
  margin-left:auto;
}


/* === Pagination flush-right in bottom bar === */
.dataTables_wrapper .bottom{
  display:flex;
  align-items:center;
  justify-content:flex-start;      /* keep items in flow */
}
.dataTables_wrapper .dataTables_paginate{
  margin-left:auto !important;     /* push to the right edge */
  float:none !important;           /* cancel DT default float */
  text-align:right;
}
/* Contact/envelope color — always Energetics Blue */
td.is-contact a.prod-ds-contact,
td.is-contact a.prod-ds-contact:visited,
td.is-contact a.prod-ds-contact:hover,
td.is-contact a.prod-ds-contact:active {
  color: #0077c0 !important;    /* keep the link blue, even when visited */
  text-decoration: none;         /* optional: keep it clean */
}

/* Make the FA icon inherit the link color so it stays in sync */
td.is-contact a.prod-ds-contact i.fa {
  color: inherit !important;
}