/* An app's own pages (#103). The look is the UI kit's (/shared/tokens.css, /shared/components.css); this
   file holds only what the demo sets inline or by script, as classes, because a page on a site is served
   under style-src 'self'. Logical properties only, so Urdu mirrors by itself. */

.app-body { margin: 0; }
.app-skip { position: absolute; inset-inline-start: -999px; }
.app-skip:focus { inset-inline-start: 8px; inset-block-start: 8px; z-index: 200; padding: 8px 12px; background: var(--surface); border-radius: var(--radius-control); box-shadow: var(--shadow-card); }
.app-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-spacer { flex: 1; }
.app-min0 { min-inline-size: 0; }
.app-disabled { opacity: .5; pointer-events: none; }
.r { text-align: end; }

/* The kit's colours for people, classes and chips (media.js sets these inline in the demo). */
.app-hue-0 { --c: var(--cat-0); --c-tint: var(--cat-0-tint); --c-ink: var(--cat-0-ink); }
.app-hue-1 { --c: var(--cat-1); --c-tint: var(--cat-1-tint); --c-ink: var(--cat-1-ink); }
.app-hue-2 { --c: var(--cat-2); --c-tint: var(--cat-2-tint); --c-ink: var(--cat-2-ink); }
.app-hue-3 { --c: var(--cat-3); --c-tint: var(--cat-3-tint); --c-ink: var(--cat-3-ink); }
.app-hue-4 { --c: var(--cat-4); --c-tint: var(--cat-4-tint); --c-ink: var(--cat-4-ink); }
.app-hue-5 { --c: var(--cat-5); --c-tint: var(--cat-5-tint); --c-ink: var(--cat-5-ink); }
.app-hue-6 { --c: var(--cat-6); --c-tint: var(--cat-6-tint); --c-ink: var(--cat-6-ink); }
.app-hue-7 { --c: var(--cat-7); --c-tint: var(--cat-7-tint); --c-ink: var(--cat-7-ink); }

/* Shell: one scrolling column for the page (the content), the sidebar's menu scrolling on its own when
   it is taller than the screen; the document itself never scrolls on screen. dvh, so a phone's address
   bar does not add a second, outer scroll. */
@media screen {
  html:has(.bx-shell), .app-body:has(.bx-shell) { block-size: 100%; overflow: hidden; }
  .bx-shell, html.bx-phone .bx-shell { block-size: 100vh; block-size: 100dvh; }
}
.bx-nav { scrollbar-width: thin; overscroll-behavior: contain; }
.bx-content { overscroll-behavior: contain; }
.app-brand-name { font-size: 15px; font-weight: 700; color: #15803D; }
.app-brand-app { font-size: 12px; color: var(--ink-muted); }
.bx-sidebar__mark { display: inline-flex; }
/* The business, named once: a plain label, or a link to the chooser for someone in several. */
.app-org { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 6px 10px; min-block-size: 32px; box-sizing: border-box;
  font: 600 13px var(--font-sans); color: var(--ink-strong); border-radius: var(--radius-control); background: var(--subtle); }
.app-org__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.app-org--switch { text-decoration: none; border: 1px solid var(--hairline); background: var(--surface); min-block-size: 40px; }
a.app-org--switch:hover { border-color: var(--accent); }
.app-org__switch { font-size: 12px; font-weight: 600; color: var(--accent-strong); }
.bx-shell--collapsed .app-org { display: none; }
html.bx-phone .bx-shell--collapsed .app-org { display: flex; }
.bx-nav__item .icon { inline-size: 18px; block-size: 18px; flex: none; }
/* The core's icons are drawn to fill their box: every icon on an app page gets the kit's size. */
.bx-content .icon, .bx-topbar .icon, .app-auth .icon { inline-size: 18px; block-size: 18px; flex: none; vertical-align: -3px; }
.kpi__icon .icon { inline-size: 20px; block-size: 20px; vertical-align: 0; }
.bx-nav__text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* Top bar: search with a sensible width, then the language and the account, each a small menu. */
.app-topbar { gap: 12px; }
.bx-topbar__search.app-topsearch { margin: 0; flex: 0 1 420px; inline-size: auto; max-inline-size: 420px; min-inline-size: 0; }
.app-topsearch:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.app-search-toggle { display: none; }
.app-topbar-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.app-menu { position: relative; }
.app-menu > summary { list-style: none; }
.app-menu > summary::-webkit-details-marker { display: none; }
.app-menu__button { display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding-block: 4px; padding-inline: 10px 8px; box-sizing: border-box;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-strong); cursor: pointer; font: 600 13px var(--font-sans); }
.app-menu__button:hover, .app-menu[open] > .app-menu__button { border-color: var(--accent); }
.app-menu__button:focus-visible, .app-menu__item:focus-visible, .app-search-toggle:focus-visible, .bx-topbar__burger:focus-visible, a.app-org--switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-menu__chev { font-size: 11px; color: var(--ink-muted); }
.app-account .bx-userchip__text { max-inline-size: 180px; }
.app-menu__panel { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 97; display: flex; flex-direction: column; gap: 2px;
  min-inline-size: 200px; max-inline-size: min(300px, 92vw); margin: 0; padding: 6px; box-sizing: border-box; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .45); }
.app-menu__item { display: flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: 40px; padding-inline: 10px; box-sizing: border-box; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-strong); font: 500 14px var(--font-sans); text-align: start; text-decoration: none; cursor: pointer; }
.app-menu__item:hover { background: var(--subtle); }
.app-menu__item[aria-current='true'] { font-weight: 700; color: var(--accent-strong); }
.app-menu__tick { margin-inline-start: auto; }
.app-menu__form { margin: 0; }
.app-menu__signout { color: var(--danger, #B91C1C); }
.app-menu__who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-block-end: 4px; border-block-end: 1px solid var(--hairline); font-size: 13px; color: var(--ink-muted); }
.app-menu__who strong { color: var(--ink-strong); font-size: 14px; }
.app-menu__org { font-size: 12px; }
.app-notice { padding: 10px 16px; border-radius: var(--radius-control); background: var(--accent-tint); color: var(--ink-strong); font-size: var(--text-sm); }

/* Page parts: the content starts right under the top bar; the page's toolbar (title, filters, actions)
   is one compact row that wraps. */
.bx-content { padding-block: 16px var(--section-gap); gap: 16px; }
.app-page-header { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.app-page-header .bx-pretitle { margin-block-end: 2px; }
/* A wide table scrolls inside its card, never the page. */
.bx-content .card:has(> .table), .bx-content .card:has(> form > .table) { overflow-x: auto; }
.app-page-header .bx-h1 { margin: 0; }
.app-sub { margin: 4px 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
.app-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kit-tabs a.kit-tab { text-decoration: none; }
a.chip-cat { text-decoration: none; }
.app-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-block-end: 1px solid var(--hairline); margin: 0; }
.app-toolbar .input { max-inline-size: 280px; }
.app-toolbar .select { inline-size: auto; max-inline-size: 200px; }
.app-count { color: var(--ink-muted); font-size: 13px; }
.app-scroll-x { overflow-x: auto; }
.app-person { display: flex; align-items: center; gap: 8px; }
.app-avatar--sm { inline-size: 26px; block-size: 26px; font-size: 10px; }
.app-avatar--lg { inline-size: 48px; block-size: 48px; font-size: 16px; }
.table a.app-row { color: inherit; text-decoration: none; display: block; }
.table tbody tr:hover { background: var(--subtle); }
.table td a.app-link, .app-link { color: var(--accent-strong); text-decoration: none; font-weight: 500; }
.app-link:hover { text-decoration: underline; }
.app-card-pad { padding: var(--card-pad-y) var(--card-pad-x); }
.app-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--hairline); }
.app-card-head .bx-h2 { margin: 0; }
.app-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.app-split { display: grid; gap: var(--section-gap); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.app-stack { display: flex; flex-direction: column; gap: var(--section-gap); }
a.kpi { text-decoration: none; color: inherit; }
.app-muted { color: var(--ink-muted); }
.app-list { margin: 0; padding: 0; list-style: none; }
.app-list li { padding: 10px 16px; border-block-end: 1px solid var(--hairline); font-size: var(--text-sm); }
.app-list li:last-child { border-block-end: 0; }
.kit-dl dd.r { text-align: end; }

/* Sign-in */
.app-auth-body { background: var(--page-bg); }
.app-auth { min-block-size: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: 48px 16px 32px; }
.app-auth > * { inline-size: 100%; max-inline-size: 440px; box-sizing: border-box; }
.app-auth__brand { display: flex; align-items: center; justify-content: center; gap: 10px; }
.app-brand-name--lg { font-size: 20px; }
.app-auth__card { padding: 24px; display: flex; flex-direction: column; gap: 12px; overflow: visible; }
.app-auth__card .bx-h1, .app-auth__card .bx-h2 { margin: 0; }
.app-auth__card .app-sub { margin: 0; }
.app-auth__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.app-auth__form .btn { justify-content: center; }
.app-auth__locale { justify-content: center; }
.app-auth__version { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--ink-muted); }
.app-auth__secret { display: flex; flex-direction: column; gap: 6px; }
.app-auth__secret p { margin: 0; }
.app-roles { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.app-role { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 64px; padding: 8px 14px; box-sizing: border-box; text-align: start;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); font: inherit; color: var(--ink); cursor: pointer; }
.app-role:hover { border-color: var(--accent); background: var(--accent-tint); }
.app-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-role__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.app-role__label { font-weight: 600; color: var(--ink-strong); }
.app-role__note { font-size: var(--text-xs); line-height: var(--text-xs-line); color: var(--ink-muted); }
.app-role__go { color: var(--ink-muted); font-size: 20px; font-weight: 700; }
[dir='rtl'] .app-role__go { transform: scaleX(-1); }

@media (max-width: 960px) { .app-split { grid-template-columns: minmax(0, 1fr); } }
@media print { .bx-sidebar, .bx-topbar, .app-noprint, .bx-nav-backdrop, .app-menu__panel { display: none !important; } html, .app-body { block-size: auto; overflow: visible; } .bx-shell, .bx-main { block-size: auto; overflow: visible; } .bx-content { padding: 0; overflow: visible; } }

/* Tablets and phones: the menu is a drawer or a rail (the kit's rules); the account shows its mark only. */
html.bx-tablet .app-account .bx-userchip__text, html.bx-phone .app-account .bx-userchip__text { display: none; }
/* Phones: search is an icon that opens a full-width field over the top bar; page actions wrap. */
html.bx-phone .app-topbar { gap: 6px; }
html.bx-phone .app-search-toggle { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink-strong); cursor: pointer; }
html.bx-phone .bx-topbar__search.app-topsearch { display: none; }
html.bx-phone .app-topbar.is-searching .bx-topbar__search.app-topsearch { display: flex; position: absolute; inset-block: 8px; inset-inline: 56px 10px; z-index: 98; max-inline-size: none; background: var(--surface); border: 1px solid var(--hairline); }
html.bx-phone .app-topsearch .bx-kbd { display: none; }
html.bx-phone .app-lang .app-menu__button { padding-inline: 8px 6px; }
html.bx-phone .app-lang__current { max-inline-size: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.bx-phone .app-page-header .app-actions { inline-size: 100%; }

/* Until the shell's script has named the device, a narrow screen shows no sidebar, so it never flashes
   over the page before sliding away. */
@media (max-width: 599px) { html:not(.bx-phone) .bx-sidebar { display: none; } }