/* OHVIS — įskiepio stiliai (OHVIS sutartys dizaino kalba). Kiekvieną sekciją keičia tik jos savininkas (SPEC §7). */ /* === TOKENS === */ :root { color-scheme: light; --ntu-canvas: #f7f7f5; --ntu-surface: #ffffff; --ntu-ink: #1a1d21; --ntu-ink-muted: #5c6470; --ntu-line: #dfe2e6; --ntu-line-strong: #868e99; --ntu-accent: #1d4ed8; --ntu-accent-ink: #ffffff; --ntu-success: #15803d; --ntu-warning: #b45309; --ntu-danger: #b91c1c; --ntu-success-ink: #166534; --ntu-warning-ink: #92400e; --ntu-brand: #273f76; --ntu-ink-rgb: 26, 29, 33; --ntu-accent-rgb: 29, 78, 216; --ntu-success-rgb: 21, 128, 61; --ntu-warning-rgb: 180, 83, 9; --ntu-danger-rgb: 185, 28, 28; --ntu-accent-tint: #e8edfb; --ntu-success-tint: #e8f2ec; --ntu-warning-tint: #f8eee6; --ntu-danger-tint: #f8e8e8; /* Zonos (v1.15): lengvi atspalviai, skiriantys darbo sritis kortelėse. Tekstas ant jų — ink / ink-muted (AA ≥ 4.5:1). */ --ntu-zone-head: #f8f9fa; /* kortelės antraštės juosta, lentelės antraštė */ --ntu-zone-filter: #f4f7fc; /* filtrai, paieška */ --ntu-zone-action: #f3f6fe; /* veiksmų zona (detalė, masiniai veiksmai) */ --ntu-zone-attn: #fdf7ee; /* dėmesio zona */ --ntu-zone-ok: #f1f8f3; /* atlikta / sėkmė */ --ntu-zone-line: #e7eaee; /* linija tarp zonų (švelnesnė už line) */ --ntu-accent-bg: rgba(var(--ntu-accent-rgb), .10); --ntu-accent-border: rgba(var(--ntu-accent-rgb), .40); --ntu-success-bg: rgba(var(--ntu-success-rgb), .10); --ntu-success-border: rgba(var(--ntu-success-rgb), .40); --ntu-success-soft: rgba(var(--ntu-success-rgb), .15); --ntu-warning-bg: rgba(var(--ntu-warning-rgb), .10); --ntu-warning-border: rgba(var(--ntu-warning-rgb), .40); --ntu-danger-bg: rgba(var(--ntu-danger-rgb), .10); --ntu-danger-border: rgba(var(--ntu-danger-rgb), .40); --ntu-placeholder: rgba(var(--ntu-ink-rgb), .62); --ntu-font: system-ui, 'Segoe UI', sans-serif; --ntu-r-sm: 4px; --ntu-r-md: 6px; --ntu-r-lg: 8px; --ntu-r-pill: 9999px; --ntu-ease: cubic-bezier(.4, 0, .2, 1); --ntu-shadow-float: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); --ntu-shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); --ntu-overlay: rgba(0, 0, 0, .4); /* Ikonų kaukės CSS pseudo-elementams (tas pats rinkinys kaip NTU_Shortcodes::icon) — spalva = currentColor */ --ntu-mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); --ntu-mask-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); --ntu-mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --ntu-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --ntu-mask-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); } :root[data-theme="dark"] { color-scheme: dark; --ntu-canvas: #16181c; --ntu-surface: #1f2228; --ntu-ink: #e8eaed; --ntu-ink-muted: #9aa3af; --ntu-line: #33383f; --ntu-line-strong: #6b7380; --ntu-accent: #60a5fa; --ntu-accent-ink: #101418; --ntu-success: #4ade80; --ntu-warning: #fbbf24; --ntu-danger: #f87171; --ntu-success-ink: #4ade80; --ntu-warning-ink: #fbbf24; --ntu-brand: #e8eaed; --ntu-ink-rgb: 232, 234, 237; --ntu-accent-rgb: 96, 165, 250; --ntu-success-rgb: 74, 222, 128; --ntu-warning-rgb: 251, 191, 36; --ntu-danger-rgb: 248, 113, 113; --ntu-accent-tint: #262f3d; --ntu-success-tint: #233531; --ntu-warning-tint: #353228; --ntu-danger-tint: #352a2f; --ntu-zone-head: #24272e; --ntu-zone-filter: #222834; --ntu-zone-action: #212a38; --ntu-zone-attn: #2b2721; --ntu-zone-ok: #1f2a25; --ntu-zone-line: #2d3239; } /* === /TOKENS === */ /* === BASE === */ .ntu-portal { display: flex; flex-direction: column; gap: 16px; min-width: 0; color: var(--ntu-ink); font-family: inherit; font-size: 14px; line-height: 20px; } .ntu-portal *, .ntu-portal *::before, .ntu-portal *::after { box-sizing: border-box; } :where(.ntu-portal) :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: normal; text-transform: none; } :where(.ntu-portal) :where(p, ul, ol, dl, dd, figure, fieldset, blockquote) { margin: 0; } :where(.ntu-portal) :where(ul, ol) { padding: 0; list-style: none; } :where(.ntu-portal) a { color: var(--ntu-accent); text-decoration: none; } @media (hover: hover) { :where(.ntu-portal) a:hover { text-decoration: underline; text-underline-offset: 2px; } } :where(.ntu-portal) img { max-width: 100%; height: auto; } :where(.ntu-portal) :focus-visible { outline: 2px solid var(--ntu-accent); outline-offset: 2px; } .ntu-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ntu-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; } /* inline: ikona tekste („Pavadinimas {icon}", §4.1) nelūžta į naują eilutę; flex konteineriuose — kaip blokas */ .ntu-icon-sm { width: 14px; height: 14px; vertical-align: -2px; } /* 12px meta eilutėse */ @keyframes ntu-spin { to { transform: rotate(360deg); } } @keyframes ntu-toast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ntu-portal *, .ntu-toast, .ntu-toast * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .ntu-spinner, .ntu-is-busy::before, .ntu-is-busy::after { animation-duration: 2s !important; } } /* Pagalbinės */ .ntu-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ntu-muted { color: var(--ntu-ink-muted); } .ntu-meta { color: var(--ntu-ink-muted); font-size: 12px; line-height: 16px; } .ntu-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .ntu-nowrap { white-space: nowrap; } .ntu-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ntu-count { color: var(--ntu-ink-muted); font-weight: 400; } .ntu-text-danger { color: var(--ntu-danger); } .ntu-text-warning { color: var(--ntu-warning); } .ntu-text-success { color: var(--ntu-success); } .ntu-subtitle { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ntu-ink); } .ntu-prose { font-size: 14px; line-height: 22px; max-width: 72ch; overflow-wrap: anywhere; } .ntu-prose p { margin: 0 0 12px; } .ntu-prose p:last-child { margin-bottom: 0; } .ntu-prose ul, .ntu-prose ol { margin: 0 0 12px; padding-left: 20px; list-style: revert; } /* === /BASE === */ /* === COMPONENTS === */ /* --- Puslapio antraštė --- */ .ntu-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; } .ntu-page-heading { min-width: 0; } /* Puslapio ikona (page_head 'icon'): kur esu — sritis / skiltis; akcento spalvos, be plytelės (sutartys: jokių ikonų plytelių) */ .ntu-portal-h1 > .ntu-icon:first-child { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--ntu-accent); } .ntu-page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .ntu-portal-h1 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ntu-ink); letter-spacing: normal; } .ntu-page-desc { margin: 4px 0 0; max-width: 768px; font-size: 14px; line-height: 20px; color: var(--ntu-ink-muted); } .ntu-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Grįžimas — back_btn() (.ntu-btn[.ntu-btn-primary]) veiksmų gale; atskiros .ntu-back klasės NĖRA (sutartys #90). */ /* --- Kortelė / sekcija su antraštės eilute --- */ .ntu-section { min-width: 0; background: var(--ntu-surface); border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-lg); scroll-margin-top: 16px; } /* Antraštės juosta — zona (--ntu-zone-head): kortelės pavadinimas ir jos veiksmai atskirti nuo turinio */ .ntu-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--ntu-line); background: var(--ntu-zone-head); border-radius: calc(var(--ntu-r-lg) - 1px) calc(var(--ntu-r-lg) - 1px) 0 0; } .ntu-section-head:last-child { border-bottom: 0; border-radius: calc(var(--ntu-r-lg) - 1px); } .ntu-section-heading { min-width: 0; } .ntu-section-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ntu-ink); } .ntu-section-title > .ntu-icon:first-child { margin-right: 8px; color: var(--ntu-accent); } /* Antraštės tonai (section_open 'tone'): dėmesio / veiksmų / atlikta */ .ntu-section-attn > .ntu-section-head { background: var(--ntu-zone-attn); } .ntu-section-attn .ntu-section-title > .ntu-icon:first-child { color: var(--ntu-warning); } .ntu-section-action > .ntu-section-head { background: var(--ntu-zone-action); } .ntu-section-ok > .ntu-section-head { background: var(--ntu-zone-ok); } .ntu-section-ok .ntu-section-title > .ntu-icon:first-child { color: var(--ntu-success); } .ntu-section-sub { margin: 2px 0 0; max-width: 768px; font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } .ntu-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ntu-section-body { padding: 16px; } .ntu-section-body + .ntu-section-body { border-top: 1px solid var(--ntu-line); } .ntu-section-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; padding: 16px; border-top: 1px solid var(--ntu-line); } .ntu-section-narrow { max-width: 672px; } .ntu-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ntu-section > .ntu-kpi-row { border: 0; border-radius: 0; } .ntu-cols-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } @media (min-width: 1024px) { .ntu-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Telefone per visą plotį — tik filtrai ir perjungiklis (jų tinklelis ima 100 %); viena nuoroda/mygtukas lieka šalia pavadinimo */ @media (max-width: 640px) { .ntu-section-actions:has(> .ntu-filters, > .ntu-switch) { width: 100%; } } /* --- Eilučių sąrašas kortelėje --- */ .ntu-rows { margin: 0; padding: 0; list-style: none; } .ntu-rows > li + li { border-top: 1px solid var(--ntu-line); } .ntu-rows-heading { padding: 12px 16px 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ntu-ink-muted); } .ntu-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 16px; min-width: 0; color: var(--ntu-ink); text-decoration: none; } a.ntu-row { color: var(--ntu-ink); } @media (hover: hover) { a.ntu-row:hover, .ntu-row[data-href]:hover { background: var(--ntu-canvas); text-decoration: none; } } .ntu-row[data-href] { cursor: pointer; } .ntu-row-date { flex: 0 0 auto; color: var(--ntu-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ntu-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ntu-row-title { min-width: 0; font-weight: 500; overflow-wrap: anywhere; } /* kaip .ntu-card-link ir temos .oh-list-title — tas pats objektas visuose ekranuose to paties svorio */ .ntu-row-desc { font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); overflow-wrap: anywhere; } .ntu-row-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 4px; } /* --- Rakto–reikšmės sąrašas --- */ .ntu-dl { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); font-size: 14px; line-height: 20px; } .ntu-dl > dt, .ntu-dl > dd { margin: 0; padding: 6px 0; border-top: 1px solid var(--ntu-line); } .ntu-dl > dt { padding-right: 16px; color: var(--ntu-ink-muted); } .ntu-dl > dd { min-width: 0; overflow-wrap: anywhere; } .ntu-dl > dt:first-of-type, .ntu-dl > dt:first-of-type + dd { border-top: 0; } /* --- Mygtukai --- */ .ntu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-sm); background: var(--ntu-surface); color: var(--ntu-ink); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: color 150ms var(--ntu-ease), background-color 150ms var(--ntu-ease), border-color 150ms var(--ntu-ease), opacity 150ms var(--ntu-ease); } .ntu-btn svg { width: 16px; height: 16px; flex-shrink: 0; } @media (hover: hover) { .ntu-btn:hover { background: var(--ntu-canvas); color: var(--ntu-ink); text-decoration: none; } } .ntu-btn:focus-visible { outline: 2px solid var(--ntu-accent); outline-offset: 2px; } .ntu-btn-secondary { /* = bazinė .ntu-btn išvaizda; klasė aiškumui */ } /* Antrinių mygtukų ikona — prislopinta (tekstas lieka ink); primary/danger — paveldi mygtuko spalvą */ .ntu-btn:not(.ntu-btn-primary):not(.ntu-btn-danger) > .ntu-icon { color: var(--ntu-ink-muted); transition: color 150ms var(--ntu-ease); } @media (hover: hover) { .ntu-btn:not(.ntu-btn-primary):not(.ntu-btn-danger):hover > .ntu-icon { color: var(--ntu-ink); } } .ntu-btn-primary { background: var(--ntu-accent); border-color: var(--ntu-accent); color: var(--ntu-accent-ink); } @media (hover: hover) { .ntu-btn-primary:hover { background: var(--ntu-accent); color: var(--ntu-accent-ink); opacity: .9; } } .ntu-btn-danger { background: var(--ntu-danger); border-color: var(--ntu-danger); color: var(--ntu-accent-ink); } @media (hover: hover) { .ntu-btn-danger:hover { background: var(--ntu-danger); color: var(--ntu-accent-ink); opacity: .9; } } .ntu-btn-ghost { background: transparent; border-color: transparent; color: var(--ntu-ink-muted); } @media (hover: hover) { .ntu-btn-ghost:hover { background: transparent; color: var(--ntu-ink); } } .ntu-btn-sm, .ntu-btn-mini { padding: 6px 12px; font-size: 14px; line-height: 20px; } /* tik suderinamumui — tas pats dydis kaip .ntu-btn; nauji šablonai nenaudoja */ .ntu-btn-block { width: 100%; } .ntu-body > .ntu-btn, .ntu-portal > .ntu-btn { align-self: flex-start; } /* mygtukas tiesiai flex stulpelyje (.ntu-body/.ntu-portal) neišsitempia per visą plotį */ .ntu-toggle[aria-expanded="true"], .ntu-toggle.ntu-toggle-active { background: var(--ntu-canvas); border-color: var(--ntu-line); color: var(--ntu-ink); } .ntu-btn:disabled, .ntu-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .ntu-btn[aria-disabled="true"] { pointer-events: none; } /* --- Tekstinės nuorodos --- */ .ntu-link, .ntu-kb-more { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--ntu-accent); text-decoration: none; white-space: nowrap; cursor: pointer; } @media (hover: hover) { .ntu-link:hover, .ntu-kb-more:hover { text-decoration: underline; text-underline-offset: 2px; } } .ntu-card-link { color: var(--ntu-ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; } @media (hover: hover) { .ntu-card-link:hover { color: var(--ntu-accent); text-decoration: underline; text-underline-offset: 2px; } } .ntu-listing { display: inline-flex; align-items: center; gap: 4px; color: var(--ntu-accent); font-weight: 400; white-space: nowrap; text-decoration: none; } .ntu-listing svg { width: 12px; height: 12px; } /* --- Ikoniniai mygtukai --- */ .ntu-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 6px; border: 0; border-radius: var(--ntu-r-sm); background: transparent; color: var(--ntu-ink-muted); cursor: pointer; transition: color 150ms var(--ntu-ease); } .ntu-iconbtn svg { display: block; width: 16px; height: 16px; } @media (hover: hover) { .ntu-iconbtn:hover { color: var(--ntu-ink); } .ntu-iconbtn-danger:hover { color: var(--ntu-danger); } } .ntu-iconbtn:focus-visible { outline: 2px solid var(--ntu-accent); outline-offset: 1px; } .ntu-iconbtn:disabled { opacity: .4; cursor: default; } @media (pointer: coarse) { .ntu-iconbtn { width: 36px; height: 36px; padding: 10px; } } /* --- Laukai --- */ :where(.ntu-portal) :where(input:not([type]), input[type=text], input[type=search], input[type=url], input[type=email], input[type=number], input[type=tel], input[type=date], input[type=datetime-local], input[type=password], input[type=file], select, textarea) { min-height: 34px; padding: 6px 12px; border: 1px solid var(--ntu-line-strong); border-radius: var(--ntu-r-sm); background-color: var(--ntu-surface); color: var(--ntu-ink); font: inherit; font-size: 14px; line-height: 20px; box-shadow: none; max-width: 100%; transition: border-color 150ms var(--ntu-ease); } :where(.ntu-portal) textarea { padding: 8px 12px; resize: vertical; } /* Varnelės/radio NEįtraukiamos — joms lieka BASE :focus-visible 2px kontūras (WCAG 2.4.7) */ :where(.ntu-portal) :where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--ntu-accent); outline: none; } :where(.ntu-portal) :where(input, textarea)::placeholder { color: var(--ntu-placeholder); opacity: 1; } :where(.ntu-portal) :where(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; } :where(.ntu-portal) input[type=file] { padding: 4px 8px; cursor: pointer; } :where(.ntu-portal) input[type=file]::file-selector-button { margin-right: 12px; padding: 2px 8px; border: 1px solid var(--ntu-line-strong); border-radius: var(--ntu-r-sm); background: var(--ntu-canvas); color: var(--ntu-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } :where(.ntu-portal) :where(input[type=checkbox], input[type=radio]) { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--ntu-accent); cursor: pointer; } .ntu-input-sm { min-height: 34px; padding: 6px 12px; font-size: 14px; } /* tik suderinamumui — tas pats dydis */ /* --- Failo įkėlimo zona (sutartys IkelimoZona; JS: dragover/drop → input.files) --- */ .ntu-dropzone, .ntu-form label.ntu-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 160px; padding: 16px; border: 2px dashed var(--ntu-line); border-radius: var(--ntu-r-lg); color: var(--ntu-ink); text-align: center; cursor: pointer; transition: border-color 150ms var(--ntu-ease), background-color 150ms var(--ntu-ease); } @media (hover: hover) { .ntu-dropzone:hover { border-color: rgba(var(--ntu-accent-rgb), .6); } } .ntu-dropzone.is-over { border-color: var(--ntu-accent); background: rgba(var(--ntu-accent-rgb), .05); } .ntu-dropzone:focus-within { outline: 2px solid var(--ntu-accent); outline-offset: 2px; } .ntu-dropzone-name { font-weight: 500; overflow-wrap: anywhere; } .ntu-dropzone-name:empty { display: none; } /* --- Failo tipo ženklas (sutartys FailoIkona; PHP file_icon()) --- */ .ntu-file-ico { display: inline-block; flex-shrink: 0; width: 16px; height: 20px; margin-right: 8px; vertical-align: -5px; color: var(--ntu-ink-muted); } /* spalvos SVG atributuose — formatų atpažinimo spalvos, abiejose temose vienodos (kaip sutartys) */ /* --- Liečiami ekranai: didesni taikiniai --- */ @media (pointer: coarse) { .ntu-btn, .ntu-input-sm { min-height: 40px; } :where(.ntu-portal) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { min-height: 40px; } .ntu-details > summary { min-height: 36px; } } /* --- Formos --- */ .ntu-form { display: flex; flex-direction: column; gap: 16px; } .ntu-form label, .ntu-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ntu-ink-muted); } .ntu-form label > :where(input:not([type=checkbox]):not([type=radio]), select, textarea), .ntu-field > :where(input:not([type=checkbox]):not([type=radio]), select, textarea) { width: 100%; } .ntu-help { font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } /* Privalomumas — žodžiu etiketėje „Pavadinimas (privaloma)" (sutartys IkeltiPage), raudonos * NĖRA */ .ntu-form fieldset, fieldset.ntu-field { min-width: 0; margin: 0; padding: 0; border: 0; } .ntu-form legend, fieldset.ntu-field > legend { margin: 0 0 4px; padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ntu-ink); } .ntu-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; } .ntu-check, .ntu-form label.ntu-check { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; color: var(--ntu-ink); cursor: pointer; } .ntu-form fieldset > .ntu-check { margin: 0 16px 4px 0; } /* senas markup'as be .ntu-checks apvalko (varnelės iš eilės) */ .ntu-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 640px) { .ntu-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ntu-span-2 { grid-column: 1 / -1; } } .ntu-form-group { display: flex; flex-direction: column; gap: 16px; } .ntu-form-group + .ntu-form-group { padding-top: 16px; border-top: 1px solid var(--ntu-line); } .ntu-form-group-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ntu-ink); } .ntu-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 0; border-top: 0; } /* kaip sutartys: kairėje, pirma primary, tada ghost „Atšaukti" ir 12px muted priežastis */ /* --- Filtrai (GET formos per form_open) --- */ .ntu-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .ntu-filters :where(input, select) { width: auto; } .ntu-filters :where(input[type=search], input[name=q]) { width: 288px; } .ntu-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--ntu-line); background: var(--ntu-zone-filter); } /* filtrų zona */ .ntu-filters-grid :where(input, select) { width: 100%; } .ntu-filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ntu-filters-grid .ntu-filters-actions { grid-column: 1 / -1; justify-content: flex-end; } @media (max-width: 640px) { /* 2 stulpelių tinklelis: paieška per visą plotį, select'ai ir mygtukai poromis — 3 eilutės vietoj 5 */ .ntu-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; } .ntu-filters :where(input, select) { width: 100%; min-width: 0; } .ntu-filters :where(input[type=search], input[name=q]) { grid-column: 1 / -1; width: 100%; } .ntu-filters > .ntu-btn { align-self: auto; } .ntu-filters-actions { align-self: flex-end; } } /* --- Statuso / komentaro formos (JS kabliai) --- */ .ntu-status-form, .ntu-comment-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ntu-status-form .ntu-status-select { flex: 0 1 200px; } .ntu-status-form .ntu-status-comment, .ntu-comment-form .ntu-newcomment { flex: 1 1 200px; min-width: 0; } .ntu-status-form-stacked, .ntu-comment-form-stacked { flex-direction: column; align-items: stretch; } .ntu-status-form-stacked .ntu-status-select, .ntu-status-form-stacked .ntu-status-comment, .ntu-comment-form-stacked .ntu-newcomment { flex: none; width: 100%; } .ntu-comment-form-stacked .ntu-btn, .ntu-status-form-stacked .ntu-status-save { align-self: flex-start; } /* pateikimas — pagal turinį, kairėje (kaip .ntu-form-actions) */ .ntu-status-save, .ntu-comment-save { position: relative; } /* ekrano skaitytuvo „– #ID" (.ntu-sr-only) lieka mygtuko ribose, ne už slenkančio apvalko */ /* --- Ženkliukas (5 tonai; v1.15: lengvas tono fonas + accent „darbe" tarpiniams statusams) --- Statuso ženkliukas (badge(): .ntu-badge-N / -admin) — su tono tašku; laisvo teksto žymė (tag_html) — be jo. Tekstas ant tono fono — *-ink (AA), kaip .ntu-callout-title. */ .ntu-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-pill); background: var(--ntu-zone-head); color: var(--ntu-ink-muted); font-size: 12px; line-height: 16px; font-weight: 400; white-space: nowrap; vertical-align: middle; } .ntu-badge[class*="ntu-badge-"]::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--ntu-r-pill); background: currentColor; } .ntu-badge.ntu-tone-accent { color: var(--ntu-accent); border-color: var(--ntu-accent-border); background: var(--ntu-accent-bg); } .ntu-badge.ntu-tone-success { color: var(--ntu-success-ink); border-color: var(--ntu-success-border); background: var(--ntu-success-bg); } .ntu-badge.ntu-tone-warning { color: var(--ntu-warning-ink); border-color: var(--ntu-warning-border); background: var(--ntu-warning-bg); } .ntu-badge.ntu-tone-danger { color: var(--ntu-danger); border-color: var(--ntu-danger-border); background: var(--ntu-danger-bg); } /* --- Pranešimas (callout) ir senas .ntu-notice --- */ .ntu-callout, .ntu-notice { padding: 8px 12px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-sm); background: var(--ntu-canvas); color: var(--ntu-ink); font-size: 14px; line-height: 20px; } .ntu-callout > * + * { margin-top: 4px; } .ntu-callout-title { font-weight: 500; } .ntu-callout.ntu-tone-accent { border-color: var(--ntu-accent-border); background: var(--ntu-accent-bg); } .ntu-callout.ntu-tone-accent .ntu-callout-title { color: var(--ntu-ink); } /* sutartys akto juosta: antraštė ink, paaiškinimas 12px muted */ .ntu-callout.ntu-tone-accent .ntu-callout-title ~ * { font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } .ntu-callout.ntu-tone-success { border-color: var(--ntu-success-border); background: var(--ntu-success-bg); } .ntu-callout.ntu-tone-success .ntu-callout-title { color: var(--ntu-success-ink); } /* AA ant tono fono (bazinis tonas — 4.39:1) */ .ntu-callout.ntu-tone-warning { border-color: var(--ntu-warning-border); background: var(--ntu-warning-bg); } .ntu-callout.ntu-tone-warning .ntu-callout-title { color: var(--ntu-warning-ink); } /* AA ant tono fono (bazinis tonas — 4.38:1) */ .ntu-callout.ntu-tone-danger { border-color: var(--ntu-danger-border); background: var(--ntu-danger-bg); } .ntu-callout.ntu-tone-danger .ntu-callout-title { color: var(--ntu-danger); } .ntu-notice a:not(.ntu-btn), .ntu-callout a:not(.ntu-btn) { color: var(--ntu-accent); text-decoration: underline; text-underline-offset: 2px; } /* nuoroda sakinyje — ne vien spalva (WCAG 1.4.1); mygtukai — savo stiliumi */ /* Tono ikona kairėje (v1.15) — be žymėjimo pakeitimų: info / sėkmė / dėmesys */ .ntu-callout { position: relative; padding-left: 36px; } .ntu-callout::before { content: ""; position: absolute; top: 10px; left: 12px; width: 16px; height: 16px; background: var(--ntu-ink-muted); -webkit-mask: var(--ntu-mask-info) center / 16px no-repeat; mask: var(--ntu-mask-info) center / 16px no-repeat; } .ntu-callout.ntu-tone-accent::before { background: var(--ntu-accent); } .ntu-callout.ntu-tone-success::before { background: var(--ntu-success); -webkit-mask-image: var(--ntu-mask-check); mask-image: var(--ntu-mask-check); } .ntu-callout.ntu-tone-warning::before { background: var(--ntu-warning); -webkit-mask-image: var(--ntu-mask-alert); mask-image: var(--ntu-mask-alert); } .ntu-callout.ntu-tone-danger::before { background: var(--ntu-danger); -webkit-mask-image: var(--ntu-mask-alert); mask-image: var(--ntu-mask-alert); } /* --- Tuščia būsena --- */ .ntu-empty { margin: 0; padding: 16px; font-size: 14px; line-height: 20px; color: var(--ntu-ink-muted); } .ntu-empty::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--ntu-mask-inbox) center / 16px no-repeat; mask: var(--ntu-mask-inbox) center / 16px no-repeat; } .ntu-empty a { white-space: nowrap; } /* tarpą prieš nuorodą įterpia empty_html() — be papildomos paraštės */ /* Veiksmas sakinio gale nuo muted teksto skiriasi ne vien atspalviu (kontrastas tarp jų ~1,1:1) — pabrauktas (WCAG 1.4.1) */ .ntu-empty :is(a, .ntu-link) { text-decoration: underline; text-underline-offset: 2px; } /* --- Toast (JS kuria prie , už .ntu-portal) --- */ .ntu-toasts { position: fixed; top: 16px; right: 16px; z-index: 100000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none; font-family: var(--ntu-font); } .ntu-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 8px 10px 12px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-lg); background: var(--ntu-surface); color: var(--ntu-ink); font-size: 14px; line-height: 20px; box-shadow: var(--ntu-shadow-float); animation: ntu-toast-in 150ms var(--ntu-ease); } .ntu-toast-ok { border-color: var(--ntu-success-border); background: var(--ntu-success-tint); } .ntu-toast-err { border-color: var(--ntu-danger-border); background: var(--ntu-danger-tint); } .ntu-toast::before { content: ""; flex: 0 0 16px; height: 16px; margin-top: 2px; background: var(--ntu-ink-muted); -webkit-mask: var(--ntu-mask-info) center / 16px no-repeat; mask: var(--ntu-mask-info) center / 16px no-repeat; } .ntu-toast-ok::before { background: var(--ntu-success); -webkit-mask-image: var(--ntu-mask-check); mask-image: var(--ntu-mask-check); } .ntu-toast-err::before { background: var(--ntu-danger); -webkit-mask-image: var(--ntu-mask-alert); mask-image: var(--ntu-mask-alert); } .ntu-toast-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .ntu-toast-x { flex: 0 0 auto; display: inline-flex; padding: 2px; border: 0; border-radius: var(--ntu-r-sm); background: transparent; color: var(--ntu-ink-muted); cursor: pointer; } .ntu-toast-x svg { width: 16px; height: 16px; } @media (hover: hover) { .ntu-toast-x:hover { color: var(--ntu-ink); } } /* --- Antrinis perjungiklis (segmentai) --- */ .ntu-switch { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; line-height: 20px; } .ntu-switch > a, .ntu-switch > button { padding: 6px 12px; border: 0; border-radius: var(--ntu-r-sm); background: transparent; color: var(--ntu-ink-muted); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; } @media (hover: hover) { .ntu-switch > a:hover, .ntu-switch > button:hover { color: var(--ntu-ink); text-decoration: none; } } .ntu-switch > [aria-current="page"], .ntu-switch > [aria-pressed="true"] { background: var(--ntu-canvas); color: var(--ntu-ink); font-weight: 600; } /* BRIEF: aktyvus „bold ink"; laikotarpis papildomai įrašomas sekcijos sub tekste (§4.8) */ /* --- Lentelė --- */ /* position: relative — apvalkalas yra absoliučių vaikų (.ntu-sr-only etiketės langeliuose/mygtukuose) talpinantis blokas, todėl overflow-x juos nukerpa ir platesnė už langą lentelė neišplečia viso puslapio. Lipniai antraštei (≥1280) netrukdo. */ .ntu-table-wrap { position: relative; min-width: 0; overflow-x: auto; } .ntu-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; } .ntu-table th { padding: 8px 16px; text-align: left; vertical-align: bottom; font-weight: 400; color: var(--ntu-ink-muted); white-space: nowrap; } .ntu-table td { padding: 8px 16px; border-top: 1px solid var(--ntu-line); vertical-align: top; color: var(--ntu-ink); } /* .ntu-table td (0,1,1) nusvertų BASE spalvų klases (0,1,0) — langeliams jos grąžinamos čia */ .ntu-table td:is(.ntu-muted, .ntu-meta) { color: var(--ntu-ink-muted); } .ntu-table td.ntu-text-warning { color: var(--ntu-warning); } .ntu-table td.ntu-text-danger { color: var(--ntu-danger); } .ntu-table td.ntu-text-success { color: var(--ntu-success); } .ntu-table th.ntu-num, .ntu-table td.ntu-num { text-align: right; } .ntu-table tr[data-href] { cursor: pointer; } @media (hover: hover) { .ntu-table tr[data-href]:hover > td { background: var(--ntu-canvas); } } .ntu-table .ntu-cell-action { width: 1%; white-space: nowrap; text-align: right; } /* Veiksmų langelis plotį ima pagal turinį (1 %) — eilutė su keliais valdikliais nelūžta į stulpelį (telefone lūžta, žr. ≤640) */ .ntu-table .ntu-cell-action .ntu-actions-row { flex-wrap: nowrap; justify-content: flex-end; } .ntu-table .ntu-cell-main { min-width: 240px; } /* paketų apribojimai — su lentelės klase savo faile, pvz. .ntu-free-table .ntu-cell-main { max-width: 520px; } */ /* 641–1023px lentelė dar nesukrauta (.ntu-table-stack — tik ≤640), o .ntu-cell-main min 240px: lentelė su keliais stulpeliais ir veiksmų langeliu gali netilpti kortelėje (veiksmai — už horizontalaus slinkimo). Tokiai lentelei paketas savo faile numato planšetės išdėstymą (fiksuoti stulpelių pločiai, antrinė informacija po pavadinimu arba eilutės-kortelės). */ .ntu-table .ntu-cell-check { width: 1%; padding: 0; } .ntu-check-hit { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 36px; padding: 8px 16px; cursor: pointer; } /* etiketė užpildo langelio plotį — taikinys 48×36, ne 16×16 */ .ntu-table tr.ntu-total > td { font-weight: 500; } .ntu-table tr.ntu-row-more > td { background: var(--ntu-canvas); padding: 16px; } /* Lipni antraštė (D9) — kaip sutartys aktoVertimoBlokas: thead lipa prie LANGO, ne prie vidinio slinkimo div'o (jokio max-height/vidinio slinkiklio). Header nelipnus (§0.7), todėl top:0. Tik tiesioginė lentelė (ne įdėta istorija). */ .ntu-sticky > table > thead th { background: var(--ntu-surface); box-shadow: inset 0 -1px 0 var(--ntu-line); } .ntu-sticky > table > tbody > tr:first-child > td { border-top: 0; } /* liniją po antrašte jau piešia th (inset) — be dvigubos */ @media (min-width: 1280px) { .ntu-table-wrap.ntu-sticky { overflow: visible; } .ntu-sticky > table > thead th { position: sticky; top: 0; z-index: 2; } } /* <1280px — lieka .ntu-table-wrap overflow-x:auto (be max-height, be lipnumo). Protėviai (.ntu-section, .ntu-body, .ntu-portal, .oh-main) overflow NETURI. */ .ntu-row-chevron { display: none; } @media (max-width: 640px) { .ntu-table-stack thead { display: none; } .ntu-table-stack, .ntu-table-stack tbody, .ntu-table-stack td { display: block; width: 100%; } .ntu-table-stack tr { position: relative; display: flex; flex-direction: column; width: 100%; padding: 12px 16px; border-top: 1px solid var(--ntu-line); } .ntu-table-stack tr[hidden] { display: none; } /* autoriaus display:flex kitaip nugalėtų UA [hidden] (admin išplėtimo eilutės) */ .ntu-table-stack tbody tr:first-child { border-top: 0; } .ntu-table-stack td { padding: 2px 0; border: 0; text-align: left !important; white-space: normal; } .ntu-table-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ntu-ink-muted); } .ntu-table-stack td.ntu-cell-main { order: -1; min-width: 0; max-width: none; font-weight: 500; } /* pavadinimas — pirmas */ .ntu-table-stack td.ntu-cell-main :where(.ntu-row-desc, .ntu-meta, .ntu-help) { font-weight: 400; } /* paryškintas tik pavadinimas, ne aprašymas/meta */ .ntu-table-stack td.ntu-cell-main::before { content: none; } .ntu-table-stack td.ntu-cell-action { order: 9; width: auto; padding-top: 8px; text-align: right !important; } .ntu-table-stack td.ntu-cell-action .ntu-actions-row { flex-wrap: wrap; } /* langelis per visą plotį — valdikliai lūžta, kai netelpa */ .ntu-table-stack tr[data-href] { padding-right: 40px; } } @media (max-width: 640px) and (hover: none) { .ntu-table-stack .ntu-row-chevron { display: block; position: absolute; top: 14px; right: 16px; color: var(--ntu-ink-muted); } } /* --- Puslapiavimas (sutartys Puslapiavimas.tsx: tekstas kairėje, du secondary mygtukai, be numerių) --- */ .ntu-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; color: var(--ntu-ink-muted); } .ntu-pagination-pages { display: flex; gap: 8px; } /* --- Akordeonai (details) --- */ .ntu-details > summary, .ntu-acc > summary { list-style: none; cursor: pointer; user-select: none; } .ntu-details > summary::-webkit-details-marker, .ntu-acc > summary::-webkit-details-marker { display: none; } .ntu-details > summary::before, .ntu-acc > summary::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor; transition: transform 150ms var(--ntu-ease); -webkit-mask: var(--ntu-mask-chevron) center / 16px no-repeat; mask: var(--ntu-mask-chevron) center / 16px no-repeat; } .ntu-details[open] > summary::before, .ntu-acc[open] > summary::before { transform: rotate(90deg); } .ntu-details > summary { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; color: var(--ntu-accent); } .ntu-details[open] > summary { margin-bottom: 8px; } .ntu-acc + .ntu-acc { border-top: 1px solid var(--ntu-line); } .ntu-acc > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ntu-ink); } .ntu-acc > summary::before { color: var(--ntu-ink-muted); } /* summary — flex: tekstą su skaičiumi apgaubti („Kategorija (N)"), tada tarpas prieš „(N)" — paprastas tarpas, kaip section_open antraštėse (be papildomos paraštės) */ @media (hover: hover) { .ntu-acc > summary:hover { background: var(--ntu-canvas); } } /* --- Panelis (įterpiamas inline; JS: .open) --- */ .ntu-kb-formpanel { display: none; } .ntu-kb-formpanel.open { display: block; } /* --- Modalas (REZERVAS: šiame perdizaine nenaudojamas, patvirtinimai lieka window.confirm) --- */ .ntu-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--ntu-overlay); } .ntu-modal[hidden] { display: none; } .ntu-modal-dialog { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 512px; padding: 20px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-lg); background: var(--ntu-surface); box-shadow: var(--ntu-shadow-modal); } .ntu-modal-title { font-size: 16px; line-height: 24px; font-weight: 600; } .ntu-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } /* --- KPI kortelė (rodiklių eilutė) --- */ .ntu-kpi-row { display: flex; flex-wrap: wrap; margin: 0; overflow: hidden; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-lg); background: var(--ntu-surface); } .ntu-kpi { flex: 1 1 160px; min-width: 0; margin: -1px 0 0 -1px; padding: 12px 16px; border-top: 1px solid var(--ntu-line); border-left: 1px solid var(--ntu-line); color: var(--ntu-ink); text-decoration: none; } a.ntu-kpi { cursor: pointer; } a.ntu-kpi:focus-visible { outline-offset: -2px; } /* .ntu-kpi-row overflow:hidden nukirptų išorinį kontūrą */ @media (hover: hover) { a.ntu-kpi:hover { background: var(--ntu-canvas); text-decoration: none; } } .ntu-kpi-num { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ntu-ink); font-variant-numeric: tabular-nums; } /* skalė 12/14/16 — be „statistikos plytelių" */ .ntu-kpi-label { font-size: 14px; line-height: 20px; color: var(--ntu-ink-muted); } a.ntu-kpi .ntu-kpi-label { color: var(--ntu-accent); } .ntu-kpi-sub { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } .ntu-kpi-warn .ntu-kpi-num, .ntu-kpi-warn .ntu-kpi-label > .ntu-icon:first-child { color: var(--ntu-warning); } /* dėmesys — skaičius ir ikona, be plytelės fono */ .ntu-kpi-accent { /* sena klasė — vizualiai nebeišskiriama */ } /* --- Progreso / piltuvėlio juosta --- */ .ntu-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--ntu-r-sm); background: var(--ntu-canvas); } .ntu-bar > span { display: block; height: 100%; border-radius: var(--ntu-r-sm); background: var(--ntu-accent); } .ntu-funnel { display: flex; flex-direction: column; gap: 8px; } .ntu-funnel-row { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) 96px; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; } .ntu-funnel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ntu-ink-muted); } .ntu-funnel-track { display: block; height: 8px; overflow: hidden; border-radius: var(--ntu-r-sm); background: var(--ntu-canvas); box-shadow: inset 0 0 0 1px var(--ntu-line); } .ntu-funnel-bar { display: block; height: 100%; border-radius: var(--ntu-r-sm); background: var(--ntu-accent); font-size: 0; color: transparent; } .ntu-funnel-pct { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ntu-ink); } @media (max-width: 640px) { .ntu-funnel-row { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; } } /* juostai lieka plotis telefone */ /* --- Žingsnių juosta (užklausos eiga) --- Eigos rodiklis, NE skirtukai: sutartys Steps — paspaudžiami skirtukai (linija + pabraukimas), o čia žingsniai nepaspaudžiami, todėl be ištisinės apatinės linijos ir skirtuko pabraukimo (kitaip atrodytų kaip .ntu-nav). Dabartinis — rėmelis. */ .ntu-steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; } .ntu-step { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ntu-step-label { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid transparent; border-radius: var(--ntu-r-md); font-size: 14px; line-height: 20px; color: var(--ntu-ink-muted); white-space: nowrap; } .ntu-step-done .ntu-step-label { background: var(--ntu-success-soft); color: var(--ntu-success-ink); } /* 5.82:1 ant soft (bazinis success — 4.09:1) */ .ntu-step-current .ntu-step-label { border-color: var(--ntu-accent); color: var(--ntu-ink); font-weight: 500; } /* „dabar čia" — rėmelis (≥3:1), ne pabraukimas */ .ntu-step-dot { font-size: 12px; } /* be opacity — paveldima spalva lieka ≥4.5:1 */ .ntu-step-label .ntu-icon { width: 12px; height: 12px; } .ntu-step-date { padding: 0 8px; font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ntu-step-line { display: none; } @media (max-width: 640px) { .ntu-steps { flex-direction: column; align-items: stretch; gap: 0; border-left: 1px solid var(--ntu-line); } .ntu-step { flex-direction: row; align-items: center; justify-content: space-between; margin: 0 0 0 -1px; padding: 4px 0 4px 8px; border-left: 2px solid transparent; } .ntu-step-current { border-left-color: var(--ntu-accent); } } /* --- Spinner ir „vykdoma" būsena (D2) --- */ .ntu-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--ntu-line); border-top-color: var(--ntu-accent); border-radius: var(--ntu-r-pill); vertical-align: middle; animation: ntu-spin 1s linear infinite; } .ntu-is-busy { cursor: progress !important; } .ntu-btn.ntu-is-busy { opacity: .7; } .ntu-btn.ntu-is-busy::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--ntu-r-pill); animation: ntu-spin .8s linear infinite; } .ntu-iconbtn.ntu-is-busy svg { visibility: hidden; } .ntu-iconbtn.ntu-is-busy::after { content: ""; position: absolute; inset: 0; width: 14px; height: 14px; margin: auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--ntu-r-pill); animation: ntu-spin .8s linear infinite; } select.ntu-is-busy { opacity: .6; } /* --- Zonos ir ikonos turinyje (v1.15) --- Zona = lengvas fonas, žymintis darbo sritį: filter (filtrai, paieška), action (veiksmai), attn (dėmesio), ok (atlikta), muted (pagalbinė informacija). Dedama ant kortelės vidinio bloko (.ntu-section-body/-foot ir pan.). */ .ntu-zone-filter { background: var(--ntu-zone-filter); } .ntu-zone-action { background: var(--ntu-zone-action); } .ntu-zone-attn { background: var(--ntu-zone-attn); } .ntu-zone-ok { background: var(--ntu-zone-ok); } .ntu-zone-muted { background: var(--ntu-zone-head); } /* Paskutinis zonos blokas kortelėje — apatiniai kampai kaip kortelės (vidinis spindulys = išorinis − rėmelis) */ .ntu-section > :is(.ntu-zone-filter, .ntu-zone-action, .ntu-zone-attn, .ntu-zone-ok, .ntu-zone-muted, .ntu-filters-grid):last-child { border-radius: 0 0 calc(var(--ntu-r-lg) - 1px) calc(var(--ntu-r-lg) - 1px); } /* Ikona prieš tekstą eilutėje (icon( $v, 'ntu-icon-lead' )); meta eilutėse — kartu su ntu-icon-sm */ .ntu-icon-lead { margin-right: 6px; color: var(--ntu-ink-muted); } .ntu-icon-sm.ntu-icon-lead { margin-right: 4px; } /* Formos grupės, rakto–reikšmės etiketės ir KPI etiketės ikona */ .ntu-form-group-title > .ntu-icon:first-child { margin-right: 8px; color: var(--ntu-ink-muted); } /* kortelės viduje — prislopinta, kaip .ntu-subtitle; akcento spalva — tik kortelės pavadinime */ .ntu-dl > dt > .ntu-icon:first-child { margin-right: 6px; } /* KPI etiketė su ikona / statuso tašku: lūžusi antra eilutė lygiuojasi su tekstu, ne po ikona */ .ntu-kpi-label:has(> .ntu-icon:first-child, > .ntu-stats-dot:first-child) { display: flex; align-items: flex-start; } .ntu-kpi-label > .ntu-icon:first-child { margin: 2px 6px 0 0; } /* Formų paneliai (KB, užklausos redagavimas, nauja užklausa):
= laukai (.ntu-section-body.ntu-form) + pateikimo juosta per visą kortelės plotį (.ntu-section-foot.ntu-zone-action) */ .ntu-kb-form > .ntu-section-body { max-width: 800px; } .ntu-kb-form > .ntu-zone-action:last-child { border-radius: 0 0 calc(var(--ntu-r-lg) - 1px) calc(var(--ntu-r-lg) - 1px); } /* juosta formos viduje — .ntu-section > …:last-child jos nepasiekia */ /* === /COMPONENTS === */ /* === SHELL === */ .ntu-nav { display: flex; flex-wrap: wrap; column-gap: 4px; margin: 0; border-bottom: 1px solid var(--ntu-line); } .ntu-nav a { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 8px 12px; border-bottom: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--ntu-ink-muted); text-decoration: none; white-space: nowrap; } .ntu-nav a > .ntu-icon { color: var(--ntu-ink-muted); } @media (hover: hover) { .ntu-nav a:hover { color: var(--ntu-ink); text-decoration: none; } .ntu-nav a:hover > .ntu-icon { color: var(--ntu-ink); } } .ntu-nav a.ntu-nav-active, .ntu-nav a[aria-current="page"] { border-bottom-color: var(--ntu-accent); color: var(--ntu-ink); font-weight: 500; } .ntu-nav a.ntu-nav-active > .ntu-icon, .ntu-nav a[aria-current="page"] > .ntu-icon { color: var(--ntu-accent); } .ntu-nav a:focus-visible { outline: 2px solid var(--ntu-accent); outline-offset: -2px; border-radius: var(--ntu-r-sm) var(--ntu-r-sm) 0 0; } @media (max-width: 640px) { /* 2 stulpelių tinklelis: lūžęs pabraukimas „nekabo" ore, visi skirtukai matomi be slinkimo */ .ntu-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border-bottom: 0; } .ntu-nav a { justify-content: center; margin: 0; padding: 8px 10px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-sm); text-align: center; white-space: normal; } .ntu-nav a.ntu-nav-active, .ntu-nav a[aria-current="page"] { border-color: var(--ntu-accent); background: var(--ntu-accent-bg); } .ntu-nav a:focus-visible { border-radius: var(--ntu-r-sm); } } @media (max-width: 374px) { .ntu-nav a > .ntu-icon { display: none; } } /* siauriausiuose telefonuose ikona + tekstas netelpa 2 stulpelių langelyje */ /* === /SHELL === */ /* === KB === */ /* Žinių bankas (P2, SPEC §4.1–4.4). Tik tokenai; bazinės klasės (.ntu-section, .ntu-rows, .ntu-table, .ntu-acc, .ntu-dropzone, .ntu-file-ico, .ntu-actions-row) — COMPONENTS, čia neapibrėžiamos. */ /* --- Paieška puslapio antraštėje (sutartys w-72) --- */ .ntu-kb-searchbar { display: flex; align-items: center; gap: 8px; margin: 0; } .ntu-kb-searchbar input[type=search] { width: 288px; text-overflow: ellipsis; } /* siaurame lauke kvietimas baigiasi „…“, ne nukirsta raide */ /* Planšetė (641–1023px): veiksmai po antrašte lieka vienoje eilutėje — siaurėja paieškos laukas (eilutės laužymui skaičiuojama 200px), o ne primary mygtukas nukeliamas vienas į kitą eilutę; kol vietos užtenka — natūralus plotis. */ @media (min-width: 641px) and (max-width: 1023px) { .ntu-kb-searchbar { flex: 1 1 200px; min-width: 0; max-width: max-content; } .ntu-kb-searchbar input[type=search] { min-width: 0; } } /* 641–879px su trimis mygtukais (Administravimas, Statistika, Nauja užklausa — su ikonomis greta paieškos netelpa): paieška per visą eilutę, mygtukai kartu po ja (kaip telefone), o ne primary vienas antroje eilutėje */ @media (min-width: 641px) and (max-width: 879px) { .ntu-kb .ntu-page-actions:has(> .ntu-btn ~ .ntu-btn ~ .ntu-btn) { width: 100%; } .ntu-kb .ntu-page-actions:has(> .ntu-btn ~ .ntu-btn ~ .ntu-btn) > .ntu-kb-searchbar { flex-basis: 100%; max-width: none; } .ntu-kb .ntu-page-actions:has(> .ntu-btn ~ .ntu-btn ~ .ntu-btn) > .ntu-kb-searchbar input[type=search] { flex: 1 1 auto; width: auto; } } @media (min-width: 641px) and (max-width: 735px) { /* tas pats su dviem mygtukais (moderatorius) */ .ntu-kb .ntu-page-actions:has(> .ntu-btn ~ .ntu-btn) { width: 100%; } .ntu-kb .ntu-page-actions:has(> .ntu-btn ~ .ntu-btn) > .ntu-kb-searchbar { flex-basis: 100%; max-width: none; } .ntu-kb .ntu-page-actions:has(> .ntu-btn ~ .ntu-btn) > .ntu-kb-searchbar input[type=search] { flex: 1 1 auto; width: auto; } } /* --- Vykdytojo darbo juostelė po aprašymu: veiksmų zona — kelias iš pradžios puslapio į užklausas (kaip sutartys „Neišspręstų: N") --- */ .ntu-kb-work { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; width: fit-content; max-width: 100%; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--ntu-zone-line); border-radius: var(--ntu-r-md); background: var(--ntu-zone-action); } .ntu-kb-work-label { color: var(--ntu-ink); font-weight: 500; } .ntu-kb-work a { white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; } /* nuorodos tarp teksto — ne vien atspalviu (WCAG 1.4.1) */ .ntu-kb-work-attn > .ntu-icon { color: var(--ntu-warning); } /* yra užstrigusių — dėmesio tono ikona (skaičius — .ntu-text-warning) */ .ntu-kb-n { font-weight: 500; font-variant-numeric: tabular-nums; } /* --- Tinklelis: naujienos | nuorodos ir patarimai --- */ /* Šoninė kolona ≥368px: antraštė su ikona ir mygtuku („Naudingos nuorodos" + „Pridėti nuorodą") telpa vienoje eilutėje ir ties 1024px — kitaip lūžtų ir nebesutaptų su greta esančia „Naujienos" antrašte (min-height žemiau) */ .ntu-kb-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(368px, 1fr); gap: 16px; align-items: start; } .ntu-kb-main, .ntu-kb-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 1023px) { .ntu-kb-grid { grid-template-columns: minmax(0, 1fr); } } /* Dviejuose stulpeliuose greta esančių kortelių antraštės — vienodo aukščio su mygtuku ar be jo (pvz. moderatorei „Naujienos" be „Nauja naujiena", o „Naudingos nuorodos" su „Pridėti nuorodą"): mygtukas 34px (liečiamame — 40px) + 2 × 16px + 1px linija. Tik kai tinklelyje yra bent vienas antraštės mygtukas — be mygtukų (vykdytojui) antraštės lieka žemos, kaip „Failai". */ @media (min-width: 1024px) { .ntu-kb-grid:has(.ntu-section-head .ntu-btn) .ntu-section-head { min-height: 67px; } } @media (min-width: 1024px) and (pointer: coarse) { .ntu-kb-grid:has(.ntu-section-head .ntu-btn) .ntu-section-head { min-height: 73px; } } /* --- Eilutės: nuorodų kategorijos atskiriamos linija --- */ .ntu-kb .ntu-rows + .ntu-rows-heading { border-top: 1px solid var(--ntu-line); } /* --- Nuorodų ir patarimų eilutės: visa eilutė paspaudžiama (ištemptas ), veiksmų ikonos virš jo --- */ .ntu-kb-linkrow, .ntu-kb-tip { position: relative; align-items: center; } .ntu-kb-link, .ntu-kb-tip-link { color: var(--ntu-ink); } .ntu-kb-link::after, .ntu-kb-tip-link::after { content: ""; position: absolute; inset: 0; } .ntu-kb-link .ntu-icon { margin-left: 6px; color: var(--ntu-ink-muted); } .ntu-kb .ntu-row-actions { position: relative; z-index: 1; } @media (hover: hover) { .ntu-kb-linkrow:hover, .ntu-kb-tip:hover { background: var(--ntu-canvas); } .ntu-kb-link:hover, .ntu-kb-tip-link:hover { color: var(--ntu-ink); } } /* --- Failų lentelė: vienodi stulpeliai visose kategorijose (≥1024px) --- */ .ntu-kb-file { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } .ntu-kb-file .ntu-file-ico { margin: 0; vertical-align: top; } .ntu-kb-ext { font-weight: 400; white-space: nowrap; } /* formatas tekstu (TXT, ZIP…), kai ženklas jo neparodo */ @media (min-width: 1024px) { .ntu-kb-files { table-layout: fixed; } .ntu-kb-files th:nth-child(2) { width: 104px; } .ntu-kb-files th:nth-child(3) { width: 168px; } .ntu-kb-files th:nth-child(4) { width: 20%; } .ntu-kb-files th:nth-child(5) { width: 160px; } .ntu-kb-files-manage th:nth-child(5) { width: 232px; } } /* Planšetė / siauras langas (641–1023px): ta pati fiksuota lentelė (stulpeliai sutampa visose kategorijose), telpa kortelėje be horizontalaus slinkimo. Stulpelių pločiai — pagal turinį: „Atsisiųsti" 105px, data 109px. */ @media (min-width: 641px) and (max-width: 1023px) { .ntu-kb-files { table-layout: fixed; } .ntu-kb .ntu-kb-files .ntu-cell-main { min-width: 0; } .ntu-kb-files th:nth-child(4) { width: 18%; } } /* 641–899px: data dviem eilutėmis (data / laikas), tvarkymo ikonos — po „Atsisiųsti" */ @media (min-width: 641px) and (max-width: 899px) { .ntu-kb-files th:nth-child(2) { width: 72px; } .ntu-kb-files th:nth-child(3) { width: 112px; } .ntu-kb-files th:nth-child(5) { width: 144px; } .ntu-kb .ntu-kb-files td.ntu-nowrap { white-space: normal; } .ntu-kb .ntu-kb-files .ntu-cell-action .ntu-actions-row { flex-wrap: wrap; row-gap: 4px; } /* COMPONENTS veiksmų langelyje — nowrap */ } /* 900–1023px: viskas vienoje eilutėje */ @media (min-width: 900px) and (max-width: 1023px) { .ntu-kb-files th:nth-child(2) { width: 88px; } .ntu-kb-files th:nth-child(3) { width: 152px; } .ntu-kb-files th:nth-child(5) { width: 144px; } .ntu-kb-files-manage th:nth-child(5) { width: 232px; } } .ntu-kb-iconacts { display: flex; align-items: center; gap: 4px; } /* redaguoti + ištrinti: lūžta kartu */ /* --- Visos KB lentelės: eilutės turinys vidurio linijoje (mygtukai 34px, tekstas 20px); veiksmai dešinėje — COMPONENTS --- */ .ntu-kb .ntu-table td { vertical-align: middle; } /* --- Paieškos užklausų lentelė --- */ .ntu-kb-req .ntu-meta { font-weight: 400; white-space: nowrap; } /* --- Formų paneliai --- */ /* Formos panelio struktūra (.ntu-kb-form) — COMPONENTS */ /* Įkėlimo zonos ženklas (24px, prislopintas; užvedus / įtempiant — accent) */ .ntu-kb-dropico { width: 24px; height: 24px; margin-bottom: 4px; color: var(--ntu-ink-muted); transition: color 150ms var(--ntu-ease); } @media (hover: hover) { .ntu-dropzone:hover > .ntu-kb-dropico { color: var(--ntu-accent); } } .ntu-dropzone.is-over > .ntu-kb-dropico { color: var(--ntu-accent); } .ntu-kb-vis > .ntu-help { margin-bottom: 8px; } .ntu-group-block { display: flex; flex-direction: column; gap: 4px; } .ntu-group-block + .ntu-group-block { margin-top: 12px; } .ntu-group-block > strong { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ntu-ink-muted); } /* --- Patarimo puslapis: antraštė su veiksmais, redagavimo panelis ir tekstas — viename 768px stulpelyje --- */ .ntu-kb-narrow { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 768px; } .ntu-tipview { max-width: 768px; } /* --- Telefonas --- */ @media (max-width: 640px) { .ntu-kb .ntu-page-actions { width: 100%; } .ntu-kb-searchbar { flex: 1 1 100%; } .ntu-kb-searchbar input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; } .ntu-kb .ntu-page-actions:has(> .ntu-kb-searchbar) > .ntu-btn { flex: 1 1 auto; } /* mygtukai po paieška užpildo eilutę — primary nelieka mažas vienas */ .ntu-kb .ntu-cell-action .ntu-actions-row { justify-content: flex-start; } } /* --- Patarimo meta eilutė (v1.15): asmuo, data, kategorija su ikonomis --- */ .ntu-kb-meta { display: inline-block; margin-right: 12px; white-space: nowrap; } /* + tarpas tarp elementų ≈ 16px */ .ntu-kb-meta:last-child { margin-right: 0; } /* === /KB === */ /* === LISTS === */ /* Vykdytojo sąrašai (SPEC §4.5–4.7): Mano diena, Laisvos užklausos, Mano užklausos. Baziniai .ntu-table / .ntu-table-stack / .ntu-kpi-row / .ntu-rows — COMPONENTS; čia tik šių ekranų papildymai. */ /* --- Lentelės (Reikia dėmesio, Naujausios laisvos, Laisvos užklausos) --- */ .ntu-free-table .ntu-cell-main { max-width: 520px; } .ntu-free-table .ntu-row-desc { margin-top: 2px; } .ntu-free-table .ntu-cell-main > .ntu-listing { margin-top: 2px; font-size: 12px; line-height: 16px; } /* antrinė nuoroda — kaip aprašymo eilutė */ .ntu-free-table .ntu-cell-action .ntu-assign-select { width: 220px; } /* „Įvedė" po pavadinimu — tik planšetėje (žr. 641–899px), kai stulpelis paslėptas */ .ntu-free-meta { display: none; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } /* Datos stulpelyje lygiuojasi skaitmenimis (SPEC §1.5) */ .ntu-attn-table td.ntu-nowrap, .ntu-latest-table td.ntu-nowrap, .ntu-free-table td.ntu-nowrap { font-variant-numeric: tabular-nums; } /* Ekrano skaitytuvo tekstas mygtuke („– pavadinimas") lieka mygtuko ribose, ne už slenkančio apvalko */ .ntu-latest-table .ntu-claim, .ntu-free-table .ntu-claim { position: relative; } @media (min-width: 641px) { /* Siauri stulpeliai (dienos, datos, statusas) — likusį plotį gauna „Užklausa" */ .ntu-attn-table td.ntu-num, .ntu-attn-table td.ntu-nowrap, .ntu-attn-table td:nth-child(3), .ntu-latest-table td.ntu-nowrap, .ntu-free-table td.ntu-nowrap { width: 1%; white-space: nowrap; } /* Naujausios laisvos — vienos eilutės įrašai: viskas centruojama, mygtukui lieka įprasta 8px paraštė (kaip sutartys) */ .ntu-latest-table td { vertical-align: middle; } /* Laisvos — kelių eilučių įrašai lygiuojami viršuje; veiksmui 4px paraštė, kad jo tekstas būtų greta pavadinimo */ .ntu-free-table td.ntu-cell-action { padding-top: 4px; padding-bottom: 4px; } } /* Planšetė / telefonas gulsčiai: lentelė nesusikrauna (COMPONENTS — tik ≤640px), todėl „Įvedė" stulpelis perkeliamas po pavadinimu, o pavadinimo stulpelis siaurinamas — veiksmas (Prisiskirti / priskyrimas) visada matomas. */ @media (min-width: 641px) and (max-width: 899px) { .ntu-free-table .ntu-free-by { display: none; } .ntu-free-table .ntu-free-meta { display: block; } .ntu-free-table .ntu-cell-main { min-width: 150px; } .ntu-free-table .ntu-cell-action .ntu-assign-select { width: 190px; } } @media (max-width: 640px) { /* Priskyrimas: ikona ir select'as vienoje eilutėje, select'as užima likusį plotį */ .ntu-free-table.ntu-table-stack td.ntu-cell-action .ntu-assign-row { flex-wrap: nowrap; } .ntu-free-table.ntu-table-stack td.ntu-cell-action .ntu-assign-select { flex: 1 1 auto; width: auto; min-width: 0; } } /* --- Mano užklausos: sąrašas eilutėmis --- */ .ntu-mine-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 8px 24px; padding: 12px 16px; } .ntu-mine-item-solo { grid-template-columns: minmax(0, 1fr); } .ntu-mine-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ntu-mine-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .ntu-mine-actions { min-width: 0; } /* Siaurame stulpelyje: statusas per visą plotį, po juo komentaras + „Išsaugoti statusą" (placeholder netrumpinamas) */ .ntu-mine-actions .ntu-status-select { flex: 1 1 100%; } .ntu-mine-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .ntu-mine-foot .ntu-details[open] { flex-basis: 100%; } /* Flex elemento min-width:auto = istorijos lentelės min-content — be šito atverta „Istorija" išplečia kortelę (641–699px), užuot slinkusi savo .ntu-table-wrap apvalke */ .ntu-mine-foot .ntu-details { min-width: 0; max-width: 100%; } /* ghost: teksto kraštas = eilutės kraštas, aukštis nedidina eilutės; relative — sr-only pavadinimas lieka mygtuko ribose */ .ntu-mine-foot .ntu-release { position: relative; margin: -7px -12px -7px auto; } .ntu-mine-foot .ntu-details > .ntu-table-wrap { border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-sm); } /* Etapų datos su etiketėmis („Priskirta: 2026-09-27 02:20") */ .ntu-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; } .ntu-dates > li { white-space: nowrap; font-variant-numeric: tabular-nums; } .ntu-date-done { color: var(--ntu-ink); } .ntu-date-todo { color: var(--ntu-ink-muted); } .ntu-date-current { font-weight: 500; } /* Planšetė: siauresnis veiksmų stulpelis — pagrindinei informacijai (meta, datos) lieka daugiau pločio ir ji nelūžta per daug eilučių; komentaras ir mygtukas tada lūžta po statusu (kaip telefone) */ @media (min-width: 768px) and (max-width: 1023px) { .ntu-mine-item:not(.ntu-mine-item-solo) { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } } @media (max-width: 767px) { .ntu-mine-item { grid-template-columns: minmax(0, 1fr); } /* „Pažymėti kaip…" forma — kaip .ntu-mine-actions: statusas per visą plotį */ .ntu-mine-mark .ntu-status-select { flex: 1 1 100%; } } /* --- Ikonos ir zonos (v1.15) --- */ /* Laisvos: priskyrimo ikona prieš select'ą (prislopinta, kaip antrinių mygtukų); 641–1023px slepiama — su ja lentelė netelpa */ .ntu-assign-row > .ntu-icon { color: var(--ntu-ink-muted); } @media (min-width: 641px) and (max-width: 1023px) { .ntu-free-table .ntu-assign-row > .ntu-icon { display: none; } } /* Mano užklausos: statuso keitimas — veiksmų zona. Neigiama vertikali paraštė — skydelio paraštės nedidina eilutės aukščio */ .ntu-mine-actions.ntu-zone-action { align-self: start; margin: -4px 0; padding: 8px; border-radius: var(--ntu-r-md); } /* Vėluojantis „etape N d." — ikona įspėjimo spalvos (ntu-icon-lead kitaip prislopintų) */ .ntu-mine-late > .ntu-icon-lead { color: currentColor; } @media (max-width: 767px) { .ntu-mine-actions.ntu-zone-action { margin: 0; } } /* === /LISTS === */ /* === ADMIN === */ /* Moderavimas: Nauja užklausa, Mano įvestos, Administravimas (SPEC §4.9–§4.11). Tik tokenai, šriftai 12/14px. Lentelės taisyklės — per „> tbody > tr >", kad nepaveiktų išplėtimo eilutėje įdėtos istorijos lentelės (.ntu-history). Administravimo lentelė pagal lango plotį: ≥1280 — pilna lentelė su lipnia antrašte; 1024–1279 — glaustesnė lentelė (vardai ir „nuo …" gali lūžti, ≤1179 select'ai vienas po kitu); ≤1023 — eilutės-kortelės (planšetėje Įvesta/Statusas/ Priskirta vienoje eilutėje, telefone — stulpeliu). Visais atvejais veiksmai matomi be horizontalaus slinkimo. */ /* --- Administravimo filtrai (form_open( 'admin', true, 'ntu-admin-filters' )) --- */ /* Etiketės viršuje lygiuojasi (start), todėl pagalbinis tekstas po „Iki" laukų eilės nepastumia. */ .ntu-admin-filters { align-items: start; } /* Raktinis žodis — per 2 stulpelius (telpa paaiškinimas); mygtukai — paskutiniame stulpelyje laukų lygyje (etiketė 20px + tarpas 4px). */ .ntu-admin-filters .ntu-admin-q { grid-column: span 2; } .ntu-admin-filters .ntu-filters-actions { grid-column: -2 / -1; margin-top: 24px; } /* Papildomi filtrai: darbalaukyje visada rodomi (grupė tinkleliui „nematoma"); „Daugiau filtrų" — tik telefone */ .ntu-admin-more-filters { display: contents; } .ntu-admin-filters-toggle { display: none; } /* --- Administravimo lentelė --- */ /* max-width langeliams naršyklės netaiko — plotį duoda width. Lūžtantis pavadinimas: pretty — paskutinėje eilutėje ne vienas žodis (skaičius su vienetu — „8 a", „50 m²" — PHP sujungti  , todėl irgi nelieka vieni; balance paliktų pusę langelio tuščią). „Archyvuota" žymė — po tarpu, be paraštės: nukritusi į naują eilutę lygiuojasi su pavadinimu. */ .ntu-admin-table > tbody > tr > .ntu-cell-main { width: 30%; max-width: 360px; text-wrap: pretty; } .ntu-admin-table > tbody > tr > .ntu-cell-main > .ntu-meta { white-space: nowrap; } /* Aprašymo pradžia vienoje eilutėje: width 0 + min-width 100% — langelio plotis nuo aprašymo nepriklauso. */ .ntu-admin-sub { display: flex; align-items: baseline; gap: 8px; width: 0; min-width: 100%; margin-top: 2px; font-size: 12px; line-height: 16px; } .ntu-admin-sub .ntu-row-desc { flex: 0 1 auto; } .ntu-admin-sub .ntu-listing { flex: 0 0 auto; font-size: 12px; line-height: 16px; } .ntu-admin-table > tbody > tr > td > .ntu-badge + .ntu-meta { margin-top: 4px; } .ntu-admin-since, .ntu-admin-assignee { white-space: nowrap; } .ntu-admin-since .ntu-i-alert { margin-right: 4px; } /* vėluojančio etapo ženklas — tono spalvos (currentColor), ne vien spalva (WCAG 1.4.1) */ .ntu-admin-all-label { display: none; } /* „Pažymėti visas" tekstas — tik kortelių išdėstyme */ /* Veiksmai eilutėje: statusas (admin), priskyrimas, „Daugiau" */ .ntu-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .ntu-admin-table .ntu-actions select { width: 128px; } .ntu-admin-more-btn .ntu-i-chevron, .ntu-admin-filters-toggle .ntu-i-chevron { transform: rotate(90deg); transition: transform 150ms var(--ntu-ease); } /* tik rodyklė, ne ikona prieš tekstą */ .ntu-admin-more-btn[aria-expanded="true"], .ntu-admin-filters-toggle[aria-expanded="true"] { color: var(--ntu-ink); } .ntu-admin-more-btn[aria-expanded="true"] .ntu-i-chevron, .ntu-admin-filters-toggle[aria-expanded="true"] .ntu-i-chevron { transform: rotate(-90deg); } /* --- Išplėtimo eilutė („Daugiau"): sujungta su savo eilute bendru fonu — pagalbinė zona (--ntu-zone-head, kaip .ntu-zone-muted) --- */ .ntu-admin-table > tbody > tr:has(+ tr.ntu-row-more:not([hidden])) > td { background: var(--ntu-zone-head); } .ntu-admin-table > tbody > tr.ntu-row-more > td { padding: 8px 16px 16px; border-top: 0; background: var(--ntu-zone-head); } .ntu-admin-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; } .ntu-admin-more-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } .ntu-admin-more-actions > .ntu-details, .ntu-admin-more-actions > .ntu-comment-form { align-self: stretch; } .ntu-admin-more-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-content: start; min-width: 0; } .ntu-admin-more-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ntu-admin-more-history { grid-column: 1 / -1; } .ntu-correct { display: flex; flex-direction: column; gap: 8px; } .ntu-correct :where(select, input) { width: 100%; } .ntu-correct .ntu-btn { align-self: flex-start; } /* --- Glaustesnė lentelė (1024–1279): vardai ir „nuo {data} · N d." lūžta tik tarp dalių, Užklausa — siauresnė --- */ @media (max-width: 1279px) { .ntu-admin-since, .ntu-admin-assignee { white-space: normal; } } @media (min-width: 1024px) and (max-width: 1279px) { .ntu-admin-table > tbody > tr > .ntu-cell-main { width: auto; min-width: 200px; } } /* ≤1179, kai eilutėje du select'ai (admin): vienas po kitu, „Daugiau" — šalia pirmojo (veiksmų stulpelis ~270px vietoj ~405px) */ @media (min-width: 1024px) and (max-width: 1179px) { .ntu-admin-table > tbody > tr > .ntu-cell-action > .ntu-actions:has(> select ~ select) { display: grid; grid-template-columns: auto auto; align-items: start; justify-content: end; } .ntu-admin-table > tbody > tr > .ntu-cell-action > .ntu-actions > select { grid-column: 1; } .ntu-admin-table > tbody > tr > .ntu-cell-action > .ntu-actions > .ntu-admin-more-btn { grid-column: 2; grid-row: 1; } } /* --- Eilutės-kortelės (≤1023; telefone papildo PAMATO .ntu-table-stack taisykles, planšetėje jas atkartoja) --- */ @media (max-width: 1023px) { .ntu-admin-table.ntu-table-stack, .ntu-admin-table.ntu-table-stack > thead, .ntu-admin-table.ntu-table-stack > tbody { display: block; width: 100%; } /* Iš antraštės lieka tik „Pažymėti visas" — virš pirmos kortelės */ .ntu-admin-table.ntu-table-stack > thead > tr { display: block; width: 100%; padding: 0; border: 0; } .ntu-admin-table.ntu-table-stack > thead > tr > th { display: none; } .ntu-admin-table.ntu-table-stack > thead > tr > th.ntu-cell-check { display: block; width: auto; padding: 0; } .ntu-admin-table.ntu-table-stack > thead .ntu-check-hit { justify-content: flex-start; gap: 8px; padding: 8px 16px; } .ntu-admin-all-label { display: inline; } .ntu-admin-table.ntu-table-stack > tbody > tr { position: relative; display: flex; flex-direction: column; width: 100%; padding: 12px 16px; border-top: 1px solid var(--ntu-line); } .ntu-admin-table.ntu-table-stack > tbody > tr[hidden] { display: none; } .ntu-admin-table.ntu-table-stack > tbody > tr:first-child { border-top: 0; } .ntu-admin-table.ntu-table-stack > tbody > tr > td { display: block; width: auto; padding: 2px 0; border: 0; text-align: left; } .ntu-admin-table.ntu-table-stack > tbody > tr > td[data-label]::before { content: attr(data-label) ": "; color: var(--ntu-ink-muted); } .ntu-admin-table.ntu-table-stack > tbody > tr > td.ntu-cell-check { order: -2; padding: 0; } .ntu-admin-table.ntu-table-stack > tbody > tr > td.ntu-cell-check > .ntu-check-hit { justify-content: flex-start; padding: 0 0 4px; } .ntu-admin-table.ntu-table-stack > tbody > tr > td.ntu-cell-main { order: -1; width: auto; min-width: 0; max-width: none; font-weight: 400; } /* PAMATO 500 paryškintų ir meta */ .ntu-admin-table.ntu-table-stack > tbody > tr > td.ntu-cell-action { order: 9; width: auto; padding-top: 8px; } .ntu-admin-table.ntu-table-stack > tbody > tr > td > .ntu-badge + .ntu-meta { display: inline; margin: 0 0 0 8px; } /* statusas ir „nuo … · N d." vienoje eilutėje */ .ntu-admin-table > tbody > tr > .ntu-cell-action > .ntu-actions { flex-wrap: wrap; justify-content: flex-start; } .ntu-admin-table.ntu-table-stack > tbody > tr:has(+ tr.ntu-row-more:not([hidden])) { background: var(--ntu-zone-head); } .ntu-admin-table.ntu-table-stack > tbody > tr.ntu-row-more { padding: 0; border-top: 0; background: var(--ntu-zone-head); } .ntu-admin-table.ntu-table-stack > tbody > tr.ntu-row-more > td { padding: 4px 16px 16px; } .ntu-admin-more { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1023px) and (hover: hover) { .ntu-admin-table.ntu-table-stack > tbody > tr[data-href]:hover { background: var(--ntu-canvas); } /* visa kortelė, ne tik langeliai */ } /* Planšetė (641–1023): varnelė kairėje paraštėje šalia pavadinimo, Įvesta / Statusas / Priskirta — vienoje eilutėje */ @media (min-width: 641px) and (max-width: 1023px) { .ntu-admin-table.ntu-table-stack > tbody > tr[data-href] { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 24px; padding-left: 48px; } .ntu-admin-table.ntu-table-stack > tbody > tr[data-href] > td.ntu-cell-check { position: absolute; top: 4px; left: 0; } .ntu-admin-table.ntu-table-stack > tbody > tr[data-href] > td.ntu-cell-check > .ntu-check-hit { padding: 0 16px; } .ntu-admin-table.ntu-table-stack > tbody > tr[data-href] > td.ntu-cell-main, .ntu-admin-table.ntu-table-stack > tbody > tr[data-href] > td.ntu-cell-action { flex: 0 0 100%; } .ntu-admin-table.ntu-table-stack > tbody > tr.ntu-row-more > td { padding-left: 48px; } } /* --- Masinių veiksmų juosta (sutartys PasirasymoVeiksmuJuosta): lipni lango apačioje; pažymėjus (is-active — JS bulkState) — veiksmų zona --- */ .ntu-bulk-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--ntu-line); background: var(--ntu-surface); border-radius: 0 0 calc(var(--ntu-r-lg) - 1px) calc(var(--ntu-r-lg) - 1px); transition: background-color 150ms var(--ntu-ease); } .ntu-bulk-bar.is-active { background: var(--ntu-zone-action); } .ntu-bulk-count { font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } .ntu-bulk-bar.is-active .ntu-bulk-count { color: var(--ntu-ink); font-weight: 500; } /* „Pažymėta: N" — būsena, ne užuomina */ .ntu-bulk-assign { width: 200px; } /* Klaviatūros fokusas neužlenda po lipnia juosta (apačioje; iki 84px, kai paaiškinimas lūžta) ir lipnia antrašte (viršuje, ≥1280; 36px): naršyklė, slinkdama prie fokusuoto valdiklio, palieka šias paraštes */ .ntu-admin-table > tbody :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin: 48px 0 96px; } /* --- Mano įvestos --- */ .ntu-entered-table > tbody > tr > .ntu-cell-main { max-width: 480px; } /* --- Telefonas (≤640) --- */ @media (max-width: 640px) { /* Filtrai: matomi Raktinis žodis ir Būsena, kiti — po „Daugiau filtrų" (atidaryti, jei kuris nors pasirinktas) */ .ntu-admin-filters .ntu-filters-actions { margin-top: 0; } .ntu-admin-more-filters[hidden] { display: none; } .ntu-admin-filters > .ntu-admin-filters-toggle { display: inline-flex; align-self: end; justify-self: start; } /* šalia „Būsena" lauko apačioje (PAMATO .ntu-filters > .ntu-btn — auto) */ .ntu-entered-table.ntu-table-stack > tbody > tr > td.ntu-cell-main { width: 100%; max-width: none; font-weight: 400; } .ntu-admin-table > tbody > tr > .ntu-cell-action > .ntu-actions > select { flex: 1 1 96px; width: auto; min-width: 0; } .ntu-admin-more-info { grid-template-columns: minmax(0, 1fr); } /* Juosta lipni tik pažymėjus (is-active — JS bulkState): „Pažymėta: N" ir veiksmai matomi neslenkant į sąrašo galą, o kol nieko nepažymėta — ekrano neužima */ .ntu-bulk-bar { gap: 8px; } .ntu-bulk-bar:not(.is-active) { position: relative; } .ntu-bulk-assign { flex: 1 1 120px; width: auto; min-width: 0; } /* 390px: select, „Priskirti" ir „Archyvuoti" vienoje eilutėje */ .ntu-bulk-act > .ntu-icon { display: none; } /* …todėl be mygtukų ikonų: su jomis „Archyvuoti" lūžta, o lipni juosta išauga iki ~140px */ .ntu-bulk-count { flex-basis: 100%; order: -1; } .ntu-admin-table > tbody :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-bottom: 140px; } /* aktyvi juosta „Visos" sąraše — iki 126px */ } /* === /ADMIN === */ /* === DETAIL === */ /* Užklausos detalė (render_detail, SPEC §4.13) ir istorijos lentelė (history_html — naudoja ir sąrašai, administravimas). */ /* --- Išdėstymas: antraštė → pranešimai → eiga → [redagavimas] → stulpeliai (2:1) --- */ .ntu-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ntu-detail-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ntu-detail-main, .ntu-detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* --- Archyvuota: grąžinimo mygtukas pranešime (atskirtas nuo teksto labiau nei .ntu-callout > * + * 4px) --- */ .ntu-detail-archived > .ntu-actions-row { margin-top: 8px; } /* --- Eiga: dabartinis žingsnis — lengvas accent fonas (kaip „darbe" ženkliukas), ne vien rėmelis --- */ .ntu-detail .ntu-step-current .ntu-step-label { background: var(--ntu-accent-bg); } /* --- Aprašymas --- */ .ntu-detail-desc-s .ntu-subtitle + .ntu-detail-note { margin-top: 4px; } .ntu-detail-note { white-space: pre-line; overflow-wrap: anywhere; } /* --- Veiksmai: Statusas / Perdavimas / Kita --- */ .ntu-detail-actions .ntu-section-body { display: flex; flex-direction: column; gap: 12px; } .ntu-detail-actions .ntu-section-body + .ntu-section-body { border-top: 1px solid var(--ntu-line); } /* etiketė prie savo lauko (4px), laukų grupės ir mygtukas — atskirti (12px) */ .ntu-detail-actions .ntu-status-form-stacked { gap: 4px; } .ntu-detail-actions .ntu-status-form-stacked > label:not(:first-child), .ntu-detail-actions .ntu-status-form-stacked > .ntu-btn { margin-top: 8px; } .ntu-detail-actions .ntu-field + .ntu-help, .ntu-detail-actions .ntu-subtitle + .ntu-help { margin-top: -8px; } /* --- Informacija --- */ .ntu-detail-dl > dd > .ntu-meta { margin-top: 2px; } /* etiketė su ikona (detail_dt): lūžusi antra eilutė lygiuojasi su tekstu, ne po ikona */ .ntu-detail-dl > dt { display: flex; align-items: flex-start; } .ntu-detail-dl > dt > .ntu-icon:first-child { margin-top: 2px; } /* 20px eilutės centre (flex — vertical-align neveikia) */ /* --- Istorija: pastabos forma kortelės apačioje per visą plotį --- */ .ntu-detail-hist-s .ntu-section-foot > .ntu-comment-form { flex: 1 1 100%; min-width: 0; } /* --- Istorijos lentelė (visuose kontekstuose) --- */ .ntu-history .ntu-cell-main { min-width: 160px; } .ntu-history .ntu-cell-main .ntu-badge { margin-left: 4px; } .ntu-history td.ntu-history-comment { white-space: pre-line; overflow-wrap: anywhere; } /* nugali .ntu-table-stack td { white-space: normal } */ .ntu-correction > td { background: var(--ntu-warning-bg); } /* žymė „Korekcija" ant tono fono: bazinis warning — 4.38:1, warning-ink — 6.19:1 (kaip .ntu-callout-title, §2.4) */ .ntu-correction .ntu-badge.ntu-tone-warning { color: var(--ntu-warning-ink); } /* --- Siauresni ekranai: vienas stulpelis, veiksmai pirmi --- */ @media (max-width: 1023px) { .ntu-detail-cols { display: flex; flex-direction: column; align-items: stretch; } .ntu-detail-main, .ntu-detail-side { display: contents; } .ntu-detail-actions { order: 1; } .ntu-detail-desc-s { order: 2; } .ntu-detail-info-s { order: 3; } .ntu-detail-hist-s { order: 4; } } /* planšetė: kortelės per visą plotį, bet formos laukai ir dt/dd poros neišsitempia (ne „ištemptas telefonas") */ @media (min-width: 641px) and (max-width: 1023px) { .ntu-detail-actions .ntu-section-body > *, .ntu-detail-info-s .ntu-dl { max-width: 560px; } } @media (max-width: 640px) { /* sukrautoje istorijoje tuščios reikšmės („—") nerodomos — mažiau triukšmo */ .ntu-history td.ntu-history-empty { display: none; } /* sukrauta eilutė — blokas su paraštėmis: korekcijos fonas visai eilutei, ne langeliams */ .ntu-history tr.ntu-correction { background: var(--ntu-warning-bg); } .ntu-history tr.ntu-correction > td { background: transparent; } } /* === /DETAIL === */ /* === STATS === */ /* Mano rezultatai ir Statistika (SPEC §4.8, §4.12). Tik tokenai; šriftai 12/14/16px. */ /* --- KPI eilutė kortelės viduje: tuščia būsena po ja atskiriama linija --- */ .ntu-stats-kpis + .ntu-empty { border-top: 1px solid var(--ntu-line); } /* paskutinė kortelės eilutė: fonas neuždengia apvalių apatinių kampų (vidinis spindulys = išorinis − rėmelis; overflow:hidden apkerpa ir KPI hover) */ .ntu-stats-results > .ntu-kpi-row:last-child { border-radius: 0 0 calc(var(--ntu-r-lg) - 1px) calc(var(--ntu-r-lg) - 1px); } /* --- Laikotarpio perjungiklis (Mano rezultatai): segmentų valdiklis — šviesus rėmelis ant atspalvintos antraštės; aktyvus — stipresnis rėmelis ir filtrų zonos fonas (ne akcentas, kad nesipainiotų su skirtuku). Aukštis 34px — kaip mygtukas --- */ .ntu-stats-results .ntu-switch { gap: 2px; padding: 2px; border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-md); background: var(--ntu-surface); } .ntu-stats-results .ntu-switch > a { padding: 3px 11px; border: 1px solid transparent; } .ntu-stats-results .ntu-switch > a[aria-current="page"] { border-color: var(--ntu-line-strong); background: var(--ntu-zone-filter); } @media (pointer: coarse) { .ntu-stats-results .ntu-switch > a { display: flex; align-items: center; min-height: 34px; } } /* liečiamas: 40px kaip mygtukai */ /* --- Telefonas: laikotarpio perjungiklis 2×2, trukmių eilutė — 2 eilutės, ne 4 (piltuvėlio juosta telefone — COMPONENTS) --- */ @media (max-width: 640px) { /* perjungiklis — pagrindinis ekrano valdiklis: atskiri rėmeliai kaip skirtukų (.ntu-nav ≤640), liečiamas 40px; aktyvus — stipresnis rėmelis ir zonos fonas (ne akcentas, kad nesipainiotų su skirtuku) */ .ntu-stats-results .ntu-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 0; border: 0; background: transparent; } .ntu-stats-results .ntu-switch > a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; border-color: var(--ntu-line); background: var(--ntu-surface); text-align: center; } .ntu-stats-results .ntu-switch > a[aria-current="page"] { border-color: var(--ntu-line-strong); background: var(--ntu-zone-filter); } .ntu-stats-durations.ntu-table-stack tr { flex-direction: row; flex-wrap: wrap; column-gap: 16px; } .ntu-stats-durations.ntu-table-stack td { width: auto; } .ntu-stats-durations.ntu-table-stack td.ntu-cell-main { width: 100%; } /* suvestinės eilutė: paryškintos tik reikšmės, etiketės („Vidurkis:") — kaip kitose eilutėse */ .ntu-stats-durations.ntu-table-stack tr.ntu-total td[data-label]::before { font-weight: 400; } } /* --- Statistikos filtrai: 4 stulpeliai (2 eilutės, veiksmai paskutiniame langelyje), telefone — 2 --- */ .ntu-stats-filters.ntu-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; border-bottom: 0; } /* forma — paskutinė kortelėje: be dvigubos apatinės linijos */ @media (min-width: 768px) { .ntu-stats-filters.ntu-filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ntu-stats-filters .ntu-filters-actions { grid-column: auto; align-self: end; justify-content: flex-end; } /* --- Diagrama: Y ašis — 36px SVG, braižymo plotas — likęs plotis (X koordinatės %) --- */ .ntu-chart-wrap { display: flex; align-items: flex-start; min-width: 0; } .ntu-chart-wrap svg { display: block; overflow: visible; } .ntu-chart-y { flex: 0 0 36px; } .ntu-chart-plot { flex: 1 1 auto; min-width: 0; } .ntu-chart-grid { stroke: var(--ntu-line); } .ntu-chart-axis { fill: var(--ntu-ink-muted); font-size: 12px; } /* Serijos — accent ir success, ne piltuvėlio warning/success: warning ir success vienodo šviesumo — daltonikams stulpelių poros nesiskirtų */ .ntu-chart-bar-a { fill: var(--ntu-accent); } .ntu-chart-bar-b { fill: var(--ntu-success); } @media (max-width: 1023px) { .ntu-chart-x2 { display: none; } } @media (max-width: 640px) { .ntu-chart-x3 { display: none; } } /* Diagramos duomenys lentele (suskleista po diagrama) — kaip „Istorija" sąrašuose: lentelė savo rėmelyje */ .ntu-chart-data { margin-top: 12px; } .ntu-chart-data > .ntu-table-wrap { border: 1px solid var(--ntu-line); border-radius: var(--ntu-r-sm); } /* --- Legenda (sekcijos antraštės veiksmuose) --- */ .ntu-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; line-height: 16px; color: var(--ntu-ink-muted); } .ntu-legend-item { display: inline-flex; align-items: center; } .ntu-legend { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; } .ntu-legend-a { background: var(--ntu-accent); } .ntu-legend-b { background: var(--ntu-success); } /* --- Darbuotojų palyginimas: telpa 1232px (vardas ≤200px, skaičių antraštės gali lūžti) --- */ .ntu-stats-users th.ntu-num { white-space: normal; } .ntu-stats-name { display: block; max-width: 200px; } @media (max-width: 1279px) { /* lentelė slenka savo apvalke — vardų stulpelis lieka matomas */ .ntu-stats-users th:first-child, .ntu-stats-users td:first-child { position: sticky; left: 0; z-index: 1; background: var(--ntu-surface); } } /* --- KPI: etapų langeliuose — statuso taškas (stats_dot; ženkliukų paletė, kartu ir piltuvėlio legenda), kituose — ikona. Taškas užima tiek pat vietos kaip 16px ikona + 6px tarpas, todėl etiketės lygiuojasi --- */ .ntu-stats-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin: 6px 10px 0 4px; border-radius: var(--ntu-r-pill); background: var(--ntu-ink-muted); } /* etiketė — flex (COMPONENTS), taškas ties pirma eilute */ .ntu-stats-dot.ntu-tone-warning { background: var(--ntu-warning); } .ntu-stats-dot.ntu-tone-accent { background: var(--ntu-accent); } .ntu-stats-dot.ntu-tone-success { background: var(--ntu-success); } /* --- Piltuvėlio ir dabartinių statusų juostos — statusų ženkliukų paletė (BACKLOG D6): pirmas etapas warning, tarpiniai accent, paskutinis success, administraciniai — pilki. Eilutės pavadintos tekstu, todėl spalva — tik papildoma užuomina --- */ .ntu-funnel-bar.ntu-tone-warning { background: var(--ntu-warning); } .ntu-funnel-bar.ntu-tone-accent { background: var(--ntu-accent); } .ntu-funnel-bar.ntu-tone-success { background: var(--ntu-success); } .ntu-funnel-bar.ntu-tone-neutral { background: var(--ntu-ink-muted); } /* --- Suvestinės eilutė („Iš viso", „Visa eiga") — lengva zona, atskirta nuo etapų eilučių --- */ .ntu-stats-conv tr.ntu-total, .ntu-stats-durations tr.ntu-total { background: var(--ntu-zone-head); } /* lentelė — paskutinė kortelėje: apvalkalas (overflow-x:auto) apkerpa eilutės foną pagal kortelės apatinius kampus */ .ntu-section > .ntu-table-wrap:last-child:has(> .ntu-stats-conv, > .ntu-stats-durations) { border-radius: 0 0 calc(var(--ntu-r-lg) - 1px) calc(var(--ntu-r-lg) - 1px); } /* --- ≤1023: „Išvalyti" + „Rodyti" (su ikona, ~170px) netelpa viename tinklelio langelyje — veiksmai atskiroje eilutėje dešinėje; vien „Rodyti" lieka langelyje šalia „Darbuotojas" --- */ @media (max-width: 1023px) { .ntu-stats-filters .ntu-filters-actions:has(> .ntu-btn-ghost) { grid-column: 1 / -1; } } /* === /STATS === */ /* === USERS === */ /* Vartotojų puslapis [ntu_vartotojai] (SPEC-AUTH §4) ir antraštės meniu skaitiklis. Tik tokenai, 12/14px. Lentelės taisyklės per „> tbody > tr >" (neveikia išplėtimo eilutės turinio). ≥1200 — lentelė (1200–1279 glaustesnė), ≤1199 — eilutės-kortelės: 7 stulpeliai ir „Grupės ir prieiga" 1024–1199 px netelpa (matuota — vardo stulpelis liktų ~110 px). „Grupės ir prieiga" mygtukas — ADMIN klasė .ntu-admin-more-btn (rodyklės pasukimas); išplėtimo fonas — kaip ADMIN (zone-head). */ /* --- Antraštės meniu skaitiklis „Laukia" (sutartys „Pastabos" ženkliukas): tik kai > 0; tarpą iki teksto duoda .oh-nav a gap --- */ .ntu-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--ntu-r-pill); background: var(--ntu-accent); color: var(--ntu-accent-ink); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; } /* --- Filtrai: paieška per 2 stulpelius, mygtukai — paskutiniame stulpelyje laukų lygyje --- */ .ntu-users-filters { align-items: end; } .ntu-users-filters .ntu-users-q { grid-column: span 2; } .ntu-users-filters .ntu-filters-actions { grid-column: -2 / -1; } /* --- „Ką reiškia rolės" (tarp filtrų ir lentelės) --- */ .ntu-users-roles { padding: 12px 16px; border-bottom: 1px solid var(--ntu-line); } .ntu-users-roles > .ntu-dl { max-width: 768px; } .ntu-users-roles > .ntu-dl > dt { color: var(--ntu-ink); } /* --- Lentelė --- */ .ntu-users-table > tbody > tr > .ntu-cell-main { width: 24%; min-width: 200px; overflow-wrap: anywhere; } .ntu-users-table > tbody > tr > .ntu-cell-main .ntu-meta { display: block; margin-top: 2px; font-weight: 400; } .ntu-users-table > tbody > tr > .ntu-cell-main .ntu-users-warn { margin-top: 4px; } .ntu-users-warn .ntu-icon-lead { color: currentColor; } /* įspėjimo ženklas — tono spalvos, ne vien spalva (WCAG 1.4.1) */ .ntu-users-table > tbody > tr > .ntu-users-gcell { min-width: 160px; } .ntu-users-kbcell .ntu-muted { white-space: nowrap; } .ntu-users-you { font-weight: 400; color: var(--ntu-ink-muted); } .ntu-users-table .ntu-user-role { width: 168px; } .ntu-users-table .ntu-user-role + .ntu-meta { display: block; max-width: 168px; margin-top: 4px; } /* neaktyvaus select'o priežastis — matoma ir liečiamuose ekranuose */ .ntu-users-groups { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 16px; } .ntu-users-sritis { color: var(--ntu-ink-muted); } .ntu-users-state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .ntu-users-state > .ntu-meta { white-space: nowrap; } .ntu-users-login { white-space: nowrap; } .ntu-users-login .ntu-meta { display: block; margin-top: 2px; white-space: normal; } /* „Google · aktyvių sesijų: N" lūžta — stulpelio plotį lemia data */ .ntu-users-kb { white-space: nowrap; } .ntu-users-table .ntu-user-approve { min-width: 168px; } /* „Patvirtinti" — rolės select'o vietoje ir to paties pločio */ /* --- Išplėtimo eilutė („Grupės ir prieiga" / „Patvirtinti"): sujungta su savo eilute bendru fonu --- */ .ntu-users-table > tbody > tr:has(+ tr.ntu-row-more:not([hidden])) > td { background: var(--ntu-zone-head); } .ntu-users-table > tbody > tr.ntu-row-more > td { padding: 8px 16px 16px; border-top: 0; background: var(--ntu-zone-head); } .ntu-users-more { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: 24px; } .ntu-users-more-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .ntu-users-more-block > .ntu-dl, .ntu-user-groups-form, .ntu-user-approve-form { align-self: stretch; } .ntu-user-groups-form, .ntu-user-approve-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } :is(.ntu-user-groups-form, .ntu-user-approve-form) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } :is(.ntu-user-groups-form, .ntu-user-approve-form) legend { margin: 0 0 4px; padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ntu-ink); } .ntu-user-approve-form > .ntu-field { align-self: stretch; max-width: 320px; } .ntu-users-more-block > .ntu-help { max-width: 480px; } .ntu-users-assigned a { white-space: nowrap; } /* --- „Pridėti vartotoją": grupių laukai po sritis; „Rodyti žinių banko turinį" — šalia Rolės, laukelio lygyje --- */ .ntu-users-groupsets { display: flex; flex-direction: column; gap: 12px; } .ntu-form label.ntu-users-kbcheck { align-self: end; min-height: 34px; } /* --- Glaustesnė lentelė (1200–1279): antraštės, „nuo {data}" ir „Rodomas visada" lūžta, rolės select'as siauresnis — 7 stulpeliai telpa kortelėje be horizontalaus slinkimo --- */ @media (max-width: 1279px) { .ntu-users-table > thead th { white-space: normal; } .ntu-users-table > tbody > tr > .ntu-cell-main { width: auto; min-width: 0; } .ntu-users-table > tbody > tr > .ntu-users-gcell { min-width: 0; } .ntu-users-table .ntu-user-role, .ntu-users-table .ntu-user-approve { width: 140px; min-width: 0; } .ntu-users-table .ntu-user-role + .ntu-meta { max-width: 140px; } .ntu-users-kbcell .ntu-muted, .ntu-users-state > .ntu-meta { white-space: normal; } } /* --- Eilutės-kortelės (≤1199; kaip ADMIN ≤1023) --- */ @media (max-width: 1199px) { .ntu-users-table .ntu-user-role, .ntu-users-table .ntu-user-approve { width: 168px; } .ntu-users-table.ntu-table-stack, .ntu-users-table.ntu-table-stack > tbody { display: block; width: 100%; } .ntu-users-table.ntu-table-stack > thead { display: none; } .ntu-users-table.ntu-table-stack > tbody > tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; width: 100%; padding: 12px 16px; border-top: 1px solid var(--ntu-line); } .ntu-users-table.ntu-table-stack > tbody > tr[hidden] { display: none; } .ntu-users-table.ntu-table-stack > tbody > tr:first-child { border-top: 0; } .ntu-users-table.ntu-table-stack > tbody > tr > td { display: block; width: auto; padding: 0; border: 0; text-align: left; white-space: normal; } .ntu-users-table.ntu-table-stack > tbody > tr > td[data-label]::before { content: attr(data-label) ": "; color: var(--ntu-ink-muted); } .ntu-users-table.ntu-table-stack > tbody > tr > td.ntu-cell-main { flex: 0 0 100%; order: -1; min-width: 0; font-weight: 500; } /* Būsena — visada antroje eilutėje po vardu (ta pati vieta kiekvienoje kortelėje: sąrašas perbėgamas akimis pagal būseną) */ .ntu-users-table.ntu-table-stack > tbody > tr > td[data-label="Būsena"] { flex: 0 0 100%; order: -1; } .ntu-users-table.ntu-table-stack > tbody > tr > td.ntu-cell-action { flex: 0 0 100%; order: 9; padding-top: 4px; } .ntu-users-table.ntu-table-stack > tbody > tr > td.ntu-cell-action:empty { display: none; } .ntu-users-table.ntu-table-stack > tbody > tr:has(+ tr.ntu-row-more:not([hidden])) { background: var(--ntu-zone-head); } .ntu-users-table.ntu-table-stack > tbody > tr:has(+ tr.ntu-row-more:not([hidden])) > td { background: transparent; } .ntu-users-table.ntu-table-stack > tbody > tr.ntu-row-more { padding: 0; border-top: 0; background: var(--ntu-zone-head); } .ntu-users-table.ntu-table-stack > tbody > tr.ntu-row-more > td { flex: 0 0 100%; padding: 4px 16px 16px; background: transparent; } .ntu-users-table.ntu-table-stack > tbody > tr.ntu-row-more > td::before { content: none; } .ntu-users-more { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* Vidiniai blokai eilutėje šalia „Etiketė: " (ne po ja) */ .ntu-users-groups { display: inline-flex; flex-direction: row; flex-wrap: wrap; column-gap: 12px; vertical-align: top; font-size: 14px; line-height: 20px; } .ntu-users-state { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; vertical-align: middle; } .ntu-users-login .ntu-meta { display: inline; margin: 0 0 0 8px; } .ntu-users-table .ntu-user-role + .ntu-meta { max-width: none; } } /* --- Telefonas (≤640): langeliai stulpeliu, rolės select'as ir „Patvirtinti" per visą plotį --- */ @media (max-width: 640px) { .ntu-users-filters .ntu-users-q { grid-column: 1 / -1; } .ntu-users-filters .ntu-filters-actions { grid-column: 1 / -1; justify-content: flex-end; } .ntu-users-table.ntu-table-stack > tbody > tr { flex-direction: column; align-items: stretch; gap: 6px; } .ntu-users-table .ntu-user-role, .ntu-users-table .ntu-user-approve { width: 100%; } .ntu-users-table.ntu-table-stack > tbody > tr > td[data-label="Rolė"]::before { display: block; margin-bottom: 4px; } .ntu-users-login .ntu-meta { display: block; margin: 2px 0 0; } .ntu-user-approve-form > .ntu-field { max-width: none; } } /* === /USERS === */