:root { --default-font-family: Inter, var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1, 'tnum' 1, 'ss01' 1; --radius: 0.3rem; --spacing: 0.2rem; /* AG Grid row state — consumed by `app/js/ag-theme.js`. Light values stay subtle (zinc-100 mixed with bg). Dark values use solid tokens — translucent mixes on the zinc-950 background read as nearly invisible, so we drop the transparency. */ --ag-row-selected: #3aa8ff; --ag-row-hover: color-mix(in oklab, var(--secondary) 50%, transparent); /* AG Grid emphasised total-price cell — used via `cellClass: 'tprice-cell'`. */ --ag-tprice-bg: #fffbeb; /* AG Grid pinned-footer rows — bg + borders applied to .ag-floating-bottom. */ --ag-footer-bg: #f9fafb; --ag-footer-border-top: #6b7280; --ag-footer-border-bottom: #e5e7eb; /* Order Sheet — desktop-mirrored column tints + conditional highlights. Light = exact Delphi colors; dark = low-alpha hue tints so they stay subtle on the zinc-950 grid. Used via inline `backgroundColor: var(--os-*)` in order-sheet/index.js. */ --os-col-po: #FFFFC0; /* PO + on.od */ --os-col-tot: #C0C0FF; /* All + TJual */ --os-col-gdg: #FFC0C0; /* Gdg + in.tr */ --os-col-br1: #C0FFC0; /* Mumbul */ --os-col-br2: #C0FFFF; /* Kampial */ --os-col-br3: #FEEAAB; /* Ungasan */ --os-low-bg: #FF0000; /* low-stock alert */ --os-early-bg: #87CEEB; /* tgl_terima < tgl_create */ --os-noimg-bg: #FFFF80; /* no product image */ --os-stop-bg: #FFAAAA; /* stop_order = Y */ --os-stop-fg: #CC0000; --sb-promo-bg: #F0C0F0; /* status-barang: item on promo (plu / nama / H.Jual) */ --ed-bogo-bg: #44BB44; /* edit-delete-plu: PLU inside a BOGO group (Jual cell) */ --ed-stop-bg: #A0A0A0; /* stop_order row that still holds stock (clMedGray) — order sheet, status barang, edit-delete-plu */ --input-ro-bg: #FFFF80; /* read-only / disabled input — Delphi ReadOnly edit colour 8454143 */ --border: var(--color-zinc-400); --input: var(--color-zinc-400); /* ── HRIS accent palette (burnt orange) ──────────────────────────────── Single source of truth for the HR module's accent colour. HR templates must reference these tokens instead of hardcoding hex values, so the whole module can be re-tinted from here. Neutrals/grays and the semantic status colours (green=ok, red=danger, amber=warn) are deliberately NOT part of this set — only the accent family. */ --hr-accent: #c07a56; /* primary fill: buttons, active pills */ --hr-accent-hover: #a86745; /* hover/pressed on primary fill */ --hr-accent-text: #996848; /* accent text/links on light bg */ --hr-accent-dim: #8a7259; /* de-emphasised accent: repeated section labels */ --hr-accent-soft: #fbf2ec; /* soft tint bg (badges, hover rows) */ --hr-accent-border: #ecd3c3; /* border on soft tint */ --hr-accent-contrast: #ffffff; /* text sitting on --hr-accent fill */ /* HRIS light surfaces — taupe page + sidebar around a light content area, with slightly lighter controls/cards on top. Same names as the dark ramp below, so a rule using them follows the theme. */ --hr-surface-page: #e6e2db; /* page behind the frame + sidebar */ --hr-surface-canvas: #f7f5f1; /* main content area */ --hr-surface-0: #fbfaf7; /* controls / cards sitting on the canvas */ --hr-surface-1: #efebe5; /* hover / alt rows on the canvas */ --hr-line: #ddd7cd; /* table rules + control borders */ } /* HRIS light theme — remaps the Metronic tokens on HRIS routes only (base.html.twig adds .hris-theme), so bg-muted / kt-* / text-* utilities pick up the warm neutrals and the burnt-orange accent. Dark mode keeps its own ramp. */ html:not(.dark) body.hris-theme { --background: var(--hr-surface-0); --card: var(--hr-surface-0); --popover: var(--hr-surface-0); --foreground: #1d1a16; --card-foreground: #1d1a16; --popover-foreground: #1d1a16; --primary: var(--hr-accent); --primary-foreground: var(--hr-accent-contrast); --secondary: var(--hr-surface-1); --secondary-foreground: #453f38; --muted: var(--hr-surface-page); --muted-foreground: #7b7369; --accent: var(--hr-surface-1); --accent-foreground: #2d2924; --mono: #1d1a16; --border: #aaa297; --input: #aaa297; --ring: #aaa297; } html:not(.dark) body.hris-theme .app-content-frame { border-color: var(--hr-line); box-shadow: 0 1px 2px rgb(60 45 30 / 0.04), 0 8px 24px -12px rgb(60 45 30 / 0.08); } /* Dark HRIS: the page + sidebar around the content frame. The global dark .bg-muted is a cool zinc grey (#3e3d44) that clashes with the warm content area (#1f1c1a), so on HRIS pages it becomes a deeper warm near-black — the frame reads as a lifted panel, mirroring light mode where the taupe page sits darker than the content. Inventory keeps the default theme. */ html.dark body.hris-theme, html.dark body.hris-theme .bg-muted { background-color: #151311 !important; } /* Sidebar hover / active tiles and its flyout menus use bg-background and border-border; in dark mode those are cool near-black + a bright zinc border. Scope warm values to the sidebar only. */ html.dark body.hris-theme #sidebar { --background: #262220; --border: #474039; --popover: #262220; } .dark { --ag-row-selected: var(--color-blue-800); --ag-row-hover: var(--secondary); --border: var(--color-zinc-400); --input: var(--color-zinc-400); /* HRIS accent — dark variants. Fill stays the same hue so buttons read identically across themes; text/soft/border lift for legibility on the warm near-black HR surfaces. */ --hr-accent: #b9714f; --hr-accent-hover: #c9855f; --hr-accent-text: #c69b81; --hr-accent-dim: #b5a094; --hr-accent-soft: #38302a; --hr-accent-border: #4a423a; --hr-accent-contrast: #ffffff; /* HRIS dark surfaces — warm (hue ~25deg) instead of the old cool blue-grey ramp, so the module reads as one warm theme with the orange accent. Lightness is matched to the values these replaced, so every text/bg pair keeps (or improves on) its previous WCAG contrast: #1a191d -> #2b2725 #232228 -> #34302d #3d3b44 -> #403b37 #504e59 -> #4f4945 #c4c6d0 -> #d8d2cc #8e92a3 -> #a49d97 Matte = LOW SATURATION (~8%, a warm grey not a brown), NOT low contrast. Depth still needs real value steps between layers, so this is a 4-level elevation ramp: page -> canvas -> card -> elevated. Flattening those to one value (which an earlier revision did) reads as fog, not matte. */ --hr-surface-page: #1f1c1a; /* L0 outermost page frame */ --hr-surface-canvas: #262220; /* L1 canvas the cards sit on */ --hr-surface-0: #302b28; /* L2 card background */ --hr-surface-1: #3a3531; /* L3 elevated / hover / alt rows */ --hr-border: #474039; --hr-line: #474039; --hr-border-strong: #5a524a; /* hover + focus borders */ --hr-text-body: #d8d2cc; --hr-text-muted: #a49d97; --ag-tprice-bg: rgba(251, 191, 36, 0.32); --ag-footer-bg: var(--color-zinc-900); --ag-footer-border-top: var(--color-zinc-600); --ag-footer-border-bottom: var(--color-zinc-800); --os-col-po: rgba(253, 224, 71, 0.16); /* yellow-300 */ --os-col-tot: rgba(165, 180, 252, 0.18); /* indigo-300 */ --os-col-gdg: rgba(248, 113, 113, 0.16); /* red-400 */ --os-col-br1: rgba(134, 239, 172, 0.16); /* green-300 */ --os-col-br2: rgba(103, 232, 249, 0.16); /* cyan-300 */ --os-col-br3: rgba(252, 211, 77, 0.16); /* amber-300 */ --os-low-bg: rgba(220, 38, 38, 0.55); /* keep alert prominent */ --os-early-bg: rgba(56, 189, 248, 0.28); /* sky-400 */ --os-noimg-bg: rgba(250, 204, 21, 0.26); /* yellow-400 */ --os-stop-bg: rgba(239, 68, 68, 0.30); /* red-500 */ --os-stop-fg: #fca5a5; /* red-300 — legible on dark */ --sb-promo-bg: rgba(217, 70, 239, 0.22); /* fuchsia-500 — item on promo */ --ed-bogo-bg: rgba(34, 197, 94, 0.30); /* green-500 — PLU inside a BOGO group */ --ed-stop-bg: rgba(161, 161, 170, 0.35); /* zinc-400 — stop_order row that still holds stock */ --input-ro-bg: rgba(253, 224, 71, 0.16); /* yellow-300 */ } input.kt-input:disabled, input.kt-input[readonly]:not([data-kt-date-picker], [data-kt-date-picker] input), textarea.kt-input:is(:disabled, [readonly]), select.kt-select:disabled, .kt-select.disabled, .kt-input:not(input, textarea):has(> input:disabled) { background-color: var(--input-ro-bg); opacity: 100%; } .kt-select-wrapper.disabled { opacity: 100%; } .ag-cell.tprice-cell { background: var(--ag-tprice-bg); } @supports (font-variation-settings: normal) { :root { --default-font-family: InterVariable, var(--font-sans); } } .compact-table.kt-card-table { .kt-table { th, td { min-height: 33px; padding-inline: calc(var(--spacing) * 1.5); padding-block: calc(var(--spacing) * 0.5); &:first-child { padding-inline-start: calc(var(--spacing) * 3); } &:last-child { padding-inline-end: calc(var(--spacing) * 3); } } } } .kt-modal-backdrop { backdrop-filter: none; background-color: rgba(0, 0, 0, 0.3); } .kt-select-options { max-height: 400px; overflow: auto; } .kt-table-col { display: flex; justify-content: space-between; &.asc .kt-table-col-sort { &:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3E%3C/svg%3E"); } &:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C9CEDA'/%3E%3C/svg%3E"); } } &.desc .kt-table-col-sort { &:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C9CEDA'/%3E%3C/svg%3E"); } &:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3E%3C/svg%3E"); } } } [data-kt-toggle-password-initialized] [data-kt-toggle-password-trigger] > span { line-height: 0; } @layer components { #scrollable_content { padding-block: calc(var(--spacing) * 6); } @media (width >= 80rem) { #scrollable_content { padding-block: calc(var(--spacing) * 7.5); } } } .kt-card.h-full { overflow: hidden; } /* Select2 — styled to match kt-select (based on erp-finnex). Height, font-size, line-height, radius and padding all mirror the .kt-select rule in styles.css so the two render identically. */ .select2-container { font-size: 0.8125rem; font-family: inherit; &.select2 .select2-selection { height: calc(var(--spacing) * 8.5); border-radius: calc(var(--radius) - 2px) !important; border: 1px solid var(--input); background-color: var(--background); color: var(--foreground); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); .dark & { border-color: var(--input); background-color: #09090b; } .select2-selection__rendered { line-height: calc(var(--spacing) * 8.5 - 2px); padding-left: calc(var(--spacing) * 3); padding-right: calc(var(--spacing) * 6); color: var(--secondary-foreground); .select2-selection__clear { line-height: calc(var(--spacing) * 8.5 - 2px); margin-top: 0; margin-inline-end: calc(var(--spacing) * 2.5); padding-inline: calc(var(--spacing) * 1.5); } } &.select2-selection--multiple .select2-selection__rendered { padding-right: calc(var(--spacing) * 6); .select2-selection__clear { margin: 0; margin-inline-end: calc(var(--spacing) * 2.5); line-height: 28px; padding-inline: calc(var(--spacing) * 1.5); } .select2-selection__choice { line-height: 20px; background-color: var(--muted); border-color: var(--input); display: flex; justify-content: center; align-content: center; gap: 3px; .select2-selection__choice__remove { line-height: 18px; margin: 0; } } } .select2-selection__placeholder { color: var(--muted-foreground); font-size: var(--text-sm); } .select2-selection__arrow { height: calc(var(--spacing) * 8.5 - 2px); right: 6px; background-position: center; background-repeat: no-repeat; background-size: 14px 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239f9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); b { display: none; } } } &.select2-container--open .select2-selection, &.select2-container--focus .select2-selection { border-color: var(--primary) !important; outline: none; box-shadow: none; } &.select2-container--disabled .select2-selection { background-color: var(--input-ro-bg); cursor: not-allowed; .select2-selection__rendered { cursor: not-allowed; } } .select2-dropdown { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; background-color: var(--popover); z-index: 9999; .select2-search { padding: 0; border-bottom: 1px solid var(--border); padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 1); input { border: 0; outline: 0; font-size: var(--text-sm); min-height: 30px; background-color: var(--popover); color: var(--foreground); } } .select2-results__options { display: flex; flex-direction: column; gap: calc(var(--spacing) * 1); padding-inline: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 1); .select2-results__option { padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1.5); border-radius: var(--radius-md); color: var(--foreground); font-size: var(--text-xs); font-family: inherit; &.select2-results__message { text-align: center; color: var(--muted-foreground); } &[aria-selected=true], &.select2-results__option--highlighted { background-color: var(--accent); color: var(--accent-foreground); } } } } &.select2-container--default .select2-search--inline .select2-search__field { margin: 0; } } @layer utilities { .border-destructive { border-color: var(--destructive); } } .product-image-box { width: 300px; height: 300px; object-fit: contain; } .product-image-box > img { width: 100%; height: 100%; object-fit: contain; } .modal-with-image { max-width: 960px; } /* AG Grid — global defaults */ .ag-root-wrapper { border: 0; border-radius: 0; } .ag-header-cell-label, .ag-header-group-cell-label { justify-content: center; } /* Pinned footer rows */ .ag-floating-bottom { border-top: 1px solid var(--ag-footer-border-top); } .ag-floating-bottom .ag-row { background: var(--ag-footer-bg); border-bottom: 1px solid var(--ag-footer-border-bottom); } .ag-floating-bottom .ag-cell { padding-block: 3px; } .ag-floating-bottom .kt-input-sm { height: calc(var(--spacing) * 6) } .ag-cell-cb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .select2-xs .select2-container { font-size: var(--text-xs); .select2-selection { height: 28px; .select2-selection__rendered { line-height: 26px; .select2-selection__clear { line-height: 26px; margin-inline-end: calc(var(--spacing) * 2.5); padding-inline: calc(var(--spacing) * 1.5); } } .select2-selection__arrow { height: 26px; } } } /* Autocomplete — a plain text input with a suggestion panel under it. The panel reuses the Select2 dropdown markup and skin so it matches the Select2 filters sitting beside it. Select2 parks its own panel off-screen (left: -100000px) and places it with JS; here it is anchored to the wrapper instead. */ .kt-autocomplete { position: relative; .select2-container { display: none; position: absolute; inset-inline: 0; top: 100%; margin-top: calc(var(--spacing) * 1); z-index: 9999; } &.kt-autocomplete-open .select2-container { display: block; } .select2-dropdown { position: static; width: 100%; } /* Resolved name, right-aligned inside the input. It only appears once a code resolves — editing the code hides it again — so it never sits under what is being typed. display:block keeps `truncate` working on the overflow. */ [data-ac-name] { display: none; position: absolute; inset-inline-end: calc(var(--spacing) * 3); top: 50%; transform: translateY(-50%); max-width: 70%; font-size: var(--text-xs); pointer-events: none; } &.kt-autocomplete-resolved [data-ac-name] { display: block; } } /* Matches the small tier (.kt-input-sm / .kt-btn-sm = 7 × --spacing). Pair this with .kt-input-sm / .kt-btn-sm; pair .select2-xs (≈ 28px) with .kt-input / .kt-btn / .kt-btn-md. There is no Select2 size below this — both inner line-height and container shrink together. */ .select2-sm .select2-container { font-size: var(--text-xs); &.select2 .select2-selection { height: calc(var(--spacing) * 7); .select2-selection__rendered { line-height: calc(var(--spacing) * 7 - 2px); padding-inline-start: calc(var(--spacing) * 2.5); padding-inline-end: calc(var(--spacing) * 6); .select2-selection__clear { line-height: calc(var(--spacing) * 7 - 2px); margin-inline-end: calc(var(--spacing) * 2.5); padding-inline: calc(var(--spacing) * 1.5); } } .select2-selection__arrow { height: calc(var(--spacing) * 7); } } } #scrollable_content.hris-content-area { padding-block: 0; background: var(--hr-surface-canvas) !important; } #scrollable_content.hris-content-area > main { min-height: 100%; padding: 1rem; } #scrollable_content.hris-content-area main .kt-container-fluid { width: 100%; max-width: none; padding: 0 !important; } @media (width >= 80rem) { #scrollable_content.hris-content-area > main { padding: 1rem; } } @media (width < 48rem) { #scrollable_content.hris-content-area > main { padding: 0.75rem; } } .app-content-frame { min-width: 0; } .drawer-panel:not(.active) { box-shadow: 0 0 0 transparent !important; } /* Footer drawer berisi tepat dua tombol: penuh selebar drawer, tombol pertama (Batal) satu bagian dan tombol kedua (aksi utama) dua bagian. Berlaku di semua halaman, mengalahkan aturan footer per halaman yang menaruh tombol di kanan. Footer dengan tombol lebih dari dua tidak disentuh. Sengaja tidak mengubah display supaya tombol yang disembunyikan tetap tersembunyi. */ .drawer-footer > :first-child:nth-last-child(2), .drawer-footer > :last-child:nth-child(2) { justify-content: center; text-align: center; min-width: 0; } .drawer-footer > :first-child:nth-last-child(2) { flex: 1 1 0%; } .drawer-footer > :last-child:nth-child(2) { flex: 2 1 0%; } .qn-launch { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; padding: calc(var(--spacing) * 2); color: var(--secondary-foreground); background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; } .qn-launch:hover { color: var(--primary); background: var(--background); border-color: var(--border); } .qn-launch-label { font-size: var(--text-xs, 0.75rem); font-weight: 500; } .qn-launch .kbd { min-width: 0; padding: 0 3px; font-size: 9px; } /* ── Lonceng notifikasi (layout/partials/notification_bell.html.twig) ── */ .nt-bell { position: relative; } .nt-bell-count { position: absolute; top: calc(var(--spacing) * 0.5); right: calc(var(--spacing) * 2.5); min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 9999px; background: #dc2626; color: #fff; font-size: 0.625rem; font-weight: 700; line-height: 1.125rem; text-align: center; } .nt-bell-count[hidden] { display: none; } .nt-panel { position: fixed; z-index: 1050; left: calc(var(--sidebar-width, 5.625rem) + 0.5rem); bottom: 1rem; width: 23rem; max-width: calc(100vw - 2rem); max-height: 75vh; display: none; flex-direction: column; background: var(--background); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); } .nt-panel.open { display: flex; } .nt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } .nt-panel-title { font-size: 0.875rem; font-weight: 700; color: var(--foreground); } .nt-link-btn { background: transparent; border: none; padding: 0; font-size: 0.7rem; font-weight: 600; color: var(--primary); cursor: pointer; font-family: inherit; } .nt-link-btn:hover { text-decoration: underline; } .nt-list { overflow-y: auto; flex: 1; } .nt-item { display: flex; gap: 0.625rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; } .nt-item:last-child { border-bottom: none; } .nt-item:hover { background: var(--muted); } .nt-item.unread { background: color-mix(in srgb, var(--primary) 6%, transparent); } .nt-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; margin-top: 0.35rem; flex-shrink: 0; background: transparent; } .nt-item.unread .nt-dot { background: var(--primary); } .nt-item-main { flex: 1; min-width: 0; } .nt-item-title { font-size: 0.75rem; font-weight: 700; color: var(--foreground); } .nt-item-body { font-size: 0.72rem; color: var(--secondary-foreground); line-height: 1.4; margin-top: 0.125rem; overflow-wrap: anywhere; } .nt-item-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-size: 0.65rem; color: var(--muted-foreground, #857d72); margin-top: 0.25rem; } .nt-tag { padding: 0.05rem 0.4rem; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: var(--muted); color: var(--secondary-foreground); } .nt-tag.ok { background: #dcfce7; color: #166534; } .nt-tag.bad { background: #fee2e2; color: #991b1b; } .nt-tag.wait { background: #fef3c7; color: #92400e; } .nt-empty { padding: 2rem 1rem; text-align: center; font-size: 0.75rem; color: var(--secondary-foreground); } .nt-panel-foot { padding: 0.625rem 1rem; border-top: 1px solid var(--border); text-align: center; } .nt-panel-foot a { font-size: 0.72rem; font-weight: 600; color: var(--primary); text-decoration: none; } html.dark .nt-tag.ok { background: rgba(34, 197, 94, 0.15); color: #86efac; } html.dark .nt-tag.bad { background: rgba(239, 68, 68, 0.15); color: #fca5a5; } html.dark .nt-tag.wait { background: rgba(245, 158, 11, 0.15); color: #fcd34d; } .quicknav-results { padding-bottom: calc(var(--spacing) * 1.5); } .quicknav-results.hidden { display: none; } .kt-input.hidden { display: none; } .quicknav-item { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); border-radius: var(--radius); cursor: pointer; } .quicknav-item .qn-label { font-size: var(--text-sm, 0.875rem); font-weight: 500; color: var(--foreground); } .quicknav-item .qn-group { margin-inline-start: calc(var(--spacing) * 2); font-size: var(--text-xs, 0.75rem); color: var(--muted-foreground); } .quicknav-item.is-active, .quicknav-item:hover { background: var(--accent); } .quicknav-empty { padding: calc(var(--spacing) * 3); text-align: center; font-size: var(--text-sm, 0.875rem); color: var(--muted-foreground); } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1px calc(var(--spacing) * 1.5); font-size: 11px; line-height: 1.5; white-space: nowrap; color: var(--foreground); background: var(--muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; } .sg-keys, .quicknav-item .sg-keys { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; } .sg-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 10vh calc(var(--spacing) * 5) calc(var(--spacing) * 5); background: rgb(0 0 0 / 0.45); } .sg-overlay.hidden { display: none; } .sg-panel { display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 80vh; background: var(--background); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.5); } .sg-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 5); border-bottom: 1px solid var(--border); } .sg-title { font-size: var(--text-lg, 1.125rem); font-weight: 600; } .sg-search { flex-shrink: 0; display: flex; align-items: center; gap: calc(var(--spacing) * 2); padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 5); border-bottom: 1px solid var(--border); } .sg-search-ico { flex-shrink: 0; color: var(--muted-foreground); font-size: 1rem; } .sg-search-input { flex: 1 1 auto; min-width: 0; padding: calc(var(--spacing) * 1.5) 0; font-size: var(--text-sm, 0.875rem); color: var(--foreground); background: transparent; border: 0; outline: none; } .sg-search-input::placeholder { color: var(--muted-foreground); } .sg-scroll { flex: 1 1 auto; overflow-y: auto; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); } .sg-body { } .sg-group + .sg-group { margin-top: calc(var(--spacing) * 5); } .sg-group-title { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-xs, 0.75rem); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); } .sg-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 2) 0; border-bottom: 1px dashed var(--border); } .sg-row:last-child { border-bottom: 0; } .sg-row .sg-desc { font-size: var(--text-sm, 0.875rem); color: var(--foreground); } .sg-row .sg-note { font-size: var(--text-xs, 0.75rem); color: var(--muted-foreground); } [data-kt-theme-mode="dark"] .bg-muted, [data-bs-theme="dark"] .bg-muted, html.dark .bg-muted { background-color: #3e3d44 !important; } html.dark, [data-kt-theme-mode="dark"], [data-bs-theme="dark"] { --muted: #3e3d44 !important; } /* KTUI replaces