/*
 * Profilex-only styles, loaded after theme.css (see views/includes/styles.njk).
 *
 * theme.css comes from Omniflow-Starter's Rooms redesign; do not edit it here.
 * The three shell rules below are shared problems recorded for Omniflow-UI
 * v1.0.0 (second-brain Omniflow/2026_10_08-omniflow-ui-rekonsiliasi.md):
 * delete them once theme.css is synced from Omniflow-UI.
 */

/* DataTables inside a scroller. theme.css pulls .card-body > .table-responsive
   out to the card edges (edge-to-edge static tables), which dragged the
   DataTables length/search controls flush against the card border. */
.card > .card-body:not(.p-0):not(.table-responsive) > .table-responsive:only-child:has(> .dt-container, > .dataTables_wrapper) { margin: 0; width: auto; max-width: 100%; }

/* No search box in this navbar pushes items right, so the network status pill
   needs its own auto margin or it sits next to the brand. */
.sb-topnav .network-status-indicator { margin-left: auto; flex-shrink: 0; }
.sb-topnav .network-status-indicator + .navbar-nav { margin-left: 0 !important; }

/* Collapsed sidebar: the brand block keeps the sidebar's width and dark fill,
   which leaves a stranded name strip over a page that no longer has a sidebar.
   Shrink it to the logomark alone. */
@media (min-width: 992px) {
  .sb-sidenav-toggled .sb-topnav .navbar-brand { width: var(--of-topnav-h); justify-content: center; padding: 0 !important; gap: 0; }
  .sb-sidenav-toggled .sb-topnav .navbar-brand > span { display: none; }
}

/* Node/cache chip (components/cache_info.njk). theme.css's floating
   .cache-chip sat bottom-right under the AI buttons, and anywhere else it
   covered page headers, so it lives in the topnav's empty space beside the
   sidebar toggle instead: node on the first line, cache on the second. */
.node-chip { flex-direction: column; justify-content: center; gap: .1rem; margin-left: .5rem; padding-left: .85rem; border-left: 1px solid var(--of-line); line-height: 1.2; font-size: .72rem; color: var(--of-text-3); white-space: nowrap; }
.node-chip-node { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; color: var(--of-text-2); }
.node-chip-node i { font-size: .65rem; color: var(--of-text-4); }
.node-chip-cache { display: inline-flex; align-items: center; gap: .35rem; }
.node-chip-cache .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--of-success); }
.node-chip-cache.is-db .dot { background: #f59e0b; }

/* Phone topnav: brand + toggle + status pill + language + avatar overflow 375px. */
@media (max-width: 575.98px) {
  .sb-topnav .navbar-brand { width: auto; max-width: 46%; padding-inline: .75rem !important; font-size: .82rem; }
  .sb-topnav .navbar-brand img { width: 22px; height: 22px; }
  .sb-topnav .navbar-brand .badge { display: none; }
  .sb-topnav #sidebarToggle { margin-inline: .25rem !important; flex-shrink: 0; }
  .sb-topnav .navbar-nav { margin-right: .25rem !important; }
  .sb-topnav .status-light { padding: 5px; }
  .sb-topnav .status-light .status-label { display: none; }
  .sb-topnav .network-status-indicator { margin-right: .25rem; }
}

/* Candidate area (layout/clientDashboardLayout): the end-user portal shell from
   Rooms' tenant area (Rooms theme.css, "Tenant portal"). Copied, not linked:
   candidate to promote into Omniflow-UI public.css. */
.portal-shell { background: var(--of-bg); min-height: 100vh; }
.portal-top { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--of-line); }
.portal-top-inner { display: flex; align-items: center; gap: 1rem; height: 60px; }
.portal-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--of-text); font-weight: 750; letter-spacing: -.02em; text-decoration: none; flex: none; }
.portal-brand:hover { color: var(--of-text); }
.portal-links { align-items: center; gap: .15rem; margin-right: auto; }
.portal-links > a, .portal-more { color: var(--of-text-2); font-weight: 550; font-size: .88rem; padding: .45rem .7rem; border-radius: 8px; text-decoration: none; white-space: nowrap; border: 0; background: none; }
.portal-links > a:hover, .portal-more:hover { background: var(--of-surface-2); color: var(--of-text); }
.portal-links > a.active { color: var(--of-brand); background: var(--of-brand-50); }
.portal-more svg { font-size: .6rem; margin-left: .2rem; }
.portal-user { margin-left: auto; }
@media (min-width: 992px) { .portal-links + .portal-user { margin-left: 0; } }
.portal-user-btn { display: inline-flex; align-items: center; gap: .5rem; max-width: 220px; height: 40px; padding: 0 .6rem 0 .35rem; border: 1px solid var(--of-line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .86rem; color: var(--of-text); }
.portal-user-btn > svg:last-child { font-size: .6rem; color: var(--of-text-4); }
.portal-main { padding-top: 1.5rem; padding-bottom: 3rem; }
.portal-tabbar { position: fixed; z-index: 1030; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.97); border-top: 1px solid var(--of-line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -18px rgba(15,23,42,.35); backdrop-filter: blur(10px); }
.portal-tabbar > a, .portal-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; height: 60px; width: 100%; border: 0; background: none; color: var(--of-text-3); font-size: .68rem; font-weight: 600; text-decoration: none; }
.portal-tabbar svg { font-size: 1.05rem; }
.portal-tabbar > a.active { color: var(--of-brand); }
.portal-tabbar .dropup { display: flex; }
.portal-tabbar { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) {
  .portal-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Candidate pages mark their cards .client-shell-card (124 uses). The old
   layout styled them inline as borderless 24px cards with a heavy shadow;
   they now read as theme cards. `border-0` sits on most of them, so the
   border is restored explicitly. */
.client-shell-card {
  border: 1px solid var(--of-line) !important;
  border-radius: var(--of-radius-lg);
  box-shadow: var(--of-shadow-xs);
}
.client-shell-card > .card-body:first-child[style*="gradient"] { border-radius: calc(var(--of-radius-lg) - 1px) calc(var(--of-radius-lg) - 1px) 0 0; }

/* Gradient heroes on candidate pages set .text-white on the wrapper, but
   theme.css gives headings their own dark ink, so titles went dark-on-blue.
   Inside a .text-white block, headings follow the block. */
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }