/* =====================================================================
   Уфафотохим · table.css — стили таблиц режимов проявления
   Подключается отдельно от основной дизайн-системы (ufh.css)
   Разметка: <div class="dev-table-wrap"><table class="dev-table">…
   Строки выводятся функцией render_development_table_rows() с data-title
   ===================================================================== */

.dev-table-wrap{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:auto;max-height:640px;box-shadow:var(--shadow);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.dev-table-wrap::-webkit-scrollbar{width:10px;height:10px}
.dev-table-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid var(--panel)}

table.dev-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px}
.dev-table caption{
  caption-side:top;text-align:left;padding:16px 20px;color:var(--faint);
  font:500 11px/1.5 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.dev-table thead th{
  position:sticky;top:0;z-index:2;background:var(--panel-2);text-align:left;
  padding:14px 18px;border-bottom:1px solid var(--line-2);white-space:nowrap;
  font:600 10.5px/1.4 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.dev-table thead th:first-child{color:var(--dev,var(--accent))}
.dev-table tbody td{
  padding:12px 18px;border-bottom:1px solid var(--line);vertical-align:top;
  font-variant-numeric:tabular-nums;
}
.dev-table tbody tr:last-child td{border-bottom:0}
.dev-table tbody tr{transition:background .18s}
.dev-table tbody tr:hover{background:var(--accent-soft)}
.dev-table td:nth-child(1){font-weight:600;color:var(--ink)}
.dev-table td:nth-child(n/**/+2){font-family:var(--ff-mono);font-size:13.5px;color:var(--muted)}
.dev-table td:nth-child(4){color:var(--ink);font-weight:600}
/* цветная кромка слева — оттенок проявителя */
.dev-table tbody tr td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--dev,var(--accent)) 55%,transparent)}

.dev-table tbody tr.dev-table__notice:hover{background:transparent}
.dev-table tbody tr.dev-table__notice td{padding:18px 20px;color:var(--muted);font:500 14px/1.65 var(--ff-body);text-align:left;box-shadow:none}

.table-note{margin:16px 4px 0;color:var(--faint);font-size:13.5px}
.table-note a{color:var(--dev,var(--accent));font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--dev,var(--accent)) 40%,transparent)}
.table-note a:hover{border-bottom-color:currentColor}

/* ---------- мобильный режим: строка → карточка ---------- */
@media only screen and (max-width:760px){
  .dev-table-wrap{max-height:none;overflow:visible;background:transparent;border:0;box-shadow:none}
  table.dev-table{min-width:0;display:block}
  .dev-table caption{position:static;background:transparent;border:0;padding:0 0 12px}
  .dev-table thead{display:none}
  .dev-table tbody{display:block}
  .dev-table tbody tr{
    display:block;margin-bottom:12px;padding:14px 16px;background:var(--panel);
    border:1px solid var(--line);border-radius:var(--r-m);
    border-left:3px solid color-mix(in srgb,var(--dev,var(--accent)) 65%,transparent);
  }
  .dev-table tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;padding:5px 0;text-align:right;
  }
  .dev-table tbody tr td:first-child{
    display:block;text-align:left;font-size:16px;padding-bottom:8px;margin-bottom:6px;
    border-bottom:1px solid var(--line);box-shadow:none;
  }
  .dev-table tbody td:first-child::before{content:none}
  .dev-table td:nth-child(n/**/+2)::before{
    content:attr(data-title);text-align:left;color:var(--faint);
    font:500 10.5px/1.6 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;
  }
  .dev-table td:nth-child(n/**/+2){font-size:14px}
  .dev-table tbody tr.dev-table__notice td{display:block!important;padding:12px 0;text-align:left!important;font-size:13px}
}

/* печать: таблица целиком */
@media print{
  .dev-table-wrap{max-height:none;overflow:visible;box-shadow:none;border-color:#999}
  .dev-table thead th{position:static}
}


/* ---------- режим по выбору и сворачиваемая полная таблица ---------- */
.mode-finder{padding:clamp(18px,3vw,30px);margin:0 0 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow)}
.mode-finder__controls{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.mode-finder__controls label{display:grid;gap:8px;color:var(--faint);font:600 11px/1.4 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase}
.mode-finder__controls select{width:100%;min-height:48px;padding:10px 40px 10px 14px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--panel-2);color:var(--ink);font:500 15px/1.4 var(--ff-body);letter-spacing:normal;text-transform:none}
.mode-finder__controls select:focus{outline:2px solid var(--accent);outline-offset:2px}
.mode-finder__controls select:disabled{opacity:.55;cursor:not-allowed}
.mode-finder__result{min-height:68px;display:flex;align-items:center;margin-top:16px;padding:16px 18px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-m)}
.mode-finder__hint{color:var(--muted);font-size:14px}
.mode-finder__answer{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;width:100%}
.mode-finder__answer strong{font:700 clamp(23px,3vw,30px)/1.15 var(--ff-display);color:var(--dev,var(--accent))}
.mode-finder__answer span{color:var(--muted);font-size:14px}
.mode-finder__empty{margin:0;color:var(--muted);font-size:14px}
.mode-table-details{margin:0 0 18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);overflow:hidden}
.mode-table-details>summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;font-weight:700;color:var(--ink)}
.mode-table-details>summary::-webkit-details-marker{display:none}
.mode-table-details>summary::after{content:"+";margin-left:auto;color:var(--dev,var(--accent));font:500 24px/1 var(--ff-mono)}
.mode-table-details[open]>summary::after{content:"−"}
.mode-table-details__count{color:var(--faint);font:500 11px/1.4 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase}
.mode-table-details .dev-table-wrap{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;max-height:640px}
.mode-table-details[open] .dev-table-wrap{margin:0}
@media(max-width:760px){
 .mode-finder__controls{grid-template-columns:1fr;gap:12px}
 .mode-finder__controls label{font-size:10px}
 .mode-finder__result{align-items:flex-start}
 .mode-table-details>summary{padding:15px 16px;font-size:14px}
 .mode-table-details__count{font-size:9px}
 .mode-table-details .dev-table-wrap{overflow:visible;max-height:none}
}


/* Searchable film combobox: input and dropdown are one control. */
.mode-film-field{position:relative;z-index:4}

.mode-combobox input{display:block;width:100%;min-height:48px;padding:10px 44px 10px 14px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--panel-2);color:var(--ink);font:500 15px/1.4 var(--ff-body);letter-spacing:normal;text-transform:none;outline:none}


.mode-combobox__toggle{position:absolute;right:5px;top:5px;width:38px;height:38px;border:0;border-radius:var(--r-s);background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.mode-combobox__toggle:hover{background:var(--accent-soft);color:var(--dev,var(--accent))}
.mode-combobox__list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:300px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow)}





.mode-combobox input:disabled{opacity:.55;cursor:not-allowed}
.mode-combobox__toggle:disabled{opacity:.4;cursor:not-allowed}
.mode-choice-field{position:relative;z-index:3}


/* --- режим-подборщик: форма как в образце, но с читаемыми ISO-плашками и боксами разведений --- */
.mode-finder__controls{display:block}
.mode-film-field{display:grid;gap:9px;position:relative;z-index:5}
.mode-finder__label,.mode-choice-group__title{display:block;margin:0;color:var(--faint);font:600 11px/1.45 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase}
.mode-combobox{position:relative;display:block}
.mode-combobox input{display:block;width:100%;min-height:52px;padding:12px 52px 12px 16px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--panel-2);color:var(--ink);font:500 15px/1.45 var(--ff-body);letter-spacing:normal;text-transform:none;outline:none}
.mode-combobox input::placeholder{color:var(--faint);opacity:1}
.mode-combobox input:focus{border-color:var(--dev,var(--accent));box-shadow:0 0 0 2px color-mix(in srgb,var(--dev,var(--accent)) 25%,transparent)}
.mode-combobox__toggle{position:absolute;right:5px;top:5px;width:42px;height:42px;border:0;border-radius:var(--r-s);background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.mode-combobox__toggle:hover,.mode-combobox__toggle[aria-expanded="true"]{background:var(--accent-soft);color:var(--dev,var(--accent))}
.mode-combobox__list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:320px;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow)}
.mode-combobox__list[hidden]{display:none!important}
.mode-combobox__option{padding:10px 12px;border-radius:var(--r-s);color:var(--ink);font:500 14px/1.45 var(--ff-body);cursor:pointer;user-select:none}
.mode-combobox__option:hover,.mode-combobox__option[aria-selected="true"]{background:var(--accent-soft);color:var(--dev,var(--accent))}
.mode-combobox__empty{padding:10px 12px;color:var(--muted);font-size:13px}
.mode-finder__choices{display:grid;gap:23px;margin-top:24px}
.mode-finder__choices[hidden],.mode-choice-group[hidden]{display:none!important}
.mode-choice-group{display:grid;gap:10px}
.mode-pills{display:flex;flex-wrap:wrap;gap:9px}
.mode-pill{min-width:82px;padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel-2);color:var(--ink);font:700 14px/1.2 var(--ff-body);cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s}
.mode-pill:hover{border-color:var(--dev,var(--accent));transform:translateY(-1px)}
.mode-pill[aria-pressed="true"]{border-color:var(--dev,var(--accent));background:var(--dev,var(--accent));color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--dev,var(--accent)) 24%,transparent)}
.mode-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mode-box{display:flex;min-height:62px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
.mode-box:hover{border-color:var(--dev,var(--accent));transform:translateY(-1px)}
.mode-box strong{font:700 15px/1.2 var(--ff-body)}
.mode-box span{color:var(--faint);font:500 11px/1.4 var(--ff-mono)}
.mode-box[aria-pressed="true"]{border-color:var(--dev,var(--accent));background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--dev,var(--accent))}
.mode-box[aria-pressed="true"] strong{color:var(--dev,var(--accent))}
.mode-finder__result{min-height:76px;margin-top:20px}
.mode-result-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 20px;width:100%}
.mode-result-card__caption{grid-column:1/-1;color:var(--faint);font:600 10px/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase}
.mode-result-card__time{grid-row:2;color:var(--dev,var(--accent));font:700 clamp(26px,3.5vw,36px)/1.1 var(--ff-display);font-variant-numeric:tabular-nums}
.mode-result-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.mode-result-badge{display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font:600 11px/1.25 var(--ff-body)}
.mode-result-badge--iso{border-color:color-mix(in srgb,var(--dev,var(--accent)) 38%,var(--line));color:var(--dev,var(--accent));font-weight:700}
.mode-result-badge--dilution{color:var(--ink);font-weight:700}
@media(max-width:760px){
 .mode-finder{padding:17px}
 .mode-finder__choices{gap:19px;margin-top:20px}
 .mode-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mode-result-card{grid-template-columns:1fr;gap:8px}
 .mode-result-card__time{grid-row:auto}
 .mode-result-card__meta{gap:6px}
 .mode-result-badge{font-size:10px;padding:5px 8px}
}


/* ---------- mode picker: compact desktop composition; stacked on smaller screens ---------- */
.mode-finder{
  display:grid;
  grid-template-columns:minmax(260px, .85fr) minmax(0, 1.65fr);
  grid-template-areas:"film choices" "result result";
  align-items:center;
  gap:18px 28px;
}
.mode-finder__controls{grid-area:film;display:block;min-width:0}
.mode-finder__choices{
  grid-area:choices;
  display:grid;
  grid-template-columns:minmax(130px,.6fr) minmax(240px,1.4fr);
  align-items:start;
  gap:16px 26px;
  min-width:0;
  margin-top:0;
}
.mode-finder__choices[hidden]{display:none!important}
.mode-choice-group{min-width:0;align-content:start}
.mode-pills{gap:8px}
.mode-pill{min-width:68px;padding:9px 12px}
.mode-boxes{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:8px}
.mode-box{min-height:58px;padding:10px 12px}
.mode-finder__result{grid-area:result;margin-top:0;min-width:0}

@media(max-width:900px){
  .mode-finder{
    grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr);
    gap:16px 20px;
  }
  .mode-finder__choices{grid-template-columns:1fr;gap:16px}
  .mode-boxes{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}
@media(max-width:680px){
  .mode-finder{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"film" "choices" "result";
    gap:18px;
  }
  .mode-finder__choices{grid-template-columns:1fr;gap:17px}
  .mode-finder__result{margin-top:0}
  .mode-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Keep the open mobile film dropdown above the following ISO and dilution groups. */
.mode-finder{isolation:isolate}
.mode-finder__controls{position:relative;z-index:20}
.mode-finder__choices{position:relative;z-index:1}
.mode-combobox__list{z-index:100}

/* Do not reserve/render the instruction strip until an actual result exists. */
.mode-finder__result[hidden]{display:none!important}

/* Readable result labels on the single-product picker. */
.mode-result-badge{font-size:12px;padding:6px 11px}
@media(max-width:760px){.mode-result-badge{font-size:11px;padding:6px 9px}}