/** * UI shape — flat vs rounded Bootstrap styling (whole app). * Set on from Theme settings. */ html[data-hkits-ui-shape="rounded"], html:not([data-hkits-ui-shape]) { --hkits-ui-radius: 8px; --hkits-ui-radius-sm: 6px; --hkits-ui-radius-xs: 4px; --hkits-ui-radius-lg: 12px; --hkits-ui-panel-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); } html[data-hkits-ui-shape="flat"] { --hkits-ui-radius: 0; --hkits-ui-radius-sm: 0; --hkits-ui-radius-xs: 0; --hkits-ui-radius-lg: 0; --hkits-ui-panel-shadow: none; } /* ── Rounded Bootstrap — all pages (dashboard, reports, forms, lists) ── */ html[data-hkits-ui-shape="rounded"] body.hkits-app .panel, html[data-hkits-ui-shape="rounded"] body.hkits-app .panel-heading, html[data-hkits-ui-shape="rounded"] body.hkits-app .panel-body, html[data-hkits-ui-shape="rounded"] body.hkits-app .panel-footer, html[data-hkits-ui-shape="rounded"] body.hkits-app .well, html[data-hkits-ui-shape="rounded"] body.hkits-app .alert, html[data-hkits-ui-shape="rounded"] body.hkits-app .btn, html[data-hkits-ui-shape="rounded"] body.hkits-app .form-control, html[data-hkits-ui-shape="rounded"] body.hkits-app .input-group-addon, html[data-hkits-ui-shape="rounded"] body.hkits-app .dropdown-menu, html[data-hkits-ui-shape="rounded"] body.hkits-app .nav-tabs > li > a, html[data-hkits-ui-shape="rounded"] body.hkits-app .list-group-item, html[data-hkits-ui-shape="rounded"] body.hkits-app .modal-content, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-page-bar, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-list-container .panel, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-toolbar, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-dash-stat-card, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-pcard, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-dash-panel, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-perf-card, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-perf-mini, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-file-banner, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-ph-tabs .btn, html[data-hkits-ui-shape="rounded"] body.hkits-app .bootstrap-select > .dropdown-toggle, html[data-hkits-ui-shape="rounded"] body.hkits-app .table-bordered, html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-report-grid .hkits-pcard, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .filters-bar, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .bulk-actions, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .bm-panel-table, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .products-table-container, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .hkits-cw-tab, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .filter-select, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .filter-input, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .filter-btn, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .clear-btn, html[data-hkits-ui-shape="rounded"] body.hkits-app .kitsofts-navy-workspace .product-mobile-card { border-radius: var(--hkits-ui-radius-sm); } html[data-hkits-ui-shape="rounded"] body.hkits-app .panel { box-shadow: var(--hkits-ui-panel-shadow); overflow: hidden; } html[data-hkits-ui-shape="rounded"] body.hkits-app .panel > .panel-heading:first-child { border-radius: var(--hkits-ui-radius) var(--hkits-ui-radius) 0 0; } html[data-hkits-ui-shape="rounded"] body.hkits-app .panel > .panel-body:last-child, html[data-hkits-ui-shape="rounded"] body.hkits-app .panel > .panel-footer:last-child { border-radius: 0 0 var(--hkits-ui-radius) var(--hkits-ui-radius); } html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-menu-head { border-radius: var(--hkits-ui-radius); } html[data-hkits-ui-shape="rounded"] body.hkits-app .hkits-submenu li a { border-radius: var(--hkits-ui-radius-sm); } html[data-hkits-ui-shape="rounded"] body.hkits-app .nav-tabs > li.active > a { border-radius: var(--hkits-ui-radius-xs) var(--hkits-ui-radius-xs) 0 0; } html[data-hkits-ui-shape="rounded"] body.hkits-app .badge, html[data-hkits-ui-shape="rounded"] body.hkits-app .label { border-radius: var(--hkits-ui-radius-xs); } /* ── Flat Bootstrap — square corners app-wide ─────────────────────────── */ html[data-hkits-ui-shape="flat"] body.hkits-app .btn, html[data-hkits-ui-shape="flat"] body.hkits-app .form-control, html[data-hkits-ui-shape="flat"] body.hkits-app .input-group-addon, html[data-hkits-ui-shape="flat"] body.hkits-app .panel, html[data-hkits-ui-shape="flat"] body.hkits-app .panel-heading, html[data-hkits-ui-shape="flat"] body.hkits-app .panel-body, html[data-hkits-ui-shape="flat"] body.hkits-app .panel-footer, html[data-hkits-ui-shape="flat"] body.hkits-app .well, html[data-hkits-ui-shape="flat"] body.hkits-app .alert, html[data-hkits-ui-shape="flat"] body.hkits-app .badge, html[data-hkits-ui-shape="flat"] body.hkits-app .label, html[data-hkits-ui-shape="flat"] body.hkits-app .dropdown-menu, html[data-hkits-ui-shape="flat"] body.hkits-app .nav-tabs > li > a, html[data-hkits-ui-shape="flat"] body.hkits-app .list-group-item, html[data-hkits-ui-shape="flat"] body.hkits-app .modal-content, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-menu-head, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-submenu, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-submenu li a, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-theme-card, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-theme-custom-panel, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-dash-stat-card, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-page-bar, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-file-tabs > li > a, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-ph-tabs-wrap .nav-tabs > li > a, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-ph-tabs .btn, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-pcard, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-dash-panel, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-perf-card, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-perf-mini, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-dept-icon, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-stat-icon, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-file-banner, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-btn-primary, html[data-hkits-ui-shape="flat"] body.hkits-app .bootstrap-select > .dropdown-toggle { border-radius: 0 !important; } html[data-hkits-ui-shape="flat"] body.hkits-app .panel, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-dash-stat-card, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-theme-card, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-menu-head, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-dash-v2 .panel, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-dash-card, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-pcard { box-shadow: none !important; } html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-menu-head:hover, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-menu-head:focus, html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-menu-head.active { box-shadow: none !important; } html[data-hkits-ui-shape="flat"] body.hkits-app .hkits-sidebar { box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06) !important; } /* Theme settings — shape picker cards */ .hkits-ui-shape-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hkits-border-light, #e2e8f0); } .hkits-ui-shape-section h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .hkits-ui-shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; } .hkits-ui-shape-card { border: 2px solid var(--hkits-border, #cbd5e1); border-radius: 8px; padding: 14px; cursor: pointer; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; } .hkits-ui-shape-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .hkits-ui-shape-card.is-active { border-color: var(--hkits-accent); box-shadow: 0 0 0 3px var(--hkits-primary-soft); } .hkits-ui-shape-preview { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-end; } .hkits-ui-shape-preview .shape-btn { display: inline-block; width: 52px; height: 28px; background: var(--hkits-accent, #0D9488); border: 1px solid var(--hkits-accent-hover, #0F766E); } .hkits-ui-shape-preview .shape-panel { flex: 1; height: 44px; border: 1px solid #cbd5e1; background: #f8fafc; } .hkits-ui-shape-preview.is-flat .shape-btn, .hkits-ui-shape-preview.is-flat .shape-panel { border-radius: 0; } .hkits-ui-shape-preview.is-rounded .shape-btn { border-radius: 6px; } .hkits-ui-shape-preview.is-rounded .shape-panel { border-radius: 8px; } .hkits-ui-shape-card strong { display: block; margin-bottom: 2px; } .hkits-ui-shape-card small { color: var(--hkits-text-muted, #64748b); } html[data-hkits-ui-shape="flat"] .hkits-ui-shape-card { border-radius: 0 !important; } /* ===== App font size (Theme settings) ===== */ html[data-hkits-font-size="small"], html[data-hkits-font-size="medium"], html[data-hkits-font-size="large"], html[data-hkits-font-size="very-large"] { --hkits-font-size: 14px; } html[data-hkits-font-size="small"] { --hkits-font-size: 12px; } html[data-hkits-font-size="medium"], html:not([data-hkits-font-size]) { --hkits-font-size: 14px; } html[data-hkits-font-size="large"] { --hkits-font-size: 16px; } html[data-hkits-font-size="very-large"] { --hkits-font-size: 18px; } html[data-hkits-font-size] body.hkits-app { font-size: var(--hkits-font-size) !important; } html[data-hkits-font-size] body.hkits-app .form-control, html[data-hkits-font-size] body.hkits-app .btn, html[data-hkits-font-size] body.hkits-app .table, html[data-hkits-font-size] body.hkits-app .panel, html[data-hkits-font-size] body.hkits-app .dropdown-menu, html[data-hkits-font-size] body.hkits-app .nav, html[data-hkits-font-size] body.hkits-app .hkits-menu-head, html[data-hkits-font-size] body.hkits-app .hkits-submenu li a, html[data-hkits-font-size] body.hkits-app .hkits-page-bar, html[data-hkits-font-size] body.hkits-app .modal-body, html[data-hkits-font-size] body.hkits-app .alert, html[data-hkits-font-size] body.hkits-app label, html[data-hkits-font-size] body.hkits-app .caption { font-size: inherit; } html[data-hkits-font-size="small"] body.hkits-app .hkits-page-bar h1, html[data-hkits-font-size="small"] body.hkits-app .hkits-page-heading { font-size: 1.25em; } html[data-hkits-font-size="medium"] body.hkits-app .hkits-page-bar h1, html[data-hkits-font-size="medium"] body.hkits-app .hkits-page-heading { font-size: 1.35em; } html[data-hkits-font-size="large"] body.hkits-app .hkits-page-bar h1, html[data-hkits-font-size="large"] body.hkits-app .hkits-page-heading { font-size: 1.4em; } html[data-hkits-font-size="very-large"] body.hkits-app .hkits-page-bar h1, html[data-hkits-font-size="very-large"] body.hkits-app .hkits-page-heading { font-size: 1.45em; } .hkits-font-size-preview { display: flex; align-items: center; justify-content: center; height: 48px; margin-bottom: 8px; font-weight: 700; color: var(--hkits-primary, #0d9488); background: var(--hkits-pale-blue-soft, #f0fdfa); border: 1px solid var(--hkits-border, #dde1e6); } html[data-hkits-ui-shape="rounded"] .hkits-font-size-preview { border-radius: 8px; } html[data-hkits-ui-shape="flat"] .hkits-font-size-preview { border-radius: 0; } .hkits-font-size-card.is-active .hkits-font-size-preview { border-color: var(--hkits-primary, #0d9488); box-shadow: inset 0 0 0 1px var(--hkits-primary, #0d9488); }