/* Tools plugin - structural CSS only. Theme owns ALL visual styling. */

/* Hide native file inputs (button is the trigger) */
.tools-file{display:none}
.tools-fc-lut-file{display:none}

/* Stage: preview canvas alongside scope output. Single column on narrow screens. */
.tools-stage{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-bottom:20px}
@media (max-width:900px){.tools-stage{grid-template-columns:1fr}}

/* Canvases must not overflow their containers */
.tools-preview,.tools-scope{display:block;max-width:100%;height:auto}
.tools-preview-wrap,.tools-scope-wrap{min-width:0;overflow:hidden}

/* Light meter needs crosshair on the preview to indicate clickability */
.tools-tool[data-tool="light-meter"] .tools-preview{cursor:crosshair}

/* Calculator-style tools that don't use the preview/scope canvases */
.tools-no-preview .tools-stage,.tools-no-preview .tools-loader{display:none}

/* Legend swatches and lists */
.tools-legend-swatch{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:middle}
.tools-legend-item{display:flex;align-items:center;gap:.5em}
.tools-legend-list{list-style:none !important;padding-left:0 !important;margin-left:0 !important}.tools-legend-list>li{list-style:none !important;padding-left:0 !important;margin-left:0 !important}

/* Readout cells grid */
.tools-readout{display:grid;grid-template-columns:repeat(auto-fill,minmax(10em,1fr));gap:.5em}

/* Exposure calc */
.tools-ec-inputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(14em,1fr));gap:1em}
.tools-ec-field{display:flex;flex-direction:column;gap:.25em}
.tools-ec-field-label{display:block}
.tools-ec-field input{display:block;width:100%}
.tools-ec-output{margin-top:2em}
.tools-ec-output-title{margin-top:0}

/* Metadata */
.tools-meta-preview{margin-bottom:1em}
.tools-meta-image{display:block;width:100%;height:auto}
.tools-meta-table{width:100%;border-collapse:collapse}

/* Controls + loader rows */
.tools-controls{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
.tools-controls label{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.25em}
.tools-loader{display:flex;flex-wrap:wrap;align-items:center;gap:1em;margin-bottom:20px}
.tools-camera-profile-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.25em}

/* False color IRE strip sits to the right of the false-color canvas as a flow item */
.tools-tool[data-tool="false-color"] .tools-scope-wrap{display:flex;align-items:flex-start;gap:.5em}
.tools-tool[data-tool="false-color"] .tools-fc-canvas{flex:1;min-width:0}
.tools-fc-ire-strip{display:flex;align-items:stretch;gap:.25em;flex-shrink:0}
.tools-fc-ire-strip-canvas{display:block;width:20px}
.tools-fc-ire-strip-labels{position:relative;width:3em;line-height:1;font-size:.7em}
.tools-fc-ire-strip-label{position:absolute;left:0;white-space:nowrap}

/* ===== Dashboard layout (driven by CSS custom properties set inline by PHP) ===== */
.tools-dashboard-item{margin-bottom:var(--tools-item-mb,16px)}
.tools-dashboard-link{display:flex;gap:1em;text-decoration:none}
.tools-dashboard-text{flex:1;min-width:0;display:block}
.tools-dashboard-text h1.tools-dashboard-name,
.tools-dashboard-text h2.tools-dashboard-name,
.tools-dashboard-text h3.tools-dashboard-name,
.tools-dashboard-text h4.tools-dashboard-name,
.tools-dashboard-text h5.tools-dashboard-name,
.tools-dashboard-text h6.tools-dashboard-name,
.tools-dashboard-text p.tools-dashboard-name{margin:0}
.tools-dashboard-text p.tools-dashboard-desc-line{margin:0}

/* Preview thumbnail wrapper: contains the demo image + overlay canvas */
.tools-dashboard-thumb-wrap{
    position:relative;
    display:block;
    flex:0 0 auto;
    width:var(--tools-thumb-width,120px);
    max-width:100%;
    padding:var(--tools-thumb-padding,0);
    margin:var(--tools-thumb-margin,0);
    box-sizing:border-box;
}
.tools-dashboard-thumb,
.tools-dashboard-thumb-canvas{
    display:block;
    width:100%;
    height:auto; /* preserve aspect ratio */
    max-width:100%;
}
/* Canvas is overlaid on top of the img so the per-tool processed output replaces the image visually */
.tools-dashboard-thumb-canvas{
    position:absolute;
    top:var(--tools-thumb-padding,0);
    left:var(--tools-thumb-padding,0);
    width:calc(100% - (var(--tools-thumb-padding,0) * 2));
}
/* When the canvas hasn't been drawn yet (data-rendered != "1") it's invisible */
.tools-dashboard-thumb-canvas:not([data-rendered="1"]){opacity:0}

/* Placement variants */
.tools-placement-left  .tools-dashboard-link{flex-direction:row;align-items:flex-start}
.tools-placement-right .tools-dashboard-link{flex-direction:row-reverse;align-items:flex-start}
.tools-placement-top   .tools-dashboard-link{flex-direction:column}
.tools-placement-top   .tools-dashboard-thumb-wrap{width:var(--tools-thumb-width,120px)}
/* Full-width: thumb fills the row when the user opted into 100% width */
.tools-placement-top   .tools-dashboard-thumb-wrap[style*="--tools-thumb-width:100%"]{width:100%}

.tools-camera-profile-row{margin-bottom:20px}

/* end-of-tool spacing */
.tools-controls{margin-bottom:20px}
.tools-legend{margin-bottom:20px}

/* Checkbox labels stay inline: checkbox on left, text on right */
.tools-controls label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:.4em}

/* ===== Zebra threshold slider: keep input + value span inline on same row ===== */
.tools-range-row{display:inline-flex;align-items:center;gap:.5em}
/* Make sure native range track stays visible despite theme resets */
.tools-controls input[type=range]{-webkit-appearance:auto;appearance:auto;background:transparent;min-width:8em}

/* ===== Readout label = bold (used by light-meter and metadata) ===== */
.tools-readout-label{font-weight:bold}

/* ===== Metadata: 4 explicit columns above theme breakpoint, stack below; 20px gap after the summary ===== */
.tools-tool[data-tool=metadata] .tools-readout{grid-template-columns:repeat(4,1fr);margin-bottom:20px}
@media (max-width:991px){.tools-tool[data-tool=metadata] .tools-readout{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tools-tool[data-tool=metadata] .tools-readout{grid-template-columns:1fr}}

/* tools-readout global margin */
.tools-readout{margin-bottom:20px}

/* exposure-calc dashboard gradient */
.tools-dashboard-thumb-wrap[data-tool="exposure-calc"]{position:relative}
.tools-dashboard-thumb-wrap[data-tool="exposure-calc"]::after{content:"";position:absolute;inset:var(--tools-thumb-padding,0);background:linear-gradient(to right,transparent 0%,#000 100%);pointer-events:none}

/* placement edge zeroing */
.tools-placement-left .tools-dashboard-thumb-wrap{margin-left:0;padding-left:0}
.tools-placement-right .tools-dashboard-thumb-wrap{margin-right:0;padding-right:0}

/* light-meter controls: inline label so everything sits on the same row */
.tools-tool[data-tool=light-meter] .tools-controls label{flex-direction:row;align-items:center;gap:.5em}

/* zero theme-injected form field margins inside tool controls (forced over The7) */
.tools-controls select,
.tools-controls input,
.tools-controls textarea,
.tools-loader select,
.tools-loader input,
.tools-camera-profile-wrap select,
.tools-camera-profile-wrap input{margin:0 !important}

/* canvas section titles */
.tools-canvas-title{margin:0 0 .25em 0;font-weight:bold}

/* stage-col layout */
.tools-stage-col{min-width:0;display:flex;flex-direction:column;gap:.4em}
.tools-stage-col .tools-canvas-title{margin:0;font-weight:bold}
.tools-stage-col .tools-preview-wrap,
.tools-stage-col .tools-scope-wrap{min-width:0;overflow:hidden}

/* false-color exposure verdict */
.tools-fc-verdict{margin:.4em 0 0 0;font-weight:bold;font-size:.95em}

/* ========================================================================
   theme-button styling for plugin buttons
   replicates The7's .dt-btn appearance without requiring its parent context
   ========================================================================*/
.tools-tool button,
.tools-tool .button,
.tools-tool .tools-file-btn,
.tools-tool .tools-lm-reset,
.tools-tool .tools-md-copy,
.tools-admin-wrap button.tools-demo-image-pick,
.tools-demo-image-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 0;
  border-radius: 1px;
  background-color: transparent;
  background-image: linear-gradient(135deg, rgb(30, 187, 240) 30%, rgb(57, 223, 170) 100%);
  color: #fff;
  font-family: Roboto, Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  min-height: 0;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0) 0 0 10px 0;
  transition: 0.3s ease-out;
  -webkit-appearance: none;
          appearance: none;
}

.tools-tool button:hover,
.tools-tool .button:hover,
.tools-tool .tools-file-btn:hover,
.tools-tool .tools-lm-reset:hover,
.tools-tool .tools-md-copy:hover,
.tools-admin-wrap button.tools-demo-image-pick:hover,
.tools-demo-image-pick:hover {
  background-image: linear-gradient(135deg, rgb(57, 223, 170) 0%, rgb(30, 187, 240) 100%);
  box-shadow: rgba(0, 0, 0, 0.18) 0 4px 12px 0;
  transform: translateY(-1px);
}

.tools-tool button:active,
.tools-tool .tools-file-btn:active,
.tools-tool .tools-lm-reset:active,
.tools-tool .tools-md-copy:active {
  transform: translateY(0);
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 6px 0;
}

.tools-tool button:focus-visible {
  outline: 2px solid rgb(30, 187, 240);
  outline-offset: 2px;
}

/* histogram verdict */
.tools-hist-verdict{margin:.4em 0 0 0;font-weight:bold;font-size:.95em}

/* histogram controls: inline label so dropdown and log-scale align */
.tools-tool[data-tool=histogram] .tools-controls label{flex-direction:row;align-items:center;gap:.5em}

/* dashboard description spacing */
.tools-dashboard-desc{margin-bottom:20px}

/* dashboard column layouts */
.tools-dashboard.tools-columns-2,
.tools-dashboard.tools-columns-3,
.tools-dashboard.tools-columns-4 {
    display: grid;
    gap: 24px;
}
.tools-dashboard.tools-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tools-dashboard.tools-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tools-dashboard.tools-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tools-dashboard.tools-columns-2 .tools-dashboard-item,
.tools-dashboard.tools-columns-3 .tools-dashboard-item,
.tools-dashboard.tools-columns-4 .tools-dashboard-item {
    margin-bottom: 0;
    width: 100%;
}
@media (max-width: 1100px) {
    .tools-dashboard.tools-columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tools-dashboard.tools-columns-3,
    .tools-dashboard.tools-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .tools-dashboard.tools-columns-2,
    .tools-dashboard.tools-columns-3,
    .tools-dashboard.tools-columns-4 { grid-template-columns: 1fr; }
}

.tools-dashboard.tools-columns-2 .tools-dashboard-title,
.tools-dashboard.tools-columns-3 .tools-dashboard-title,
.tools-dashboard.tools-columns-4 .tools-dashboard-title,
.tools-dashboard.tools-columns-2 .tools-dashboard-desc,
.tools-dashboard.tools-columns-3 .tools-dashboard-desc,
.tools-dashboard.tools-columns-4 .tools-dashboard-desc {
    grid-column: 1 / -1;
}

.tools-dashboard .tools-dashboard-item,
.tools-dashboard .tools-dashboard-link,
.tools-dashboard .tools-dashboard-thumb-wrap,
.tools-dashboard .tools-dashboard-thumb {
    max-width: 100% !important;
    box-sizing: border-box;
}
.tools-dashboard .tools-dashboard-thumb {
    width: 100% !important;
    height: auto !important;
    display: block;
}
.tools-dashboard.tools-columns-2 .tools-dashboard-thumb-wrap,
.tools-dashboard.tools-columns-3 .tools-dashboard-thumb-wrap,
.tools-dashboard.tools-columns-4 .tools-dashboard-thumb-wrap {
    width: 100%;
}

/* zero out top margin on first thumb */
.tools-dashboard .tools-dashboard-item:first-child {
    margin-top: 0 !important;
}
.tools-dashboard .tools-dashboard-thumb,
.tools-dashboard .tools-dashboard-thumb-wrap {
    margin-top: 0 !important;
}

/* metadata tile overlay */
.tools-dashboard-thumb-wrap { position: relative; display: inline-block; }
.tools-dashboard-meta-overlay {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    line-height: 1.25;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}
.tools-dashboard-meta-line { display: block; white-space: nowrap; }

/* opacity slider full-range fix */
.tools-co-op { padding: 0 !important; }
.tools-co-op[type="range"] { padding: 0 !important; margin: 0; }

/* close gap between dashboard title and description (grid row-gap was creating 24px space) */
.tools-dashboard .tools-dashboard-title { margin-bottom: -36px; }
.tools-dashboard .tools-dashboard-desc { margin-top: 0; margin-bottom: -24px; }

/* tighten image-to-title gap inside each tile, increase row spacing between tiles */
.tools-dashboard .tools-dashboard-link { gap: 6px; }
.tools-dashboard { row-gap: 40px !important; }
/* all plugin sliders full-range fix - theme applies padding 5px 15px to all inputs */
.tools-tool input[type="range"], .tools-dashboard input[type="range"] { padding: 0 !important; margin: 0; }