/* Cloud Banking staff pages, on top of the shared theme (core/sookth.css). */

/* Sign-in pages: the light / dark switch in a corner (top corner on phones, below). */
.auth-theme { position: fixed; right: 1rem; bottom: 1rem; }

/* Sign-in: Cloud Banking's brand panel beside the card (the gateway's family, in orange). */
.bk-split {
    display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 430px);
    justify-content: center; align-content: center; place-items: stretch; gap: 0; padding: 2rem 1rem;
}
.bk-split .auth-card { max-width: none; border-radius: 0 18px 18px 0; min-height: 100%; justify-content: center; }
.bk-brand {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem 1.75rem;
    /* Navy (user, 2026-10-29), white text, a little lighter behind the coin (design B). */
    background: radial-gradient(circle at 50% 46%, #22396b 0%, #13213f 62%); color: #fff;
    border: 3px solid var(--ink); border-right: 0; border-radius: 18px 0 0 18px; box-shadow: var(--shadow-lg);
}
.bk-brand > * { position: relative; z-index: 1; }
.bk-brand-top { display: flex; align-items: center; gap: .8rem; }
.bk-brand-top .brand-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 4px; }
.bk-brand-top strong { display: block; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.bk-brand-top span { font-weight: 700; font-size: .9rem; color: rgba(255, 255, 255, .75); }
/* Design B (user, 2026-10-29): one clear middle - the coin with the headline centred under it -
   and the products as a row of tiles at the bottom. */
.bk-hero { margin-block: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; }
.bk-brand-big { margin: 0; font-size: 1.9rem; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.bk-brand-big span { display: block; margin-top: .3rem; font-size: 1.05rem; letter-spacing: 0; color: var(--orange); }
.bk-dock { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; }
.bk-dock li { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; color: rgba(255, 255, 255, .85); }
.bk-dock-tile { width: 42px; height: 42px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--on-color); }
.bk-dock-tile .icon { width: 19px; height: 19px; }
/* The golden rupee coin: floating, turning now and then, with a shine, sparkles and a soft gold glow behind. */
.bk-coin-stage { position: relative; width: 220px; height: 196px; display: grid; place-items: center; perspective: 600px; }
.bk-coin-stage::before { content: ""; position: absolute; inset: 18px 30px 30px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 184, 61, .35) 0%, rgba(245, 184, 61, 0) 70%); }
.bk-coin { position: relative; width: 150px; height: 150px; animation: bk-coin-float 4s ease-in-out infinite; }
.bk-coin svg { width: 100%; height: 100%; display: block; animation: bk-coin-turn 7s ease-in-out infinite; transform-style: preserve-3d; }
.bk-coin-edge { fill: url(#bk-silver); stroke: #4b5563; stroke-width: 3; }
.bk-coin-ridges { fill: none; stroke: rgba(75, 85, 99, .45); stroke-width: 4; stroke-dasharray: 1.6 2.2; }
.bk-coin-dots { fill: none; stroke: #6b7280; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 7; }
.bk-coin-core { fill: url(#bk-gold); stroke: #8a5a00; stroke-width: 2.5; }
.bk-rupee, .bk-rupee-light { fill: none; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.bk-rupee { stroke: #7a4f00; }
.bk-rupee-light { stroke: rgba(255, 244, 200, .9); }
.bk-coin-shine { fill: rgba(255, 255, 255, .55); transform: skewX(-20deg); animation: bk-coin-shine 7s ease-in-out infinite; }
.bk-coin-shadow { position: absolute; bottom: 4px; left: 50%; width: 96px; height: 12px; margin-left: -48px; border-radius: 50%;
    background: rgba(0, 0, 0, .35); filter: blur(3px); animation: bk-coin-shadow 4s ease-in-out infinite; }
.bk-spark { position: absolute; width: 12px; height: 12px; background: var(--yellow);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: bk-spark 2.6s ease-in-out infinite; }
.bk-spark-1 { top: 18px; left: 22px; }
.bk-spark-2 { top: 34px; right: 16px; width: 9px; height: 9px; animation-delay: .9s; }
.bk-spark-3 { bottom: 40px; left: 12px; width: 8px; height: 8px; animation-delay: 1.7s; }
@keyframes bk-coin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bk-coin-shadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .55; } }
/* Still most of the time, then one full turn like a spun coin. */
@keyframes bk-coin-turn { 0%, 60% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes bk-coin-shine { 0%, 20% { transform: translateX(0) skewX(-20deg); } 45%, 100% { transform: translateX(200px) skewX(-20deg); } }
@keyframes bk-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
/* People who asked their computer for less motion get the coin standing still. */
@media (prefers-reduced-motion: reduce) {
    .bk-coin, .bk-coin svg, .bk-coin-shine, .bk-coin-shadow, .bk-spark { animation: none; }
    .bk-spark { opacity: .8; }
}
.auth-head-left { align-items: flex-start; text-align: left; }
.auth-head-left h1 { font-size: 2rem; }
.auth-head-left .steps { justify-content: flex-start; }
.bk-hello { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    background: var(--orange); color: var(--on-color); border: 2px solid var(--ink); border-radius: 999px; }
.bk-hello .icon { width: 14px; height: 14px; }
.bk-code { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
/* The bank and branch being signed in to: a bar above the whole card, across both halves
   (only when safe to name them). */
.bk-place {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: .3rem;
    margin-bottom: 1rem; text-align: center; color: var(--ink);
}
.bk-place[hidden] { display: none; }
.bk-place-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 900;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bk-place-label .icon { width: 15px; height: 15px; }
.bk-place-bank { margin: 0; font-size: 2rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.bk-place-bank::after { content: ""; display: block; width: 72px; height: 5px; margin: .45rem auto .15rem; border-radius: 99px; background: var(--orange); }
.bk-place-where { margin: 0; display: flex; align-items: center; justify-content: center; gap: .35rem .9rem; flex-wrap: wrap; }
.bk-place-branch { font-weight: 800; display: inline-flex; align-items: center; gap: .45rem; }
.bk-place-address { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--muted); }
.bk-place-address .icon { width: 15px; height: 15px; flex: none; }
@media (max-width: 880px) {
    .bk-place { margin-bottom: .8rem; }
    .bk-place-bank { font-size: 1.4rem; }
}
.bk-welcome { margin: 0; font-size: 1rem; color: var(--ink); text-align: center; }
/* The later steps (code, new password) have a centred heading: keep it clear of the clock. */
.bk-split .auth-head:not(.auth-head-left) { margin-top: 1.9rem; }

/* Bank code and branch code side by side (also on phones: both are short). */
.bk-codes { grid-template-columns: 1fr 1fr; gap: .75rem; }
.bk-help { font-size: .88rem; color: var(--muted); }
.bk-help summary { cursor: pointer; font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; }
.bk-help summary .icon { width: 16px; height: 16px; }
.bk-help ul { margin: .5rem 0 0; padding-left: 1.2rem; }
@media (max-width: 880px) {
    .bk-split { grid-template-columns: minmax(0, 460px); padding-bottom: 4.5rem; }
    .bk-brand { border: 3px solid var(--ink); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 1.25rem 1.25rem 1rem; gap: .75rem; }
    .bk-hero { display: none; }
    .bk-split .auth-card { border-radius: 0 0 18px 18px; }
    /* Out of the way of the buttons: top corner instead of bottom. */
    .auth-theme { top: .6rem; bottom: auto; right: .6rem; }
}

/* The whole sign-in on one screen on a normal laptop (about 1366 x 650 inside the browser). */
.bk-split { min-height: 100vh; padding-block: 1rem; }
.bk-split .auth-card { position: relative; padding: 1.4rem 1.6rem; gap: .9rem; justify-content: flex-start; }
.bk-split .auth-card .stack { gap: .75rem; }
.bk-split .auth-head { gap: .35rem; }
.bk-split .auth-head-left h1 { font-size: 1.75rem; }
.bk-brand { padding: 1.6rem 1.6rem; gap: .9rem; }
.bk-brand-big { font-size: 1.85rem; }
@media (max-height: 720px) and (min-width: 881px) {
    .bk-split .input, .bk-split .select { min-height: 40px; padding-block: .45rem; }
    .bk-split .btn-lg { min-height: 44px; padding-block: .5rem; }
    .bk-split .auth-head-left h1 { font-size: 1.55rem; }
    .bk-split .auth-head p { font-size: .9rem; }
    .bk-brand { padding: 1.3rem 1.4rem; gap: .75rem; }
    .bk-brand-top .brand-logo { width: 48px; height: 48px; }
    .bk-brand-big { font-size: 1.6rem; }
}

/* Live date and time in the sign-in card's top corner (beside the tag, no line of its own). */
.bk-split .bk-clock { position: absolute; top: 1.35rem; right: 1.6rem; margin: 0; }
.bk-clock { align-self: flex-end; display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 -.5rem;
    padding: .2rem .6rem; font: 800 .85rem/1.4 var(--mono); font-variant-numeric: tabular-nums;
    background: var(--sunk); border: 2px solid var(--ink); border-radius: 999px; }
.bk-clock .icon { width: 15px; height: 15px; }
/* Phones: no room beside the tag - the clock gets its own line above it. */
@media (max-width: 880px) {
    .bk-split .bk-clock { position: static; align-self: flex-start; margin: 0 0 -.4rem; }
    /* Room at the top for the light / dark button. */
    .bk-split { padding-top: 3.4rem; }
}
.bk-time-warning div { display: flex; flex-direction: column; gap: .35rem; }
.bk-split .bk-time-warning { margin-top: 2.4rem; }
/* Wrong computer clock: nothing but the correct time and the message - no sign-in at all. */
.bk-time-wrong .auth-card > :not(.bk-clock):not(.bk-time-warning) { display: none; }

/* The "add the authenticator" step: the card alone, wider, for the QR code. */
.auth-card-wide { max-width: 720px; }
.bk-authenticator ol { margin: 0; padding-left: 1.2rem; }
@media (max-width: 640px) {
    .bk-authenticator { grid-template-columns: 1fr; justify-items: center; }
    .bk-authenticator .qr-lg { width: 220px; height: 220px; }
}

/* Signed-in pages (user, 2026-10-29): the gateway's shell with a navy side panel, like the
   sign-in panel; the active page in yellow; the person at the bottom. */
.bk-sidebar { background: #13213f; color: #fff; }
.bk-sidebar .side-label { color: rgba(255, 255, 255, .5); }
.bk-sidebar .side-link { color: rgba(255, 255, 255, .88); }
.bk-sidebar .side-link:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.bk-sidebar .side-link.is-active { background: var(--yellow); color: var(--on-color); border-color: var(--ink); }
.bk-sidebar .side-link.is-disabled { opacity: .45; }
.bk-sidebar .side-link.is-disabled:hover { background: none; border-color: transparent; }
.bk-sidebar .badge.is-plain { background: transparent; color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .35); }
.bk-side-foot { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.bk-side-foot .avatar { flex: none; }
.bk-side-who { display: flex; flex-direction: column; min-width: 0; }
.bk-side-who strong, .bk-side-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-side-who span { font-size: .78rem; color: rgba(255, 255, 255, .65); }
/* The icon rail (collapsed panel): only the picture of the person. */
[data-sidebar="collapsed"] .bk-side-who { display: none; }
.bk-clock-top { margin: 0; }
@media (max-width: 720px) { .bk-clock-top { display: none; } }
.bk-card-note { padding: .75rem 1.15rem 0; }
.branch-actions { justify-content: flex-end; flex-wrap: wrap; gap: .4rem; }
.branch-actions .input-inline { min-width: 120px; max-width: 160px; }

/* Users page: summary strip, toolbar, one tidy row per person, actions in a menu. */
.bk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.bk-stat { display: flex; flex-direction: column; gap: .1rem; padding: .75rem 1rem; background: var(--surface);
    border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); font-weight: 700; font-size: .85rem; }
.bk-stat-value { font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.bk-stat.is-yellow { background: var(--yellow); color: var(--on-color); }
.bk-stat.is-pink { background: var(--pink); color: var(--on-color); }
.bk-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.bk-search { position: relative; flex: 1 1 280px; max-width: 460px; display: flex; gap: .5rem; align-items: center; }
.bk-search > .icon { position: absolute; left: .8rem; width: 18px; height: 18px; pointer-events: none; }
.bk-search .input { padding-left: 2.4rem; }
.bk-people .card-head h2 { display: flex; align-items: center; gap: .5rem; }
.bk-people-note { padding: .7rem 1.15rem 0; }
.bk-person-list { list-style: none; margin: 0; padding: .5rem 0 0; }
.bk-person {
    display: grid; grid-template-columns: auto minmax(160px, 1.6fr) minmax(110px, 1fr) minmax(170px, 1.3fr) minmax(110px, .9fr) auto;
    gap: .9rem; align-items: center; padding: .8rem 1.15rem; border-top: 2px dashed var(--line, rgba(0, 0, 0, .12));
}
.bk-person:first-child { border-top: 0; }
.bk-person.is-blocked { opacity: .78; }
.bk-person .avatar { width: 40px; height: 40px; font-size: .85rem; }
.bk-person-main, .bk-person-branch, .bk-person-state { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bk-person-main strong { overflow-wrap: anywhere; }
.bk-person-state .badge { align-self: flex-start; }
.bk-person-state .badge .icon { width: 13px; height: 13px; }
.bk-menu { position: relative; justify-self: end; }
.bk-menu > summary { list-style: none; cursor: pointer; }
.bk-menu > summary::-webkit-details-marker { display: none; }
.bk-menu-panel {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; width: 250px; display: flex; flex-direction: column; gap: .25rem;
    padding: .5rem; background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: var(--shadow);
}
.bk-menu-item {
    display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px;
    background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.bk-menu-item:hover { background: var(--yellow); color: var(--on-color); }
.bk-menu-item .icon, .bk-menu-block label .icon { width: 16px; height: 16px; }
.bk-menu-block { display: flex; flex-direction: column; gap: .35rem; margin-top: .25rem; padding: .5rem .6rem .3rem; border-top: 2px dashed var(--line, rgba(0, 0, 0, .12)); }
.bk-menu-block label { display: flex; gap: .35rem; align-items: center; font-weight: 800; }
.bk-menu-block .row { flex-wrap: nowrap; }
.bk-menu-block .input-inline { min-width: 0; flex: 1; }
@media (max-width: 900px) {
    .bk-person { grid-template-columns: auto 1fr auto; row-gap: .35rem; }
    .bk-person-branch, .bk-person-state, .bk-person-seen { grid-column: 2 / 3; }
    .bk-person .bk-menu { grid-column: 3; grid-row: 1; }
}

/* Sign-in steps: the dashes with their words ("Step 1 of 2"). */
.steps { align-items: center; }
.steps-label { margin-left: .35rem; font-size: .75rem; font-weight: 800; color: var(--muted); }

/* Sign-in: an employee's choice of second step (two big options). */
.bk-choice { display: flex; flex-direction: column; gap: .6rem; }
.bk-choice-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .85rem; cursor: pointer;
    background: var(--surface); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); }
.bk-choice-item:has(input:checked) { background: var(--sunk); outline: 3px solid var(--yellow); outline-offset: 0; }
.bk-choice-item input { margin-top: .7rem; flex: none; }
.bk-choice-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 2.5px solid var(--ink); border-radius: 12px; color: var(--on-color); }
.bk-choice-icon .icon { width: 20px; height: 20px; }
.bk-choice-text { display: flex; flex-direction: column; gap: .2rem; }
.bk-choice-text strong { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
/* Sign-in page: "to your bank on Cloud Banking." and the step marker on one line (same text size). */
.bk-subline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; }
.bk-subline p { margin: 0; white-space: nowrap; }
.bk-subline .steps { flex: none; }
.bk-subline .steps span { width: 26px; }
@media (max-width: 480px) { .bk-subline { flex-wrap: wrap; gap: .35rem; } .bk-subline p { white-space: normal; } }

/* Home (user, 2026-10-29): greeting, figures, quick actions. */
.bk-hello-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; background: #13213f; color: #fff;
    border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); }
.bk-hello-card .avatar { width: 56px; height: 56px; font-size: 1.2rem; flex: none; }
.bk-hello-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bk-hello-text h2 { margin: 0; font-size: 1.5rem; }
.bk-hello-text p { margin: 0; color: rgba(255, 255, 255, .85); }
.bk-hello-text .muted { color: rgba(255, 255, 255, .6); }
.bk-hello-date { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange) !important; }
.bk-home-stats .bk-stat { position: relative; }
.bk-stat-icon { position: absolute; top: .7rem; right: .8rem; opacity: .55; }
.bk-stat-icon .icon { width: 20px; height: 20px; }
.bk-stat.is-green { background: var(--green); color: var(--on-color); }
.bk-section-title { margin: 0 0 .6rem; font-size: 1.05rem; }
.bk-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.bk-action { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; text-decoration: none; color: var(--text);
    background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform .08s ease, box-shadow .08s ease; }
.bk-action:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }
.bk-action-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 2.5px solid var(--ink); border-radius: 12px; color: var(--on-color); }
.bk-action-icon .icon { width: 20px; height: 20px; }
.bk-action-text { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.bk-action-go { width: 18px; height: 18px; opacity: .5; flex: none; }
.bk-branch-list li { align-items: center; gap: .75rem; }
.bk-branch-code { flex: none; min-width: 2.6rem; padding: .15rem .45rem; text-align: center; font-weight: 800; background: var(--sunk); border: 2px solid var(--ink); border-radius: 8px; }
/* The person's initials in the account chip (the chip's own span rule would make them small grey text). */
.user-chip .avatar { display: grid; font-size: .9rem; color: var(--on-color); }
.topbar .bk-clock-top { margin: 0; align-self: center; }

/* Bank settings: the logo. A bank's logo sits on white in the side panel and keeps its shape. */
.bk-bank-logo { object-fit: contain; background: #fff; }
.bk-logo-preview { display: grid; place-items: center; min-height: 160px; padding: 1rem; background: var(--sunk);
    border: 2px dashed var(--ink); border-radius: 14px; }
.bk-logo-preview img { max-width: 100%; max-height: 180px; object-fit: contain; }
.bk-logo-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--muted); font-weight: 700; }
.bk-logo-empty .icon { width: 34px; height: 34px; }

/* Employees' live banking pages (user, 2026-10-29): an icon rail that never opens out, a menu bar
   across the top with a list under each menu, then the page. */
/* The first bar, then the second bar (the work), both the full width; no side panel. */
.bk-work { --bk-bar: 66px; }
.bk-work-shell { min-height: calc(100vh - var(--bk-bar)); }
    background: #13213f; }
.bk-work-main { min-width: 0; display: flex; flex-direction: column; }
.bk-work-top { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: var(--bw) solid var(--ink); }
/* First bar: the bank and the person. */
.bk-work-bar { display: flex; align-items: center; gap: 1rem; height: calc(var(--bk-bar) - var(--bw)); padding: 0 1rem; }
.bk-work-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; text-decoration: none; color: var(--text); }
.bk-work-brand .brand-logo { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 2.5px solid var(--ink); background: #fff; }
.bk-work-brand > span { display: flex; flex-direction: column; min-width: 0; }
.bk-work-brand strong { font-size: 1.1rem; font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-work-brand span span { font-size: .78rem; font-weight: 700; color: var(--muted); }
/* Second bar: the work, on navy like the rail. */
.bk-menubar { position: sticky; top: var(--bk-bar); z-index: 25; display: flex; align-items: center; gap: .3rem; padding: .35rem 1rem; background: #13213f; border-bottom: var(--bw) solid var(--ink); }
.bk-menubar > .bk-menubar-item, .bk-menubar-group > .bk-menubar-item { color: rgba(255, 255, 255, .9); }
.bk-menubar > .bk-menubar-item:hover, .bk-menubar-group > .bk-menubar-item:hover, .bk-menubar-group[open] > .bk-menubar-item { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.bk-menubar .bk-menubar-item.is-active { background: var(--yellow); color: var(--on-color); border-color: var(--ink); }
.bk-menubar-group { position: relative; }
.bk-menubar-group > summary { list-style: none; }
.bk-menubar-group > summary::-webkit-details-marker { display: none; }
.bk-menubar-item { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; font-weight: 800; font-size: .9rem; color: var(--text);
    text-decoration: none; border: 2px solid transparent; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.bk-menubar-item .icon { width: 17px; height: 17px; }
.bk-menubar-caret { width: 14px !important; height: 14px !important; transform: rotate(90deg); opacity: .6; }
.bk-menubar-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; padding: .4rem; display: flex; flex-direction: column; gap: .1rem;
    background: var(--surface); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
.bk-menubar-link { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .6rem; border-radius: 9px;
    font-weight: 700; font-size: .9rem; color: var(--text); text-decoration: none; }
.bk-menubar-link:hover { background: var(--sunk); }
.bk-menubar-link.is-soon { color: var(--muted); cursor: default; }
.bk-menubar-link.is-soon:hover { background: none; }
.bk-work-top .topbar-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.bk-work-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.bk-work-title { margin: 0; font-size: 1.5rem; }
.bk-work-head .bk-clock { margin: 0; align-self: center; }
/* Phones: the rail goes; the menu bar scrolls sideways under the bank's name. */
@media (max-width: 880px) {
    .bk-menubar { overflow-x: auto; }
    .bk-work-brand span span { display: none; }
    .bk-menubar-panel { position: fixed; top: auto; left: .6rem; right: .6rem; }
    .bk-work-top .user-chip .who { display: none; }
}
/* Employees' pages: the clock in the first bar; the title on its own above the page. */
.bk-work-top .bk-clock-top { margin: 0; align-self: center; }
.bk-work-main .page > .bk-work-title { margin: 0 0 .9rem; }

/* Masters (user, 2026-10-29): each master's page follows the old software's screen - labels in
   a column on the left, the fields beside them, the existing ones in a box on the right, the
   buttons at the bottom - in this app's look. */
.bk-master { padding: 0; overflow: hidden; }
.bk-master-title { margin: 0; padding: .9rem 1.2rem; text-align: center; font-size: 1.3rem; border-bottom: var(--bw) solid var(--ink); display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bk-master-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; border-bottom: var(--bw) solid var(--ink); }
.bk-master-rows { border-right: var(--bw) solid var(--ink); }
.bk-master-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-bottom: var(--bw) solid var(--ink); }
.bk-master-rows .bk-master-row:last-child { border-bottom: 0; }
.bk-master-label { display: flex; align-items: center; padding: .9rem 1rem; font-weight: 800; background: var(--sunk); border-right: var(--bw) solid var(--ink); }
.bk-master-fields { padding: .8rem 1rem; min-width: 0; }
.bk-master-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bk-master-short { max-width: 160px; }
.bk-master-list { display: flex; flex-direction: column; gap: .2rem; padding: .6rem; max-height: 220px; overflow-y: auto; background: var(--sunk); }
.bk-master-list a { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; font-weight: 700; color: var(--text); text-decoration: none; border: 2px solid transparent; }
.bk-master-list a:hover { background: var(--surface); border-color: var(--ink); }
.bk-master-list a.is-active { background: var(--yellow); color: var(--on-color); border-color: var(--ink); }
.bk-master-kan { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.bk-master-list a.is-active .bk-master-kan { color: inherit; }
.bk-master-list-empty { color: var(--muted); font-size: .88rem; font-weight: 600; padding: .4rem .2rem; }
.bk-master-heads { border-bottom: var(--bw) solid var(--ink); }
.bk-master-heads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.bk-master-pick { min-height: 110px; padding: .6rem; background: var(--sunk); border: 2px dashed var(--ink); border-radius: 10px; display: grid; place-items: center; text-align: center; }
.bk-master-table { width: 100%; border-collapse: collapse; font-size: .85rem; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.bk-master-table th { text-align: left; padding: .35rem .5rem; background: var(--ink); color: var(--bg); font-weight: 800; }
.bk-master-table th.num { text-align: right; }
.bk-master-table td { height: 2.4rem; padding: .35rem .5rem; background: var(--surface); }
.bk-master-buttons { display: flex; justify-content: center; gap: .7rem; padding: 1rem; flex-wrap: wrap; }
@media (max-width: 880px) {
    .bk-master-top { grid-template-columns: minmax(0, 1fr); }
    .bk-master-rows { border-right: 0; border-bottom: var(--bw) solid var(--ink); }
    .bk-master-row { grid-template-columns: minmax(0, 1fr); }
    .bk-master-label { border-right: 0; border-bottom: var(--bw) solid var(--ink); padding: .6rem 1rem; }
    .bk-master-pair, .bk-master-heads-grid { grid-template-columns: minmax(0, 1fr); }
}


/* The Bank Masters menu (the old Head Office Settings menu): a second top bar, touching the top bar and the side panel. */
.bk-mastermenu { position: sticky; top: var(--bk-top); z-index: 20; flex-wrap: nowrap; gap: .1rem; margin: 0; padding: .35rem 1rem; border-radius: 0; border-top: 0; border-bottom: var(--bw) solid var(--ink); box-shadow: none; }
.bk-menubar-link.is-here { background: var(--yellow); color: var(--on-color); }
.bk-master-empty { display: grid; place-items: center; gap: .3rem; min-height: 320px; padding: 2rem; text-align: center; background: var(--sunk);
    border: 2px dashed var(--ink); border-radius: 16px; }
.bk-master-empty > .icon { width: 42px; height: 42px; opacity: .5; }
.bk-master-empty p { margin: 0; max-width: 60ch; }
@media (max-width: 880px) { .bk-mastermenu { overflow-x: auto; flex-wrap: nowrap; } }
.bk-mastermenu .bk-menubar-item { padding: .45rem .55rem; font-size: .86rem; }

/* Control pages (user, 2026-10-29): a narrow side panel from the top with the bank's logo; the
   first bar beside it with the bank's name. The bar sits above the masters bar, so its menus
   open over it. */
.bk-ctl { --bk-top: 60px; }
.bk-ctl-top { position: sticky; top: 0; z-index: 40; height: var(--bk-top); flex-wrap: nowrap; gap: .75rem; padding: 0 1rem; border-bottom-width: var(--bw); }
.bk-ctl-top .bk-work-brand strong { font-size: 1.05rem; }
.bk-ctl-title { margin: 0; padding-left: .85rem; border-left: 2px solid var(--ink); font-size: 1.05rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bk-ctl-top .topbar-end { flex: none; }
.bk-shell { grid-template-columns: 200px minmax(0, 1fr); }
.bk-shell .sidebar { border-right-width: var(--bw); }
/* Sookth's logo and the product; the box is the bar's height, so the panel's line meets the bar's. */
.bk-side-logo { display: flex; align-items: center; gap: .6rem; height: var(--bk-top); padding: 0 .75rem; color: #fff; text-decoration: none; border-bottom: var(--bw) solid rgba(255, 255, 255, .14); }
.bk-side-logo .brand-logo { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; }
.bk-side-logo .side-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bk-side-logo strong { font-size: 1rem; font-weight: 900; white-space: nowrap; }
.bk-side-logo .side-text span { font-size: .7rem; font-weight: 700; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.bk-ctl-top .bk-work-brand .brand-logo { width: 40px; height: 40px; border-radius: 10px; }
.bk-sidebar .sidebar-scroll { padding: .55rem .6rem; }
.bk-sidebar .side-link { padding: .4rem .55rem; font-size: .9rem; }
.bk-sidebar .side-label { margin: .7rem .4rem .25rem; font-size: .7rem; }
.bk-side-foot { padding: .6rem .7rem; }
@media (min-width: 901px) {
    :root[data-sidebar="collapsed"] .bk-shell { grid-template-columns: 64px minmax(0, 1fr); }
    :root[data-sidebar="collapsed"] .bk-side-logo { justify-content: center; padding: 0; }
}
@media (max-width: 900px) {
    .bk-shell { grid-template-columns: minmax(0, 1fr); }
    /* The opened panel and its shade cover the bars too. */
    .bk-shell .sidebar { width: min(240px, 80vw); z-index: 50; }
    .nav-open .bk-shell .scrim { z-index: 45; }
    .bk-ctl-top { gap: .5rem; padding: 0 .6rem; }
    .bk-ctl-top .bk-work-brand span span { display: none; }
}
@media (max-width: 640px) { .bk-ctl-title { display: none; } }

/* More on one screen (user, 2026-10-29): the page uses the width and keeps its spacing tight. */
.bk-ctl .page, .bk-work-main .page { max-width: 1600px; padding: 1rem 1.25rem; gap: 1rem; }
@media (max-width: 900px) { .bk-ctl .page, .bk-work-main .page { padding: .75rem; gap: .75rem; } }
.bk-master-title { padding: .5rem 1rem; font-size: 1.1rem; }
.bk-master-row { grid-template-columns: 170px minmax(0, 1fr); }
.bk-master-label { padding: .5rem .8rem; font-size: .9rem; }
.bk-master-fields { padding: .45rem .8rem; }
.bk-master .input { min-height: 38px; padding-top: .35rem; padding-bottom: .35rem; }
.bk-master-list { max-height: 170px; padding: .45rem; }
.bk-master-list a { padding: .3rem .5rem; font-size: .9rem; }
.bk-master-heads-grid { gap: .55rem; }
.bk-master-pick { min-height: 80px; }
.bk-master-table td { height: 1.9rem; }
.bk-master-buttons { padding: .6rem; gap: .5rem; }
.bk-master-empty { min-height: 220px; padding: 1.25rem; }
@media (max-width: 880px) { .bk-master-row { grid-template-columns: minmax(0, 1fr); } }

/* Bank Masters, the rest of the screens (user, 2026-10-29): labelled boxes in rows, sections
   with a small heading (as the old screens' frames), slab tables kept by banking.js. */
.bk-master-narrow { max-width: 1000px; }
.bk-master-cells { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem .7rem; }
.bk-master-cell { display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; width: 8.4rem; font-size: .78rem; font-weight: 800; line-height: 1.2; }
.bk-master-cell .input, .bk-master-cell .select { min-height: 36px; padding-top: .3rem; padding-bottom: .3rem; font-size: .92rem; }
.bk-master-cell:has(input[type="date"]) { width: 10.8rem; }
.bk-master-cell-wide { width: 15rem; }
.bk-master-cell .field-error { font-size: .76rem; }
.bk-master-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; border-bottom: var(--bw) solid var(--ink); }
.bk-master-split > :first-child { border-right: var(--bw) solid var(--ink); }
.bk-master-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bk-master-pair-secs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bk-master-pair-secs > .bk-master-sec:first-child { border-right: 2px solid var(--ink); }
.bk-master-sec { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem; border-bottom: 2px solid var(--ink); }
.bk-master-split > .bk-master-sec, .bk-master-side > .bk-master-sec:last-child, .bk-master-split > div > .bk-master-sec:last-child, .bk-master-pair-secs > .bk-master-sec { border-bottom: 0; }
.bk-master-sec h3 { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0; font-size: .95rem; text-align: center; }
.bk-master-subhead { justify-content: flex-start !important; font-size: .88rem !important; color: var(--muted); }
.bk-master-choice { margin: 0; padding: .35rem .6rem .5rem; border: 2px solid var(--ink); border-radius: 10px; }
.bk-master-choice legend { padding: 0 .3rem; font-size: .8rem; font-weight: 800; }
.bk-master-choice .check { align-self: center; font-size: .88rem; }
.bk-master-tick { font-size: .88rem; }
.bk-master-tick input { width: 18px; height: 18px; }
.bk-master-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .8rem; }
.bk-master-add { align-self: flex-end; min-height: 36px; }
.bk-master-tiny { width: 7rem; min-height: 32px !important; padding: .2rem .45rem !important; text-align: right; box-shadow: none; }
.bk-master-rates td { height: auto !important; vertical-align: middle; }
.bk-master-note { margin: 0; }
/* The slab / link tables. */
.bk-rows td { height: auto; }
.bk-rows tbody tr:nth-child(even) td { background: var(--sunk); }
.bk-rows-x { width: 2.4rem; text-align: center; }
.bk-rows-x .btn { min-height: 28px; width: 28px; padding: 0; font-size: 1.1rem; line-height: 1; }
.bk-rows-empty { color: var(--muted); font-size: .85rem; font-weight: 600; text-align: center; }
.bk-rows-msg { margin: 0; min-height: 0; color: var(--danger); font-size: .82rem; font-weight: 700; }
.bk-rows-msg:empty { display: none; }
/* The income / expense accounts to pick from. */
.bk-pick-list { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; place-items: stretch; gap: .1rem; max-height: 150px; overflow-y: auto; text-align: left; border-style: solid; }
.bk-pick { padding: .25rem .45rem; font: inherit; font-size: .86rem; font-weight: 700; text-align: left; color: var(--text); background: none; border: 2px solid transparent; border-radius: 7px; cursor: pointer; }
.bk-pick:hover, .bk-pick:focus-visible { background: var(--surface); border-color: var(--ink); }
@media (max-width: 1100px) {
    .bk-master-split, .bk-master-split-even, .bk-master-pair-secs { grid-template-columns: minmax(0, 1fr); }
    .bk-master-split > :first-child { border-right: 0; border-bottom: var(--bw) solid var(--ink); }
    .bk-master-pair-secs > .bk-master-sec:first-child { border-right: 0; border-bottom: 2px solid var(--ink); }
}
@media (max-width: 640px) {
    .bk-master-cell { width: calc(50% - .35rem); }
    .bk-master-ticks { grid-template-columns: minmax(0, 1fr); }
}