/* web accounts (Web hesapları): view-specific styles (keep small; prefer panel.css components). Colours only via the
   theme variables. */
.wa-page .card-h{flex-wrap:wrap;row-gap:4px}
.wa-filters .select{max-width:240px}
/* an address can be long and has no spaces: it wraps anywhere instead of widening the page */
.wa-addr{overflow-wrap:anywhere;word-break:break-word}
.wa-hot{color:var(--warn);font-weight:600}
.wa-ip{white-space:nowrap}
.tbl td .sub.wa-mob{display:none}
.tbl td .sub .hwid{font-size:11.5px}
/* the lists (v3, one line per row; [data-list]: compact for every role, the owner too): the address as the name link
   (class n: bold, the text colour, underlined on hover) with one grey line under it, every other cell one value on one
   line; a long value is cut by CSS and whole in its title (and on the account page / in the side panel) */
.wa-page [data-list] .tbl td{padding:5px 16px;white-space:nowrap}
.wa-name{min-width:0;max-width:360px}
.wa-page [data-list] .tbl td a.n{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:600;line-height:1.25;color:var(--text);text-decoration:none}
@media (hover:hover){.wa-page [data-list] .tbl td a.n:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
.wa-page [data-list] .tbl td a.n:focus-visible{text-decoration:underline;text-underline-offset:3px}
.wa-page [data-list] .tbl td .sub{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.25;margin-top:1px}
.wa-page [data-list] .tbl td .st .mono{font-size:12.5px}
.wa-one{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* a value whose own column hides on a phone (the queue's Firma): after the grey line there only */
.wa-page [data-list] .tbl td .sub .wa-mob{display:none}
/* what a phone still needs from the hidden columns (the state; a request's kind): a line of its own there only */
.wa-mobl{display:none;margin-top:4px;font-size:13px;line-height:1.3;color:var(--muted)}
.wa-mobl .wa-kind + .st{margin-left:4px}

/* account page (v3 "Detail pages", .wa-detail): the header (the address, the W id with its copy button, one status line;
   the primary button and "İşlemler ▾" on the right), the two cards (one fact a row), the tabs' tables one line per row.
   calm.css loads last: these rules carry the page's class to win over its components of the same weight */
.wa-detail .card-h{flex-wrap:wrap;row-gap:4px}
.wa-detail .detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.wa-detail .detail-main{flex:1 1 320px;min-width:0}
.wa-detail .detail-title{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-width:0}
.wa-detail .detail-title h2{margin:0;font-size:22px;font-weight:600;line-height:1.25;min-width:0}
.wa-detail .detail-id{display:inline-flex;align-items:center;gap:2px;color:var(--muted)}
.wa-detail .detail-copy{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
@media (hover:hover){.wa-detail .detail-copy:hover{background:var(--panel2);color:var(--text)}}
.wa-detail .detail-copy span:where(.ic){width:15px;height:15px}
.wa-detail .detail-status{margin:6px 0 0;font-size:14px;color:var(--muted)}
.wa-detail .detail-status .st-active,.wa-detail .detail-status .st-revoked{color:var(--text)}
.wa-detail .detail-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* "İşlemler ▾" as tall as the primary button next to it */
.wa-detail .detail-acts .p-menu-btn{height:36px;padding:0 14px;font-size:14px;border-radius:8px}
/* the two cards: the facts wider; a label column as wide as its longest label (one line each) */
.wa-detail .detail-cards{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}
/* both cards' heads one height (the facts card's carries the "İşlem kaydı" link) */
.wa-detail .detail-cards .card-h{min-height:63px}
.wa-detail .detail-cards .kv{grid-template-columns:max-content minmax(0,1fr)}
.wa-detail .detail-cards .kv dt{white-space:nowrap}
/* the tabs' tables ([data-list]): one line per row, the first cell the name (bold, the text colour, underlined on hover
   when it is a link) and one grey line; a long value is cut here and whole in its title and in the row's side panel */
.wa-detail [data-list] .tbl td{padding:4px 16px;white-space:nowrap}
.wa-detail .wa-nc{min-width:0;max-width:380px}
.wa-detail [data-list] .tbl td .n{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:600;line-height:1.25;color:var(--text);text-decoration:none}
@media (hover:hover){.wa-detail [data-list] .tbl td a.n:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
.wa-detail [data-list] .tbl td a.n:focus-visible{text-decoration:underline;text-underline-offset:3px}
.wa-detail [data-list] .tbl td .sub{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.25;margin-top:1px}
.wa-detail [data-list] .tbl td .sub .mono{font-size:inherit}
.wa-detail [data-list] .tbl td .sub .hwid{padding:0 4px;font-size:11.5px;line-height:1.25;vertical-align:bottom}
.wa-detail [data-list] .tbl td .sub .hwid button span:where(.ic){width:12px;height:12px}
/* what a narrow screen's hidden columns hold: after the grey line, or as a grey line of its own, there only */
.wa-detail .wa-dm,.wa-detail [data-list] .tbl td .sub.wa-mob{display:none}
.wa-detail .wa-act{width:1%;text-align:right}
/* under a table: the state notice in view, the explanation behind "Nasıl çalışır?" */
.wa-detail .wa-foot{display:flex;flex-direction:column;gap:6px;padding:10px 16px 12px;border-top:1px solid var(--line)}
.wa-detail .wa-foot .geo-foot{padding:0;border-top:0}
.wa-detail .wa-foot .field-help{max-width:80ch}
/* a whole value in a side panel (a user agent, a hash): it wraps anywhere */
.wa-long{overflow-wrap:anywhere;word-break:break-all}
/* the signed-disclaimer signature, decrypted into its side panel: the ink is on light paper, so it sits on a white card */
.wa-sig{margin-top:14px}
.wa-sig-img{display:block;width:100%;max-width:480px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px}
.wa-note{margin:0}
.wa-note-t{white-space:pre-wrap;overflow-wrap:anywhere}
.wa-pick{width:100%;min-height:150px}
/* the app's sign-in is off: why "Girişi zorunlu yap" is disabled (.geo-foot: customers.css) */
.geo-foot.wa-gate-off{display:flex;gap:8px;align-items:flex-start;color:var(--muted)}
.wa-gate-off span:where(.ic){width:14px;height:14px;flex:none;margin-top:1px;color:var(--warn)}
.wa-rowacts{width:1%;white-space:nowrap}
.wa-rowbtns{gap:6px;flex-wrap:nowrap;justify-content:flex-end}
/* "Lisansa ekle" while the licence is full: plainly off (no fill, a dashed edge, the faint text: not only fainter as
   .btn:disabled makes it), its reason as text next to it (on the left: the row stays one line) */
.wa-rowbtns.wa-full{flex-direction:row-reverse;align-items:center;gap:10px}
.btn.wa-off:disabled{opacity:1;background:transparent;border-style:dashed;color:var(--faint)}
.btn.wa-off:disabled span:where(.ic){opacity:.6}
.wa-why{color:var(--muted);font-size:11.5px;line-height:1.3;white-space:nowrap}
/* a pending PC on another licence now: that licence and the PC's name there, after a warn icon (it is someone's PC) */
.tbl td .sub.wa-elsewhere{color:var(--text)}
.wa-elsewhere span:where(.ic){width:12px;height:12px;color:var(--warn);vertical-align:-2px;margin-right:4px}
.wa-where .mono{font-size:inherit}
/* a narrow screen: the button moves under the pending PC (its column is hidden, .hide-m) */
.wa-rowbtns.wa-mob-btns{display:none}

@media (max-width:900px){
  .tbl td .sub.wa-mob{display:block}
  .wa-page [data-list] .tbl td .sub .wa-mob{display:inline}
  /* a phone: the list fits its card (the first cell wraps a long address instead of widening the table; nothing is cut) */
  .wa-page [data-list] .wa-mobl{display:block;white-space:normal}
  .wa-page [data-list] .wa-name{max-width:none}
  .wa-page [data-list] .tbl td .wa-name a.n,.wa-page [data-list] .tbl td .wa-name .sub{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  .grid.wa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wa-detail .detail-cards{grid-template-columns:minmax(0,1fr)}
  .wa-detail .wa-dm{display:inline}
  .wa-detail [data-list] .tbl td .sub.wa-mob{display:block}
  .wa-rowbtns.wa-mob-btns{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:8px}
  .wa-rowbtns.wa-mob-btns.wa-full{flex-direction:row;align-items:center}
}
@media (max-width:560px){
  .wa-filters .select{max-width:none;flex:1 1 140px}
  /* the status segments wrap inside the window (every one stays reachable) */
  .wa-filters .seg{display:flex;flex-wrap:wrap;max-width:100%}
  .wa-filters .seg button{white-space:nowrap}
  /* tighter cell sides: the list's columns fit the card (the state's word sets the first column's narrowest width) */
  .wa-page [data-list] .tbl th,.wa-page [data-list] .tbl td{padding-left:10px;padding-right:10px}
  .wa-head .avatar{display:none}
  .wa-actions{justify-content:flex-start}
  .wa-actions .btn{flex:1 1 auto}
  .wa-kpis .kpi .v{font-size:19px}
  .wa-detail .detail-title h2{font-size:19px}
  .wa-detail .detail-acts{width:100%}
  .wa-detail .detail-acts > .btn{flex:1 1 auto}
  /* a phone: each fact's label over its value */
  .wa-detail .detail-cards .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .wa-detail .detail-cards .kv dt{white-space:normal;font-size:13px}
  .wa-detail .detail-cards .kv dd{margin-bottom:10px;overflow-wrap:anywhere}
  .wa-detail .detail-cards .kv dd:last-child{margin-bottom:0}
  /* a phone: the tabs' tables fit the card (the first cell wraps, a state's date leaves: it is in its title and the
     side panel), so a row's ⋯ stays inside it */
  .wa-detail [data-list] .tbl td{padding:6px 8px}
  .wa-detail [data-list] .tbl td:first-child{white-space:normal}
  .wa-detail .wa-nc{max-width:none}
  .wa-detail [data-list] .tbl td:first-child .n,.wa-detail [data-list] .tbl td:first-child .sub{white-space:normal;overflow-wrap:anywhere}
  .wa-detail .wa-dd{display:none}
}