/* Calm theme (from ux/8-calm deb81c1f, retargeted to main's tokens: --accent, --ok/--warn/--bad; the tokens of panel.css are unchanged). Loaded LAST (after the views and full-view.css), so these rules win over a
   view's own rule of the same weight. The colour part lives mostly in the tokens (panel.css :root): one accent (--brand),
   status as text + a small dot, no tinted fills. This file: the shared components at a calmer size / spacing, the status
   dots, and the decorative noise hidden. No rule here changes layout at phone widths (the desktop-only spacing is behind
   a min-width query). */

/* ---------- the 500 / 600 faces (files from deb81c1f) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-sans-ext-500.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-sans-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-sans-ext-600.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- type ---------- */
body{font-size:14px;line-height:1.5}
.mono{font-size:13px}
::placeholder{color:var(--faint);opacity:1}
strong,b{font-weight:600}

/* ---------- shell ---------- */
.wm .cartWmCurve{fill:var(--accent)}
.brand small{font-size:12px;letter-spacing:.08em}
.nav{padding:12px 12px 16px}
.nav-group,.nav-more{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--faint);padding:18px 12px 6px}
.nav a{position:relative;font-size:14px;padding:9px 12px;border-radius:8px;color:var(--muted)}
.nav a span:where(.ic){color:var(--faint)}
@media (hover:hover){.nav a:hover{background:var(--panel2);color:var(--text)}.nav a:hover span:where(.ic){color:var(--muted)}}
.nav a.on{background:var(--panel3);color:var(--text);font-weight:500}
.nav a.on span:where(.ic){color:var(--accent)}
.nav a .cnt,.nav-more .cnt{font-family:inherit;font-size:12px;padding:0 2px;background:transparent;color:var(--faint)}
.nav a .cnt.hot{background:transparent;color:var(--text);font-weight:600}
/* live 1 (the owner 2026-10-26: orange where it must not be): an area strip's count (Destek › Talepler) reads like the
   menu's, bold text, and a sorted column's caret is the text colour; neither is the accent or amber */
.subnav .cnt.hot{color:var(--text);font-weight:600}
.tbl th.sort.asc::after{border-bottom-color:var(--text)}
.tbl th.sort.desc::after{border-top-color:var(--text)}
.side-foot{font-size:12px}
.top h1{font-size:15px;font-weight:600}
.crumb a{color:var(--muted)}
.env{background:transparent;color:var(--muted);border-color:var(--line2);letter-spacing:.06em}
.gsearch input{font-size:14px}
.gsearch input:focus{border-color:var(--accent)}
.me b{font-size:13px;font-weight:500}
.avatar{background:var(--panel3);color:var(--text);font-weight:600}
.ntf-badge{background:var(--panel3);color:var(--text);box-shadow:0 0 0 2px var(--bg)}

/* ---------- page + spacing (desktop only; phones keep their own padding rules) ---------- */
@media (min-width:901px){.view{padding:28px 32px 40px}}
.page-head{margin-bottom:24px;gap:16px}
.page-head h2{font-size:20px;font-weight:600}
.page-head p{font-size:14px;color:var(--muted);margin-top:6px}
.stack{gap:20px}
.grid{gap:20px}
.card{border-radius:12px}
.card-h{padding:16px 20px;gap:12px}
.card-h h3{font-size:15px;font-weight:600}
.card-b{padding:18px 20px}
.kpi{padding:18px 20px;gap:6px}
.kpi .l{font-size:13px;color:var(--muted)}
.kpi .l span:where(.ic),.kpi .spark{display:none}
.kpi .v{font-size:26px;font-weight:600;color:var(--text)}
.kpi .d,.kpi .d.up,.kpi .d.down,.kpi .d .ok,.kpi .d .warn,.kpi .d .bad{font-size:13px;color:var(--muted)}
.d-counters{background:transparent;padding:14px 20px;gap:10px 32px}
.d-counters dt{font-size:13px}

/* ---------- buttons, inputs ---------- */
.btn{height:36px;padding:0 14px;border-radius:8px;font-size:14px;font-weight:500}
.btn-sm{height:30px;padding:0 11px;border-radius:7px;font-size:13px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
@media (hover:hover){.btn-primary:hover{background:var(--accent2);border-color:var(--accent2)}}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--bad) 50%,transparent);color:var(--bad)}
.icon-btn{border-radius:8px}
.input,.select,.textarea{font-size:14px;border-radius:8px}
.input:focus,.select:focus,.textarea:focus,.otp input:focus{border-color:var(--accent)}
.filters{gap:10px;margin-bottom:16px}
.filters .input,.filters .select{height:36px;min-height:36px}
.field{gap:6px}
.field > span{font-size:13px;font-weight:500;color:var(--muted)}
.field small{font-size:13px;color:var(--faint)}
.check{font-size:14px}
.seg{border-radius:8px}
.seg button{padding:7px 12px;font-size:13px;font-weight:500}
.seg button.on{background:var(--panel3);color:var(--text)}
.seg button .n{font-family:inherit;font-size:12px;color:var(--faint);opacity:1}
.tabs{gap:4px;margin-bottom:20px}
.tabs button{padding:11px 14px;font-size:14px;font-weight:500}
.tabs button.on{color:var(--text);border-bottom-color:var(--text)}
.tabs button .n{font-family:inherit;font-size:12px}
.sub-nav a{font-size:14px}
.sub-nav a.on{border-bottom-color:var(--text)}

/* ---------- status: plain text + a small dot (no filled pills) ---------- */
.badge{height:auto;padding:0;gap:7px;border:0;border-radius:0;background:transparent;color:var(--text);font-size:14px;font-weight:400}
.badge::before{width:7px;height:7px;background:var(--dot,var(--faint))}
.b-active,.b-online,.fb-r-ok,.fl-r-ok,.an-res.r-ok,.badge.sp-resolved{--dot:var(--ok)}
.b-expiring,.b-suspended,.fb-r-partial,.fl-r-partial,.an-res.r-refused,.badge.sp-open,.badge.sp-waiting_team,.badge.sp-waiting_customer,.badge.cu-flag{--dot:var(--warn)}
.b-revoked,.fb-r-fail,.fl-r-fail,.an-res.r-error{--dot:var(--bad)}
.b-expired,.b-offline,.fb-r-none{color:var(--muted);background:transparent}
.lic-dot{background:var(--ok);box-shadow:none}
.rel-dot.ready{background:var(--ok)} .rel-dot.error{background:var(--bad)} .rel-dot.building{background:var(--warn)}
.fb-dot,.ntf-dot,.sp-dot{background:var(--text);box-shadow:none}
/* chips / pills: a neutral grey outline, no fill */
.tag{height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:12px}
.p-chip{border-color:var(--line2);background:transparent;font-size:13px}

/* ---------- tables: taller rows, quiet headers, no icons in cells ---------- */
.tbl{font-size:14px}
.tbl th{padding:12px 16px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.tbl td{padding:13px 16px}
/* the Ekip role matrix keeps team.css's tight cells (it is wider than a phone at the calm padding): the same values as
   team.css, restored here because this file loads last */
.tbl.tm-matrix th,.tbl.tm-matrix td{padding:8px 12px}
@media (max-width:900px){.tbl.tm-matrix th,.tbl.tm-matrix td,.tbl.tm-matrix tbody th{padding:7px 6px}}
@media (max-width:420px){.tbl.tm-matrix th,.tbl.tm-matrix td,.tbl.tm-matrix tbody th{padding:6px 3px}}
/* the matrix heading keeps the calm quiet header (letter-spacing 0, as on every .tbl th): team.css spaces it .05em for the
   uppercase headers the calm theme no longer has, and at 1440 px the five role columns had 5 px to spare in their card */
.tbl.tm-matrix thead th{letter-spacing:0}
/* the Ayarlar plans table (seven columns of inputs and their headings) keeps 12 px at the sides of its cells: at the calm
   16 px it ran 29 px past its card at 1440 px and scrolled sideways; the row height stays, the phone layout (settings.css,
   640 px and below: each plan a block) is untouched */
@media (min-width:641px){.tbl.set-plans th,.tbl.set-plans td{padding-left:12px;padding-right:12px}}
.tbl td .sub{font-size:13px;color:var(--faint);margin-top:1px}
/* icons in table cells hidden, except in a button or a link (the icon is a span: ":not(button span)" = not inside a button) */
.tbl th span:where(.ic),.tbl td span:where(.ic):not(button span):not(a span):not(.btn span){display:none}
.pager{padding:12px 16px;font-size:13px}
.empty{padding:40px 20px;font-size:14px}

/* ---------- lists, key/value, timeline ---------- */
.list > *{padding:14px 20px}
.li{gap:12px;font-size:14px}
.li .t b{font-weight:500}
.li .t small{font-size:13px;color:var(--faint);margin-top:2px}
.li-ico,.li > span:where(.ic),.ntf-ico{display:none}
.modal-h .li-ico{display:grid;background:var(--panel3)}
.kv{gap:12px 20px;font-size:14px}
.timeline .ev{padding-bottom:16px}
.timeline .ev b{font-size:14px;font-weight:500}
.timeline .ev p{font-size:13px}
.timeline .ev small{font-size:12px}
.timeline .ev.t-ok::before,.timeline .ev.t-acc::before{border-color:var(--muted)}
.hbar{font-size:13px}
.hbar .n{font-family:inherit;font-size:13px}

/* ---------- callouts: a neutral bordered box (red stays only on a real error: set-refused, n-bad, rel-callout.bad) ---------- */
.callout,.callout.warn{padding:12px 16px;border-color:var(--line2);background:transparent;color:var(--muted);font-size:14px}
.callout span:where(.ic),.callout.warn span:where(.ic){color:var(--muted)}

/* ---------- bars + charts: grey; only "at the limit" keeps a red fill ---------- */
.bar{background:var(--panel3)}
.bar.bad i{background:var(--bad)}
.chart .axis{font-size:12px}
.chart .area{fill:rgba(255,255,255,.035)}
:root[data-theme="light"] .chart .area{fill:rgba(15,20,25,.04)}
.chart .ln2{stroke:var(--faint)}
.legend{font-size:13px}

/* ---------- overlays, menus ---------- */
.drawer-h{padding:16px 20px} .drawer-h h3{font-size:16px;font-weight:600}
.drawer-b{padding:20px} .drawer-f{padding:14px 20px}
.modal-h h3{font-size:16px} .modal-h p{font-size:14px}
.toast{font-size:14px}
.menu-pop button,.menu-pop a{font-size:14px;padding:9px 12px}
.p-menu .p-mi.accent,.p-menu .p-mi.accent span:where(.ic),.p-one.accent{color:var(--text)}
.disc-btn{font-size:14px}
.auth{background:var(--bg)}
/* a link turns to the accent on hover (the one other place the accent shows) */
@media (hover:hover){.tbl td a:not(.btn):hover,.kv dd a:hover,.crumb a:hover,.li .t a:hover,.page-head p a:hover{color:var(--accent)}}

/* ---------- per-view: tinted rows, stripes, red status text -> neutral ---------- */
.fb-row{padding:14px 20px;gap:8px 14px}
.fb-row.unread::before,.fb-row.fb-neg::before{display:none}
.fb-pill{border-color:var(--line2);color:var(--muted)}
.fb-stack i.ok,.fb-dist-i i.ok{background:var(--ok)} .fb-stack i.partial,.fb-dist-i i.partial{background:var(--warn)} .fb-stack i.fail,.fb-dist-i i.fail,.fb-legend i.fail{background:var(--bad)}
.fb-trend .cl-row.lv-E td{background:transparent}
.tbl td .sub.cu-bad,.tbl td .sub.fb-monly.bad,.tbl td .sub.an-gone,.an-gone,.an-zero{color:var(--faint)}
.lic-op.full{border-color:var(--line2);color:var(--text)}
.lic-macts .lic-rm{color:var(--muted)}
@media (hover:hover){.lic-macts .lic-rm:hover{color:var(--bad);border-color:var(--bad)}}
.fl-st.purged{border-color:var(--line2);color:var(--muted)}
.sp-stg.s-stage3,.sp-sla.bad{color:var(--text)}
.mc-vers .hbar .bar i{background:var(--muted)}
.mc-vers .hbar.is-live .bar i{background:var(--text)}
/* unread = the message in semibold (as in a mail inbox); the dot stays for screen readers only, so it no longer stands
   next to the rating dot */
.fb-row .fb-dot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fb-row .fb-quote{font-size:14px;font-weight:400}
.fb-row.unread .fb-quote{font-weight:600}
/* the request list's stage / queue labels: a neutral outline (their tinted fill is gone) */
.sp-stg,.sp-q{border:1px solid var(--line2);background:transparent;color:var(--muted)}
.lic-list .tbl td:last-child{white-space:nowrap}

/* ---------- v3 colour roles on top of the calm rules: attention states keep amber text, the bell badge is neutral in
   both themes, phone tables keep their padding tight ---------- */
.b-expiring,.b-suspended,.badge.sp-open,.badge.sp-waiting_team{color:var(--warn)}
:root[data-theme="light"] .ntf-badge{background:var(--panel3);color:var(--text)}
@media (max-width:560px){.tbl th,.tbl td{padding:10px 10px}}