/* licenses: view-specific styles (small; everything else comes from panel.css). Colours only via the theme variables. */

/* list (the v3 one-line list, decision C: compact for every role, the owner too): the filters on ONE row at desktop
   widths (the search grows and shrinks; where the row cannot hold them all, from about 1300 px down, the search and the
   checkbox move to a second line instead of the status seg being cut; on a phone the seg scrolls inside itself), the
   customer chip row under them (P.chips, only while that filter is on); one line per cell, the first cell's name link
   with the key under it, every row at most 44 px */
.lic-filters{flex-wrap:wrap}
.lic-filters .check{white-space:nowrap;flex:none}
.lic-seg{flex:none;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.lic-seg::-webkit-scrollbar{display:none}
.lic-seg .seg{flex:none}
.lic-seg .seg button{white-space:nowrap}
.lic-q{position:relative;display:flex;flex:1 1 180px;min-width:120px}
.lic-q span:where(.ic){position:absolute;left:10px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:var(--faint);pointer-events:none}
.filters .lic-q .input{padding-left:32px;width:100%}
.lic-chips{display:flex;margin:-4px 0 12px}
.lic-chips:empty{display:none}
.lic-list{transition:opacity .15s}
.lic-list.lic-busy{opacity:.55}
/* column order = columns() in views/licenses.js: 1 Firma, 2 Plan, 3 Durum, 4 Bugün, 5 Bilgisayar, 6 Son görülme */
.lic-list .tbl td{padding:5px 16px;line-height:18px;white-space:nowrap}
.lic-list .tbl td:first-child{white-space:normal;overflow-wrap:anywhere}
.lic-list .tbl td a.n{color:var(--text);font-weight:600;text-decoration:none}
@media (hover:hover){.lic-list .tbl td a.n:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px}}
.lic-list .tbl td .sub{margin-top:0;font-size:12px;line-height:14px;white-space:nowrap}
.lic-list .tbl td .st{line-height:18px}
@media (max-width:1180px){.lic-list .tbl th:nth-child(6),.lic-list .tbl td:nth-child(6){display:none}}

/* licence page (ux3 D, the v3 spec's "Detail pages"; .lic-dp = the page's box): the head, the pinned notes, two cards */
.lic-dp .detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.lic-dp .dh-main{flex:1 1 380px;min-width:0}
.lic-dp .dh-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
.lic-dp .dh-title h2{margin:0;font-size:22px;font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.lic-key{font-family:var(--mono);font-weight:600;letter-spacing:.02em;word-break:break-all}
.lic-dp .dh-title span.lic-key{font-size:14px;font-weight:500;color:var(--muted)}
.lic-dp .dh-title h2.lic-key{font-size:20px}
.lic-copy{width:30px;height:30px}
.lic-dp .detail-status{margin-top:6px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.lic-dp .detail-status .st{display:inline-flex;vertical-align:baseline;gap:7px}
.lic-dp .detail-status .st i{align-self:center}
.lic-dp .dh-acts{display:flex;align-items:center;gap:8px;flex:none}
.lic-dp .dh-acts .btn{height:36px;padding:0 14px}
.lic-dp .dh-note{display:flex;align-items:center;gap:8px;margin:0;max-width:420px;color:var(--muted);font-size:13px}
.lic-dp .dh-note span:where(.ic){width:15px;height:15px;flex:none}
.lic-note{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);font-size:13px}
.lic-note span:where(.ic){width:16px;height:16px;flex:none;margin-top:2px}
.lic-note.n-bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent)} .lic-note.n-bad span:where(.ic){color:var(--bad)}
.lic-note.n-warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .lic-note.n-warn span:where(.ic){color:var(--warn)}
.lic-note.n-acc{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .lic-note.n-acc span:where(.ic){color:var(--warn)}
.lic-note.n-info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent)} .lic-note.n-info span:where(.ic){color:var(--info)}
/* the two cards: the licence's facts and "Bugün", side by side; one under the other on a narrow screen */
.lic-dp .detail-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.lic-dp .detail-cards .kv{grid-template-columns:150px minmax(0,1fr)}
@media (max-width:980px){.lic-dp .detail-cards{grid-template-columns:minmax(0,1fr)}}
.lic-pools{display:flex;flex-direction:column;gap:6px}
.lic-usage{display:flex;align-items:center;gap:10px}
.lic-usage .bar{flex:1;max-width:180px}
.lic-usage .lic-gap{visibility:hidden}
.lic-usage .mono{color:var(--muted);white-space:nowrap}
.lic-full{display:block;margin-top:4px;color:var(--bad);font-size:12.5px;font-weight:600}
.lic-notes{white-space:pre-wrap}
.lic-center{justify-content:center;padding:0 16px 24px}
/* the licence's owner (facts): why a licence has none, under the verdict; a PC's home registration (machines table) */
.lic-why{display:block;margin-top:2px;font-size:12px}
.lic-home{margin-left:8px;font-size:11px;line-height:1.6;vertical-align:1px}
.lic-home.off{color:var(--faint)}

/* forms (drawer + dialogs) */
.lic-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.lic-field-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lic-field-h > span{font-size:12px;color:var(--muted);font-weight:600}
.lic-mini{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent-text)}
.lic-mini span:where(.ic){width:13px;height:13px}
@media (hover:hover){.lic-mini:hover{text-decoration:underline}}
.lic-hwid{min-height:70px;word-break:break-all}
.field small.lic-hint.ok{color:var(--ok)} .field small.lic-hint.bad{color:var(--bad)}
/* the create drawer: a found record's fields locked (edited on the licence page), read as such */
.lic-holder .input[readonly],.lic-holder .select:disabled{background:var(--panel3);color:var(--muted);border-style:dashed;cursor:not-allowed}
/* the PC removal's confirmation under owner user: the account whose app sign-in the team closes */
.lic-rm-acct{display:flex;gap:8px;align-items:center;margin:0;font-size:12.5px}
.lic-rm-acct span:where(.ic){width:14px;height:14px;flex:none;color:var(--faint)}
.lic-rm-acct a{text-decoration:underline;text-underline-offset:2px}
.lic-paid{min-height:36px}
.lic-preview{padding:9px 12px;border-radius:9px;background:var(--acc-bg);color:var(--text);font-size:13px}
.lic-preview b{color:var(--accent-text)}

/* machines: a table, one line per machine (Ad · Durum · Sürüm · Bugün · Eklendi · ⋯); a row opens the side panel */
.lic-count{font-size:12.5px;white-space:nowrap}
.lic-dp .machines td{white-space:nowrap;padding-top:10px;padding-bottom:10px}
.lic-dp .machines .m-name b{font-weight:600}
.lic-dp .machines .m-ver .warn{color:var(--warn)}
.lic-dp .machines .m-full{color:var(--bad);font-weight:600}
.lic-dp .machines td.m-more{width:56px;padding-top:5px;padding-bottom:5px;text-align:right}
.lic-dp .machines tr.click:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lic-mfoot{margin:0;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
/* the machine's side panel: the whole values wrap; the app's own counters today (appOps), full ones in the danger colour */
.lic-mdr .st{display:flex;white-space:normal;align-items:flex-start}
.lic-mdr .st i{margin-top:7px}
.lic-mdr .lic-ip,.lic-mdr .lic-mid{overflow-wrap:anywhere;word-break:break-all}
.lic-mdr .lic-geo{display:block;margin:4px 0 0;padding:0;border-top:0}
.lic-ops{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:3px}
.lic-op{font-size:11.5px;line-height:1.6;padding:0 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.lic-op.used{color:var(--text)}
.lic-op.full{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad);font-weight:600}
.lic-sec{margin:6px 0 -4px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lic-mdr .lic-sec{margin:0 0 6px}
/* its footer: a disabled action with its reason under it (rule 7: the row's ⋯ shows the same reason under the item) */
.drawer-f:has(.lic-mact){align-items:flex-start}
.p-one-w.lic-mact{flex-direction:column;align-items:flex-start;gap:4px}
.lic-hint-p{margin:-4px 0 0;font-size:12px;color:var(--faint)}
.lic-pool{display:block;margin-top:4px}
/* Kullanım: the four figures in one line above the chart */
.lic-figs{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 12px;font-size:13px}
.lic-figs b{font-weight:600}
@media (max-width:560px){
  .lic-dp .dh-acts{width:100%}
  /* a phone: Ad · Durum · ⋯ (the version, today's files and the day it was added: in the side panel) */
  .lic-dp .machines .m-ver,.lic-dp .machines .m-today,.lic-dp .machines .m-added{display:none}
  .lic-dp .machines th,.lic-dp .machines td{padding-left:12px;padding-right:12px}
  .lic-dp .dh-title h2{font-size:19px}
  .lic-dp .dh-title span.lic-key{font-size:13px}
}

/* history tab */
.timeline .ev p.lic-diff{font-family:var(--mono);font-size:11.5px;color:var(--faint)}

@media (max-width:560px){
  /* phone: the filters wrap (the seg and the search each take a line); the list keeps Firma and Durum, the other columns
     are on the licence page */
  .lic-filters{flex-wrap:wrap}
  .lic-seg,.lic-q{flex:1 1 100%}
  .lic-list .tbl th:nth-child(2),.lic-list .tbl td:nth-child(2),.lic-list .tbl th:nth-child(4),.lic-list .tbl td:nth-child(4),
  .lic-list .tbl th:nth-child(5),.lic-list .tbl td:nth-child(5){display:none}
  .lic-list .tbl td:first-child{width:100%}
  .lic-key{font-size:18px}
}
@media (max-width:420px){.lic-2col{grid-template-columns:1fr}}
/* the licence create drawer's "Satan" (the reseller plan's Faz 1): the two choices on one line, wrapping on a phone */
.lic-sale-opts{display:flex;flex-wrap:wrap;gap:6px 18px}
/* "Tüm müşteriye uygula" on the suspend / revoke dialogs: the box, its effect in one grey line under it */
.lic-whole{gap:4px}
.lic-whole-note{margin:0;margin-inline-start:23px;font-size:12px}