/* activations: view-specific styles (keep small; prefer panel.css components). Theme via variables only.
   The e-mail-first queue (docs/superpowers/specs/2026-11-01-activation-redesign-design.md section 2): the head, the lede,
   the amber lines, the search with the lookup card, the sections A / B as P.row lists, the folded new accounts and section C,
   "Nasıl çalışır?", the dialogs and the approve drawer; plus the parts the Lisanslar create drawer gains for it
   (P.licenceCreate: the account line, the typo guard, the notify box, the reason picks, the result panel). */

/* the page: the head with its buttons, the lede, the read-only line, the search; a part that is not drawn stays hidden
   whatever its own display */
.act-page [hidden],.acw-warn[hidden],.lic-notify[hidden]{display:none}
.act-page .page-head{margin-bottom:0;align-items:center}
.act-head-btns{display:flex;gap:8px;flex-wrap:wrap}
.act-lede{margin:0;font-size:13px;color:var(--muted);max-width:90ch}
.act-ro{display:flex;gap:8px;align-items:center;margin:0;font-size:13px;color:var(--muted)}
.act-ro span:where(.ic){width:14px;height:14px;flex:none;color:var(--faint)}
.act-count{font-size:12.5px}
.act-page .filters{margin-bottom:0}
/* the search field wide enough for its whole hint; full width on a phone (panel.css) */
@media (min-width:561px){.act-page .filters .input{width:420px;max-width:100%}}
/* the IP data's credit (DB-IP) under the lists (.geo-foot: customers.css) */
.act-geo-foot{border-top:0;padding:0 2px}

/* the page's warnings: plain amber text with the alert icon (no background, no radius, never a chip) */
.acw-warn{display:flex;gap:7px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.45;color:var(--warn);overflow-wrap:anywhere}
.acw-warn > span:where(.ic){width:14px;height:14px;flex:none;margin-top:2px}
.acw-warn a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.acw-warn-t{color:var(--warn)}

/* the sections: a heading line (the B one with "Sırala" on its right), a grey sub line, the list; an error line in place */
.act-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.act-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.act-sec-h h3{font-size:14.5px;font-weight:650;margin:0}
.act-sub{margin:0;font-size:12.5px;color:var(--muted);max-width:90ch}
.act-err-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--bad)}
.act-err-l span:where(.ic){width:15px;height:15px;flex:none}
/* a row's amber line sits on its own line under the row (the row wraps; on a phone it spans the row's grid) */
.act-page .p-row{flex-wrap:wrap}
.act-page .p-row > .acw-warn,.act-look .acw-warn{flex:1 0 100%;padding-left:26px}
.act-page .p-row .p-meta .warn{color:var(--warn)}
/* the folded parts (new accounts, section C): the disclosure, then its sub line and list */
.act-fold{min-width:0}
.act-fold:empty{display:none}
.act-fold-b{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.act-empty .empty{display:flex;flex-direction:column;align-items:center;gap:8px}
.act-empty-t{margin:0;font-size:13px;color:var(--muted);max-width:60ch}

/* the lookup card: the address, its facts (P.kv), the typo guard, the one action */
.act-look .card-h h3{font-size:13.5px;overflow-wrap:anywhere}
.act-look-b{gap:10px}
.act-look .kv{grid-template-columns:130px minmax(0,1fr)}

/* "Nasıl çalışır?": the steps numbered, the old-version line under them */
.act-how-box{display:flex;flex-direction:column;gap:6px}
.act-how-t{display:flex;flex-direction:column;gap:8px;padding:4px 0 0 20px}
.act-how-t p{margin:0;font-size:13px;color:var(--muted);max-width:78ch}
.act-how-t p.act-hint{color:var(--faint)}
.act-steps{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);max-width:78ch}
.act-steps-row{flex-direction:row;flex-wrap:wrap;gap:4px 22px}

/* the dialogs: the PC's summary of the remove, the extend's term */
.act-sum{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px}
.act-ext .act-end{margin:0;font-size:12.5px;color:var(--muted)}
.act-ext .act-end.bad{color:var(--bad)}
.act-dur{gap:8px;flex-wrap:wrap}
.act-date{width:auto;min-width:160px;flex:1;max-width:220px}

/* the approve drawer */
.act-form{gap:12px}
.act-sec-t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.act-form > .act-sec-t:first-child{margin-top:0;padding-top:0;border-top:0}
.act-hwfull{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;background:var(--panel3)}
.act-hwfull .mono{flex:1;min-width:0;word-break:break-all;line-height:1.5;padding-top:5px}
.act-hwfull .icon-btn{flex:none}
.act-acct{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;overflow-wrap:anywhere}
.act-acct > span:where(.ic){width:15px;height:15px;flex:none;margin-top:2px;color:var(--faint)}
.act-acct > span:where(:not(.ic)){display:flex;flex-direction:column;gap:1px;min-width:0}
.act-acct-l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.act-acct b{font-weight:600}
.act-acct small{font-size:11.5px;color:var(--muted)}
.act-tight{gap:8px}
.select.act-cust-sel{background-image:none;padding:4px;min-height:0;height:auto}
.act-cust-sel option{padding:6px 8px;border-radius:6px}
.act-found{font-size:12px;color:var(--ok)}
.act-span{grid-column:1 / -1}
.field small.act-end{color:var(--muted)}
.field small.act-end.is-bad{color:var(--bad)}
.act-paid .check{min-height:36px}
.act-cc{text-transform:uppercase;font-family:var(--mono)}
/* a field's own error under it: the new customer's e-mail (with "O müşteriyi seç"), the customer list, the licence choice */
.act-form .act-ferr{color:var(--bad);font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.act-form .act-ferr:empty{display:none}
/* "Ne yapılsın?": one radio list; a choice that cannot be made stays, off, with its reason under it */
.act-choices{display:flex;flex-direction:column;gap:6px}
.act-choice{display:flex;flex-direction:column;gap:6px;min-width:0}
.act-choice > .act-why{padding-left:34px;font-size:11.5px;color:var(--faint)}
.act-choice > .acw-warn{padding-left:34px}
.act-choice.off .act-pc{opacity:.6;cursor:not-allowed}
.act-choice.on > .act-pc{border-color:var(--accent);background:var(--acc-bg)}
.act-pcs{display:flex;flex-direction:column;gap:6px;padding-left:24px}
.act-pc{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);cursor:pointer;min-width:0}
.act-pc.on{border-color:var(--accent);background:var(--acc-bg)}
.act-pc input{flex:none;margin:0;accent-color:var(--accent)}
.act-pc-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:13px;overflow-wrap:anywhere}
.act-pc-t b{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.act-pc-t .hwid{max-width:100%}
/* the tick a code other PCs show too asks for, under its amber line */
.act-form > .act-same-ok{align-self:flex-start;align-items:flex-start;line-height:1.4}
.act-form > .act-same-ok input{flex:none;margin-top:2px}
.act-summary{margin:0;font-size:13px;color:var(--text)}
.act-summary:empty{display:none}
.act-bond-list{display:flex;flex-direction:column;gap:6px}
.act-bond-list .act-pc:has(input:checked){border-color:var(--accent);background:var(--acc-bg)}
.act-after{margin:0;font-size:13px}

/* the Lisanslar create drawer's parts for Aktivasyonlar (views/licenses.js P.licenceCreate) */
.field small.lic-acct{color:var(--muted)}
.field small.lic-acct.warn,.field small.lic-sim{color:var(--warn)}
.lic-reason{display:flex;flex-direction:column;gap:6px}
.lic-picks{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12.5px}
.lic-picks .linkish{font-size:12.5px;color:var(--muted);padding:2px 0}
.lic-notify .check{align-items:flex-start;line-height:1.4}
.lic-notify .check input{margin-top:2px;flex:none}
.lic-sum{margin:0;font-size:13px;color:var(--muted)}
.lic-result{gap:12px}
.lic-res-h{display:flex;align-items:center;gap:8px;font-size:15px}
.lic-res-h:focus{outline:none}
.lic-res-h span:where(.ic){width:18px;height:18px;color:var(--ok)}
.lic-res-key{margin:0;font-size:13px;overflow-wrap:anywhere}
.lic-res-mail{margin:0;font-size:13px}
.lic-res-fail{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

@media (max-width:560px){
  .act-how-t{padding-left:0}
  .act-steps-row{flex-direction:column}
  .act-page .p-row > .acw-warn{grid-column:1 / -1;padding-left:0}
  .act-page .p-row-a .act-do,.act-page .p-row-a .act-ok{min-height:44px}
  /* an account row: the address whole on its line, its button under the facts */
  .act-page .act-acc .p-row-h,.act-page .act-new-row .p-row-h{grid-column:2 / -1}
  .act-page .act-acc .p-row-a,.act-page .act-new-row .p-row-a{grid-column:1 / -1;grid-row:3;justify-content:flex-end}
  .act-look .kv{grid-template-columns:1fr}
  .act-date{max-width:none}
  .act-pc{flex-wrap:wrap}
  .act-choice > .act-why,.act-choice > .acw-warn,.act-pcs{padding-left:0}
}
/* who sold a new licence of a reseller's customer (views/activations.js drawSale) */
.act-sale-opts{display:flex;flex-wrap:wrap;gap:6px 18px}
.act-sale-opts .check{min-height:36px}