/* The new panel UI (piece A): active only under html.ui-new (the per-browser switch cxp_ui, assets/js/views/ui_frame.js).
   Dark first; every colour is a variable here, so a light theme is a drop-in file that redefines the variables under
   html.ui-new[data-theme="light"] (the block after the dark one: the design's tokens-light.css values). Type sizes: 13, 14, 16, 20, 28 only. Orange
   (--accent) only on "Yeni lisans", "Onayla" and a window's one confirming button; red (--danger) only on the
   irreversible action. Nothing is shown only on hover: hover changes a colour, never what is there. No inline styles (the
   panel's CSP): sizes that depend on data are set through the CSSOM. */
html.ui-new {
  --u-bg: #0E0F11; --u-surface: #16181C; --u-raised: #1D2025; --u-line: #2A2E35; --u-input: #767D88; --u-btn-line: #646B76;
  --u-text: #ECEDEF; --u-text2: #A9AFB8; --u-accent: #FF7A1A; --u-accent-hover: #FF8C3A; --u-on-accent: #121212;
  --u-warn: #E9C46A; --u-danger: #FF7B72; --u-open: #3FB950; --u-bar: #5C6B7E; --u-bar-today: #8B9BB0; --u-focus: #ECEDEF;
  --u-accent-border: #FF7A1A; --u-on-danger: #121212; --u-scrim: rgba(5, 6, 8, .66); --u-shadow: rgba(0, 0, 0, .5); --u-shadow-strong: rgba(0, 0, 0, .6);
  --u-r: 8px; --u-side: 232px; --u-top: 64px;
  --u-font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  --u-mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
  /* today's pages inside the new frame: their tokens take the new values */
  --bg: var(--u-bg); --bg2: var(--u-bg); --panel: var(--u-surface); --panel2: var(--u-raised); --panel3: var(--u-raised);
  --line: var(--u-line); --line2: var(--u-btn-line); --text: var(--u-text); --muted: var(--u-text2); --faint: var(--u-text2);
  --accent: var(--u-accent); --accent2: var(--u-accent-hover); --accent-ink: var(--u-on-accent); --accent-text: var(--u-accent);
  --warn: var(--u-warn); --bad: var(--u-danger); --ok: var(--u-open); --focus: var(--u-focus);
  --side: var(--u-side); --top: var(--u-top); --radius: var(--u-r);
  color-scheme: dark;
}
/* the light theme (the panel's own switch: html[data-theme="light"], P.theme): the design's tokens-light.css. On the light page
   the orange button carries a darker orange border (--u-accent-border: the orange fill alone is 2.39:1 on the page) */
html.ui-new[data-theme="light"] {
  --u-bg: #F4F5F7; --u-surface: #FFFFFF; --u-raised: #ECEEF2; --u-line: #D5D9E0; --u-input: #6E7682; --u-btn-line: #7C838F;
  --u-text: #15181D; --u-text2: #4D545F; --u-accent: #FF7A1A; --u-on-accent: #121212; --u-accent-hover: #FF8C3A; --u-accent-border: #C2570B;
  --u-warn: #7A5600; --u-danger: #B3261E; --u-on-danger: #FFFFFF; --u-open: #1E7F37; --u-bar: #6E7E93; --u-bar-today: #36475C; --u-focus: #15181D;
  --u-scrim: rgba(20, 30, 45, .32); --u-shadow: rgba(20, 30, 45, .18); --u-shadow-strong: rgba(20, 30, 45, .24);
  color-scheme: light;
}
/* today's pages inside the new frame take the new values in the light theme too (panel.css's light block is weaker) */
html.ui-new[data-theme="light"] {
  --bg: var(--u-bg); --bg2: var(--u-bg); --panel: var(--u-surface); --panel2: var(--u-raised); --panel3: var(--u-raised);
  --line: var(--u-line); --line2: var(--u-btn-line); --text: var(--u-text); --muted: var(--u-text2); --faint: var(--u-text2);
  --accent: var(--u-accent); --accent2: var(--u-accent-hover); --accent-ink: var(--u-on-accent); --accent-text: var(--u-accent);
  --warn: var(--u-warn); --bad: var(--u-danger); --ok: var(--u-open); --focus: var(--u-focus);
  --side: var(--u-side); --top: var(--u-top); --radius: var(--u-r);
}
html.ui-new body { background: var(--u-bg); color: var(--u-text); font: 14px/1.5 var(--u-font); font-variant-numeric: tabular-nums; }
html.ui-new :focus-visible { outline: 2px solid var(--u-focus); outline-offset: 2px; border-radius: 4px; }
.ui-new .u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-new .u-mono { font-family: var(--u-mono); font-size: 13px; letter-spacing: .01em; }
.ui-new .u-muted { color: var(--u-text2); }

/* ---------- frame ---------- */
.ui-new .u-app { min-height: 100vh; }
.ui-new .u-side { position: fixed; inset: 0 auto 0 0; width: var(--u-side); background: var(--u-surface); border-right: 1px solid var(--u-line); display: flex; flex-direction: column; padding: 16px 12px; z-index: 40; overflow-y: auto; }
.ui-new .u-brand { padding: 4px 12px 24px; }
.ui-new .u-brand b { display: block; font-size: 16px; letter-spacing: .14em; }
.ui-new .u-brand span { font-size: 13px; color: var(--u-text2); }
.ui-new .u-nav { display: flex; flex-direction: column; gap: 4px; }
.ui-new .u-nav + .u-nav { margin-top: 24px; }
.ui-new .u-nav.u-bottom { margin-top: auto; padding-top: 24px; }
.ui-new .u-nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--u-r); color: var(--u-text2); text-decoration: none; font-size: 14px; }
.ui-new .u-nav a.u-subitem { min-height: 32px; padding-left: 44px; font-size: 13px; }
.ui-new .u-nav a:hover { color: var(--u-text); background: var(--u-raised); }
.ui-new .u-nav a[aria-current="page"] { color: var(--u-text); background: var(--u-raised); font-weight: 600; }
.ui-new .u-nav .ic { width: 20px; height: 20px; }
.ui-new .u-count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--u-bg); border: 1px solid var(--u-btn-line); color: var(--u-text); font-size: 13px; font-weight: 600; line-height: 20px; text-align: center; }
.ui-new .u-count[hidden] { display: none; }
.ui-new .u-top { position: fixed; top: 0; left: var(--u-side); right: 0; height: var(--u-top); z-index: 30; background: var(--u-bg); border-bottom: 1px solid var(--u-line); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.ui-new .u-crumb { flex: 0 1 auto; min-width: 0; max-width: 340px; }
.ui-new .u-crumb a { display: block; font-size: 13px; color: var(--u-text2); text-decoration: none; }
.ui-new .u-crumb a:hover { text-decoration: underline; color: var(--u-text); }
.ui-new .u-crumb .sep { display: none; }
.ui-new .u-crumb h1 { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-new .u-search { position: relative; flex: 1 1 400px; max-width: 520px; min-width: 200px; margin: 0 auto; }
.ui-new .u-search .u-field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--u-input); border-radius: var(--u-r); background: var(--u-surface); color: var(--u-text2); }
.ui-new .u-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--u-text); font-size: 14px; }
.ui-new .u-search input::placeholder { color: var(--u-text2); opacity: 1; }
.ui-new .u-search .u-field:focus-within { outline: 2px solid var(--u-focus); outline-offset: 2px; }
.ui-new .u-results { position: absolute; top: 46px; left: 0; right: 0; background: var(--u-raised); border: 1px solid var(--u-btn-line); border-radius: var(--u-r); padding: 8px; z-index: 50; box-shadow: 0 12px 32px var(--u-shadow); max-height: 400px; overflow: auto; }
.ui-new .u-results[hidden] { display: none; }
.ui-new .u-results a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--u-text); text-decoration: none; }
.ui-new .u-results a span { display: block; font-size: 13px; color: var(--u-text2); }
.ui-new .u-results a:hover, .ui-new .u-results a.on { background: var(--u-surface); }
.ui-new .u-results .u-none { padding: 8px 12px; color: var(--u-text2); }
.ui-new .u-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.ui-new .u-lang { display: flex; align-items: center; gap: 4px; color: var(--u-text2); }
.ui-new .u-prof { position: relative; }
.ui-new .u-prof > button { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 4px; border: 1px solid transparent; background: none; border-radius: var(--u-r); cursor: pointer; color: var(--u-text); }
.ui-new .u-prof > button:hover { border-color: var(--u-btn-line); }
.ui-new .u-av { width: 32px; height: 32px; border-radius: 50%; background: var(--u-raised); border: 1px solid var(--u-btn-line); display: grid; place-items: center; font-weight: 600; }
.ui-new .u-menu { position: absolute; right: 0; top: 46px; min-width: 240px; background: var(--u-raised); border: 1px solid var(--u-btn-line); border-radius: var(--u-r); padding: 8px; z-index: 50; box-shadow: 0 12px 32px var(--u-shadow); }
.ui-new .u-menu[hidden] { display: none; }
.ui-new .u-menu button, .ui-new .u-menu a { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px; background: none; border: 0; border-radius: 6px; text-align: left; cursor: pointer; color: var(--u-text); text-decoration: none; font-size: 14px; }
.ui-new .u-menu button:hover, .ui-new .u-menu a:hover, .ui-new .u-menu button:focus-visible { background: var(--u-surface); }
.ui-new .u-menu button[disabled] { color: var(--u-text2); cursor: default; }
.ui-new .u-menu .u-why { display: block; font-size: 13px; color: var(--u-text2); padding: 0 12px 6px; }
.ui-new .u-menu .u-danger { color: var(--u-danger); }
.ui-new .u-menu hr { border: 0; border-top: 1px solid var(--u-line); margin: 8px 0; }
.ui-new .u-main { margin-left: var(--u-side); padding: calc(var(--u-top) + 24px) 24px 120px; min-width: 0; }
.ui-new .u-main > .subnav-box { padding: 0 0 16px; }
.ui-new .u-main > .view { padding: 0; max-width: none; }
.ui-new .u-btn.u-menubtn { display: none; }
.ui-new #view:focus { outline: none; }

/* ---------- shared parts ---------- */
.ui-new .u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--u-r); border: 1px solid var(--u-btn-line);
  background: var(--u-raised); color: var(--u-text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; font-family: inherit; }
.ui-new .u-btn:hover { border-color: var(--u-text2); }
.ui-new .u-btn[disabled], .ui-new .u-menu button[disabled] { opacity: .55; cursor: default; }
.ui-new .u-btn.u-primary { background: var(--u-accent); border-color: var(--u-accent-border); color: var(--u-on-accent); }
.ui-new .u-btn.u-primary:hover { background: var(--u-accent-hover); }
.ui-new .u-btn.u-danger { color: var(--u-danger); }
.ui-new .u-btn.u-danger-fill { background: var(--u-danger); border-color: var(--u-danger); color: var(--u-on-danger); }
.ui-new .u-btn.u-link { background: none; border-color: transparent; padding: 0 8px; height: 32px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--u-text2); }
.ui-new .u-btn.u-sm { height: 32px; padding: 0 12px; }
.ui-new .u-btn .ic { width: 16px; height: 16px; }
.ui-new .u-sel, .ui-new .u-inp { height: 36px; border: 1px solid var(--u-input); background: var(--u-surface); border-radius: var(--u-r); padding: 0 8px; color: var(--u-text); font-family: inherit; font-size: 14px; }
.ui-new .u-inp { background: var(--u-bg); padding: 0 12px; }
.ui-new textarea.u-inp { height: auto; padding: 8px 12px; width: 100%; resize: vertical; }
.ui-new .u-inp[aria-invalid="true"] { border-color: var(--u-danger); border-width: 2px; }
.ui-new .u-err { color: var(--u-danger); display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.ui-new .u-st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ui-new .u-st .ic { width: 16px; height: 16px; }
.ui-new .u-st.u-warn { color: var(--u-warn); }
.ui-new .u-st.u-bad { color: var(--u-danger); }
.ui-new .u-st.u-off { color: var(--u-text2); }
.ui-new .u-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--u-open); display: inline-block; flex: none; }
.ui-new .u-dot.u-off { background: none; border: 1.5px solid var(--u-text2); }
.ui-new .u-empty { color: var(--u-text2); padding: 16px 0; margin: 0; }
.ui-new .u-sec { padding-top: 24px; scroll-margin-top: calc(var(--u-top) + 60px); min-width: 0; }
.ui-new .u-sec + .u-sec { margin-top: 8px; }
.ui-new .u-sechead { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--u-line); }
.ui-new .u-sechead h2 { font-size: 16px; font-weight: 600; margin: 0; }
.ui-new .u-sechead h2:focus { outline: none; }
.ui-new .u-sechead .u-n { color: var(--u-text2); font-weight: 400; }
.ui-new .u-sechead .u-more { margin-left: auto; }
.ui-new .u-sub { font-size: 14px; font-weight: 600; color: var(--u-text2); margin: 16px 0 0; }
.ui-new .u-kv { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; border-bottom: 1px solid var(--u-line); min-height: 48px; padding: 8px 0; margin: 0; }
.ui-new .u-kv dt { color: var(--u-text2); }
.ui-new .u-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ui-new .u-ed { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ui-new .u-ed .u-inp { width: 140px; }
.ui-new .u-ed .u-inp.u-wide { width: 280px; max-width: 100%; }
.ui-new .u-anchors { position: sticky; top: var(--u-top); z-index: 20; background: var(--u-bg); display: flex; gap: 4px; border-bottom: 1px solid var(--u-line); margin: 0 -24px; padding: 0 16px; overflow-x: auto; scrollbar-width: thin; }
.ui-new .u-anchors button { display: inline-flex; align-items: center; height: 44px; padding: 0 8px; color: var(--u-text2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; flex: none; }
.ui-new .u-anchors button:hover { color: var(--u-text); }
.ui-new .u-anchors button.on { color: var(--u-text); border-bottom-color: var(--u-text); }
.ui-new .u-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-new .u-chip { height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--u-btn-line); background: none; color: var(--u-text2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-family: inherit; }
.ui-new .u-chip b { color: var(--u-text); font-weight: 600; }
.ui-new .u-chip[aria-pressed="true"] { background: var(--u-raised); border-color: var(--u-text); color: var(--u-text); font-weight: 600; }
.ui-new .u-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ui-new .u-frow .u-grow { flex: 1; }
.ui-new label.u-f { display: inline-flex; align-items: center; gap: 8px; color: var(--u-text2); }
.ui-new .u-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--u-text); user-select: none; position: relative; }
.ui-new .u-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-new .u-switch .u-tr { width: 36px; height: 20px; border-radius: 10px; border: 1px solid var(--u-input); background: var(--u-bg); position: relative; flex: none; }
.ui-new .u-switch .u-tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--u-text2); }
.ui-new .u-switch input:checked + .u-tr { background: var(--u-text); border-color: var(--u-text); }
.ui-new .u-switch input:checked + .u-tr::after { left: 19px; background: var(--u-bg); }
.ui-new .u-switch input:focus-visible + .u-tr { outline: 2px solid var(--u-focus); outline-offset: 2px; }
.ui-new .u-find { display: flex; align-items: center; gap: 8px; height: 36px; border: 1px solid var(--u-input); border-radius: var(--u-r); padding: 0 12px; background: var(--u-surface); color: var(--u-text2); width: 240px; max-width: 100%; }
.ui-new .u-find input { border: 0; background: none; outline: none; color: var(--u-text); min-width: 0; flex: 1; font: inherit; }
.ui-new .u-find input::placeholder { color: var(--u-text2); opacity: 1; }
.ui-new .u-find:focus-within { outline: 2px solid var(--u-focus); outline-offset: 2px; }
.ui-new .u-find .ic { width: 16px; height: 16px; }
.ui-new .u-pager { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding-top: 16px; color: var(--u-text2); flex-wrap: wrap; }
.ui-new .u-meter { display: flex; align-items: center; gap: 8px; }
.ui-new .u-meter .u-bar { width: 32px; height: 4px; border-radius: 2px; background: var(--u-line); overflow: hidden; flex: none; }
.ui-new .u-meter .u-bar i { display: block; height: 100%; background: var(--u-bar-today); }
.ui-new .u-tl { list-style: none; margin: 0; padding: 8px 0 0; }
.ui-new .u-tl li { position: relative; padding: 0 0 16px 24px; }
.ui-new .u-tl li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--u-text2); background: var(--u-bg); }
.ui-new .u-tl li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 1px; background: var(--u-line); }
.ui-new .u-tl li:last-child::after { display: none; }
.ui-new .u-tl b { font-weight: 600; display: block; }
.ui-new .u-tl span { display: block; color: var(--u-text2); font-size: 13px; }

/* ---------- the undo bar and the error that stays ---------- */
.ui-new .u-undo { position: fixed; left: calc(50% + var(--u-side) / 2); bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px;
  background: var(--u-raised); border: 1px solid var(--u-btn-line); border-radius: var(--u-r); padding: 8px 8px 8px 16px; z-index: 80; box-shadow: 0 12px 32px var(--u-shadow); max-width: min(760px, calc(100vw - 32px)); min-height: 52px; }
.ui-new .u-undo[hidden] { display: none; }
.ui-new .u-undo .ic { color: var(--u-open); width: 20px; height: 20px; }
.ui-new .u-fail { position: fixed; right: 24px; top: calc(var(--u-top) + 16px); z-index: 85; display: flex; gap: 12px; align-items: flex-start; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px; background: var(--u-raised); border: 2px solid var(--u-danger); border-radius: var(--u-r); box-shadow: 0 12px 32px var(--u-shadow); }
.ui-new .u-fail .ic { color: var(--u-danger); width: 20px; height: 20px; flex: none; margin-top: 2px; }
.ui-new .u-fail p { margin: 0; flex: 1; }
.ui-new .u-pend { color: var(--u-warn); }
.ui-new .u-wait { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.ui-new .u-wait .u-st { white-space: normal; }
.ui-new .u-mrow.u-waiting { background: var(--u-surface); }
.ui-new .u-note { display: block; flex-basis: 100%; color: var(--u-warn); font-size: 13px; }
.ui-new .u-who { margin: 4px 0 0; color: var(--u-text2); font-size: 14px; }
.ui-new .u-radios { display: grid; gap: 8px; padding-top: 12px; }
.ui-new .u-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--u-btn-line); border-radius: var(--u-r); cursor: pointer; }
.ui-new .u-radio:has(input:checked) { border-color: var(--u-text); background: var(--u-raised); }
.ui-new .u-countrow { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ui-new .u-countrow .u-count-line { flex: 1; }
/* what was not done when the session ended: it survives to the sign-in page, so it is styled with today's tokens too */
.u-lost { position: fixed; right: 16px; top: 16px; z-index: 200; display: flex; gap: 12px; align-items: flex-start; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 12px 12px 16px; background: var(--panel); color: var(--text); border: 2px solid var(--bad); border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; }
.u-lost > .ic { color: var(--bad); width: 20px; height: 20px; flex: none; margin-top: 2px; }
.u-lost ul { margin: 6px 0 0; padding-left: 18px; }
.u-lost > div { flex: 1; min-width: 0; }

/* ---------- Müşteriler ---------- */
.ui-new .u-count-line { font-size: 16px; margin: 0 0 16px; }
.ui-new .u-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ui-new .u-tblwrap { overflow-x: auto; }
.ui-new table.u-list { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px; }
.ui-new .u-list th { text-align: left; font-size: 13px; font-weight: 600; color: var(--u-text2); padding: 8px; border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.ui-new .u-list td { padding: 0 8px; height: 52px; white-space: nowrap; border-bottom: 1px solid var(--u-line); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.ui-new .u-list tr.u-go { cursor: pointer; }
.ui-new .u-list tr.u-go:hover { background: var(--u-surface); }
.ui-new .u-list tr.u-go:focus-visible { outline: 2px solid var(--u-focus); outline-offset: -2px; }
.ui-new .u-list .u-nm { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--u-text); text-decoration: none; }
.ui-new .u-list .u-em { display: block; font-size: 13px; color: var(--u-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-new .u-list .u-stcell { display: flex; align-items: center; gap: 12px; }
.ui-new .u-list col.c-name { width: 23%; } .ui-new .u-list col.c-plan { width: 10%; } .ui-new .u-list col.c-st { width: 25%; }
.ui-new .u-list col.c-pc { width: 12%; } .ui-new .u-list col.c-today { width: 11%; } .ui-new .u-list col.c-seen { width: 11%; } .ui-new .u-list col.c-res { width: 8%; }
.ui-new .u-orph { margin-top: 16px; color: var(--u-text2); }

/* ---------- müşteri sayfası ---------- */
.ui-new .u-chead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; }
.ui-new .u-chead .u-sum { font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; flex: 1; min-width: 280px; }
.ui-new .u-chead .u-sep { color: var(--u-text2); }
.ui-new .u-acts { display: flex; gap: 8px; position: relative; flex-wrap: wrap; align-items: center; }
.ui-new .u-cust { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.ui-new .u-lichead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.ui-new .u-lichead .u-sub { margin: 0; }
.ui-new .u-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--u-line); }
.ui-new .u-mrow .u-l1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-new .u-mrow .u-l1 b { font-weight: 600; }
.ui-new .u-mrow .u-l2 { color: var(--u-text2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ui-new .u-mrow .u-l2 .u-btn.u-link { height: 28px; padding: 0 4px; }
.ui-new .u-mrow.u-waiting { opacity: .7; }
.ui-new .u-addrow { padding-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ui-new .u-usage-line { display: flex; gap: 32px; flex-wrap: wrap; padding: 16px 0 8px; }
.ui-new .u-chart { padding-top: 16px; }
.ui-new .u-chart svg { display: block; width: 100%; height: 150px; }
.ui-new .u-chart rect { fill: var(--u-bar); }
.ui-new .u-chart rect.u-today { fill: var(--u-bar-today); }
.ui-new .u-chart line { stroke: var(--u-line); }
.ui-new .u-chart .u-legend { display: flex; justify-content: space-between; color: var(--u-text2); font-size: 13px; padding-top: 4px; }
.ui-new .u-side-col .u-kv { grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 8px; }
.ui-new .u-side-col h2 { font-size: 16px; margin: 0 0 8px; }
.ui-new .u-side-col .u-info { padding-bottom: 24px; }
.ui-new .u-hwfull { word-break: break-all; color: var(--u-text); }
.ui-new .u-stand { padding-top: 8px; }          /* a part of today's panel inside a new section (a stand-in) */
.ui-new .u-callout { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--u-warn); border-radius: var(--u-r); margin-bottom: 16px; }

/* ---------- menus on a page, windows ---------- */
.ui-new .u-mwrap { position: relative; display: inline-flex; }
.ui-new .u-mwrap > .u-menu { top: 42px; right: 0; }
.ui-new .u-scrim { position: fixed; inset: 0; background: var(--u-scrim); z-index: 90; }
.ui-new .u-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 520px; max-width: calc(100% - 32px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--u-surface); border: 1px solid var(--u-btn-line); border-radius: 12px; z-index: 91; box-shadow: 0 24px 64px var(--u-shadow-strong); }
.ui-new .u-dialog header { padding: 20px 24px 0; }
.ui-new .u-dialog header h2 { font-size: 20px; margin: 0; }
.ui-new .u-dialog .u-dbody { padding: 8px 24px; }
.ui-new .u-dialog .u-dbody p { margin: 8px 0 0; }
.ui-new .u-dialog footer { display: flex; gap: 12px; padding: 16px 24px 20px; }
.ui-new .u-fld { padding-top: 16px; }
.ui-new .u-fld > label { display: block; font-weight: 600; margin-bottom: 8px; }
.ui-new .u-fld .u-inp { width: 100%; }
.ui-new .u-dl { margin: 0; }
.ui-new .u-mrow.u-gone .u-l1 b { color: var(--u-text2); }
.ui-new .u-list .u-plain { font-weight: 400; }
.ui-new .u-list .u-em.u-warnt { color: var(--u-warn); }
.u-switchstate { margin: 0 0 14px; }

/* ---------- the switch page ---------- */
.ui-new .u-switchpage, .u-switchpage { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

@media (max-width: 1360px) { .ui-new .u-cust { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 1100px) { .ui-new .u-cust { grid-template-columns: minmax(0, 1fr); } .ui-new .u-search { display: none; } }
/* a phone keeps working (not designed yet): the menu behind a button, one column, nothing wider than the screen */
@media (max-width: 760px) {
  .ui-new .u-side { transform: translateX(-100%); transition: transform .15s; }
  .ui-new body.nav-open .u-side { transform: none; }
  .ui-new .u-top { left: 0; padding: 0 12px; gap: 8px; }
  .ui-new .u-btn.u-menubtn { display: inline-flex; }
  .ui-new .u-main { margin-left: 0; padding: calc(var(--u-top) + 16px) 12px 120px; }
  .ui-new .u-tools .u-lang, .ui-new .u-prof .u-pname { display: none; }
  .ui-new .u-tools .u-btn.u-primary .u-label { display: none; }
  .ui-new .u-crumb h1 { font-size: 16px; }
  .ui-new .u-anchors { margin: 0 -12px; }
  .ui-new .u-kv, .ui-new .u-side-col .u-kv { grid-template-columns: minmax(0, 1fr); }
  .ui-new .u-mrow { grid-template-columns: minmax(0, 1fr); }
  .ui-new .u-undo { left: 12px; right: 12px; transform: none; }
}

/* ---- Bugün (views/ui_today.js): the groups of the day on the left, "Şu an" on the right ---- */
.ui-new .u-today { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; max-width: 1240px; }
.ui-new .u-tmain { min-width: 0; }
.ui-new .u-today h1 { font-size: 28px; line-height: 1.25; font-weight: 600; margin: 0 0 8px; }
.ui-new .u-tbreak { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.ui-new .u-tbreak a, .ui-new .u-tways a, .ui-new .u-tmore { color: var(--u-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--u-text2); }
.ui-new .u-tbanner:empty { display: none; }
.ui-new .u-tbanner { margin-bottom: 16px; }
.ui-new .u-tgroup { padding-top: 24px; scroll-margin-top: calc(var(--u-top) + 16px); }
.ui-new .u-thead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--u-line); }
.ui-new .u-thead h2 { font-size: 16px; font-weight: 600; margin: 0; }
.ui-new .u-thead .u-tn { color: var(--u-text2); font-weight: 400; }
.ui-new .u-tlist { list-style: none; margin: 0; padding: 0; }
.ui-new .u-tlist > li { border-bottom: 1px solid var(--u-line); }
.ui-new .u-trow-own { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; }
.ui-new .u-trow-own .u-l1 { font-weight: 600; overflow-wrap: anywhere; }
.ui-new .u-trow-own .u-l1 .u-muted { font-weight: 400; font-size: 13px; }
.ui-new .u-trow-own .u-l2 { color: var(--u-text2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: 2px; }
.ui-new .u-trow-own .u-tname, .ui-new .u-trow-own .u-tlink { color: var(--u-text); text-decoration: none; }
.ui-new .u-trow-own a.u-tname:hover, .ui-new .u-trow-own a.u-tlink:hover { text-decoration: underline; }
.ui-new .u-tbodytext { display: inline-block; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ui-new .u-tact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ui-new .u-trow-own.u-waiting .u-tbody { opacity: .7; }
.ui-new .u-terr { color: var(--u-text2); display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.ui-new .u-taside { position: sticky; top: calc(var(--u-top) + 24px); }
.ui-new .u-taside h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.ui-new .u-taside h2 + .u-trecent { margin-top: 0; }
.ui-new .u-tfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--u-line); }
.ui-new .u-tfig { display: flex; flex-direction: column; color: var(--u-text); text-decoration: none; }
.ui-new .u-tfig b { font-size: 26px; font-weight: 600; line-height: 1.2; }
.ui-new .u-tfig span { color: var(--u-text2); font-size: 13px; }
.ui-new a.u-tfig:hover span { text-decoration: underline; }
.ui-new .u-trecent { list-style: none; margin: 0 0 16px; padding: 0; }
.ui-new .u-trecent li { padding: 8px 0; border-bottom: 1px solid var(--u-line); display: flex; flex-direction: column; overflow-wrap: anywhere; }
.ui-new .u-trecent small { color: var(--u-text2); font-size: 13px; }
.ui-new .u-tways { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) {
  .ui-new .u-today { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ui-new .u-taside { position: static; }
  .ui-new .u-tfigs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ui-new .u-today h1 { font-size: 22px; }
  .ui-new .u-tfigs { grid-template-columns: 1fr 1fr; }
  .ui-new .u-trow-own { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ui-new .u-tact { justify-content: flex-start; }
  .ui-new .u-tbodytext { max-width: 100%; white-space: normal; }
}
.ui-new .u-tnotes:empty { display: none; }
.ui-new .u-tstale { display: flex; align-items: center; gap: 8px; color: var(--u-text2); margin: 8px 0 0; }
.ui-new .u-tstale .ic { width: 16px; height: 16px; flex: none; }
.ui-new .u-thead .u-ttotal { color: var(--u-text2); font-weight: 400; font-size: 14px; }
.ui-new .u-tbreak .u-tjump { background: none; border: 0; padding: 0; font: inherit; color: var(--u-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--u-text2); }
.ui-new .u-tfig a { color: var(--u-text2); font-size: 13px; }
.ui-new .u-menu button .u-ncount { margin-left: 12px; }