/* =============================================================================
 * app_home_modern.css — the tenant portal's modern visual layer.
 * -----------------------------------------------------------------------------
 * A COPY of the staff app's app_assets/css/app_home_modern.css, kept under the
 * same filename and with the same class names on purpose: the two apps should
 * read as one product, and a change made to one login screen can be taken as
 * the same diff on the other.
 *
 * Loaded LAST in index.php so it overrides ttstylesmain.css and ttstyles.css
 * without either being edited. Nothing is removed from those files, so every
 * legacy class the rest of the portal still uses keeps working.
 *
 * WHAT IS LIVE HERE
 *   * the shared foundation at the top of this file (cream surfaces, the fixed
 *     .tt_body, the desktop phone-frame) - this is what makes the portal look
 *     like the staff app rather than a different product
 *   * SECTION 3, the login page
 *   * SECTION 9, Kate AI chat (#pn_ai - pages/kprocess_852.php)
 *
 * Every other section is present but INERT - see the NOT ADOPTED banners. The
 * portal reuses page ids the staff app also styles, so switching them all on at
 * once would redesign screens nobody has looked at yet.
 *
 * TENANT-SPECIFIC CHANGES so far:
 *   * login rules scoped to #tthome only (no forgot-password flow here)
 *   * ripple positions moved out of inline style attributes into this file
 *   * Kate AI header buttons stepped left of the refresh cell, title accent
 *     bar moved onto the title, page box + history sheet end at the bottom
 *     bar (all at the end of SECTION 9 under "TENANT-SPECIFIC")
 * ============================================================================= */

/* =========================================================================
   app_home_modern.css
   ---------------------------------------------------------------------------
   Single "modern visual layer" stylesheet for the staff app. Loaded AFTER
   ttstylesmain.css and ttstyles.css in index.php so it can override the
   legacy utility classes without touching them.

   Conventions:
     - Each page's rules are anchored under that page's root id (e.g.
       #tthomein, #pn_approvals) so styles don't leak to other pages.
     - Sections below are separated by a SECTION banner so it's easy to
       jump to the page you want to tweak.

   Sections in this file:
     1. SECTION: Home page          (#tthomein)
     2. SECTION: Tasks page         (#pn_approvals)
     3. SECTION: Login page         (#tthome)
     4. SECTION: Modern dialog      (#msgbox_v2 — used app-wide via show_msg_v2)
     5. SECTION: Welcome page       (#tt_welcome — one-time first-visit screen)
     6. SECTION: Forgot password    (#tt_fp_request / verify / reset)
     7. SECTION: Left menu          (#ttmenu — modern hamburger drawer)
     8. SECTION: Loading overlay    (#ttloading — modernized .tt_loading / .tt_loader)
   ========================================================================= */


/* =========================================================================
   0. iOS viewport height fix
   ---------------------------------------------------------------------------
   On iOS Safari (and Android Chrome to a lesser extent) the address bar
   collapses on scroll, but `100vh` / `height:100%` are computed once at the
   "URL bar visible" state and never recomputed. After login the home page
   renders into that taller-than-actual-viewport container, leaving an empty
   strip of background showing under the content (vanishes on a hard refresh
   because the URL bar is already collapsed by then).
   `100dvh` is the *dynamic* viewport height — it tracks the URL bar in real
   time. `-webkit-fill-available` is the pre-Safari-16 equivalent; `100vh`
   stays as the universal fallback. Each declaration overrides the previous
   when supported, so each browser uses the best one it understands.
   ========================================================================= */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;     /* stops the iOS rubber-band that exposes
                                      the body bg under the page */
    /* Solid cream to perfectly match .hp_holder. Earlier we used a
       gradient on both, but a gradient on body spans the full viewport
       (lightest at y=0, darker by y=60) while the gradient on the
       60px-tall header starts fresh at the lightest cream at y=44
       (below the status bar). That produced a visible step in lightness
       right at the seam between the status-bar safe-area and the header.
       Solid colour eliminates the interpolation entirely. */
    background: #fbfaf6;
}
/* `position: fixed; inset: 0` is the most reliable way to span iOS
   Safari's visible viewport. It bypasses every viewport-height quirk
   (URL bar collapse / expand, `100vh` lag, `100dvh` not updating, etc.)
   because fixed positioning is anchored to the visual viewport directly.
   The page slide animation still works — only the .tt_page children
   transition `left`, not .tt_body itself. */
.tt_body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    /* Same solid cream as body + .hp_holder + .kws_netbanner so the
       entire top chrome (safe-area + banner + header) reads as ONE
       continuous flat surface. */
    background: #fbfaf6 !important;
}

/* Legacy white sources — there are THREE of them, all painting the
   chrome area white and breaking the cream-everywhere look:
     1. ttstyles.css       .tt_page { background-color: #FFF; }
     2. ttstylesmain.css   .tt_page { background-color: var(--ks-themebgcolor); }
                           where --ks-themebgcolor: #ffffff
     3. Browser default for any unstyled gap
   Overriding all three by:
     a. Redefining the CSS variable to cream (covers var() consumers)
     b. Hard-overriding .tt_page directly with !important
     c. Same for html / body / .tt_body (already done above) */
:root {
    --ks-themebgcolor: #fbfaf6 !important;
}
.tt_page {
    background: #fbfaf6 !important;
    background-color: #fbfaf6 !important;
}

/* ---------------------------------------------------------------------------
 * Desktop / wide-screen presentation.
 * The app is mobile-first; on screens wider than ~600px we don't try to
 * stretch the UI — we present it inside a centered "phone frame" with a
 * calm beige backdrop. Same one-app codebase, no separate desktop layout
 * to maintain. Replaces the old `alert("Toggle Device Toolbar")` popup.
 *
 * 480px breakpoint chosen to match the existing phone-responsive media
 * queries in this stylesheet — narrower than that, full-screen wins.
 * ------------------------------------------------------------------------- */
@media (min-width: 600px) {
    html, body {
        background:
            radial-gradient(900px 600px at 50% -20%, rgba(192,167,109,.18), transparent 60%),
            linear-gradient(180deg, #fbfaf6 0%, #e8e0cf 100%) !important;
    }
    .tt_body {
        /* Pin both width and height explicitly. Without `width: 420px` the
           base `.tt_body { width: auto }` rule combined with our removal
           of `right: 0` collapsed the box to its content's intrinsic
           width — which is zero before any .tt_page is sliding in,
           leaving only the bezel visible. */
        width: 420px !important;
        max-width: 420px;
        max-height: 900px;
        height: min(92vh, 900px) !important;
        top: max(20px, calc((100vh - min(92vh, 900px)) / 2)) !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        border-radius: 28px;
        box-shadow:
            0 0 0 8px #2a2515,                  /* phone bezel */
            0 0 0 9px rgba(255,255,255,.10),    /* bezel highlight */
            0 24px 60px rgba(20, 18, 12, .35);  /* drop shadow */
        overflow: hidden;
    }
}
@media (min-width: 600px) and (max-height: 760px) {
    /* short windows — give the frame more breathing room without bezel */
    .tt_body {
        max-height: calc(100vh - 24px);
        height: calc(100vh - 24px) !important;
        top: 12px !important;
    }
}
/* All page-level wrappers (#tthome, #tt_welcome, #tthomein, #pn_approvals,
   #pn_approval_dt, #ttmenu, #tt_fp_*, etc.) just fill their parent .tt_body. */
.tt_body .tt_page {
    height: 100% !important;
}


/* ####  ADOPTED  ##########################################################
 * Switched on now that the dashboard is rebuilt on these classes. It is the
 * heaviest section - 102 rules land on #tthomein - which is exactly why it was
 * held back until the markup that needs it existed.
 * ######################################################################### */
/* =========================================================================
   1. SECTION: Home page  (#tthomein)
   ---------------------------------------------------------------------------
   Login-success landing page rendered by kprocess_0.php (ckssn → Active).
   Includes: page background, WELCOME header, profile card, menu tiles,
   notification badge, footer copyright strip.
   ========================================================================= */


/* ---------- Page surface --------------------------------------------------- */
#tthomein {
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(192,167,109,.08), transparent 60%),
        radial-gradient(900px 600px at 110% 10%, rgba(192,167,109,.06), transparent 60%),
        linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%);
    /* The page itself does NOT scroll — scrolling lives on .bd_container so
       the scrollbar starts below the fixed header instead of running behind
       it. */
    overflow: hidden !important;
    /* Phone-style slide animation. Pinned to `left` so the gradient
       backgrounds don't slow the transition. `will-change` + translateZ(0)
       promote the page to its own GPU layer — without this the `left`
       animation is CPU-bound and feels like a fade on mobile. */
    transition: left .35s cubic-bezier(.25, .8, .25, 1) !important;
    will-change: left;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Body container becomes the scroll surface, positioned strictly below the
   60px fixed header. The page bg (gradient on #tthomein) shows through. */
#tthomein .bd_container.k_pad16 {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    /* 96px bottom — clears the fixed bottom-tab bar (~64px + iOS safe-area). */
    padding: 10px 18px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
    /* Themed scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
/* Themed scrollbar — WebKit (Chrome / Edge / Safari) */
#tthomein .bd_container.k_pad16::-webkit-scrollbar       { width: 6px; }
#tthomein .bd_container.k_pad16::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
#tthomein .bd_container.k_pad16::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0a76d 0%, #a98842 100%);
    border-radius: 999px;
}
#tthomein .bd_container.k_pad16::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a98842 0%, #8a6c2a 100%);
}


/* ---------- WELCOME header bar -------------------------------------------- */
/* Same gradient + shadow + brand-gold typography across all modernized pages
   (home, tasks, login, forgot-password, ttmenu). The legacy `.hp_holder`
   declaration in ttstyles.css applies a flat white bar; we override it
   here for any page wrapped with one of our root ids. */
#tthomein ~ .hp_holder,
#tthomein .hp_holder,
#ttmenu .hp_holder,
.hp_holder {
    /* Solid cream — identical to the body background so the iOS PWA
       status-bar safe-area + this header read as ONE continuous flat
       cream surface. No gradient (would compress into the 60px height
       and visually mismatch the body's full-viewport gradient).
       No box-shadow, no border-bottom — clean transition to whatever
       sits below the header. */
    background: #fbfaf6 !important;
    box-shadow: none !important;
    letter-spacing: 2px;
    color: #4a3b1a;
    font-weight: 700 !important;
    border-bottom: 0;
    /* Anchor to the parent .tt_page (which is itself position: absolute,
       full-screen) so the header slides off-screen with its page when
       to_stage() animates left: -100%. The legacy ttstyles.css default
       was position: fixed, which positions to the viewport — that left
       every visited page's header stuck at the top forever, stacking
       on top of each other once the user navigated more than one level
       deep. */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* ---------- Header layout: title left-aligned next to hamburger --------
   Applied to every .hp_holder app-wide. Title sits flush after the 56px
   hamburger (#tth_menu / .r_micon) at the left edge; right padding keeps
   it clear of the global × close button on inner pages. Height is 60px
   to match the home page; line-height matches so the text vertically
   centers without manual flex.

   Pages that need a different layout (currently only #pn_ai, which
   absolutely-positions its own title alongside three action buttons) opt
   out by setting padding: 0 + their own absolute child positioning. */
.hp_holder {
    height: 60px !important;
    line-height: 60px !important;
    text-align: left !important;
    padding-left: 60px !important;   /* 56px hamburger + 4px breathing */
    padding-right: 56px !important;  /* keep clear of the × on inner pages */
}

/* ---------- Header chrome — hamburger + close icons --------------------- */
/* The hamburger (#tth_menu / .r_micon) and close button (#tth_cbtnid /
   .r_cbtn) are absolute-position chrome that sit on top of every page's
   60px header bar. Legacy CSS drew the hamburger as 3 stacked gold lines
   and the close as a giant `×` glyph. We now use Font Awesome icons
   inside the same containers.
   IMPORTANT: don't set `display` here — apps.js's to_stage() / close_page()
   functions toggle the icons via inline `style.display = 'block' / 'none'`
   to hide them on the login + welcome + forgot-password screens. If we
   force display via CSS, those toggles silently fail (icons stay visible
   when they shouldn't). Instead, we position the icon absolutely inside
   the container — centering works regardless of display value. */

/* Hamburger (left side) */
.r_micon {
    /* Sit flush with the top of the 60px header so the icon's vertical
       midpoint lines up exactly with the header title's baseline. */
    top: 0 !important;
    left: 0 !important;
    width: 56px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Flat cream — IDENTICAL to .hp_holder so the hamburger button
       blends seamlessly into the header bar. Previously this used a
       linear-gradient(#fbfaf6 → #f4f1ea) which made the bottom of the
       button visibly darker than the surrounding flat-cream header,
       creating a faint patch under the hamburger. */
    background: #fbfaf6 !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Above the header gradient + below the modern dialog (z-index: 9999). */
    z-index: 600;
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease;
}
.r_micon:active {
    transform: scale(.92);
    opacity: .7;
}
/* Icon is absolutely centered inside .r_micon — independent of the
   container's display value, so JS toggling between block/none still
   shows/hides correctly. */
.r_micon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #a98842;
    line-height: 1;
}


/* Close × (right side) */
.r_cbtn {
    top: 0 !important;
    right: 0 !important;
    /* Override the legacy `right: 25px` to align flush with the right edge. */
    left: auto;
    width: 56px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Reset legacy giant-glyph styling. */
    line-height: 1 !important;
    font-size: inherit !important;
    /* Flat cream — IDENTICAL to .hp_holder. Same reasoning as .r_micon
       above: the previous linear-gradient made the bottom of the close
       button visibly darker than the surrounding header. */
    background: #fbfaf6 !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 600;
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease;
}
.r_cbtn:active {
    transform: scale(.92);
    opacity: .7;
}
.r_cbtn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #a98842;
    line-height: 1;
}


/* ---------- Profile card --------------------------------------------------- */
/* New markup (kprocess_0.php → home page profile block):
       .profile_card
         .profile_card__avatar    > img
         .profile_card__name      (full name, ALL CAPS)
         .profile_card__role      (kusers_title — only when different from name)
         .profile_card__meta      > .profile_card__chip × n  (EMP, @, email, mobile) */
#tthomein .profile_card {
    position: relative;
    width: auto;
    margin: 8px 8px 18px;
    padding: 28px 18px 22px;
    background: linear-gradient(135deg, #fffdf7 0%, #f7eed8 100%);
    border-radius: 18px;
    box-shadow:
        0 12px 28px rgba(120,90,30,.08),
        inset 0 0 0 1px rgba(192,167,109,.18);
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
#tthomein .profile_card:active {
    transform: translateY(1px);
    box-shadow:
        0 6px 16px rgba(120,90,30,.06),
        inset 0 0 0 1px rgba(192,167,109,.18);
}

/* Decorative corner accents — same gold halos the original card had. */
#tthomein .profile_card::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(closest-side, rgba(192,167,109,.35), transparent 70%);
    pointer-events: none;
}
#tthomein .profile_card::after {
    content: "";
    position: absolute;
    bottom: -70px; left: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(closest-side, rgba(192,167,109,.18), transparent 70%);
    pointer-events: none;
}

/* Avatar circle: gradient ring + white inner halo + soft drop shadow. */
#tthomein .profile_card__avatar {
    position: relative;
    width: 122px;
    height: 122px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6bb7f 0%, #a98842 100%);
    padding: 4px;
    box-sizing: border-box;
    box-shadow:
        0 12px 24px rgba(120,90,30,.22),
        0 0 0 6px rgba(255,255,255,.7),
        0 0 0 7px rgba(192,167,109,.35);
}
#tthomein .profile_card__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}

/* Name (large), then role (smaller, gold). */
#tthomein .profile_card__name {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .6px;
    color: #2a2a2a;
    margin-top: 4px;
}
#tthomein .profile_card__role {
    position: relative;
    z-index: 1;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8a6c2a;
    margin-top: 4px;
}

/* Meta row — chips for EMP id, @username, email, mobile. Wraps on narrow
   phones so 4 chips never overflow a 320px viewport. */
#tthomein .profile_card__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}
#tthomein .profile_card__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
    color: #6b5524;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 999px;
    /* Long emails / mobiles stay on one chip line — chip can shrink visually
       but text won't break mid-string. */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tthomein .profile_card__chip i {
    font-size: 10px;
    color: #c0a76d;
    margin-right: 3px;
}


/* ---------- Menu tiles ---------------------------------------------------- */
/* Outer cell (clickable) */
#tthomein div[onclick][class*="w_50p"][class*="h_50ph"] {
    padding: 8px !important;
    height: 44vw !important;
    max-height: 180px;
}

/* Inner card */
#tthomein div[onclick][class*="w_50p"][class*="h_50ph"] > .kp_r.w_100p.h_100p.k_brdr1.k_brdrr7 {
    border: 0 !important;
    border-radius: 14px !important;
    background: #ffffff;
    box-shadow:
        0 6px 16px rgba(60,40,0,.06),
        0 1px 0 rgba(192,167,109,.12);
    transition: transform .18s ease, box-shadow .18s ease;
    /* `overflow: visible` (not hidden) so the red task-count badge that
       hangs over the corner (top: -8px; right: -8px) is fully visible.
       The bottom gold accent line is bounded by `left: 14px; right: 14px`
       which already keeps it inside the rounded corners, so dropping
       overflow-clip doesn't break it. */
    overflow: visible;
    position: relative;
}
#tthomein div[onclick][class*="w_50p"][class*="h_50ph"]:active > .kp_r.w_100p.h_100p.k_brdr1.k_brdrr7 {
    transform: translateY(2px) scale(.985);
    box-shadow: 0 3px 8px rgba(60,40,0,.06);
}

/* Subtle gradient bottom border accent */
#tthomein div[onclick][class*="w_50p"][class*="h_50ph"] > .kp_r.w_100p.h_100p.k_brdr1.k_brdrr7::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c0a76d, transparent);
    border-radius: 2px;
    opacity: .55;
}

/* Icon area: turn the .kp_a wrapper into a flex centerer so we can
   drop the legacy negative-margin trick that pushed icons above center. */
#tthomein .kp_a.w_50p.h_30p.k_vhc {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
}

/* Icon backdrop circle behind each SVG.
   We override .k_vhc absolute-positioning here so the circle sits
   naturally in the center of the flex parent above. */
#tthomein .kp_a.w_50p.h_30p.k_vhc > .kp_r.w_50.h_50 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.35),
        0 6px 14px rgba(120,90,30,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#tthomein .kp_a.w_50p.h_30p.k_vhc > .kp_r.w_50.h_50 svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* Tile label (standard weight) */
#tthomein div[onclick][class*="w_50p"][class*="h_50ph"] .w_100p.h_30p.k_floatl.k_pad8 {
    font-size: 13px;
    color: #2c2614;
    letter-spacing: .2px;
    padding-top: 6px !important;
    text-align: center;
}


/* ---------- Dashboard widgets (above the preserved tile grid) ------------
   Sits between the profile_card and the tile grid on #tthomein. Built to
   render INSTANTLY with the data we already fetch for the Tasks badge —
   no extra DB queries, no blocking. data-stat hooks let a future
   kws_dashboard_refresh() helper update each card asynchronously after
   page paint when real API stats are wired up. */
#tthomein .dash {
    margin-top: 8px;
    margin-bottom: 6px;
}
#tthomein .dash__hello {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 10px;
    color: #4a3b1a;
}
#tthomein .dash__hello-greet {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
#tthomein .dash__hello-date {
    font-size: 11.5px;
    color: #8a7d5f;
    white-space: nowrap;
}
#tthomein .dash__hello-date i { color: #c0a76d; margin-right: 2px; }

/* 3-card stat grid. */
#tthomein .dash__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
#tthomein .dash__stat {
    position: relative;
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    padding: 12px 10px 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    overflow: hidden;
}
#tthomein .dash__stat:hover  { border-color: rgba(192,167,109,.5); box-shadow: 0 4px 10px rgba(60,40,0,.08); }
#tthomein .dash__stat:active { transform: scale(.98); }
#tthomein .dash__stat-icon {
    width: 32px; height: 32px;
    margin: 0 auto 6px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: rgba(192,167,109,.18);
    color: #a88f57;
}
#tthomein .dash__stat-num {
    font-size: 22px;
    font-weight: 700;
    color: #1c2748;
    line-height: 1.05;
    margin-bottom: 2px;
}
#tthomein .dash__stat-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6e624a;
    font-weight: 600;
}

/* Tone variants — light tinted accent on the icon disc + a 4px coloured
   strip down the left edge so the user can read each card at a glance. */
#tthomein .dash__stat--info::before,
#tthomein .dash__stat--good::before,
#tthomein .dash__stat--warn::before,
#tthomein .dash__stat--active::before,
#tthomein .dash__stat--expired::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
}
#tthomein .dash__stat--info::before { background: linear-gradient(180deg, #c0a76d, #a88f57); }
#tthomein .dash__stat--info .dash__stat-icon { background: rgba(192,167,109,.18); color: #a88f57; }
#tthomein .dash__stat--good::before { background: linear-gradient(180deg, #6f8c66, #466138); }
#tthomein .dash__stat--good .dash__stat-icon { background: rgba(111,140,102,.18); color: #466138; }
#tthomein .dash__stat--warn::before { background: linear-gradient(180deg, #c8332a, #800000); }
#tthomein .dash__stat--warn .dash__stat-icon { background: rgba(200,51,42,.16); color: #b62a2a; }
#tthomein .dash__stat--warn .dash__stat-num   { color: #b62a2a; }

/* Active tasks card — bright green so a healthy workload reads "good"
   at a glance. More vivid than --good (which is muted olive) since this
   card is the primary call-to-action for the user's day. */
#tthomein .dash__stat--active::before { background: linear-gradient(180deg, #2e8b57, #1f6b3f); }
#tthomein .dash__stat--active .dash__stat-icon { background: rgba(46,139,87,.18); color: #1f6b3f; }
#tthomein .dash__stat--active .dash__stat-num   { color: #1f6b3f; }

/* Expired tasks card — maroon so overdue items are unmissable. Deeper
   and more red-toned than --warn so it reads as "needs attention" without
   competing visually with the brand-gold accents. */
#tthomein .dash__stat--expired::before { background: linear-gradient(180deg, #800000, #4a0000); }
#tthomein .dash__stat--expired .dash__stat-icon { background: rgba(128,0,0,.14); color: #800000; }
#tthomein .dash__stat--expired .dash__stat-num   { color: #800000; }

/* Task summary card — three sub-stats (Completed / Approved / Rejected)
   in a single tappable card. Sits between the top stats grid and the
   "what to do next" hint. All values come from the same combined query
   that feeds the Active card so this widget is free DB-wise. */
#tthomein .dash__summary {
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
#tthomein .dash__summary:hover  { border-color: rgba(192,167,109,.5); box-shadow: 0 4px 10px rgba(60,40,0,.08); }
#tthomein .dash__summary:active { transform: scale(.99); }
#tthomein .dash__summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #4a3b1a;
    margin-bottom: 8px;
}
#tthomein .dash__summary-head > i:first-child { color: #c0a76d; font-size: 13px; }
#tthomein .dash__summary-head > span { flex: 1 1 auto; }
#tthomein .dash__summary-chev { color: #c4b58a; font-size: 11px; }
#tthomein .dash__summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
#tthomein .dash__summary-cell {
    text-align: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: #fbf6ec;
    border: 1px solid rgba(192,167,109,.18);
}
#tthomein .dash__summary-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #1c2748;
    margin-bottom: 4px;
}
#tthomein .dash__summary-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6e624a;
    font-weight: 600;
}
/* Tone-coded cells — green for completed/approved, red for rejected. */
#tthomein .dash__summary-cell--complete { background: linear-gradient(135deg, #f1f7ee 0%, #e3f0dc 100%); border-color: rgba(111,140,102,.30); }
#tthomein .dash__summary-cell--complete .dash__summary-num { color: #466138; }
#tthomein .dash__summary-cell--approve  { background: linear-gradient(135deg, #fffaee 0%, #f7eccc 100%); border-color: rgba(192,167,109,.45); }
#tthomein .dash__summary-cell--approve  .dash__summary-num { color: #8a6a1a; }
#tthomein .dash__summary-cell--reject   { background: linear-gradient(135deg, #fdf0ee 0%, #f7d8d3 100%); border-color: rgba(200,51,42,.30); }
#tthomein .dash__summary-cell--reject   .dash__summary-num { color: #b62a2a; }
/* "My Ideas" cell on the Suggestions summary card — lavender to
   distinguish from the green/amber/red used by the Task summary. */
#tthomein .dash__summary-cell--mine     { background: linear-gradient(135deg, #f6efff 0%, #e8d8f7 100%); border-color: rgba(150,60,170,.30); }
#tthomein .dash__summary-cell--mine     .dash__summary-num { color: #5a1e6b; }

@media (max-width: 360px) {
    #tthomein .dash__summary-num { font-size: 18px; }
    #tthomein .dash__summary-lbl { font-size: 9.5px; }
}

/* Hint card — single-row "what to do next" tucked under the stats. */
#tthomein .dash__hint {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    padding: 11px 14px;
    margin-bottom: 14px;
}
#tthomein .dash__hint-icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(138,108,42,.20);
}
#tthomein .dash__hint--clear .dash__hint-icon,
#tthomein .dash__hint-icon--clear {
    background: linear-gradient(135deg, #6f8c66, #466138);
    box-shadow: 0 2px 6px rgba(70,97,56,.22);
}
#tthomein .dash__hint-body { flex: 1 1 auto; min-width: 0; }
#tthomein .dash__hint-title {
    font-size: 13px;
    font-weight: 700;
    color: #1c2748;
    margin-bottom: 2px;
}
#tthomein .dash__hint-sub {
    font-size: 11.5px;
    color: #6e624a;
    line-height: 1.4;
}

/* ---------- Compact Quick-Access tile grid -----------------------------
   3-column grid using the existing SVG icon set (kget_svg) — keeps the
   familiar artwork from the legacy big tiles but in a tighter card so
   the dashboard above stays in view without losing the visual identity. */
#tthomein .qa_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}
#tthomein .qa_tile {
    position: relative;
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    padding: 16px 8px 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    min-height: 100px;
}
#tthomein .qa_tile:hover  { border-color: rgba(192,167,109,.5); box-shadow: 0 4px 12px rgba(60,40,0,.10); }
#tthomein .qa_tile:active { transform: scale(.97); }
#tthomein .qa_tile__icon {
    position: relative;          /* anchor for the in-disc badge */
    width: 50px; height: 50px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.35),
        0 4px 10px rgba(120,90,30,.10);
    overflow: visible;           /* let the badge bleed out of the disc */
    /* The legacy big tiles applied .k_stroke1 (stroke:#c0a76d) on the
       SVG container — most icons in the kicon table use stroke-only
       paths with fill="transparent", so without an explicit stroke
       colour they render INVISIBLE (e.g. the "message" icon for the
       Suggestions tile). Setting both `color` (for currentColor refs)
       and explicit svg/path stroke below restores the gold artwork. */
    color: #c0a76d;
}
/* Tame the SVG sizing inside the icon disc — kget_svg renders an inline
   svg whose intrinsic size can be quite large. Force it to fit cleanly,
   and apply the legacy gold stroke so stroke-only icons (Suggestions,
   Logout, etc.) actually appear. */
#tthomein .qa_tile__icon svg {
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
    display: block;
    stroke: #c0a76d;
}
#tthomein .qa_tile__icon svg path,
#tthomein .qa_tile__icon svg rect,
#tthomein .qa_tile__icon svg circle,
#tthomein .qa_tile__icon svg line,
#tthomein .qa_tile__icon svg polyline,
#tthomein .qa_tile__icon svg polygon {
    /* Inherit stroke from the parent svg unless the icon already sets
       its own colour explicitly (loyalty2 has fill="#c0a76d", tasks
       has its own fills) — those win because of attribute specificity. */
    stroke: inherit;
}
/* Boxicon font support inside the tile disc — used by tiles whose icon
   slug is `bx-*` / `bxs-*`. Sized to match the existing kicon SVGs
   (≈26 px) and coloured gold to keep the visual language uniform. */
#tthomein .qa_tile__icon i.bx {
    font-size: 28px;
    line-height: 1;
    color: #a98842;
}
#tthomein .qa_tile__label {
    font-size: 12px;
    font-weight: 600;
    color: #2a2515;
    letter-spacing: 0.2px;
    line-height: 1.2;
    /* Allow up to 2 lines so "Human Resource" / "Corp Contacts" don't
       get ellipsis-truncated. Falls back to plain overflow:hidden on
       browsers without -webkit-line-clamp support — they'd show the
       first line only, which is acceptable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: 28px;            /* reserves room so 1- and 2-line tiles align */
}
/* Logout tile — subtle red tint to mark it as destructive. Re-stroke
   only (no fill override — that turned the path into a solid red square).
   The kicon "logout" SVG is stroke-only with fill="transparent", so
   recolouring just the stroke keeps the door + arrow shape intact. */
#tthomein .qa_tile--logout .qa_tile__icon {
    background: linear-gradient(135deg, #fde5e5 0%, #f5c4c4 100%);
    box-shadow:
        inset 0 0 0 1px rgba(176,30,30,.25),
        0 4px 10px rgba(176,30,30,.10);
    color: #b00020;
}
#tthomein .qa_tile--logout .qa_tile__icon svg { stroke: #b00020; }
#tthomein .qa_tile--logout .qa_tile__label    { color: #7c1729; }

/* Active-task pill — anchored to the upper-right corner of the icon
   disc (same pattern as native app-icon notification badges) so it no
   longer crowds the QUICK ACCESS divider above the tile.

   The .qa_tile container has overflow: hidden to keep its rounded
   corners clean, but the badge needs to bleed slightly out of the disc.
   .qa_tile__icon has overflow: visible so the disc clips its own SVG
   to a circle while still letting the badge float to the upper-right. */
#tthomein .qa_tile__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: linear-gradient(135deg, #c8332a 0%, #800000 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(176,30,30,.30);
    line-height: 1.3;
    white-space: nowrap;
}

/* Tighter on narrow phones — drop label to ~11px so longer titles
   ("Human Resource", "Corp Contacts") still read on one line. */
@media (max-width: 360px) {
    #tthomein .qa_tile { min-height: 96px; padding: 14px 6px 10px; }
    #tthomein .qa_tile__icon { width: 44px; height: 44px; }
    #tthomein .qa_tile__icon svg { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }
    #tthomein .qa_tile__label { font-size: 11px; min-height: 26px; }
}

/* Section divider before the preserved tile grid below. */
#tthomein .dash__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px 10px;
}
#tthomein .dash__divider span {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a7d5f;
    font-weight: 700;
}
#tthomein .dash__divider::before,
#tthomein .dash__divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(192,167,109,.30);
}

/* Tighter at narrow phones. */
@media (max-width: 360px) {
    #tthomein .dash__stat-num { font-size: 19px; }
    #tthomein .dash__stat-lbl { font-size: 9.5px; }
    #tthomein .dash__hint-title { font-size: 12.5px; }
}


/* ---------- Notification badge ------------------------------------------- */
#tthomein .k_badgecount {
    background: linear-gradient(135deg, #c8332a 0%, #800000 100%) !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px !important;
    min-width: 22px;
    text-align: center;
    border-radius: 999px !important;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(128,0,0,.35);
    top: -8px !important;
    right: -8px !important;
    z-index: 5;
}


/* ---------- Page footer ------------------------------------------------- */
/* Shared, modern, inline footer block. Currently emitted by:
     - kprocess_0.php (home page, after the menu tiles)
     - kprocess_2.php (tasks page, after the history pager)
   The footer scrolls with page content (it is NOT position:fixed) so it sits
   below the last card and feels like a natural end-of-page sign-off.
   To add it to another page, just emit the same .app_footer markup at the
   end of that page's content. */
#tthomein .app_footer,
#pn_approvals   .app_footer, #pn_approvals .app_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px 4px 4px;
    padding: 14px 12px;
    /* Pin the footer to the same font the rest of the body uses (.tt_txt2).
       Without this, the Tasks-page wrapper has no font-family and would fall
       back to the browser default (often a serif on Windows), making the
       footer look inconsistent vs the home page. */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: .4px;
    color: #8a8170;
    background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(251,246,236,.85) 100%);
    border-top: 1px solid rgba(192,167,109,.28);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(60,40,0,.04);
}
#tthomein .app_footer__brand,
#pn_approvals   .app_footer__brand, #pn_approvals .app_footer__brand {
    font-weight: 600;
    color: #4a3b1a;
    letter-spacing: .6px;
}
#tthomein .app_footer__sep,
#pn_approvals   .app_footer__sep, #pn_approvals .app_footer__sep {
    color: #c0a76d;
    font-size: 9px;
    line-height: 1;
}
#tthomein .app_footer__text,
#pn_approvals   .app_footer__text, #pn_approvals .app_footer__text {
    color: #8a8170;
}




/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
/* =========================================================================
   2. SECTION: Tasks page  (#pn_approvals)
   ---------------------------------------------------------------------------
   Rendered by kprocess_2.php → pn_task. The PHP emits semantic markup with
   the following class hierarchy (per row):
       .pn_task_row[data-branch=...]
         .pn_task_row__icon
         .pn_task_row__body
            .pn_task_row__branch
            .pn_task_row__title
            .pn_task_row__by
            .pn_task_row__meta  > .pn_task_row__chip × n
         .pn_task_row__chev
   Section headers use .pn_task_section / .pn_task_section__title.
   Empty states use .pn_task_empty / .pn_task_empty__icon / .pn_task_empty__text.
   ========================================================================= */


/* ---------- Page surface ------------------------------------------------- */
#pn_approvals, #pn_approvals {
    background:
        radial-gradient(1000px 500px at -10% -5%, rgba(192,167,109,.07), transparent 60%),
        linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%);
    /* Same scroll-below-header pattern as #tthomein. */
    overflow: hidden !important;
    /* Phone-style slide animation — see note in #tthomein. The will-change
       + translateZ(0) combo is what turns the slide from a CPU "fade" into
       a true GPU-accelerated slide. */
    transition: left .35s cubic-bezier(.25, .8, .25, 1) !important;
    will-change: left;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Body container is the scroll surface — sits strictly below the 60px
   fixed header so the scrollbar never overlaps the header. */
#pn_approvals .bd_container {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    /* 96px bottom — clears the fixed bottom-tab bar (~64px + iOS safe-area). */
    padding: 10px 14px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
    /* Themed scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
/* Themed scrollbar — WebKit */
#pn_approvals .bd_container::-webkit-scrollbar,       #pn_approvals .bd_container::-webkit-scrollbar       { width: 6px; }
#pn_approvals .bd_container::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
#pn_approvals .bd_container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0a76d 0%, #a98842 100%);
    border-radius: 999px;
}
#pn_approvals .bd_container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a98842 0%, #8a6c2a 100%);
}

/* The legacy markup emits <div class="tt_line20" style="margin-top:55px">
   which is responsible for the giant empty band below the header.
   Hide it on this page so the section pill sits right below the header. */
#pn_approvals .tt_line20 {
    display: none !important;
}

/* The first section pill (ACTIVE) should sit close to the header. */
#pn_approvals .pn_task_section:first-of-type {
    margin-top: 6px !important;
}


/* ---------- Header bar (TASK) ------------------------------------------- */
/* Flat cream — IDENTICAL to global .hp_holder + hamburger + close button.
 * Previously used a linear-gradient #fbfaf6 → #f4f1ea with shadow + gold
 * hairline; the gradient made the middle of the bar darker than the flat
 * corners and the hairline + shadow added visual seams between the bar
 * and the page content below. Matches the rest of the app's top chrome. */
#pn_approvals .hp_holder {
    background: #fbfaf6 !important;
    box-shadow: none !important;
    letter-spacing: 2px;
    color: #4a3b1a;
    border-bottom: 0;
    /* Slightly bolder TASK label so it reads at a glance. */
    font-weight: 700;
    font-size: 14px;
}


/* ---------- Section heading (Active / History) ------------------------- */
/* Small uppercase capsule chip — replaces the original full-width gold bar. */
#pn_approvals .pn_task_section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 4px 10px;
}
#pn_approvals .pn_task_section__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #8a6c2a;
    padding: 4px 12px;
    background: rgba(192,167,109,.16);
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 999px;
}
/* History variant — slightly different tint to distinguish from Active. */
#pn_approvals .pn_task_section--history .pn_task_section__title {
    color: #6b5524;
    background: rgba(120,90,30,.10);
    border-color: rgba(120,90,30,.22);
}
/* Count badge sitting next to the section title (Active 3, History 250). */
#pn_approvals .pn_task_section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(120,90,30,.25);
}
/* History count uses a deeper tone so each section reads at a glance. */
#pn_approvals .pn_task_section--history .pn_task_section__count {
    background: linear-gradient(135deg, #8a6c2a 0%, #6b5524 100%);
}

/* Expired variant — amber/warning tone so overdue items stand out from
   both Active (default gold) and History (deeper brown). Tone matches
   the .pn_tsk__status-chip--expired chip already used in task details. */
#pn_approvals .pn_task_section--expired .pn_task_section__title {
    color: #8a4a08;
    background: rgba(210, 138, 26, .15);
    border-color: rgba(210, 138, 26, .35);
}
#pn_approvals .pn_task_section--expired .pn_task_section__count {
    background: linear-gradient(135deg, #d28a1a 0%, #a86510 100%);
}
/* Subtle row tint so an Expired task in the list is visually distinct. */
#pn_approvals .pn_task_row--expired {
    background: linear-gradient(180deg, rgba(210, 138, 26, .05), rgba(255, 255, 255, 0));
    border-left: 3px solid rgba(210, 138, 26, .55);
}
/* Overdue-days chip — warning-coloured so the deadline jumps out. */
#pn_approvals .pn_task_row__chip--overdue {
    background: rgba(210, 138, 26, .15);
    color: #8a4a08;
    font-weight: 600;
}
/* Same chip needs to work on the filtered list page too. */
#pn_approvals .pn_task_row__chip--overdue {
    background: rgba(210, 138, 26, .15);
    color: #8a4a08;
    font-weight: 600;
}
#pn_approvals .pn_task_row--expired {
    background: linear-gradient(180deg, rgba(210, 138, 26, .05), rgba(255, 255, 255, 0));
    border-left: 3px solid rgba(210, 138, 26, .55);
}

/* ===================== pn_task_list filtered list page ================ */
/* Back link — sits above the status pills, mimics the left-pointing
   arrow seen on iOS modal pages. */
#pn_approvals .pn_tsk_list__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8a6c2a;
    font-size: 13px;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
}
#pn_approvals .pn_tsk_list__back:hover { color: #6b5524; }

/* Status pills row — wraps on narrow screens so all six are visible
   without horizontal-scroll discovery cost (users were missing Rejected
   and All when the row scrolled off the right edge). */
#pn_approvals .pn_tsk_list__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px 12px;
}
#pn_approvals .pn_tsk_list__pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(192,167,109,.10);
    color: #6b5524;
    border: 1px solid rgba(192,167,109,.28);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, transform .12s;
}
#pn_approvals .pn_tsk_list__pill:hover  { background: rgba(192,167,109,.20); }
#pn_approvals .pn_tsk_list__pill:active { transform: scale(.96); }
/* Selected pill — uses the same per-status palette as the dashboard cards. */
#pn_approvals .pn_tsk_list__pill--on {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
#pn_approvals .pn_tsk_list__pill--on.pn_tsk_list__pill--active    { background: linear-gradient(135deg, #2e8b57, #1f6b3f); }
#pn_approvals .pn_tsk_list__pill--on.pn_tsk_list__pill--expired   { background: linear-gradient(135deg, #800000, #4a0000); }
#pn_approvals .pn_tsk_list__pill--on.pn_tsk_list__pill--completed { background: linear-gradient(135deg, #6b5524, #3f3215); }
#pn_approvals .pn_tsk_list__pill--on.pn_tsk_list__pill--approved  { background: linear-gradient(135deg, #c0a76d, #8a6c2a); }
#pn_approvals .pn_tsk_list__pill--on.pn_tsk_list__pill--rejected  { background: linear-gradient(135deg, #b62a2a, #7a1414); }
#pn_approvals .pn_tsk_list__pill--on.pn_tsk_list__pill--all       { background: linear-gradient(135deg, #555, #2a2a2a); }

/* CR search — full-width input row sitting above the date filter. */
#pn_approvals .pn_tsk_list__search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 4px 4px;
    margin-bottom: 4px;
}
#pn_approvals .pn_tsk_list__search-ico {
    position: absolute;
    left: 16px;
    color: #8a6c2a;
    font-size: 13px;
    pointer-events: none;
}
#pn_approvals .pn_tsk_list__search-inp {
    flex: 1;
    padding: 10px 38px 10px 36px;
    border-radius: 999px;
    border: 1px solid rgba(192,167,109,.40);
    background: #fff;
    font-size: 13px;
    color: #2a2515;
    font-family: inherit;
}
#pn_approvals .pn_tsk_list__search-inp:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
#pn_approvals .pn_tsk_list__search-inp::placeholder { color: rgba(107,85,36,.55); }
#pn_approvals .pn_tsk_list__search-clear {
    position: absolute;
    right: 14px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 0;
    background: rgba(192,167,109,.18);
    color: #6b5524;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background .15s;
}
#pn_approvals .pn_tsk_list__search-clear:hover { background: rgba(192,167,109,.32); }

/* Date-range filter row — inputs sit side-by-side with Apply/Clear on the end. */
#pn_approvals .pn_tsk_list__filters {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 8px 4px 4px;
}
#pn_approvals .pn_tsk_list__filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 120px;
}
#pn_approvals .pn_tsk_list__filter-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #8a6c2a;
    letter-spacing: .4px;
    text-transform: uppercase;
}
#pn_approvals .pn_tsk_list__filter-inp {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(192,167,109,.40);
    background: #fff;
    font-size: 13px;
    color: #2a2515;
    font-family: inherit;
}
#pn_approvals .pn_tsk_list__filter-inp:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
#pn_approvals .pn_tsk_list__filter-apply,
#pn_approvals .pn_tsk_list__filter-clear {
    padding: 9px 14px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    transition: filter .15s, transform .12s;
}
#pn_approvals .pn_tsk_list__filter-apply {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 10px rgba(138,108,42,.18);
}
#pn_approvals .pn_tsk_list__filter-apply:hover  { filter: brightness(1.06); }
#pn_approvals .pn_tsk_list__filter-apply:active { transform: scale(.96); }
#pn_approvals .pn_tsk_list__filter-clear {
    background: rgba(192,167,109,.10);
    color: #6b5524;
    border: 1px solid rgba(192,167,109,.30);
}
#pn_approvals .pn_tsk_list__filter-clear:hover { background: rgba(192,167,109,.20); }

/* Result-count summary — small pill above the list. */
#pn_approvals .pn_tsk_list__count-bar {
    padding: 12px 4px 8px;
    color: #6b5524;
    font-size: 12.5px;
}
#pn_approvals .pn_tsk_list__count-num {
    font-weight: 700;
    color: #2a2515;
    font-size: 14px;
}
#pn_approvals .pn_tsk_list__count-lbl {
    color: #6b5524;
    text-transform: lowercase;
}


/* ---------- Task row card ----------------------------------------------- */
#pn_approvals .pn_task_row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px 0;
    padding: 14px 14px 14px 16px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 4px 14px rgba(60,40,0,.06),
        0 1px 0 rgba(192,167,109,.10);
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    /* Default left accent — overridden per branch below. */
    border-left: 4px solid #c0a76d;
}
#pn_approvals .pn_task_row:active {
    transform: translateY(1px) scale(.995);
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
}

/* Branch-specific accent colors driven by data-branch attribute set in PHP.
   Keep a neutral fallback (#c0a76d) above for unknown branches. */
#pn_approvals .pn_task_row[data-branch="KATE MALL"],        #pn_approvals .pn_task_row[data-branch="KATE MALL"]        { border-left-color: #158e9e; }
#pn_approvals .pn_task_row[data-branch="KATE MALL OFFICE"] { border-left-color: #158e9e; }
#pn_approvals .pn_task_row[data-branch="KBC"],              #pn_approvals .pn_task_row[data-branch="KBC"]              { border-left-color: #5d2978; }
#pn_approvals .pn_task_row[data-branch="KDRAGONMART"],      #pn_approvals .pn_task_row[data-branch="KDRAGONMART"]      { border-left-color: #941d35; }
#pn_approvals .pn_task_row[data-branch="KATE REALESTATE"],  #pn_approvals .pn_task_row[data-branch="KATE REALESTATE"]  { border-left-color: #c0a76d; }

/* Done rows (history): slight desaturation so active stands out against history. */
#pn_approvals .pn_task_row--done {
    opacity: .92;
}
#pn_approvals .pn_task_row--done .pn_task_row__icon {
    /* Done rows stay on-theme, just quieter than an open one - a muted gold
       instead of the flat grey they used to get, which left a dark glyph on a
       colourless disc. */
    background: linear-gradient(135deg, #faf3e2 0%, #efe4c6 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.22);
}


/* ---------- Row internals ----------------------------------------------- */
#pn_approvals .pn_task_row__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30);
    /* The glyph is a Font Awesome <i> (a webfont, coloured by `color`), so the
       svg rule below never touched it and it fell back to the default dark.
       Set here so the clipboard carries the theme gold on every row. */
    color: #8a6c2a;
}
/* The clipboard glyph - a Font Awesome webfont <i>, sized by font-size. */
#pn_approvals .pn_task_row__icon i {
    font-size: 19px;
    line-height: 1;
    color: #8a6c2a;
}
/* If FA is running in SVG mode instead, the same disc, same colour. */
#pn_approvals .pn_task_row__icon svg {
    width: 22px;
    height: 22px;
    color: #8a6c2a;
    stroke: #8a6c2a;
    fill: currentColor;
}

#pn_approvals .pn_task_row__body {
    flex: 1 1 auto;
    /* Required so long titles ellipsize cleanly inside a flex item. */
    min-width: 0;
}

#pn_approvals .pn_task_row__branch {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8a6c2a;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* TSK_<id> pill — sits before the branch label on the top line. */
#pn_approvals .pn_task_row__tid {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(138, 108, 42, 0.10);
    color: #8a6c2a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
}
/* Branch text color matches the left accent for visual consistency. */
#pn_approvals .pn_task_row[data-branch="KATE MALL"]        .pn_task_row__branch-label,
#pn_approvals .pn_task_row[data-branch="KATE MALL"]        .pn_task_row__branch-label,
#pn_approvals .pn_task_row[data-branch="KATE MALL OFFICE"] .pn_task_row__branch-label,
#pn_approvals .pn_task_row[data-branch="KATE MALL OFFICE"] .pn_task_row__branch-label { color: #0f6b78; }
#pn_approvals .pn_task_row[data-branch="KBC"]              .pn_task_row__branch-label,
#pn_approvals .pn_task_row[data-branch="KBC"]              .pn_task_row__branch-label { color: #4a1f63; }
#pn_approvals .pn_task_row[data-branch="KDRAGONMART"]      .pn_task_row__branch-label,
#pn_approvals .pn_task_row[data-branch="KDRAGONMART"]      .pn_task_row__branch-label { color: #7c1729; }

#pn_approvals .pn_task_row__title {
    font-size: 14px;
    line-height: 1.35;
    color: #2a2515;
    margin-bottom: 4px;
    /* Clamp to 2 lines, then ellipsize. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#pn_approvals .pn_task_row__by {
    font-size: 12px;
    color: #6b6655;
    margin-bottom: 8px;
}

#pn_approvals .pn_task_row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
#pn_approvals .pn_task_row__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11px;
    color: #6b5524;
    background: rgba(192,167,109,.12);
    border: 1px solid rgba(192,167,109,.28);
    border-radius: 999px;
    /* Prevent the date chip from breaking across two lines. */
    white-space: nowrap;
}
#pn_approvals .pn_task_row__chip i {
    color: #c0a76d;
    font-size: 11px;
}

#pn_approvals .pn_task_row__chev {
    flex: 0 0 auto;
    color: #c4b58a;
    font-size: 13px;
    padding-left: 4px;
}


/* ---------- Empty state -------------------------------------------------- */
#pn_approvals .pn_task_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 18px 22px;
    margin: 6px 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(60,40,0,.05);
    border: 1px dashed rgba(192,167,109,.35);
}
#pn_approvals .pn_task_empty__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30);
    margin-bottom: 10px;
}
#pn_approvals .pn_task_empty__icon i {
    font-size: 22px;
    color: #8a6c2a;
}
#pn_approvals .pn_task_empty__text {
    font-size: 13px;
    color: #6b6655;
    line-height: 1.45;
    max-width: 320px;
}


/* ---------- History pager (footer below history list) ------------------ */
/* Phone-first layout: stacks the "Showing X–Y" info above the nav row on
   narrow viewports so the chevron buttons always stay reachable. On wider
   screens (>=420px) it shifts to a single horizontal row. */
#pn_approvals .pn_task_pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Tight bottom margin — .bd_container provides the page-end breathing room. */
    margin: 14px 4px 8px;
    padding: 12px 14px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(60,40,0,.05);
    border: 1px solid rgba(192,167,109,.25);
}
#pn_approvals .pn_task_pager__info {
    font-size: 12px;
    color: #6b6655;
    text-align: center;
}
#pn_approvals .pn_task_pager__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
/* Touch-friendly chevron button (40×40 — meets ~44px tap-target guideline). */
#pn_approvals .pn_task_pager__btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #8a6c2a;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.30),
        0 4px 10px rgba(120,90,30,.10);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    user-select: none;
}
#pn_approvals .pn_task_pager__btn:active {
    transform: scale(.94);
}
#pn_approvals .pn_task_pager__btn--disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.20);
}
/* Page indicator pill in the middle — flexible so it fills space between
   the two nav buttons without ever overflowing on narrow screens. */
#pn_approvals .pn_task_pager__page {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    color: #4a3b1a;
    padding: 8px 12px;
    background: rgba(192,167,109,.10);
    border: 1px solid rgba(192,167,109,.25);
    border-radius: 999px;
    /* Keep "Page X of Y" on one line. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On screens wider than ~420px, sit the info text on the same row as the
   nav buttons (info on the left, buttons on the right) for a cleaner look. */
@media (min-width: 420px) {
    #pn_approvals .pn_task_pager {
        flex-direction: row;
        justify-content: space-between;
    }
    #pn_approvals .pn_task_pager__nav {
        width: auto;
    }
    #pn_approvals .pn_task_pager__page {
        flex: 0 0 auto;
        min-width: 110px;
    }
}


/* =========================================================================
   2.5 SECTION: Task Details page  (#pn_approval_dt)
   ---------------------------------------------------------------------------
   Modern visual layer for the contract-approval task details screen.
   Composition (top → bottom):
     .pn_tsk__hero        — title strip with status pill, name, id, branch
     .pn_tsk__facts       — 2x2 quick-facts grid (prospect / type / property / units)
     .pn_tsk__card        — generic rounded card (used for units, contract, timeline)
     .pn_tsk__row         — label/value row inside cards
     .pn_tsk__unit        — per-unit row in the units card
     .pn_tsk__sum         — subtotal/discount/total rows beneath the units list
     .pn_tsk__collapse    — modern collapsible (Request Copy, Contract Copy, Docs)
     .pn_tsk__doc         — single doc-row inside the documents collapsible
     .pn_tsk__sign        — signature pad container
     .pn_tsk__actions     — Reject / Approve action buttons
     .pn_tsk__final       — completed-task status block
   All approve/reject/signature ids and tt_post calls are kept unchanged.
   ========================================================================= */

#pn_approval_dt {
    background: #fbf8f1;
    /* Same scroll-below-header pattern as #pn_approvals — confines scrolling to
       .bd_container so the themed scrollbar replaces the page's native one. */
    overflow: hidden !important;
}

/* Mirror the #pn_approvals layout — absolute-positioned scroll surface so the
   themed scrollbar lives on .bd_container itself (and not on the body /
   tt_page wrapper). Without this, the scrollbar styles below don't apply
   because .bd_container isn't the scrolling element. */
#pn_approval_dt .bd_container {
    position: absolute;
    top: 60px;       /* matches the unified .hp_holder height */
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    /* Themed scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
/* Themed scrollbar — WebKit (Chrome / Safari / Edge). Matches #pn_approvals. */
#pn_approval_dt .bd_container::-webkit-scrollbar       { width: 6px; }
#pn_approval_dt .bd_container::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
#pn_approval_dt .bd_container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0a76d 0%, #a98842 100%);
    border-radius: 999px;
}
#pn_approval_dt .bd_container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a98842 0%, #8a6c2a 100%);
}

#pn_approval_dt .tt_line20 { display: none !important; }

#pn_approval_dt .hp_holder {
    /* Layout (height / line-height / text-align / padding) handled by
       the global .hp_holder rule. Just override typography here.
       Background previously was pure #fff with a hairline + shadow — both
       contrasted with the flat #fbfaf6 of the rest of the top chrome.
       Now matches the global flat cream so the task-detail header is
       seamless with the body + hamburger + close button. */
    color: #2a2515;
    background: #fbfaf6;
    border-bottom: 0;
    box-shadow: none;
    font-size: 14px;
    letter-spacing: 1.6px;
    z-index: 5;
}

/* ---- HERO ---------------------------------------------------------------- */
#pn_approval_dt .pn_tsk__hero {
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
    border: 1px solid rgba(192,167,109,.22);
    border-left: 4px solid #c0a76d;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(138,108,42,.08);
    margin-bottom: 14px;
}
#pn_approval_dt .pn_tsk__hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
#pn_approval_dt .pn_tsk__tid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(138,108,42,.10);
    color: #8a6c2a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
}
#pn_approval_dt .pn_tsk__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
#pn_approval_dt .pn_tsk__status--active   { background: rgba(192,167,109,.18); color: #8a6c2a; }
#pn_approval_dt .pn_tsk__status--approved { background: rgba(20,140,80,.14);  color: #14753d; }
#pn_approval_dt .pn_tsk__status--rejected { background: rgba(176,30,30,.12);  color: #8b1414; }
#pn_approval_dt .pn_tsk__status i { font-size: 10px; }

#pn_approval_dt .pn_tsk__title {
    font-size: 18px;
    font-weight: 700;
    color: #2a2515;
    line-height: 1.3;
    margin: 6px 0 8px;
}
#pn_approval_dt .pn_tsk__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6a5f4a;
}
#pn_approval_dt .pn_tsk__branch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(192,167,109,.12);
    color: #8a6c2a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#pn_approval_dt .pn_tsk__sub b { color: #2a2515; font-weight: 700; }

/* ---- QUICK FACTS GRID ---------------------------------------------------- */
#pn_approval_dt .pn_tsk__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
#pn_approval_dt .pn_tsk__fact {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 3px 10px rgba(138,108,42,.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;
}
#pn_approval_dt .pn_tsk__fact-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a6c2a;
}
#pn_approval_dt .pn_tsk__fact-head i {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
#pn_approval_dt .pn_tsk__fact-val {
    font-size: 14px;
    font-weight: 600;
    color: #2a2515;
    word-break: break-word;
}

/* ---- GENERIC CARD ------------------------------------------------------- */
#pn_approval_dt .pn_tsk__card {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(138,108,42,.06);
    margin-bottom: 14px;
}
#pn_approval_dt .pn_tsk__card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(192,167,109,.28);
}
#pn_approval_dt .pn_tsk__card-head i {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* ---- LABEL/VALUE ROW (inside cards) ------------------------------------- */
#pn_approval_dt .pn_tsk__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(192,167,109,.10);
}
#pn_approval_dt .pn_tsk__row:last-child { border-bottom: 0; }
#pn_approval_dt .pn_tsk__row-label {
    font-size: 12px;
    font-weight: 600;
    color: #6a5f4a;
    flex-shrink: 0;
    min-width: 110px;
}
#pn_approval_dt .pn_tsk__row-val {
    font-size: 13px;
    color: #2a2515;
    text-align: right;
    word-break: break-word;
}

/* ---- UNITS LIST --------------------------------------------------------- */
#pn_approval_dt .pn_tsk__unit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(192,167,109,.10);
}
#pn_approval_dt .pn_tsk__unit:last-of-type { border-bottom: 0; }
#pn_approval_dt .pn_tsk__unit-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(192,167,109,.18), rgba(192,167,109,.06));
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
#pn_approval_dt .pn_tsk__unit-body { flex: 1; min-width: 0; }
#pn_approval_dt .pn_tsk__unit-id {
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
}
#pn_approval_dt .pn_tsk__unit-meta {
    font-size: 11px;
    color: #6a5f4a;
    margin-top: 2px;
    word-break: break-word;
}
#pn_approval_dt .pn_tsk__unit-warn {
    font-size: 10.5px;
    color: #b00;
    margin-top: 2px;
}
/* Right-side stack — agent's requested amount + a small "Requested" label
   above it so it's clear what the bold number represents. */
#pn_approval_dt .pn_tsk__unit-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
#pn_approval_dt .pn_tsk__unit-price-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #8a6c2a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
#pn_approval_dt .pn_tsk__unit-price {
    font-size: 14px;
    font-weight: 700;
    color: #2a2515;
    white-space: nowrap;
}

/* Stats row — chip-style breakdown of the runits-side prices (Rent Out,
   Updated, Min Rent). Wraps on narrow screens. View-only; never enters
   the totals math. */
#pn_approval_dt .pn_tsk__unit-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
#pn_approval_dt .pn_tsk__unit-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(192,167,109,.08);
    border: 1px solid rgba(192,167,109,.18);
    font-size: 10.5px;
    line-height: 1.3;
    white-space: nowrap;
}
#pn_approval_dt .pn_tsk__unit-stat-lbl {
    color: #8a6c2a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 9.5px;
}
#pn_approval_dt .pn_tsk__unit-stat-val {
    color: #2a2515;
    font-weight: 700;
}
/* New Rent chip — green tint to mark it as the up-to-date / authoritative
   reference price. */
#pn_approval_dt .pn_tsk__unit-stat--ok {
    background: rgba(20,140,80,.08);
    border-color: rgba(20,140,80,.28);
}
#pn_approval_dt .pn_tsk__unit-stat--ok .pn_tsk__unit-stat-lbl { color: #14753d; }
#pn_approval_dt .pn_tsk__unit-stat--ok .pn_tsk__unit-stat-val { color: #14753d; }

/* Alert chip — maroon (deeper, less aggressive than pure red) when a value
   falls outside the expected band:
     - Rent Out chip when rent_out < up_price
     - Min Rent chip when up_price == 0 && min_rent < rent_out */
#pn_approval_dt .pn_tsk__unit-stat--alert {
    background: rgba(128,0,0,.07);
    border-color: rgba(128,0,0,.30);
}
#pn_approval_dt .pn_tsk__unit-stat--alert .pn_tsk__unit-stat-lbl { color: #5e0e0e; }
#pn_approval_dt .pn_tsk__unit-stat--alert .pn_tsk__unit-stat-val { color: #5e0e0e; }

/* The * flag inside a chip — marks the value as the runits_up_price
   override (not the original rentout). */
#pn_approval_dt .pn_tsk__unit-ref-flag {
    color: #b01e1e;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    margin-left: 1px;
}

/* ---- TOTALS BLOCK (subtotal / discount / total) ------------------------- */
#pn_approval_dt .pn_tsk__sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 8px;
    font-size: 13px;
}
#pn_approval_dt .pn_tsk__sum--sub {
    background: rgba(192,167,109,.06);
    color: #5a5040;
}
#pn_approval_dt .pn_tsk__sum--disc {
    background: rgba(192,167,109,.06);
    color: #5a5040;
}
#pn_approval_dt .pn_tsk__sum--disc.pn_tsk__sum--alert {
    background: linear-gradient(90deg, rgba(176,30,30,.10), rgba(176,30,30,.04));
    border: 1px solid rgba(176,30,30,.20);
    color: #8b1414;
    font-weight: 700;
}
#pn_approval_dt .pn_tsk__sum--total {
    background: linear-gradient(90deg, rgba(192,167,109,.18), rgba(192,167,109,.08));
    border: 1px solid rgba(192,167,109,.30);
    color: #2a2515;
    font-weight: 700;
    font-size: 14px;
    margin-top: 6px;
}
#pn_approval_dt .pn_tsk__sum-val { white-space: nowrap; }

/* ---- COLLAPSIBLE (legacy ids #dropdown-content[2/3] preserved) ---------- */
#pn_approval_dt .main-container {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(138,108,42,.06);
    overflow: hidden;
    margin-bottom: 14px;
}
#pn_approval_dt .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    background: linear-gradient(135deg, #fffaee, #fff);
    border-bottom: 1px solid rgba(192,167,109,.14);
}
#pn_approval_dt .header-container .title {
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#pn_approval_dt .header-container .title::before {
    content: "";
    width: 4px; height: 16px;
    background: #c0a76d;
    border-radius: 2px;
}
#pn_approval_dt .toggle-button {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    transition: background .2s, transform .2s;
}
#pn_approval_dt .toggle-button:hover {
    background: rgba(192,167,109,.24);
}
#pn_approval_dt .dropdown-content {
    /* Default hidden — legacy togslbt() flips display to "block". */
    padding: 14px 16px;
    background: #fff;
}

/* ---- DOCUMENTS LIST (inside Requested Documents collapsible) ------------ */
#pn_approval_dt .pn_tsk__doc-grp-title {
    font-size: 11px;
    font-weight: 700;
    color: #8a6c2a;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 6px 0 8px;
}
#pn_approval_dt .pn_tsk__doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
#pn_approval_dt .pn_tsk__doc:hover { background: #fffaee; }
#pn_approval_dt .pn_tsk__doc:active { transform: scale(.98); }
#pn_approval_dt .pn_tsk__doc-icon {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
#pn_approval_dt .pn_tsk__doc-name {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: #2a2515;
    min-width: 0;
    word-break: break-word;
}
#pn_approval_dt .pn_tsk__doc-val {
    font-size: 11.5px;
    color: #6a5f4a;
    white-space: nowrap;
}
#pn_approval_dt .pn_tsk__doc-check {
    font-size: 13px;
    color: #14753d;
}

/* ---- SIGNATURE PAD + APPROVAL ACTIONS ----------------------------------- */
#pn_approval_dt .pn_tsk__sign-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a6c2a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#pn_approval_dt .pn_tsk__sign {
    border: 2px dashed rgba(192,167,109,.40);
    border-radius: 12px;
    background: #fff;
    height: 180px;
    overflow: hidden;
    margin-bottom: 8px;
}
#pn_approval_dt .pn_tsk__sign-clear {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(138,108,42,.18);
    transition: transform .15s, box-shadow .15s;
}
#pn_approval_dt .pn_tsk__sign-clear:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(138,108,42,.24); }
#pn_approval_dt .pn_tsk__sign-clear:active { transform: scale(.96); }

/* ---- Task detail: approval-mode indicator + saved-mode preview ----- *
 * Shows on the Approval Signature card so the user knows which auth
 * method runs when they tap Approve. */
#pn_approval_dt .pn_tsk__card-head--withbadge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#pn_approval_dt .pn_tsk__sigmode-badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#pn_approval_dt .pn_tsk__sigmode--live { background: rgba(192,167,109,.16); color: #6c4a08; }
#pn_approval_dt .pn_tsk__sigmode--pin  { background: rgba( 31,122, 58,.14); color: #1f5c2c; }
#pn_approval_dt .pn_tsk__sigmode--pwd  { background: rgba( 50, 90,180,.14); color: #1f3c8a; }
#pn_approval_dt .pn_tsk__sigmode--otp  { background: rgba(150, 60,170,.14); color: #5a1e6b; }

/* Helper line under the badge — gives the user a one-liner about
   what'll happen on Approve. */
#pn_approval_dt .pn_tsk__sigmode-help {
    font-size: 12px;
    color: #4a4338;
    margin: 6px 2px 10px;
    line-height: 1.45;
}
#pn_approval_dt .pn_tsk__sigmode-help b { color: #2a2515; }

/* Emergency-lock banner (warm amber, same palette as Profile banner). */
#pn_approval_dt .pn_tsk__sigmode-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 6px 0 10px;
    background: linear-gradient(135deg, #fff3e0 0%, #fff8eb 100%);
    border: 1px solid rgba(210,138,26,.32);
    border-radius: 10px;
    color: #6c4a08;
    font-size: 12px;
}
#pn_approval_dt .pn_tsk__sigmode-banner > i {
    flex: 0 0 auto;
    color: #b06a0a;
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(210,138,26,.16);
    display: flex; align-items: center; justify-content: center;
}
#pn_approval_dt .pn_tsk__sigmode-banner small {
    color: #8a6c2a;
    font-size: 11px;
}

/* Saved-signature preview (saved_pin / saved_password modes). */
#pn_approval_dt .pn_tsk__saved-preview {
    background: #fafafa;
    border: 1px dashed rgba(192,167,109,.45);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    margin-bottom: 8px;
}
#pn_approval_dt .pn_tsk__saved-img {
    /* CSS background-image instead of <img> — defeats casual right-click
       "Save image as", drag-to-desktop, "Open image in new tab", etc.
       The shared .kws_protected-img rules below add the rest of the
       friction (no drag, no select, no context menu). */
    width: 100%;
    height: 110px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
}
#pn_approval_dt .pn_tsk__saved-caption {
    margin-top: 8px;
    font-size: 11.5px;
    color: #777;
}

/* Inline "Change mode in Profile →" link below the saved preview. */
#pn_approval_dt .pn_tsk__sigmode-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 10px;
    background: rgba(192,167,109,.10);
    color: #6c4a08;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
#pn_approval_dt .pn_tsk__sigmode-switch:hover  { background: rgba(192,167,109,.18); }
#pn_approval_dt .pn_tsk__sigmode-switch:active { transform: scale(.98); }
#pn_approval_dt .pn_tsk__sigmode-switch i      { font-size: 9px; }

#pn_approval_dt .pn_tsk__commt {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #2a2515;
    background: #fff;
    resize: vertical;
    min-height: 90px;
    transition: border-color .2s, box-shadow .2s;
}
#pn_approval_dt .pn_tsk__commt:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}

#pn_approval_dt .pn_tsk__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
#pn_approval_dt .pn_tsk__btn {
    height: 48px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, filter .15s;
    user-select: none;
}
#pn_approval_dt .pn_tsk__btn:active { transform: scale(.97); }
#pn_approval_dt .pn_tsk__btn--reject {
    background: #fff;
    color: #8b1414;
    border: 1.5px solid rgba(176,30,30,.40);
}
#pn_approval_dt .pn_tsk__btn--reject:hover { background: rgba(176,30,30,.06); }
#pn_approval_dt .pn_tsk__btn--approve {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(138,108,42,.22);
}
#pn_approval_dt .pn_tsk__btn--approve:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(138,108,42,.30); }

/* ---- Disabled approve/reject (expired tasks) ----------------------- */
#pn_approval_dt .pn_tsk__actions--disabled {
    opacity: .5;
    pointer-events: none;
}
#pn_approval_dt .pn_tsk__btn--disabled {
    cursor: not-allowed !important;
    background: #f0eee8 !important;
    color: #888 !important;
    border-color: #d8d3c5 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ---- Status chip (Task Timeline + card heads) ---------------------- *
 * Used in the timeline row's status field and as a small badge in the
 * Task Expired card head. Variant colour follows state. */
#pn_approval_dt .pn_tsk__status-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#pn_approval_dt .pn_tsk__status-chip--active   { background: rgba( 31, 122,  58, .14); color: #1f5c2c; }
#pn_approval_dt .pn_tsk__status-chip--approved { background: rgba( 31, 122,  58, .14); color: #1f5c2c; }
#pn_approval_dt .pn_tsk__status-chip--rejected { background: rgba(179,  38,  30, .14); color: #8a1a14; }
#pn_approval_dt .pn_tsk__status-chip--expired  { background: rgba(210, 138,  26, .18); color: #8a4a08; }
#pn_approval_dt .pn_tsk__status-chip--neutral  { background: rgba(  0,   0,   0, .06); color: #555;   }

/* ---- Expired notice card body ------------------------------------- */
#pn_approval_dt .pn_tsk__expired-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 4px 6px;
}
#pn_approval_dt .pn_tsk__expired-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(210, 138, 26, .14);
    color: #b06a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
#pn_approval_dt .pn_tsk__expired-body { flex: 1 1 auto; min-width: 0; }
#pn_approval_dt .pn_tsk__expired-title {
    font-size: 14px;
    font-weight: 700;
    color: #2a2515;
    line-height: 1.35;
    margin-bottom: 4px;
}
#pn_approval_dt .pn_tsk__expired-text {
    font-size: 12.5px;
    color: #6c5e3a;
    line-height: 1.5;
}

/* Dual-pill date strip below the notice — Started + Deadline. */
#pn_approval_dt .pn_tsk__expired-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,.08);
}
#pn_approval_dt .pn_tsk__expired-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(192, 167, 109, .08);
    border-radius: 10px;
}
#pn_approval_dt .pn_tsk__expired-date--end {
    background: rgba(210, 138, 26, .10);
}
#pn_approval_dt .pn_tsk__expired-date-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a6c2a;
}
#pn_approval_dt .pn_tsk__expired-date-val {
    font-size: 13px;
    font-weight: 600;
    color: #2a2515;
}

/* Make the card-head play nice when it carries a chip on the right. */
#pn_approval_dt .pn_tsk__card-head--withbadge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ---- COMPLETED / FINAL STATE -------------------------------------------- */
#pn_approval_dt .pn_tsk__final {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 14px rgba(138,108,42,.06);
    margin-bottom: 14px;
}
#pn_approval_dt .pn_tsk__final-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
#pn_approval_dt .pn_tsk__final-status--approved {
    background: linear-gradient(90deg, rgba(20,140,80,.14), rgba(20,140,80,.04));
    border: 1px solid rgba(20,140,80,.22);
    color: #14753d;
}
#pn_approval_dt .pn_tsk__final-status--rejected {
    background: linear-gradient(90deg, rgba(176,30,30,.12), rgba(176,30,30,.04));
    border: 1px solid rgba(176,30,30,.22);
    color: #8b1414;
}
#pn_approval_dt .pn_tsk__final-status i { font-size: 16px; }

/* ---- DOC-ACTION CARD (Request Copy "View" button) ----------------------- */
/* Replaces the inline collapsible — gives a calm card with a single CTA that
   opens the full-screen document popup. */
#pn_approval_dt .pn_tsk__doc-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fffaee, #fff);
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(138,108,42,.06);
}
#pn_approval_dt .pn_tsk__doc-action-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#pn_approval_dt .pn_tsk__doc-action-icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
#pn_approval_dt .pn_tsk__doc-action-title {
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
#pn_approval_dt .pn_tsk__doc-action-sub {
    font-size: 11.5px;
    color: #6a5f4a;
    margin-top: 2px;
}
#pn_approval_dt .pn_tsk__doc-action-btn {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(138,108,42,.20);
    transition: transform .15s, box-shadow .2s, filter .15s;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#pn_approval_dt .pn_tsk__doc-action-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(138,108,42,.30); }
#pn_approval_dt .pn_tsk__doc-action-btn:active { transform: scale(.96); }

/* ---- FULL-SCREEN DOC POPUP (Request Copy / Contract Copy) --------------- */
/* Sits above all UI when open. Header bar at top with title + close X.
   Body is the scrollable region holding the (possibly large) document HTML.
   The lazy-loading spinner shows here while the doc is being fetched. */
/* Backdrop spans the full viewport (covers everything behind), but the
   actual document panel is constrained to phone width and centered.
   Net effect:
     - On phone (≤ 500px): panel takes full screen width — same as before.
     - On desktop:         panel sits as a centered ~500px-wide card
                            with the backdrop dimming everything around it. */
.pn_tsk_doc_modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}
.pn_tsk_doc_modal--open { display: block; }
.pn_tsk_doc_modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 12, .55);
    backdrop-filter: blur(2px);
}
.pn_tsk_doc_modal__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* Phone-style card width on desktop. On viewports ≤ 500px the
       100% width takes effect and the panel fills the screen — so
       real phones still get a fullscreen modal experience. On desktop
       the user sees a centered card with the dimmed backdrop on either
       side. */
    max-width: 500px;
    background: #fbf8f1;
    display: flex;
    flex-direction: column;
    /* Soft shadow to lift the panel off the dark backdrop on desktop. */
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    animation: pnTskDocSlide .22s ease-out;
}
/* Animation must combine the centering translateX(-50%) with the
   slide-in translateY(20px → 0) so the panel doesn't snap back to
   the left edge of the modal at frame 0. */
@keyframes pnTskDocSlide {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.pn_tsk_doc_modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(192,167,109,.22);
    box-shadow: 0 2px 8px rgba(138,108,42,.06);
    flex-shrink: 0;
}
.pn_tsk_doc_modal__title {
    font-size: 14px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pn_tsk_doc_modal__title::before {
    content: "";
    width: 4px; height: 18px;
    background: #c0a76d;
    border-radius: 2px;
}
.pn_tsk_doc_modal__close {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
}
.pn_tsk_doc_modal__close:hover { background: rgba(192,167,109,.28); }
.pn_tsk_doc_modal__close:active { transform: scale(.92); }
.pn_tsk_doc_modal__body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}
.pn_tsk_doc_modal__body .pn_tsk__lazy-loading {
    color: #8a6c2a;
}
.pn_tsk_doc_modal__body::-webkit-scrollbar       { width: 6px; }
.pn_tsk_doc_modal__body::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
.pn_tsk_doc_modal__body::-webkit-scrollbar-thumb {
    background: rgba(192,167,109,.40);
    border-radius: 4px;
}

/* Footer — sticky at the bottom of the popup with zoom & download actions. */
.pn_tsk_doc_modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid rgba(192,167,109,.22);
    box-shadow: 0 -2px 8px rgba(138,108,42,.06);
    flex-shrink: 0;
}
.pn_tsk_doc_modal__zoom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(192,167,109,.10);
    border-radius: 999px;
    padding: 4px;
}
.pn_tsk_doc_modal__zoom button {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #8a6c2a;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s, color .15s;
    box-shadow: 0 1px 3px rgba(138,108,42,.10);
}
.pn_tsk_doc_modal__zoom button:hover { background: rgba(192,167,109,.18); }
.pn_tsk_doc_modal__zoom button:active { transform: scale(.92); }
.pn_tsk_doc_modal__zoom-val {
    min-width: 50px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #8a6c2a;
    letter-spacing: 0.4px;
    padding: 0 4px;
}
.pn_tsk_doc_modal__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Shared button base used by Download (filled gold) and Print (outlined gold). */
.pn_tsk_doc_modal__dl,
.pn_tsk_doc_modal__pr {
    border: 0;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter .15s, box-shadow .2s, transform .15s, background .15s;
}
.pn_tsk_doc_modal__dl {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138,108,42,.20);
}
.pn_tsk_doc_modal__dl:hover  { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(138,108,42,.30); }
.pn_tsk_doc_modal__dl:active { transform: scale(.96); }
.pn_tsk_doc_modal__pr {
    background: #fff;
    color: #8a6c2a;
    border: 1.5px solid rgba(192,167,109,.45);
}
.pn_tsk_doc_modal__pr:hover  { background: rgba(192,167,109,.10); }
.pn_tsk_doc_modal__pr:active { transform: scale(.96); }

@media (max-width: 480px) {
    /* Stack zoom + actions on narrow screens for thumb-friendly tapping. */
    .pn_tsk_doc_modal__foot { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .pn_tsk_doc_modal__actions { flex: 1; justify-content: flex-end; }
    .pn_tsk_doc_modal__dl,
    .pn_tsk_doc_modal__pr { padding: 9px 12px; font-size: 11.5px; }
}
@media (max-width: 360px) {
    .pn_tsk_doc_modal__zoom button { width: 30px; height: 30px; }
    /* Hide button text on very narrow screens — icons remain. */
    .pn_tsk_doc_modal__dl span,
    .pn_tsk_doc_modal__pr span { display: none; }
}

/* ---- DOC VIEWER inside the popup body ----------------------------------- */
/* Used by pn_task_doc_view to render PDFs (Google Docs viewer iframe), Office
   docs (same), and images. Fills the entire popup body height so the user
   gets a generous viewing area on phones. */
#pn_tsk_doc_modal__body .pn_tsk__doc-viewer {
    height: 100%;
    min-height: calc(100vh - 180px); /* full viewport minus header + footer */
    display: flex;
    flex-direction: column;
    margin: -16px; /* expand to body edges (cancel parent .pn_tsk_doc_modal__body padding) */
    padding: 0;
}
#pn_tsk_doc_modal__body .pn_tsk__doc-viewer iframe {
    width: 100%;
    flex: 1;
    border: 0;
    background: #fff;
    min-height: calc(100vh - 180px);
}
#pn_tsk_doc_modal__body .pn_tsk__doc-viewer--img {
    align-items: center;
    justify-content: flex-start;
    background: #f6efe1;
    padding: 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#pn_tsk_doc_modal__body .pn_tsk__doc-viewer--img img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 6px 18px rgba(138,108,42,.18);
    background: #fff;
}

/* ---- Legacy iframe (request-view.php / contract-view.php) ----------- */
/* When the api_collection iframe variant returns
   <iframe src="…/views/{contract,request}-view.php?…"> on a cache miss,
   the same fullscreen layout as the cached-PDF embed applies. Without
   this rule the iframe sits at its inline 1485px and the modal body
   scrolls instead of the iframe's internal scrollbar — same fix the
   PDF embed needed earlier. */
#pn_tsk_doc_modal__body:has(iframe.pn_tsk__legacy-iframe) {
    padding: 0;
    overflow: hidden;
}
#pn_tsk_doc_modal__body:has(iframe.pn_tsk__legacy-iframe) > div {
    height: 100%;
    padding: 0;
    margin: 0;
}
#pn_tsk_doc_modal__body iframe.pn_tsk__legacy-iframe {
    display: block;
    width: 100%;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff;
}

/* ---- PDF embed (cached signed-URL flow) -------------------------------- */
/* When api_collection returns the cached PDF as <embed type="application/pdf">,
   the inline height="1485px" leaves empty space below short docs and forces
   the parent modal to scroll for tall ones. Fill the body instead so the
   PDF viewer's own toolbar/scroll handles the content (matches the .pdf
   viewer behaviour the user expects on phone). */
#pn_tsk_doc_modal__body:has(embed[type="application/pdf"]) {
    padding: 0;
    overflow: hidden;
}
#pn_tsk_doc_modal__body:has(embed[type="application/pdf"]) > div {
    height: 100%;
    padding: 0;
    margin: 0;
}
#pn_tsk_doc_modal__body embed[type="application/pdf"] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* !important needed because api_collection emits inline
       style="border-radius:10px" which would otherwise win on specificity. */
    border-radius: 0 !important;
    background: #fff;
}

/* ======================================================================
   Approvals Details — lazy-loaded approval-chain timeline.
   Cards stack vertically; a rail on the left carries the numbered circles
   and connector segments tinted by each step's state, so the chain reads
   as a true flow (completed → active → pending) rather than a flat list.
   The "current" card (the task you're viewing) gets a distinct outline.
   ====================================================================== */
#pn_approval_dt .pn_tsk__approvals {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 36px reserves space on the left for the rail + numbered circles
       (circle Ø 26px sits centered on the rail at x ≈ 18px). */
    padding: 12px 12px 8px 36px;
}
#pn_approval_dt .pn_tsk__approvals-card {
    position: relative;
    background: #fbf8f1;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 10px;
    padding: 10px 12px 10px 14px;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
}
#pn_approval_dt .pn_tsk__approvals-card--current {
    border-color: #c0a76d;
    box-shadow: 0 4px 14px rgba(192,167,109,.22);
    background: linear-gradient(180deg, #fffaf0, #fbf8f1);
}

/* ---------- Timeline rail (the connector lines between circles) -----
   Each card draws TWO half-segments:
     ::before  rises from the circle up toward the previous card
     ::after   drops from the circle down toward the next card
   The rail is fully visible because every card in a sequence draws its
   own up + down halves. The first card hides its ::before, the last
   hides its ::after, so the rail never extends past the chain. */
#pn_approval_dt .pn_tsk__approvals-card::before,
#pn_approval_dt .pn_tsk__approvals-card::after {
    content: '';
    position: absolute;
    left: -23px;            /* lines up with circle centre at -36+13 = -23 */
    width: 2px;
    background: rgba(192,167,109,.45);
    z-index: 1;
}
#pn_approval_dt .pn_tsk__approvals-card::before { top: -14px; height: 26px; }
#pn_approval_dt .pn_tsk__approvals-card::after  { top: 25px;  bottom: -16px; }
#pn_approval_dt .pn_tsk__approvals-card:first-child::before { display: none; }
#pn_approval_dt .pn_tsk__approvals-card:last-child::after   { display: none; }

/* Connector tint by THIS card's state — applies to ::after (the line
   leaving this card) so the segment between two cards reads as the
   leaving step's status. ::before inherits a softer/neutral colour so
   the chain feels continuous without doubling up on intensity. */
#pn_approval_dt .pn_tsk__approvals-card[data-status="completed"]::after { background: #2e8b57; }
#pn_approval_dt .pn_tsk__approvals-card[data-status="active"]::after    { background: linear-gradient(180deg, #d28a1a, rgba(192,167,109,.45)); }
#pn_approval_dt .pn_tsk__approvals-card[data-status="rejected"]::after  { background: #b62a2a; }
#pn_approval_dt .pn_tsk__approvals-card[data-status="pending"]::after   { background: rgba(0,0,0,.18); }

/* ---------- Card head — number circle sits on the rail -------------- */
#pn_approval_dt .pn_tsk__approvals-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
/* Number circle promoted to a timeline node — positioned absolutely so
   it sits on the rail just outside the card's left edge. */
#pn_approval_dt .pn_tsk__approvals-num {
    position: absolute;
    left: -36px;
    top: 8px;
    width: 26px; height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #fff;
    color: #8a6c2a;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ring around the circle picks up the state colour so each node
       reads at a glance. Default = neutral gold. */
    box-shadow: 0 0 0 2px rgba(192,167,109,.55), 0 2px 5px rgba(60,40,0,.10);
    z-index: 2;
}
/* State-tinted circle rings — green/amber/red/gray to match connector. */
#pn_approval_dt .pn_tsk__approvals-card[data-status="completed"] .pn_tsk__approvals-num {
    background: linear-gradient(135deg, #2e8b57, #1f6b3f);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(46,139,87,.55), 0 2px 6px rgba(46,139,87,.25);
}
#pn_approval_dt .pn_tsk__approvals-card[data-status="active"] .pn_tsk__approvals-num {
    background: linear-gradient(135deg, #d28a1a, #a86510);
    color: #fff;
    /* Subtle pulse so the active step draws the eye. */
    box-shadow: 0 0 0 2px rgba(210,138,26,.65), 0 0 0 6px rgba(210,138,26,.18), 0 2px 6px rgba(210,138,26,.25);
}
#pn_approval_dt .pn_tsk__approvals-card[data-status="rejected"] .pn_tsk__approvals-num {
    background: linear-gradient(135deg, #b62a2a, #7a1414);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(182,42,42,.55), 0 2px 6px rgba(182,42,42,.25);
}
#pn_approval_dt .pn_tsk__approvals-card[data-status="pending"] .pn_tsk__approvals-num {
    background: #fff;
    color: #888;
    box-shadow: 0 0 0 2px rgba(0,0,0,.22), 0 2px 5px rgba(60,40,0,.08);
}
#pn_approval_dt .pn_tsk__approvals-name {
    flex: 1;
    font-weight: 600;
    color: #2a2515;
    font-size: 13px;
    line-height: 1.3;
}
#pn_approval_dt .pn_tsk__approvals-type {
    font-size: 10.5px;
    font-weight: 600;
    color: #8a6c2a;
    background: rgba(192,167,109,.14);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .6px;
}
#pn_approval_dt .pn_tsk__approvals-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
#pn_approval_dt .pn_tsk__approvals-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}
/* Seen / Not-seen */
#pn_approval_dt .pn_tsk__approvals-seen--yes  { background: rgba(46,139,87,.14);  color: #1f6b3f; }
#pn_approval_dt .pn_tsk__approvals-seen--no   { background: rgba(0,0,0,.06);      color: #888;    }
/* Task status */
#pn_approval_dt .pn_tsk__approvals-tstat--completed { background: rgba(46,139,87,.14);  color: #1f6b3f; }
#pn_approval_dt .pn_tsk__approvals-tstat--active    { background: rgba(210,138,26,.16); color: #8a4a08; }
#pn_approval_dt .pn_tsk__approvals-tstat--assigned  { background: rgba(0,0,0,.05);      color: #888;    }
/* Approve / Reject choice */
#pn_approval_dt .pn_tsk__approvals-choice--approved { background: rgba(46,139,87,.14);  color: #1f6b3f; }
#pn_approval_dt .pn_tsk__approvals-choice--rejected { background: rgba(182,42,42,.14);  color: #8a1a14; }
#pn_approval_dt .pn_tsk__approvals-choice--none     { background: rgba(0,0,0,.05);      color: #aaa;    }
#pn_approval_dt .pn_tsk__approvals-time {
    font-size: 11.5px;
    color: #6b6655;
}
#pn_approval_dt .pn_tsk__approvals-time i {
    margin-right: 2px;
    color: #8a6c2a;
}

/* Approver comment — only shown when rtask_comment is non-empty.
   Quote icon on the left + the actual comment text. Tone shifts to match
   the approve/reject choice so the user can spot positive vs negative
   feedback at a glance. */
#pn_approval_dt .pn_tsk__approvals-comment {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,.04);
    border-left: 3px solid rgba(192,167,109,.45);
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    line-height: 1.45;
    color: #3d3a32;
}
#pn_approval_dt .pn_tsk__approvals-comment-ico {
    flex: 0 0 auto;
    color: #8a6c2a;
    font-size: 11px;
    margin-top: 3px;
    opacity: .65;
}
#pn_approval_dt .pn_tsk__approvals-comment-txt {
    flex: 1;
    word-break: break-word;
    /* Long comments stay readable but don't make the card balloon —
       capped to a reasonable height with internal scroll on overflow. */
    max-height: 200px;
    overflow-y: auto;
}
#pn_approval_dt .pn_tsk__approvals-comment--approved {
    background: rgba(46,139,87,.07);
    border-left-color: #2e8b57;
}
#pn_approval_dt .pn_tsk__approvals-comment--approved .pn_tsk__approvals-comment-ico { color: #2e8b57; }
#pn_approval_dt .pn_tsk__approvals-comment--rejected {
    background: rgba(182,42,42,.07);
    border-left-color: #b62a2a;
}
#pn_approval_dt .pn_tsk__approvals-comment--rejected .pn_tsk__approvals-comment-ico { color: #b62a2a; }

/* ======================================================================
   Notes — lazy-loaded CRUD card on the Task Details page.
   Each note renders as a card with an author avatar (initial circle on
   a per-user palette), name + "you" tag for own notes, timestamp, and
   the body. The composer at the bottom has a labelled header and a
   live character counter. Edit/Delete buttons only render for owners.
   ====================================================================== */
/* Tighter outer padding for the Notes dropdown — the inner .pn_tsk__notes
   already adds its own spacing, so the legacy 14px/16px on .dropdown-content
   was producing visible double-padding. Scoped to the notes body so other
   collapsibles (Approvals etc.) stay unaffected. */
#pn_approval_dt #pn_tsk__notes-body.dropdown-content {
    padding: 8px 10px 10px;
}
#pn_approval_dt .pn_tsk__notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

/* ---------- Empty state — friendlier illustration + copy ------------- */
#pn_approval_dt .pn_tsk__notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 16px 16px;
    color: #6b5524;
    background:
        radial-gradient(360px 140px at 50% -10%, rgba(192,167,109,.14), transparent 60%),
        #fbf8f1;
    border: 1px dashed rgba(192,167,109,.40);
    border-radius: 12px;
}
#pn_approval_dt .pn_tsk__notes-empty-art {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff5dd, #f0dfae);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30), 0 4px 10px rgba(138,108,42,.08);
    margin-bottom: 2px;
}
#pn_approval_dt .pn_tsk__notes-empty-art i {
    font-size: 21px;
    color: #8a6c2a;
}
#pn_approval_dt .pn_tsk__notes-empty-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #2a2515;
    letter-spacing: .2px;
}
#pn_approval_dt .pn_tsk__notes-empty-sub {
    font-size: 12px;
    color: #6b6655;
    line-height: 1.45;
    max-width: 300px;
}

/* ---------- Single note card --------------------------------------- */
#pn_approval_dt .pn_tsk__note {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 10px;
    padding: 9px 12px 10px;
    box-shadow: 0 1px 4px rgba(60,40,0,.04);
    transition: box-shadow .2s ease;
}
#pn_approval_dt .pn_tsk__note:hover {
    box-shadow: 0 3px 10px rgba(60,40,0,.07);
}
/* Subtle gold accent strip on the user's own notes so they stand out. */
#pn_approval_dt .pn_tsk__note--mine {
    background: linear-gradient(180deg, #fffaf0, #ffffff);
    border-color: rgba(192,167,109,.40);
}
#pn_approval_dt .pn_tsk__note--mine::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #c0a76d, #a88f57);
}

/* Head — avatar + name/timestamp byline. Tighter gap and smaller
   bottom margin so the note text sits closer to the byline. */
#pn_approval_dt .pn_tsk__note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
#pn_approval_dt .pn_tsk__note-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
#pn_approval_dt .pn_tsk__note-avatar {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(60,40,0,.10);
}
#pn_approval_dt .pn_tsk__note-byline-text {
    flex: 1;
    min-width: 0;
}
#pn_approval_dt .pn_tsk__note-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #2a2515;
    font-size: 13px;
    line-height: 1.2;
}
#pn_approval_dt .pn_tsk__note-you-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(192,167,109,.22);
    color: #6b5524;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}
#pn_approval_dt .pn_tsk__note-when {
    font-size: 11px;
    color: #8a8576;
    margin-top: 1px;
}
#pn_approval_dt .pn_tsk__note-when i { color: #b69a6a; margin-right: 2px; }
#pn_approval_dt .pn_tsk__note-edited {
    color: #b69a6a;
    font-style: italic;
}

/* 2026-06-30 — Task-comment entries in the Notes list. When one contract has
   multiple assignees (typical: 4-5 people sign the same request), each
   assignee's rtask_comment is merged into the Notes list alongside the
   free-form rnotes entries. Task comments are read-only + carry an
   Approved/Rejected pill + a "task signer" origin tag so the reader can
   tell them apart from ad-hoc notes at a glance. */
#pn_approval_dt .pn_tsk__note-source-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(93,41,120,.10);
    color: #5d2978;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}
#pn_approval_dt .pn_tsk__note-source-tag i { font-size: 9px; }
#pn_approval_dt .pn_tsk__note-role {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(192,167,109,.14);
    color: #6b5524;
    font-size: 10.5px;
    font-weight: 600;
    margin-left: 4px;
}
#pn_approval_dt .pn_tsk__note-choice-holder {
    margin-left: auto;
    display: flex;
    align-items: center;
}
#pn_approval_dt .pn_tsk__note-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
}
#pn_approval_dt .pn_tsk__note-pill--approved {
    background: rgba(111,140,102,.18);
    color: #3d5c34;
}
#pn_approval_dt .pn_tsk__note-pill--rejected {
    background: rgba(182,74,74,.14);
    color: #a13a3a;
}
/* Left-edge accent stripe on task comments so they read as different from
   free-form notes without being visually loud. */
#pn_approval_dt .pn_tsk__note--task { border-left: 3px solid rgba(93,41,120,.35); }
#pn_approval_dt .pn_tsk__note--approved { border-left-color: rgba(111,140,102,.55); }
#pn_approval_dt .pn_tsk__note--rejected { border-left-color: rgba(182,74,74,.50); }
/* Head row needs to be flex so the pill sits on the right */
#pn_approval_dt .pn_tsk__note--task .pn_tsk__note-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* View-mode body — text + actions row (owner-only). Indented to align
   with the author name (past the avatar) so the byline + body read as
   one comment block. */
#pn_approval_dt .pn_tsk__note-text {
    font-size: 13px;
    color: #3d3a32;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    padding-left: 38px;          /* 30px avatar + 8px gap */
    padding-right: 2px;
}
#pn_approval_dt .pn_tsk__note-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-left: 38px;
}

/* Edit-mode body — textarea + cancel/save buttons. */
#pn_approval_dt .pn_tsk__note-edit-ta {
    width: 100%;
    min-height: 100px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(192,167,109,.40);
    background: #fbf8f1;
    font-family: inherit;
    font-size: 13.5px;
    color: #2a2515;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#pn_approval_dt .pn_tsk__note-edit-ta:focus {
    outline: none;
    border-color: #c0a76d;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192,167,109,.20);
}
#pn_approval_dt .pn_tsk__note-edit-btns {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}

/* Buttons — shared base, then tone modifiers. */
#pn_approval_dt .pn_tsk__note-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s, transform .12s, background .15s, box-shadow .15s;
    white-space: nowrap;
}
#pn_approval_dt .pn_tsk__note-btn:active { transform: scale(.96); }
#pn_approval_dt .pn_tsk__note-btn--edit {
    background: rgba(192,167,109,.14);
    color: #6b5524;
    border-color: rgba(192,167,109,.32);
}
#pn_approval_dt .pn_tsk__note-btn--edit:hover { background: rgba(192,167,109,.24); }
#pn_approval_dt .pn_tsk__note-btn--delete {
    background: transparent;
    color: #b62a2a;
    border-color: rgba(182,42,42,.32);
}
#pn_approval_dt .pn_tsk__note-btn--delete:hover {
    background: rgba(182,42,42,.10);
    border-color: rgba(182,42,42,.45);
}
#pn_approval_dt .pn_tsk__note-btn--cancel {
    background: rgba(0,0,0,.05);
    color: #555;
    border-color: rgba(0,0,0,.10);
}
#pn_approval_dt .pn_tsk__note-btn--cancel:hover { background: rgba(0,0,0,.10); }
#pn_approval_dt .pn_tsk__note-btn--save,
#pn_approval_dt .pn_tsk__note-btn--add {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 10px rgba(138,108,42,.22);
}
#pn_approval_dt .pn_tsk__note-btn--save:hover,
#pn_approval_dt .pn_tsk__note-btn--add:hover  {
    filter: brightness(1.06);
    box-shadow: 0 6px 14px rgba(138,108,42,.30);
}

/* ---------- Composer — labelled header + counter + send ---------- */
#pn_approval_dt .pn_tsk__notes-new {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px 9px;
    margin-top: 4px;
    background: linear-gradient(180deg, #fff, #fbf8f1);
    border: 1px solid rgba(192,167,109,.34);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
}
#pn_approval_dt .pn_tsk__notes-new-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8a6c2a;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#pn_approval_dt .pn_tsk__notes-new-head i { color: #c0a76d; font-size: 11px; }
#pn_approval_dt .pn_tsk__notes-new-ta {
    width: 100%;
    min-height: 64px;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #2a2515;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
#pn_approval_dt .pn_tsk__notes-new-ta:focus {
    outline: none;
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,.20);
}
#pn_approval_dt .pn_tsk__notes-new-ta::placeholder { color: rgba(107,85,36,.55); }
#pn_approval_dt .pn_tsk__notes-new-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}
#pn_approval_dt .pn_tsk__notes-counter {
    font-size: 10.5px;
    color: #8a8576;
    font-variant-numeric: tabular-nums;
    transition: color .2s;
}
#pn_approval_dt .pn_tsk__notes-counter--near {
    color: #b62a2a;
    font-weight: 600;
}
#pn_approval_dt .pn_tsk__notes-new .pn_tsk__note-btn--add {
    padding: 7px 14px;
    font-size: 12px;
}

/* Empty doc row (file not attached yet). Stays clickable-disabled — only
   the row container ignores hover; the badge inside still draws the eye. */
#pn_approval_dt .pn_tsk__doc--empty {
    background: #fff;
    cursor: default;
}
#pn_approval_dt .pn_tsk__doc--empty:hover  { background: #fff; }
#pn_approval_dt .pn_tsk__doc--empty:active { transform: none; }
#pn_approval_dt .pn_tsk__doc--empty .pn_tsk__doc-icon {
    background: rgba(176,30,30,.08);
    color: #b01e1e;
}
#pn_approval_dt .pn_tsk__doc--empty .pn_tsk__doc-name {
    color: #6a5f4a;
    opacity: .9;
}

/* "Not attached" badge — red pill on rows without an uploaded file. */
#pn_approval_dt .pn_tsk__doc-missing {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(176,30,30,.10);
    color: #b01e1e;
    border: 1px solid rgba(176,30,30,.22);
    white-space: nowrap;
}
#pn_approval_dt .pn_tsk__doc-missing i { font-size: 11px; }

/* View button on doc rows — small filled-gold action that opens the popup. */
#pn_approval_dt .pn_tsk__doc-viewbtn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(138,108,42,.20);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: filter .15s, box-shadow .2s, transform .15s;
}
#pn_approval_dt .pn_tsk__doc-viewbtn:hover  { filter: brightness(1.06); box-shadow: 0 5px 14px rgba(138,108,42,.30); }
#pn_approval_dt .pn_tsk__doc-viewbtn:active { transform: scale(.95); }
#pn_approval_dt .pn_tsk__doc-viewbtn i { font-size: 11px; }

/* Row containing the View button — no longer clickable as a whole. */
#pn_approval_dt .pn_tsk__doc:has(.pn_tsk__doc-viewbtn) { cursor: default; }
#pn_approval_dt .pn_tsk__doc:has(.pn_tsk__doc-viewbtn):hover  { background: #fff; }
#pn_approval_dt .pn_tsk__doc:has(.pn_tsk__doc-viewbtn):active { transform: none; }

/* ---- NOTIFICATION ONBOARDING BANNER ------------------------------------- */
/* Sticky at the bottom of the visible viewport. Hidden until the user
   needs to act (no PWA install yet, or permission not granted yet, or
   no push subscription registered yet). Driven by
   kws_notify_banner_refresh() in apps.js — three data-state values:
     hidden  → display:none
     install → "Add to home screen" copy + "How?" button
     enable  → "Turn on notifications" + "Enable" button */
.kws_nbanner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 9500;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
    border: 1px solid rgba(192,167,109,.45);
    border-left: 4px solid #c0a76d;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 18, 12, .25);
    animation: kwsNbannerIn .35s cubic-bezier(.2, .9, .3, 1.1);
}
.kws_nbanner[data-state="install"],
.kws_nbanner[data-state="enable"] { display: flex; }

@keyframes kwsNbannerIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Desktop phone-frame mode — same constraint we apply to the cookie banner.
   Without this the install banner anchors to viewport edges and floats
   well outside the centred 420px phone frame on desktop. */
@media (min-width: 600px) and (min-height: 760px) {
    .kws_nbanner {
        left: 50%;
        right: auto;
        width: 396px;            /* 420 - 12*2 — keeps the original 12px gutters */
        max-width: 396px;
        transform: translateX(-50%);
        /* Pin to the phone-frame's inner bottom (matching the .tt_body
           centring math used elsewhere) plus a 16px breathing gap. */
        bottom: calc(max(20px, (100vh - min(92vh, 900px)) / 2) + 16px);
        animation: kwsNbannerInDesktop .35s cubic-bezier(.2, .9, .3, 1.1);
    }
    @keyframes kwsNbannerInDesktop {
        from { transform: translate(-50%, 20px); opacity: 0; }
        to   { transform: translate(-50%, 0);    opacity: 1; }
    }
}

.kws_nbanner__icon {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(138,108,42,.22);
}

/* Close (×) — top-right of the banner. Subtle so it doesn't compete with
   the primary "Enable" button, but always reachable so the user can
   dismiss the nag for the day. */
.kws_nbanner__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(192,167,109,.12);
    color: #8a6c2a;
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
}
.kws_nbanner__close:hover  { background: rgba(192,167,109,.22); }
.kws_nbanner__close:active { transform: scale(.92); }
/* Banner needs `position: relative` for the absolute close to anchor —
   override the existing `position: fixed` rule's child positioning. */
.kws_nbanner { padding-right: 36px; } /* leave room for the close so the title doesn't sit under it */
.kws_nbanner__body {
    flex: 1;
    min-width: 0;
}
.kws_nbanner__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #2a2515;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}
.kws_nbanner__text {
    font-size: 11.5px;
    color: #5a5040;
    line-height: 1.4;
}
.kws_nbanner__btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(138,108,42,.20);
    transition: filter .15s, transform .15s, box-shadow .2s;
}
.kws_nbanner__btn:hover  { filter: brightness(1.06); box-shadow: 0 5px 14px rgba(138,108,42,.30); }
.kws_nbanner__btn:active { transform: scale(.96); }

@media (max-width: 360px) {
    .kws_nbanner { padding: 10px 12px; gap: 10px; }
    .kws_nbanner__icon { width: 34px; height: 34px; font-size: 14px; }
    .kws_nbanner__btn  { padding: 9px 12px; font-size: 11.5px; }
}


/* ---- ANNOUNCEMENT MODAL (kannounce table → kws_announce dialog) --------- */
/* Shown by kws_announce_show() in apps.js. Content (title / body / icon /
   severity) is server-driven — insert rows into the kannounce DB table to
   broadcast new messages. Z-index above other modals (notifications etc.)
   so an admin announcement can interrupt anything. */
.kws_announce {
    position: fixed;
    inset: 0;
    z-index: 11500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.kws_announce--open { display: flex; }
.kws_announce__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 12, .55);
    backdrop-filter: blur(2px);
    cursor: pointer;
    animation: kwsAnnFade .15s ease-out;
}
.kws_announce[data-locked="1"] .kws_announce__backdrop { cursor: default; pointer-events: none; }
.kws_announce__panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(20, 18, 12, .42), 0 0 0 1px rgba(192,167,109,.18);
    padding: 0 0 18px;
    text-align: center;
    overflow: hidden;
    animation: kwsAnnPop .28s cubic-bezier(.2, .9, .3, 1.15);
}

/* Top accent banner — gives the panel an "announcement / megaphone" feel
   instead of looking like a generic dialog. The icon disc sits half-on,
   half-off this banner; the label sits at the top of the banner so it
   doesn't end up hidden behind the disc. */
.kws_announce__banner {
    position: relative;
    height: 78px;
    background: linear-gradient(135deg, #1c2748 0%, #2c3a66 55%, #3d5085 100%);
    overflow: hidden;
}
.kws_announce__banner::before,
.kws_announce__banner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(192,167,109,.18);
}
.kws_announce__banner::before { width: 140px; height: 140px; top: -60px; left: -40px; }
.kws_announce__banner::after  { width: 90px;  height: 90px;  top: -30px; right: -20px; background: rgba(192,167,109,.12); }
.kws_announce__banner-label {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    color: #c0a76d;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/* Severity tints the banner itself so warn / critical announcements
   look distinctly different at a glance. */
.kws_announce[data-severity="warn"]     .kws_announce__banner { background: linear-gradient(135deg, #6b4a05 0%, #946810 55%, #b88720 100%); }
.kws_announce[data-severity="critical"] .kws_announce__banner { background: linear-gradient(135deg, #571212 0%, #7c1c1c 55%, #a02929 100%); }

@keyframes kwsAnnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kwsAnnPop {
    from { transform: scale(.88) translateY(14px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes kwsAnnIconBounce {
    0%   { transform: translateX(-50%) scale(.4) rotate(-12deg); opacity: 0; }
    60%  { transform: translateX(-50%) scale(1.08) rotate(4deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(1)    rotate(0); }
}

.kws_announce__icon {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px; height: 78px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: #fff;
    color: #c0a76d;
    box-shadow: 0 8px 20px rgba(20,18,12,.30), 0 0 0 5px #fff;
    animation: kwsAnnIconBounce .55s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 3;
}
.kws_announce__icon--info     { color: #c0a76d; }
.kws_announce__icon--warn     { color: #b67b00; }
.kws_announce__icon--critical { color: #a02929; }

.kws_announce__content {
    padding: 52px 24px 6px;
}
.kws_announce__title {
    font-size: 18px;
    font-weight: 700;
    color: #1c2748;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.kws_announce__body {
    font-size: 13.5px;
    color: #4a4538;
    line-height: 1.65;
    margin-bottom: 20px;
    text-align: left;
    max-height: 48vh;
    overflow-y: auto;
    padding: 14px 16px;
    background: #fbf8f1;
    border-radius: 12px;
    border: 1px solid rgba(192,167,109,.18);
}
.kws_announce__body b { color: #1c2748; font-weight: 700; }
.kws_announce__actions {
    display: flex;
    justify-content: center;
    padding: 0 24px;
}
.kws_announce__btn {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 13px 36px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(138,108,42,.30);
    transition: filter .15s, transform .15s, box-shadow .2s;
    width: 100%;
}
.kws_announce__btn:hover  { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(138,108,42,.36); }
.kws_announce__btn:active { transform: scale(.97); }


/* ---- CHANGE PASSWORD DIALOG (Profile → Change Password) ----------------- */
/* Lives at #kws_pwd in index.php. Opened via kws_pwd_change_open(); the
   submit button posts to pn_profile_pwd. Same modal-card aesthetic as the
   confirmation dialog but with three password fields and an eye-toggle on
   each. */
.kws_pwd {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.kws_pwd--open { display: flex; }
.kws_pwd__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 12, .55);
    backdrop-filter: blur(2px);
    animation: kwsPwdFade .15s ease-out;
}
.kws_pwd__panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(20, 18, 12, .35);
    padding: 22px 22px 18px;
    text-align: center;
    animation: kwsPwdPop .22s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes kwsPwdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kwsPwdPop {
    from { transform: scale(.92) translateY(8px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);  opacity: 1; }
}
.kws_pwd__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138,108,42,.22);
}
.kws_pwd__title {
    font-size: 16px;
    font-weight: 700;
    color: #2a2515;
    margin-bottom: 4px;
    letter-spacing: 0.4px;
}
.kws_pwd__sub {
    font-size: 12px;
    color: #6a5f4a;
    line-height: 1.5;
    margin-bottom: 16px;
}
.kws_pwd__field {
    text-align: left;
    margin-bottom: 12px;
}
.kws_pwd__field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #8a6c2a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.kws_pwd__input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid rgba(192,167,109,.30);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.kws_pwd__input:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
.kws_pwd__input > i {
    color: #8a6c2a;
    font-size: 13px;
    width: 16px;
    text-align: center;
}
.kws_pwd__input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: #2a2515;
    padding: 4px 0;
    min-width: 0;
}
.kws_pwd__eye {
    color: #8a6c2a;
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    user-select: none;
}
.kws_pwd__eye:hover { color: #2a2515; }

.kws_pwd__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}
.kws_pwd__btn {
    height: 44px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s, box-shadow .2s, transform .15s, background .15s;
}
.kws_pwd__btn:active { transform: scale(.96); }
.kws_pwd__btn--cancel {
    background: #fff;
    color: #5a5040;
    border: 1.5px solid rgba(192,167,109,.30);
}
.kws_pwd__btn--cancel:hover { background: rgba(192,167,109,.08); }
.kws_pwd__btn--save {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 14px rgba(138,108,42,.22);
}
.kws_pwd__btn--save:hover  { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(138,108,42,.30); }


/* ---- CONFIRMATION DIALOG (reject / approve) ----------------------------- */
/* Lives at #tsk_confirm in index.php. Opened via tsk_confirm({…}) — see
   tsk_confirm_approve / tsk_confirm_reject in apps.js. The dialog gates the
   destructive tt_post call so accidental taps don't fire the workflow. */
.tsk_confirm {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tsk_confirm--open { display: flex; }
.tsk_confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 12, .55);
    backdrop-filter: blur(2px);
    animation: tskConfirmFade .15s ease-out;
}
.tsk_confirm__panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(20, 18, 12, .35);
    padding: 24px 22px 18px;
    text-align: center;
    animation: tskConfirmPop .22s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes tskConfirmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tskConfirmPop {
    from { transform: scale(.92) translateY(8px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);  opacity: 1; }
}
.tsk_confirm__icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(192,167,109,.16);
    color: #8a6c2a;
}
.tsk_confirm__icon--approve { background: rgba(20,140,80,.14); color: #14753d; }
.tsk_confirm__icon--reject  { background: rgba(176,30,30,.12); color: #8b1414; }

.tsk_confirm__title {
    font-size: 17px;
    font-weight: 700;
    color: #2a2515;
    margin-bottom: 8px;
    letter-spacing: 0.4px;
}
.tsk_confirm__msg {
    font-size: 13.5px;
    color: #5a5040;
    line-height: 1.55;
    margin-bottom: 20px;
}
.tsk_confirm__msg b { color: #2a2515; font-weight: 700; }

.tsk_confirm__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tsk_confirm__btn {
    height: 46px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s, box-shadow .2s, transform .15s, background .15s;
}
.tsk_confirm__btn:active { transform: scale(.96); }
.tsk_confirm__btn--cancel {
    background: #fff;
    color: #5a5040;
    border: 1.5px solid rgba(192,167,109,.30);
}
.tsk_confirm__btn--cancel:hover { background: rgba(192,167,109,.08); }
.tsk_confirm__btn--gold {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 14px rgba(138,108,42,.22);
}
.tsk_confirm__btn--gold:hover  { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(138,108,42,.30); }
.tsk_confirm__btn--approve {
    background: linear-gradient(135deg, #19a05a, #14753d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(20,140,80,.26);
}
.tsk_confirm__btn--approve:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(20,140,80,.34); }
.tsk_confirm__btn--reject {
    background: linear-gradient(135deg, #c84545, #8b1414);
    color: #fff;
    box-shadow: 0 4px 14px rgba(176,30,30,.28);
}
.tsk_confirm__btn--reject:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(176,30,30,.36); }

@media (max-width: 380px) {
    .tsk_confirm__panel { padding: 22px 18px 16px; }
    .tsk_confirm__title { font-size: 16px; }
    .tsk_confirm__msg   { font-size: 13px; }
}

/* ---- "UNDER DEVELOPMENT" placeholder (Approvals Details, etc.) ---------- */
/* Friendly notice shown inside collapsibles whose real content isn't built
   yet. Stops users from thinking the section is broken. */
#pn_approval_dt .pn_tsk__under-dev {
    text-align: center;
    padding: 22px 16px;
    background: linear-gradient(180deg, #fffaee 0%, #fff 100%);
    border: 1px dashed rgba(192,167,109,.45);
    border-radius: 12px;
}
#pn_approval_dt .pn_tsk__under-dev-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    margin: 0 auto 10px;
    background: rgba(192,167,109,.16);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
#pn_approval_dt .pn_tsk__under-dev-title {
    font-size: 13px;
    font-weight: 700;
    color: #8a6c2a;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    margin-bottom: 6px;
}
#pn_approval_dt .pn_tsk__under-dev-text {
    font-size: 12.5px;
    color: #6a5f4a;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}

/* ---- LAZY-LOAD PLACEHOLDERS (Request Copy / Contract Copy) -------------- */
/* Shown briefly while the heavy request_document / contract_document calls
   are in flight. Replaced by the real document once the rep_html action
   swaps the panel body in. */
#pn_approval_dt .pn_tsk__lazy-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 16px;
    color: #8a6c2a;
    font-size: 13px;
    font-weight: 600;
}
#pn_approval_dt .pn_tsk__lazy-loading i { font-size: 16px; }
#pn_approval_dt .pn_tsk__lazy-empty {
    text-align: center;
    color: #6a5f4a;
    font-size: 12.5px;
    padding: 20px;
    font-style: italic;
}

/* ---- GRACE PERIOD CARD -------------------------------------------------- */
/* Highlights the card border when any grace (Begin / Mid / End) > 0 so the
   reader can spot at a glance that a grace window applies. The badge in the
   card head doubles as the indicator. */
#pn_approval_dt .pn_tsk__card--grace-on {
    border-color: rgba(192,167,109,.55);
    box-shadow: 0 6px 18px rgba(192,167,109,.18);
    background: linear-gradient(180deg, #fffaee 0%, #fff 60%);
}
#pn_approval_dt .pn_tsk__grace-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 2px 6px rgba(138,108,42,.22);
}
#pn_approval_dt .pn_tsk__grace-badge i { font-size: 10px; }
#pn_approval_dt .pn_tsk__grace-badge--off {
    background: rgba(192,167,109,.12);
    color: #8a6c2a;
    box-shadow: none;
}
#pn_approval_dt .pn_tsk__grace-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
#pn_approval_dt .pn_tsk__grace-cell {
    background: rgba(192,167,109,.05);
    border: 1px solid rgba(192,167,109,.16);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
#pn_approval_dt .pn_tsk__grace-cell--on {
    background: linear-gradient(180deg, rgba(192,167,109,.18), rgba(192,167,109,.06));
    border-color: rgba(192,167,109,.45);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.10);
}
#pn_approval_dt .pn_tsk__grace-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #8a6c2a;
}
#pn_approval_dt .pn_tsk__grace-days {
    font-size: 18px;
    font-weight: 700;
    color: #2a2515;
    line-height: 1.1;
}
#pn_approval_dt .pn_tsk__grace-days span {
    font-size: 10px;
    font-weight: 600;
    color: #6a5f4a;
    margin-left: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#pn_approval_dt .pn_tsk__grace-cell--on .pn_tsk__grace-days { color: #8a6c2a; }
#pn_approval_dt .pn_tsk__grace-range {
    font-size: 10.5px;
    color: #6a5f4a;
    word-break: break-word;
}

/* ---- PHONE RESPONSIVE --------------------------------------------------- */
@media (max-width: 480px) {
    #pn_approval_dt .pn_tsk__facts { grid-template-columns: 1fr; }
    #pn_approval_dt .pn_tsk__title { font-size: 16px; }
    #pn_approval_dt .pn_tsk__row-label { min-width: 90px; }
    #pn_approval_dt .pn_tsk__grace-grid { grid-template-columns: 1fr; }
    #pn_approval_dt .pn_tsk__grace-cell { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
    #pn_approval_dt .pn_tsk__grace-cell .pn_tsk__grace-label { min-width: 50px; }
    #pn_approval_dt .pn_tsk__grace-cell .pn_tsk__grace-days { flex: 0 0 auto; }
    #pn_approval_dt .pn_tsk__grace-cell .pn_tsk__grace-range { margin-left: auto; text-align: right; }
}


/* ####  end NOT ADOPTED  ################################################## */


/* =========================================================================
   3. SECTION: Login page  (#tthome) — split layout v2
   ---------------------------------------------------------------------------
   Two-section design:
     * TOP band: gold gradient with a CSS-only "topographic" line pattern
       (concentric ring gradients) and a slow drift animation. Hosts the
       logo + Welcome text.
     * BOTTOM card: white panel that "rises" into the top band via a
       border-radius wave, hosting the form (underline-style inputs with
       icons, eye toggle on the password, Remember Me + Forgot Password).

   Markup (see index.php):
       #tthome
         .login_v2__top
            .login_v2__hero
              .login_v2__logo
              .login_v2__welcome
              .login_v2__tagline
         .login_v2__bottom            (id="ttlogin", curved top)
            .login_v2__title
            .login_v2__field × 2
               .login_v2__label
               .login_v2__input-wrap
                  .login_v2__input-icon
                  .login_v2__input
                  .login_v2__input-eye    (password only)
            .login_v2__row
               .login_v2__remember
                  .login_v2__remember-box
               .login_v2__forgot
            .login_v2__btn
            .login_v2__version
   ========================================================================= */


/* ---------- Page surface ----------------------------------------------- */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst){
    /* Page itself is white — the colored top band is its own block (.login_v2__top). */
    background: #ffffff !important;
    overflow: hidden !important;
    /* Phone-style slide animation matches the rest of the modern layer. */
    transition: left .35s cubic-bezier(.25, .8, .25, 1) !important;
    will-change: left;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ---------- Top color band (gold + topographic feel) ------------------- */
/* Solid gold gradient base. Fills the top ~42% of the viewport. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42%;
    overflow: hidden;
    background: linear-gradient(135deg, #d6bb7f 0%, #b89351 50%, #a98842 100%);
    z-index: 1;
}

/* Soft static topographic backdrop — concentric ring patterns from a few
   off-center origins, very low opacity. Always visible, doesn't animate, so
   the gold area looks intentional even before any ripple cycle has played.
   Combines with the random ripple animation above to give "soft pattern +
   gentle motion" instead of "blank gold + occasional ring". */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__top::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-radial-gradient(circle at 28% 32%, transparent 0, transparent 32px, rgba(255,255,255,.07) 32px, rgba(255,255,255,.07) 34px),
        repeating-radial-gradient(circle at 72% 64%, transparent 0, transparent 44px, rgba(255,255,255,.05) 44px, rgba(255,255,255,.05) 46px),
        repeating-radial-gradient(circle at 50% 92%, transparent 0, transparent 56px, rgba(255,255,255,.04) 56px, rgba(255,255,255,.04) 58px);
    pointer-events: none;
    z-index: 0;
}

/* Random-position ripple animation — multiple ring elements live inside the
   gold area, each at its own (--x, --y) origin set inline in the markup.
   Each ring cycles "tiny + invisible → mid-size + bright → big + invisible",
   and a per-ring `--d` delay staggers the cycles so they never pulse in
   sync — the result reads as random ripples popping up across the gold
   band continuously.
   Pure CSS, GPU-only (transform + opacity).

   Tweak: to add more ripples, drop another <span> with new --x/--y/--d.
   To make them larger / smaller, change `width`/`height` on the base rule.
   To make them appear on first paint instead of after a wait, use NEGATIVE
   `--d` values (e.g. -2s) so the ripple is already mid-cycle when CSS
   starts ticking. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple {
    position: absolute;
    left: var(--x);
    top:  var(--y);
    /* Sits above the static topographic backdrop (z-index: 0) but below
       the hero content (z-index: 2). */
    z-index: 1;
    /* Box is 80×80 with margin negatives so (--x, --y) is the *center*
       of the ripple rather than its top-left. Tweaking the box size here
       changes how big the ring is at scale(1). */
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    /* Hairline ring at low opacity — delicate at any size. */
    border: 1px solid rgba(255, 255, 255, 0.16);
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
    /* 20s cycle — very slow drift; the small→big growth feels meditative.
       Inline `--d` delays stagger each ring's start across the cycle. */
    animation: ripple_emit 20s ease-out var(--d, 0s) infinite;
}

/* Ripple cycle: a fresh ring at its origin grows outward and fades.
       0%  — tiny dot, invisible
      18%  — visible at peak (low opacity for very subtle effect)
      100% — fully expanded (4×) and faded out */
@keyframes ripple_emit {
    0%   { transform: scale(0.1); opacity: 0;   }
    18%  { transform: scale(0.6); opacity: .40; }
    70%  { transform: scale(2.4); opacity: .20; }
    100% { transform: scale(4);   opacity: 0;   }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    #tthome .login_v2__ripple { animation: none; opacity: 0; }
}


/* ---------- Hero (logo + welcome inside the top band) ------------------ */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
    color: #ffffff;
    /* Sits above the animated rings (z-index: 1). */
    z-index: 2;
    width: calc(100% - 40px);
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__logo {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    padding: 5px;
    box-shadow:
        0 10px 24px rgba(0,0,0,.18),
        0 0 0 4px rgba(255,255,255,.18);  /* soft outer halo for emphasis */
    box-sizing: border-box;
    overflow: hidden;   /* the circle does the clipping now, not the img */
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    /* NO border-radius here. The wrapper is already a circle; clipping the
       image to its OWN inscribed circle as well is what was cutting the logo.
       This asset is a tall lockup on a square canvas with zero vertical
       margin - ink 55% wide but 99% tall - so its top and bottom sit exactly
       on the image's edge, which a second circular clip removes outright.
       The wrapper's overflow:hidden trims the canvas corners instead, and
       those are white against a white circle, so nothing shows. */
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__welcome {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__tagline {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,.88);
    margin-top: 4px;
}


/* ---------- Bottom white panel (form) ---------------------------------- */
/* Rises into the gold band via border-radius — that's the "wave" divider.
   The horizontal radius is large (50%) and the vertical radius small
   (~50px) so the curve is shallow and gentle, like an ocean swell. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 35%;                  /* overlap into the gold band */
    background: #ffffff;
    border-top-left-radius: 60% 60px;
    border-top-right-radius: 60% 60px;
    /* Top padding tightened from 40 → 28: at typical phone-mockup heights
       (640-780px) the form would overflow the panel by ~20-40px and the
       themed scrollbar appeared. 28px keeps the panel airy without forcing
       a scroll on the most common viewport sizes. */
    padding: 28px 28px 22px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    z-index: 2;
    box-shadow: 0 -10px 28px rgba(120, 90, 30, .12);
    /* Themed scrollbar (Firefox + WebKit) — only shows when the form
       actually exceeds the panel (long passwords surfaced via password-
       manager autofill, OS text-zoom, etc.). */
    scrollbar-width: thin;
    scrollbar-color: #c0a76d transparent;
}
#tthome .login_v2__bottom::-webkit-scrollbar       { width: 5px; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__bottom::-webkit-scrollbar-thumb {
    background: #c0a76d;
    border-radius: 999px;
}


/* ---------- Title ------------------------------------------------------- */
/* "Sign in" with a short gold underline accent. Generous bottom margin so
   the title has clear breathing room before the form below. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__title {
    display: inline-block;
    position: relative;
    /* Bottom margin tightened from 48 → 28: combined with the panel
       padding-top reduction this brings the form back inside the panel
       on common viewport heights without making the title feel cramped. */
    margin: 0 0 28px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #2a2515;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, #c0a76d, #a98842);
    border-radius: 2px;
}


/* ---------- Fields (underline-style with leading icon) ----------------- */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__field {
    margin-bottom: 16px;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6b5524;
    margin-bottom: 4px;
}
/* The underline lives on the wrap, so the icon and the optional eye toggle
   sit on the same baseline as the input. :focus-within deepens the underline
   when the user is editing. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__input-wrap {
    position: relative;
    border-bottom: 1.5px solid rgba(192,167,109,.30);
    transition: border-bottom-color .15s ease;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__input-wrap:focus-within {
    border-bottom-color: #c0a76d;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    /* Padding leaves room for the icon on the left and (optionally) the eye on the right. */
    padding: 0 32px 0 28px;
    background: transparent;
    border: none;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #2a2515;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__input::placeholder {
    color: #b9b1a0;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__input-icon {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0a76d;
    font-size: 14px;
    pointer-events: none;
}
/* Show / hide password eye — clickable, color flips when password is shown. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__input-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #b9b1a0;
    font-size: 14px;
    cursor: pointer;
    padding: 6px;            /* bigger tap target without disturbing layout */
    transition: color .15s ease;
}
#tthome .login_v2__input-eye:hover { color: #8a6c2a; }


/* ---------- Remember Me + Forgot Password row -------------------------- */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrap on very narrow phones instead of overflowing. */
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 16px 0 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* Custom checkbox: native input is visually hidden, the styled box swaps
   between empty and gold-filled-with-checkmark via :checked. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: #6b6655;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__remember input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__remember-box {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #faf7f0;
    border: 1.5px solid rgba(192,167,109,.45);
    border-radius: 5px;
    transition: background .15s ease, border-color .15s ease;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__remember-box i {
    font-size: 10px;
    color: #ffffff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__remember input[type="checkbox"]:checked ~ .login_v2__remember-box {
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    border-color: #a98842;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__remember input[type="checkbox"]:checked ~ .login_v2__remember-box i {
    opacity: 1;
    transform: scale(1);
}

/* Forgot link — gold, scale-down feedback on press. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__forgot {
    color: #a98842;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, transform .12s ease;
}
#tthome .login_v2__forgot:hover  { color: #8a6c2a; }
#tthome .login_v2__forgot:active { transform: scale(.97); }


/* ---------- Login button ----------------------------------------------- */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(120, 90, 30, .22);
    user-select: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__btn:active {
    transform: translateY(2px) scale(.985);
    box-shadow: 0 4px 8px rgba(120, 90, 30, .15);
}


/* ---------- Footer (brand + version pill + domain + copyright) -------- */
/* Three-line footer:
     1. Brand name (bold, dark)
     2. Version chip + bullet + linked domain
     3. Copyright line (smallest, muted)
   A hairline gold rule above the block separates it from the form. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer {
    text-align: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(192,167,109,.22);
    font-family: Arial, Helvetica, sans-serif;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer-brand {
    font-size: 12px;
    font-weight: 600;
    color: #4a3b1a;
    letter-spacing: .3px;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer-meta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8a8170;
}
/* Small gold pill that wraps the version number — replaces the plain text. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer-version {
    padding: 2px 9px;
    background: linear-gradient(135deg, rgba(192,167,109,.18), rgba(169,136,66,.18));
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 999px;
    color: #6b5524;
    font-weight: 600;
    letter-spacing: .3px;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer-dot {
    color: #c0a76d;
    font-size: 10px;
    line-height: 1;
}
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer-link {
    color: #8a8170;
    text-decoration: none;
    transition: color .15s ease;
}
#tthome .login_v2__footer-link:hover { color: #6b5524; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__footer-copy {
    margin-top: 4px;
    font-size: 10px;
    color: #b0a890;
    letter-spacing: .2px;
}


/* ---------- Phone-responsive fallbacks --------------------------------- */
/* Tiny phones (Galaxy Fold ≈ 280px, etc.). Trim paddings + font sizes so
   nothing overflows. */
@media (max-width: 340px) {
    #tthome .login_v2__bottom { padding: 32px 22px 18px; }
    #tthome .login_v2__title  { font-size: 22px; }
    #tthome .login_v2__welcome { font-size: 22px; }
    #tthome .login_v2__btn    { height: 46px; font-size: 14px; }
    #tthome .login_v2__row    { font-size: 11px; }
}

/* Short viewports (landscape, ≤640px tall). Shrink the gold band so the
   form is reachable without scrolling the panel. */
@media (max-height: 640px) {
    #tthome .login_v2__top    { height: 32%; }
    #tthome .login_v2__bottom { top: 26%; padding: 28px 24px 16px; }
    #tthome .login_v2__hero   { transform: translate(-50%, -50%); }
    #tthome .login_v2__logo   { width: 64px; height: 64px; margin-bottom: 8px; }
    #tthome .login_v2__welcome { font-size: 20px; }
    #tthome .login_v2__title  { font-size: 22px; margin-bottom: 16px; }
    #tthome .login_v2__field  { margin-bottom: 12px; }
    #tthome .login_v2__row    { margin: 10px 0 14px; }
    #tthome .login_v2__btn    { height: 44px; }
    /* Tighten the footer on landscape — brand stays, copyright line drops. */
    #tthome .login_v2__footer { margin-top: 10px; padding-top: 8px; }
    #tthome .login_v2__footer-copy { display: none; }
}



/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
@media (min-width: 100000px) {
/* =========================================================================
   4. SECTION: Modern dialog  (#msgbox_v2 / .msg_v2)
   ---------------------------------------------------------------------------
   Replacement UI for the legacy `.msg_box` dialog. Triggered by
   show_msg_v2(html, type?) in apps.js. Type ∈ "info" | "error" | "warn" |
   "success"; auto-detected from the message text when omitted.

   The legacy `#msgbox` element is left in the DOM and `clear_msgbox()` still
   works; only the sh_msg action handler in apps.js was rerouted to this new
   dialog so server-emitted messages render in the modern look automatically.
   ========================================================================= */

/* Overlay container — full-viewport flexbox so the panel is centered on any
   screen size. Hidden by default; visible when .msg_v2--show is added. */
.msg_v2 {
    position: fixed;
    inset: 0;
    /* Bumped above other in-app modals (kws_pwd at 10000, tsk_confirm at
       10000) so server-side error messages always render ON TOP of any
       form dialog the user is in. Without this, validation errors
       returned to e.g. the password modal appeared behind it and looked
       like nothing happened. */
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.msg_v2.msg_v2--show {
    display: flex;
    animation: msg_v2_fade .18s ease;
}

/* Frosted backdrop — click outside to dismiss. */
.msg_v2__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 30, 10, .45);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    cursor: pointer;
}

/* The actual dialog panel. Capped width so it never gets unwieldy on tablets,
   and `width:100%` so it adapts to the container padding on phones. */
.msg_v2__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .22);
    text-align: center;
    animation: msg_v2_pop .25s cubic-bezier(.2, .9, .3, 1.2);
}

/* Type-driven icon circle — color tone shifts so error/success/etc. read
   without the user having to read the text. Default tone is "info" gold. */
.msg_v2__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #a98842;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30);
}
.msg_v2--info    .msg_v2__icon { background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%); color: #a98842; box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.msg_v2--error   .msg_v2__icon { background: linear-gradient(135deg, #fde5e5 0%, #f9c2c2 100%); color: #b00020; box-shadow: inset 0 0 0 1px rgba(176,0,32,.20); }
.msg_v2--warn    .msg_v2__icon { background: linear-gradient(135deg, #fff3d6 0%, #ffd680 100%); color: #b45309; box-shadow: inset 0 0 0 1px rgba(180,83,9,.20); }
.msg_v2--success .msg_v2__icon { background: linear-gradient(135deg, #d8f5e6 0%, #9be3b9 100%); color: #047857; box-shadow: inset 0 0 0 1px rgba(4,120,87,.20); }

.msg_v2__title {
    font-size: 17px;
    font-weight: 600;
    color: #2a2515;
    margin-bottom: 6px;
}
.msg_v2__text {
    font-size: 14px;
    line-height: 1.5;
    color: #5a5444;
    margin-bottom: 18px;
    /* Long messages get scrollable inside the panel (caps panel height too). */
    max-height: 50vh;
    overflow-y: auto;
}

.msg_v2__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.msg_v2__btn {
    min-width: 110px;
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(120, 90, 30, .22);
    transition: transform .12s ease, box-shadow .12s ease;
    user-select: none;
}
.msg_v2__btn:active {
    transform: translateY(1px) scale(.98);
    box-shadow: 0 3px 8px rgba(120, 90, 30, .15);
}

/* Animations are GPU-only (opacity + transform) so they're cheap on mobile. */
@keyframes msg_v2_fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes msg_v2_pop {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Phone responsive — keep dialog comfortable on tiny phones. */
@media (max-width: 360px) {
    .msg_v2 { padding: 14px; }
    .msg_v2__panel { padding: 20px 18px 16px; border-radius: 16px; }
    .msg_v2__icon  { width: 48px; height: 48px; font-size: 20px; margin-bottom: 10px; }
    .msg_v2__title { font-size: 16px; }
    .msg_v2__text  { font-size: 13px; margin-bottom: 14px; }
    .msg_v2__btn   { min-width: 100px; height: 42px; font-size: 13px; }
}

/* Honour user motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .msg_v2.msg_v2--show { animation: none; }
    .msg_v2__panel       { animation: none; }
}


}
/* ####  end NOT ADOPTED  ################################################## */


/* ####  ADOPTED  ##########################################################
 * Switched on for the tenant portal. Safe to enable on its own because every
 * selector in this section is scoped to #tt_welcome - an id no other screen
 * here uses - so nothing already built can be touched by it.
 * ######################################################################### */
/* =========================================================================
   5. SECTION: Welcome page  (#tt_welcome) — one-time first-visit screen
   ---------------------------------------------------------------------------
   Same split layout as the login page (gold top + curved white bottom),
   different content. Shown only on the first visit; the load handler in
   apps.js checks localStorage for a `welcome_seen` flag and slides to
   #tthomeinstead on every subsequent open.

   Markup in index.php:
       #tt_welcome
         .welcome_v2__top         (gold band, hosts ripple animation)
            .login_v2__ripple × n (reused — same animation/styles)
         .welcome_v2__bottom      (white card, curved top, holds copy + CTA)
            .welcome_v2__title    ("Welcome")
            .welcome_v2__text     (tagline copy)
            .welcome_v2__action   (Continue label + circular arrow button)
   ========================================================================= */


/* ---------- Page surface ----------------------------------------------- */
#tt_welcome {
    background: #ffffff !important;
    overflow: hidden !important;
    transition: left .35s cubic-bezier(.25, .8, .25, 1) !important;
    will-change: left;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* System font stack — uses each OS's native UI font (San Francisco on
       iOS/macOS, Segoe UI on Windows, Roboto on Android) for a clean,
       modern look while staying 100% standard / no decorative typeface.
       Applied at the page root so every child element inherits. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    /* Slightly better text rendering on macOS / iOS Webkit. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Better default kerning for headings & body. */
    text-rendering: optimizeLegibility;
}


/* ---------- Top color band (gold) -------------------------------------- */
#tt_welcome .welcome_v2__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Slightly shorter than 55% so the bottom panel has more room for the
       longer body copy without scrolling. */
    height: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #d6bb7f 0%, #b89351 50%, #a98842 100%);
    z-index: 1;
}


/* ---------- Hero block (logo + brand + tagline, centered in gold band) -- */
#tt_welcome .welcome_v2__hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
    color: #ffffff;
    z-index: 2;                 /* sits above the ripples */
    width: calc(100% - 40px);
    /* Inherits the system font stack from #tt_welcome. */
}

#tt_welcome .welcome_v2__logo {
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    padding: 5px;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 0 0 4px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    overflow: hidden;   /* the circle does the clipping now, not the img */
}
#tt_welcome .welcome_v2__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    /* NO border-radius here. The wrapper is already a circle; clipping the
       image to its OWN inscribed circle as well is what was cutting the logo.
       This asset is a tall lockup on a square canvas with zero vertical
       margin - ink 55% wide but 99% tall - so its top and bottom sit exactly
       on the image's edge, which a second circular clip removes outright.
       The wrapper's overflow:hidden trims the canvas corners instead, and
       those are white against a white circle, so nothing shows. */
}

#tt_welcome .welcome_v2__brand {
    font-size: 22px;
    font-weight: 600;            /* 600 reads cleaner than 700 in SF / Segoe UI */
    color: #ffffff;
    letter-spacing: -0.2px;      /* tighter for the modern UI fonts */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
#tt_welcome .welcome_v2__hero-tag {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* Soft topographic backdrop — same low-opacity ring pattern as the login
   page so the two screens feel like siblings. */
#tt_welcome .welcome_v2__top::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-radial-gradient(circle at 28% 32%, transparent 0, transparent 32px, rgba(255,255,255,.07) 32px, rgba(255,255,255,.07) 34px),
        repeating-radial-gradient(circle at 72% 64%, transparent 0, transparent 44px, rgba(255,255,255,.05) 44px, rgba(255,255,255,.05) 46px),
        repeating-radial-gradient(circle at 50% 92%, transparent 0, transparent 56px, rgba(255,255,255,.04) 56px, rgba(255,255,255,.04) 58px);
    pointer-events: none;
    z-index: 0;
}


/* ---------- Bottom white panel (CTA) ----------------------------------- */
#tt_welcome .welcome_v2__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 43%;             /* overlap into the gold band for the wave */
    background: #ffffff;
    /* Same shallow wave as the login page so the two screens match. */
    border-top-left-radius: 60% 60px;
    border-top-right-radius: 60% 60px;
    padding: 56px 28px 24px;
    box-sizing: border-box;
    z-index: 2;
    box-shadow: 0 -10px 28px rgba(120, 90, 30, .12);
    /* Inherits the system font stack from #tt_welcome. */
    display: flex;
    flex-direction: column;
    /* Allow scrolling on tiny viewports where copy can run long. */
    overflow-y: auto;
}


/* ---------- Title + copy ----------------------------------------------- */
#tt_welcome .welcome_v2__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;     /* tighter heading is the modern look */
    color: #1c1810;
    margin: 0 0 12px 0;
}
#tt_welcome .welcome_v2__text {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.65;
    color: #5a5444;
    margin-bottom: auto;        /* pushes the action row to the bottom */
    max-width: 380px;
}


/* ---------- Continue action (label + arrow button) --------------------- */
#tt_welcome .welcome_v2__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    padding: 16px 0 4px;
    transition: transform .12s ease;
}
#tt_welcome .welcome_v2__action:active { transform: translateX(2px); }

#tt_welcome .welcome_v2__continue-text {
    font-size: 14px;
    font-weight: 500;
    color: #4a3b1a;
    letter-spacing: 0;
}
#tt_welcome .welcome_v2__continue-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #ffffff;
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(120, 90, 30, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}
#tt_welcome .welcome_v2__action:active .welcome_v2__continue-btn {
    transform: scale(.94);
    box-shadow: 0 4px 10px rgba(120, 90, 30, .15);
}


/* ---------- Phone responsive ------------------------------------------- */
@media (max-width: 340px) {
    #tt_welcome .welcome_v2__bottom { padding: 48px 22px 20px; }
    #tt_welcome .welcome_v2__title  { font-size: 24px; }
    #tt_welcome .welcome_v2__text   { font-size: 13px; }
    #tt_welcome .welcome_v2__brand  { font-size: 20px; }
    #tt_welcome .welcome_v2__hero-tag { font-size: 11px; letter-spacing: 1.2px; }
    #tt_welcome .welcome_v2__continue-btn { width: 44px; height: 44px; font-size: 15px; }
}
@media (max-height: 640px) {
    #tt_welcome .welcome_v2__top    { height: 42%; }
    #tt_welcome .welcome_v2__bottom { top: 35%; padding: 44px 24px 16px; }
    #tt_welcome .welcome_v2__title  { font-size: 22px; margin-bottom: 8px; }
    #tt_welcome .welcome_v2__logo   { width: 64px; height: 64px; margin-bottom: 8px; padding: 3px; }
    #tt_welcome .welcome_v2__brand  { font-size: 18px; }
    #tt_welcome .welcome_v2__hero-tag { font-size: 10px; letter-spacing: 1.2px; }
    #tt_welcome .welcome_v2__text   { font-size: 13px; line-height: 1.5; }
}




/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
@media (min-width: 100000px) {
/* =========================================================================
   6. SECTION: Forgot password  (#tt_fp_request / #tt_fp_verify / #tt_fp_reset)
   ---------------------------------------------------------------------------
   The three forgot-password steps reuse the existing login layout/components
   (.login_v2__top, .login_v2__bottom, .login_v2__field, .login_v2__btn,
   .login_v2__title, .login_v2__ripple) — so all the gradient/wave/font work
   from the login is already applied. This section adds only the few bits
   that are specific to forgot-password:
     - .fp_v2__bottom  — minor padding tweak (one less field than login)
     - .fp_v2__lead    — short instruction paragraph under the title
     - .fp_v2__back    — "Back to sign in" link below the primary button
     - .fp_v2__otp     — wider letter-spaced styling for the 4-digit code
   ========================================================================= */

/* Page-surface, top band, ripples, fields, button, ripple animation, etc.
   are all inherited through the :is(#tthome, #tt_fp_request, #tt_fp_verify,
   #tt_fp_reset) selector group in the Login section above. We only add the
   forgot-password-specific bits below. */


/* ---------- Hero in the gold band (logo + heading + subtitle) ---------- */
/* Centered horizontally, sits above the curved white panel. The white
   panel covers from ~35% down, and now the hero has THREE elements
   (logo, heading, subtitle) so we anchor a bit higher (top: 8%) so the
   subtitle doesn't dive under the wave on shorter phones. */
#tt_fp_request .fp_v2__hero,
#tt_fp_verify  .fp_v2__hero,
#tt_fp_reset   .fp_v2__hero {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    z-index: 2;            /* above the ripples (z-index: 1) */
    width: calc(100% - 40px);
}

#tt_fp_request .fp_v2__logo,
#tt_fp_verify  .fp_v2__logo,
#tt_fp_reset   .fp_v2__logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    padding: 4px;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18),
        0 0 0 4px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
}
#tt_fp_request .fp_v2__logo img,
#tt_fp_verify  .fp_v2__logo img,
#tt_fp_reset   .fp_v2__logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
}

/* Big heading under the logo (mirrors .welcome_v2__welcome). */
#tt_fp_request .fp_v2__heading,
#tt_fp_verify  .fp_v2__heading,
#tt_fp_reset   .fp_v2__heading {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    margin-top: 4px;
}

/* Subtitle under the heading (mirrors .welcome_v2__tagline). */
#tt_fp_request .fp_v2__subtitle,
#tt_fp_verify  .fp_v2__subtitle,
#tt_fp_reset   .fp_v2__subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* Legacy .fp_v2__hero-tag (no longer in markup) — kept as no-op so any
   stale references don't break. Safe to remove eventually. */
#tt_fp_request .fp_v2__hero-tag,
#tt_fp_verify  .fp_v2__hero-tag,
#tt_fp_reset   .fp_v2__hero-tag { display: none; }

/* Landscape / short viewports — shrink the hero so the logo + heading +
   subtitle still fit above the wave divider. */
@media (max-height: 640px) {
    #tt_fp_request .fp_v2__hero,
    #tt_fp_verify  .fp_v2__hero,
    #tt_fp_reset   .fp_v2__hero {
        top: 4%;
    }
    #tt_fp_request .fp_v2__logo,
    #tt_fp_verify  .fp_v2__logo,
    #tt_fp_reset   .fp_v2__logo {
        width: 52px; height: 52px; padding: 3px; margin-bottom: 6px;
    }
    #tt_fp_request .fp_v2__heading,
    #tt_fp_verify  .fp_v2__heading,
    #tt_fp_reset   .fp_v2__heading {
        font-size: 18px;
    }
    #tt_fp_request .fp_v2__subtitle,
    #tt_fp_verify  .fp_v2__subtitle,
    #tt_fp_reset   .fp_v2__subtitle {
        font-size: 11px;
    }
}

/* Title + lead now live in the gold band (the .fp_v2__heading and
   .fp_v2__subtitle inside .fp_v2__hero), so the white panel only holds
   the form. We tighten the top padding so the first field sits a bit
   closer to the wave divider, and shrink the bottom padding too. */
#tt_fp_request .fp_v2__bottom,
#tt_fp_verify  .fp_v2__bottom,
#tt_fp_reset   .fp_v2__bottom {
    padding-top: 48px;
    padding-bottom: 28px;
}

/* Legacy .fp_v2__lead (no longer in markup) — silently hidden so any
   stale references in older HTML don't reappear. */
#tt_fp_request .fp_v2__lead,
#tt_fp_verify  .fp_v2__lead,
#tt_fp_reset   .fp_v2__lead { display: none; }

/* "Back to sign in" link — tertiary action below the primary button. */
#tt_fp_request .fp_v2__back,
#tt_fp_verify  .fp_v2__back {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: #a98842;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, transform .12s ease;
}
#tt_fp_request .fp_v2__back:hover,
#tt_fp_verify  .fp_v2__back:hover  { color: #8a6c2a; }
#tt_fp_request .fp_v2__back:active,
#tt_fp_verify  .fp_v2__back:active { transform: scale(.97); }

/* "Didn't get the code? Resend" — small inline action under the verify button.
   Server enforces a "max 4 sends per day" rule (kusers_fpotp_count). */
#tt_fp_verify .fp_v2__resend {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: #6b6655;
}
#tt_fp_verify .fp_v2__resend-link {
    color: #a98842;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-left: 4px;
    transition: color .15s ease, transform .12s ease;
}
#tt_fp_verify .fp_v2__resend-link:hover  { color: #8a6c2a; }
#tt_fp_verify .fp_v2__resend-link:active { transform: scale(.97); }

/* OTP — 4 separate digit boxes instead of one input.
   Each cell is a square (~52px) with a hairline gold border, light cream
   fill, and a brighter gold focus ring. The row is centered. JS in apps.js
   (fp_otp_input / fp_otp_keydown / fp_otp_paste) handles auto-advance and
   paste distribution. */
#tt_fp_verify .fp_v2__otp-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
#tt_fp_verify .fp_v2__otp-cell {
    width: 52px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-family: inherit;          /* uses the system font stack from #tthome */
    font-size: 24px;
    font-weight: 600;
    color: #2a2515;
    background: #faf7f0;
    border: 1.5px solid rgba(192,167,109,.35);
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    /* Caret stays visible inside the cell on iOS where centered text can
       hide it just behind the digit. */
    caret-color: #c0a76d;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
#tt_fp_verify .fp_v2__otp-cell:focus {
    border-color: #c0a76d;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, .18);
}

/* Tiny phones — shrink the cells a touch so 4×52 + 3×12 fits in 280px. */
@media (max-width: 340px) {
    #tt_fp_verify .fp_v2__otp-row  { gap: 8px; }
    #tt_fp_verify .fp_v2__otp-cell { width: 48px; height: 52px; font-size: 22px; }
}


}
/* ####  end NOT ADOPTED  ################################################## */


/* ####  ADOPTED  ##########################################################
 * Switched on with the drawer rebuild. Scoped to #ttmenu, which the portal
 * already uses for the same purpose, and the markup was rewritten onto these
 * menu_v2 classes in the same change - so the section and the markup that
 * needs it arrive together.
 * ######################################################################### */
/* =========================================================================
   7. SECTION: Left menu (#ttmenu) — modern hamburger drawer
   ---------------------------------------------------------------------------
   Markup emitted by kp0_render_home_pages() in pages/kprocess_0.php:
       #ttmenu
         .hp_holder ("MENU")
         .bd_container
            .menu_v2__profile          (avatar + name + role + chevron)
               .menu_v2__avatar
               .menu_v2__user
                  .menu_v2__name
                  .menu_v2__role
               .menu_v2__chev
            .menu_v2__section × n      (small uppercase section heading)
            .menu_v2__item × n         (one row per menu entry)
               .menu_v2__icon          (gold disc holding the SVG)
               .menu_v2__body
                  .menu_v2__title
                  .menu_v2__subtitle
               .menu_v2__chev
   ========================================================================= */


/* ---------- Page surface ----------------------------------------------- */
/* Same warm cream background + scroll-below-header pattern as the rest of
   the modern layer. */
#ttmenu {
    background:
        radial-gradient(1000px 500px at -10% -5%, rgba(192,167,109,.07), transparent 60%),
        linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%) !important;
    overflow: hidden !important;
    transition: left .35s cubic-bezier(.25, .8, .25, 1) !important;
    will-change: left;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
#ttmenu .bd_container {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    /* Bottom padding accounts for the fixed bottom-tab bar (~64px +
       iOS safe-area) so the last menu item (Logout) is fully visible
       and tappable when the list is scrolled to the end. */
    padding: 14px 14px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
#ttmenu .bd_container::-webkit-scrollbar       { width: 6px; }
#ttmenu .bd_container::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
#ttmenu .bd_container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0a76d 0%, #a98842 100%);
    border-radius: 999px;
}


/* ---------- Profile mini-card at the top of the drawer ---------------- */
/* Compressed version of the home profile card. Shows avatar + name + role,
   tappable — opens the same Profile/Settings page as a menu item would. */
#ttmenu .menu_v2__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    padding: 14px;
    background: linear-gradient(135deg, #fffdf7 0%, #f7eed8 100%);
    border-radius: 14px;
    box-shadow:
        0 6px 16px rgba(120,90,30,.08),
        inset 0 0 0 1px rgba(192,167,109,.20);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
#ttmenu .menu_v2__profile:active {
    transform: translateY(1px);
    box-shadow:
        0 3px 8px rgba(120,90,30,.06),
        inset 0 0 0 1px rgba(192,167,109,.20);
}
#ttmenu .menu_v2__avatar {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6bb7f 0%, #a98842 100%);
    padding: 3px;
    box-shadow: 0 4px 10px rgba(120,90,30,.18);
    box-sizing: border-box;
}
#ttmenu .menu_v2__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}
#ttmenu .menu_v2__user {
    flex: 1 1 auto;
    min-width: 0;
}
#ttmenu .menu_v2__name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #2a2515;
    /* Truncate when the name is longer than the drawer width. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ttmenu .menu_v2__role {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8a6c2a;
}


/* ---------- Section heading -------------------------------------------- */
/* Small uppercase label between item groups (Main / Operations / etc). */
:is(#ttmenu, #pn_msges, #pn_messages_send, #pn_approvals) .menu_v2__section {
    margin: 16px 6px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #a98842;
}


/* ---------- Menu item card --------------------------------------------- */
/* White card with a soft shadow + a row layout: gold icon disc, two-line
   text, chevron. Press feedback is a subtle translateY + shadow shrink. */
#ttmenu .menu_v2__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 4px 12px rgba(60,40,0,.05),
        0 1px 0 rgba(192,167,109,.10);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
#ttmenu .menu_v2__item:active {
    transform: translateY(1px) scale(.998);
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
}

/* Icon disc — same cream-gold gradient as the home tile icons so the
   visual vocabulary stays consistent across the app. */
#ttmenu .menu_v2__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30);
}
#ttmenu .menu_v2__icon svg {
    width: 20px;
    height: 20px;
    stroke: #8a6c2a;
}

#ttmenu .menu_v2__body {
    flex: 1 1 auto;
    min-width: 0;
}
#ttmenu .menu_v2__title {
    font-size: 14px;
    font-weight: 600;
    color: #2a2515;
    line-height: 1.25;
    /* Truncate if the title is unexpectedly long. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ttmenu .menu_v2__subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #8a8170;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron at the right edge — both on profile + menu items. */
#ttmenu .menu_v2__chev {
    flex: 0 0 auto;
    color: #c4b58a;
    font-size: 12px;
    padding-left: 4px;
}

/* Active-task / pending-count pill on a menu row. Same gradient as the
   home tile's k_badgecount + the bottom-tab badge so the count reads
   identically across all three surfaces. Server emits this only when
   count > 0, so when the value drops to 0 the pill goes away entirely. */
#ttmenu .menu_v2__badge {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #c8332a 0%, #800000 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    min-width: 22px;
    text-align: center;
    border-radius: 999px;
    margin-right: 8px;
    box-shadow: 0 2px 6px rgba(128,0,0,.30);
    line-height: 1.4;
}

/* Logout row — subtle red tint to set it apart from the other actions. */
#ttmenu .menu_v2__item--logout .menu_v2__icon {
    background: linear-gradient(135deg, #fde5e5 0%, #f5c4c4 100%);
    box-shadow: inset 0 0 0 1px rgba(176,0,32,.18);
}
#ttmenu .menu_v2__item--logout .menu_v2__icon svg {
    stroke: #b00020;
}
#ttmenu .menu_v2__item--logout .menu_v2__title { color: #7c1729; }
#ttmenu .menu_v2__item--logout .menu_v2__chev  { color: #d8a4ac; }


/* =========================================================================
   7.5 SECTION: Profile page  (:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) — kprocess_19)
   ---------------------------------------------------------------------------
   Triggered by tapping the profile card on home (or the profile mini-card
   in the left drawer). Layout is similar to the task-details page: hero
   card on top, then small grouped detail cards (Personal / Contact /
   Account & Security).
   ========================================================================= */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) {
    background: #fbf8f1;
    overflow: hidden !important;
}
/* Same scroll-below-header pattern as #pn_approval_dt. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;     /* matches unified header */
    padding: 14px 16px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .bd_container::-webkit-scrollbar       { width: 6px; }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .bd_container::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .bd_container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0a76d 0%, #a98842 100%);
    border-radius: 999px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .bd_container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a98842 0%, #8a6c2a 100%);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .tt_line20 { display: none !important; }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .hp_holder {
    /* Layout handled by the global .hp_holder rule. Flat cream to match
       the rest of the top chrome (body + hamburger + close button). */
    color: #2a2515;
    background: #fbfaf6;
    border-bottom: 0;
    box-shadow: none;
    font-size: 14px; letter-spacing: 1.6px;
    z-index: 5;
}

/* ---- HERO ---------------------------------------------------------------- */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__hero {
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 18px;
    padding: 24px 16px 20px;
    box-shadow: 0 6px 20px rgba(138,108,42,.10);
    margin-bottom: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__hero::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192,167,109,.18), transparent 70%);
    pointer-events: none;
}
/* Outer avatar = positioning context for the inner picture circle AND
   the camera badge. NO overflow:hidden here — that would clip the badge. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
    display: inline-block;
    line-height: 0;
}
/* Inner circle that clips the photo. This is where overflow:hidden +
   border live, so the camera badge stays free outside this clip box. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #c0a76d;
    color: #c0a76d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 6px 18px rgba(138,108,42,.18);
    overflow: hidden;
    box-sizing: border-box;
}
/* Uploaded photo fills the inner circle. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tappable affordance — outer container handles the click + hover lift. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar--editable {
    cursor: pointer;
    transition: transform .15s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar--editable:hover .pn_prf__avatar-pic  {
    box-shadow: 0 8px 22px rgba(138,108,42,.26);
    transform: scale(1.02);
    transition: transform .15s, box-shadow .2s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar--editable:active .pn_prf__avatar-pic { transform: scale(.97); }

/* "Remove Photo" link — sits centred under the EMP-id pill in the hero,
   only rendered when the user actually has an uploaded avatar. Tap goes
   through the standard processor (pn_profile_avatar_remove → confirm). */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__photo-actions {
    margin-top: 12px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__photo-remove {
    background: transparent;
    border: 0;
    color: #8b1414;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s, color .15s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__photo-remove:hover  { background: rgba(176,30,30,.08); }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__photo-remove:active { background: rgba(176,30,30,.14); }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__photo-remove i { font-size: 11px; }

/* Camera badge — sits in the bottom-right, OUTSIDE the picture circle's
   clip box, so it's never cropped. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__avatar-edit {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(20,18,12,.30);
    border: 3px solid #fff;
    z-index: 2;
    pointer-events: none; /* clicks bubble to the parent .pn_prf__avatar */
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__name {
    font-size: 17px;
    font-weight: 700;
    color: #2a2515;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__role {
    font-size: 11px;
    font-weight: 700;
    color: #8a6c2a;
    letter-spacing: 1.6px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    position: relative;
    z-index: 1;
}

/* ---- DETAIL CARDS ------------------------------------------------------- */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__card {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(138,108,42,.06);
    margin-bottom: 14px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(192,167,109,.28);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__card-head i:first-child {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Detail row — label/value layout. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(192,167,109,.10);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row:last-child { border-bottom: 0; }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row-label {
    font-size: 12px;
    font-weight: 600;
    color: #6a5f4a;
    display: inline-flex;
    align-items: center;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row-label i {
    color: #8a6c2a;
    width: 18px;
    text-align: center;
    font-size: 12px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row-val {
    font-size: 13px;
    color: #2a2515;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row-sub {
    font-size: 11px;
    color: #8a6c2a;
    margin-top: 2px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row-label--danger {
    color: #8b1414;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row-label--danger i { color: #8b1414; }

/* Action rows — clickable (toggle, sign out). */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--action {
    cursor: pointer;
    transition: background .15s, transform .15s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--action:hover  { background: rgba(192,167,109,.05); }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--action:active { transform: scale(.99); }

:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__chev {
    color: #c0a76d;
    font-size: 13px;
}

/* Notification Setup badge — small pill on the right of the row that
   shows current state at a glance. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__setup-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    border: 1px solid rgba(192,167,109,.28);
    white-space: nowrap;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__setup-badge--ok {
    background: linear-gradient(135deg, #19a05a, #14753d);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(20,140,80,.25);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__setup-badge--warn {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(138,108,42,.25);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__setup-badge--bad {
    background: rgba(176,30,30,.10);
    color: #8b1414;
    border-color: rgba(176,30,30,.28);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__setup-badge--off {
    background: rgba(180,180,180,.18);
    color: #6a5f4a;
    border-color: rgba(180,180,180,.30);
}

/* iOS-style toggle pill for the login-SMS preference. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    background: rgba(180,180,180,.20);
    color: #6a5f4a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background .2s, color .2s;
    flex-shrink: 0;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__toggle-knob {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: transform .2s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__toggle-label {
    padding-right: 6px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__toggle--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    flex-direction: row-reverse;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__toggle--on .pn_prf__toggle-label { padding-right: 0; padding-left: 6px; }

/* Language segmented control on the Profile page (pn_p19, pn_profile_lang
   handler). Two side-by-side EN/AR buttons; the active one wears the gold
   gradient. Tapping the OTHER fires the server handler which updates the
   kusers_lang column + cookies + reloads. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__lang-seg {
    flex: 0 0 auto;
    display: inline-flex;
    border-radius: 999px;
    background: rgba(192,167,109,.12);
    padding: 3px;
    gap: 2px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__lang-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #6b5a2c;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__lang-btn:hover { color: #2a2515; }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__lang-btn--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 2px 6px rgba(138,108,42,.25);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__lang-btn--on:hover { color: #fff; }

/* Inline dropdown on the right side of a profile row. Used by PIN re-prompt
   and OTP re-prompt selectors. Matches the cream tone of .pn_prf__lang-btn
   so it blends with the existing rows without introducing a new chrome. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__inline-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(192, 167, 109, .12);
    color: #4a3f1f;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .03em;
    padding: 6px 28px 6px 12px;
    border: 1px solid rgba(138, 108, 42, .25);
    border-radius: 999px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b5a2c' d='M5 6 0 0h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: background-color .15s, border-color .15s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__inline-select:hover {
    background-color: rgba(192, 167, 109, .22);
    border-color: rgba(138, 108, 42, .4);
}


/* -------------------------------------------------------------------------
   Profile → Biometric Login (Phase 2 — passkey device management)
   -------------------------------------------------------------------------
   Now rendered as its OWN .pn_prf__card with the standard card-head pattern
   (uppercase title + leading icon). Only special touch: a count badge in the
   header showing "2 devices connected" or "Not set up".
     - List of registered device rows, each with Remove button
     - "Enable on this device" pill (hidden when current device already has
       a passkey — JS toggles via kws_pk_profile_refresh_add_button)
     - "Remove all devices" red-ghost row (only when >1 device)
   ------------------------------------------------------------------------- */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_card_v2 .pn_prf__card-head {
    /* Allow the count badge to push to the right while keeping the head
       on one row. The base .pn_prf__card-head is already flex/align-center. */
    justify-content: flex-start;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_count_badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .2px;
    color: #6e624a;
    background: rgba(192,167,109,.14);
    border: 1px solid rgba(192,167,109,.24);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 10px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 10px;
    padding: 10px 10px 10px 12px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row-body { flex: 1 1 auto; min-width: 0; }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row-label {
    font-size: 13px;
    font-weight: 600;
    color: #2a2515;
    line-height: 1.25;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row-sub {
    font-size: 11.5px;
    color: #8b7e5a;
    margin-top: 1px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row-remove {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(176,30,30,.30);
    background: #fff;
    color: #8b1414;
    width: 34px; height: 34px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .15s, color .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row-remove:hover  { background: rgba(176,30,30,.06); }
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_row-remove:active { transform: scale(.94); }

:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_add {
    appearance: none;
    -webkit-appearance: none;
    border: 1px dashed rgba(192,167,109,.55);
    background: rgba(192,167,109,.06);
    color: #6b5a2c;
    width: 100%;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, color .15s, border-color .15s;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_add:hover  {
    background: rgba(192,167,109,.12);
    color: #2a2515;
    border-color: rgba(192,167,109,.75);
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_remove_all {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #8b1414;
    width: 100%;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 8px;
    cursor: pointer;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_remove_all:hover { background: rgba(176,30,30,.06); }

/* Info note rendered in place of the "Enable on this device" button when
   the user already has at least one passkey. Subtle gold-tinted strip with
   an info icon — purely advisory, NOT tappable. Tells the user how to add
   another device (sign in from it). */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(192,167,109,.08);
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: Inter, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6e624a;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_note i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #a98842;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__pk_note b { color: #2a2515; }


/* =========================================================================
   7.7 SECTION: Under Construction page  (#kws_uc_page)
   ---------------------------------------------------------------------------
   Built dynamically by kws_show_uc(title, icon) in apps.js whenever the
   user taps a stub tile (Reports, HR, Corp Contacts, Social, Suggestions,
   Loyalty). Same chrome (header strip + scroll surface) as other pages.
   ========================================================================= */
#kws_uc_page {
    background: #fbf8f1;
    overflow: hidden !important;
}
#kws_uc_page .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;     /* matches unified header */
    padding: 14px 16px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
#kws_uc_page .hp_holder {
    /* Layout handled by the global .hp_holder rule. Flat cream to match
       the rest of the top chrome (body + hamburger + close button). */
    color: #2a2515;
    background: #fbfaf6;
    border-bottom: 0;
    box-shadow: none;
    font-size: 14px; letter-spacing: 1.6px;
    z-index: 5;
}

/* Centred card with the construction sign + back button. */
#kws_uc_page .kws_uc {
    background: linear-gradient(180deg, #fffaee 0%, #fff 100%);
    border: 1px dashed rgba(192,167,109,.45);
    border-radius: 18px;
    padding: 36px 22px 26px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(138,108,42,.08);
    margin: 32px auto 0;
    max-width: 420px;
}
#kws_uc_page .kws_uc__icon {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: rgba(192,167,109,.16);
    color: #c0a76d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 4px 14px rgba(138,108,42,.18);
}
#kws_uc_page .kws_uc__sign {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(138,108,42,.22);
}
#kws_uc_page .kws_uc__title {
    font-size: 18px;
    font-weight: 700;
    color: #2a2515;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
#kws_uc_page .kws_uc__text {
    font-size: 13px;
    color: #5a5040;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
#kws_uc_page .kws_uc__btn {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 11px 20px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(138,108,42,.22);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter .15s, transform .15s, box-shadow .2s;
}
#kws_uc_page .kws_uc__btn:hover  { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(138,108,42,.30); }
#kws_uc_page .kws_uc__btn:active { transform: scale(.96); }




/* ####  ADOPTED  ##########################################################
 * Switched on. The portal's loader markup is already identical to what
 * these rules target - <div class="tt_loading" id="ttloading"> wrapping a
 * <div class="tt_loader"> - so this needed enabling, not rewriting. The two
 * legacy definitions in ttstyles.css and ttstylesmain.css stay where they
 * are; this file loads after both and overrides them.
 * ######################################################################### */
/* =========================================================================
   8. SECTION: Loading overlay  (#ttloading — .tt_loading / .tt_loader)
   ---------------------------------------------------------------------------
   Legacy markup (kept intact, just restyled):
       <div class="tt_loading" id="ttloading">
           <div class="tt_loader"></div>
       </div>
   The legacy CSS in ttstyles.css drew a chunky 120px black/grey ring with
   16px borders, positioned at 40% from the top. We override here to a
   clean brand-gold spinner over a frosted-blur full-screen backdrop. JS
   in apps.js still uses the simple `style.display = 'block' / 'none'`
   toggle (show_loading / hide_loading) — no JS change needed.
   ========================================================================= */

/* Backdrop — fixed full-viewport, soft warm tint + frosted blur. The
   inline `display: block` set by JS keeps the layer visible; we use
   absolute positioning on the spinner inside to center it, since flex
   centering would conflict with the inline display value. */
#ttloading.tt_loading {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9998;
    background: rgba(40, 30, 10, .20);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    pointer-events: none;     /* don't block other interactions */
}

/* Spinner — slim 3px gold ring, single visible arc on top, soft halo
   ring underneath for depth. Centered via translate. */
#ttloading .tt_loader {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    /* Faint full ring so the spinner reads as a complete circle… */
    border: 3px solid rgba(192, 167, 109, .22) !important;
    /* …and a brighter top arc that's the "moving" segment. */
    border-top-color: #c0a76d !important;
    border-right-color: rgba(192, 167, 109, .22) !important;
    border-bottom-color: rgba(192, 167, 109, .22) !important;
    border-left-color: rgba(192, 167, 109, .22) !important;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 8px 20px rgba(120, 90, 30, .15);
    /* GPU-only animation. */
    animation: tt_loader_spin .9s linear infinite !important;
    -webkit-animation: tt_loader_spin .9s linear infinite !important;
}

/* Soft inner glow dot in the middle of the spinner — adds depth and
   makes the rotation feel anchored. Pseudo-element so no markup change. */
#ttloading .tt_loader::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 167, 109, .10), transparent 70%);
    pointer-events: none;
}

@keyframes tt_loader_spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@-webkit-keyframes tt_loader_spin {
    to { -webkit-transform: translate(-50%, -50%) rotate(360deg); }
}

/* Honour reduced-motion preference — drop to a steady ring (no spin). */
@media (prefers-reduced-motion: reduce) {
    #ttloading .tt_loader { animation: none !important; }
}




/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
@media (min-width: 100000px) {
/* =========================================================================
   11. SECTION: Notifications feed  (#pn_notifs — kprocess_22.php)
   ---------------------------------------------------------------------------
   The Alerts tab opens this. Reads from kuser_notif (populated by
   kws_notif_create() server-side). Unread rows have a gold left border
   + tiny dot; severity tints the icon disc (info/gold, warn/amber,
   critical/red). Tapping a row marks it read AND deep-links into the
   matching page via the kws_navigate action.
   ========================================================================= */
#pn_notifs {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
#pn_notifs .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 12px 14px 96px !important;     /* clears bottom-tab */
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_notifs__hdr-btn {
    position: absolute;
    top: 50%;
    right: 64px;                /* clear of the global × close button */
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #8a7d5f;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_notifs__hdr-btn:hover  { background: rgba(192,167,109,.15); color: #c0a76d; }
.pn_notifs__hdr-btn:active { transform: translateY(-50%) scale(.92); }

.pn_notifs__list { display: flex; flex-direction: column; gap: 8px; }
.pn_notifs__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 12px 14px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_notifs__item:hover  { border-color: rgba(192,167,109,.45); box-shadow: 0 4px 10px rgba(60,40,0,.08); }
.pn_notifs__item:active { transform: scale(.99); }
.pn_notifs__item--unread {
    border-left: 4px solid #c0a76d;
    padding-left: 11px;        /* compensate for thicker border */
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
}
/* Severity-tinted icon disc. */
.pn_notifs__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(192,167,109,.18);
    color: #a88f57;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.25);
}
.pn_notifs__item--info     .pn_notifs__icon { background: rgba(192,167,109,.18); color: #a88f57; }
.pn_notifs__item--warn     .pn_notifs__icon { background: rgba(214,153,30,.18);   color: #b67b00; }
.pn_notifs__item--critical .pn_notifs__icon { background: rgba(176,30,30,.14);    color: #b62a2a; }

.pn_notifs__body { flex: 1 1 auto; min-width: 0; }
.pn_notifs__row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.pn_notifs__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1c2748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn_notifs__when {
    flex: 0 0 auto;
    font-size: 11px;
    color: #8a7d5f;
}
.pn_notifs__text {
    font-size: 12px;
    color: #5a5040;
    line-height: 1.45;
    margin-top: 2px;
    /* Allow up to 2 lines for the body. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Small unread dot anchored top-right of the row. */
.pn_notifs__dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8332a, #800000);
    box-shadow: 0 0 0 2px #fff;
}

/* Empty state. */
.pn_notifs__empty {
    text-align: center;
    padding: 48px 24px;
    color: #6e624a;
}
.pn_notifs__empty-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: rgba(192,167,109,.16);
    color: #c0a76d;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.pn_notifs__empty-title { font-size: 15px; font-weight: 700; color: #1c2748; margin-bottom: 4px; }
.pn_notifs__empty-sub   { font-size: 12.5px; line-height: 1.5; }


}
/* ####  end NOT ADOPTED  ################################################## */


/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
@media (min-width: 100000px) {
/* =========================================================================
   12. SECTION: Admin — Messaging access  (#pn_msg_perm — kprocess_24.php)
   ---------------------------------------------------------------------------
   Admin-only page (gated by kws_user_is_admin server-side). Lists every
   active user grouped by branch, with a toggle that flips their
   kuser_msg_perm.allow_msg flag. Toggle UPSERT happens server-side; the
   row's button gets rep_html'd back so the page never reloads.
   ========================================================================= */
#pn_msg_perm {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
#pn_msg_perm .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 14px 14px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_admp__notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
    border: 1px dashed rgba(192,167,109,.45);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #4a3b1a;
    line-height: 1.45;
}
.pn_admp__notice i { color: #c0a76d; font-size: 14px; flex: 0 0 auto; }
.pn_admp__list { display: flex; flex-direction: column; gap: 6px; }
.pn_admp__group {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a7d5f;
    padding: 12px 4px 4px;
    /* Flex row so the per-branch "Grants" button sits on the right. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pn_admp__group-btn {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(138,108,42,.22);
    transition: transform .12s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.pn_admp__group-btn i { font-size: 9.5px; }
.pn_admp__group-btn:hover  { filter: brightness(1.06); }
.pn_admp__group-btn:active { transform: scale(.95); }
.pn_admp__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
}
.pn_admp__row-body { flex: 1 1 auto; min-width: 0; }
.pn_admp__row-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1c2748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn_admp__row-meta {
    font-size: 11px;
    color: #8a7d5f;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Toggle — same shape language as the existing Profile row toggles. */
.pn_admp__toggle {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 32px;
    height: 28px;
    border-radius: 999px;
    background: rgba(176,30,30,.10);
    color: #b62a2a;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.pn_admp__toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(60,40,0,.18);
    transition: left .18s ease, background .18s ease;
}
.pn_admp__toggle--on {
    background: rgba(111,140,102,.22);
    color: #466138;
    padding: 4px 32px 4px 6px;
}
.pn_admp__toggle--on .pn_admp__toggle-knob {
    left: calc(100% - 25px);
    background: linear-gradient(135deg, #6f8c66, #466138);
}
.pn_admp__toggle:active .pn_admp__toggle-knob { transform: scale(.92); }

.pn_admp__empty {
    text-align: center;
    padding: 56px 28px;
    color: #6e624a;
}
.pn_admp__empty-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: rgba(192,167,109,.16);
    color: #c0a76d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.pn_admp__empty-title { font-size: 14px; font-weight: 700; color: #1c2748; }

/* ---- Per-user grants — small "user-plus" button on each row -------- */
.pn_admp__grants-btn {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(192,167,109,.16);
    color: #c0a76d;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-right: 8px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_admp__grants-btn:hover  { background: rgba(192,167,109,.28); color: #a88f57; }
.pn_admp__grants-btn:active { transform: scale(.92); }

/* Branch-grant variant — navy tint to visually distinguish from the
   gold per-user grant button. Sits at the LEFT of the toggle, with the
   per-user button to its right, so the order of severity reads:
   "block whole branches" → "block specific people" → "allow / block". */
.pn_admp__grants-btn--branch {
    background: rgba(28,39,72,.10);
    color: #2c3a66;
}
.pn_admp__grants-btn--branch:hover  { background: rgba(28,39,72,.18); color: #1c2748; }

/* Branch row inside the sheet — small icon block on the left so a
   branch row reads differently from the per-user grant rows that share
   the same wrapper class. */
.pn_admp__grant-row--branch .pn_admp__grant-icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(28,39,72,.12);
    color: #2c3a66;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-right: 4px;
}

/* ---- Slide-up sheet — multi-select grants ------------------------- */
.pn_admp__sheet {
    position: fixed;          /* fixed so we sit above the bottom-tab bar */
    inset: 0;
    z-index: 200;             /* > .kws_btab (100) + the per-page chrome */
    pointer-events: none;
}
.pn_admp__sheet[aria-hidden="false"] { pointer-events: auto; }
.pn_admp__sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,18,12,0);
    transition: background .25s ease;
}
.pn_admp__sheet--open .pn_admp__sheet-backdrop {
    background: rgba(20,18,12,.45);
}
.pn_admp__sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 84%;
    background: linear-gradient(180deg, #fff 0%, #fbf6ec 100%);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -16px 40px rgba(20,18,12,.30);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .9, .3, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.pn_admp__sheet--open .pn_admp__sheet-panel { transform: translateY(0); }
.pn_admp__sheet-handle {
    width: 42px; height: 4px;
    border-radius: 2px;
    background: rgba(192,167,109,.45);
    margin: 8px auto 4px;
    flex: 0 0 auto;
}
.pn_admp__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 6px;
    color: #1c2748;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    flex: 0 0 auto;
}
.pn_admp__sheet-head > span > i { color: #c0a76d; }
.pn_admp__sheet-close {
    background: transparent; border: 0; cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #8a7d5f;
    display: inline-flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.pn_admp__sheet-close:hover { background: rgba(192,167,109,.15); color: #c0a76d; }
.pn_admp__sheet-search {
    display: flex; align-items: center; gap: 8px;
    margin: 0 16px 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 12px;
    color: #8a7d5f;
}
.pn_admp__sheet-search i { font-size: 12px; }
.pn_admp__sheet-search input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: #2a2515;
    padding: 4px 0;
}
.pn_admp__sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 12px 8px;
    /* Hidden scrollbar for the cleaner aesthetic. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pn_admp__sheet-body::-webkit-scrollbar { display: none; }
.pn_admp__sheet-empty {
    padding: 28px 16px;
    text-align: center;
    color: #6e624a;
    font-size: 13px;
}
.pn_admp__sheet-group {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #8a7d5f;
    padding: 12px 4px 4px;
}
.pn_admp__grant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pn_admp__grant-body { flex: 1 1 auto; min-width: 0; }
.pn_admp__grant-name {
    font-size: 13.5px; font-weight: 600; color: #1c2748;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn_admp__grant-meta { font-size: 11.5px; color: #8a7d5f; margin-top: 2px; }
.pn_admp__grant-check {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    accent-color: #c0a76d;
    cursor: pointer;
}
.pn_admp__sheet-savebtn {
    flex: 0 0 auto;
    margin: 12px 16px 18px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    /* Outer gold glow + subtle inset ring make the button impossible to
       miss at the bottom of a tall multi-select sheet. */
    box-shadow:
        0 8px 22px rgba(138,108,42,.35),
        0 0 0 1px rgba(255,255,255,.18) inset;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
    /* Sticky at the bottom of the panel even if the body scrolls — the
       parent flexbox already pins it, this just adds a soft top fade so
       there's no harsh cut-off line above the button. */
    position: relative;
    z-index: 2;
}
.pn_admp__sheet-savebtn::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -16px;
    height: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fbf6ec 100%);
    pointer-events: none;
}
.pn_admp__sheet-savebtn:hover  { filter: brightness(1.05); box-shadow: 0 10px 28px rgba(138,108,42,.42), 0 0 0 1px rgba(255,255,255,.22) inset; }
.pn_admp__sheet-savebtn:active { transform: scale(.98); }
.pn_admp__sheet-savebtn i { font-size: 13px; }


}
/* ####  end NOT ADOPTED  ################################################## */


/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
@media (min-width: 100000px) {
/* =========================================================================
   13. SECTION: Rotate-to-portrait overlay  (#kws_rotate)
   ---------------------------------------------------------------------------
   The phone-frame layout doesn't adapt to landscape on small screens (the
   bottom-tab + dashboard + tile grid all expect a tall viewport). Rather
   than half-render and confuse the user, we cover the app with a polite
   "rotate your device" overlay whenever a small screen is held in
   landscape. Only fires on actual mobile devices — desktops in landscape
   are excluded by the max-width clause.
   ========================================================================= */
.kws_rotate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;     /* above every other modal / banner */
    /* Brand gold gradient — matches the PWA manifest theme_color
       (#c0a76d) and the bottom-tab raised home button so the prompt
       reads as part of the same product, not a system error screen. */
    background: linear-gradient(135deg, #fff5dd 0%, #e9d094 45%, #c0a76d 100%);
    color: #1c2748;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 24px 32px;
    -webkit-tap-highlight-color: transparent;
}
.kws_rotate__icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    /* Navy disc on gold bg — inverse of the home tile icons so the
       prompt has a focal point that pops against the gold field. */
    background: linear-gradient(135deg, #1c2748, #2c3a66);
    color: #fff5dd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(28,39,72,.32),
                inset 0 0 0 4px rgba(255,255,255,.20);
    /* Gentle "rotate" hint animation — tilts the phone icon back and
       forth so the message is unmistakable. */
    animation: kws_rotate_wiggle 2.4s ease-in-out infinite;
}
@keyframes kws_rotate_wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-90deg); }
    50%      { transform: rotate(0deg); }
    75%      { transform: rotate(0deg); }
}
.kws_rotate__title {
    font-size: 17px;
    font-weight: 700;
    color: #1c2748;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.kws_rotate__sub {
    font-size: 13.5px;
    color: rgba(28,39,72,.72);
    line-height: 1.55;
    max-width: 320px;
}

/* Activation: any landscape viewport whose height is too short to show
   the portrait phone-frame comfortably. We previously limited this to
   max-width 900px to avoid firing on tablets/desktops, but a desktop
   window resized to a short-height landscape (or a phone held sideways)
   both end up with the same problem — the phone-frame collapses and the
   user just sees an empty cream rectangle. Triggering on height alone
   covers both cases.
     - phone landscape:    height 380-420px → overlay fires.
     - tablet portrait:    height ~1024px   → no overlay.
     - tablet landscape:   height ~768px    → no overlay (still tall enough).
     - desktop full screen: height 800+px   → no overlay.
     - desktop short window: height < 700px landscape → overlay fires (rare). */
@media screen and (orientation: landscape) and (max-height: 700px) {
    .kws_rotate { display: flex; }
    /* Hide the rest of the app under the overlay so partial layout
       glitches stay invisible while the user rotates. */
    .tt_body, .kws_btab, .msg_v2, .kws_pwd, .kws_announce, .tsk_confirm,
    .kws_nbanner, .pn_ai__sheet, #ttloading {
        visibility: hidden !important;
    }
}


}
/* ####  end NOT ADOPTED  ################################################## */


/* ####  ADOPTED  ##########################################################
 * Switched on with Kate AI (pages/kprocess_852.php). Every rule is scoped
 * under #pn_ai or a .pn_ai__ class that only that page emits, so nothing
 * else in the portal can be affected. The staff section is taken as-is; the
 * few portal-specific adjustments (this header has a refresh cell, no
 * hamburger, and pages end at the bottom bar) sit together at the END of the
 * section under "TENANT-SPECIFIC", so a later diff against the staff file
 * still lines up.
 * ######################################################################### */
/* =========================================================================
   9. SECTION: Kate AI chat  (#pn_ai)
   ---------------------------------------------------------------------------
   Server (kprocess_20.php) renders a #pn_ai_stream message list + a fixed
   #pn_ai_composer textarea at the bottom. Client-side helpers in apps.js
   (kws_ai_send, kws_ai_input_grow) drive it. Bubbles are .pn_ai__bubble
   with --me / --bot variants for user vs assistant turns; the typing
   indicator is just a third bot bubble with .pn_ai__typing.
   ========================================================================= */
#pn_ai {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}

/* ---- Kate AI header chrome ---------------------------------------------
   Layout: hamburger (#tth_menu) at far-left ~10px, title left-aligned just
   to the right of it, three icon buttons stacked on the right, close (×)
   at far-right. Left-aligning the title (rather than centering) frees up
   the right half for the action buttons so they can never collide with
   the title text on narrow phones.

   Visual order, left → right:
     [ ☰ ]  KATE AI  ............  [ + ]  [ ⏱ ]  [ ⋮ ]  [ × ]
*/
#pn_ai .hp_holder {
    position: absolute;            /* anchor for header buttons + popover */
    overflow: visible;             /* let the popover bleed out */
    text-align: left !important;   /* override the default centred header */
    display: block !important;     /* opt out of any flex/inline rules */
    padding: 0 !important;
}
.pn_ai__hdr-title {
    position: absolute;
    top: 50%;
    /* Clear the global hamburger (~56px) on the left, and the three AI
       header buttons + close × on the right. */
    left: 60px;
    right: 152px;
    transform: translateY(-50%);
    text-align: left;
    font-size: 14px;
    font-weight: 700 !important;
    letter-spacing: 1.4px;
    color: #4a3b1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Only the visible text counts for clicks — let the bar still tap-
       through to whatever the real chrome below it captures. */
    pointer-events: none;
}
.pn_ai__hdr-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #8a7d5f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__hdr-btn:hover  { background: rgba(192,167,109,.15); color: #c0a76d; }
.pn_ai__hdr-btn:active { transform: translateY(-50%) scale(.92); }

/* Right-stacked buttons. Global × sits at ~10px right (#tth_cbtnid).
   We march our buttons left from there at 36px increments — tight but
   tap-friendly (34px hit-area each). */
.pn_ai__hdr-btn--more { right: 50px;  color: #8a7d5f; }
.pn_ai__hdr-btn--hist { right: 86px; }
.pn_ai__hdr-btn--new  { right: 122px; color: #c0a76d; }
.pn_ai__hdr-btn--new:hover { background: rgba(192,167,109,.20); color: #a88f57; }

/* ---- "More" popover (kebab) -------------------------------------------- */
.pn_ai__more {
    position: absolute;
    top: 48px;
    right: 44px;
    min-width: 180px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.25);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(20,18,12,.18);
    padding: 6px;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}
.pn_ai__more[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.pn_ai__more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 9px 12px;
    border-radius: 8px;
    color: #2a2515;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__more-item i { width: 16px; text-align: center; color: #8a7d5f; }
.pn_ai__more-item:hover { background: rgba(192,167,109,.12); }
.pn_ai__more-item--danger,
.pn_ai__more-item--danger i { color: #b62a2a; }
.pn_ai__more-item--danger:hover { background: rgba(176,30,30,.08); }

/* ---- History bottom sheet --------------------------------------------- */
.pn_ai__sheet {
    position: absolute;        /* relative to .tt_page #pn_ai */
    inset: 0;
    z-index: 40;
    pointer-events: none;
}
.pn_ai__sheet[aria-hidden="false"] { pointer-events: auto; }
.pn_ai__sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,18,12,0);
    transition: background .25s ease;
}
.pn_ai__sheet--open .pn_ai__sheet-backdrop {
    background: rgba(20,18,12,.45);
}
.pn_ai__sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 78%;
    background: linear-gradient(180deg, #fff 0%, #fbf6ec 100%);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -16px 40px rgba(20,18,12,.30);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .9, .3, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.pn_ai__sheet--open .pn_ai__sheet-panel {
    transform: translateY(0);
}
.pn_ai__sheet-handle {
    width: 42px; height: 4px;
    border-radius: 2px;
    background: rgba(192,167,109,.45);
    margin: 8px auto 4px;
    flex: 0 0 auto;
}
.pn_ai__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 6px;
    color: #1c2748;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.pn_ai__sheet-close {
    background: transparent; border: 0; cursor: pointer;
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #8a7d5f;
    display: inline-flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__sheet-close:hover { background: rgba(192,167,109,.15); color: #c0a76d; }
.pn_ai__sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 12px 8px;
    /* scrollbar visibility handled in the shared "hide scrollbars" block
       — kept here as overflow:auto only. */
}
.pn_ai__sheet-empty {
    padding: 28px 16px;
    text-align: center;
    color: #6e624a;
    font-size: 13px;
}
.pn_ai__sheet-newbtn {
    flex: 0 0 auto;
    margin: 8px 16px 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(138,108,42,.25);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__sheet-newbtn:active { transform: scale(.98); }

/* Session row inside the sheet body. The active session gets a gold left
   border accent so it stands out without needing extra labels — we still
   keep an "Active" badge for accessibility. */
.pn_ai__sess {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__sess:hover {
    border-color: rgba(192,167,109,.45);
    box-shadow: 0 4px 12px rgba(60,40,0,.06);
}
.pn_ai__sess:active { transform: scale(.99); }
.pn_ai__sess--active {
    border-left: 4px solid #c0a76d;
    padding-left: 9px;          /* compensate for the thicker border */
    background: linear-gradient(135deg, #fffaee, #fff);
    cursor: default;
}
.pn_ai__sess-icon {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(192,167,109,.16);
    color: #c0a76d;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.pn_ai__sess--active .pn_ai__sess-icon {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
}
.pn_ai__sess-body { flex: 1 1 auto; min-width: 0; }
.pn_ai__sess-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1c2748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn_ai__sess-meta {
    font-size: 11px;
    color: #8a7d5f;
    margin-top: 2px;
}
.pn_ai__sess-badge {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 999px;
}
.pn_ai__sess-del {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #b62a2a;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__sess-del:hover { background: rgba(176,30,30,.10); }
#pn_ai .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;     /* matches unified header */
    /* Padding zero — composer + stream manage their own spacing. The
       .bd_container global adds bottom padding when the bottom-tab bar
       is visible; we override here because the composer sits inside
       .bd_container and already accounts for the bar. */
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---------- Stream (scrollable message list) ---------------------------- */
#pn_ai_stream {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* scrollbar visibility handled in the shared "hide scrollbars" block
       further down — keeps the rule in one place. */
}

/* Empty-state intro card. */
.pn_ai__intro {
    text-align: center;
    padding: 28px 18px;
    margin: 24px auto 12px;
    max-width: 320px;
    color: #5a5040;
}
.pn_ai__intro-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 16px rgba(138,108,42,.30);
}
.pn_ai__intro-title { font-size: 18px; font-weight: 700; color: #1c2748; margin-bottom: 6px; letter-spacing: 0.4px; }
.pn_ai__intro-sub   { font-size: 13px; line-height: 1.55; color: #6e624a; }

/* Suggestion chips below the greeting. Two-column grid on phones. Tap
   sends the chip's data-msg through kws_ai_suggest -> kws_ai_send. */
.pn_ai__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}
.pn_ai__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 14px;
    padding: 10px 12px;
    text-align: left;
    color: #2a2515;
    font-size: 12.5px;
    line-height: 1.35;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pn_ai__chip:hover {
    border-color: #c0a76d;
    box-shadow: 0 4px 12px rgba(138,108,42,.18);
}
.pn_ai__chip:active { transform: scale(.97); }
.pn_ai__chip i {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.pn_ai__chip span {
    flex: 1 1 auto;
    overflow: hidden;
}

@media (max-width: 360px) {
    .pn_ai__chips { grid-template-columns: 1fr; }
}

/* ---------- Bubbles ----------------------------------------------------- */
.pn_ai__bubble {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 86%;
    animation: kwsAiPop .18s ease-out;
}
@keyframes kwsAiPop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pn_ai__bubble-body {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.pn_ai__bubble--me {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.pn_ai__bubble--me .pn_ai__bubble-body {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(138,108,42,.22);
}
.pn_ai__bubble--bot {
    align-self: flex-start;
}
.pn_ai__bubble--bot .pn_ai__bubble-body {
    background: #fff;
    color: #2a2515;
    border: 1px solid rgba(192,167,109,.22);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 6px rgba(60,40,0,.05);
}

/* Avatar disc next to assistant bubbles. */
.pn_ai__avatar {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 2px;
}
.pn_ai__avatar--bot {
    background: linear-gradient(135deg, #1c2748, #2c3a66);
    color: #c0a76d;
    box-shadow: 0 2px 6px rgba(20,18,12,.20);
}

/* Typing indicator — three pulsing dots inside a bot bubble. */
.pn_ai__dots {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 0;
}
.pn_ai__dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #c0a76d;
    display: inline-block;
    animation: kwsAiDot 1.1s infinite ease-in-out;
}
.pn_ai__dots i:nth-child(2) { animation-delay: .15s; }
.pn_ai__dots i:nth-child(3) { animation-delay: .30s; }
@keyframes kwsAiDot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- Composer ---------------------------------------------------- */
.pn_ai__composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    /* Account for the fixed bottom-tab bar (~64px + safe area). The
       composer scrolls with .bd_container's flex layout, so we just
       pad the bottom equal to bar height. */
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fbf8f1 22%, #fbf8f1 100%);
    border-top: 1px solid rgba(192,167,109,.18);
    box-shadow: 0 -4px 14px rgba(60,40,0,.04);
}
.pn_ai__input {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 140px;
    /* Hard-kill the textarea's bottom-right resize handle. resize:none
       alone isn't enough on some Chromium builds — the underlying
       appearance chrome still leaks a small grip square. Combined with
       appearance:none and explicit overflow rules below, the corner
       stays clean. */
    resize: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px;
    border: 1px solid rgba(192,167,109,.35);
    border-radius: 18px;
    background: #fff;
    color: #2a2515;
    font-size: 14px;
    line-height: 1.45;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
/* Hide every scrollbar inside the AI surface. Content still scrolls —
   the gutter just doesn't render, matching the cleaner aesthetic the
   chat is going for. Applies to the composer textarea, the message
   stream, and the history sheet body. */
.pn_ai__input,
#pn_ai_stream,
.pn_ai__sheet-body {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old IE / Edge */
}
.pn_ai__input::-webkit-scrollbar,
#pn_ai_stream::-webkit-scrollbar,
.pn_ai__sheet-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                  /* Chrome / Safari / Edge */
}
.pn_ai__input:focus {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
.pn_ai__input:disabled { opacity: .65; }

.pn_ai__send {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(138,108,42,.30);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.pn_ai__send:active { transform: scale(.94); }
.pn_ai__send:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 360px) {
    .pn_ai__bubble { max-width: 92%; }
    .pn_ai__bubble-body { font-size: 13.5px; padding: 8px 12px; }
    .pn_ai__input { font-size: 13.5px; }
}


/* ---------- TENANT-SPECIFIC (my.katepms.com) ----------------------------
   Header buttons. This portal's header carries a refresh cell (.r_rfbtn,
   right:56px, 40px wide) beside the 56px close cell, which the staff header
   does not - the staff offsets (50/86/122) would put "More" under the
   refresh button. Each button steps one cell further left, and the popover
   moves with its anchor. */
#pn_ai .pn_ai__hdr-btn--more { right: 100px; }
#pn_ai .pn_ai__hdr-btn--hist { right: 136px; }
#pn_ai .pn_ai__hdr-btn--new  { right: 172px; }
#pn_ai .pn_ai__more          { right: 94px; }

/* Title. No hamburger here, so it lines up with the 16px inset every other
   page title uses, and its right edge clears the three buttons above. */
#pn_ai .pn_ai__hdr-title { left: 16px; right: 212px; }

/* Accent bar. The portal draws it as a ::before on every .hp_holder; with
   this header's children absolutely positioned it would float alone at the
   top-left corner, so it moves onto the title text itself - same size and
   gradient as the shared rule further down, so the page matches the rest. */
#pn_ai .hp_holder::before { display: none; }
#pn_ai .pn_ai__hdr-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    margin-right: 10px;
    vertical-align: -2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c0a76d, #a98842);
}

/* Bottom bar. The portal ends every page box at the bar rather than running
   under it (see "body.kws-has-btab .tt_body .tt_page > .bd_container"), and
   the #pn_ai container rule above outranks that class rule, so it is restated
   here at id level. The composer then only needs its own breathing room, and
   the history sheet stops at the bar too, so the bar stays tappable with the
   sheet open. */
body.kws-has-btab #pn_ai .bd_container   { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
body.kws-has-btab #pn_ai .pn_ai__composer { padding-bottom: 12px; }
body.kws-has-btab #pn_ai .pn_ai__sheet    { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ####  end ADOPTED (Kate AI)  ############################################ */


/* ####  ADOPTED  ##########################################################
 * Switched on with the dashboard. Scoped to #kws_btab and .kws-has-btab, both
 * introduced by this change, so nothing that predates it can be affected.
 * ######################################################################### */
/* =========================================================================
   8. SECTION: Bottom navigation bar  (#kws_btab)
   ---------------------------------------------------------------------------
   Five-slot fixed bar with a raised center Home button. The four side
   slots show an icon + label; the center slot is a circular gold disc
   that overlaps the bar's top edge. The slot matching the current page
   gets a gold underline + filled icon colour (driven by
   [data-kws-active="1"] which apps.js sets from to_stage).

   Hidden by default; to_stage() flips aria-hidden to "false" on the
   first authenticated page and back to "true" on the login / OTP /
   forgot-password pages.

   Bottom safe-area inset matters on iOS PWA — without it the home
   indicator overlaps the bar. We add env(safe-area-inset-bottom) to
   the height + a body class so .bd_container in every page has enough
   bottom padding to avoid hiding the last item under the bar.
   ========================================================================= */
.kws_btab {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: linear-gradient(180deg, #fff 0%, #fbf6ec 100%);
    border-top: 1px solid rgba(192,167,109,.25);
    box-shadow: 0 -4px 14px rgba(60,40,0,.08);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
    align-items: stretch;
    justify-content: space-around;
}
.kws_btab[aria-hidden="false"] { display: flex; }

/* When the bar is visible, every scroll surface needs extra bottom
   padding so its last row isn't hidden behind the bar. We set this on
   <body> via a class so we don't have to touch every page's CSS. */
body.kws-has-btab .bd_container {
    padding-bottom: 88px !important;
}

.kws_btab__btn {
    flex: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #8a7d5f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-size: 18px;
    transition: color .15s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.kws_btab__btn .kws_btab__lbl {
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    /* Stop two-word labels (e.g. "Kate AI") from wrapping on narrow
       phones; the tab itself is wider than the longest label even at
       360px so a single-line is always achievable. */
    white-space: nowrap;
}
.kws_btab__btn[data-kws-active="1"] {
    color: #c0a76d;
}
/* Gold underline for the active slot — sits at the very top edge of
   the bar so it reads as a "selected tab" indicator. The center slot
   skips this since the raised disc is its own indicator. */
.kws_btab__btn[data-kws-active="1"]::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: #c0a76d;
}
.kws_btab__btn:active { transform: translateY(1px); }

/* Center Home button — bigger, raised, gold disc. */
.kws_btab__btn--center {
    flex: 0 0 86px;
}
.kws_btab__btn--center .kws_btab__center {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-top: -22px;
    box-shadow: 0 6px 18px rgba(138,108,42,.36), 0 0 0 4px #fff;
    transition: transform .15s ease, box-shadow .2s ease;
}
.kws_btab__btn--center:active .kws_btab__center {
    transform: scale(.93);
}
.kws_btab__btn--center::before { display: none; }
.kws_btab__btn--center[data-kws-active="1"] .kws_btab__center {
    box-shadow: 0 8px 22px rgba(138,108,42,.5), 0 0 0 4px #fff;
}

/* Notification-style red badge on Tasks. Hidden when count is 0 or
   the attribute is missing. JS updates data-kws-count via
   kws_btab_set_tasks_count(n). */
.kws_btab__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: #b62a2a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 9px;
    display: none;
    min-width: 16px;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 2px 4px rgba(176,30,30,.35);
}
.kws_btab__badge[data-kws-count]:not([data-kws-count="0"]):not([data-kws-count=""]) {
    display: inline-block;
}

/* Tighter sizing on small phones. */
@media (max-width: 360px) {
    .kws_btab { height: 60px; }
    .kws_btab__btn--center { flex: 0 0 78px; }
    .kws_btab__btn--center .kws_btab__center {
        width: 52px; height: 52px; margin-top: -18px; font-size: 20px;
    }
    .kws_btab__btn .kws_btab__lbl { font-size: 9.5px; }
}




/* ####  NOT ADOPTED YET  ###################################################
 * This section is held INERT. The tenant portal reuses several of the same
 * page ids as the staff app (#tthomein, #ttmenu, #ttloading), so linking this
 * stylesheet unchanged would restyle screens that have not been redesigned -
 * 102 rules land on #tthomein alone. The redesign is going screen by screen,
 * so each section stays switched off until its screen is actually rebuilt.
 *
 * The wrapper below is a media query no real viewport can satisfy, so nothing
 * inside it applies. It is kept rather than deleted so the staff app's version
 * is here to work from, and adopting a screen is a two-line change: delete the
 * @media wrapper and its closing brace.
 * ######################################################################### */
/* =========================================================================
   10. SECTION: Messages page  (#pn_messages — kprocess_21.php)
   ---------------------------------------------------------------------------
   Layout-only redesign of the Messages tab. Real messaging backend is
   still in development — this is a polished shell with mock thread data
   and a "still cooking" banner so users know what they're seeing.

   Pieces:
     .pn_msgs__notice  — top-of-page in-development banner
     .pn_msgs__search  — gold-accented search bar (disabled for now)
     .pn_msgs__list    — vertical thread cards
     .pn_msgs__thread  — single-thread row (avatar / name / preview / time)
     .pn_msgs__fab     — bottom-right "compose" floating button
   ========================================================================= */
#pn_msges {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
#pn_msges .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    /* 96px clears the bottom-tab bar; horizontal padding tightens the
       card list so threads breathe inside the scroll surface. */
    padding: 14px 14px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* "Under development" banner — soft gold tint, screwdriver icon. */
.pn_msgs__notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #fffaee 0%, #fff 100%);
    border: 1px dashed rgba(192,167,109,.55);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #4a3b1a;
}
.pn_msgs__notice-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(138,108,42,.25);
}
.pn_msgs__notice-body { flex: 1 1 auto; min-width: 0; }
.pn_msgs__notice-title { font-size: 13px; font-weight: 700; color: #1c2748; margin-bottom: 2px; }
.pn_msgs__notice-sub   { font-size: 11.5px; line-height: 1.4; color: #6e624a; }

/* Search bar — cosmetic preview; disabled prevents accidental tap focus. */
.pn_msgs__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 14px;
    padding: 8px 14px;
    margin-bottom: 14px;
    color: #8a7d5f;
}
.pn_msgs__search i { font-size: 12px; }
.pn_msgs__search-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: #2a2515;
    padding: 4px 0;
}
.pn_msgs__search-input::placeholder { color: #b3a780; }

/* Thread list. */
.pn_msgs__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pn_msgs__thread {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_msgs__thread:hover  { border-color: rgba(192,167,109,.45); box-shadow: 0 4px 12px rgba(60,40,0,.06); }
.pn_msgs__thread:active { transform: scale(.99); }

/* Initials avatar. Six accent colours so the inbox reads at a glance. */
.pn_msgs__avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(60,40,0,.10);
}
.pn_msgs__avatar--blue { background: linear-gradient(135deg, #3d5085, #1c2748); }
.pn_msgs__avatar--gold { background: linear-gradient(135deg, #c0a76d, #a88f57); }
.pn_msgs__avatar--rose { background: linear-gradient(135deg, #c25b6e, #8a3147); }
.pn_msgs__avatar--sage { background: linear-gradient(135deg, #6f8c66, #466138); }
.pn_msgs__avatar--navy { background: linear-gradient(135deg, #2c3a66, #16213e); }
.pn_msgs__avatar--plum { background: linear-gradient(135deg, #7a4a8b, #4d2a5e); }

/* ---- Messages empty state (no conversations yet) ---------------------
   Centered hero block matching the Notifications empty state — gold
   icon disc, friendly title + sub. Keeps the page from looking broken
   when a user has never messaged anyone. */
.pn_msgs__empty {
    text-align: center;
    padding: 56px 28px;
    color: #6e624a;
}
.pn_msgs__empty--inline { padding: 28px 16px; }
.pn_msgs__empty--inline .pn_msgs__empty-icon {
    /* Smaller disc for in-list "no results" so the search box stays
       the visual focus instead of a dramatic empty-state hero. */
    width: 52px; height: 52px;
    font-size: 19px;
    margin-bottom: 10px;
}
.pn_msgs__empty--inline .pn_msgs__empty-title { font-size: 14px; }
.pn_msgs__empty--inline .pn_msgs__empty-sub   { font-size: 12px; }
.pn_msgs__empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #c0a76d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.30),
        0 6px 16px rgba(120,90,30,.10);
}
.pn_msgs__empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #1c2748;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.pn_msgs__empty-sub {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 320px;
    margin: 0 auto;
}

/* ---- Skeleton thread cards (current default while messaging is in
   development) — soft cream-tinted grey blocks with a subtle shimmer
   sweep so the page reads as "loading" rather than "broken". The
   --w1 / --w2 custom properties on each row let us vary the line
   widths per card so the list doesn't look like a copy-paste of one
   shape. */
@keyframes pn_msgs_shimmer {
    0%   { background-position: -120% 0; }
    100% { background-position: 220% 0; }
}
/* ---- Real thread view (#pn_messages_details) -------------------------------
   Single-thread chat surface — hero (avatar + name) at top, scrolling
   stream of bubbles, fixed composer at bottom. Mirrors the AI chat
   layout but with sender-specific bubble alignment (mine right, theirs
   left) and sub-bubble timestamps. */
#pn_messages_details {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
#pn_messages_details .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pn_msg__hero {
    flex: 0 0 auto;
    text-align: center;
    padding: 16px 16px 8px;
    background: linear-gradient(180deg, rgba(192,167,109,.06), transparent);
}
.pn_msg__hero-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 14px rgba(60,40,0,.15);
}
.pn_msg__hero-avatar--blue { background: linear-gradient(135deg, #3d5085, #1c2748); }
.pn_msg__hero-avatar--gold { background: linear-gradient(135deg, #c0a76d, #a88f57); }
.pn_msg__hero-avatar--rose { background: linear-gradient(135deg, #c25b6e, #8a3147); }
.pn_msg__hero-avatar--sage { background: linear-gradient(135deg, #6f8c66, #466138); }
.pn_msg__hero-avatar--navy { background: linear-gradient(135deg, #2c3a66, #16213e); }
.pn_msg__hero-avatar--plum { background: linear-gradient(135deg, #7a4a8b, #4d2a5e); }
.pn_msg__hero-name { font-size: 16px; font-weight: 700; color: #1c2748; }
.pn_msg__hero-sub  { font-size: 12px; color: #8a7d5f; margin-top: 2px; }

.pn_msg__stream {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Hidden scrollbar to match the rest of the app's clean look. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pn_msg__stream::-webkit-scrollbar { display: none; }

.pn_msg__bubble {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    animation: pn_msg_pop .15s ease-out;
}
@keyframes pn_msg_pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pn_msg__bubble-body {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.pn_msg__bubble--me      { align-self: flex-end; }
.pn_msg__bubble--me .pn_msg__bubble-body {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(138,108,42,.20);
}
.pn_msg__bubble--them    { align-self: flex-start; }
.pn_msg__bubble--them .pn_msg__bubble-body {
    background: #fff;
    color: #2a2515;
    border: 1px solid rgba(192,167,109,.22);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
}
.pn_msg__bubble-time {
    font-size: 10.5px;
    color: #8a7d5f;
    margin: 2px 8px 0;
}
.pn_msg__bubble--me .pn_msg__bubble-time   { text-align: right; }
.pn_msg__bubble--them .pn_msg__bubble-time { text-align: left;  }
.pn_msg__bubble--pending .pn_msg__bubble-body { opacity: .7; }
.pn_msg__bubble--pending .pn_msg__bubble-time { color: #b3a780; font-style: italic; }

/* Delivery / read ticks on outgoing bubbles. WhatsApp-style:
     fa-check         (single, gray)  = sent / delivered to server
     fa-check-double  (double, gold)  = read by recipient */
.pn_msg__tick {
    margin-left: 6px;
    font-size: 10px;
    color: #b3a780;
    vertical-align: middle;
}
.pn_msg__tick--read {
    color: #c0a76d;
}

/* Online indicator on the thread hero avatar — small green dot bottom-right. */
.pn_msg__hero-avatar { position: relative; }
.pn_msg__online-dot {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6f8c66, #466138);
    border: 3px solid #fbf8f1;       /* matches page bg so the ring reads cleanly */
    box-shadow: 0 0 0 1px rgba(70,97,56,.3);
}

/* Presence label under the name — green tint when online. */
.pn_msg__presence {
    color: #8a7d5f;
}
.pn_msg__presence--online {
    color: #466138;
    font-weight: 600;
}

.pn_msg__empty {
    margin: auto;
    padding: 40px 24px;
    text-align: center;
    color: #8a7d5f;
}
.pn_msg__empty-text { font-size: 13.5px; }

/* Composer — pinned to bottom, accounts for the bottom-tab bar height. */
.pn_msg__composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fbf8f1 22%, #fbf8f1 100%);
    border-top: 1px solid rgba(192,167,109,.18);
}
.pn_msg__composer-input {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}
.pn_msg__input {
    flex: 1 1 auto;
    width: 100%;
    min-height: 40px;
    max-height: 140px;
    resize: none !important;
    appearance: none;
    -webkit-appearance: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 56px 10px 14px;
    border: 1px solid rgba(192,167,109,.35);
    border-radius: 18px;
    background: #fff;
    color: #2a2515;
    font-size: 14px;
    line-height: 1.45;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pn_msg__input::-webkit-scrollbar { display: none; }
.pn_msg__input:focus { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_msg__counter {
    position: absolute;
    right: 10px;
    bottom: 6px;
    pointer-events: none;
    font-size: 10.5px;
    line-height: 1;
    color: #b0a17f;
    background: rgba(255,255,255,.85);
    padding: 2px 6px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: color .15s, background .15s;
}
.pn_msg__counter--warn {
    color: #a37214;
    background: rgba(255,236,196,.95);
}
.pn_msg__counter--over {
    color: #fff;
    background: #c0392b;
    font-weight: 600;
}
.pn_msg__send {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(138,108,42,.30);
    transition: transform .15s, box-shadow .15s;
}
.pn_msg__send:active { transform: scale(.94); }

/* ---- User picker page (#pn_messages_send) ---------------------------------- */
#pn_messages_send {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
#pn_messages_send .bd_container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 14px 14px 96px !important;
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_msg__pickers { display: flex; flex-direction: column; gap: 6px; }
.pn_msg__pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,40,0,.04);
    transition: border-color .15s, box-shadow .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.pn_msg__pick:hover  { border-color: rgba(192,167,109,.45); box-shadow: 0 4px 10px rgba(60,40,0,.08); }
.pn_msg__pick:active { transform: scale(.99); }
.pn_msg__pick-body { flex: 1 1 auto; min-width: 0; }
.pn_msg__pick-name {
    font-size: 13.5px; font-weight: 600; color: #1c2748;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn_msg__pick-sub  { font-size: 11.5px; color: #8a7d5f; margin-top: 2px; }
.pn_msg__pick-chev { color: #c4b58a; font-size: 12px; flex: 0 0 auto; }

@media (max-width: 360px) {
    .pn_msg__bubble       { max-width: 86%; }
    .pn_msg__bubble-body  { font-size: 13.5px; padding: 8px 12px; }
    .pn_msg__hero-avatar  { width: 56px; height: 56px; font-size: 20px; }
    .pn_msg__hero-name    { font-size: 15px; }
}

/* ---- Messaging blocked state -----------------------------------------
   Replaces the live thread list / picker / thread view when the user
   has been blocked (admin) or has self-disabled messaging from Profile.
   Centered card, clear icon, polite copy, optional CTA. */
.pn_msg__blocked {
    text-align: center;
    padding: 56px 28px;
    color: #4a3b1a;
    max-width: 360px;
    margin: 0 auto;
}
.pn_msg__blocked-icon {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #c0a76d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.30),
        0 8px 22px rgba(120,90,30,.12);
}
.pn_msg__blocked-title {
    font-size: 17px;
    font-weight: 700;
    color: #1c2748;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.pn_msg__blocked-body {
    font-size: 13px;
    line-height: 1.6;
    color: #6e624a;
    margin-bottom: 22px;
}
.pn_msg__blocked-body b { color: #1c2748; }
.pn_msg__blocked-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border: 0;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(138,108,42,.30);
    transition: transform .12s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.pn_msg__blocked-cta:hover  { filter: brightness(1.06); }
.pn_msg__blocked-cta:active { transform: scale(.97); }


.pn_msgs__thread--skel { cursor: default; pointer-events: none; }
.pn_msgs__avatar--skel,
.pn_msgs__skel-line {
    background: linear-gradient(
        90deg,
        rgba(192,167,109,.14) 0%,
        rgba(192,167,109,.30) 50%,
        rgba(192,167,109,.14) 100%
    );
    background-size: 220% 100%;
    border-radius: 6px;
    animation: pn_msgs_shimmer 1.6s linear infinite;
}
.pn_msgs__avatar--skel {
    border-radius: 50%;
    box-shadow: none;
}
.pn_msgs__skel-line { display: inline-block; height: 10px; }
.pn_msgs__skel-line--name { width: var(--w1, 60%); height: 12px; border-radius: 4px; }
.pn_msgs__skel-line--when { width: 28px;  height: 9px;  border-radius: 4px; }
.pn_msgs__skel-line--last { width: var(--w2, 85%); height: 10px; border-radius: 4px; margin-top: 2px; }

.pn_msgs__body { flex: 1 1 auto; min-width: 0; }
.pn_msgs__row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.pn_msgs__name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1c2748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn_msgs__when {
    flex: 0 0 auto;
    font-size: 11px;
    color: #8a7d5f;
}
.pn_msgs__row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.pn_msgs__last {
    font-size: 12px;
    color: #5a5040;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.pn_msgs__unread {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #c8332a 0%, #800000 100%);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(176,30,30,.30);
}

/* Floating compose button — bottom-right above the bottom-tab bar. */
.pn_msgs__fab {
    position: absolute;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 22px rgba(138,108,42,.35);
    transition: transform .15s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 50;
}
.pn_msgs__fab:hover  { box-shadow: 0 10px 26px rgba(138,108,42,.42); }
.pn_msgs__fab:active { transform: scale(.94); }

/* The hold resumes here. Section 10 (Messages) above has been adopted - its
   wrapper was moved down rather than deleted, so every section below stays
   inert exactly as it was. */
@media (min-width: 100000px) {
/* =============================================================================
 * 12. SECTION: Activity Log  (#pn_activity_log — kprocess_25.php, admin only)
 * ============================================================================= */
#pn_activity_log {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
.pn_alog__container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 12px 12px calc(82px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_alog__filters,
.pn_elog__filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.pn_alog__q,
.pn_elog__q {
    flex: 1 1 100%;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(192,167,109,.35);
    border-radius: 18px;
    background: #fff;
    color: #2a2515;
    font-size: 13.5px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pn_alog__q:focus,
.pn_elog__q:focus { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_alog__sel,
.pn_elog__sel {
    flex: 1 1 30%;
    min-width: 110px;
    padding: 7px 10px;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 10px;
    background: #fff;
    color: #2a2515;
    font-size: 12.5px;
}
.pn_alog__list {
    display: flex; flex-direction: column; gap: 8px;
}
.pn_alog__empty {
    text-align: center; color: #8a7d5f; padding: 36px 12px;
    font-size: 13.5px;
}
.pn_alog__row {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-left: 4px solid #c0a76d;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.pn_alog__row:hover { box-shadow: 0 4px 14px rgba(138,108,42,.18); }
.pn_alog__row:active { transform: scale(.99); }
.pn_alog__row--success      { border-left-color: #4caf7d; }
.pn_alog__row--failure      { border-left-color: #e2624a; }
.pn_alog__row--denied       { border-left-color: #c43d3d; }
.pn_alog__row--rate_limited { border-left-color: #d28a1a; }
.pn_alog__row--expired      { border-left-color: #8a7d5f; }
.pn_alog__row--sev-warn      { background: linear-gradient(0deg, #fff 0%, #fff8ec 100%); }
.pn_alog__row--sev-alert     { background: linear-gradient(0deg, #fff 0%, #ffece4 100%); }
.pn_alog__row--sev-critical  { background: linear-gradient(0deg, #fff 0%, #ffe0d8 100%); border-color: rgba(196,61,61,.35); }
.pn_alog__row-head {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 4px;
}
.pn_alog__action {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #4a3f1c; font-weight: 700;
}
.pn_alog__chip {
    display: inline-block; padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    background: #e9e1c8; color: #4a3f1c;
}
.pn_alog__chip--success     { background: #d8efdc; color: #1f5b3d; }
.pn_alog__chip--failure     { background: #ffe1da; color: #8a3623; }
.pn_alog__chip--denied      { background: #ffd5d0; color: #7a1f1f; }
.pn_alog__chip--rate_limited{ background: #ffe6c2; color: #6c4a08; }
.pn_alog__chip--expired     { background: #e6dfcc; color: #5a4f30; }
.pn_alog__chip--info        { background: #e3eaf5; color: #2a4670; }
.pn_alog__chip--notice      { background: #d8e8f7; color: #1f4a7a; }
.pn_alog__chip--warn        { background: #ffeac6; color: #6c4a08; }
.pn_alog__chip--alert       { background: #ffd6c2; color: #7a3010; }
.pn_alog__chip--critical    { background: #c43d3d; color: #fff; }
.pn_alog__summary {
    color: #2a2515; font-size: 13.5px; line-height: 1.4;
    margin-bottom: 6px;
}
.pn_alog__meta {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    color: #8a7d5f; font-size: 11.5px;
    /* Long file paths overflowed the card on the error-log rows because
       the spans had no break rule. min-width on each child + break-word
       lets the path wrap inside the card instead of bleeding off-edge. */
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.pn_alog__meta > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.pn_alog__meta i { margin-right: 2px; opacity: .8; }
.pn_alog__rid {
    cursor: pointer;
    background: rgba(192,167,109,.10);
    padding: 1px 7px;
    border-radius: 8px;
    font-family: ui-monospace, monospace;
    color: #6c4a08;
}
.pn_alog__rid:hover { background: rgba(192,167,109,.22); }

/* ---- Rows wrapper (target for Load-more append) ------------------------- */
.pn_alog__rows {
    display: flex; flex-direction: column; gap: 8px;
}

/* ---- Load-more button --------------------------------------------------- */
.pn_alog__loadmore-wrap {
    display: flex; justify-content: center;
    margin-top: 14px;
}
.pn_alog__loadmore {
    appearance: none; cursor: pointer;
    width: 100%;
    padding: 12px 18px;
    border: 1px dashed rgba(192,167,109,.55);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(192,167,109,.08) 0%, rgba(192,167,109,.18) 100%);
    color: #4a3f1c;
    font-size: 13.5px; font-weight: 700;
    line-height: 1.3;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.pn_alog__loadmore small {
    color: #8a7d5f; font-size: 11px; font-weight: 500;
}
.pn_alog__loadmore:hover {
    background: linear-gradient(180deg, rgba(192,167,109,.16) 0%, rgba(192,167,109,.28) 100%);
    box-shadow: 0 4px 14px rgba(138,108,42,.14);
    transform: translateY(-1px);
}
.pn_alog__loadmore:active { transform: scale(.99); }
.pn_alog__loadmore--busy {
    cursor: wait; opacity: .7;
}

/* ---- Pagination footer -------------------------------------------------- */
.pn_alog__pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-top: 14px; padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 12px;
}
.pn_alog__pgbtn {
    appearance: none; cursor: pointer;
    padding: 7px 14px;
    border: 1px solid rgba(192,167,109,.40);
    border-radius: 999px;
    background: linear-gradient(180deg, #fffaee 0%, #f4eacc 100%);
    color: #4a3f1c;
    font-size: 12.5px; font-weight: 600;
    transition: transform .12s, box-shadow .12s, opacity .12s;
}
.pn_alog__pgbtn:hover:not(.pn_alog__pgbtn--off) {
    box-shadow: 0 3px 10px rgba(138,108,42,.18);
    transform: translateY(-1px);
}
.pn_alog__pgbtn:active:not(.pn_alog__pgbtn--off) { transform: scale(.98); }
.pn_alog__pgbtn--off {
    cursor: not-allowed;
    opacity: .45;
    background: #f5f1e4;
}
.pn_alog__pginfo {
    flex: 1 1 auto; text-align: center;
    color: #4a3f1c; font-size: 12.5px;
    line-height: 1.35;
}
.pn_alog__pginfo small {
    display: block;
    color: #8a7d5f; font-size: 11px; margin-top: 2px;
}

/* ---- Drawer (slide-up) --------------------------------------------------
   The whole overlay starts BELOW the page header (60px) so the page
   header stays bright + interactive while the drawer is open. On desktop
   the phone-frame transform turns `position: fixed` into containing-
   block-relative, so these values are measured against the .tt_body
   frame, not the viewport.
   The rounded top corners + overflow:hidden live on the overlay so BOTH
   the dim bg and the card are clipped together — earlier we had the
   radius on the card alone, which left dim wedges peeking out at the
   top corners adjacent to the bright page header. */
.pn_alog__drawer {
    position: fixed; left: 0; right: 0; bottom: 0; top: 60px;
    z-index: 200;
    visibility: hidden; opacity: 0;
    transition: opacity .18s, visibility 0s linear .18s;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}
.pn_alog__drawer--open { visibility: visible; opacity: 1; transition: opacity .18s; }
.pn_alog__drawer-bg {
    position: absolute; inset: 0;
    background: rgba(20,16,8,.45);
    backdrop-filter: blur(2px);
}
.pn_alog__drawer-card {
    /* No radius / border-top on the card itself — the overlay clips both
       the card and the dim bg together via border-radius + overflow:hidden,
       which gives a clean rounded top with no wedges. */
    position: absolute; left: 0; right: 0; bottom: 0; top: 0;
    background: #fbf8f1;
    box-shadow: 0 -12px 32px rgba(0,0,0,.22);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pn_alog__drawer--open .pn_alog__drawer-card { transform: translateY(0); }
.pn_alog__drawer-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(192,167,109,.22);
    color: #2a2515;
}
.pn_alog__drawer-x {
    background: none; border: 0; font-size: 22px; line-height: 1;
    color: #8a7d5f; cursor: pointer; padding: 0 4px;
}
.pn_alog__drawer-body {
    /* flex:1 + min-height:0 makes the body fill the remaining drawer-card
       height in the flex column. Without this the body's height collapsed
       to its content, so sticky-bottom elements inside (like the Save
       footer on the contacts compose form) anchored to the body's
       intrinsic bottom rather than the drawer's visible bottom edge. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 18px 24px;
    /* Slim, gold-tinted scrollbar so it reads as "part of the design"
       rather than an OS artifact. Falls back to default in browsers
       that don't support scrollbar styling. */
    scrollbar-width: thin;
    scrollbar-color: rgba(192,167,109,.45) transparent;
}
.pn_alog__drawer-body::-webkit-scrollbar { width: 6px; }
.pn_alog__drawer-body::-webkit-scrollbar-thumb {
    background: rgba(192,167,109,.45);
    border-radius: 3px;
}
.pn_alog__drawer-body::-webkit-scrollbar-track { background: transparent; }
.pn_alog__d-head { font-size: 13px; margin-bottom: 10px; }
.pn_alog__d-row {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(192,167,109,.18);
    font-size: 13px;
}
.pn_alog__d-row:last-child { border-bottom: 0; }
.pn_alog__d-lbl { color: #8a7d5f; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.pn_alog__d-val { color: #2a2515; word-break: break-word; }
.pn_alog__d-row--json .pn_alog__d-val { display: none; }
.pn_alog__d-json {
    margin: 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: #2a2515;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
}
.pn_alog__chain { display: flex; flex-direction: column; gap: 6px; }
.pn_alog__chain-row {
    display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}
.pn_alog__chain-row:hover { background: #f6efe1; }
.pn_alog__chain-time { color: #8a7d5f; font-family: ui-monospace, monospace; font-size: 11px; }
.pn_alog__chain-summary { flex: 1 1 100%; color: #2a2515; }

/* =============================================================================
 * 13. SECTION: Error Logs  (#pn_error_log — kprocess_26.php, admin only)
 * Reuses the activity-log shell + drawer styles (.pn_alog__*) and adds:
 *   - top-of-page stat tiles
 *   - source chips (php / mysql / js / fatal)
 *   - resolved-row dimming
 *   - resolution textarea + button
 * ============================================================================= */
#pn_error_log .pn_alog__container,
.pn_elog__container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 12px 12px calc(82px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_elog__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.pn_elog__stat {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
}
.pn_elog__stat--bad {
    background: linear-gradient(0deg, #fff 0%, #ffe0d8 100%);
    border-color: rgba(196,61,61,.35);
}
.pn_elog__stat-num { font-size: 22px; font-weight: 700; color: #2a2515; line-height: 1.1; }
.pn_elog__stat-lbl { font-size: 11px; color: #8a7d5f; margin-top: 2px;
                     text-transform: uppercase; letter-spacing: .04em; }
/* Source chips — distinct colour per source so the list scans fast. */
.pn_elog__chip-php   { background: #e0eaff; color: #213a73; }
.pn_elog__chip-mysql { background: #fbeacb; color: #6c4a08; }
.pn_elog__chip-js    { background: #e2e7ed; color: #2f3a4d; }
.pn_elog__chip-fatal { background: #c43d3d; color: #fff; }
.pn_elog__chip-http  { background: #d9efe2; color: #1f5b3d; }
/* Repeat-count badge — only shown when count > 1. */
.pn_elog__count {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    background: rgba(192,167,109,.20);
    color: #4a3f1c;
}
/* Severity row tints (severity comes through as a class on .pn_elog__row). */
.pn_elog__row--warning  { border-left-color: #d28a1a; }
.pn_elog__row--error    { border-left-color: #e2624a; }
.pn_elog__row--critical { border-left-color: #c43d3d; }
.pn_elog__row--fatal    { border-left-color: #7a1f1f; background: linear-gradient(0deg, #fff 0%, #ffe0d8 100%); }
/* Resolved rows are visually de-emphasised — easy to scroll past. */
.pn_elog__row--resolved {
    opacity: .55;
    border-left-color: #4caf7d;
}
.pn_elog__row--resolved:hover { opacity: 1; }
/* Detail-pane resolve form. */
.pn_elog__resolve-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pn_elog__resolve-note {
    width: 100%;
    min-height: 70px;
    border: 1px solid rgba(192,167,109,.35);
    border-radius: 10px;
    background: #fff;
    color: #2a2515;
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    outline: none;
}
.pn_elog__resolve-note:focus { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_elog__actions { margin-top: 12px; }

/* =============================================================================
 * 14. SECTION: Cookie consent banner + manage-preferences modal
 * -----------------------------------------------------------------------------
 * Bottom slide-up banner shown until the user records a choice. Modal
 * appears when "Manage Preferences" is tapped. Uses CSS variables for the
 * three primary colours so a future dark-mode toggle can override them.
 * ============================================================================= */
:root {
    --kws-consent-bg:        #fbf8f1;
    --kws-consent-fg:        #2a2515;
    --kws-consent-muted:     #6c5e3a;
    --kws-consent-border:    rgba(192,167,109,.30);
    --kws-consent-accent:    #c0a76d;
    --kws-consent-accent-fg: #fff;
}

/* ---- Bottom banner ------------------------------------------------------ */
.kws_consent {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 220;
    background: var(--kws-consent-bg);
    color: var(--kws-consent-fg);
    border-top: 1px solid var(--kws-consent-border);
    box-shadow: 0 -8px 24px rgba(0,0,0,.10);
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    animation: kws_consent_slide .25s ease-out;
}
@keyframes kws_consent_slide {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.kws_consent__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kws_consent__title { font-weight: 700; font-size: 14px; }
.kws_consent__title i { color: var(--kws-consent-accent); }
.kws_consent__body  {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kws-consent-muted);
}
.kws_consent__body a {
    color: var(--kws-consent-fg);
    text-decoration: underline;
    text-decoration-color: var(--kws-consent-accent);
}
.kws_consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.kws_consent__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 9px 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.kws_consent__btn:active { transform: scale(.97); }
.kws_consent__btn--ghost {
    background: transparent;
    color: var(--kws-consent-muted);
    border: 1px solid transparent;
}
.kws_consent__btn--ghost:hover { color: var(--kws-consent-fg); }
.kws_consent__btn--outline {
    background: transparent;
    color: var(--kws-consent-fg);
    border: 1px solid var(--kws-consent-border);
}
.kws_consent__btn--outline:hover { border-color: var(--kws-consent-accent); }
.kws_consent__btn--primary {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: var(--kws-consent-accent-fg);
    box-shadow: 0 4px 12px rgba(138,108,42,.25);
}
.kws_consent__btn--primary:hover {
    box-shadow: 0 6px 16px rgba(138,108,42,.32);
}

/* ---- Manage-preferences modal ------------------------------------------- */
.kws_consent_pref {
    position: fixed; inset: 0; z-index: 230;
    visibility: hidden; opacity: 0;
    transition: opacity .18s, visibility 0s linear .18s;
}
.kws_consent_pref--open { visibility: visible; opacity: 1; transition: opacity .18s; }
.kws_consent_pref__bg {
    position: absolute; inset: 0;
    background: rgba(20,16,8,.45);
    backdrop-filter: blur(2px);
}
.kws_consent_pref__card {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 86vh;
    background: var(--kws-consent-bg);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,.22);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.kws_consent_pref--open .kws_consent_pref__card { transform: translateY(0); }
.kws_consent_pref__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kws-consent-border);
    color: var(--kws-consent-fg);
    font-size: 14px;
}
.kws_consent_pref__x {
    background: none; border: 0;
    font-size: 22px; line-height: 1; padding: 0 4px;
    color: var(--kws-consent-muted); cursor: pointer;
}
.kws_consent_pref__body { padding: 14px 18px; overflow-y: auto; }
.kws_consent_pref__row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--kws-consent-border);
}
.kws_consent_pref__row:last-child { border-bottom: 0; }
.kws_consent_pref__row > div:first-child { flex: 1 1 auto; }
.kws_consent_pref__lbl { font-weight: 600; color: var(--kws-consent-fg); font-size: 13.5px; }
.kws_consent_pref__sub { font-size: 12px; line-height: 1.45; color: var(--kws-consent-muted); margin-top: 2px; }
.kws_consent_pref__sw {
    flex: 0 0 auto;
    width: 42px; height: 24px;
    background: rgba(192,167,109,.24);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background .15s;
}
.kws_consent_pref__sw span {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
    transition: transform .18s;
}
.kws_consent_pref__sw--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
}
.kws_consent_pref__sw--on span { transform: translateX(18px); }
.kws_consent_pref__sw--locked {
    cursor: not-allowed;
    opacity: .85;
}
.kws_consent_pref__foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid var(--kws-consent-border);
    gap: 12px;
    flex-wrap: wrap;
}
.kws_consent_pref__link {
    color: var(--kws-consent-muted);
    font-size: 12.5px;
    text-decoration: underline;
    text-decoration-color: var(--kws-consent-accent);
}

/* Tablet+: lay banner buttons inline with text. */
@media (min-width: 540px) {
    .kws_consent__inner { flex-direction: row; align-items: center; gap: 18px; }
    .kws_consent__text  { flex: 1 1 auto; }
    .kws_consent__actions { flex-shrink: 0; flex-wrap: nowrap; }
}

/* Desktop phone-frame mode — same media query the .tt_body frame uses to
   pin itself to 420px centred. The banner + manage-prefs modal are
   position: fixed against the viewport by default, so on desktop they'd
   span the entire browser width. Constrain them to the phone-frame
   bounds so they look like part of the app, not a global toolbar. */
@media (min-width: 600px) and (min-height: 760px) {
    /* Banner: center horizontally, cap width, sit on the inside bottom
       of the phone frame (matching the frame's vertical centring math). */
    .kws_consent {
        left: 50%;
        right: auto;
        width: 420px;
        max-width: 420px;
        transform: translateX(-50%);
        bottom: max(20px, calc((100vh - min(92vh, 900px)) / 2));
        border-radius: 0 0 28px 28px;        /* match phone-frame bottom corners */
        animation: kws_consent_slide_desktop .25s ease-out;
    }
    @keyframes kws_consent_slide_desktop {
        from { transform: translate(-50%, 100%); opacity: 0; }
        to   { transform: translate(-50%, 0);    opacity: 1; }
    }

    /* Manage-prefs sheet: confine the WHOLE overlay (backdrop + card)
       to the phone-frame bounds. inset:0 children now reference these
       new bounds, so the dim only covers the phone, not the desktop. */
    .kws_consent_pref {
        left: 50%;
        right: auto;
        width: 420px;
        max-width: 420px;
        transform: translateX(-50%);
        top: max(20px, calc((100vh - min(92vh, 900px)) / 2));
        bottom: max(20px, calc((100vh - min(92vh, 900px)) / 2));
        height: auto;
        border-radius: 28px;
        overflow: hidden;
    }
    .kws_consent_pref__bg   { border-radius: 28px; }
    .kws_consent_pref__card { border-radius: 22px 22px 28px 28px; }

    /* The 540px-wide row-layout rule above tries to put text + buttons
       side-by-side, but inside the 420px-wide phone frame that crushes
       the text into a one-word-per-line column. Force column layout
       back on so the banner reads cleanly: title + body on top,
       buttons in a row below. */
    .kws_consent__inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .kws_consent__actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* =============================================================================
 * 15. SECTION: Privacy Policy page (#pn_privacy — kprocess_27.php)
 * Reuses the kws_consent button styles for the back/settings buttons at
 * the bottom; everything else is page-specific so the policy reads like
 * a real document, not a UI screen.
 * ============================================================================= */
#pn_privacy {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
    overflow: hidden !important;
}
.pn_privacy__container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 18px 18px calc(82px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_privacy__intro {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.pn_privacy__date {
    font-size: 11.5px;
    color: #8a7d5f;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.pn_privacy__intro p {
    margin: 0;
    color: #2a2515;
    font-size: 13.5px;
    line-height: 1.55;
}
.pn_privacy__sec {
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.pn_privacy__h2 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #4a3f1c;
    font-weight: 700;
    letter-spacing: .01em;
}
.pn_privacy__sec p,
.pn_privacy__sec li {
    color: #2a2515;
    font-size: 13px;
    line-height: 1.55;
}
.pn_privacy__sec p { margin: 6px 0; }
.pn_privacy__ul {
    margin: 6px 0 6px 18px;
    padding: 0;
}
.pn_privacy__ul li { margin: 4px 0; }
.pn_privacy__sec a { color: #6c4a08; text-decoration: underline; }
.pn_privacy__tbl {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12.5px;
}
.pn_privacy__tbl th,
.pn_privacy__tbl td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(192,167,109,.18);
    text-align: left;
    vertical-align: top;
}
.pn_privacy__tbl th {
    background: #faf4e6;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c4a08;
}
.pn_privacy__tbl tr:last-child td { border-bottom: 0; }
.pn_privacy__back {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

/* =============================================================================
 * SECTION: Approval signature feature
 * -----------------------------------------------------------------------------
 * Three companion surfaces:
 *   1. Profile sigmode picker / saved-sig + PIN sheets        (kprocess_19.php)
 *   2. Approval-time auth gate sheet (#kws_apgate)            (index.php)
 *   3. Signature Audit admin page (#pn_signature_audit)       (kprocess_28.php)
 * ============================================================================= */

/* ---- Profile: emergency-lock banner ---------------------------------
 * Shown at the top of the Approval Signature card when
 * kusers_emergency_lock_until is in the future. Compact warm-amber
 * banner with an icon, title + relative-time subline, and an Unlock pill.
 * --------------------------------------------------------------------- */
.pn_prf__lock-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 0;
    background: linear-gradient(135deg, #fff3e0 0%, #fff8eb 100%);
    border: 1px solid rgba(210, 138, 26, .32);
    border-radius: 12px;
}
.pn_prf__lock-banner-icon {
    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: 14px;
}
.pn_prf__lock-banner-body { flex: 1 1 auto; min-width: 0; }
.pn_prf__lock-banner-body b {
    color: #6c4a08;
    font-size: 13.5px;
    display: block;
    line-height: 1.2;
}
.pn_prf__lock-banner-sub {
    color: #8a6c2a;
    font-size: 11.5px;
    margin-top: 3px;
    line-height: 1.3;
}
.pn_prf__lock-unlock {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 16px;
    border: 1px solid rgba(210, 138, 26, .42);
    background: #fff;
    color: #b06a0a;
    font: inherit;
    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;
    -webkit-tap-highlight-color: transparent;
}
.pn_prf__lock-unlock:hover  { background: rgba(210, 138, 26, .10); }
.pn_prf__lock-unlock:active { transform: scale(.96); }

/* ---- Profile: signature-mode segmented control ---------------------- */
.pn_prf__sigmode-seg {
    display: flex;
    gap: 6px;
    background: rgba(192,167,109,.10);
    border: 1px solid rgba(192,167,109,.28);
    border-radius: 12px;
    padding: 4px;
    margin: 6px 0 4px;
}
.pn_prf__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: 9px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .12s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pn_prf__sigmode-btn:active { transform: scale(.97); }
.pn_prf__sigmode-btn--on {
    background: linear-gradient(180deg, #c0a76d, #8a6c2a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138,108,42,.28);
}

/* Stacked-row variant — flips the row from horizontal flex to a
   3-row vertical stack: label, description, segmented control on
   its own line spanning the full card width. Used by the Approval
   Mode picker so the 4 buttons aren't squeezed alongside the label. */
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row.pn_prf__row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--stacked .pn_prf__row-label,
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--stacked .pn_prf__row-sub {
    text-align: left;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--stacked .pn_prf__row-sub {
    margin-top: 2px;
    margin-bottom: 8px;
}
:is(#pn_profile, #pn_profile_pwd, #pn_messages_send, #pn_approvals, #pn_approval_dt) .pn_prf__row--stacked .pn_prf__sigmode-seg {
    width: 100%;
    margin: 0;
}

/* ---- Profile: saved-signature sheet --------------------------------- */
.pn_prf__sheet-shell {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
    background: rgba(0,0,0,.42);
    animation: kws_apgate_in .18s ease-out both;
}
.pn_prf__sheet {
    width: 100%;
    max-width: 420px;
    max-height: 86vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 42px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(0);
    animation: kws_apgate_slide .22s ease-out both;
}
.pn_prf__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: linear-gradient(180deg, #fffaef, #fff);
}
.pn_prf__sheet-x {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #6c4a08;
    cursor: pointer;
}
.pn_prf__sheet-body {
    padding: 14px 16px 18px;
    overflow-y: auto;
}
.pn_prf__sig-tabs {
    display: flex;
    gap: 6px;
    margin: 12px 0 8px;
}
.pn_prf__sig-tab {
    flex: 1 1 0;
    padding: 9px 8px;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #4a3a14;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}
.pn_prf__sig-tab--on {
    background: linear-gradient(180deg, #c0a76d, #8a6c2a);
    color: #fff;
    border-color: transparent;
}
.pn_prf__sig-pane {
    margin-top: 10px;
}
.pn_prf__sig-canvas {
    width: 100%;
    height: 180px;
    background: #fafafa;
    border: 1.5px dashed rgba(192,167,109,.45);
    border-radius: 12px;
    overflow: hidden;
}
.pn_prf__sig-canvas canvas { width: 100% !important; height: 100% !important; display:block; }
.pn_prf__sig-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}
.pn_prf__sig-preview {
    margin: 8px 0 14px;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 10px;
    text-align: center;
}
.pn_prf__sig-preview-img {
    /* CSS bg-image (not <img>) — same anti-save approach as the
       task-detail preview. See .kws_protected-img below. */
    width: 100%;
    height: 110px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
}
.pn_prf__sig-preview--empty {
    color: #888;
    font-size: 12.5px;
}

/* ---- kws_protected-img: shared anti-save image friction ----------- *
 * Apply alongside any signature preview rendered to non-admin users.
 * Blocks: drag-to-save, text-select, native context menu, image
 * smoothing artifacts. Pair with oncontextmenu="return false" on the
 * wrapper element for the right-click block.
 *
 * NOTE: this is friction, NOT airtight protection. The image file is
 * still served from a publicly readable URL because the main app's
 * contract PDF generator reads it via HTTP. DevTools / direct URL
 * access still work. This deters casual exfiltration only. */
.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 makes drag literally impossible on the image
       layer, while the wrapper still receives contextmenu so we can
       block right-click. */
    pointer-events: none;
    /* Crisper rendering for line art; also prevents browsers from
       offering a "save as" tooltip on long-press in some mobile UAs. */
    image-rendering: -webkit-optimize-contrast;
    /* Required for the ::after watermark overlay below. */
    position: relative;
    overflow: hidden;
}

/* Watermark overlay — diagonal "EMPxxxxx · VIEW ONLY · timestamp" text
   stamped on every signature preview a non-admin user sees. The text
   is set via JS (data-watermark attr) at render + on focus return.
   This is the most useful real-world defense against screenshots:
   it doesn't STOP a leak, but ties any leaked image back to the viewer
   on the date/time it was captured. */
.kws_protected-img::after {
    content: attr(data-watermark);
    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 state — entered when the page hides, the window blurs (e.g.
   Snipping Tool steals focus to draw its capture rectangle), or the
   PrintScreen key is detected. Hides the underlying signature image
   and replaces the watermark text with a friendly "return focus" hint. */
.kws_protected-img.kws_protected-img--blank {
    /* Replace the bg-image with a neutral wash. */
    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;
}

/* ---- Sheet-scoped lang-btn (used inside the sheets, where the
        #pn_profile-scoped rule above doesn't reach) ------------------ */
.pn_prf__sheet-shell .pn_prf__lang-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #6b5a2c;
    font: inherit;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease, filter .15s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Hover wash applies ONLY to the ghost variant — without :not(),
   the white-wash background here would clobber the gold gradient on
   the --on (primary) variant since both rules share specificity. */
.pn_prf__sheet-shell .pn_prf__lang-btn:not(.pn_prf__lang-btn--on):hover {
    color: #2a2515;
    background: rgba(192,167,109,.06);
}
.pn_prf__sheet-shell .pn_prf__lang-btn:active { transform: scale(.97); }
.pn_prf__sheet-shell .pn_prf__lang-btn--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(138,108,42,.28);
}
.pn_prf__sheet-shell .pn_prf__lang-btn--on:hover  { color: #fff; filter: brightness(1.06); }

/* Remove-saved-signature button (appears at the foot of the sig sheet
   when a saved signature is on file). Same red-ghost language as the
   Profile-page version but reachable inside .pn_prf__sheet-shell, where
   the #pn_profile-scoped rule above doesn't apply. */
.pn_prf__sheet-shell .pn_prf__photo-remove {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid rgba(176,30,30,.32);
    color: #8b1414;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_prf__sheet-shell .pn_prf__photo-remove:hover  { background: rgba(176,30,30,.08); }
.pn_prf__sheet-shell .pn_prf__photo-remove:active { background: rgba(176,30,30,.14); transform: scale(.97); }
.pn_prf__sheet-shell .pn_prf__photo-remove i      { font-size: 11px; }

/* ---- Camera / Gallery picker tiles ----------------------------------- */
.pn_prf__sig-pickopts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.pn_prf__sig-pickopt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: #fff;
    border: 1.5px solid rgba(192,167,109,.32);
    border-radius: 12px;
    color: #4a3a14;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_prf__sig-pickopt:hover {
    border-color: #8a6c2a;
    background: rgba(192,167,109,.06);
}
.pn_prf__sig-pickopt:active { transform: scale(.97); }
.pn_prf__sig-pickopt i {
    font-size: 22px;
    color: #c0a76d;
}
.pn_prf__sig-pickopt span { font-size: 12px; }

/* ---- Preview pane after a file is picked ----------------------------- */
.pn_prf__sig-uploadpv {
    margin-top: 12px;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 10px;
}
.pn_prf__sig-uploadpv img {
    display: block;
    max-width: 100%;
    max-height: 160px;
    margin: 0 auto;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}
.pn_prf__sig-uploadpv-info {
    margin-top: 8px;
    text-align: center;
    font-size: 11.5px;
    color: #777;
}
.pn_prf__sig-uploadpv-err {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(179,38,30,.08);
    border-left: 3px solid #b3261e;
    color: #8a1a14;
    font-size: 12px;
    border-radius: 6px;
}

/* ---- PIN sheet: stacked label + input rows --------------------------- *
 * Without these rules .pn_prf__pin-row falls back to plain block flow and
 * the inputs end up tiny / invisible because they inherit no width. ---- */
.pn_prf__sheet-shell .pn_prf__pin-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.pn_prf__sheet-shell .pn_prf__pin-row label {
    font-size: 12px;
    font-weight: 600;
    color: #4a3a14;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* 6-cell OTP-style PIN entry. Each cell holds one digit; the wrap holds
   the cells, the eye toggle, and the hidden aggregate input. */
/* Class-name-only selectors (no .pn_prf__sheet-shell ancestor) so the
   same OTP layout works inside both the Profile sheets and the
   approval-time gate (#kws_apgate). The class names are unique enough
   that there's no collision risk. */
.pn_prf__pin-otpwrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pn_prf__pin-otp-cell {
    /* Width tuned so 6 cells + gaps + eye-toggle fit comfortably inside
       a 420px-wide phone-frame sheet. flex-shrink lets them squeeze a
       touch on the narrowest devices. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 48px;
    height: 54px;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border: 1.5px solid rgba(192,167,109,.40);
    border-radius: 10px;
    background: #fff;
    color: #2a2515;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.pn_prf__pin-otp-cell:focus {
    border-color: #8a6c2a;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
    transform: scale(1.02);
}
/* Eye button sits at the end of the cell row. */
.pn_prf__pin-otpwrap .pn_prf__pin-eye {
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #8a6c2a;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_prf__pin-otpwrap .pn_prf__pin-eye:hover  { background: rgba(192,167,109,.12); color: #2a2515; }
.pn_prf__pin-otpwrap .pn_prf__pin-eye:active { transform: scale(.92); }
.pn_prf__pin-otpwrap .pn_prf__pin-eye i      { font-size: 14px; }
[dir="rtl"] .pn_prf__pin-otpwrap .pn_prf__pin-eye {
    margin-left: 0;
    margin-right: auto;
}

/* Tighter cells on narrow phones so 6 cells + eye fit on a 320px width. */
@media (max-width: 360px) {
    .pn_prf__pin-otpwrap { gap: 4px; }
    .pn_prf__pin-otp-cell {
        max-width: 40px;
        height: 48px;
        font-size: 18px;
        border-radius: 8px;
    }
}

/* ---- Tips block ------------------------------------------------------ */
.pn_prf__sig-help {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(192,167,109,.08);
    border-radius: 10px;
    font-size: 12px;
    color: #4a3a14;
}
.pn_prf__sig-help ul {
    margin: 4px 0 6px;
    padding-left: 18px;
}
[dir="rtl"] .pn_prf__sig-help ul { padding-left: 0; padding-right: 18px; }
.pn_prf__sig-help ul li { margin: 2px 0; }
.pn_prf__sig-help .pn_prf__row-sub { color: #6c4a08; margin-top: 4px; }

/* ---- Approval-time auth gate (#kws_apgate) ------------------------- *
 * Lives in index.php; opened via kws_approval_gate_open(). z-index sits
 * above tsk_confirm (which itself sits above the page chrome) so the
 * gate is always visible over a confirm dialog if both happen to land. */
.kws_apgate {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.kws_apgate[aria-hidden="false"],
.kws_apgate--open { display: flex; pointer-events: auto; }

/* Desktop phone-frame mode — bound the modal overlays to the phone
   shape so the dim doesn't bleed into the desktop background and the
   bottom-anchored card actually meets the bottom-tab bar.
   ----------------------------------------------------------------------
   Two flavours, because the two modals have different DOM parents:

   1. .kws_apgate lives at <body> level. Its containing block IS the
      viewport, so we calc absolute pin-points that match the phone
      frame's footprint.

   2. .pn_prf__sheet-shell is APPENDED INSIDE #ttbody (.tt_body).
      .tt_body has `transform: translateX(-50%)` on desktop, which
      makes IT the containing block for any position:fixed child.
      So .pn_prf__sheet-shell can just use inset:0 — that already
      fills the phone frame edge-to-edge (and the parent's
      overflow:hidden + border-radius:28px clip the corners). */
@media (min-width: 600px) and (min-height: 760px) {
    .kws_apgate {
        inset: auto;
        left: 50%;
        right: auto;
        width: 420px;
        max-width: 420px;
        transform: translateX(-50%);
        top:    max(20px, calc((100vh - min(92vh, 900px)) / 2));
        bottom: max(20px, calc((100vh - min(92vh, 900px)) / 2));
        height: auto;
        border-radius: 28px;
        overflow: hidden;
        padding: 0;
    }
    .pn_prf__sheet-shell {
        /* Fill .tt_body (the transformed containing block). The
           inherited inset:0 from the base rule is exactly right —
           we just need to undo any earlier overrides if a future
           refactor adds them. The card inside (align-items:flex-end)
           anchors to the phone's bottom and covers the tab bar. */
        inset: 0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        transform: none;
        border-radius: 0;       /* parent .tt_body clips to the bezel */
    }
}
.kws_apgate__bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.46);
    animation: kws_apgate_in .18s ease-out both;
}
.kws_apgate__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0,0,0,.28);
    padding: 18px 18px 16px;
    animation: kws_apgate_slide .22s ease-out both;
}
.kws_apgate__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.kws_apgate__head b { font-size: 15.5px; color: #2a2515; }
.kws_apgate__x {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #6c4a08;
    cursor: pointer;
}
.kws_apgate__msg {
    font-size: 13px;
    color: #4a4338;
    margin: 4px 0 12px;
}
/* Error variant — used when the gate reopens after a wrong/expired
   token so the corrective message stands out in maroon. */
.kws_apgate__msg--err {
    color: #800000;
    font-weight: 600;
}
/* PIN pane shares the .pn_prf__pin-otpwrap / .pn_prf__pin-otp-cell rules
   (declared above for the Profile sheet) since both surfaces want the
   same look. We only need to make sure the wrap fits inside the gate's
   centered card; the cell width is already responsive. */
.kws_apgate .kws_apgate__pane { margin: 4px 0 6px; }
.kws_apgate .pn_prf__pin-otpwrap { justify-content: center; }

/* "Didn't get it? Resend code" line below the OTP cells. */
.kws_apgate__otp-resend {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #6c5e3a;
}
.kws_apgate__otp-resend-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #8a6c2a;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    -webkit-tap-highlight-color: transparent;
}
.kws_apgate__otp-resend-link:hover  { color: #2a2515; background: rgba(192,167,109,.10); }
.kws_apgate__otp-resend-link:active { transform: scale(.97); }

/* Password pane: single text field + eye toggle. */
.kws_apgate__pwd-wrap {
    position: relative;
}
.kws_apgate__pwd-input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    font-size: 16px;
    font-weight: 600;
    border: 1.5px solid rgba(192,167,109,.40);
    border-radius: 12px;
    background: #fff;
    color: #2a2515;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.kws_apgate__pwd-input:focus {
    border-color: #8a6c2a;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
.kws_apgate__pwd-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #8a6c2a;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.kws_apgate__pwd-eye:hover  { background: rgba(192,167,109,.12); color: #2a2515; }
.kws_apgate__pwd-eye:active { transform: translateY(-50%) scale(.92); }
.kws_apgate__pwd-eye i      { font-size: 14px; }
[dir="rtl"] .kws_apgate__pwd-eye { right: auto; left: 6px; }
[dir="rtl"] .kws_apgate__pwd-input { padding: 12px 14px 12px 44px; }
.kws_apgate__err {
    margin-top: 8px;
    font-size: 12.5px;
    color: #b3261e;
    text-align: center;
}
.kws_apgate__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.kws_apgate__btn {
    flex: 1 1 0;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.kws_apgate__btn:active { transform: scale(.97); }
.kws_apgate__btn--ghost {
    background: rgba(192,167,109,.12);
    color: #4a3a14;
}
.kws_apgate__btn--primary {
    background: linear-gradient(180deg, #c0a76d, #8a6c2a);
    color: #fff;
    box-shadow: 0 6px 18px rgba(138,108,42,.30);
}
.kws_apgate__btn--primary:hover { filter: brightness(1.06); }
@keyframes kws_apgate_in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes kws_apgate_slide { from { transform: translateY(18%); } to { transform: translateY(0); } }

/* ---- Signature Audit admin page (#pn_signature_audit) -------------- */
#pn_signature_audit {
    background: linear-gradient(180deg, #fffaef 0%, #fffefa 110px, #ffffff 200px) #ffffff;
    /* Same scroll-boundary pattern as Activity Log so the header stays
       fixed and the list never scrolls behind it. */
    overflow: hidden !important;
}
.pn_sigaudit__container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_sigaudit__filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 0 12px;
}
.pn_sigaudit__q {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 12px;
    font-size: 13.5px;
    background: #fff;
    outline: none;
}
.pn_sigaudit__q:focus { border-color: #8a6c2a; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_sigaudit__sel {
    padding: 9px 10px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 10px;
    font-size: 12.5px;
    background: #fff;
}
.pn_sigaudit__list { display: flex; flex-direction: column; gap: 8px; }
.pn_sigaudit__empty {
    text-align: center;
    color: #888;
    padding: 30px 16px;
    font-size: 13px;
}
.pn_sigaudit__row {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease;
}
.pn_sigaudit__row:active { transform: scale(.99); }
.pn_sigaudit__row--reject { border-left: 3px solid #b3261e; }
.pn_sigaudit__row--approve { border-left: 3px solid #1f7a3a; }
.pn_sigaudit__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #c0a76d;
    font-size: 18px;
}
.pn_sigaudit__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Background-image variant — used by the protected (no-save) signature
   thumb. Pairs with the shared .kws_protected-img rules for the watermark
   + hide-on-blur behaviour. */
.pn_sigaudit__thumb-img {
    width: 100%; height: 100%;
    background: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
}
.pn_sigaudit__thumb--blank { background: rgba(192,167,109,.10); }
.pn_sigaudit__row-main { flex: 1 1 auto; min-width: 0; }
.pn_sigaudit__row-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.pn_sigaudit__chip {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(192,167,109,.14);
    color: #6c4a08;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.pn_sigaudit__chip--approve { background: rgba(31,122,58,.12); color: #1f5c2c; }
.pn_sigaudit__chip--reject  { background: rgba(179,38,30,.12); color: #8a1a14; }
.pn_sigaudit__chip--method  { background: rgba(0,0,0,.06); color: #333; text-transform: none; }
.pn_sigaudit__chip--idle    { background: rgba(255,182,0,.16); color: #6c4a08; text-transform: none; }
.pn_sigaudit__chip--warn    { background: rgba(179,38,30,.12); color: #8a1a14; text-transform: none; }
.pn_sigaudit__summary {
    font-size: 13px;
    color: #2a2515;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pn_sigaudit__summary small { color: #777; font-size: 11.5px; }
.pn_sigaudit__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: #777;
    font-size: 11px;
}
.pn_sigaudit__meta span i { margin-right: 2px; opacity: .7; }
.pn_sigaudit__rid {
    color: #6c4a08;
    cursor: pointer;
    text-decoration: underline dotted rgba(108,74,8,.5);
}

/* ---- Drawer (slide-up) for detail / chain views --------------------
   `top: 60px` keeps the SIGNATURE AUDIT page header bright + tappable
   while the drawer is open. `vh` was wrong here because the phone-frame
   transform turns `position: fixed` into containing-block-relative on
   desktop, so 88vh was viewport-tall and covered the page header. */
.pn_sigaudit__drawer {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 60px;
    z-index: 9500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    transition: background .18s ease;
    background: transparent;
}
.pn_sigaudit__drawer--open {
    pointer-events: auto;
    background: rgba(0,0,0,.46);
}
.pn_sigaudit__drawer-bg {
    position: absolute; inset: 0;
}
.pn_sigaudit__drawer-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .22s ease;
}
.pn_sigaudit__drawer--open .pn_sigaudit__drawer-card { transform: translateY(0); }
.pn_sigaudit__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.pn_sigaudit__drawer-x {
    border: 0;
    background: transparent;
    font-size: 22px;
    color: #6c4a08;
    cursor: pointer;
}
.pn_sigaudit__drawer-body {
    padding: 12px 16px 18px;
    overflow-y: auto;
}
.pn_sigaudit__detail { display: flex; flex-direction: column; gap: 6px; }
.pn_sigaudit__d-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 14px;
}
.pn_sigaudit__d-preview {
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    margin-bottom: 8px;
}
.pn_sigaudit__d-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}
/* Background-image variant — used for the protected (no-save) preview.
   Inherits watermark + hide-on-blur from the shared .kws_protected-img
   rules; this rule just sizes the box. */
.pn_sigaudit__d-preview-img {
    width: 100%;
    height: 200px;
    background: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 6px;
}
.pn_sigaudit__d-preview-meta {
    margin-top: 6px;
    font-size: 11px;
    color: #888;
}
.pn_sigaudit__d-preview--blank {
    color: #b89944;
    font-size: 13px;
}
.pn_sigaudit__d-preview--blank i {
    display: block;
    font-size: 26px;
    margin-bottom: 4px;
    color: #c0a76d;
}
.pn_sigaudit__d-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 12.5px;
}
.pn_sigaudit__d-row--json { display: block; }
.pn_sigaudit__d-lbl {
    color: #777;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .3px;
}
.pn_sigaudit__d-val {
    color: #2a2515;
    word-break: break-word;
}
.pn_sigaudit__d-json {
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: #2a2515;
    overflow-x: auto;
    margin: 4px 0 0;
}
.pn_sigaudit__chain { display: flex; flex-direction: column; gap: 4px; }
.pn_sigaudit__chain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}
.pn_sigaudit__chain-time { color: #777; font-size: 11px; min-width: 130px; }
.pn_sigaudit__chain-summary { color: #2a2515; flex: 1 1 100%; }

/* =============================================================================
 * SECTION: Help / FAQ page (#pn_faq) — kprocess_29.php
 * ============================================================================= */
#pn_faq {
    background: linear-gradient(180deg, #fffaef 0%, #fffefa 110px, #ffffff 200px) #ffffff;
    /* overflow:hidden makes #pn_faq the scroll boundary — the inner
       absolutely-positioned .pn_faq__container is what actually scrolls.
       Without this, the page would scroll behind the fixed header. */
    overflow: hidden !important;
}
.pn_faq__container {
    /* Pinned BELOW the 60px-tall header bar and ABOVE the bottom-tab bar.
       Anything inside scrolls within these bounds — the header stays put,
       and the "Still stuck?" footer card clears the fixed bottom-tab bar
       (which has a round Home button protruding upward). */
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}

.pn_faq__intro {
    text-align: center;
    padding: 14px 8px 6px;
}
.pn_faq__title {
    font-size: 17px;
    font-weight: 700;
    color: #2a2515;
}
.pn_faq__title i { color: #c0a76d; margin-right: 4px; }
.pn_faq__sub {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

.pn_faq__searchwrap {
    position: relative;
    margin: 12px 0 4px;
}
.pn_faq__searchwrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0a76d;
    pointer-events: none;
    font-size: 13px;
}
.pn_faq__search {
    width: 100%;
    padding: 11px 14px 11px 36px;
    font-size: 13.5px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 12px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pn_faq__search:focus {
    border-color: #8a6c2a;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
[dir="rtl"] .pn_faq__searchwrap > i { left: auto; right: 14px; }
[dir="rtl"] .pn_faq__search { padding: 11px 36px 11px 14px; }

.pn_faq__empty {
    margin: 14px 0;
    padding: 14px 16px;
    text-align: center;
    background: rgba(192,167,109,.10);
    border: 1px dashed rgba(192,167,109,.40);
    border-radius: 12px;
    font-size: 13px;
    color: #6c4a08;
}
.pn_faq__empty i { color: #c0a76d; }

.pn_faq__cat {
    margin-top: 18px;
}
.pn_faq__cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.pn_faq__cat-head i {
    color: #c0a76d;
    font-size: 14px;
}
.pn_faq__cat-head > span { flex: 1 1 auto; min-width: 0; }
.pn_faq__cat-count {
    background: rgba(192,167,109,.16);
    color: #6c4a08;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: none;
}

.pn_faq__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pn_faq__item {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.pn_faq__item[open] {
    border-color: rgba(192,167,109,.40);
    box-shadow: 0 4px 14px rgba(138,108,42,.12);
}

.pn_faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2a2515;
    user-select: none;
}
.pn_faq__q::-webkit-details-marker { display: none; }   /* hide default ▸ */
.pn_faq__q-text { flex: 1 1 auto; min-width: 0; }
.pn_faq__chev {
    flex: 0 0 auto;
    color: #8a6c2a;
    font-size: 11px;
    transition: transform .18s ease;
}
.pn_faq__item[open] .pn_faq__chev { transform: rotate(180deg); }

.pn_faq__a {
    padding: 0 14px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #4a4338;
    border-top: 1px solid rgba(0,0,0,.04);
    animation: pn_faq_slide .18s ease-out both;
}
.pn_faq__a > p { margin: 10px 0 0; }
.pn_faq__a > ul { margin: 8px 0 0; padding-left: 18px; }
[dir="rtl"] .pn_faq__a > ul { padding-left: 0; padding-right: 18px; }
.pn_faq__a > ul > li { margin: 4px 0; }
.pn_faq__a code {
    background: rgba(192,167,109,.12);
    color: #6c4a08;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@keyframes pn_faq_slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pn_faq__vote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,.08);
    font-size: 12px;
    color: #777;
}
.pn_faq__vote-q {
    flex: 1 1 100%;
    color: #555;
}
.pn_faq__vote-btn {
    padding: 6px 12px;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #4a3a14;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pn_faq__vote-btn:hover {
    background: rgba(192,167,109,.10);
}
.pn_faq__vote-btn:active { transform: scale(.97); }
.pn_faq__vote-thx {
    flex: 1 1 100%;
    color: #1f5c2c;
    font-weight: 600;
}
.pn_faq__vote-thx i { color: #1f7a3a; }

.pn_faq__foot {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: rgba(192,167,109,.10);
    border: 1px solid rgba(192,167,109,.28);
    border-radius: 12px;
    font-size: 12.5px;
    color: #4a3a14;
}
.pn_faq__foot i {
    flex: 0 0 auto;
    color: #c0a76d;
    font-size: 22px;
    margin-top: 2px;
}

/* =============================================================================
 * SECTION: Suggestions board (#pn_suggestions / #pn_sugg_detail)
 * -----------------------------------------------------------------------------
 * Phase B styling — list rows with a vote rail, status chips, category icons,
 * branch badges. Detail page shares the same chip + voterail vocabulary so
 * both views read as the same product.
 * ============================================================================= */

#pn_suggestions, #pn_sugg_detail {
    background: linear-gradient(180deg, #fffaef 0%, #fffefa 110px, #ffffff 200px) #ffffff;
    overflow: hidden !important;
}
.pn_sugg__container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- Hero band (list page) ----------------------------------------- */
.pn_sugg__hero {
    text-align: center;
    padding: 8px 6px 6px;
}
.pn_sugg__hero-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #2a2515;
}
.pn_sugg__hero-title i { color: #c0a76d; }
.pn_sugg__hero-sub {
    font-size: 12px;
    color: #777;
    margin: 4px 14px 12px;
}
.pn_sugg__cta {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 10px 18px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(138,108,42,.25);
    transition: filter .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__cta:hover  { filter: brightness(1.06); }
.pn_sugg__cta:active { transform: scale(.97); }
.pn_sugg__cta i      { margin-right: 4px; }

/* ---- Filter chips + dropdowns ------------------------------------- */
.pn_sugg__filters { margin: 14px 0 8px; }
.pn_sugg__chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.pn_sugg__filterchip {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #6b5a2c;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__filterchip:hover { background: rgba(192,167,109,.08); }
.pn_sugg__filterchip--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(138,108,42,.22);
}
.pn_sugg__filters-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.pn_sugg__search {
    grid-column: 1 / -1;
    padding: 9px 12px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 10px;
    font-size: 13px;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.pn_sugg__search:focus { border-color: #8a6c2a; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_sugg__sel {
    padding: 8px 10px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 10px;
    font-size: 12px;
    background: #fff;
}

/* ---- List rows ----------------------------------------------------- */
.pn_sugg__list { display: flex; flex-direction: column; gap: 8px; }
.pn_sugg__empty {
    margin-top: 30px;
    padding: 24px;
    text-align: center;
    color: #6c5e3a;
    font-size: 13px;
}
.pn_sugg__empty i {
    display: block;
    font-size: 34px;
    color: #c0a76d;
    margin-bottom: 10px;
}

.pn_sugg__row {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.pn_sugg__row:hover  { border-color: rgba(192,167,109,.32); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.pn_sugg__row:active { transform: scale(.99); }

/* Vote rail (left of each row + header of detail page) */
.pn_sugg__voterail {
    flex: 0 0 auto;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
    background: rgba(192,167,109,.06);
    border-radius: 10px;
}
.pn_sugg__voterail--lg { width: 56px; }
.pn_sugg__votebtn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #6c5e3a;
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__votebtn:hover  { background: rgba(192,167,109,.18); color: #2a2515; }
.pn_sugg__votebtn:active { transform: scale(.92); }
.pn_sugg__votebtn--on    { background: rgba(31,122,58,.16); color: #1f7a3a; }
.pn_sugg__votebtn--on-dn { background: rgba(176,30,30,.14); color: #b01e1e; }
.pn_sugg__votebtn i      { font-size: 16px; }
.pn_sugg__votecount {
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
}

/* Row main column */
.pn_sugg__row-main { flex: 1 1 auto; min-width: 0; }
.pn_sugg__row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.pn_sugg__row-title {
    font-size: 14px;
    font-weight: 700;
    color: #2a2515;
    flex: 1 1 100%;
    line-height: 1.3;
}
.pn_sugg__row-body {
    font-size: 12.5px;
    color: #6c5e3a;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pn_sugg__row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #888;
    align-items: center;
}
.pn_sugg__row-meta span i { margin-right: 2px; opacity: .8; }
.pn_sugg__pinned {
    color: #c0a76d;
    font-size: 11px;
}

/* ---- Status chips -------------------------------------------------- */
.pn_sugg__chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pn_sugg__chip--submitted   { background: rgba(0,0,0,.06);             color: #555;    }
.pn_sugg__chip--review      { background: rgba(50,90,180,.14);         color: #1f3c8a; }
.pn_sugg__chip--planned     { background: rgba(192,167,109,.18);       color: #6c4a08; }
.pn_sugg__chip--inprogress  { background: rgba(210,138,26,.18);        color: #8a4a08; }
.pn_sugg__chip--done        { background: rgba(31,122,58,.16);         color: #1f5c2c; }
.pn_sugg__chip--wontfix     { background: rgba(176,30,30,.12);         color: #8a1a14; }
.pn_sugg__chip--duplicate   { background: rgba(150,60,170,.14);        color: #5a1e6b; }

/* ---- Category + branch labels ------------------------------------- */
.pn_sugg__cat {
    display: inline-flex;
    align-items: center;
    color: #555;
    font-size: 11px;
}
.pn_sugg__cat i {
    color: #c0a76d;
    font-size: 11px;
    margin-right: 4px;
}
.pn_sugg__branch {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Detail page --------------------------------------------------- */
#pn_sugg_detail .hp_holder {
    position: relative;
}
.pn_sugg__back {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #c0a76d;
    font-size: 18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
}
.pn_sugg__back:hover { background: rgba(192,167,109,.12); color: #2a2515; }

.pn_sugg__detail-head {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.pn_sugg__detail-head-main { flex: 1 1 auto; min-width: 0; }
.pn_sugg__pinned-row {
    color: #c0a76d;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.pn_sugg__detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #2a2515;
    margin: 0 0 8px;
    line-height: 1.3;
}
.pn_sugg__detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.pn_sugg__detail-byline {
    font-size: 11.5px;
    color: #777;
}
.pn_sugg__detail-body {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #2a2515;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 16px;
    word-break: break-word;
}
.pn_sugg__detail-body p { margin: 0 0 10px; }
.pn_sugg__detail-body p:last-child { margin-bottom: 0; }
.pn_sugg__detail-body a {
    color: #8a6c2a;
    text-decoration: underline;
}
.pn_sugg__detail-body code {
    background: rgba(192,167,109,.12);
    color: #6c4a08;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

/* ---- Comments thread ---------------------------------------------- */
.pn_sugg__comments {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 14px 14px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pn_sugg__comments-head {
    font-size: 13px;
    color: #4a3a14;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(0,0,0,.08);
}
.pn_sugg__comments-head i { color: #c0a76d; }
.pn_sugg__comment-empty {
    text-align: center;
    color: #888;
    font-size: 12.5px;
    padding: 14px 0 4px;
}
.pn_sugg__comment {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.pn_sugg__comment:last-child { border-bottom: 0; }
.pn_sugg__comment--admin {
    background: rgba(192,167,109,.06);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 6px 0;
    border-bottom: 0;
}
.pn_sugg__comment-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #2a2515;
    margin-bottom: 4px;
}
.pn_sugg__comment-admin-tag {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
}
.pn_sugg__comment-when {
    margin-left: auto;
    color: #888;
    font-size: 11px;
    font-weight: 400;
}
.pn_sugg__comment-status {
    font-size: 11.5px;
    color: #6c4a08;
    margin: 4px 0;
}
.pn_sugg__comment-body {
    font-size: 12.5px;
    color: #4a4338;
    line-height: 1.5;
    word-break: break-word;
}
.pn_sugg__comment-soon {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(192,167,109,.10);
    border-radius: 8px;
    font-size: 11.5px;
    color: #6c4a08;
    text-align: center;
}
.pn_sugg__comment-soon i { color: #c0a76d; }

/* ---- Inline comment composer (detail page) ------------------------- */
.pn_sugg__comment-form {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,.08);
    align-items: flex-end;
}
.pn_sugg__comment-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    color: #2a2515;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pn_sugg__comment-input:focus {
    border-color: #8a6c2a;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
.pn_sugg__comment-send {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(138,108,42,.22);
    transition: filter .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
}
.pn_sugg__comment-send:hover  { filter: brightness(1.06); }
.pn_sugg__comment-send:active { transform: scale(.96); }
.pn_sugg__comment-send i      { font-size: 13px; }
@media (max-width: 360px) {
    .pn_sugg__comment-send span { display: none; } /* icon-only on narrow */
    .pn_sugg__comment-send      { padding: 10px 12px; }
}

/* ---- Compose sheet (re-uses pn_prf__sheet shell + body) ----------- */
.pn_sugg__sheet { max-height: 86vh; }
.pn_sugg__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.pn_sugg__field > label {
    font-size: 11px;
    font-weight: 700;
    color: #4a3a14;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pn_sugg__field > input,
.pn_sugg__field > textarea,
.pn_sugg__field > select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 10px;
    background: #fff;
    color: #2a2515;
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pn_sugg__field > textarea {
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
}
.pn_sugg__field > input:focus,
.pn_sugg__field > textarea:focus,
.pn_sugg__field > select:focus {
    border-color: #8a6c2a;
    box-shadow: 0 0 0 3px rgba(192,167,109,.18);
}
.pn_sugg__field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* "Submit anonymously" checkbox row */
.pn_sugg__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(192,167,109,.08);
    border-radius: 10px;
    font-size: 12px;
    color: #4a3a14;
    margin: 6px 0 12px;
    cursor: pointer;
    line-height: 1.45;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__check input[type="checkbox"] {
    /* Custom-styled checkbox so it doesn't render as a tiny default
       browser square in a sea of content. Solid 18×18 with brand
       colour when checked. */
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    background: #fff;
    border: 1.5px solid rgba(192,167,109,.50);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
.pn_sugg__check input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    border-color: transparent;
}
.pn_sugg__check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 0;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pn_sugg__check input[type="checkbox"]:focus-visible {
    outline: 2px solid #8a6c2a;
    outline-offset: 2px;
}
.pn_sugg__check span { flex: 1 1 auto; min-width: 0; }

/* ---- Tag chips (detail page) -------------------------------------- */
.pn_sugg__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -6px 0 14px;
}
.pn_sugg__tag {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #6b5a2c;
    padding: 4px 10px 4px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__tag:hover  { background: rgba(192,167,109,.10); color: #2a2515; }
.pn_sugg__tag:active { transform: scale(.96); }
.pn_sugg__tag i      { font-size: 9px; opacity: .7; }

/* ---- Attachments gallery + uploader (detail page) ----------------- */
.pn_sugg__attach {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pn_sugg__attach-head {
    font-size: 12.5px;
    color: #4a3a14;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pn_sugg__attach-head i { color: #c0a76d; }
.pn_sugg__attach-head small { margin-left: auto; font-size: 11px; }
.pn_sugg__attach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
@media (min-width: 480px) { .pn_sugg__attach-grid { grid-template-columns: repeat(3, 1fr); } }
.pn_sugg__attach-cell {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.06);
}
.pn_sugg__attach-link {
    display: block;
    width: 100%;
    height: 100%;
}
.pn_sugg__attach-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
}
.pn_sugg__attach-meta {
    position: absolute;
    left: 6px; bottom: 6px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}
.pn_sugg__attach-remove {
    position: absolute;
    right: 6px; top: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__attach-remove:hover { background: rgba(176,30,30,.85); }
.pn_sugg__attach-remove i     { font-size: 11px; }

/* Picker buttons (Take photo / Pick from gallery) */
.pn_sugg__attach-pickopts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pn_sugg__attach-pickbtn {
    flex: 1 1 140px;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid rgba(192,167,109,.32);
    background: #fff;
    color: #4a3a14;
    padding: 12px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__attach-pickbtn:hover  { border-color: #8a6c2a; background: rgba(192,167,109,.06); }
.pn_sugg__attach-pickbtn:active { transform: scale(.97); }
.pn_sugg__attach-pickbtn i      { color: #c0a76d; }

/* ---- Voting & engagement card (detail page) ----------------------- */
.pn_sugg__stats {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 14px;
    margin: 0 0 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pn_sugg__stats-head {
    font-size: 12.5px;
    color: #4a3a14;
    margin-bottom: 12px;
}
.pn_sugg__stats-head i { color: #c0a76d; }
.pn_sugg__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}
.pn_sugg__stat-cell {
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(192,167,109,.06);
    border: 1px solid rgba(192,167,109,.18);
}
.pn_sugg__stat-cell i {
    font-size: 14px;
    color: #c0a76d;
    margin-bottom: 4px;
    display: inline-block;
}
.pn_sugg__stat-num {
    font-size: 20px;
    font-weight: 700;
    color: #2a2515;
    line-height: 1.1;
}
.pn_sugg__stat-lbl {
    font-size: 10.5px;
    color: #6c5e3a;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.pn_sugg__stat-cell--up    { background: rgba(31,122,58,.10);  border-color: rgba(31,122,58,.22); }
.pn_sugg__stat-cell--up    i { color: #1f7a3a; }
.pn_sugg__stat-cell--up    .pn_sugg__stat-num { color: #1f5c2c; }
.pn_sugg__stat-cell--down  { background: rgba(176,30,30,.08); border-color: rgba(176,30,30,.22); }
.pn_sugg__stat-cell--down  i { color: #b01e1e; }
.pn_sugg__stat-cell--down  .pn_sugg__stat-num { color: #8b1414; }
.pn_sugg__stat-cell--views { background: rgba(50,90,180,.08); border-color: rgba(50,90,180,.22); }
.pn_sugg__stat-cell--views i { color: #325ab4; }
.pn_sugg__stat-cell--views .pn_sugg__stat-num { color: #1f3c8a; }
.pn_sugg__stat-cell--subs  { background: rgba(192,167,109,.10); border-color: rgba(192,167,109,.28); }
.pn_sugg__stat-cell--subs  i { color: #c0a76d; }
.pn_sugg__stat-cell--subs  .pn_sugg__stat-num { color: #6c4a08; }

/* ---- Voters list (Upvoted by / Downvoted by) --------------------- */
.pn_sugg__voters {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pn_sugg__voters-block      { display: flex; flex-direction: column; gap: 6px; }
.pn_sugg__voters-head {
    font-size: 11.5px;
    font-weight: 700;
    color: #4a3a14;
    display: flex;
    align-items: center;
}
.pn_sugg__voters-block--up   .pn_sugg__voters-head i { color: #1f7a3a; }
.pn_sugg__voters-block--dn   .pn_sugg__voters-head i { color: #b01e1e; }
.pn_sugg__voters-count {
    margin-left: 6px;
    background: rgba(192,167,109,.18);
    color: #6c4a08;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}
.pn_sugg__voters-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pn_sugg__voter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,.02);
}
.pn_sugg__voter-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.pn_sugg__voter-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: #2a2515;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pn_sugg__voter-vote {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.pn_sugg__voter-vote--up   { background: rgba(31,122,58,.16);  color: #1f7a3a; }
.pn_sugg__voter-vote--down { background: rgba(176,30,30,.14);  color: #b01e1e; }
.pn_sugg__voter-when {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: #888;
}
.pn_sugg__voters-more {
    text-align: center;
    font-size: 11px;
    color: #888;
    padding: 4px 0;
    font-style: italic;
}

/* Initially-hidden rows past the first 5 in each voter sub-list.
   Revealed when the parent block gets .pn_sugg__voters-block--expanded
   (via the expand button's onclick). */
.pn_sugg__voter--hidden { display: none; }
.pn_sugg__voters-block--expanded .pn_sugg__voter--hidden { display: flex; }

/* "View all N voters" expand button — same place the inline "+ N more"
   line used to live. Looks like a clean ghost pill so it doesn't
   compete with primary actions. */
.pn_sugg__voters-expand {
    appearance: none;
    -webkit-appearance: none;
    margin: 4px auto 0;
    padding: 7px 14px;
    border: 1px dashed rgba(192,167,109,.40);
    background: transparent;
    color: #6b5a2c;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    align-self: center;
}
.pn_sugg__voters-expand:hover {
    background: rgba(192,167,109,.08);
    border-color: #8a6c2a;
    color: #2a2515;
}
.pn_sugg__voters-expand:active { transform: scale(.96); }
.pn_sugg__voters-expand i      { font-size: 10px; }

/* Make the .pn_sugg__attach-link a clean button (was an <a>) so it
   renders edge-to-edge inside the cell with no default border. */
.pn_sugg__attach-link {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* =============================================================================
 * SECTION: Image lightbox viewer (#kws_lbox)
 * -----------------------------------------------------------------------------
 * Used by the Suggestions attachment grid (kws_sugg_lbox_open) and any
 * future image-gallery surface. Full-screen on mobile; constrained to
 * the phone-frame footprint on desktop so it reads as part of the app.
 * ============================================================================= */
.kws_lbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.kws_lbox--open,
.kws_lbox[aria-hidden="false"] {
    display: flex;
    pointer-events: auto;
}
.kws_lbox__bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    cursor: pointer;
    animation: kws_lbox_fade .18s ease-out;
}
@keyframes kws_lbox_fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.kws_lbox__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;       /* room for the chrome (close + arrows + counter) */
    box-sizing: border-box;
}
.kws_lbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    /* Smooth fade-in when src swaps mid-gallery. */
    animation: kws_lbox_pop .18s ease-out;
}
@keyframes kws_lbox_pop {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Close (×) — top-right */
.kws_lbox__x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.kws_lbox__x:hover  { background: rgba(255, 255, 255, .28); }
.kws_lbox__x:active { transform: scale(.92); }

/* Prev / Next arrows — vertically centred on each side */
.kws_lbox__prev,
.kws_lbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.kws_lbox__prev { left: 14px; }
.kws_lbox__next { right: 14px; }
.kws_lbox__prev:hover, .kws_lbox__next:hover { background: rgba(255, 255, 255, .28); }
.kws_lbox__prev:active { transform: translateY(-50%) scale(.92); }
.kws_lbox__next:active { transform: translateY(-50%) scale(.92); }
.kws_lbox__prev i, .kws_lbox__next i { font-size: 16px; }

/* Counter ("2 / 4") at the bottom centre */
.kws_lbox__counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
}

/* Desktop phone-frame mode — same containment trick as .kws_apgate.
   The lightbox lives at <body> level so its containing block is the
   viewport; calc the phone-frame footprint and pin to that. */
@media (min-width: 600px) and (min-height: 760px) {
    .kws_lbox {
        inset: auto;
        left: 50%;
        right: auto;
        width: 420px;
        max-width: 420px;
        transform: translateX(-50%);
        top:    max(20px, calc((100vh - min(92vh, 900px)) / 2));
        bottom: max(20px, calc((100vh - min(92vh, 900px)) / 2));
        height: auto;
        border-radius: 28px;
        overflow: hidden;
    }
    .kws_lbox__stage { padding: 56px 12px; }
    .kws_lbox__x     { top: 10px; right: 10px;  width: 36px; height: 36px; font-size: 22px; }
    .kws_lbox__prev,
    .kws_lbox__next  { width: 38px; height: 38px; }
    .kws_lbox__prev  { left: 10px; }
    .kws_lbox__next  { right: 10px; }
}

/* ---- Hero actions row (CTA + Roadmap) ----------------------------- */
.pn_sugg__hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.pn_sugg__roadmap-link {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #6b5a2c;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__roadmap-link:hover  { background: rgba(192,167,109,.10); }
.pn_sugg__roadmap-link:active { transform: scale(.97); }
.pn_sugg__roadmap-link i      { color: #c0a76d; }

/* =============================================================================
 * Admin Roadmap kanban (#pn_sugg_roadmap)
 * ============================================================================= */
#pn_sugg_roadmap {
    background: linear-gradient(180deg, #fffaef 0%, #fffefa 110px, #ffffff 200px) #ffffff;
    overflow: hidden !important;
}
.pn_sugg__roadmap-intro {
    padding: 8px 6px 14px;
    font-size: 12.5px;
    color: #555;
    text-align: center;
}
.pn_sugg__kanban {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.pn_sugg__kanban-col {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
    background: rgba(192,167,109,.06);
    border: 1px solid rgba(192,167,109,.18);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}
.pn_sugg__kanban-head {
    padding: 12px 14px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #2a2515;
    border-bottom: 1px solid rgba(192,167,109,.20);
    display: flex;
    align-items: center;
    gap: 4px;
}
.pn_sugg__kanban-head i { color: #c0a76d; }
.pn_sugg__kanban-count {
    margin-left: auto;
    background: rgba(192,167,109,.18);
    color: #6c4a08;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}
.pn_sugg__kanban-body {
    padding: 10px 10px 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pn_sugg__kanban-empty {
    padding: 16px 8px;
    text-align: center;
    font-size: 12px;
    color: #888;
}
.pn_sugg__kanban-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pn_sugg__kanban-card:hover  { border-color: rgba(192,167,109,.32); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.pn_sugg__kanban-card:active { transform: scale(.99); }
.pn_sugg__kanban-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #2a2515;
    margin-bottom: 6px;
    line-height: 1.35;
}
.pn_sugg__kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #6c5e3a;
}
.pn_sugg__kanban-card-meta i { color: #8a6c2a; }

/* ---- Action bar (Subscribe + Delete) ------------------------------- */
.pn_sugg__actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.pn_sugg__actionbtn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #4a3a14;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.pn_sugg__actionbtn:hover  { background: rgba(192,167,109,.10); }
.pn_sugg__actionbtn:active { transform: scale(.97); }
.pn_sugg__actionbtn--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(138,108,42,.22);
}
.pn_sugg__actionbtn--on:hover { color: #fff; filter: brightness(1.06); background: linear-gradient(135deg, #c0a76d, #a88f57); }
.pn_sugg__actionbtn--danger {
    border-color: rgba(176,30,30,.32);
    color: #8b1414;
}
.pn_sugg__actionbtn--danger:hover { background: rgba(176,30,30,.06); }

/* ---- Admin tools panel -------------------------------------------- */
.pn_sugg__admin {
    background: #fff;
    border: 1px dashed rgba(192,167,109,.40);
    border-radius: 12px;
    padding: 12px 14px 10px;
    margin-bottom: 16px;
}
.pn_sugg__admin-head {
    font-size: 11px;
    font-weight: 700;
    color: #6c4a08;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.pn_sugg__admin-head i { color: #c0a76d; }
.pn_sugg__admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    flex-wrap: wrap;
}
.pn_sugg__admin-row > label {
    flex: 0 0 80px;
    font-size: 11.5px;
    font-weight: 600;
    color: #4a3a14;
}
.pn_sugg__admin-row > select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 8px;
    font-size: 12.5px;
    background: #fff;
}
/* Re-use .pn_prf__lang-btn styling for the admin pin button (same
   pill aesthetic). The Profile-scoped rule doesn't reach here, so
   give it a minimal local override. */
.pn_sugg__admin .pn_prf__lang-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.32);
    background: #fff;
    color: #6b5a2c;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pn_sugg__admin .pn_prf__lang-btn--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-color: transparent;
}

/* =============================================================================
 * Corp Contacts (kprocess_14.php)
 * Mirrors the Suggestions / Activity-Log card+drawer pattern. Reuses
 * .pn_alog__drawer for the slide-up shell so we don't duplicate transitions.
 * ============================================================================= */
.pn_kc__container {
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
    padding: 12px 12px calc(82px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
}
.pn_kc__hero {
    background: linear-gradient(135deg, rgba(192,167,109,.12), rgba(192,167,109,.04));
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.pn_kc__hero-title {
    font-size: 14.5px; font-weight: 700; color: #4a3f1c;
}
.pn_kc__hero-title i { color: #c0a76d; margin-right: 4px; }
.pn_kc__hero-sub {
    color: #8a7d5f; font-size: 12px; margin-top: 2px;
}
.pn_kc__admin-row {
    display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.pn_kc__cta {
    appearance: none; cursor: pointer;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-size: 13px; font-weight: 700;
    box-shadow: 0 3px 10px rgba(138,108,42,.22);
    transition: transform .12s, box-shadow .12s;
}
.pn_kc__cta:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(138,108,42,.30); }
.pn_kc__cta:active { transform: scale(.98); }
.pn_kc__btn-soft {
    appearance: none; cursor: pointer;
    padding: 7px 14px;
    border: 1px solid rgba(192,167,109,.40);
    border-radius: 999px;
    background: #fff;
    color: #4a3f1c;
    font-size: 12.5px; font-weight: 600;
    transition: background .12s, transform .12s;
}
.pn_kc__btn-soft:hover { background: #fffaee; }
.pn_kc__btn-soft:active { transform: scale(.98); }
.pn_kc__btn-danger {
    color: #b3261e; border-color: rgba(179,38,30,.40);
}
.pn_kc__btn-danger:hover { background: #fff0ee; }

/* ---- Filter row + chips ------------------------------------------------- */
.pn_kc__filters {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.pn_kc__q {
    flex: 1 1 100%; min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(192,167,109,.35);
    border-radius: 18px;
    background: #fff;
    color: #2a2515;
    font-size: 13.5px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pn_kc__q:focus { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_kc__sel {
    flex: 1 1 30%; min-width: 110px;
    padding: 7px 10px;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 10px;
    background: #fff;
    color: #2a2515;
    font-size: 12.5px;
}
.pn_kc__chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.pn_kc__chip {
    appearance: none; cursor: pointer;
    padding: 5px 12px;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 999px;
    background: #fff;
    color: #6c4a08;
    font-size: 12px; font-weight: 600;
    transition: background .12s, color .12s, border-color .12s;
}
.pn_kc__chip i { margin-right: 4px; opacity: .8; }
.pn_kc__chip:hover { background: #fffaee; }
.pn_kc__chip--on {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    border-color: transparent;
}
.pn_kc__chip--on i { opacity: 1; }

/* ---- Card list ---------------------------------------------------------- */
.pn_kc__list { display: flex; flex-direction: column; gap: 8px; }
.pn_kc__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-left: 4px solid #c0a76d;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.pn_kc__row:hover { box-shadow: 0 4px 14px rgba(138,108,42,.18); }
.pn_kc__row:active { transform: scale(.99); }
.pn_kc__row-main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pn_kc__row-head {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.pn_kc__pinned { color: #c0a76d; font-size: 11px; }
.pn_kc__row-name {
    color: #2a2515; font-weight: 700; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.pn_kc__row-sub {
    color: #6c4a08; font-size: 12px;
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn_kc__row-meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    color: #8a7d5f; font-size: 11px;
    word-break: break-word; overflow-wrap: anywhere;
}
.pn_kc__row-meta i { margin-right: 2px; opacity: .8; }
.pn_kc__row-actions {
    display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto;
}
.pn_kc__act {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(192,167,109,.12);
    color: #6c4a08;
    text-decoration: none;
    font-size: 13px;
    transition: background .12s, transform .12s;
}
.pn_kc__act:hover { background: rgba(192,167,109,.25); }
.pn_kc__act:active { transform: scale(.95); }
.pn_kc__act--wa {
    background: rgba(37,211,102,.15); color: #1f7a3a;
}
.pn_kc__act--wa:hover { background: rgba(37,211,102,.28); }

/* ---- Avatar (image OR initials chip) ------------------------------------ */
.pn_kc__avatar {
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: #fafafa;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.pn_kc__avatar--initials {
    color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pn_kc__avatar--initials span { font-size: 14px; letter-spacing: .03em; }

/* ---- Branch / dept / staff / status chips ------------------------------- */
.pn_kc__branch-chip,
.pn_kc__dept-chip,
.pn_kc__staff-chip,
.pn_kc__status-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.pn_kc__dept-chip   { background: #f0eadb; color: #4a3f1c; }
.pn_kc__staff-chip  { background: rgba(31,122,58,.12); color: #1f7a3a; }
.pn_kc__staff-chip i{ margin-right: 2px; }
.pn_kc__status-chip--on_leave { background: #fff3d9; color: #6c4a08; }
.pn_kc__status-chip--left     { background: #ffe1da; color: #8a3623; }

/* ---- Detail drawer body -------------------------------------------------- */
.pn_kc__detail { display: flex; flex-direction: column; gap: 10px; }
.pn_kc__d-head {
    display: flex; gap: 12px; align-items: center;
}
.pn_kc__d-head-main { flex: 1 1 auto; min-width: 0; }
.pn_kc__d-name {
    font-size: 17px; font-weight: 800; color: #2a2515;
    word-break: break-word;
}
.pn_kc__d-title {
    font-size: 13px; color: #6c4a08; margin-top: 2px;
}
.pn_kc__d-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.pn_kc__d-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 4px 0 8px;
}
.pn_kc__d-tile {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: rgba(192,167,109,.10);
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 12px;
    color: #6c4a08;
    text-decoration: none;
    font-size: 11px; font-weight: 600;
    transition: background .12s, transform .12s;
}
.pn_kc__d-tile i { font-size: 18px; }
.pn_kc__d-tile span { color: #4a3f1c; }
.pn_kc__d-tile:hover { background: rgba(192,167,109,.20); }
.pn_kc__d-tile:active { transform: scale(.97); }
.pn_kc__d-tile--wa {
    background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.25); color: #1f7a3a;
}
.pn_kc__d-tile--wa span { color: #1f5b3d; }
.pn_kc__d-tile--wa:hover { background: rgba(37,211,102,.22); }

.pn_kc__d-admin {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px dashed rgba(192,167,109,.22);
    border-bottom: 1px dashed rgba(192,167,109,.22);
}
.pn_kc__d-section { padding: 4px 0; }
.pn_kc__d-section h4 {
    margin: 8px 0 4px; font-size: 11px;
    color: #8a7d5f; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.pn_kc__d-row {
    display: flex; gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(192,167,109,.18);
    font-size: 13px;
    word-break: break-word;
}
.pn_kc__d-row:last-child { border-bottom: 0; }
.pn_kc__d-lbl {
    flex: 0 0 110px;
    color: #8a7d5f; font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em;
    padding-top: 1px;
}
.pn_kc__d-val { flex: 1 1 auto; color: #2a2515; min-width: 0; }
.pn_kc__d-val a { color: #6c4a08; text-decoration: none; border-bottom: 1px dotted rgba(108,74,8,.4); }
.pn_kc__d-val a:hover { color: #c0a76d; border-bottom-color: #c0a76d; }
.pn_kc__d-icon { margin-right: 6px; color: #c0a76d; opacity: .8; }

/* ---- Compose / edit form ------------------------------------------------ */
.pn_kc__compose {
    display: flex; flex-direction: column; gap: 6px;
    /* Reserve room at the bottom so the sticky Save footer never covers
       the last form field while the user scrolls. */
    padding-bottom: 8px;
}
.pn_kc__compose-head {
    font-size: 16px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(192,167,109,.22);
    margin-bottom: 6px;
    color: #2a2515;
}
.pn_kc__compose-head small { color: #8a7d5f; font-weight: 400; }
.pn_kc__f-section {
    margin-top: 8px; padding: 10px;
    background: #fbf8f1;
    border: 1px solid rgba(192,167,109,.16);
    border-radius: 10px;
}
.pn_kc__f-section h5 {
    margin: 0 0 8px; font-size: 11px;
    color: #8a7d5f; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.pn_kc__f-row {
    display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px;
}
.pn_kc__f-lbl {
    font-size: 11.5px; color: #6c4a08; font-weight: 600;
}
.pn_kc__f-input {
    padding: 8px 10px;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 8px;
    background: #fff;
    color: #2a2515;
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pn_kc__f-input:focus { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
.pn_kc__f-input--ta { min-height: 70px; resize: vertical; font-family: inherit; }
/* Sticky footer for the compose form. The bar is rendered as a direct
   child of #pn_kc_drawer_body (NOT inside the form's flex column) so
   position:sticky anchors against the drawer-body scrollport and not
   against the flex parent. Negative side margins extend the white bg
   to the drawer-body edges, then padding restores button alignment. */
.pn_kc__f-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 18px;
    position: sticky;
    bottom: -24px;            /* counters drawer-body's padding-bottom */
    margin: 8px -18px -24px;  /* extends bg through drawer-body padding */
    background: #fff;
    border-top: 1px solid rgba(192,167,109,.30);
    box-shadow: 0 -6px 18px rgba(0,0,0,.06);
    z-index: 5;
}

/* ---- Visibility radio grid ---------------------------------------------- */
.pn_kc__vis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pn_kc__vis-opt {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.pn_kc__vis-opt:hover { background: #fffaee; }
.pn_kc__vis-opt input { display: none; }
.pn_kc__vis-opt > i {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: #c0a76d;
    font-size: 14px;
    margin-top: 1px;
}
.pn_kc__vis-text { flex: 1 1 auto; min-width: 0; }
.pn_kc__vis-text b {
    display: block;
    font-size: 12.5px; color: #4a3f1c;
}
.pn_kc__vis-text small {
    display: block;
    color: #8a7d5f; font-size: 10.5px;
    line-height: 1.35;
    margin-top: 2px;
}
.pn_kc__vis-opt--on {
    background: linear-gradient(135deg, rgba(192,167,109,.16), rgba(192,167,109,.06));
    border-color: #c0a76d;
    box-shadow: 0 0 0 2px rgba(192,167,109,.20);
}
.pn_kc__vis-opt--on > i { color: #6c4a08; }

/* ---- Avatar upload row inside the compose form -------------------------- */
.pn_kc__f-avatar-row {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pn_kc__f-avatar-row h5 { align-self: stretch; }
.pn_kc__f-avatar-wrap {
    display: flex; justify-content: center;
}
.pn_kc__f-avatar {
    width: 84px; height: 84px;
    background-color: #fafafa;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid rgba(192,167,109,.30);
}
.pn_kc__f-avatar-actions {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}

/* ---- Save-vCard tile (slightly different tint than call/email) ---------- */
.pn_kc__d-tile--save {
    background: rgba(31,90,160,.10);
    border-color: rgba(31,90,160,.22);
    color: #2a4670;
}
.pn_kc__d-tile--save span { color: #2a4670; }
.pn_kc__d-tile--save:hover { background: rgba(31,90,160,.20); }

/* =============================================================================
 * Corp Contacts — Admin control panel
 * ============================================================================= */
.pn_kca__list { display: flex; flex-direction: column; gap: 6px; }
.pn_kca__row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.18);
    border-left: 4px solid #c0a76d;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .15s;
}
.pn_kca__row:hover { box-shadow: 0 4px 12px rgba(138,108,42,.14); }
.pn_kca__row:active { transform: scale(.99); }
.pn_kca__row--sel {
    background: rgba(192,167,109,.08);
    border-color: rgba(192,167,109,.45);
    box-shadow: 0 0 0 2px rgba(192,167,109,.20);
}
.pn_kca__row--del {
    border-left-color: #b3261e;
    background: linear-gradient(0deg, #fff 0%, #fff5f3 100%);
}
.pn_kca__row-main { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pn_kca__row-head {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.pn_kca__row-actions {
    display: flex; gap: 4px; flex: 0 0 auto;
}
.pn_kca__check {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    cursor: pointer;
}
.pn_kca__cbx {
    width: 18px; height: 18px;
    accent-color: #c0a76d;
    cursor: pointer;
}
.pn_kca__act {
    appearance: none; cursor: pointer;
    width: 30px; height: 30px;
    border: 1px solid rgba(192,167,109,.30);
    border-radius: 8px;
    background: #fff;
    color: #6c4a08;
    font-size: 12px;
    transition: background .12s, transform .12s;
    display: flex; align-items: center; justify-content: center;
}
.pn_kca__act:hover { background: #fffaee; }
.pn_kca__act:active { transform: scale(.95); }
.pn_kca__act--restore {
    color: #1f7a3a; border-color: rgba(31,122,58,.40);
}
.pn_kca__act--restore:hover { background: #f0fff5; }
.pn_kca__act--danger {
    color: #b3261e; border-color: rgba(179,38,30,.40);
}
.pn_kca__act--danger:hover { background: #fff0ee; }
.pn_kca__del-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #ffe1da;
    color: #8a3623;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}

/* ---- Bulk-action bar ---------------------------------------------------- */
.pn_kca__bulk {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(192,167,109,.14), rgba(192,167,109,.06));
    border: 1px solid rgba(192,167,109,.28);
    border-radius: 12px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.pn_kca__bulk--on { display: flex; }
.pn_kca__bulk-count {
    font-weight: 700; color: #4a3f1c; font-size: 12.5px;
    margin-right: 4px;
}

/* ============================================================================
 * Signature Tool (kprocess_31 — pn_sigverify)
 * ----------------------------------------------------------------------------
 * Forensic verifier reachable from the home dashboard's Signature Tool tile.
 * Staff pastes the kws:sig:... QR text and the page surfaces the audit row
 * for that signing event. Visual language matches the gold/cream theme used
 * across the rest of the modern stack.
 * ============================================================================ */

#pn_sigverify .bd_container {
    padding: 20px 18px 96px;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 60px; left: 0; right: 0; bottom: 0;
}

.kws_sigtool__intro {
    text-align: center;
    margin: 8px 0 22px;
}
.kws_sigtool__icon {
    width: 64px; height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 16px rgba(120, 90, 30, .22);
}
.kws_sigtool__title {
    font-family: Inter, system-ui, sans-serif;
    font-size: 20px; font-weight: 700;
    color: #2a2515;
    margin-bottom: 4px;
}
.kws_sigtool__sub {
    font-size: 13px; color: #6b6655;
    line-height: 1.45;
    max-width: 360px;
    margin: 0 auto;
}

.kws_sigtool__form {
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.kws_sigtool__label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    color: #6b5524;
    margin-bottom: 6px;
}
.kws_sigtool__input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid rgba(192,167,109,.30);
    border-radius: 10px;
    background: #faf7f0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 13.5px;
    color: #2a2515;
    transition: border-color .15s ease, background .15s ease;
}
.kws_sigtool__input:focus {
    outline: none;
    border-color: #c0a76d;
    background: #fff;
}
.kws_sigtool__btn {
    width: 100%;
    height: 44px;
    margin-top: 12px;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px; font-weight: 600;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(120, 90, 30, .22);
    transition: transform .12s ease, box-shadow .15s ease;
}
.kws_sigtool__btn:hover  { box-shadow: 0 8px 18px rgba(120, 90, 30, .30); }
.kws_sigtool__btn:active { transform: scale(.98); }

.kws_sigtool__result { min-height: 40px; }

/* Verdict card — three colour variants */
.kws_sigtool__verdict {
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.kws_sigtool__verdict--ok {
    background: linear-gradient(135deg, rgba(31,122,58,.08), rgba(31,122,58,.02));
    border: 1px solid rgba(31,122,58,.30);
}
.kws_sigtool__verdict--warn {
    background: linear-gradient(135deg, rgba(192,167,109,.10), rgba(192,167,109,.02));
    border: 1px solid rgba(192,167,109,.34);
}
.kws_sigtool__verdict--bad {
    background: linear-gradient(135deg, rgba(176,30,30,.06), rgba(176,30,30,.02));
    border: 1px solid rgba(176,30,30,.30);
}
.kws_sigtool__verdict-head {
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px; font-weight: 700;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 4px;
}
.kws_sigtool__verdict--ok   .kws_sigtool__verdict-head { color: #1f7a3a; }
.kws_sigtool__verdict--warn .kws_sigtool__verdict-head { color: #8a6c2a; }
.kws_sigtool__verdict--bad  .kws_sigtool__verdict-head { color: #b01e1e; }

.kws_sigtool__verdict-body {
    font-size: 13px; color: #2a2515;
    line-height: 1.5;
}

/* Facts table inside the verdict */
.kws_sigtool__facts {
    background: rgba(255,255,255,.6);
    border-radius: 10px;
    padding: 4px 0;
    margin-top: 8px;
}
.kws_sigtool__fact {
    display: flex;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(192,167,109,.14);
    font-size: 12.5px;
    gap: 10px;
}
.kws_sigtool__fact:last-child { border-bottom: 0; }
.kws_sigtool__fact-l {
    flex: 0 0 110px;
    color: #6b6655;
    font-weight: 500;
}
.kws_sigtool__fact-v {
    flex: 1 1 auto;
    color: #2a2515;
    word-break: break-word;
}

.kws_sigtool__id {
    color: #8a8170;
    font-size: 11px;
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.kws_sigtool__chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(192,167,109,.16);
    color: #6b5524;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
}

.kws_sigtool__sigimg-wrap {
    margin-top: 14px;
    padding: 12px;
    background: #fff;
    border: 1px dashed rgba(192,167,109,.40);
    border-radius: 10px;
    text-align: center;
}
.kws_sigtool__sigimg-label {
    font-size: 11px;
    color: #6b6655;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 6px;
}
.kws_sigtool__sigimg {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    background: #faf7f0;
    border-radius: 6px;
}

/* Phone responsive — tighten labels on narrow screens */
@media (max-width: 380px) {
    .kws_sigtool__fact-l { flex: 0 0 90px; }
    .kws_sigtool__icon { width: 56px; height: 56px; font-size: 22px; }
    .kws_sigtool__title { font-size: 18px; }
}

/* ---- Scan-with-camera primary action ---- */
.kws_sigtool__scanbtn {
    width: 100%;
    height: 54px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px; font-weight: 600;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(120, 90, 30, .26);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .12s ease, box-shadow .15s ease;
}
.kws_sigtool__scanbtn:hover  { box-shadow: 0 10px 22px rgba(120, 90, 30, .32); }
.kws_sigtool__scanbtn:active { transform: scale(.98); }
.kws_sigtool__scanbtn i      { font-size: 18px; }

/* "or paste manually" divider between scan + paste */
.kws_sigtool__or {
    display: flex; align-items: center; justify-content: center;
    margin: 6px 0 12px;
    font-size: 11.5px; color: #8a8170;
    text-transform: uppercase; letter-spacing: .8px;
}
.kws_sigtool__or::before,
.kws_sigtool__or::after {
    content: ''; flex: 1 1 auto;
    border-top: 1px solid rgba(192,167,109,.24);
    margin: 0 12px;
}

/* When the scanner auto-fills the input, flash a subtle gold pulse so
   the user sees what was captured before the verify request fires. */
.kws_sigtool__input--filled {
    animation: kws_sigtool_filled .9s ease;
}
@keyframes kws_sigtool_filled {
    0%   { background: #faf7f0; box-shadow: 0 0 0 0 rgba(192,167,109,.55); }
    35%  { background: #f6efd9; box-shadow: 0 0 0 5px rgba(192,167,109,.18); }
    100% { background: #faf7f0; box-shadow: 0 0 0 0 rgba(192,167,109,0); }
}

/* ---- Full-screen camera overlay ---- */
/* Sits above the page (z-index higher than bottom-tab + most modals).
   html5-qrcode renders a <video> (and a sibling <canvas>) into
   #kws_sigtool_scanview. We size the container square at the viewport
   width so the video preview uses the rear camera's full frame. */
.kws_sigtool__scan {
    position: fixed; inset: 0;
    background: rgba(20, 18, 12, .92);
    display: none;
    flex-direction: column;
    z-index: 9000;
    color: #fff;
}
.kws_sigtool__scan--on { display: flex; }

.kws_sigtool__scan-head {
    height: 56px;
    flex: 0 0 auto;
    display: flex; align-items: center;
    padding: 0 12px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.kws_sigtool__scan-close {
    appearance: none; -webkit-appearance: none;
    border: 0; background: rgba(255,255,255,.08);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background .15s ease;
}
.kws_sigtool__scan-close:hover { background: rgba(255,255,255,.18); }
.kws_sigtool__scan-title {
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px; font-weight: 600;
    letter-spacing: .3px;
    margin-left: 12px;
}

.kws_sigtool__scan-view {
    flex: 1 1 auto;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
/* html5-qrcode injects video directly — make it cover the available area */
.kws_sigtool__scan-view video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
/* Decoder canvas the lib spawns — keep it hidden so only the video shows */
.kws_sigtool__scan-view canvas { display: none !important; }

.kws_sigtool__scan-hint {
    flex: 0 0 auto;
    text-align: center;
    padding: 14px 24px 24px;
    font-size: 12.5px;
    color: rgba(255,255,255,.78);
    line-height: 1.45;
    background: rgba(0,0,0,.35);
}



/* =============================================================================
   SECTION: Offline / Cant-reach-server screen
   -----------------------------------------------------------------------------
   Three pieces:
     #kws_offline       — full-screen recovery page shown when the initial
                          ckssn fetch times out or rejects. Replaces the
                          stuck-splash with a clear retry CTA.
     .kws_netbanner     — slim top banner toggled by online/offline events.
                          Non-blocking, auto-dismisses when connection is back.
     .kws_offline__*    — internal layout / typography for the recovery page.
   Triggered from apps.js by kws_show_offline() / kws_hide_offline().
   ============================================================================= */
#kws_offline {
    background:
        radial-gradient(900px 600px at 50% -20%, rgba(192,167,109,.18), transparent 60%),
        linear-gradient(180deg, #fbfaf6 0%, #f4f1ea 100%);
    z-index: 9000;
}
#kws_offline .kws_offline__container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
}
#kws_offline .kws_offline__icon {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.35),
        0 8px 24px rgba(120,90,30,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: #a98842;
    margin-bottom: 22px;
}
#kws_offline .kws_offline__title {
    font-family: Inter, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #2a2515;
    margin: 0 0 10px;
}
#kws_offline .kws_offline__sub {
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #6e624a;
    max-width: 340px;
    margin: 0 auto 28px;
}
#kws_offline .kws_offline__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #fff;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 14px 28px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(138,108,42,.32);
    transition: transform .12s ease, box-shadow .15s ease;
}
#kws_offline .kws_offline__btn:hover  { box-shadow: 0 8px 20px rgba(138,108,42,.42); }
#kws_offline .kws_offline__btn:active { transform: scale(.97); }
#kws_offline .kws_offline__hint {
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    color: #998c6e;
    margin-top: 24px;
}

/* Slim online/offline banner — pinned to the top of the viewport.
   Background matches the .hp_holder header (same gold gradient + corner
   glow) so the banner reads as an extension of the page chrome instead
   of a stark red foreign element. State is conveyed by the icon + text
   colour:
     - default     → maroon (offline / unreachable)
     - --good      → green  (back online flash, auto-dismisses)
   kws_netbanner_show / kws_netbanner_hide toggle the --shown class. */
.kws_netbanner {
    position: fixed;
    /* Sit BELOW the iOS status-bar safe-area so the user's time / battery
       icons stay visible and the banner doesn't render under them. On
       browsers without safe-area-inset-top the env() returns 0, so on
       desktop and Android the banner just pins to the top of the viewport
       as before. */
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    /* Solid cream — identical to body + .hp_holder for a perfectly
       seamless top chrome when the banner is up. */
    background: #fbfaf6;
    color: #800000;
    text-align: center;
    /* Match .hp_holder geometry exactly so the banner reads as a swap-in
       version of the header bar rather than a thin strip stuck above it.
       height + line-height: 60px (same as .hp_holder).
       padding: 0 (vertical centring done by line-height; no horizontal
       indent since the banner text is centred). */
    height: 60px;
    line-height: 60px;
    padding: 0 12px;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    /* No bottom border + no box-shadow — the banner sits flush against
       the page chrome below it. Same solid cream as .hp_holder so
       there's no visual seam between the banner and the header. */
    z-index: 9999;
    /* translate -200% so the banner is fully tucked above its anchored
       top position when hidden — accounts for the safe-area offset
       plus its own height. */
    transform: translateY(-200%);
    transition: transform .25s ease;
    pointer-events: none;
}
.kws_netbanner--shown { transform: translateY(0); }
.kws_netbanner--good  { color: #1f6b3f; }
.kws_netbanner i      { margin-right: 6px; }

/* Bulletproof visibility gate. The banner ships with `aria-hidden="true"`
 * and only kws_netbanner_show() sets it to "false". So we can use that
 * attribute as the authoritative visibility flag: anything else that adds
 * `kws_netbanner--shown` (stale browser cache, dev-tools experiment,
 * old/cached apps.js without the new show contract) has no effect — the
 * banner stays display:none until aria-hidden flips to "false".
 *
 * Why this exists: on 2026-05-12 we kept getting reports of the static
 * markup text "You're offline" showing on desktop browsers even when the
 * network was fully up. Every JS code path that calls kws_netbanner_show
 * passes its own text, so static-text visibility means SOMETHING was
 * adding the --shown class without going through our helper. Rather than
 * chase the mystery caller, gate visibility on aria-hidden instead. */
.kws_netbanner[aria-hidden="true"] {
    display: none !important;
}

@media (min-width: 600px) {
    /* Match the phone-frame container at desktop sizes. */
    .kws_netbanner {
        left: 50% !important;
        right: auto !important;
        width: 420px;
        max-width: 420px;
        transform: translate(-50%, -100%);
        border-radius: 0 0 14px 14px;
        top: max(20px, calc((100vh - min(92vh, 900px)) / 2)) !important;
    }
    .kws_netbanner--shown { transform: translate(-50%, 0); }
}


/* =============================================================================
 * PASSKEY WELCOME-BACK SCREEN  (#tt_pk_welcome)
 * -----------------------------------------------------------------------------
 * Shown instead of the login page when the device has a registered passkey.
 * Reuses the .login_v2__top / .login_v2__bottom shell so the gold-band + curved-
 * wave look stays consistent with the rest of the auth chrome. Below the
 * fold:
 *   - One big primary Unlock button (gold gradient + fingerprint icon)
 *   - A subtle "Sign in with password" / "Sign in with OTP" fallback row,
 *     hidden until the biometric prompt fails (JS toggles display).
 *   - Error line above the fallback row (also JS-toggled).
 * ============================================================================= */
/* =============================================================================
 * PASSKEY WELCOME-BACK SCREEN — v273 redesign (kws_pkw__*)
 * -----------------------------------------------------------------------------
 * Replaces the old gold-band-top / curved-bottom split with a single unified
 * cream background that matches the rest of the app's top chrome (#fbfaf6),
 * mirroring the reference UX (centered avatar + welcome line + 2x2 tile grid).
 *
 * Visibility rules:
 *   - Bottom tab bar is hidden by to_stage() when pgn === 'tt_pk_welcome'
 *     (added to the pre-auth page list in apps.js).
 *   - Global hamburger (.r_micon) + close × (.r_cbtn) hidden via the same
 *     branch.
 *   - .tt_body / .tt_page already render at full-viewport — no extra layout
 *     overrides needed.
 * ============================================================================= */

/* Force the html element + body to the same cream too — when the iOS PWA
   first paints the standalone window, the html element's background fills
   the safe-area BEFORE any .tt_page positions itself. Without an explicit
   html background here, the safe-area inherits whatever the browser's
   default is (slightly different on some iOS versions, visible as a band
   above the topbar). Pairs with `<meta name="theme-color" content="#fbfaf6">`
   for the Android Chrome status-bar tint. */
html { background: #fbfaf6 !important; }
body { background: #fbfaf6 !important; }

#tt_pk_welcome.tt_page {
    /* !important — guarantees no other .tt_page rule (e.g. legacy white
       overrides) wins. With this + the html/body rules above, the iOS PWA
       status-bar safe-area, the welcome-back body, and the bottom area all
       paint the same cream so there's no visible seam between them. */
    background: #fbfaf6 !important;
    background-color: #fbfaf6 !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Top bar: brand block (logo + name + tagline) on the left, language pill
   on the right. Flex with space-between so the lang pill always hugs the
   right edge regardless of how long the brand text is. */
#tt_pk_welcome .kws_pkw__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 18px 4px;
    padding-top: max(18px, calc(env(safe-area-inset-top) + 12px));
}
#tt_pk_welcome .kws_pkw__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
#tt_pk_welcome .kws_pkw__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;                /* fully round, brand-disc style */
    background: #fff;
    /* Inner gold-tinted ring + soft external glow for depth — same accent
       language as the avatar below, so the brand-mark + avatar feel like a
       matched pair. */
    box-shadow:
        0 0 0 1px rgba(192,167,109,.40) inset,
        0 0 0 3px rgba(192,167,109,.10),
        0 4px 12px rgba(138,108,42,.10);
    overflow: hidden;
    flex: 0 0 auto;
}
#tt_pk_welcome .kws_pkw__brand-mark img {
    width: 26px; height: 26px;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}
#tt_pk_welcome .kws_pkw__brand-stack { min-width: 0; }
#tt_pk_welcome .kws_pkw__brand-name {
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #2a2515;
    letter-spacing: .3px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tt_pk_welcome .kws_pkw__brand-tag {
    font-family: Inter, Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: #8b7e5a;
    letter-spacing: .2px;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Language toggle pill — small, gold-bordered, top-right. Tap flips kws_lang
   + googtrans cookies via apps.js → page reloads in the new language. */
#tt_pk_welcome .kws_pkw__lang {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.45);
    background: rgba(192,167,109,.08);
    color: #6b5a2c;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
#tt_pk_welcome .kws_pkw__lang:hover  {
    background: rgba(192,167,109,.16);
    color: #2a2515;
    border-color: rgba(192,167,109,.65);
}
#tt_pk_welcome .kws_pkw__lang i { font-size: 12px; opacity: .85; }

/* Hero — centered avatar + Welcome Back + first name. */
#tt_pk_welcome .kws_pkw__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 24px 12px;
}
#tt_pk_welcome .kws_pkw__avatar {
    width: 108px; height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(192,167,109,.30),
        0 14px 32px rgba(60,40,0,.16);
    margin: 6px 0 14px;
}
#tt_pk_welcome .kws_pkw__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
#tt_pk_welcome .kws_pkw__greeting {
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6e624a;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}
#tt_pk_welcome .kws_pkw__name {
    font-family: Inter, Arial, sans-serif;
    /* Responsive scale — clamps so the name fits on a 320px-wide phone but
       grows to a comfortable display size on larger viewports. Wrapping is
       allowed (line-height 1.2) for names with 3–4 words. */
    font-size: clamp(15px, 5.2vw, 22px);
    font-weight: 700;
    color: #2a2515;
    margin: 4px 16px 0;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* 2x2 grid of sign-in option tiles. Square cards (aspect-ratio: 1) so the
   layout looks balanced regardless of viewport width. */
#tt_pk_welcome .kws_pkw__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 22px 22px 8px;
    max-width: 420px;
    margin: 0 auto;
}
#tt_pk_welcome .kws_pkw__tile {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(192,167,109,.28);
    background: #fff;
    border-radius: 14px;
    /* Shorter than the v273 square (aspect-ratio: 1) — content height now
       drives the box so the grid sits compactly on one screen on most
       phones without scrolling, even with a long name above. */
    padding: 14px 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: #2a2515;
    font-family: Inter, Arial, sans-serif;
    transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
#tt_pk_welcome .kws_pkw__tile:hover  {
    background: rgba(192,167,109,.06);
    border-color: rgba(192,167,109,.55);
    box-shadow: 0 6px 14px rgba(138,108,42,.08);
}
#tt_pk_welcome .kws_pkw__tile:active { transform: scale(.97); }
#tt_pk_welcome .kws_pkw__tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(192,167,109,.10);
    color: #a98842;
    font-size: 18px;
    margin-bottom: 2px;
}
#tt_pk_welcome .kws_pkw__tile-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #2a2515;
    text-align: center;
}
#tt_pk_welcome .kws_pkw__tile-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: #8b7e5a;
    text-align: center;
    line-height: 1.25;
    margin-top: 1px;
}
/* Primary (Biometric) tile — gold-tinted icon disc to draw the eye. The
   tile body stays white like the others; only the icon is highlighted.
   Removed the v273 "--accent" variant — all four tiles are now visually
   uniform (white body, gold-tinted icon disc on primary). */
#tt_pk_welcome .kws_pkw__tile--primary .kws_pkw__tile-icon {
    background: linear-gradient(135deg, #c0a76d 0%, #a88f57 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(138,108,42,.30);
}

/* Logout row — small, ghost-style. */
#tt_pk_welcome .kws_pkw__logout {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #8b6b2c;
    font-family: Inter, Arial, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin: 14px auto 6px;
    transition: color .15s, background .15s;
}
#tt_pk_welcome .kws_pkw__logout:hover { color: #6b5a2c; background: rgba(192,167,109,.08); }

#tt_pk_welcome .kws_pkw__footer {
    text-align: center;
    font-family: Inter, Arial, sans-serif;
    font-size: 11.5px;
    color: rgba(107,85,36,0.55);
    padding: 8px 16px max(16px, calc(env(safe-area-inset-bottom) + 12px));
}
#tt_pk_welcome .kws_pkw__footer a { color: rgba(107,85,36,0.65); text-decoration: none; }
#tt_pk_welcome .kws_pkw__footer-dot { margin: 0 6px; opacity: .6; }

.kws_pk_err {
    text-align: center;
    color: #8b1414;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    margin: 6px 22px 0;
}


/* =============================================================================
 * PASSKEY SETUP SHEET  (#kws_pk_setup_sheet)
 * -----------------------------------------------------------------------------
 * Post-login one-time offer to enable biometric quick-unlock. Modal-style
 * sheet — backdrop + centered card. Shown by kws_pk_offer_setup() when:
 *   - the device has a platform authenticator
 *   - no kws_pk_hint cookie is already present
 *   - user hasn't tapped "Not now" within the last 30 days
 * ============================================================================= */
.kws_pk_setup_sheet {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;             /* JS sets display: flex when shown */
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.kws_pk_setup_sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,15,5,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.kws_pk_setup_sheet__card {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: linear-gradient(180deg, #fffaee 0%, #fff 100%);
    border: 1px solid rgba(192,167,109,.32);
    border-radius: 16px;
    padding: 24px 22px 18px;
    box-shadow: 0 24px 60px rgba(60,40,0,.32);
    text-align: center;
    font-family: Inter, Arial, sans-serif;
}
.kws_pk_setup_sheet__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow:
        inset 0 0 0 1px rgba(192,167,109,.35),
        0 6px 16px rgba(120,90,30,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #a98842;
    margin: 0 auto 14px;
}
.kws_pk_setup_sheet__title {
    font-size: 17px;
    font-weight: 700;
    color: #2a2515;
    margin: 0 0 6px;
}
.kws_pk_setup_sheet__body {
    font-size: 13.5px;
    line-height: 1.5;
    color: #6e624a;
    margin: 0 0 18px;
}
.kws_pk_setup_sheet__btn-primary {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    background: linear-gradient(135deg, #c0a76d 0%, #a88f57 100%);
    color: #fff;
    font-size: 15px; font-weight: 700;
    padding: 13px 16px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(138,108,42,.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .12s;
}
.kws_pk_setup_sheet__btn-primary:hover  { filter: brightness(1.05); }
.kws_pk_setup_sheet__btn-primary:active { transform: scale(.97); }
.kws_pk_setup_sheet__btn-secondary {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    width: 100%;
    background: transparent;
    color: #6b5a2c;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px;
    margin-top: 4px;
    cursor: pointer;
}
.kws_pk_setup_sheet__btn-secondary:hover { color: #2a2515; }


}
/* ####  end NOT ADOPTED  ################################################## */



/* ---------- Ripple origins (tenant portal) ------------------------------
   The staff app carries these three custom properties as inline style
   attributes on each ripple span. Declared here instead, so the markup stays
   free of styling and the whole animation can be retuned from one place.
   Twelve origins, delays spread across the 20s cycle so rings appear
   continuously rather than in lockstep. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(1 ) { --x: 12%;  --y: 28%;  --d: -0.5s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(2 ) { --x: 28%;  --y: 14%;  --d: -2.1s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(3 ) { --x: 48%;  --y: 22%;  --d: -3.7s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(4 ) { --x: 68%;  --y: 12%;  --d: -5.3s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(5 ) { --x: 86%;  --y: 24%;  --d: -6.9s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(6 ) { --x: 22%;  --y: 50%;  --d: -8.5s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(7 ) { --x: 56%;  --y: 48%;  --d: -10.1s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(8 ) { --x: 80%;  --y: 52%;  --d: -11.7s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(9 ) { --x: 14%;  --y: 76%;  --d: -13.3s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(10) { --x: 42%;  --y: 72%;  --d: -14.9s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(11) { --x: 64%;  --y: 78%;  --d: -16.5s; }
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__ripple:nth-of-type(12) { --x: 88%;  --y: 70%;  --d: -18.1s; }


/* =========================================================================
   TENANT: message dialog  (#msgbox)
   -------------------------------------------------------------------------
   SECTION 4 above carries the staff app's dialog, but every selector in it
   targets #msgbox_v2 / .msg_v2__* and its own show_msg_v2() JS. This portal
   has an older, simpler dialog that apps.js drives from eight places by
   setting #msgbox's display and #msgtext's innerHTML - so rather than port
   that JS and risk every one of those call sites, the same look is applied to
   the markup already here. Both ids are untouched; the only markup change is
   a .msg_kt__panel wrapper so the text and the OK button read as one card
   instead of two floating boxes.

   Written to match SECTION 4's values exactly - same backdrop, radius,
   shadow, icon circle, gold button and pop animation - so the two apps show
   the same dialog even though they are built on different plumbing.
   ========================================================================= */

/* The old rules made this a small centred white box with its own border and
   its own absolute placement. It becomes the backdrop instead, and the panel
   inside it does the presenting. !important throughout because ttstyles.css
   and ttstylesmain.css both style .msg_box and load before this file. */
:is(#msgbox, #ktconfirm) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(40, 30, 10, .45) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    /* Kept ABOVE the page but below nothing else - apps.js toggles
       display between 'none' and 'block', so the centring has to survive
       display:block. align-items/justify-content only apply to a flex
       container, hence the display override below. */
    z-index: 12000 !important;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}
/* apps.js sets display:'block' to open it. That would stack the panel at the
   top-left, so the flex centring is reasserted here - a rule can override an
   inline style only with !important, which is exactly the case for. */
:is(#msgbox, #ktconfirm)[style*="block"] { display: flex !important; }

.msg_kt__panel {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .22);
    text-align: center;
    animation: msg_kt_pop .25s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes msg_kt_pop {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* The heading. Set by kt_msgbox_apply() from the message's own wording, so an
   error reads "Sorry" and a confirmation reads "Done" without the body having
   to repeat it. */
.msg_kt__title {
    font-size: 17px;
    font-weight: 600;
    color: #2a2515;
    margin-bottom: 6px;
}

.msg_kt__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #a98842;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30);
}

/* Tone. Same four palettes as the staff dialog, so an error is recognisable
   before a word of it is read - which was the point of the icon in the first
   place, and what a single gold circle on every message threw away. */
.msg_kt--info    .msg_kt__icon { background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%); color: #a98842; box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.msg_kt--error   .msg_kt__icon { background: linear-gradient(135deg, #fde5e5 0%, #f9c2c2 100%); color: #b00020; box-shadow: inset 0 0 0 1px rgba(176,0,32,.20); }
.msg_kt--warn    .msg_kt__icon { background: linear-gradient(135deg, #fff3d6 0%, #ffd680 100%); color: #b45309; box-shadow: inset 0 0 0 1px rgba(180,83,9,.20); }
.msg_kt--success .msg_kt__icon { background: linear-gradient(135deg, #d8f5e6 0%, #9be3b9 100%); color: #047857; box-shadow: inset 0 0 0 1px rgba(4,120,87,.20); }

/* The message itself. Capped and scrollable so a long server error cannot
   push the OK button off the bottom of a phone screen. */
:is(#msgbox, #ktconfirm) .msg_txt {
    position: static !important;
    /* ttstyles.css pins this at top:40% with transform:translateY(-50%).
       position:static makes the `top` inert but NOT the transform - it kept
       lifting the body half its own height, straight over the title. Both the
       offsets and the transform have to be cleared. */
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    -ms-transform: none !important;
    width: auto !important;
    height: auto !important;
    max-height: 50vh !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #5a5444 !important;
    text-align: center !important;
    overflow-y: auto;
}

#msgbox .msg_okbtn {
    position: static !important;
    /* Same treatment - it was pinned at top:80% with height:20% of the old
       fixed-height box. */
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    width: auto !important;
    height: 44px !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(120, 90, 30, .22);
    transition: transform .12s ease, box-shadow .12s ease;
    user-select: none;
}
#msgbox .msg_okbtn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(120, 90, 30, .22);
}

@media (max-width: 380px) {
    .msg_kt__panel   { padding: 20px 18px 16px; }
    #msgbox .msg_okbtn { min-width: 100px; height: 42px !important; font-size: 13px !important; }
}


/* =========================================================================
   TENANT: verify-your-mobile page  (#pnotppage)
   -------------------------------------------------------------------------
   The band, the rising white card, the labels and the primary button all come
   from the Login section above - its selectors were widened to
   :is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst) rather than duplicated, so the two screens cannot
   drift apart. Only the pieces specific to a code-entry screen are added here:
   the hero text, the four digit cells and the resend line.

   Values are taken from the staff app's SECTION 6 (#tt_fp_verify), which is
   the only OTP screen in the group that has been redesigned - the staff app's
   own login OTP page is still on the same legacy markup this one was.
   ========================================================================= */

:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__hero {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    z-index: 2;              /* above the ripples */
    width: calc(100% - 40px);
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18),
                0 0 0 4px rgba(255, 255, 255, 0.18);
    box-sizing: border-box;
    overflow: hidden;   /* the circle does the clipping now, not the img */
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
    /* NO border-radius here. The wrapper is already a circle; clipping the
       image to its OWN inscribed circle as well is what was cutting the logo.
       This asset is a tall lockup on a square canvas with zero vertical
       margin - ink 55% wide but 99% tall - so its top and bottom sit exactly
       on the image's edge, which a second circular clip removes outright.
       The wrapper's overflow:hidden trims the canvas corners instead, and
       those are white against a white circle, so nothing shows. */
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__heading {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    margin-top: 4px;
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* Four square cells rather than one "0000" box: on a phone it is far easier
   to see how many digits are left, and a mistyped digit can be fixed without
   clearing the lot. */
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__otp-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__otp-cell {
    width: 52px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    color: #2a2515;
    background: #faf7f0;
    border: 1.5px solid rgba(192,167,109,.35);
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    caret-color: #c0a76d;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__otp-cell:focus {
    border-color: #c0a76d;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, .18);
}

:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__resend {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: #6b6655;
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__resend-link {
    color: #a98842;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-left: 4px;
}
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__resend-link:active { transform: scale(.97); }

/* Short phones - the same relief valve the staff screen has. */
@media (max-height: 640px) {
    :is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__hero    { top: 4%; }
    :is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__logo    { width: 52px; height: 52px; padding: 3px; margin-bottom: 6px; }
    :is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__heading { font-size: 18px; }
}
@media (max-width: 340px) {
    :is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__otp-row  { gap: 8px; }
    :is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .fp_v2__otp-cell { width: 46px; height: 50px; font-size: 21px; }
}



/* ---------- Card top padding on the title-less screens -------------------
   The login card opens with an "Sign in" heading, and its 28px top padding is
   measured to sit under that. The OTP and forgot-password cards have no
   in-card title - their heading lives up in the gold band - so the first field
   label landed hard against the curved top edge while the card's whole lower
   half sat empty. Same 48px the staff app uses on .fp_v2__bottom, and for the
   same reason. Scoped by page id so #tthome keeps its measured value. */
:is(#pnotppage, #pn_fpreq, #pn_fpvfy, #pn_fprst) .login_v2__bottom {
    padding-top: 48px;
}


/* ---------- Code-entry screens: centre the label over the cells ----------
   .login_v2__label is left-aligned, which is right above a full-width input.
   On the code screens the four digit cells are a centred row, so a
   left-aligned label sat off to one side of the thing it names. Scoped to the
   two screens whose only field IS the code, so every other label keeps its
   left alignment. */
:is(#pnotppage, #pn_fpvfy) .login_v2__label {
    text-align: center;
    display: block;
}


/* ---------- Tenant quick-access: two columns ----------------------------
   The staff grid is three across, which suits its nine tiles. This portal has
   four, and three-across leaves one stranded on a second row. Two columns give
   a clean 2x2 and larger tap targets. Scoped to #tthomein so the grid is only
   re-columned where those four tiles live. */
#tthomein .qa_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ---------- Logout button on the profile card --------------------------
   The staff card has no logout - that app keeps it in the drawer only. This
   portal shows it on the card because the tenant's card is the one place they
   land, so it is styled here rather than borrowed. Outline rather than solid:
   it sits inside a card that is already gold, and a second filled gold button
   there would compete with the quick-access tiles below for attention. */
#tthomein .profile_card__logout {
    margin: 14px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(140, 30, 30, .35);
    background: rgba(255, 255, 255, .75);
    color: #8b1414;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
#tthomein .profile_card__logout:active {
    transform: translateY(1px);
    background: rgba(176, 30, 30, .08);
}


/* ---------- Refresh button ----------------------------------------------
   Same box, tone and press feedback as the close button, one slot to its left
   so the two read as a pair. .r_cbtn's own rules put it at right: 10px, so the
   offset here is that plus its width. */
.r_rfbtn {
    position: absolute;
    top: 10px;
    right: 56px;
    width: 40px;
    height: 40px;
    display: none;               /* revealed with the close button by apps.js */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fbfaf6;
    color: #a98842;
    cursor: pointer;
    z-index: 12;
    transition: background .15s ease, transform .12s ease;
}
.r_rfbtn i { font-size: 17px; }
.r_rfbtn:active { transform: translateY(1px); background: rgba(192,167,109,.14); }


/* ---------- Header accent bar -------------------------------------------
   A short gold rule before the page title, as the staff header carries. A
   ::before on .hp_holder rather than an element, so no page's markup changes
   to get it and any page added later inherits it. Guarded with :not(:empty)
   because the dashboard's header is deliberately title-less - a bar floating
   above an empty header would be a mark with nothing to mark. */
.hp_holder:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    margin-right: 10px;
    vertical-align: -2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c0a76d, #a98842);
}


/* ---------- Header title: no hamburger, no gap --------------------------
   The shared rule above sets padding-left:60px, and its own comment says why:
   "56px hamburger + 4px breathing". This portal has no hamburger any more -
   the bottom bar's Profile slot opens the drawer - so those 60px were dead
   space holding the title away from the edge for a control that is not there.

   Pulled in to 16px, which is the .bd_container k_pad16 inset, so the title
   now lines up with the left edge of the cards beneath it rather than sitting
   in its own indent. */
.hp_holder {
    padding-left: 16px !important;
}


/* ---------- Confirm dialog (#ktconfirm) --------------------------------
   A two-button dialog for actions worth a second thought - currently Logout.
   It reuses the message dialog's backdrop, panel, icon and title (the
   selectors above cover both ids) and only adds the button row, so the two
   dialogs cannot drift apart visually.

   A separate ELEMENT rather than reusing #msgbox: apps.js opens that one from
   eight places for one-button notices, and giving it a second, cancellable
   mode would mean every one of those callers had to say which mode it wanted. */
.msg_kt__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}
.msg_kt__btn {
    min-width: 118px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .6px;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.msg_kt__btn:active { transform: translateY(1px); }

/* Cancel is the safe choice, so it is the quiet one - outline, not filled. */
.msg_kt__btn--ghost {
    background: #ffffff;
    color: #5a5444;
    border: 1px solid rgba(0, 0, 0, .14);
}
.msg_kt__btn--ghost:active { background: #f6f4ee; }

/* The destructive choice is red rather than the app's gold: gold is the
   colour of every ordinary action here, and "sign out" should not look like
   one of them. */
.msg_kt__btn--danger {
    background: linear-gradient(135deg, #c62828 0%, #a31d1d 100%);
    color: #ffffff;
    border: 0;
    box-shadow: 0 6px 14px rgba(150, 20, 20, .28);
}
.msg_kt__btn--danger:active { box-shadow: 0 3px 8px rgba(150, 20, 20, .28); }

/* The positive choice - approving with a signature. Green, on the same
   emerald the success notice icon uses, so "approve" never wears the colour
   of "sign out" or "decline". Same shape and weight as the red one: only
   the meaning changes, not the button. */
.msg_kt__btn--success {
    background: linear-gradient(135deg, #12995e 0%, #047857 100%);
    color: #ffffff;
    border: 0;
    box-shadow: 0 6px 14px rgba(4, 120, 87, .28);
}
.msg_kt__btn--success:active { box-shadow: 0 3px 8px rgba(4, 120, 87, .28); }

@media (max-width: 380px) {
    .msg_kt__btn { min-width: 104px; height: 44px; font-size: 12.5px; }
}


/* ---------- Every page: content between the header and the bar ----------
   The dashboard already scrolled correctly, but that rule is scoped to
   #tthomein. Every other page fell back to the legacy pair -
   .tt_page { overflow-y: scroll } with .bd_container { position: relative;
   top: 65px } - which scrolls the WHOLE page: the header travels up with the
   content, so cards slide over the title, and the last row disappears behind
   the bottom bar because nothing reserves space for it.

   Generalised here rather than repeated per page id, so a screen added later
   behaves without anyone remembering to add a rule for it. Scoped to a direct
   child .bd_container, which the pre-auth screens (login, welcome, OTP,
   forgot-password) do not use - they lay themselves out and are untouched. */
.tt_body .tt_page { overflow: hidden !important; }

/* The header sits above the scrolling surface rather than in it. */
.tt_body .tt_page > .hp_holder { z-index: 5; }

.tt_body .tt_page > .bd_container {
    position: absolute !important;
    top: 60px !important;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Themed scrollbar, matching the dashboard's. */
    scrollbar-width: thin;
    scrollbar-color: #c0a76d rgba(192,167,109,.10);
}
.tt_body .tt_page > .bd_container::-webkit-scrollbar       { width: 6px; }
.tt_body .tt_page > .bd_container::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
.tt_body .tt_page > .bd_container::-webkit-scrollbar-thumb {
    background: #c0a76d;
    border-radius: 3px;
}

/* Stop the scroll surface AT the bar, not behind it.
   Padding-bottom alone (which is how this was first done, and how the
   dashboard rule still did it) keeps the CONTENT clear but leaves the box
   itself running to bottom:0 - underneath the bar. Two things show: the
   scrollbar track carries on down past the bar and ends beside it, and the
   frame's rounded bottom corners get a straight edge behind them.

   Ending the box at the bar instead means the scrollbar stops where the bar
   starts and the corners stay clean, and the padding only has to provide
   breathing room rather than clearance. 64px is the bar's height; the
   safe-area inset is added for phones whose home indicator sits below it. */
body.kws-has-btab .tt_body .tt_page > .bd_container {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 16px !important;
}

/* The adopted sections give some pages their OWN container rule, each with
   96px of padding-bottom to clear the bar - SECTION 1 for #tthomein, SECTION 7
   for #ttmenu. Those carry an ID, and an id outranks any number of classes, so
   the class-only rule above cannot reach them: the menu kept computing
   padding-bottom: 96px on top of the new bottom offset, leaving 96px of dead
   space under the last row. Overridden at the same id level, one selector per
   page that has its own rule. */
body.kws-has-btab #tthomein .bd_container.k_pad16,
body.kws-has-btab #ttmenu .bd_container,
body.kws-has-btab #pn_msges .bd_container {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 16px !important;
}


/* =========================================================================
   MESSAGES - compose screen adjustments
   -------------------------------------------------------------------------
   Three small things the adopted section did not cover, because the staff
   compose screen is a plain picker list with nothing under it.
   ========================================================================= */

/* The picker group sat flush against the message card below it - no gap at
   all, so the last row and the card read as one block. 14px matches the
   card's own margin-bottom, so the vertical rhythm stays even. Scoped to the
   compose screen: on the list page a section label follows the pickers and
   already brings its own spacing. */
#pn_messages_send .pn_msg__pickers { margin-bottom: 14px; }

/* Selection indicator, as an actual check BOX rather than a bare tick.
   Deliberately the same 18px / radius / gold fill as the login screen's
   Remember-me box, so a checkbox looks the same everywhere in the app.

   It cannot be driven the way that one is (input[type=checkbox]:checked ~ box)
   because these rows are toggled by the legacy tt_checkme(), which writes a
   tick character INTO this element and flips a hidden input's value - the
   value pn_message_post reads. So the checked state keys off :not(:empty)
   instead: empty is an unticked box, anything inside makes it gold. That
   keeps tt_checkme and the send contract untouched. */
.pn_msg__pick-box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #faf7f0;
    border: 1.5px solid rgba(192,167,109,.45);
    border-radius: 5px;
    font-size: 11px;
    line-height: 1;
    color: transparent;          /* the tick is invisible until it is checked */
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pn_msg__pick-box:not(:empty) {
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    border-color: #a98842;
    color: #ffffff;
}

/* Send, switched off. Sending is not wired up yet, so the button says so by
   looking inert instead of accepting a tap that goes nowhere. pointer-events
   is the part that matters - the onclick is removed in the markup as well, so
   this is belt and braces rather than styling standing in for behaviour. */
:is(#tthome, #pnotppage, #tt_welcome, #pn_fpreq, #pn_fpvfy, #pn_fprst, #pn_profile_pwd, #pn_messages_send) .login_v2__btn--off {
    background: linear-gradient(135deg, #ded8ca 0%, #cac2b0 100%);
    color: #fbf9f4;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* The line under the Send button. Centred beneath a full-width button rather
   than hanging off its left edge, and in a softer weight than a form label -
   it is a friendly aside, not an error, and should not read like one. */
#pn_messages_send .pn_msg__send-note {
    margin-top: 9px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: #8a7550;
}


/* =========================================================================
   DASHBOARD - second pass
   ========================================================================= */

/* No header bar on the dashboard. It carried no title, and with the close and
   refresh buttons both hidden on this page there was nothing in it at all -
   60px of empty strip above the card. The bar is gone from the markup, so the
   scroll surface starts at the top of the page instead of below it. */
#tthomein .bd_container.k_pad16 { top: 0 !important; padding-top: 16px !important; }

/* ---------- Greeting -----------------------------------------------------
   Was one small line with the date pushed to the far right, which read as a
   caption rather than an opening. Stacked instead: the greeting leads at a
   size worth reading, the date sits under it as a quiet chip. */
#tthomein .dash__hello {
    display: flex;
    /* Centred, not top-aligned: the text block is two or three lines tall
       depending on the name, so pinning the buttons to its top left them
       riding high on a short name and low on a long one. */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 12px;
}
/* min-width:0 lets a long name shrink instead of shoving the buttons off the
   right edge - a flex item will not go below its content width without it. */
#tthomein .dash__hello-text { flex: 1 1 auto; min-width: 0; }
#tthomein .dash__hello-acts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
#tthomein .dash__act {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(192,167,109,.28);
    background: #fff;
    color: #a98842;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(60,40,0,.05);
    transition: background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
#tthomein .dash__act:active {
    transform: translateY(1px);
    background: rgba(192,167,109,.12);
}
#tthomein .dash__hello-greet {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #2a2515;
    line-height: 1.25;
}
#tthomein .dash__hello-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* ---------- Quick-access tiles ------------------------------------------
   Centred icon over a single word left most of each tile empty, so four
   tiles ate a whole screen and said very little. Left-aligned now, with the
   icon as a rounded square and a line of text under the label saying what
   the tile actually does - the same amount of space, carrying more. */
#tthomein .qa_tile {
    text-align: center;
    padding: 14px 12px 15px;
}
#tthomein .qa_tile__icon {
    width: 38px;
    height: 38px;
    margin: 0 auto 9px;          /* auto sides - the icon centres with the text */
    border-radius: 50%;          /* circle - width and height match, so it is round */
    font-size: 15px;
}
#tthomein .qa_tile__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
    /* The base rule reserves 28px so one- and two-line labels line up across
       a row. With a sub-line underneath doing that job, the reservation only
       shows as a gap between the label and its own description. */
    min-height: 0;
}
#tthomein .qa_tile__sub {
    margin-top: 3px;
    padding: 0 2px;
    font-size: 10.5px;
    line-height: 1.35;
    color: #8a7d5f;
}

/* ---------- Section label ------------------------------------------------
   The drawer's small-caps label, reused so the dashboard's groups are
   titled the same way the rest of the app titles its groups. */
#tthomein .dash__label {
    margin: 18px 4px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #a98842;
}

/* ---------- Announcements ------------------------------------------------
   The dashboard already ran a query for active news on every load and threw
   the rows away - nothing on the page ever read $rco_0. Rendered now, so the
   home screen carries something to read rather than being only a launcher. */
#tthomein .dash_news {
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
    overflow: hidden;
}
#tthomein .dash_news__item {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(192,167,109,.12);
}
#tthomein .dash_news__item:last-child { border-bottom: 0; }
#tthomein .dash_news__title {
    font-size: 12.5px;
    font-weight: 700;
    color: #2a2515;
    line-height: 1.35;
}
#tthomein .dash_news__body {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.5;
    color: #6e624a;
}
#tthomein .dash_news__when {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #a98842;
}

/* Nothing-to-show line inside the announcements card. Quiet, one line, with a
   bell to mark it as an empty state rather than a message in its own right -
   a card with no words in it reads as something that failed to load. */
#tthomein .dash_news__empty {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 14px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #8a7d5f;
}
#tthomein .dash_news__empty i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #c0a76d;
    font-size: 13px;
}


/* =========================================================================
   DASHBOARD - tenancy summary
   -------------------------------------------------------------------------
   The 2x2 counts grid. Layout follows the reference the tenant sent - icon
   over label over a large number, two across - but the palette is this app's
   own gold and cream, not the reference's blue: only the arrangement was
   being asked for.
   ========================================================================= */
#tthomein .stat_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
#tthomein .stat_card {
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    padding: 14px 10px 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
}
#tthomein .stat_card__icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    border-radius: 50%;          /* circle, matching the quick-action tiles */
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #8a6c2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
#tthomein .stat_card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #8a7d5f;
}
#tthomein .stat_card__value {
    margin-top: 5px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    color: #2a2515;
    /* Long values (an amount) shrink rather than wrapping the card open. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Lining, tabular figures. Inter's default numerals are proportional,
       which is what made these read unevenly; tabular also fixes each digit
       to the same width, so a count going from 9 to 10 cannot nudge the
       label beneath it. */
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
/* The second half of a "01/01" pair - present, but not competing with the
   figure that matters. */
#tthomein .stat_card__muted { color: #c3b795; font-weight: 700; }
/* Currency marker: reads as a unit, not as part of the number. */
#tthomein .stat_card__cur {
    margin-right: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #8a7d5f;
    vertical-align: 2px;
}

/* ---------- Long names --------------------------------------------------
   Tenants are often companies, and the table holds names up to 52 characters.
   At the base size the greeting runs to three lines and the card's name
   overruns its own card. PHP measures the string and adds one of these; the
   sizes live here rather than as an inline style. */
#tthomein .dash__hello-greet--sm { font-size: 16px; }
#tthomein .dash__hello-greet--xs { font-size: 13.5px; line-height: 1.3; letter-spacing: .1px; }

#tthomein .profile_card__name--sm { font-size: 15px; letter-spacing: .4px; }
#tthomein .profile_card__name--xs { font-size: 12.5px; letter-spacing: .2px; line-height: 1.35; }


/* =========================================================================
   BASE TYPEFACE
   -------------------------------------------------------------------------
   Inter, which the modern layer above already asks for in two dozen rules and
   which is now actually loaded (see the head of index.php - it never was).
   The fallbacks are the platform's own UI faces, so a failed font request
   degrades to something native rather than to Times.

   Deliberately on `body`, an ELEMENT selector, not on .tt_body. Specificity is
   the point: at 0-0-1 this loses to any class, so .tt_font1 on the bills page
   keeps its own face, while everything that never asked for a font inherits
   Inter. Form controls do not inherit type by default, hence the second rule.
   ========================================================================= */
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input, textarea, select, button { font-family: inherit; }


/* =========================================================================
   LETTER SPACING - tightened for Inter
   -------------------------------------------------------------------------
   These tracking values were set while the app was still rendering in Arial,
   because Inter was referenced but never actually loaded. Inter has wider
   default sidebearings, so the same numbers now read as gappy - most visibly
   on the uppercase labels, where 1.8px on a 10px word pulls it apart.
   Roughly halved throughout. The small uppercase labels keep a little, since
   caps do need some air to stay readable; the large text goes to none, where
   Inter's own spacing is already right.
   ========================================================================= */
#tthomein .profile_card__name      { letter-spacing: .2px; }
#tthomein .profile_card__name--sm  { letter-spacing: .1px; }
#tthomein .profile_card__name--xs  { letter-spacing: 0; }
#tthomein .profile_card__role      { letter-spacing: .7px; }
#tthomein .profile_card__chip      { letter-spacing: .1px; }

#tthomein .dash__hello-greet       { letter-spacing: 0; }
#tthomein .dash__hello-date        { letter-spacing: .1px; }
#tthomein .dash__label             { letter-spacing: .8px; }

#tthomein .stat_card__label        { letter-spacing: .4px; }
#tthomein .stat_card__value        { letter-spacing: 0; }
#tthomein .stat_card__cur          { letter-spacing: .2px; }

#tthomein .qa_tile__label          { letter-spacing: 0; }
#tthomein .dash_news__when         { letter-spacing: .2px; }

/* The drawer's group label, which the message screens borrow - same selector
   as the rule it is correcting, so it wins on order rather than by force. */
:is(#ttmenu, #pn_msges, #pn_messages_send, #pn_approvals) .menu_v2__section { letter-spacing: .8px; }

/* Bottom bar labels are 9-10px caps; .6px was doing the same thing there. */
.kws_btab__btn .kws_btab__lbl { letter-spacing: .3px; }


/* ---------- Approvals pager: the three rules this copy never had -----------
   .pn_task_pager__inp, __info-lbl and __info-val are used by the staff markup
   but have no rules anywhere in this stylesheet, so the number input fell back
   to the browser default - too wide for the pill it sits in, which pushed the
   "of N" out and left it reading "Page ..." - and the two info spans ran
   together as "Showing1-5 of 6". */
#pn_approvals .pn_task_pager__info-lbl { margin-right: 5px; opacity: .75; }
#pn_approvals .pn_task_pager__info-val { font-weight: 700; color: #4a3b1a; }
#pn_approvals .pn_task_pager__inp {
    width: 44px;
    margin: 0 5px;
    padding: 3px 4px;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #4a3b1a;
    background: #fff;
    border: 1px solid rgba(192,167,109,.45);
    border-radius: 7px;
    /* The spinner arrows are useless on a phone and cost the box its width. */
    -moz-appearance: textfield;
    appearance: textfield;
}
#pn_approvals .pn_task_pager__inp::-webkit-outer-spin-button,
#pn_approvals .pn_task_pager__inp::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* The staff details page marks one fact tile --full to span the 2-column grid.
   That modifier is used by the markup but has no rule in this stylesheet, so
   the tile sat in one column and left a hole beside it. */
#pn_approval_dt .pn_tsk__fact--full { grid-column: 1 / -1; }

/* ---------- Approval detail: three more classes this copy never had --------
   pn_tsk__pay-group, pn_tsk__remark and pn_tsk__remark--empty are used by the
   staff detail markup but have no rule anywhere in this stylesheet, so the
   deposit group headings rendered as unstyled body text a size larger than the
   card head above them, and the remark sat flush against the card edge. */
#pn_approval_dt .pn_tsk__pay-group {
    margin: 14px 0 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(192,167,109,.28);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #a98842;
}
#pn_approval_dt .pn_tsk__remark {
    padding: 4px 2px 2px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #4a4338;
}
#pn_approval_dt .pn_tsk__remark--empty {
    color: #9c9382;
    font-style: italic;
}

/* ---------- Units & Pricing panels ---------------------------------------
   The whole pn_tsk__ucard family is used by the staff detail markup and has no
   rule anywhere in this stylesheet - unlike the rest of the task-detail CSS,
   it never came across. Written to match the cards around it: same border,
   radius and gold, one panel per unit with the id left and the amount right. */
#pn_approval_dt .pn_tsk__ucard {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fdfbf6;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 11px;
}
#pn_approval_dt .pn_tsk__ucard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#pn_approval_dt .pn_tsk__ucard-id {
    font-size: 12.5px;
    font-weight: 700;
    color: #2a2515;
    /* A long unit id wraps rather than shoving the amount off the panel. */
    min-width: 0;
    word-break: break-word;
}
#pn_approval_dt .pn_tsk__ucard-id i { color: #a98842; }
#pn_approval_dt .pn_tsk__ucard-sub {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    color: #2a2515;
    white-space: nowrap;
}
#pn_approval_dt .pn_tsk__ucard-cur {
    margin-right: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #8a7d5f;
    vertical-align: 1px;
}
#pn_approval_dt .pn_tsk__ucard-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #8a7d5f;
}

/* ---------- Charge lines inside a unit panel ------------------------------
   One line per charge - rent, service charge, deposit - under the unit's own
   header. The staff app has its own pn_tsk__chg-* family for this, but none of
   it came across into this stylesheet, so these are written to sit with the
   ucard panels around them. */
#pn_approval_dt .pn_tsk__chg {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed rgba(192,167,109,.22);
}
#pn_approval_dt .pn_tsk__chg-name {
    min-width: 0;
    font-size: 11.5px;
    color: #6a5f4a;
}
#pn_approval_dt .pn_tsk__chg-mth {
    margin-left: 5px;
    font-size: 10px;
    color: #9a9080;
}
#pn_approval_dt .pn_tsk__chg-val {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #2a2515;
    white-space: nowrap;
}
/* The discount rides beside the amount it comes off, in the alert red the
   Payment Details card already uses for a discount. */
#pn_approval_dt .pn_tsk__chg-disc {
    margin-left: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #a02929;
}

/* ---------- Approvals list: keep the chips on one line -------------------
   The adopted rule wraps them, which is right for the staff list where a row
   can carry several. A tenant row has exactly two - the contract number and
   the date - and wrapping put the date on a second line and made every row
   taller for nothing. No wrap, and the contract chip gives way first: it is
   the only one that can be long, and the date must stay whole to be read at
   all. min-width:0 is what lets a flex child shrink below its content. */
#pn_approvals .pn_task_row__meta {
    flex-wrap: nowrap;
    min-width: 0;
}
#pn_approvals .pn_task_row__chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The date chip keeps its full width; only the contract number truncates. */
#pn_approvals .pn_task_row__chip:last-child { flex: 0 0 auto; }
#pn_approvals .pn_task_row__chip:first-child { flex: 0 1 auto; }

/* ---------- Greeting: name on its own line -------------------------------
   The greeting keeps the weight; the name sits under it lighter and a size
   down, so a long company name reads as a name rather than as a headline that
   ran out of room. Sizes step with its length - the greeting above never
   varies enough to need it, but the name runs to 52 characters. */
#tthomein .dash__hello-name {
    margin-top: 2px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: #4a4338;
}
#tthomein .dash__hello-name--sm { font-size: 13.5px; }
#tthomein .dash__hello-name--xs { font-size: 12.5px; line-height: 1.35; }

/* ---------- Greeting avatar ----------------------------------------------
   Sits before the greeting, the same face the profile card uses. The ring is
   on the WRAPPER and the image simply fills it - putting a border-radius on
   the <img> as well as the container is what clipped the logo's top and bottom
   earlier in this app, and object-fit:cover is what keeps a non-square source
   from being squashed into the circle. */
#tthomein .dash__hello-av {
    flex: 0 0 auto;
    /* 52px. 70 was tried, to match the height of the three lines beside it,
       and it backfired: the circle is as WIDE as it is tall, so it took enough
       room from the text that a normal company name wrapped to two lines -
       which made the block taller and worse-looking, not better. Sized to
       leave the name on one line instead.
       Also deliberately FIXED rather than align-self:stretch with
       aspect-ratio:1 - that pair feeds back on itself here for the same
       reason, and settles on whatever cap it is given rather than on the
       text's real height. */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid rgba(192,167,109,.5);
    box-shadow: 0 1px 4px rgba(138,108,42,.12);
    line-height: 0;
}
#tthomein .dash__hello-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Profile card title -------------------------------------------
   Sits at the top of the card rather than above it as a section label - the
   card is the thing being titled, so the words belong inside it. Same small
   caps treatment as the section labels elsewhere on the page, and separated
   by a hairline so it reads as a heading rather than as another line of the
   tenant's details. */
#tthomein .profile_card__title {
    position: relative;
    z-index: 1;
    margin: -2px 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(192,167,109,.22);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #a98842;
    text-align: center;
}

/* =========================================================================
   MY TENANCY counters - deliberately NOT the quick-action tile
   -------------------------------------------------------------------------
   The two grids sat side by side looking identical: white card, round gold
   icon disc, centred label. One is a set of buttons and the other is a set of
   figures, and they should not read the same.

   So the counters lose the disc and the centring: the NUMBER leads, large and
   left, with its label beneath it, the icon flattened into the corner as a
   quiet marker rather than the main object, and a tinted ground with a gold
   edge on the left so the block reads as a panel of statistics. The tiles keep
   the white card and the disc, and stay the things you press.
   ========================================================================= */
#tthomein .stat_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 13px 12px 12px;
    background: linear-gradient(135deg, #fffdf6 0%, #f6eeda 100%);
    border: 1px solid rgba(192,167,109,.3);
    border-left: 3px solid #c0a76d;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}
/* Flattened into the top-right corner - a marker, not the subject. */
#tthomein .stat_card__icon {
    position: absolute;
    top: 10px;
    right: 11px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    color: rgba(169,136,66,.38);
}
/* The figure leads. order:-1 lifts it above the label without touching the
   markup, which the dashboard builder shares with nothing else. */
#tthomein .stat_card__value {
    order: -1;
    margin: 0 0 3px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.3px;
    color: #2a2515;
}
#tthomein .stat_card__label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #8a7d5f;
    /* Keeps a two-word label off the icon in the corner. */
    padding-right: 18px;
}
#tthomein .stat_card__muted { color: #bfae86; font-weight: 700; }
#tthomein .stat_card__cur {
    margin-right: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8a7d5f;
    vertical-align: 3px;
}

/* ---------- Decision banner + signature card -----------------------------
   The staff detail page leads a finished task with its outcome and shows the
   signature stamped on it. Its own pn_tsk__decision / sig classes never came
   across into this stylesheet, so they are written here to sit with the cards
   around them. */
#pn_approval_dt .pn_tsk__decision {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -2px 0 12px;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
}
#pn_approval_dt .pn_tsk__decision i { font-size: 15px; }
#pn_approval_dt .pn_tsk__decision--approved {
    background: linear-gradient(135deg, #eefaf1 0%, #e2f4e8 100%);
    border: 1px solid rgba(30,120,60,.22);
    color: #1f5c2c;
}
#pn_approval_dt .pn_tsk__decision--rejected {
    background: linear-gradient(135deg, #fdeeee 0%, #f8e2e2 100%);
    border: 1px solid rgba(140,30,30,.22);
    color: #8b1414;
}

/* The signature sits on its own dashed plate, the way a stamp would. */
#pn_approval_dt .pn_tsk__sigbox {
    margin: 2px 0 10px;
    padding: 12px;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfbf6;
    border: 1px dashed rgba(192,167,109,.5);
    border-radius: 11px;
}
#pn_approval_dt .pn_tsk__sigimg {
    max-width: 100%;
    max-height: 110px;
    /* The stored PNGs are ink on white; multiply drops the white so the
       signature sits on the plate rather than in a box on top of it. */
    mix-blend-mode: multiply;
}
#pn_approval_dt .pn_tsk__signone {
    font-size: 11.5px;
    font-style: italic;
    color: #9c9382;
    text-align: center;
}

/* ---------- Document viewer overlay --------------------------------------
   The staff task viewer's chrome - titled head, scrolling body, foot with zoom
   and actions - on the tenant shell. Fixed rather than absolute so it escapes
   .tt_page's transform: a transformed ancestor becomes the containing block for
   fixed children, which is the trap that mis-positioned the portal dropdowns in
   the staff app. This overlay is a direct child of .tt_body for that reason. */
.kt_doc {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    flex-direction: column;
    background: #fbf8f1;
}
.kt_doc--open { display: flex; }

/* Head */
.kt_doc__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(192,167,109,.22);
    box-shadow: 0 2px 8px rgba(138,108,42,.06);
}
.kt_doc__title {
    font-size: 14px;
    font-weight: 700;
    color: #2a2515;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* The gold rule before the title - the staff viewer's marker. */
.kt_doc__title::before {
    content: "";
    width: 4px;
    height: 18px;
    background: #c0a76d;
    border-radius: 2px;
}
.kt_doc__close {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.kt_doc__close:hover  { background: rgba(192,167,109,.28); }
.kt_doc__close:active { transform: scale(.92); }

/* Body */
.kt_doc__body {
    flex: 1 1 auto;
    min-height: 0;
    /* Matches the viewer page's own ground so the frame's edges do not show as
       a different colour while the document is still loading. */
    background: #f1efe8;
    overflow: auto;
}
/* Same slim gold bar as the document inside the frame, for the rare case this
   container is the one that scrolls. */
.kt_doc__body {
    scrollbar-width: thin;
    scrollbar-color: rgba(192,167,109,.45) rgba(192,167,109,.08);
}
.kt_doc__body::-webkit-scrollbar { width: 8px; height: 8px; }
.kt_doc__body::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
.kt_doc__body::-webkit-scrollbar-thumb {
    background: rgba(192,167,109,.42);
    border-radius: 4px;
}
.kt_doc__body::-webkit-scrollbar-thumb:hover { background: rgba(192,167,109,.62); }
.kt_doc__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #eceae4;
}

/* Foot */
.kt_doc__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid rgba(192,167,109,.22);
    box-shadow: 0 -2px 8px rgba(138,108,42,.06);
}
.kt_doc__zoom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(192,167,109,.10);
    border-radius: 999px;
}
.kt_doc__zoom button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #8a6c2a;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(138,108,42,.10);
    transition: background .15s, transform .15s;
}
.kt_doc__zoom button:hover  { background: rgba(192,167,109,.18); }
.kt_doc__zoom button:active { transform: scale(.92); }
.kt_doc__zoom-val {
    min-width: 50px;
    padding: 0 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #8a6c2a;
    /* Steady width as the number changes, so the buttons either side do not
       shuffle between 90% and 100%. */
    font-variant-numeric: lining-nums tabular-nums;
}
.kt_doc__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kt_doc__dl,
.kt_doc__pr {
    border: 0;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: filter .15s, box-shadow .2s, transform .15s, background .15s;
}
.kt_doc__dl {
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138,108,42,.20);
}
.kt_doc__dl:hover  { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(138,108,42,.30); }
.kt_doc__dl:active { transform: scale(.96); }
.kt_doc__pr {
    background: #fff;
    color: #8a6c2a;
    border: 1.5px solid rgba(192,167,109,.45);
}
.kt_doc__pr:hover  { background: rgba(192,167,109,.10); }
.kt_doc__pr:active { transform: scale(.96); }

/* The foot needs about 435px to lay out at its full size - measured in the
   browser, not estimated - so it has to give ground well before a phone's
   viewport runs out. A typical handset reports 390-430 CSS px. */
@media (max-width: 480px) {
    .kt_doc__foot { gap: 8px; padding: 10px 12px; }
    .kt_doc__actions { gap: 6px; }
    .kt_doc__zoom { gap: 2px; }
    .kt_doc__zoom-val { min-width: 40px; padding: 0 2px; }
    .kt_doc__dl,
    .kt_doc__pr { padding: 9px 12px; font-size: 11.5px; letter-spacing: .6px; }
}
@media (max-width: 430px) {
    .kt_doc__zoom button { width: 30px; height: 30px; }
    /* Icons carry the meaning once there is no room for the words. Done at
       430 rather than 360: between those two widths the Download button was
       pushed off the right edge, which is where the close button also sits. */
    .kt_doc__dl span,
    .kt_doc__pr span { display: none; }
    .kt_doc__dl,
    .kt_doc__pr { padding: 9px 13px; }
}

/* ---- Protected signature preview ----------------------------------------
   Drawn as a background on a div rather than an <img>, so there is no image
   element for "save image as" to target and nothing to drag out. Friction, not
   protection - a screenshot still works, which is exactly why sig_preview.php
   burns a traceable watermark into the pixels rather than relying on this. */
#pn_approval_dt .pn_tsk__sigimg.kt_protected-img {
    display: block;
    width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 8px;
    /* No pointer, no selection, no drag. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
    position: relative;
    overflow: hidden;
}

/* Blanked - the page was hidden, the window lost focus (the Snipping Tool takes
   focus to draw its rectangle, so this fires BEFORE the capture), or
   PrintScreen was pressed. The picture goes and the box says why, so it reads
   as deliberate rather than broken. */
.kt_protected-img.kt_protected-img--blank {
    background-image: none !important;
    background-color: rgba(192, 167, 109, .10);
}
.kt_protected-img.kt_protected-img--blank::after {
    content: 'Hidden \2014 return focus to view';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: rgba(108, 74, 8, .55);
}

/* Outstanding-requirement marks. Set when Approve is pressed with something
   missing, cleared the moment it is put right - a warning that outlives the
   problem trains people to ignore warnings. */
#pn_approval_dt .pn_tsk__sign--needed {
    border-color: #c0392b !important;
    background: rgba(192, 57, 43, .04);
}
#pn_approval_dt .pn_tsk__terms--needed {
    color: #a33226;
}
#pn_approval_dt .pn_tsk__terms--needed input[type="checkbox"] {
    outline: 2px solid #c0392b;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- Consent row on the approval screen ---------------------------------
   Between the signature pad and the buttons, which is the order the reader
   works in: sign, agree, approve. Generous tap target - the whole label
   toggles, not just the 16px box. */
#pn_approval_dt .pn_tsk__terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 2px 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #4a4433;
    cursor: pointer;
}
#pn_approval_dt .pn_tsk__terms input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #a98842;
    cursor: pointer;
}
#pn_approval_dt .pn_tsk__terms a {
    color: #8a6c2a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- The terms sheet ----------------------------------------------------
   Its own overlay rather than the confirm dialog: this is a document to be
   read and scrolled, not a question to be answered, and it needs the height. */
.kt_terms {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: none;
}
.kt_terms--open { display: block; }
.kt_terms__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 12, .55);
    backdrop-filter: blur(2px);
}
.kt_terms__panel {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    /* Not full height: leaving the top visible keeps it reading as a sheet over
       the approval rather than a new screen the reader has navigated to. */
    max-height: 88%;
    display: flex;
    flex-direction: column;
    background: #fbf8f1;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .28);
}
.kt_terms__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(192,167,109,.22);
    border-radius: 16px 16px 0 0;
}
.kt_terms__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #2a2515;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kt_terms__title::before {
    content: "";
    width: 4px;
    height: 18px;
    background: #c0a76d;
    border-radius: 2px;
}
.kt_terms__x {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.kt_terms__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    font-size: 13px;
    line-height: 1.65;
    color: #4a4433;
    scrollbar-width: thin;
    scrollbar-color: rgba(192,167,109,.45) rgba(192,167,109,.08);
}
.kt_terms__body::-webkit-scrollbar { width: 8px; }
.kt_terms__body::-webkit-scrollbar-track { background: rgba(192,167,109,.08); }
.kt_terms__body::-webkit-scrollbar-thumb { background: rgba(192,167,109,.42); border-radius: 4px; }
.kt_terms__intro {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(192,167,109,.10);
    border-radius: 10px;
    font-size: 12.5px;
    color: #6b5524;
}
.kt_terms__body h4 {
    margin: 16px 0 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: #2a2515;
}
.kt_terms__body p { margin: 0 0 4px; }
.kt_terms__ver {
    margin-top: 18px !important;
    font-size: 11px;
    letter-spacing: .4px;
    color: #a8996f;
}
.kt_terms__foot {
    flex: 0 0 auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(192,167,109,.22);
}
.kt_terms__ok {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(138,108,42,.20);
}
.kt_terms__ok:active { transform: scale(.98); }

/* ---- Document viewer: loading skeleton ----------------------------------
   The frame used to sit empty and grey while a few hundred KB of contract
   arrived, with only Download in the foot because the other controls wait for
   the document to report itself ready - which read as broken rather than busy.
   The skeleton is shaped like the paper (header band, field grid, body lines)
   so the wait looks like the thing that is coming. Reuses the shimmer the
   message list already defines. */
.kt_doc__body { position: relative; }

.kt_doc__skel,
.kt_doc__oops {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #f1efe8;
}
/* Hidden by the `hidden` attribute; these rules set display, so they need the
   same !important guard the protected image needed. */
.kt_doc__skel[hidden],
.kt_doc__oops[hidden] { display: none !important; }

.kt_doc__skel-sheet {
    margin: 12px 10px 0;
    padding: 14px 12px 18px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(20, 18, 12, .10);
}
.kt_doc__skel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.kt_doc__skel-logo,
.kt_doc__skel-title,
.kt_doc__skel-bar,
.kt_doc__skel-grid span,
.kt_doc__skel-line {
    display: block;
    border-radius: 4px;
    /* Same cream-tinted sweep as the message skeletons. */
    background: linear-gradient(90deg,
        rgba(192,167,109,.10) 0%,
        rgba(192,167,109,.22) 50%,
        rgba(192,167,109,.10) 100%);
    background-size: 220% 100%;
    animation: pn_msgs_shimmer 1.6s linear infinite;
}
.kt_doc__skel-logo  { width: 46px; height: 34px; flex: 0 0 auto; }
.kt_doc__skel-title { height: 14px; flex: 1 1 auto; }
.kt_doc__skel-bar   { height: 18px; margin-bottom: 10px; }

.kt_doc__skel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}
.kt_doc__skel-grid span { height: 26px; }

.kt_doc__skel-line {
    height: 9px;
    margin-bottom: 8px;
    width: var(--w, 100%);
}

.kt_doc__skel-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: .3px;
    color: #8a7d5f;
}

/* ---- Document viewer: it did not arrive --------------------------------- */
.kt_doc__oops-btn {
    margin-top: 16px;
    padding: 9px 22px;
    border: 1.5px solid rgba(192,167,109,.45);
    border-radius: 10px;
    background: #fff;
    color: #8a6c2a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.kt_doc__oops-btn:hover  { background: rgba(192,167,109,.10); }
.kt_doc__oops-btn:active { transform: scale(.96); }

.kt_doc__oops {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}
.kt_doc__oops i { font-size: 30px; color: #c0a76d; }
.kt_doc__oops-t { font-size: 14px; font-weight: 700; color: #2a2515; }
.kt_doc__oops-s { font-size: 12px; line-height: 1.5; color: #8a7d5f; max-width: 260px; }

/* The date window under a grace-period label. Quiet and on its own line: it
   qualifies the figure on the right rather than competing with it. */
#pn_approval_dt .pn_tsk__row-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1px;
    color: #8a7d5f;
    /* Steady digits so two rows of dates line up under one another. */
    font-variant-numeric: lining-nums tabular-nums;
}

/* Caption under the stamped signature. Quiet on purpose - it explains the
   watermark without competing with the signature it sits beneath. */
#pn_approval_dt .pn_tsk__sigcap {
    margin: 6px 0 12px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .2px;
    color: #8a7d5f;
}

/* Holds the page behind still while a document is open. */
body.kt_doc-lock { overflow: hidden; }

/* The app's own page-close button lives at top:0;right:0 as a 56x60 cream box,
   so while the viewer is open it sits in the same corner as the viewer's own
   close - two X's side by side, and the app's one closes the page BEHIND the
   document rather than the document. Hidden for the duration.
   !important is required, not decorative: apps.js sets #tth_cbtnid's display
   inline on every page change, and an inline style beats a normal rule. */
body.kt_doc-lock #tth_cbtnid { display: none !important; }

/* The zoom pill and Print are hidden via the `hidden` attribute when the frame
   holds a PDF. Needed because their own rules set display:inline-flex, which
   beats the browser's [hidden]{display:none} - without this they would stay
   visible and the attribute would do nothing. */
/* The foot is display:flex, so the hidden attribute needs the same override
   the zoom pill and Print already needed. */
.kt_doc__foot[hidden] { display: none !important; }
.kt_doc__zoom[hidden],
.kt_doc__pr[hidden] { display: none !important; }

/* ---------- Contract Copy row --------------------------------------------
   The staff pn_tsk__doc-action family, which never came across into this
   stylesheet. */
#pn_approval_dt .pn_tsk__doc-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(138,108,42,.05);
}
#pn_approval_dt .pn_tsk__doc-action-info {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
#pn_approval_dt .pn_tsk__doc-action-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #8a6c2a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
#pn_approval_dt .pn_tsk__doc-action-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #2a2515;
}
#pn_approval_dt .pn_tsk__doc-action-sub {
    margin-top: 2px;
    font-size: 11px;
    color: #8a7d5f;
}
#pn_approval_dt .pn_tsk__doc-action-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #c0a76d 0%, #a98842 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    cursor: pointer;
}

/* =========================================================================
   SECTION: Agreements list  (#pn_agreements)  — kprocess_851.php
   -------------------------------------------------------------------------
   Its own visual set rather than borrowing the #pn_approvals rules (those are
   id-scoped), but the same language: gold disc + glyph, a card per row, a
   section band, a status pill. Kept here so the cache-buster on this file
   carries it to the browser like everything else.
   ========================================================================= */
#pn_agreements .bd_container { padding: 14px 12px 90px; }

#pn_agreements .kagr_section {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 2px 10px; }
#pn_agreements .kagr_section:first-of-type { margin-top: 4px; }
#pn_agreements .kagr_section__title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: #8a6c2a; }
#pn_agreements .kagr_section__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }

#pn_agreements .kagr_row {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(192,167,109,.28);
    border-left: 4px solid #c0a76d; border-radius: 14px;
    padding: 13px 14px; margin: 0 0 12px;
    box-shadow: 0 4px 14px rgba(60,40,0,.05);
    cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
#pn_agreements .kagr_row:active { transform: translateY(1px); }
#pn_agreements .kagr_row--ended { border-left-color: #cbb98b; opacity: .96; }

#pn_agreements .kagr_row__icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); color: #8a6c2a; }
#pn_agreements .kagr_row--ended .kagr_row__icon {
    background: linear-gradient(135deg, #faf3e2 0%, #efe4c6 100%); }
#pn_agreements .kagr_row__icon i { font-size: 19px; line-height: 1; color: #8a6c2a; }

#pn_agreements .kagr_row__body { flex: 1 1 auto; min-width: 0; }
#pn_agreements .kagr_row__top {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
#pn_agreements .kagr_row__no {
    font-size: 13.5px; font-weight: 700; color: #3f341a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#pn_agreements .kagr_row__unit { font-size: 12px; color: #8a8170; margin-bottom: 6px; }
#pn_agreements .kagr_row__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#pn_agreements .kagr_chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: #6b5e3a; background: rgba(192,167,109,.12);
    border: 1px solid rgba(192,167,109,.26); border-radius: 999px; padding: 3px 9px; }
#pn_agreements .kagr_chip i { font-size: 10px; color: #a98842; }

#pn_agreements .kagr_badge {
    font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    border-radius: 999px; padding: 3px 9px; }
#pn_agreements .kagr_badge--ok {
    color: #0f7a45; background: linear-gradient(135deg, #d8f5e6 0%, #b8ecce 100%);
    box-shadow: inset 0 0 0 1px rgba(4,120,87,.20); }
#pn_agreements .kagr_badge--pending {
    color: #9a6a12; background: linear-gradient(135deg, #fff1cf 0%, #ffe0a0 100%);
    box-shadow: inset 0 0 0 1px rgba(180,120,20,.22); }
#pn_agreements .kagr_row--pending { border-left-color: #e6b34d; }
#pn_agreements .kagr_badge--muted {
    color: #8a7a4e; background: linear-gradient(135deg, #f1ece0 0%, #e6dcc6 100%);
    box-shadow: inset 0 0 0 1px rgba(150,120,60,.18); }

#pn_agreements .kagr_row__chev { flex: 0 0 auto; color: #c0a76d; font-size: 15px; }

#pn_agreements .kagr_empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 26px 18px; color: #8a8170;
    background: #fff; border: 1px dashed rgba(192,167,109,.4); border-radius: 14px; margin-bottom: 12px; }
#pn_agreements .kagr_empty i { font-size: 26px; color: #c0a76d; }
#pn_agreements .kagr_empty__text { font-size: 13px; line-height: 1.5; }


/* Agreements History pager - mirrors the Approvals pager, scoped here. */
#pn_agreements .pn_task_pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 4px 2px 8px; padding: 10px 12px;
    background: #fff; border: 1px solid rgba(192,167,109,.28);
    border-radius: 12px; box-shadow: 0 4px 12px rgba(60,40,0,.04); }
#pn_agreements .pn_task_pager__info { font-size: 11.5px; color: #8a8170; display: flex; flex-direction: column; }
#pn_agreements .pn_task_pager__info-lbl { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #a99e82; }
#pn_agreements .pn_task_pager__info-val { font-weight: 700; color: #6b5e3a; }
#pn_agreements .pn_task_pager__nav { display: flex; align-items: center; gap: 8px; }
#pn_agreements .pn_task_pager__btn {
    width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
#pn_agreements .pn_task_pager__btn:active { transform: translateY(1px); }
#pn_agreements .pn_task_pager__btn--disabled { opacity: .4; pointer-events: none; }
#pn_agreements .pn_task_pager__page { font-size: 12px; color: #6b5e3a; display: flex; align-items: center; gap: 5px; }
#pn_agreements .pn_task_pager__inp {
    width: 42px; text-align: center; font-size: 12px; font-weight: 700; color: #3f341a;
    border: 1px solid rgba(192,167,109,.4); border-radius: 7px; padding: 4px 2px; background: #fffdf7; }


/* =========================================================================
   SECTION: Agreement detail  (#pn_agreement_dt)  — kprocess_851.php
   Same card language as the Approvals detail, scoped to this page.
   ========================================================================= */
#pn_agreement_dt .bd_container { padding: 14px 12px 90px; }

#pn_agreement_dt .kagr_dt__hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 20px 16px; margin: 4px 0 14px;
    background: linear-gradient(160deg, #fffdf7 0%, #fbf4e4 100%);
    border: 1px solid rgba(192,167,109,.30); border-radius: 16px;
    box-shadow: 0 6px 18px rgba(60,40,0,.06); }
#pn_agreement_dt .kagr_dt__hero-icon {
    width: 54px; height: 54px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 22px; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.34); }
#pn_agreement_dt .kagr_dt__hero-no {
    font-size: 17px; font-weight: 800; color: #3f341a; word-break: break-word; }

#pn_agreement_dt .kagr_dt__card {
    background: #fff; border: 1px solid rgba(192,167,109,.28); border-radius: 14px;
    padding: 4px 14px; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(60,40,0,.05); }
#pn_agreement_dt .kagr_dt__card-head {
    display: flex; align-items: center; gap: 8px; padding: 12px 0 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #8a6c2a; border-bottom: 1px solid rgba(192,167,109,.20); }
#pn_agreement_dt .kagr_dt__card-head i { color: #a98842; }
#pn_agreement_dt .kagr_dt__row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(192,167,109,.14); }
#pn_agreement_dt .kagr_dt__row:last-child { border-bottom: 0; }
#pn_agreement_dt .kagr_dt__label {
    font-size: 12px; color: #8a8170; flex: 0 0 auto; }
#pn_agreement_dt .kagr_dt__val {
    font-size: 13px; font-weight: 600; color: #3f341a; text-align: right;
    word-break: break-word; }

#pn_agreement_dt .kagr_dt__doc {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 0; }
#pn_agreement_dt .kagr_dt__doc-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
#pn_agreement_dt .kagr_dt__doc-icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 17px; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
#pn_agreement_dt .kagr_dt__doc-title { font-size: 13.5px; font-weight: 700; color: #3f341a; }
#pn_agreement_dt .kagr_dt__doc-sub { font-size: 11.5px; color: #8a8170; }
#pn_agreement_dt .kagr_dt__doc-btn {
    flex: 0 0 auto; border: 0; cursor: pointer; color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .5px; border-radius: 10px; padding: 10px 14px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    box-shadow: 0 4px 12px rgba(138,108,42,.24); }
#pn_agreement_dt .kagr_dt__doc-btn:active { transform: translateY(1px); }
/* Tenancy Declaration card (kprocess_851): two papers stacked in one card,
   the serial + Issued pill above them. */
#pn_agreement_dt .kagr_dt__doc + .kagr_dt__doc { border-top: 1px solid rgba(192,167,109,.14); }
#pn_agreement_dt .kagr_dt__decl {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 0 4px; border-bottom: 1px solid rgba(192,167,109,.14); }
#pn_agreement_dt .kagr_dt__decl-no { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; color: #3f341a; }

/* the shared status pill + empty state used on the detail too */
#pn_agreement_dt .kagr_badge {
    font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    border-radius: 999px; padding: 3px 9px; }
#pn_agreement_dt .kagr_badge--ok {
    color: #0f7a45; background: linear-gradient(135deg, #d8f5e6 0%, #b8ecce 100%);
    box-shadow: inset 0 0 0 1px rgba(4,120,87,.20); }
#pn_agreement_dt .kagr_badge--pending {
    color: #9a6a12; background: linear-gradient(135deg, #fff1cf 0%, #ffe0a0 100%);
    box-shadow: inset 0 0 0 1px rgba(180,120,20,.22); }
#pn_agreement_dt .kagr_badge--muted {
    color: #8a7a4e; background: linear-gradient(135deg, #f1ece0 0%, #e6dcc6 100%);
    box-shadow: inset 0 0 0 1px rgba(150,120,60,.18); }
#pn_agreement_dt .kagr_empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 30px 18px; color: #8a8170;
    background: #fff; border: 1px dashed rgba(192,167,109,.4); border-radius: 14px; }
#pn_agreement_dt .kagr_empty i { font-size: 26px; color: #c0a76d; }
#pn_agreement_dt .kagr_empty__text { font-size: 13px; line-height: 1.5; }




/* =========================================================================
   CONTACTS page  (#pn_contact - pages/kprocess_5.php)
   -------------------------------------------------------------------------
   A department directory grouped by Kate group company. Rows follow the
   staff Corp Contacts card (avatar disc, name, subtitle, meta line, action
   buttons on the right) so a contact looks the same to whoever is looking,
   with the group header in this portal's dashboard-tile language. Every
   rule is scoped to #pn_contact; nothing else can be affected.
   ========================================================================= */
#pn_contact {
    background: linear-gradient(180deg, #fbf8f1 0%, #f6efe1 100%);
}

/* ---- Intro card --------------------------------------------------------- */
#pn_contact .pn_kct__hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, rgba(192,167,109,.14), rgba(192,167,109,.04));
    border: 1px solid rgba(192,167,109,.22);
    border-radius: 14px;
}
#pn_contact .pn_kct__hero-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(138,108,42,.25);
}
#pn_contact .pn_kct__hero-title { font-size: 15px; font-weight: 700; color: #1c2748; }
#pn_contact .pn_kct__hero-sub   { font-size: 12px; line-height: 1.5; color: #6e624a; margin-top: 2px; }

/* ---- Company group ------------------------------------------------------ */
#pn_contact .pn_kct__group { margin-top: 18px; }
#pn_contact .pn_kct__ghead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 8px;
}
#pn_contact .pn_kct__gicon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #a98842;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.35);
}
#pn_contact .pn_kct__gname {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #a98842;
}
#pn_contact .pn_kct__gsub { font-size: 12px; color: #8a7d5f; margin-top: 1px; }

/* ---- Rows --------------------------------------------------------------- */
#pn_contact .pn_kct__list { display: flex; flex-direction: column; gap: 8px; }
#pn_contact .pn_kct__row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid rgba(192,167,109,.20);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(60,40,0,.05);
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
#pn_contact .pn_kct__row:hover {
    border-color: rgba(192,167,109,.45);
    box-shadow: 0 4px 12px rgba(138,108,42,.14);
}
#pn_contact .pn_kct__row:active { transform: scale(.99); }
#pn_contact .pn_kct__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    color: #8a6c2a;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.35);
}
#pn_contact .pn_kct__main  { flex: 1 1 auto; min-width: 0; }
#pn_contact .pn_kct__title { font-size: 14px; font-weight: 700; color: #1c2748; line-height: 1.3; }
#pn_contact .pn_kct__sub   { font-size: 12px; color: #6e624a; line-height: 1.4; margin-top: 1px; }
#pn_contact .pn_kct__num {
    font-size: 12.5px;
    font-weight: 600;
    color: #8a6c2a;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#pn_contact .pn_kct__num i { font-size: 11px; opacity: .85; }

/* Action buttons: call, WhatsApp, email, open. Same 36px round targets as
   the staff row; WhatsApp keeps the brand green so it reads at a glance. */
#pn_contact .pn_kct__acts { flex: 0 0 auto; display: flex; gap: 6px; }
#pn_contact .pn_kct__act {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(192,167,109,.14);
    color: #8a6c2a;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
#pn_contact .pn_kct__act:hover  { background: rgba(192,167,109,.28); }
#pn_contact .pn_kct__act:active { transform: scale(.92); }
#pn_contact .pn_kct__act--wa {
    background: rgba(37,211,102,.14);
    color: #1e9e52;
    font-size: 17px;
}
#pn_contact .pn_kct__act--wa:hover { background: rgba(37,211,102,.26); }

/* The emergency line stands apart: red-toned disc and number, so it can be
   found in a hurry without reading. */
#pn_contact .pn_kct__row--urgent {
    border-color: rgba(176,30,30,.25);
    background: linear-gradient(135deg, #fff7f7 0%, #fff 100%);
}
#pn_contact .pn_kct__row--urgent .pn_kct__icon {
    background: linear-gradient(135deg, #ffe3e3 0%, #ffc9c9 100%);
    color: #b62a2a;
    box-shadow: inset 0 0 0 1px rgba(176,30,30,.22);
}
#pn_contact .pn_kct__row--urgent .pn_kct__num { color: #b62a2a; }
#pn_contact .pn_kct__row--urgent .pn_kct__act { background: rgba(176,30,30,.10); color: #b62a2a; }

@media (max-width: 360px) {
    #pn_contact .pn_kct__sub { display: none; }
    #pn_contact .pn_kct__acts { gap: 4px; }
    #pn_contact .pn_kct__act { width: 32px; height: 32px; font-size: 13px; }
}


/* Agreement detail - Review Approval banner + Unit cards (kprocess_851) */
#pn_agreement_dt .kagr_dt__review {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 14px; margin: 0 0 14px; border-radius: 14px;
    background: linear-gradient(135deg, #fff1cf 0%, #ffe1a3 100%);
    border: 1px solid rgba(180,120,20,.28);
    box-shadow: 0 6px 16px rgba(180,120,20,.16); }
#pn_agreement_dt .kagr_dt__review:active { transform: translateY(1px); }
#pn_agreement_dt .kagr_dt__review-ic {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 18px; color: #fff;
    background: linear-gradient(135deg, #e0a52a, #c07f12);
    box-shadow: 0 3px 8px rgba(180,120,20,.30); }
#pn_agreement_dt .kagr_dt__review-tx { flex: 1 1 auto; min-width: 0; }
#pn_agreement_dt .kagr_dt__review-t {
    font-size: 13px; font-weight: 800; color: #7a5310; letter-spacing: .3px; }
#pn_agreement_dt .kagr_dt__review-s { font-size: 11.5px; color: #8a6a2a; line-height: 1.4; }
#pn_agreement_dt .kagr_dt__review-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #fff;
    background: linear-gradient(135deg, #c07f12, #9a6410);
    border-radius: 999px; padding: 7px 12px; }

#pn_agreement_dt .kagr_unit {
    background: #fff; border: 1px solid rgba(192,167,109,.28);
    border-left: 4px solid #c0a76d; border-radius: 14px;
    padding: 4px 14px; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(60,40,0,.05); }
#pn_agreement_dt .kagr_unit__head {
    display: flex; align-items: center; gap: 11px; cursor: pointer;
    padding: 10px 0; list-style: none; user-select: none; }
/* kill the native disclosure triangle in every engine */
#pn_agreement_dt .kagr_unit__head::-webkit-details-marker { display: none; }
#pn_agreement_dt .kagr_unit__head::marker { content: ''; }
#pn_agreement_dt .kagr_unit__chev {
    margin-left: auto; color: #c0a76d; font-size: 13px; transition: transform .2s ease; }
#pn_agreement_dt details.kagr_unit[open] .kagr_unit__chev { transform: rotate(180deg); }
#pn_agreement_dt .kagr_unit__grid--empty {
    grid-template-columns: 1fr !important; font-size: 12px; color: #a99e82; font-style: italic; }
#pn_agreement_dt .kagr_unit__icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 17px; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
#pn_agreement_dt .kagr_unit__id { flex: 1 1 auto; min-width: 0; }
#pn_agreement_dt .kagr_unit__no { font-size: 13.5px; font-weight: 700; color: #3f341a; word-break: break-word; }
#pn_agreement_dt .kagr_unit__bld { font-size: 11.5px; color: #8a8170; margin-top: 2px; }
#pn_agreement_dt .kagr_unit__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
    margin: 0; padding: 6px 0 14px; border-top: 1px solid rgba(192,167,109,.16); }
#pn_agreement_dt .kagr_fact { display: flex; flex-direction: column; gap: 2px; }
#pn_agreement_dt .kagr_fact__label {
    font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: #a99e82; }
#pn_agreement_dt .kagr_fact__val { font-size: 12.5px; font-weight: 600; color: #3f341a; word-break: break-word; }
#pn_agreement_dt .kagr_section { display: flex; align-items: center; gap: 8px; margin: 16px 2px 10px; }
#pn_agreement_dt .kagr_section__title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #8a6c2a; }
#pn_agreement_dt .kagr_section__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }


/* =========================================================================
   SECTION: Settings  (#pn_settings)  — kprocess_853.php
   ========================================================================= */
#pn_settings .bd_container { padding: 14px 12px 90px; }
#pn_settings .kset__card {
    background: #fff; border: 1px solid rgba(192,167,109,.28); border-radius: 14px;
    padding: 4px 14px; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(60,40,0,.05); }
#pn_settings .kset__card-head {
    display: flex; align-items: center; gap: 8px; padding: 12px 0 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #8a6c2a; border-bottom: 1px solid rgba(192,167,109,.20); }
#pn_settings .kset__card-head i { color: #a98842; }

#pn_settings .kset__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(192,167,109,.14); }
#pn_settings .kset__row:last-child { border-bottom: 0; }
#pn_settings .kset__row--action { cursor: pointer; }
#pn_settings .kset__row--action:active { opacity: .7; }
#pn_settings .kset__row--disabled { opacity: .6; }
#pn_settings .kset__row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#pn_settings .kset__row-ic {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 16px; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
#pn_settings .kset__row-t { font-size: 13.5px; font-weight: 700; color: #3f341a; }
#pn_settings .kset__row-s { font-size: 11.5px; color: #8a8170; line-height: 1.4; margin-top: 2px; }
#pn_settings .kset__chev { color: #c0a76d; font-size: 14px; }
#pn_settings .kset__soon {
    font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: #8a7a4e; background: linear-gradient(135deg, #f1ece0 0%, #e6dcc6 100%);
    border-radius: 999px; padding: 2px 7px; vertical-align: middle; margin-left: 4px; }

/* Toggle switch */
#pn_settings .kset__switch {
    flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px;
    display: inline-flex; align-items: center; cursor: pointer; transition: background .2s ease;
    background: #d8d2c4; }
#pn_settings .kset__switch--on { background: linear-gradient(135deg, #12995e 0%, #047857 100%); }
#pn_settings .kset__switch--locked { cursor: not-allowed; }
#pn_settings .kset__switch-inp { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#pn_settings .kset__switch--locked .kset__switch-inp { cursor: not-allowed; }
#pn_settings .kset__switch-dot {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
#pn_settings .kset__switch--on .kset__switch-dot { transform: translateX(20px); }
/* RTL: the dot travels the other way */
#pn_settings[dir="rtl"] .kset__switch-dot { left: auto; right: 3px; }
#pn_settings[dir="rtl"] .kset__switch--on .kset__switch-dot { transform: translateX(-20px); }

/* Language segmented control */
#pn_settings .kset__seg-help { font-size: 11.5px; color: #8a8170; padding: 10px 0 8px; }
#pn_settings .kset__seg {
    display: flex; gap: 8px; padding: 0 0 14px; }
#pn_settings .kset__seg-opt {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 10px; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 700;
    color: #6b5e3a; background: #fbf7ee; border: 1px solid rgba(192,167,109,.28); }
#pn_settings .kset__seg-opt--on {
    color: #fff; cursor: default; border-color: transparent;
    background: linear-gradient(135deg, #c0a76d, #a88f57); box-shadow: 0 4px 12px rgba(138,108,42,.22); }
#pn_settings .kset__seg-tick { font-size: 10px; display: none; }
#pn_settings .kset__seg-opt--on .kset__seg-tick { display: inline; }


/* =========================================================================
   Change-password: strength meter + requirement tips  (#pn_profile_pwd)
   ========================================================================= */
#pn_profile_pwd .pwd_meter {
    display: flex; align-items: center; gap: 10px; margin: 8px 2px 2px; }
#pn_profile_pwd .pwd_meter__track {
    flex: 1 1 auto; height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(192,167,109,.18); }
#pn_profile_pwd .pwd_meter__fill {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: #d64545; transition: width .2s ease, background .2s ease; }
#pn_profile_pwd .pwd_meter__lbl {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .3px; min-width: 42px; text-align: right; }
#pn_profile_pwd .pwd_tips {
    list-style: none; margin: 10px 2px 0; padding: 0; }
#pn_profile_pwd .pwd_tips li {
    font-size: 11.5px; color: #8a8170; padding: 3px 0; transition: color .15s ease; }
#pn_profile_pwd .pwd_tips li i { color: #c7bda3; width: 14px; }
#pn_profile_pwd .pwd_tips li.pwd_tip--ok { color: #0f7a45; }
#pn_profile_pwd .pwd_tips li.pwd_tip--ok i { color: #12995e; }
#pn_profile_pwd .pwd_note {
    font-size: 11px; color: #a99e82; line-height: 1.5; margin: 10px 2px 2px; }




/* =========================================================================
   SECTION: Maintenance requests  (#pn_maint / #pn_maint_new / #pn_maint_dt)
   pages/kprocess_853.php
   -------------------------------------------------------------------------
   Same language as the Agreements list and detail (kagr_*): gold disc +
   glyph, a card per row, a section band, a status pill - so a request looks
   like an agreement looks like an approval. The form adds the controls the
   other pages do not have: a unit picker, category chips with a tick, a
   textarea, a two-way priority switch, a contact field and a photo picker.
   Every rule is scoped to the three page ids; nothing else can be affected.
   ========================================================================= */
#pn_maint .bd_container,
#pn_maint_new .bd_container,
#pn_maint_dt .bd_container { padding: 14px 12px 90px; }

/* ---- Section band (list) ---------------------------------------------- */
#pn_maint .kmt_section {
    display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px; }
#pn_maint .kmt_section__title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: #8a6c2a; }
#pn_maint .kmt_section__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }

/* ---- New request call to action (list) ----------------------------------- */
#pn_maint .kmt_cta {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; margin: 4px 0 6px;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    border-radius: 16px; color: #fff; cursor: pointer;
    box-shadow: 0 8px 22px rgba(138,108,42,.28);
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent; }
#pn_maint .kmt_cta:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(138,108,42,.22); }
#pn_maint .kmt_cta__icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.18); font-size: 18px; }
#pn_maint .kmt_cta__text { flex: 1 1 auto; min-width: 0; }
#pn_maint .kmt_cta__title { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
#pn_maint .kmt_cta__sub { font-size: 12px; opacity: .92; line-height: 1.4; margin-top: 2px; }
#pn_maint .kmt_cta__chev { flex: 0 0 auto; font-size: 15px; opacity: .85; }

#pn_maint .kmt_note {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 4px 0 6px;
    background: #fff; border: 1px solid rgba(192,167,109,.28); border-radius: 14px;
    font-size: 12.5px; line-height: 1.5; color: #6b5e3a; }
#pn_maint .kmt_note i { color: #a98842; margin-top: 2px; }

/* ---- Rows (list) ---------------------------------------------------------- */
#pn_maint .kmt_row {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(192,167,109,.28);
    border-left: 4px solid #c0a76d; border-radius: 14px;
    padding: 13px 14px; margin: 0 0 12px;
    box-shadow: 0 4px 14px rgba(60,40,0,.05);
    cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent; }
#pn_maint .kmt_row:active { transform: translateY(1px); }
#pn_maint .kmt_row--closed { border-left-color: #cbb98b; opacity: .96; }
#pn_maint .kmt_row--hold   { border-left-color: #e6b34d; }
#pn_maint .kmt_row__icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); color: #8a6c2a; }
#pn_maint .kmt_row--closed .kmt_row__icon { background: linear-gradient(135deg, #faf3e2 0%, #efe4c6 100%); }
#pn_maint .kmt_row__icon i { font-size: 18px; line-height: 1; color: #8a6c2a; }
#pn_maint .kmt_row__body { flex: 1 1 auto; min-width: 0; }
#pn_maint .kmt_row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
#pn_maint .kmt_row__no { font-size: 13px; font-weight: 700; color: #3f341a; }
#pn_maint .kmt_row__title {
    font-size: 13.5px; font-weight: 700; color: #1c2748; line-height: 1.35; margin-bottom: 6px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#pn_maint .kmt_row__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#pn_maint .kmt_row__chev { flex: 0 0 auto; color: #c0a76d; font-size: 15px; }

/* Shared: chips and status pills, on every one of the three pages. */
#pn_maint .kmt_chip, #pn_maint_dt .kmt_chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: #6b5e3a; background: rgba(192,167,109,.12);
    border: 1px solid rgba(192,167,109,.26); border-radius: 999px; padding: 3px 9px; }
#pn_maint .kmt_chip i, #pn_maint_dt .kmt_chip i { font-size: 10px; color: #a98842; }
#pn_maint .kmt_badge, #pn_maint_dt .kmt_badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    border-radius: 999px; padding: 3px 9px; }
#pn_maint .kmt_badge i, #pn_maint_dt .kmt_badge i { font-size: 9px; }
#pn_maint .kmt_badge--open, #pn_maint_dt .kmt_badge--open {
    color: #8a6c2a; background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.34); }
#pn_maint .kmt_badge--hold, #pn_maint_dt .kmt_badge--hold {
    color: #9a6a12; background: linear-gradient(135deg, #fff1cf 0%, #ffe0a0 100%);
    box-shadow: inset 0 0 0 1px rgba(180,120,20,.22); }
#pn_maint .kmt_badge--closed, #pn_maint_dt .kmt_badge--closed {
    color: #0f7a45; background: linear-gradient(135deg, #d8f5e6 0%, #b8ecce 100%);
    box-shadow: inset 0 0 0 1px rgba(4,120,87,.20); }
#pn_maint .kmt_badge--urgent, #pn_maint_dt .kmt_badge--urgent {
    color: #8b1414; background: linear-gradient(135deg, #ffe3e3 0%, #ffc9c9 100%);
    box-shadow: inset 0 0 0 1px rgba(176,30,30,.22); }

#pn_maint .kmt_empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 26px 18px; color: #8a8170;
    background: #fff; border: 1px dashed rgba(192,167,109,.4); border-radius: 14px; margin-bottom: 12px; }
#pn_maint .kmt_empty i { font-size: 26px; color: #c0a76d; }
#pn_maint .kmt_empty__text { font-size: 13px; line-height: 1.5; }

/* ---- Cards (form + detail) ---------------------------------------------- */
#pn_maint_new .kmt_card, #pn_maint_dt .kmt_card {
    background: #fff; border: 1px solid rgba(192,167,109,.28); border-radius: 14px;
    padding: 4px 14px 14px; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(60,40,0,.05); }
#pn_maint_new .kmt_card__head, #pn_maint_dt .kmt_card__head {
    display: flex; align-items: center; gap: 8px; padding: 12px 0 10px;
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #8a6c2a; border-bottom: 1px solid rgba(192,167,109,.20); margin-bottom: 12px; }
#pn_maint_new .kmt_card__head i, #pn_maint_dt .kmt_card__head i { color: #a98842; }
#pn_maint_new .kmt_card__opt {
    margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .6px;
    color: #a99e82; background: rgba(192,167,109,.12); border-radius: 999px; padding: 2px 8px; }
#pn_maint_new .kmt_card__hint { font-size: 12px; color: #8a8170; line-height: 1.45; margin: -4px 0 10px; }
#pn_maint_new .kmt_card__hint--gap { margin: 10px 0 12px; }

/* ---- Unit picker (form) -------------------------------------------------- */
#pn_maint_new .kmt_unit-one {
    display: flex; align-items: center; gap: 12px; padding: 4px 2px; color: #3f341a; }
#pn_maint_new .kmt_unit-one > i { font-size: 20px; color: #a98842; }
#pn_maint_new .kmt_unit-one__id { font-size: 14px; font-weight: 700; }
#pn_maint_new .kmt_unit-one__prop { font-size: 12px; color: #8a8170; margin-top: 1px; }
#pn_maint_new .kmt_units { display: flex; flex-direction: column; gap: 8px; }
#pn_maint_new .kmt_unit {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid rgba(192,167,109,.30); border-radius: 12px; background: #fffdf7;
    cursor: pointer; color: #3f341a; -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease; }
#pn_maint_new .kmt_unit > i { font-size: 18px; color: #a98842; }
#pn_maint_new .kmt_unit__id { font-size: 13.5px; font-weight: 700; }
#pn_maint_new .kmt_unit__prop { font-size: 12px; color: #8a8170; margin-top: 1px; }
#pn_maint_new .kmt_unit__cno { white-space: nowrap; color: #6b5e3a; font-weight: 600; }
#pn_maint_new .kmt_unit__cno i { font-size: 10px; color: #a98842; }
#pn_maint_new .kmt_unit--on {
    border-color: #c0a76d; background: linear-gradient(135deg, #fff5dd 0%, #f6ecd2 100%);
    box-shadow: 0 0 0 3px rgba(192,167,109,.18); }

/* ---- Category chips (form) --------------------------------------------- */
#pn_maint_new .kmt_cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#pn_maint_new .kmt_cat {
    position: relative; display: flex; align-items: center; gap: 9px;
    padding: 10px 26px 10px 10px; min-height: 58px;   /* room on the right for the tick */
    border: 1px solid rgba(192,167,109,.30); border-radius: 12px; background: #fffdf7;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
#pn_maint_new .kmt_cat:active { transform: scale(.98); }
#pn_maint_new .kmt_cat__icon {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%); color: #8a6c2a;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
#pn_maint_new .kmt_cat__text { flex: 1 1 auto; min-width: 0; }
#pn_maint_new .kmt_cat__title { font-size: 12.5px; font-weight: 700; color: #1c2748; line-height: 1.25; }
#pn_maint_new .kmt_cat__sub { font-size: 10.5px; color: #8a8170; line-height: 1.3; margin-top: 2px; }
#pn_maint_new .kmt_cat__tick {
    position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 9px;
    background: #c0a76d; color: #fff; opacity: 0; transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease; }
#pn_maint_new .kmt_cat--on {
    border-color: #c0a76d; background: linear-gradient(135deg, #fff5dd 0%, #f6ecd2 100%);
    box-shadow: 0 0 0 3px rgba(192,167,109,.18); }
#pn_maint_new .kmt_cat--on .kmt_cat__icon { background: linear-gradient(135deg, #c0a76d, #a88f57); color: #fff; }
#pn_maint_new .kmt_cat--on .kmt_cat__tick { opacity: 1; transform: scale(1); }
@media (max-width: 360px) { #pn_maint_new .kmt_cats { grid-template-columns: 1fr; } }

/* ---- Textarea + field (form) ------------------------------------------- */
#pn_maint_new .kmt_ta {
    /* explicit height: the legacy textarea{height:100%} rule otherwise sizes it to the card */
    width: 100%; box-sizing: border-box; height: 112px; min-height: 112px; resize: vertical;
    padding: 11px 13px; border: 1px solid rgba(192,167,109,.35); border-radius: 12px;
    background: #fffdf7; color: #2a2515; font-size: 14px; line-height: 1.5; font-family: inherit;
    outline: none; transition: border-color .15s, box-shadow .15s; }
#pn_maint_new .kmt_ta:focus { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); background: #fff; }
#pn_maint_new .kmt_field { margin-top: 2px; }
#pn_maint_new .kmt_field__label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: #8a7d5f; margin: 0 2px 6px; }
#pn_maint_new .kmt_field__box {
    display: flex; align-items: center; gap: 10px; padding: 0 13px;
    border: 1px solid rgba(192,167,109,.35); border-radius: 12px; background: #fffdf7; }
#pn_maint_new .kmt_field__box:focus-within { border-color: #c0a76d; box-shadow: 0 0 0 3px rgba(192,167,109,.18); background: #fff; }
#pn_maint_new .kmt_field__box i { color: #a98842; font-size: 13px; }
#pn_maint_new .kmt_field__input {
    flex: 1 1 auto; min-width: 0; height: 42px; border: 0; background: transparent; outline: none;
    color: #2a2515; font-size: 14px; font-family: inherit; padding: 0; border-radius: 0; }
/* The box carries the focus ring; the legacy input:focus border must not draw a second one. */
#pn_maint_new .kmt_field__input:focus { border: 0; outline: none; box-shadow: none; }

/* ---- Priority switch (form) -------------------------------------------- */
#pn_maint_new .kmt_prio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#pn_maint_new .kmt_prio__opt {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 42px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #6b5e3a;
    border: 1px solid rgba(192,167,109,.30); background: #fffdf7; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease; }
#pn_maint_new .kmt_prio__opt--on {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #c0a76d, #a88f57); box-shadow: 0 4px 12px rgba(138,108,42,.25); }
#pn_maint_new .kmt_prio__opt--urgent.kmt_prio__opt--on {
    background: linear-gradient(135deg, #d24a4a, #b62a2a); box-shadow: 0 4px 12px rgba(176,30,30,.25); }

/* ---- Photo (form) ------------------------------------------------------- */
#pn_maint_new .kmt_photo input[type="file"] { display: none; }
#pn_maint_new .kmt_photo__pick {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 20px 12px; border: 1px dashed rgba(192,167,109,.5); border-radius: 12px;
    background: #fffdf7; color: #8a6c2a; font-size: 13px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
#pn_maint_new .kmt_photo__pick i { font-size: 22px; color: #c0a76d; }
#pn_maint_new .kmt_photo__preview { display: none; position: relative; }
#pn_maint_new .kmt_photo__preview img {
    display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px;
    border: 1px solid rgba(192,167,109,.30); }
#pn_maint_new .kmt_photo__remove {
    position: absolute; top: 8px; right: 8px; padding: 6px 10px; border-radius: 999px;
    background: rgba(20,18,12,.72); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
#pn_maint_new .kmt_photo--has .kmt_photo__pick { display: none; }
#pn_maint_new .kmt_photo--has .kmt_photo__preview { display: block; }

/* ---- Send button (form) -------------------------------------------------- */
#pn_maint_new .kmt_actions { margin: 4px 0 0; }
#pn_maint_new .kmt_btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 50px; border-radius: 14px; font-size: 14.5px; font-weight: 800; letter-spacing: .3px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, filter .15s ease; }
#pn_maint_new .kmt_btn:active { transform: scale(.98); }
#pn_maint_new .kmt_btn--send {
    color: #fff; background: linear-gradient(135deg, #c0a76d, #a88f57);
    box-shadow: 0 8px 22px rgba(138,108,42,.28); }
#pn_maint_new .kmt_btn--busy { opacity: .75; pointer-events: none; }

/* ---- Detail -------------------------------------------------------------- */
#pn_maint_dt .kmt_dt__hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 20px 16px 18px; margin: 4px 0 14px;
    background: linear-gradient(160deg, #fffdf7 0%, #fbf4e4 100%);
    border: 1px solid rgba(192,167,109,.30); border-radius: 16px;
    box-shadow: 0 6px 18px rgba(60,40,0,.06); }
#pn_maint_dt .kmt_dt__hero--closed { background: linear-gradient(160deg, #fbfdf9 0%, #eef8f1 100%); border-color: rgba(4,120,87,.18); }
#pn_maint_dt .kmt_dt__hero-icon {
    width: 54px; height: 54px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 22px; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.34); }
#pn_maint_dt .kmt_dt__hero-no { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #8a7d5f; }
#pn_maint_dt .kmt_dt__hero-title { font-size: 16px; font-weight: 800; color: #1c2748; line-height: 1.3; }
#pn_maint_dt .kmt_dt__hero-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
#pn_maint_dt .kmt_dt__cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#pn_maint_dt .kmt_dt__note { font-size: 13.5px; line-height: 1.6; color: #2a2515; white-space: pre-wrap; word-break: break-word; }
#pn_maint_dt .kmt_dt__note--muted { color: #8a8170; font-style: italic; }
#pn_maint_dt .kmt_dt__photo { display: block; margin-top: 12px; }
#pn_maint_dt .kmt_dt__photo img {
    display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px;
    border: 1px solid rgba(192,167,109,.30); }
#pn_maint_dt .kmt_dt__row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(192,167,109,.14); }
#pn_maint_dt .kmt_dt__row:last-child { border-bottom: 0; padding-bottom: 2px; }
#pn_maint_dt .kmt_dt__label { font-size: 12px; color: #8a8170; flex: 0 0 auto; }
#pn_maint_dt .kmt_dt__val { font-size: 13px; font-weight: 600; color: #3f341a; text-align: right; word-break: break-word; }
#pn_maint_dt .kmt_dt__sub { display: block; font-size: 11.5px; font-weight: 500; color: #8a8170; margin-top: 1px; }


/* =========================================================================
   RTL (Arabic) fixes — mirror the directional chrome and set an Arabic font.
   Scoped to html[dir="rtl"], so English is untouched. Icons keep the Font
   Awesome family (their own .fas/.far rule wins over body inheritance).
   ========================================================================= */
/* A good standard Arabic typeface EVERYWHERE in Arabic. It has to be forced on
   every element: dozens of components hardcode font-family: Inter / Arial, and
   those fonts have no real Arabic, so their text fell back to an ugly system
   Arabic while the components that inherit (e.g. the AI chat) looked right. The
   universal rule fixes all of them; the rule right after re-asserts the Font
   Awesome family for icons, at higher specificity, so glyphs are untouched. */
html[dir="rtl"] * {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}
html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .far,
html[dir="rtl"] .fal,
html[dir="rtl"] .fab,
html[dir="rtl"] .fa-solid,
html[dir="rtl"] .fa-regular,
html[dir="rtl"] .fa-brands,
html[dir="rtl"] [class^="fa-"],
html[dir="rtl"] [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* --- Header chrome: mirror title, accent bar + close / refresh ----------
   LTR pins the title 16px from the left with a gold ::before accent before it,
   and the close/refresh on the right. In RTL the title goes tight to the RIGHT
   (16px), its accent bar keeps its gap on the correct side (margin-left, not
   -right), and the close/refresh sit on the LEFT - so nothing overlaps the
   title and the accent no longer touches it. */
html[dir="rtl"] .hp_holder {
    text-align: right !important;
    padding-right: 16px !important;  /* reading-start edge, matches LTR's 16 */
    padding-left: 56px !important;   /* clear the close / refresh on the left */
}
html[dir="rtl"] .hp_holder:not(:empty)::before {
    margin-right: 0 !important;
    margin-left: 10px !important;
}
html[dir="rtl"] .r_micon {          /* hamburger -> right */
    left: auto !important; right: 0 !important;
}
html[dir="rtl"] .r_cbtn {           /* close (x) -> left */
    right: auto !important; left: 0 !important;
}
html[dir="rtl"] .r_rfbtn {          /* refresh -> left, inside the close */
    right: auto !important; left: 56px !important;
}

/* --- Dashboard stat cards: mirror the corner icon, accent bar and label --
   The live design pins the faint icon top-RIGHT, the gold bar on the LEFT edge
   and left-aligns the figure. In RTL all three must flip, or the icon lands on
   top of the right-aligned number - which was the "icon mess". */
html[dir="rtl"] #tthomein .stat_card {
    text-align: right;
    border-left: 1px solid rgba(192,167,109,.3);
    border-right: 3px solid #c0a76d;
}
html[dir="rtl"] #tthomein .stat_card__icon {
    right: auto; left: 11px;
}
html[dir="rtl"] #tthomein .stat_card__label {
    padding-right: 0; padding-left: 18px;
}
html[dir="rtl"] #tthomein .stat_card__cur {
    margin-right: 0; margin-left: 3px;
}

/* Notification badge on the quick-action tiles -> mirrored corner. */
html[dir="rtl"] #tthomein .qa_tile__badge,
html[dir="rtl"] #pn_approvals .qa_tile__badge,
html[dir="rtl"] .qa_tile__badge {
    right: auto; left: -6px;
}

/* --- Approvals / Agreements rows: left accent bar to the right edge ------ */
html[dir="rtl"] #pn_agreements .kagr_row,
html[dir="rtl"] #pn_agreement_dt .kagr_unit {
    border-left: 1px solid rgba(192,167,109,.28);
    border-right: 4px solid #c0a76d;
}


/* Language switcher button in the dashboard header (kprocess_0). Text, not an
   icon - shows the language it switches TO. Gold pill so it reads as an action,
   not a status. Same 36px height as the sibling round buttons. */
#tthomein .dash__act--lang {
    /* Same transparent look as the + / bell buttons - white with a gold ring
       and gold text - just widened to fit the language label. */
    width: auto;
    min-width: 36px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #a98842;
    border: 1px solid rgba(192,167,109,.28);
    background: #fff;
    box-shadow: 0 2px 6px rgba(60,40,0,.05);
}
#tthomein .dash__act--lang:active { transform: translateY(1px); }

/* Numeric stat values read LEFT-TO-RIGHT even in Arabic, so "1/11" and
   "QAR 0.00" keep their order instead of the bidi algorithm splitting them. */
html[dir="rtl"] #tthomein .stat_card__value { direction: ltr; }


/* --- RTL: icon-to-text gap inside chips / logout / rows ------------------
   These use margin-right on the icon (LTR gap) or a bare &nbsp;. In RTL the
   icon sits on the reading-start (right) side, so margin-right lands on the
   outer edge and the icon touches the text. Flip to a flex gap so the space is
   between icon and text whichever way the row runs. */
html[dir="rtl"] #tthomein .profile_card__chip { gap: 4px; }
html[dir="rtl"] #tthomein .profile_card__chip i { margin-right: 0; margin-left: 0; }
html[dir="rtl"] #tthomein .profile_card__logout { gap: 6px; }
/* Agreements / settings rows that put an icon before a label the same way. */
html[dir="rtl"] #pn_agreements .kagr_row__unit i,
html[dir="rtl"] #pn_agreement_dt .kagr_row__unit i { margin-left: 4px; }


/* --- RTL: Kate AI header (#pn_ai) -----------------------------------------
   LTR puts the title on the left and stacks the New / History / More buttons
   (and popover) on the right. Mirror all of it: title to the right, the three
   buttons and the popover to the left. The global close (x) is already sent
   left by the .r_cbtn rule above; the AI buttons clear it. */
html[dir="rtl"] #pn_ai .pn_ai__hdr-title {
    /* A little more inset than the LTR 16px so the Arabic title does not sit
       tight against the rounded right edge of the frame. */
    left: 212px !important; right: 22px !important; text-align: right !important;
    padding-right: 4px !important;
}
html[dir="rtl"] #pn_ai .pn_ai__hdr-btn--more { right: auto !important; left: 50px !important; }
html[dir="rtl"] #pn_ai .pn_ai__hdr-btn--hist { right: auto !important; left: 86px !important; }
html[dir="rtl"] #pn_ai .pn_ai__hdr-btn--new  { right: auto !important; left: 122px !important; }
html[dir="rtl"] #pn_ai .pn_ai__more { right: auto !important; left: 44px !important; }


/* =========================================================================
   Install-app banner (#kt_install) - sits above the bottom tab bar.
   ========================================================================= */
.kt_install {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 900;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fffdf7 0%, #fbf3e2 100%);
    border: 1px solid rgba(192,167,109,.35);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(60,40,0,.16);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    pointer-events: none;
}
.kt_install[data-state="show"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.kt_install__icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    background: linear-gradient(135deg, #c0a76d, #a88f57);
    box-shadow: 0 3px 8px rgba(138,108,42,.3);
}
.kt_install__body { flex: 1 1 auto; min-width: 0; }
.kt_install__title { font-size: 13.5px; font-weight: 800; color: #3f341a; }
.kt_install__text { font-size: 11.5px; color: #8a7d5f; line-height: 1.4; margin-top: 2px; }
.kt_install__btn {
    flex: 0 0 auto; border: 0; cursor: pointer; color: #fff;
    font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
    border-radius: 10px; padding: 9px 16px;
    background: linear-gradient(135deg, #12995e 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(4,120,87,.28);
}
.kt_install__btn:active { transform: translateY(1px); }
.kt_install__close {
    position: absolute; top: -8px;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(192,167,109,.4); background: #fff; color: #8a7d5f;
    font-size: 11px; cursor: pointer; box-shadow: 0 2px 6px rgba(60,40,0,.12);
}
/* Close sits on the trailing corner, mirrored in RTL. */
:root .kt_install__close { right: -8px; }
html[dir="rtl"] .kt_install__close { right: auto; left: -8px; }
html[dir="rtl"] .kt_install__icon { box-shadow: 0 3px 8px rgba(138,108,42,.3); }


/* ===========================================================================
 * kt_toast — transient, self-dismissing status (download starting, etc.).
 * Non-blocking: sits above the viewer toolbar, fades in/out, never dims the
 * page. Paired with kt_toast() in apps.js.
 * ======================================================================== */
.kt_toast {
    position: fixed;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%) translateY(12px);
    max-width: 82%;
    padding: 11px 18px;
    border-radius: 12px;
    background: rgba(32, 26, 20, .94);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.kt_toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
html[dir="rtl"] .kt_toast { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }

/* ===========================================================================
 * Alerts inbox (kprocess_856 / #pn_alerts) + the unread badges.
 * ======================================================================== */
.kt_notif_badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: #b23b3b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.dash__act--bell { position: relative; }
html[dir="rtl"] .kt_notif_badge { right: auto; left: -4px; }

/* Side padding like every other list page (Agreements / Maintenance / Payments
   all use 14px 12px) - without it the cards ran edge to edge. Bottom is
   overridden by the bottom-bar rule when the bar is up. */
#pn_alerts .bd_container { padding: 14px 12px 24px; }
.kt_alert_list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 10px; }
.kt_alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 30px 14px 14px;
    background: #fff;
    border: 1px solid rgba(138,108,42,.14);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(60,45,15,.06);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.kt_alert:hover  { box-shadow: 0 5px 16px rgba(60,45,15,.11); }
.kt_alert:active { transform: scale(.99); }
/* Unread: softer cream + a crisp gold accent down the leading edge (inset so it
   follows the rounded corner and adds no layout width), plus the dot. */
.kt_alert--unread {
    background: #fdf8ec;
    border-color: rgba(138,108,42,.24);
    box-shadow: inset 3px 0 0 #c0a76d, 0 2px 10px rgba(60,45,15,.06);
}
html[dir="rtl"] .kt_alert--unread { box-shadow: inset -3px 0 0 #c0a76d, 0 2px 10px rgba(60,45,15,.06); }
.kt_alert__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(192,167,109,.16);
    color: #8a6c2a;
    font-size: 15px;
}
.kt_alert--unread .kt_alert__icon { background: rgba(192,167,109,.22); color: #8a6c2a; }
.kt_alert__body { flex: 1 1 auto; min-width: 0; }
.kt_alert__title { font-size: 14px; font-weight: 700; color: #2a2515; line-height: 1.3; }
.kt_alert__text  { font-size: 13px; color: #5b5033; line-height: 1.4; margin-top: 3px; }
.kt_alert__time  { font-size: 11.5px; color: #9a8f6d; margin-top: 6px; }
.kt_alert__dot {
    position: absolute; top: 14px; right: 12px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #b23b3b;
}
html[dir="rtl"] .kt_alert__dot { right: auto; left: 12px; }

.kt_alert_empty { text-align: center; padding: 54px 24px; }
.kt_alert_empty__icon {
    width: 66px; height: 66px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(192,167,109,.14);
    color: #b8a668; font-size: 26px;
}
.kt_alert_empty__title { font-size: 16px; font-weight: 700; color: #4a3a14; }
.kt_alert_empty__text  { font-size: 13px; color: #8a7c55; margin-top: 6px; line-height: 1.5; }
html[dir="rtl"] .kt_alert__title, html[dir="rtl"] .kt_alert__text,
html[dir="rtl"] .kt_alert_empty__title, html[dir="rtl"] .kt_alert_empty__text {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}