/*
* themes/theme_ng/theme.css - modern ("NG") re-skin of the default table view
* (table.data, as built by lib/table_view.pm) for layout/main/theme_ng.htm.
*
* CSS-only - no markup or Perl changes. Loaded after TEMPLATE.css (via
* %HEADER_CONTENT% in layout/header.htm) and after the theme_ng bootstrap
* assets, so these rules can safely override both.
*
* Selectors below target the exact classes/ids lib/table_view.pm already
* emits for the default (non-addon) view: table.data, .table_header_container,
* .btn-up/.btn-down/.btn-group/.btn-aggregate (column action buttons),
* .search_tr/.search_container/.search_box (filter row), .record/.record_hl_multi
* (data rows), .table_footer (counter row), .dropdown-menu (column action /
* toggle-columns menus). Icon rendering itself (menuicons.css, light/dark
* class added by set_btn_class()) is left untouched.
*/
/* Color scheme: general.js sets class "light"/"dark" on body, but pages.css defines
".light { font-weight:300 !important }" (utility class) - keep the normal weight on body.
Dark mode rules are in theme_dark.css (injected by general.js). */
body.theme-ng.light, body.theme-ng.dark { font-weight:normal !important; }
/* toolbar delimiter (.btn-delimiter): crisp 1px line instead of the stretched menuicon-240 (exception to keeping the
btn icon styles of menuicons.css - the icon is a 2px line squeezed into 10px width, i.e. blurry); also wins over the
grey icon set inline by set_btn_class_obj ('on-white'), the opacity of disabled buttons and hover */
body .btn.btn-delimiter, body .btn.btn-delimiter:hover { --btn-delimiter-color:#D5D9D5; width:13px !important; margin:0 !important; padding:0 !important; vertical-align:middle; background-color:transparent !important; background-image:linear-gradient(var(--btn-delimiter-color), var(--btn-delimiter-color)) !important; background-size:1px 80% !important; background-position:center !important; background-repeat:no-repeat !important; opacity:1 !important; cursor:default !important; }
/* navigation sidebar (theme_ng.htm, pages.css): background color --theme-color-sidebar (customer color, i.e. set in the
color css next to the --theme-color-* variables; default #2b303b as in pages.css), header and sub menus darkened by
translucent black on top of it, nested sub menus without own background; the sub menu icon boxes are transparent
instead of the fixed pages.css color #2b303b; dark mode: theme_dark.css */
body.theme-ng .page-sidebar { background-color:var(--theme-color-01, #2b303b); }
body.theme-ng .page-sidebar .sidebar-header { background-color:rgba(0,0,0,0.4); border-bottom-color:transparent; }
body.theme-ng .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu { background-color:rgba(0,0,0,0.6); }
body.theme-ng .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu ul.sub-menu { background-color:transparent; }
body.theme-ng .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu > li .icon-thumbnail { background-color:transparent; }
/* pills (labels / status badges): text , optional leading dot with class "pill-dot",
i.e. Live . Every pill-* class includes the base style, class "pill" alone is grey.
colors and synonyms:
pill-red = pill-alert, pill-danger, pill-error pill-green = pill-success, pill-ok
pill-orange = pill-urgent pill-teal = pill-primary
pill-yellow = pill-amber, pill-warning pill-blue = pill-notice, pill-info
pill-purple = pill-highlight, pill-special pill-pink = pill-new
pill-grey = pill-gray, pill-neutral, pill-default, pill-muted
dark mode: theme_dark.css (only the color variables change) */
/* default colors - inherited by the content of a pill table cell */
.pill, [class^="pill-"], [class*=" pill-"] { --pill-bg:#F0F2EF; --pill-fg:#4A524E; --pill-dot:#8D9590; }
/* pill look: on any element - except table cells (i.e. pill class set by column style rules), they stay table cells and
their content (first child, i.e. DIV.column of TABLE_CELL_TYPE DIV) becomes the pill */
:is(.pill, [class^="pill-"], [class*=" pill-"]):not(td, th),
:is(td, th):is(.pill, [class^="pill-"], [class*=" pill-"]) > :first-child { display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; padding:3px 10px; border-radius:999px; background-color:var(--pill-bg); color:var(--pill-fg); font-size:12px; font-weight:500; line-height:1.4; white-space:nowrap; vertical-align:middle; }
:is(td, th):is(.pill, [class^="pill-"], [class*=" pill-"]) > :first-child { width:auto !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
/* in table cells: compact and without growing the line box (negative vertical margin), so the pill is centered like
the text of the other cells and rows with pills keep the row height */
table.data td :is(.pill, [class^="pill-"], [class*=" pill-"]),
table.data td:is(.pill, [class^="pill-"], [class*=" pill-"]) > :first-child { padding-top:2px; padding-bottom:2px; line-height:1.25; margin-top:-2px; margin-bottom:-2px; vertical-align:middle; }
.pill-dot:not(td, th)::before,
:is(td, th).pill-dot > :first-child::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--pill-dot); }
:is(.pill, [class^="pill-"], [class*=" pill-"]) a { color:inherit; font-weight:600; }
.pill-red, .pill-alert, .pill-danger, .pill-error { --pill-bg:#FDF3F0; --pill-fg:#B23A27; --pill-dot:#C2412D; }
.pill-orange, .pill-urgent { --pill-bg:#FDEEE3; --pill-fg:#A04A12; --pill-dot:#E0782B; }
.pill-yellow, .pill-amber, .pill-warning { --pill-bg:#FBF1DE; --pill-fg:#8A5A12; --pill-dot:#C98A1E; }
.pill-green, .pill-success, .pill-ok { --pill-bg:#E5F2E9; --pill-fg:#2D5F3E; --pill-dot:#3E9A63; }
.pill-teal, .pill-primary { --pill-bg:#E8F2F0; --pill-fg:#0F6E64; --pill-dot:#0F6E64; }
.pill-blue, .pill-notice, .pill-info { --pill-bg:#E7F0FA; --pill-fg:#1F5A99; --pill-dot:#3B7BC4; }
.pill-purple, .pill-highlight, .pill-special { --pill-bg:#F1ECF8; --pill-fg:#5E3B8F; --pill-dot:#8A63C2; }
.pill-pink, .pill-new { --pill-bg:#FBEAF1; --pill-fg:#9C2F62; --pill-dot:#D0548E; }
.pill-grey, .pill-gray, .pill-neutral, .pill-default, .pill-muted { --pill-bg:#F0F2EF; --pill-fg:#4A524E; --pill-dot:#8D9590; }
/* buttons for or (i.e. SQLFUNCTION form element: class=button-outline):
button-primary (filled teal), button-outline (teal outline), button-danger (red outline); dark mode: theme_dark.css */
.button-primary, .button-outline, .button-danger { display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; height:38px; margin:0; padding:0 16px; border:1px solid; border-radius:8px; font-family:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer; transition:background-color .12s, border-color .12s; }
.button-primary { background-color:#0F6E64; border-color:#0F6E64; color:#FFFFFF; }
.button-primary:hover { background-color:#0A5A52; border-color:#0A5A52; }
.button-outline { background-color:#FFFFFF; border-color:#0F6E64; color:#0F6E64; }
.button-outline:hover { background-color:#E8F2F0; }
.button-danger { background-color:#FFFFFF; border-color:#F0C8BF; color:#B23A27; }
.button-danger:hover { background-color:#FBEAE6; }
:is(.button-primary, .button-outline, .button-danger):focus-visible { outline:none; box-shadow:0 0 0 3px #D3E9E5; }
:is(.button-primary, .button-outline, .button-danger):is([disabled], [readonly]) { opacity:.5; cursor:default; }
/* Table shell */
table.data { border-collapse:separate !important; border-spacing:0 !important; background:#fff; border:1px solid #e2e5ea; border-radius:12px; box-shadow:0 1px 2px rgba(16,20,28,.04), 0 8px 24px -16px rgba(16,20,28,.18); font-size:13px; color:#1c1f26; opacity:1 !important; }
table.data * { box-sizing:border-box; }
/* Header */
table.data > thead > tr.table_header_title { background:#fbfcfd !important; }
table.data > thead > tr.table_header_title > th { border-bottom:1px solid #e2e5ea; border-left:1px solid #f0f2f5; padding:0; height:38px; font-weight:500; vertical-align:middle; }
table.data > thead > tr.table_header_title > th:first-child { border-left:none; }
table.data .table_header_container { width:100%; }
table.data .table_header_container table { width:100%; border-collapse:collapse; }
table.data .table_header_container td { vertical-align:middle; padding:0 6px; }
table.data .table_header_container td:first-child { text-align:left !important; }
table.data .table_header { border:none; cursor:pointer; text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:#5b6170; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.data th:has(.btn-up.hl) .table_header,
table.data th:has(.btn-down.hl) .table_header { color:#92400e; }
table.data .btn-dots { border-radius:5px; visibility:hidden; }
table.data > thead th:hover .btn-dots { visibility:visible; }
table.data .btn-dots:hover { background-color:#eceef2 !important; opacity:1 !important; }
table.data th .btn.small { width:17px !important; height:17px !important; }
/* column-group header row (TABLE_COLUMN_GROUPS) */
table.data .table_column_group { background:#fef3c7 !important; color:#92400e; font-weight:600; padding:4px 10px; }
/* column toggle ("hidden columns") dropdown launcher in the control column */
table.data > thead th .btn-list { border-radius:5px; }
/* per-column action / toggle-columns dropdown menus */
table.data .dropdown-title { color:#1c1f26 !important; }
table.data .dropdown-menu { background:#fff !important; color:#1c1f26 !important; border:1px solid #e2e5ea; border-radius:10px; box-shadow:0 12px 32px -8px rgba(16,20,28,.22), 0 2px 6px rgba(16,20,28,.06); padding:6px; opacity:1 !important; top:100% !important; }
table.data .dropdown-menu .dropdown-group-label { color:#8b929f !important; border-bottom-color:#eef0f3 !important; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
table.data .dropdown-menu .btn,
table.data .dropdown-menu .btn.light,
table.data .dropdown-menu .btn.dark,
table.data .dropdown-item { color:#1c1f26 !important; border-radius:6px; padding:5px 8px !important; }
table.data .dropdown-item:hover { background:#f4f5f8 !important; filter:none !important; box-shadow:none !important; }
table.data .dropdown-item.selected { background:#f4f5f8 !important; }
table.data .table_button_toggle_column { border-radius:6px; }
table.data .table_button_toggle_column:hover { background:#f4f5f8; }
/* dropdown menus (all .dropdown-menu: lib/dropdown_menu.pm menus, column menus, header dropdowns): white card with border,
radius and soft shadow instead of the theme colored box with hard shadow (TEMPLATE.css); items as rounded rows with a
light hover instead of the inverting filter; position / display / size are left to TEMPLATE.css and the scripts */
body .dropdown-menu { background:#FFFFFF !important; color:#1c1f26 !important; border:1px solid #e2e5ea; border-radius:10px; box-shadow:0 12px 32px -8px rgba(16,20,28,.22), 0 2px 6px rgba(16,20,28,.06); padding:6px; opacity:1 !important; font-size:13px; }
body .dropdown-menu .dropdown-group { margin:4px 6px; }
body .dropdown-menu .dropdown-group-label { margin-bottom:4px; padding:4px 8px; border-bottom:1px solid #eef0f3 !important; color:#8b929f !important; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
body .dropdown-menu .dropdown-item { display:block; box-sizing:border-box; width:100%; min-height:28px; margin:0; padding:5px 8px !important; border:none; border-radius:6px; background:transparent !important; color:#1c1f26 !important; font-family:inherit; font-size:13px; line-height:18px; text-align:left; opacity:1; transition:background-color .1s; }
body .dropdown-menu .dropdown-item:is(:hover, :focus, :focus-visible) { background:#f4f5f8 !important; filter:none !important; box-shadow:none !important; outline:none; opacity:1; }
body .dropdown-menu .dropdown-item.selected { background:#eef1f6 !important; font-weight:600; filter:none !important; }
body .dropdown-menu .dropdown-divider { margin:4px 0; border-top-color:#eef0f3; }
/* filter / search row */
table.data .search_tr { background:#fffdf7; }
table.data .search_tr > td { border-bottom:1px solid #f4f0e6; border-left:1px solid #f7f2e6; padding:4px 6px; }
table.data .search_tr_or { color:#a1793a; font-style:normal; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
table.data .search_container { background:#fff; border:1px solid #e6e8ed; border-radius:6px; }
table.data .search_container_readonly { background:#f4f5f8; border:1px solid #e6e8ed; border-radius:6px; }
table.data .search_container:has(.search_box:not([value=""])) { background:#fffaf0; border-color:#e5c78f; }
table.data .search_box { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; padding:4px 8px !important; }
table.data .search_box:focus { box-shadow:inset 0 0 0 2px rgba(180,83,9,.25) !important; }
/* data rows */
/* Row backgrounds are kept TRANSLUCENT (like the original rgba(...,0.7)
zebra in TEMPLATE.css) and are set on the row only - never on the cells.
That is what makes the per-column marker work: the rainbow lives on
by record_formular.pm; --ng-card-gap is also read by the column layout script */
body.v_record, body.v_record.margin-medium { --ng-card-gap:16px; --ng-card-head-py:12px; --ng-card-pad-x:18px; --ng-card-pad-top:10px; --ng-card-pad-bottom:14px; --ng-row-pad:5px; }
body.v_record.margin-none { --ng-card-gap:4px; --ng-card-head-py:8px; --ng-card-pad-x:12px; --ng-card-pad-top:4px; --ng-card-pad-bottom:6px; --ng-row-pad:2px; }
body.v_record.margin-low { --ng-card-gap:8px; --ng-card-head-py:10px; --ng-card-pad-x:14px; --ng-card-pad-top:6px; --ng-card-pad-bottom:10px; --ng-row-pad:3px; }
body.v_record.margin-high { --ng-card-gap:24px; --ng-card-head-py:16px; --ng-card-pad-x:24px; --ng-card-pad-top:14px; --ng-card-pad-bottom:20px; --ng-row-pad:8px; }
body.v_record input, body.v_record select, body.v_record textarea, body.v_record button { font-family:inherit; }
body.v_record .form_content a, body.v_record .form_reference { color:var(--ng-primary); }
/* header: title row */
body.v_record .form_header { background:var(--ng-surface) !important; border-bottom:1px solid var(--ng-border); }
body.v_record .form_header .toolbar { background:var(--ng-surface) !important; border-bottom:none; padding:12px 24px 8px; color:var(--ng-ink); }
body.v_record .form_title { padding-right:16px; color:var(--ng-ink); }
/* two-line title bar: table name + record id on top (small), record title below (large); table name stays large when there is no record title */
body.v_record .form_title > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v_record .form_title_table { font-size:12px; line-height:1.4; letter-spacing:.02em; color:var(--ng-ink-5); }
body.v_record .form_title_row { display:flex; align-items:center; gap:10px; min-width:0; margin-top:2px; }
body.v_record .form_title_record { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--ng-ink); }
body.v_record .form_title_record:empty { display:none; }
body.v_record .form_title:not(:has(.form_title_record)) .form_title_table,
body.v_record .form_title:has(.form_title_record:empty) .form_title_table { font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--ng-ink); }
/* record lock pill next to the record title (lock-own: exclusively opened for you, lock-other: locked by another user) */
body.v_record .form_lock_info { flex:0 1 auto; min-width:0; display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; line-height:1.4; letter-spacing:normal; white-space:nowrap; }
body.v_record .form_lock_info svg { flex:none; }
body.v_record .form_lock_info > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.v_record .form_lock_info.lock-own { background:var(--ng-warn-bg); color:var(--ng-warn-text); }
body.v_record .form_lock_info.lock-other { background:var(--ng-err-bg); color:var(--ng-err-text); }
body.v_record .form_lock_info a { color:inherit; font-weight:600; text-decoration:none; }
body.v_record .form_lock_info a:hover { text-decoration:underline; }
body.v_record .form_header .toolbar .btn[class*="btn-"]:not(.btn-delimiter) { border-radius:7px; margin:0; vertical-align:middle; }
body.v_record .form_header .toolbar .btn[class*="btn-"]:not(.btn-delimiter):hover { background-color:var(--ng-hover) !important; opacity:1; }
/* header: page tabs (status dots come from page_set_title_color_required(), only with FORM_PAGE_NAV_COLORED_MODE) */
body.v_record .form_header .form_page_navigation { background:var(--ng-surface) !important; border-bottom:none; padding:0 18px; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; font-weight:normal; line-height:normal; }
body.v_record .form_header .form_page_navigation span[name=page_title] { display:inline-flex; align-items:center; gap:7px; padding:10px 10px 12px; margin:0 !important; font-size:14px; font-weight:500; color:var(--ng-ink-4) !important; background-color:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; opacity:1 !important; cursor:pointer; white-space:nowrap; vertical-align:bottom; }
body.v_record .form_header .form_page_navigation span[name=page_title]:hover { color:var(--ng-ink) !important; }
body.v_record .form_header .form_page_navigation span.form_page_nav_item_selected { color:var(--ng-primary) !important; font-weight:600; box-shadow:inset 0 -2px 0 var(--ng-primary) !important; }
body.v_record .form_header .form_page_navigation span.page_toggle_req { padding:10px 12px 12px; }
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode]:not([data-mode=""])::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--ng-opt-dot); }
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode][data-needed=green]::before { background:var(--ng-ok-dot); }
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode][data-needed=yellow]::before,
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode][data-needed=red]::before { background:var(--ng-warn-dot); }
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode][data-required=green]::before { background:var(--ng-ok-dot); }
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode][data-required=yellow]::before,
body.v_record .form_page_navigation span[name=page_title]:not(.page_toggle_req)[data-mode][data-required=red]::before { background:var(--ng-warn-dot); }
/* hint / info boxes */
body.v_record .form_info { margin:12px 24px; padding:14px 18px; border-radius:12px; background:var(--ng-primary-tint); color:var(--ng-info-text); font-size:14px; line-height:1.45; }
body.v_record .form_info.multiple { background:var(--ng-warn-bg); color:var(--ng-warn-text); }
/* content area */
body.v_record .form_content { box-sizing:border-box; padding:16px 16px 8px; color:var(--ng-ink); font-size:14px; line-height:1.45; }
body.v_record .form_content input[type=checkbox], body.v_record .form_content input[type=radio] { accent-color:var(--ng-primary); }
/* section cards */
/* card layout: position and width come from the column layout script in record_formular.pm (masonry_refresh);
without it (mobile, FORMULAR_USE_MASONRY = 0) the cards are stacked in full width */
body.v_record .form_content .form_section_container.noresize { width:auto !important; float:none !important; margin:0 0 var(--ng-card-gap) !important; }
body.v_record .form_content .form_section_container { background:var(--ng-surface); border:1px solid var(--ng-border); border-radius:12px; padding:0; color:var(--ng-ink); }
body.v_record .form_content .form_section_container > div:not(.form_section_title) { padding:var(--ng-card-pad-top) var(--ng-card-pad-x) var(--ng-card-pad-bottom); }
body.v_record .form_content .form_section_title { margin:0; padding:var(--ng-card-head-py) calc(var(--ng-card-pad-x) - 6px) var(--ng-card-head-py) var(--ng-card-pad-x); cursor:pointer; }
body.v_record .form_content .form_section_title td:first-child { font-size:15px; font-weight:600; color:var(--ng-ink); letter-spacing:-.005em; }
body.v_record .form_content .form_section_toggle { margin:0; padding:0; }
body.v_record .form_content .form_section_toggle .btn { opacity:.55; }
body.v_record .form_content .form_section_toggle .btn:hover { opacity:1; }
body.v_record:not(.v_sqlfunc) .form_content .form_section_title + * { border-top:1px solid var(--ng-border-soft); padding-top:calc(var(--ng-card-pad-top) + 4px); }
/* tabs inside a section */
body.v_record .form_content .form_section_tab_nav { padding:0 calc(var(--ng-card-pad-x) - 6px) !important; white-space:nowrap; overflow-x:auto; scrollbar-width:none; cursor:default; }
body.v_record .form_content .form_section_tab { display:inline-block; padding:var(--ng-card-head-py) 10px; margin:0; background:transparent; color:var(--ng-ink-4); font-size:14px; font-weight:500; cursor:pointer; }
body.v_record .form_content .form_section_tab:hover { color:var(--ng-ink); }
body.v_record .form_content .form_section_tab.active { background:transparent; color:var(--ng-primary); font-weight:600; box-shadow:inset 0 -2px 0 var(--ng-primary); }
/* field rows: label | db actions | element */
body.v_record table.formdata > tbody > tr > td { padding:var(--ng-row-pad) 0; }
body.v_record table.formdata > tbody > tr.formdata_dummy > td { padding:0; }
body.v_record table.formdata td.form_label { padding:calc(var(--ng-row-pad) + 8px) 12px var(--ng-row-pad) 0; color:var(--ng-ink-3); font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
body.v_record table.formdata td.form_label.col1 { padding:calc(var(--ng-row-pad) * 2) 0 2px; }
/* db actions (refresh/table/add/edit) of reference columns: top of the row, centered on the first line of the 38px element (TEMPLATE.css: top:-4px) */
body.v_record table.formdata td:not(.form_label) > .form_db_actions { top:7px; }
/* db actions popup (shown on hover): floating card; padding + border offset by top so its buttons stay level with the btn-list trigger */
body.v_record .form_db_actions > div { top:-5px; padding:4px; background-color:var(--ng-input-bg) !important; border:1px solid var(--ng-border); border-radius:10px; box-shadow:0 8px 24px -10px rgba(16,20,28,.25), 0 1px 3px rgba(16,20,28,.06); }
body.v_record .form_db_actions > div > .btn { border-radius:6px; margin:0 1px; vertical-align:middle; }
body.v_record .form_db_actions > div > .btn:hover { background-color:var(--ng-hover) !important; opacity:1; }
body.v_record .form_label .required { font-weight:inherit; text-decoration:none; }
body.v_record .form_label .required::after { content:" *"; color:var(--ng-err); font-weight:600; }
body.v_record .form_label .needed { font-weight:inherit; }
body.v_record .form_label .required.empty, body.v_record .form_label .wrong { color:var(--ng-err-text) !important; }
body.v_record .form_label .needed.empty { color:var(--ng-warn-text) !important; }
body.v_record .form_column_info { padding:0 0 6px !important; font-style:normal; font-size:13px; color:var(--ng-ink-5); }
body.v_record .form_sub_title { margin:14px 0 4px; padding:0 0 6px; border-bottom:1px solid var(--ng-border-soft); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ng-ink-5); }
body.v_record .form_hr { height:0; margin:8px 0; border-top:1px solid var(--ng-border-soft); }
/* inputs (inline padding/width from form_element.pm are overridden or kept box-sized) */
body.v_record #form_content_inner td.form_element :is(input.form_text, select.form_select, textarea.form_textarea):not(.nostyle),
body.v_record #form_content_inner td.form_element > input:is([type=text], [type=input], [type=number], [type=email], [type=url], [type=tel], [type=password], [type=date], [type=time], [type=datetime-local]) { box-sizing:border-box; height:38px; padding:0 12px !important; border:1px solid var(--ng-border-input); border-radius:8px; background:var(--ng-input-bg); color:var(--ng-ink); font-size:14px; outline:none; transition:border-color .12s, box-shadow .12s; }
body.v_record #form_content_inner td.form_element select.form_select:not(.nostyle) { padding:0 8px !important; }
body.v_record #form_content_inner td.form_element select.form_select[multiple]:not(.nostyle) { height:auto; padding:6px 8px !important; }
body.v_record #form_content_inner td.form_element textarea.form_textarea:not(.nostyle) { height:auto; min-height:76px; padding:8px 12px !important; line-height:1.45; }
body.v_record #form_content_inner td.form_element :is(input, select, textarea):not(.btn):not([type=checkbox]):not([type=radio]):focus { border-color:var(--ng-primary) !important; box-shadow:0 0 0 3px var(--ng-focus) !important; outline:none; }
body.v_record #form_content_inner td.form_element :is(input, select, textarea):not(.btn):is([readonly], [disabled]) { background:var(--ng-readonly); color:var(--ng-ink-3); border-color:var(--ng-border); }
/* field rules carry #form_content_inner: TEMPLATE.css sizes direct children of .form_element with !important and up to
specificity 0,5,1 (i.e. inputs calc(100% - 10px), selects 100%, padding 4px) - one id outweighs them inside the formular */
/* uniform element width: form_element.pm and addons set different inline widths per type (text calc(99% - 2px), select
calc(99% + 4px), table calc(100% + 1px)) in a right-aligned cell - so the elements had different left/right edges.
All fill the element cell now (composite controls with calc(79% - 2px) / .nostyle are left alone) */
body.v_record #form_content_inner td.form_element :is(input, select, textarea, table, div):not(.nostyle):is([style*="width:calc(99%"], [style*="width:calc(100% + 1px)"]),
body.v_record #form_content_inner td.form_element > .history_log_dialog { width:100% !important; box-sizing:border-box; }
/* element cells without input field (plain text, checkboxes, pills): same top padding as the label (label padding is
aligned to the 38px input fields) */
body.v_record #form_content_inner table.formdata td.form_element.col2:not(:has(:is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea, .input))) { padding-top:calc(var(--ng-row-pad) + 8px); }
/* empty required field: red tint on the element (two-column and one-column layout) */
body.v_record #form_content_inner table.formdata tr:has(> td.form_label .required.empty) > td.form_element :is(input.form_text, select.form_select, textarea.form_textarea):not(.nostyle),
body.v_record #form_content_inner table.formdata tr:has(> td.form_label .required.empty) + tr > td.form_element :is(input.form_text, select.form_select, textarea.form_textarea):not(.nostyle) { border-color:var(--ng-err-border); background:var(--ng-err-bg); }
/* table info and record lock banners */
body.v_record .form_content .form_section_container.form_table_info { background:var(--ng-primary-tint); border-color:transparent !important; color:var(--ng-info-text); }
body.v_record .form_content .form_section_container.locked1 { background:var(--ng-err-bg) !important; border-color:var(--ng-err-border) !important; color:var(--ng-err-text) !important; font-weight:500; }
body.v_record .form_content .form_section_container.locked2,
body.v_record .form_content .form_section_container.unlocked { background:var(--ng-ok-bg) !important; border-color:transparent !important; color:var(--ng-ok-text) !important; font-weight:500; }
body.v_record .form_content .form_section_container:is(.form_table_info, .locked1, .locked2, .unlocked) > table.formdata > tbody > tr > td { padding:var(--ng-card-pad-top) var(--ng-card-pad-x); vertical-align:middle; }
/* footer action bar */
body.v_record .form_footer, body.v_record .form_footer.navbar { box-sizing:border-box; background:var(--ng-surface) !important; border:none; border-top:1px solid var(--ng-border); border-radius:0; margin:0; min-height:0; padding:10px 24px; color:var(--ng-ink); box-shadow:none; }
body.v_record .form_footer .bg { background:transparent !important; color:var(--ng-ink-3); }
body.v_record .form_footer .form_page_info { display:inline-block; min-width:70px; margin:0 4px 0 0; text-align:center; vertical-align:middle; font-size:13px; white-space:nowrap; color:var(--ng-ink-3); }
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter) { border-radius:8px; margin:0 0 0 6px; vertical-align:middle; }
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter):hover { background-color:var(--ng-hover) !important; opacity:1; }
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter)#button_page_back, body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter)#button_page_next { margin:0 4px 0 0; border:1px solid var(--ng-border-input); background-color:var(--ng-surface); }
/* delete: icon (png) and caption tinted red via filter; the hover background is a plain color the filter turns into light red */
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter).btn-delete { filter:var(--ng-danger-filter); }
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter).btn-delete:hover { background-color:var(--ng-danger-hover-src) !important; opacity:1; }
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter).btn-save { margin-left:10px; background-color:var(--ng-primary) !important; }
body.v_record .form_footer .btn[class*="btn-"]:not(.btn-delimiter).btn-save:hover { background-color:var(--ng-primary-hover) !important; }
/* lock button: same colors as the lock pill in the title bar (icon is generated in the text color, class "color") */
body.v_record .form_footer input.btn.btn-locked.locked1, body.v_record .form_footer input.btn.btn-locked.locked1:hover { color:var(--ng-err-text) !important; background-color:var(--ng-err-bg) !important; }
body.v_record .form_footer input.btn.btn-locked.locked2, body.v_record .form_footer input.btn.btn-locked.locked2:hover { color:var(--ng-warn-text) !important; background-color:var(--ng-warn-bg) !important; }
/* captions (class withcaption from menuicons.css) - only text and border colors */
body.v_record .form_footer .btn.withcaption { font-weight:600; }
body.v_record .form_footer .btn.withcaption.btn-save { color:#FFFFFF; border-color:var(--ng-primary); }
body.v_record .form_footer .btn.withcaption.btn-save:hover { border-color:var(--ng-primary-hover); }
body.v_record .form_footer .btn.withcaption.btn-delete { color:var(--ng-danger-caption); border-color:transparent; }
/* embedded tables (DB4MCREATOR_TABLE, loaded by ajax): cell margin of user preference "theme_margin" from the body class
(the table view sets margin- on table.data itself, see TEMPLATE.css - same values) */
body.v_record.margin-none table.data > tbody > tr > td { padding-top:0px !important; padding-bottom:0px !important; vertical-align:middle; }
body.v_record.margin-low table.data > tbody > tr > td { padding-top:5px !important; padding-bottom:5px !important; vertical-align:middle; }
body.v_record.margin-medium table.data > tbody > tr > td { padding-top:0px !important; padding-bottom:0px !important; vertical-align:middle; }
body.v_record.margin-high table.data > tbody > tr > td { padding-top:15px !important; padding-bottom:15px !important; vertical-align:middle; }
/* HISTORY_LOG_DIALOG form element: last change (date, user) as read-only field + button opening the history */
body.v_record .history_log_dialog { display:flex; align-items:center; gap:10px; box-sizing:border-box; width:100%; min-height:38px; margin:0; padding:0 6px 0 12px; border:1px solid var(--ng-border); border-radius:8px; background:var(--ng-readonly); color:var(--ng-ink-3); font-size:14px; text-align:left; }
body.v_record .history_log_last { flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:10px; overflow:hidden; white-space:nowrap; }
body.v_record .history_log_last .history_log_date { flex:none; font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ng-ink); }
body.v_record .history_log_last .history_log_user { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.v_record .history_log_empty { color:var(--ng-ink-6); }
body.v_record .history_log_dialog .btn { flex:none; border-radius:6px; }
body.v_record .history_log_dialog .btn:hover { background-color:var(--ng-hover) !important; opacity:1; }
/* HISTORY_LOG_DIALOG overlay (addon/ajax/db4mcreator_overlay_history_log.pm): list of changes */
body.v_record #overlay-content .history_log_table { width:100%; min-width:min(640px, calc(100vw - 120px)); border-collapse:separate; border-spacing:0; border:1px solid var(--ng-border); border-radius:10px; overflow:hidden; background:var(--ng-surface); color:var(--ng-ink); font-size:13px; text-align:left; }
body.v_record #overlay-content .history_log_table th { padding:9px 12px; background:var(--ng-bg); border-bottom:1px solid var(--ng-border); color:var(--ng-ink-5); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
body.v_record #overlay-content .history_log_table td { padding:8px 12px; border-bottom:1px solid var(--ng-border-soft); vertical-align:middle; }
body.v_record #overlay-content .history_log_table tbody tr:last-child td { border-bottom:none; }
body.v_record #overlay-content .history_log_table tbody tr:hover td { background:var(--ng-hover); }
body.v_record #overlay-content .history_log_table :is(.history_log_id, .history_log_date) { font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
body.v_record #overlay-content .history_log_table .history_log_id { color:var(--ng-ink-5); }
body.v_record #overlay-content .history_log_table .history_log_details { width:1px; text-align:right; }
body.v_record #overlay-content .history_log_table .history_log_details .btn { border-radius:6px; }
body.v_record .history_log_op_label { display:inline-block; padding:2px 9px; border-radius:999px; background:var(--ng-hover); color:var(--ng-ink-3); font-size:11.5px; font-weight:600; letter-spacing:.03em; white-space:nowrap; }
body.v_record .history_log_op_label.op-insert { background:var(--ng-ok-bg); color:var(--ng-ok-text); }
body.v_record .history_log_op_label.op-update { background:var(--ng-primary-tint); color:var(--ng-primary); }
body.v_record .history_log_op_label.op-delete { background:var(--ng-err-bg); color:var(--ng-err-text); }
/* ==========================================================================
* Admin modules (lib/admin.pm, body.v_admin) - header only
*
* Same look as the record formular header: white title bar with a bottom border, large semibold title, rounded
* toolbar buttons with a light hover, underlined page tabs (selected tab in the primary color) and the description
* as a tinted info line. The theme colored backgrounds of the markup (.bg / .bg_force on the header, the icon cell
* and the tab bar in a frame, #3A3A3A tab bar of TEMPLATE.css) are overridden. Colors are tokens on body.v_admin,
* theme_dark.css only redefines the tokens.
* ========================================================================== */
body.v_admin {
--na-primary:#0F6E64; --na-primary-tint:#E8F2F0; --na-info-text:#1F3B37;
--na-ink:#1B1F1D; --na-ink-4:#5E6661; --na-ink-5:#6A726D;
--na-border:#E3E6E2; --na-surface:#FFFFFF; --na-hover:#F0F2EF;
--na-icon-bg:var(--theme-color-04); --na-icon-bg-hover:var(--theme-color-02);
--na-panel:#FAFAF9; --na-sel-bg:var(--theme-color-11); --na-sel-text:var(--theme-color-02);
--na-ink-3:#4A524E; --na-border-soft:#EEF0ED; --na-adv-text:#B23A27;
--na-th-bg:#FBFCFB; --na-row-hover:#F7F8F6;
--ng-bg:#F4F5F2;
background-color:var(--ng-bg) !important;
}
/* large rotated module icon in the lower right corner of the page (admin.pm: .admin_bgicon) - not used in this theme */
body.v_admin .admin_bgicon { display:none !important; }
body.v_admin .form_header, body.v_admin .form_header.bg, body.v_admin .form_header.bg_force { background:var(--na-surface) !important; border-bottom:1px solid var(--na-border); color:var(--na-ink); font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body.v_admin #form_header_inner { padding:12px 24px 8px; }
/* module icon: colored rounded tile (padding from class btn-padding-20), icon size 25x25 on all admin pages (dashboard: class "large" from admin.pm), light icon variant via set_btn_class, it sees the tile color */
body.v_admin #form_header_inner td.bg { width:auto !important; padding:0 12px 0 0 !important; background:transparent !important; }
body.v_admin #form_header_inner td.bg > .btn { width:25px !important; height:25px !important; border-radius:8px; background-color:var(--na-icon-bg) !important; background-size:25px !important; vertical-align:middle; }
/* title */
body.v_admin #form_header_inner .form_title { padding:0 16px 0 0 !important; color:var(--na-ink); }
/* two-line title like the record formular: "Adminpanel" / "Settings" small on top, caption of the addon large below;
dashboard (no addon caption): the top line is shown large */
body.v_admin #form_header_inner .form_title > div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v_admin #form_header_inner .form_title_table { font-size:12px; line-height:1.4; letter-spacing:.02em; color:var(--na-ink-5); }
body.v_admin #form_header_inner .form_title_row { display:flex; align-items:center; gap:10px; min-width:0; margin-top:2px; }
body.v_admin #form_header_inner .form_title_record { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--na-ink); }
body.v_admin #form_header_inner .form_title_row:has(> .form_title_record:empty) { display:none; }
body.v_admin #form_header_inner .form_title:has(.form_title_record:empty) .form_title_table { font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--na-ink); }
/* admin selection dropdown: icon only, the addon caption is shown in the title */
body.v_admin #form_header_inner .dropdown.admin > .dropdown-title { display:none !important; }
/* toolbar buttons (selection dropdowns, toolbar left / right) */
body.v_admin #form_header_inner .btn[class*="btn-"]:not(.btn-delimiter) { border-radius:7px; vertical-align:middle; }
body.v_admin #form_header_inner .btn[class*="btn-"]:not(.btn-delimiter):not([disabled]):hover { background-color:var(--na-hover) !important; opacity:1; }
body.v_admin #form_header_inner td.bg > .btn[class*="btn-"]:not(.btn-delimiter):not([disabled]):hover { background-color:var(--na-icon-bg-hover) !important; }
/* page tabs */
body.v_admin .form_header .form_page_navigation, body.v_admin .form_header .form_page_navigation.bg { background:var(--na-surface) !important; border-bottom:none; padding:0 18px; color:var(--na-ink); font-weight:normal; line-height:normal; }
body.v_admin .form_header .form_page_navigation :is(.form_page_nav_item, .form_page_nav_item_selected) { display:inline-flex; align-items:center; gap:7px; padding:10px 10px 12px; margin:0 !important; font-size:14px; font-weight:500; color:var(--na-ink-4) !important; background-color:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; opacity:1 !important; cursor:pointer; white-space:nowrap; vertical-align:bottom; }
body.v_admin .form_header .form_page_navigation .form_page_nav_item:hover { color:var(--na-ink) !important; }
body.v_admin .form_header .form_page_navigation .form_page_nav_item_selected { color:var(--na-primary) !important; font-weight:600; box-shadow:inset 0 -2px 0 var(--na-primary) !important; }
body.v_admin .form_header .form_page_navigation .form_page_nav_item_counter { width:auto; min-width:18px; height:18px; margin-left:0; padding:0 5px; box-sizing:border-box; border-radius:999px; background-color:var(--na-hover); color:var(--na-ink-4); font-size:11.5px; font-weight:600; line-height:18px; }
body.v_admin .form_header .form_page_navigation .form_page_nav_item_selected .form_page_nav_item_counter { background-color:var(--na-primary-tint); color:var(--na-primary); }
body.v_admin .form_header .form_page_navigation #admin_tab_switch { margin-top:8px !important; border-radius:6px; }
/* description */
body.v_admin .form_header .form_header_info { margin:0; padding:10px 24px; background:var(--na-primary-tint); border-top:1px solid var(--na-border); color:var(--na-info-text); font-size:14px; line-height:1.45; }
/* section menu on the left (.tab_section_menu: title with collapse toggle and search box from admin.js, links to the
sections - .properties_toggle > a; other modules: tables, trees, selects, sortable lists): light panel with a right
border instead of the dark translucent box, uppercase title, search field with magnifier, rounded rows, selected row
tinted in the theme color. Width stays 230px in total (.tab_section_container margin, collapse animation) */
body.v_admin .tab_section_menu { box-sizing:border-box; width:230px; padding:14px 10px; background:var(--na-panel) !important; border-right:1px solid var(--na-border); color:var(--na-ink); font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
body.v_admin .tab_section_menu:hover { border-right:1px solid var(--na-border); }
body.v_admin .tab_section_menu, body.v_admin .tab_section_menu * { color:var(--na-ink); }
body.v_admin .tab_section_menu .form_section_title { min-height:26px; margin:0 0 10px; padding:0 0 0 8px; border:none !important; font-size:11.5px; font-weight:600; line-height:26px; letter-spacing:.06em; text-transform:uppercase; color:var(--na-ink-5) !important; cursor:default; }
body.v_admin .tab_section_menu .form_section_title ~ .form_section_title { margin-top:16px; }
body.v_admin .tab_section_menu .tab_section_menu_toggle { margin:0 !important; border-radius:6px; vertical-align:middle; }
body.v_admin .tab_section_menu .tab_section_menu_toggle:hover { background-color:var(--na-hover) !important; opacity:1; }
/* search box */
body.v_admin .tab_section_menu input.searcher { box-sizing:border-box; width:100%; height:36px; margin:0 0 12px; padding:0 10px 0 32px; border:1px solid var(--na-border) !important; border-radius:8px; background:var(--na-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A726D' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 10px center / 15px !important; color:var(--na-ink); font-family:inherit; font-size:13.5px; outline:none; transition:border-color .12s, box-shadow .12s; }
body.v_admin .tab_section_menu input.searcher::placeholder { color:var(--na-ink-5) !important; }
body.v_admin .tab_section_menu input.searcher:focus { border-color:var(--na-sel-text) !important; box-shadow:0 0 0 3px var(--na-sel-bg); }
/* section links */
body.v_admin .tab_section_menu .properties_toggle { margin:0 0 2px !important; border-radius:6px; background:transparent !important; }
body.v_admin .tab_section_menu .properties_toggle:hover { background:var(--na-hover) !important; }
body.v_admin .tab_section_menu .properties_toggle_selected, body.v_admin .tab_section_menu .properties_toggle_selected:hover { background:var(--na-sel-bg) !important; }
body.v_admin .tab_section_menu a { padding:7px 10px; border-radius:6px; font-size:14px; line-height:20px; color:var(--na-ink); text-decoration:none; }
body.v_admin .tab_section_menu .properties_toggle_selected, body.v_admin .tab_section_menu .properties_toggle_selected * { color:var(--na-sel-text) !important; font-weight:600; }
body.v_admin .tab_section_menu .properties_toggle_inner { padding:7px 10px; font-size:14px; }
/* other menu contents: inputs, selects, sortable / draggable entries */
body.v_admin .tab_section_menu :is(.input:not(.input-force), input[type=text]:not(.searcher), select) { color:var(--na-ink); }
body.v_admin .tab_section_menu input[type=checkbox] { accent-color:var(--na-sel-text); }
body.v_admin .tab_section_menu :is(.ui-sortable > *, .ui-draggable) { border-radius:6px; background:var(--na-hover) !important; }
body.v_admin .tab_section_menu :is(.ui-sortable > *, .ui-draggable) ::placeholder { color:var(--na-ink-5); }
/* configuration sections (lib/admin_global_config.pm: .admin_config_sections > .admin_config_section > title + table):
one card per section like the form_section_container cards of the record formular; sections with only advanced
options (.admin_config_adv, shown by the wrench toggle) keep their red title */
body.v_admin .tab_section_container:has(> .admin_config_sections) { padding:16px 20px 25px; }
body.v_admin .admin_config_section { margin:0 0 16px; background:var(--na-surface); border:1px solid var(--na-border); border-radius:12px; color:var(--na-ink); font-size:14px; line-height:1.45; }
body.v_admin .admin_config_section.admin_config_adv { color:var(--na-ink); }
/* tab content: space below for the fixed bottom toolbar (button bar plus some air), so the last rows are not hidden */
body.v_admin .tab_container_inner { padding-bottom:90px; }
/* section titles of all admin pages (except the section menu on the left, see above): like the titles of the config cards
(TEMPLATE.css: .v_admin .form_section_title:last-child has a theme colored bottom line - replaced by the soft line) */
body.v_admin .form_section_title:not(.tab_section_menu .form_section_title) { margin:0; padding:12px 18px; border-bottom:1px solid var(--na-border-soft); font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-.005em; color:var(--na-ink); cursor:default; }
body.v_admin .admin_config_section.admin_config_adv > .form_section_title { color:var(--na-adv-text); }
body.v_admin .admin_config_section > table.admin_config_table { border-collapse:separate; border-spacing:0; padding:8px 10px 12px; }
body.v_admin .admin_config_section > table.admin_config_table > tbody > tr > td { padding:6px 8px; color:var(--na-ink-3); }
body.v_admin .admin_config_section > table.admin_config_table > tbody > tr > td:first-child { padding-right:0; }
body.v_admin .admin_config_section > table.admin_config_table > tbody > tr > td.form_element { color:var(--na-ink); }
body.v_admin .admin_config_section > table.admin_config_table > tbody > tr.admin_config_adv > td:not(.form_element) { color:var(--na-adv-text); }
body.v_admin .admin_config_section input[type=checkbox] { accent-color:var(--na-sel-text); }
/* data tables of the admin addons (table.data - card shell from the table view rules above): header cells (TH.bg in
the first row or in THEAD) light with small uppercase captions instead of the theme colored bar, compact cells with
thin row lines and a light row hover, inputs / selects (borderless by TEMPLATE.css) get a border on hover / focus */
body.v_admin table.data { font-size:13px; color:var(--na-ink); }
body.v_admin table.data th, body.v_admin table.data th.bg { padding:9px 10px !important; background:var(--na-th-bg) !important; border-bottom:1px solid var(--na-border); color:var(--na-ink-5) !important; font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; text-align:left; white-space:nowrap; vertical-align:middle; opacity:1; }
body.v_admin table.data tr:first-child > th:first-child { border-top-left-radius:11px; }
body.v_admin table.data tr:first-child > th:last-child { border-top-right-radius:11px; }
body.v_admin table.data > tbody > tr > td { padding:6px 10px; border-bottom:1px solid var(--na-border-soft); vertical-align:middle; }
body.v_admin table.data > tbody > tr:last-child > td { border-bottom:none; }
body.v_admin table.data > tbody > tr:not(:has(> th)):hover > td { background:var(--na-row-hover); }
body.v_admin table.data td :is(input:not(.btn):not([type=checkbox]):not([type=radio]):not([type=hidden]), .input:not(.input-force), select) { box-sizing:border-box; padding:4px 6px; border:1px solid transparent !important; border-radius:6px; background:transparent; color:var(--na-ink); font-family:inherit; font-size:13px; outline:none; transition:border-color .12s, background-color .12s, box-shadow .12s; }
body.v_admin table.data td :is(input:not(.btn):not([type=checkbox]):not([type=radio]):not([type=hidden]), .input:not(.input-force), select):hover { border-color:var(--na-border) !important; background:var(--na-surface); }
body.v_admin table.data td :is(input:not(.btn):not([type=checkbox]):not([type=radio]):not([type=hidden]), .input:not(.input-force), select):focus { border-color:var(--na-sel-text) !important; background:var(--na-surface); box-shadow:0 0 0 3px var(--na-sel-bg); }
body.v_admin table.data td :is(input, select):is([disabled], [readonly]):hover { border-color:transparent !important; background:transparent; }
body.v_admin table.data input[type=checkbox], body.v_admin table.data input[type=radio] { accent-color:var(--na-sel-text); }
body.v_admin table.data td .btn[class*="btn-"]:not(.btn-delimiter) { border-radius:5px; }
body.v_admin table.data td .btn[class*="btn-"]:not(.btn-delimiter):not([disabled]):hover { background-color:var(--na-hover) !important; opacity:1; }
/* ==========================================================================
* Function dialogs (lib/sqlfunctions.pm, body.v_sqlfunc - window shell from dialog_form() in lib/dialogs.pm)
*
* After the "Function Dialog" design handoff: dark title bar with 36px icon buttons, tinted description, uppercase
* section labels, 140px label grid with 38px inputs and focus ring, footer with text buttons (withcaption
* btn-padding-20), status banner + summary + numbered error list on the result page, centered confirm card.
* Scoped to body.v_sqlfunc; colors are tokens, theme_dark.css only redefines them.
* ========================================================================== */
body.v_sqlfunc {
--fd-ink:oklch(0.22 0.02 250); --fd-muted:oklch(0.50 0.02 250); --fd-disabled-text:oklch(0.45 0.02 250);
--fd-titlebar:var(--theme-color-01); --fd-titlebar-ink:#FFFFFF; --fd-titlebar-hover:oklch(1 0 0 / .12); --fd-titlebar-delimiter:oklch(1 0 0 / .25);
--fd-border:oklch(0.86 0.01 250); --fd-border-soft:oklch(0.92 0.005 250); --fd-divider:oklch(0.93 0.005 250); --fd-check-border:oklch(0.70 0.01 250);
--fd-surface:#FFFFFF; --fd-surface-2:oklch(0.97 0.003 250); --fd-input-bg:#FFFFFF;
--fd-info-bg:oklch(0.96 0.015 250); --fd-info-border:oklch(0.90 0.02 250); --fd-info-text:oklch(0.32 0.03 250);
--fd-primary:oklch(0.50 0.13 250); --fd-primary-hover:oklch(0.44 0.13 250); --fd-on-primary:#FFFFFF;
--fd-dark-btn:oklch(0.22 0.02 250); --fd-dark-btn-hover:oklch(0.32 0.02 250);
--fd-danger:oklch(0.55 0.19 25); --fd-danger-text:oklch(0.42 0.16 25); --fd-danger-sub:oklch(0.45 0.06 25); --fd-danger-bg:oklch(0.97 0.02 25); --fd-danger-border:oklch(0.90 0.05 25);
--fd-invalid:oklch(0.62 0.19 25); --fd-invalid-text:oklch(0.50 0.19 25); --fd-invalid-ring:0 0 0 3px oklch(0.62 0.19 25 / .12);
--fd-success:oklch(0.55 0.13 155); --fd-success-text:oklch(0.38 0.11 155); --fd-success-sub:oklch(0.42 0.05 155); --fd-success-bg:oklch(0.97 0.025 155); --fd-success-border:oklch(0.88 0.06 155);
--fd-warn-bg:oklch(0.96 0.04 75); --fd-warn:oklch(0.55 0.14 65);
--fd-focus-ring:0 0 0 3px oklch(0.50 0.13 250 / .15);
--fd-radius:6px; --fd-radius-lg:8px;
--fd-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
background-color:var(--fd-surface) !important; color:var(--fd-ink);
font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:14px;
-webkit-font-smoothing:antialiased;
}
body.v_sqlfunc input, body.v_sqlfunc select, body.v_sqlfunc textarea, body.v_sqlfunc button { font-family:inherit; }
body.v_sqlfunc .form_content a { color:var(--fd-primary); }
/* title bar: 48px, dark; icon buttons keep the menuicons.css style (variant light/dark is chosen by set_btn_class from the background) */
body.v_sqlfunc .form_header { background:var(--fd-titlebar) !important; border:none; color:var(--fd-titlebar-ink); }
body.v_sqlfunc .form_header > table { height:48px !important; }
body.v_sqlfunc .form_header > table > tbody > tr > td.form_title { padding:0 16px 0 20px !important; font-size:15px; font-weight:600; color:var(--fd-titlebar-ink); }
body.v_sqlfunc .form_header > table > tbody > tr > td:last-child { padding-right:8px; }
body.v_sqlfunc .form_header form { display:inline; margin:0; }
body.v_sqlfunc .form_header .btn.btn-delimiter { --btn-delimiter-color:var(--fd-titlebar-delimiter); }
/* description (FORMULAR_INFO / RESULT_INFO) */
body.v_sqlfunc .form_header .form_header_info { margin:0; padding:14px 20px; background:var(--fd-info-bg); border-bottom:1px solid var(--fd-info-border); color:var(--fd-info-text); font-size:13.5px; line-height:1.5; text-wrap:pretty; }
/* body */
body.v_sqlfunc .form_content { box-sizing:border-box; padding:24px 20px; color:var(--fd-ink); font-size:14px; line-height:1.45; }
body.v_sqlfunc .form_content > .form_section_container { width:auto !important; float:none; margin:0; padding:0 !important; background:none; border:none; }
body.v_sqlfunc .form_content input[type=checkbox], body.v_sqlfunc .form_content input[type=radio] { accent-color:var(--fd-primary); }
/* section label (Parameter, Zusammenfassung, Fehler, Ergebnis, ...) */
body.v_sqlfunc .form_content .form_section_title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:24px 0 12px; padding:0; font-size:12px; font-weight:600; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--fd-muted); }
body.v_sqlfunc .form_content :is(.form_section_container, form, #parameters_on_result_page) > div.form_section_title:first-of-type { margin-top:0; }
body.v_sqlfunc .form_content .form_section_title > .btn { float:none; }
/* parameter form: label column 140px, label aligned to the text of the 38px inputs */
body.v_sqlfunc #function_form > table { border-collapse:collapse; }
body.v_sqlfunc #function_form > table > tbody > tr > td { padding:0 0 14px; vertical-align:top; }
body.v_sqlfunc #function_form > table > tbody > tr > td.form_label { width:140px !important; padding:10px 16px 14px 0; font-size:14px; font-weight:500; line-height:1.35; color:var(--fd-ink); overflow-wrap:anywhere; }
body.v_sqlfunc #function_form > table > tbody > tr > td.form_label .form_section_title { margin:0 0 6px; }
body.v_sqlfunc #function_form .form_label .required { font-weight:inherit; text-decoration:none; }
body.v_sqlfunc #function_form .form_label .required::after { content:" *"; color:var(--fd-danger); font-weight:600; }
body.v_sqlfunc #function_form .form_label :is(.required.empty, .wrong) { color:var(--fd-invalid-text) !important; }
/* inputs (inline width/padding from form_element.pm are overridden; composite controls with .nostyle stay as they are) */
body.v_sqlfunc #function_form td[id^="form_element_container_"] :is(input.form_text, select.form_select, textarea.form_textarea):not(.nostyle) { box-sizing:border-box; width:100% !important; height:38px; margin:0; padding:0 12px !important; border:1px solid var(--fd-border); border-radius:var(--fd-radius); background:var(--fd-input-bg); color:var(--fd-ink); font-size:14px; outline:none; transition:border-color .12s, box-shadow .12s; }
body.v_sqlfunc #function_form td[id^="form_element_container_"] :is(input.form_text, select.form_select, textarea.form_textarea):not(.nostyle) + :is(input.form_text, select.form_select, textarea.form_textarea) { margin-top:8px; }
body.v_sqlfunc #function_form td[id^="form_element_container_"] select.form_select:not(.nostyle) { padding:0 8px !important; }
body.v_sqlfunc #function_form td[id^="form_element_container_"] textarea.form_textarea:not(.nostyle) { height:auto; min-height:76px; padding:8px 12px !important; line-height:1.45; }
body.v_sqlfunc #function_form td[id^="form_element_container_"] :is(input, select, textarea):not(.btn):not([type=checkbox]):not([type=radio]):focus { border-color:var(--fd-primary) !important; box-shadow:var(--fd-focus-ring) !important; outline:none; }
body.v_sqlfunc #function_form td[id^="form_element_container_"] :is(input, select, textarea):not(.btn):is([readonly], [disabled]) { background:var(--fd-surface-2); border-color:var(--fd-border-soft); color:var(--fd-disabled-text); }
/* empty required parameter: red border on the element (two-column and one-column layout) */
body.v_sqlfunc #function_form tr:has(> td.form_label .required.empty) > td :is(input.form_text, select.form_select, textarea.form_textarea, [id^="checkbox_container_"]):not(.nostyle),
body.v_sqlfunc #function_form tr:has(> td.form_label .required.empty) + tr > td :is(input.form_text, select.form_select, textarea.form_textarea, [id^="checkbox_container_"]):not(.nostyle) { border-color:var(--fd-invalid) !important; }
body.v_sqlfunc #function_form tr:has(> td.form_label .required.empty) > td :is(input, select, textarea):not(.btn):focus,
body.v_sqlfunc #function_form tr:has(> td.form_label .required.empty) + tr > td :is(input, select, textarea):not(.btn):focus { border-color:var(--fd-invalid) !important; box-shadow:var(--fd-invalid-ring) !important; }
/* list box (LIST / MULTISELECT): bordered, scrollable, 32px rows, selected row filled */
body.v_sqlfunc #function_form td[id^="form_element_container_"] select.form_select:is([multiple], [size]:not([size="1"]):not([size="0"])):not(.nostyle) { height:auto; min-height:76px; padding:4px !important; }
body.v_sqlfunc #function_form select.form_select:is([multiple], [size]:not([size="1"]):not([size="0"])) option { padding:7px 10px; border-radius:4px; }
body.v_sqlfunc #function_form select.form_select:is([multiple], [size]:not([size="1"]):not([size="0"])) option:hover { background:var(--fd-surface-2); }
body.v_sqlfunc #function_form select.form_select:is([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { background:var(--fd-primary) linear-gradient(var(--fd-primary), var(--fd-primary)); color:var(--fd-on-primary); }
/* checkboxes / radio buttons (form_element.pm CHECKBOX, RADIO): 34px rows, 16px boxes */
body.v_sqlfunc #function_form td[id^="form_element_container_"] > div:has(> :is(input[type=checkbox], input[type=radio])) { display:flex; align-items:center; gap:10px; min-height:34px; box-sizing:border-box; padding:0 8px; border-radius:4px; }
body.v_sqlfunc #function_form td[id^="form_element_container_"] > div:has(> :is(input[type=checkbox], input[type=radio])):hover { background:var(--fd-surface-2); }
body.v_sqlfunc #function_form :is(input[type=checkbox], input[type=radio]) { width:16px; height:16px; margin:0; flex:none; }
/* checkbox group (CHECKBOX_NG): bordered box, header row with text buttons for select all / clear all */
body.v_sqlfunc #function_form [id^="checkbox_container_"] { display:flex; flex-wrap:wrap; justify-content:flex-end; align-content:flex-start; gap:2px; box-sizing:border-box; height:auto !important; max-height:220px; padding:4px 6px; border:1px solid var(--fd-border); border-radius:var(--fd-radius); background:var(--fd-input-bg); }
body.v_sqlfunc #function_form [id^="checkbox_container_"] > .btn:is(.btn-selectall, .btn-clearall) { position:static !important; width:auto !important; height:26px !important; padding:0 8px !important; border-radius:4px; background-image:none !important; font-size:12px !important; font-weight:500; color:var(--fd-primary) !important; }
body.v_sqlfunc #function_form [id^="checkbox_container_"] > .btn:is(.btn-selectall, .btn-clearall):hover { background-color:var(--fd-info-bg) !important; opacity:1; }
body.v_sqlfunc #function_form [id^="checkbox_container_"] > div { flex:1 0 100%; margin:2px -6px -4px; padding:4px !important; border-top:1px solid var(--fd-divider); }
body.v_sqlfunc #function_form [id^="checkbox_container_"] table { width:100%; border-collapse:collapse; }
body.v_sqlfunc #function_form [id^="checkbox_container_"] td { height:34px; padding:0 8px; vertical-align:middle; font-size:14px; }
body.v_sqlfunc #function_form [id^="checkbox_container_"] td:first-child { width:16px; }
body.v_sqlfunc #function_form [id^="checkbox_container_"] tr:hover > td { background:var(--fd-surface-2); }
body.v_sqlfunc #function_form [id^="checkbox_container_"] tr > td:first-child { border-radius:4px 0 0 4px; }
body.v_sqlfunc #function_form [id^="checkbox_container_"] tr > td:last-child { border-radius:0 4px 4px 0; }
/* footer: right-aligned Abbrechen + Ausfuehren (form), Zurueck left / Schliessen right (result) */
body.v_sqlfunc .form_footer, body.v_sqlfunc .form_footer.bg { box-sizing:border-box; padding:14px 20px; background:var(--fd-surface) !important; border-top:1px solid var(--fd-divider); color:var(--fd-ink); }
body.v_sqlfunc .form_footer > div { padding:0 !important; }
body.v_sqlfunc .form_footer td { padding:0; }
/* text buttons with icon (class withcaption btn-padding-20): size, padding and icon from menuicons.css, only the
colors change (secondary: white / ink text, primary: blue / white text, close: dark / white text) */
body.v_sqlfunc .btn.withcaption.btn-padding-20 { background-color:var(--fd-surface) !important; border-color:var(--fd-border); color:var(--fd-ink) !important; }
body.v_sqlfunc .btn.withcaption.btn-padding-20:hover { background-color:var(--fd-surface-2) !important; opacity:1; }
/* primary: execute */
body.v_sqlfunc .btn.withcaption.btn-padding-20:is(.btn-next, .btn-ok) { background-color:var(--fd-primary) !important; border-color:var(--fd-primary); color:var(--fd-on-primary) !important; }
body.v_sqlfunc .btn.withcaption.btn-padding-20:is(.btn-next, .btn-ok):hover { background-color:var(--fd-primary-hover) !important; border-color:var(--fd-primary-hover); }
/* dark: close window */
body.v_sqlfunc .btn.withcaption.btn-padding-20.btn-close { background-color:var(--fd-dark-btn) !important; border-color:var(--fd-dark-btn); color:var(--fd-on-primary) !important; }
/* close: text only - no icon, left padding like the right one (btn-padding-20) */
body.v_sqlfunc .btn.withcaption.btn-padding-20.btn-close { background-image:none !important; padding-left:20px !important; }
body.v_sqlfunc .btn.withcaption.btn-padding-20.btn-close:hover { background-color:var(--fd-dark-btn-hover) !important; border-color:var(--fd-dark-btn-hover); }
/* result: space below the content for the fixed bottom toolbar (14px padding + 40px button + 14px padding + 1px border,
plus some air) - the margin-bottom set on .form_content by dialog_form() is calculated before the buttons are final */
body.v_sqlfunc #result { margin-bottom:80px; }
/* result: status banner (36px circle with check / cross, message, error count) - text block centered on the icon */
body.v_sqlfunc #result .function_status { display:flex; align-items:center; gap:14px; margin:0 0 24px; padding:16px; border:1px solid; border-radius:var(--fd-radius-lg); }
body.v_sqlfunc #result .function_status_success { background:var(--fd-success-bg); border-color:var(--fd-success-border); --fd-status:var(--fd-success); --fd-status-text:var(--fd-success-text); --fd-status-sub:var(--fd-success-sub); }
body.v_sqlfunc #result .function_status_failure { background:var(--fd-danger-bg); border-color:var(--fd-danger-border); --fd-status:var(--fd-danger); --fd-status-text:var(--fd-danger-text); --fd-status-sub:var(--fd-danger-sub); }
body.v_sqlfunc #result .function_status .status-icon { position:relative; float:none; flex:none; width:36px !important; height:36px !important; margin:0 !important; border-radius:50%; background:var(--fd-status) !important; }
body.v_sqlfunc #result .function_status .status-icon::before { content:""; position:absolute; inset:9px; background:#FFFFFF; -webkit-mask:var(--fd-status-glyph) center / contain no-repeat; mask:var(--fd-status-glyph) center / contain no-repeat; }
body.v_sqlfunc #result .function_status_success .status-icon { --fd-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
body.v_sqlfunc #result .function_status_failure .status-icon { --fd-status-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
body.v_sqlfunc #result .function_status_text { display:flex; flex-direction:column; gap:2px; min-width:0; }
body.v_sqlfunc #result .function_status_msg { margin:0; font-size:15px !important; font-weight:600; line-height:1.4; color:var(--fd-status-text) !important; text-wrap:pretty; }
body.v_sqlfunc #result .function_status_count { font-size:13px; color:var(--fd-status-sub); }
/* result: summary (function, runtime, finished) */
body.v_sqlfunc #result table.function_summary { margin:0 0 24px; font-size:14px; }
body.v_sqlfunc #result table.function_summary td { padding:4px 16px 4px 0; vertical-align:top; font-weight:500; }
body.v_sqlfunc #result table.function_summary td:first-child { width:110px; font-weight:400; color:var(--fd-muted); }
body.v_sqlfunc #result table.function_summary td.function_summary_mono { font-family:var(--fd-mono); font-size:13px; font-variant-numeric:tabular-nums; }
/* result: error list with number badges */
body.v_sqlfunc #result ul.function_errors { margin:0 0 24px; padding:0; list-style:none; border:1px solid var(--fd-border-soft); border-radius:var(--fd-radius-lg); }
body.v_sqlfunc #result ul.function_errors > li { display:flex; gap:12px; padding:12px 14px; font-size:14px; line-height:1.5; }
body.v_sqlfunc #result ul.function_errors > li + li { border-top:1px solid var(--fd-divider); }
body.v_sqlfunc #result .function_error_no { flex:none; height:fit-content; margin-top:1px; padding:1px 7px; border-radius:4px; background:var(--fd-danger-bg); color:var(--fd-danger); font-family:var(--fd-mono); font-size:12px; font-weight:500; line-height:1.5; }
body.v_sqlfunc #result .function_error_msg { min-width:0; overflow-wrap:anywhere; text-wrap:pretty; }
/* result: trace */
body.v_sqlfunc #result pre { margin:0 0 24px; padding:12px 14px; border:1px solid var(--fd-border-soft); border-radius:var(--fd-radius-lg); background:var(--fd-surface-2); font-family:var(--fd-mono); font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
/* confirm dialog: centered card on a tinted background */
body.v_sqlfunc:has(.function_confirm), body.v_sqlfunc:has(.function_confirm) .form_footer { background-color:var(--fd-surface-2) !important; }
body.v_sqlfunc:has(.function_confirm) .form_footer { border-top-color:transparent; }
body.v_sqlfunc .function_confirm { box-sizing:border-box; max-width:380px; margin:8vh auto 0; padding:28px 24px 20px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; background:var(--fd-surface); border:1px solid var(--fd-border-soft); border-radius:10px; }
body.v_sqlfunc .function_confirm_icon { position:relative; width:48px; height:48px; border-radius:50%; background:var(--fd-warn-bg); }
body.v_sqlfunc .function_confirm_icon::before { content:""; position:absolute; inset:12px; background:var(--fd-warn); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center / contain no-repeat; }
body.v_sqlfunc .function_confirm .function_confirm_msg { margin:0 0 -14px; font-size:18px; font-weight:600; line-height:1.35; color:var(--fd-ink); text-wrap:balance; }
body.v_sqlfunc .function_confirm_caption { font-size:14px; color:var(--fd-muted); }
body.v_sqlfunc .function_confirm_buttons { display:flex; justify-content:center; gap:8px; width:100%; }