/* ECU erişimi (views/ecu_access.js): the page's two one-line lists, the rule lists and the editor (the licence page's
   tab, a plan's side panel) and the package drawer's ECU picker. Small; everything else comes from panel.css. Colours
   only via the theme variables. */

/* the packages and the plans' rules as one-line lists (v3 "Lists"; decision C: compact for every role, the owner too):
   one line per cell, every row at most 44 px; the first cell the name link (neutral, underlined on hover) with one grey
   line under it; a name, note or target too long for its cell is cut on its line, whole in its title and in the side
   panel; the help behind "Nasıl çalışır?" */
.eca-list .tbl td{padding-top:5px;padding-bottom:5px;line-height:18px;white-space:nowrap}
.eca-list .tbl td.eca-name{max-width:0;width:42%}
.eca-list .tbl td.eca-tgt{max-width:0;width:34%}
.eca-list .tbl td.eca-name > a.n,.eca-list .tbl td.eca-name > .sub,.eca-list .tbl td.eca-tgt > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eca-list .tbl td a.n{color:var(--text);font-weight:600;text-decoration:none}
@media (hover:hover){.eca-list .tbl td a.n:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}}
.eca-list .tbl td .sub{margin-top:0;font-size:12px;line-height:14px}
.eca-list .tbl td .st{line-height:18px}
.eca-list .tbl th.eca-acts,.eca-list .tbl td.eca-acts{width:46px;padding-left:4px;text-align:right}
.eca-help{margin:4px 0 0;font-size:13px;color:var(--muted);max-width:80ch}
/* the page head (live 1): the stack's gap spaces it from "Nasıl çalışır?" (calm.css adds 24 px of its own) */
.eca-page > .page-head{margin-bottom:0}
.eca-warn{align-items:center}
/* a plan's side panel: the editor's Vazgeç / Kaydet sit in the panel's foot */
.eca-fslot{display:contents}

/* a rule: [type] target ........ state / tools */
.eca-rules{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.eca-rule{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 12px;border-bottom:1px solid var(--line);font-size:13px}
.eca-rule:last-child{border-bottom:0}
.eca-type{flex:none;min-width:88px;justify-content:center}
.eca-target{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.eca-end{display:flex;align-items:center;gap:6px;flex:none}
.eca-st{width:auto;min-height:30px;height:30px;padding-top:4px;padding-bottom:4px;font-size:12.5px}
.eca-none{margin:0;padding:10px 12px;border:1px dashed var(--line2);border-radius:10px;font-size:13px}
.eca-sub{margin-bottom:8px}
.eca-sub b{font-size:12px;color:var(--muted);font-weight:600}
.eca-hint{display:block;margin-top:2px}
.eca-foot{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12.5px}
.eca-foot span:where(.ic){width:15px;height:15px;flex:none;margin-top:2px}
.eca-p{margin:0;font-size:13px}

/* the editor: add row (type, target, state, button) and the buttons */
.eca-add{display:flex;gap:8px;flex-wrap:wrap}
.eca-add .select,.eca-add .input{width:auto;flex:1 1 150px;min-width:0}
.eca-add > .select:first-child{flex:0 1 150px}
.eca-add > .select:nth-last-child(2){flex:0 1 110px}
.eca-add .btn{flex:none}
.eca-btns{justify-content:flex-end}
/* a narrow editor (a plan's half-width card, a phone): type + state on one row, the target + the button below */
.eca-edit{container-type:inline-size}
@container (max-width:520px){
  .eca-add > .select:first-child{order:1;flex:1 1 calc(50% - 4px)}
  .eca-add > .select:nth-last-child(2){order:2;flex:1 1 calc(50% - 4px)}
  .eca-add .input,.eca-add > .select:nth-child(3){order:3;flex:1 1 0}
  .eca-add .btn{order:4}
  .eca-mode .seg{display:flex;width:100%}
  .eca-mode .seg button{flex:1 1 0;justify-content:center;text-align:center}
}

/* the licence tab's check */
.eca-check{display:flex;gap:8px}
.eca-check .input{flex:1;min-width:0}
.eca-result:empty{display:none}
.eca-result p{margin:6px 0 0;font-size:12.5px}

/* the package drawer: filters, the ECU list */
.eca-filters{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.eca-pick{max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px 0}
.eca-item{display:flex;align-items:center;gap:8px;padding:6px 12px;width:100%;min-width:0}
.eca-item:hover{background:var(--panel2)}
.eca-iname{font-weight:600;white-space:nowrap}
.eca-item small{flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eca-pick .eca-none{margin:8px 12px}
.eca-count{font-size:12.5px}
.eca-note{min-height:60px}
.eca-del{margin-right:auto}

@media (max-width:760px){
  .eca-filters{grid-template-columns:minmax(0,1fr)}
  .eca-type{min-width:0}
  .eca-rule{flex-wrap:wrap}
  .eca-item small{display:none}
}

/* the add row's note: what a brand rule reaches, the ECUs the supplier reports together */
.eca-addhint{display:block;margin-top:6px;font-size:12px;line-height:1.45}
.eca-addhint:empty{display:none}