/* customers: view-specific styles (keep small; prefer panel.css components). Colours only via the theme variables. */
.cu-page .card-h{flex-wrap:wrap;row-gap:4px}
/* the filter row: the search gives way so the segments, the two selects, the checkbox and "Temizle" (while a filter is on)
   stay on one line at 1440 px */
.cu-filters .input{width:auto;flex:1 1 160px;min-width:140px;max-width:280px}
.cu-filters .select{max-width:160px}
.cu-seg{display:flex;flex:none;min-width:0}
.cu-filters .check{flex:none;white-space:nowrap}
.cu-tags{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.cu-ph{margin-left:6px;vertical-align:middle}
.tbl td .sub.cu-mob{display:none}
.tbl td .sub.cu-warn{color:var(--warn)}
.tbl td .sub.cu-bad{color:var(--bad)}
.cu-use{display:flex;align-items:center;gap:6px;min-width:78px}
.cu-use .bar{flex:1;min-width:28px}
.cu-lic td .mono,.cu-lic td .sub{white-space:nowrap}
/* the list (v3 one-line list; decision C: compact for every role, the owner too): a row of at most 44 px, one value per cell
   on one line; the first cell the company (bold link, neutral colour, underline on hover) with its one grey line. A long
   value stays inside a bounded cell by wrapping (no ellipsis: the owner's whole-value audit) with the whole value in the
   DOM and in the cell's title */
.cu-page [data-list] .tbl td{padding:5px 14px;line-height:1.3;white-space:nowrap;vertical-align:middle}
.cu-page [data-list] .tbl td .sub:not(.cu-mob){display:block;font-size:12px;line-height:1.25;margin-top:1px;color:var(--faint);white-space:normal;overflow-wrap:anywhere}   /* the phone-only line (.cu-mob) stays hidden on a wide screen */
.cu-co{min-width:0;max-width:34ch}
/* a record without an e-mail and a contact: the grey line stays as an empty line, so every row has the same height */
.cu-co .sub.cu-co-none::before{content:"\00a0"}
.cu-co a.n{display:block;color:inherit;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
.cu-co a.n b{font-weight:600}
.cu-page [data-list] .tbl td a.n:hover,.cu-page [data-list] .tbl td a.n:focus-visible{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cu-geo,.cu-res{display:block;max-width:26ch;white-space:normal;overflow-wrap:anywhere}
.cu-page .st.cu-mm{color:var(--warn)}
.cu-page .st.cu-mm i{background:var(--warn)}
.cu-page .st-archived,.cu-page .st-placeholder{color:var(--muted)}
.cu-page [data-list] .tbl td.cu-acts,.cu-page [data-list] .tbl th.cu-acts{width:1%;text-align:right;padding-left:0}
/* "Sırala ▾" on the card head's line, right of the count (no line of its own above the headers) */
.cu-listcard{position:relative}
.cu-page .cu-list .tbl-sort{position:absolute;top:9px;right:14px;margin:0;padding:0}
/* location on the customer page: the flag where the address and the machines' IP location differ, the per-machine notes */
.badge.cu-flag{background:var(--warn-bg);color:var(--warn)}
.tbl td .sub.cu-hint{color:var(--faint);cursor:help}
.cu-loc-note{color:var(--muted)}
/* the source of an IP location ("IP" / "Cloudflare") and the IP data's credit (DB-IP); also used by the fleet (Filo) */
.geo-src{display:inline-block;margin-left:6px;padding:0 5px;border-radius:999px;border:1px solid var(--line2);font-size:10.5px;line-height:16px;color:var(--muted);white-space:nowrap;cursor:help;vertical-align:1px}
.geo-foot{margin:0;padding:8px 16px 10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.geo-credit a{color:inherit;text-decoration:underline}
.cu-use span{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}

/* the customer page (v3 "Detail pages"): the head (the company, its id + copy, one status line; Düzenle + İşlemler) */
.cu-detail .detail-head{align-items:flex-start}
.cu-dh-main{flex:1 1 420px;min-width:0}
.cu-dh-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.cu-dh-title h2{margin:0;min-width:0;overflow-wrap:anywhere}
.cu-dh-id{font-size:13px;color:var(--muted)}
.cu-copy{width:30px;padding:0}
.cu-copy span:where(.ic){width:15px;height:15px}
.cu-detail .detail-head .cu-dh-status{margin:6px 0 0;line-height:22px;color:var(--muted);overflow-wrap:anywhere}
.cu-dh-status .st-active,.cu-dh-status .st-online{color:var(--text)}
.cu-dh-sep{color:var(--faint)}
.cu-dh-acts{flex:none;gap:8px}
/* the location flag as text (head, facts, the machine table): amber, its detail in the title */
.cu-flag-t{color:var(--warn);cursor:help}
.cu-warn-t{color:var(--warn)}
/* two cards side by side: the facts (and the web account under them), "Bugün" beside both; one line per fact */
.cu-detail .detail-cards{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
.cu-detail .detail-cards > .card{grid-column:1}
.cu-detail .detail-cards > .cu-today{grid-column:2;grid-row:1 / span 2}
.cu-detail .card.cu-today.kpi{display:block;padding:0;gap:0;overflow:visible}
.cu-today .kv{grid-template-columns:auto minmax(0,1fr)}
.cu-detail .kv dd .cu-more{margin-left:6px}
.cu-detail .kv dd .tag{vertical-align:middle}
.cu-center{display:flex;justify-content:center;padding:0 0 22px}
/* the tables inside (licences, the machines' IP locations): one-line lists, the first cell with one grey line */
.cu-detail .cu-lic .tbl td,.cu-detail .cu-ipl .tbl td{padding:5px 16px;line-height:18px;white-space:nowrap}
.cu-detail .cu-lic .tbl td:first-child,.cu-detail .cu-ipl .tbl td:first-child{white-space:normal;overflow-wrap:anywhere}
.cu-detail .tbl td a.n{color:var(--text);font-weight:600;text-decoration:none}
@media (hover:hover){.cu-detail .tbl td a.n:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}}
.cu-page.cu-detail .cu-lic .tbl td .sub,.cu-page.cu-detail .cu-ipl .tbl td .sub{margin-top:0;font-size:12px;line-height:14px}   /* outweighs the list page's .sub rule (both pages carry .cu-page) */
.cu-detail .tbl td .st{line-height:18px}
.cu-ipp[title],.cu-ipl .cu-hint{cursor:help}
.cu-ipl .cu-hint{color:var(--muted)}
/* the company's web account card: a long address wraps instead of widening the page */
.cu-web-addr{overflow-wrap:anywhere;word-break:break-word}
.cu-web-none{margin:0}

/* form */
.field .cu-err{color:var(--bad);font-size:11.5px}
.field .cu-err:empty{display:none}
.field .cu-err a{color:inherit;text-decoration:underline;font-weight:600}
.cu-country{display:flex;gap:8px}
.cu-country .select{flex:1;min-width:0}
.cu-cc{width:64px;flex:none;text-transform:uppercase}
.cu-reason{min-height:64px}
.cu-sep{border:0;border-top:1px solid var(--line);margin:2px 0}

/* notes + audit */
.cu-note{min-height:240px}
.cu-note-ro{white-space:pre-wrap;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.timeline .ev p.cu-tgt{color:var(--text);font-size:12px}
.cu-diff{list-style:none;margin:4px 0 2px;padding:6px 9px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.cu-dk{color:var(--faint)}
.cu-old{text-decoration:line-through;color:var(--faint)}

@media (max-width:1180px){
  .cu-detail .detail-cards{grid-template-columns:minmax(0,1fr)}
  .cu-detail .detail-cards > .card,.cu-detail .detail-cards > .cu-today{grid-column:auto;grid-row:auto}
}
@media (max-width:900px){
  .tbl td .sub.cu-mob{display:block}
}
@media (max-width:560px){
  .cu-filters .select{max-width:none;flex:1 1 140px}
  .cu-detail .cu-lic .tbl td,.cu-detail .cu-ipl .tbl td{white-space:normal}
  /* the four segments on a phone: two by two, the whole width (no segment cut at the screen's edge) */
  .cu-seg{flex:1 1 100%}
  .cu-seg .seg{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .cu-seg .seg button{justify-content:center;padding:7px 8px}
  .cu-seg .seg button:nth-child(odd){border-left:0}
  .cu-seg .seg button:nth-child(n+3){border-top:1px solid var(--line2)}
  .cu-filters .input{max-width:none;flex:1 1 100%}
  /* the list on a phone (Firma · Durum · ⋯): the company and its e-mail keep the width (an e-mail breaks only when it is
     wider than the screen), the state may take a second line */
  .cu-co{max-width:none}
  .cu-co a.n,.cu-page [data-list] .tbl td .sub{overflow-wrap:break-word}
  .cu-page [data-list] .tbl td{white-space:normal}
  .cu-page [data-list] .tbl td.cu-acts{white-space:nowrap}
  .cu-page [data-list] .tbl td .st{white-space:normal}
  .cu-head .avatar{display:none}
  .cu-kpis .kpi .spark{display:none}
  .cu-kpis .kpi.cu-sparked .d{padding-right:0}
  .cu-kpis .kpi .v{font-size:19px}
}