/* Oil Watch DGA — all rules scoped under .owd-app so the theme is untouched. */

.owd-app {
  --owd-bg:#F7F8FA;
  --owd-panel:#FFFFFF;
  --owd-panel-2:#F1F3F6;
  --owd-grid:#E2E6EB;
  --owd-text:#1C232C;
  --owd-text-muted:#6B7684;
  --owd-primary:#004fa3;
  --owd-amber:#f59e0b;
  --owd-teal:#0E8074;
  --owd-danger:#DC2626;
  --owd-ok:#15803D;
  --owd-radius:10px;

  max-width: 1400px;
  margin: 0 auto;
  background-color: var(--owd-bg);
  background-image:
    linear-gradient(var(--owd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--owd-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  color: var(--owd-text);
  font-family: 'Roboto', sans-serif;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
}
.owd-app, .owd-app *{ box-sizing: border-box; }
.owd-app [hidden]{ display:none !important; }

/* Lets owd-* components (sample assessment cards, badges, tables) render
   correctly wherever they're reused OUTSIDE the full .owd-app widget shell
   — e.g. the Oil Data App wizard's Review step embeds the assessment cards
   directly among its own oda-* markup. Provides just the CSS custom
   properties + base type those components read, none of .owd-app's own
   background pattern/max-width/padding chrome (which would look out of
   place dropped into another page's layout). */
.owd-embed {
  --owd-bg:#F7F8FA;
  --owd-panel:#FFFFFF;
  --owd-panel-2:#F1F3F6;
  --owd-grid:#E2E6EB;
  --owd-text:#1C232C;
  --owd-text-muted:#6B7684;
  --owd-primary:#004fa3;
  --owd-amber:#f59e0b;
  --owd-teal:#0E8074;
  --owd-danger:#DC2626;
  --owd-ok:#15803D;
  --owd-radius:10px;
  font-family: 'Roboto', sans-serif;
}
.owd-embed, .owd-embed *{ box-sizing: border-box; }

.owd-wrap{ max-width:1180px; margin:0 auto; padding:28px 24px 48px; }

.owd-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:28px; border-bottom:1px solid var(--owd-grid); padding-bottom:20px; }
.owd-brand{ display:flex; align-items:center; gap:12px; }
.owd-brand svg{ flex-shrink:0; }
.owd-brand h1{ font-family:'Roboto',sans-serif; font-size:22px; font-weight:700; margin:0; letter-spacing:0.2px; color:var(--owd-text); }
.owd-brand p{ margin:2px 0 0; color:var(--owd-text-muted); font-size:12.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.3px; }

.owd-tabs{ display:flex; gap:4px; background:var(--owd-panel); border:1px solid var(--owd-grid); border-radius:999px; padding:4px; }
.owd-tabs button{ font-family:'Roboto',sans-serif; font-size:13px; font-weight:600; border:none; background:transparent; color:var(--owd-text-muted); padding:9px 18px; border-radius:999px; cursor:pointer; transition:all .15s ease; }
.owd-tabs button.active{ background:var(--owd-primary); color:#FFFFFF; }
.owd-tabs button:hover:not(.active){ color:var(--owd-text); }
.owd-app button:focus-visible, .owd-app input:focus-visible, .owd-app select:focus-visible{ outline:2px solid var(--owd-teal); outline-offset:2px; }

.owd-section{ display:none; }
.owd-section.active{ display:block; animation: owd-fade .25s ease; }
@keyframes owd-fade{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }

.owd-panel{ background:var(--owd-panel); border:1px solid var(--owd-grid); border-radius:var(--owd-radius); padding:22px; }

.owd-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--owd-teal); margin:0 0 6px; }
.owd-headline{ font-family:'Roboto',sans-serif; font-size:19px; font-weight:600; margin:0 0 4px; color:var(--owd-text); }
.owd-sub{ color:var(--owd-text-muted); font-size:13px; margin:0; }
#owd-import-status{ margin-top:6px; color:var(--owd-primary); font-weight:500; }

.owd-status-pill{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 10px; border-radius:999px; font-weight:600; letter-spacing:0.4px; }
.owd-status-ok{ background:rgba(21,128,61,0.12); color:var(--owd-ok); }
.owd-status-caution{ background:rgba(245,158,11,0.12); color:var(--owd-amber); }
.owd-status-action{ background:rgba(220,38,38,0.12); color:var(--owd-danger); }
.owd-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

.owd-chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.owd-chip{ font-family:'IBM Plex Mono',monospace; font-size:12px; padding:7px 13px; border-radius:8px; border:1px solid var(--owd-grid); background:var(--owd-panel-2); color:var(--owd-text-muted); cursor:pointer; transition:all .15s ease; user-select:none; }
.owd-chip.on{ border-color:var(--owd-gc,var(--owd-teal)); color:var(--owd-text); background:rgba(70,169,160,0.12); }

.owd-app table{ width:100%; border-collapse:collapse; font-size:13px; }
.owd-app th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.6px; text-transform:uppercase; color:var(--owd-text-muted); padding:10px 8px; border-bottom:1px solid var(--owd-grid); white-space:nowrap; }
.owd-app td{ padding:8px; border-bottom:1px solid var(--owd-grid); font-family:'IBM Plex Mono',monospace; white-space:nowrap; color:var(--owd-text); }
.owd-app tr:hover td{ background:rgba(0,0,0,0.03); }
.owd-app td input, .owd-app td select{ background:transparent; border:1px solid transparent; color:var(--owd-text); font-family:'IBM Plex Mono',monospace; font-size:13px; width:100%; min-width:78px; padding:7px 8px; border-radius:5px; }
.owd-app td select{ min-width:100px; }
.owd-app td input:hover, .owd-app td select:hover{ border-color:var(--owd-grid); }
.owd-app td input:focus, .owd-app td select:focus{ border-color:var(--owd-teal); outline:none; background:var(--owd-panel-2); }
.owd-app td select option{ color:#000; }
.owd-date-cell{ display:flex; align-items:center; gap:4px; min-width:170px; position:relative; }
.owd-date-cell input[data-key="date"]{ flex:1; min-width:110px; }
.owd-date-pick-btn{ background:transparent; border:1px solid var(--owd-grid); border-radius:5px; padding:5px 7px; cursor:pointer; font-size:13px; line-height:1; flex-shrink:0; }
.owd-date-pick-btn:hover{ border-color:var(--owd-teal); }

.owd-calendar-popup{
  position:absolute; top:calc(100% + 4px); left:0; z-index:200;
  background:var(--owd-panel); border:1px solid var(--owd-grid); border-radius:8px;
  padding:10px; box-shadow:0 8px 24px rgba(0,0,0,0.18); width:248px;
}
.owd-cal-header{ display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:10px; font-family:'Roboto',sans-serif; font-weight:600; font-size:12px; }
.owd-cal-nav{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-sizing:border-box; flex:0 0 22px; width:22px; height:22px; margin:0;
  background:transparent; border:1px solid var(--owd-grid); border-radius:5px;
  cursor:pointer; font-size:14px; line-height:1; color:var(--owd-text);
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.owd-cal-nav:hover{ border-color:var(--owd-teal); }
.owd-cal-dropdown-wrap{ position:relative; flex:1; min-width:0; }
.owd-cal-dropdown-wrap:first-of-type{ flex:1.4; }
.owd-cal-field-btn{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-sizing:border-box; width:100%; margin:0;
  background-color:var(--owd-panel-2) !important; color:var(--owd-text) !important;
  -webkit-text-fill-color:var(--owd-text) !important;
  border:1px solid var(--owd-grid); border-radius:5px;
  font-family:'Roboto',sans-serif; font-weight:600; font-size:12px;
  height:24px; padding:0 18px 0 6px; cursor:pointer; text-align:left; position:relative;
}
.owd-cal-field-btn:hover{ border-color:var(--owd-teal); }
.owd-cal-field-btn::after{
  content:''; position:absolute; right:6px; top:50%; margin-top:-2px;
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--owd-text-muted);
}
.owd-cal-field-list{
  position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:20;
  max-height:180px; overflow-y:auto;
  background-color:var(--owd-panel) !important; border:1px solid var(--owd-grid);
  border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.18);
  display:flex; flex-direction:column; padding:4px;
}
.owd-cal-field-list-years{ flex-direction:column-reverse; }
.owd-cal-field-item{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-sizing:border-box; width:100%; margin:0; text-align:left;
  background:transparent !important; color:var(--owd-text) !important;
  -webkit-text-fill-color:var(--owd-text) !important;
  border:none; border-radius:4px; padding:5px 8px; cursor:pointer;
  font-family:'Roboto',sans-serif; font-size:12px;
}
.owd-cal-field-item:hover{ background:var(--owd-panel-2) !important; }
.owd-cal-field-item-active{ background:var(--owd-primary) !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; font-weight:600; }
.owd-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.owd-cal-dow{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--owd-text-muted); text-align:center; padding:2px 0; }
.owd-cal-day{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-sizing:border-box; width:100%; margin:0;
  background:transparent; border:1px solid transparent; border-radius:5px;
  padding:5px 0; font-family:'IBM Plex Mono',monospace; font-size:12px;
  line-height:1.2; cursor:pointer; color:var(--owd-text);
}
.owd-cal-day:hover{ background:var(--owd-panel-2); border-color:var(--owd-grid); }
.owd-cal-day-selected, .owd-cal-day-selected:hover{ background:var(--owd-primary); border-color:var(--owd-primary); color:#FFFFFF; }
.owd-cal-day-today{ font-weight:700; text-decoration:underline; }
.owd-app td{ min-width:78px; }
.owd-del-btn{ background:transparent; border:1px solid var(--owd-grid); color:var(--owd-text-muted); border-radius:6px; padding:5px 9px; cursor:pointer; font-size:12px; }
.owd-del-btn:hover{ border-color:var(--owd-danger); color:var(--owd-danger); }

.owd-btn{ font-family:'Roboto',sans-serif; font-weight:600; font-size:13px; border:none; border-radius:8px; padding:10px 16px; cursor:pointer; transition:all .15s ease; }
.owd-btn-amber{ background:var(--owd-primary); color:#FFFFFF; }
.owd-btn-amber:hover{ filter:brightness(1.08); }
.owd-btn-amber:disabled{ cursor:not-allowed; }
.owd-btn-ghost{ background:transparent; border:1px solid var(--owd-grid); color:var(--owd-text); }
.owd-btn-ghost:hover{ border-color:var(--owd-teal); color:var(--owd-teal); }
.owd-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
.owd-table-scroll{ overflow-x:auto; }

.owd-note{ margin-top:26px; font-size:11.5px; color:var(--owd-text-muted); line-height:1.6; font-family:'IBM Plex Mono',monospace; border-top:1px solid var(--owd-grid); padding-top:16px; }
.owd-note strong{ color:var(--owd-text); }

.owd-sample-card{ background:var(--owd-panel-2); border:1px solid var(--owd-grid); border-radius:var(--owd-radius); margin-bottom:10px; overflow:hidden; }
.owd-sample-card summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:'Roboto',sans-serif; font-weight:600; font-size:13.5px; color:var(--owd-text); }
.owd-sample-card summary::-webkit-details-marker{ display:none; }
.owd-sample-card summary .owd-meta{ color:var(--owd-text-muted); font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:12px; }
.owd-sample-card summary .owd-chev{ transition:transform .15s ease; color:var(--owd-text-muted); }
.owd-sample-card[open] summary .owd-chev{ transform:rotate(90deg); }
.owd-code-badge{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.owd-code-1{ background:rgba(95,180,137,0.18); color:var(--owd-ok); }
.owd-code-2{ background:rgba(245,158,11,0.18); color:var(--owd-amber); }
.owd-code-3{ background:rgba(221,92,78,0.18); color:var(--owd-danger); }
.owd-assessment-table{ width:100%; border-collapse:collapse; font-size:12px; margin-top:2px; }
.owd-assessment-table th{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--owd-text-muted); padding:7px 6px; border-bottom:1px solid var(--owd-grid); white-space:nowrap; text-align:left; }
.owd-assessment-table td{ font-family:'IBM Plex Mono',monospace; padding:7px 6px; border-bottom:1px solid var(--owd-grid); white-space:nowrap; }
.owd-loading-msg{ padding:40px 24px; text-align:center; color:var(--owd-text-muted); font-family:'IBM Plex Mono',monospace; font-size:13px; }
.owd-error-msg{ padding:16px; margin:0 0 16px; border:1px solid var(--owd-danger); border-radius:8px; color:var(--owd-danger); font-family:'IBM Plex Mono',monospace; font-size:12.5px; }

/* PDF-import review panel — appended to document.body (not .owd-app), so
   it's wrapped in .owd-embed itself to pick up the same CSS custom
   properties without the widget shell's own background/max-width chrome. */
.owd-pdf-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(20,24,29,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.owd-pdf-modal{
  background:var(--owd-panel); border-radius:var(--owd-radius);
  width:100%; max-width:760px; max-height:88vh; overflow-y:auto;
  padding:22px; box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.owd-pdf-modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.owd-pdf-modal-head h3{ margin:0; font-family:'Roboto',sans-serif; font-size:16px; font-weight:700; color:var(--owd-text); }
.owd-pdf-alert{ background:var(--owd-panel-2); border:1px solid var(--owd-grid); border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--owd-text-muted); margin:0 0 16px; line-height:1.5; }
.owd-pdf-date-groups{ display:flex; flex-direction:column; gap:14px; }
.owd-pdf-date-group{ border:1px solid var(--owd-grid); border-radius:8px; padding:10px 12px; }
.owd-pdf-date-group--blocked{ opacity:.6; background:var(--owd-panel-2); }
.owd-pdf-date-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px; flex-wrap:wrap; }
.owd-pdf-date-input{ font-family:'IBM Plex Mono',monospace; font-size:13px; border:1px solid var(--owd-grid); border-radius:5px; padding:5px 7px; color:var(--owd-text); background:var(--owd-panel); }
.owd-pdf-date-status{ color:var(--owd-text-muted); font-size:12px; }
.owd-pdf-date-group--blocked .owd-pdf-date-status{ color:var(--owd-amber); }
.owd-pdf-review-list{ display:flex; flex-direction:column; gap:2px; }
.owd-pdf-review-row{ display:grid; grid-template-columns:20px 70px 1fr 140px; align-items:center; gap:10px; padding:5px 4px; border-radius:6px; }
.owd-pdf-review-row--empty{ opacity:.5; }
.owd-pdf-review-name{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:var(--owd-text); }
.owd-pdf-review-val{ font-family:'IBM Plex Mono',monospace; font-size:13px; border:1px solid var(--owd-grid); border-radius:5px; padding:6px 8px; color:var(--owd-text); background:var(--owd-panel); width:100%; }
.owd-pdf-review-match{ font-size:11.5px; color:var(--owd-text-muted); }
.owd-pdf-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

@media (max-width:760px){
  .owd-app{ max-width:100%; }
  .owd-top{ align-items:flex-start; }
  .owd-pdf-review-row{ grid-template-columns:20px 60px 1fr; }
  .owd-pdf-review-match{ display:none; }
}