/* =============================================================
   @font-face declarations — custom font files bundled with the app
   -------------------------------------------------------------
   All bundled font files live in ../fonts/ (moved 2026-07-23 from
   the app_assets/ root during the fonts organization pass). Only
   fonts REFERENCED by their CSS family name below get an active
   @font-face declaration — otherwise the browser would download
   the file for no reason. To activate any of the currently-
   commented families, uncomment its block AND add a rule that
   uses font-family with that name.
   ============================================================= */
@font-face {
    font-family: 'tt_font1';
    src: url('../fonts/tt_font1.ttf') format('truetype');
    font-display: swap;
    /* Referenced by .tt_font1 and .tt_txt1 further down in this
       file — was silently falling back to system default before
       2026-07-23 because no @font-face existed. Wiring restored. */
}

/* PARKED in ../fonts/trash/ — not referenced anywhere in CSS or PHP
   as of 2026-07-23. Kept on disk so they're not lost if a future
   design needs them. To activate one:
     1. mv the file out of fonts/trash/ back to fonts/
     2. Uncomment its @font-face block below and fix the URL to
        ../fonts/<name> (drop the trash/ prefix)
     3. Add a CSS rule that references its font-family name.
   Leave any font that stays unused in trash/ so ops can safely
   delete the whole trash/ folder to reclaim disk when confirmed.
@font-face { font-family: 'Aldrich';   src: url('../fonts/trash/aldrich.ttf')          format('truetype'); font-display: swap; }
@font-face { font-family: 'Neuropol';  src: url('../fonts/trash/neuropol.ttf')         format('truetype'); font-display: swap; }
@font-face { font-family: 'NeuropolX'; src: url('../fonts/trash/Neuropol X Bold.ttf')  format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'AgencyFB';  src: url('../fonts/trash/AGENCYR.TTF')          format('truetype'); font-display: swap; }
@font-face { font-family: 'AgencyFB';  src: url('../fonts/trash/AGENCYB.TTF')          format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GE SS Two'; src: url('../fonts/trash/ge_ss_two_light.otf')  format('opentype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'GE SS Two'; src: url('../fonts/trash/ge_ss_two_medium.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GE SS Two'; src: url('../fonts/trash/ge_ss_two_bold.otf')   format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GE SS 2';   src: url('../fonts/trash/ge_ss_2_medium.otf')   format('opentype'); font-weight: 400; font-display: swap; }
*/

/*===========================================================
   Project Name: Dragonmart Property Managment System
   Author: Mohammed Shiroz
   Project URL: https://dragonmart.qa/
   Author URL: https://dragonmart.com/

=================================================
  Table of Contents
=================================================

	1. Basic
		1.1 Scroll bar styles
	2. Helpers Classes
	3. Layouts
	4  Elements
		4.1 Background
		4.2 Nav
		4.3 Tabs
	5 Social Icons
	6 Extra
		6.1 Form
		6.2 Form Dark
		6.3 Form Border
		6.4 Form Border Light
		6.5 Vertical Multilple input group
		6.6 Other Specific
=======================================================*/

/*------------------------Color Scheme Settings ------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap');

:root,
[data-ks-theme="light"] {

  --color-primary: #c0a76d;
  --color-primary-light: #b29f6e;
  --color-primary-lightest: #c5bc9a;
  --color-secondary: #968966;
  --login-cta-hover: #93804c;

  --ks-themebgcolor: #ffffff;
  --ks-themecolor: #c0a76d;
  --ks-themecolor-rgb: 13, 110, 253;
  --ks-themehovercolor: #93804c;
  --ks-themehovercolor-rgb: 1.7623, 87.23361, 213.2377;
  --ks-link-color: var(--ks-themecolor);
  --ks-link-color-rgb: var(--ks-themecolor-rgb);
  --ks-link-hover-color: var(--ks-themehovercolor);
  --ks-link-hover-color-rgb: var(--ks-themehovercolor-rgb);
  --ks-primary: var(--ks-themecolor);
  --ks-primary-rgb: var(--ks-themecolor-rgb);
  --ks-primary-text-emphasis: #052c65;
  --ks-primary-bg-subtle: #cfe2ff;
  --ks-primary-border-subtle: #9ec5fe;
  --ks-body-color: #000000;
  --ks-body-color-rgb: 76, 77, 77;
  --ks-body-bgcolor: #ffffff;
  --ks-heading-color: var(--ks-emphasis-color);
  --ks-body-font-family:  Open Sans, sans-serif;

}

[data-ks-theme="dark"] {
  color-scheme: dark;
  --ks-link-color: var(--ks-themecolor);
  --ks-link-color-rgb: var(--ks-themecolor-rgb);
  --ks-link-hover-color: var(--ks-themehovercolor);
  --ks-link-hover-color-rgb: var(--ks-themehovercolor-rgb);
  --ks-heading-color: var(--ks-emphasis-color);
  --ks-body-color: #dee2e6;
  --ks-body-color-rgb: 222, 226, 230;
}

/* =================================== */
/*  1. Basic Style 
/* =================================== */

html{
 height: 100%;
}

body {
    font-weight: 400;
    color: var(--ks-body-color);
    padding: 5rem;
    min-height: 100vh;
    background-color: var(--ks-body-bgcolor);
    font-family: var(--ks-body-font-family);
	height: 100vh;
    width:100%;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*box-sizing: inherit;*/
}

/*------------------------- 1.1 Scroll bar styles ----------------------------*/
/* width */
::-webkit-scrollbar { width: 8px; height: 8px; }
/* Track */
::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
::-webkit-scrollbar-thumb { background:#c1c1c1; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }


/*-------------------------1.2 application elements----------------------------*/
/*-------- Preloader --------
  Smooth full-screen loader. show_loading()/hide_loading() toggle the
  `is-visible` class (see apps.js) so visibility fades via CSS transition
  instead of snapping with `display:block/none`. The spinner itself is a
  thin gold ring — same visual vocabulary as .kdv-tab-spinner elsewhere. */
.tt_loading {
    position: fixed;                 /* cover the viewport, not whichever
                                        scrollable ancestor it's in */
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.tt_loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;            /* block clicks while globally busy */
    transition: opacity 0.18s ease, visibility 0s linear 0s;
}

.tt_loader {
    width: 48px;
    height: 48px;
    border: 4px solid #f0e7cf;       /* ring track */
    border-top-color: #c0a76d;       /* spinning arc */
    border-radius: 50%;
    animation: tt-spin 0.8s linear infinite;
    /* subtle pop-in so it doesn't snap into frame */
    transform: scale(0.92);
    transition: transform 0.2s ease;
}
.tt_loading.is-visible .tt_loader { transform: scale(1); }

@keyframes tt-spin { to { transform: rotate(360deg); } }
/* Legacy keyframe name — kept so any other stylesheet using `spin`
   continues to work. */
@keyframes spin    { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tt_loader   { animation-duration: 2s; }
    .tt_loading  { transition: opacity 0s; }
}

/* Smooth dim when disable_mybody() / enable_mybody() toggle the body. */
#ttbody {
    transition: opacity 0.18s ease;
    will-change: opacity;
}


.overlay-bgimage{
 	position: absolute;
	top:0;
	left:0;
	width: 100%;
    height: 100%;
}

.overlay-bgprimary{
 	position: absolute;
	top:0;
	left:0;
	width: 100%;
    height: 100%;
	background: rgba(145, 120, 57, 0.8);
}


/*-------- Application body --------*/
.tt_body {
    position: absolute; left:0px; top:0px; width: 100%; height: 100%; overflow:hidden;
    /*pointer-events:none;*/
    opacity: 1; 
	background-color: var(--ks-themebgcolor);
}

/*-------- application pages --------*/
.tt_page{  position:absolute; display: block; left:0px; top:0px; width:100%; height:100%; overflow-y: auto; background-color:var(--ks-themebgcolor); z-index:1; animation-duration: 0.5s; }
.tt_page2{ position:absolute; display: block; left:0px; top:0px; width:100%; height:100%; overflow-y: scroll; background-color:var(--ks-themebgcolor);  z-index:1; animation-duration: 0.5s; }
.tt_page3{ position:absolute; left:32%; top:0px; width:68%; height:100%; background-color:var(--ks-themebgcolor); overflow-y:scroll; z-index:1; transition: 0.5s; }

/* Media print page setup */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  @page {
    margin: 30px;
  }
}

/* Paper size defination */
.mya4{ 
	width:890px; 
	height:1285px; 
	overflow:hidden; 
}

.mya4-1{ 
	width:910px; 
	height:1305px;
	overflow:hidden; 
}

.mya4-2{ 
	width:910px; 
	height:1300px;
	overflow:hidden; 
}

.mya4-3{ 
	width:910px; 
	height:1295px;
	overflow:hidden; 
}


.crf_bdy{
    position:absolute;
	left:10px; 
	top:0px; 
	width:790px; 
	height:1150px;
}

.cus_txt input {
    border: 1px solid #dadada;
    border-radius: 3px;
}

input, textarea, select{
    border-radius: 3px;
    width:100%; height:100%;
    border: 1px solid #d5d5d5;
    outline: #bd9e4d;
    padding: 5px;
}

input:focus, textarea:focus, select:focus{
    outline: none;
    border: none;
    border: 1px solid #bd9e4d;
}

input[type="radio"] {
    width: 100%;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
}

/*input[type="checkbox"] {*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    cursor: pointer;*/
/*}*/

.tt_font1 { font-family: Calibri; }
.tt_font2 { font-family: 'Open Sans', sans-serif; } 

.tt_fntsty1_reqular {
	font-family: 'Roboto', sans-serif;
}

.tt_fntsty1_bold{
	font-family: 'Open Sans', sans-serif;
}

.tt_fntarsty1 { font-family: 'Cairo', sans-serif; }

.tt_fntsty2 { font-family: "Poppins", sans-serif; }

.tt_fntarsty2 {
  font-family: "Noto Naskh Arabic", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* .tt_font2 { font-family: Arial, sans-serif; } */
/*----------*/
.required-star{ color: red;}

.txt_box1{
    width: 100%; height: 100%; text-decoration: none; padding: 3px; background: #f1f1f1;
    border-radius: 0; color: black; border: none; outline: none;
}

/*message and dialog box */
/* =============================================================
   Modern message / confirmation modal (show_msgbox + legacy msgbox)
   ----------------------------------------------------------------
   Centered fixed card with a thin top accent stripe (mode-colored),
   subtle drop-shadow, smooth fade+scale entry, and card-like padding.
   Both #show_msgbox (new show_msg) and #msgbox (legacy sh_msg) share
   the same shell so everything looks consistent.
   ============================================================= */
.msg-box,
.show_msg_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(380px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.22), 0 3px 10px rgba(0,0,0,0.08);
    z-index: 10020;
    display: none;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", Arial, sans-serif;
    color: #333;
    animation: kmsg-popin 0.18s ease-out both;
    /* Mode-tinted accent bar pinned to the top — show_admsgbox() updates
       borderBottomColor by default; we translate that into a top stripe
       using a ::before so the visual is modern but the JS stays intact. */
    border-top: 4px solid #c0a76d;
    border-bottom: 0 !important;
}
/* The JS writes to `borderBottomColor`; surface it on the top stripe via
   currentColor + a pseudo element so we don't need to touch show_admsgbox. */
.msg-box { border-top-color: #c0a76d; }
/* When JS sets the inline style, CSS has no selector for it — so we key the
   top-stripe colour off the actual inline `border-bottom-color` via a filter
   trick: repeat the inline style as a top border too. Below we target each
   known mode color by setting the relevant class-free sibling rule via
   attribute selectors. */
.show_msg_box[style*="border-bottom-color: green"],
.show_msg_box[style*="rgb(0, 128, 0)"]   { border-top-color: #2b7a3a; }
.show_msg_box[style*="border-bottom-color: red"],
.show_msg_box[style*="rgb(255, 0, 0)"]   { border-top-color: #a8302b; }
.show_msg_box[style*="border-bottom-color: orange"],
.show_msg_box[style*="rgb(255, 165, 0)"] { border-top-color: #d98b0b; }
.show_msg_box[style*="border-bottom-color: blue"],
.show_msg_box[style*="rgb(0, 0, 255)"]   { border-top-color: #1f5e87; }
.show_msg_box[style*="#c0a76d"]          { border-top-color: #c0a76d; }

@keyframes kmsg-popin {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* =====================================================================
 * Notifications — corner-toast renderer (kn_toast / .kn-toast-stack)
 * ---------------------------------------------------------------------
 * Distinct from .show_msg_box (the existing center-modal). These toasts
 * dock to a viewport corner, slide in, auto-dismiss. The dock position
 * is driven by a body-level class (kn-toast-pos-*) populated from
 * sys_settings.notifications.toast_position via the kn_set_settings
 * action — admins flip it in App Settings, every new toast moves to the
 * new corner without a page reload.
 *
 * Layering: z-index above the standard chrome (sidebar=10, panels=100,
 * modal=200) but below loading overlays. Notifications should be visible
 * over everything except the preloader.
 * ===================================================================== */
.kn-toast-stack {
    position: fixed;
    z-index: 220;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;            /* container is transparent — only toasts catch clicks */
    max-width: 380px;
    width: calc(100% - 32px);
}
/* Corner / edge anchors. Only one set is "active" at a time — the body
 * class swaps which rule wins. Default = top-right (matches the seed). */
body.kn-toast-pos-top-right    .kn-toast-stack { top: 16px;    right: 16px; }
body.kn-toast-pos-top-left     .kn-toast-stack { top: 16px;    left: 16px; }
body.kn-toast-pos-bottom-right .kn-toast-stack { bottom: 16px; right: 16px; flex-direction: column-reverse; }
body.kn-toast-pos-bottom-left  .kn-toast-stack { bottom: 16px; left: 16px;  flex-direction: column-reverse; }
body.kn-toast-pos-top-center   .kn-toast-stack { top: 16px;    left: 50%; transform: translateX(-50%); }
/* Fallback when no position class has been applied yet (kn_bootstrap
 * still in flight). Matches the default 'top-right' seed value. */
body:not([class*="kn-toast-pos-"]) .kn-toast-stack { top: 16px; right: 16px; }

.kn-toast {
    pointer-events: auto;            /* re-enable clicks on the toast itself */
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border-left: 4px solid #c0a76d;  /* default = info gold, mirrors theme */
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.06);
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #222;
    /* Slide-in start state — overridden by .kn-toast--in once the double-RAF
     * fires in apps.js. Direction depends on dock side, set by the body
     * class rules below. */
    opacity: 0;
    transform: translateX(110%);
    transition: opacity .18s ease-out, transform .22s cubic-bezier(.2,.7,.3,1);
}
/* Per-mode accent border so the eye picks success/error/warning at a
 * glance without reading the icon. Colours mirror .show_msg_box modes. */
.kn-toast--success { border-left-color: #2b7a3a; }
.kn-toast--error   { border-left-color: #a8302b; }
.kn-toast--warning { border-left-color: #d98b0b; }
.kn-toast--info    { border-left-color: #1f5e87; }

.kn-toast__icon {
    font-size: 22px;
    color: #888;
    line-height: 1;
}
.kn-toast--success .kn-toast__icon { color: #2b7a3a; }
.kn-toast--error   .kn-toast__icon { color: #a8302b; }
.kn-toast--warning .kn-toast__icon { color: #d98b0b; }
.kn-toast--info    .kn-toast__icon { color: #1f5e87; }

.kn-toast__msg {
    word-break: break-word;
    white-space: pre-line;           /* honour \n in body for multi-line summaries */
}

.kn-toast__close {
    cursor: pointer;
    color: #888;
    font-size: 18px;
    line-height: 1;
    padding: 2px;
    border-radius: 3px;
}
.kn-toast__close:hover { color: #333; background: rgba(0,0,0,0.06); }

.kn-toast--clickable { cursor: pointer; }
.kn-toast--clickable:hover { background: #fafafa; }

/* Slide-in end state — flipped on by JS via the double-RAF pattern. */
.kn-toast--in {
    opacity: 1;
    transform: translateX(0);
}
/* Slide-out — symmetric exit animation. Direction matches the entry
 * direction so the toast leaves the way it came in. */
.kn-toast--leaving {
    opacity: 0;
    transform: translateX(110%);
    transition: opacity .18s ease-in, transform .2s cubic-bezier(.4,.0,.7,.4);
}

/* Left-anchored docks reverse the slide-in direction so the toast
 * doesn't fly across the screen. */
body.kn-toast-pos-top-left .kn-toast,
body.kn-toast-pos-bottom-left .kn-toast {
    transform: translateX(-110%);
}
body.kn-toast-pos-top-left .kn-toast--in,
body.kn-toast-pos-bottom-left .kn-toast--in {
    transform: translateX(0);
}
body.kn-toast-pos-top-left .kn-toast--leaving,
body.kn-toast-pos-bottom-left .kn-toast--leaving {
    transform: translateX(-110%);
}

/* Top-center dock uses a vertical slide instead — feels more natural
 * for a centred toast than skating across horizontally. */
body.kn-toast-pos-top-center .kn-toast              { transform: translateY(-30px); }
body.kn-toast-pos-top-center .kn-toast--in          { transform: translateY(0); }
body.kn-toast-pos-top-center .kn-toast--leaving     { transform: translateY(-30px); }

/* =====================================================================
 * Notifications panel (kprocess_130 — bell icon, header utility)
 * ---------------------------------------------------------------------
 * Lives inside .k_riconpnls (the existing slide-in panel container the
 * Account panel uses). These rules style the *content* of the panel:
 * header, scrollable list, item rows, empty state, action buttons.
 *
 * Visual language:
 *   - White card + subtle shadow (matches the rest of the chrome)
 *   - Tone-coloured left rail per priority (urgent=red, high=amber,
 *     normal/low=blue) — same colour mapping kn-toast uses, so a row
 *     in the panel reads as the same notification a toast surfaced
 *   - Unseen rows get a bold subject + a coloured dot at the right
 *     edge (Slack-style "unread" affordance)
 * ===================================================================== */
.kn130-pnl {
    /* Fill the .k_riconpnls slide-in shell edge-to-edge so the panel
     * looks like Account / other right-icon panels — no floating card,
     * no transparent gutters. The shell defines its own height
     * (calc(100% - 37px)) so height:100% here resolves cleanly.
     * Background matches Account's #fafaf6 inline style at
     * kprocess_114.php:727 so the chrome family stays visually
     * consistent across every right-icon panel. */
    width: 100%;
    height: 100%;
    background: #fafaf6;
    overflow: hidden;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #222;
    display: flex;
    flex-direction: column;
}

.kn130-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #fafaf6;                 /* same tone as panel — single-tone like Calendar & Tools */
    border-bottom: 1px solid #ebe6d6;    /* warm cream-tinted separator */
    flex-shrink: 0;
}
.kn130-ttl {
    font-weight: 600;
    color: #1f2630;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn130-ttl i { font-size: 18px; color: #bb913b; }
/* Pill in the header showing how many unread — gold to match the theme
 * and pull the eye when the count is non-zero. */
.kn130-unseen-pill {
    background: #bb913b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

.kn130-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn130-btn-mark {
    cursor: pointer;
    color: #555;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .12s, border-color .12s;
}
.kn130-btn-mark:hover { background: #f0eadf; border-color: #bb913b; color: #6b521f; }
.kn130-btn-mark i     { font-size: 14px; }

.kn130-btn-close {
    cursor: pointer;
    color: #888;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kn130-btn-close:hover { background: rgba(0,0,0,0.06); color: #333; }

/* Scrollable item list. flex:1 + overflow-y:auto inside the flex column
 * means the header + footer stay pinned while the list scrolls. Single
 * cream tone (no white inner panel) — body absorbs the same #fafaf6 as
 * the header so the panel reads as one continuous surface. The row
 * cards (below) provide the visual separation against this background. */
.kn130-body {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fafaf6;
    padding: 8px;
}
.kn130-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each row is a soft card — white surface on the cream body so items
 * read as discrete "notification cards" matching the Calendar & Tools
 * accordion-card pattern the user pointed at as the reference. The
 * left border carries the priority tone rail. */
.kn130-row {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr 12px;
    align-items: flex-start;
    column-gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-left: 3px solid transparent;  /* tone rail set by .kn130-row--<priority> */
    border-radius: 6px;
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease;
}
.kn130-row:hover { background: #fdfbf5; border-color: #d8c98f; }

/* Priority tone rail — left border accent. Same hex values as the
 * kn-toast modes for visual consistency (a row a user saw as a toast
 * has the matching colour rail in the panel). */
.kn130-row--urgent { border-left-color: #a8302b; }
.kn130-row--high   { border-left-color: #d98b0b; }
.kn130-row--normal { border-left-color: #1f5e87; }
.kn130-row--low    { border-left-color: #888; }

/* Unseen rows get a bolder subject + a gold-cream card surface that
 * pulls the eye even before reading the dot. Border picks up the gold
 * tint too so the card visibly "lifts" from the seen rows. */
.kn130-row--unseen .kn130-row__ti { font-weight: 600; color: #111; }
.kn130-row--unseen        { background: #fdf6e0; border-color: #e6d4a3; }
.kn130-row--unseen:hover  { background: #f9eec5; border-color: #bb913b; }

.kn130-row__icon {
    font-size: 22px;
    color: #888;
    line-height: 1;
    margin-top: 2px;
}
.kn130-row--urgent .kn130-row__icon { color: #a8302b; }
.kn130-row--high   .kn130-row__icon { color: #d98b0b; }
.kn130-row--normal .kn130-row__icon { color: #1f5e87; }

.kn130-row__main { min-width: 0; }
.kn130-row__ti {
    color: #2a2f3a;
    word-break: break-word;
    margin-bottom: 2px;
}
.kn130-row__bd {
    color: #6a6a6a;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kn130-row__when {
    color: #9a9a9a;
    font-size: 11px;
}

/* Right-edge unread dot. Halo (box-shadow) matches the gold-cream
 * unread row surface so the dot reads as floating cleanly above the
 * card rather than poking out with a visible white edge. */
.kn130-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bb913b;
    margin-top: 6px;
    box-shadow: 0 0 0 2px #fdf6e0;
}
.kn130-row--urgent .kn130-row__dot { background: #a8302b; box-shadow: 0 0 0 2px #fdf6e0; }
.kn130-row--high   .kn130-row__dot { background: #d98b0b; box-shadow: 0 0 0 2px #fdf6e0; }

/* Status chips — small inline pills next to the subject when a row
 * is in a non-default state. Today only 'queued' shows; future
 * states (failed, retrying) plug in here. */
.kn130-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}
.kn130-chip--queued { background: #eef4f9; color: #1f5e87; border: 1px solid #cfdde9; }

/* Empty state — friendly stub when the user has no notifications.
 * Wrapped in a card so it reads as part of the same visual family
 * as the populated rows (instead of a flat block in the middle of
 * the cream body). */
.kn130-empty {
    text-align: center;
    padding: 36px 20px;
    color: #888;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
}
.kn130-empty i { font-size: 42px; color: #c8c8c8; }
.kn130-empty-ti {
    font-size: 14px;
    color: #555;
    margin-top: 8px;
    font-weight: 600;
}
.kn130-empty-tx {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    line-height: 1.5;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer — pinned to the bottom of the panel via the parent flex
 * column. Same cream tone + soft separator as the header so the panel
 * frames symmetrically. Holds two anchors:
 *   - left: "Show all notifications" link → opens the full menu page
 *   - right: Close affordance
 * justify-content:space-between keeps them pinned to opposite edges
 * regardless of the panel width. */
.kn130-foot {
    flex-shrink: 0;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
/* Show-all link styled as a subtle text link with a leading icon —
 * matches the visual weight of the Mark-all-read button in the header
 * but with a gold-on-cream tone so it reads as a "navigate elsewhere"
 * affordance rather than a destructive action. */
.kn130-foot-all {
    cursor: pointer;
    color: #6b521f;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.kn130-foot-all i { font-size: 14px; }
.kn130-foot-all:hover { background: #f3eedf; color: #4d3a14; }

.kn130-foot-close {
    cursor: pointer;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 22px;
    font-size: 13px;
    font-weight: 500;
    transition: background .12s, border-color .12s, color .12s;
}
.kn130-foot-close:hover { background: #f3eedf; border-color: #bb913b; color: #6b521f; }

/* =====================================================================
 * Notifications list page (kprocess_131 — System Setting → Notifications)
 * ---------------------------------------------------------------------
 * Full-stage list view of every row in sys_notifications_log the actor
 * can see. Layout mirrors the bell-icon panel (kn130-*) so admins see
 * the same visual language at both surfaces — same priority tone rails,
 * same gold-cream unread tint, same time-ago labels — but stretched to
 * fill the stage tab with a proper filter bar and pagination.
 * ===================================================================== */
.kn131-pg {
    width: 100%;
    height: 100%;
    background: #fafaf6;
    color: #222;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Header strip — title + total count pill + action buttons. Sticky at
 * top via flex-shrink:0 so the body absorbs scroll. */
.kn131-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
}
.kn131-ttl {
    font-size: 16px;
    font-weight: 600;
    color: #2a2f3a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kn131-ttl i { font-size: 22px; color: #bb913b; }
.kn131-total {
    background: #ebe6d6;
    color: #6b521f;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 4px;
}
.kn131-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filter bar — status pills (top row) + dropdowns + search (bottom row).
 * Flex-shrink:0 keeps it pinned alongside the header. */
.kn131-filters {
    flex-shrink: 0;
    padding: 10px 18px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn131-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.kn131-pill {
    cursor: pointer;
    padding: 5px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #555;
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.kn131-pill:hover { background: #f3eedf; border-color: #bb913b; color: #6b521f; }
.kn131-pill--active {
    background: #bb913b;
    border-color: #bb913b;
    color: #fff;
    font-weight: 600;
}
.kn131-pill--active:hover { background: #a07a2e; border-color: #a07a2e; color: #fff; }

.kn131-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kn131-select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    color: #555;
    min-width: 140px;
    cursor: pointer;
}
.kn131-select:hover { border-color: #bb913b; }

/* Multi-combo slots — wrap the k_multi_combo widget so it sits
 * cleanly alongside the search input + button in the filter row.
 * Width is bounded so the channel + priority combos don't sprawl
 * across the bar; the users combo gets a wider slot since labels
 * like "Mohammed Shiroz (30103)" need more room. */
.kn131-mc-slot {
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 220px;
}
.kn131-mc-slot--users {
    min-width: 200px;
    max-width: 280px;
}
/* The widget's display element takes 100% of its slot wrapper. */
.kn131-mc-slot .k-mc-wrap { width: 100%; }
.kn131-mc-slot .k-mc-display {
    /* Match the 12px font + 5px/10px padding of .kn131-select so the
     * filter row reads as one consistent control set instead of a
     * mix of widgets at different scales. */
    font-size: 12px;
    padding: 5px 10px;
    min-height: 28px;
}
.kn131-search {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    color: #222;
    flex: 1 1 220px;
    min-width: 180px;
}
.kn131-search:focus { outline: none; border-color: #bb913b; }

/* Generic button used by header + pagination + small icon-buttons.
 * Same hover treatment as kn130-btn-mark for visual consistency. */
.kn131-btn {
    cursor: pointer;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.kn131-btn i { font-size: 14px; }
.kn131-btn:hover { background: #f3eedf; border-color: #bb913b; color: #6b521f; }
.kn131-btn--small { padding: 5px 8px; }
.kn131-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Body — scrollable card grid. Same #fafaf6 + 8 px padding pattern
 * as the bell panel so populated rows render as floating cards. */
.kn131-body {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fafaf6;
    padding: 10px 18px;
}
.kn131-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each row — wider than the bell panel because we have full stage
 * width to play with. Two-column inside: icon + main content. The
 * unread dot floats top-right via .kn131-row__dot. */
.kn131-row {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: flex-start;
    column-gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-left: 4px solid transparent;  /* priority tone rail */
    border-radius: 6px;
    cursor: pointer;
    transition: background .1s ease, border-color .1s ease;
}
.kn131-row:hover { background: #fdfbf5; border-color: #d8c98f; }

.kn131-row--urgent { border-left-color: #a8302b; }
.kn131-row--high   { border-left-color: #d98b0b; }
.kn131-row--normal { border-left-color: #1f5e87; }
.kn131-row--low    { border-left-color: #888; }

.kn131-row--unseen .kn131-row__ti { font-weight: 600; color: #111; }
.kn131-row--unseen        { background: #fdf6e0; border-color: #e6d4a3; }
.kn131-row--unseen:hover  { background: #f9eec5; border-color: #bb913b; }

/* Failed / queued rows get a subtle visual cue beyond the chip — a
 * faint tinted background so admins skim-scanning the list spot
 * them without reading every chip. */
.kn131-row--failed        { border-color: #e8c4c1; }
.kn131-row--failed:hover  { border-color: #c97a73; }

.kn131-row__icon {
    font-size: 24px;
    color: #888;
    line-height: 1;
    margin-top: 2px;
}
.kn131-row--urgent .kn131-row__icon { color: #a8302b; }
.kn131-row--high   .kn131-row__icon { color: #d98b0b; }
.kn131-row--normal .kn131-row__icon { color: #1f5e87; }

.kn131-row__main { min-width: 0; }
.kn131-row__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.kn131-row__ti {
    color: #2a2f3a;
    word-break: break-word;
    flex: 1 1 auto;
}
.kn131-row__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

/* Chips — channel + priority + status badges that ride the top-line.
 * Each chip has its own background tint so admins can scan a long
 * list and identify "all SMS rows" at a glance. */
.kn131-row .kn131-chip,
.kn131-pg .kn131-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 3px;
    vertical-align: middle;
}
.kn131-chip--inapp    { background: #eef4f9; color: #1f5e87; border: 1px solid #cfdde9; }
.kn131-chip--email    { background: #f0f3ed; color: #4d6135; border: 1px solid #d2dac3; }
.kn131-chip--sms      { background: #f7eef0; color: #8b3a52; border: 1px solid #ebd0d6; }
.kn131-chip--whatsapp { background: #e8f5e3; color: #1d6420; border: 1px solid #b6dcb0; }
.kn131-chip--push     { background: #efeaf5; color: #5b3f8a; border: 1px solid #d3c5e3; }

.kn131-chip--prio-urgent { background: #fbe8e6; color: #a8302b; border: 1px solid #e9b4ae; }
.kn131-chip--prio-high   { background: #fbf1e0; color: #b16300; border: 1px solid #ecd2a3; }
.kn131-chip--prio-normal { background: #eef4f9; color: #1f5e87; border: 1px solid #cfdde9; }
.kn131-chip--prio-low    { background: #f1f1f1; color: #666; border: 1px solid #ddd; }

.kn131-chip--st-queued    { background: #fff5d9; color: #8b6300; border: 1px solid #ecd693; }
.kn131-chip--st-failed    { background: #fbe8e6; color: #a8302b; border: 1px solid #e9b4ae; }
.kn131-chip--st-suppressed{ background: #f1f1f1; color: #666;    border: 1px solid #ddd; }

.kn131-row__bd {
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    margin-bottom: 6px;
    /* Soft text clamp — shows up to 3 lines, then ellipsis. The full
     * body was already truncated server-side at 200 chars, this just
     * keeps the row height predictable for very long single lines. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kn131-row__err {
    background: #fbe8e6;
    color: #6e1c17;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 3px;
    margin: 4px 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kn131-row__err i { font-size: 13px; }
.kn131-row__meta {
    color: #9a9a9a;
    font-size: 11px;
}
.kn131-row__user, .kn131-row__event {
    color: #777;
}
.kn131-row__user i { font-size: 12px; vertical-align: middle; }

/* Right-edge unread dot — same gold accent as the bell panel. */
.kn131-row__dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bb913b;
    box-shadow: 0 0 0 2px #fdf6e0;
}
.kn131-row--urgent .kn131-row__dot { background: #a8302b; box-shadow: 0 0 0 2px #fdf6e0; }
.kn131-row--high   .kn131-row__dot { background: #d98b0b; box-shadow: 0 0 0 2px #fdf6e0; }

/* Empty state — friendly stub when no rows match the filters. */
.kn131-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
}
.kn131-empty i { font-size: 56px; color: #c8c8c8; }
.kn131-empty-ti {
    font-size: 16px;
    color: #555;
    margin-top: 12px;
    font-weight: 600;
}
.kn131-empty-tx {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
    line-height: 1.5;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Pagination footer — Prev / Next + page meta. Pinned at the bottom
 * via flex-shrink:0 same way the header is pinned at the top. */
.kn131-foot {
    flex-shrink: 0;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kn131-page-meta {
    color: #777;
    font-size: 12px;
}
.kn131-page-nav {
    display: flex;
    gap: 8px;
}

/* =====================================================================
 * Notification Preferences page (kprocess_132 — System Setting → My Notification Preferences)
 * ---------------------------------------------------------------------
 * Same visual family as kn131 (cream + gold theme + soft separators).
 * Layout is a single matrix table: events × channels with toggle cells.
 * The wildcard "All events" row gets a subtle gold tint so users see
 * it as the master row that overrides specific events when no specific
 * row exists.
 * ===================================================================== */
.kn132-pg {
    width: 100%;
    height: 100%;
    background: #fafaf6;
    color: #222;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.kn132-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
}
.kn132-ttl {
    font-size: 16px;
    font-weight: 600;
    color: #2a2f3a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kn132-ttl i { font-size: 22px; color: #bb913b; }
.kn132-head-actions { display: flex; gap: 8px; }
.kn132-btn {
    cursor: pointer;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .12s, border-color .12s, color .12s;
}
.kn132-btn:hover { background: #f3eedf; border-color: #bb913b; color: #6b521f; }
.kn132-btn i { font-size: 14px; }

.kn132-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px;
}
.kn132-intro {
    color: #555;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.5;
}
.kn132-intro em { color: #6b521f; font-style: normal; font-weight: 600; }

.kn132-table-wrap {
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    overflow: hidden;
}
.kn132-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kn132-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
    font-weight: 600;
    color: #555;
    font-size: 12px;
}
.kn132-col-chan {
    text-align: center !important;
    width: 110px;
}
.kn132-table thead th i { font-size: 14px; color: #bb913b; vertical-align: middle; margin-right: 4px; }

.kn132-table tbody tr { border-bottom: 1px solid #f3efe0; }
.kn132-table tbody tr:last-child { border-bottom: 0; }
.kn132-table td { padding: 10px 12px; vertical-align: middle; }
.kn132-table td.kn132-col-chan { text-align: center; }

/* Wildcard row — gold-cream tint + bolder label so it reads as the
 * master / fallback configuration. */
.kn132-row-wild td { background: #fdf6e0; }
.kn132-row-wild .kn132-col-event { color: #4d3a14; }

.kn132-row-empty td {
    color: #888;
    text-align: center;
    padding: 24px 16px;
    background: #fafafa;
}
.kn132-row-empty i { font-size: 16px; color: #bb913b; vertical-align: middle; }

.kn132-meta {
    color: #999;
    font-size: 11px;
    margin-left: 6px;
}
.kn132-table code {
    background: #f3efe0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: #4d3a14;
}

/* Toggle cell — circular pill, gold when ON, grey when OFF. The whole
 * cell is the click target via the renderer's onclick on the span. */
.kn132-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.kn132-toggle i { font-size: 18px; }
.kn132-toggle:hover { transform: scale(1.06); }
.kn132-toggle--on  { background: #bb913b; border-color: #bb913b; color: #fff; }
.kn132-toggle--on:hover  { background: #a07a2e; border-color: #a07a2e; }
.kn132-toggle--off { background: #fff; border-color: #ddd; color: #aaa; }
.kn132-toggle--off:hover { border-color: #bb913b; color: #888; }

/* =====================================================================
 * Notification Templates admin page (kprocess_133)
 * ---------------------------------------------------------------------
 * Same cream + gold visual family as kn131 / kn132. Three-zone layout:
 *   1. header   (title + Add / Refresh)
 *   2. filters  (multi-combos, search, status pills) + form slot
 *   3. body     (scrollable card list)
 *   4. footer   (pagination)
 * The form slot stays empty until the user clicks Edit / Add — at
 * which point kn133Edit / kn133New rdrawal an inline form into it
 * above the list, so admins can keep the list in view while editing.
 * ===================================================================== */
.kn133-pg {
    width: 100%;
    height: 100%;
    background: #fafaf6;
    color: #222;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Position context for the form-slot overlay (modal popup) so the
     * backdrop covers exactly this page area, not the whole tab shell. */
    position: relative;
}
.kn133-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
}
.kn133-ttl {
    font-size: 16px;
    font-weight: 600;
    color: #2a2f3a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kn133-ttl i { font-size: 22px; color: #bb913b; }
.kn133-total {
    background: #ebe6d6;
    color: #6b521f;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 4px;
}
.kn133-head-actions { display: flex; gap: 8px; }

.kn133-filters {
    flex-shrink: 0;
    padding: 8px 18px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Each filter row is a deliberate horizontal flex — keeps controls
 * on one line and matches the visual layout of kn131 / Account panels. */
.kn133-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kn133-mc-slot {
    flex: 0 0 auto;
    width: 180px;
}
.kn133-mc-slot .k-mc-wrap { width: 100%; }
.kn133-mc-slot .k-mc-display {
    font-size: 12px;
    padding: 5px 10px;
    height: 30px;
    line-height: 18px;
    box-sizing: border-box;
}

/* Native <select> — explicit dimensions so it doesn't inherit
 * .kn133-input's width:100% via accidental class collision and end
 * up taking a whole row. */
.kn133-filters .kn133-select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 28px 0 10px;
    font-size: 12px;
    color: #555;
    width: 150px;
    height: 30px;
    box-sizing: border-box;
    cursor: pointer;
    /* Disable the default native chevron in some browsers, replace
     * with our own gold one drawn via background-image so the
     * visual matches the multi-combo dropdown to the left. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23bb913b' d='M2 4l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}
.kn133-filters .kn133-select:hover { border-color: #bb913b; }
.kn133-filters .kn133-select:focus { outline: none; border-color: #bb913b; }

.kn133-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.kn133-pill {
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 12px;
    color: #555;
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.kn133-pill:hover { background: #f3eedf; border-color: #bb913b; color: #6b521f; }
.kn133-pill--active {
    background: #bb913b;
    border-color: #bb913b;
    color: #fff;
    font-weight: 600;
}
.kn133-pill--active:hover { background: #a07a2e; border-color: #a07a2e; color: #fff; }

.kn133-search {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    color: #222;
    flex: 1 1 200px;
    min-width: 160px;
}
.kn133-search:focus { outline: none; border-color: #bb913b; }

.kn133-btn {
    cursor: pointer;
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.kn133-btn i { font-size: 14px; }
.kn133-btn:hover { background: #f3eedf; border-color: #bb913b; color: #6b521f; }
.kn133-btn--primary {
    background: #bb913b;
    color: #fff;
    border-color: #bb913b;
}
.kn133-btn--primary:hover { background: #a07a2e; border-color: #a07a2e; color: #fff; }
.kn133-btn--small { padding: 5px 8px; }
.kn133-btn--danger { color: #a8302b; }
.kn133-btn--danger:hover { background: #fbe8e6; border-color: #a8302b; color: #6e1c17; }
.kn133-btn--disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.kn133-btn--loading { opacity: 0.7; pointer-events: none; }

/* Form slot — internal modal popup. When empty it's invisible (zero
 * footprint, doesn't push the list down). When the user clicks
 * Edit / Add, the server fills it with the form HTML and the
 * :not(:empty) rules below promote it to a centered overlay covering
 * the whole .kn133-pg page area.
 *
 * Backdrop click closes the popup (wired via the slot's onclick).
 * Inner card stops the click bubble so clicks INSIDE the form don't
 * close it. */
.kn133-form-slot:empty { display: none; }
.kn133-form-slot:not(:empty) {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(20, 18, 12, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
    animation: kn133-form-fade .15s ease-out both;
}
@keyframes kn133-form-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.kn133-form {
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 8px;
    overflow: hidden;
    width: min(820px, 100%);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10);
    animation: kn133-form-pop .18s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes kn133-form-pop {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.kn133-form-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn133-form-ttl {
    font-weight: 600;
    color: #2a2f3a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kn133-form-ttl i { font-size: 18px; color: #bb913b; }
.kn133-form-close {
    cursor: pointer;
    color: #888;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}
.kn133-form-close:hover { background: rgba(0,0,0,0.06); color: #333; }

.kn133-form-body {
    /* Body scrolls inside the modal so the head + foot stay fixed at
     * the top/bottom of the popup card. flex:1 fills remaining height
     * inside the kn133-form column (head + foot are flex:0). */
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}
.kn133-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.kn133-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.kn133-form-field > span {
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    letter-spacing: 0.02em;
}
.kn133-form-field > span small {
    font-weight: 400;
    color: #999;
    font-size: 10px;
    margin-left: 4px;
}
.kn133-form-section-ttl {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3efe0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn133-form-section-ttl i { color: #bb913b; font-size: 14px; }
.kn133-form-section-ttl small {
    font-weight: 400;
    color: #999;
    font-size: 10px;
    margin-left: 4px;
}

.kn133-input {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.kn133-input:focus { outline: none; border-color: #bb913b; }
.kn133-textarea {
    font-family: 'Consolas','Menlo','monospace';
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
}

.kn133-form-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
}

/* ====================================================================
 * View popup (read-only details + body preview). Reuses the .kn133-form
 * modal shell (kn133_render_view applies the .kn133-vw modifier), so
 * positioning / backdrop / scrolling all come for free from the form
 * styles above. These rules just style the read-only content layout.
 * ==================================================================== */
.kn133-vw-headname {
    color: #888;
    font-weight: 500;
    margin-left: 4px;
}
.kn133-vw-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Each section gets a soft visual break — admins skim long view popups
 * by scrolling, so distinct sections matter more than packing density. */
.kn133-vw-section {
    padding: 12px 0;
    border-bottom: 1px dashed #ebe6d6;
}
.kn133-vw-section:last-child { border-bottom: 0; }
.kn133-vw-section:first-child { padding-top: 4px; }

/* Routing chips row. Compact, scannable. */
.kn133-vw-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.kn133-vw-chip-label {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}
.kn133-vw-chip-label:not(:first-child) { margin-left: 8px; }
.kn133-vw-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: #f5efe0;
    color: #6b521f;
    border: 1px solid #ebe1c4;
}
.kn133-vw-chip--global { background: #fff7df; color: #856200; border-color: #f0e0a8; }
.kn133-vw-chip--branch { background: #eef3fb; color: #2f5891; border-color: #c8d8ee; }
.kn133-vw-chip--event  { background: #f0eaf8; color: #553a87; border-color: #d6c8ec; font-family: 'Consolas','Menlo','monospace'; font-size: 11px; }
.kn133-vw-chip--key    { background: #eef9ec; color: #2c6b2c; border-color: #c5e3c1; font-family: 'Consolas','Menlo','monospace'; font-size: 11px; }
.kn133-vw-chip--prio-low    { background: #f0f0f0; color: #666; }
.kn133-vw-chip--prio-normal { background: #eef3fb; color: #2f5891; border-color: #c8d8ee; }
.kn133-vw-chip--prio-high   { background: #fff1e0; color: #92531a; border-color: #f3d8ad; }
.kn133-vw-chip--prio-urgent { background: #fce4e2; color: #913129; border-color: #f0bdb6; }

/* Description / tags / footer — key/value rows. */
.kn133-vw-meta-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.kn133-vw-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.kn133-vw-meta-k {
    font-size: 10px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 110px;
    flex: 0 0 auto;
}
.kn133-vw-meta-k i { font-size: 12px; vertical-align: text-bottom; }
.kn133-vw-meta-v {
    font-size: 13px;
    color: #333;
    flex: 1 1 200px;
}
.kn133-vw-meta-v code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    color: #6b521f;
}
.kn133-vw-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
}

/* Telemetry tiles — at-a-glance counters. */
.kn133-vw-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.kn133-vw-tile {
    background: #fdfbf5;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    padding: 10px 12px;
    text-align: center;
}
.kn133-vw-tile-n {
    font-size: 18px;
    font-weight: 700;
    color: #2a2f3a;
    line-height: 1.1;
}
.kn133-vw-tile-n small {
    font-size: 11px;
    font-weight: 500;
    color: #999;
    margin-left: 2px;
}
.kn133-vw-tile-l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-top: 2px;
    font-weight: 600;
}
.kn133-vw-tile--ok   { background: #f3f9f3; border-color: #c5e3c1; }
.kn133-vw-tile--ok   .kn133-vw-tile-n { color: #2c6b2c; }
.kn133-vw-tile--err  { background: #fdf3f1; border-color: #f0c7c0; }
.kn133-vw-tile--err  .kn133-vw-tile-n { color: #913129; }
.kn133-vw-tile--time { background: #fafaf6; }

/* Two-column raw vs preview. Falls back to single-column on narrow
 * widths (auto-fit + minmax keeps the breakpoint fluid). */
.kn133-vw-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.kn133-vw-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.kn133-vw-col-k {
    font-size: 10px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn133-vw-text {
    background: #fdfbf5;
    border: 1px solid #ebe6d6;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    color: #333;
    word-break: break-word;
}
.kn133-vw-pre {
    background: #fdfbf5;
    border: 1px solid #ebe6d6;
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'Consolas','Menlo','monospace';
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 320px;
    overflow: auto;
}
/* Rendered-preview variant — slight tint so admins distinguish at a
 * glance from the raw template. */
.kn133-vw-preview {
    background: #f7fbf5;
    border-color: #cfe6c5;
    color: #1f4a1f;
}

.kn133-vw-warn {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff7df;
    border: 1px solid #f0e0a8;
    border-radius: 4px;
    font-size: 12px;
    color: #6b521f;
}
.kn133-vw-warn i { color: #b58a1c; vertical-align: text-bottom; margin-right: 4px; }

.kn133-vw-empty {
    color: #aaa;
    font-style: italic;
    font-size: 12px;
}

.kn133-vw-audit {
    background: #fafaf6;
    margin: 10px -16px -14px;
    padding: 10px 16px !important;
    border-top: 1px solid #ebe6d6 !important;
    border-bottom: 0 !important;
    color: #888;
    font-size: 11.5px;
}
.kn133-vw-audit-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.kn133-vw-audit-line i { color: #bb913b; font-size: 13px; }
.kn133-vw-audit-line b { color: #555; font-weight: 600; }

/* ====================================================================
 * kn134 — My Account page (kprocess_134.php). Single-column stacked
 * cards (Profile / Security / Preferences / Notifications matrix)
 * with per-card Save buttons. Visual language matches kn131-133:
 *  - amber accent for primary actions (#bb913b family)
 *  - cream backgrounds (#fafaf6 / #fdfbf5)
 *  - border-radius 6px on cards, 4px on inputs
 * ==================================================================== */
.kn134-pg {
    width: 100%;
    height: 100%;
    background: #fafaf6;
    color: #222;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.kn134-head {
    flex-shrink: 0;
    padding: 18px 24px 12px;
    border-bottom: 1px solid #ebe6d6;
    background: #fdfbf5;
}
.kn134-ttl {
    display: flex; align-items: center; gap: 8px;
    font-size: 18px; font-weight: 600; color: #2a2f3a;
}
.kn134-ttl i { font-size: 22px; color: #bb913b; }
.kn134-sub { font-size: 12px; color: #777; margin-top: 4px; }

.kn134-flash {
    /* Lives INSIDE the right body column — no horizontal margin so it
     * spans the body's padding box (same width as the section cards
     * below it). max-width matches the panel max-width so the banner
     * doesn't get wider than the content it's reporting about on
     * very wide screens. */
    margin: 0 0 14px;
    max-width: 900px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kn134-flash-icon { font-size: 18px; flex: 0 0 auto; }
/* Message takes the remaining width so the X stays pinned to the right
 * edge regardless of message length. word-break wraps long error
 * strings cleanly instead of pushing the close button off-banner. */
.kn134-flash-msg { flex: 1 1 auto; word-break: break-word; }
/* Close (X) — borderless icon button, faded until hover. Padding
 * keeps the click target ~24px square (a11y minimum) without making
 * the banner taller. */
.kn134-flash-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px;
    margin: -2px;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    line-height: 1;
    border-radius: 4px;
    transition: opacity .12s ease, background .12s ease;
}
.kn134-flash-close:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.kn134-flash-close i { font-size: 18px; vertical-align: middle; }
.kn134-flash--ok    { background: #f3f9f3; border: 1px solid #c5e3c1; color: #2c6b2c; }
.kn134-flash--ok    .kn134-flash-icon { color: #4d9a4d; }
.kn134-flash--error { background: #fdf3f1; border: 1px solid #f0c7c0; color: #913129; }
.kn134-flash--error .kn134-flash-icon { color: #b34a3f; }

/* Shell — left nav rail (220px) + right body. Flex layout fills the
 * remaining height under the header so the nav stays visible while
 * the body scrolls independently. */
.kn134-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Left navigation rail */
.kn134-nav {
    flex: 0 0 220px;
    width: 220px;
    background: #fdfbf5;
    border-right: 1px solid #ebe6d6;
    padding: 12px 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kn134-nav-it {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    color: #555;
    transition: background .12s ease, color .12s ease;
}
.kn134-nav-it:hover { background: #f5efe0; color: #6b521f; }
.kn134-nav-it i {
    font-size: 18px;
    color: #888;
    flex: 0 0 auto;
    transition: color .12s ease;
}
.kn134-nav-it:hover i { color: #bb913b; }
.kn134-nav-it-txt { display: flex; flex-direction: column; min-width: 0; }
.kn134-nav-it-l { font-size: 13px; font-weight: 600; color: inherit; }
.kn134-nav-it-s { font-size: 11px; color: #999; margin-top: 1px; }
.kn134-nav-it--active {
    background: #fff;
    color: #6b521f;
    border: 1px solid #ebe1c4;
    box-shadow: 0 1px 2px rgba(187,145,59,0.06);
}
.kn134-nav-it--active i { color: #bb913b; }
.kn134-nav-it--active .kn134-nav-it-l { color: #4d3a14; }
.kn134-nav-it--active .kn134-nav-it-s { color: #b58a1c; }

/* Right body — scrolls independently from the nav */
.kn134-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
    background: #fafaf6;
}

/* Section panel — TRUE per-section lazy load: only the ACTIVE section is
 * ever emitted into the content sub-stage, so the single panel is always
 * shown. (display:none default kept as a belt-and-braces guard.) */
.kn134-panel {
    display: none;
    max-width: 900px;
    flex-direction: column;
    gap: 14px;
    animation: kn134-panel-in .15s ease-out both;
}
.kn134-panel--active { display: flex; }
@keyframes kn134-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lazy-load placeholder — shown in the content sub-stage between a nav
 * click and the server render that replaces it. */
.kn134-body-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: #a89968;
    font-size: 14px;
}
.kn134-body-loading i { font-size: 20px; }

/* Section card */
.kn134-card {
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    overflow: hidden;
}
.kn134-card-head {
    padding: 14px 18px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn134-card-ttl {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: #2a2f3a;
}
.kn134-card-ttl i { font-size: 18px; color: #bb913b; }
.kn134-card-sub { font-size: 12px; color: #888; margin-top: 4px; }
.kn134-card-body { padding: 16px 18px; }
.kn134-card-foot {
    padding: 10px 18px;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Sub-section (within Security card) */
.kn134-sub-ttl {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.kn134-sub-ttl i { font-size: 14px; color: #bb913b; }

.kn134-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.kn134-form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Preferences grid — fixed 3-column layout (auto-fit gives 1/2/3 cols
 * depending on viewport). align-items:start stops cells stretching to
 * match the tallest, so a longer help line on Timezone doesn't add
 * blank space below Language/Theme. */
.kn134-form-grid--prefs {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    row-gap: 16px;
}

/* Helper text under an input/select. Replaces the older inline
 * <small> inside the label, which inflated the label row when it
 * wrapped and made sibling cells unevenly tall. Kept compact, grey,
 * and free-flowing — wraps without affecting any other cell. */
.kn134-field-help {
    margin-top: 4px;
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}
.kn134-field-help b { color: #6b521f; font-weight: 600; }

.kn134-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kn134-field > span {
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    letter-spacing: 0.02em;
}
.kn134-field > span small {
    font-weight: 400;
    color: #999;
    font-size: 10px;
    margin-left: 4px;
}

.kn134-input {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 13px;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .1s ease, box-shadow .1s ease;
}
.kn134-input:focus {
    outline: none;
    border-color: #bb913b;
    box-shadow: 0 0 0 2px rgba(187,145,59,0.15);
}
.kn134-select { cursor: pointer; }
.kn134-textarea {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
    padding: 8px 10px;
}

/* ====================================================================
 * Password change form — stacked vertical layout (replaces the 3-up
 * grid that used to live here). Each field full-width so the New
 * password slot has room for its strength meter + checklist without
 * making sibling fields uneven.
 * ==================================================================== */
.kn134-pw-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
}

/* Wrapper that lets the show/hide toggle sit on top of the input
 * (absolute positioned). Padding-right on the input itself keeps
 * the typed text from running under the icon. */
.kn134-pw-wrap {
    position: relative;
    width: 100%;
}
.kn134-pw-input { padding-right: 36px !important; }
.kn134-pw-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #999;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .12s ease, background .12s ease;
}
.kn134-pw-toggle:hover { color: #6b521f; background: rgba(0,0,0,0.04); }
.kn134-pw-toggle i { font-size: 16px; line-height: 1; }

/* Strength meter — 5 segments. Each <span> is one segment. The
 * data-level attribute on the parent (.kn134-pw-meter) lights up
 * the first N segments + sets the colour. */
.kn134-pw-meter {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kn134-pw-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    height: 6px;
}
.kn134-pw-bars span {
    background: #ebe6d6;
    border-radius: 3px;
    transition: background .15s ease;
}
.kn134-pw-meter[data-level="1"] .kn134-pw-bars span:nth-child(-n+1),
.kn134-pw-meter[data-level="2"] .kn134-pw-bars span:nth-child(-n+2),
.kn134-pw-meter[data-level="3"] .kn134-pw-bars span:nth-child(-n+3),
.kn134-pw-meter[data-level="4"] .kn134-pw-bars span:nth-child(-n+4),
.kn134-pw-meter[data-level="5"] .kn134-pw-bars span:nth-child(-n+5) { background: currentColor; }

/* Colour ramps — red → amber → green as the score climbs. */
.kn134-pw-meter[data-level="0"] { color: #ccc; }
.kn134-pw-meter[data-level="1"] { color: #c0392b; }   /* very weak — red */
.kn134-pw-meter[data-level="2"] { color: #d8853b; }   /* weak — orange */
.kn134-pw-meter[data-level="3"] { color: #d8b53b; }   /* fair — yellow */
.kn134-pw-meter[data-level="4"] { color: #6ba83b; }   /* good — light green */
.kn134-pw-meter[data-level="5"] { color: #2c8c2c; }   /* strong — green */

.kn134-pw-meter-label {
    font-size: 11px;
    font-weight: 600;
    color: currentColor;
    letter-spacing: 0.02em;
}

/* Live rule checklist. Required rules carry a red "(required)" tag
 * until satisfied; bonus rules carry a grey "(recommended)" tag.
 * The icon flips from bx-circle to bx-check-circle as each rule
 * passes (set in JS). */
.kn134-pw-checks {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: #888;
}
.kn134-pw-checks li {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .12s ease;
}
.kn134-pw-checks li i {
    font-size: 14px;
    color: #ccc;
    flex: 0 0 auto;
    transition: color .12s ease;
}
.kn134-pw-checks li.kn134-pw-check--ok        { color: #2c6b2c; }
.kn134-pw-checks li.kn134-pw-check--ok i      { color: #4d9a4d; }
.kn134-pw-required { color: #c0392b; font-size: 10.5px; font-weight: 500; }
.kn134-pw-bonus    { color: #999;    font-size: 10.5px; font-style: italic; }
.kn134-pw-checks li.kn134-pw-check--ok .kn134-pw-required,
.kn134-pw-checks li.kn134-pw-check--ok .kn134-pw-bonus  { color: #4d9a4d; font-style: normal; }

/* Confirm-match indicator — green tick / red x line under Confirm. */
.kn134-pw-match {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kn134-pw-match i { font-size: 14px; }
.kn134-pw-match--ok  { color: #2c6b2c; }
.kn134-pw-match--err { color: #c0392b; }

/* Read-only context strip under Profile fields */
.kn134-readout {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fafaf6;
    border: 1px dashed #ebe6d6;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 16px;
}
.kn134-readout-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 8px;
}
.kn134-readout-it {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.kn134-readout-k {
    font-size: 10px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn134-readout-v { font-size: 13px; color: #444; }
.kn134-readout-v code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    color: #6b521f;
}

/* Hint paragraphs (under 2FA / Notifications descriptions) */
.kn134-hint {
    font-size: 12.5px;
    color: #777;
    line-height: 1.55;
}

/* Status chips */
.kn134-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn134-chip--active   { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }
.kn134-chip--passive  { background: #f0f0f0; color: #666;    border-color: #d4d4d4; }
.kn134-chip--disabled { background: #fdf3f1; color: #913129; border-color: #f0c7c0; }
.kn134-chip--on       { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }
.kn134-chip--off      { background: #f0f0f0; color: #777;    border-color: #d4d4d4; }

/* Inline foot (used for sub-sections inside Security card) */
.kn134-row-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Buttons — same family as kn131-133 */
.kn134-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all .12s ease;
}
.kn134-btn:hover { border-color: #bb913b; color: #6b521f; background: #fdfbf5; }
.kn134-btn i { font-size: 16px; }
.kn134-btn--primary {
    background: #bb913b;
    border-color: #a47e2f;
    color: #fff;
}
.kn134-btn--primary:hover { background: #a47e2f; border-color: #8c6824; color: #fff; }
.kn134-btn--disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.kn134-btn--loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.kn134-btn--loading::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kn134-spin .7s linear infinite;
}
@keyframes kn134-spin { to { transform: rotate(360deg); } }

.kn134-empty {
    padding: 60px 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Profile photo widget (in the Profile panel). Image left, action
 * column right. The .k114-profile-img / .k114-profile-placeholder
 * classes come from kprocess_114's stylesheet so the photo renders
 * with the SAME visual treatment in both places — kept on purpose
 * to keep two pages reading "the same photo" consistently. */
.kn134-photo-card { /* tighter padding than the form cards */ }
.kn134-photo-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.kn134-photo-wrap {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5efe0;
    border: 2px solid #ebe1c4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kn134-photo-wrap > div { width: 100%; height: 100%; }
.kn134-photo-wrap img.k114-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kn134-photo-wrap .k114-profile-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: #b58a1c;
    background: #fdfbf5;
}

.kn134-photo-actions {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
/* The "Change photo" / "Upload photo" button is a label wrapping
 * a hidden file input. Hide the input visually but keep it in the
 * DOM so the click on the label still triggers the picker. */
.kn134-photo-file {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.kn134-photo-hint {
    flex-basis: 100%;
    color: #999;
    font-size: 11.5px;
    margin-top: 2px;
}

/* ====================================================================
 * Notification preferences matrix (embedded inline in My Account →
 * Notifications). Visual goals:
 *   - Channel header column reads as a vertical stack: icon over
 *     channel name, so long names like WHATSAPP don't wrap awkwardly
 *     under the icon
 *   - Channel cells fixed width so toggles align in clean columns
 *   - Wildcard "All events" row tinted but not garish
 *   - Empty state uses the page's existing kn134-empty look (not
 *     italic body text inside a plain table cell)
 * ==================================================================== */
.kn134-pref-table-wrap {
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    overflow: auto;
    max-height: 480px;
    background: #fff;
}
.kn134-pref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kn134-pref-table thead th {
    position: sticky;
    top: 0;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    letter-spacing: 0.04em;
    z-index: 2;
    white-space: nowrap;
}
.kn134-pref-table thead th.kn134-pref-event {
    text-align: left;
    text-transform: uppercase;
    padding-left: 14px;
}
/* Channel header columns — center the icon ABOVE the channel name
 * so long names like WHATSAPP don't squish or wrap. */
.kn134-pref-table thead th.kn134-pref-cell {
    text-align: center;
    text-transform: uppercase;
    line-height: 1.25;
    padding-top: 8px;
    padding-bottom: 8px;
}
.kn134-pref-table thead th.kn134-pref-cell i {
    display: block;
    font-size: 16px;
    color: #bb913b;
    margin: 0 auto 2px;
}

.kn134-pref-table tbody tr { border-bottom: 1px solid #f3efe0; }
.kn134-pref-table tbody tr:last-child { border-bottom: 0; }
.kn134-pref-table tbody tr:hover { background: #fdfbf5; }
.kn134-pref-table td { padding: 8px 8px; vertical-align: middle; }
.kn134-pref-table td.kn134-pref-event {
    text-align: left;
    padding-left: 14px;
}
.kn134-pref-event {
    width: auto;
    color: #444;
}
.kn134-pref-event code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    color: #6b521f;
}
.kn134-pref-meta {
    color: #999;
    font-size: 11px;
    margin-left: 4px;
    font-weight: 400;
}
/* Channel cells — fixed width so the toggle pills line up vertically
 * across rows. min-width keeps them readable on narrow viewports. */
.kn134-pref-cell {
    text-align: center;
    width: 80px;
    min-width: 70px;
}

/* Wildcard "All events" row — soft amber tint to mark the
 * everything-row, but kept subtle so it doesn't shout. */
.kn134-pref-row-wild {
    background: #fff7df;
}
.kn134-pref-row-wild:hover { background: #fff3cc; }
.kn134-pref-row-wild td { font-weight: 500; }

/* Empty state — friendly inline message instead of an italic table
 * row that looks like an error. Centered, neutral grey, with a
 * light-bulb icon. */
.kn134-pref-row-empty:hover { background: transparent; }
.kn134-pref-row-empty td {
    padding: 28px 18px !important;
    text-align: center;
    color: #888;
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.5;
}
.kn134-pref-row-empty i {
    display: block;
    color: #c8b46a;
    font-size: 32px;
    margin-bottom: 8px;
}
.kn134-pref-empty-ti {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.kn134-pref-empty-tx {
    font-size: 12.5px;
    color: #999;
    line-height: 1.55;
    max-width: 440px;
    margin: 0 auto;
}
.kn134-pref-empty-tx b { color: #6b521f; font-weight: 600; }

/* ====================================================================
 * kn134 Approval Signature panel — ported from the staff app
 * (kprocess_19). Warm-gold palette to match the rest of My Account.
 * Four controls: mode segmented control, saved-signature row, PIN row,
 * and the 24h emergency-lock row + banner. Sheets are body-level popups.
 * ==================================================================== */

/* ---- Emergency-lock banner ---------------------------------------- */
/* Approval signature — "not linked to a staff signing profile" notice. */
.kn134-sig-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #eef4ff 0%, #f6f9ff 100%);
    border: 1px solid rgba(56, 108, 214, .28);
    border-radius: 10px;
}
.kn134-sig-notice-ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(56, 108, 214, .14);
    color: #2f5fc0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.kn134-sig-notice-body {
    flex: 1 1 auto;
    min-width: 0;
    color: #33507f;
    font-size: 12.5px;
    line-height: 1.45;
}
.kn134-sig-lockbanner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #fff3e0 0%, #fff8eb 100%);
    border: 1px solid rgba(210, 138, 26, .32);
    border-radius: 10px;
}
.kn134-sig-lockbanner-ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(210, 138, 26, .16);
    color: #b06a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.kn134-sig-lockbanner-body { flex: 1 1 auto; min-width: 0; }
.kn134-sig-lockbanner-body b { color: #6c4a08; font-size: 13.5px; display: block; line-height: 1.2; }
.kn134-sig-lockbanner-sub { color: #8a6c2a; font-size: 11.5px; margin-top: 3px; line-height: 1.3; }
.kn134-sig-unlock {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid rgba(210, 138, 26, .42);
    background: #fff;
    color: #b06a0a;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.kn134-sig-unlock:hover  { background: rgba(210, 138, 26, .10); }
.kn134-sig-unlock:active { transform: scale(.96); }

/* ---- Approval Mode segmented control ------------------------------ */
.kn134-sig-modeblk { margin: 0 0 6px; }
.kn134-sig-modelbl { font-size: 13px; font-weight: 600; color: #4d3a14; }
.kn134-sig-modelbl i { color: #bb913b; margin-right: 2px; }
.kn134-sig-modesub { font-size: 12px; color: #888; margin: 2px 0 8px; }
.kn134-sigmode-seg {
    display: flex;
    gap: 6px;
    background: rgba(192, 167, 109, .10);
    border: 1px solid rgba(192, 167, 109, .28);
    border-radius: 10px;
    padding: 4px;
}
.kn134-sigmode-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    border: 0;
    background: transparent;
    color: #4a3a14;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 8px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .12s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kn134-sigmode-btn:hover  { background: rgba(192, 167, 109, .18); }
.kn134-sigmode-btn:active { transform: scale(.97); }
.kn134-sigmode-btn--on {
    background: linear-gradient(180deg, #c0a76d, #8a6c2a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138, 108, 42, .28);
}
.kn134-sigmode-btn--on:hover { background: linear-gradient(180deg, #c0a76d, #8a6c2a); }

/* ---- Action rows (Saved Signature / PIN / Lock) ------------------- */
.kn134-sig-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-top: 1px solid #f0ead9;
    cursor: pointer;
    transition: background .12s ease;
}
.kn134-sig-row:hover { background: #fdfbf5; }
.kn134-sig-row--static { cursor: default; }
.kn134-sig-row--static:hover { background: transparent; }
.kn134-sig-row-txt { flex: 1 1 auto; min-width: 0; }
.kn134-sig-row-l { font-size: 13px; font-weight: 600; color: #4d3a14; }
.kn134-sig-row-l i { color: #bb913b; margin-right: 2px; }
.kn134-sig-row-s { font-size: 12px; color: #999; margin-top: 2px; }
.kn134-sig-chev { flex: 0 0 auto; color: #c3b48c; font-size: 20px; }
.kn134-sig-activate { flex: 0 0 auto; }

/* ---- Body-level sheet (popup) ------------------------------------- */
.kn134-sheet-ov {
    position: fixed;
    inset: 0;
    background: rgba(40, 30, 8, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10050;
    animation: kn134-sheet-fade .16s ease;
}
@keyframes kn134-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.kn134-sheet {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(40, 30, 8, .28);
    animation: kn134-sheet-rise .18s ease;
}
@keyframes kn134-sheet-rise { from { transform: translateY(10px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.kn134-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f0ead9;
    font-size: 15px;
    color: #4d3a14;
}
.kn134-sheet-x {
    border: 0;
    background: transparent;
    color: #b0a487;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.kn134-sheet-x:hover { color: #6b521f; }
.kn134-sheet-body { padding: 16px 18px 18px; }
.kn134-sheet-hint { font-size: 12.5px; color: #7a6a48; line-height: 1.5; margin-bottom: 14px; }
.kn134-sheet-field { margin-bottom: 12px; }
.kn134-sheet-field label { display: block; font-size: 12px; font-weight: 600; color: #4d3a14; margin-bottom: 5px; }
.kn134-pin-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #ddd6c4;
    border-radius: 8px;
    font-size: 18px;
    letter-spacing: .35em;
    color: #3a2e10;
    text-align: center;
}
.kn134-pin-input:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 3px rgba(187, 145, 59, .16); }
/*: 6-cell OTP-style PIN entry — one digit per box, plus a reveal toggle. */
.kn134-pin-row { display: flex; align-items: center; gap: 8px; }
.kn134-pin-cells { display: flex; gap: 6px; flex: 1 1 auto; }
.kn134-pin-cell {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 0;
    border: 1px solid #ddd6c4;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #3a2e10;
    caret-color: #bb913b;
}
.kn134-pin-cell:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 3px rgba(187, 145, 59, .16); }
.kn134-pin-eye {
    flex: 0 0 auto;
    width: 38px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd6c4;
    border-radius: 8px;
    background: #faf7ef;
    color: #7a6a48;
    cursor: pointer;
    font-size: 18px;
    transition: background .15s, color .15s, border-color .15s;
}
.kn134-pin-eye:hover { background: #f2ead6; color: #4d3a14; border-color: #cbbf9a; }
.kn134-sheet-forgot { font-size: 12px; color: #999; margin: 6px 0 2px; }
.kn134-sheet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.kn134-sheet-foot-danger { margin-top: 14px; text-align: right; }
.kn134-sig-removebtn {
    border: 1px solid #e2b4b4;
    background: #fff;
    color: #a33a3a;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.kn134-sig-removebtn:hover { background: #fbeded; }
.kn134-sig-removebtn i { margin-right: 3px; }

/* ---- Signature preview + pad (inside the sheet) ------------------- */
.kn134-sig-preview {
    border: 1px solid #f0ead9;
    border-radius: 10px;
    background: #fbf8f0;
    padding: 10px;
    margin-bottom: 12px;
    text-align: center;
}
.kn134-sig-preview img { max-width: 100%; max-height: 90px; }
.kn134-sig-preview--empty { color: #b0a487; font-size: 12.5px; padding: 22px 10px; }
/* Protected signature preview — the image is a BACKGROUND (not <img>) so it
   can't be dragged/saved, carries a viewer watermark, and hides when the
   window loses focus. Shared .kws_protected-img rules below drive it. */
.kn134-sig-preview-img {
    width: 100%;
    height: 120px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
}

/* ---- Shared protected-image (signature) anti-exfiltration styles ---------
   Watermark text is stamped via JS (data-watermark); the --blank class is
   toggled on blur/visibility change. See kws_protect_* in apps.js. */
.kws_protected-img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;            /* image layer can't be dragged/long-pressed */
    image-rendering: -webkit-optimize-contrast;
    position: relative;              /* for the ::after watermark */
    overflow: hidden;
}
.kws_protected-img::after {
    content: attr(data-watermark);   /* "EMP… · VIEW ONLY · <ts>" — set by JS */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.16);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transform: rotate(-22deg);
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 1px 1px 0 rgba(255,255,255,.40), -1px -1px 0 rgba(255,255,255,.40);
}
/* Blanked — window blurred / page hidden / PrintScreen: hide the signature
   and swap the watermark for a friendly "return focus" hint. */
.kws_protected-img.kws_protected-img--blank {
    background-image: none !important;
    background-color: rgba(192, 167, 109, 0.10);
}
.kws_protected-img.kws_protected-img--blank::after {
    content: 'Hidden — return focus to view';
    color: rgba(108, 74, 8, 0.55);
    transform: none;
    font-size: 12px;
    letter-spacing: .5px;
    text-shadow: none;
}
.kn134-sig-padwrap {
    border: 1px dashed #cdbf95;
    border-radius: 10px;
    background: #fffdf8;
    overflow: hidden;
}
.kn134-sig-pad {
    display: block;
    width: 100%;
    height: 160px;
    touch-action: none;
}

/* ====================================================================
 * kn117 Menu Management tab — embedded inline inside the Modules
 * detail view (pn_p117, action mod_menus). Lays out the 3 buckets
 * (in-this / available / locked-elsewhere) as cards with an inline
 * filter input and a sticky-style header row that carries the Save
 * button. NO popup overlay here — the content lives directly in
 * the tab pane the framework rdrawal'd into.
 * ==================================================================== */
.kn117-mm {
    /* Full width inside the tab pane, box-sizing so my padding
     * doesn't push the bounds out and trigger horizontal overflow.
     * overflow-x:hidden as a hard cap — long sysmenu_pro values
     * inside <code> tags were forcing the whole row wider than the
     * viewport in earlier renders. */
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #2a2f3a;
    overflow-x: hidden;
}
.kn117-mm * { box-sizing: border-box; }

/* Header strip — module mark + caption + Save button on the right.
 * flex-wrap lets the Save button drop to a second line on narrow
 * tab panes instead of forcing a horizontal scroll. */
.kn117-mm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fdfbf5;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}
.kn117-mm-mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.kn117-mm-mark i { font-size: 22px; }
.kn117-mm-head-text {
    flex: 1 1 200px;
    min-width: 0;
    /* Caption can be long; overflow-wrap + the parent's flex-wrap
     * keep it from punching the layout out horizontally. */
    overflow-wrap: anywhere;
}
.kn117-mm-head-ti {
    font-weight: 600;
    color: #2a2f3a;
    font-size: 14px;
}
.kn117-mm-head-sub {
    color: #888;
    font-size: 11.5px;
    margin-top: 2px;
}
.kn117-mm-head-sub b { color: #6b521f; font-weight: 600; }

.kn117-mm-save-wrap { flex: 0 0 auto; }
.kn117-mm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all .12s ease;
}
.kn117-mm-btn:hover { border-color: #bb913b; color: #6b521f; background: #fdfbf5; }
.kn117-mm-btn i { font-size: 16px; }
.kn117-mm-btn--primary {
    background: #bb913b;
    border-color: #a47e2f;
    color: #fff;
}
.kn117-mm-btn--primary:hover { background: #a47e2f; border-color: #8c6824; color: #fff; }
.kn117-mm-btn--loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.kn117-mm-btn--loading::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kn117-mm-spin .7s linear infinite;
}
@keyframes kn117-mm-spin { to { transform: rotate(360deg); } }

/* Hint banner explaining the buckets. */
.kn117-mm-hint {
    padding: 10px 12px;
    background: #fff7df;
    border: 1px solid #f0e0a8;
    border-radius: 5px;
    color: #6b521f;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.kn117-mm-hint i { color: #b58a1c; vertical-align: text-bottom; margin-right: 4px; }
.kn117-mm-hint b { color: #4d3a14; }

/* Filter input. */
.kn117-mm-search {
    position: relative;
    margin-bottom: 12px;
}
.kn117-mm-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #bb913b;
    font-size: 16px;
}
.kn117-mm-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
}
.kn117-mm-search input:focus {
    outline: none;
    border-color: #bb913b;
    box-shadow: 0 0 0 2px rgba(187,145,59,0.15);
}

/* Bucket — header strip + scrollable list of menu rows. */
.kn117-mm-group {
    margin-bottom: 12px;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.kn117-mm-group-ti {
    padding: 8px 12px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn117-mm-group-ti span { color: #999; font-weight: 500; margin-left: 4px; }
.kn117-mm-group--in        .kn117-mm-group-ti { background: #e3f5e7; color: #1d6420; border-bottom-color: #b6dcb0; }
.kn117-mm-group--unassigned .kn117-mm-group-ti { background: #fdfbf5; }
.kn117-mm-group--locked    .kn117-mm-group-ti { background: #f5f3ec; color: #777; }

/* Two-card shuttle layout — Selected on the left, Available on the
 * right. CSS grid splits the row 1:1; on narrow tab panes (under
 * ~640px) the cards stack vertically so each retains its own
 * scrollable list without one squishing the other. */
.kn117-mm-shuttle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
@media (max-width: 640px) {
    .kn117-mm-shuttle { grid-template-columns: 1fr; }
}
.kn117-mm-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    min-width: 0;
}
.kn117-mm-card-head {
    padding: 9px 12px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn117-mm-card-head i { font-size: 14px; color: #bb913b; }
.kn117-mm-card-count { color: #999; font-weight: 500; margin-left: auto; }
/* Selected card uses a soft green head — visual cue that "these are
 * the menus that will live in this module after Save". */
.kn117-mm-card--selected .kn117-mm-card-head { background: #e3f5e7; color: #1d6420; border-bottom-color: #b6dcb0; }
.kn117-mm-card--selected .kn117-mm-card-head i { color: #2c8c2c; }
/* Available card uses the neutral cream head — passive pool of
 * candidates the admin can pull into Selected. */
.kn117-mm-card--available .kn117-mm-card-head { background: #fdfbf5; }

.kn117-mm-card-empty {
    padding: 28px 18px;
    text-align: center;
    color: #999;
    font-size: 12.5px;
    line-height: 1.55;
}

/* Divider INSIDE the Available card that separates the unassigned
 * pool from the locked-in-other-modules group. */
.kn117-mm-locked-divider {
    padding: 6px 12px;
    background: #f5f3ec;
    border-top: 1px solid #ebe6d6;
    border-bottom: 1px solid #ebe6d6;
    font-size: 10.5px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kn117-mm-list {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}
.kn117-mm-it {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f3efe0;
    cursor: pointer;
    transition: background .08s ease;
    /* min-width:0 lets the row shrink below its content's natural
     * width (so `code` blocks don't drag the layout sideways);
     * width:100% makes sure flex sizing has a clean baseline. */
    width: 100%;
    min-width: 0;
}
.kn117-mm-it:last-child { border-bottom: 0; }
.kn117-mm-it:hover { background: #fdfbf5; }
.kn117-mm-it--locked {
    cursor: default;
    opacity: 0.65;
    background: #fafaf6;
}
.kn117-mm-it--locked:hover { background: #fafaf6; }

/* Pending-change tints — flipped on by kn117ModMenusMark when the
 * user ticks/unticks a row. Cleared on Save (whole tab re-renders).
 * Acts as a visual confirmation: "I clicked these, ready to save". */
.kn117-mm-it--pending-add {
    background: #ecf8ee;
    border-left: 3px solid #2c8c2c;
    padding-left: 9px;
}
.kn117-mm-it--pending-add:hover { background: #e0f3e2; }
.kn117-mm-it--pending-remove {
    background: #fdecea;
    border-left: 3px solid #c0392b;
    padding-left: 9px;
}
.kn117-mm-it--pending-remove:hover { background: #fbdedb; }
.kn117-mm-cb {
    margin: 3px 0 0;
    cursor: pointer;
    flex: 0 0 auto;
    accent-color: #bb913b;
    width: 16px;
    height: 16px;
}
.kn117-mm-it--locked .kn117-mm-cb { cursor: default; }
/* The text column. min-width:0 is critical here — without it, flex
 * children won't shrink below their natural content width, which is
 * what was making "Field Controls" wrap one-letter-per-line in
 * earlier renders (long <code> in meta forced a huge natural width). */
.kn117-mm-it-info {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.kn117-mm-it-cap {
    font-weight: 600;
    color: #2a2f3a;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    /* word-break:break-word handles unusually long single words in
     * captions; min-width:0 keeps the cap from forcing horizontal
     * overflow on the parent .kn117-mm-it-info. */
    word-break: break-word;
    min-width: 0;
}
.kn117-mm-it-cap em { font-style: italic; color: #aaa; font-weight: 400; }
.kn117-mm-it-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    /* overflow-wrap (modern) + word-break (older) belt-and-braces.
     * Long sysmenu_name / sysmenu_pro values inside <code> tags
     * have to break or they widen the row past the viewport. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.kn117-mm-it-meta code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 10.5px;
    /* break-all on inline code so a literal long token wraps
     * mid-string instead of overflowing the row. */
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.kn117-mm-it-other { color: #b58a1c; font-weight: 500; }

/* Module color/icon swatch shown inside each branch_modules row.
 * Sits between the checkbox and the text column so admins can spot
 * "the green Operations module" or "the red Administration module"
 * at a glance even with similar captions. Reuses the kn117-mm row
 * layout — the row is already a flex container with gap, so the
 * mark slots in naturally as the second child. */
.kn119-bm-mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.kn119-bm-mark i { font-size: 15px; }

/* Empty state when there are no menus to show at all. */
.kn117-mm-empty {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    background: #fff;
    border: 1px dashed #ebe6d6;
    border-radius: 6px;
}
.kn117-mm-empty i { font-size: 32px; color: #c8b46a; }
.kn117-mm-empty-ti { font-weight: 600; color: #555; margin-top: 8px; font-size: 14px; }
.kn117-mm-empty-tx { color: #999; font-size: 12px; margin-top: 4px; line-height: 1.5; max-width: 400px; margin-left: auto; margin-right: auto; }

/* ====================================================================
 * kn135 — Modules admin (kprocess_135.php). List + edit popup +
 * menu-assignment popup. Visual family matches kn133 (Notification
 * Templates) so admins build consistent muscle memory across pages.
 * ==================================================================== */
.kn135-pg {
    width: 100%;
    height: 100%;
    background: #fafaf6;
    color: #222;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}
.kn135-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
}
.kn135-ttl {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 600; color: #2a2f3a;
}
.kn135-ttl i { font-size: 20px; color: #bb913b; }
.kn135-total {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    color: #6b521f;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
}
.kn135-head-actions { display: flex; gap: 8px; }

.kn135-filters {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    flex-wrap: wrap;
}
.kn135-pills {
    display: inline-flex;
    border: 1px solid #ebe1c4;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}
.kn135-pill {
    padding: 6px 12px;
    cursor: pointer;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    border-right: 1px solid #ebe1c4;
    transition: background .12s ease, color .12s ease;
}
.kn135-pill:last-child { border-right: 0; }
.kn135-pill:hover { background: #fdfbf5; color: #6b521f; }
.kn135-pill--active { background: #bb913b; color: #fff; }
.kn135-pill--active:hover { background: #a47e2f; color: #fff; }
.kn135-search {
    flex: 1 1 220px;
    min-width: 200px;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
}
.kn135-search:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }

/* Body — list area */
.kn135-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    background: #fafaf6;
}
.kn135-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}
.kn135-empty i { font-size: 56px; color: #c8c8c8; }
.kn135-empty-ti { font-size: 16px; color: #555; margin-top: 12px; font-weight: 600; }
.kn135-empty-tx {
    font-size: 13px; color: #999; margin-top: 4px; line-height: 1.5;
    max-width: 400px; margin-left: auto; margin-right: auto;
}

/* List table */
.kn135-table-wrap {
    background: #fff;
    border-bottom: 1px solid #ebe6d6;
}
.kn135-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kn135-table thead th {
    position: sticky;
    top: 0;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    padding: 9px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
}
.kn135-table thead th.kn135-th-num    { text-align: right; }
.kn135-table thead th.kn135-th-actions { text-align: right; }
.kn135-th-id    { width: 60px;  color: #999 !important; }
.kn135-th-mark  { width: 56px;  text-align: center !important; }
.kn135-th-sortable { cursor: pointer; user-select: none; }
.kn135-th-sortable:hover { color: #4d3a14; }
.kn135-th-sorted { color: #4d3a14; }
.kn135-th-sortarr { font-size: 14px; vertical-align: middle; margin-left: 2px; color: #bb913b; }

.kn135-table tbody tr {
    border-bottom: 1px solid #f3efe0;
    transition: background .08s ease;
}
.kn135-table tbody tr:last-child { border-bottom: 0; }
.kn135-table tbody tr:hover { background: #fdf6e0; }
.kn135-table tbody tr.kn135-tr--archived { opacity: 0.55; background: #f5f3ec; }
.kn135-table tbody tr.kn135-tr--passive  { opacity: 0.75; }
.kn135-table td { padding: 8px 10px; vertical-align: middle; }
.kn135-td-id   { color: #999; font-family: 'Consolas','Menlo','monospace'; font-size: 11px; }
.kn135-td-mark { text-align: center; }
.kn135-td-num  { text-align: right; white-space: nowrap; color: #555; }
.kn135-td-name { color: #444; }
.kn135-name-pri { font-weight: 600; color: #2a2f3a; }
.kn135-name-sec { font-size: 11px; color: #888; margin-top: 1px; }
.kn135-name-sec code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 11px;
}
.kn135-td-actions { text-align: right; white-space: nowrap; }
.kn135-td-actions .kn135-btn { padding: 3px 6px; }
.kn135-td-actions .kn135-btn i { font-size: 13px; }

/* Color + icon "mark" tile — shown in list rows + assignment popup
 * head + form preview. The colour comes from inline style="background:"
 * so admins see their chosen colour live. */
.kn135-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.kn135-mark i { font-size: 18px; }
.kn135-mark--lg {
    width: 56px;
    height: 56px;
    border-radius: 10px;
}
.kn135-mark--lg i { font-size: 28px; }

/* Menu-count link in the list — clickable pill that opens the
 * assignment popup. Uses the gold theme tone. */
.kn135-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: #fdfbf5;
    border: 1px solid #ebe1c4;
    border-radius: 10px;
    color: #6b521f;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease;
}
.kn135-menu-link:hover { background: #f5efe0; border-color: #bb913b; }
.kn135-menu-link i { font-size: 13px; }

/* Status chips */
.kn135-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn135-chip--active   { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }
.kn135-chip--inactive { background: #fdecea; color: #913129; border-color: #f0c7c0; }
.kn135-chip--passive  { background: #f0f0f0; color: #666;    border-color: #d4d4d4; }
.kn135-chip--archived { background: #fff7df; color: #856200; border-color: #f0e0a8; }

/* Buttons */
.kn135-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all .12s ease;
}
.kn135-btn:hover { border-color: #bb913b; color: #6b521f; background: #fdfbf5; }
.kn135-btn i { font-size: 16px; }
.kn135-btn--primary {
    background: #bb913b;
    border-color: #a47e2f;
    color: #fff;
}
.kn135-btn--primary:hover { background: #a47e2f; border-color: #8c6824; color: #fff; }
.kn135-btn--small { padding: 5px 8px; font-size: 12px; }
.kn135-btn--small i { font-size: 14px; }
.kn135-btn--danger { color: #a8302b; }
.kn135-btn--danger:hover { background: #fbe8e6; border-color: #a8302b; color: #6e1c17; }
.kn135-btn--disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.kn135-btn--loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.kn135-btn--loading::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kn135-spin .7s linear infinite;
}
@keyframes kn135-spin { to { transform: rotate(360deg); } }

/* Form-slot popup — same pattern kn133 uses. Empty = invisible.
 * Populated = full overlay over the .kn135-pg shell. */
.kn135-form-slot:empty { display: none; }
.kn135-form-slot:not(:empty) {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(20, 18, 12, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
    animation: kn135-fade .15s ease-out both;
}
@keyframes kn135-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.kn135-form {
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 8px;
    overflow: hidden;
    width: min(720px, 100%);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10);
    animation: kn135-pop .18s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes kn135-pop {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.kn135-form.kn135-assign { width: min(820px, 100%); }
.kn135-form-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn135-form-ttl {
    font-weight: 600;
    color: #2a2f3a;
    display: flex;
    align-items: center;
    gap: 10px;
}
.kn135-form-ttl i { font-size: 18px; color: #bb913b; }
.kn135-form-close {
    cursor: pointer;
    color: #888;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}
.kn135-form-close:hover { background: rgba(0,0,0,0.06); color: #333; }

.kn135-form-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}
.kn135-form-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
}
.kn135-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
    align-items: start;
}
.kn135-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.kn135-field > span {
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    letter-spacing: 0.02em;
}
.kn135-field > span small {
    font-weight: 400;
    color: #999;
    font-size: 10px;
    margin-left: 4px;
}
.kn135-field-help {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
    margin-top: 2px;
}
.kn135-field-help a { color: #bb913b; }
.kn135-input {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 13px;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.kn135-input:focus {
    outline: none;
    border-color: #bb913b;
    box-shadow: 0 0 0 2px rgba(187,145,59,0.15);
}
.kn135-select { cursor: pointer; }
.kn135-textarea {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 50px;
    padding: 8px 10px;
}

/* Color row — picker swatch + hex text input side by side. */
.kn135-color-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.kn135-color-picker {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    flex: 0 0 auto;
}

/* Form-side preview tile. */
.kn135-form-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 12px;
    padding: 10px 12px;
    background: #fafaf6;
    border: 1px dashed #ebe6d6;
    border-radius: 5px;
}
.kn135-form-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===== Assignment popup ===== */
.kn135-assign-hint {
    font-size: 12.5px;
    color: #777;
    line-height: 1.5;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fff7df;
    border: 1px solid #f0e0a8;
    border-radius: 5px;
}
.kn135-assign-hint b { color: #6b521f; }

.kn135-assign-search {
    position: relative;
    margin-bottom: 12px;
}
.kn135-assign-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #bb913b;
    font-size: 16px;
}
.kn135-assign-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}
.kn135-assign-search input:focus {
    outline: none;
    border-color: #bb913b;
    box-shadow: 0 0 0 2px rgba(187,145,59,0.15);
}

.kn135-assign-group {
    margin-bottom: 14px;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    overflow: hidden;
}
.kn135-assign-group-ti {
    padding: 8px 12px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn135-assign-group-ti span { color: #999; font-weight: 500; margin-left: 4px; }
.kn135-assign-group--in .kn135-assign-group-ti        { background: #e3f5e7; color: #1d6420; border-bottom-color: #b6dcb0; }
.kn135-assign-group--unassigned .kn135-assign-group-ti{ background: #fdfbf5; }
.kn135-assign-group--locked .kn135-assign-group-ti    { background: #f5f3ec; color: #777; }
.kn135-assign-list {
    max-height: 280px;
    overflow-y: auto;
}
.kn135-assign-it {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f3efe0;
    cursor: pointer;
    transition: background .08s ease;
}
.kn135-assign-it:last-child { border-bottom: 0; }
.kn135-assign-it:hover { background: #fdfbf5; }
.kn135-assign-it--locked {
    cursor: default;
    opacity: 0.65;
    background: #fafaf6;
}
.kn135-assign-it--locked:hover { background: #fafaf6; }
.kn135-assign-cb {
    margin: 2px 0 0;
    cursor: pointer;
    flex: 0 0 auto;
    accent-color: #bb913b;
}
.kn135-assign-it--locked .kn135-assign-cb { cursor: default; }
.kn135-assign-it-info { min-width: 0; flex: 1 1 auto; }
.kn135-assign-it-cap { font-weight: 600; color: #2a2f3a; font-size: 13px; }
.kn135-assign-it-cap em { font-style: italic; color: #aaa; font-weight: 400; }
.kn135-assign-it-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    word-break: break-word;
}
.kn135-assign-it-meta code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 10.5px;
}
.kn135-assign-it-other { color: #b58a1c; font-weight: 500; }

/* Toggle pill — green=on, grey=off. Click flips. */
.kn134-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
    border: 1px solid transparent;
}
.kn134-toggle i { font-size: 18px; }
.kn134-toggle--on  { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }
.kn134-toggle--off { background: #f0f0f0; color: #999;    border-color: #d4d4d4; }
.kn134-toggle:hover { transform: scale(1.08); }

/* Segmented view toggle in the header — table/card switch. Pattern
 * mirrors the iOS segmented control + the kn131 status pills. */
.kn133-viewseg {
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    margin-right: 4px;
}
.kn133-viewseg-btn {
    cursor: pointer;
    padding: 5px 10px;
    color: #888;
    background: #fff;
    border-right: 1px solid #ddd;
    transition: background .12s, color .12s;
    line-height: 1;
}
.kn133-viewseg-btn:last-child { border-right: 0; }
.kn133-viewseg-btn i { font-size: 16px; vertical-align: middle; }
.kn133-viewseg-btn:hover { background: #f3eedf; color: #6b521f; }
.kn133-viewseg-btn--active {
    background: #bb913b;
    color: #fff;
}
.kn133-viewseg-btn--active:hover { background: #a07a2e; color: #fff; }

/* List body — different padding per view mode (cards need breathing
 * room; the table fills the body edge to edge for max density). */
.kn133-body {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fafaf6;
}
.kn133-body--card  { padding: 10px 18px; }
.kn133-body--table { padding: 0; }

/* Table view — dense rows that scale to thousands. zebra striping +
 * row hover for readability. Sticky header so column labels stay
 * visible while the body scrolls. */
.kn133-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.kn133-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #fff;
}
.kn133-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: #6b521f;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kn133-th-id      { width: 60px; }
.kn133-th-num     { text-align: right !important; width: 90px; }
.kn133-th-actions { text-align: right !important; width: 90px; }

/* Sortable header — click toggles asc / desc / unsort. The arrow
 * appears only on the active column; inactive sortable headers
 * still get a hover affordance so admins know they're clickable. */
.kn133-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s;
}
.kn133-th-sortable:hover { background: #f3eedf; color: #4d3a14; }
.kn133-th-sorted {
    background: #f3eedf;
    color: #4d3a14;
}
.kn133-th-sortarr {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 2px;
    color: #bb913b;
}

/* Per-page selector in the footer — inline label that NEVER wraps, so
 * "Show 50 per page" stays one visual unit even if the surrounding
 * footer wraps on narrow widths. */
.kn133-perpage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #777;
    font-size: 12px;
}
.kn133-perpage-prefix,
.kn133-perpage-suffix { color: #888; }
.kn133-perpage select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    font-family: inherit;
}
.kn133-perpage select:hover  { border-color: #bb913b; }
.kn133-perpage select:focus  { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }

.kn133-table tbody tr {
    border-bottom: 1px solid #f3efe0;
    transition: background .08s ease;
}
.kn133-table tbody tr:hover {
    background: #fdf6e0;
}
.kn133-table tbody tr.kn133-tr--archived {
    opacity: 0.55;
    background: #f5f3ec;
}
.kn133-table td {
    padding: 6px 10px;
    vertical-align: middle;
}
.kn133-td-id {
    color: #999;
    font-family: 'Consolas','Menlo','monospace';
    font-size: 11px;
}
.kn133-td-name {
    color: #555;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kn133-td-num { text-align: right; white-space: nowrap; color: #555; }
.kn133-td-actions {
    text-align: right;
    white-space: nowrap;
}
.kn133-td-actions .kn133-btn { padding: 3px 6px; }
.kn133-td-actions .kn133-btn i { font-size: 13px; }

/* Active status chip (table view shows it explicitly to balance the
 * Passive / Archived chips that the card view shows). */
.kn133-chip--active { background: #e3f5e7; color: #1d6420; border: 1px solid #b6dcb0; }
.kn133-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kn133-row {
    background: #fff;
    border: 1px solid #ebe6d6;
    border-left: 4px solid #ddd;
    border-radius: 6px;
    padding: 10px 14px;
    transition: border-color .1s ease, background .1s ease;
}
.kn133-row:hover { border-color: #d8c98f; }
.kn133-row--archived {
    opacity: 0.6;
    background: #f5f3ec;
}

/* Channel-coded left rail. */
.kn133-row--inapp    { border-left-color: #1f5e87; }
.kn133-row--email    { border-left-color: #4d6135; }
.kn133-row--sms      { border-left-color: #8b3a52; }
.kn133-row--whatsapp { border-left-color: #1d6420; }
.kn133-row--push     { border-left-color: #5b3f8a; }

.kn133-row__topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.kn133-row__id { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1 1 auto; }
.kn133-row__event { color: #2a2f3a; font-size: 14px; margin-right: 6px; }
.kn133-row__actions { display: flex; gap: 4px; flex-shrink: 0; }
.kn133-row__name { color: #555; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.kn133-row__subject {
    color: #6b521f;
    font-size: 12px;
    margin-bottom: 4px;
    background: #fdf6e0;
    padding: 4px 8px;
    border-radius: 3px;
    display: inline-block;
}
.kn133-row__subject i { font-size: 12px; vertical-align: middle; margin-right: 2px; }
.kn133-row__body {
    color: #555;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 6px;
    background: #fafaf6;
    padding: 6px 10px;
    border-radius: 3px;
    border-left: 2px solid #ebe6d6;
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kn133-row__meta {
    color: #999;
    font-size: 11px;
}

/* Chips — channel + lang + branch + status. Same colour family as
 * kn131 chips for visual consistency across the notifications pages. */
.kn133-row .kn133-chip,
.kn133-pg .kn133-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 3px;
    vertical-align: middle;
}
.kn133-chip--inapp    { background: #eef4f9; color: #1f5e87; border: 1px solid #cfdde9; }
.kn133-chip--email    { background: #f0f3ed; color: #4d6135; border: 1px solid #d2dac3; }
.kn133-chip--sms      { background: #f7eef0; color: #8b3a52; border: 1px solid #ebd0d6; }
.kn133-chip--whatsapp { background: #e8f5e3; color: #1d6420; border: 1px solid #b6dcb0; }
.kn133-chip--push     { background: #efeaf5; color: #5b3f8a; border: 1px solid #d3c5e3; }

.kn133-chip--lang     { background: #f3efe0; color: #4d3a14; border: 1px solid #e6d4a3; }
.kn133-chip--branch   { background: #ecf2f9; color: #1f5e87; border: 1px solid #c5d6e6; }
.kn133-chip--global   { background: #f9f5e8; color: #6b521f; border: 1px solid #e6d4a3; }
.kn133-chip--global i { font-size: 10px; vertical-align: middle; margin-right: 2px; }

.kn133-chip--archived { background: #f1f1f1; color: #666; border: 1px solid #ddd; }
.kn133-chip--passive  { background: #fff5d9; color: #8b6300; border: 1px solid #ecd693; }
.kn133-chip--meta-approved { background: #e3f5e7; color: #1d6420; border: 1px solid #b6dcb0; }
.kn133-chip--meta-rejected { background: #fbe8e6; color: #a8302b; border: 1px solid #e9b4ae; }
.kn133-chip--meta-pending  { background: #fff5d9; color: #8b6300; border: 1px solid #ecd693; }
.kn133-chip--meta-draft    { background: #f1f1f1; color: #666;    border: 1px solid #ddd; }

/* Empty state. */
.kn133-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
}
.kn133-empty i { font-size: 56px; color: #c8c8c8; }
.kn133-empty-ti { font-size: 16px; color: #555; margin-top: 12px; font-weight: 600; }
.kn133-empty-tx {
    font-size: 13px; color: #999; margin-top: 4px; line-height: 1.5;
    max-width: 400px; margin-left: auto; margin-right: auto;
}

/* Footer pagination — three flex zones (info | per-page | nav) that
 * wrap as whole units on narrow widths. Each zone uses nowrap inside
 * so labels never break off their controls (e.g. "/ page" landing on
 * a new line by itself). */
.kn133-foot {
    flex-shrink: 0;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kn133-foot-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.kn133-foot-info-pg  { font-weight: 600; color: #555; }
.kn133-foot-info-tot { color: #888; }
.kn133-foot-sep      { color: #c8c8c8; }
.kn133-page-nav {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Notifications panel fills the .k_riconpnls shell edge-to-edge with
 * its own #fafaf6 background, so we don't need to override the shell's
 * grey — kn130-pnl's 100% width/height covers it completely. Rule kept
 * removed intentionally; if you ever change kn130-pnl back to a
 * floating card, restore the .k_riconpnls:has(.kn130-pnl){background:transparent}
 * override here so the grey doesn't leak around the card edges. */

/* Shared inner layout */
.msg_lybx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 20px 14px;
    text-align: center;
}
#show_msgbox_icon,
.msg-box > .ta_c {
    margin: 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f0e6, #ede7d6);
    border: 1px solid #e2d7bf;
}
#show_msgbox_icon svg,
.msg-box svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2;
}
.msg_txt_ti {
    font-family: inherit;
    font-weight: 700;
    color: #3d3830;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.2px;
    margin: 4px 0 0;
}
.msg_txt {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #5a5445;
    width: 100%;
    max-height: 50vh;
    max-width: 100%;
    padding: 0 4px;
    overflow: auto;
    margin: 0;
}
.showmsgbtn {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 10px 0 4px;
    background: transparent;
    border-top: 1px solid #f0ebe0;
}

/* Scrollbar inside a long message body */
.msg_txt::-webkit-scrollbar           { width: 7px; }
.msg_txt::-webkit-scrollbar-thumb     { background: #d7c99b; border-radius: 4px; }
.msg_txt::-webkit-scrollbar-thumb:hover{ background: #c0a76d; }

/* Dim the rest of the page while the modal is open (disable_mybody already
   drops opacity to 0.5; this adds a subtle blur overlay for depth). */
#show_msgbox:not([style*="display: none"])::before,
#msgbox:not([style*="display: none"])::before { content: ""; } 
/* Modal buttons — modern pill with subtle shadow; primary = gold theme. */
.msg_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 7px 16px;
    height: 32px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #bd9e4d;
    border-radius: 6px;
    background: #bd9e4d;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(189,158,77,0.25);
    transition: all 0.15s;
    letter-spacing: 0.2px;
}
.msg_btn:hover  { background: #a88e50; border-color: #a88e50; box-shadow: 0 4px 10px rgba(192,167,109,0.32); }
.msg_btn:active { transform: translateY(1px); }
/* Secondary (the second button the framework auto-creates after the primary) */
.showmsgbtn .msg_btn + .msg_btn {
    background: #fff;
    color: #555;
    border-color: #d0d0d0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.showmsgbtn .msg_btn + .msg_btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #222;
}
/* Destructive variant used by tt_confirm(..., danger:true) for Delete, etc. */
.msg_btn-danger,
.showmsgbtn .msg_btn.msg_btn-danger {
    background: #a8302b;
    border-color: #a8302b;
    color: #fff;
    box-shadow: 0 2px 4px rgba(168,48,43,0.28);
}
.msg_btn-danger:hover,
.showmsgbtn .msg_btn.msg_btn-danger:hover {
    background: #7d201c;
    border-color: #7d201c;
    color: #fff;
    box-shadow: 0 4px 10px rgba(168,48,43,0.35);
}
.tpserch-btn { margin-left:5px; border-radius:3px; text-align:center; cursor:pointer; line-height: 38px; color:#b4b4b4; }
.tpserch-btn:hover{ background: #e3e3e3; }

@keyframes popup {
  from {
    transform: translate(-50%, -50%) scale(0); /* Initial scale of the popup */
  }
  to {
    transform: translate(-50%, -50%) scale(1); /* Final scale of the popup */
  }
}

.dlg_box {
    position: absolute;  top: 25%; left: 10%; width: 80%; height: 50%;box-shadow:  0px 0px 10px 1px #000000;
    background-color: #f0f0f0; border-radius: 3px;
    z-index: 20;
    display: none;
}
.dlg_txt {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80%; height: 50%;font-family: Arial, Helvetica, sans-serif;
    margin: auto; text-align: center;
    font-size: 12px;
}
.msg_okbtn {
    position: absolute; top: 80%; width: 100%; height: 20%; text-align: center; font-weight: bolder;
    z-index: 2; font-size: 20px;
    color: #000000;
    text-decoration: underline;
}
.flyout_box {position:absolute; top: 25%; left: 30%; width: 40%; height: 100px; background-color: #f0f0f0; box-shadow:  0px 0px 2px 1px #545454; z-index: 20; display: none; resize: both; overflow: hidden; }
.flyout_txt {width:100%; height: 100%;}

.flyout_box_sug {
    position: fixed;
    width: 40%;
    max-width: 320px;
    height: auto;
    max-height: 280px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 9999;
    display: none;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.flyout_box_sug::-webkit-scrollbar { width: 5px; }
.flyout_box_sug::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.flyout_box_sug ul { margin: 0; padding: 4px; }
.flyout_box_sug ul li {
    list-style: none;
    border-radius: 5px;
    display: block;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 11px;
    color: #3d3830;
    border-bottom: 1px solid #f5f0e6;
    text-transform: capitalize;
    transition: background 0.1s;
}
.flyout_box_sug ul li:last-child { border-bottom: none; }
.flyout_box_sug ul li:hover { background: #f5f0e6; color: #bd9e4d; }
.flyout_box_sug .nopotr { color: #aaa; font-style: italic; }
.flyout_box_sug .nopotr:hover { background: #fff; color: #aaa; cursor: default; }


/*general application panels */
/* .k_licons { position:absolute; left:0px; top:0px; width:50px; height:100%; background-color:#FFFFFF; overflow: hidden; z-index:1; display: none;  } */
/* .k_lpanelcbox { position:absolute; left:50px; top:0; width:15%; height:80px; background-color: #ffffff; overflow: hidden; z-index:1; display: none; } */
/* .k_lpanel { position:absolute; left:50px; top:80px; width:15%; height:calc(100% - 80px); background-color:#FFFFFF; overflow: hidden; z-index:1; display: none; } */
/* .k_stage { display: flex; flex-direction: column; position:relative; top:0px; width:calc(100% - 340px); height:100%; background-color:#b4b3a8; overflow: hidden; z-index:1; display: none; border-left: solid #ececec 1px; } */


/* stage panel */
.k_stage {
  position: relative;
  left:0;
  top:0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width:calc(100% - 340px);
  height: 100vh;
  padding:0;
  margin:0;
  background: #e5e5e5;
  transition: width 0.3s;
  z-index:-1;
}
.k_stage.collapsed{ width:calc(100% - 125px); transition: width 0.3s; }

/* Right Icon accessories panel */
.k_riconpnls { position:absolute; right:-350px; top:37px; width:23%; max-width: 400px; height:calc(100% - 37px); background-color: #9d9d9d; overflow: hidden; z-index:10; display: block;  box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; }
.k_riconpnls.open { right: 60px; }

/* Right Form popup panel */
.r-poplayout{ position:absolute; right:-850px; top:36px; width:650px; max-width: 650px; height:calc(100% - 36px); background-color: #9d9d9d; overflow: hidden; z-index:100; display: block;  box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; }
.r-poplayout.open { right: 60px; }

/* RIght filter popup panel */
.rfilter-popup-pnl { position:absolute; right:-850px; top:36px; width:450px; max-width: 450px; height:calc(100% - 36px); background-color: #f1f1f1; overflow: hidden; z-index:100; display: block;  transition: all 0.5s ease-out; box-shadow: -3px 3px 3px #d3d3d3; scrollbar-width:thin; scrollbar-color:#d7c99b #f5f0e6; }
.rfilter-popup-pnl.open { right: 0px; }

/* Right view details panel */
.rview-popup-pnl{ position:absolute; right:-1200px; top:36px; width:950px; max-width: 950px; height:calc(100% - 36px); max-height: calc(100vh - 36px); background-color: #f5f7fa; overflow: hidden; z-index:100; display: block; box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; }
.rview-popup-pnl.open { right: 0px; }

/* =============================================================
   Detail View Panel (op_popup) — modern layout driven by
   fieldengine_viewgroup / viewwidth / viewicon / vieworder.
   ============================================================= */
.kdv-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.kdv-panel-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #fbf5e6 0%, #f5edda 100%);
    border-bottom: 1px solid #e2d7bf;
    color: #6b5a38;
    flex-shrink: 0;
}
.kdv-panel-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.kdv-panel-title i { color: #c0a76d; font-size: 17px; line-height: 1; align-self: center; }
.kdv-panel-title span { text-transform: capitalize; }
.kdv-panel-title small { font-weight: 500; color: #9b8a5e; font-size: 11px; }
.kdv-panel-close,
.kdv-panel-refresh {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    color: #8a7a56; cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.4s;
    flex-shrink: 0;
}
.kdv-panel-close:hover  { background: #c0a76d; color: #fff; }
.kdv-panel-refresh:hover { background: #c0a76d; color: #fff; }
.kdv-panel-refresh:hover i { transform: rotate(180deg); }
.kdv-panel-refresh:active i { transform: rotate(360deg); }
.kdv-panel-close i, .kdv-panel-refresh i { font-size: 17px; transition: transform 0.4s ease; display: inline-block; }

/* Panel body is a non-scrolling flex column — the section card and the tabs
   wrap each own their own scroll so the card always stays visually intact
   (border + rounded corners) regardless of how much data is inside. */
.kdv-panel-body {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* The scroll container IS the visible card — border + rounded corners live
   here so the boundary of the scroll matches the boundary of the card.
   Compact mode: 220px cap with internal scroll. Expanded mode lifts the
   cap up to ~viewport-minus-tabs (still scrolls inside if needed). */
.kdv-sections-scroll {
    flex-shrink: 0;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: max-height 0.25s ease;
}
.kdv-sections-scroll.kdv-expanded,
.kdv-panel.is-expanded .kdv-sections-scroll {
    max-height: calc(100vh - 170px);
}
/* Wrapper around the sections card — relatively positioned so the expand
   button can float at the top-right corner of the merged sections card. */
.kdv-sections-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Custom-processor mode now reuses kdv-sections-wrap + kdv-sections-scroll
   directly — the kdv-custom-body sits inside as the rdraw target and has
   no chrome of its own (the surrounding scroll card is already styled).
   This keeps default and custom modes structurally identical so the
   layout/flex/toggle behavior is the same in both. */
.kdv-sections-scroll > .kdv-custom-body { border: 0; background: transparent; box-shadow: none; padding: 0; overflow: visible; min-height: 0; flex: 1 1 auto; }

/* ---- kprocess_801 custom sections ----
 * Status Flow — horizontal step pills with arrow connectors. Color
 * states: muted (upcoming), green-tint (done), gold (current),
 * red-tint (rejected off-path).
 */
.kn801-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px;
}
.kn801-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #e2dccc;
    border-radius: 4px;
    background: #fafaf6;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s;
}
.kn801-flow-step i { font-size: 14px; }
.kn801-flow-step.is-done {
    background: #e6f3e6;
    border-color: #b6d6b6;
    color: #2d6a2d;
}
.kn801-flow-step.is-current {
    background: #bb913b;
    border-color: #a47e2f;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(187,145,59,0.30);
}
.kn801-flow-step.is-rejected {
    background: #fbe8e6;
    border-color: #e89c95;
    color: #8e2520;
    font-weight: 600;
}
.kn801-flow-arrow {
    color: #ccc;
    font-size: 16px;
}

/* Top-level status badge sitting at the right of the section header. */
.kn801-flow-badge {
    margin-left: auto;
    padding: 2px 10px;
    border: 1px solid #d8c79a;
    border-radius: 3px;
    background: #fdfbf5;
    color: #6b521f;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn801-flow-badge.is-process   { background: #e6f0ff; border-color: #b6cde8; color: #244a82; }
.kn801-flow-badge.is-archived  { background: #e6f3e6; border-color: #b6d6b6; color: #2d6a2d; }
.kn801-flow-badge.is-rejected  { background: #fbe8e6; border-color: #e89c95; color: #8e2520; }

/* Edit Access Permission — 4 labelled iOS-style toggles. */
.kn801-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
}
.kn801-perm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    background: #fdfbf5;
    min-width: 230px;
    flex: 1 1 230px;
    max-width: 320px;
}
.kn801-perm-sw {
    width: 32px;
    height: 18px;
    border-radius: 10px;
    background: #ccc;
    position: relative;
    flex-shrink: 0;
    transition: background .18s ease;
}
.kn801-perm-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.20);
    transition: transform .18s ease;
}
.kn801-perm.is-on .kn801-perm-sw { background: #4caf50; }
.kn801-perm.is-on .kn801-perm-knob { transform: translateX(14px); }
.kn801-perm-lbl {
    font-size: 12.5px;
    color: #6b521f;
    line-height: 1.35;
}
.kn801-perm.is-on .kn801-perm-lbl {
    color: #2d6a2d;
    font-weight: 600;
}
.kn801-perms-empty {
    padding: 14px 16px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}
.kn801-perms-empty i { color: #bb913b; margin-right: 4px; vertical-align: text-bottom; }

/* Drill link — any field with fieldengine_drill_table set renders
   its value as a click-through to the related record's menu+detail.
   Subtle underline + tiny external-link icon so it's discoverable
   without screaming for attention. */
.kdv-drill {
    color: #4a7d4a;
    text-decoration: underline;
    text-decoration-color: #b6d6b6;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .12s ease, text-decoration-color .12s ease;
}
.kdv-drill:hover {
    color: #2d6a2d;
    text-decoration-color: #4a7d4a;
}
.kdv-drill-i { font-size: 11px; vertical-align: text-top; margin-left: 2px; opacity: .7; }
.kdv-drill:hover .kdv-drill-i { opacity: 1; }

/* Unit ID pills — multi-unit prospects render each unit as its own
   pill, wrapping naturally on narrow widths. */
.kn801-units {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.kn801-unit-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid #ebe1c4;
    border-radius: 4px;
    background: #fdfbf5;
    color: #6b521f;
    font-size: 11.5px;
    font-family: 'Consolas','Menlo','monospace';
    font-weight: 500;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* When a unit pill is also a drill link, give it a click-affordance:
   no underline (the pill border carries the chip look), gentle hover
   shift to the same green palette the rest of .kdv-drill uses. */
a.kn801-unit-pill.kdv-drill {
    text-decoration: none;
    cursor: pointer;
}
a.kn801-unit-pill.kdv-drill:hover {
    background: #e6f3e6;
    border-color: #b6d6b6;
    color: #2d6a2d;
}

/* ============================================================
   Unit Information edit picker (kn800_gen_render_edit_unit)
   Checkbox list with search + status chips. Non-Vacant units
   the operator can't currently claim render disabled with a
   .is-disabled hint; missing legacy units (in the CSV but not
   in the property's active list) render with .is-legacy so
   they don't silently drop out on save.
   ============================================================ */
.kn800-gen-unit-picker {
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    background: #fdfcf6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kn800-gen-unit-search-row {
    padding: 8px;
    background: #faf8f2;
    border-bottom: 1px solid #ebe1c4;
}
.kn800-gen-unit-search-row input[type="text"] {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid #e2d7bf;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.kn800-gen-unit-search-row input[type="text"]:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.12);
}
.kn800-gen-unit-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cdb985 transparent;
}
.kn800-gen-unit-list::-webkit-scrollbar { width: 6px; }
.kn800-gen-unit-list::-webkit-scrollbar-track { background: transparent; }
.kn800-gen-unit-list::-webkit-scrollbar-thumb { background: #cdb985; border-radius: 3px; }
.kn800-gen-unit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s ease;
    user-select: none;
}
.kn800-gen-unit-row:hover { background: #f5edda; }
.kn800-gen-unit-row input[type="checkbox"] {
    margin: 0;
    accent-color: #c0a76d;
    cursor: pointer;
    flex-shrink: 0;
}
.kn800-gen-unit-row.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.kn800-gen-unit-row.is-disabled:hover { background: transparent; }
.kn800-gen-unit-row.is-disabled input[type="checkbox"] { cursor: not-allowed; }
.kn800-gen-unit-row.is-legacy {
    background: #fff4e6;
}
.kn800-gen-unit-row.is-legacy:hover { background: #ffe8cc; }
.kn800-gen-unit-id {
    font-family: 'Consolas','Menlo','monospace';
    font-weight: 500;
    color: #3d3830;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kn800-gen-unit-meta {
    font-size: 11px;
    color: #888;
    flex-shrink: 0;
}
.kn800-gen-unit-status {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.kn800-gen-unit-status.is-vacant  { background: #e6f3e6; color: #2d6a2d; }
.kn800-gen-unit-status.is-booked  { background: #fef3c7; color: #78350f; }
.kn800-gen-unit-status.is-blocked { background: #fdeceb; color: #a8302b; }
.kn800-gen-unit-status.is-legacy  { background: #fff4e6; color: #b47420; }
.kn800-gen-unit-footer {
    padding: 6px 10px;
    background: #faf8f2;
    border-top: 1px solid #ebe1c4;
    font-size: 11px;
    color: #6b521f;
    text-align: right;
}
.kn800-gen-unit-empty {
    padding: 20px 10px;
    text-align: center;
    color: #999;
    font-size: 12px;
    font-style: italic;
}

/* Container for the collapsible detail cards — used in both read
   AND edit views of the Unit section. No outer label / panel
   frame; cards attach directly with their own <details> shell.
   Directive 2026-07-22 "no need unit details card internal unit
   details is fine. make it collapse and expanded option always
   close it way". Nested INSIDE the same .kdv-field as the pill
   row / picker widget — margin-top holds the visual separation
   without paying for the grid-gap + field-padding stack that
   two adjacent .kdv-field elements would cost. */
.kn800-gen-unit-cards-list {
    display: flex;
    flex-direction: column;
    /* Tight card-to-card gap. Directive 2026-07-22 "reduce the
       caps between the units". */
    gap: 3px;
    width: 100%;
    /* Divider between the pill row / picker and the cards list.
       Directive 2026-07-22 "line is missing between this give
       small space". Dashed to match the .kdv-field row dividers
       above so the section visual stays consistent. */
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ebe1c4;
}
/* When the cards list is empty (no picks), collapse it entirely
   so no empty box sits between the picker and other fields
   (also hides the divider that would otherwise dangle). */
.kn800-gen-unit-cards-list:empty { display: none; }

/* Collapsible variant of .qrq-unit-card. Native HTML5 <details>
   handles open/closed state (no JS needed). Header (summary) is
   clickable; a chevron on the RIGHT rotates 180deg on open. Kept
   scoped to .is-collapsible so the Quick Form's inline cards
   (no <details> wrapper) aren't affected. Directive 2026-07-22:
   chevron RIGHT, tight when closed, no wasted vertical space. */
.qrq-unit-card.is-collapsible {
    display: block;
    /* Tighter padding on the collapsible variant — matches the
       card-header-only footprint when closed. Body reintroduces
       its own padding-top on open. */
    padding: 0;
}
.qrq-unit-card.is-collapsible > summary.qrq-unit-card-header {
    cursor: pointer;
    user-select: none;
    list-style: none;         /* strip Firefox default triangle */
    display: flex;
    align-items: center;
    gap: 10px;
    /* Header IS the closed-state card body — pad it comfortably. */
    padding: 10px 14px;
    /* Kill the base rule's separator + spacing so the closed card
       reads as a single-row chip, not a card-with-empty-body. The
       [open] rule below reintroduces the divider. */
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.qrq-unit-card.is-collapsible > summary.qrq-unit-card-header::-webkit-details-marker {
    display: none;            /* strip WebKit disclosure triangle */
}
/* When open, reintroduce the divider under the header so the
   fields don't butt against the title. */
.qrq-unit-card.is-collapsible[open] > summary.qrq-unit-card-header {
    border-bottom: 1px solid #efe6c2;
    padding-bottom: 8px;
}
.qrq-unit-card-chevron {
    font-size: 18px;
    color: #8a7a56;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    /* Push chevron to the far right of the header. */
    margin-left: auto;
}
.qrq-unit-card.is-collapsible[open] > summary .qrq-unit-card-chevron {
    transform: rotate(180deg);
}
/* Body picks up horizontal padding matching the header + a small
   top margin so the field grid starts under the divider cleanly.
   No dashed top-border needed — the header's border-bottom above
   handles the separator when [open]. */
.qrq-unit-card.is-collapsible > .qrq-unit-card-body {
    padding: 8px 14px 12px;
}
/* Card hover — subtle affordance so the whole tile reads as a
   clickable strip when collapsed. */
.qrq-unit-card.is-collapsible:not([open]):hover > summary.qrq-unit-card-header {
    background: #faf6e9;
}

/* Primary pill toggle — ported from qrq-form-elements.css so the
   prospect-detail Unit section can render Primary radios / badges
   without depending on the Quick Form's stylesheet. Uses the
   same gold pill look. Native radio is visually hidden; the label
   is the button. */
.qrq-primary-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a7126;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1.5px solid #d8c98a;
    border-radius: 12px;
    background: #faf6e9;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    position: relative;
}
.qrq-primary-radio:hover {
    background: #f0e8c8;
    border-color: #bd9e4d;
}
.qrq-primary-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.qrq-primary-radio:has(input[type="radio"]:checked) {
    background: #bd9e4d;
    border-color: #bd9e4d;
    color: #fff;
}
.qrq-primary-radio:has(input[type="radio"]:checked):hover {
    background: #a8893d;
    border-color: #a8893d;
}
.qrq-primary-radio:has(input[type="radio"]:checked) span::before {
    content: '\2713';
    margin-right: 4px;
    font-weight: 700;
}
/* Static primary chip — same shape as the checked radio pill but
   read-only. Used on the read view (no interaction) + on the
   edit view for single-pick prospects (an implicit primary
   doesn't need a radio, just a badge). */
.qrq-primary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1.5px solid #bd9e4d;
    border-radius: 12px;
    background: #bd9e4d;
    white-space: nowrap;
}
.qrq-primary-badge i.bx { font-size: 12px; }

/* ================================================================
   Unit picker widget for the prospect-detail Unit section — ported
   from qrq-form-elements.css (which only loads inside the Quick
   Form popup, so those styles never reach the prospect-detail
   page). Directive 2026-07-22 "fix the unit picker UI". Scoped
   to .kn800-gen-unit-wrap so the two widgets stay independent.
   Class names (.k-ap-*) match the qrq_form.js widget so future
   consolidation stays easy.
   ================================================================ */

/* Outer shell — same input-sized wrapper as the Quick Form's. */
.kn800-gen-unit-wrap {
    width: 100%;
    min-height: 38px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 4px 6px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.kn800-gen-unit-wrap:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18);
}

/* Chip row */
.kn800-gen-unit-wrap .k-ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
}
.kn800-gen-unit-wrap .k-ap-chips:empty { display: none; }
.kn800-gen-unit-wrap .k-ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ede2c2;
    color: #5a4720;
    border: 1px solid #d4c49a;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
}
.kn800-gen-unit-wrap .k-ap-chip-del {
    cursor: pointer;
    color: #8a7a56;
    font-size: 14px;
    line-height: 1;
}
.kn800-gen-unit-wrap .k-ap-chip-del:hover { color: #c84a3a; }

/* Search row — flush with the chips, no separate border. */
.kn800-gen-unit-wrap .k-ap-search-row {
    display: flex;
    width: 100%;
}
.kn800-gen-unit-wrap .k-ap-search {
    flex: 1;
    border: none !important;
    background: transparent !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 12px;
    color: #3d3830;
    outline: none !important;
    box-shadow: none !important;
}
.kn800-gen-unit-wrap .k-ap-search:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Dropdown — absolutely positioned floating panel BELOW the wrap
   so it overlays the cards list rather than pushing it down. */
.kn800-gen-unit-wrap .k-ap-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 1500;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.14);
    max-height: 260px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cdb985 transparent;
}
.kn800-gen-unit-wrap .k-ap-dropdown::-webkit-scrollbar { width: 6px; }
.kn800-gen-unit-wrap .k-ap-dropdown::-webkit-scrollbar-track { background: transparent; }
.kn800-gen-unit-wrap .k-ap-dropdown::-webkit-scrollbar-thumb {
    background: #cdb985;
    border-radius: 3px;
}

/* Option row + custom checkbox + label. margin-bottom (not
   dropdown flex gap) because gap+overflow can render as zero
   in some browsers when the dropdown is scrollable — explicit
   per-row margin is bullet-proof. Directive 2026-07-22 "give a
   small space between the options". */
.kn800-gen-unit-wrap .k-ap-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 3px;
    font-size: 12px;
    color: #3d3830;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    user-select: none;
}
.kn800-gen-unit-wrap .k-ap-opt:last-child { margin-bottom: 0; }
.kn800-gen-unit-wrap .k-ap-opt:hover {
    background: #f5f0e6;
}
.kn800-gen-unit-wrap .k-ap-opt.is-checked {
    background: #ede2c2;
    color: #5a4720;
}
.kn800-gen-unit-wrap .k-ap-opt-cb {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cdb985;
    border-radius: 4px;
    background: #fff;
    position: relative;
    pointer-events: none;
    box-sizing: border-box;
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.kn800-gen-unit-wrap .k-ap-opt:hover .k-ap-opt-cb {
    border-color: #bd9e4d;
}
.kn800-gen-unit-wrap .k-ap-opt.is-checked .k-ap-opt-cb {
    background: #bd9e4d;
    border-color: #bd9e4d;
    box-shadow: 0 0 0 1px #bd9e4d inset;
}
.kn800-gen-unit-wrap .k-ap-opt.is-checked .k-ap-opt-cb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    transform-origin: center;
}
.kn800-gen-unit-wrap .k-ap-opt-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kn800-gen-unit-wrap .k-ap-empty,
.kn800-gen-unit-wrap .k-ap-loading {
    padding: 10px;
    text-align: center;
    color: #b5a785;
    font-size: 11px;
    font-style: italic;
}

/* Unit Breakdown table — top of Rents & Payments. One row per unit
   showing parallel CSVs (id / request / discount / commission) plus
   a totals row when there's more than one unit. */
.kn801-ubrk-wrap { overflow-x: auto; }
.kn801-ubrk {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 5px;
    overflow: hidden;
}
.kn801-ubrk thead th {
    background: #fdfbf5;
    padding: 8px 10px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #ebe1c4;
}
.kn801-ubrk th.num,
.kn801-ubrk td.num   { width: 36px; text-align: right; color: #aaa; padding-right: 6px; }
.kn801-ubrk th.amt,
.kn801-ubrk td.amt   { text-align: right; white-space: nowrap; }
/* Subtotal column — net rent (request - discount). Slight gold tint
   so the net figure stands out against the raw amount + discount. */
.kn801-ubrk th.sub,
.kn801-ubrk td.sub   { background: #fdfbf5; color: #4d3a14; font-weight: 600; }
/* Total Amount row — extra emphasis on the Subtotal cell (the grand
   total figure admins read first). Larger font + heavier weight than
   the rest of the row, which is already font-weight 700. */
.kn801-ubrk-total td        { font-weight: 700; }
.kn801-ubrk-total td.sub    { background: #fff7df; color: #4d3a14; font-size: 13.5px; font-weight: 800; }
.kn801-ubrk tbody td { padding: 7px 10px; border-bottom: 1px solid #f3efe0; color: #2a2f3a; }
.kn801-ubrk tbody tr:last-child td { border-bottom: 0; }
.kn801-ubrk-uid {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: 'Consolas','Menlo','monospace';
    color: #6b521f;
}
.kn801-ubrk-total td {
    background: #fdfbf5;
    font-weight: 700;
    color: #4d3a14;
    border-top: 1px solid #d8c79a !important;
    border-bottom: 0 !important;
}

/* Grace period — 3-card row (Start / Mid / End). Active phases pick
   up the gold accent; zero-day phases stay muted. Cards wrap on
   narrow widths. */
.kn801-grace {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.kn801-grace-card {
    flex: 1 1 180px;
    min-width: 160px;
    padding: 10px 12px;
    border: 1px solid #ebe1c4;
    border-radius: 6px;
    background: #fdfbf5;
}
.kn801-grace-card.is-active {
    background: #fff7df;
    border-color: #d8c79a;
}
.kn801-grace-card.is-empty { opacity: 0.55; }
.kn801-grace-title {
    font-size: 10.5px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn801-grace-days {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #4d3a14;
}
.kn801-grace-card.is-empty .kn801-grace-days { color: #999; font-weight: 500; }
.kn801-grace-range {
    margin-top: 4px;
    font-size: 11.5px;
    color: #7a6638;
    font-family: 'Consolas','Menlo','monospace';
}

/* Floating expand/collapse pill anchored to the top-right of the sections
   card. z-index 4 keeps it above the scrollbar so it never gets hidden. */
.kdv-expand-btn {
    position: absolute;
    top: 6px;
    right: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #fff;
    
    color: #8a7a56;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}
.kdv-expand-btn:hover  { background: #fbf5e6; border-color: #c0a76d; color: #6b5a38; box-shadow: 0 2px 8px rgba(192,167,109,0.20); }
.kdv-expand-btn:active { transform: scale(0.92); }
.kdv-expand-btn i      { font-size: 14px; line-height: 1; }
.kdv-expand-btn.is-active        { }
.kdv-expand-btn.is-active:hover  { background: #a88e50; }

/* Section block — flat content inside the .kdv-sections-scroll card. */
.kdv-section {
    flex-shrink: 0;
    overflow: visible;
    background: transparent;
}
/* Standard divider — a single thin horizontal line between groups. */
.kdv-section + .kdv-section { border-top: 1px solid #ececec; }

/* Custom-body placeholder — the menu's own processor rdraws into this
   container. flex:1 lets it claim the space above the tabs strip; its own
   gold scrollbar handles overflow so the card stays visually bounded.
   When tabs are hidden (show_tabs=0) it naturally takes the full body. */
.kdv-custom-body {
    flex: 1 1 auto;
    min-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    /* When the body only contains the loading ring, center it in the card.
       Once real content replaces the loader, the flex column still works
       fine (content sits at top, scroll if taller than the card). */
    display: flex;
    flex-direction: column;
}
/* Dedicate the loader as a flex child that fills the full card height
   so the spinner lands dead-center in the top card, matching the tabs
   card's loading behavior. */
.kdv-custom-body > .kdv-tab-loading { flex: 1 1 auto; min-height: 0; }
/* Themed scrollbar inside the custom body, same gold palette. */
.kdv-custom-body { scrollbar-width: thin; scrollbar-color: #d7c99b #faf4e1; }
.kdv-custom-body::-webkit-scrollbar       { width: 10px; }
.kdv-custom-body::-webkit-scrollbar-track { background: #faf4e1; border-radius: 6px; }
.kdv-custom-body::-webkit-scrollbar-thumb {
    background: #d7c99b;
    border: 2px solid #faf4e1;
    border-radius: 6px;
}
.kdv-custom-body::-webkit-scrollbar-thumb:hover { background: #c0a76d; }
.kdv-custom-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 20px;
    color: #8a7a56;
    font-size: 13px;
}
.kdv-custom-loading i { font-size: 18px; color: #c0a76d; }

/* ----- Sample/demo styling for kprocess_450 ----- */
.kdv-demo-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.kdv-demo-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fbf5e6 0%, #f5edda 100%);
    border-bottom: 1px solid #e2d7bf;
    color: #6b5a38;
}
.kdv-demo-banner > i {
    font-size: 28px;
    color: #c0a76d;
    background: #fff;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.kdv-demo-banner-title { font-size: 15px; font-weight: 600; }
.kdv-demo-banner-sub   { font-size: 12px; color: #8a7a56; margin-top: 2px; }

.kdv-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 6px 10px;
}
.kdv-demo-cell {
    padding: 10px 12px;
    border-bottom: 1px dashed #f0eade;
}
.kdv-demo-cell:nth-last-child(-n+2) { border-bottom: 0; }
.kdv-demo-lbl {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
}
.kdv-demo-lbl i { font-size: 13px; color: #c0a76d; }
.kdv-demo-val { font-size: 13px; color: #333; line-height: 1.35; }
.kdv-demo-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.kdv-demo-pill-ok { background: #e3f3e6; color: #2b7a3a; border: 1px solid #a7d4ae; }

.kdv-demo-section {
    padding: 14px 18px;
    border-top: 1px solid #f0eade;
    background: #fafaf6;
}
.kdv-demo-section-hdr {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: #6b5a38;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.kdv-demo-section-hdr i { color: #c0a76d; font-size: 15px; }
.kdv-demo-text { font-size: 12.5px; line-height: 1.55; color: #555; }

.kdv-demo-actions {
    display: flex; gap: 8px;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid #eee;
}
.kdv-demo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    font-size: 12px; font-weight: 500;
    color: #555;
    background: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.kdv-demo-btn:hover { background: #ececec; border-color: #bbb; }
.kdv-demo-btn-primary {
    background: #c0a76d; color: #fff; border-color: #a88e50;
}
.kdv-demo-btn-primary:hover { background: #a88e50; color: #fff; }
.kdv-demo-btn i { font-size: 14px; }

/* ----- Sample tab content (overview/contracts/history demos) ----- */
.kdv-tabdemo            { padding: 12px; font-size: 13px; color: #333; }
.kdv-tabdemo-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: #fbf5e6;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    color: #6b5a38;
    font-weight: 500;
    margin-bottom: 12px;
}
.kdv-tabdemo-banner i      { color: #c0a76d; font-size: 16px; }
.kdv-tabdemo-banner-blue   { background: #eaf4fb; border-color: #a9cde6; color: #1f5e87; }
.kdv-tabdemo-banner-blue i { color: #1f5e87; }

/* simple key/value table */
.kdv-tabdemo-tbl       { width: 100%; border-collapse: collapse; }
.kdv-tabdemo-tbl th,
.kdv-tabdemo-tbl td    { padding: 7px 10px; border-bottom: 1px solid #f0eade; text-align: left; }
.kdv-tabdemo-tbl th    { width: 200px; color: #8a7a56; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.kdv-tabdemo-tbl td    { color: #333; }
.kdv-tabdemo-tbl tr:last-child th,
.kdv-tabdemo-tbl tr:last-child td { border-bottom: 0; }

/* contracts list */
.kdv-tabdemo-list thead th { background: #fafaf6; color: #6b5a38; font-size: 11px; }
.kdv-tabdemo-list tbody tr:hover td { background: #fbf5e6; }

/* status pills */
.kdv-tabdemo-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:500; border:1px solid; }
.kdv-tabdemo-pill.ok   { background:#e3f3e6; color:#2b7a3a; border-color:#a7d4ae; }
.kdv-tabdemo-pill.warn { background:#fff8e5; color:#8a6d0b; border-color:#f0d87a; }
.kdv-tabdemo-pill.mute { background:#f1f1f1; color:#666;    border-color:#d0d0d0; }

/* timeline */
.kdv-tabdemo-timeline { list-style:none; margin:0; padding:0 0 0 14px; position:relative; }
.kdv-tabdemo-timeline::before {
    content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:#f0eade;
}
.kdv-tabdemo-timeline li {
    position:relative; padding:6px 0 14px 16px; line-height:1.4;
}
.kdv-tabdemo-timeline li .dot {
    position:absolute; left:-3px; top:10px;
    width:10px; height:10px; border-radius:50%;
    background:#c0a76d; border:2px solid #fff; box-shadow:0 0 0 1px #e2d7bf;
}
.kdv-tabdemo-timeline li .dot.ok   { background:#2b7a3a; box-shadow:0 0 0 1px #a7d4ae; }
.kdv-tabdemo-timeline li .dot.warn { background:#d98b0b; box-shadow:0 0 0 1px #f0d87a; }
.kdv-tabdemo-timeline li small { color:#888; font-size:11px; }

.kdv-tabdemo-note {
    margin-top: 14px;
    padding: 8px 12px;
    background: #fff8e5;
    border: 1px solid #f0d87a;
    border-radius: 5px;
    font-size: 11.5px;
    color: #6b5a38;
    display: flex; align-items: center; gap: 6px;
}
.kdv-tabdemo-note i { color: #c0a76d; font-size: 15px; }
.kdv-tabdemo-note code { background: #fff; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
/* Group heading inside the merged sections card — no background, just a
   thin underline so it reads as a quiet divider instead of a heavy strip. */
.kdv-section-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 6px;
    background: transparent;
    /*border-bottom: 1px solid #f0eade;*/
    color: #6b5a38;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kdv-section-hdr i { font-size: 15px; color: #c0a76d; }

/* 12-col grid inside a section. Bottom padding gives the final row some
   breathing room from the card's rounded corner so trailing dashed
   borders don't kiss the edge. */
.kdv-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    padding: 4px 10px 8px;
}
.kdv-field {
    padding: 9px 10px;
    border-bottom: 1px dashed #f0eade;
    min-width: 0;
}
/* No dashed border on the last row of each section, so the card bottom
   stays clean instead of looking cut. */
.kdv-grid > .kdv-field:nth-last-child(-n+2):nth-child(odd),
.kdv-grid > .kdv-field:last-child {
    border-bottom: 0;
}
.kdv-field-lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.kdv-field-icon { font-size: 13px; color: #c0a76d; }
.kdv-field-val {
    font-size: 13px;
    color: #333;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kdv-empty { color: #bbb; font-weight: 500; }

/* Edit-mode inputs (kn800_gen_render_edit_* helpers).
   The class .kn800-gen-input is the collector's selector — every editable
   field in the section edit form carries it. Without an explicit width the
   browser falls back to native input widths, which for <input type="date">
   is often too narrow to show MM/DD/YYYY + the picker icon (the year gets
   clipped). Force fill-container width + box-sizing so all inputs sit
   inside their .kdv-field cell cleanly regardless of section width.
   Textareas need auto height + resize:vertical so operators can grow the
   Internal Notes box when writing a long note. */
.kn800-gen-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    color: #333;
    line-height: 1.35;
}
.kn800-gen-input:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.kn800-gen-input[readonly] {
    background: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}
textarea.kn800-gen-input {
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
}
/* Locked identity fields in the Tenant editor. They show the current
   value for context but can't be changed here (the tenant attached to
   a request is fixed — only contact/company detail is editable). These
   deliberately do NOT carry .kn800-gen-input so the JS collector + the
   Reset snapshot skip them; this class supplies the same greyed
   read-only look as .kn800-gen-input[readonly] without joining the
   editable set. */
.kn800-gen-locked {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #f5f5f5;
    color: #666;
    line-height: 1.35;
    cursor: not-allowed;
}
/* Muted lock glyph appended to a locked field's label so the operator
   sees WHY the field is greyed. Sits inline after the label text. */
.kn800-gen-lock-hint {
    color: #b08d57;
    font-size: 11px;
    margin-left: 3px;
    cursor: help;
}
/* Contract "Include Information" chips inherit the wizard's exact
   check_h styling by rendering inside .qrq-form > .qrq-check-h in
   kn800_gen_render_edit_contract (see kfunc_kn800_general.php).
   The wizard's rules live in qrq-form-elements.css:968-1021 and
   apply automatically once the .qrq-form scope wraps our chips.
   We keep the .k-incl-wrap id on the inner grid div for JS access
   (kn800GenContractInclSync + Reset restore). No duplicate rules
   here — one source of truth in the wizard sheet. */
.kn800-gen-body-inner .qrq-check-h-opt input[type="checkbox"] {
    /* Belt-and-braces size lock: the ambient .kn800-gen-body-inner
       rules can inadvertently stretch checkboxes when they aren't
       covered by an explicit type selector. Pin native ~16px so
       the tile-swallowing bug from 2026-07-26 can't recur inside
       the section edit form. */
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    max-width: 16px;
    padding: 0;
    margin: 0;
    flex: 0 0 16px;
    accent-color: #bd9e4d;
    cursor: pointer;
}

/* Contract Information section — tighter internal spacing.
   Contract has three-column rows (Base Month/Start/End, Grace trio
   labels, Updated Month/Start/End) that need to sit close together
   so the eye reads them as a group. Default .kdv-field padding of
   9px 10px puts 20px of horizontal space between adjacent cells,
   which pushes the third-width date inputs too far apart and makes
   the row feel disjointed. Scoped to data-section="contract" so
   other sections keep their comfortable default spacing. */
.kn800-gen-section[data-section="contract"] .kdv-field {
    padding: 6px 4px;
}
/* The actual edit-mode grid container is .kn800-gen-body-inner
   (see the 12-col grid rule around line 18380) — NOT .kdv-grid,
   which was my earlier mis-target. Tighten its bottom padding so
   the last field (Notes) doesn't leave a slab of whitespace before
   the save-row. Row gap also trimmed since Contract fields are
   already close-packed inside their tighter .kdv-field padding. */
.kn800-gen-section[data-section="contract"] .kn800-gen-body-inner {
    padding: 8px 10px 2px;
    gap: 4px 12px;
}
/* Notes field: keep the section divider off (looks cleaner as the
   last field before the Save row), but give a comfortable breathing
   gap between the textarea + char counter and the Save row. */
.kn800-gen-section[data-section="contract"] .kdv-field[data-field-id$="_contract_notes"] {
    padding: 6px 4px 14px;
    border-bottom: 0;
}
/* Textarea honours its rows=4 (comfortable writing space). Native
   resize handle stays enabled — drag taller when needed. */
.kn800-gen-section[data-section="contract"] textarea.kn800-gen-input {
    min-height: 80px;
    height: auto;
}
/* Char counter sits under the textarea with a small margin so it
   doesn't kiss the box, but doesn't sprawl either. */
.kn800-gen-section[data-section="contract"] .kdv-field[data-field-id$="_contract_notes"] > div:last-child {
    margin-top: 4px;
    line-height: 1.2;
}
/* Save row: give the footer a proper standoff — border-top + roomy
   padding + margin so the buttons visibly separate from the notes
   area, matching a typical form-footer treatment. */
.kn800-gen-section[data-section="contract"] .kn800-gen-save-row {
    padding: 12px 4px 6px;
    margin-top: 8px;
}

/* Width classes */
.kdv-w-full    { grid-column: span 12; }
.kdv-w-half    { grid-column: span 6; }
.kdv-w-third   { grid-column: span 4; }
.kdv-w-twothird{ grid-column: span 8; }   /* 2 of 3 columns wide */
.kdv-w-quarter { grid-column: span 3; }
@media (max-width: 800px) {
    .kdv-w-half, .kdv-w-third, .kdv-w-quarter { grid-column: span 12; }
}
@media (max-width: 560px) {
    .kdv-panel-body { padding: 10px; }
    .kdv-grid { padding: 0 4px; }
}

/* Tabs wrap — fills the space below the capped sections area so its content
   (which is loaded via a backend call) has room to render/scroll. */
.kdv-tabs-wrap {
    position: relative;               /* anchor for .kdv-tabs-expand-btn */
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* When tabs are "expanded" the top card (whichever variant is rendered —
   generic sections wrap or custom-processor body) folds away so the tabs
   card claims the full panel body height. display:none (not visibility)
   so the flex row reclaims the space. */
.kdv-panel.is-tabs-expanded .kdv-sections-wrap,
.kdv-panel.is-tabs-expanded .kdv-custom-body {
    display: none;
}
/* Tabs-card expand pill — sits flush in the top-right of the strip. */
.kdv-tabs-expand-btn { top: 7px; right: 8px; z-index: 5; }

/* Tabset becomes a proper flex column: strip (auto height) then panels
   (flex-grow 1). This is what makes the tab body actually scroll — the
   panels container has a real height bound, so its scrollable child can
   honour `overflow-y: auto`. */
.kdv-tabset {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
}

/* Strip — horizontal row of labels with the full-width bottom border.
   Radios are hidden but kept inline so the `:checked + label` selector
   on descendants still works. Right padding reserves room for the
   floating expand pill. */
.kdv-tab-strip {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex: 0 0 auto;
    padding-right: 40px;
    background: #fafaf6;
    border-bottom: 1px solid #e6e6e6;
}
/* Hide radios the same way the framework's global `.tabset` does — absolute
   + off-screen. Must NOT use `display:none`, `visibility:hidden`, or
   `pointer-events:none`, because any of those would block label-for click
   forwarding in some browsers, and the tab onclick (which fires
   `tt_postbg` to load the body) would never run. */
.kdv-tab-strip > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.kdv-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    color: #7a6a48;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;            /* overlap the strip's bottom border
                                       so active gold lands on that line */
    background: transparent;        /* inherit strip's #fafaf6 */
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kdv-tab-icon {
    font-size: 14px;
    line-height: 1;
    color: #c0a76d;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.kdv-tab-strip > input[type="radio"]:checked + .kdv-tab-label .kdv-tab-icon {
    color: #6b5a38;
}
.kdv-tab-label:hover { background: #f5edda; color: #6b5a38; }
.kdv-tab-strip > input[type="radio"]:checked + .kdv-tab-label {
    background: #fff;
    color: #6b5a38;
    border-bottom-color: #c0a76d;
}

/* Panels — take the remaining vertical space, clip outwards, and let
   the active panel own the scrollbar. Background transparent (no white
   card inside a white card), no padding at this level — content that
   wants padding can add it at tbcont. */
.kdv-tab-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
}
/* Override the generic `.tabset .tab-panel { display: none }` rule from
   the global tabset CSS — specificity comes from the chained class. */
.kdv-tab-panels > .kdv-tab-panel {
    display: none;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
}
.kdv-tab-panels > .kdv-tab-panel.is-active {
    display: flex;                /* flex column lets .kdv-tab-body claim
                                     the full panel height so a loading
                                     state centers vertically */
    flex-direction: column;
    overflow-y: auto;             /* scroll lives on the active panel */
    overflow-x: hidden;
}
.kdv-tab-panels > .kdv-tab-panel.is-active > .kdv-tab-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kdv-tab-body   { min-height: 0; }

/* Standard loading state — painted into a tab body by kdv_tab_activate()
   the moment the tab is clicked, so the user sees progress before the
   tt_postbg rdraw response lands. Centered spinner + label, gold-tinted
   to match the panel palette. */
.kdv-tab-loading {
    flex: 1 1 auto;                /* fill the full tab-body height so
                                      centering is truly centered in the
                                      card, not just within 180px of it */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;             /* floor for very short panels */
    padding: 20px;
    color: #8a7a56;
    font-size: 13px;
}
.kdv-tab-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f0e7cf;
    border-top-color: #c0a76d;
    border-radius: 50%;
    animation: kdv-tab-spin 0.8s linear infinite;
}
.kdv-tab-loading-text {
    letter-spacing: 0.2px;
    color: #8a7a56;
    font-weight: 500;
}
/* Alias of the shared `tt-spin` keyframe (declared in the preloader
   section) so the .kdv-tab-spinner definition — which uses this name —
   stays self-contained. Both tt-spin and kdv-tab-spin resolve to the
   same rotation, so every spinner in the app shares one animation. */
@keyframes kdv-tab-spin { to { transform: rotate(360deg); } }

/* =============================================================
   Role × Menu × Action permission matrix (kprocess_460.php)
   ============================================================= */
.perm-matrix-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px;
    font-size: 13px;
    color: #333;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.perm-matrix-hdr { border-bottom: 1px solid #f0eade; padding-bottom: 10px; }
.perm-matrix-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 600; color: #6b5a38;
}
.perm-matrix-title i { font-size: 22px; color: #c0a76d; }
.perm-matrix-sub   { margin-top: 4px; font-size: 12px; color: #888; }

.perm-matrix-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
}
.perm-matrix-lbl    { font-weight: 600; color: #6b5a38; }
.perm-matrix-select {
    min-width: 260px; padding: 7px 10px;
    font-size: 13px; color: #333;
    border: 1px solid #e2d7bf; border-radius: 6px;
    background: #fafaf6; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.perm-matrix-select:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,0.15);
    background: #fff;
}

.perm-matrix-rolebar {
    padding: 8px 12px;
    background: #fbf5e6; border: 1px solid #e2d7bf; border-radius: 6px;
    color: #6b5a38; font-size: 12px;
}
.perm-matrix-rolebar i { color: #c0a76d; margin-right: 4px; }

.perm-matrix-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.perm-matrix-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 40px 20px;
    color: #999; font-size: 13px;
    border: 1px dashed #e2d7bf; border-radius: 6px;
    background: #fbf5e6;
}
.perm-matrix-empty i { font-size: 18px; color: #c0a76d; }

.perm-matrix-tbl-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid #e2d7bf; border-radius: 6px;
    background: #fff;
}
.perm-matrix-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.perm-matrix-tbl thead th {
    position: sticky; top: 0;
    padding: 10px 12px;
    background: #fafaf6;
    border-bottom: 1px solid #e2d7bf;
    color: #6b5a38; font-weight: 600;
    text-align: center;
    z-index: 2;
}
.perm-matrix-tbl thead th.perm-col-menu { text-align: left; }
.perm-matrix-tbl td {
    padding: 7px 12px;
    border-bottom: 1px solid #f0eade;
}
.perm-matrix-tbl tr:last-child td { border-bottom: 0; }
.perm-matrix-tbl .perm-col-menu { text-align: left; color: #333; }
.perm-matrix-tbl .perm-col-chk  { text-align: center; width: 72px; }
.perm-matrix-tbl .perm-chk {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: #c0a76d;
}
.perm-matrix-tbl tr.perm-row:hover td { background: #fbf5e6; }
.perm-matrix-tbl tr.perm-row-group td {
    padding: 10px 12px 6px;
    background: #fff;
    border-bottom: 2px solid #e2d7bf;
    color: #8a7a56; font-weight: 600;
    text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px;
}

.perm-matrix-actions {
    display: flex; gap: 8px; flex: 0 0 auto;
    padding-top: 4px;
}
.perm-matrix-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: 12px; font-weight: 500;
    color: #7a6a48;
    background: #fff;
    border: 1px solid #e2d7bf; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.perm-matrix-btn:hover { background: #f5edda; border-color: #c0a76d; color: #6b5a38; }
.perm-matrix-btn-save {
    background: #c0a76d; border-color: #a88e50; color: #fff;
}
.perm-matrix-btn-save:hover {
    background: #a88e50; border-color: #8a7240; color: #fff;
}

/* Inherited / Override badge column — only present in the per-user
   matrix (pn_p461). Hints whether the row matches the role baseline
   (inherited) or the user has been moved off the baseline (override). */
.perm-col-badge { width: 100px; text-align: center; }
.perm-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 600;
    border-radius: 10px;
    letter-spacing: 0.3px; text-transform: uppercase;
    border: 1px solid;
}
.perm-badge-role {
    background: #eef7ed; border-color: #bce0b6; color: #2b7a3a;
}
.perm-badge-over {
    background: #fff3d6; border-color: #f0d87a; color: #8a6d0b;
}
.perm-sep { margin: 0 8px; color: #b9a878; }

/* =============================================================
   User-friendly Role × Menu matrix additions (pn_p460 rewrite)
   ============================================================= */

/* Toolbar fields — role / module / search. Flex row, breathes on narrow */
.pm-tb-field {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 180px;
}
.pm-tb-field-grow { flex: 1 1 auto; }
.pm-tb-lbl {
    font-size: 10px; font-weight: 600; color: #8a7a56;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.pm-tb-select, .pm-tb-input {
    padding: 6px 10px; font-size: 12px; color: #3d3830;
    border: 1px solid #e2d7bf; border-radius: 5px;
    background: #fafaf6; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pm-tb-select:focus, .pm-tb-input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
    background: #fff;
}

/* Right-side actions cluster on the toolbar */
.pm-tb-actions {
    display: flex; align-items: flex-end; gap: 8px;
    margin-left: auto;
}
.pm-tb-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; font-size: 11px; font-weight: 600;
    color: #8a7a56; background: #f5f0e6;
    border: 1px solid #e2d7bf; border-radius: 12px;
    transition: all 0.15s;
}
.pm-tb-badge i { font-size: 14px; line-height: 1; }
.pm-tb-badge-dirty {
    background: #fef3c7; border-color: #e6b840; color: #8a6d0b;
    animation: pm-badge-pulse 1.2s ease-in-out infinite;
}
@keyframes pm-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,184,64,0.35); }
    50%      { box-shadow: 0 0 0 4px rgba(230,184,64,0); }
}
.pm-tb-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; font-size: 12px; font-weight: 500;
    color: #7a6a48; background: #fff;
    border: 1px solid #e2d7bf; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: all 0.15s;
}
.pm-tb-btn:hover { background: #f5edda; border-color: #c0a76d; color: #6b5a38; }
.pm-tb-btn-save { background: #bd9e4d; border-color: #9c7a3c; color: #fff; }
.pm-tb-btn-save:hover { background: #9c7a3c; }
.pm-tb-btn-save-armed {
    box-shadow: 0 0 0 3px rgba(189,158,77,0.25);
}

/* Legend row under the toolbar */
.perm-matrix-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    padding: 6px 10px;
    font-size: 10.5px; color: #8a7a56;
    border: 1px dashed #e2d7bf; border-radius: 6px;
    background: #fbf5e6;
}
.perm-matrix-legend span { display: inline-flex; align-items: center; gap: 4px; }
.perm-matrix-legend i { font-size: 14px; }
.pm-legend-sep { color: #d0c298; margin: 0 4px; }

/* Role banner */
.pm-sys-chip {
    display: inline-block; margin-left: 6px;
    padding: 1px 6px; font-size: 10px; font-weight: 700;
    color: #fff; background: #c0392b; border-radius: 8px;
    letter-spacing: 0.3px;
}
.pm-role-code {
    display: inline-block;
    padding: 1px 6px; font-family: 'Consolas', monospace;
    font-size: 10.5px; color: #6b5a38;
    background: #fff; border: 1px solid #e2d7bf; border-radius: 4px;
}

/* Row icons + name (clickable to toggle whole row) */
.pm-row-icon { color: #bd9e4d; margin-right: 6px; font-size: 13px; }
.pm-row-name {
    display: inline-block; cursor: pointer;
    color: #3d3830; font-weight: 500;
}
.perm-matrix-tbl tr.perm-row .perm-col-menu { cursor: pointer; }
.perm-matrix-tbl tr.perm-row:hover .pm-row-name { color: #9c7a3c; }

/* Clickable column header */
.perm-col-hdr { cursor: pointer; transition: background 0.12s; }
.perm-col-hdr:hover { background: #f5edda !important; }
.perm-col-hdr i { font-size: 14px; display: block; margin: 0 auto 2px; color: #9c7a3c; }
.pm-hdr-cap { font-size: 10.5px; letter-spacing: 0.2px; }

/* Right-most row-tools column */
.perm-col-rowact     { text-align: center; white-space: nowrap; width: 90px; }
.perm-col-rowact-hdr { text-align: center; width: 90px; }
.pm-row-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin: 0 1px;
    color: #8a7a56; background: transparent;
    border-radius: 4px; cursor: pointer; font-size: 13px;
    transition: all 0.12s;
}
.pm-row-btn:hover { background: #faf6eb; color: #bd9e4d; }

/* Dirty-row tint */
.perm-matrix-tbl tr.perm-row-dirty td {
    background: #fef9e6 !important;
    border-left: 3px solid #e6b840;
}

/* =============================================================
   Manage Menu (pn_p124) — tree + inline edit pane
   ============================================================= */
.kmm-wrap {
    display: flex; flex-direction: column; gap: 10px;
    height: 100%; box-sizing: border-box;
    padding: 14px 18px; background: #fff;
    border: 1px solid #e6e6e6; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03); overflow: hidden;
    /* Anchor for the View Tabs slide-in panel (.kmm-vt-pnl).
       Without this the absolute panel escapes to the nearest
       positioned ancestor (often <body>) and the slide-in feels
       detached from the menu being edited. */
    position: relative;
}
.kmm-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-bottom: 8px;
    border-bottom: 1px solid #f0eade;
    /* Keep title + toolbar on a single row. When the stage is narrow,
       the search input is the one that shrinks (its `min-width: 0`
       overrides its own 240px hint inside the flex row). */
    flex-wrap: nowrap;
}
.kmm-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 600; color: #6b5a38;
    white-space: nowrap; flex: 0 0 auto;
}
.kmm-title i { font-size: 22px; color: #c0a76d; }
/* Toolbar buttons stay on ONE line — `nowrap` + `flex-shrink: 0` on
   children prevents the cluster from dropping below the search. */
.kmm-toolbar {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap; flex: 0 1 auto; min-width: 0;
}
.kmm-toolbar > .kmm-tb-btn { flex: 0 0 auto; }
.kmm-toolbar > .kmm-search { flex: 1 1 240px; min-width: 120px; }
.kmm-search {
    padding: 0 12px; font-size: 12px; height: 32px;
    border: 1px solid #e2d7bf; border-radius: 5px;
    background: #fafaf6; outline: none; min-width: 240px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.kmm-search:focus { border-color: #c0a76d; box-shadow: 0 0 0 2px rgba(192,167,109,0.15); background: #fff; }
/* Unified 32px toolbar icon buttons — gold hover, filled-gold active
   state matches the rest of the admin chrome. */
.kmm-tb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; font-size: 16px; color: #8a7a56;
    border: 1px solid #e2d7bf; border-radius: 5px;
    background: #fff; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.kmm-tb-btn:hover { background: #faf6eb; color: #bd9e4d; border-color: #c0a76d; }
.kmm-tb-btn:active { transform: translateY(1px); }
.kmm-tb-btn.is-active {
    background: #bd9e4d; color: #fff; border-color: #9c7a3c;
    box-shadow: 0 2px 4px rgba(156,122,60,0.25);
}
.kmm-tb-btn.is-active:hover { background: #9c7a3c; color: #fff; }
/* Primary action — the Add Menu button. Filled gold so it reads as
   the top-level "create" action in the toolbar vs the passive icons. */
.kmm-tb-btn.kmm-tb-btn-primary {
    background: #bd9e4d; color: #fff; border-color: #9c7a3c;
}
.kmm-tb-btn.kmm-tb-btn-primary:hover {
    background: #9c7a3c; color: #fff; border-color: #7e5f2c;
    box-shadow: 0 2px 5px rgba(156,122,60,0.30);
}

/* ===== Add-Menu popup — Left/Right destination picker ===== */
.kmm-add-dest-wrap {
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kmm-add-dest-title {
    font-size: 11px; font-weight: 700;
    color: #6b5a38; margin-bottom: 10px;
    letter-spacing: .5px; text-transform: uppercase;
}
.kmm-add-dest-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.kmm-add-dest-card {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border: 2px solid #e2d7bf; border-radius: 8px;
    background: #fafaf6; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .06s;
    user-select: none;
}
.kmm-add-dest-card:hover {
    border-color: #c0a76d; background: #fff;
    box-shadow: 0 2px 6px rgba(189,158,77,0.15);
}
.kmm-add-dest-card:active { transform: translateY(1px); }
.kmm-add-dest-card.is-active {
    border-color: #bd9e4d; background: #fff;
    box-shadow: 0 0 0 3px rgba(189,158,77,0.18);
}
.kmm-add-dest-icon {
    width: 44px; height: 44px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.kmm-add-dest-icon i { font-size: 22px; }
.kmm-add-dest-body { flex: 1 1 auto; min-width: 0; }
.kmm-add-dest-head {
    font-size: 13px; font-weight: 700; color: #3d3830; margin-bottom: 2px;
}
.kmm-add-dest-hint {
    font-size: 10px; color: #7a6a48; line-height: 1.35;
}
.kmm-add-dest-check {
    width: 22px; height: 22px; border-radius: 50%;
    background: #bd9e4d; color: #fff;
    display: none; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px;
}
.kmm-add-dest-check i { font-size: 14px; }
.kmm-add-dest-card.is-active .kmm-add-dest-check { display: inline-flex; }

/* Add-form cards — the two per-destination forms share this chrome */
.kmm-add-form-card {
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Type picker on the Left Sidebar form — card grid with icon + name +
   one-line hint. Inspired by the kprocess_116 Add-Menu style so admins
   get the same visual vocabulary across the two add flows. Active card
   uses the brand-gold ring so the selection is obvious at a glance. */
.kmm-add-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
}
.kmm-add-type-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 2px solid #e2d7bf;
    border-radius: 7px;
    background: #fafaf6;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s, box-shadow .12s, transform .06s;
    min-height: 54px;
}
.kmm-add-type-card:hover {
    border-color: #c0a76d; background: #fff;
    box-shadow: 0 1px 4px rgba(189,158,77,0.15);
}
.kmm-add-type-card:active { transform: translateY(1px); }
.kmm-add-type-card.is-active {
    border-color: #bd9e4d; background: #fff;
    box-shadow: 0 0 0 2px rgba(189,158,77,0.22);
}
.kmm-add-type-icon {
    width: 34px; height: 34px; border-radius: 6px;
    background: #f0e8d0; color: #9c7a3c;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kmm-add-type-icon i { font-size: 18px; }
.kmm-add-type-card.is-active .kmm-add-type-icon {
    background: #bd9e4d; color: #fff;
}
.kmm-add-type-body { flex: 1 1 auto; min-width: 0; }
.kmm-add-type-name {
    font-size: 12px; font-weight: 700; color: #3d3830;
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kmm-add-type-hint {
    font-size: 9px; color: #8a8270; margin-top: 2px;
    line-height: 1.3; max-height: 22px; overflow: hidden;
}

/* ----- Advanced filter panel ----- */
.kmm-filter-panel {
    background: #fafaf6;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 8px 0;
    animation: kmm-filter-in .18s ease;
}
@keyframes kmm-filter-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kmm-filter-row {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.kmm-filter-group {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 140px; flex: 1 1 140px;
}
.kmm-filter-group label {
    font-size: 10px; font-weight: 700; color: #6b5a38;
    letter-spacing: .3px; text-transform: uppercase;
}
.kmm-filter-input {
    padding: 6px 28px 6px 10px; font-size: 12px;
    border: 1px solid #e2d7bf; border-radius: 5px;
    background: #fff; color: #3d3830;
    height: 32px; box-sizing: border-box;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8270'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    transition: border-color .15s, box-shadow .15s;
}
.kmm-filter-input:focus {
    outline: none; border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.kmm-filter-actions {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
    padding-bottom: 1px;
}
.kmm-filter-count {
    font-size: 10px; font-weight: 700; color: #9c7a3c;
    padding: 5px 10px; background: #fbf4e2; border-radius: 12px;
    border: 1px solid #ecdfbc; white-space: nowrap;
    letter-spacing: .2px;
}
.kmm-filter-count:empty { display: none; }
.kmm-filter-reset {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; font-size: 11px; font-weight: 600;
    color: #7a6a48; background: #fff;
    border: 1px solid #e2d7bf; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.kmm-filter-reset i { font-size: 14px; }
.kmm-filter-reset:hover { background: #f5edda; border-color: #c0a76d; color: #6b5a38; box-shadow: 0 1px 3px rgba(189,158,77,0.15); }

/* Two-pane layout (tree column + edit pane) */
.kmm-body {
    display: flex; flex: 1 1 auto; min-height: 0; gap: 12px;
}
/* Tree column splits into two vertically stacked cards */
.kmm-trees {
    flex: 0 0 55%;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 0;
}
/* Individual tree card (Sidebar Menus / Right Panel Icons) */
.kmm-tree-card {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    min-height: 0;
    border: 1px solid #e2d7bf; border-radius: 6px;
    background: #fafaf6;
    overflow: hidden;
}
.kmm-card-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px;
    background: #f5f0e6;
    border-bottom: 1px solid #e2d7bf;
    font-size: 11px; font-weight: 600; color: #5a5445;
    flex-shrink: 0;
}
.kmm-card-title { display: flex; align-items: center; gap: 6px; }
.kmm-card-title i { font-size: 14px; color: #bd9e4d; }
/* Cluster of card-header quick-action buttons + the expand toggle */
.kmm-card-actions { display: flex; align-items: center; gap: 2px; }
.kmm-card-btn,
.kmm-card-expand {
    cursor: pointer; padding: 3px 6px; border-radius: 4px;
    color: #8a8270; transition: background .15s, color .15s;
    line-height: 1;
}
.kmm-card-btn:hover,
.kmm-card-expand:hover { background: #e8dfc8; color: #5a5445; }
.kmm-card-btn i,
.kmm-card-expand i { font-size: 15px; vertical-align: middle; }
.kmm-card-body {
    flex: 1 1 auto; min-height: 0;
    overflow: auto; padding: 10px;
}
/* Expanded state — active card fills the column, sibling shrinks to
   just its header strip so the user can click its expand button to
   restore the split. flex 0 0 auto keeps the header's natural height
   without taking any extra space. */
.kmm-tree-card.kmm-card-expanded { flex: 1 1 100%; }
.kmm-tree-card.kmm-card-collapsed { flex: 0 0 auto; }
.kmm-tree-card.kmm-card-collapsed .kmm-card-body { display: none; }
/* Icon rotation — driven from CSS so the button glyph stays intact
   whatever the Boxicons build on this install ships. Expanded card
   rotates its chevron 180°; collapsed sibling rotates the opposite
   way to hint at "open me back up". */
.kmm-tree-card .kmm-card-expand i {
    transition: transform .18s ease;
}
.kmm-tree-card.kmm-card-expanded .kmm-card-expand i {
    transform: rotate(180deg);
    color: #bd9e4d;
}
.kmm-tree-card.kmm-card-collapsed .kmm-card-expand i {
    transform: rotate(45deg);
}
.kmm-tree-pane {
    /* Legacy selector kept for kmm_render_tree's inner UL. Purely a */
    /* structural hook now — no layout rules so the card-body above   */
    /* drives scrolling + padding.                                     */
}
.kmm-edit-pane {
    flex: 1 1 auto;
    overflow: auto;
    border: 1px solid #e2d7bf; border-radius: 6px;
    background: #fff;
}
.kmm-edit-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 8px;
    color: #aaa; font-size: 13px; text-align: center;
}
.kmm-edit-empty i { font-size: 34px; color: #d0c298; }

/* Tree structure */
.kmm-tree-root, .kmm-tree-children { list-style: none; padding: 0; margin: 0; }
.kmm-tree-children { padding-left: 20px; border-left: 1px dashed #e2d7bf; margin-left: 10px; }
/* Section header rendered inline with the tree — matches the live
   sidebar's `<li class="menu-header">` breaks (GENERAL, PROPERTY
   Management, SALES & LEASING, FINANCE, etc.). Non-interactive, just
   a visual separator above the first group of each section. */
.kmm-section-header {
    margin: 14px 0 4px;
    padding: 4px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #9c7a3c;
    border-bottom: 1px solid #e8dfc8;
    background: linear-gradient(to right, #f7efde 0%, transparent 70%);
    user-select: none;
}
.kmm-section-header:first-child { margin-top: 0; }
/* Sub-section header — appears INSIDE a parent group's children UL
   to cluster sub-menus by their sysmenu_group value (e.g. Menu
   Management → "Additional" and "Access Privilege" sub-sections).
   Lighter + smaller than the top-level section header. */
.kmm-sub-section-header {
    margin: 8px 0 2px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #8a7a56;
    background: #f7efde;
    border-left: 3px solid #c0a76d;
    border-radius: 0 4px 4px 0;
    list-style: none;
    user-select: none;
}
.kmm-sub-section-header:first-child { margin-top: 0; }

/* Live sidebar sub-section header — rendered by kprocess_0.php when
   a parent group's sub-menus cluster by sysmenu_group (e.g. Menu
   Management → "Additional" / "Access Privilege"). The <li> carries
   BOTH `menu-header` (so it inherits the theme's visible label
   colour + weight) AND `menu-subheader` (this modifier — smaller,
   inset, gold left-bar accent) so it reads as a sub-level label
   nested inside an open parent. */
.sidebar .menu-subheader {
    padding-left: 28px !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    letter-spacing: .5px !important;
    opacity: 0.78;
    border-left: 3px solid rgba(189,158,77,0.85);
    background: rgba(189,158,77,0.06);
    cursor: default; pointer-events: none;
}
.sidebar .menu-subheader span { color: inherit !important; }
.kmm-node-wrap { margin: 2px 0; }
.kmm-node {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-radius: 5px;
    cursor: default; transition: background 0.1s;
}
.kmm-node:hover { background: #faf6eb; }
.kmm-node.selected { background: #fbf5e6; box-shadow: inset 3px 0 0 #bd9e4d; }
.kmm-node-group { font-weight: 600; color: #6b5a38; }
.kmm-node-sep   { opacity: 0.6; font-style: italic; }

.kmm-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    color: #bd9e4d; cursor: pointer; border-radius: 3px;
}
.kmm-caret:hover { background: #faf6eb; }
.kmm-caret-empty { cursor: default; visibility: hidden; }
.kmm-caret i { font-size: 14px; }

.kmm-node-body {
    display: flex; align-items: center; gap: 6px; flex: 1 1 auto;
    cursor: pointer; min-width: 0;
}
.kmm-node-icon { color: #9c7a3c; font-size: 14px; }
.kmm-node-caption {
    color: #3d3830; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kmm-type-badge {
    padding: 1px 6px; font-size: 9px; font-weight: 700;
    color: #fff; border-radius: 8px;
    letter-spacing: 0.3px; text-transform: uppercase;
    flex-shrink: 0;
}
/* sysmenu_id chip — small muted pill rendered before the type/module
   badges. Helps admins correlate tree rows with audit entries. */
.kmm-node-id {
    padding: 1px 6px; font-size: 9px; font-weight: 600;
    color: #8a7a56; background: #faf6eb;
    border: 1px solid #ecdfbc; border-radius: 8px;
    letter-spacing: .2px;
    margin-left: 4px; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.kmm-node-id:hover { background: #f0e8d0; color: #6b5a38; }
/* User-configurable badge — sysmenu_badge_text + sysmenu_badge_color.
   Rendered next to the caption so it reads together with the menu
   title (NEW, HOT, SALE, "9", etc.). Default colour is red when no
   hex is set; the renderer injects the admin's hex inline. Gentle
   pulse animation draws the eye without flashing aggressively. */
.kmm-user-badge {
    padding: 1px 7px; font-size: 9px; font-weight: 700;
    color: #fff; background: #e74c3c; border: 1px solid #e74c3c;
    border-radius: 8px; letter-spacing: .3px; text-transform: uppercase;
    margin-left: 6px; flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
    white-space: nowrap;
    /* Modern entry — same pop-in the right-icon badge uses (one-shot,
       elastic overshoot). Replaces the old wavy box-shadow pulse. */
    position: relative;
    isolation: isolate;
    animation: kmma-badge-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.kmm-user-badge::after {
    /* Ping ring — same pattern as .ri-nav-badge::after. Soft radar
       ping that says "new" without distorting the badge geometry. */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
    animation: kmma-badge-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Legacy keyframes kept for any callers we haven't migrated yet
   (some processor-rendered badges may still reference this). */
@keyframes kmm-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.0); }
    50%      { box-shadow: 0 0 0 3px rgba(231,76,60,0.20); }
}
/* Live-sidebar variant — same logic, but the <a> wrapper inside a
   sub-menu item needs the badge to float right so the caption stays
   left-aligned. Emitted inline from kprocess_0.php. Same modern
   entry + ping animations as the right-icon badge so all three
   surfaces (Menu Bank tree, sidebar, right icon) feel identical. */
.sidebar .menu-item .sidebar-user-badge {
    display: inline-block;
    padding: 1px 6px; font-size: 9px; font-weight: 700;
    color: #fff; background: #e74c3c;
    border-radius: 8px; letter-spacing: .3px; text-transform: uppercase;
    margin-left: auto;
    white-space: nowrap;
    vertical-align: middle;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
    position: relative;
    isolation: isolate;
    animation: kmma-badge-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sidebar .menu-item .sidebar-user-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
    animation: kmma-badge-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
/* Parent-group rows have an expand/collapse chevron painted by the
   theme at the right edge. A small right gutter keeps the badge and
   the chevron from touching without wasting sidebar width. */
.sidebar .mainmen-item > a .sidebar-user-badge {
    margin-right: 8px;
}

/* Right-icon badge — sysmenu_badge_text / _color / _source for
   right-panel icons (types 50/55/56/57). Different layout than the
   sidebar badge because right icons are square buttons, not text
   rows: this overlays a small pill on the top-right corner of the
   icon, so live-count badges (e.g. unread notifications) read at a
   glance. The .ri-nav-icon container has position:relative set so
   absolute positioning anchors here, not at body level. */
.ri-nav-icon { position: relative; }
/* Right-icon badge — sits OUTSIDE the icon on the left, hugging the
   icon's left edge. Sized for readability over compactness: previous
   8.5px / 14px-tall version was unreadable on retina displays once
   you actually had to read a word like "New". Bumped to 11px font /
   20px height with generous side padding; dropped the white border
   ring and text-shadow because both reduced effective contrast on
   short strings, and dropped the overflow:ellipsis since 80px max-
   width holds typical badges ("New", "Soon", "v2", "+3 more") at
   their natural width. */
.ri-nav-badge {
    position: absolute; top: 2px; right: 100%; margin-right: -8px;
    /* Padding-driven sizing with TOP < BOTTOM to bias the glyph
       upward — fixes the typographic-low-bias the user spotted
       on the previous fixed-height variant. Total box: 2 + 11 +
       5 = 18px tall (when font-size:11). Text's visual centre
       lands ~1px above the geometric centre, which the eye reads
       as "centred" thanks to the cap-height-vs-x-height
       asymmetry built into Latin fonts. */
    min-width: 22px;
    padding: 2px 10px 5px;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
    font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #fff;
    background: #e74c3c;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    pointer-events: none;
    /* Modern entry animation: bounce-in on first paint. One-shot,
       quick (380ms), with a gentle overshoot so admins notice the
       badge appearing without it feeling jumpy. After the entry
       the badge sits still — the continuous ping ring (::after
       below) carries the "look-at-me" job from there. */
    animation: kmma-badge-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    white-space: nowrap;
    z-index: 2;
    /* Cap the badge width so a long string ("Coming Soon") truncates
       cleanly instead of stretching across the row. */
    max-width: 90px;
    overflow: visible; text-overflow: ellipsis;
    /* Tabular numerals — keeps "(4)" / "(12)" / "(123)" optically
       aligned across rows so consecutive count-style badges read
       like a column instead of jittering. */
    font-variant-numeric: tabular-nums;
    /* Crisper rendering on retina + Windows ClearType. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    isolation: isolate;
}

/* Ping ring — same shape + colour as the badge, sits behind it via
   negative z-index, expands outward and fades. Soft "radar ping"
   that signals "new" without the wavy box-shadow pulse the user
   asked us to replace. Uses ease-out so the ring expands fast
   then slows as it fades — same easing every modern chat app
   (Slack, Discord, Telegram, Tailwind's animate-ping) uses. */
.ri-nav-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
    animation: kmma-badge-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes kmma-badge-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes kmma-badge-ping {
    0%        { transform: scale(1);   opacity: 0.55; }
    70%, 100% { transform: scale(1.9); opacity: 0; }
}

/* =================================================================
   Sidebar sub-menu expand/collapse — CSS grid-template-rows 0fr↔1fr.

   Replaces the prior JS slideUp/slideDown animation that animated
   `height` on a sizing-unknown element (needed a forced reflow +
   explicit px value + cleanup setTimeout, and felt "sticky" at the
   tail because height animation forces layout per frame).

   The grid trick:
     - Always render the sub-menu list as `display: grid`.
     - Default `grid-template-rows: 0fr` collapses it to zero height.
     - Adding `.open` to the parent <li> bumps it to `1fr`, which
       resolves to the intrinsic content height.
     - Transition animates between the two fractional values on the
       compositor — no reflow, no JS measurement, no setTimeout.

   Only applies when the sidebar is expanded; collapsed sidebar
   still uses the Popper-driven flyout (see line ~999 of
   tt_layouts_styles.css) which position-fixes the list and
   bypasses the accordion.
================================================================= */
.bdy-layout .sidebar:not(.collapsed) .menu .menu-item.sub-menu > .sub-menu-list {
    /* Force grid display so grid-template-rows can animate. Overrides
       the theme's base `display: none` via higher-specificity
       :not(.collapsed) selector. */
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1),
                padding                240ms cubic-bezier(0.4, 0, 0.2, 1),
                margin                 240ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color       240ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
/* Collapsed state — force padding / margin / background to zero so
   the cream panel the theme paints around the list doesn't leave an
   empty box between sibling menu rows. These override the theme's
   line-917 block (`.menu > ul > .sub-menu > .sub-menu-list` with
   background #f3efe4, padding 6 0, margin 2 6 8 6) — which is the
   styling that shows when the list is open. */
.bdy-layout .sidebar:not(.collapsed) .menu .menu-item.sub-menu:not(.open) > .sub-menu-list {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
}
.bdy-layout .sidebar:not(.collapsed) .menu .menu-item.sub-menu.open > .sub-menu-list {
    grid-template-rows: 1fr;
}
/* Grid tracks default to `min-content` minimum, which can cap the
   track height at the intrinsic minimum and prevent animation from
   0. `min-height: 0` + `overflow: hidden` on the row child let the
   track shrink all the way to zero, which is what lets 0fr→1fr
   actually interpolate visibly instead of snapping. */
.bdy-layout .sidebar:not(.collapsed) .menu .menu-item.sub-menu > .sub-menu-list > ul {
    min-height: 0;
    overflow: hidden;
}

/* Menu search — universal hide class applied by the search filter
   to any menu-item / menu-header that doesn't match the query. The
   existing theme `.hidden` rules are scoped narrowly (only mainmen-
   item + right-panel tags), so sub-menu children wouldn't actually
   disappear without this broader selector. */
.sidebar .menu .menu-item.kmenu-hidden,
.sidebar .menu .menu-header.kmenu-hidden {
    display: none !important;
}
/* Module badge — rendered alongside the type badge on rows that
   carry a sysmenu_module_id. Background colour is applied inline
   from sys_modules_color so admins can tell modules apart at a
   glance. Slight 2px margin separates it from the type badge. */
.kmm-mod-badge {
    padding: 1px 7px; font-size: 9px; font-weight: 600;
    color: #fff; background: #888; border: 1px solid transparent;
    border-radius: 8px; letter-spacing: 0.2px;
    margin-left: 4px; flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
    white-space: nowrap;
}

.kmm-node-actions {
    display: flex; align-items: center; gap: 2px; flex-shrink: 0;
    opacity: 0; transition: opacity 0.15s;
}
.kmm-node:hover .kmm-node-actions, .kmm-node.selected .kmm-node-actions { opacity: 1; }
.kmm-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; cursor: pointer;
    color: #8a7a56; border-radius: 3px; font-size: 13px;
    transition: background 0.1s, color 0.1s;
}
.kmm-act:hover { background: #fff; color: #bd9e4d; }
.kmm-act-danger:hover { color: #c0392b; }
.kmm-eye-on  { color: #27ae60; }
.kmm-eye-off { color: #c0c0c0; }

/* Edit form (right pane) */
.kmm-edit-form { padding: 14px 18px; }
.kmm-edit-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid #f0eade;
}
.kmm-edit-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #6b5a38;
}
.kmm-edit-id {
    padding: 2px 8px; font-family: Consolas, monospace;
    font-size: 11px; color: #9c7a3c;
    background: #faf6eb; border: 1px solid #e2d7bf; border-radius: 4px;
}
/* Header-right action area — auxiliary buttons (View Tabs etc.)
   that don't belong with the Save/Revert/Delete footer. The
   parent .kmm-edit-header is already a flex row with
   justify-content:space-between, so this just needs to flow its
   own children. */
.kmm-edit-actions {
    display: flex; align-items: center; gap: 6px;
}
.kmm-edit-section {
    margin-top: 16px; margin-bottom: 8px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    color: #8a7a56;
}
.kmm-form-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kmm-form-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kmm-form-full  { flex: 1 1 100%; }
.kmm-form-half  { flex: 1 1 calc(50% - 5px); }
.kmm-form-third { flex: 1 1 calc(33.33% - 7px); }
.kmm-form-label { font-size: 10px; font-weight: 600; color: #6b5a38; }
.kmm-form-input {
    padding: 6px 10px; font-size: 12px;
    border: 1px solid #e2d7bf; border-radius: 5px;
    /* IMPORTANT: use background-color (not background shorthand) so the
       <select> chevron SVG applied below via background-image/repeat/
       position/size isn't silently wiped out by this declaration. The
       shorthand form resets every background-* sub-property to its
       default (including repeat:repeat), which caused the chevron to
       tile across the whole combo on focus. */
    background-color: #fafaf6;
    outline: none; color: #3d3830;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    height: 32px;
}
.kmm-form-input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
    /* Same reason as above — shorthand would reset our <select> chevron. */
    background-color: #fff;
}

/* <select> rendering — strip native chrome so the combo matches the
   text inputs on every browser, then paint a small chevron via an
   inline SVG background. Extra right padding keeps the label text
   clear of the arrow. */
select.kmm-form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8270'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
    line-height: 1.2;
}
select.kmm-form-input:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23bd9e4d'/%3E%3C/svg%3E");
}
select.kmm-form-input::-ms-expand { display: none; }

/* <textarea> uses the same chrome as text inputs but must not
   inherit the fixed 32 px height used for single-line inputs, and
   wraps long values on resize. */
textarea.kmm-form-input {
    height: auto;
    min-height: 44px;
    resize: vertical;
    line-height: 1.35;
    font-family: inherit;
}
.kmm-form-hint { font-size: 10px; color: #a8a092; margin-top: 2px; }
.kmm-checkbox {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; font-size: 12px;
    background: #fafaf6; border: 1px solid #e2d7bf; border-radius: 5px;
    cursor: pointer; user-select: none; color: #3d3830;
}
.kmm-checkbox input { accent-color: #bd9e4d; width: 14px; height: 14px; }

.kmm-edit-footer {
    display: flex; align-items: center; gap: 8px;
    padding-top: 14px; margin-top: 14px;
    border-top: 1px solid #f0eade;
}
.kmm-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; font-size: 12px; font-weight: 500;
    color: #7a6a48; background: #fff;
    border: 1px solid #e2d7bf; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
.kmm-btn:hover { background: #f5edda; border-color: #c0a76d; color: #6b5a38; box-shadow: 0 1px 3px rgba(189,158,77,0.15); }
.kmm-btn:active { transform: translateY(1px); box-shadow: none; }
/* Primary + danger variants — fully respec border + color on hover so the
   earlier `.kmm-btn:hover` cascade doesn't leave a cream border on a
   gold/red button (the previous bug). */
.kmm-btn-primary { background: #bd9e4d; border-color: #9c7a3c; color: #fff; }
.kmm-btn-primary:hover { background: #9c7a3c; border-color: #7e5f2c; color: #fff; box-shadow: 0 2px 5px rgba(156,122,60,0.30); }
.kmm-btn-danger { background: #c0392b; border-color: #922b21; color: #fff; }
.kmm-btn-danger:hover  { background: #922b21; border-color: #6f1e17; color: #fff; box-shadow: 0 2px 5px rgba(192,57,43,0.30); }
/* Secondary variant — soft cream chip on the Kate gold theme for
   utility buttons (View Tabs etc.). Subordinate to .kmm-btn-primary
   (which is the filled gold) but still visibly on-theme — no off-
   palette blues. Hover deepens to the same gold the primary uses
   so the two variants share a hover identity. */
.kmm-btn-secondary { background: #f5edda; border-color: #c0a76d; color: #6b5a2e; }
.kmm-btn-secondary:hover { background: #ece2c4; border-color: #9c7a3c; color: #5a4a1e; box-shadow: 0 2px 5px rgba(192,167,109,0.30); }
/* Inline count chip on a kmm-btn — small darker pill that shows
   how many items the button reveals. Helps admins see at a glance
   whether there's anything to view before clicking. */
.kmm-btn-count {
    display: inline-block; min-width: 18px;
    padding: 1px 6px; margin-left: 4px;
    font-size: 10px; font-weight: 700;
    background: rgba(0,0,0,0.18); color: #fff;
    border-radius: 10px; text-align: center;
}
/* Count chip override on the cream secondary — the default
   translucent-dark-on-light produces a muddy grey pill with white
   text. Use a solid gold pill so the count reads cleanly against
   the cream chip and stays on-theme. */
.kmm-btn-secondary .kmm-btn-count {
    background: #bd9e4d; color: #fff;
}

/* "View Tabs" popup — table of kdv_tabs rows attached to the menu.
   Same density as the History Lookups landing's table for visual
   consistency across the admin tooling. */
/* Toolbar above the View Tabs table — count on the left, "+ Add"
   button on the right. Bordered band so the table reads as one
   surface below it. */
.kmm-vt-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px dashed #ece2c4;
}
.kmm-vt-add-btn { padding: 6px 14px; font-size: 11px; }
.kmm-vt-count   { font-size: 11px; color: #888; }

/* Per-row actions column — three icons with consistent sizing.
   Match the History Lookups landing's action icons so the admin
   tooling reads as one product. */
.kmm-vt-c-act .k119-hist-page-btn,
.kmm-vt-c-act .k127-mmh-trash {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 3px;
    margin: 0 1px;
}
.kmm-vt-tbl {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 11px; color: #444;
}
.kmm-vt-tbl thead th {
    background: #faf7f0; color: #6b5a2e;
    text-align: left; font-weight: 600; font-size: 9.5px;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 6px 8px; border-bottom: 1px solid #ece2c4;
}
.kmm-vt-tbl tbody td {
    padding: 6px 8px; border-bottom: 1px solid #f5f0e6;
    vertical-align: middle; line-height: 1.4;
}
.kmm-vt-tbl tbody tr:hover { background: #fbf8ee; }
.kmm-vt-tbl tbody tr:last-child td { border-bottom: 0; }
.kmm-vt-off td { color: #aaa; }
.kmm-vt-c-num    { width: 36px;  text-align: right; font-variant-numeric: tabular-nums; color: #aaa; font-weight: 600; padding-right: 8px; }
.kmm-vt-c-ord    { width: 60px;  text-align: right; font-variant-numeric: tabular-nums; color: #888; }
.kmm-vt-c-icon   { width: 44px;  text-align: center; }
/* Icon column — light card around the actual boxicon so the column
   reads as a visual-identity column instead of a small inline glyph.
   Empty variant uses a neutral placeholder so admins can spot tabs
   that need an icon picked. */
.kmm-vt-iconbox {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: #faf7f0; border: 1px solid #ece2c4; border-radius: 5px;
    color: #6b5a2e;
}
.kmm-vt-iconbox i { font-size: 16px; }
.kmm-vt-iconbox-empty { color: #d6cfbf; background: #fff; }

/* Inner panel — form view (add / edit) header + footer. The header
   carries the title + a Back-to-List affordance; the footer has
   Cancel + Save. Both render INSIDE the same popup body via the
   panel-swap actions. */
.kmm-vt-formhead {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid #ece2c4;
}
.kmm-vt-formtitle {
    font-size: 13px; font-weight: 600; color: #6b5a2e;
    display: flex; align-items: center; gap: 6px;
}
.kmm-vt-formtitle i { font-size: 16px; }
.kmm-vt-formfoot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; margin-top: 16px; padding-top: 12px;
    border-top: 1px solid #ece2c4;
}
.kmm-vt-c-label  { font-weight: 500; color: #3d3830; }
.kmm-vt-c-key    { width: 140px; }
.kmm-vt-c-proc   { width: 220px; color: #6b5a2e; }
.kmm-vt-c-status { width: 80px;  white-space: nowrap; }
.kmm-vt-c-access { width: 180px; }
.kmm-vt-c-act    { width: 100px; text-align: right; white-space: nowrap; }
.kmm-vt-act      { color: #888; font-size: 10.5px; }
.kmm-vt-anyone   { color: #c9a84c; font-style: italic; font-size: 10.5px; }
/* Header-area kmm-btn-secondary visual polish — slimmer chip so
   it doesn't dwarf the title to its left. The footer kmm-btn-
   secondary keeps the larger sizing (where buttons need more
   weight). */
.kmm-edit-actions .kmm-btn { padding: 5px 12px; font-size: 11px; }
.kmm-edit-actions .kmm-btn i { font-size: 13px; }
/* Loading state — spinner + locked pointer. Matches the btn-loading
   pattern shared with k116SaveAll so behaviour is consistent. */
.kmm-btn.kmm-btn-loading { pointer-events: none; opacity: 0.72; cursor: wait; }
.kmm-btn .btn-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: kmm-btn-spin .6s linear infinite;
    margin-right: 4px; vertical-align: -2px;
}
@keyframes kmm-btn-spin { to { transform: rotate(360deg); } }

.kmm-empty {
    padding: 30px 20px; text-align: center; color: #aaa;
    font-size: 12px;
}

/* Read-only access display inside the edit form. The editable picker
   moved to the Access Privilege slide-in panel so the basics form
   stays focused on caption/order/etc; here we show the current state
   as a strip of soft pills (same .k127-mmh-aud-pill chrome used in
   the History Lookups landing's audience column) wrapped in a card
   tinted to read as "informational, not a control". */
.kmm-access-readonly {
    display: flex; flex-wrap: wrap; gap: 4px 4px;
    padding: 8px 10px;
    background: #fbf8ee;
    border: 1px dashed #ece2c4;
    border-radius: 5px;
    min-height: 32px; align-items: center;
}
.kmm-access-empty {
    color: #aaa; font-size: 11px; font-style: italic;
}
/* Vertical gap between the read-only Access and Mode blocks in the
   edit form. Bigger than the default form-group gap so the two
   fields read as visibly separate (Mode is legacy + secondary). */
.kmm-access-gap { height: 22px; }

/* Public-access shortcut checkbox — styled as a soft cream banner so
   it visually anchors the Access section and the toggle stands out
   next to the read-only pills below. */
.kmm-public-toggle {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    background: #fbf5e6;
    border: 1px solid #e2d7bf; border-radius: 5px;
    font-size: 12px; color: #555; line-height: 1.5;
    cursor: pointer; user-select: none;
    margin-bottom: 6px;
}
.kmm-public-toggle:hover { background: #f5edda; border-color: #c0a76d; }
.kmm-public-toggle input { margin: 2px 0 0; cursor: pointer; }
.kmm-public-toggle b { color: #6b5a2e; }
.kmm-public-toggle i { color: #8a7a56; font-style: italic; }

/* View Tabs internal slide-in panel — same visual pattern as the
   list view's row-detail panel (.rview-popup-pnl in kprocess_2),
   re-skinned to match the Menu Bank surface. Anchored absolute
   inside .kmm-wrap (which is position: relative), parked off-screen
   to the right, slides to right:0 when .open is added by the
   server's tt_addclass response. The .open transition is the same
   ease+duration the row-detail panel uses so the two surfaces feel
   like one product. */
.kmm-vt-pnl {
    position: absolute; top: 0; right: -1200px; bottom: 0;
    width: 900px; max-width: 95%;
    background: #fff;
    border-left: 1px solid #e6e6e6;
    box-shadow: -6px 0 18px rgba(0,0,0,0.08);
    z-index: 50;
    transition: right .35s ease;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.kmm-vt-pnl.open { right: 0; }

/* Inner shell — header bar (title + close) + scrolling body. Body
   takes the remaining height via flex so the page scroll stays
   inside the panel and never spills into the underlying tree. */
.kmm-vt-pnl-inner {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: #fafaf6;
}
.kmm-vt-pnl-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: #f5f0e6; border-bottom: 1px solid #ece2c4;
    flex-shrink: 0;
}
.kmm-vt-pnl-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #6b5a2e;
}
.kmm-vt-pnl-title i { font-size: 18px; color: #c0a76d; }
.kmm-vt-pnl-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 4px;
    color: #8a7a56; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.kmm-vt-pnl-close:hover { background: #ece2c4; color: #6b5a2e; }
.kmm-vt-pnl-close i { font-size: 18px; }
.kmm-vt-pnl-body {
    flex: 1; overflow-y: auto;
    padding: 14px;
}

/* =====================================================================
   Manage Menu Access (Bulk) — pn_p128 stage page styles.
   Wizard layout: header → action cards → menu picker → from/to pickers →
   preview pane (which swaps in for progress + final summary). Same
   gold/cream palette as the rest of the admin tooling so the bulk
   tools feel like one product.
   ================================================================= */
.kmma-wrap {
    display: flex; flex-direction: column;
    height: 100%; box-sizing: border-box;
    padding: 14px 18px; background: #fff;
    border: 1px solid #e6e6e6; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    overflow: hidden;
}
.kmma-header {
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid #f0eade;
}
.kmma-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 600; color: #6b5a38;
}
.kmma-title i { font-size: 22px; color: #c0a76d; }
.kmma-subtitle {
    margin-top: 4px; color: #8a8270; font-size: 12px;
}
.kmma-body {
    flex: 1; overflow-y: auto;
    padding-right: 4px;
    display: flex; flex-direction: column; gap: 18px;
}

/* Two-column split — left is the tree picker, right is the wizard
   form. The tree column has its own scroll (long menu lists shouldn't
   push the form below the fold). On narrow screens the columns stack. */
.kmma-split-row {
    display: flex; gap: 16px;
    flex: 1; min-height: 0;
    overflow: hidden;
}
.kmma-split-left {
    flex: 0 0 380px;
    display: flex; flex-direction: column;
    background: #fafaf6;
    border: 1px solid #ece2c4; border-radius: 6px;
    overflow: hidden;
}
.kmma-split-right {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.kmma-split-right .kmma-body {
    padding-right: 8px;
}
@media (max-width: 1100px) {
    .kmma-split-row { flex-direction: column; overflow: visible; }
    .kmma-split-left { flex: 0 0 280px; }
}

/* Tree column — header (title + search) + scrollable body. */
.kmma-tree-head {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid #ece2c4;
    background: #f5f0e6;
}
.kmma-tree-titlebar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.kmma-tree-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #6b5a2e;
}
.kmma-tree-title i { font-size: 16px; color: #c0a76d; }
/* Expand-all / collapse-all icon row. Subtle by default, gold on
   hover. Sits in the title bar so the search input below has the
   full row width. */
.kmma-tree-iconbtns {
    display: flex; gap: 2px;
}
.kmma-tree-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    color: #8a7a56; cursor: pointer;
    border-radius: 3px;
    transition: background .12s, color .12s;
}
.kmma-tree-iconbtn:hover {
    background: #ece2c4; color: #6b5a2e;
}
.kmma-tree-iconbtn i { font-size: 16px; }
/* Stronger variant — used for the Select All button so the primary
   action stands out from the secondary expand/collapse glyphs. */
.kmma-tree-iconbtn-strong { color: #bd9e4d; }
.kmma-tree-iconbtn-strong:hover {
    background: #f5edda; color: #6b5a2e;
}
/* Vertical hairline that visually groups the Select/Deselect pair
   apart from the Expand/Collapse pair. */
.kmma-tree-iconbtn-sep {
    display: inline-block;
    width: 1px; height: 18px; margin: 0 4px;
    background: #ece2c4;
}
.kmma-tree-toolbar { display: flex; }
.kmma-tree-search {
    width: 100%;
    padding: 6px 10px; font-size: 12px;
    color: #444; background: #fff;
    border: 1px solid #e2d7bf; border-radius: 4px;
    outline: none;
}
.kmma-tree-search:focus { border-color: #bd9e4d; box-shadow: 0 0 0 2px rgba(189,158,77,0.15); }
.kmma-tree-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 8px 4px 12px;
    font-size: 12px;
    min-width: 0;
}
.kmma-tree-empty {
    padding: 20px; text-align: center; color: #aaa; font-style: italic; font-size: 11px;
}

/* Bucket — Sidebar / Right Panel groupings. Header is clickable to
   collapse the whole bucket. */
.kmma-tree-bucket { margin-bottom: 8px; }
.kmma-tree-bucket-head {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; cursor: pointer;
    font-size: 11px; font-weight: 700; color: #6b5a2e;
    text-transform: uppercase; letter-spacing: .4px;
    background: #ece2c4;
    border-radius: 3px;
    user-select: none;
}
.kmma-tree-bucket-head:hover { background: #e0d4af; }
.kmma-tree-bucket-head i { font-size: 14px; }
.kmma-tree-bucket-caret { transition: transform .15s ease; }
.kmma-tree-bucket-collapsed .kmma-tree-bucket-caret { transform: rotate(-90deg); }
.kmma-tree-bucket-collapsed .kmma-tree-bucket-body { display: none; }
.kmma-tree-bucket-body { padding-top: 4px; }

/* Tree node — one row per menu / group. Grid layout (NOT flex) so the
   columns are explicit + predictable: caret | checkbox | label-grow |
   mid-id. Flex was placing the label off-screen on some menu sets
   because flex-shrink interactions with the boxicons + min-width:0
   were collapsing the label to zero width. Grid removes the ambiguity. */
.kmma-tree-node { display: block; }
.kmma-tree-row {
    display: grid;
    /* caret | checkbox | label-grow | module-badge | #id */
    grid-template-columns: 16px 18px 1fr auto auto;
    align-items: center; gap: 6px;
    padding: 3px 6px 3px 0;
    border-radius: 3px;
    cursor: default;
    min-width: 0;
}
.kmma-tree-row:hover { background: #fbf5e6; }
.kmma-tree-caret {
    display: inline-flex; align-items: center; justify-content: center;
    color: #8a7a56; cursor: pointer;
    font-size: 12px; line-height: 1;
    width: 16px; height: 16px;
    transition: transform .15s ease;
    user-select: none;
}
.kmma-tree-caret-open { transform: rotate(90deg); }
.kmma-tree-caret-spacer {
    display: inline-block; width: 16px; height: 16px;
}
.kmma-tree-cb {
    margin: 0; cursor: pointer;
    accent-color: #bd9e4d;
    width: 14px; height: 14px;
    justify-self: center;
}
.kmma-tree-grp .kmma-tree-label {
    font-weight: 600; color: #6b5a2e;
}
.kmma-tree-label {
    color: #3d3830;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px;
}
.kmma-tree-mid {
    color: #b5a87f; font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
}
/* Module pill — sits between label and #id. Inline-coloured from
   sys_modules_color so each module reads as a distinct chip. Empty
   variant is an invisible 0-width spacer that preserves the grid
   column so labels don't shift between rows that have a module and
   rows that don't. */
.kmma-tree-mod {
    display: inline-block;
    max-width: 90px;
    padding: 1px 6px;
    background: #c0a76d; color: #fff;
    border: 1px solid #c0a76d; border-radius: 8px;
    font-size: 9.5px; font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase; letter-spacing: .3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kmma-tree-mod-empty {
    display: inline-block; width: 0;
}
/* Source-suggested row highlight — gold left-border + tinted
   background. Applied by kMmaApplySuggestion to every row whose
   menu came back from mma_menus_for_users. Lets admins spot at
   a glance which menus were auto-picked from source vs. manually
   ticked. */
.kmma-tree-row-suggested {
    background: #fbf3da !important;
    box-shadow: inset 3px 0 0 #bd9e4d;
}
.kmma-tree-row-suggested:hover { background: #f8eccd !important; }

/* Soft button variant — used for the "Highlight & Pick Menus" action
   under the source-users picker. Less heavy than the primary gold
   button, more emphasis than the secondary cream chip. */
.kmma-from-actions {
    margin-top: 8px;
    display: flex; justify-content: flex-start;
}
.kmma-btn-soft {
    background: #fbf3da; border-color: #c0a76d; color: #6b5a2e;
}
.kmma-btn-soft:hover {
    background: #f5edda; border-color: #9c7a3c; color: #5a4a1e;
    box-shadow: 0 1px 3px rgba(192,167,109,0.20);
}
.kmma-btn-soft i { color: #bd9e4d; }

/* Picked-menus chip preview (right column). Mirrors the tree
   selection live — each chip has × to drop a menu without scrolling
   back to find it in the tree. Empty state nudges admin to use the
   tree on the left. */
.kmma-pick-count {
    display: inline-block; min-width: 22px;
    padding: 1px 8px; margin-left: 6px;
    background: #bd9e4d; color: #fff;
    border-radius: 10px;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.kmma-pick-clear {
    margin-left: auto;
    color: #c0392b; cursor: pointer;
    font-size: 11px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
}
.kmma-pick-clear:hover { text-decoration: underline; }
.kmma-pick-list {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 10px;
    background: #fbf8ee;
    border: 1px dashed #ece2c4; border-radius: 5px;
    min-height: 50px;
    max-height: 180px; overflow-y: auto;
}
.kmma-pick-empty {
    color: #aaa; font-size: 11px; font-style: italic;
    padding: 4px 6px;
}
.kmma-pick-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid #e2d7bf; border-radius: 12px;
    font-size: 11px; color: #3d3830;
}
.kmma-pick-chip-mid {
    color: #b5a87f; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kmma-pick-chip-cap {
    max-width: 200px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kmma-pick-chip-x {
    color: #c0a76d; cursor: pointer; font-size: 14px;
    transition: color .12s;
}
.kmma-pick-chip-x:hover { color: #c0392b; }

/* Section + step number — visual rhythm so admin reads the wizard
   as 1 → 2 → 3. */
.kmma-section { display: flex; flex-direction: column; gap: 6px; }
.kmma-section-half { flex: 1 1 50%; min-width: 0; }
.kmma-section-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: #6b5a2e;
    text-transform: uppercase; letter-spacing: .3px;
}
.kmma-section-label small { color: #8a8270; font-weight: 400; text-transform: none; letter-spacing: 0; }
.kmma-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #bd9e4d; color: #fff;
    font-size: 11px; font-weight: 700;
}
.kmma-step-to { background: #5a8c5e; }
.kmma-row {
    display: flex; gap: 12px; flex-wrap: wrap;
}
.kmma-hint {
    color: #8a8270; font-size: 11px; line-height: 1.4;
    margin-top: 2px;
}

/* Action cards — three side-by-side picker tiles. Active card gets a
   gold border + soft cream fill so the chosen action stays obvious
   while the admin fills out the rest of the form. */
.kmma-actions {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.kmma-action-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 14px 12px;
    background: #fff;
    border: 1px solid #e2d7bf; border-radius: 6px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.kmma-action-card:hover {
    background: #faf6eb; border-color: #c0a76d;
    box-shadow: 0 1px 3px rgba(189,158,77,0.15);
}
.kmma-action-card-active {
    background: #f5edda; border-color: #bd9e4d;
    box-shadow: 0 2px 6px rgba(189,158,77,0.20);
}
.kmma-action-icon { color: #bd9e4d; }
.kmma-action-icon i { font-size: 22px; }
.kmma-action-card-active .kmma-action-icon { color: #9c7a3c; }
.kmma-action-name {
    font-size: 13px; font-weight: 600; color: #6b5a2e;
}
.kmma-action-desc {
    font-size: 11px; color: #8a8270; line-height: 1.4;
}

/* Replace-existing checkbox in the Mirror options block. Plain native
   checkbox + label — keeps it accessible and easy to scan. */
.kmma-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: #555;
    padding: 8px 12px; background: #fbf5e6;
    border: 1px dashed #e2d7bf; border-radius: 5px;
}
.kmma-checkbox input { margin: 0; }

/* Action buttons row — Preview button below the form, big enough to
   read but not so big it competes with the action cards. */
.kmma-actions-row {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 8px;
}
.kmma-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 12px; font-weight: 500;
    color: #7a6a48; background: #fff;
    border: 1px solid #e2d7bf; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
.kmma-btn:hover { background: #f5edda; border-color: #c0a76d; color: #6b5a38; box-shadow: 0 1px 3px rgba(189,158,77,0.15); }
.kmma-btn:active { transform: translateY(1px); box-shadow: none; }
.kmma-btn-primary { background: #bd9e4d; border-color: #9c7a3c; color: #fff; }
.kmma-btn-primary:hover { background: #9c7a3c; border-color: #7e5f2c; color: #fff; box-shadow: 0 2px 5px rgba(156,122,60,0.30); }
.kmma-btn.kmma-btn-loading { pointer-events: none; opacity: 0.72; cursor: wait; }

/* Preview / progress / final swap area. Same DOM slot for all three
   states so the wizard feels continuous. */
.kmma-preview-area { padding-top: 4px; }

/* Preview pane — list of menu→change rows with added (+) / removed (−)
   pills. Cap at ~50 rows in the HTML to keep render fast on giant
   bulk ops; full plan still applies. */
.kmma-preview {
    background: #fafaf6;
    border: 1px solid #ece2c4; border-radius: 6px;
    padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.kmma-preview-empty .kmma-prv-empty-msg {
    color: #8a8270; font-size: 12px; line-height: 1.5; margin: 8px 0 14px;
}
.kmma-prv-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #6b5a2e;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid #ece2c4;
}
.kmma-prv-head i { font-size: 18px; color: #c0a76d; }
.kmma-prv-head small { color: #8a8270; font-weight: 400; }
.kmma-prv-list {
    max-height: 360px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    padding-right: 6px;
}
.kmma-prv-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 6px 10px;
    background: #fff; border: 1px solid #f0eade; border-radius: 4px;
}
.kmma-prv-row:hover { background: #fbf8ee; }
.kmma-prv-name {
    font-size: 12px; color: #3d3830; font-weight: 500;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kmma-prv-mid {
    color: #aaa; font-weight: 600; font-variant-numeric: tabular-nums;
    margin-right: 6px;
}
.kmma-prv-diff {
    display: flex; flex-wrap: wrap; gap: 4px;
    flex-shrink: 0;
}
/* Add / remove pills — green for grants, red for revokes. Soft tint
   so the strip is scannable without looking like a stop-sign. */
.kmma-pill {
    display: inline-block; padding: 1px 8px; font-size: 10.5px;
    border-radius: 9px; font-weight: 600; line-height: 1.5;
}
.kmma-pill-add { background: #e6f4e8; color: #2d6e3e; }
.kmma-pill-rem { background: #fbe8e6; color: #a32e2e; }
.kmma-prv-more {
    text-align: center; font-size: 11px; color: #8a8270;
    padding: 8px 0 0; font-style: italic;
}
.kmma-prv-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 12px; margin-top: 12px;
    border-top: 1px solid #ece2c4;
}

/* Live progress pane — animated bar + last-processed caption + cancel.
   Updated every batch (default 25 menus) by mma_progress. */
.kmma-progress {
    background: #fafaf6;
    border: 1px solid #ece2c4; border-radius: 6px;
    padding: 18px;
}
.kmma-prg-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #6b5a2e;
    margin-bottom: 12px;
}
.kmma-prg-head i { font-size: 18px; color: #bd9e4d; }
.kmma-prg-pct { color: #8a8270; font-weight: 400; font-size: 12px; }
.kmma-prg-bar {
    height: 10px; background: #ece2c4; border-radius: 5px;
    overflow: hidden;
}
.kmma-prg-fill {
    height: 100%; background: linear-gradient(90deg, #c0a76d 0%, #bd9e4d 100%);
    transition: width .25s ease;
}
.kmma-prg-last {
    margin-top: 10px; font-size: 11px; color: #8a8270;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kmma-prg-foot {
    display: flex; justify-content: flex-end;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid #ece2c4;
}

/* Role-detail Permissions tab — grant new menu inline row */
.rp-grant-row {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px;
    background: #fbf5e6; border: 1px dashed #e2d7bf; border-radius: 6px;
}
.rp-grant-row label { margin-bottom: 0; color: #8a7a56; font-size: 10px; font-weight: 600; text-transform: uppercase; }

/* Group-header caret */
.pm-group-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    color: #bd9e4d; cursor: pointer;
    border-radius: 4px; margin-right: 4px;
    transition: background 0.12s;
}
.pm-group-caret:hover { background: #faf6eb; }

/* =============================================================
   User Permissions matrix (pn_p461) — inheritance + override UX
   ============================================================= */

/* Legend chips — colour hints for each cell state */
.uperm-leg-inh   { color: #7a716a; }
.uperm-leg-inh   i { color: #95a5a6; }
.uperm-leg-ovr-a { color: #1e8449; }
.uperm-leg-ovr-a i { color: #27ae60; }
.uperm-leg-ovr-d { color: #922b21; }
.uperm-leg-ovr-d i { color: #e74c3c; }

/* Cell states. Three mutually-exclusive classes applied by the
   server on first render + by user_perm_repaint_row() on every
   client-side change. */
.uperm-cell {
    position: relative;
    transition: background 0.1s, box-shadow 0.1s;
}
/* Inherited = effective value matches the role default. Tinted
   checkbox hints this isn't owned by the user. */
.uperm-cell.uperm-cell-inh input.perm-chk {
    accent-color: #b9a878;
    opacity: 0.7;
}
/* Override-allow = user has 1 where role has 0. Green badge corner. */
.uperm-cell.uperm-cell-allow {
    background: #ecfce7;
}
.uperm-cell.uperm-cell-allow input.perm-chk { accent-color: #27ae60; }
.uperm-cell.uperm-cell-allow::before {
    content: '+';
    position: absolute; top: 2px; right: 4px;
    font-size: 10px; font-weight: 700; color: #1e8449;
    line-height: 1;
}
/* Override-deny = user has 0 where role has 1. Red background hint. */
.uperm-cell.uperm-cell-deny {
    background: #fdecec;
}
.uperm-cell.uperm-cell-deny input.perm-chk { accent-color: #e74c3c; }
.uperm-cell.uperm-cell-deny::before {
    content: '−';
    position: absolute; top: 2px; right: 4px;
    font-size: 12px; font-weight: 700; color: #922b21;
    line-height: 1;
}

/* Row-level marker when ANY cell is an override — subtle side stripe */
.uperm-matrix-tbl tr.uperm-row-has-override td:first-child {
    border-left: 3px solid #bd9e4d;
}
.uperm-matrix-tbl tr.uperm-row-has-override .pm-row-name::after {
    content: 'override';
    display: inline-block; margin-left: 8px;
    padding: 1px 6px; font-size: 9px; font-weight: 700;
    color: #8a6d0b; background: #fef3c7; border: 1px solid #e6b840;
    border-radius: 8px; letter-spacing: 0.3px; text-transform: uppercase;
}

/* =============================================================
   Dashboard (kprocess_dashboard.php) — Tab 0 homepage
   ============================================================= */
.kdash-wrap {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1100px;
}
.kdash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background: linear-gradient(135deg, #f9f3e3 0%, #fff 100%);
    border: 1px solid #e6e0d0;
    border-radius: 12px;
}
.kdash-greeting  { font-size: 14px; color: #8a7a56; font-weight: 500; }
.kdash-username  { font-size: 24px; font-weight: 700; color: #4a3f2d; margin: 4px 0 8px; }
.kdash-time      { font-size: 12px; color: #999; display: flex; align-items: center; gap: 5px; }
.kdash-time i    { font-size: 14px; color: #c0a76d; }
.kdash-welcome-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: #fbf5e6; color: #c0a76d; font-size: 32px;
}

.kdash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.kdash-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: box-shadow 0.2s;
}
.kdash-stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.kdash-stat-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 22px; flex-shrink: 0;
}
.kdash-stat-val { font-size: 22px; font-weight: 700; color: #333; }
.kdash-stat-lbl { font-size: 12px; color: #888; margin-top: 2px; }

.kdash-section       { display: flex; flex-direction: column; gap: 12px; }
.kdash-section-title {
    font-size: 14px; font-weight: 600; color: #6b5a38;
    display: flex; align-items: center; gap: 6px;
}
.kdash-section-title i { font-size: 18px; color: #c0a76d; }
.kdash-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.kdash-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #6b5a38;
    cursor: pointer; user-select: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.kdash-action:hover {
    background: #fbf5e6; border-color: #c0a76d;
    box-shadow: 0 2px 8px rgba(192,167,109,0.15);
}
.kdash-action i { font-size: 18px; color: #c0a76d; }

/* =============================================================
   CEO Dashboard (kprocess_8) — modern gold-themed cards
   ============================================================= */
.cd8-wrap { padding: 20px; overflow-y: auto; height: 100%; box-sizing: border-box; }

/* Welcome banner */
.cd8-welcome {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px; margin-bottom: 20px;
    background: linear-gradient(135deg, #f9f3e3 0%, #fff 100%);
    border: 1px solid #e6e0d0; border-radius: 12px;
}
.cd8-greet  { font-size: 13px; color: #8a7a56; }
.cd8-user   { font-size: 22px; font-weight: 700; color: #4a3f2d; margin: 2px 0 6px; }
.cd8-date   { font-size: 12px; color: #999; display: flex; align-items: center; gap: 5px; }
.cd8-date i { font-size: 14px; color: #c0a76d; }
.cd8-welcome-icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: #fbf5e6; color: #c0a76d; font-size: 28px;
}

/* Dashboard filters bar */
.cd8-filters {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
    padding: 12px 16px; background: #fafaf6;
    border: 1px solid #e6e0d0; border-radius: 10px;
}
.cd8-filter-group { display: flex; align-items: center; gap: 8px; }
.cd8-filter-lbl {
    font-size: 12px; font-weight: 600; color: #6b5a38;
    display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.cd8-filter-lbl i { font-size: 15px; color: #c0a76d; }
.cd8-filter-sel {
    min-width: 180px; padding: 7px 10px; font-size: 12px; color: #333;
    border: 1px solid #e2d7bf; border-radius: 6px; background: #fff;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.cd8-filter-sel:focus {
    border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,0.15);
}
.cd8-filter-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px solid #e2d7bf; background: #fff;
    color: #8a7a56; font-size: 16px; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cd8-filter-btn:hover { background: #fbf5e6; border-color: #c0a76d; color: #6b5a38; }
.cd8-filter-result {
    margin-bottom: 16px; background: #fff;
    border: 1px solid #eee; border-radius: 10px; overflow: hidden;
}

/* Stat cards row */
.cd8-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px; margin-bottom: 16px;
}
.cd8-stat {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 8px; background: #fff; border: 1px solid #eee; border-radius: 8px;
    cursor: pointer; transition: box-shadow 0.2s, transform 0.1s;
}
.cd8-stat:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.cd8-stat-icon {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 16px;
}
.cd8-stat-val { font-size: 16px; font-weight: 700; color: #333; line-height: 1.2; }
.cd8-stat-lbl { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.2px; }

/* Card grid */
.cd8-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.cd8-card {
    background: #fff; border: 1px solid #eee; border-radius: 10px;
    overflow: hidden; display: flex; flex-direction: column;
}
.cd8-card-wide { grid-column: span 2; }
@media (max-width: 900px) { .cd8-card-wide { grid-column: span 1; } }
.cd8-card-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; font-size: 13px; font-weight: 600; color: #6b5a38;
    border-bottom: 1px solid #f0eade; background: #fafaf6;
}
.cd8-card-hdr i { font-size: 18px; color: #c0a76d; }

/* Occupancy card */
.cd8-occ-body { display: flex; padding: 14px 18px; gap: 16px; flex: 1; }
.cd8-occ-list { flex: 0 0 auto; min-width: 160px; }
.cd8-occ-row {
    display: flex; justify-content: space-between; padding: 5px 0;
    font-size: 12px; color: #555; border-bottom: 1px solid #f8f4ec;
}
.cd8-occ-row b { color: #333; }
.cd8-occ-chart { flex: 1; min-height: 180px; }
.cd8-occ-footer {
    display: flex; justify-content: space-between; padding: 10px 18px;
    font-size: 12px; color: #6b5a38; border-top: 1px solid #f0eade; background: #fdfbf5;
}

/* Summary list (task, check-in, sales, check-out) */
.cd8-summary-list { padding: 10px 18px; flex: 1; }
.cd8-sum-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 12px; color: #555;
    border-bottom: 1px solid #f8f4ec;
}
.cd8-sum-row:last-child { border-bottom: 0; }
.cd8-sum-row b { color: #333; font-size: 13px; }
.cd8-sum-total { background: #fdfbf5; margin: 4px -18px -10px; padding: 10px 18px; border-radius: 0 0 10px 10px; }
.cd8-sum-ok   { color: #2b7a3a !important; }
.cd8-sum-warn { color: #c0392b !important; }

/* Chart area */
.cd8-chart-area { height: 280px; padding: 10px 0 30px; }

/* Leads monitor */
.cd8-leads {
    display: flex; gap: 0; flex: 1;
}
.cd8-lead-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px 10px;
    border-right: 1px solid #f0eade;
}
.cd8-lead-item:last-child { border-right: 0; }
.cd8-lead-val { font-size: 26px; font-weight: 700; color: #333; }
.cd8-lead-lbl { font-size: 11px; color: #888; margin-top: 4px; text-transform: uppercase; }

/* Mini calendar */
.cd8-calendar { padding: 12px 18px; }
.cd8-cal-hdr, .cd8-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
}
.cd8-cal-hdr span {
    font-size: 10px; font-weight: 600; color: #8a7a56; padding: 4px 0;
    text-transform: uppercase;
}
.cd8-cal-grid span { font-size: 12px; padding: 6px 0; color: #555; }
.cd8-cal-day { cursor: default; border-radius: 50%; transition: background 0.15s; }
.cd8-cal-day:hover { background: #f5edda; }
.cd8-cal-today {
    background: #c0a76d !important; color: #fff !important;
    font-weight: 700; border-radius: 50%;
}

/* Summary row icon alignment */
.cd8-sum-row span i { margin-right: 6px; vertical-align: middle; }

/* Status pills for prospects/contracts */
.cd8-pill {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    border: 1px solid;
}
.cd8-pill-active { background: #e6f4ea; color: #137333; border-color: #a8dab5; }
.cd8-pill-reject { background: #fde8e8; color: #a8302b; border-color: #e8b4ae; }
.cd8-pill-mute   { background: #f1f1f1; color: #666;    border-color: #d0d0d0; }

/* Stage-scoped loading overlay — rendered inside #ttab<tabid>_d by
   tt_stage_local_refresh() so only the stage area shows a busy state.
   The rest of the app (sidebar, other tabs, header) stays interactive.
   The overlay disappears automatically when rdraw replaces the stage
   content with the refreshed listing. */
.tt-stage-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    z-index: 30;
    animation: tt-stage-overlay-in 0.15s ease-out both;
}
.tt-stage-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 26px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    color: #8a7a56;
    font-size: 12px;
}
@keyframes tt-stage-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kdv-tab-spinner { animation-duration: 2s; }
}
/* Legacy bx-spin fallback — used by the server-rendered initial loading
   row (`<div class="kdv-tab-loading"><i class="bx bx-loader-circle bx-spin"></i> …`).
   The JS-rendered version above uses the .kdv-tab-spinner element. */
.kdv-tab-loading i { font-size: 18px; color: #c0a76d; }

/* Themed scrollbars — gold palette across the panel body, sections, tabs. */
.kdv-panel-body,
.kdv-sections-scroll,
.kdv-tab-panel { scrollbar-width: thin; scrollbar-color: #d7c99b #faf4e1; }

.kdv-panel-body::-webkit-scrollbar,
.kdv-sections-scroll::-webkit-scrollbar,
.kdv-tab-panel::-webkit-scrollbar         { width: 10px; height: 10px; }
.kdv-panel-body::-webkit-scrollbar-track,
.kdv-sections-scroll::-webkit-scrollbar-track,
.kdv-tab-panel::-webkit-scrollbar-track   { background: #faf4e1; border-radius: 6px; }
.kdv-panel-body::-webkit-scrollbar-thumb,
.kdv-sections-scroll::-webkit-scrollbar-thumb,
.kdv-tab-panel::-webkit-scrollbar-thumb   {
    background: #d7c99b;
    border: 2px solid #faf4e1;
    border-radius: 6px;
    transition: background 0.15s;
}
.kdv-panel-body::-webkit-scrollbar-thumb:hover,
.kdv-sections-scroll::-webkit-scrollbar-thumb:hover,
.kdv-tab-panel::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* .k_riconpnl { position:absolute; right:-350px; top:36px; width:23%; max-width: 400px; height:calc(100% - 36px); background-color: #9d9d9d; overflow: hidden; z-index:10; display: block;  transition: all 0.5s ease-out; } */
/* .k_rpopup { top:40px; width: 950px; max-width: 950px; height:calc(100% - 45px); background-color: #f1f1f1; overflow: hidden; z-index:100; display: block;  transition: all 0.5s ease-out; box-shadow: -3px 3px 3px #d3d3d3; } */
/* .k_rpopup2 { position:absolute; right:-650px; top:40px; width:650px; max-width: 150px; height:calc(100% - 45px); background-color: #f1f1f1; overflow: hidden; z-index:1; display: block;  transition: all 0.5s ease-out; box-shadow: -3px 3px 3px #d3d3d3; } */


.k_riconpnlel { position:absolute; right:0; top:0; width:100%; height:100%; overflow: hidden; background-color: #9d9d9d; z-index:1; display: block; }
/* .k_ricons { position:absolute; right:0px; top:0px; width:49px; height:100%; background-color:#FFFFFF; overflow: hidden; z-index:1; display: none; } */
.k_riconpnlel { position: absolute; right: 25px; }


/*data table elements*/
.tt_table { font-family: Arial, Helvetica, sans-serif; white-space: nowrap; }
.tt_hraw { position: -webkit-sticky; position: sticky; top: 0px; z-index: 2; border-bottom: 5px solid #969696;  }
.tt_hcell { height: 25px; line-height: 25px; font-size: 14px; background-color: #ffffff; padding:0px 0px; text-align: left;}
.tt_raw { height:44px; }
.tt_cell { height: 44px; line-height: 25px; font-size: 12px; background-color: #ffffff; color: #363636; padding:0px 3px;}

/*virtual table input text*/
.tt_input1 {width:85%; height:24px; border-radius:2px; border:solid #999 1px; padding:none;}


.scrl_nav{ position:absolute; bottom:0; width:50px; height:25px; display:block; }



.tt_lmenu {
    position: absolute; left: 0px; top: 0px; width: 22%; height: 100%;
}
.tt_stage {
    position: absolute; left: 22%; top: 0px; width: 60%; height: 100%;
}
.tt_rmenu {
    position: absolute; right: 0px; top: 0px; width: 18%; height: 100%;
}

/*header place holder*/
.hp_holder2 { position: absolute; width: 600px; height: 60px; line-height: 60px; text-align: center; overflow: hidden; background-color: #7396b7; }

/*icons*/
.k_icon {width: 46px; height: 46px; overflow: hidden; color: rgb(0, 0, 0); cursor: pointer; stroke: #bd9e4d;}
.k_icon2 {width: 36px; height: 36px; overflow: hidden; color: rgb(0, 0, 0); cursor: pointer; stroke: #bd9e4d; }
.k_iconwa {width: auto; height: 46px; overflow: hidden; color: white; cursor: pointer; stroke: white;}
.k_iconscrl {position: relative; width: auto; height: 20px; overflow: hidden; color: white; cursor: pointer; stroke: black; stroke-width:20;}
.k_stroke1 {stroke:#c0a76d;}
/*menu*/
/* fixed height */

/*.ttmnu_list { width: 100%; min-height: 46px; height: 46px; padding: 5px; text-align: left; border-bottom: solid #cacaca 1px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; cursor: pointer; }*/

.ttmnu_list {
    width: 100%; min-height: 35px; height: 35px; padding: 5px; text-align: left;
    border-bottom: solid #e5e5e5 1px;
    overflow-y: auto;
    font-family: Arial;
    font-size: 11px;
    line-height: 5px;
    font-weight: 520;
    cursor: pointer; overflow: hidden;
    background: #f8f8f8;
}

.ttmnu_list_sub{
    width: 100%; min-height: 35px; height: 35px; padding: 5px; text-align: left;
    overflow-y: auto;
    font-family: Arial;
    font-size: 11px;
    line-height: 5px;
    font-weight: 400;
    cursor: pointer; overflow: hidden;
    background: #f8f8f8;
}


.ttmnu_list1 { width: calc(100% - 70px); height: 100%; text-align: left; float: left;
    line-height: 25px;
}
.ttmnu_list2 { width: 50px; height: 50px; float: right;
    line-height: 50px; text-align: center; font-size: 24px;
}
.ttmnu_list3{
    width: 100%; height: 46px; padding: 5px; text-align: left; border-bottom: solid #cacaca 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 15px;
    cursor: pointer;
}
.ttmnu_list3_chl{
    width: 100%; height: auto;
}
/*check box*/
.tt_chk1 {cursor: pointer;  }


/*variable height menu*/
.ttmnu_listah { width: 100%; height:auto; padding: 15px; text-align: left; border-bottom: solid #cacaca 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
}
.tt_mlmnu1 { position: relative; left: 0px; top: 0px; width: 100%; height: 100%; }
.tt_mlmnu2 { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }


/*text elements*/
.tt_font1 { font-family: tt_font1; }

.tt_txt1 { font-family: tt_font1;	font-size: 18px; }
.tt_txt2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
.tt_txt5 { font-size: 5px;}
.tt_txt10 { font-size: 10px;}
.tt_txt11 { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
.tt_txt12 { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
.tt_txt13 { font-family:kar3; font-stretch:extra-expanded; font-size: 24px; }
.k_txtb { font-weight: bold; }

.tt_f5 { font-size: 5px; }
.tt_f7 { font-size: 7px; }
.tt_f8 { font-size: 8px; }
.tt_f10 { font-size: 10px; }
.tt_f11 { font-size: 11px; }
.tt_f12 { font-size: 12px; }
.tt_f13 { font-size: 13px; }
.tt_f14 { font-size: 14px; }
.tt_f16 { font-size: 16px; }
.tt_f18 { font-size: 18px; }
.tt_f20 { font-size: 20px; }
.tt_f22 { font-size: 22px; }
.tt_f28 { font-size: 28px; }
.tt_f35 { font-size: 35px; }
.k_txt10 { font-size: 10px; }
.k_txt24 { font-size: 24px; }
.k_txt25 { font-size: 25px; }

/*line height */
.k_lnh100p {line-height: 100%;}

.k_lnh50 {line-height: 50px;}
.k_lnh30 {line-height: 30px;}
.k_lnh32 {line-height: 32px;}
.k_lnh35 {line-height: 35px;}
.k_lnh55 {line-height: 55px;}
.k_lnh40 {line-height: 40px;}
.k_lnh60 {line-height: 60px;}
.k_lnh65 {line-height: 65px;}
.k_lnh8 {line-height: 8px;}
.k_lnh9 {line-height: 9px;}
.k_lnh10 {line-height: 10px;}
.k_lnh12 {line-height: 12px;}
.k_lnh14 {line-height: 14px;}
.k_lnh16 {line-height: 16px;}
.k_lnh18 {line-height: 18px;}
.k_lnh20 {line-height: 20px;}
.k_lnh22 {line-height: 22px;}
.k_lnh24 {line-height: 24px;}
.k_lnh25 {line-height: 25px;}
.k_lnh26 {line-height: 26px;}
.k_lnh28 {line-height: 28px;}

/*text alignments */
.k_tal {text-align: left;}
.k_tar {text-align: right;}
.k_tac {text-align: center;}
.k_taj {text-align: justify;}

/*text color */
.tt_fcprime { color: #bd9e4d;}
.k_txt_wh {color: white;}
.k_txt_gr {color: #868686;}
.k_txt_lgr { color: #ECECECFF;}
.k_txt_red { color: #860000FF;}
.k_txt_green { color: #176c03;}

/*text tranformation */
.k_txtcap{ text-transform: capitalize;}
.k_txtuc{ text-transform: uppercase;}
.k_txtlc{ text-transform: lowercase;}
/*other page elements*/


/*----------*/

/*hover */
.k_hov1:hover {background-color: #f1f1f1; color: black; stroke: #000000;}
.k_hov2:hover {background-color: #f1f1f1; color: black; stroke: #000000;}
.k_hov3:hover {background-color: #bd9e4d; color: #ffffff; border-color: #bd9e4d; }

/*scroll bar style*/
.k_sbar { scrollbar-width: thin; }

/* --------------------- common properties ---------------------------*/
/*background colors */
.k_bg1 { background-color: #263d4f; } /*application identity color */
.k_bg2 { background-color: #f8f8f8; }
.k_bg3 { background-color: #666666; }
.k_bg4 { background-color: rgb(227, 228, 230); }
.k_bg5 { background-color: #c91212; }
.k_bg6 { background-color: #ffffff; } /* white color */
.k_bg7 { background-color: #f1f1f1; }
.k_bg8 { background-color: #d9d9c9; }
.k_bg9 { background-color: #c5c5c5; }
.k_bg10 { background-color: #c9c3b1; }
.k_bg11 { background-color: #ffffff; }
.k_bg12 { background-color: #a89978; }
.k_bg13 { background-color: #9d854a; }
.k_bg14 { background-color: #00549a; }

/*gradient bgs*/
.k_grad1 { background-image: linear-gradient(#a19b9b,#f1f1f1, #787879);}
.k_grad2 { background-image: linear-gradient(#a31703,#520c30 );}

.k_grad3 { background-image: linear-gradient(#8c7437, #bd9e4d);}
.k_grad3:hover { background-image: linear-gradient(#8f7e54, #d0a22f); }

/*foreground colors*/
.k_fcolor1 { color: #0a363e; }
.k_fcolor2 { color: #78755c; }
.k_fcolor3 { color: #000000; }
.k_fcolor4 { color: #ffffff; }
.k_fcolor5 { color: #727272; }
.k_fcolor6 { color: #b4b4b4; }
.k_fcolor7 { color: #dcdbdb; }
.k_fcolor8 { color: #6e6e6e; }


/*boarders*/
.k_brdr1 {border:solid #8c7437 1px;} /* Border primary */

.k_brdrrre {border:solid #c0a76d 1px;}
.k_brdrrre2 {border:solid #c7c7c7 1px;}
.k_brdr5 {border:solid #c0a76d 1px; }
.k_brdr6 {border:solid #c0a76d 1px; }
.k_brdr7 {border:solid #78755c 1px; }
.k_brdr8 {border:solid #626262 1px; }
.k_brdr9 {border:solid #999 1px; }
.k_brdr10 {border:solid #dfdfdf 1px; }
.k_brdr11 {border:solid #f1f1f1 1px; } /* Border white */
.k_brdr12 {border:solid #bd9e4d 2px; }
.k_brdrbtm {border-bottom: 1px solid #e1e1e1;}
.k_brdrbtm2 {border-bottom: 1px solid #f1f1f1;}
.k_brdrright {border-right:solid #6e571f 2px;}

.k_brdrr2 {border-radius: 2px;}
.k_brdrr3 {border-radius: 3px;}
.k_brdrr5 {border-radius: 5px;}
.k_brdrr7 {border-radius: 7px;}
.k_brdrr10 {border-radius:  10px;}
.k_brdrr100p {border-radius:  100%;}

.k_brltb{ border-left:solid #999 1px; border-top:solid #999 1px; border-bottom:solid #999 1px; }
.k_brtrb{ border-left:none; border-right:solid #999 1px; border-top:solid #999 1px; border-bottom:solid #999 1px; }


.k_brb_shadow{
	box-shadow: 0px 2px 0px rgba(229, 229, 229, 0.2);
}

.k_brdrr5 {border-radius:5px; }
.k_brdrr3 {border-radius:3px; }
.k_brdrr2 {border-radius:2px; }

.k_brdrt2{ border-top: 1px solid #cbcbcb; }

.k_brdrtlr5{ border-top-left-radius: 5px; }
.k_brdrtlr10{ border-top-left-radius: 10px; }
.k_brdrtrr5{ border-top-right-radius: 5px; }
.k_brdrtrr10{ border-top-right-radius: 10px; }


.k_brdrblr10{ border-bottom-left-radius: 10px; }
.k_brdrbrr10{ border-bottom-right-radius: 10px; }

.k_brdr_l1 {border-left:solid #999 1px;}
.k_brdr_r1 {border-right:solid #999 1px;}
.k_brdr_b1 {border-bottom:solid #999 1px;}

.k_brdr_l2 {border-left:solid #8c7437 1px;}
.k_brdr_r2 {border-right:solid #8c7437 1px;}
.k_brdr_b2 {border-bottom:solid #8c7437 1px;}



.k_brdr2 {border:solid #dfd91a 1px;}
.k_brdr3 {border-bottom: solid #00ff00 5px; }
.k_brdr5 {border:solid #ff0000 5px;}
.k_brdrr1 { border-right: solid #918d8d 1px;}
.k_brdrt1 { border-top: solid #eeeeee 1px;}

/*border radius*/
.kbr_1 {border-radius: 3px 3px 0px 0px;}

/*paddings*/
.k_pad20 { padding: 20px;}
.k_pad15 { padding: 15px;}
.k_pad10 { padding: 10px;}
.k_pad16 { padding: 16px;}
.k_pad14 { padding: 14px;}
.k_pad5 {padding: 5px;}
.k_pad6 {padding: 6px;}
.k_pad8 {padding: 8px;}
.k_pad3 {padding: 3px;}
.k_pad1 {padding: 1px;}
.k_pad2 {padding: 2px;}
.k_pad4 {padding: 4px;}
.k_pads14 { padding: 14px;}
.k_pad5_tlb {padding: 5px 5px 5px 0; }
.k_padm1 { padding: 8px 4px 0px 4px}

.k_padt1 {padding-top: 1px;}
.k_padt2 {padding-top: 2px;}
.k_padt3 {padding-top: 3px;}
.k_padt5 {padding-top: 5px;}
.k_padt9 {padding-top: 9px;}
.k_padt25 {padding-top: 25px;}
.k_padt30 {padding-top: 30px;}
.k_padt32 {padding-top: 32px;}

.k_padb5 {padding-bottom: 5px;}

.k_padr8 {padding-right: 8px;}
.k_padl1 {padding-left: 1px;}
.k_padl8 {padding-left: 8px;}

.k_padr4 {padding-right: 4px;}
.k_padr5 {padding-right: 5px;}
.k_padr30 {padding-right: 30px;}

.k_padl4 {padding-left: 4px;}
.k_padl5 {padding-left: 5px;}

.k_padl22 {padding-left: 22px;}
.k_padl10 {padding-left: 10px;}
.k_padl15 {padding-left: 15px;}
.k_padl30 {padding-left: 30px;}

.k_padr10 {padding-right: 10px;}
.k_padr15 {padding-right: 15px;}
.k_padr22 {padding-right: 22px;}
/*width and height*/

.w_auto {width: auto;}
.w100h100p {width: 100%; height: 100%;}
.w_100p { width: 100%;}
.w_90p { width: 90%;}
.w_96p {width: 96%;}
.w_85p { width: 85%;}
.w_82p { width: 82%;}
.w_80p { width: 80%;}
.w_75p {width: 75%;}
.w_70p {width: 70%;}
.w_67p { width: 67%;}
.w_65p { width: 65%;}
.w_60p { width: 60%;}
.w_55p { width: 55%;}
.w_52p { width: 52%;}
.w_50p { width: 50%;}

.w50p {width: 50%;} /*  Need check and update */

.w_47p { width: 47%;}
.w_45p { width: 45%;}

.w45p { width: 45%;} /*  Need check and update */

.w_40p { width: 40%;}
.w_44p { width: 44%;}
.w_36p { width: 36%;}
.w_35p { width: 35%;}
.w_34p { width: 34%;}
.w_33p { width: 33%;}
.w_33_3p { width: 33.3%;}
.w_31p { width: 31%;}
.w_30p { width: 30%;}
.w_28p { width: 28%;}
.w_25p { width: 25%;}

.w25p {width: 25%;} /*  Need check and update */

.w_23p { width: 23%;}
.w_20p { width: 20%;}
.w_15p { width: 15%;}
.w_10p { width: 10%;}
.w_5p {width: 5%;}
.w_310 { width: 310px;}
.w_160 {width: 160px;}
.w_130 {width: 130px;}
.w_100 {width: 100px;}
.w_85 {width: 85px;}
.w_65 {width: 65px;}
.w_55 {width: 55px;}
.w_50 {width: 50px;}
.w_32 {width: 32px;}
.w_30 {width: 30px;}
.w_22 {width: 22px;}
.w_10 {width: 10px;}
.w_mn160 {min-width: 160px;}
.h_50ph {height: 50vw;}
.h_40ph {height: 40vw;}
.w_75 {width: 75px;}
.w_100p150 { width: calc(100% - 150px); }
.w_100p200 { width: calc(100% - 200px); }
.w_100p110 { width: calc(100% - 110px); }
.w_100p75 { width: calc(100% - 75px); }
.w_60p50 { width: calc(60% - 160px); }
.w_100p160 { width: calc(100% - 160px); }
.w_41p2 { width: calc(41% - 2px); }
.w_28pa2 { width: calc(28% + 2px); }

.w_100p10 {width: calc(100% - 10px);}
.w_100p20 {width: calc(100% - 20px);}

.w_100p80 {width: calc(100% - 80px);}
.w_mn160 {min-width: 160px;}
.w_100p160 {width: calc(100% - 160px);}
.w_100p150 {width: calc(100% - 150px);}


.w_90 {width: 90px;}
.w_75 {width: 75px;}
.w_72 {width: 72px;}
.w_55 {width: 55px;}
.w_50 {width: 50px;}
.w_60 {width: 60px;}
.w_40 {width: 40px;}
.w_45 {width: 45px;}
.w_36 {width: 36px;}
.w_30 {width: 30px;}
.w_25 {width: 25px;}
.w_20 {width: 20px;}
.w_75p { width: 75%;}
.w_15p { width: 15%;}
.w_10p { width: 10%;}
.w_18p { width: 18%;}
.w_80p { width: 80%;}

.h_auto {height: auto;}
.h_100p { height: 100%; }
.h_93p {height: 93%;}
.h_80p {height: 80%;}
.h_70p {height: 70%;}
.h_60p {height: 60%;}
.h_55p { height: 55%;}
.h_50p { height: 50%;}
.h_45p { height: 45%;}
.h_40p { height: 40%;}
.h_30p { height: 30%;}
.h_10p { height: 10%;}
.h_100 { height: 100px;}
.h_80 { height: 80px;}
.h_75 { height: 75px;}
.h_68 {height: 68px;}
.h_60 {height: 60px;}
.h_50 {height: 50px;}
.h_46 {height: 46px;}
.h_45 {height: 45px;}
.h_43 {height: 43px;}
.h_40 {height: 40px;}
.h_35{height: 35px;}
.h_30 {height: 30px;}
.h_20 {height: 20px;}
.h_10 {height: 10px;}
.h_100p50 {height: calc(100% - 50px);}
.h_100p45 {height: calc(100% - 45px);}
.h_100p40 {height: calc(100% - 40px);}
.h_100p35 {height: calc(100% - 35px);}
.h_100p30 {height: calc(100% - 30px);}
.h_100p20 {height: calc(100% - 20px);}
.h_100p10 {height: calc(100% - 10px);}
.h_100p50 {height: calc(100% - 40px);}
.h_100p57 {height: calc(100% - 57px);}
.h_100p65 {height: calc(100% - 65px);}
.h_100p70 {height: calc(100% - 70px);}
.h_100p75 {height: calc(100% - 75px);}
.h_100p76 {height: calc(100% - 76px);}
.h_100p85 {height: calc(100% - 85px); scrollbar-width:thin; scrollbar-color:#d7c99b #f5f0e6;}
.h_100p85::-webkit-scrollbar { width:5px; }
.h_100p85::-webkit-scrollbar-track { background:#f5f0e6; }
.h_100p85::-webkit-scrollbar-thumb { background:#d7c99b; border-radius:4px; }
.h_100p85::-webkit-scrollbar-thumb:hover { background:#c0a76d; }
.h_100p172 {height: calc(100% - 172px);  }
.h_100p160 {height: calc(100% - 160px);  }

.h_50ph {height: 50vw;}
.h_40ph {height: 40vw;}
.w_auto {width: auto;}
.w_100p150 { width: calc(100% - 150px); }
.w_100p75 { width: calc(100% - 75px); }
.w_41p2 { width: calc(41% - 2px); }
.w_28pa2 { width: calc(28% + 2px); }

.h_90p { height: 90%; }
.h_91p { height: 91%; }
.h_95p { height: 95%; }
.h_80p { height: 80%; }
.h_270 { height: 270px; }
.h_250 { height: 250px; }
.h_210 { height: 210px; }
.h_165 { height: 165px; }
.h_160 { height: 160px; }
.h_155 { height: 155px; }
.h_145 { height: 145px; }
.h_135 { height: 135px; }
.h_130 { height: 130px; }
.h_110 { height: 110px; }
.h_95 {height: 95px;}
.h_85 {height: 85px;}
.h_65 {height: 65px;}
.h_80 {height: 80px;}
.h_60 {height: 60px;}
.h_25 { height: 25px; }
.h_22 { height: 22px; }
.h_20 { height: 20px; }
.h_15 {height: 15px;}
.h_30 {height: 30px;}
.h_55 {height: 55px;}
.h_100 {height: 100px;}
.h_105 {height: 105px;}
.h_120 { height: 120px;}
.h_24 {height: 24px;}
.h_26 {height: 26px;}
.h_28 {height:28px;}
.h_32 {height:32px;}
.h_40 {height: 40px; }
.h_45 {height: 45px; }
.h_1 {height: 1px;}

/*alignments*/
.kp_r {position: relative;}
.kp_a {position: absolute;}
.k_fltl {float: left;}
.k_fltr {float: right;}
.txt_c { text-align: center;}
.kt_50 {top: 50px;}
.kt_50p {top: 50%;}
.kl_50p {left: 50%;}
.kl_30 {left: 30px;}
.kb_10 { bottom: 10px;}
.khv_c {left: 50%; top:50%; transform: translate(-50%, -50%);}
.kh_c {left: 50%; transform: translate(-50%);}

.k_right20 {right: 20px;}
.kp_t0 { top:0px; }

/*margins*/
.km_10 {margin: 10px;}
.km_16 {margin: 16px;}
.km_a {margin: auto;}
.km_2p {margin: 2%;}
.kmt_10 {margin-top: 10px;}

.k_ma {margin: auto;}
.k_ma2 { margin:2px;}
.k_ma4 { margin:4px;}

.k_mat1 { margin-top:1px;}
.k_mat2 { margin-top:2px;}
.k_mat3 { margin-top:3px;}
.k_mat4 { margin-top:4px;}
.k_mat5 { margin-top:5px;}
.k_mat10 { margin-top:10px;}
.k_mat18 { margin-top:18px;}
.k_mat20 { margin-top:20px;}
.k_mat22 { margin-top:22px;}
.k_mat25 { margin-top:25px;}
.k_mat30 { margin-top:30px;}
.k_mat35 { margin-top:35px;}
.k_mat40 { margin-top:40px;}
.k_mat50 { margin-top:50px;}
.k_mat83 { margin-top:83px;}
.k_mat100 { margin-top:100px;}
.k_mat125 { margin-top:125px;}

.k_mat-95 { margin-top:-95px;}

.k_mab2 {margin-bottom: 2px;}
.k_mab6 {margin-bottom: 6px;}

.k_mab10 {margin-bottom: 10px;}
.k_mab20 {margin-bottom: 20px;}

.k_mal5 { margin-left:5px; }
.k_mal15 { margin-left:15px; }
.k_mal25 { margin-left:25px; }

.k_mal33-5p { margin-left:33.5%; }

.k_mar5 { margin-right:5px; }
.k_mar20 { margin-right:20px; }
.k_mar25 { margin-right:25px; }

/*line height */
.kl_h20 {line-height: 20px;}
.kl_h25 {line-height: 25px;}
.kl_h30 {line-height: 30px;}
.kl_h35 {line-height: 35px;}
.kl_h40 {line-height: 40px;}
.kl_h46 {line-height: 46px;}


.k_vhc {top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.k_vc {  -ms-transform: translateY(-50%); transform: translateY(-50%);}
.k_hc {  -ms-transform: translateX(-50%); transform: translateX(-50%); }
.k_floatl {float: left;}
.k_floatr {float: right;}
/*top and left */
.k_btm20 {bottom: 20px;}
.k_lft50p {left: 50%;}

/*display*/
.tt_bk {display: block;}
.tt_bkh {display: none;}
.ovf_h {overflow:hidden;}
.k_dinbk { display: inline-block; }
.k_dcell {display: table-cell;}

.btn_pay {
    background-color: #c0a76d;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.btn_submit {
    background-color: #c0a76d;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: auto;
    cursor: pointer;
}

.btn_pay:hover, .btn_submit:hover { background-color: #a8883e; }
.btn_reject { background-color: #9b0505; }

/*zindex */
.kz_10 {z-index: 10;}

/* Transitions & animations */
.k_trans1{transition:1s; }

/*text alignments */
.ta_c {text-align: center;}
.ta_l {text-align: left;}
.ta_r {text-align: right;}
.ta_nw {text-wrap:none;white-space: nowrap;}

.mv-hov-txt{ }

.mv-hov-txt:hover{
	cursor:pointer;
	color: #c0a76d;
	font-weight:bold;
}


/*display*/
.tt_dsb { display: block; }
.tt_dflex { display:flex; }

.tt_dsn { border:5px solid red; }
.tt_ofh { overflow:hidden;}
.tt_ofs { overflow: scroll;}
.tt_ofa { overflow: auto;}

.tt_dinlb {display: inline-block;}

/*zindex */
.kz_10 { z-index: 10; }

/*annimations */
@keyframes k_lslidein {
    from {
        left: -100%;
    }
    to {
        left: 0px;
    }
}
@keyframes k_lslideout {
    from {
        left: 0px;
    }
    to {
        left:-100%;
    }
}


@keyframes slide-left {
    from {
        left: 100%;
    }
    to {
        left: 0px;
    }
}

@keyframes slide-right {
    from {
        left: -100%;
    }
    to {
        left: 0px;
    }
}


/*.collapsible {*/
/*width: 100%; height: 46px; padding: 5px; text-align: left; border-bottom: solid #cacaca 1px;*/
/*    font-family: Arial, Helvetica, sans-serif;*/
/*    font-size: 12px;*/
/*    line-height: 15px;*/
/*    cursor: pointer;*/

/*}*/

/*.active, .collapsible:hover { */
/*}*/


/*.content {*/
/*  padding: 0 18px;*/
/*  max-height: 0;*/
/*  overflow: hidden;*/
/*  transition: max-height 0.2s ease-out;*/
/*  background-color: #f1f1f1;*/
/* width: 100%;*/
/*}*/

.k_par {
    content: '\002B';
    color: black;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}




/** Temp comment -no use-/*
/* .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
} */

.k_heading_text{
    font-family: Arial, Helvetica, sans-serif
}

.btn_sub{ background: #e1e1e1; }
.btn_sub:hover{ background: #dadada; }

.btn_gen{ background: #c0a76d; }
.btn_gen:hover{ background: #a8883e; }

.btn_can{  }
.btn_can:hover{ background: #dadada; }
/*.scroll {*/
/*    border: 0;*/
/*    border-collapse: collapse;*/
/*}*/




/*
table {
    table-layout: fixed;
    width: auto;
    overflow: auto;
}

table tr {
    border-bottom: 1px solid #e9e9e9;
}

table thead td,th {
    border-bottom: 1px solid #e1e1e1;
    text-align: left;
    padding: 10px;
    margin: 10px;
    font-size: 13px;
    text-transform: capitalize;
}

table thead tr td .dt_btitle{
    padding: 10px;
    font-weight: bold;
    background: #e8e8e8;
    border-radius: 10px;
}

table tbody tr td,
th {
    border-bottom: 1px solid #e1e1e1;
    padding: 13px;
    font-size: 14px;
    text-align: left;
    text-wrap: none;
}

table tbody tr:hover {
    background: #fcfcfc;
}

table thead tr td:hover .dt_btitle{
    background: #f1f1f1;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

table tr ul.actions {
    margin: 0;
}

table tr ul.actions li {
    display: inline;
    margin-right: 5px;
}

table thead tr th{
    border-bottom: red !important;
}

*/

/*tr:nth-child(even){ background-color: #949494 !important; }*/

/* Process category Form*/
.tt_frm_wizard {
    width: 100%;
    display: grid;
}

.tt_process {
    box-model: border-box;
    align-self: center;
    justify-self: center;
    padding: 30px 0;
}
.tt_process ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.tt_process ul li.tt_pst .tt_type {
    display: flex;
    align-items: center;
    color: #252525;
    font-size: 12px;
    cursor: pointer;
}
.tt_process ul li.tt_pst .tt_type:before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid #c0a76d;
    background: transparent;
}

.tt_process ul li.tt_pst.completed .tt_type:before {
    content: "✓";
    color: white;
    font-size: 0.8em;
    text-align: center;
    background: #c0a76d;
    line-height: 17px;
}

.tt_process ul li.tt_pst:not(:last-child):after {
    height: 22px;
    width: 2px;
    content: "";
    display: block;
    background-color: #c0c0c0;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.tt_tlmt20{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 170px; }

/*Customs Checkbox css */
.cm_chkbox input[type=checkbox] { position: relative; border: 1px solid #938556; border-radius: 2px; background: none; cursor: pointer; line-height: 0; margin: 0 .6em 0 0; outline: 0; padding: 0 !important; vertical-align: text-top; height: 22px; width: 100%; -webkit-appearance: none; }
.cm_chkbox input[type=checkbox]:hover { opacity: 1; }
.cm_chkbox input[type=checkbox]:checked { background-color: #938556; opacity: 1; }
.cm_chkbox input[type=checkbox]:before { content: ''; position: absolute; right: 50%; top: 50%; width: 4px; height: 10px; border: solid #FFF; border-width: 0 2px 2px 0; margin: -1px -1px 0 -1px; transform: rotate(45deg) translate(-50%, -50%); z-index: 2; }

/*Custom Text Box*/
.pagination input{
    border-radius: 0;
    outline: none;
    border: none;
}

.pagination input:focus, input:active{
    outline: none;
    border: none;
    border-radius: 0;
}

.pagination input[type=number]::-webkit-inner-spin-button,
.pagination input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0; /* Optional: You can also adjust the margin to fit your design */
}


/* Custom Tooltips css */
.tooltip{
    position:relative;
    display:inline-block;
    border-bottom:1px dotted black;
    margin:100px;
}

.tooltip .text{
    position:absolute;
    width:120px;
    background-color:black;
    color:#fff;
    text-align:center;
    padding:5px 0;
    z-index:1;
    border-radius:6px;
    bottom:110%;
    left:50%;
    margin-left:-60px;
    opacity:0;
    transition:opacity 3s;
    visibility:hidden;
}

.tooltip .text::after{
    position:absolute;
    content:"";
    border-style:solid;
    border-width:5px;
    border-color: black transparent  transparent transparent;
    top:100%;
    left:50%;
    margin-left:-5px;
}

.tooltip:hover .text{
    visibility:visible;
    opacity:1;
}


/* Table Styles */
/* =============================================================
   Stage data table ($tt_table) — modern, compact, consistent
   with the rest of the toolbar theme (gold #c0a76d accent).
   ============================================================= */
.cus_tbl-wrap {
    width: 100%;
    height: calc(100% - 76px);
    overflow: auto;
    float: left;
    background: #fff;
    border-top: 1px solid #ececec;
}
.cus_tbl-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: #333;
}

/* ------- Header ------- */
.cus_tbl-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #fbf5e6 0%, #f5edda 100%);
    color: #6b5a38;
    font-weight: 600;
    text-transform: capitalize;
    padding: 0;
    border-bottom: 1.5px solid #c0a76d;
    border-right: 1px solid #e9ddb9;
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s;
}
.cus_tbl-table thead th:last-child { border-right: 0; }
.cus_tbl-table thead th:hover { background: #f2e6c4; cursor: pointer; }
.cus_tbl-th-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    line-height: 1.2;
}
.cus_tbl-th-lbl {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cus_tbl-th-sort {
    font-size: 14px;
    color: #b69958;
    flex-shrink: 0;
    opacity: 0.7;
}
.cus_tbl-table thead th:hover .cus_tbl-th-sort { opacity: 1; }
.cus_tbl-th-action { justify-content: center; color: #6b5a38; }

/* ------- Bulk-action bar above the table ------- */
/* Slides in from display:none → flex when rows are selected. Sits between
   the toolbar and the table, matches the toolbar's gold palette so it
   reads as part of the same family. */
.tbl-bulk-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    margin: 4px 0;
    background: linear-gradient(180deg, #fbf5e6 0%, #f5edda 100%);
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    color: #6b5a38;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(192,167,109,0.14);
    animation: tbl-bulk-slide 0.18s ease-out;
}
.tbl-bulk-bar.is-visible { display: flex; }
@keyframes tbl-bulk-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tbl-bulk-info   { font-weight: 500; color: #6b5a38; }
.tbl-bulk-info b { color: #8a6d0b; font-size: 13px; margin-right: 3px; }
.tbl-bulk-actions {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto;
}
.tbl-bulk-btn {
    width: auto !important;
    padding: 3px 10px;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #e2d7bf;
    background: #fff;
    color: #7a6a48;
}
.tbl-bulk-btn i { font-size: 13px; }
.tbl-bulk-btn:hover { background: #f5edda; border-color: #c0a76d; color: #6b5a38; }
.tbl-bulk-btn-del   { background: #fdeceb; border-color: #e8b4ae; color: #a8302b; }
.tbl-bulk-btn-del:hover { background: #a8302b; border-color: #7d201c; color: #fff; }
.tbl-bulk-btn-edit   { background: #eaf4fd; border-color: #b6d6ef; color: #1e5a8a; }
.tbl-bulk-btn-edit:hover { background: #1e5a8a; border-color: #154267; color: #fff; }
/* Icon-only compact variant — square-ish padding, centered glyph, no label text. */
.tbl-bulk-btn-icon { padding: 3px 7px; gap: 0; }
.tbl-bulk-btn-icon i { font-size: 14px; }

/* ------- Checkbox + row-number columns ------- */
/* Fixed-width column with the checkbox dead-centered both ways. The input
   is forced to 15×15 with 0 margin so browser defaults don't push it off-axis. */
.cus_tbl-table th.cus_tbl-chk,
.cus_tbl-table td.cus_tbl-chk {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 0;        /* kill phantom inline-baseline gap that was tilting the box */
}
/* Match BOTH the header "select all" and every per-row class
   (`.tbl_rws_cbox<tabid>_rnum`) via a wildcard attribute selector. */
.cus_tbl-chk input[type="checkbox"],
.cus_tbl-chk-all,
.cus_tbl [class^="tbl_rws_cbox"],
.cus_tbl [class*=" tbl_rws_cbox"] {
    width: 15px;
    height: 15px;
    margin: 0 auto;
    padding: 0;
    accent-color: #c0a76d;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}
.cus_tbl-table th.cus_tbl-rn,
.cus_tbl-table td.cus_tbl-rn {
    width: 44px;
    min-width: 44px;
    text-align: left;
    vertical-align: middle;
    color: #888;
    font-weight: 500;
}
.cus_tbl-rn-num {
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* ------- Body cells ------- */
.cus_tbl-table tbody td {
    padding: 0;
    border-bottom: 1px solid #efefef;
    vertical-align: middle;
    background: #fff;
}
.cus_tbl-td-v {
    display: block;
    padding: 6px 10px;
    line-height: 1.4;
    /* Single line: values show on one line and ellipsis when they exceed the
       column width (never wrap / break short words). Text is also hard-capped
       at 170 chars server-side. Full value shows in the ktip hover tooltip. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 640px;
}
/* Cells carrying a tooltip (longer values) get a help cursor; the ktip in
   apps.js only actually appears when the text is genuinely truncated. */
.cus_tbl-td-v[data-ktip] { cursor: help; }

/* ktip — custom hover tooltip (replaces the native title bubble). Warm dark
   card with a gold hairline to match the app palette; positioned by JS. */
.ktip {
    position: fixed;
    z-index: 100000;
    max-width: 380px;
    padding: 9px 12px;
    background: #2c2a25;
    color: #f4efe2;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 9px;
    border: 1px solid rgba(192,167,109,0.40);
    box-shadow: 0 10px 30px rgba(0,0,0,0.30);
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease;
}
.ktip.is-show { opacity: 1; transform: translateY(0); }
.ktip::before {
    content: "";
    position: absolute;
    width: 9px; height: 9px;
    background: inherit;
    border-left: 1px solid rgba(192,167,109,0.40);
    border-top: 1px solid rgba(192,167,109,0.40);
    transform: rotate(45deg);
    left: var(--ktip-arrow-x, 16px);
}
.ktip.ktip-below::before { top: -5px; }
.ktip.ktip-above::before { bottom: -5px; border: 0; border-right: 1px solid rgba(192,167,109,0.40); border-bottom: 1px solid rgba(192,167,109,0.40); }

/* kctx — sidebar right-click context menu (Open / Open New Tab).
   Fixed + high z-index so the sidebar's overflow never clips it. */
.kctx {
    position: fixed;
    z-index: 100001;
    min-width: 170px;
    padding: 5px;
    background: #fffdf7;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    font-size: 13px;
    color: #3a352b;
    display: none;
}
.kctx.is-show { display: block; }
.kctx-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.kctx-item:hover { background: rgba(192,167,109,0.14); }
.kctx-ico { font-size: 16px; color: #c0a76d; flex: 0 0 auto; }
.kctx-lbl { flex: 1 1 auto; }
.kctx-sep { height: 1px; margin: 4px 6px; background: #ece3cd; }
.cus_tbl-table tbody tr.cus_tbl-row td { transition: background 0.12s; }
.cus_tbl-table tbody tr.cus_tbl-row:nth-child(even) td { background: #fafafa; }
.cus_tbl-table tbody tr.cus_tbl-row:hover td { background: #fbf5e6; }
.cus_tbl-table tbody tr.cus_tbl-row:hover td.action-tdclmn { background: #fbf5e6; }

/* Keep the "selected" style matching hover but stronger */
.cus_tbl-table tbody tr.cus_tbl-row.k_selected td,
.cus_tbl-table tbody tr.cus_tbl-row.tbl-row-selected td { background: #f5edda; }

/* tt_selectrow sets inline `background-color:#938556; color:white` on the <tr>.
   Without this the table's per-cell background (white / stripe / sticky-action)
   paints over the row colour and we get white text on white cells. Rebroadcast
   the selection colour onto the cells, and flip text to dark so it's readable. */
.cus_tbl-table tbody tr.cus_tbl-row[style*="938556"] td,
.cus_tbl-table tbody tr.cus_tbl-row[style*="rgb(147"] td {
    background: #f5edda !important;
    color: #3a2e18 !important;
}
.cus_tbl-table tbody tr.cus_tbl-row[style*="938556"] td.action-tdclmn,
.cus_tbl-table tbody tr.cus_tbl-row[style*="rgb(147"] td.action-tdclmn {
    background: #f5edda !important;
}
/* The "View More" chip sits on that lighter background — invert it for contrast. */
.cus_tbl-table tbody tr.cus_tbl-row[style*="938556"] .cus_tbl-action,
.cus_tbl-table tbody tr.cus_tbl-row[style*="rgb(147"] .cus_tbl-action {
    background: #c0a76d;
    border-color: #a88e50;
    color: #fff;
}

/* Tighten the default td:hover — was turning the whole cell grey on every cell hover */
.cus_tbl tbody tr td:hover { background: inherit; color: inherit; cursor: inherit; }

/* Backwards-compat shim for any older code still writing this class name */
.ta_ecl { width:auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Table scrollbars — themed to the gold palette */
.cus_tbl::-webkit-scrollbar           { width: 9px; height: 9px; background: #f4f0e4; }
.cus_tbl::-webkit-scrollbar-thumb     { background: #d7c99b; border-radius: 4px; border: 2px solid #f4f0e4; }
.cus_tbl::-webkit-scrollbar-thumb:hover { background: #c0a76d; cursor: grabbing; }
.cus_tbl::-webkit-scrollbar-corner    { background: #f4f0e4; }



/* Sticky "Action" column — pinned to the right edge so it's always reachable */
.cus_tbl .action-thclmn {
    position: sticky;
    right: 0;
    width: 124px;
    min-width: 124px;
    max-width: 124px;
    z-index: 3;
    box-shadow: -3px 0 6px rgba(0,0,0,0.08);
}
.cus_tbl .action-tdclmn {
    position: sticky;
    right: 0;
    width: 124px;
    min-width: 124px;
    max-width: 124px;
    z-index: 1;
    background: #fff;
    box-shadow: -3px 0 6px rgba(0,0,0,0.06);
}
/* Row actions — a centered cluster of boxed icon buttons.
   `justify-content: center` keeps the cluster optically centered no matter
   whether 1, 2, or 3 buttons are rendered (View/Edit/Delete gating). */
.cus_tbl-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 6px;
    white-space: nowrap;
    height: 100%;
}
.cus_tbl-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    border: 1px solid #e2d7bf;
    background: #faf4e1;
    color: #7a6a48;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
}
.cus_tbl-act i { font-size: 15px; line-height: 1; }
.cus_tbl-act:hover  { transform: translateY(-1px); }
.cus_tbl-act:active { transform: translateY(0); }

/* Per-action tint so users can tell them apart at a glance. */
.cus_tbl-act-view        { background: #eaf4fb; border-color: #a9cde6; color: #1f5e87; }
.cus_tbl-act-view:hover  { background: #1f5e87; border-color: #1f5e87; color: #fff; }
.cus_tbl-act-edit        { background: #f5edda; border-color: #c0a76d; color: #8a7a56; }
.cus_tbl-act-edit:hover  { background: #c0a76d; border-color: #a88e50; color: #fff; }
.cus_tbl-act-del         { background: #fdeceb; border-color: #e8b4ae; color: #a8302b; }
.cus_tbl-act-del:hover   { background: #a8302b; border-color: #7d201c; color: #fff; }

/* Denied variant — button still visible + clickable (so all users see
   the same UI) but visually dimmed so the operator can tell at a glance
   they don't have permission. Onclick shows a "no permission" toast
   instead of firing the action. Applied to .cus_tbl-act-edit and
   .cus_tbl-act-del when the row-level can_edit / can_delete gate says
   the actor isn't allowed. Directive 2026-07-21 "all user should
   visible but access wise allow the action if no access give message
   no permission". */
.cus_tbl-act.cus_tbl-act-denied {
    background: #f7f7f7;
    border-color: #d9d9d9;
    color: #b7b7b7;
    cursor: not-allowed;
    /* Neutralise the per-action tint hover — the denied state stays
       consistent regardless of edit/del context. */
}
.cus_tbl-act.cus_tbl-act-denied:hover {
    background: #eee;
    border-color: #c9c9c9;
    color: #8a8a8a;
    transform: none;   /* skip the lift; nothing's happening */
}

/* Save / Cancel that replace the action cell while a row is being edited. */
.cus_tbl-act-save        { background: #c0a76d; border-color: #a88e50; color: #fff; }
.cus_tbl-act-save:hover  { background: #a88e50; border-color: #8a7537; color: #fff; }
.cus_tbl-act-cancel      { background: #f1f1f1; border-color: #ccc; color: #555; }
.cus_tbl-act-cancel:hover{ background: #555; border-color: #333; color: #fff; }

/* Subtle gold tint on the row being edited so users see the scope. */
.cus_tbl-row.cus_tbl-row-editing td { background: #fbf5e6 !important; }

/* ------- Mass Edit state ------- */
/* Hidden by default (even on .tbl-act-btn which defines display:inline-flex
   later in this file). Toggled on by the JS adding `.is-showing`. */
.tbl-massedit-save,
.tbl-massedit-cancel             { display: none !important; }
.tbl-massedit-save.is-showing,
.tbl-massedit-cancel.is-showing  { display: inline-flex !important; }
.cus_tbl-td-editing  { background: #fbf5e6 !important; padding: 0 !important; }
.cus_tbl-td-input {
    width: 100%;
    height: 100%;
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #c0a76d;
    border-radius: 3px;
    background: #fff;
    color: #222;
    outline: none;
    box-sizing: border-box;
}
.cus_tbl-td-input:focus { border-color: #a88e50; box-shadow: 0 0 0 2px rgba(192,167,109,0.22); }

/*
 CSS for the main view tab
*/
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7),
.tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8),
.tabset > input:nth-child(17):checked ~ .tab-panels > .tab-panel:nth-child(9),
.tabset > input:nth-child(19):checked ~ .tab-panels > .tab-panel:nth-child(10),
.tabset > input:nth-child(21):checked ~ .tab-panels > .tab-panel:nth-child(11),
.tabset > input:nth-child(23):checked ~ .tab-panels > .tab-panel:nth-child(12),
.tabset > input:nth-child(25):checked ~ .tab-panels > .tab-panel:nth-child(13),
.tabset > input:nth-child(27):checked ~ .tab-panels > .tab-panel:nth-child(14){
    display: block;
}

/*
 Styling
*/

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 10px 10px 15px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.tabset > label::after {
    content: "";
    position: absolute;
    left: 11px;
    bottom: 10px;
    width: 13px;
    height: 1px;
    background: #e1e1e1;
}

input:focus-visible + label {
    outline: 2px solid #938556;
    border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: #938556;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: #938556;
}

.tabset > input:checked + label {
    border-color: #f3f3f3;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    border-top: 2px solid #f3f3f3;
}

/*.tabset {*/
/*    max-width: 65em;*/
/*}*/




/*Dashboard css*/
.all {
    display: block;
    grid-template-columns: 1fr ;
}









/*tt_card*/
.tt_card50x100 {
	position: relative;
    width: 50%; height: 100%;
    float: left;
	overflow: hidden;
}

/*--------------------------------mobile and small screens-----------------------------*/
@media (orientation: portrait) and (max-width: 991.98px) {
  .tt_body{ height:100vh; overflow: hidden;}
  .loginpg{ display: flex; flex-direction: column;  height:100vh; }

  .tt_card50x100 {width: 100%; height: 50%;}
  .logfrm{ width: 65%; }
  .logfrm-el{ order:2; }
  .log-promo { order:1; }

  .log-promo .tt_f28{ font-size: 48px; }
  .log-promo .tt_f16{ font-size: 25px; }

  .log-promo .w_75p{ width: 85%; }
  .log-promo .w_55 { width: 130px; }
  .log-promo .w_160 { width: 360px; }
  .log-promo .h_160 { height: 360px; }

  .log-promo .k_padt32{ padding-top: 65px;  }
  .log-promo .k_mat10{ margin-top: 55px;  }
}

@media (max-width: 820px){
    .tt_card50x100 {width: 100%; height: 50%;}
    .tt_page2 { width: 100%;}
    .tt_page3 { width: 100%; left: 0px;}
}

@media (max-width: 575.98px) {
  .tt_card50x100 {width: 100%; height: 50%;}

}


@media (orientation: landscape) and (max-height: 600px) {
.tt_body{ width: 100%; height:100vh; overflow: hidden;} 
    .tt_card50x100 { width: 50%; height: 100%; }

.logfrm-el{ width: 50%; }
  .log-promo {width: 50%; }

}

/* =============================================================
   Login + Password Reset Form — gold-themed, modern
   ============================================================= */
.login-form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.login-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #5a5a5a;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.required-star { color: #c0392b; }

.login-form-group input,
.login-form-group textarea {
    padding: 11px 14px;
    box-sizing: border-box;
    border: 1px solid #d9d3c7;
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    background: #fafaf6;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-form-group input:focus,
.login-form-group textarea:focus {
    outline: none;
    border-color: #c0a76d;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192,167,109,0.15);
}
.login-form-group input::placeholder {
    color: #a0a0a0;
    font-weight: 300;
    font-size: 13px;
}

/* Password toggle wrapper */
.log_pw_wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.log_pw_wrap .log_frm_input {
    width: 100%;
    padding-right: 42px;
}
.log_pw_toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: #b0a080;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.log_pw_toggle:hover { color: #8a7a56; }
.log_pw_toggle:focus { outline: none; }

/* Remember me + forgot row */
.login-form-group.single-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
}

/* Custom checkbox */
.login-form-group .custom-check {
    display: flex;
    align-items: center;
}
.login-form-group .custom-check input[type="checkbox"] {
    height: 18px;
    width: 18px;
    margin: 0 8px 0 0;
    padding: 0;
    opacity: 1;
    appearance: none;
    border: 2px solid #c0a76d;
    border-radius: 4px;
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.login-form-group .custom-check input[type="checkbox"]:checked {
    border-color: #a88e50;
    background: #c0a76d;
}
.login-form-group .custom-check input[type="checkbox"]:checked::before,
.login-form-group .custom-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    height: 2px;
    background: #fff;
}
.login-form-group .custom-check input[type="checkbox"]:checked::before {
    width: 6px; top: 9px; left: 2px; transform: rotate(44deg);
}
.login-form-group .custom-check input[type="checkbox"]:checked::after {
    width: 10px; top: 7px; left: 4px; transform: rotate(-55deg);
}
.login-form-group .custom-check input[type="checkbox"]:focus { outline: none; }
.login-form-group .custom-check label {
    margin: 0;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* Links */
.login-form-group .link,
.forgot-link {
    color: #8a7a56;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
}
.login-form-group .link:hover,
.forgot-link:hover {
    color: #6b5a38;
    text-decoration: underline;
}

/* Buttons */
.login-form-group .rounded-button {
    display: flex;
    width: 100%;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    box-sizing: border-box;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.08s;
}
.login-form-group .rounded-button:active { transform: scale(0.98); }

.login-form-group .login-cta {
    color: #fff;
    margin: 20px 0 30px;
    background: #c0a76d;
    border: 1px solid #a88e50;
    box-shadow: 0 2px 8px rgba(192,167,109,0.25);
}
.login-form-group .login-cta:hover {
    background: #a88e50;
    box-shadow: 0 4px 14px rgba(192,167,109,0.35);
}

/* Footer */
.loginpg-footer {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #bbb;
    letter-spacing: 0.2px;
}

/* Password reset step panels — clean card feel */
#fp_panel {
    animation: loginFadeIn 0.25s ease;
}
@keyframes loginFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#fp_panel .tt_f22 { color: #6b5a38; }
#fp_panel .k_fcolor6 { color: #888; }
#fp_panel .link { font-size: 13px; }

/* OTP box inputs — 6 individual digit boxes */
.otp-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 8px 0 4px;
}
.otp-box {
    width: 48px !important;
    height: 56px !important;
    text-align: center;
    font-size: 24px !important;
    font-weight: 700;
    color: #333;
    border: 2px solid #d9d3c7 !important;
    border-radius: 10px !important;
    background: #fafaf6 !important;
    padding: 0 !important;
    caret-color: #c0a76d;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.otp-box:focus {
    border-color: #c0a76d !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(192,167,109,0.18) !important;
    outline: none;
}

/* Button loading state — spinner + "Please wait…" */
.btn-loading {
    opacity: 0.7;
    cursor: not-allowed !important;
    pointer-events: none;
}
.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tt-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}







.dev_errorbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 0px;
  background-color: #ffffff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
  overflow: hidden;
  opacity: 0.7;
  transition: transform 0.5s ease-in-out;
}

.dev_errorbox:hover{ opacity: 1; }
.dev_erbxhidden {
  transform: translateY(-100%);
}

.dev_btn_close {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 12px;
  height: 12px;
  opacity: 0.3;
}

.dev_btn_close:hover{
  opacity: 1;
}
.dev_btn_close:before, .dev_btn_close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 13px;
  width: 2px;
  background-color: #333;
}
.dev_btn_close:before {
  transform: rotate(45deg);
}
.dev_btn_close:after {
  transform: rotate(-45deg);
}

.dev_erbx_ct {
  width:100%;
  padding:10px;
  height:auto;
  overflow: auto; /* Enable vertical scrollbar when needed */
  max-height: 450px; /* Set maximum height */
  min-height: 50px; /* Set minimum height */
  border:1px solid #eee;
  border-left-width:5px;
  border-radius: 3px;
  border-top-left-radius: 0px;
  margin:0px auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border-left-color: #d9534f; /* Left side border color */
  background-color: rgba(217, 83, 79, 0.1); /*Same color as the left border with reduced alpha to 0.1*/
}

.right-align-bold {
    list-style-position: inside; /* Ensure list markers are inside the list item */
    text-align: right; /* Align text to the right */
	text-align: right;
direction: rtl;
}

.right-align-bold li {
    font-weight: bold; /* Make text bold */
}

.ol-smoline li {
    margin-bottom: 10px; /* Adjust this value to set the space between list items */
}

.ol-smolinear li {
    margin-bottom: 15px; /* Adjust this value to set the space between list items */
}

.order-list-pr {
    direction: rtl; 
    text-align: right; 
}

.order-list-pr .tt_bullutdot_ar{
	float: right;
	font-size: 11px;
	margin-left: 5px;
	direction: rtl; 
	text-align: right;
}

.order-list-pr p{
	display: flex;
	justify-content: flex-start;
	margin-bottom:11px;
	text-align: right;
	line-height: 1.5;
}

.olv_reducespace li{ margin-bottom: 5px; }
.olv_reducespace-ar { list-style: none; direction: rtl; counter-reset: arabic-counter; }
.olv_reducespace-ar li { counter-increment: arabic-counter; position: relative; padding-right: 20px;  margin-bottom: 5px;}
.olv_reducespace-ar li::before { direction: rtl;  content: attr(data-letter)"."; font-weight: bold; position: absolute; right: 0; font-size:10px; }
.less_spc li{ margin-bottom: 5px; }


.ulv_reducespace-ar { list-style: none; direction: rtl; counter-reset: arabic-counter; }
.ulv_reducespace-ar li { counter-increment: arabic-counter; position: relative; padding-right: 10px;  margin-bottom: 5px;  }
.ulv_reducespace-ar li::before { content: attr(data-letter) " - "; font-weight: bold; position: absolute; right: 0; }
.less_spc li{ margin-bottom: 5px; }



/* Vertical Tab for access privilage 
 * ------------------------------------------------------------------------------------*/

.vertic_tab {
  color: #333;
  display: block;
  margin: auto;
  position: relative;
  width: 100%;

}

.vertic_tab input[name="sections"] {
  position: absolute;
    display: none;
}

.vertic_tab section {
  display: block;
}

.vertic_tab section label {
  cursor: pointer;
  display: block;
  font-size: 14px;
  padding: 10px 10px;
  position: relative;
  width: auto;
  max-width: 150px;
  z-index:100;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
  transition: background-color 0.3s ease;
}

.vertic_tab section label:hover{
	background-color: #e9e9e9 !important;
	font-weight:bold;
}

.vertic_tab section .mn-contents {
  display: none;
  left: 150px;
  width: calc(100% - 150px);
  height:auto;
  overflow:auto;
  max-height:100%;
  padding: 10px;
  position: absolute;  
  top: 0;
  background: #ffffff;
  border-left:1px solid #ddd;
}

.vertic_tab input[name="sections"]:checked + label { 
  background: #eee;
  color: #d9ab36;
  font-weight:bold;
}

.vertic_tab  input[name="sections"]:checked ~ .mn-contents {
  display: block;
}






/* Noo need this csss */
.tt_steps {
  position: relative;
  margin-bottom: 30px;
  counter-reset: step;
 
}

.tt_steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  width: 25%;
  position: relative;
  float: left;
}
 
.tt_steps li:before {
  display: block;
  content: counter(step); 
  counter-increment: step; 
  width: 32px;
  height: 32px;
  background-color: #d9ab36;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}
 
.tt_steps li:has(+ li.cactive)::before {
  background-color: #019875;
}





/* ----------New steps design */
.ttsteps-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 1200px;
      position: relative;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 40px 20px;
    }

    .ttsteps-container .step {
      flex: 1;
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .ttsteps-container .step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 40%;
      left: 100%;
      width: 100%;
      height: 3px;
      background-color: #dcdcdc;
      z-index: 0;
    }

    .ttsteps-container .circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #d9ab36;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 20px;
      color: #555;
      position: relative;
      z-index: 1;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .ttsteps-container .step.completed .circle {
      background-color: #d9ab36; /* Custom Completed Color */
      color: #fff;
    }

    .ttsteps-container .step.not-completed .circle {
      background-color: #e0e0e0;
      color: #555;
    }

    .ttsteps-container .step.completed::after {
      background-color: #d9ab36; /* Custom Completed Color */
    }

    .ttsteps-container .label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-top: 20px;
    }

    .ttsteps-container .description {
      font-size: 12px;
      color: #777;
      margin-top: 5px;
      line-height: 1.5;
      cursor:pointer;
    }

	.ttsteps-container .description span{
      font-size: 13px;
      color: #d9ab36;
      line-height: 1.9;
    }

	.ttsteps-container .description span:hover{
      color: #d9ab36;
    }

    /* Hover effect */
    .ttsteps-container .step:hover .circle {
      background-color: #d9ab36;
      transform: scale(1.2);
    }

    /* Media Query for Smaller Screens */
    @media (max-width: 768px) {
      .ttsteps-container .steps-container {
        flex-direction: column;
        align-items: center;
      }

      .ttsteps-container .step:not(:last-child)::after {
        display: none;
      }

      .ttsteps-container .step {
        margin-bottom: 30px;
      }
    }


/* Menus list for access privilage 
 * ------------------------------------------------------------------------------------*/
.mn-mng-menu {
     list-style-type: none;
     padding: 0;
     margin: 0;
}
.mn-mng-menu li {
    margin: 5px 0;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative; /* Position relative for mark positioning */
}
.mn-mng-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0; /* Reset margins if necessary */
    padding: 0px 5px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: background-color 0.3s;
}
.mn-mng-menu-item:hover {
    background-color: #e9e9e9;
}
.mn-mng-menu-item input[type="checkbox"] {
    margin: 0;
    margin-top:2px;;
    transform: scale(1.3);
    width:15px;
}
.mn-mng-menu-item label {
	font-size: 13px !important;
    padding: 5px !important;
    position: relative !important;
    margin: 0;
    width:70%;
    max-width: 70%;
    white-space: nowrap;
    background: transparent !important;
 	border-bottom: none !important;
 	transition: background-color 0.3s ease;
}
   
.mn-mng-submenu {
    list-style-type: none;
    padding-left: 10px; /* Indent submenus */
    overflow: hidden; /* Hide overflowing content */
    max-height: 0; /* Start with hidden content */
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* Smooth transition */
    opacity: 0;
}
.mn-mng-submenu.show {
    max-height: 1500px; /* Adjust based on content size */
    opacity: 1;
}
.mn-mng-submenu li {
	width: 98%;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.mn-mng-submenu li input[type="checkbox"] {
    margin: 0;
    margin-top:1px;;
    width:13px;
}
  
.mn-mng-submenu li label {
	display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px !important;
    padding: 3px 4px !important;
    position: relative !important;
    margin: 0;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background: transparent !important;
 	border-bottom: none !important;
 	transition: background-color 0.3s ease;
}

.mn-mng-submenu li label span{
	margin-left:5px;
}

.mn-mng-submenu li label:hover  span{
     background: transparent !important;
}

.mn-mng-submenu li label:hover{
     background-color: #e9e9e9 !important;
}

.mn-mng-mark {
    position: absolute;
    right: 15px; /* Adjust based on your layout */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #d9ab36;; /* Change color as needed */
    border-radius: 50%;
    transition: transform 0.5s ease; /* Animate sliding effect */
}

.mn-mng-submenu.show ~ .mark {
    transform: translateY(-50%) translateX(10px); /* Slide mark when submenu is visible */
}

.rbadge-circle{
	width: 30px;
    height: 30px;
    background-color: #c0a76d;
    color: white;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 50%; 
    transform: translateY(-50%);
}

.rbadge-disabled{
	width: 100%;
    height: 100%;
    background: rgba(193,193,193,.5);
    color: white;
    border-radius: 5px;
    position: absolute;
    top: 0;
}

.tt_clr_blink {
  animation: ttclrblinks 1s infinite alternate;
}

@keyframes ttclrblinks {
  0% { color: #c0a76d !important; }
  100% { color: red !important; }
}


.highlighted_txt{
	color:#d0a432;
}


.slide-toggle-ani {
    overflow: hidden;
    transition: max-height 0.5s ease;
    max-height: 1000px; /* enough to contain full height */
}

.slide-ani-hidden {
    max-height: 0;
}









.ttcomments-container {
      max-width: 100%;
		width:100%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 25px;
    }

    .ttcomments-container h2 {
      margin-bottom: 20px;
      font-size: 20px;
      color: #333;
      text-align: left;
    }

    .ttcomments-container .comment {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
      gap: 15px;
    }

    .ttcomments-container .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .ttcomments-container .comment-details {
      flex: 1;
    }

    .ttcomments-container .comment-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .ttcomments-container .comment-name {
      font-weight: bold;
      color: #222;
      font-size: 0.9em;
    }

    .ttcomments-container .comment-time {
      font-size: 0.8em;
      color: #888;
    }

    .ttcomments-container .comment-text {
      color: #444;
      line-height: 1.5;
      font-size: 0.8rem;
    }

    @media (max-width: 600px) {
      .ttcomments-container .comment {
        flex-direction: column;
        align-items: flex-start;
      }

      .ttcomments-container .avatar {
        margin-bottom: 10px;
      }

      .ttcomments-container .comment-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .ttcomments-container .comment-header .comment-time {
        margin-top: 5px;
      }
    }

/* Toggle Wtich css*/
.toggle-switch {
  display: inline-block;
  position: relative;
  width: 45px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  cursor: pointer;
  background-color: #ccc;
  border-radius: 11px;       /* half of 22px */
  position: absolute;
  inset: 0;
  transition: background-color 0.3s;
}

.slider .label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  font-size: 8px;            /* scaled down for 22px height */
  font-weight: bold;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

.slider .on { left: 3px; }   /* small inset for “ON” */
.slider .off { right: 3px; } /* small inset for “OFF” */

.slider::before {
  content: "";
  position: absolute;
  height: 17px;               /* 22px - 4px padding */
  width: 20px;
  left: 2px;
  top: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-switch input:checked + .slider {
  background-color: #c0a76d;
}

.toggle-switch input:checked + .slider::before {
  transform: translateX(20px); /* 45 - 18 - (2*2) = 23px */
}






/* Header row: keep your styles, just ensure spacing for the button */
.expander-head {
  display:flex; align-items:center; justify-content:space-between;
}

/* Slide animation container */
.expander-body {
  overflow: hidden;
  max-height: auto;                 /* collapsed */
  transition: max-height 300ms ease;
}

/* When open (JS toggles an inline max-height for smooth height) */
.expander[data-open="true"] .expander-body {
  /* we leave max-height controlled by JS to match content height */
}

/* Right-side toggle button */
.expander-toggle {
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid #ddd; border-radius:6px;
  padding:4px 10px; cursor:pointer; line-height:1;
  font-size:12px;
}
.expander-toggle:focus { outline:2px solid #6aa3ff; outline-offset:2px; }

/* Optional: rotate icon when open */
.expander[data-open="true"] .expander-toggle .chev {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* ========================================================
   kprocess_114.php - Account Details Panel Styles
   ======================================================== */

/* Profile image */
/* Profile image */
.k114-profile-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2d7bf;
    box-shadow: 0 2px 8px rgba(140, 120, 70, 0.15);
}

.k114-profile-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f5f0e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #8a7a56;
    border: 2px solid #e2d7bf;
}

.k114-profile-placeholder-lg { font-size: 34px; }

.k114-photo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

/* Profile card */
.k114-profile-card {
    background: linear-gradient(160deg, #fdfcf9 0%, #f5f0e6 100%);
    border-radius: 10px;
    padding: 16px 14px;
    text-align: center;
    border: 1px solid #e2d7bf;
}

.k114-profile-name {
    font-size: 14px;
    font-weight: 700;
    color: #3d3830;
    margin-bottom: 2px;
}

.k114-profile-role {
    font-size: 11px;
    color: #8a7a56;
    margin-bottom: 6px;
}

.k114-profile-meta {
    font-size: 11px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

/* Badges */
.k114-2fa-badge {
    background: #27ae60;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.k114-2fa-badge-off { background: #bbb; }

.k114-status-badge {
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.k114-status-active { background: #27ae60; }
.k114-status-suspended { background: #c0392b; }
.k114-status-inactive { background: #e67e22; }

/* Photo actions */
.k114-photo-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.k114-photo-btn {
    cursor: pointer;
    color: #fff;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    background: #bd9e4d;
    transition: background 0.2s;
}
.k114-photo-btn:hover { background: #a88b3d; }
/* Secondary variant for the View button — same size/rounding as the
   primary Change Photo button but tinted to differentiate from the
   upload action. Matches .k120-btn conventions used in the viewer. */
.k114-photo-btn-secondary {
    background: #fefdfb;
    color: #6b5a2e;
    border: 1px solid #ebe0bf;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.k114-photo-btn-secondary:hover { background: #faf6eb; color: #3d3830; }
.k114-photo-btn-secondary i { font-size: 13px; }

.k114-remove-btn {
    cursor: pointer;
    background: transparent;
    color: #c0392b;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(192, 57, 43, 0.2);
    transition: all 0.2s;
}
.k114-remove-btn:hover { background: rgba(192, 57, 43, 0.08); }

/* Card styling */
.k114-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2d7bf;
}

/*--- Active branch switcher (My Account, between profile card and
      Account Details). The card chrome comes from .k114-card; these
      rules only style the selector inside it. LTR here, unlike the
      right rail — this panel reads left-to-right. */
.k114-panel-body .rm-branch {
    width: 100%;
    float: left;
}
.k114-branch-card { padding-bottom: 12px; }

.k114-panel-body .rm-branch-box {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    background: #fdfcf9;
    cursor: pointer;
    transition: all 0.2s ease;
}
.k114-panel-body .rm-branch-box:hover {
    border-color: #c0a76d;
    background: #fff;
}
/* Static variants have nothing to choose, so they must not look or
   behave clickable. */
.k114-panel-body .rm-branch-box.is-static { cursor: default; }
.k114-panel-body .rm-branch-box.is-static:hover {
    border-color: #e2d7bf;
    background: #fdfcf9;
}
.k114-panel-body .rm-branch-box.is-none .rm-branch-nm { color: #9a9186; }
.k114-panel-body .rm-branch-box > i {
    font-size: 17px;
    color: #8a7a56;
    line-height: 1;
}
.k114-panel-body .rm-branch-nm {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #4a3f2d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.k114-panel-body .rm-branch-arw {
    font-size: 18px;
    color: #8a7a56;
    line-height: 1;
    transition: transform 0.2s ease;
}
.k114-panel-body .rm-branch.is-open .rm-branch-arw { transform: rotate(180deg); }

.k114-panel-body .rm-branch-drop {
    display: none;
    margin-top: 6px;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    overflow: hidden;
}
.k114-panel-body .rm-branch.is-open .rm-branch-drop { display: block; }
.k114-panel-body .rm-branch-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    color: #4a3f2d;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #f0ebe0;
    transition: background 0.2s ease;
}
.k114-panel-body .rm-branch-opt:last-child { border-bottom: 0; }
.k114-panel-body .rm-branch-opt:hover { background: #f7f3e8; }
/* The active row carries no onclick, so it must not invite a click. */
.k114-panel-body .rm-branch-opt.is-on {
    background: #f4efe2;
    font-weight: 600;
    cursor: default;
}
.k114-panel-body .rm-branch-opt.is-on:hover { background: #f4efe2; }
.k114-panel-body .rm-branch-opt i { font-size: 16px; color: #8a7a56; line-height: 1; }
.k114-panel-body .rm-branch-opt-nm {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chips for the Branch and Role rows in Account Details. A user can hold
   several of each, and a comma-joined run-on line was hard to scan — one
   tag per membership, primary marked. Shared by both rows so they read
   the same way. */
.k114-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.k114-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #4a3f2d;
    background: #f6f2e8;
    border: 1px solid #e2d7bf;
    border-radius: 20px;
    padding: 2px 8px;
    line-height: 16px;
    max-width: 100%;
}
.k114-chip.is-primary {
    background: #efe7d3;
    border-color: #d8c9a6;
}
.k114-chip-tag {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    background: #b09a67;
    border-radius: 8px;
    padding: 1px 5px;
    line-height: 12px;
}

.k114-card-header {
    font-size: 11px;
    font-weight: 700;
    color: #8a7a56;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0ebe0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info row */
.k114-info-row {
    border-bottom: 1px solid #f5f0e6;
    padding: 5px 0;
}

.k114-info-label {
    color: #8a7a56;
    font-size: 10px;
}

.k114-info-value {
    font-weight: 500;
    color: #3d3830;
    font-size: 11px;
}

.k114-info-value-empty {
    color: #ccc;
}

/* Panel header */
.k114-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
    background: linear-gradient(135deg, #f5f0e6 0%, #ede7d6 100%);
    border-bottom: 1px solid #e2d7bf;
}
.k114-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #5a5445;
    display: flex;
    align-items: center;
    gap: 6px;
}
.k114-panel-title i.bx { font-size: 18px; color: #bd9e4d; }
.k114-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.k114-panel-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: #8a7a56;
    font-size: 18px;
    transition: all 0.2s;
}
.k114-panel-close:hover {
    background: rgba(192, 167, 109, 0.15);
    color: #5a5445;
}

/* Panel footer */
.k114-panel-footer {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    border-top: 1px solid #e2d7bf;
    background: #f5f0e6;
}
.k114-btn-refresh {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: #8a7a56;
    font-size: 18px;
    background: #fff;
    border: 1px solid #e2d7bf;
    transition: all 0.2s;
    margin-right: auto;
}
.k114-btn-refresh:hover {
    background: #ede7d6;
    border-color: #d4c49a;
    color: #bd9e4d;
}
.k114-btn-close {
    padding: 5px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #5a5445;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.k114-btn-close:hover {
    background: #ede7d6;
    border-color: #d4c49a;
}

/* Footer layout variant used by the My Account panel — logout on the left,
   Close on the right. Base .k114-panel-footer uses flex-end, so we switch
   to space-between when both buttons are present. */
.k114-panel-footer-split {
    justify-content: space-between !important;
}

/* Log out button — red-outline by default so it reads as destructive,
   filled red on hover to confirm the action weight. Matches the tone
   of .k114-remove-btn but sized like .k114-btn-close. */
.k114-btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #c0392b;
    background: #fff;
    border: 1px solid rgba(192, 57, 43, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.k114-btn-logout i { font-size: 14px; }
.k114-btn-logout:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

/* Primary button */
.k114-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #bd9e4d;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.k114-btn-primary:hover { background: #a88b3d; }
.k114-btn-primary i.bx { font-size: 14px; }

/* Panel body */
.k114-panel-body {
    height: calc(100% - 85px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background: #fafaf6;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.k114-panel-body::-webkit-scrollbar { width: 5px; }
.k114-panel-body::-webkit-scrollbar-track { background: #f5f0e6; }
.k114-panel-body::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k114-panel-body::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* Form styling */
.k114-form-group {
    width: 100%;
    margin-bottom: 8px;
}

.k114-form-label {
    color: #8a7a56;
    font-weight: 600;
    font-size: 10px;
}

.k114-form-input {
    box-sizing: border-box;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    color: #3d3830;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}
.k114-form-input:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.15);
}

.k114-form-file { display: none; }

/* Password hints */
.k114-password-hints {
    background: #faf7f0;
    border-left: 3px solid #c0a76d;
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    font-size: 10px;
    color: #7a7060;
    line-height: 17px;
}

.k114-password-hints strong {
    color: #5a5445;
}

/* Active Sessions */
.k114-sessions-wrap {
    overflow: hidden;
}
.k114-session-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0ebe0;
    gap: 10px;
}
.k114-session-item:last-child { border-bottom: none; }
.k114-session-current {
    background: rgba(192, 167, 109, 0.06);
    border-radius: 6px;
    padding: 8px 6px;
    margin: 0 -6px;
}
.k114-session-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f0e6;
    border-radius: 8px;
    color: #8a7a56;
    font-size: 17px;
    position: relative;
}
.k114-session-icon-active {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}
.k114-session-pulse {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: #27ae60;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: k114pulse 2s infinite;
}
@keyframes k114pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(39, 174, 96, 0); }
}
.k114-session-info { flex: 1; min-width: 0; }
.k114-session-browser {
    font-size: 11px;
    font-weight: 600;
    color: #3d3830;
}
.k114-session-os {
    font-weight: 400;
    color: #8a7a56;
    font-size: 10px;
}
.k114-session-tags {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.k114-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    letter-spacing: 0.2px;
}
.k114-tag i.bx { font-size: 10px; }
.k114-tag-current {
    color: #27ae60;
    background: rgba(39, 174, 96, 0.1);
}
.k114-tag-active {
    color: #bd9e4d;
    background: rgba(189, 158, 77, 0.1);
}
.k114-tag-time {
    color: #7a7060;
    background: #f5f0e6;
}
.k114-session-meta {
    font-size: 9px;
    color: #999;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.k114-session-meta i.bx {
    font-size: 10px;
    vertical-align: middle;
    margin-right: 1px;
}
.k114-session-end {
    width: 26px;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: #c0392b;
    font-size: 14px;
    transition: background 0.2s;
}
.k114-session-end:hover {
    background: rgba(192, 57, 43, 0.1);
}
.k114-session-empty {
    font-size: 11px;
    color: #999;
    padding: 12px 0;
    text-align: center;
}

/* -------------------------------------------------------------------
   Session groups — each device (OS × Browser family × Device type)
   gets its own card header so admins can scan "Windows / Chrome"
   vs "iPhone / Safari" at a glance instead of hunting through a flat
   list of 20 near-identical rows.
   ------------------------------------------------------------------- */
.k114-sess-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.k114-sess-group {
    /* Borderless — sits flat inside the Active Sessions card. The header
       background + dashed row separators alone provide enough visual
       grouping without doubling up on a box outline. */
    border: none;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
}
.k114-sess-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #faf6eb;
    border-bottom: 1px solid #eee4c9;
    border-radius: 8px 8px 0 0;
}
.k114-sess-group-icon {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid #e8e0d0;
    border-radius: 6px;
    color: #bd9e4d;
    font-size: 14px;
}
.k114-sess-group-title {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #3d3830;
}
.k114-sess-group-os {
    font-weight: 400;
    color: #8a7a56;
}
.k114-sess-group-count {
    font-size: 10px;
    color: #9c7a3c;
    background: #ffffff;
    border: 1px solid #e8e0d0;
    padding: 1px 8px;
    border-radius: 20px;
}

/* Items living inside a group — subtle left rule + small inset so the
   grouping reads as a parent/child relationship. */
.k114-sess-group .k114-session-item {
    margin: 0;
    border: none;
    border-top: 1px dashed #f3ead8;
    border-radius: 0;
    background: transparent;
    padding: 10px 12px;
}
.k114-sess-group .k114-session-item:first-of-type { border-top: none; }

/* Overflow rows — present in the DOM, hidden until Load more clicked.
   Using display:none (not max-height) because session items have
   variable heights and an animated reveal adds no value here. */
.k114-sess-hidden { display: none !important; }

/* "Show N more" row — matches the look of .k114-btn-close but full-
   width so it reads as a progressive-disclosure affordance rather than
   a primary action. */
.k114-sess-loadmore {
    padding: 6px 0 2px;
    display: flex;
    justify-content: center;
}
.k114-btn-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #6b5a2e;
    background: #fefdfb;
    border: 1px dashed #d0c298;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
}
.k114-btn-loadmore i { font-size: 14px; }
.k114-btn-loadmore:hover {
    background: #faf6eb;
    border-style: solid;
    color: #3d3830;
}
.k114-session-logout-all {
    padding: 8px 0 2px;
    border-top: 1px solid #f0ebe0;
    margin-top: 4px;
}
.k114-btn-logout-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 0;
    font-size: 11px;
    font-weight: 600;
    color: #c0392b;
    background: rgba(192, 57, 43, 0.06);
    border: 1px solid rgba(192, 57, 43, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.k114-btn-logout-all:hover {
    background: rgba(192, 57, 43, 0.12);
    border-color: rgba(192, 57, 43, 0.3);
}
.k114-btn-logout-all i.bx { font-size: 14px; }

/* Email notification styling */
.k114-email-title {
    color: #2c3e50;
    margin-top: 0;
}

/* ========================================================
   kprocess_108.php - Settings Accessories Panel Styles
   ======================================================== */

/* Calendar header */
/* Panel header */
.k108-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
    background: linear-gradient(135deg, #f5f0e6 0%, #ede7d6 100%);
    border-bottom: 1px solid #e2d7bf;
}
.k108-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #5a5445;
    display: flex;
    align-items: center;
    gap: 6px;
}
.k108-panel-title i.bx { font-size: 18px; color: #bd9e4d; }

.k108-cal-title {
    font-weight: 700;
    font-size: 11px;
    color: #8a7a56;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.k108-cal-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e2d7bf;
    margin-bottom: 10px;
}

.k108-today-btn-wrap { margin-bottom: 8px; }

.k108-today-btn {
    cursor: pointer;
    background: #bd9e4d;
    color: #fff;
    padding: 5px 16px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    transition: background 0.2s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    border: none;
}
.k108-today-btn:hover { background: #a88b3d; }

.k108-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.k108-cal-arrow {
    cursor: pointer;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #f5f0e6;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
    color: #8a7a56;
    padding: 0;
}
.k108-cal-arrow:hover {
    background: #ede7d6;
    color: #bd9e4d;
}

.k108-cal-month-year {
    font-weight: 700;
    font-size: 12px;
    color: #5a5445;
}

.k108-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
}

.k108-cal-day-header {
    font-size: 9px;
    font-weight: 700;
    color: #8a7a56;
    padding: 2px 0;
}

.k108-cal-day {
    font-size: 11px;
    padding: 4px 0;
    text-align: center;
    border-radius: 4px;
    transition: background 0.15s;
    cursor: default;
}

.k108-cal-day-today {
    background: #bd9e4d;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
}

.k108-cal-day-weekend { color: #c0392b; }
.k108-cal-day-weekday { color: #3d3830; }

/* ===== k100 Tools ===== */
.k100-tool-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2d7bf;
    overflow: hidden;
}
.k100-tool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: #5a5445;
    background: #faf7f0;
    transition: background 0.2s;
}
.k100-tool-header:hover { background: #f0ebe0; }
.k100-tool-header span { display:flex; align-items:center; gap:6px; }
.k100-tool-header i.bx { font-size:15px; color:#bd9e4d; }
.k100-tool-arrow {
    font-size: 16px;
    color: #8a7a56;
    transition: transform 0.3s;
}
.k100-tool-arrow.open { transform: rotate(180deg); }
.k100-tool-body {
    padding: 10px 12px;
    border-top: 1px solid #f0ebe0;
}
.k100-tool-section { margin-bottom: 8px; }
.k100-tool-section:last-child { margin-bottom: 0; }
.k100-tool-label {
    font-size: 10px;
    font-weight: 600;
    color: #8a7a56;
    margin-bottom: 5px;
}
.k100-tool-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.k100-tool-sep {
    font-size: 10px;
    color: #8a7a56;
    flex-shrink: 0;
}
.k100-tool-input {
    flex: 1;
    height: 28px;
    border: 1px solid #e2d7bf;
    border-radius: 5px;
    padding: 0 6px;
    font-size: 11px;
    color: #3d3830;
    background: #fff;
    min-width: 0;
}
.k100-tool-input:focus { outline:none; border-color:#c0a76d; box-shadow:0 0 0 2px rgba(192,167,109,0.15); }
.k100-tool-input-sm {
    width: 55px;
    height: 28px;
    border: 1px solid #e2d7bf;
    border-radius: 5px;
    padding: 0 6px;
    font-size: 11px;
    color: #3d3830;
    text-align: center;
}
.k100-tool-input-sm:focus { outline:none; border-color:#c0a76d; }
.k100-tool-input-full {
    width: 100%;
    height: 28px;
    border: 1px solid #e2d7bf;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 11px;
    color: #3d3830;
    box-sizing: border-box;
    margin-bottom: 6px;
}
.k100-tool-input-full:focus { outline:none; border-color:#c0a76d; box-shadow:0 0 0 2px rgba(192,167,109,0.15); }
.k100-tool-select, .k100-tool-select-lg {
    height: 28px;
    border: 1px solid #e2d7bf;
    border-radius: 5px;
    padding: 0 4px;
    font-size: 11px;
    color: #3d3830;
    background: #fff;
    cursor: pointer;
}
.k100-tool-select { width: 42px; }
.k100-tool-select-lg { width: 70px; }
.k100-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #bd9e4d;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 4px;
}
.k100-tool-btn:hover { background: #a88b3d; }
.k100-tool-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #bd9e4d;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}
.k100-tool-btn-sm:hover { background: #a88b3d; }
.k100-tool-btn-outline {
    background: transparent;
    color: #c0392b;
    border: 1px solid rgba(192,57,43,0.2);
}
.k100-tool-btn-outline:hover { background: rgba(192,57,43,0.06); }
.k100-tool-result {
    font-size: 11px;
    font-weight: 600;
    color: #3d3830;
    background: #faf7f0;
    border-radius: 5px;
    padding: 6px 8px;
    text-align: center;
    min-height: 14px;
}
.k100-tool-result:empty { display: none; }
.k100-tool-divider {
    height: 1px;
    background: #f0ebe0;
    margin: 8px 0;
}
.k100-rent-grid, .k100-area-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 4px;
}
.k100-rent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    background: #faf7f0;
    border-radius: 5px;
    font-size: 10px;
}
.k100-rent-lbl { color: #8a7a56; font-weight: 600; }
.k100-rent-val { color: #3d3830; font-weight: 700; font-size: 11px; }
.k100-notepad {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 8px;
    font-size: 11px;
    color: #3d3830;
    resize: vertical;
    font-family: inherit;
}
.k100-notepad:focus { outline:none; border-color:#c0a76d; box-shadow:0 0 0 2px rgba(192,167,109,0.15); }

/* ===== k115 AI Chat — Advanced ===== */

/* Header */
.k115-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f5f0e6 0%, #ede7d6 100%);
    border-bottom: 1px solid #e2d7bf;
    flex-shrink: 0;
}
.k115-header-left { display:flex; align-items:center; gap:8px; }
.k115-header-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #bd9e4d, #d4b96a);
    color: #fff; border-radius: 10px; font-size: 18px;
}
.k115-header-info { line-height: 1.2; }
.k115-header-title { font-size: 13px; font-weight: 700; color: #3d3830; }
.k115-header-status { font-size: 9px; color: #8a7a56; display:flex; align-items:center; gap:4px; }
.k115-online-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #27ae60; display: inline-block;
    animation: k115pulse 2s infinite;
}
@keyframes k115pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39,174,96,0.4); }
    50% { box-shadow: 0 0 0 3px rgba(39,174,96,0); }
}

/* Stats bar */
.k115-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: #faf7f0;
    border-bottom: 1px solid #f0ebe0;
    font-size: 9px;
    color: #8a7a56;
    flex-shrink: 0;
}
.k115-stats-left { display:flex; gap:10px; }
.k115-stats-bar span { display:flex; align-items:center; gap:3px; }
.k115-stats-bar i.bx { font-size: 11px; }

/* Token section */
.k115-token-section {
    display: flex;
    gap: 6px;
    padding: 3px 10px 4px;
    background: #faf7f0;
    border-bottom: 1px solid #f0ebe0;
    flex-shrink: 0;
}
.k115-token-col { flex: 1; min-width: 0; }
.k115-token-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.k115-token-label {
    font-size: 8px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.k115-token-nums {
    font-size: 8px;
    font-weight: 700;
    color: #5a5445;
}
.k115-token-bar {
    height: 2px;
    background: #f0ebe0;
    border-radius: 2px;
    margin-top: 2px;
    flex-shrink: 0;
}
.k115-token-fill {
    height: 100%;
    background: #bd9e4d;
    transition: width 0.3s;
    border-radius: 2px;
}
.k115-token-fill.k115-token-warn { background: #e67e22; }

/* Chat body */
.k115-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.k115-chat-body::-webkit-scrollbar { width: 5px; }
.k115-chat-body::-webkit-scrollbar-track { background: #f5f0e6; }
.k115-chat-body::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k115-chat-body::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* Messages */
.k115-msg {
    display: flex;
    gap: 8px;
    max-width: 95%;
    animation: k115fadeIn 0.3s;
}
@keyframes k115fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.k115-msg-bot { align-self: flex-start; }
.k115-msg-user { align-self: flex-end; flex-direction: row-reverse; }

.k115-msg-avatar {
    width: 26px; min-width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0; margin-top: 2px;
}
.k115-msg-bot .k115-msg-avatar { background: rgba(189,158,77,0.12); color: #bd9e4d; }
.k115-msg-user .k115-msg-avatar { background: rgba(39,174,96,0.1); color: #27ae60; }

.k115-msg-content { min-width: 0; }

.k115-msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}
.k115-msg-bot .k115-msg-bubble {
    background: #fff;
    color: #3d3830;
    border: 1px solid #e2d7bf;
    border-top-left-radius: 4px;
}
.k115-msg-user .k115-msg-bubble {
    background: #bd9e4d;
    color: #fff;
    border-top-right-radius: 4px;
}

/* Message actions */
.k115-msg-actions {
    display: none;
    gap: 2px;
    margin-top: 3px;
    padding-left: 2px;
}
.k115-msg:hover .k115-msg-actions { display: flex; }
.k115-msg-action {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #8a7a56;
    transition: all 0.15s;
}
.k115-msg-action:hover { background: #f0ebe0; color: #bd9e4d; }

/* Timestamp */
.k115-msg-time {
    font-size: 9px;
    color: #aaa;
    margin-top: 2px;
    padding-left: 2px;
}
.k115-msg-user .k115-msg-time { text-align: right; padding-right: 2px; }

/* Suggestions */
.k115-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.k115-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: #f5f0e6;
    color: #5a5445;
    border: 1px solid #e2d7bf;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.k115-chip i.bx { font-size: 11px; }
.k115-chip:hover {
    background: #ede7d6;
    border-color: #c0a76d;
    color: #bd9e4d;
}

/* Input area */
.k115-chat-input-wrap {
    padding: 8px 10px 6px;
    border-top: 1px solid #e2d7bf;
    background: #f5f0e6;
    flex-shrink: 0;
}
.k115-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.k115-chat-input {
    flex: 1;
    border: 1px solid #e2d7bf;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    color: #3d3830;
    resize: none;
    max-height: 100px;
    min-height: 36px;
    background: #fff;
    line-height: 1.4;
    overflow-y: auto;
}
.k115-chat-input:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.k115-send-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #bd9e4d, #d4b96a);
    color: #fff; border-radius: 10px;
    cursor: pointer; font-size: 16px;
    transition: all 0.2s; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(189,158,77,0.3);
}
.k115-send-btn:hover { background: linear-gradient(135deg, #a88b3d, #c0a76d); transform: scale(1.05); }

.k115-input-footer {
    display: flex;
    justify-content: space-between;
    padding: 3px 4px 0;
}
.k115-char-count {
    font-size: 9px;
    color: #aaa;
}
.k115-char-count.k115-char-warn { color: #e67e22; }
.k115-char-count.k115-char-limit { color: #c0392b; }
.k115-input-hint {
    font-size: 9px;
    color: #bbb;
}

/* Typing indicator */
.k115-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
}
.k115-typing-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #c0a76d;
    animation: k115bounce 1.4s infinite both;
}
.k115-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.k115-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes k115bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Sessions panel */
.k115-sessions-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fafaf6;
    z-index: 10;
    display: flex;
    flex-direction: column;
    animation: k115slideIn 0.2s;
}
@keyframes k115slideIn { from { transform:translateX(-100%); } to { transform:translateX(0); } }
.k115-sessions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f5f0e6, #ede7d6);
    border-bottom: 1px solid #e2d7bf;
    font-size: 13px;
    font-weight: 700;
    color: #5a5445;
}
.k115-sessions-header span { display:flex; align-items:center; gap:6px; }
.k115-sessions-header i.bx { font-size: 16px; color: #bd9e4d; }
.k115-sessions-close {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; color: #8a7a56; font-size: 18px;
    transition: all 0.15s;
}
.k115-sessions-close:hover { background: rgba(192,167,109,0.15); }
.k115-sessions-new {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #bd9e4d;
    cursor: pointer;
    border-bottom: 1px solid #f0ebe0;
    transition: background 0.15s;
}
.k115-sessions-new:hover { background: #f5f0e6; }
.k115-sessions-new i.bx { font-size: 16px; }
.k115-sessions-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.k115-sessions-list::-webkit-scrollbar { width: 4px; }
.k115-sessions-list::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k115-session-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f0e6;
    transition: background 0.15s;
    gap: 8px;
}
.k115-session-item:hover { background: #f5f0e6; }
.k115-session-item.active { background: #ede7d6; border-left: 3px solid #bd9e4d; }
.k115-session-icon-sm {
    width: 28px; min-width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: #f0ebe0; border-radius: 6px; color: #8a7a56; font-size: 13px;
}
.k115-session-item.active .k115-session-icon-sm { background: rgba(189,158,77,0.15); color: #bd9e4d; }
.k115-session-info { flex: 1; min-width: 0; }
.k115-session-title {
    font-size: 11px; font-weight: 600; color: #3d3830;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k115-session-date { font-size: 9px; color: #aaa; margin-top: 1px; }
.k115-session-del {
    width: 22px; height: 22px;
    display: none; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer; color: #c0392b; font-size: 13px;
    transition: background 0.15s;
}
.k115-session-item:hover .k115-session-del { display: flex; }
.k115-session-del:hover { background: rgba(192,57,43,0.1); }
.k115-sessions-loading { padding: 20px; text-align: center; }
.k115-sessions-empty { padding: 30px 12px; text-align: center; font-size: 11px; color: #aaa; }
.k115-session-label {
    margin-left: auto;
    font-weight: 600;
    color: #bd9e4d;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Copied toast */
.k115-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #3d3830;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    z-index: 9999;
    animation: k115toastIn 0.3s, k115toastOut 0.3s 1.5s forwards;
}
@keyframes k115toastIn { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes k115toastOut { to { opacity:0; transform:translateX(-50%) translateY(-10px); } }

/* ===== k106 Calculator ===== */
.k106-display {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #3d3830;
    text-align: right;
    background: #faf7f0;
    margin-bottom: 6px;
}
.k106-keypad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.k106-key {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #3d3830;
    background: #fff;
    border: 1px solid #e2d7bf;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.k106-key:hover { background: #f5f0e6; }
.k106-key:active { background: #ede7d6; transform: scale(0.95); }
.k106-key-fn {
    color: #8a7a56;
    background: #faf7f0;
}
.k106-key-fn:hover { background: #f0ebe0; }
.k106-key-op {
    color: #fff;
    background: #c0a76d;
    border-color: #c0a76d;
}
.k106-key-op:hover { background: #a88b3d; }
.k106-key-eq {
    color: #fff;
    background: #bd9e4d;
    border-color: #bd9e4d;
}
.k106-key-eq:hover { background: #a88b3d; }
.k106-key-wide { grid-column: span 2; }
/* ===== k116 Menu Tree ===== */
.k116-header-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.k116-title {
    font-size: 15px; font-weight: 700; color: #3d3830;
    display: flex; align-items: center; gap: 6px;
}
.k116-title i.bx { font-size: 20px; color: #bd9e4d; }
.k116-count { font-size: 11px; font-weight: 400; color: #8a7a56; }
.k116-toolbar { display: flex; gap: 4px; }
.k116-toolbar-btn {
    padding: 4px 10px; font-size: 10px; font-weight: 600;
    color: #5a5445; background: #f5f0e6; border: 1px solid #e2d7bf;
    border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 4px;
    transition: all 0.15s;
}
.k116-toolbar-btn:hover { background: #ede7d6; border-color: #c0a76d; }
.k116-tree { }
.k116-parent {
    background: #fff; border: 1px solid #e2d7bf; border-radius: 8px;
    margin-bottom: 6px; overflow: hidden;
}
.k116-parent-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; cursor: pointer; transition: background 0.15s;
}
.k116-parent-row:hover { background: #faf7f0; }
.k116-expand-icon {
    width: 20px; min-width: 20px; font-size: 16px; color: #8a7a56;
    transition: transform 0.2s; display: flex; align-items: center;
}
.k116-expand-icon.open { transform: rotate(90deg); }
.k116-parent-icon {
    width: 28px; min-width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(189,158,77,0.1); border-radius: 6px;
    font-size: 15px; color: #bd9e4d;
}
.k116-parent-info { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.k116-parent-name {
    font-size: 12px; font-weight: 700; color: #3d3830;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k116-child-count { font-size: 9px; color: #aaa; }
.k116-type-tag {
    font-size: 8px; font-weight: 700; color: #fff;
    padding: 1px 6px; border-radius: 3px; white-space: nowrap;
    letter-spacing: 0.3px;
}
.k116-children {
    border-top: 1px solid #f0ebe0; background: #fdfcf9;
    padding: 4px 0;
}
.k116-child {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 38px;
    transition: background 0.15s;
}
.k116-child:hover { background: #f5f0e6; }
.k116-child-icon { font-size: 14px; color: #bd9e4d; min-width: 18px; }
.k116-child-info { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; }
.k116-child-name {
    font-size: 11px; font-weight: 600; color: #3d3830;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k116-meta {
    font-size: 9px; color: #8a7a56; background: #f0ebe0;
    padding: 1px 5px; border-radius: 3px;
}
.k116-actions {
    display: flex; align-items: center; gap: 2px;
    opacity: 0; transition: opacity 0.15s;
}
.k116-parent-row:hover .k116-actions,
.k116-child:hover .k116-actions { opacity: 1; }
.k116-order { font-size: 9px; color: #aaa; margin-right: 4px; }
.k116-act {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer; font-size: 13px; color: #8a7a56;
    transition: all 0.15s;
}
.k116-act:hover { background: rgba(189,158,77,0.15); color: #bd9e4d; }
.k116-act-del:hover { background: rgba(192,57,43,0.1); color: #c0392b; }
.k116-empty { padding: 8px 38px; font-size: 10px; color: #aaa; font-style: italic; }
.k116-section-title {
    font-size: 12px; font-weight: 700; color: #5a5445;
    padding: 12px 0 6px; margin-top: 6px; border-top: 1px solid #e2d7bf;
    display: flex; align-items: center; gap: 5px;
}
.k116-section-title i.bx { font-size: 15px; color: #bd9e4d; }

/* k116 Add Menu Form */
.k116-form-card {
    background: #fff; border: 1px solid #e2d7bf; border-radius: 10px;
    padding: 16px; max-width: 600px;
}
.k116-form-section {
    font-size: 11px; font-weight: 700; color: #8a7a56;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding-bottom: 5px; margin: 12px 0 8px; border-bottom: 1px solid #f0ebe0;
}
.k116-form-section:first-child { margin-top: 0; }
.k116-form-row { display: flex; gap: 10px; margin-bottom: 8px; }
.k116-form-group { flex: 1; min-width: 0; }
.k116-form-full { flex: 1 1 100%; }
.k116-form-half { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); }
.k116-form-third { flex: 1 1 calc(33.33% - 7px); }
.k116-form-label {
    display: block; font-size: 10px; font-weight: 600; color: #5a5445;
    margin-bottom: 3px;
}
.k116-form-input {
    width: 100%; height: 34px; box-sizing: border-box;
    border: 1px solid #e2d7bf; border-radius: 6px;
    padding: 0 10px; font-size: 12px; color: #3d3830; background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.k116-form-input:focus {
    outline: none; border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
select.k116-form-input { cursor: pointer; }
.k116-form-actions { margin-top: 14px; display: flex; gap: 8px; }
.k116-form-hint {
    font-size: 9px; color: #aaa; margin-top: 3px; padding-left: 2px;
}

/* Custom checkbox — gold theme toggle used by `checkbox` field type */
.k116-form-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
    padding: 6px 10px; border: 1px solid #e8e0d0; border-radius: 5px;
    background: #fefdfb; transition: all 0.15s;
    font-size: 11px; color: #3d3830;
}
.k116-form-checkbox:hover { border-color: #d0c298; background: #faf7f0; }
.k116-form-checkbox input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; border: 1.5px solid #c9a84c;
    border-radius: 3px; background: #fff; cursor: pointer;
    position: relative; flex-shrink: 0; margin: 0;
    transition: all 0.15s;
}
.k116-form-checkbox input[type="checkbox"]:hover { border-color: #9c7a3c; }
.k116-form-checkbox input[type="checkbox"]:checked {
    background: #9c7a3c; border-color: #9c7a3c;
}
.k116-form-checkbox input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -54%);
    color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.k116-form-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(201,168,76,0.4); outline-offset: 1px;
}
.k116-form-checkbox span { line-height: 1.3; }

/* Type selector grid */
.k116-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.k116-type-option {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px; border: 1px solid #e2d7bf; border-radius: 8px;
    cursor: pointer; transition: all 0.15s; text-align: center;
    background: #fff;
}
.k116-type-option:hover { background: #faf7f0; border-color: #c0a76d; }
.k116-type-option.selected {
    background: rgba(189,158,77,0.08); border-color: #bd9e4d;
    box-shadow: 0 0 0 2px rgba(189,158,77,0.15);
}
.k116-type-option i.bx { font-size: 20px; color: #bd9e4d; }
.k116-type-option span { font-size: 10px; font-weight: 700; color: #3d3830; }
.k116-type-option small { font-size: 8px; color: #aaa; line-height: 1.2; }

/* Advanced toggle */
.k116-adv-toggle {
    font-size: 10px; font-weight: 600; color: #8a7a56;
    cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 4px;
    transition: color 0.15s;
}
.k116-adv-toggle:hover { color: #bd9e4d; }

/* Edit form */
.k116-form-readonly {
    padding: 4px 10px; font-size: 12px; color: #5a5445;
    background: #f5f0e6; border-radius: 6px; border: 1px solid #e2d7bf;
    height: 34px; line-height: 24px; box-sizing: border-box;
}
/* k117 Access Management */
.k117-access-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #f5f0e6;
    transition: background 0.15s;
}
.k117-access-row:last-child { border-bottom: none; }
.k117-access-row:hover { background: #faf7f0; }
.k117-access-inactive { opacity: 0.5; }
.k117-access-icon {
    width: 28px; min-width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: #f5f0e6; border-radius: 6px;
    font-size: 14px; color: #8a7a56;
}
.k117-access-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.k117-access-name {
    font-size: 11px; font-weight: 600; color: #3d3830;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k117-role-badge {
    font-size: 8px; font-weight: 700; color: #bd9e4d;
    background: rgba(189,158,77,0.1); padding: 1px 5px;
    border-radius: 3px; letter-spacing: 0.3px;
}
.k117-user-id {
    font-size: 9px; color: #aaa;
}
.k117-access-uid {
    font-size: 9px; color: #bbb; min-width: 40px; text-align: right;
}
.k117-access-del {
    width: 24px; min-width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer;
    font-size: 14px; color: #ccc;
    opacity: 0; transition: all 0.15s;
}
.k117-access-row:hover .k117-access-del { opacity: 1; }
.k117-access-del:hover { background: rgba(192,57,43,0.1); color: #c0392b; }

/* Flow Map (k146) — Steps tab horizontal-scroll wrapper. The detail panel
   clips overflow-x, so a 9-column steps table wider than the popup would lose
   its right-hand Actions column. This wrapper owns the horizontal scroll
   instead, keeping every column (incl. Actions) reachable; the table holds a
   readable min-width so columns never crush. */
.k146-steptbl-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; }
.k146-steptbl-wrap > table { min-width: 760px; }

/* Flow Map (k146) — Steps tab status toggle switch (active/inactive) */
.k146-toggle { position: relative; display: inline-block; width: 34px; height: 18px; vertical-align: middle; cursor: pointer; }
.k146-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.k146-toggle-slider { position: absolute; inset: 0; background: #cfc9b8; border-radius: 18px; transition: background .2s; }
.k146-toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.k146-toggle input:checked + .k146-toggle-slider { background: #2e7d32; }
.k146-toggle input:checked + .k146-toggle-slider::before { transform: translateX(16px); }
.k146-toggle input:focus-visible + .k146-toggle-slider { box-shadow: 0 0 0 2px rgba(46,125,50,.35); }
.k146-status-lbl { margin-left: 7px; font-weight: 600; text-transform: capitalize; font-size: 11px; }

/* Flow Map (k146) — Steps tab row-action icons */
.k146-step-act {
    cursor: pointer;
    font-size: 15px;
    color: #a99b7a;
    padding: 3px;
    border-radius: 4px;
    vertical-align: middle;
    transition: all 0.15s;
}
.k146-step-act:hover { background: rgba(122,106,217,0.12); color: #7a6ad9; }
.k146-step-del:hover { background: rgba(192,57,43,0.1); color: #c0392b; }

/* Flow Map (k146) — Steps tab typed-step badge (action / signature / decision) */
.k146-step-type {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    background: #ece7d6;
    color: #7a6a4a;
}
.k146-step-type-signature { background: rgba(122,106,217,0.14); color: #5a4fbf; }
.k146-step-type-decision  { background: rgba(217,140,60,0.16); color: #b26a1f; }

/* Flow Map (k146) — Steps list description subtitle */
.k146-step-desc {
    font-size: 11px;
    color: #9a917f;
    margin-top: 2px;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Flow Map (k146) — step form description textarea */
.k146-form-textarea {
    min-height: 52px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}
/* Flow Map (k146) — live character counter under a textarea */
.k146-charcount {
    display: block;
    text-align: right;
    font-size: 10.5px;
    color: #a59c86;
    margin-top: 2px;
}

/* ============================================================
   Flow Map (k146) — Flow Diagram tab (vertical top→bottom flow)
   Self-contained; no external libs. Gold admin theme.
   ============================================================ */
.k146-flow-wrap { width: 100%; float: left; padding: 12px; box-sizing: border-box; }

/* Header / summary line */
/* Header row: title + condition chips on the LEFT, view toggle on the RIGHT. */
.k146-flow-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
    padding: 0 2px;
    box-sizing: border-box;
}
.k146-flow-head-left {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.k146-flow-title {
    font-size: 15px;
    font-weight: 700;
    color: #4a4436;
    display: flex;
    align-items: center;
    gap: 6px;
}
.k146-flow-title .bx { color: #c9a227; }
.k146-flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin-top: 6px;
}
.k146-flow-chip {
    font-size: 11px;
    color: #7a6a4a;
    background: #f2edde;
    border: 1px solid #e4dcc6;
    border-radius: 10px;
    padding: 2px 9px;
}
.k146-flow-chip b { color: #5a4f38; font-weight: 600; }

/* Diagram column wrapper — height:auto so it sizes to its content. No inner
   overflow/max-height: the outer tab body owns the scroll, so there's no
   secondary scrollbar and no stretched empty area under a short flow. */
.k146-flow-scroll {
    height: auto;
    padding: 8px 4px 16px 4px;
    margin-top: 6px;
}
/* The centered vertical column */
.k146-flow-col {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Start / End caps */
.k146-flow-cap {
    align-self: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.k146-flow-cap .bx { font-size: 15px; }
.k146-flow-cap-start { background: #eef7ee; color: #2e7d32; border: 1px solid #cfe6cf; }
.k146-flow-cap-end   { background: #f4eef7; color: #6a3ea0; border: 1px solid #e0cfe6; }

/* Connector — vertical line + down arrow between nodes */
.k146-flow-conn {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: #cbbf9d;
}
.k146-flow-conn-line {
    width: 2px;
    height: 16px;
    background: #d9cfac;
}
.k146-flow-conn-arrow {
    font-size: 11px;
    margin-top: -2px;
    color: #c9a227;
}

/* Node card */
.k146-flow-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e6ddc6;
    border-left: 4px solid #c9a227;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(90,79,56,0.06);
}
/* Type accents (left stripe) */
.k146-flow-node-action    { border-left-color: #c9a227; }
.k146-flow-node-signature { border-left-color: #5a4fbf; }
.k146-flow-node-decision  { border-left-color: #d98c3c; background: #fffaf1; }
/* Optional steps — dashed border */
.k146-flow-node-optional {
    border-style: dashed;
    background: #fcfbf6;
}
/* Inactive step — kept visible in the diagram but clearly de-emphasised
   (greyed + faded + muted accent) so it reads as "defined but won't run". */
.k146-flow-node-inactive {
    opacity: 0.6;
    filter: grayscale(0.55);
    border-left-color: #c4c4c4 !important;
    background: #f6f6f4;
}
.k146-flow-node-inactive .k146-flow-name { color: #8a8a8a; text-decoration: line-through; }

/* Numbered order circle */
.k146-flow-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c9a227;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.k146-flow-node-signature .k146-flow-num { background: #5a4fbf; }
.k146-flow-node-decision  .k146-flow-num { background: #d98c3c; }

/* Node body */
.k146-flow-body { flex: 1; min-width: 0; }
.k146-flow-nrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.k146-flow-name {
    font-size: 13px;
    font-weight: 700;
    color: #40392c;
}
.k146-flow-badge { flex-shrink: 0; }
.k146-flow-badge .bx { font-size: 12px; vertical-align: -1px; margin-right: 2px; }
.k146-flow-desc {
    font-size: 11.5px;
    color: #8a8069;
    margin-top: 3px;
    line-height: 1.35;
}
.k146-flow-actor {
    font-size: 12px;
    color: #6a6152;
    margin-top: 4px;
}
.k146-flow-actor .bx { color: #b3a882; margin-right: 2px; }
.k146-flow-op {
    font-size: 11px;
    color: #a59c86;
    margin-top: 2px;
}
/* Tag row (Optional chip, conditional tag) */
.k146-flow-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.k146-flow-chip-opt {
    font-size: 10.5px;
    font-weight: 600;
    color: #b26a1f;
    background: rgba(217,140,60,0.14);
    border-radius: 8px;
    padding: 1px 8px;
}
/* Inactive marker chip — grey, with a small pause glyph. */
.k146-flow-chip-inactive {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: #6f6f6f;
    background: rgba(120,120,120,0.14);
    border-radius: 8px;
    padding: 1px 8px;
}
.k146-flow-chip-inactive i { font-size: 12px; }
.k146-flow-cond {
    font-size: 10.5px;
    font-weight: 600;
    color: #5a4fbf;
    background: rgba(122,106,217,0.12);
    border-radius: 8px;
    padding: 1px 8px;
}

/* Empty state */
.k146-flow-empty {
    text-align: center;
    color: #aaa;
    padding: 36px 20px;
    font-size: 13px;
}
.k146-flow-empty .bx { font-size: 30px; color: #d9cfac; display: block; margin-bottom: 8px; }

/* ── Two-view toggle (Diagram | With Descriptions) — gold segmented control,
   pinned to the top-right of the diagram header. ── */
.k146-flow-toggle {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    border: 1px solid #d9cfac;
    border-radius: 8px;
    overflow: hidden;
    background: #f7f2e3;
    white-space: nowrap;
}
.k146-flow-toggle-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #7a6a4a;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
}
.k146-flow-toggle-btn + .k146-flow-toggle-btn { border-left: 1px solid #e4dcc6; }
.k146-flow-toggle-btn .bx { font-size: 14px; }
.k146-flow-toggle-btn:hover { background: #efe7d0; }
.k146-flow-toggle-btn.is-active { background: #c9a227; color: #fff; }

/* Row wrapper = node (left) + description side-panel (right). Block by
   default so View A collapses to just the centered node. */
.k146-flow-row { width: 100%; }

/* Description side-panel — muted body text; only shown in View B. */
.k146-flow-descside {
    font-size: 12px;
    color: #6a6152;
    line-height: 1.45;
}
.k146-flow-nodesc { color: #b3a882; font-style: italic; }

/* ── View A — Diagram: centered column, descriptions hidden. ── */
.k146-flow-mode-center .k146-flow-descside { display: none; }

/* ── View B — With Descriptions: column shifts left / widens; each row is
   node (fixed left column) + description panel (fills the right). ── */
.k146-flow-mode-detail .k146-flow-col {
    max-width: 100%;
    margin: 0;
    align-items: stretch;
}
.k146-flow-mode-detail .k146-flow-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.k146-flow-mode-detail .k146-flow-node {
    flex: 0 0 380px;
    width: 380px;
    box-sizing: border-box;
}
.k146-flow-mode-detail .k146-flow-descside {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    background: #faf7ee;
    border-left: 3px solid #e4dcc6;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    box-sizing: border-box;
}
/* Connectors + Start/End caps sit under the LEFT node column (not centered
   across the full width): the 380px box matches the node column, and the
   connector's flex-column centers its line + arrow at that box's midpoint so
   the vertical run lines up down the node side. Caps get a matching left
   offset so they read as part of the node column. */
.k146-flow-mode-detail .k146-flow-conn {
    align-self: flex-start;
    width: 380px;
}
.k146-flow-mode-detail .k146-flow-cap {
    align-self: flex-start;
    margin-left: 143px;
}

/* Narrow widths — View B stacks the description under the node; never forces
   horizontal page scroll. */
@media (max-width: 720px) {
    .k146-flow-mode-detail .k146-flow-row { flex-direction: column; }
    .k146-flow-mode-detail .k146-flow-node { flex-basis: auto; width: 100%; }
    .k146-flow-mode-detail .k146-flow-descside {
        border-left: 0;
        border-top: 3px solid #e4dcc6;
        border-radius: 0 0 8px 8px;
    }
    .k146-flow-mode-detail .k146-flow-conn { width: 100%; }
    .k146-flow-mode-detail .k146-flow-cap { margin-left: 0; align-self: center; }
}

/* ── k119 History / Notes ── */
/* ── k120 Document Viewer — dedicated right-popup (#k_docpop) ────────
   Sits on its own DOM element separate from #k_rpop so it can layer on
   top of an open add/edit form without clobbering it. Higher z-index
   than r-poplayout's default (100) so the viewer always wins the stack
   when both popups are open simultaneously.                          */
.k_docpop-layer { z-index: 200 !important; }
/* Action-form popup (Note / Call / Visit / Email …) — stage-scoped:
   k_handle_action_open injects a per-stage shell into ttab<id>_d so
   the popup lives + dies with its originating tab. Z-index sits
   ABOVE k_rpop's default (100) so it always wins the stack when
   both are mounted, but BELOW k_docpop (200) so the document viewer
   can still preview attachments on top of an open action form.

   Why position: fixed (override .r-poplayout's absolute):
     - Anchors to viewport, not the narrower stage-tab ancestor.
       Without this, the absolute-positioned panel uses the stage
       tab's box as its containing block — which sits INSIDE the
       sidebar+header chrome, leaving a visible gap on the right
       and shrinking the panel off the bottom.
     - Display:none on the parent stage tab still cascades to fixed-
       positioned descendants, so the per-tab show/hide behavior we
       want is preserved. */
.k_actionpop-layer {
    z-index: 150 !important;
    position: fixed !important;
}
/* Expand-to-stage button — sits to the LEFT of the close × in the viewer
   header. Uses the same pill shape as .k114-panel-close but a neutral
   gold tint to distinguish it from the close button. */
.k120-expand-btn {
    color: #bd9e4d;
    transition: color 0.15s, background 0.15s;
}
.k120-expand-btn:hover { color: #fff; background: #bd9e4d; }

/* Layout inside the popup body: header (reused k_rpop styling) + split
   body (preview pane left, metadata pane right). Each preview type
   gets its own container rule below so aspect ratio and fit stay sane. */
.k120-wrap { display: flex; flex-direction: column; background: #fafaf6; }
.k120-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
    min-height: 0;
}

/* Preview pane — flexible, with dashed neutral surround when empty */
.k120-preview {
    position: relative; /* anchor for the absolute skeleton overlay */
    background: #fff;
    border: 1px solid #e8e0d0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    min-height: 300px;
}
/* Skeleton overlay — covers the preview pane until the media fires its
   onload / onloadedmetadata and JS removes this element. Kept purely
   CSS-driven so there's no flicker or layout shift. */
.k120-skeleton {
    position: absolute;
    inset: 0;
    background: #f7f3ea;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
}
/* Diagonal shimmer sweeping left-to-right — classic content-loading cue. */
.k120-skeleton-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(
        110deg,
        rgba(247,243,234,0) 20%,
        rgba(222,210,178,0.55) 50%,
        rgba(247,243,234,0) 80%
    );
    background-size: 200% 100%;
    animation: k120-shimmer 1.3s linear infinite;
}
@keyframes k120-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.k120-skeleton-label {
    position: relative; z-index: 2;
    font-size: 11px; color: #9c7a3c;
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.75);
    padding: 6px 12px; border-radius: 20px;
    border: 1px solid #ebe0bf;
}
.k120-skeleton-label i { font-size: 14px; }

/* Media elements start hidden so the skeleton shows through; k120OnLoad
   removes the class and drops the skeleton. Opacity transition gives the
   image/pdf a smooth fade-in once the bytes arrive. */
.k120-media-loading {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.k120-media-loaded {
    opacity: 1;
}

/* Safety net for <object type="application/pdf"> — its onload is
   inconsistently fired across browsers. A delayed CSS animation flips
   opacity back to 1 after ~3s so the user is never stuck staring at a
   skeleton. JS k120OnLoad still wins the moment it fires. */
.k120-preview-has-skeleton object.k120-preview-pdf {
    animation: k120-pdf-reveal 0s ease-in 3s forwards;
}
@keyframes k120-pdf-reveal {
    to { opacity: 1; }
}

/* Slight fade for the meta sidebar so it arrives gently alongside the
   preview rather than snapping in while the skeleton still shows. */
.k120-meta-fade-in {
    animation: k120-fade-in 0.35s ease-out both;
}
@keyframes k120-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.k120-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.k120-preview-pdf {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
}
.k120-preview-media {
    max-width: 100%;
    max-height: 100%;
    outline: none;
}
.k120-preview-audio-wrap {
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.k120-preview-text {
    margin: 0;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Consolas','Monaco','Courier New',monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fefdfb;
}
/* Fallback card (unknown / binary / text-too-large) */
.k120-preview-fallback {
    padding: 32px 24px;
    text-align: center;
    color: #6b5a2e;
    font-size: 12px;
    max-width: 320px;
}
.k120-preview-fallback a { color: #9c7a3c; font-weight: 600; text-decoration: none; }
.k120-preview-fallback a:hover { text-decoration: underline; }
.k120-preview-fallback-name {
    margin-top: 8px;
    font-weight: 600;
    color: #3d3830;
    word-break: break-all;
}
.k120-preview-fallback-hint {
    margin: 6px 0 14px;
    color: #8a7a56;
    font-size: 11px;
}
.k120-preview-icon {
    font-size: 46px;
    color: #c9a84c;
    display: block;
    margin-bottom: 6px;
}

/* Metadata sidebar */
.k120-meta {
    background: #fefdfb;
    border: 1px solid #e8e0d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.k120-meta-title {
    font-size: 11px;
    font-weight: 600;
    color: #6b5a2e;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0ebe0;
    margin-bottom: 2px;
}
.k120-meta-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
    border-bottom: 1px dashed #f0ebe0;
}
.k120-meta-row:last-of-type { border-bottom: 0; }
.k120-meta-label {
    font-size: 9px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.k120-meta-value {
    font-size: 11px;
    color: #3d3830;
    word-break: break-all;
}
.k120-hash {
    font-family: 'Consolas','Monaco','Courier New',monospace;
    cursor: help;
}
/* Status pill — Active/Inactive get eye-catching colours so admins can
   tell at a glance whether this row is the current version of the
   attachment or a historical one. */
.k120-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}
.k120-status-pill i { font-size: 12px; line-height: 1; }
.k120-status-active {
    background: #e8f6ea;
    color: #1d7b2f;
    border-color: #b6dfbd;
}
.k120-status-inactive {
    background: #fdeaea;
    color: #a9201a;
    border-color: #efb6b2;
}
.k120-status-neutral {
    background: #faf6eb;
    color: #9c7a3c;
    border-color: #ebe0bf;
}
.k120-meta-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.k120-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    font-size: 11px;
}
.k120-btn i { font-size: 14px; }

/* Narrow viewports — collapse the split into stacked preview + meta */
@media (max-width: 720px) {
    .k120-body { grid-template-columns: 1fr; }
    .k120-preview { min-height: 260px; }
}

/* Clickable attachment row in the history timeline — hints at interactivity
   via subtle gold underline + an "external link" icon revealed on hover. */
.k119-hist-attach-link {
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: -6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.k119-hist-attach-link:hover { background: #faf6eb; color: #9c7a3c; }
.k119-hist-attach-ext {
    font-size: 11px; opacity: 0; transition: opacity 0.15s; margin-left: 2px;
}
.k119-hist-attach-link:hover .k119-hist-attach-ext { opacity: 0.7; }

/* Inline document chip used inside activity-log before/after diffs. */
.k119-hist-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #9c7a3c;
    text-decoration: none;
    background: #faf6eb;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid #ebe0bf;
    font-size: 10px;
    cursor: pointer;
}
.k119-hist-doc-link:hover { background: #f2e8cc; border-color: #c9a84c; }
.k119-hist-doc-link i { font-size: 11px; }

/* ── k119 Branch Logo — upload card on the General tab ─────────────── */
.k119-logo-card { max-width: 100%; margin-bottom: 10px; }

/* Flex row: logo thumbnail on the left, action buttons on the right. */
.k119-logo-row {
    display: flex; align-items: center; gap: 18px;
    padding: 6px 2px;
    flex-wrap: wrap;
}
.k119-logo-wrap {
    width: 110px; height: 110px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    background: #faf7f0;
    border: 1px dashed #d0c298;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* When the thumbnail is wired to kDocViewPath, cue interactivity with
   cursor + subtle lift / ring on hover. Only applied via JS when a
   logo is present — placeholder state stays static. */
.k119-logo-wrap-clickable { cursor: zoom-in; }
.k119-logo-wrap-clickable:hover {
    border-color: #bd9e4d;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(189,158,77,0.15);
    transform: translateY(-1px);
}
/* The <img> itself — object-contain so non-square logos don't get squished. */
.k119-logo-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    display: block;
}
/* Placeholder shown when sys_branches_logo is empty. */
.k119-logo-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #bd9e4d; font-size: 11px;
}
.k119-logo-placeholder i {
    font-size: 30px; line-height: 1; margin-bottom: 4px; color: #bd9e4d;
}
/* Action column — keeps Upload/Remove/hint stacked vertically. */
.k119-logo-actions {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 180px;
}
.k119-logo-btn {
    display: inline-flex !important; align-items: center; gap: 6px;
    cursor: pointer; justify-content: center;
}
.k119-logo-btn i { font-size: 15px; }
.k119-logo-hint {
    font-size: 10px; color: #9c8e6b; margin-top: 2px;
}

/* History wrap is a flex column with two regions: the filter card
   on top (fixed, no scroll) and a scrolling records body below.
   Splitting them avoids two problems with a single sticky setup:
   (1) timeline rows sliding visibly behind the filter card on scroll,
   (2) table-view <thead> needing its own sticky context. With the
   body owning the scroll, the filter is naturally pinned and <thead>
   can stick to the body's top edge. */
.k119-hist-wrap {
    padding: 10px;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.k119-hist-filters {
    background: #faf7f0; border: 1px solid #e8e0d0; border-radius: 6px;
    padding: 8px 10px;
    /* Fixed header — does not scroll. margin-bottom dropped because
       the parent .k119-hist-wrap supplies the inter-region gap. */
    flex: 0 0 auto;
    /* Stack child rows tightly — the parent gap controls inter-row
       spacing and the user wants this compact. */
    display: flex; flex-direction: column; gap: 6px;
}

/* The actual scrolling records area. Owns vertical scroll for the
   timeline / table; horizontal stays hidden so the table never pushes
   the layout sideways. position:relative keeps sticky <thead>
   anchored to this box. */
.k119-hist-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    position: relative;
}
.k119-hist-filter-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    /* Margin removed — the parent flex gap above handles row spacing
       so it stays consistent regardless of which rows are present. */
}
.k119-hist-input {
    height: 30px; border: 1px solid #ddd5c5; border-radius: 4px;
    padding: 0 8px; font-size: 11px; background: #fff; color: #333;
    outline: none; min-width: 0;
}
.k119-hist-input:focus { border-color: #c9a84c; }
.k119-hist-date { width: 120px; }
.k119-hist-select {
    height: 30px; border: 1px solid #ddd5c5; border-radius: 4px;
    padding: 0 6px; font-size: 11px; background: #fff; color: #333;
    outline: none; cursor: pointer;
}
.k119-hist-select:focus { border-color: #c9a84c; }
.k119-hist-sep { font-size: 10px; color: #aaa; }
.k119-hist-btn {
    height: 30px; padding: 0 10px; border-radius: 4px;
    background: #9c7a3c; color: #fff; font-size: 11px;
    display: flex; align-items: center; gap: 4px; cursor: pointer;
    white-space: nowrap;
}
.k119-hist-btn:hover { background: #7d6230; }
.k119-hist-btn-clear { background: #e8e0d0; color: #666; }
.k119-hist-btn-clear:hover { background: #d5cbb5; color: #333; }

.k119-hist-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    /* margin-top removed — the parent .k119-hist-filters now uses
       flex-direction: column + gap for inter-row spacing. Without
       this change the actions row would sit 18px below the previous
       row instead of the intended 10px gap. */
}
.k119-hist-add {
    height: 28px; padding: 0 10px; border-radius: 4px;
    border: 1px dashed #c9a84c; color: #9c7a3c; font-size: 11px;
    display: flex; align-items: center; gap: 4px; cursor: pointer;
    background: transparent;
}
.k119-hist-add:hover { background: #f5f0e6; border-style: solid; }

/* Note form */
.k119-note-form {
    border: 1px solid #e8e0d0; border-radius: 6px; background: #fefdfb;
    margin-bottom: 10px; overflow: hidden;
}
.k119-note-form-head {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; background: #f5f0e6; font-size: 12px;
    font-weight: 600; color: #6b5a2e; border-bottom: 1px solid #e8e0d0;
}
.k119-note-form-head i { font-size: 15px; }
.k119-note-form-close {
    margin-left: auto; cursor: pointer; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px; color: #999;
}
.k119-note-form-close:hover { background: #e8e0d0; color: #333; }
.k119-note-form-body { padding: 10px 12px; }
.k119-note-form-row { display: flex; gap: 8px; margin-bottom: 8px; }
.k119-note-textarea {
    width: 100%; border: 1px solid #ddd5c5; border-radius: 4px;
    padding: 8px; font-size: 11px; resize: vertical; min-height: 60px;
    font-family: inherit; outline: none; background: #fff; color: #333;
    box-sizing: border-box;
}
.k119-note-textarea:focus { border-color: #c9a84c; }
.k119-note-form-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; padding: 8px 12px; border-top: 1px solid #e8e0d0; background: #faf7f0;
}

/* Timeline */
.k119-hist-count {
    font-size: 10px; color: #aaa; margin-bottom: 6px; padding-left: 4px;
}
.k119-hist-timeline { position: relative; padding-left: 22px; }
.k119-hist-timeline::before {
    content: ''; position: absolute; left: 13px; top: 0; bottom: 0;
    width: 2px; background: #e8e0d0;
}
.k119-hist-item {
    position: relative; display: flex; gap: 10px;
    padding: 10px 12px; margin-bottom: 2px;
    border-radius: 5px; background: #fff;
    border: 1px solid #f0ebe0; transition: background 0.15s;
}
.k119-hist-item:hover { background: #fefdfb; border-color: #e0d8c6; }
.k119-hist-item-latest { background: #faf6eb; border-color: #e0d6b8; }
/* Activity cards have a double-click handler that opens the detail
   modal (their primary access since there's no per-card View button —
   the diff is shown inline already). The cursor hint + a subtle
   accent on hover tells admins the card is interactive. */
.k119-hist-item[ondblclick] { cursor: pointer; }
.k119-hist-item[ondblclick]:hover { box-shadow: inset 0 0 0 1px #c9a84c; }

/* --- Parent-child grouping (2026-07-19) ------------------------------ */
/* Parent (SCOPE) row: subtle teal left-border + slightly stronger
   background so the milestone stands out. Children never render
   inline anymore — they surface in the double-click popup under
   the "Sub-activities" section. .k119-hist-item-child styles are
   kept for legacy renders that might still emit them. */
.k119-hist-item-parent {
    background: #f0f9ff;
    border-color: #7dd3fc;
    border-left: 4px solid #0ea5e9;
    padding-left: 10px;
}
.k119-hist-item-parent:hover { background: #e0f2fe; border-color: #38bdf8; }

/* Table view — tint parent row (children hidden from table too) */
.k119-hg-row-parent {
    background: #f0f9ff;
}
.k119-hg-row-parent > td:first-child {
    border-left: 3px solid #0ea5e9;
}

/* Sub-activities section inside the History Entry popup — one
   line per child log. Green dot = success, red dot = failure.
   HH:MM:SS keeps the timing detail compact next to each step. */
.khv-substeps {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 8px 10px;
    max-width: 100%;
}
/* Admin-expanded mode — each step is a full mini-block instead of a
   single line. Bumped padding + white background so the nested block
   stands out from the parent's fafafa track. */
.khv-substeps-expanded {
    background: #f5f5f5;
    padding: 6px;
}
.khv-substep {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 11.5px;
    line-height: 1.4;
    border-bottom: 1px solid #f0f0f0;
}
.khv-substep:last-child { border-bottom: 0; }
.khv-substep-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}
.khv-substep-time {
    font-family: monospace;
    color: #94a3b8;
    font-size: 10.5px;
    flex-shrink: 0;
    min-width: 60px;
}
.khv-substep-cat {
    color: #6b5a2e;
    flex-shrink: 0;
}
.khv-substep-desc {
    color: #3d3830;
    flex: 1;
    word-wrap: break-word;
    min-width: 0;
}

/* --- Admin-expanded sub-step block: full mini-detail per step --- */
.khv-substep-block {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 11.5px;
}
.khv-substep-block:last-child { margin-bottom: 0; }
.khv-substep-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0ebe0;
}
.khv-substep-header .khv-substep-cat {
    font-size: 12px;
    color: #3d3830;
    flex: 1;
}
.khv-substep-desc-block {
    color: #3d3830;
    padding: 4px 0 6px;
    line-height: 1.5;
}
.khv-substep-diff {
    width: 100%;
    margin: 4px 0;
    font-size: 10.5px;
}
.khv-substep-source {
    color: #888;
    font-size: 10.5px;
    padding-top: 4px;
    border-top: 1px dotted #eaeaea;
    margin-top: 4px;
}
.khv-substep-source i { vertical-align: middle; }

/* --- Collapsible sub-step (HTML5 <details>) ---
   Each admin sub-activity is a <details> starting closed. The
   summary row keeps the same layout as the old .khv-substep-block
   header but adds a chevron that flips when opened. Body content
   (description + Changes grid + Source) is hidden until the user
   toggles the block. */
.khv-substep-details {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 11.5px;
    overflow: hidden;
}
.khv-substep-details:last-child { margin-bottom: 0; }
.khv-substep-details > summary.khv-substep-header {
    /* Reset the native disclosure triangle so we can use our own chevron. */
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    margin-bottom: 0;
    border-bottom: 1px solid transparent;
    user-select: none;
    transition: background-color .12s ease;
}
.khv-substep-details > summary.khv-substep-header::-webkit-details-marker { display: none; }
.khv-substep-details > summary.khv-substep-header:hover { background: #f9fafb; }
.khv-substep-details[open] > summary.khv-substep-header {
    background: #f5f5f5;
    border-bottom-color: #f0ebe0;
}
.khv-substep-chevron {
    display: inline-block;
    color: #94a3b8;
    font-size: 11px;
    width: 10px;
    text-align: center;
    transition: transform .15s ease;
    flex-shrink: 0;
}
.khv-substep-details[open] > summary .khv-substep-chevron {
    transform: rotate(90deg);
}
.khv-substep-body {
    padding: 8px 10px 10px;
}

/* --- Sub-activity pagination ---
   Only page-1 renders visible on open; page switcher toggles the
   khv-sub-page-active class. Pages that aren't active are display:
   none rather than visibility:hidden so they don't reserve space. */
.khv-sub-page { display: none; }
.khv-sub-page.khv-sub-page-active { display: block; }
.khv-sub-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 8px 4px 4px;
    margin-top: 6px;
    border-top: 1px dashed #eaeaea;
}
.khv-sub-nav-info {
    color: #94a3b8;
    font-size: 10.5px;
    margin-right: auto;
}
.khv-sub-nav-btn {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #4b5563;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 3px;
    min-width: 24px;
    transition: background-color .12s ease, border-color .12s ease;
}
.khv-sub-nav-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.khv-sub-nav-btn.khv-sub-nav-active {
    background: #0891b2;
    border-color: #0891b2;
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.khv-sub-nav-btn.khv-sub-nav-active:hover {
    background: #0891b2;
    border-color: #0891b2;
}
.khv-sub-nav-prev, .khv-sub-nav-next {
    font-size: 14px;
    padding: 1px 8px;
}

.k119-hist-dot {
    position: absolute; left: -22px; top: 12px;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; z-index: 1;
    flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.k119-hist-body { flex: 1; min-width: 0; }
.k119-hist-header {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.k119-hist-badge {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 3px;
    font-size: 10px; font-weight: 600; color: #fff;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.k119-hist-category {
    font-size: 10px; color: #9c7a3c; background: #f5f0e6;
    padding: 1px 6px; border-radius: 3px;
}
.k119-hist-summary { font-size: 11.5px; color: #333; font-weight: 500; }
.k119-hist-meta {
    font-size: 10px; color: #aaa; display: flex; align-items: center; gap: 2px;
    margin-bottom: 4px;
}
.k119-hist-meta i { font-size: 11px; margin-right: 1px; }
.k119-hist-changes {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
    /* Constrain children — without `min-width: 0` a flex item with
       unbreakable text (e.g. a long access CSV with no spaces) sets
       its own min-width to the intrinsic content width and pushes the
       row past the container edge. */
    min-width: 0; max-width: 100%;
}
.k119-hist-change {
    font-size: 10px; background: #f0ebe0; color: #555;
    padding: 2px 7px; border-radius: 3px;
    display: inline-flex; align-items: flex-start; gap: 3px;
    line-height: 1.4;
    /* Cap chip width to the parent and let any long unbreakable
       string (CSV, URL, etc) wrap mid-token. `overflow-wrap: anywhere`
       breaks at any character; `min-width: 0` releases the flex
       intrinsic-min so the chip can actually shrink to its container. */
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Keep the field-label tag intact — only the value should wrap. */
.k119-hist-change b { color: #6b5a2e; margin-right: 3px; font-weight: 600; flex-shrink: 0; }
/* Before → After pointer between old/new values in the changes ribbon */
.k119-hist-arrow {
    font-size: 13px; color: #c9a84c; margin: 0 1px;
    line-height: 1; vertical-align: middle;
}
/* Null / empty value placeholder — faded dash */
.k119-hist-null {
    color: #bbb; font-style: italic;
}
/* Nested-array values (e.g. per_row_orders payload) get rendered as
   compact JSON inside a code chip — readable and copy-friendly,
   without the layout breaking from huge raw text. */
.k119-hist-json {
    font-family: 'Consolas','Monaco',monospace;
    font-size: 10px; color: #4a4a4a;
    background: #fbf8ee; border: 1px solid #ece2c4;
    padding: 1px 5px; border-radius: 3px;
    max-width: 100%;
    overflow-wrap: anywhere; word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.35;
}
/* Error banner inside a failed activity log entry */
.k119-hist-error {
    margin-top: 4px;
    font-size: 10px; color: #c0392b;
    background: rgba(244,67,54,0.08); border-left: 3px solid #f44336;
    padding: 4px 8px; border-radius: 3px; line-height: 1.4;
}
.k119-hist-error i { margin-right: 4px; vertical-align: middle; }
.k119-hist-content {
    font-size: 11px; color: #444; line-height: 1.5;
    margin-top: 4px; padding: 6px 8px; background: #faf7f0;
    border-radius: 4px; border-left: 3px solid #c9a84c;
}
.k119-hist-attach {
    font-size: 10px; color: #9c7a3c; margin-top: 4px;
    display: flex; align-items: center; gap: 3px;
}
.k119-hist-ip { font-size: 9px; color: #ccc; margin-top: 2px; }
.k119-hist-note-actions {
    display: flex; gap: 4px; margin-top: 4px;
}
/* Card action chips — view (gold) + delete (red). Hidden by default;
   fade in on card hover so the timeline reads clean when not being
   acted on. Same shape / sizing as the table-view eye / trash icons
   for visual consistency between the two layouts.
   IMPORTANT: scoped to .k119-hist-item descendants so this rule
   doesn't bleed into the toolbar's .k119-hist-view (the
   Timeline/Table View toggle chip in the filter card), which uses
   the same class name but lives outside any .k119-hist-item and
   needs its full natural width + opacity. */
.k119-hist-item .k119-hist-view,
.k119-hist-item .k119-hist-del {
    width: 22px; height: 22px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #ccc; cursor: pointer; opacity: 0;
    transition: all 0.15s;
}
.k119-hist-item:hover .k119-hist-view,
.k119-hist-item:hover .k119-hist-del { opacity: 1; }
.k119-hist-item .k119-hist-view:hover { background: rgba(201,168,76,0.18); color: #6b5a2e; }
.k119-hist-item .k119-hist-del:hover  { background: rgba(244,67,54,0.10);  color: #f44336; }

/* History pagination footer — Prev / page indicator / Next + first/last
   jump buttons. Only rendered when total_pages > 1. */
.k119-hist-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-top: 12px; padding: 8px 4px;
    border-top: 1px solid #f0ebe0;
    flex-wrap: wrap;
}
.k119-hist-page-btn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 10px; font-size: 11px; color: #6b5a2e;
    background: #faf7f0; border: 1px solid #e8dec4; border-radius: 4px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.k119-hist-page-btn i { font-size: 14px; }
.k119-hist-page-btn:hover { background: #f0ebe0; border-color: #c9a84c; color: #6b5a2e; }
.k119-hist-page-btn.k119-hist-page-disabled {
    opacity: 0.4; pointer-events: none; cursor: default;
}
.k119-hist-page-info {
    font-size: 11px; color: #888; padding: 0 8px; white-space: nowrap;
}
/* Pushes the page-size dropdown to the right edge of the pagination
   row so the pager controls stay grouped on the left/center. */
.k119-hist-page-spacer { flex: 1 1 auto; }
.k119-hist-page-size {
    height: 26px; font-size: 11px; color: #6b5a2e;
    background: #faf7f0; border: 1px solid #e8dec4; border-radius: 4px;
    padding: 0 6px; cursor: pointer; outline: none;
}
.k119-hist-page-size:hover  { border-color: #c9a84c; }
.k119-hist-page-size:focus  { border-color: #c9a84c; }

/* Timeline footer — Load-more button. Centered, full-width hit target
   so admins reading down the feed don't have to aim. The remaining-
   count hint sits in a softer color so the primary action reads as
   "Load N more" first. */
.k119-hist-loadmore-wrap {
    display: flex; justify-content: center;
    margin-top: 12px; padding: 4px 0 8px;
}
.k119-hist-loadmore {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; font-size: 12px; font-weight: 500;
    color: #6b5a2e; background: #faf7f0;
    border: 1px solid #e8dec4; border-radius: 6px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.k119-hist-loadmore:hover {
    background: #f0ebe0; border-color: #c9a84c; color: #5a4d27;
}
.k119-hist-loadmore i { font-size: 16px; }
.k119-hist-loadmore-rem { color: #b8a06a; font-size: 11px; font-weight: normal; }

/* Admin-only "view scope" toggle — sits at the end of the filter row.
   Default styling = "My View" (gated); .k119-hist-scope-on highlights it
   when the admin has flipped to "All Entries". The same chip class
   is reused by the render-mode toggle (.k119-hist-view) since they
   have identical visual weight + behaviour. */
.k119-hist-scope, .k119-hist-view {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11px; font-weight: 500;
    color: #6b5a2e; background: #faf7f0;
    border: 1px solid #e8dec4; border-radius: 4px;
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.k119-hist-scope:hover, .k119-hist-view:hover { background: #f0ebe0; border-color: #c9a84c; }
.k119-hist-scope i, .k119-hist-view i { font-size: 13px; }
.k119-hist-scope-on    { background: #fff4d4; border-color: #c9a84c; color: #8a6e1c; }
.k119-hist-scope-on:hover { background: #ffefc4; }

/* History — Table view. Compact one-line-per-entry grid for admins
   who want to scan a lot of entries quickly. Shares the timeline's
   colour palette via the type badge so it reads consistently. */
.k119-hist-table-wrap {
    margin-top: 4px;
    border: 1px solid #ece2c4; border-radius: 4px;
    background: #fff;
    /* No overflow here. Horizontal scroll dropped intentionally:
       the table is table-layout:fixed at width:100% so it never
       overflows. Setting overflow:auto on this wrap would make IT
       the nearest scroll container for the sticky <thead>, breaking
       the stick-on-vertical-scroll behavior we want against
       .k119-hist-body. */
}
.k119-hist-grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 11px; color: #444; table-layout: fixed;
}
.k119-hist-grid thead th {
    background: #faf7f0; color: #6b5a2e;
    text-align: left; font-weight: 600; font-size: 10px;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 7px 10px; border-bottom: 1px solid #ece2c4;
    white-space: nowrap;
    /* Pin the header to the top of .k119-hist-body so columns stay
       labeled while the user scrolls long tables. border-collapse on
       the table is set to 'separate' above because sticky cells lose
       their bottom border under collapsed-borders rendering. */
    position: sticky; top: 0; z-index: 5;
}
.k119-hist-grid tbody td {
    padding: 7px 10px; border-bottom: 1px solid #f5f0e6;
    vertical-align: top; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
}
.k119-hist-grid tbody tr:hover { background: #fbf8ee; }
.k119-hist-grid tbody tr:last-child td { border-bottom: 0; }
/* Row number — global across pages so referencing "row 47" stays
   meaningful even when navigating. Mono digits keep alignment. */
.k119-hg-num     {
    width: 42px; text-align: right; color: #aaa;
    font-variant-numeric: tabular-nums; font-size: 10px;
}
.k119-hg-when    { width: 140px; color: #888; white-space: nowrap; }
.k119-hg-type    { width: 90px;  white-space: nowrap; }
.k119-hg-user    { width: 130px; color: #6b5a2e; }
.k119-hg-subject {
    /* Subject is the only flexible-width column — wraps when long. */
    overflow-wrap: anywhere; word-break: break-word;
}
.k119-hg-subject .k119-hg-changed {
    color: #aaa; font-size: 10px; margin-left: 4px;
}
.k119-hg-cat     { width: 110px; color: #9c7a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Attachment column — paperclip icon when present, faded dash otherwise.
   Click on the paperclip routes through kDocViewPath (same viewer the
   timeline uses). */
.k119-hg-att     { width: 36px;  text-align: center; }
.k119-hg-att i   { font-size: 14px; }
.k119-hg-att-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 3px;
    color: #9c7a3c; cursor: pointer;
    transition: background .12s, color .12s;
}
.k119-hg-att-link:hover { background: rgba(189,158,77,0.15); color: #6b5a2e; }
.k119-hg-att-none { color: #ddd; font-size: 10px; }
/* Actions column — widened to fit the new view button alongside the
   delete affordance. Header label stays subtle so the column doesn't
   shout for attention next to the data columns. */
.k119-hg-act { width: 70px; text-align: center; white-space: nowrap; }
.k119-hist-grid thead .k119-hg-act { font-size: 9px; }
.k119-hg-view, .k119-hg-del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 3px;
    color: #ccc; cursor: pointer; font-size: 14px;
    transition: background .12s, color .12s;
    vertical-align: middle;
}
/* View button — gold accent on row hover, matching the History tab's
   palette. Slightly more prominent than delete since it's the
   non-destructive primary action for a row. */
.k119-hist-grid tbody tr:hover .k119-hg-view { color: #c9a84c; }
.k119-hg-view:hover { background: rgba(201,168,76,0.15); color: #6b5a2e; }
.k119-hist-grid tbody tr:hover .k119-hg-del  { color: #f44336; }
.k119-hg-del:hover  { background: rgba(244,67,54,0.12); }

/* View popup — wide-mode override for the framework modal. The
   default 380px is sized for a one-line confirm prompt; the History
   view popup carries a diff table that needs more room. The class is
   added by kHistView and stripped on close so other callers
   (tt_confirm, show_msg) keep their narrow default. The .msg_lybx
   inner pad/text-align are also flipped here so the popup body reads
   like a left-aligned data panel rather than a centered alert. */
.show_msg_box.msg-box--wide,
.msg-box.msg-box--wide {
    /*: Sized to the actual content (History-Entry popup) — earlier
        760px left half the modal blank because the content column
        (label chip + value chip pairs) doesn't need that much. 560px
        fits the widest realistic row (device UA) with wrap, without
        stretching short rows across empty space. */
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}
.show_msg_box.msg-box--wide .msg_lybx,
.msg-box.msg-box--wide .msg_lybx {
    /*: Flex column so content grows to fill available space and
        the button row is pinned at the bottom of the modal. No more
        "close button poking out / clipped" — the layout math is now
        the browser's job, not a manual max-height calc. */
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: stretch;
    padding: 16px 18px 12px;
    flex: 1;
    min-height: 0;
}
.show_msg_box.msg-box--wide #show_msgbox_content,
.msg-box.msg-box--wide #show_msgbox_content {
    /*: Content takes the leftover vertical space and scrolls
        internally. Removed the fixed max-height calc — flex parent
        sizes this automatically based on siblings. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}
.show_msg_box.msg-box--wide #show_msgbox_btn,
.msg-box.msg-box--wide #show_msgbox_btn {
    /*: Pin the button row inside the modal — flex-shrink:0 stops it
        from being crushed when content overflows. */
    flex-shrink: 0;
    margin-top: 8px;
}

/* View popup content — rendered inside the framework's show_msgbox
   modal. Styles only the inner blocks; the modal chrome (backdrop,
   border, close button) is owned by tt_confirm/show_msgbox CSS so
   the look stays consistent with other framework dialogs. */
.khv-detail { text-align: left; font-size: 12px; color: #3d3830; }
.khv-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.khv-summary { font-weight: 600; color: #3d3830; }
.khv-meta {
    font-size: 10.5px; color: #888;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid #f0ebe0;
}
.khv-meta i { vertical-align: middle; font-size: 12px; color: #aaa; }
.khv-section-title {
    font-size: 10px; font-weight: 600; color: #6b5a2e;
    text-transform: uppercase; letter-spacing: .3px;
    margin: 8px 0 4px;
}
/* Note body — preserve user paragraph breaks (nl2br) and keep an
   easy-to-scan column width via max-width. */
.khv-content {
    background: #faf7f0; border: 1px solid #ece2c4; border-radius: 4px;
    padding: 8px 10px; font-size: 11.5px; line-height: 1.5;
    color: #3d3830; white-space: pre-wrap; word-wrap: break-word;
    max-width: 100%;
}
.khv-attachment {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; background: #faf7f0;
    border: 1px solid #ece2c4; border-radius: 4px;
    font-size: 11px; color: #6b5a2e; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.khv-attachment:hover { background: #f0ebe0; border-color: #c9a84c; }
.khv-attachment i { font-size: 13px; }
/* Diff table for activity rows — three columns (field / old / new).
   Mono font for values so escaped characters and commas line up. */
.khv-diff {
    width: 100%; border-collapse: collapse; font-size: 11px;
    margin-bottom: 6px;
}
.khv-diff th {
    background: #faf7f0; color: #6b5a2e;
    text-align: left; font-weight: 600; font-size: 9.5px;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 5px 8px; border-bottom: 1px solid #ece2c4;
}
.khv-diff td {
    padding: 4px 8px; border-bottom: 1px solid #f5f0e6;
    vertical-align: top; line-height: 1.35;
    word-break: break-word;
}
.khv-diff-field { width: 28%; color: #6b5a2e; font-weight: 500; }
/* Old / new cells use a tinted background so the diff direction is
   immediately scannable even on monochrome printouts. */
.khv-diff-old   { background: #fff5f3; color: #b54a3a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.khv-diff-new   { background: #f1faec; color: #3a7a2a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.khv-source {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 10.5px; color: #888;
}
.khv-source i { vertical-align: middle; font-size: 12px; }
/* Multi-attachment diff cell — list of clickable file chips. Used
   when an activity log entry shows the OLD or NEW value of a
   sys_notes_attachments column (which is a JSON array of paths).
   Wraps so a long list inside a narrow cell stays readable. */
.khv-att-list {
    display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center;
}
.khv-att-list .k119-hist-doc-link { white-space: nowrap; }

/* Manage Menu History — left tree + right config grid layout. Mirrors
   the 2-pane shape Manage Menu (kprocess_124) uses so the experience
   feels familiar. Left ≈30% (tree), right ≈70% (config). */
.k127-mmh-wrap { display: flex; flex-direction: column; height: 100%; }
.k127-mmh-grid {
    display: grid; grid-template-columns: minmax(260px, 30%) 1fr;
    gap: 8px; flex: 1; min-height: 0;
}
/* History filter rows — combos row stretches its 3 children evenly so
   Type / Category / User each get a third of the available width.
   The actions row falls back to the default flex layout. */
.k119-hist-filter-row-combos {
    display: flex; gap: 8px; align-items: stretch;
}
.k119-hist-filter-row-combos .k119-hist-multi {
    flex: 1; min-width: 0;
}
/* Multi-combos sitting inside a k116 form group should fill the
   group's width (the form-group is the layout cell; the inline-block
   default would leave them stuck at their min-width). Without this
   override the dropdown panel inherits the narrow inline-block
   width and the value chips truncate awkwardly. */
.k116-form-group .k-mc-wrap {
    display: block; width: 100%;
}
.k116-form-group .k-mc-display {
    width: 100%; box-sizing: border-box;
    /* Match k116-form-input height (34px) so a Kind select and a
       Menus multi-combo sitting in the same row line up vertically.
       Without this the chip renders ~26px tall and the row looks
       lopsided. */
    min-height: 34px; padding: 6px 26px 6px 10px;
    font-size: 12px;
}
/* Drop the global 320px width cap on the dropdown panel when it
   lives inside a form group — the parent's full width is the
   natural target, otherwise the panel renders narrower than the
   chip and leaves the hint text peeking through to the right.
   Also force the height + scroll behaviour explicitly here because
   the .k116-form-card / popup ancestor chain has its own flex /
   overflow rules that defeated the global .k-mc-dropdown
   max-height in some contexts (the list grew past the panel border
   instead of scrolling inside it). */
.k116-form-group .k-mc-dropdown {
    /* Width tracks the chip — min-width:100% wins because we set
       it AFTER the global rule's later min-width:220px. The
       max-width cap stays so the panel doesn't get unmanageably
       wide on full-width fields. width:auto + min-width:100% +
       max-width:600px = "match the chip, cap at 600px". */
    min-width: 100%; width: auto; max-width: 600px;
    height: 320px;            /* fixed height — no flex collapse */
    max-height: 320px;
    overflow: hidden;         /* belt + suspenders against ancestor overflow:visible */
    display: flex; flex-direction: column;
    box-sizing: border-box;
}
.k116-form-group .k-mc-dropdown .k-mc-list {
    flex: 1 1 0; min-height: 0;
    overflow-y: auto;
}

.k119-hist-filter-row-combos .k-mc-wrap {
    display: block; width: 100%;
}

/* =================================================================
   k_multi_combo — reusable multi-select dropdown with search.
   Closed display shows a comma-list of selected labels (or the
   placeholder); click expands a panel containing a search input
   and a checkbox list. Used by the History filter combos but
   generic enough for any "pick many from a fixed list" UI.
================================================================= */
.k-mc-wrap {
    position: relative; display: inline-block;
    min-width: 160px; vertical-align: middle;
}
.k-mc-display {
    border: 1px solid #c9b88c; background: #fff;
    padding: 4px 26px 4px 10px;
    border-radius: 4px; cursor: pointer;
    font-size: 11px; min-height: 26px;
    display: flex; align-items: center;
    user-select: none;
    transition: border-color .12s, box-shadow .12s;
}
.k-mc-display:hover { border-color: #bd9e4d; }
.k-mc-display-text {
    flex: 1; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    color: #444;
}
.k-mc-placeholder { color: #aaa; }
.k-mc-arrow {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    color: #888; font-size: 14px; pointer-events: none;
}

/* Dropdown panel — absolutely positioned under the display.
   z-index high enough to clear nearby cards / table rows. */
.k-mc-dropdown {
    position: absolute; top: 100%; left: 0;
    /* Width strategy — track the trigger's full width by default
       (min-width:100% wins because this is now the only min-width
       declaration), with a 600px ceiling so admins on ultra-wide
       fields don't get an unmanageable wall of checkboxes. The
       previous rule had a duplicate min-width:220px that
       overrode min-width:100%, so the panel rendered narrower
       than the chip across History, MMH, Add Lookup — every
       consumer of k_multi_combo. One single source of truth here
       fixes them all at once. */
    min-width: 100%; max-width: 600px;
    z-index: 1500; margin-top: 2px;
    background: #fff;
    border: 1px solid #c9b88c; border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    max-height: 320px; display: flex; flex-direction: column;
    box-sizing: border-box;
    /* CRITICAL — without overflow:hidden the inner .k-mc-list
       (which has flex:1 + overflow-y:auto) doesn't actually clip
       to max-height. Items spill out below the panel border on
       lists with many entries. The flex-shrink quirk is that a
       flex item's natural min-height = its min-content, so without
       this guard the list grows past 320px instead of scrolling. */
    overflow: hidden;
}
.k-mc-search-row {
    padding: 6px; border-bottom: 1px solid #ece2c4;
    flex-shrink: 0;
}
.k-mc-search {
    width: 100%; padding: 4px 8px; font-size: 11px;
    border: 1px solid #ddd; border-radius: 3px;
    box-sizing: border-box;
}
.k-mc-search:focus {
    outline: none; border-color: #bd9e4d;
}
.k-mc-list {
    /* Default sizing — flex:1 (= flex:1 1 auto) lets the list grow
       to fit content up to the parent's max-height, which scrolls
       naturally for short-list contexts (History tab combos, etc.).
       The strict flex:1 1 0 + min-height:0 variant only kicks in
       inside .k116-form-group below, where the dropdown has a
       fixed height set on the parent — there the basis-0 collapse
       is what we WANT (so the list claims the parent's full inner
       height for its own scroll). */
    overflow-y: auto; flex: 1;
    padding: 4px;
    /* Visible thin scrollbar so admins can see at a glance that the
       list extends beyond what's rendered. Matches the History tab
       palette so the chrome reads as one component. */
    scrollbar-width: thin; scrollbar-color: #d7c99b #faf4e1;
}
.k-mc-list::-webkit-scrollbar          { width: 8px; }
.k-mc-list::-webkit-scrollbar-track    { background: #faf4e1; border-radius: 4px; }
.k-mc-list::-webkit-scrollbar-thumb    {
    background: #d7c99b; border: 2px solid #faf4e1; border-radius: 4px;
}
.k-mc-list::-webkit-scrollbar-thumb:hover { background: #c0a76d; }
.k-mc-empty {
    padding: 12px; color: #aaa; font-size: 11px;
    text-align: center; font-style: italic;
}

/* Each item is a <label> wrapping the checkbox + label text — the
   whole row is clickable, not just the box. */
.k-mc-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 3px;
    cursor: pointer; font-size: 11px; color: #444;
    line-height: 1.3;
}
.k-mc-item:hover { background: #faf6eb; }
.k-mc-item input[type="checkbox"] {
    margin: 0; cursor: pointer;
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.k-mc-item-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.k-mc-item-on { background: #fbf5e6; color: #6b5a2e; font-weight: 500; }
.k-mc-item-on:hover { background: #f5edd0; }

/* Manage Menu History — left pane container. Just chrome (border /
   padding / scroll); the tree itself uses the existing .kmm-* rules
   defined globally for the Manage Menu tree (see lines 1767–1871) so
   nothing here re-styles individual nodes. */
.k127-mmh-left {
    display: flex; flex-direction: column; min-height: 0;
    background: #fbf8ee; border: 1px solid #ece2c4; border-radius: 6px;
    padding: 6px;
}
/* Toolbar row above the tree — search input + expand/collapse pills.
   Pills reuse .k119-hist-page-btn so they match the pagination chip
   styling already used elsewhere in the History UI. */
.k127-mmh-toolbar      { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.k127-mmh-toolbar input { flex: 1; min-width: 0; }
.k127-mmh-tools        { display: flex; gap: 4px; }
/* Tree scroll container only — no node styling here. The .kmm-* rules
   from the Manage Menu stylesheet handle every visual aspect of each
   node, caret, section header, etc. */
.k127-mmh-tree-wrap    { flex: 1; overflow-y: auto; padding-right: 2px; }
.k127-mmh-right {
    overflow-y: auto; padding: 4px;
    background: #fff; border: 1px solid #ece2c4; border-radius: 6px;
}

/* Right-pane lookup chips — readable at-a-glance summary of how many
   categories / types / actions are configured for the picked menu. */
.k127-mmh-kindbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px 0; }
.k127-mmh-kindchip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; font-size: 11px; color: #444;
    background: #fff; border: 1px solid #ddd; border-radius: 14px;
}
.k127-mmh-kindlbl { font-weight: 500; }
.k127-mmh-kindcnt {
    display: inline-block; min-width: 20px; padding: 1px 6px;
    color: #fff; font-weight: 600; font-size: 10px;
    border-radius: 10px; text-align: center;
}

/* Tabular per-section layout — used by the Categories / Types / Actions
   sections in the MMH right pane. One <table> per section: header row,
   one row per existing lookup, plus an inline add-row at the bottom
   whose inputs live in the same columns as the data rows above.
   Aligned columns make scanning + editing way faster than the old
   flex-card layout and give each input a clear column label via the
   header. */
.k127-mmh-tbl {
    width: 100%; border-collapse: collapse;
    background: #fff; border: 1px solid #ece2c4; border-radius: 4px;
    margin: 4px 0 12px 0; font-size: 11px;
    overflow: hidden;
}
.k127-mmh-tbl thead th {
    background: #faf7f0; color: #6b5a2e;
    text-align: left; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 6px 8px; border-bottom: 1px solid #ece2c4;
    white-space: nowrap;
}
.k127-mmh-tbl tbody td {
    padding: 5px 8px; border-bottom: 1px solid #f5f0e6;
    vertical-align: middle;
}
.k127-mmh-tbl tbody tr:last-child td { border-bottom: 0; }
.k127-mmh-tbl tbody tr:hover { background: #fbf8ee; }
.k127-mmh-trow-inactive { opacity: .55; }
.k127-mmh-tval {
    background: #f5f0e6; color: #6b5a2e; padding: 1px 5px;
    border-radius: 3px; font-family: 'Consolas','Monaco',monospace;
    font-size: 10.5px;
}
.k127-mmh-tlabel { color: #444; font-weight: 500; }

/* Column widths — value/label flex (truncate-ok), the rest fixed so
   columns align across sections. Width chosen so the add-row inputs
   fit without horizontal overflow. */
.k127-mmh-c-color   { width: 28px;  text-align: center; }
.k127-mmh-c-value   { width: 110px; }
.k127-mmh-c-label   { /* flex */ }
.k127-mmh-c-icon    { width: 100px; }
.k127-mmh-c-colhex  { width: 90px; }
.k127-mmh-c-order   { width: 70px;  text-align: center; }
.k127-mmh-c-status  { width: 80px;  text-align: center; }
.k127-mmh-c-act     { width: 130px; text-align: right; white-space: nowrap; }

/* Status pill — green for Active, muted amber for Inactive. */
.k127-mmh-pill {
    display: inline-block; padding: 1px 8px;
    font-size: 9px; font-weight: 600; letter-spacing: .3px;
    text-transform: uppercase; border-radius: 10px;
}
.k127-mmh-pill-on   { color: #1d6e30; background: #d6f0d8; }
.k127-mmh-pill-off  { color: #9c7a3c; background: #f0e7da; }
/* Auto pill — for read-only system / library-derived rows in the
   Types table. Subdued grey so they read clearly as not-editable
   (the action column shows '—' alongside). */
.k127-mmh-pill-auto { color: #555; background: #ececec; }

/* Menu History landing — flex column shell. Header card stays
   pinned, .k126-mhl-body owns the scroll for the inner k_build_history_tab
   render. Same root cause as History Settings (framework wrapper is
   overflow:hidden + height:100%) but a separate class so the two
   screens can diverge later without coupling. */
.k126-mhl-shell {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    padding: 10px; box-sizing: border-box;
    overflow: hidden;
}
.k126-mhl-header { flex: 0 0 auto; max-width: 100%; margin-bottom: 8px; }
.k126-mhl-body {
    flex: 1 1 auto; min-height: 0;
    overflow: hidden; /* inner k119-hist-wrap owns its own scroll */
    display: flex; flex-direction: column;
}
/* The k119-hist-wrap rendered inside .k126-mhl-body needs the same
   flex sizing it gets when it lives in a kdv tab body — without it
   the wrap collapses to its content height and the History feed
   loses its scroll. Mirrors the .kdv-tab-panel.is-active rule. */
.k126-mhl-body > .k119-hist-wrap { flex: 1 1 auto; min-height: 0; }

/* All-records audit banner — shown inside .k119-hist-actions when
   k_build_history_tab is invoked with all_records=true. Replaces the
   Add Note buttons (no specific record to attach to), so the chip
   needs to be visually distinct from the regular add chips: muted
   blue-grey ground + outline + collection icon read as "audit /
   read-only" instead of "click me". */
.k119-hist-allrec-banner {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: 11px; color: #5a6b8c;
    background: #eef2f8; border: 1px solid #cdd5e3; border-radius: 4px;
    cursor: default; user-select: none;
}
.k119-hist-allrec-banner i { font-size: 13px; color: #6b7d9c; }
.k119-hist-allrec-banner b  { color: #3d4a63; font-weight: 600; }
.k119-hist-allrec-table     { color: #8a96b0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; }

/* =========================================================================
   History Lookups landing (k127_render_hll_content + handler). Flat
   cross-menu admin view that lists every sys_history_lookups row in the
   system. Layout mirrors the Menu History landing: pinned filter card
   on top, scrollable rows table below.
   ========================================================================= */
.k127-hll-shell {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    padding: 10px; box-sizing: border-box;
    overflow: hidden;
}
.k127-hll-header {
    flex: 0 0 auto;
    background: #faf7f0; border: 1px solid #e8e0d0; border-radius: 6px;
    padding: 10px 12px; margin-bottom: 8px;
}
.k127-hll-title {
    font-size: 13px; font-weight: 600; color: #6b5a2e;
    margin-bottom: 8px;
}
.k127-hll-title i { vertical-align: middle; font-size: 16px; }
.k127-hll-sub {
    font-weight: 400; color: #888; font-size: 11px; margin-left: 6px;
}
.k127-hll-filters {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.k127-hll-filters select.k119-hist-input,
.k127-hll-filters input.k119-hist-input { min-width: 140px; }
.k127-hll-filters input[type="text"].k119-hist-input { flex: 1; min-width: 200px; }

/* Body — owns the vertical scroll so the filter card stays pinned. */
.k127-hll-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    background: #fff; border: 1px solid #ece2c4; border-radius: 4px;
    padding: 10px;
    scrollbar-width: thin; scrollbar-color: #d7c99b #faf4e1;
}
.k127-hll-body::-webkit-scrollbar       { width: 8px; }
.k127-hll-body::-webkit-scrollbar-track { background: #faf4e1; }
.k127-hll-body::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k127-hll-count {
    font-size: 11px; color: #888; margin-bottom: 8px;
}

/* Table — same density as the Manage Menu History per-menu table.
   Sticky header so column labels stay visible while admins scroll
   long lists. */
.k127-hll-tbl {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 11px; color: #444;
}
.k127-hll-tbl thead th {
    background: #faf7f0; color: #6b5a2e;
    text-align: left; font-weight: 600; font-size: 9.5px;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 6px 10px; border-bottom: 1px solid #ece2c4;
    position: sticky; top: -10px; z-index: 2;
}
.k127-hll-tbl tbody td {
    padding: 6px 10px; border-bottom: 1px solid #f5f0e6;
    vertical-align: middle; line-height: 1.4;
}
.k127-hll-tbl tbody tr:hover { background: #fbf8ee; }
.k127-hll-tbl tbody tr:last-child td { border-bottom: 0; }

/* Column widths — keep "kind" + "status" + "actions" tight, give
   "label" + "menu" the breathing room. */
.k127-hll-c-kind   { width: 80px;  white-space: nowrap; }
.k127-hll-c-value  { width: 150px; white-space: nowrap; }
.k127-hll-c-label  { min-width: 140px; }
.k127-hll-c-menu   { width: 220px; color: #6b5a2e; }
.k127-hll-c-status { width: 80px;  white-space: nowrap; }
.k127-hll-c-access { width: 180px; }
.k127-hll-c-act    { width: 100px; text-align: right; white-space: nowrap; }
.k127-hll-c-act .k119-hist-page-btn,
.k127-hll-c-act .k127-mmh-trash { vertical-align: middle; }
/* "+ Add Lookup" button — primary-ish chip in the filter row.
   Slightly accented vs the neutral Filter / Clear chips so admins
   notice the create affordance. */
.k127-hll-add-btn {
    background: #c9a84c !important; color: #fff !important;
    border-color: #b89535 !important;
}
.k127-hll-add-btn:hover { background: #b89535 !important; }

/* Kind chip — color-coded so admins can scan the "is this a category
   or an action" question instantly. Mirrors the kind palette baked
   into the renderer. */
.k127-hll-kindchip {
    display: inline-block;
    padding: 1px 8px; font-size: 9.5px; font-weight: 600;
    color: #fff; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .3px;
    white-space: nowrap;
}

/* Menu cell — caption + a small monospace #id chip for forensic
   reference (so admins can grep raw SQL with the id). Orphan rows
   (lookup whose menu was archived) get a muted "(orphan)" tag. */
.k127-hll-menuid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px; color: #aaa;
}
.k127-hll-orphan { color: #c0a76d; font-style: italic; }

/* =========================================================================
   History Lookups — View popup (3 tabs: General / Activity / Usage).
   Lightweight client-side tabs; all panels render up-front so tab
   clicks are pure DOM toggles (no roundtrip).
   ========================================================================= */
.k127-hll-vtabs {
    display: flex; gap: 0;
    background: #faf7f0; border-bottom: 1px solid #ece2c4;
    padding: 0 12px;
}
.k127-hll-vtab-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px; font-size: 12px; font-weight: 500;
    color: #6b5a2e; cursor: pointer; user-select: none;
    border-bottom: 2px solid transparent;
    transition: background .12s, border-color .12s, color .12s;
}
.k127-hll-vtab-btn:hover { background: #f5efdf; }
.k127-hll-vtab-btn.k127-hll-vtab-active {
    color: #3d3830; background: #fff;
    border-bottom-color: #c9a84c;
}
.k127-hll-vtab-btn i { font-size: 14px; }
.k127-hll-vtab { padding: 4px 0; }

/* Detail card — definition list with a fixed label column so values
   line up regardless of length. Replaces the old <table> layout
   that had the label column shift per row. */
.k127-hll-dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 14px;
    margin: 0;
}
.k127-hll-dl dt {
    font-size: 11px; font-weight: 600; color: #6b5a2e;
    text-align: right; padding-top: 3px;
    text-transform: uppercase; letter-spacing: .3px;
}
.k127-hll-dl dd {
    margin: 0; padding: 3px 0; font-size: 12px; color: #3d3830;
    word-break: break-word;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.khv-null { color: #aaa; font-style: italic; font-size: 11px; }

/* Activity tab — compact log table. Same density as the History
   tab's table view so the two screens read consistently. */
.k127-hll-acttbl {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 11px; color: #444;
}
.k127-hll-acttbl thead th {
    background: #faf7f0; color: #6b5a2e;
    text-align: left; font-weight: 600; font-size: 9.5px;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 6px 8px; border-bottom: 1px solid #ece2c4;
}
.k127-hll-acttbl tbody td {
    padding: 6px 8px; border-bottom: 1px solid #f5f0e6;
    vertical-align: top; line-height: 1.4;
}
.k127-hll-acttbl tbody tr:last-child td { border-bottom: 0; }
.k127-hll-act-when    { white-space: nowrap; color: #888; width: 110px; }
.k127-hll-act-detail  { word-break: break-word; max-width: 280px; }
/* Action-type pill — color per common ops. Insert green, update
   blue, delete red, validation orange, batch gold. Anything else
   defaults to a muted grey. */
.k127-hll-actbadge {
    display: inline-block;
    padding: 1px 7px; font-size: 9px; font-weight: 600;
    color: #fff; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .3px;
    background: #888;
}
.k127-hll-actbadge-insert            { background: #4caf50; }
.k127-hll-actbadge-update            { background: #2196f3; }
.k127-hll-actbadge-delete            { background: #f44336; }
.k127-hll-actbadge-validation_failed { background: #ff9800; }
.k127-hll-actbadge-batch_insert      { background: #c9a84c; }

/* Usage tab — big number + caption hero card, then a recent-uses
   table below. Quick-glance answer to "is anyone actually using
   this lookup?" */
.k127-hll-usage-stat {
    text-align: center;
    padding: 18px 14px;
    background: #faf7f0; border: 1px solid #ece2c4; border-radius: 6px;
}
.k127-hll-usage-num {
    font-size: 32px; font-weight: 700; color: #6b5a2e;
    line-height: 1;
}
.k127-hll-usage-lbl {
    margin-top: 6px; font-size: 11px; color: #888;
}
.k127-hll-usage-lbl code {
    background: #f0e7d4; padding: 1px 5px; border-radius: 3px;
    font-size: 10px; color: #6b5a2e;
}

/* Record-id chip — emitted by k_build_history_tab only when running
   in all-records audit mode, so a normal per-record History tab
   stays visually clean. Same blue-grey palette as the audit banner
   so the chip and banner read as belonging to the same "audit"
   visual language. Mono digits keep multi-row scanning easy. */
.k119-rec-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; margin-right: 4px;
    font-size: 10px; font-weight: 600;
    color: #3d4a63; background: #eef2f8;
    border: 1px solid #cdd5e3; border-radius: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; vertical-align: middle;
}
.k119-rec-chip i { font-size: 11px; color: #6b7d9c; }
/* Unknown variant — used when an entry didn't carry a pk (mass ops,
   legacy logs). Muted so admins know the gap is real but shouldn't
   block their reading of the row. */
.k119-rec-chip-unknown {
    color: #99a; background: #f3f3f5; border-color: #e2e2e6;
    font-weight: 400;
}
.k119-rec-chip-unknown i { color: #b0b0b8; }
/* Subject column in table view — chip sits inline with the summary
   text. Without this rule the chip can wrap awkwardly when the
   subject is long. */
.k119-hg-subject .k119-rec-chip { vertical-align: baseline; }

/* History Settings — scroll wrapper. The framework's tab-content
   wrapper is overflow:hidden + height:100% (.tt_ofh + .h_100p), so
   without an explicitly scrollable inner box the settings list gets
   clipped after one viewport. box-sizing:border-box keeps the
   padding inside the height budget. matches the History tab body's
   thin-track scroll palette so the look stays consistent. */
/* =====================================================================
   App Settings (kprocess_129) — 2-column shell.
   LEFT  : sticky group nav (icon + label + count badge).
   RIGHT : scrollable body, one section per group, only the active
           section visible (.is-active toggle handled in JS).
   ================================================================= */
.kapp-shell {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ece2c4;
    overflow: hidden;
}
/* ---- LEFT NAV ---- */
.kapp-nav {
    flex: 0 0 240px;
    display: flex; flex-direction: column;
    background: #fbf5e6;
    border-right: 1px solid #ece2c4;
    padding: 12px 0;
    overflow-y: auto;
}
.kapp-nav-head {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid #ece2c4;
    margin-bottom: 8px;
    font-size: 14px; font-weight: 700; color: #6b5a2e;
}
.kapp-nav-head i { font-size: 18px; color: #c0a76d; }
.kapp-nav-hint {
    padding: 0 16px 12px;
    font-size: 11px; color: #8a7a56; line-height: 1.5;
    border-bottom: 1px solid #ece2c4;
    margin-bottom: 8px;
}
.kapp-nav-hint code {
    background: #f1e5c2; color: #6b5a2e;
    padding: 1px 4px; border-radius: 3px;
    font-size: 10.5px;
}
.kapp-nav-list {
    display: flex; flex-direction: column;
    flex: 1;
}
.kapp-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    margin: 1px 8px;
    border-radius: 6px;
    cursor: pointer; user-select: none;
    color: #6b5a2e; font-size: 13px;
    transition: background .12s, color .12s;
}
.kapp-nav-item i {
    font-size: 16px;
    flex-shrink: 0;
    color: #c0a76d;
}
.kapp-nav-item:hover {
    background: #f1e5c2;
}
.kapp-nav-item.is-active {
    background: #bd9e4d;
    color: #fff;
    font-weight: 600;
}
.kapp-nav-item.is-active i { color: #fff; }
.kapp-nav-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kapp-nav-count {
    background: rgba(0,0,0,0.10);
    color: inherit;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10.5px; font-weight: 700;
    flex-shrink: 0;
}
.kapp-nav-item.is-active .kapp-nav-count {
    background: rgba(255,255,255,0.25);
}

/* ---- RIGHT BODY ---- */
.kapp-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px 24px;
    background: #fff;
}
.kapp-body::-webkit-scrollbar         { width: 10px; }
.kapp-body::-webkit-scrollbar-track   { background: #faf4e1; }
.kapp-body::-webkit-scrollbar-thumb   { background: #d7c99b; border-radius: 6px; }
.kapp-body::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* Right pane now hosts ONE namespace's content at a time (server-
   rendered, swapped in on every nav click). A short fade-up keeps
   the swap from feeling jarring. */
.kapp-section,
.kapp-body > .kapp-section-head {
    animation: kapp-section-fade .18s ease-out;
}
@keyframes kapp-section-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* In-flight loading state — painted by kappLoadNamespace (apps.js)
   while the server post is running. The rdrawal response replaces
   it with real content as soon as it lands. */
.kapp-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 24px; color: #8a7a56; font-size: 13px;
}
.kapp-loading i { font-size: 20px; color: #c0a76d; }

/* Per-nav edit pencil — hidden until the row is hovered or active.
   Hover transitions in for the row only (not on touch — tap-target
   stays the row body, the pencil shows on a primary tap-then-hover
   on touch which is acceptable for an admin-only page). Click stops
   propagation in the inline onclick so the row's own click doesn't
   also fire and switch namespaces. */
.kapp-nav-item { position: relative; }
.kapp-nav-edit {
    display: none;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: rgba(107,90,46,0.55);
    margin-left: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.kapp-nav-edit:hover {
    background: rgba(189,158,77,0.18);
    color: #6b5a2e;
}
.kapp-nav-edit i { font-size: 14px; }
.kapp-nav-item:hover .kapp-nav-edit,
.kapp-nav-item.is-active .kapp-nav-edit {
    display: inline-flex;
}
.kapp-nav-item.is-active .kapp-nav-edit {
    color: rgba(255,255,255,0.85);
}
.kapp-nav-item.is-active .kapp-nav-edit:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

/* Inline edit form sitting at the bottom of the left nav (rdrawal
   target = #kapp_ns_edit_<tabid>). Light cream card so it visually
   reads as part of the nav, not the body. Empty by default; only
   shows up when an admin clicks a pencil. */
.kapp-ns-edit { margin-top: 12px; padding: 0 10px; }
.kapp-edit-form {
    background: #fff;
    border: 1px solid #c0a76d;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(189,158,77,0.18);
    overflow: hidden;
    animation: kapp-section-fade .18s ease-out;
}
.kapp-edit-head {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: #bd9e4d; color: #fff;
    font-size: 12px; font-weight: 600;
}
.kapp-edit-head i { font-size: 14px; }
.kapp-edit-head code {
    background: rgba(0,0,0,0.18);
    padding: 1px 5px; border-radius: 3px;
    color: #fff;
    font-size: 11px;
}
.kapp-edit-close {
    margin-left: auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background .12s;
}
.kapp-edit-close:hover { background: rgba(255,255,255,0.20); }
.kapp-edit-close i { font-size: 16px; }
.kapp-edit-body {
    padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.kapp-edit-field {
    display: flex; flex-direction: column; gap: 4px;
}
.kapp-edit-field > span {
    font-size: 11px; font-weight: 600; color: #6b5a2e;
}
.kapp-edit-field > span small {
    color: #8a7a56; font-weight: 400; font-size: 10px;
    margin-left: 4px;
}
.kapp-edit-foot {
    display: flex;
    /* space-between pushes Cancel to the far-left and Save/Create to
       the far-right. flex-wrap is the safety net for the narrow
       namespace-create form (lives in the 240px-wide nav column,
       where Cancel + Create Namespace previously crowded each other
       and clipped Cancel off the left edge). On wrap, both buttons
       grow to fill the row width via flex: 1 below. */
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: #fbf5e6;
    border-top: 1px solid #ece2c4;
}
.kapp-edit-foot .kapp-btn { padding: 5px 12px; font-size: 11px; }

/* + Add Namespace button — sits between the nav hint and the list.
   Visually a dashed-bordered "ghost" so it reads as an action you
   can take, not a real namespace row. Hover deepens the gold tint. */
.kapp-nav-add {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 12px 4px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed #c0a76d;
    border-radius: 6px;
    font-size: 12px; font-weight: 600;
    color: #6b5a2e;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.kapp-nav-add:hover {
    background: #fbf5e6;
    border-color: #bd9e4d;
}
.kapp-nav-add i { font-size: 16px; color: #bd9e4d; }

/* Section actions — hosts the "+ Add Setting" button on the right
   of the section title. Absolutely-positioned in the section head
   so it doesn't push the description off its row. */
.kapp-section-head { position: relative; padding-right: 130px; }
.kapp-section-actions {
    position: absolute;
    top: 0; right: 0;
    display: flex; gap: 8px;
}
.kapp-btn-add {
    background: #bd9e4d; color: #fff;
    border-color: #9c7a3c;
}
.kapp-btn-add:hover {
    background: #9c7a3c; color: #fff;
    box-shadow: 0 2px 5px rgba(156,122,60,0.25);
}
.kapp-btn-add i { font-size: 14px; }

/* Slot for the in-pane create-setting form. Empty by default; only
   takes up space when populated. The form's own padding handles
   the visual gap between it and the cards below. */
.kapp-setting-create:empty { display: none; }
.kapp-setting-create { margin-bottom: 14px; }

/* Create-form variants — wider than the edit form because they
   carry more fields. The form re-uses .kapp-edit-form chrome but
   stretches to full body width when used as a setting creator. */
.kapp-edit-form-create {
    /* Stays inside the nav slot — same width as the edit form. */
}
.kapp-edit-form-setting {
    /* Lands in the right pane, so it can use the full body width. */
    box-shadow: 0 2px 12px rgba(189,158,77,0.20);
}
.kapp-edit-form-setting .kapp-edit-body {
    padding: 14px 16px;
}

/* In-form group label — separates the namespace block from the
   first-setting block in the create-namespace form. */
.kapp-edit-group-label {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    padding: 6px 0 2px;
    font-size: 11px; font-weight: 700; color: #6b5a2e;
    text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid #ece2c4;
}
.kapp-edit-group-label:first-child { margin-top: 0; }
.kapp-edit-group-label i { font-size: 14px; color: #c0a76d; }
.kapp-edit-group-label small {
    color: #8a7a56; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    margin-left: 4px;
}

/* 2-column row inside the create-setting form for compact pair-up
   of related fields (key+label, type+sort). Single-column under
   narrow widths so labels never wrap weirdly. */
.kapp-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 700px) {
    .kapp-edit-row { grid-template-columns: 1fr; }
}
.kapp-section-head {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #ece2c4;
}
.kapp-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 700; color: #6b5a2e;
}
.kapp-section-title i { font-size: 22px; color: #c0a76d; }
.kapp-section-desc {
    margin-top: 4px;
    font-size: 12.5px; color: #8a7a56;
}

/* ---- CARDS ---- */
.kapp-cards {
    display: flex; flex-direction: column;
    gap: 12px;
}
.kapp-card {
    background: #fbf8ee;
    border: 1px solid #ece2c4;
    border-radius: 6px;
    padding: 14px 16px;
    transition: box-shadow .12s, border-color .12s;
}
.kapp-card:hover {
    border-color: #c0a76d;
    box-shadow: 0 1px 4px rgba(189,158,77,0.10);
}
.kapp-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
}
.kapp-card-title {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.kapp-card-label {
    font-size: 13.5px; font-weight: 600; color: #3d3830;
}
.kapp-card-key {
    font-size: 10.5px; color: #b5a87f;
    font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono",
                 Menlo, Consolas, monospace;
}
.kapp-card-type {
    background: #ece2c4; color: #6b5a2e;
    padding: 2px 8px;
    font-size: 10px; font-weight: 600;
    border-radius: 9px;
    flex-shrink: 0;
    text-transform: uppercase; letter-spacing: .3px;
    white-space: nowrap;
}
.kapp-card-desc {
    margin-top: 8px;
    font-size: 12px; color: #6b5a2e; line-height: 1.5;
}
.kapp-card-edit {
    display: flex; align-items: stretch; gap: 8px;
    margin-top: 12px;
}
.kapp-input {
    flex: 1; min-width: 0;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #d7c99b;
    border-radius: 5px;
    font-size: 13px; color: #3d3830;
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.kapp-input:focus {
    outline: none;
    border-color: #bd9e4d;
    box-shadow: 0 0 0 3px rgba(189,158,77,0.15);
}
.kapp-textarea {
    font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono",
                 Menlo, Consolas, monospace;
    font-size: 12px;
    resize: vertical;
}
.kapp-select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238a7a56' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
}
.kapp-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #d7c99b;
    border-radius: 5px;
    color: #6b5a2e; font-size: 12px; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
    flex-shrink: 0;
}
.kapp-btn:hover {
    background: #f5edda; border-color: #c0a76d; color: #5a4a1e;
    box-shadow: 0 1px 3px rgba(189,158,77,0.15);
}
.kapp-btn-save {
    background: #bd9e4d; border-color: #9c7a3c; color: #fff;
}
.kapp-btn-save:hover {
    background: #9c7a3c; border-color: #7e5f2c; color: #fff;
    box-shadow: 0 2px 5px rgba(156,122,60,0.25);
}
.kapp-btn-save i { font-size: 14px; }

/* Narrow viewports — collapse the side nav into a horizontal strip
   above the body. Same group buttons, just laid out as chips. */
@media (max-width: 900px) {
    .kapp-shell { flex-direction: column; }
    .kapp-nav {
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid #ece2c4;
    }
    .kapp-nav-list {
        flex-direction: row; flex-wrap: wrap;
        gap: 4px;
    }
    .kapp-nav-item { margin: 0; flex: 0 0 auto; }
}

.k127-settings-scroll {
    overflow-y: auto; overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
    scrollbar-width: thin; scrollbar-color: #d7c99b #faf4e1;
}
.k127-settings-scroll::-webkit-scrollbar         { width: 10px; }
.k127-settings-scroll::-webkit-scrollbar-track   { background: #faf4e1; border-radius: 6px; }
.k127-settings-scroll::-webkit-scrollbar-thumb   {
    background: #d7c99b; border: 2px solid #faf4e1; border-radius: 6px;
}
.k127-settings-scroll::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* History Settings panel — compact per-setting card. The previous
   3-column flex layout (editor / type column / save column) wasted
   horizontal space and stretched short int / string inputs across
   the whole row. This layout fits each row in three logical lines:
     1. label + key chip (left), type chip (right)
     2. small description hint
     3. editor + save button on one line, editor max-width capped */
.k127-setting-card {
    background: #fff; border: 1px solid #e2d7bf; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 8px;
}
.k127-setting-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 2px;
}
.k127-setting-title {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.k127-setting-label {
    font-size: 12px; font-weight: 600; color: #3d3830;
}
/* Mono key chip — reads like a code reference so admins know the
   exact (namespace.key) tuple to grep for in source. */
.k127-setting-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px; color: #9c7a3c;
    background: #faf4e1; padding: 1px 6px; border-radius: 4px;
}
/* Type/scope chip on the right of the head row. Replaces the old
   "Type" labelled column — the chip alone is self-describing. */
.k127-setting-type {
    flex: 0 0 auto;
    font-size: 10px; color: #6b5a2e;
    background: #f5efdf; border: 1px solid #e8dec4;
    padding: 2px 8px; border-radius: 10px;
    white-space: nowrap;
}
.k127-setting-desc {
    font-size: 10.5px; color: #888; margin-bottom: 8px;
    line-height: 1.4;
}
.k127-setting-edit {
    display: flex; gap: 8px; align-items: stretch;
}
/* Editor — capped width so short scalars (int/string/bool) read at
   a sensible size. CSV/JSON textareas override max-width below. */
.k127-set-input {
    flex: 1 1 auto; max-width: 360px; min-width: 0;
    height: 32px; box-sizing: border-box;
    border: 1px solid #e2d7bf; border-radius: 6px;
    padding: 0 10px; font-size: 12px; color: #3d3830; background: #fff;
    transition: border-color .12s, box-shadow .12s;
    outline: none;
}
.k127-set-input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.k127-set-select { cursor: pointer; }
/* Multi-value editors — wider + taller so admins can read the full
   CSV / JSON string without truncation. Mono font keeps separators
   visually aligned for quick scanning. */
.k127-set-textarea {
    height: auto; padding: 6px 10px;
    max-width: 600px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; line-height: 1.4; resize: vertical;
}
/* Save button — compact + inline with the editor, not a full-width
   column on the side. Same palette as the primary action chip the
   rest of the History UI uses. */
.k127-setting-save {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    height: 32px; padding: 0 14px;
    font-size: 11px; font-weight: 500; color: #fff;
    background: #b8964c; border: 1px solid #a07f3c; border-radius: 6px;
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.k127-setting-save:hover { background: #a07f3c; border-color: #8a6c2f; }
.k127-setting-save i { font-size: 14px; }
/* Auto rows in the Types table — slight tint + italics on the value
   to distinguish from admin-editable rows at a glance. */
.k127-mmh-trow-auto td        { background: #faf7ef; }
.k127-mmh-trow-auto:hover td  { background: #faf7ef; }   /* no hover lift on read-only rows */
.k127-mmh-trow-auto .k127-mmh-tval   { background: #f0ece1; }
.k127-mmh-trow-auto .k127-mmh-tlabel { color: #6b5a2e; }

/* Empty state — a single greyed cell that spans the table. */
.k127-mmh-empty-row {
    text-align: center; padding: 14px !important;
    color: #aaa; font-style: italic;
}

/* Add-row in the table — shaded background so it reads as the
   "interactive footer" instead of looking like another data row. */
.k127-mmh-add-row td { background: #faf7ef; padding: 6px 8px; }
.k127-mmh-add-row input.k116-form-input {
    width: 100%; padding: 4px 6px; font-size: 11px;
}

/* Per-row actions (toggle / shield / trash) — small chips on the right
   edge of each row. */
.k127-mmh-c-act .k119-hist-page-btn {
    padding: 2px 6px; font-size: 11px;
    display: inline-flex; align-items: center;
}
.k127-mmh-trash {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 3px;
    color: #aaa; cursor: pointer; font-size: 14px;
    transition: background .12s, color .12s;
    vertical-align: middle;
}
.k127-mmh-trash:hover { background: rgba(192,57,43,0.12); color: #c0392b; }

/* Audience pill — compact summary of who can see an action button.
   Appears in the Access column of the action table. */
.k127-mmh-aud { white-space: nowrap; }
.k127-mmh-aud-pill {
    display: inline-block; padding: 1px 6px; margin-right: 2px;
    font-size: 10px; color: #6b5a2e; background: #f5f0e6;
    border-radius: 8px;
}
.k127-mmh-aud-more {
    font-size: 10px; color: #888;
}

/* Per-button access drawer — collapsed by default; the row's shield
   icon toggles the .k127-mmh-acc-open class to reveal. Lives as a
   full-width <tr> beneath its parent row so the access picker has
   room to breathe instead of being squeezed into one column. */
.k127-mmh-acc-trow      { display: none; }
.k127-mmh-acc-trow.k127-mmh-acc-open { display: table-row; }
.k127-mmh-acc-trow > td {
    background: #faf7f0; border-left: 3px solid #c9a84c !important;
    padding: 8px 12px !important;
}
.k127-mmh-acc-hint {
    font-size: 10.5px; color: #888; margin-bottom: 6px;
}
.k127-mmh-acc-controls {
    display: flex; gap: 6px; align-items: flex-start;
}
.k127-mmh-acc-controls > div:first-child { flex: 1; min-width: 0; }

/* Action library picker — combo + Enable button at the bottom of the
   actions section, plus the link line below it. */
.k127-mmh-libbar {
    display: flex; gap: 6px; align-items: center;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed #eee;
}
.k127-mmh-liblink {
    font-size: 10.5px; color: #888; margin-top: 4px;
}
.k127-mmh-liblink a {
    color: #9c7a3c; text-decoration: none; margin-left: 2px;
}
.k127-mmh-liblink a:hover { text-decoration: underline; }

/* History Setup tab — color swatch chip per lookup row. Reuses the
   k117-access-* row container so the visual stays consistent with
   the Access Management list. */
.k117-color-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid #ddd;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.k117-color-swatch-empty {
    background: repeating-linear-gradient(45deg, #f5f5f5 0 4px, #fff 4px 8px);
}

.k119-hist-empty {
    text-align: center; padding: 40px 20px; color: #bbb;
    font-size: 12px;
}
.k119-hist-empty i { font-size: 18px; vertical-align: middle; margin-right: 4px; }

.k116-form-footer {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid #f0ebe0;
}

/* Searchable Select */
.k-sel-wrap {
    position: relative;
    width: 100%;
}
/* Stage search field select — inline, no JS wrapper needed */
.k-sfs-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 175px;
    max-width: 240px;
}
.k-sfs-input {
    width: 100%;
    height: 28px;
    padding: 0 24px 0 8px;
    font-size: 12px;
    border: 1px solid #e2d7bf;
    border-radius: 4px;
    background: #fff;
    color: #333;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}
.k-sfs-input:focus { border-color: #c0a76d; }
.k-sfs-arrow {
    position: absolute;
    right: 6px;
    font-size: 14px;
    color: #8a7a56;
    cursor: pointer;
    pointer-events: auto;
}
.k-sfs-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #c0a76d;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.k-sfs-list::-webkit-scrollbar { width: 4px; }
.k-sfs-list::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k-sfs-search {
    width: 100%;
    border: none;
    border-bottom: 1px solid #f0ebe0;
    padding: 6px 8px;
    font-size: 11px;
    color: #3d3830;
    outline: none;
    box-sizing: border-box;
}
.k-sfs-search::placeholder { color: #bbb; }
.k-sfs-item {
    padding: 5px 8px;
    font-size: 11px;
    color: #3d3830;
    cursor: pointer;
    transition: background 0.1s;
}
.k-sfs-item:hover { background: #f5f0e6; }
/* Search results bar */
.tbl-search-result-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #fdfcf9, #f5f0e6);
    border-bottom: 1px solid #e2d7bf;
    font-size: 10px;
    color: #5a5445;
    border-left: 3px solid #bd9e4d;
}
.tbl-search-result-bar i.bx { font-size: 12px; color: #bd9e4d; }
.tbl-search-result-clear {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    font-weight: 600;
    color: #c0392b;
    cursor: pointer;
    padding: 2px 8px;
    border: 1px solid rgba(192,57,43,0.15);
    border-radius: 4px;
    transition: all 0.15s;
}
.tbl-search-result-clear:hover { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.3); }
.tbl-search-result-clear i.bx { font-size: 11px; }
.tbl-search-reset {
    background: #c0392b !important;
    border-color: #a93226 !important;
    color: #fff !important;
}
.tbl-search-reset:hover { background: #a93226 !important; }
.tbl-search-group { overflow: visible !important; }
.tbl-row.tbl-row-h36 { overflow: visible !important; }
.tbl-header-wrap { overflow: visible !important; }
.k-sel-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 11px;
    color: #3d3830;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.k-sel-wrap.open .k-sel-display {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
    border-radius: 6px 6px 0 0;
}
.k-sel-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
}
.k-sel-arrow {
    font-size: 14px;
    color: #8a7a56;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.k-sel-wrap.open .k-sel-arrow { transform: rotate(180deg); }
.k-sel-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #c0a76d;
    border-top: none;
    border-radius: 0 0 6px 6px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.k-sel-search {
    width: 100%;
    border: none;
    border-bottom: 1px solid #f0ebe0;
    padding: 6px 8px;
    font-size: 11px;
    color: #3d3830;
    outline: none;
    box-sizing: border-box;
}
.k-sel-search::placeholder { color: #bbb; }
.k-sel-list {
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.k-sel-list::-webkit-scrollbar { width: 4px; }
.k-sel-list::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k-sel-option {
    padding: 5px 8px;
    font-size: 11px;
    color: #3d3830;
    cursor: pointer;
    transition: background 0.1s;
}
.k-sel-option:hover { background: #f5f0e6; }
.k-sel-option.selected {
    background: #ede7d6;
    font-weight: 600;
    color: #bd9e4d;
}

/* Access Picker */
.k-ap-wrap {
    position: relative;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    background: #fff;
    min-height: 30px;
    padding: 4px;
}
.k-ap-wrap:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.k-ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 2px;
}
.k-ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #5a5445;
    background: #f5f0e6;
    border: 1px solid #e2d7bf;
    border-radius: 4px;
}
.k-ap-chip-del {
    font-size: 12px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.15s;
}
.k-ap-chip-del:hover { color: #c0392b; }
.k-ap-search-row { display: flex; }
.k-ap-search {
    width: 100%;
    border: none;
    outline: none;
    font-size: 11px;
    padding: 3px 4px;
    color: #3d3830;
    background: transparent;
}
.k-ap-dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.k-ap-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.1s;
}
.k-ap-option:hover { background: #f5f0e6; }
.k-ap-option-name { font-size: 11px; font-weight: 600; color: #3d3830; }
.k-ap-option-id { font-size: 9px; color: #8a7a56; }
.k-ap-option-icon {
    width: 24px; min-width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: #f5f0e6; border-radius: 50%; font-size: 12px; color: #8a7a56;
}
.k-ap-option.selected { background: #ede7d6; }
.k-ap-option.selected::after {
    content: '\2713'; margin-left: auto; color: #27ae60; font-weight: 700; font-size: 12px;
}
.k-ap-empty { padding: 10px; text-align: center; font-size: 11px; color: #aaa; }

.k106-history {
    margin-top: 6px;
    font-size: 10px;
    color: #8a7a56;
    text-align: right;
    min-height: 14px;
}

/* ========================================================
   Send Message Card
   ======================================================== */

.k108-message-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2d7bf;
}

.k108-card-header {
    font-weight: 700;
    font-size: 11px;
    color: #8a7a56;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0ebe0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.k108-form-label {
    color: #8a7a56;
    font-weight: 600;
    font-size: 10px;
}

.k108-required { color: #c0392b; }

.k108-form-input {
    box-sizing: border-box;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    color: #3d3830;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}
.k108-form-input:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.15);
}

.k108-message-textarea {
    box-sizing: border-box;
    resize: vertical;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    color: #3d3830;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.k108-message-textarea:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.15);
}

.k108-channel-wrapper {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.k108-channel-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: #faf7f0;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #5a5445;
    user-select: none;
    transition: all 0.2s;
}
.k108-channel-label:hover {
    background: #f0ebe0;
    border-color: #d4c49a;
}

.k108-channel-checkbox {
    margin: 0;
    cursor: pointer;
    accent-color: #bd9e4d;
}

/* ========================================================
   Stage Settings Card
   ======================================================== */

.k108-settings-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2d7bf;
}

/* Settings half-width field */
.k108-settings-half {
    width: 50%;
    float: left;
    height: auto;
    padding-right: 5px;
    margin-bottom: 8px;
}
.k108-settings-full {
    width: 100%;
    float: left;
    clear: both;
    height: auto;
    margin-bottom: 8px;
}
.k108-hint {
    font-weight: 400;
    color: #999;
    font-size: 10px;
}
.k108-divider {
    width: 100%;
    float: left;
    clear: both;
    text-align: center;
    margin: 10px 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    position: relative;
}
.k108-divider::before,
.k108-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: #e2d7bf;
}
.k108-divider::before { left: 0; }
.k108-divider::after  { right: 0; }
.k108-divider span    { padding: 0 8px; background: #fff; }

.k108-settings-input {
    box-sizing: border-box;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 11px;
    color: #3d3830;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.k108-settings-input:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.15);
}

.k108-panel-body {
    height: calc(100% - 85px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    background: #fafaf6;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.k108-panel-body::-webkit-scrollbar { width: 5px; }
.k108-panel-body::-webkit-scrollbar-track { background: #f5f0e6; }
.k108-panel-body::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.k108-panel-body::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* Filter panel */
.fpnl-wrap   { display:flex; flex-direction:column; height:100%; background:#fff; }
.fpnl-header { display:flex; align-items:center; justify-content:space-between; padding:0 14px; height:46px; background:#f8f9fa; border-bottom:1px solid #e0e0e0; flex-shrink:0; }
.fpnl-header-title { font-size:14px; font-weight:600; color:#333; display:flex; align-items:center; gap:7px; }
.fpnl-close  { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; font-size:20px; color:#666; transition:background 0.15s; line-height:1; }
.fpnl-close:hover { background:#e8e8e8; color:#222; }
.fpnl-body   { flex:1; overflow-y:auto; padding:4px 0; scrollbar-width:thin; scrollbar-color:#d7c99b #f5f0e6; }
.fpnl-body::-webkit-scrollbar { width:5px; }
.fpnl-body::-webkit-scrollbar-track { background:#f5f0e6; }
.fpnl-body::-webkit-scrollbar-thumb { background:#d7c99b; border-radius:4px; }
.fpnl-body::-webkit-scrollbar-thumb:hover { background:#c0a76d; }
.fpnl-field  { padding:8px 14px 10px; border-bottom:1px solid #f0f0f0; }
.fpnl-field:last-child { border-bottom:none; }
.fpnl-label  { font-size:11px; font-weight:600; color:#666; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.4px; }
.fpnl-inputs { display:flex; gap:6px; align-items:center; }
.fpnl-op     { flex:0 0 48%; font-size:12px; height:30px; border:1px solid #d0d0d0; border-radius:5px; padding:0 6px; background:#fff; color:#333; cursor:pointer; }
.fpnl-val    { flex:1; font-size:12px; height:30px; border:1px solid #d0d0d0; border-radius:5px; padding:0 8px; color:#333; min-width:0; }
.fpnl-op:focus, .fpnl-val:focus { outline:none; border-color:#c0a76d; box-shadow:0 0 0 2px rgba(192,167,109,0.18); }
.fpnl-footer { display:flex; gap:8px; padding:10px 14px; border-top:1px solid #e0e0e0; background:#f8f9fa; flex-shrink:0; }
.fpnl-btn    { flex:1; height:32px; border:none; border-radius:5px; font-size:12px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:background 0.15s; }
.fpnl-btn-apply  { background:#c0a76d; color:#fff; }
.fpnl-btn-apply:hover  { background:#a8883e; }
.fpnl-btn-clear  { background:#fff3f3; color:#c0392b; border:1px solid #f5c6c6; }
.fpnl-btn-clear:hover  { background:#fde8e8; }
.fpnl-btn-cancel { background:#f1f3f4; color:#555; }
.fpnl-btn-cancel:hover { background:#e8eaed; }

/* Table toolbar layout rows */
.tbl-row        { width:100%; display:flex; align-items:center; justify-content:space-between; }
.tbl-row-h40    { height:40px; padding:5px 0; }
.tbl-row-h36    { height:36px; padding:4px 0; }
.tbl-row-group  { display:inline-flex; align-items:center; gap:4px; }
.tbl-row-group-r{ display:inline-flex; align-items:center; gap:2px;  }
/* Stage page title — gold-accented, icon + label, plays nicely with flex row */
.tbl-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    min-width: 0;
    border-left: 3px solid #c0a76d;
    background: linear-gradient(90deg, #fbf5e6 0%, transparent 70%);
    border-radius: 0 4px 4px 0;
}
.tbl-title-icon {
    font-size: 18px;
    color: #c0a76d;
    flex-shrink: 0;
    line-height: 1;
}
.tbl-title-text {
    font-size: 15px;
    font-weight: 600;
    color: #3a2e18;
    letter-spacing: 0.2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.tbl-lbl        { white-space:nowrap; }
.tbl-rt-search  { width:130px; }

/* Pagination "Rec X-Y of Z · Page A / B" label — muted grey, consistent with
   toolbar label sizing; padded so it doesn't sit flush against the prev button. */
.tbl-pg-info    { color:#555; font-size:12px; padding:0 8px 0 2px; }

/* ------- Server-side field search bar (Row 2, left) ------- */
.tbl-search-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tbl-search-lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    font-weight: 500;
    color: #6b5a38;
    background: #f5edda;
    border: 1px solid #e2d7bf;
    border-radius: 4px 0 0 4px;
    flex-shrink: 0;
}
.tbl-search-lbl i { font-size: 13px; color: #c0a76d; }
.tbl-search-input {
    height: 28px;
    width: 180px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tbl-search-input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.18);
}
.tbl-search-in {
    font-size: 11px;
    color: #888;
    font-style: italic;
    padding: 0 2px;
}
.tbl-search-field {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    outline: none;
    cursor: pointer;
    min-width: 180px;
    max-width: 260px;
    transition: border-color 0.15s;
}
.tbl-search-field:focus { border-color: #c0a76d; }
.tbl-act-btn-primary {
    background: #c0a76d !important;
    border-color: #a88e50 !important;
    color: #fff !important;
}
.tbl-act-btn-primary:hover {
    background: #a88e50 !important;
    color: #fff !important;
}
.tbl-act-btn-add {
    background: #bd9e4d !important;
    border-color: #a88b3d !important;
    color: #fff !important;
}
.tbl-act-btn-add:hover {
    background: #a88b3d !important;
}
.tbl-pg-took {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: #f5edda;
    color: #8a7a56;
    border: 1px solid #e2d7bf;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 500;
}

/* Go-to-page number input sized to match .tbl-act-btn (28×28 rounded box). */
.tbl-pg-box {
    width: 42px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #ccc; border-radius: 5px; background: #fff;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.tbl-pg-box:focus-within { border-color: #c0a76d; }
.tbl-pg-input {
    width: 100%; height: 100%;
    border: 0; outline: none; background: transparent;
    text-align: center; font-size: 12px; color: #333;
    padding: 0; margin: 0;
}
/* Hide the native number spinners for a cleaner look */
.tbl-pg-input::-webkit-outer-spin-button,
.tbl-pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbl-pg-input[type=number] { -moz-appearance: textfield; }

/* Table toolbar action buttons */
.tbl-act-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; border-radius: 5px;
    color: #555; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.tbl-act-btn:hover      { background: #f5edda; color: #c0a76d; }
.tbl-act-btn-active     { background: #c0a76d !important; color: #fff !important; }

/* Denied variant for toolbar + bulk-bar buttons — matches the row-action
   .cus_tbl-act-denied treatment. Button stays visible (consistent toolbar
   for every viewer) but dimmed; onclick pops a "no permission" toast
   instead of firing the action. Directive 2026-07-21 "also have to mass
   edit also". */
.tbl-act-btn.tbl-act-btn-denied {
    color: #b7b7b7;
    background: #f7f7f7;
    cursor: not-allowed;
}
.tbl-act-btn.tbl-act-btn-denied:hover {
    background: #eee;
    color: #8a8a8a;
}

/* Table header wrapper — replaces inline margin-top:-4px; stays static so
   sibling slide-in popups (rview-popup-pnl / rfilter-popup-pnl) can still
   anchor to their original full-tab ancestor. */
.tbl-header-wrap { margin-top: -4px; }

/* ---- Stage tab with a PINNED title bar -----------------------------------
   ON BY DEFAULT — tt_addNewTab($..., $fixed_title_bar = true); pass false to
   fall back to the legacy layout. Legacy: the tab is one tall block scrolling
   inside .sd-tab-content, so the title + action buttons (refresh / print)
   scroll off the top on long content like a request paper. Pinned: the tab
   shell becomes a flex column — the bar keeps its natural 40px and the body
   wrapper below it owns the scroll, so the bar stays put no matter how far
   the content is scrolled.
   box-sizing is forced because the shell carries both h_100p and k_pad5 —
   without it the 10px padding would push the shell past its parent and hand
   the scroll back to .sd-tab-content. */
.tt-tab-fixhdr {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
/* float:none — the legacy k_fltl on these divs is meaningless (and ignored)
   once they are flex items, but clearing it keeps the intent obvious. */
.tt-tab-fixhdr > .tt-tab-fixhdr-bar {
    flex: 0 0 auto;
    float: none;
    position: relative;
    z-index: 5;
}
.tt-tab-fixhdr > .tt-tab-fixhdr-body {
    flex: 1 1 auto;
    min-height: 0;          /* lets the flex item shrink so it can scroll */
    float: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d7c99b #f5f0e6;
}
.tt-tab-fixhdr > .tt-tab-fixhdr-body::-webkit-scrollbar { width: 6px; height: 6px; }
.tt-tab-fixhdr > .tt-tab-fixhdr-body::-webkit-scrollbar-track { background: #f5f0e6; }
.tt-tab-fixhdr > .tt-tab-fixhdr-body::-webkit-scrollbar-thumb { background: #d7c99b; border-radius: 4px; }
.tt-tab-fixhdr > .tt-tab-fixhdr-body::-webkit-scrollbar-thumb:hover { background: #c0a76d; }

/* Column visibility panel — floats over the table from the toolbar corner */
.tt-col-menu {
    position: absolute;
    right: 8px;
    top: 80px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    width: 260px;
    max-height: 380px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
    overflow: hidden;
    font-size: 13px;
}
.tt-col-menu-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #fbf5e6 0%, #f5edda 100%);
    border-bottom: 1px solid #e2d7bf;
    color: #6b5a38;
}
.tt-col-menu-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
}
.tt-col-menu-title i { font-size: 16px; color: #c0a76d; }
.tt-col-menu-count {
    margin-left: auto;
    font-size: 11px;
    color: #8a7a56;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 10px;
    padding: 1px 8px;
    font-weight: 500;
}
.tt-col-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #8a7a56;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tt-col-menu-close:hover { background: #c0a76d; color: #fff; }
.tt-col-menu-close i { font-size: 16px; }

/* Search bar inside the Columns picker — live-filters items by label. */
.tt-col-menu-search-wrap {
    position: relative;
    flex: 0 0 auto;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #ebe6d6;
    background: #fdfbf5;
}
.tt-col-menu-search-wrap .tt-col-menu-search-i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #c0a76d;
    pointer-events: none;
}
.tt-col-menu-search {
    width: 100%;
    padding: 6px 28px 6px 28px;
    border: 1px solid #e6dcc0;
    border-radius: 4px;
    background: #fff;
    font-size: 12.5px;
    color: #2a2f3a;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.tt-col-menu-search:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.18);
}
.tt-col-menu-search-clear {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f0e8d0;
    color: #8a7a56;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background .12s ease, color .12s ease;
}
.tt-col-menu-search-clear:hover { background: #c0a76d; color: #fff; }

.tt-col-menu-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 6px;
}
.tt-col-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    user-select: none;
    color: #333;
    line-height: 1.3;
    transition: background 0.12s;
}
.tt-col-menu-item:hover { background: #f7f0dc; }
.tt-col-menu-chkwrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}
.tt-col-menu-moves {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.tt-col-menu-mv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 14px;
    color: #8a7a56;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.12s, color 0.12s;
}
.tt-col-menu-mv:hover { background: #c0a76d; color: #fff; }
.tt-col-menu-mv i { font-size: 14px; line-height: 1; }
.tt-col-menu-mv.is-disabled {
    color: #d9d4c4;
    cursor: not-allowed;
    pointer-events: none;
}
.tt-col-menu-item.is-off .tt-col-menu-lbl { color: #aaa; text-decoration: line-through; }
.tt-col-menu-chk {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #c0a76d;
    flex-shrink: 0;
    cursor: pointer;
}
.tt-col-menu-lbl {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-col-menu-hint {
    font-size: 10px;
    color: #b3a67f;
    font-weight: 400;
    margin-left: 4px;
}
.tt-col-menu-item-rownum {
    border-bottom: 1px dashed #efe6cf;
    margin-bottom: 2px;
    padding-bottom: 6px;
}
.tt-col-menu-divider {
    padding: 6px 10px 4px;
    font-size: 9px;
    font-weight: 700;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #e2d7bf;
    margin-top: 4px;
    background: #faf7f0;
}
.tt-col-menu-extra .tt-col-menu-lbl { color: #8a7a56; }
.tt-col-menu-extra-added {
    border-left: 3px solid #3498db;
    background: rgba(52,152,219,0.06);
}
.tt-col-menu-extra-added .tt-col-menu-lbl { color: #2980b9; }
.tt-col-menu-extra-added .tt-col-menu-hint { color: #3498db !important; }
.cus_tbl-th-extra {
    color: #2980b9 !important;
    position: relative;
}
.cus_tbl-th-extra::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3498db;
    border-radius: 2px;
}
.tt-col-menu-extra .tt-col-menu-hint {
    font-size: 8px;
    color: #bd9e4d;
    font-weight: 600;
}
.tt-col-menu-empty {
    padding: 14px 10px;
    font-size: 12px;
    color: #999;
    text-align: center;
    font-style: italic;
}
.tt-col-menu-ftr {
    padding: 8px 12px;
    border-top: 1px solid #eee;
    background: #fafafa;
    text-align: right;
}
.tt-col-menu-reset {
    font-size: 12px;
    color: #c0a76d;
    cursor: pointer;
    font-weight: 500;
}
.tt-col-menu-reset:hover { color: #8a7537; text-decoration: underline; }
.tt-col-menu-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #ddd;
    margin: 0 10px;
    vertical-align: middle;
}

/* =============================================================
   Printable list-view page (pages/kprint.php)
   Screen styles show the toolbar + framed sheet; @media print
   strips the toolbar and trims margins for a clean A4 layout.
   ============================================================= */
.kprint-body {
    margin: 0;
    background: #e9ecef;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #222;
}
.kprint-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.kprint-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f7f7f7;
    color: #333;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.kprint-btn:hover { background: #ececec; }
.kprint-btn i { font-size: 13px; }
.kprint-btn-primary {
    background: #c0a76d;
    border-color: #a88e50;
    color: #fff;
}
.kprint-btn-primary:hover { background: #a88e50; }

.kprint-btn-pdf {
    background: #fdeceb;
    border-color: #e8b4ae;
    color: #a8302b;
}
.kprint-btn-pdf:hover { background: #f5c6c1; }

.kprint-btn-xls {
    background: #e3f3e6;
    border-color: #a7d4ae;
    color: #2b7a3a;
}
.kprint-btn-xls:hover { background: #c5e4ca; }

.kprint-btn-csv {
    background: #eaf4fb;
    border-color: #a9cde6;
    color: #1f5e87;
}
.kprint-btn-csv:hover { background: #cfe4f1; }

.kprint-btn-txt {
    background: #f1f1f1;
    border-color: #c9c9c9;
    color: #444;
}
.kprint-btn-txt:hover { background: #e1e1e1; }
/* Anchor-based buttons need explicit text-decoration reset */
a.kprint-btn { text-decoration: none; }
.kprint-meta {
    margin-left: auto;
    font-size: 12px;
    color: #666;
}
.kprint-sheet {
    max-width: 1100px;
    margin: 24px auto;
    padding: 32px 40px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-radius: 4px;
}
.kprint-sheet + .kprint-sheet { margin-top: 24px; }
.kprint-page-hdr {
    font-size: 13px;
    color: #8a7a56;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2d7bf;
    font-weight: 500;
}
.kprint-title {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    border-bottom: 2px solid #c0a76d;
    padding-bottom: 8px;
}
.kprint-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.kprint-table thead th {
    background: #f5edda;
    color: #6b5a38;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1.5px solid #c0a76d;
    white-space: nowrap;
}
.kprint-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    word-break: break-word;
}
.kprint-table tbody tr:nth-child(even) td { background: #fafafa; }
.kprint-num { width: 44px; text-align: left; color: #888; }
.kprint-empty { text-align: center; color: #999; padding: 24px !important; font-style: italic; }
.kprint-footer {
    display: flex;
    align-items: center;
    margin-top: 22px;
    padding-top: 8px;
    border-top: 1px dashed #ccc;
    /* Matches the @page margin-box footer in kprint.php so the in-app
       preview and the printed output look identical. */
    font: 9pt/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #777;
    gap: 10px;
}
.kprint-foot-l { flex: 1 1 0; text-align: left;   color: #777; }
.kprint-foot-c { flex: 1 1 0; text-align: center; color: #8a7a56; font-weight: 500; }
.kprint-foot-r { flex: 1 1 0; text-align: right;  color: #777; }
.kprint-foot-l b { color: #555; }
.kprint-hint {
    max-width: 1100px;
    margin: 8px auto 0;
    padding: 8px 14px;
    background: #fff8e5;
    border: 1px solid #f0d87a;
    border-radius: 4px;
    font-size: 12px;
    color: #6b5a38;
}
.kprint-hint b { color: #8a6d0b; }
.kprint-debug {
    margin-top: 18px;
    padding: 12px 14px;
    background: #fff8e5;
    border: 1px solid #f0d87a;
    border-radius: 4px;
    font-size: 11px;
    color: #555;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.kprint-debug h3 { margin: 0 0 8px; font-size: 12px; color: #8a6d0b; }
.kprint-debug pre {
    margin: 4px 0;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #f0d87a;
    border-radius: 3px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.kprint-debug div { margin: 3px 0; }

/* In-app print preview (kprocess_202 "Print in tab") */
.kprint-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #e9ecef;
    overflow: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.kprint-inner-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 2;
}
.kprint-inner-meta {
    margin-left: auto;
    font-size: 12px;
    color: #666;
}
.kprint-inner-sheet {
    max-width: 1100px;
    width: 100%;
    margin: 20px auto;
    padding: 26px 32px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    box-sizing: border-box;
}
.kprint-inner-sheet + .kprint-inner-sheet { margin-top: 28px; }

/* Landscape widens the preview sheet so wider tables breathe. */
.kprint-inner.kprint-inner-landscape .kprint-inner-sheet { max-width: 1500px; }
.kprint-inner-empty {
    padding: 30px;
    text-align: center;
    color: #999;
    font-style: italic;
}

@media print {
    .kprint-body        { background: #fff; }
    .kprint-toolbar     { display: none; }
    .kprint-hint        { display: none; }
    /* Each sheet becomes one physical page. No min-height tricks — the
       footer is rendered by @page margin-boxes instead (see inline <style>
       in kprint.php), so the printed footer lives at the real page bottom
       with zero risk of overflowing onto an extra page. */
    .kprint-sheet       {
        margin: 0;
        padding: 0;
        box-shadow: none;
        max-width: none;
        page-break-after: always;
    }
    .kprint-sheet:last-child { page-break-after: auto; }
    .kprint-table       { font-size: 10.5px; }
    .kprint-table thead { display: table-header-group; }
    .kprint-table tr    { page-break-inside: avoid; }
    .kprint-title       { font-size: 16px; }
    .kprint-page-hdr    { margin-bottom: 8px; padding-bottom: 4px; }
    /* In-content footer is hidden — @page bottom-boxes render the real one. */
    .kprint-footer      { display: none; }
    .kprint-debug       { display: none; }
}


/* ==========================================================
   Reusable Icon + Color pickers (k_icon_picker / k_color_picker)
   ========================================================== */
/* Wrapper matches .k116-form-input metrics (height 34, radius 6, border
   #e2d7bf) so the picker slots into existing form rows without looking
   transplanted. Layout is a 3-cell flex: preview | input | button. */
.k-picker {
    display: flex; align-items: stretch; position: relative;
    background: #fff; border: 1px solid #e2d7bf; border-radius: 6px;
    height: 34px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s;
    overflow: visible;
}
.k-picker:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.k-picker-preview {
    display: flex; align-items: center; justify-content: center;
    width: 34px; border-right: 1px solid #f0ebe0;
    background: #faf6eb; color: #9c7a3c; font-size: 18px;
    flex-shrink: 0; border-radius: 5px 0 0 5px;
}
.k-color-preview { background: #e8e0d0; color: transparent; }
.k-picker-input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0;
    padding: 0 10px; font-size: 12px; color: #3d3830;
    background: transparent;
}
.k-picker-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; border: 0; border-left: 1px solid #f0ebe0;
    background: #fdfcf9; color: #9c7a3c; font-size: 16px;
    cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s;
    border-radius: 0 5px 5px 0;
}
.k-picker-btn:hover { background: #f5edd9; color: #7a5f24; }

/* Flyout — absolute under the picker. Reasonable z-index so it sits
   above form rows but below the framework's modal overlay (z ≥ 9000). */
.k-picker-flyout {
    position: absolute; top: 38px; left: 0; z-index: 500;
    width: 340px; background: #fff;
    border: 1px solid #d0c298; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    padding: 8px;
    animation: k-picker-pop 0.12s ease-out;
}
@keyframes k-picker-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.k-picker-flyout-head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.k-picker-flyout-title {
    flex: 1; font-size: 11px; font-weight: 600; color: #9c7a3c;
    padding-left: 2px; letter-spacing: 0.3px;
}
.k-picker-search {
    flex: 1; border: 1px solid #e8e0d0; border-radius: 5px;
    padding: 5px 8px; font-size: 11px; outline: 0; color: #3d3830;
}
.k-picker-search:focus { border-color: #bd9e4d; }
.k-picker-flyout-close {
    width: 24px; height: 24px; display: flex;
    align-items: center; justify-content: center;
    cursor: pointer; border-radius: 5px; color: #9c7a3c;
    font-size: 16px; flex-shrink: 0; transition: background 0.1s;
}
.k-picker-flyout-close:hover { background: #f5edd9; }

/* Icon grid — 8 columns, scrollable past ~4 rows. */
.k-picker-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
    max-height: 280px; overflow-y: auto; overflow-x: hidden;
    padding: 2px;
}
.k-icon-tile {
    display: flex; align-items: center; justify-content: center;
    height: 34px; cursor: pointer; color: #3d3830;
    font-size: 19px; border-radius: 5px;
    transition: background 0.1s, color 0.1s, transform 0.1s;
    border: 1px solid transparent;
}
.k-icon-tile:hover {
    background: #faf6eb; color: #9c7a3c; border-color: #e8e0d0;
    transform: scale(1.08);
}

/* Color grid — 10 columns; swatches are flat, scaled-on-hover tiles. */
.k-color-grid {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
    padding: 2px;
}
.k-color-swatch {
    height: 26px; cursor: pointer; border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.08);
    transition: transform 0.1s, box-shadow 0.1s;
}
.k-color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(189,158,77,0.35);
}

/* Flyout footer — hint or custom-color input. */
.k-picker-flyout-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0ebe0;
}
.k-picker-flyout-foot-hint {
    font-size: 10px; color: #a8a092; padding-left: 2px;
}
.k-picker-flyout-foot-hint i { color: #c0a76d; margin-right: 4px; }
.k-picker-flyout-foot-hint b { color: #3d3830; font-weight: 600; }
.k-color-custom-lbl {
    font-size: 10px; color: #7a716a; font-weight: 600;
}
.k-color-native {
    width: 38px; height: 26px; border: 1px solid #e8e0d0;
    border-radius: 5px; cursor: pointer; padding: 0;
    background: #fff;
}
.k-color-native::-webkit-color-swatch-wrapper { padding: 2px; }
.k-color-native::-webkit-color-swatch { border: 0; border-radius: 3px; }
.k-color-custom-hint { font-size: 10px; color: #a8a092; }
.k-picker-empty {
    grid-column: 1 / -1; padding: 20px; text-align: center;
    color: #aaa; font-size: 11px;
}

/* =========================================================================
   Schema-driven Action Form (k_render_action_form). Two-column layout
   matching the screenshots: label on the left (fixed width), input on
   the right (flex). Sectioned by group with subtle dividers. Lock-state
   rows render disabled inputs and a footer message instead of Save.
   Hosted inside k_rpop (the framework's right popup) so we don't
   restyle the popup chrome — only the body content + the bottom
   action strip.
   ========================================================================= */

/* Outer popup container — fills its host. The framework wrapper sets
   width via setcss; we just claim full height + provide flex column
   so header / body / foot stack predictably. */
.kaf-popup {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: #fafaf6; color: #3d3830;
    font-size: 12px;
}

/* Body — scrolls when the form is taller than the popup. Padding
   tighter than the default form card because the popup width is
   already constrained by the right panel. */
.kaf-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 12px 16px;
    box-sizing: border-box;
    scrollbar-width: thin; scrollbar-color: #d7c99b #faf4e1;
}
.kaf-body::-webkit-scrollbar         { width: 8px; }
.kaf-body::-webkit-scrollbar-track   { background: #faf4e1; }
.kaf-body::-webkit-scrollbar-thumb   { background: #d7c99b; border-radius: 4px; }

/* Type strip — pinned at the top of the body so the user always
   sees which action they're filling. Mirrors the screenshots. */
.kaf-type-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px; padding-bottom: 8px;
    border-bottom: 1px solid #ece2c4;
}
.kaf-type-val {
    font-weight: 600; color: #6b5a2e; font-size: 13px;
}

/* Section title — small uppercase header above each group of rows.
   Hidden for the 'identity' group (no title in the layout). */
.kaf-section-title {
    margin: 10px 0 6px;
    font-size: 10px; font-weight: 600; color: #9c7a3c;
    text-transform: uppercase; letter-spacing: .4px;
}
.kaf-section { display: flex; flex-direction: column; gap: 4px; }

/* Two-column row — label fixed at 130px, input fills rest. Stacks on
   narrow popups via the breakpoint below so labels don't crush the
   input width. */
.kaf-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}
.kaf-label {
    font-size: 11px; color: #5a5445; font-weight: 500;
    text-align: left;
}
.kaf-req { color: #d35a3a; margin-left: 2px; }

/* Inputs — share a base look so date / time / text / textarea / select
   read as one form. Slight border highlight on focus. */
.kaf-input {
    width: 100%; min-width: 0;
    height: 32px; box-sizing: border-box;
    border: 1px solid #e2d7bf; border-radius: 5px;
    padding: 0 10px; font-size: 12px;
    background: #fff; color: #3d3830;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.kaf-input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.18);
}
.kaf-input:disabled,
.kaf-input[disabled] {
    background: #f3efe5; color: #8a8275; cursor: not-allowed;
}
.kaf-textarea {
    height: auto; min-height: 80px; padding: 8px 10px;
    font-family: inherit; resize: vertical; line-height: 1.4;
}
.kaf-date, .kaf-time { width: auto; min-width: 110px; }

/* Date+Time pair — date and time inputs sit side-by-side in a single
   row. The optional pair adds a leading checkbox that toggles the
   pair on/off (paired with JS that disables the inputs). */
.kaf-dt-pair {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.kaf-toggle { display: inline-flex; align-items: center; }
.kaf-toggle input { width: 14px; height: 14px; cursor: pointer; }

/* Checkbox row — single-cell layout (no left label cell) because the
   checkbox's own inline label IS the field label. */
.kaf-row-check {
    grid-template-columns: 1fr;
    padding-left: 140px; /* default: align with input column above */
}
.kaf-checkwrap {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    padding: 4px 0;
}
.kaf-checkwrap input { width: 15px; height: 15px; cursor: pointer; }
.kaf-checklbl { color: #3d3830; font-size: 12px; }

/* Flags section — pack checkboxes 2-per-row in a wrapped flex
   layout so the FLAGS strip reads compact (one short list)
   instead of a tall vertical column. The section title above
   stays full-width via its own styling; only the row container
   flips horizontal. Padding-left dropped here because the
   section header anchors visual alignment, not the input column.
   On narrow popups (< 540px) the wrap collapses to one column
   automatically via the calc(50% - gap) min-width fallback. */
.kaf-section-flags {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0 16px;       /* row gap = 0 (rows are tight); column gap = 16px */
    padding-left: 0;
}
.kaf-section-flags .kaf-row-check {
    flex: 0 0 calc(50% - 8px); /* 2-up, accounting for column gap */
    padding: 0;                /* row-level padding removed; checkwrap owns vertical rhythm */
}
/* Inside the flags section, tighten the checkbox click target so
   stacked rows don't grow tall. Outside the flags section we keep
   the looser 4px padding for accessibility on isolated checkboxes. */
.kaf-section-flags .kaf-checkwrap { padding: 1px 0; }
@media (max-width: 540px) {
    /* Narrow viewport: one checkbox per row everywhere. */
    .kaf-row-check { padding-left: 0; }
    .kaf-section-flags .kaf-row-check { flex: 0 0 100%; }
}

/* Read-only display — used for Created by / Followed-up by /
   error placeholders. Visually distinct from inputs so admins
   know they can't type into it. */
.kaf-readonly {
    display: inline-block;
    padding: 6px 10px; min-height: 18px;
    font-size: 12px; color: #5a5445;
    background: #f5f0e6; border: 1px solid #ece2c4; border-radius: 5px;
}
.kaf-readonly.kaf-error { color: #b54a3a; background: #fff5f3; border-color: #f0d5cf; }

/* Follow-up Completed button — a primary chip in the followup row.
   Done state shows a muted check; disabled state (no row id, locked,
   already done) drops the cursor + dims it. */
.kaf-fu-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; font-size: 11px; font-weight: 500;
    color: #fff; background: #c0a76d; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: background .12s, opacity .12s;
}
.kaf-fu-btn:hover { background: #a88e50; }
.kaf-fu-btn.kaf-fu-done { background: #4caf50; }
.kaf-fu-btn.kaf-fu-disabled {
    background: #d3cfc4; color: #8a8275; cursor: not-allowed;
    pointer-events: none;
}

/* Attachments — list of chips + an Add button. Click on file name
   opens the doc viewer; X removes (chip only — file stays on disk
   until garbage-collected). Add button is dashed-bordered to read as
   "drop zone / call to action" without competing with the Save button. */
.kaf-att-wrap {
    display: flex; flex-direction: column; gap: 6px;
    padding: 6px 0;
}
.kaf-att-list { display: flex; flex-direction: column; gap: 4px; }
.kaf-att-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: #fff; border: 1px solid #e8dec4; border-radius: 4px;
    font-size: 11px; color: #3d3830;
    max-width: 100%;
}
.kaf-att-item i { font-size: 14px; color: #9c7a3c; }
.kaf-att-name {
    flex: 1 1 auto; min-width: 0;
    color: #6b5a2e; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kaf-att-name:hover { text-decoration: underline; }
.kaf-att-x {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 3px; cursor: pointer;
    color: #c0a76d;
}
.kaf-att-x:hover { background: rgba(244,67,54,0.12); color: #f44336; }
.kaf-att-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; font-size: 11px; color: #6b5a2e;
    background: #faf7f0;
    border: 1px dashed #c9a84c; border-radius: 5px;
    cursor: pointer; user-select: none;
    align-self: flex-start;
    transition: background .12s, border-color .12s;
}
.kaf-att-add:hover { background: #f0ebe0; border-style: solid; }
/* Pending attachment chip — file is staged in browser, not uploaded
   yet. Muted background + clock icon so the admin can see at a
   glance which files are pending vs already saved. The "pending"
   tag pill on the right reinforces the state. */
.kaf-att-pending {
    background: #faf4e1;
    border-style: dashed; border-color: #c9a84c;
    color: #6b5a2e;
}
.kaf-att-pending i { color: #c9a84c; }
.kaf-att-pending-tag {
    flex: 0 0 auto;
    padding: 1px 7px; margin-left: 4px;
    font-size: 9px; font-weight: 600;
    color: #9c7a3c; background: #fff;
    border: 1px solid #e8dec4; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .3px;
}

/* Footer — Cancel + Save (or a Lock notice when the row is locked
   for non-owners). Pinned to the bottom so the strip stays visible
   while the body scrolls. */
.kaf-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: #f5f0e6; border-top: 1px solid #e2d7bf;
}
.kaf-save-btn { max-width: 160px; padding: 7px 18px; }
.kaf-save-busy { opacity: 0.7; pointer-events: none; }
.kaf-locked-msg {
    display: inline-flex; align-items: center; gap: 4px;
    color: #b54a3a; background: #fff5f3;
    border: 1px solid #f0d5cf; border-radius: 5px;
    padding: 6px 12px; font-size: 11px;
}
.kaf-locked-msg i { font-size: 13px; }

/* Narrow popup — labels stack above inputs so the row stays readable
   when the right panel is squeezed (e.g. on tablets). */
@media (max-width: 540px) {
    .kaf-row {
        grid-template-columns: 1fr;
        align-items: flex-start; gap: 4px;
    }
    .kaf-label { padding-bottom: 2px; }
}

/* =========================================================================
   Form Fields tab (kfft) — Action Library admin tool. Lives inside the
   kdv tab panel, so the outer chrome (tab nav, panel border) is owned
   by the framework. We just style the table-like grid of pool fields
   and the custom-field builder beneath it.
   ========================================================================= */
.kfft-shell {
    padding: 12px 14px; box-sizing: border-box;
    color: #3d3830; font-size: 12px;
    height: 100%; overflow-y: auto;
}
.kfft-header { margin-bottom: 12px; }
.kfft-title {
    font-size: 13px; font-weight: 600; color: #6b5a2e;
    margin-bottom: 4px;
}
.kfft-title i { vertical-align: middle; font-size: 16px; }
.kfft-action-key {
    color: #9c7a3c; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 400;
}
.kfft-help {
    font-size: 11px; color: #888; line-height: 1.5;
    background: #faf7f0; border: 1px solid #ece2c4; border-radius: 4px;
    padding: 8px 10px;
}
.kfft-help code {
    background: #f0e7d4; padding: 1px 5px; border-radius: 3px;
    font-size: 10.5px; color: #6b5a2e;
}

/* Section label between the predefined and custom field tables. */
.kfft-section-title {
    margin: 16px 0 8px;
    font-size: 11px; font-weight: 600; color: #9c7a3c;
    text-transform: uppercase; letter-spacing: .4px;
}

/* Predefined-fields container — outer wrapper holds groups, each
   group has a small header + a grid of rows. Bordered card so the
   table reads as one unit, not loose rows. */
.kfft-fields {
    background: #fff; border: 1px solid #e2d7bf; border-radius: 6px;
    overflow: hidden;
}
.kfft-group + .kfft-group { border-top: 1px solid #ece2c4; }
.kfft-group-title {
    background: #faf7f0; color: #6b5a2e;
    padding: 6px 12px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1px solid #ece2c4;
}
.kfft-grow {} /* row container — no explicit styling needed, child rows handle */

/* Predefined-row layout — 5 columns, fixed proportions. Header row
   uses the same grid so the columns stay aligned. */
.kfft-row {
    display: grid;
    grid-template-columns: 70px 80px minmax(180px, 1fr) 90px 1fr;
    align-items: center; gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid #f5f0e6;
}
.kfft-row:last-child { border-bottom: 0; }
.kfft-row-head {
    background: #faf4e1;
    font-size: 9.5px; font-weight: 600; color: #9c7a3c;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 5px 12px;
}
.kfft-row-head + .kfft-row { border-top: 0; }

.kfft-c-incl, .kfft-c-req { text-align: center; }
.kfft-c-incl input, .kfft-c-req input,
.kfft-cc-req input {
    width: 15px; height: 15px; cursor: pointer; vertical-align: middle;
}
.kfft-c-name {
    font-size: 12px; color: #3d3830; line-height: 1.3;
}
.kfft-c-name-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px; color: #aaa;
}
.kfft-c-input { text-align: center; }
.kfft-input-pill {
    display: inline-block;
    padding: 1px 7px; font-size: 9.5px; color: #6b5a2e;
    background: #faf4e1; border: 1px solid #e8dec4; border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Inputs in the tab — same look as the action form inputs but a
   touch shorter to fit dense rows. */
.kfft-input {
    width: 100%; height: 28px; box-sizing: border-box;
    border: 1px solid #e2d7bf; border-radius: 4px;
    padding: 0 8px; font-size: 11px;
    background: #fff; color: #3d3830;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.kfft-input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.kfft-cc-row select.kfft-input { padding: 0 6px; }

/* Custom-fields container — re-uses .kfft-row but with a different
   column template tuned for the 6 columns the custom builder needs. */
.kfft-custom {
    background: #fff; border: 1px solid #e2d7bf; border-radius: 6px;
    overflow: hidden;
}
.kfft-custom .kfft-row {
    grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.5fr) 110px 70px minmax(120px, 1fr) 32px;
}
.kfft-custom .kfft-row-head {
    grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.5fr) 110px 70px minmax(120px, 1fr) 32px;
}
.kfft-cc-x { text-align: center; }
.kfft-cc-del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 3px;
    color: #ccc; cursor: pointer; font-size: 14px;
    transition: background .12s, color .12s;
}
.kfft-cc-del:hover { background: rgba(244,67,54,0.12); color: #f44336; }

/* Add-custom-field button — dashed call-to-action under the table. */
.kfft-cc-add {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px;
    padding: 7px 12px; font-size: 11px; color: #6b5a2e;
    background: #faf7f0;
    border: 1px dashed #c9a84c; border-radius: 5px;
    cursor: pointer; user-select: none;
    transition: background .12s, border-style .12s;
}
.kfft-cc-add:hover { background: #f0ebe0; border-style: solid; }

/* Save bar — pinned to the bottom of the tab content. Only one
   button (Save) so we don't need a flex justify-end; align-end + a
   margin-top push it to the right naturally. */
.kfft-foot {
    margin-top: 16px;
    display: flex; justify-content: flex-end; align-items: center;
    padding-top: 10px;
    border-top: 1px solid #ece2c4;
}
.kfft-save-btn { max-width: 220px; padding: 7px 18px; }


/* ====================================================================
 * kn136 — Field Management admin (kprocess_136.php). List + filter
 * bar + 5-tab popup detail. Visual family matches kn133 / kn135 so
 * admins build muscle memory across all admin pages.
 * ==================================================================== */
.kn136-pg {
    width: 100%;
    height: 100%;
    background: #fafaf6;
    color: #222;
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

.kn136-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafaf6;
    border-bottom: 1px solid #ebe6d6;
}
.kn136-ttl {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 600; color: #2a2f3a;
}
.kn136-ttl i { font-size: 20px; color: #bb913b; }
.kn136-total {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    color: #6b521f;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
}
.kn136-head-actions { display: flex; gap: 8px; }

/* Two deliberate rows so nothing wraps unpredictably:
 *   Row 1: status pills + table picker + filltype picker
 *   Row 2: search + search button (full-width search)
 * Each row is its own flex container with align-items:center so the
 * native <select> heights match the pill heights cleanly. */
.kn136-filters {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 18px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn136-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kn136-pills {
    display: inline-flex;
    border: 1px solid #ebe1c4;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    flex: 0 0 auto;
}
.kn136-pill {
    padding: 6px 12px;
    cursor: pointer;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    border-right: 1px solid #ebe1c4;
    transition: background .12s ease, color .12s ease;
}
.kn136-pill:last-child { border-right: 0; }
.kn136-pill:hover { background: #fdfbf5; color: #6b521f; }
.kn136-pill--active { background: #bb913b; color: #fff; }
.kn136-pill--active:hover { background: #a47e2f; color: #fff; }
/* Filter-row selects — fixed width range so they don't grow to fill
 * the row when used inside a flex container with extra space.
 * Explicit height + box-sizing keeps them aligned with the status
 * pills (also ~30px tall) regardless of UA defaults. */
.kn136-select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 28px 0 10px;
    height: 30px;
    line-height: 28px;
    font-size: 12.5px;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 200px;
    min-width: 160px;
    max-width: 260px;
    /* Replace the native chevron so the dropdown looks consistent
     * across browsers + matches the gold theme. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23bb913b' d='M2 4l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}
.kn136-select:hover  { border-color: #bb913b; }
.kn136-select:focus  { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
.kn136-search {
    flex: 1 1 240px;
    min-width: 200px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
}
.kn136-search:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }

/* Multi-combo slots in the filter bar — each wraps a k_multi_combo
 * widget. Fixed width range so they line up cleanly next to the
 * status pills + filltype dropdown. The k-mc-* widget brings its
 * own internals; we just need to give it a sensible footprint. */
.kn136-mc-slot {
    flex: 0 0 auto;
    width: 220px;
    min-width: 180px;
    max-width: 280px;
}
.kn136-mc-slot .k-mc-wrap { width: 100%; }

/* Body — list area */
.kn136-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    background: #fafaf6;
}
.kn136-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}
.kn136-empty i { font-size: 56px; color: #c8c8c8; }
.kn136-empty-ti { font-size: 16px; color: #555; margin-top: 12px; font-weight: 600; }
.kn136-empty-tx {
    font-size: 13px; color: #999; margin-top: 4px; line-height: 1.5;
    max-width: 400px; margin-left: auto; margin-right: auto;
}

/* List table */
.kn136-table-wrap {
    background: #fff;
    border-bottom: 1px solid #ebe6d6;
}
.kn136-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kn136-table thead th {
    position: sticky;
    top: 0;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
    padding: 9px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
}
.kn136-table thead th.kn136-th-num     { text-align: right; }
.kn136-table thead th.kn136-th-pk      { text-align: center; width: 50px; }
.kn136-table thead th.kn136-th-actions { text-align: right; width: 100px; }
/* Absolute row number column — narrow, monospace, faded grey so it
 * sits visually behind the field-data columns instead of competing
 * for attention. */
.kn136-table thead th.kn136-th-rownum {
    width: 56px;
    text-align: right;
    color: #aaa !important;
    padding-right: 12px;
}
.kn136-table td.kn136-td-rownum {
    text-align: right;
    color: #aaa;
    font-family: 'Consolas','Menlo','monospace';
    font-size: 11px;
    padding-right: 12px;
    white-space: nowrap;
}
.kn136-th-sortable { cursor: pointer; user-select: none; }
.kn136-th-sortable:hover { color: #4d3a14; }
.kn136-th-sorted { color: #4d3a14; }
.kn136-th-sortarr { font-size: 14px; vertical-align: middle; margin-left: 2px; color: #bb913b; }

.kn136-table tbody tr {
    border-bottom: 1px solid #f3efe0;
    transition: background .08s ease;
}
.kn136-table tbody tr:last-child { border-bottom: 0; }
.kn136-table tbody tr:hover { background: #fdf6e0; }
.kn136-table tbody tr.kn136-tr--archived { opacity: 0.55; background: #f5f3ec; }
.kn136-table td { padding: 7px 10px; vertical-align: middle; }
.kn136-td-table code,
.kn136-td-field code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 11.5px;
}
.kn136-td-cap   { color: #444; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn136-td-num   { text-align: right; white-space: nowrap; color: #555; }
.kn136-td-pk    { text-align: center; }
.kn136-td-actions { text-align: right; white-space: nowrap; }
.kn136-td-actions .kn136-btn { padding: 3px 6px; }
.kn136-td-actions .kn136-btn i { font-size: 13px; }

/* Issue indicator — red dot icon shown next to fields missing
 * developer/superadmin in their letsee CSV (project rule). */
.kn136-issue {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: #c0392b;
    margin-left: 4px;
    cursor: help;
}
.kn136-issue i { font-size: 14px; }

/* Status chips */
.kn136-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn136-chip--type { background: #eef3fb; color: #2f5891; border-color: #c8d8ee; text-transform: none; font-weight: 500; }
.kn136-chip--pk   { background: #fff7df; color: #856200; border-color: #f0e0a8; }

/* Buttons */
.kn136-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all .12s ease;
}
.kn136-btn:hover { border-color: #bb913b; color: #6b521f; background: #fdfbf5; }
.kn136-btn i { font-size: 16px; }
.kn136-btn--primary { background: #bb913b; border-color: #a47e2f; color: #fff; }
.kn136-btn--primary:hover { background: #a47e2f; border-color: #8c6824; color: #fff; }
.kn136-btn--small { padding: 5px 8px; font-size: 12px; }
.kn136-btn--small i { font-size: 14px; }
.kn136-btn--danger { color: #a8302b; }
.kn136-btn--danger:hover { background: #fbe8e6; border-color: #a8302b; color: #6e1c17; }
.kn136-btn--disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.kn136-btn--loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}
.kn136-btn--loading::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kn136-spin .7s linear infinite;
}
@keyframes kn136-spin { to { transform: rotate(360deg); } }

/* Pagination footer — three flex zones (info | per-page | nav) that
 * each stay nowrap inside, so labels never break off their controls
 * on narrow widths. */
.kn136-foot {
    flex-shrink: 0;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kn136-foot-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.kn136-foot-info-pg  { font-weight: 600; color: #555; }
.kn136-foot-info-tot { color: #888; }
.kn136-page-nav  { display: inline-flex; gap: 6px; flex: 0 0 auto; white-space: nowrap; }

/* Per-page selector — inline label + native select. nowrap so
 * "per page" never wraps off its dropdown on narrow viewports. */
.kn136-perpage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #777;
    font-size: 12px;
    flex: 0 0 auto;
}
.kn136-perpage-prefix,
.kn136-perpage-suffix { color: #888; }
.kn136-perpage select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    height: 26px;
    box-sizing: border-box;
}
.kn136-perpage select:hover { border-color: #bb913b; }
.kn136-perpage select:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }

/* ====================================================================
 * kn137 — Field Datatypes admin (kprocess_137.php). List + popup
 * edit form for the fieldengine_datatypes table. Visual family
 * matches kn135 (Modules admin) — same shell, same buttons, same
 * popup overlay pattern. Most rules below alias kn137-* selectors
 * to existing kn135 rules so we don't duplicate ~300 lines of CSS
 * for visual parity.
 * ==================================================================== */
.kn137-pg                  { width: 100%; height: 100%; background: #fafaf6; color: #222; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; display: flex; flex-direction: column; box-sizing: border-box; position: relative; }
.kn137-head                { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fafaf6; border-bottom: 1px solid #ebe6d6; }
.kn137-ttl                 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #2a2f3a; }
.kn137-ttl i               { font-size: 20px; color: #bb913b; }
.kn137-total               { background: #f5efe0; border: 1px solid #ebe1c4; color: #6b521f; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.kn137-head-actions        { display: flex; gap: 8px; }
.kn137-filters             { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fdfbf5; border-bottom: 1px solid #ebe6d6; flex-wrap: wrap; }
.kn137-pills               { display: inline-flex; border: 1px solid #ebe1c4; border-radius: 5px; overflow: hidden; background: #fff; }
.kn137-pill                { padding: 6px 12px; cursor: pointer; color: #777; font-size: 12px; font-weight: 500; border-right: 1px solid #ebe1c4; transition: background .12s ease, color .12s ease; }
.kn137-pill:last-child     { border-right: 0; }
.kn137-pill:hover          { background: #fdfbf5; color: #6b521f; }
.kn137-pill--active        { background: #bb913b; color: #fff; }
.kn137-pill--active:hover  { background: #a47e2f; color: #fff; }
.kn137-search              { flex: 1 1 220px; min-width: 200px; padding: 7px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; background: #fff; }
.kn137-search:focus        { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
.kn137-body                { flex: 1 1 auto; overflow-y: auto; padding: 0; background: #fafaf6; }
.kn137-empty               { text-align: center; padding: 60px 20px; color: #888; }
.kn137-empty i             { font-size: 56px; color: #c8c8c8; }
.kn137-empty-ti            { font-size: 16px; color: #555; margin-top: 12px; font-weight: 600; }
.kn137-empty-tx            { font-size: 13px; color: #999; margin-top: 4px; line-height: 1.5; max-width: 400px; margin-left: auto; margin-right: auto; }
.kn137-table-wrap          { background: #fff; border-bottom: 1px solid #ebe6d6; }
.kn137-table               { width: 100%; border-collapse: collapse; font-size: 13px; }
.kn137-table thead th      { position: sticky; top: 0; background: #fdfbf5; border-bottom: 1px solid #ebe6d6; padding: 9px 10px; text-align: left; font-size: 11px; font-weight: 600; color: #6b521f; text-transform: uppercase; letter-spacing: 0.04em; z-index: 2; }
.kn137-table thead th.kn137-th-num     { text-align: right; }
.kn137-table thead th.kn137-th-mark    { width: 56px; text-align: center; }
.kn137-table thead th.kn137-th-actions { text-align: right; width: 100px; }
.kn137-table thead th.kn137-th-rownum  { width: 56px; text-align: right; color: #aaa !important; padding-right: 12px; }
.kn137-table td.kn137-td-rownum        { text-align: right; color: #aaa; font-family: 'Consolas','Menlo','monospace'; font-size: 11px; padding-right: 12px; white-space: nowrap; }
/* Sortable column header — same visual cues as kn133 / kn136. */
.kn137-th-sortable                     { cursor: pointer; user-select: none; }
.kn137-th-sortable:hover               { color: #4d3a14; }
.kn137-th-sorted                       { color: #4d3a14; }
.kn137-th-sortarr                      { font-size: 14px; vertical-align: middle; margin-left: 2px; color: #bb913b; }
.kn137-table tbody tr      { border-bottom: 1px solid #f3efe0; transition: background .08s ease; }
.kn137-table tbody tr:hover{ background: #fdf6e0; }
.kn137-table tbody tr.kn137-tr--passive { opacity: 0.65; background: #fafaf6; }
.kn137-table td            { padding: 8px 10px; vertical-align: middle; }
.kn137-td-mark             { text-align: center; }
.kn137-td-num              { text-align: right; white-space: nowrap; color: #555; }
.kn137-td-label            { color: #2a2f3a; font-weight: 500; }
.kn137-td-actions          { text-align: right; white-space: nowrap; }
.kn137-td-actions .kn137-btn { padding: 3px 6px; }
.kn137-td-actions .kn137-btn i { font-size: 13px; }
.kn137-code                { background: #f5efe0; border: 1px solid #ebe1c4; padding: 1px 6px; border-radius: 3px; color: #6b521f; font-size: 11.5px; font-family: 'Consolas','Menlo','monospace'; }
.kn137-mark                { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08); }
.kn137-mark i              { font-size: 18px; }
.kn137-chip                { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10.5px; font-weight: 600; border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.04em; }
.kn137-chip--active        { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }
.kn137-chip--inactive      { background: #f0f0f0; color: #666;    border-color: #d4d4d4; }
.kn137-chip--system        { background: #fff7df; color: #856200; border-color: #f0e0a8; }
.kn137-btn                 { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #444; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; transition: all .12s ease; }
.kn137-btn:hover           { border-color: #bb913b; color: #6b521f; background: #fdfbf5; }
.kn137-btn i               { font-size: 16px; }
.kn137-btn--primary        { background: #bb913b; border-color: #a47e2f; color: #fff; }
.kn137-btn--primary:hover  { background: #a47e2f; border-color: #8c6824; color: #fff; }
.kn137-btn--small          { padding: 5px 8px; font-size: 12px; }
.kn137-btn--small i        { font-size: 14px; }
.kn137-btn--danger         { color: #a8302b; }
.kn137-btn--danger:hover   { background: #fbe8e6; border-color: #a8302b; color: #6e1c17; }
.kn137-btn--locked         { color: #bbb; cursor: not-allowed; pointer-events: none; }
.kn137-btn--loading        { opacity: 0.7; pointer-events: none; position: relative; }
.kn137-btn--loading::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: kn137-spin .7s linear infinite; }
@keyframes kn137-spin      { to { transform: rotate(360deg); } }

/* Modal popup — same pattern as kn135. */
.kn137-form-slot:empty     { display: none; }
.kn137-form-slot:not(:empty) { position: absolute; inset: 0; z-index: 60; background: rgba(20, 18, 12, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 30px 20px; overflow-y: auto; animation: kn137-fade .15s ease-out both; }
@keyframes kn137-fade      { from { opacity: 0; } to { opacity: 1; } }
.kn137-form                { background: #fff; border: 1px solid #ebe6d6; border-radius: 8px; overflow: hidden; width: min(820px, 100%); max-height: calc(100vh - 80px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10); animation: kn137-pop .18s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes kn137-pop       { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.kn137-form-head           { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fdfbf5; border-bottom: 1px solid #ebe6d6; }
.kn137-form-ttl            { font-weight: 600; color: #2a2f3a; display: flex; align-items: center; gap: 10px; }
.kn137-form-ttl i          { font-size: 18px; color: #bb913b; }
.kn137-form-close          { cursor: pointer; color: #888; font-size: 20px; line-height: 1; padding: 4px; border-radius: 4px; }
.kn137-form-close:hover    { background: rgba(0,0,0,0.06); color: #333; }
.kn137-form-body           { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.kn137-form-foot           { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #fafaf6; border-top: 1px solid #ebe6d6; }
.kn137-form-grid           { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; align-items: start; }
.kn137-section-ttl         { margin-top: 14px; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; color: #6b521f; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 6px; border-bottom: 1px solid #f3efe0; display: flex; align-items: center; gap: 6px; }
.kn137-section-ttl i       { color: #bb913b; font-size: 14px; }
.kn137-field               { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kn137-field > span        { font-size: 11px; font-weight: 600; color: #6b521f; letter-spacing: 0.02em; }
.kn137-field > span small  { font-weight: 400; color: #999; font-size: 10px; margin-left: 4px; }
.kn137-field-help          { font-size: 11px; color: #999; line-height: 1.4; margin-top: 2px; }
.kn137-input               { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 7px 10px; font-size: 13px; color: #222; width: 100%; box-sizing: border-box; font-family: inherit; }
.kn137-input:focus         { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
.kn137-input[readonly]     { background: #fafaf6; color: #888; cursor: not-allowed; }
.kn137-select              { cursor: pointer; }
.kn137-textarea            { font-family: 'Consolas','Menlo','monospace'; font-size: 12px; line-height: 1.5; resize: vertical; min-height: 50px; }
.kn137-color-row           { display: flex; gap: 8px; align-items: stretch; }
.kn137-color-picker        { width: 44px; height: 36px; padding: 2px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; background: #fff; flex: 0 0 auto; }

/* Pagination footer — three flex zones (info | per-page | nav). */
.kn137-foot {
    flex-shrink: 0;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kn137-foot-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.kn137-foot-info-pg  { font-weight: 600; color: #555; }
.kn137-foot-info-tot { color: #888; }
.kn137-page-nav      { display: inline-flex; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.kn137-perpage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #777;
    font-size: 12px;
    flex: 0 0 auto;
}
.kn137-perpage-prefix,
.kn137-perpage-suffix { color: #888; }
.kn137-perpage select {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    font-family: inherit;
    height: 26px;
    box-sizing: border-box;
}
.kn137-perpage select:hover { border-color: #bb913b; }
.kn137-perpage select:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }

/* =====================================================================
 * kn138 — Tables Registry admin (kprocess_138). Mirror of kn137 with
 * a couple of additions: type chips (real/virtual), info chip for the
 * field-count badge, primary-soft button for the Promote action, and
 * meta pills for synced_at / promoted_at metadata.
 * =====================================================================*/
.kn138-pg                  { width: 100%; height: 100%; background: #fafaf6; color: #222; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; display: flex; flex-direction: column; box-sizing: border-box; position: relative; }
.kn138-head                { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fafaf6; border-bottom: 1px solid #ebe6d6; }
.kn138-ttl                 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #2a2f3a; }
.kn138-ttl i               { font-size: 20px; color: #bb913b; }
.kn138-total               { background: #f5efe0; border: 1px solid #ebe1c4; color: #6b521f; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.kn138-head-actions        { display: flex; gap: 8px; }
.kn138-filters             { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fdfbf5; border-bottom: 1px solid #ebe6d6; flex-wrap: wrap; }
.kn138-pills               { display: inline-flex; border: 1px solid #ebe1c4; border-radius: 5px; overflow: hidden; background: #fff; }
.kn138-pill                { padding: 6px 12px; cursor: pointer; color: #777; font-size: 12px; font-weight: 500; border-right: 1px solid #ebe1c4; transition: background .12s ease, color .12s ease; }
.kn138-pill:last-child     { border-right: 0; }
.kn138-pill:hover          { background: #fdfbf5; color: #6b521f; }
.kn138-pill--active        { background: #bb913b; color: #fff; }
.kn138-pill--active:hover  { background: #a47e2f; color: #fff; }
.kn138-search              { flex: 1 1 220px; min-width: 200px; padding: 7px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; background: #fff; }
.kn138-search:focus        { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
.kn138-filter-select       { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; background: #fff; color: #444; cursor: pointer; min-width: 160px; max-width: 220px; flex: 0 0 auto; box-sizing: border-box; }
.kn138-filter-select:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
/* The global k_select_init wraps any <select> with 6+ options in a
 * .k-sel-wrap widget styled width:100%. Inside our flex filter bar
 * that makes the module dropdown grab the whole row and push the
 * search box off-screen. Constrain it back to dropdown-shaped width
 * here without touching the global widget for other surfaces. */
.kn138-filters .k-sel-wrap { width: auto; min-width: 180px; max-width: 240px; flex: 0 0 auto; }
.kn138-body                { flex: 1 1 auto; overflow-y: auto; padding: 0; background: #fafaf6; }
.kn138-empty               { text-align: center; padding: 60px 20px; color: #888; }
.kn138-empty i             { font-size: 56px; color: #c8c8c8; }
.kn138-empty-ti            { font-size: 16px; color: #555; margin-top: 12px; font-weight: 600; }
.kn138-empty-tx            { font-size: 13px; color: #999; margin-top: 4px; line-height: 1.5; max-width: 460px; margin-left: auto; margin-right: auto; }
.kn138-table-wrap          { background: #fff; border-bottom: 1px solid #ebe6d6; }
.kn138-table               { width: 100%; border-collapse: collapse; font-size: 13px; }
.kn138-table thead th      { position: sticky; top: 0; background: #fdfbf5; border-bottom: 1px solid #ebe6d6; padding: 9px 10px; text-align: left; font-size: 11px; font-weight: 600; color: #6b521f; text-transform: uppercase; letter-spacing: 0.04em; z-index: 2; }
.kn138-table thead th.kn138-th-num     { text-align: right; }
.kn138-table thead th.kn138-th-mark    { width: 56px; text-align: center; }
.kn138-table thead th.kn138-th-actions { text-align: right; width: 130px; }
.kn138-table thead th.kn138-th-rownum  { width: 56px; text-align: right; color: #aaa !important; padding-right: 12px; }
.kn138-table td.kn138-td-rownum        { text-align: right; color: #aaa; font-family: 'Consolas','Menlo','monospace'; font-size: 11px; padding-right: 12px; white-space: nowrap; }
.kn138-th-sortable                     { cursor: pointer; user-select: none; }
.kn138-th-sortable:hover               { color: #4d3a14; }
.kn138-th-sorted                       { color: #4d3a14; }
.kn138-th-sortarr                      { font-size: 14px; vertical-align: middle; margin-left: 2px; color: #bb913b; }
.kn138-table tbody tr      { border-bottom: 1px solid #f3efe0; transition: background .08s ease; }
.kn138-table tbody tr:hover{ background: #fdf6e0; }
.kn138-table tbody tr.kn138-tr--passive { opacity: 0.65; background: #fafaf6; }
.kn138-table td            { padding: 8px 10px; vertical-align: middle; }
.kn138-td-mark             { text-align: center; }
.kn138-td-num              { text-align: right; white-space: nowrap; color: #555; }
.kn138-td-label            { color: #2a2f3a; font-weight: 500; }
.kn138-td-actions          { text-align: right; white-space: nowrap; }
.kn138-td-actions .kn138-btn { padding: 3px 6px; }
.kn138-td-actions .kn138-btn i { font-size: 13px; }
.kn138-code                { background: #f5efe0; border: 1px solid #ebe1c4; padding: 1px 6px; border-radius: 3px; color: #6b521f; font-size: 11.5px; font-family: 'Consolas','Menlo','monospace'; }
.kn138-mark                { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08); }
.kn138-mark i              { font-size: 18px; }
.kn138-chip                { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10.5px; font-weight: 600; border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.04em; }
.kn138-chip--active        { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }
.kn138-chip--inactive      { background: #f0f0f0; color: #666;    border-color: #d4d4d4; }
.kn138-chip--info          { background: #e6f0ff; color: #244a82; border-color: #b6cde8; }
.kn138-chip--type-real     { background: #e6f3e6; color: #2d6a2d; border-color: #b6d6b6; }
.kn138-chip--type-virtual  { background: #f0eaff; color: #5a3aa3; border-color: #c8b8e8; }
.kn138-btn                 { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #444; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; transition: all .12s ease; }
.kn138-btn:hover           { border-color: #bb913b; color: #6b521f; background: #fdfbf5; }
.kn138-btn i               { font-size: 16px; }
.kn138-btn--primary        { background: #bb913b; border-color: #a47e2f; color: #fff; }
.kn138-btn--primary:hover  { background: #a47e2f; border-color: #8c6824; color: #fff; }
.kn138-btn--primary-soft        { color: #5a3aa3; border-color: #c8b8e8; }
.kn138-btn--primary-soft:hover  { background: #f0eaff; border-color: #5a3aa3; color: #3f2773; }
.kn138-btn--small          { padding: 5px 8px; font-size: 12px; }
.kn138-btn--small i        { font-size: 14px; }
.kn138-btn--danger         { color: #a8302b; }
.kn138-btn--danger:hover   { background: #fbe8e6; border-color: #a8302b; color: #6e1c17; }
.kn138-btn--disabled       { color: #bbb; cursor: not-allowed; pointer-events: none; opacity: 0.6; }
.kn138-btn--loading        { opacity: 0.7; pointer-events: none; position: relative; }
.kn138-btn--loading::after { content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: kn138-spin .7s linear infinite; }
@keyframes kn138-spin      { to { transform: rotate(360deg); } }

/* Modal popup — same overlay pattern as kn137. */
.kn138-form-slot:empty     { display: none; }
.kn138-form-slot:not(:empty) { position: absolute; inset: 0; z-index: 60; background: rgba(20, 18, 12, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 30px 20px; overflow-y: auto; animation: kn138-fade .15s ease-out both; }
@keyframes kn138-fade      { from { opacity: 0; } to { opacity: 1; } }
.kn138-form                { background: #fff; border: 1px solid #ebe6d6; border-radius: 8px; overflow: hidden; width: min(820px, 100%); max-height: calc(100vh - 80px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10); animation: kn138-pop .18s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes kn138-pop       { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.kn138-form-head           { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fdfbf5; border-bottom: 1px solid #ebe6d6; }
.kn138-form-ttl            { font-weight: 600; color: #2a2f3a; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kn138-form-ttl i          { font-size: 18px; color: #bb913b; }
.kn138-form-close          { cursor: pointer; color: #888; font-size: 20px; line-height: 1; padding: 4px; border-radius: 4px; }
.kn138-form-close:hover    { background: rgba(0,0,0,0.06); color: #333; }
.kn138-form-body           { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.kn138-form-foot           { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #fafaf6; border-top: 1px solid #ebe6d6; }
.kn138-form-grid           { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; align-items: start; }
.kn138-section-ttl         { margin-top: 14px; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; color: #6b521f; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 6px; border-bottom: 1px solid #f3efe0; display: flex; align-items: center; gap: 6px; }
.kn138-section-ttl i       { color: #bb913b; font-size: 14px; }
.kn138-field               { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kn138-field > span        { font-size: 11px; font-weight: 600; color: #6b521f; letter-spacing: 0.02em; }
.kn138-field > span small  { font-weight: 400; color: #999; font-size: 10px; margin-left: 4px; }
.kn138-field-help          { font-size: 11px; color: #999; line-height: 1.4; margin-top: 2px; }
.kn138-input               { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 7px 10px; font-size: 13px; color: #222; width: 100%; box-sizing: border-box; font-family: inherit; }
.kn138-input:focus         { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
.kn138-input[readonly]     { background: #fafaf6; color: #888; cursor: not-allowed; }
.kn138-select              { cursor: pointer; }
.kn138-textarea            { font-family: 'Consolas','Menlo','monospace'; font-size: 12px; line-height: 1.5; resize: vertical; min-height: 50px; }
.kn138-color-row           { display: flex; gap: 8px; align-items: stretch; }
.kn138-color-picker        { width: 44px; height: 36px; padding: 2px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; background: #fff; flex: 0 0 auto; }

/* Hint banners — info / warn variants on top of the kn136-perms-hint
 * shape so the form can flag drift between registry type and the
 * actual MySQL state. */
.kn138-perms-hint          { padding: 10px 12px; background: #fff7df; border: 1px solid #f0e0a8; border-radius: 5px; color: #6b521f; font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.kn138-perms-hint i        { vertical-align: text-bottom; margin-right: 4px; }
.kn138-perms-hint b        { color: #4d3a14; }
.kn138-perms-hint code     { background: #fff; border: 1px solid #ebe1c4; padding: 1px 5px; border-radius: 3px; color: #6b521f; font-size: 11px; }
.kn138-info-hint           { background: #e6f0ff; border-color: #b6cde8; color: #244a82; }
.kn138-info-hint b         { color: #163259; }
.kn138-warn-hint           { background: #fde8e6; border-color: #f1b6ae; color: #7a1f17; }
.kn138-warn-hint b         { color: #4d100b; }

/* Meta pills under the DB-hints section — synced_at / promoted_at
 * provenance, read-only. */
.kn138-meta-row            { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.kn138-meta-pill           { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #fafaf6; border: 1px solid #ebe6d6; border-radius: 12px; font-size: 11px; color: #777; }
.kn138-meta-pill i         { font-size: 13px; color: #bb913b; }

/* Promote popup — DDL preview block. Monospace, scrollable, dark
 * surface so the admin's eye reads it as code, not prose. */
.kn138-ddl-preview {
    background: #1f1c14;
    color: #e8dcb5;
    border: 1px solid #3a3324;
    border-radius: 5px;
    padding: 12px 14px;
    margin: 6px 0 12px;
    font-family: 'Consolas','Menlo','monospace';
    font-size: 12px;
    line-height: 1.55;
    overflow-x: auto;
    max-height: 380px;
    overflow-y: auto;
    white-space: pre;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}

/* Pagination footer — same shape as kn137. */
.kn138-foot                { flex-shrink: 0; background: #fafaf6; border-top: 1px solid #ebe6d6; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kn138-foot-info           { display: inline-flex; align-items: center; gap: 6px; color: #777; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.kn138-foot-info-pg        { font-weight: 600; color: #555; }
.kn138-foot-info-tot       { color: #888; }
.kn138-page-nav            { display: inline-flex; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.kn138-perpage             { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #777; font-size: 12px; flex: 0 0 auto; }
.kn138-perpage-prefix,
.kn138-perpage-suffix      { color: #888; }
.kn138-perpage select      { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 3px 8px; font-size: 12px; color: #444; cursor: pointer; font-family: inherit; height: 26px; box-sizing: border-box; }
.kn138-perpage select:hover { border-color: #bb913b; }
.kn138-perpage select:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }

/* Modal popup — same overlay pattern as kn133 / kn135 */
.kn136-form-slot:empty { display: none; }
.kn136-form-slot:not(:empty) {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(20, 18, 12, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
    animation: kn136-fade .15s ease-out both;
}
/* Secondary slot — overlays on top of the primary detail popup so
   "+ Create new table" doesn't clobber in-flight edits. Higher
   z-index, slightly darker backdrop to visually layer over primary. */
.kn136-subform-slot:not(:empty) {
    z-index: 75;
    background: rgba(20, 18, 12, 0.55);
}
@keyframes kn136-fade { from { opacity: 0; } to { opacity: 1; } }
.kn136-form {
    background: #fff;
    border: 1px solid #ebe6d6;
    border-radius: 8px;
    overflow: hidden;
    width: min(820px, 100%);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10);
    animation: kn136-pop .18s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes kn136-pop {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.kn136-form-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn136-form-ttl {
    font-weight: 600;
    color: #2a2f3a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kn136-form-ttl i { font-size: 18px; color: #bb913b; }
.kn136-form-ttl code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 6px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 12px;
}
.kn136-form-cap { color: #888; font-weight: 500; }
.kn136-form-close {
    cursor: pointer;
    color: #888;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}
.kn136-form-close:hover { background: rgba(0,0,0,0.06); color: #333; }

/* Tab strip inside the popup — 5 tabs, click switches the active
 * pane. The active tab gets the gold underline + bolder color. */
.kn136-tabs {
    flex: 0 0 auto;
    display: flex;
    border-bottom: 1px solid #ebe6d6;
    background: #fafaf6;
    overflow-x: auto;
}
.kn136-tab {
    padding: 10px 14px;
    cursor: pointer;
    color: #888;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.kn136-tab:hover { color: #6b521f; background: #fdfbf5; }
.kn136-tab i { font-size: 14px; }
.kn136-tab--active {
    color: #4d3a14;
    border-bottom-color: #bb913b;
    background: #fff;
    font-weight: 600;
}
.kn136-tab--active i { color: #bb913b; }

.kn136-form-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}
.kn136-form-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: #fafaf6;
    border-top: 1px solid #ebe6d6;
}
.kn136-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
    align-items: start;
}
.kn136-perms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.kn136-section-ttl {
    margin-top: 14px;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6b521f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3efe0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn136-section-ttl i { color: #bb913b; font-size: 14px; }

.kn136-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.kn136-field > span {
    font-size: 11px;
    font-weight: 600;
    color: #6b521f;
    letter-spacing: 0.02em;
}
.kn136-field > span small {
    font-weight: 400;
    color: #999;
    font-size: 10px;
    margin-left: 4px;
}
.kn136-input {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 13px;
    color: #222;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.kn136-input:focus { outline: none; border-color: #bb913b; box-shadow: 0 0 0 2px rgba(187,145,59,0.15); }
.kn136-input[readonly] { background: #fafaf6; color: #888; cursor: not-allowed; }
/* Helper text under a select / input — small grey line that explains
 * the active datatype's description in the General tab. */
.kn136-field-help {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
    margin-top: 2px;
}
.kn136-textarea {
    font-family: 'Consolas','Menlo','monospace';
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
}

/* --- General-tab table-name dropdown + side button ----------------
 * The dropdown is paired with a "+ New table" button that opens the
 * inline create-table popup. Lays out as a single row that wraps on
 * narrow screens. */
.kn136-tn-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
}
.kn136-tn-select { flex: 1 1 auto; min-width: 200px; }
.kn136-tn-newbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid #ebe1c4;
    background: #fdfbf5;
    color: #6b521f;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    transition: background .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.kn136-tn-newbtn:hover {
    background: #f5efe0;
    border-color: #d6c79a;
    color: #4d3a14;
}
.kn136-tn-newbtn i { font-size: 14px; }

/* Per-row metadata strip under the dropdown — type chip + module +
 * description. Same compact styling as .kn136-field-help with chip
 * accents per type. */
.kn136-tn-help {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.kn136-tn-help-warn { color: #a14a14; }
.kn136-tn-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kn136-tn-chip-real {
    background: #e6f3e6;
    border: 1px solid #b6d6b6;
    color: #2d6a2d;
}
.kn136-tn-chip-virtual {
    background: #f0eaff;
    border: 1px solid #c8b8e8;
    color: #5a3aa3;
}
.kn136-tn-chip-orphan {
    background: #fff1cf;
    border: 1px solid #f0d68a;
    color: #8a5a14;
}

/* Narrow variant of .kn136-form for the create-table popup — we
 * don't need the full 820px the detail popup uses. */
.kn136-form-narrow { width: min(560px, 100%); }

/* Permissions tab hint banner */
.kn136-perms-hint {
    padding: 10px 12px;
    background: #fff7df;
    border: 1px solid #f0e0a8;
    border-radius: 5px;
    color: #6b521f;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.kn136-perms-hint i { color: #b58a1c; vertical-align: text-bottom; margin-right: 4px; }
.kn136-perms-hint b { color: #4d3a14; }
.kn136-perms-hint code {
    background: #fff;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 11px;
}

/* --- Bulk Permissions popup ---------------------------------------
 * Two extra clusters specific to this popup: the 7-column let* check
 * grid (kn136-bulk-perms) and the three radio "action cards" with
 * an icon + label + description (kn136-bulk-actions). Everything
 * else inside the popup reuses the existing form / grid / button
 * styles. */
.kn136-bulk-perms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px 12px;
    margin-bottom: 6px;
}
.kn136-bulk-perm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid #ebe6d6;
    border-radius: 5px;
    cursor: pointer;
    background: #fff;
    transition: background .12s ease, border-color .12s ease;
}
.kn136-bulk-perm:hover { background: #fdfbf5; border-color: #bb913b; }
.kn136-bulk-perm input[type="checkbox"] {
    accent-color: #bb913b;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.kn136-bulk-perm span {
    font-size: 12.5px;
    font-weight: 500;
    color: #4d3a14;
    flex: 1 1 auto;
}
.kn136-bulk-perm code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 10.5px;
}

/* Three "action cards" (Grant / Revoke / Mirror). Each card holds a
 * radio + icon + bold label + a one-line description. The whole tile
 * is clickable thanks to the wrapping <label>. */
.kn136-bulk-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}
.kn136-bulk-action {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "radio icon label"
        "radio icon desc";
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 10px 12px;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.kn136-bulk-action:hover { background: #fdfbf5; border-color: #bb913b; }
.kn136-bulk-action input[type="radio"] {
    grid-area: radio;
    accent-color: #bb913b;
    width: 14px;
    height: 14px;
    align-self: center;
}
.kn136-bulk-action i {
    grid-area: icon;
    font-size: 22px;
    color: #bb913b;
}
.kn136-bulk-action-label {
    grid-area: label;
    font-size: 13px;
    font-weight: 600;
    color: #2a2f3a;
}
.kn136-bulk-action-desc {
    grid-area: desc;
    font-size: 11.5px;
    color: #888;
    line-height: 1.4;
}
.kn136-bulk-action input[type="radio"]:checked ~ * { color: inherit; }
.kn136-bulk-action:has(input[type="radio"]:checked) {
    background: #fdfbf5;
    border-color: #bb913b;
    box-shadow: 0 0 0 2px rgba(187,145,59,0.15);
}
.kn136-bulk-action:has(input[type="radio"]:checked) .kn136-bulk-action-label { color: #4d3a14; }

/* --- Issue Sweeper popup -------------------------------------------
 * Six category blocks stacked vertically. Each block: header bar
 * (icon + title + count chip + optional Auto-fix button) + a short
 * description + a list of offender rows (clickable to drill into
 * the field's detail popup).
 * --------------------------------------------------------------- */
.kn136-sw-total {
    background: #fdecea;
    color: #913129;
    border: 1px solid #f0c7c0;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
}
.kn136-sw-allgood {
    text-align: center;
    padding: 50px 20px;
    color: #2c6b2c;
}
.kn136-sw-allgood i {
    font-size: 56px;
    color: #4d9a4d;
}
.kn136-sw-allgood-ti { font-size: 18px; font-weight: 600; color: #1d6420; margin-top: 12px; }
.kn136-sw-allgood-tx { font-size: 13px; color: #888; margin-top: 6px; line-height: 1.5; max-width: 480px; margin-left: auto; margin-right: auto; }

.kn136-sw-sec {
    margin-bottom: 14px;
    border: 1px solid #ebe6d6;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.kn136-sw-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fdfbf5;
    border-bottom: 1px solid #ebe6d6;
}
.kn136-sw-sec-head i { font-size: 18px; color: #bb913b; }
.kn136-sw-sec-ti { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: #2a2f3a; }
.kn136-sw-sec-count {
    background: #f0f0f0;
    color: #666;
    border: 1px solid #d4d4d4;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}
/* Section colour-codes by state — has-issues vs ok */
.kn136-sw-sec--has .kn136-sw-sec-head { background: #fdf3f1; border-bottom-color: #f0c7c0; }
.kn136-sw-sec--has .kn136-sw-sec-head i { color: #c0392b; }
.kn136-sw-sec--has .kn136-sw-sec-count { background: #fdecea; color: #913129; border-color: #f0c7c0; }
.kn136-sw-sec--ok  .kn136-sw-sec-head { background: #f3f9f3; border-bottom-color: #c5e3c1; }
.kn136-sw-sec--ok  .kn136-sw-sec-head i { color: #4d9a4d; }
.kn136-sw-sec--ok  .kn136-sw-sec-count { background: #e3f5e7; color: #1d6420; border-color: #b6dcb0; }

.kn136-sw-desc {
    padding: 10px 12px;
    background: #fafaf6;
    border-bottom: 1px solid #f3efe0;
    font-size: 12px;
    color: #777;
    line-height: 1.55;
}
.kn136-sw-desc code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 11px;
}
.kn136-sw-desc b { color: #4d3a14; }

.kn136-sw-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
}
.kn136-sw-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 12.5px;
    color: #444;
    transition: background .08s ease;
    word-break: break-word;
}
.kn136-sw-row:hover { background: #fdfbf5; }
.kn136-sw-row i { color: #bb913b; font-size: 14px; flex: 0 0 auto; }
.kn136-sw-row code {
    background: #f5efe0;
    border: 1px solid #ebe1c4;
    padding: 1px 5px;
    border-radius: 3px;
    color: #6b521f;
    font-size: 11.5px;
}
.kn136-sw-row-extra { color: #888; font-size: 11px; margin-left: 4px; }
.kn136-sw-row-extra code {
    background: #fff;
    border: 1px solid #f0e0a8;
    color: #6b521f;
}
.kn136-sw-row--order { cursor: default; }
.kn136-sw-row--order:hover { background: transparent; }
.kn136-sw-row--order i { color: #c0392b; }
.kn136-sw-more {
    padding: 6px 14px;
    font-size: 11.5px;
    color: #999;
    font-style: italic;
    border-top: 1px dashed #ebe6d6;
}

/* ============================================================
   kn801 — dynamic charge sections (Phase 3)
   Renders one section per non-RC charge type for a prospect.
   ============================================================ */
.kn801-charge-section .kdv-section-hdr {
    /* subtle accent so charge sections feel distinct from
       Identity / Property without breaking layout rhythm */
    background: linear-gradient(90deg, rgba(122,106,217,0.045), transparent 55%);
}
.kn801-charge-section .kdv-section-hdr > i {
    /* color is set inline from rchargetype_color */
    font-size: 16px;
    margin-right: 6px;
}
.kn801-charge-ar {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 12px;
    color: #888;
    margin-left: 8px;
    direction: rtl;
    font-weight: 400;
}
.kn801-charge-rowtitle {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #6b6b6b;
    padding: 6px 4px 2px;
    border-top: 1px dashed #ececec;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn801-charge-rowtitle:first-child {
    border-top: none;
    margin-top: 0;
}
.kn801-charge-rowtitle i { color: #888; }

.kn801-charge-status {
    display: inline-block;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 10px;
    background: #f1efe6;
    color: #4f4f4f;
}
.kn801-charge-status.is-received  { background: #dff5e3; color: #1f7a3a; }
.kn801-charge-status.is-cancelled { background: #fde4e4; color: #a23131; }
.kn801-charge-status.is-overdue   { background: #fde9d2; color: #8a4d10; }

/* ============================================================
   kn801 — Rents and Payments inline charge sub-blocks
   (DP / BD / SC / CC / KH appended under the rent block)
   ============================================================ */
.kn801-rsub {
    /* Stays inside the Rents and Payments kdv-grid via kdv-w-full */
    border-top: 1px dashed #ece4cc;
    padding-top: 10px;
    margin-top: 6px;
}
.kn801-rsub-hdr {
    font-size: 12px;
    font-weight: 700;
    color: #6b6b6b;
    margin-bottom: 8px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* ============================================================
   kn801 — Inclusions chips (rprospects_include CSV → chips)
   ============================================================ */
.kn801-incl {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.kn801-incl-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: #4a4435;
    background: #f5efde;
    border: 1px solid #e7dcb6;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
/* Not-selected variant — same shape, muted palette so the master option
   list reads as "here are all the options; these are the ones NOT
   picked" without pushing false emphasis. Keeps the selected chips
   visually loud. */
.kn801-incl-chip.kn801-incl-chip-off {
    color: #a9a08a;
    background: #fbf9f2;
    border-color: #ece5cf;
    font-weight: 500;
    opacity: 0.85;
}

/* Tenant-provenance badge at top of Customer section — reads at a glance
   whether the row is 'Existing Tenant' (has an rtenants match, green)
   or 'New Prospect' (no prior tenancy, gold). Inline chip inside a
   full-width kdv-field so the layout stays flush with the section grid. */
.kn801-tenant-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}
.kn801-tenant-badge i { font-size: 15px; }
.kn801-tenant-badge.kn801-tenant-existing {
    color: #1f6b3a;
    background: #e5f4e9;
    border-color: #b7dcc2;
}
.kn801-tenant-badge.kn801-tenant-new {
    color: #7a5a1a;
    background: #fbf1d7;
    border-color: #e7d59b;
}
/* Neutral variant used for auxiliary chips on the Customer badge row —
   Branch chip today, room for other context (agent, source) later. */
.kn801-tenant-badge.kn801-tenant-branch {
    color: #5c4f2b;
    background: #f5f0e6;
    border-color: #e6ddc4;
}

/* Company Details mini-card (rendered when contract type = Company) —
   compact 2-col grid inside the Customer section under the badge row. */
.kn801-co-card {
    background: #fdfaf1;
    border: 1px solid #e6ddc4;
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0 6px;
}
.kn801-co-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: #f5f0e6;
    border-bottom: 1px solid #e6ddc4;
    color: #7a6a3a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.kn801-co-hdr i { color: #bd9e4d; font-size: 15px; }
.kn801-co-body { padding: 6px 0; }
.kn801-co-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 5px 14px;
    font-size: 12px;
    border-bottom: 1px solid #f0e9d4;
}
.kn801-co-row:last-child { border-bottom: none; }
.kn801-co-lbl { color: #8a7940; font-weight: 600; letter-spacing: 0.2px; }
.kn801-co-val { color: #3d3830; word-break: break-word; }

/* Contact snapshot card — mirrors what the operator entered on the
   form at request time. Sits inside the Customer section under the
   provenance badge so the two read as a unit. Kept visually distinct
   from the regular kdv-field grid via its own card shell. */
.kn801-snap-card {
    background: #fbfaf5;
    border: 1px solid #e7dcb6;
    border-radius: 6px;
    overflow: hidden;
    margin: 4px 0 6px;
}
.kn801-snap-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f4efd9;
    border-bottom: 1px solid #e7dcb6;
    color: #7a6a3a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.kn801-snap-hdr i { color: #bd9e4d; font-size: 15px; }
.kn801-snap-body { padding: 6px 0; }
.kn801-snap-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 5px 14px;
    font-size: 12px;
    border-bottom: 1px solid #f0e9d4;
}
.kn801-snap-row:last-child { border-bottom: none; }
.kn801-snap-lbl {
    color: #8a7940;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.kn801-snap-val {
    color: #3d3830;
    word-break: break-word;
}

/* ============================================================================
   kprocess_72 — "New Contract Request — Quick" wizard form
   Mirrors the Add Module (kprocess_117) chrome EXACTLY: same #fafaf6 popup
   bg, k108-panel-header for the title bar, k114-btn-close + k114-btn-primary
   for the footer buttons, k116-form-card-style white card for the body.
   We just style what's NEW here — progress bar, wizard step nav, validation
   highlights — and override the legacy draw_insert_form output so its fields
   read like k116 fields.
   ============================================================================ */

/* ----- Top progress bar (full width, below k108 header) ----- */
.qrq-progress-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px 6px;
    background: #f5f0e6;
    border-bottom: 1px solid #e2d7bf;
    flex-shrink: 0;
}
.qrq-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: #8a7a56;
    margin: 0 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}
.qrq-progress-meta #qrqProgressPct { color: #bd9e4d; }
.qrq-progress-track {
    height: 5px;
    background: #ede4cd;
    border-radius: 3px;
    overflow: hidden;
}
.qrq-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #bd9e4d 0%, #d4b366 100%);
    border-radius: 3px;
    transition: width .35s ease;
}

/* ----- Body container (flex row: left nav + right pane) ----- */
/* Popup root — replaces the inline style="background:#fafaf6;display:flex;flex-direction:column;" */
.qrq-popup {
    background: #fafaf6;
    display: flex;
    flex-direction: column;
}

/* Body container — replaces inline style on the body wrapper */
.qrq-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    background: #fafaf6;
    overflow: hidden;
}

/* Footer bar — Cancel + Reset on the LEFT, Previous + Next/Submit on the RIGHT.
   space-between separates the two .qrq-footer-* groups; each group is its own
   inner flex row so the buttons within still cluster with gap:6px. */
.qrq-popup .qrq-footer {
    background: #f5f0e6 !important;
    border-top: 1px solid #e8dec0 !important;
    padding: 0 12px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
.qrq-popup .qrq-footer-left,
.qrq-popup .qrq-footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Submit/Next button sizing — replaces inline style on #frm_BtSubmit */
.qrq-popup .qrq-footer .k114-btn-primary {
    max-width: 140px;
    padding: 6px 18px;
}
/* The bx icon inside the Previous button — replaces inline vertical-align */
.qrq-popup .qrq-prev-btn .bx { vertical-align: middle; }
.qrq-body > div:first-child {
    /* Left wizard nav */
    width: 32% !important;
    flex-shrink: 0;
    background: #fafaf6;
    border-right: 1px solid #e2d7bf;
    padding: 12px 0;
    overflow-y: auto;
    height: auto !important;
    float: none !important;
}

/* ----- Right pane — holds the card. The pane itself does NOT scroll —
   scrolling happens INSIDE the card on its inner wrapper, so the card
   border, header and footer all stay locked in place while only the
   form fields move when content overflows. */
.qrq-form {
    flex: 1;
    min-width: 0;
    background: #fafaf6;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden !important;     /* no scrolling on the outer pane */
    height: auto !important;
    float: none !important;
    display: flex;
    flex-direction: column;
}

/* ----- Section card — k116-form-card aesthetic ----- */
.qrq-form > div[id^="pmm"] {
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 10px;
    padding: 16px;
    margin: 0;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    overflow: visible !important;
    display: flow-root;     /* contain floated children */
}
/* Inner wrapper INSIDE each card — this is the scroll container.
   flex layout with column-gap so multi-column rows fill 100% exactly.
   The margin-right/padding-right trick lets the scrollbar (when present)
   sit ~10px to the right of the field content, while WITHOUT scrollbar
   the field content still reaches the card's content edge cleanly:
     • padding-right:10 → field content shrinks 10px from right
     • margin-right:-10 → wrapper extends 10px into card's own padding
   Net: visible field area stays the same → no extra cap when no scroll,
   but when scroll appears the bar sits 10px right of the content. */
.qrq-form > div[id^="pmm"] > div {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: 14px;
    row-gap: 0;
    /* Push scrollbar further right — extends 13 px into the card's 16 px
       right-padding, so the scrollbar sits ~3 px from the card border
       (small cap between scrollbar and border). Padding-right cancels
       so field content position is unchanged. */
    padding-right: 13px;
    margin-right: -13px;
    scrollbar-width: thin;
    scrollbar-color: #cdb985 transparent;
}
/* Custom WebKit scrollbar — thin, gold, inset by a couple of px so the
   thumb doesn't kiss the card edge when present. The track is transparent
   and only the thumb is colored, so the scrollbar effectively "disappears"
   when there's nothing to scroll. */
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar {
    width: 6px;
}
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar-thumb {
    background: #cdb985;
    border-radius: 3px;
    /* Transparent border that gets clipped by background-clip makes the
       thumb look slightly narrower than the gutter — natural inset. */
    border: 1.5px solid transparent;
    background-clip: padding-box;
}
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar-thumb:hover {
    background: #bd9e4d;
    background-clip: padding-box;
}

/* Field columns — flex-basis matches the legacy w_*p classes, but the
   width now SUBTRACTS the share of the column-gap so 2x 50% rows fit
   the parent exactly. box-sizing:border-box ensures padding never
   pushes the total wider. */
.qrq-form > div[id^="pmm"] > div > .w_100p { flex: 0 0 100%; max-width: 100%; }
.qrq-form > div[id^="pmm"] > div > .w_50p  { flex: 0 0 calc(50%  -  7px); max-width: calc(50%  -  7px); }
.qrq-form > div[id^="pmm"] > div > .w_33_3p,
.qrq-form > div[id^="pmm"] > div > .w_33p  { flex: 0 0 calc(33.333% - 9.333px); max-width: calc(33.333% - 9.333px); }
.qrq-form > div[id^="pmm"] > div > .w_25p  { flex: 0 0 calc(25%  - 10.5px); max-width: calc(25%  - 10.5px); }
.qrq-form > div[id^="pmm"] > div > .w_35p  { flex: 0 0 calc(35%  -  9.1px); max-width: calc(35%  -  9.1px); }
.qrq-form > div[id^="pmm"] > div > .w_65p  { flex: 0 0 calc(65%  -  4.9px); max-width: calc(65%  -  4.9px); }
.qrq-form > div[id^="pmm"] > div > div[class*="k_floatl"] {
    box-sizing: border-box;
    float: none !important;   /* unfloat — flex handles layout cleanly */
}
/* Chrome / Edge / Safari custom scrollbar */
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar {
    width: 6px;
}
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;       /* small top/bottom inset so track doesn't reach corners */
}
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar-thumb {
    background: #cdb985;
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.qrq-form > div[id^="pmm"] > div::-webkit-scrollbar-thumb:hover {
    background: #bd9e4d;
    background-clip: padding-box;
}
.qrq-form > div[id^="pmm"]::after,
.qrq-form > div[id^="pmm"] > div::after {
    content: '';
    display: block;
    clear: both;
}

/* ----- True wizard: only active step renders.
   flex:1 on the active step makes the card stretch to fill the parent's
   remaining height, so the white border reaches the bottom of the body. */
.qrq-form > div[id^="pmm"]            { display: none  !important; }
.qrq-form > div[id^="pmm"].qrq-active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* ----- All form-element styles (labels, inputs, selects, textareas,
   checkboxes, radios, validation, etc.) live in
   app_assets/css/qrq-form-elements.css — loaded as a separate <link>
   in index.php so styling tweaks are easy to find. ----- */

/* =====================================================================
   Wizard step nav (left side) — numbered circles, gold connectors,
   hover/active/done states. Scoped to .qrq-popup so other forms that
   use .tt_frm_wizard keep their existing look.
   ===================================================================== */
.qrq-popup .tt_frm_wizard {
    width: 100%;
    padding: 8px 0;
    display: block;
}
.qrq-popup .tt_process {
    padding: 0 6px;                /* tighter outer padding — pills go full nav width */
    counter-reset: qrq-step;
    align-self: stretch;
    justify-self: stretch;
}
.qrq-popup .tt_process ul {
    gap: 0;
}

/* Each step row — clickable, rounded full-width pill on hover + active.
   Generous vertical padding gives a spacious timeline feel with clear
   separation between every step. */
.qrq-popup .tt_process ul li.tt_pst {
    counter-increment: qrq-step;
    padding: 10px 12px !important;
    margin: 0 0 24px !important;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    position: relative;
}
.qrq-popup .tt_process ul li.tt_pst:last-child {
    margin-bottom: 0 !important;
}
/* Hover + active share the same full-width pill — slightly lighter on
   hover so the current step still reads as "selected" vs "you're hovering". */
.qrq-popup .tt_process ul li.tt_pst:hover {
    background: #f0e8d2;
    opacity: 1;
    box-shadow: inset 0 0 0 1px #e2d7bf;
}
.qrq-popup .tt_process ul li.tt_pst.qrq-step-active {
    background: #ede2c2;
    box-shadow: inset 0 0 0 1px #d4c49a;
}

/* Step label text */
.qrq-popup .tt_process ul li.tt_pst .tt_type {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5a5445;
    font-size: 12px;
    font-weight: 500;
}

/* Step circle — shows step number by default, ✓ when done */
.qrq-popup .tt_process ul li.tt_pst .tt_type::before {
    content: counter(qrq-step);
    width: 24px !important;
    height: 24px !important;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid #e2d7bf !important;
    background: #fff !important;
    color: #8a7a56;
    font-size: 11px;
    font-weight: 700;
    line-height: 21px !important;
    text-align: center;
    flex-shrink: 0;
    margin-right: 0 !important;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}

/* Active step — gold filled circle with white number + soft glow */
.qrq-popup .tt_process ul li.tt_pst.qrq-step-active .tt_type {
    color: #bd9e4d !important;
    font-weight: 700 !important;
}
.qrq-popup .tt_process ul li.tt_pst.qrq-step-active .tt_type::before {
    border-color: #bd9e4d !important;
    background: #bd9e4d !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(189, 158, 77, 0.18);
}

/* Done step — gold check, darker label */
.qrq-popup .tt_process ul li.tt_pst.qrq-step-done .tt_type,
.qrq-popup .tt_process ul li.tt_pst.completed .tt_type {
    color: #3d3830;
    font-weight: 600;
}
.qrq-popup .tt_process ul li.tt_pst.qrq-step-done .tt_type::before,
.qrq-popup .tt_process ul li.tt_pst.completed .tt_type::before {
    content: "✓" !important;
    border-color: #bd9e4d !important;
    background: #bd9e4d !important;
    color: #fff !important;
    font-size: 14px !important;
}

/* Connector line floats fully in the 24px margin between rows so it
   never touches either pill. Row layout: padding-top(10) + circle(24) +
   padding-bottom(10) = 44px row, then 24px margin-bottom → next row at
   y=68, next circle at y=78. Line top=48 (4px below this pill) →
   y=64 (= 68-4, 4px above next row). */
.qrq-popup .tt_process ul li.tt_pst:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    left: 23px !important;
    top: 48px !important;
    bottom: -20px !important;
    width: 2px !important;
    height: auto !important;
    margin: 0 !important;
    background: #cdb985 !important;
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
}
/* Gold line after a done step */
.qrq-popup .tt_process ul li.tt_pst.qrq-step-done:not(:last-child)::after,
.qrq-popup .tt_process ul li.tt_pst.completed:not(:last-child)::after {
    background: #bd9e4d !important;
}
/* Connector line is ALWAYS visible — hover/active never hide it.
   (The line sits fully in the margin gap below each row, so it never
   touches the pill regardless of state.) */

/* ----- Previous button: just a state toggle; visual styling comes from k114-btn-close ----- */
.qrq-prev-btn.is-hidden { display: none !important; }

/* =============================================================
   k144 - Tabs Management landing (kprocess_144.php)
   Accordion sections + segmented Grant/Mirror/Revoke switchers
   + form cards with CSS-grid picker rows + tabs-checklist blocks.
   ============================================================= */

/* -- stage / section shell -- */
.k144-stage { padding:16px; background:#fafaf6; min-height:100%; }
.k144-section { background:#fff; border:1px solid #e6ddc4; border-radius:8px; margin-bottom:12px; overflow:visible; box-shadow:0 1px 2px rgba(0,0,0,0.03); }

/* -- accordion header (whole strip clickable) -- */
.k144-section-hdr { background:#f5f0e6; padding:12px 18px; border-bottom:1px solid #e6ddc4; font-weight:600; color:#7a6a3a; display:flex; align-items:center; gap:8px; border-radius:8px 8px 0 0; cursor:pointer; user-select:none; transition:background 0.15s; }
.k144-section-hdr:hover { background:#ede3c8; }
.k144-section-hdr i.k144-acc-icon { color:#bd9e4d; font-size:18px; }
.k144-section-hdr .k144-acc-chev { margin-left:auto; font-size:20px; transition:transform 0.2s; color:#a3862c; }
.k144-section.k144-collapsed .k144-section-hdr { border-bottom:none; border-radius:8px; }
.k144-section.k144-collapsed .k144-section-hdr .k144-acc-chev { transform:rotate(-90deg); }
.k144-section.k144-collapsed .k144-section-body { display:none; }

.k144-section-body { padding:18px; }

/* -- segmented Grant/Mirror/Revoke buttons -- */
.k144-seg-btns { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.k144-seg-btn { padding:8px 16px; border:1px solid #d5c7a4; border-radius:5px; background:#fdfaf1; cursor:pointer; user-select:none; font-size:12px; display:inline-flex; align-items:center; gap:6px; color:#5c4f2b; transition:all 0.15s; font-weight:500; }
.k144-seg-btn:hover { background:#f0e6c9; border-color:#c0a76d; }
.k144-seg-btn.active { background:#bd9e4d; color:#fff; border-color:#a3862c; box-shadow:0 1px 2px rgba(0,0,0,0.15); }
.k144-seg-btn i { font-size:15px; }

/* -- target render area (empty state) -- */
.k144-target { min-height:60px; }
.k144-empty { padding:24px 16px; text-align:center; color:#a89960; font-size:12px; background:#faf5e8; border:1px dashed #d5c7a4; border-radius:6px; }

/* -- form card: sits inside .k144-target when an op is loaded -- */
.k144-form-card { background:#fdfaf1; border:1px solid #e6ddc4; border-radius:8px; padding:20px; }

/* -- grid layout: two pickers side-by-side, collapses to 1 col on narrow screens -- */
.k144-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:20px 24px; }
.k144-form-group { display:flex; flex-direction:column; gap:6px; position:relative; }
.k144-form-group.k144-full { grid-column:1 / -1; }
.k144-form-label { font-size:11px; font-weight:600; color:#5c4f2b; text-transform:uppercase; letter-spacing:0.5px; }
.k144-form-hint { font-size:10px; color:#999; line-height:1.4; }

/* -- footer with own row + border-top so the CTA never overlaps pickers -- */
.k144-form-footer { display:flex; justify-content:flex-end; padding-top:16px; margin-top:20px; border-top:1px solid #ede4c7; }
.k144-form-footer .k114-btn-primary { max-width:220px; padding:9px 22px; }

/* -- tabs-list checkbox area -- */
.k144-tabs-block { display:flex; flex-direction:column; gap:8px; }
.k144-check-all-row { display:flex; gap:14px; font-size:11px; color:#7a6a3a; align-items:center; flex-wrap:wrap; }
.k144-check-all-row a { color:#a3862c; cursor:pointer; text-decoration:none; padding:2px 6px; border-radius:3px; }
.k144-check-all-row a:hover { background:#f0e6c9; text-decoration:underline; }
.k144-tabs-list { max-height:280px; overflow-y:auto; border:1px solid #e6ddc4; background:#fff; border-radius:6px; padding:8px; text-align:left; }
.k144-tabs-list .k144-tab-menu { color:#8a7940; font-weight:600; padding:6px 10px; background:#f5f0e6; border-radius:4px; margin-top:8px; margin-bottom:4px; font-size:11px; display:flex; align-items:center; gap:6px; }
.k144-tabs-list .k144-tab-menu:first-child { margin-top:0; }
.k144-tabs-list .k144-tab-menu i { color:#bd9e4d; font-size:14px; }

/* Row: explicit flex layout — checkbox pinned left, info block flex-1 filling right. */
.k144-tabs-list .k144-tab-row { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; padding:8px 10px; border-bottom:1px solid #f5efdc; cursor:pointer; text-align:left; box-sizing:border-box; }
.k144-tabs-list .k144-tab-row:last-child { border-bottom:none; }
.k144-tabs-list .k144-tab-row:hover { background:#faf7ec; }
.k144-tabs-list .k144-tab-row input[type="checkbox"] { flex:0 0 auto; width:16px; height:16px; margin:0; cursor:pointer; accent-color:#bd9e4d; }
.k144-tabs-list .k144-tab-info { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:12px; line-height:1.4; text-align:left; }
.k144-tabs-list .k144-tab-name { font-weight:600; color:#3d3830; }
.k144-tabs-list .k144-tab-key { color:#8a7940; font-family:Consolas, "Courier New", monospace; font-size:11px; }
.k144-tabs-list .k144-tab-matches { color:#8a7940; font-size:10px; margin-left:auto; }
.k144-tabs-list .k144-tab-badge { display:inline-block; padding:1px 6px; border-radius:3px; font-size:9px; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; }
.k144-tabs-list .k144-tab-badge-inactive { background:#f4dcd6; color:#b04b3a; border:1px solid #e6bfb5; }

/* -- Revoke variant: destructive button gets a red tint -- */
.k144-form-footer.k144-danger .k114-btn-primary { background:#b04b3a; border-color:#8f3a2b; }
.k144-form-footer.k144-danger .k114-btn-primary:hover { background:#9e3f30; border-color:#7a3122; }

/* =============================================================
   qrq passport / workplace repeaters — dynamic add/remove rows
   on the quick-request form. See apps.js qrqRepAdd/Remove/Prefill.
   ============================================================= */
.qrq-rep {
    width: 100%;
    float: left;
    padding: 6px 8px 10px;
    background: #fbf9f2;
    border: 1px dashed #e2d7bf;
    border-radius: 6px;
    margin: 6px 0 12px;
    box-sizing: border-box;
}
.qrq-rep-hdr {
    font-size: 11px;
    font-weight: 600;
    color: #7a6a3a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qrq-rep-hdr i { color: #bd9e4d; font-size: 14px; }
.qrq-rep-rows { display: flex; flex-direction: column; gap: 6px; }
.qrq-rep-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;
    padding: 6px;
    background: #fff;
    border: 1px solid #ede4c7;
    border-radius: 4px;
}
.qrq-rep-cell { display: flex; flex-direction: column; }
.qrq-rep-w-third { flex: 1 1 30%; min-width: 140px; }
.qrq-rep-w-half  { flex: 1 1 45%; min-width: 180px; }
.qrq-rep-w-full  { flex: 1 1 100%; }
.qrq-rep-w-del   { flex: 0 0 32px; align-items: center; }
.qrq-rep-lbl {
    font-size: 10px;
    color: #8a7940;
    font-weight: 500;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.qrq-rep-input {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #d5c7a4;
    border-radius: 3px;
    background: #fff;
    color: #3d3830;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.qrq-rep-input:focus { border-color: #bd9e4d; box-shadow: 0 0 0 2px rgba(189,158,77,0.15); }
.qrq-rep-del {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: #b04b3a;
    background: #fbf1ee;
    border: 1px solid #e6bfb5;
    transition: background 0.15s;
}
.qrq-rep-del:hover { background: #f4dcd6; }
.qrq-rep-del i { font-size: 16px; }
.qrq-rep-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    background: #fbf9f2;
    color: #7a6a3a;
    border: 1px dashed #d5c7a4;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.15s;
}
.qrq-rep-add:hover { background: #f0e6c9; border-style: solid; border-color: #bd9e4d; color: #5c4f2b; }

/* =============================================================
   kn800-gen-* — Section-by-section review & edit accordion on
   the prospect detail General tab. Fresh implementation.
   Namespace: kn800-gen prefix so nothing collides with kn801
   or the qrq wizard styles.
   ============================================================= */
/* Container is a FLEX COLUMN — toolbar, the sections grid, and the footer
   stack vertically. min-height:100% fills the tab so the footer (last
   child, margin-top:auto) pins to the BOTTOM even when the sections are
   collapsed/short. */
.kn800-gen-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px;
    min-height: 100%;
    box-sizing: border-box;
}
/* Sections live in their own 2-column grid inside the flex column. */
.kn800-gen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;   /* each section sizes to its own body height */
}
/* Full-width sections (Tenant/Payment, odd-count tail) span both columns. */
.kn800-gen-grid > .kn800-gen-section.is-full { grid-column: 1 / -1; }
/* Narrow viewports fall back to single column so sections keep readable width. */
@media (max-width: 1100px) {
    .kn800-gen-grid { grid-template-columns: 1fr; }
}
.kn800-gen-locked-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff8e6;
    border: 1px solid #e8c96b;
    border-radius: 4px;
    color: #6b5316;
    font-size: 13px;
}
.kn800-gen-locked-banner i { font-size: 20px; }
.kn800-gen-locked-banner b { color: #3d2f0f; }

.kn800-gen-section {
    background: #fff;
    border: 1px solid #e5e3d9;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.kn800-gen-section.is-open { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
/* Open sections allow overflow so k-sc-wrap dropdowns (Property
   picker etc.) can extend past the section card's edges without
   getting clipped. Collapsed sections keep overflow:hidden (base
   rule above) so the accordion animation still hides content
   during max-height 0 → 4000px transition. Paired with the
   matching .kn800-gen-body { overflow: visible } rule below.
   Bug 2026-07-21: Building Info Property dropdown was clipped at
   both the section body AND the section card edge — needed both. */
.kn800-gen-section.is-open { overflow: visible; }
.kn800-gen-section:hover { border-color: #d8d3bf; }

.kn800-gen-header {
    display: flex;
    align-items: center;
    gap: 4px;    /* tight default so Access + Edit sit close on the right */
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    background: #faf8f2;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}
/* Left cluster (index / icon / title) wants its own comfortable
   spacing — apply a larger gap between just those three by using
   margin on the index + icon. Keeps the right-side controls tight
   without cramping the label group. */
.kn800-gen-header > .kn800-gen-index { margin-right: 6px; }
.kn800-gen-header > .kn800-gen-hicon { margin-right: 4px; }
.kn800-gen-section.is-open .kn800-gen-header { border-bottom-color: #ece8d8; background: #fdfcf6; }
.kn800-gen-header:hover { background: #f5f1e4; }

.kn800-gen-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #bd9e4d;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}
.kn800-gen-hicon { color: #bd9e4d; font-size: 18px; }
.kn800-gen-title { font-weight: 600; color: #3d3628; font-size: 14px; }
.kn800-gen-spacer { flex: 1; }

/* Top toolbar — sits above the section grid. Grid-column: 1 / -1 so
   it spans both columns of the 2-col layout. Layout: description
   left, action buttons right. */
.kn800-gen-toolbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #fdfcf6;
    border: 1px solid #ece8d8;
    border-radius: 4px;
    flex-wrap: wrap;
}
.kn800-gen-toolbar-desc {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c4f2b;
    font-size: 12px;
    flex: 1 1 260px;
    min-width: 0;
}
.kn800-gen-toolbar-desc i { color: #bd9e4d; font-size: 16px; flex-shrink: 0; }
.kn800-gen-toolbar-btns { display: flex; gap: 8px; flex-shrink: 0; }
.kn800-gen-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #cfc9b5;
    border-radius: 4px;
    color: #5c4f2b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.kn800-gen-toolbar-btn:hover { background: #f0e6c9; border-color: #bd9e4d; color: #3d2f0f; }
.kn800-gen-toolbar-btn i { font-size: 14px; }
/* Icon-only toolbar buttons — square padding, no label gap. */
.kn800-gen-toolbar-btn.is-icon { padding: 6px 9px; gap: 0; }
.kn800-gen-toolbar-btn.is-icon i { font-size: 16px; }

/* General footer — review note (left) + Refresh/Generate (right). Shown
   only at On Process / Under Review. Full-width grid child. */
.kn800-gen-footer {
    /* margin-top:auto pins the footer to the BOTTOM of the flex-column
       container even when the sections above are short/collapsed. */
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid #e2d7bf;
    border-radius: 8px;
    background: linear-gradient(to right, #faf6ea, #fff);
    box-sizing: border-box;
}
.kn800-gen-footer-note {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b5a2c;
}
.kn800-gen-footer-note i { font-size: 18px; color: #c0a76d; flex-shrink: 0; }
.kn800-gen-footer-btns { display: flex; gap: 8px; flex-shrink: 0; }
/* Generate → prominent gold primary button. */
.kn800-gen-footer-generate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #bd9e4d;
    border-radius: 6px;
    background: #bd9e4d;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.kn800-gen-footer-generate:hover { background: #a8873a; border-color: #a8873a; }
.kn800-gen-footer-generate i { font-size: 16px; }

/* Cancel Request → amber/warning outline. Pre-generation window only.
   Shares the generate button's geometry so the footer row aligns. */
.kn800-gen-footer-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #d9a441;
    border-radius: 6px;
    background: #fff;
    color: #9a6a12;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kn800-gen-footer-cancel:hover { background: #fbeecb; border-color: #c68f2c; color: #7d550c; }
.kn800-gen-footer-cancel i { font-size: 16px; }

/* Reject Request → red/danger. Shown once the request is in the flow. */
.kn800-gen-footer-reject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #c0392b;
    border-radius: 6px;
    background: #fff;
    color: #b33224;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kn800-gen-footer-reject:hover { background: #fbe4e1; border-color: #a5291c; color: #8f2318; }
.kn800-gen-footer-reject i { font-size: 16px; }

/* Soft-disabled action button — shown to anyone who is NOT the request's
   creator or assigned agent. Greyed + not-allowed; the tooltip explains why.
   (aria-disabled, not the `disabled` attr, so the hover tooltip still fires.) */
.kn800-gen-footer-cancel.is-disabled,
.kn800-gen-footer-generate.is-disabled,
.kn800-gen-footer-reject.is-disabled,
.kn800-gen-footer-cancel.is-disabled:hover,
.kn800-gen-footer-generate.is-disabled:hover,
.kn800-gen-footer-reject.is-disabled:hover {
    background: #f4f1e8;
    border-color: #ded7c5;
    color: #a79f8a;
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
}
.kn800-gen-footer-cancel.is-disabled i,
.kn800-gen-footer-generate.is-disabled i,
.kn800-gen-footer-reject.is-disabled i { color: #a79f8a; }

/* Cancel-reason confirm — required textarea embedded in the tt_confirm
   modal. Full width, comfortable height, matching the app's border tokens. */
.kn800-cancel-reason-wrap { text-align: left; }
.kn800-cancel-reason-lead {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #5c4f2b;
}
.kn800-cancel-reason {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid #cfc9b5;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #3d2f0f;
    resize: vertical;
    box-sizing: border-box;
}
.kn800-cancel-reason:focus { outline: none; border-color: #bd9e4d; }

/* Cancel Request modal — a dedicated body-level overlay (NOT tt_confirm, which
   closes before validating). An empty reason shows .kn800-cancel-err and keeps
   the modal open. position:fixed so it never touches the popup's #ttbody DOM. */
.kn800-cancel-ov {
    position: fixed;
    inset: 0;
    background: rgba(40, 30, 8, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10060;
    animation: kn800-cancel-fade .16s ease;
}
@keyframes kn800-cancel-fade { from { opacity: 0; } to { opacity: 1; } }
.kn800-cancel-modal {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(40, 30, 8, .28);
    overflow: hidden;
    animation: kn800-cancel-rise .18s ease;
}
@keyframes kn800-cancel-rise { from { transform: translateY(10px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.kn800-cancel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0ead9;
    font-size: 15px;
    font-weight: 700;
    color: #9a3b2c;
}
.kn800-cancel-head i { font-size: 20px; }
.kn800-cancel-body { padding: 16px 18px; }
.kn800-cancel-err {
    display: none;
    margin-top: 8px;
    padding: 7px 10px;
    background: #fbe8e6;
    border: 1px solid #e9b4ae;
    border-radius: 6px;
    color: #a8302b;
    font-size: 12.5px;
    font-weight: 600;
}
.kn800-cancel-err.is-show { display: block; }
.kn800-cancel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px 16px;
}
.kn800-cancel-keep,
.kn800-cancel-confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.kn800-cancel-keep { background: #fff; border-color: #cfc9b5; color: #5c4f2b; }
.kn800-cancel-keep:hover { background: #f6f2e6; }
.kn800-cancel-confirm { background: #c0392b; color: #fff; border-color: #a5291c; }
.kn800-cancel-confirm:hover { background: #a5291c; }

/* ================================================================
   Global tooltip (.kts-tip) — one styled, app-wide tooltip UI that
   replaces the browser's native `title` bubble everywhere. Driven by
   the tooltip engine in app_assets/js/apps.js. A single shared node,
   positioned/flipped/pointed in JS; this only styles the look.
   ================================================================ */
.kts-tip {
    position: absolute;
    z-index: 100000;
    left: -9999px;
    top: 0;
    max-width: 260px;
    padding: 6px 10px;
    background: #2f2a1e;
    color: #fbf4e2;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .01em;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(30, 22, 6, .28);
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease;
}
.kts-tip--on { opacity: 1; transform: translateY(0); }
/* Arrow — points DOWN at the target by default; flips UP when the
   bubble is placed below the target (near the top edge). --kts-arrow
   is the horizontal offset the engine sets to track the target centre. */
.kts-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--kts-arrow, 50%);
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #2f2a1e;
}
.kts-tip--below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2f2a1e;
}
@media (prefers-reduced-motion: reduce) {
    .kts-tip { transition: none; transform: none; }
}

/* ================================================================
   Documents tab (pn_p803) — Request Paper + Uploaded Documents cards.
   ================================================================ */
.kn803-docs-wrap { display: block; padding: 16px; box-sizing: border-box; }
.kn803-card { border: 1px solid #e3ddc9; border-radius: 10px; background: #fff; overflow: hidden; }
.kn803-card-head { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid #eceadf; font-size: 13.5px; font-weight: 700; color: #6b5426; }
.kn803-card-head i { font-size: 17px; color: #bd9e4d; }
.kn803-card-body { padding: 14px; }
.kn803-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #5c5442; }
.kn803-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kn803-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid #bd9e4d; background: #fff; color: #9a6a12; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.kn803-btn i { font-size: 16px; }
.kn803-btn--primary { border-color: #bd9e4d; background: #bd9e4d; color: #fff; }
.kn803-btn--primary:hover { background: #a9863b; border-color: #a9863b; color: #fff; }
/* Disabled state — View Request Paper before the request is generated. Muted
   gold, no hover lift, not clickable. */
.kn803-btn:disabled,
.kn803-btn[disabled] { opacity: .55; cursor: not-allowed; background: #f4efe3; border-color: #e4d8b6; color: #b1985c; box-shadow: none; }
.kn803-btn:disabled:hover,
.kn803-btn[disabled]:hover { background: #f4efe3; border-color: #e4d8b6; color: #b1985c; }
/* Request-paper tab toolbar — Refresh/Print icon-buttons that ride the RIGHT
   of the stage-tab title bar (title stays left), fed through tt_addNewTab's
   $customized_title slot. Matches the list-view toolbar buttons. */
.kn803-paperbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: 1px solid #d9cfb0; border-radius: 6px; background: #fffdf7; color: #8a6d1e; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.kn803-paperbtn:hover { background: #f3ead2; border-color: #bd9e4d; color: #6b5426; }
.kn803-paperbtn i { font-size: 17px; line-height: 1; }
/* Uploaded documents — two columns (residential | commercial). */
.kn803-doc-cols { display: flex; gap: 18px; flex-wrap: wrap; }
.kn803-doc-col { flex: 1 1 260px; min-width: 240px; }
.kn803-doc-grouphd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #93813f; margin: 0 0 8px; }
.kn803-doc-grouphd i { font-size: 15px; color: #bd9e4d; }
.kn803-doc-list { display: flex; flex-direction: column; gap: 6px; }
.kn803-doc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #eee6d2; border-radius: 8px; background: #faf7ef; font-size: 13px; }
.kn803-doc-row.has-file { background: #fcfbf6; }
.kn803-doc-icon { font-size: 16px; color: #bd9e4d; }
.kn803-doc-icon.is-muted { color: #c9c1ab; }
.kn803-doc-name { flex: 1; color: #4a4636; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn803-doc-view { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #eef6ee; color: #2f7d32; font-size: 11.5px; font-weight: 700; cursor: pointer; border: 1px solid #cfe6d0; }
.kn803-doc-view:hover { background: #e2f0e2; }
.kn803-doc-view i { font-size: 14px; }
.kn803-doc-missing { font-size: 11.5px; color: #a79f8a; font-style: italic; }
.kn803-doc-empty { font-size: 12.5px; color: #a79f8a; font-style: italic; padding: 6px 2px; }

/* ================================================================
   Exception Rules capture (General → Request Information edit)
   Mirrors the Quick-form .qrq-exc-* checklist. Shown only when the
   request is an Exception Flow (rendered server-side in that case).
   ================================================================ */
.kn800-exc-wrap .kn800-exc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fafafa;
}
.kn800-exc-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
/* Custom gold checkbox — matches the Quick-form .qrq-form checkbox UI
   (the detail page doesn't load qrq-form-elements.css, so mirror it here). */
.kn800-exc-chk {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d4c49a;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
    position: relative;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.kn800-exc-chk:hover { border-color: #bd9e4d; }
.kn800-exc-chk:checked { background: #bd9e4d; border-color: #bd9e4d; }
.kn800-exc-chk:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.kn800-exc-chk:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(189, 158, 77, 0.18);
}
.kn800-exc-lbl { font-weight: 600; }
.kn800-exc-amt {
    width: 130px;
    height: 26px;
    padding: 2px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12.5px;
}
.kn800-exc-amt.is-hidden { display: none; }
.kn800-exc-desc {
    width: 100%;
    padding-left: 23px;
    font-size: 11.5px;
    color: #8a8a8a;
    font-style: italic;
}
.kn800-exc-empty {
    padding: 10px 12px;
    font-size: 12.5px;
    color: #999;
    font-style: italic;
}

/* Edit toggle switch — replaces the older Edit button. Compact rocker
   with the word 'Edit' as its trailing label; when locked, renders as
   a static pill with a lock icon (see .is-locked below). */
.kn800-gen-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.kn800-gen-edit-toggle:hover { background: #f5f1e4; }
.kn800-gen-edit-toggle input { display: none; }
.kn800-gen-edit-toggle-slider {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    background: #d4cfba;
    border-radius: 18px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.kn800-gen-edit-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.kn800-gen-edit-toggle input:checked + .kn800-gen-edit-toggle-slider {
    background: #bd9e4d;
}
.kn800-gen-edit-toggle input:checked + .kn800-gen-edit-toggle-slider::before {
    transform: translateX(16px);
}
.kn800-gen-edit-toggle-label {
    font-size: 12px;
    font-weight: 500;
    color: #5c4f2b;
}
.kn800-gen-edit-toggle.is-locked {
    cursor: not-allowed;
    padding: 4px 10px;
    background: #f5f5f5;
    color: #999;
}
.kn800-gen-edit-toggle.is-locked:hover { background: #f5f5f5; }
.kn800-gen-edit-toggle.is-locked i { font-size: 14px; }
.kn800-gen-edit-toggle.is-locked .kn800-gen-edit-toggle-label { color: #999; }

/* Access gear — allowers only. Sits left of the Edit toggle in each
   section header. Solid shield when enabled, outline shield when
   disabled, so admins scan the accordion and see at a glance which
   sections have editing turned on. */
.kn800-gen-access-gear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #cfc9b5;
    border-radius: 4px;
    color: #5c4f2b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    /* Sits directly next to the Edit toggle — no extra margin so
       the two buttons pair tightly. The header's own `gap: 4px`
       (see .kn800-gen-header override below) supplies the small
       breathing room between siblings. */
}
.kn800-gen-access-gear:hover { background: #f0e6c9; border-color: #bd9e4d; color: #3d2f0f; }
.kn800-gen-access-gear i { font-size: 15px; }

/* Per-section refresh — small icon-only button in the section header.
   Deliberately quiet (muted until hover) so it doesn't compete with
   the Access / Edit controls it sits beside. */
.kn800-gen-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid #cfc9b5;
    border-radius: 4px;
    color: #8a7d59;
    cursor: pointer;
    transition: all 0.15s;
}
.kn800-gen-refresh-btn:hover { background: #f0e6c9; border-color: #bd9e4d; color: #3d2f0f; }
.kn800-gen-refresh-btn:active i { transform: rotate(180deg); }
.kn800-gen-refresh-btn i { font-size: 15px; transition: transform 0.3s; }
.kn800-gen-access-gear.is-on {
    background: #fef7de;
    border-color: #d4b96b;
    color: #6a4f0f;
}
.kn800-gen-access-gear.is-on:hover { background: #f7ecc1; border-color: #bd9e4d; }
.kn800-gen-access-gear.is-on i { color: #a8873a; }

/* Grant-active state — the authorizer has at least one live grant
   on this section. Gear turns maroon + shows a numeric count badge
   so the section is instantly identifiable at a glance without
   opening the popover. */
.kn800-gen-access-gear.has-grants {
    background: #f7e6ea;
    border-color: #c88fa0;
    color: #5c1024;
}
.kn800-gen-access-gear.has-grants:hover { background: #efd4dc; border-color: #a94456; }
.kn800-gen-access-gear.has-grants i { color: #8b1a34; }
.kn800-gen-access-gear-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #8b1a34;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}
/* Section wrapper picks up a subtle maroon rim + tinted header when
   grants are live, so authorizers can scan the whole accordion and
   spot open sections without clicking each gear. */
.kn800-gen-section.has-grants {
    border-color: #d9b8c0;
    box-shadow: 0 1px 3px rgba(139, 26, 52, 0.10);
}
.kn800-gen-section.has-grants .kn800-gen-header {
    background: #faf0f2;
}
.kn800-gen-section.has-grants.is-open .kn800-gen-header {
    background: #f5e6ea;
    border-bottom-color: #e4cfd4;
}
.kn800-gen-section.has-grants .kn800-gen-header:hover { background: #f5e6ea; }
.kn800-gen-section.has-grants .kn800-gen-hicon { color: #8b1a34; }
.kn800-gen-section.has-grants .kn800-gen-index {
    background: #8b1a34;
}

/* Access popover — replaces the section body when the gear is clicked.
   Reads like a mini-form: header row + enable toggle + editors picker
   + branches checklist + Save/Cancel row. */
.kn800-gen-access-panel {
    grid-column: 1 / -1;
    padding: 4px 4px 12px;
}
.kn800-gen-access-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 12px;
    color: #5c4f2b;
    font-size: 13px;
    border-bottom: 1px solid #ece8d8;
    margin-bottom: 12px;
}
.kn800-gen-access-header i { font-size: 18px; color: #bd9e4d; }
.kn800-gen-access-header b { color: #3d2f0f; }
.kn800-gen-access-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 4px;
}
/* Enable toggle — big rocker so the primary state change reads first. */
.kn800-gen-access-enable {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px;
    align-self: flex-start;
}
.kn800-gen-access-enable input { display: none; }
.kn800-gen-access-enable-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #d4cfba;
    border-radius: 22px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.kn800-gen-access-enable-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.kn800-gen-access-enable input:checked + .kn800-gen-access-enable-slider { background: #bd9e4d; }
.kn800-gen-access-enable input:checked + .kn800-gen-access-enable-slider::before { transform: translateX(18px); }
.kn800-gen-access-enable-label {
    font-size: 13px;
    font-weight: 600;
    color: #3d3628;
}
.kn800-gen-access-hint {
    padding: 8px 12px;
    background: #fdfcf6;
    border-left: 3px solid #d4b96b;
    border-radius: 0 4px 4px 0;
    color: #5c4f2b;
    font-size: 12px;
    line-height: 1.45;
}
.kn800-gen-access-hint b { color: #3d2f0f; }
.kn800-gen-access-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ece8d8;
    border-radius: 4px;
}
.kn800-gen-access-group-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.kn800-gen-access-group-lbl i { font-size: 14px; color: #bd9e4d; }
.kn800-gen-access-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin-top: 4px;
}
/* Branch checklist — inline flex grid so a handful of branches
   pack tightly instead of one-per-line. */
.kn800-gen-access-branch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 2px 0;
}
.kn800-gen-access-branch-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #faf8f2;
    border: 1px solid #ece8d8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #3d3628;
    transition: all 0.15s;
}
.kn800-gen-access-branch-item:hover { background: #f0e6c9; border-color: #bd9e4d; }
.kn800-gen-access-branch-item input { margin: 0; cursor: pointer; }
.kn800-gen-access-branch-item input:checked ~ span { color: #5a4720; font-weight: 600; }

.kn800-gen-access-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 4px 4px;
    border-top: 1px solid #ece8d8;
    margin-top: 4px;
}

/* Source badge in the popover header — tells the operator whether
   the currently-shown values came from a specific-key row or the
   table-wide default (or nothing configured yet). */
.kn800-gen-access-src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: auto;
    white-space: nowrap;
}
.kn800-gen-access-src i { font-size: 13px; }
.kn800-gen-access-src-specific { background: #e6f2e6; color: #2d6a2d; }
.kn800-gen-access-src-default  { background: #e6efff; color: #1f4d99; }
.kn800-gen-access-src-none     { background: #f5f5f5; color: #888; }

/* Save-scope toggle — "Apply to all requests" checkbox that
   redirects the save to the default row instead of the specific-key
   row. Visually distinct from the Enable rocker so the operator
   doesn't confuse the two. */
.kn800-gen-access-scope {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fdfcf6;
    border: 1px dashed #cdb985;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #5c4f2b;
    line-height: 1.4;
}
.kn800-gen-access-scope input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.kn800-gen-access-scope-lbl b { color: #3d2f0f; }
.kn800-gen-access-scope-lbl small { color: #999; font-weight: 400; }

/* Per-branch tab strip inside the Access popover. One tab per branch
   (plus an Any-branch tab at the front); each tab controls its own
   pane containing that branch's enable + editors + as-default form. */
.kn800-gen-access-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 4px 0;
    border-bottom: 1px solid #ece8d8;
    flex-wrap: wrap;
}
.kn800-gen-access-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: #7a6a45;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    top: 1px;
}
.kn800-gen-access-tab:hover { background: #faf6ea; color: #3d2f0f; }
.kn800-gen-access-tab.is-active {
    background: #fff;
    border-color: #ece8d8;
    color: #3d2f0f;
    font-weight: 600;
}
.kn800-gen-access-tab i { font-size: 14px; color: #bd9e4d; }
.kn800-gen-access-panes { padding-top: 12px; }
.kn800-gen-access-pane { display: none; }
.kn800-gen-access-pane.is-active { display: block; }

/* Extra source-badge tints — the cascade now has 5 possible sources
   (specific / key-only / branch-only / global / none). Colour-code
   each so the operator instantly reads where the effective values
   are coming from. */
.kn800-gen-access-src-key-only    { background: #f0e6d1; color: #6a4f0f; }
.kn800-gen-access-src-branch-only { background: #e6f0e6; color: #2d6a2d; }
.kn800-gen-access-src-global      { background: #e6efff; color: #1f4d99; }

/* Grant popover rows — one card per candidate (creator + agent).
   Checkbox + name/role + current-status pill so the authorizer sees
   at a glance who's already granted and can toggle to change. */
.kn800-gen-access-grant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.kn800-gen-access-grant-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ece8d8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.kn800-gen-access-grant-row:hover { border-color: #bd9e4d; background: #fdfcf6; }
/* Custom checkbox — matches the app's gold accent (matches the qrq
   input focus ring). Native checkbox is hidden via appearance:none
   and the visible state comes from a gold-filled square with a
   white check when :checked. */
.kn800-gen-access-grant-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #cfc9b5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    box-sizing: border-box;
}
.kn800-gen-access-grant-row input[type="checkbox"]:hover {
    border-color: #bd9e4d;
}
.kn800-gen-access-grant-row input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.25);
}
.kn800-gen-access-grant-row input[type="checkbox"]:checked {
    background: #bd9e4d;
    border-color: #a8893a;
}
.kn800-gen-access-grant-row input[type="checkbox"]:checked::after {
    /* Percentage-based centering — reliable regardless of the box's
       exact size. The -55% Y offset compensates for the visual weight
       of the checkmark shape sitting above its geometric center after
       the 45deg rotation. */
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -55%) rotate(45deg);
    pointer-events: none;
}
.kn800-gen-access-grant-user { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kn800-gen-access-grant-name { font-weight: 600; color: #3d3628; font-size: 13px; }
.kn800-gen-access-grant-role {
    font-size: 11px;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.kn800-gen-access-grant-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.kn800-gen-access-grant-state i { font-size: 13px; }
.kn800-gen-access-grant-state.is-on  { background: #e6f2e6; color: #2d6a2d; }
.kn800-gen-access-grant-state.is-off { background: #f5f0e6; color: #8a7a56; }

.kn800-gen-chevron {
    color: #999;
    font-size: 18px;
    transition: transform 0.2s;
}
.kn800-gen-section.is-open .kn800-gen-chevron { transform: rotate(180deg); }

.kn800-gen-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}
.kn800-gen-section.is-open .kn800-gen-body { max-height: 4000px; }
/* When the section is fully open, allow overflow so absolute-
   positioned dropdowns (k-sc-wrap picker in edit mode) can
   extend past the section body without being clipped.
   Collapsed sections keep overflow:hidden (via the base rule
   above) so the accordion animation still works. Bug 2026-07-21:
   Building Information Property picker dropdown was clipped at
   the section body edge. */
.kn800-gen-section.is-open .kn800-gen-body { overflow: visible; }
.kn800-gen-body-inner {
    padding: 14px;
    /* 12-col CSS grid so .kdv-w-half / -third / -full (grid-column: span N)
       work as designed. A flex parent silently drops those classes, which
       is why an earlier attempt to swap widths had no visible effect.
       minmax(0, 1fr) — not plain 1fr — is critical: 1fr respects each
       child's min-content, so an edit-mode <select> that carries a long
       option would demand room for its intrinsic min-width and stretch
       its column, squishing siblings on the same row. minmax(0, 1fr)
       lets columns shrink below content's min so every third/half stays
       true to its allocation. */
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px 12px;
}

/* Section-level alerts strip — sits INSIDE .kn800-gen-body ABOVE
   .kn800-gen-body-inner so it shares the collapsible/animation
   context but doesn't participate in the 12-col grid. Every
   section renders this container; empty wrapper stays present in
   the DOM so future client-side updates can inject without having
   to insert a fresh element. Slim horizontal padding to line up
   with the body-inner padding. Directive 2026-07-23. */
.kn800-gen-errors { padding: 0 14px; }
.kn800-gen-errors:empty { padding: 0; }
.kn800-gen-errors .kn800-gen-alert:first-child { margin-top: 12px; }
.kn800-gen-errors .kn800-gen-alert:last-child  { margin-bottom: 4px; }
.kn800-gen-alert {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px; line-height: 1.5;
    margin: 6px 0;
}
.kn800-gen-alert .kn800-gen-alert-icon {
    font-size: 18px; line-height: 1.3;
    flex-shrink: 0;
}
.kn800-gen-alert .kn800-gen-alert-msg { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.kn800-gen-alert .kn800-gen-alert-msg strong { font-weight: 600; }
/* Error — red. Used for hard problems that need operator action
   (property mismatch is the current only case). */
.kn800-gen-alert-error {
    background: #fdecea; border-color: #f5b7b1; color: #922b21;
}
.kn800-gen-alert-error .kn800-gen-alert-icon { color: #c0392b; }
/* Warning — amber. Softer signal for "check this" items that don't
   fully block use (units not visible under current access). */
.kn800-gen-alert-warning {
    background: #fdf2e0; border-color: #f2c68e; color: #8b5a1a;
}
.kn800-gen-alert-warning .kn800-gen-alert-icon { color: #d68a2a; }
/* Info — blue. Reserved for future informational hints (unused
   at initial rollout but the class exists so validators can emit
   it without touching CSS). */
.kn800-gen-alert-info {
    background: #e8f2fb; border-color: #b8d5ee; color: #1f4d75;
}
.kn800-gen-alert-info .kn800-gen-alert-icon { color: #2874a6; }

/* Edit-mode input / select / textarea styling — MIRRORED from
   qrq-form-elements.css so the General-tab editor renders the same
   wizard chrome (34px height, gold chevron, focus halo, error state)
   WITHOUT touching qrq_form.css itself. If the wizard's field chrome
   is ever redesigned, mirror the tweak here too. Rules are scoped to
   .kn800-gen-body-inner so nothing leaks outside the accordion body. */
.kn800-gen-body-inner input[type="text"],
.kn800-gen-body-inner input[type="number"],
.kn800-gen-body-inner input[type="date"],
.kn800-gen-body-inner input[type="time"],
.kn800-gen-body-inner input[type="password"],
.kn800-gen-body-inner input[type="email"],
.kn800-gen-body-inner input[type="tel"],
.kn800-gen-body-inner input[type="url"] {
    padding: 0 12px !important;
    font-size: 12px;
    border: 1px solid #e2d7bf !important;
    border-radius: 6px;
    background: #fff !important;
    color: #3d3830;
    box-sizing: border-box;
    height: 34px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    min-width: 0;
}
.kn800-gen-body-inner textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 90px;
    padding: 8px 12px !important;
    font-size: 12px;
    border: 1px solid #e2d7bf !important;
    border-radius: 6px;
    background: #fff !important;
    color: #3d3830;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.45;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kn800-gen-body-inner select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 32px 0 12px !important;
    font-size: 12px;
    height: 34px !important;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    border: 1px solid #e2d7bf !important;
    border-radius: 6px;
    background-color: #fff !important;
    color: #3d3830;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23bd9e4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
}
.kn800-gen-body-inner input:focus,
.kn800-gen-body-inner select:focus,
.kn800-gen-body-inner textarea:focus {
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18) !important;
    outline: none;
}
.kn800-gen-body-inner input::placeholder,
.kn800-gen-body-inner textarea::placeholder {
    color: #b5a785;
    font-weight: 400;
}
/* Validation error state — mirrored from qrq-form-elements.css
   .qrq-error / .qrq-error-msg. Kept as the same class names so the
   mirrored validator (kn800_general.js _kn800GenRunValidation) can
   simply add 'qrq-error' + inject '<div class="qrq-error-msg">' the
   same way it does inside the wizard. */
.kn800-gen-body-inner input.qrq-error,
.kn800-gen-body-inner select.qrq-error,
.kn800-gen-body-inner textarea.qrq-error {
    border-color: #c84a3a !important;
    background: #fff5f3 !important;
    box-shadow: 0 0 0 2px rgba(200, 74, 58, 0.18) !important;
}
.kn800-gen-body-inner .qrq-error-msg {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box;
    margin: 4px 0 -6px 0 !important;
    padding: 0 !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #c84a3a;
}

/* k-sc-wrap searchable combo — MIRRORED from qrq-form-elements.css
   (.qrq-form .k-sc-*). Same widget the wizard uses; the JS handlers
   (kScOpen / kScSelect / kScSearch in apps.js) are global so no JS
   mirror needed. If the wizard's combo is ever restyled, mirror the
   tweak here too. */
.kn800-gen-body-inner .k-sc-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.kn800-gen-body-inner .k-sc-display {
    height: 34px;
    padding: 0 32px 0 12px;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23bd9e4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    box-sizing: border-box;
}
.kn800-gen-body-inner .k-sc-display:hover { border-color: #d4c49a; }
.kn800-gen-body-inner .k-sc-wrap[data-open="1"] .k-sc-display {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18);
}
.kn800-gen-body-inner .k-sc-display-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #3d3830;
}
.kn800-gen-body-inner .k-sc-placeholder { color: #b5a785; }
.kn800-gen-body-inner .k-sc-arrow { display: none; }

.kn800-gen-body-inner .k-sc-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 1500;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.14);
    max-height: 260px;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.kn800-gen-body-inner .k-sc-search-row {
    padding: 6px;
    border-bottom: 1px solid #f0ebe0;
    flex-shrink: 0;
    background: #fafaf6;
}
.kn800-gen-body-inner .k-sc-search {
    width: 100% !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px;
    border: 1px solid #e2d7bf !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box;
}
.kn800-gen-body-inner .k-sc-search:focus {
    outline: none;
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.12) !important;
}
.kn800-gen-body-inner .k-sc-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cdb985 transparent;
}
.kn800-gen-body-inner .k-sc-list::-webkit-scrollbar { width: 6px; }
.kn800-gen-body-inner .k-sc-list::-webkit-scrollbar-track { background: transparent; }
.kn800-gen-body-inner .k-sc-list::-webkit-scrollbar-thumb { background: #cdb985; border-radius: 3px; }
.kn800-gen-body-inner .k-sc-list::-webkit-scrollbar-thumb:hover { background: #bd9e4d; }
.kn800-gen-body-inner .k-sc-option {
    padding: 8px 10px;
    font-size: 12px;
    color: #3d3830;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    line-height: 1.3;
}
.kn800-gen-body-inner .k-sc-option:hover { background: #f5f0e6; }
.kn800-gen-body-inner .k-sc-option-selected {
    background: #ede2c2;
    color: #5a4720;
    font-weight: 600;
}
.kn800-gen-body-inner .k-sc-option-clear {
    color: #b5a785;
    font-style: italic;
    border-bottom: 1px solid #f0ebe0;
    margin-bottom: 4px;
    padding-bottom: 8px;
}
.kn800-gen-body-inner .k-sc-option-clear.k-sc-option-selected {
    background: transparent;
    color: #8a7a56;
    font-weight: 500;
}
.kn800-gen-body-inner .k-sc-empty {
    padding: 12px 10px;
    color: #b5a785;
    font-size: 11px;
    text-align: center;
    font-style: italic;
}
/* Error state for a k-sc-wrap — same red halo as native inputs. */
.kn800-gen-body-inner .k-sc-wrap input[type="hidden"].qrq-error + .k-sc-display,
.kn800-gen-body-inner .k-sc-wrap .k-sc-display.qrq-error {
    border-color: #c84a3a !important;
    background-color: #fff5f3 !important;
    box-shadow: 0 0 0 2px rgba(200, 74, 58, 0.18) !important;
}

/* Disabled k-sc-wrap — locked look for review-only fields (Request
   Type / Request Flow when editing is limited). Trigger has no onclick,
   background greyed, cursor: not-allowed, chevron replaced with a lock
   icon. Hidden input still carries the value so the form collector
   picks it up on save (server diff sees no change → skip UPDATE). */
.kn800-gen-body-inner .k-sc-wrap.is-disabled .k-sc-display {
    background-color: #f5f1e8 !important;
    background-image: none !important;      /* remove the chevron svg */
    color: #8a7a56 !important;
    cursor: not-allowed !important;
    border-color: #e2d7bf !important;
    box-shadow: none !important;
}
.kn800-gen-body-inner .k-sc-wrap.is-disabled .k-sc-display:hover {
    border-color: #e2d7bf !important;
}
.kn800-gen-body-inner .k-sc-wrap.is-disabled .k-sc-display-text {
    color: #6a5f45 !important;              /* darker than muted so value stays legible */
}
.kn800-gen-body-inner .k-sc-wrap.is-disabled .k-sc-lock {
    font-size: 14px;
    color: #a89469;
    margin-left: 8px;
    flex-shrink: 0;
}

.kn800-gen-save-row {
    /* The section body is a 12-col grid — without an explicit span this
       row would land in a single 1fr cell (~1/12 wide) and its flex-end
       children would overflow outside the tile. Span all 12 so the
       Save/Cancel pair sits on its own full-width row. */
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 4px 4px;
    width: 100%;
    border-top: 1px solid #ece8d8;
    margin-top: 8px;
}
.kn800-gen-save-btn, .kn800-gen-cancel-btn, .kn800-gen-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.kn800-gen-save-btn { background: #bd9e4d; color: #fff; border-color: #a8893a; }
.kn800-gen-save-btn:hover { background: #a8893a; }
.kn800-gen-save-btn.is-loading { background: #d4c088; cursor: wait; pointer-events: none; }
.kn800-gen-save-btn.is-loading i { animation: kn800GenSpin 0.8s linear infinite; }
.kn800-gen-cancel-btn { background: #fff; color: #666; border-color: #cfc9b5; }
.kn800-gen-cancel-btn:hover { background: #f5f1e4; color: #3d3628; }
/* Reset — sits leftmost. Amber-tinted so it reads as "revert" but
   distinct from Save (solid gold) and Cancel (neutral). mr:auto
   pushes Cancel + Save to the right of the row. */
.kn800-gen-reset-btn {
    background: #fdf7e6;
    color: #7a5f1f;
    border-color: #e2d4a3;
    margin-right: auto;
}
.kn800-gen-reset-btn:hover {
    background: #f5e9c4;
    border-color: #cdb56a;
    color: #4a3810;
}

@keyframes kn800GenSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.kn800-gen-not-ready {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f7f5eb;
    border: 1px dashed #cfc9b5;
    border-radius: 4px;
    color: #7a6f4d;
    font-size: 12px;
    font-style: italic;
    width: 100%;
}
.kn800-gen-not-ready i { font-size: 16px; color: #bd9e4d; }

/* ===== Payment Information (UNIT-WISE) =============================
   Mirrors the Quick Request wizard's .qrq-payment-* / .qrq-charge-*
   look in the kn800 namespace (the wizard CSS only fires inside
   .qrq-form, so the essentials are re-declared here — no cross-file
   dependency). Layout: summary strip → one section per unit (header +
   its charge cards) → grand total. Read view + edit form share the
   card chrome; edit-only chrome (fields, flow badge, ro tags) is
   suffixed. No inline CSS anywhere — classes only. */
/* Span the whole 12-col body grid so the payment content lines up with
   the section's alert strip (both sit at the 14px body inset). Without
   this the wrap is auto-placed into a single grid track and the cards
   render narrower / more inset than the warning above them. */
.kn800-gen-pay-wrap { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }

/* Empty state */
.kn800-gen-pay-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 26px 16px;
    border: 1px dashed #d4c8a8; border-radius: 8px;
    background: #fdfbf5; color: #8a7a56; font-size: 12.5px; text-align: center;
}
.kn800-gen-pay-empty i { font-size: 18px; color: #c0a76d; }

/* Summary strip */
.kn800-gen-pay-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(to right, #faf6ea, #fff);
    border: 1px solid #e2d7bf; border-left: 3px solid #c0a76d;
    border-radius: 6px; margin-bottom: 12px; box-sizing: border-box;
}
.kn800-gen-pay-summary-left i { font-size: 22px; color: #c0a76d; }
.kn800-gen-pay-summary-body { flex: 1; min-width: 0; }
.kn800-gen-pay-summary-line1 { font-size: 12.5px; font-weight: 600; color: #3d3830; }
.kn800-gen-pay-summary-line2 { font-size: 11.5px; color: #8a7e58; margin-top: 2px; }

/* Per-unit section */
.kn800-gen-pay-unit { margin: 8px 0 16px 0; }
.kn800-gen-pay-unit-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(to right, #f5ecd3, #faf6ea);
    border: 1px solid #d4c8a8; border-bottom: 0;
    border-radius: 6px 6px 0 0; color: #5a4a1c;
}
.kn800-gen-pay-unit-head > i { font-size: 18px; color: #b89a4c; }
.kn800-gen-pay-unit-title {
    flex: 1; font-weight: 700; font-size: 13px; color: #3d3830;
    letter-spacing: 0.2px; word-break: break-all;
}
.kn800-gen-pay-unit-sub { font-size: 12px; color: #7a6a3a; font-weight: 700; white-space: nowrap; }
.kn800-gen-pay-unit-cards {
    border: 1px solid #d4c8a8; border-top: 0; border-radius: 0 0 6px 6px;
    overflow: hidden;
}

/* Charge card */
.kn800-gen-pay-card {
    background: #fff; border-top: 1px solid #ebe2c8;
    border-left: 3px solid #c0a76d;
    padding: 10px 12px 10px 14px; box-sizing: border-box;
}
.kn800-gen-pay-card:first-child { border-top: 0; }
.kn800-gen-pay-card-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.kn800-gen-pay-card-name { flex: 1; min-width: 140px; }
.kn800-gen-pay-card-title { font-size: 13px; font-weight: 600; color: #3d3830; }
.kn800-gen-pay-card-sub {
    font-size: 10.5px; color: #8a7e58; text-transform: uppercase;
    letter-spacing: 0.4px; margin-top: 2px;
}
.kn800-gen-pay-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.kn800-gen-pay-badge {
    font-size: 10.5px; padding: 2px 7px; border-radius: 10px;
    background: #faf6ea; color: #8a7a56; border: 1px solid #ebe2c8;
    line-height: 1.4; font-weight: 600;
}
.kn800-gen-pay-badge-req    { background: #f5d6c2; color: #8d3a18; border-color: #ddb59a; }
.kn800-gen-pay-badge-refund { background: #e0f0ff; color: #1a5790; border-color: #b5d3eb; }
.kn800-gen-pay-badge-tax    { background: #ffe9a8; color: #7a5b00; border-color: #e8c97a; }
.kn800-gen-pay-badge-inactive { background: #ececec; color: #777; border-color: #d5d5d5; }

/* Inactive charge card — turned off by an operator: STILL SHOWN but
   visibly de-emphasized (muted bg + reduced opacity, greyed left rail)
   so "off" reads at a glance without hiding the values. Its Final Total
   is struck through since it no longer feeds the rollups. */
.kn800-gen-pay-inactive {
    background: #f6f5f2; border-left-color: #c9c4b8; opacity: 0.72;
}
.kn800-gen-pay-inactive .kn800-gen-pay-card-total-val {
    text-decoration: line-through; color: #8a8a8a;
}

/* Active/Inactive toggle in the edit card header — mirrors the section
   Edit rocker look (.kn800-gen-edit-toggle) in the payment namespace. */
.kn800-gen-pay-active-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none; flex-shrink: 0;
}
.kn800-gen-pay-active-toggle input { display: none; }
.kn800-gen-pay-active-slider {
    position: relative; display: inline-block; width: 32px; height: 17px;
    background: #cfc9b6; border-radius: 17px; transition: background 0.2s; flex-shrink: 0;
}
.kn800-gen-pay-active-slider::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; background: #fff; border-radius: 50%;
    transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.kn800-gen-pay-active-toggle input:checked + .kn800-gen-pay-active-slider {
    background: #6fae5f;
}
.kn800-gen-pay-active-toggle input:checked + .kn800-gen-pay-active-slider::before {
    transform: translateX(15px);
}
.kn800-gen-pay-active-label {
    font-size: 11.5px; font-weight: 600; color: #5c4f2b;
}

/* Disabled searchable combo — an inactive charge's k-sc combos can't open
   (the display click is neutralized) and read as muted. */
.k-sc-disabled .k-sc-display {
    pointer-events: none; opacity: 0.6; background: #f0efec; cursor: not-allowed;
}

/* Read-view schedule grid — labelled cells */
.kn800-gen-pay-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 0;
}
.kn800-gen-pay-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kn800-gen-pay-cell small {
    color: #8a7e58; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
}
.kn800-gen-pay-cell b { color: #3d3628; font-size: 12.5px; font-weight: 600; word-break: break-word; }

/* Card total footer (read + edit share) */
.kn800-gen-pay-card-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 6px; border-top: 1px dashed #ebe2c8;
}
.kn800-gen-pay-card-total-lbl {
    color: #3d3830; font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.kn800-gen-pay-card-total-val { color: #3d3830; font-weight: 700; font-size: 13.5px; }

/* Grand total */
.kn800-gen-pay-grand {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(to right, #faf6ea, #ebe2c8);
    border: 1px solid #c0a76d; border-radius: 6px; margin-top: 6px; box-sizing: border-box;
}
.kn800-gen-pay-grand-lbl {
    font-size: 12.5px; font-weight: 600; color: #3d3830;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.kn800-gen-pay-grand-val { font-size: 15px; font-weight: 700; color: #3d3830; }

/* ---- Edit-form chrome ---- */
.kn800-gen-pay-flow-badge {
    display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
    margin: 0 0 12px 0; padding: 8px 12px;
    background: #e7f3ff; border: 1px solid #b6d4fe; border-left: 3px solid #2266aa;
    border-radius: 6px; font-size: 12px; color: #234; line-height: 1.4;
}
.kn800-gen-pay-flow-badge.is-locked {
    background: #fff7e5; border-color: #f0d9a0; border-left-color: #b88b00; color: #7a5b00;
}
.kn800-gen-pay-flow-badge i { font-size: 16px; flex-shrink: 0; }
.kn800-gen-pay-flow-badge span { flex: 1; min-width: 0; }

/* Editable field rows inside a card */
.kn800-gen-pay-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.kn800-gen-pay-fields + .kn800-gen-pay-fields { margin-top: 10px; }
.kn800-gen-pay-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 1; }
.kn800-gen-pay-field-lbl {
    font-size: 11px; color: #8a7e58; text-transform: uppercase; letter-spacing: 0.3px;
}
.kn800-gen-pay-field input {
    height: 32px; padding: 0 10px; font-size: 12px;
    border: 1px solid #e2d7bf; border-radius: 5px; background: #fff; color: #3d3830;
    width: 100%; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s;
}
.kn800-gen-pay-field input:focus {
    border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18); outline: none;
}
/* Read-only default tag */
.kn800-gen-pay-field-ro input {
    background: #faf6ea; color: #8a7a56; cursor: not-allowed; font-weight: 600;
}
.kn800-gen-pay-field-ro .kn800-gen-pay-field-lbl { color: #b39959; }
/* Standard-Flow locked Amount / Discount */
.kn800-gen-pay-locked input {
    background: #f5f1e8; color: #8a7a56; cursor: not-allowed;
}
/* The edit form's k-sc-wrap combos sit in a field column — let them
   fill the column width like a native input. */
.kn800-gen-pay-field .k-sc-wrap { width: 100%; }

@media (max-width: 900px) {
    .kn800-gen-pay-grid { grid-template-columns: repeat(2, 1fr); }
    .kn800-gen-pay-field { min-width: calc(50% - 5px); }
}

/* ---- Missing-unit placeholder (edit-only "Add payment plan") ----
   A muted, dashed variant of a priced unit block so it reads as a
   placeholder — an empty slot inviting an action — rather than a real
   unit with a schedule. Shares the gold palette of the priced cards. */
.kn800-gen-pay-missing { margin: 8px 0 16px 0; }
.kn800-gen-pay-missing .kn800-gen-pay-unit-head {
    background: repeating-linear-gradient(45deg, #faf7ee, #faf7ee 10px, #f5efdd 10px, #f5efdd 20px);
    border-style: dashed; border-color: #d8caa2;
}
.kn800-gen-pay-missing .kn800-gen-pay-unit-head > i { color: #c3ad74; }
.kn800-gen-pay-missing .kn800-gen-pay-unit-title { color: #8a7a56; }
.kn800-gen-pay-missing .kn800-gen-pay-unit-sub {
    color: #a89464; font-weight: 600; font-style: italic;
}
.kn800-gen-pay-missing-body {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 16px;
    background: #fdfbf5;
    border: 1px dashed #d8caa2; border-top: 0;
    border-radius: 0 0 6px 6px; box-sizing: border-box; text-align: center;
}
.kn800-gen-pay-missing-note {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #9a8a62;
}
.kn800-gen-pay-missing-note i { font-size: 15px; color: #c3ad74; }
.kn800-gen-pay-addbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 12.5px; font-weight: 600;
    color: #3d2f0f; background: #f0e6c9;
    border: 1px solid #cbb063; border-radius: 6px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.kn800-gen-pay-addbtn:hover {
    background: #e8d9a8; border-color: #bd9e4d;
    box-shadow: 0 1px 4px rgba(189, 158, 77, 0.25);
}
.kn800-gen-pay-addbtn:active { background: #ddc888; }
.kn800-gen-pay-addbtn i { font-size: 15px; }

/* Orphan unit section — a unit that still carries charges but is no
   longer selected on the request (the Payment validator flags it as an
   "Extra payment plan"). A faint amber-red wash + warning-toned header
   reads as flagged without clashing with the gold theme, so the operator
   spots the stale plan and the Remove control that sits in its header. */
.kn800-gen-pay-orphan .kn800-gen-pay-unit-head {
    background: linear-gradient(to right, #f7e6d6, #fbf1e8);
    border-color: #e0b48f;
}
.kn800-gen-pay-orphan .kn800-gen-pay-unit-head > i { color: #c07a45; }
.kn800-gen-pay-orphan .kn800-gen-pay-unit-cards { border-color: #e0b48f; }
/* Remove-plan button — a small destructive-styled control in the orphan
   unit's header: muted red at rest, stronger red on hover. Icon + label.
   margin-left auto keeps it hard-right after the subtotal. */
.kn800-gen-pay-rmbtn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 10px; padding: 5px 12px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    color: #9a3b2a; background: #fbeae4;
    border: 1px solid #e0a992; border-radius: 6px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.kn800-gen-pay-rmbtn:hover {
    color: #fff; background: #c0392b; border-color: #a5311f;
    box-shadow: 0 1px 4px rgba(192, 57, 43, 0.3);
}
.kn800-gen-pay-rmbtn:active { background: #a5311f; }
.kn800-gen-pay-rmbtn i { font-size: 14px; }

/* Tenant section — dial + number phone pair, joined into ONE bordered
   shell like the wizard's .qrq-mobile-picker (cream dial chip + inner
   divider + flexing borderless number input). Essentials mirrored from
   qrq-form-elements.css into the kn800 namespace — the wizard file is
   read-only and its !important rules only fire inside .qrq-form. The
   dial <select> keeps the collector's .kn800-gen-input class
   (width:100% there) so we pin the ~90px fixed basis here. */
.kn800-gen-phone-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
/* Focus halo lives on the shell (like the wizard's :focus-within) so
   the pair reads as one control. Inner control halos are killed below. */
.kn800-gen-phone-row:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,0.15);
}
.kn800-gen-phone-row .kn800-gen-dial-select {
    width: auto;
    flex: 0 0 90px;
    max-width: 90px;
    padding: 5px 4px;
    border: 0;
    border-right: 1px solid #ebe2c8;
    border-radius: 0;
    background: #faf6ea;
    color: #3d3830;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.kn800-gen-phone-row .kn800-gen-dial-select:hover { background: #f3eada; }
.kn800-gen-phone-row .kn800-gen-dial-select:focus {
    outline: none;
    border-color: #ebe2c8;
    box-shadow: none;
}
.kn800-gen-phone-row .kn800-gen-phone-num {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.kn800-gen-phone-row .kn800-gen-phone-num:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}
.kn800-gen-phone-row .kn800-gen-phone-num::placeholder {
    color: #b5a785;
    font-size: 12px;
}
/* Error state — the validator marks the inner number input; tint it
   and (where :has is supported) redden the whole shell so the border
   highlight matches every other failed field. */
.kn800-gen-phone-row .kn800-gen-phone-num.qrq-error { background: #fff5f3; }
.kn800-gen-phone-row:has(.kn800-gen-phone-num.qrq-error) {
    border-color: #c84a3a;
    box-shadow: 0 0 0 2px rgba(200,74,58,0.18);
}

/* Tenant section — sub-heading bar (PERSONAL INFORMATION / Company
   Information). Mirrors the wizard's label2 section header look
   (qrq-form-elements.css .qrq-form .tt_f13): gold left bar on cream,
   small uppercase type — so the edit popup reads like the wizard step. */
.kn800-gen-subhead {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 7px 12px;
    background: #faf6ea;
    border-left: 3px solid #bd9e4d;
    border-radius: 0 4px 4px 0;
    color: #8a7a56;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.kn800-gen-subhead i { font-size: 15px; color: #bd9e4d; }

/* =============================================================
   Tenant editor — value-display + "≡ options" / "+ Add" pattern
   -------------------------------------------------------------
   2026-07 rework: detail fields show their VALUE read-only with an
   "≡ N options" switcher (>=2 records) + an always-on "+ Add" pill on
   the label line, an inline add-row, and (for bundles) read-out lines.
   The look mirrors the Quick Request wizard's .qrq-tenant-alt-chip /
   -dropdown (qrq-form-elements.css) in the shared gold/cream palette.
   ============================================================= */

/* Right-aligned inline button group on a field's label line. margin-left
   auto pushes it to the far edge of the flex label row. */
.kn800-gen-field-btns {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Small gold pills mirroring .qrq-tenant-alt-chip. */
.kn800-gen-optbtn,
.kn800-gen-addbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    background: #faf6ea;
    border: 1px solid #e2d7bf;
    color: #8a7a56;
}
.kn800-gen-optbtn i,
.kn800-gen-addbtn i { font-size: 12px; line-height: 1; }
.kn800-gen-optbtn:hover {
    background: #f3eada;
    border-color: #c0a76d;
    color: #3d3830;
}
/* The Add pill reads slightly more actionable (filled gold). */
.kn800-gen-addbtn {
    background: #f2e6c4;
    border-color: #d8c286;
    color: #6b5a2c;
}
.kn800-gen-addbtn:hover {
    background: #e9d9a8;
    border-color: #c0a76d;
    color: #3d3830;
}

/* Read-only value display — reuse the locked field look. Not disabled
   (JS writes .value on pick/add) but not editable by the operator. */
.kn800-gen-tenant-val {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #f5f5f5;
    color: #444;
    line-height: 1.35;
    cursor: default;
}

/* Bundle read-out lines (Address→PO.Box, Work Place→Arabic, the company
   columns) beneath the main display. Compact label + value per row. */
.kn800-gen-subvals {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kn800-gen-subval-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.35;
}
.kn800-gen-subval-lbl {
    flex: 0 0 auto;
    min-width: 96px;
    color: #a79a7c;
    font-weight: 600;
}
.kn800-gen-subval {
    color: #4a4232;
    word-break: break-word;
}

/* Floating options dropdown — mirrors .qrq-tenant-alt-dropdown. */
.kn800-gen-opt-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid #d4c8a8;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.18);
    max-height: 280px;
    overflow-y: auto;
    z-index: 5000;
    box-sizing: border-box;
}
.kn800-gen-opt-row {
    padding: 8px 12px;
    border-bottom: 1px solid #f3eada;
    cursor: pointer;
    font-size: 12px;
}
.kn800-gen-opt-row:last-child { border-bottom: 0; }
.kn800-gen-opt-row:hover { background: #faf6ea; }
.kn800-gen-opt-row b {
    display: block;
    color: #3d3830;
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 12.5px;
}
.kn800-gen-opt-row-val {
    color: #8a7e58;
    font-size: 11.5px;
    word-break: break-all;
}

/* Inline add-row — hidden by default (JS flips display:flex). One input
   per sub-field, then Save / Cancel. */
.kn800-gen-addrow {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    background: #fdfbf3;
    border: 1px dashed #d8c286;
    border-radius: 6px;
}
/* A full-width add-row line — spans the whole row so a field (or a phone's
   dial + number together) sits on its own line instead of wrap-flowing next
   to the wrong neighbour. The inner input flexes to fill; a phonepick's dial
   stays fixed-width and the number fills the rest. */
.kn800-gen-addline {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.kn800-gen-addline > .kn800-gen-addinput { flex: 1 1 auto; }
.kn800-gen-addinput {
    flex: 1 1 160px;
    min-width: 120px;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #d8c286;
    border-radius: 4px;
    background: #fff;
    color: #333;
}
.kn800-gen-addinput:focus {
    outline: none;
    border-color: #bd9e4d;
    box-shadow: 0 0 0 2px rgba(189, 158, 77, 0.15);
}
/* A k-sc-wrap searchable combo inside a phone/passport add-row (dial code,
   passport country). The body-inner base rule sets width:100%, which would
   blow out the flex row — so size it as a flex item here instead. */
.kn800-gen-addrow .k-sc-wrap {
    flex: 1 1 160px;
    min-width: 120px;
    width: auto;
}
/* Dial-code picker — fixed narrow basis so the number input keeps the
   space (mirrors the wizard's dial chip + number split). Not collected:
   the JS composes the dial into the number to form the scalar value. */
.kn800-gen-addrow .k-sc-wrap.kn800-gen-adddial-sc {
    flex: 0 0 120px;
    min-width: 0;
    max-width: 120px;
}
/* Save + Cancel kept together as a unit — pushed to the row end; on a
   narrow add-row the pair wraps together instead of Cancel dropping alone. */
.kn800-gen-addbtns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}
.kn800-gen-addok,
.kn800-gen-addcancel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kn800-gen-addok i,
.kn800-gen-addcancel i { font-size: 13px; line-height: 1; }
.kn800-gen-addok {
    background: #bd9e4d;
    border-color: #a8863a;
    color: #fff;
}
.kn800-gen-addok:hover { background: #a8863a; }
.kn800-gen-addcancel {
    background: #f3eee0;
    border-color: #ddd2b4;
    color: #6b5a2c;
}
.kn800-gen-addcancel:hover { background: #e9e1cc; }

/* =============================================================
   ERROR LOGS DASHBOARD (kprocess_145 / error_logs.js)
   -------------------------------------------------------------
   Admin-only dashboard styling. Palette mirrors the alert
   variants used in kn800-gen-alert-* so operators see one
   consistent visual language across the app.
   ============================================================= */
.k-elog-container {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px;
    width: 100%;
    /* Fill the stage tab (fixed-height, overflow-hidden) so the LIST can own
       the vertical scroll — without this the page grew past the tab body and
       nothing could scroll. */
    height: 100%;
    box-sizing: border-box;
    min-height: 0;
}
.k-elog-toolbar-fixed, .k-elog-container > .k-elog-toolbar { flex: 0 0 auto; }
.k-elog-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.k-elog-toolbar {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px;
    background: #faf7f0; border: 1px solid #e8e0d0; border-radius: 6px;
}
/* Filter inputs in two columns; buttons on their own row below. */
.k-elog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k-elog-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 720px) { .k-elog-fields { grid-template-columns: 1fr; } }
.k-elog-toolbar-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-elog-input {
    height: 32px;
    padding: 4px 10px;
    border: 1px solid #c9c0a4; border-radius: 4px;
    background: #fff;
    font-size: 13px;
    color: #3d3628;
    min-width: 130px;
}
.k-elog-input:focus { border-color: #bd9e4d; outline: none; box-shadow: 0 0 0 2px rgba(189,158,77,0.15); }

/* Standard buttons — primary (gold) + ghost (outlined) variants.
   Reuse the .msg_btn palette so nothing looks out of place. */
.k-elog-btn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 32px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.k-elog-btn i { font-size: 15px; }
.k-elog-btn-primary { background: #bd9e4d; color: #fff; border-color: #bd9e4d; }
.k-elog-btn-primary:hover { background: #a88736; border-color: #a88736; }
.k-elog-btn-ghost { background: #fff; color: #3d3628; border-color: #c9c0a4; }
.k-elog-btn-ghost:hover { background: #f5f0e0; border-color: #bd9e4d; }

/* List area */
.k-elog-count {
    font-size: 12px; color: #7d7461; padding: 4px 4px 8px 4px;
}
.k-elog-empty {
    padding: 30px 20px; text-align: center; color: #999;
    font-style: italic;
    background: #fafafa; border: 1px dashed #e0e0e0; border-radius: 6px;
}

/* Table — horizontally scrollable inside its own wrapper so wide
   messages never push the tab content off screen. */
.k-elog-tblwrap { overflow-x: auto; }
.k-elog-tbl {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    font-size: 13px;
    background: #fff;
    border: 1px solid #ece2c4;
    border-radius: 6px;
    overflow: hidden;
}
.k-elog-tbl thead th {
    background: #f5eeda;
    color: #6b5a2c;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px;
    padding: 8px 10px;
    border-bottom: 1px solid #ece2c4;
    text-align: left;
    white-space: nowrap;
}
.k-elog-tbl tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f2ecd8;
    vertical-align: top;
}
.k-elog-tbl tbody tr:last-child td { border-bottom: none; }
.k-elog-tbl tbody tr:hover { background: #fdfbf4; }
.k-elog-row.is-resolved { opacity: 0.6; }
.k-elog-row.is-resolved:hover { opacity: 1; }
.k-elog-td-reg     { white-space: nowrap; color: #666; font-size: 12px; }
.k-elog-td-level   { white-space: nowrap; }
.k-elog-td-msg     { cursor: pointer; max-width: 500px; }
.k-elog-msg-text   { color: #3d3628; word-break: break-word; }
.k-elog-msg-file   { color: #999; font-size: 11px; margin-top: 2px; font-family: 'Consolas', 'Monaco', monospace; }
.k-elog-td-user    { white-space: nowrap; color: #4a5568; font-size: 12px; }
.k-elog-td-corr    { white-space: nowrap; font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; color: #7d7461; }
.k-elog-td-status  { white-space: nowrap; }
.k-elog-td-actions { white-space: nowrap; text-align: right; }

/* Level chip — same palette family as kn800-gen-alert-*. */
.k-elog-chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.k-elog-count-badge {
    display: inline-block;
    background: #fef3c7; color: #92400e;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
}
.k-elog-resolved-badge {
    display: inline-block;
    background: #d1fae5; color: #065f46;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Load-more footer */
.k-elog-loadmore-wrap { padding: 8px 0; text-align: center; }
.k-elog-loadmore {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 16px;
    border: 1px solid #c9c0a4; background: #fff; color: #3d3628;
    border-radius: 4px; cursor: pointer;
    font-size: 12px; font-weight: 600;
}
.k-elog-loadmore:hover { background: #f5f0e0; border-color: #bd9e4d; }
.k-elog-loadmore-rem { color: #999; font-weight: 400; }

/* ---- Detail popup — lives inside #show_msgbox_content ---- */
.k-elog-detail { text-align: left; font-size: 13px; }
.k-elog-dt-title {
    font-size: 15px; font-weight: 700; color: #3d3628;
    margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid #ece2c4;
}
.k-elog-dt-lvl {
    display: inline-block; font-size: 10px; padding: 2px 8px;
    background: #fdecea; color: #a8302b;
    border: 1px solid #f5b7b1; border-radius: 10px;
    margin-left: 6px; vertical-align: middle;
}
.k-elog-dt-row {
    display: grid; grid-template-columns: 130px 1fr; gap: 8px;
    padding: 4px 0;
    align-items: baseline;
}
.k-elog-dt-lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
    color: #7d7461; font-weight: 600;
}
.k-elog-dt-val { color: #3d3628; word-break: break-word; }
.k-elog-dt-mono { font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; }
.k-elog-dt-block { margin-top: 10px; }
.k-elog-dt-block .k-elog-dt-lbl { margin-bottom: 4px; }
.k-elog-dt-pre {
    background: #f8f6ef; border: 1px solid #ece2c4; border-radius: 4px;
    padding: 8px 10px;
    max-height: 300px; overflow: auto;
    font-family: 'Consolas', 'Monaco', monospace; font-size: 11px;
    color: #3d3628;
    white-space: pre-wrap; word-break: break-word;
    margin: 0;
}
.k-elog-dt-resolved {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid #ece2c4;
    color: #065f46; font-size: 12px;
}
.k-elog-dt-actions {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid #ece2c4;
    text-align: right;
}

/* Widen the show_msgbox when it hosts an error-log detail —
   otherwise stack traces + payload JSON get crammed into the
   default 380px width. Scoped by the presence of .k-elog-detail
   inside so this doesn't affect other show_msgbox uses. */
#show_msgbox:has(.k-elog-detail) {
    width: min(720px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
}
#show_msgbox:has(.k-elog-detail) .msg_lybx {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

/* ==========================================================================
   Reusable secure document uploader (k_doc_upload.js / .kdoc-up widget)
   + kn800 Required Documents per-doc layout. No inline CSS anywhere — every
   class the widget/renderer emits lives here.
   ========================================================================== */

/* Required Documents READ view — each required doc is a tidy list-card:
   icon + name on the left, a status control on the right (a "View" pill
   that opens the k120 viewer when a file is attached, or a muted
   "Not uploaded" pill when not). The border groups name + status so it
   reads as one row instead of floating text with a gap. */
.kn800-gen-docs-read-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.kn800-gen-docs-read-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #ece4cf;
    border-radius: 6px;
    background: #fdfbf5;
    font-size: 12.5px;
    box-sizing: border-box;
}
.kn800-gen-docs-read-row.has-file {
    border-color: #e0d3ad;
    background: #fbf6e9;
}
.kn800-gen-docs-read-icon {
    font-size: 16px;
    color: #c0a76d;
    flex-shrink: 0;
}
.kn800-gen-docs-read-icon.is-muted { color: #cbc4af; }
.kn800-gen-docs-read-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #463c28;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* View → small clickable pill. */
.kn800-gen-docs-read-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 11px;
    border: 1px solid #d9c79a;
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #6b5426;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.kn800-gen-docs-read-view:hover {
    background: #f3e8cf;
    border-color: #c0a76d;
    text-decoration: none;
}
.kn800-gen-docs-read-view i { font-size: 13px; }
/* Not uploaded → muted, non-interactive pill. */
.kn800-gen-docs-read-missing {
    flex-shrink: 0;
    padding: 3px 11px;
    border-radius: 999px;
    background: #f1eee4;
    color: #a89a78;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
}
.kn800-gen-docs-read-empty {
    color: #a49b82;
    font-style: italic;
    font-size: 12px;
}

/* Required Documents — each doc renders as its own CARD in a responsive
   grid so the checkbox + its upload control read as one unit and rows
   stay aligned (was a loose full-width stack with the upload floated 24px
   in, which looked ragged). The docs-only classes (.k-docs-wrap /
   .kn800-gen-docs-item / .kdoc-up-slot) are unique so they're global; the
   overrides of the SHARED wizard chip classes (.qrq-check-h*) are scoped
   to the docs section so Contract's Include widget is untouched. */
.kn800-gen-section[data-section="docs"] .qrq-check-h { display: block; }
.k-docs-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.kn800-gen-docs-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e6dcc2;
    border-radius: 8px;
    background: #fdfbf5;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
/* Ticked doc → gently highlighted card. Progressive: where :has isn't
   supported it's simply a no-op, the grid/card layout still holds. */
.kn800-gen-docs-item:has(.kn800-gen-docs-chk:checked) {
    border-color: #cdb985;
    background: #fbf6e9;
}
/* Card header = checkbox + label. Strip the wizard's pill chrome so it
   reads as a plain row inside the card (docs section only). */
.kn800-gen-section[data-section="docs"] .qrq-check-h-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    min-height: 20px;
}
.kn800-gen-section[data-section="docs"] .qrq-check-h-text {
    font-size: 13px;
    font-weight: 600;
    color: #463c28;
    letter-spacing: 0.1px;
}

/* Disabled (not-applicable) group — visible but greyed + non-interactive. */
.kn800-gen-docs-disabled {
    opacity: 0.6;
    filter: grayscale(0.35);
    pointer-events: none;
}
.kn800-gen-docs-na {
    font-size: 11px;
    font-weight: 400;
    color: #a1794b;
}

/* Upload slot — sits inside the card, indented under the label text
   (past the ~16px checkbox + 8px gap) so it reads as belonging to the doc.
   Revealed/hidden by kn800GenDocsSync on tick. */
.kdoc-up-slot {
    width: 100%;
    margin: 0;
    padding-left: 24px;
    box-sizing: border-box;
}

/* The widget container. */
.kdoc-up {
    display: block;
    width: 100%;
}
.kdoc-up.is-busy {
    opacity: 0.7;
}

/* Native file input is triggered by the styled buttons — kept out of flow. */
.kdoc-up-fileinput {
    display: none;
}

/* Preview / control row. */
.kdoc-up-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Has-file state: filename on its own line, action buttons stacked BELOW it.
   Both rows are full-width so they wrap onto separate lines inside the flex
   preview container (the preview's gap becomes the vertical spacing). */
.kdoc-up-fileline {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.kdoc-up-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.kdoc-up-fileicon {
    color: #c0a76d;
    font-size: 18px;
}

.kdoc-up-view {
    color: #6b5426;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.kdoc-up-view:hover {
    text-decoration: underline;
}

.kdoc-up-hint {
    font-size: 11px;
    color: #9a9a9a;
}

/* Buttons — pick / replace / remove share a base look. */
.kdoc-up-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d9c79a;
    border-radius: 6px;
    background: #fbf6e9;
    color: #6b5426;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.kdoc-up-btn:hover {
    background: #f3e8cf;
    border-color: #c0a76d;
}
.kdoc-up-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.kdoc-up-remove {
    border-color: #e6bcbc;
    background: #fbeeee;
    color: #a33a3a;
}
.kdoc-up-remove:hover {
    background: #f6dede;
    border-color: #d98c8c;
}

/* Progress line while a file is uploading. */
.kdoc-up-progress {
    margin-top: 4px;
    font-size: 11px;
    color: #6b5426;
}

/* =====================================================================
   Approval Progress (kn800 General tab, read-only section)
   ---------------------------------------------------------------------
   Vertical timeline of the contract-request approval flow (kflowmap_run)
   with an inline Approve / Reject bar for the current approver. Warm
   parchment palette to match .kn800-gen-* and the k146 flow-map screens.
   ===================================================================== */
/* The section body-inner is a 12-col grid; span the whole row so the
   timeline uses full width instead of a single 1/12 track. */
.kn800-appr { grid-column: 1 / -1; padding: 2px 0; }
.kn800-appr-empty { grid-column: 1 / -1; }

/* Empty / unavailable state — muted, centered notice. */
.kn800-appr-empty {
    display: flex; align-items: center; gap: 8px;
    padding: 18px 14px;
    color: #8a7f66;
    font-size: 13px;
}
.kn800-appr-empty i { font-size: 18px; color: #b0a58a; }

/* Screening tab — "Flow: <name>" header above the status timeline. */
.kn800-flow-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #e3ddc9;
    border-left: 3px solid #bd9e4d;
    border-radius: 8px;
    background: #fbf8ef;
    font-size: 13px;
    color: #3a3a3a;
}
.kn800-flow-head i { font-size: 17px; color: #bd9e4d; }
.kn800-flow-head-label { color: #8a7f66; font-weight: 600; }
.kn800-flow-head-name { font-weight: 700; color: #7a6317; }

/* The timeline is an <ol> with a continuous connector line drawn behind
   the circular status markers. */
.kn800-appr-timeline {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0 4px;
    position: relative;
}
.kn800-appr-node {
    position: relative;
    display: flex;
    align-items: center;                 /* marker + badge centred on the row */
    gap: 10px;
    padding: 11px 2px 11px 36px;         /* left room for the status marker */
    border-bottom: 1px solid #efece0;    /* clear divider so each step is one row */
    transition: background .12s ease;
}
.kn800-appr-node:last-child { border-bottom: none; }
.kn800-appr-node:hover { background: #faf9f2; }

/* Circular status marker. */
.kn800-appr-marker {
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f4f1e6;
    border: 2px solid #d8d3bf;
    color: #8a7f66;
    z-index: 1;
}
.kn800-appr-marker i { font-size: 15px; line-height: 1; }

/* Marker colours per status. */
.kn800-appr-node.is-approved .kn800-appr-marker { background: #e7f6ec; border-color: #86cfa1; color: #1e7e46; }
.kn800-appr-node.is-active   .kn800-appr-marker { background: #fdf2e0; border-color: #f2c68e; color: #b5771b; }
.kn800-appr-node.is-pending  .kn800-appr-marker { background: #f4f1e6; border-color: #d8d3bf; color: #a2977c; }
.kn800-appr-node.is-rejected .kn800-appr-marker { background: #fdecea; border-color: #f0a9a1; color: #b83227; }

/* Node body — title row, approver line, decision meta. Takes the row's
   available width so the badge sits at the far right of the SAME row. */
.kn800-appr-node-body { flex: 1 1 auto; min-width: 0; }
.kn800-appr-node-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    line-height: 1.3;
}
.kn800-appr-step {
    font-size: 11px; font-weight: 700;
    color: #a2977c; text-transform: uppercase; letter-spacing: 0.4px;
}
.kn800-appr-name { font-size: 14px; font-weight: 600; color: #3d3628; }

/* Optional type chip (review / sign / gen_draft …). */
.kn800-appr-type {
    font-size: 11px; font-weight: 600;
    color: #6b5426;
    background: #f0ead6; border: 1px solid #e2dabf;
    border-radius: 10px; padding: 1px 8px;
    text-transform: capitalize;
}

/* Status badge — a row-level element (vertically centred by the node's
   align-items), so it clearly belongs to its step's row. */
.kn800-appr-badge {
    flex-shrink: 0;
    align-self: center;
    font-size: 11px; font-weight: 700;
    border-radius: 10px; padding: 2px 10px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.kn800-appr-badge.is-approved { background: #e7f6ec; border-color: #b6e3c7; color: #1e7e46; }
.kn800-appr-badge.is-active   { background: #fdf2e0; border-color: #f2c68e; color: #8b5a1a; }
.kn800-appr-badge.is-pending  { background: #f1eddd; border-color: #ddd6bf; color: #8a7f66; }
.kn800-appr-badge.is-rejected { background: #fdecea; border-color: #f5b7b1; color: #922b21; }

/* Approver name line (with a person icon). */
.kn800-appr-approver {
    display: flex; align-items: center; gap: 5px;
    margin-top: 3px;
    font-size: 12.5px; color: #6f664f;
    word-break: break-word;
}
.kn800-appr-approver i { font-size: 14px; color: #a2977c; flex-shrink: 0; }

/* Acted decision + timestamp + optional comment. */
.kn800-appr-decision {
    display: flex; align-items: center; gap: 5px;
    margin-top: 5px;
    font-size: 12px; font-weight: 600; color: #5c5340;
}
.kn800-appr-decision i { font-size: 14px; }
.kn800-appr-node.is-approved .kn800-appr-decision { color: #1e7e46; }
.kn800-appr-node.is-rejected .kn800-appr-decision { color: #b83227; }
.kn800-appr-comment {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 4px;
    font-size: 12.5px; color: #6f664f;
    background: #faf8f0; border: 1px solid #ece8d8;
    border-radius: 6px; padding: 6px 9px;
    word-break: break-word;
}
.kn800-appr-comment i { font-size: 14px; color: #a2977c; flex-shrink: 0; margin-top: 1px; }

/* -------- Inline decision bar (current approver only) -------- */
.kn800-appr-actions {
    margin-top: 6px;
    padding: 12px;
    border: 1px solid #ece8d8;
    border-radius: 8px;
    background: #fdfcf6;
}
.kn800-appr-cmt {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 13px; font-family: inherit; color: #3d3628;
    border: 1px solid #d8d3bf;
    border-radius: 6px;
    background: #fff;
}
.kn800-appr-cmt:focus { outline: none; border-color: #b5a97f; box-shadow: 0 0 0 2px rgba(181,169,127,0.25); }
.kn800-appr-btns {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 10px;
}
.kn800-appr-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    font-size: 13px; font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.kn800-appr-btn i { font-size: 16px; }
.kn800-appr-approve { background: #1e7e46; color: #fff; }
.kn800-appr-approve:hover { background: #196b3b; }
.kn800-appr-reject { background: #fff; color: #b83227; border-color: #e6a49c; }
.kn800-appr-reject:hover { background: #fdecea; border-color: #d98c82; }

/* Lock + spinner while the decision post is in flight. .is-loading is
   swept by tt_btn_reset_all on the next cpremb / ajaxComplete (never a
   fixed timeout); it doubles as the double-click guard. */
.kn800-appr-btn.is-loading { pointer-events: none; opacity: 0.65; }
.kn800-appr-btn.is-loading .kn800-appr-btn-ico {
    animation: kn800-appr-spin 0.7s linear infinite;
}
@keyframes kn800-appr-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =====================================================================
   Approvals detail tab (kn800 Approvals) — two cards: "Approvers"
   overview + "Your approval" action card with a canvas signature pad.
   Warm parchment palette to match the .kn800-appr-* timeline above.
   ===================================================================== */
.kn800-appr-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}
.kn800-appr-card {
    border: 1px solid #e3ddc9;
    border-radius: 10px;
    background: #ffffff;     /* clean white card, stands out from the popup */
    overflow: hidden;
}
.kn800-appr-card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-bottom: 1px solid #eceadf;
    background: #ffffff;     /* white header; the border does the separation */
    font-size: 13.5px;
    font-weight: 700;
    color: #6b5426;
}
.kn800-appr-card-head i { font-size: 17px; color: #bd9e4d; }
.kn800-appr-card-body { padding: 14px; }
/*: Mode indicator pill on the right of the approval card head (Live/PIN/…). */
.kn800-appr-mode {
    margin-left: auto;               /* push to the right edge of the flex head */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}
/*: scoped tighter than ".kn800-appr-card-head i" so it wins without !important */
.kn800-appr-card-head .kn800-appr-mode i { font-size: 13px; }
.kn800-appr-card-head .kn800-appr-mode--live i { color: #2f7d32; }
.kn800-appr-card-head .kn800-appr-mode--pin  i { color: #a9762a; }
.kn800-appr-card-head .kn800-appr-mode--pwd  i { color: #4653b0; }
.kn800-appr-card-head .kn800-appr-mode--otp  i { color: #b03a68; }
.kn800-appr-mode--live { background: #eef6ee; color: #2f7d32; }
.kn800-appr-mode--pin  { background: #fdf3e3; color: #a9762a; }
.kn800-appr-mode--pwd  { background: #eef0fb; color: #4653b0; }
.kn800-appr-mode--otp  { background: #fdeef3; color: #b03a68; }
/* Card 1 hosts the timeline (.kn800-appr) — tighten its padding. */
.kn800-appr-card-body.kn800-appr { padding: 10px 14px; }

/*: Breathing room under the last card so it doesn't kiss the popup edge. */
.kn800-appr-cards { padding-bottom: 16px; }

/*: "Your approval" decision RECEIPT — shown once the viewer has acted, in place
   of the waiting notice. Status pill on the right of the card head. */
.kn800-appr-decided-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.kn800-appr-card-head .kn800-appr-decided-badge i { font-size: 13px; }
.kn800-appr-decided-badge.is-approved { background: #eef6ee; color: #2f7d32; }
.kn800-appr-decided-badge.is-rejected { background: #fbeeee; color: #b23a3a; }
.kn800-appr-card-head .kn800-appr-decided-badge.is-approved i { color: #2f7d32; }
.kn800-appr-card-head .kn800-appr-decided-badge.is-rejected i { color: #b23a3a; }
.kn800-appr-receipt { display: flex; flex-direction: column; gap: 9px; }
.kn800-appr-receipt-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.kn800-appr-receipt-row--wrap { flex-direction: column; gap: 4px; }
.kn800-appr-receipt-k {
    flex: 0 0 74px;
    color: #93813f;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: 2px;
}
.kn800-appr-receipt-v { color: #4a4636; font-weight: 500; }
.kn800-appr-receipt-row--wrap .kn800-appr-receipt-v {
    background: #faf7ef;
    border: 1px solid #eee6d2;
    border-radius: 8px;
    padding: 8px 10px;
    color: #5a5442;
    font-weight: 400;
}
.kn800-appr-receipt-sig {
    margin-top: 3px;
    border: 1px solid #eae3cf;
    border-radius: 10px;
    background: #fcfbf6;
    padding: 10px;
}
.kn800-appr-receipt-sig .kflow-sig-preview-img {
    width: 100%;
    height: 92px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Signature pad + its labels. */
.kflow-sig-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b5426;
    margin: 2px 0 6px;
}
.kflow-sig-label + .kn800-appr-cmt { margin-top: 0; }
.kflow-opt { font-weight: 400; color: #a2977c; }
.kflow-sigpad {
    display: block;
    width: 100%;
    height: 140px;
    box-sizing: border-box;
    border: 1px dashed #c9c0a1;
    border-radius: 8px;
    background: #fffef9;
    touch-action: none;      /* pad captures the gesture, not the scroller */
    /* Pen cursor (SVG data-URI). Hotspot "3 21" = the nib tip, so the line
       starts exactly where the pen points. crosshair is the fallback. */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="%23243447" stroke="%23ffffff" stroke-width="1.1" stroke-linejoin="round"/><path d="M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="%23c0a76d" stroke="%23ffffff" stroke-width="1.1" stroke-linejoin="round"/></svg>') 3 21, crosshair;
}
.kflow-sig-actions {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 12px;
}
.kflow-sig-clear {
    background: #fff;
    color: #6b5426;
    border-color: #ddd6bf;
    padding: 5px 12px;
    font-size: 12px;
}
.kflow-sig-clear:hover { background: #f4f1e6; border-color: #cfc7ad; }
.kflow-sig-clear i { font-size: 15px; }

/* Signature thumbnail rendered in the Card 1 overview. */
.kflow-sig-wrap { margin-top: 8px; }
.kflow-sig-thumb {
    max-width: 180px;
    max-height: 70px;
    border: 1px solid #e3ddc9;
    border-radius: 6px;
    background: #fff;
    padding: 3px;
}

/* ---- Saved-signature preview on the mode-aware "Your approval" card ------
   Reuses .kws_protected-img (anti-exfiltration) for the actual image layer. */
.kflow-sig-preview {
    border: 1px solid #f0ead9;
    border-radius: 10px;
    background: #fbf8f0;
    padding: 10px;
    margin-bottom: 8px;
    text-align: center;
}
.kflow-sig-preview--empty { color: #b0a487; font-size: 12.5px; padding: 22px 10px; }
.kflow-sig-preview-img {
    width: 100%;
    height: 120px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
}
.kflow-sig-caption { font-size: 12px; color: #8a7d5c; margin: 0 0 12px; }

/* ---- Mode-aware approval auth gate (PIN / Password / OTP) ----------------
   The overlay + sheet chrome are shared with the kn134 sheet classes; these
   add the gate-specific banners + password/OTP field styling. */
.kflow-gate-note,
.kflow-gate-err,
.kflow-gate-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.kflow-gate-note { background: #fbf3e0; color: #7a5c14; border: 1px solid #ecdcb2; }
.kflow-gate-note i { font-size: 16px; color: #bd9e4d; }
.kflow-gate-err  { background: #fbeded; color: #a33a3a; border: 1px solid #e7c3c3; }
.kflow-gate-err i  { font-size: 16px; color: #c0504d; }
.kflow-gate-info { background: #eaf6ec; color: #2f7a3a; border: 1px solid #c3e2c9; }
.kflow-gate-info i { font-size: 16px; color: #45a05a; }

.kflow-gate-pwd-row { display: flex; align-items: center; gap: 8px; }
.kflow-gate-pwd {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #ddd6bf;
    border-radius: 8px;
    background: #fffef9;
    font-size: 14px;
    color: #3a3018;
}
.kflow-gate-pwd:focus { outline: none; border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }

.kflow-gate-otpdest { font-size: 12px; color: #8a7d5c; margin: 8px 0 2px; }
.kflow-gate-resend { font-size: 12.5px; margin: 4px 0 2px; }
.kflow-gate-resend a { color: #a5822c; font-weight: 600; text-decoration: none; }
.kflow-gate-resend a:hover { text-decoration: underline; }

/* ---- Re-prompt (idle) window control on the Approval Signature section --- */
.kn134-sig-idleblk { margin: 4px 0 6px; }
.kn134-sig-idlelbl {
    font-size: 13px;
    font-weight: 700;
    color: #6b5426;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kn134-sig-idlelbl i { font-size: 16px; color: #bd9e4d; }
.kn134-sig-idlesub { font-size: 12px; color: #888; margin: 2px 0 8px; }
.kn134-sig-idlesel {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #ddd6bf;
    border-radius: 8px;
    background: #fffef9;
    font-size: 13.5px;
    color: #3a3018;
    cursor: pointer;
}
.kn134-sig-idlesel:focus { outline: none; border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }

/* =====================================================================
   Paper Templates tabbed DETAIL (pn_p151) — intentionally NO bespoke CSS.
   The General / Conditions / Body tabs reuse the SHARED framework classes
   (k116-form-*, k114-btn-*, k116-table, k146-step-act) exactly like the
   Flow Management tabs (pn_p146), so the two admin areas stay identical.
   ===================================================================== */


/* =====================================================================
   Legacy paper sheets — centre in the tab
   ---------------------------------------------------------------------
   The folder templates (req_realestate, req_dragonmart) centre their A4
   sheet via .kpaper-doc. The legacy .mya4 sheets had no wrapper at all,
   so they rendered flush against the left edge of the tab with no
   breathing room. .kpaper-legacydoc is emitted by
   paper_templates/legacy_contract_request_template.php around the sheet
   and reproduces the same framing.

   SCREEN ONLY, deliberately: every rule below sits inside @media screen.
   The browser Print path and the headless-Chrome --print-to-pdf pass both
   render with PRINT media, where this wrapper collapses to a plain block
   div — so the printed sheet and the downloaded PDF are byte-for-byte
   what they were before this wrapper existed. Do NOT move these rules out
   of the media query: the padding/background would then land on the
   printed page (the same class of bug as the .kpaper-page print-gap one).
   ===================================================================== */
@media screen {
    .kpaper-legacydoc {
        display: flex;
        flex-direction: column;
        /* "safe centre" — centres while the panel is wider than the sheet,
           but falls back to flex-start instead of clipping the left edge on
           a narrow panel, so the logo/header is never cut off. Same rule
           .kpaper-doc uses; overflow-x lets the user reach the rest. */
        align-items: safe center;
        overflow-x: auto;
        gap: 16px;
        padding: 16px 8px 28px;
        background: #ecebe6;
        box-sizing: border-box;
    }
    /* The sheet is a fixed-width block (.mya4 = 890px). As a flex item it
       would otherwise be allowed to shrink and squash its fixed internal
       layout on a narrow panel — pin it and let the wrapper scroll instead.

       background-color (NOT the `background` shorthand): .mya4 never declared
       one of its own, so before this the grey wrapper showed through inside
       the sheet's border. The shorthand would reset background-image, which
       is what inject_watermark() writes as an INLINE style on this same div —
       inline wins, so the watermark would survive either way, but naming just
       the colour keeps the two from fighting over one property at all. */
    .kpaper-legacydoc > * { flex-shrink: 0; background-color: #ffffff; }
}

/* ---------------------------------------------------------------------
   Legacy paper — fit one A4 sheet when printing
   ---------------------------------------------------------------------
   The .mya4 sheet is a fixed 890x1285px block, but A4 inside the paper's
   own @page margin:12mm is only ~703x1032px. Printed at 1:1 it therefore
   overflowed on BOTH axes: the right-hand column was clipped away and the
   tail spilled onto a second sheet (measured: 2 sheets).

   zoom (not transform: scale) on purpose — zoom shrinks the LAYOUT box, so
   the sheet genuinely occupies less of the page and no phantom second sheet
   is generated. A transform would only paint smaller while still reserving
   the original 1285px of height.

   0.72 was measured, not calculated: rendering the real CR_536 paper through
   headless Chrome, 0.74 was the largest value that still produced ONE sheet
   and 0.76 tipped it back to two. 0.72 keeps that headroom for the taller
   variants (.mya4-1/-2/-3 are 1305/1300/1295px against .mya4's 1285px), so
   every legacy sheet fits regardless of which one a paper uses.

   PRINT ONLY — the on-screen sheet keeps its natural size, and this pairs
   with the .kpaper-legacydoc screen-only block above: the two media never
   both apply. The folder templates are already sized in mm and are not
   touched by this rule.
   --------------------------------------------------------------------- */
@media print {
    .mya4, .mya4-1, .mya4-2, .mya4-3 { zoom: 0.72; }
}