/* BEGIN usys-p3c5.css */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/p3/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight:400;font-display:swap
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/p3/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight:500;font-display:swap
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/p3/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight:600;font-display:swap
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/assets/p3/fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight:700;font-display:swap
}

@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("/assets/p3/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight:400;font-display:swap
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("/assets/p3/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight:500;font-display:swap
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("/assets/p3/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight:600;font-display:swap
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  src:url("/assets/p3/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight:700;font-display:swap
}

html,body,button,input,select,textarea{
  font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif !important;
}

body[dir="rtl"],
html[dir="rtl"] body{
  font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif !important;
}

body.usys-p3-login h1,
body.usys-p3-login h2,
body.usys-p3-login h3{
  font-weight:600 !important;
}

body.usys-p3-login button{
  font-weight:600 !important;
  border-radius:10px !important;
}

body.usys-p3-login input{
  border-radius:10px !important;
}

/* Complete USys lockup */
.usys-p3-lockup{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px;
  width:min(440px,42vw);
  max-width:100%;
  margin-bottom:22px;
  background:transparent !important;
  overflow:visible !important;
}

.usys-p3-logo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  clip-path:none !important;
}

.usys-p3-tagline{
  width:100%;
  text-align:center;
  direction:ltr;
  font-family:"IBM Plex Sans",sans-serif !important;
  font-size:.70rem;
  font-weight:600;
  letter-spacing:.16em !important;
  line-height:1.2;
  white-space:nowrap;
}

.usys-p3-product{
  font-weight:700 !important;
}

.usys-p3-descriptor{
  font-weight:400 !important;
}

.usys-p3-corporate{
  font-weight:400 !important;
  opacity:.90;
}

@media(max-width:800px){
  .usys-p3-lockup{
    width:min(320px,76vw);
  }
  .usys-p3-tagline{
    font-size:.60rem;
    letter-spacing:.11em !important;
  }
}

/* P3C2 final brand refinement */

.usys-p3-lockup{
  margin-bottom:30px !important;
}

.usys-p3-tagline{
  opacity:.96;
}

.usys-p3-product{
  font-size:clamp(2rem,3vw,3rem) !important;
  line-height:1.12 !important;
  margin-top:0 !important;
}

.usys-p3-descriptor{
  font-size:1.08rem !important;
  line-height:1.6 !important;
}

.usys-p3-corporate{
  font-size:.86rem !important;
  line-height:1.6 !important;
}

@media(max-width:800px){
  .usys-p3-lockup{
    margin-bottom:22px !important;
  }
}

/* END usys-p3c5.css */

/* BEGIN usys-p3c6.css */
/*
 * USys P3C6 — Global Application Shell
 * Compatibility visual candidate
 *
 * Scope:
 *   - authenticated application only
 *   - login and MFA are intentionally unchanged
 */

body.usys-p3c6-app {
  --usys-shell-gap: 0px;
  --usys-nav-width: 248px;
  --usys-page-gutter: clamp(18px, 2vw, 32px);

  overflow-x: hidden !important;
}

/* P3C5 brand rail belongs to login, not the authenticated workspace. */
body.usys-p3c6-app .usys-p3c6-brand-rail {
  display: none !important;

  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;

  flex: 0 0 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

/* Defensive hide for a lockup recreated by the P3C5 observer. */
body.usys-p3c6-app .usys-p3-lockup {
  display: none !important;
}

/*
 * Replace the inherited 3-column brand/login structure with
 * an operational 2-column application shell.
 */
body.usys-p3c6-app .usys-p3c6-shell {
  display: flex !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  flex: 1 1 auto !important;

  align-items: stretch !important;

  gap: var(--usys-shell-gap) !important;

  margin: 0 !important;
}

/* Operational navigation */
body.usys-p3c6-app .usys-p3c6-nav {
  box-sizing: border-box !important;

  flex: 0 0 var(--usys-nav-width) !important;

  width: var(--usys-nav-width) !important;
  min-width: 224px !important;
  max-width: 260px !important;

  overflow-x: hidden !important;
}

/* Main enterprise workspace */
body.usys-p3c6-app .usys-p3c6-workspace {
  box-sizing: border-box !important;

  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;

  padding-inline:
    var(--usys-page-gutter) !important;
}

/* Eliminate nested fixed width inherited from login/brand treatment. */
body.usys-p3c6-app .usys-p3c6-workspace main,
body.usys-p3c6-app .usys-p3c6-workspace section,
body.usys-p3c6-app .usys-p3c6-workspace article {
  max-width: none;
}

/* Prevent Arabic customer/facility names from collapsing letter-by-letter. */
body.usys-p3c6-app .usys-p3c6-workspace h1,
body.usys-p3c6-app .usys-p3c6-workspace h2,
body.usys-p3c6-app .usys-p3c6-workspace h3,
body.usys-p3c6-app .usys-p3c6-workspace h4,
body.usys-p3c6-app .usys-p3c6-workspace p,
body.usys-p3c6-app .usys-p3c6-workspace a,
body.usys-p3c6-app .usys-p3c6-workspace button,
body.usys-p3c6-app .usys-p3c6-workspace span {
  word-break: normal !important;
  overflow-wrap: normal;
}

/* Long technical identifiers may wrap, but only at sensible boundaries. */
body.usys-p3c6-app .usys-p3c6-workspace code,
body.usys-p3c6-app .usys-p3c6-workspace pre {
  overflow-wrap: anywhere;
}

/* More coherent enterprise spacing. */
body.usys-p3c6-app .usys-p3c6-workspace > * {
  min-width: 0;
}

/* Keep form controls usable after width reclamation. */
body.usys-p3c6-app input,
body.usys-p3c6-app select,
body.usys-p3c6-app textarea,
body.usys-p3c6-app button {
  box-sizing: border-box;
}

/* Laptop */
@media (max-width: 1180px) {
  body.usys-p3c6-app {
    --usys-nav-width: 224px;
    --usys-page-gutter: 18px;
  }

  body.usys-p3c6-app .usys-p3c6-nav {
    min-width: 210px !important;
    max-width: 230px !important;
  }
}

/* Narrow screens: stack safely rather than crush the workspace. */
@media (max-width: 820px) {
  body.usys-p3c6-app .usys-p3c6-shell {
    display: block !important;
  }

  body.usys-p3c6-app .usys-p3c6-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.usys-p3c6-app .usys-p3c6-workspace {
    width: 100% !important;
    padding-inline: 16px !important;
  }
}

/* END usys-p3c6.css */

/* BEGIN usys-p3c6b.css */
/*
 * USys P3C6B
 * Safe Dashboard Refinement
 *
 * IMPORTANT:
 * - No customer-page selectors
 * - No brand-rail selectors
 * - No global workspace width overrides
 */

body.usys-p3c6-app .usys-p3c6b-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  align-items: stretch !important;
}

body.usys-p3c6-app .usys-p3c6b-kpi-grid > * {
  min-width: 0 !important;
}

body.usys-p3c6-app .usys-p3c6b-kpi-card {
  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 82px !important;

  margin: 0 !important;
  padding: 13px 16px !important;

  border-radius: 14px !important;
}

body.usys-p3c6-app .usys-p3c6b-kpi-caption {
  display: none !important;
}

body.usys-p3c6-app .usys-p3c6b-kpi-value {
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
  body.usys-p3c6-app .usys-p3c6b-kpi-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  body.usys-p3c6-app .usys-p3c6b-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.usys-p3c6-app .usys-p3c6b-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* END usys-p3c6b.css */

/* BEGIN usys-p3c6c.css */
/*
 * USys P3C6C
 * Customer Master Card Refinement
 *
 * Scope:
 *   .platform-split > .client-list only
 *
 * Explicitly does NOT target:
 *   .client-detail
 *   dashboard
 *   application shell
 *   navigation
 */

/* Preserve the list pane itself. */
body.usys-p3c6-app
.platform-split > .client-list {
  min-width: 0 !important;
  max-width: 100% !important;
}

/*
 * Root cause correction:
 * Existing grid gives the status almost all available width.
 *
 * Desired geometry:
 *   customer identity = flexible track
 *   status            = compact auto track
 */
body.usys-p3c6-app
.platform-split > .client-list
> button.client-row {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) auto !important;

  align-items: center !important;
  column-gap: 14px !important;

  width: 100% !important;
  min-width: 0 !important;

  padding-inline: 16px !important;
}

/* Customer identity column. */
body.usys-p3c6-app
.platform-split > .client-list
> button.client-row
> span:first-child {
  display: block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  overflow: visible !important;
}

/* Arabic customer name. */
body.usys-p3c6-app
.platform-split > .client-list
> button.client-row
> span:first-child
> b {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  word-break: normal !important;
  overflow-wrap: normal !important;

  line-height: 1.4 !important;
}

/* English customer name. */
body.usys-p3c6-app
.platform-split > .client-list
> button.client-row
> span:first-child
> small {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin-top: 2px !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  word-break: normal !important;
  overflow-wrap: normal !important;

  line-height: 1.35 !important;
}

/* Status is a compact badge, never a flexible column. */
body.usys-p3c6-app
.platform-split > .client-list
> button.client-row
> span.status {
  width: auto !important;
  min-width: 72px !important;
  max-width: max-content !important;

  flex: none !important;

  padding-inline: 12px !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  justify-content: center !important;
  align-items: center !important;
}

/* Slightly more room on narrower screens without changing detail pane. */
@media (max-width: 1000px) {
  body.usys-p3c6-app
  .platform-split > .client-list
  > button.client-row {
    column-gap: 10px !important;
    padding-inline: 12px !important;
  }

  body.usys-p3c6-app
  .platform-split > .client-list
  > button.client-row
  > span.status {
    min-width: 64px !important;
  }
}

/* END usys-p3c6c.css */

/* BEGIN usys-p3c7a.css */
/*
 * USys LIS — P3C7A Global Visual Foundation
 * Visual system only.
 *
 * NO database/backend changes.
 * NO page-specific destructive geometry.
 */

:root {
  --usys-green-950: #063e31;
  --usys-green-900: #07513f;
  --usys-green-850: #075b47;
  --usys-green-800: #08664f;
  --usys-green-700: #08785e;

  --usys-teal-700: #068f96;
  --usys-teal-600: #0ca4aa;
  --usys-teal-500: #1ab8bd;
  --usys-teal-100: #dff5f5;
  --usys-teal-050: #effafa;

  --usys-ink-950: #13272f;
  --usys-ink-900: #17333e;
  --usys-ink-800: #274852;
  --usys-ink-700: #45616a;
  --usys-ink-600: #667e86;

  --usys-bg: #f5f8f9;
  --usys-surface: #ffffff;
  --usys-surface-soft: #f8fafb;
  --usys-border: #dce7ea;
  --usys-border-strong: #cadadd;

  --usys-success-bg: #e9f7ee;
  --usys-success-fg: #17653e;

  --usys-danger-bg: #fff0f0;
  --usys-danger-fg: #b4232b;

  --usys-warning-bg: #fff7e8;
  --usys-warning-fg: #9a5d09;

  --usys-radius-sm: 9px;
  --usys-radius-md: 13px;
  --usys-radius-lg: 17px;

  --usys-shadow-sm:
    0 1px 2px rgba(14, 45, 55, .04),
    0 5px 16px rgba(14, 45, 55, .045);

  --usys-shadow-md:
    0 2px 4px rgba(14, 45, 55, .045),
    0 12px 28px rgba(14, 45, 55, .065);

  --usys-transition: 150ms ease;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

html,
body,
button,
input,
select,
textarea {
  font-family:
    "IBM Plex Sans Arabic",
    "IBM Plex Sans",
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif !important;
}

html[lang="en"],
html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea {
  font-family:
    "IBM Plex Sans",
    "Segoe UI",
    Arial,
    sans-serif !important;
}

body {
  color: var(--usys-ink-900);
  background: var(--usys-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--usys-ink-950);
  letter-spacing: -.015em;
}

h1 {
  font-weight: 700 !important;
}

h2,
h3 {
  font-weight: 600 !important;
}

/* =========================================================
   APPLICATION SHELL
   ========================================================= */

body.usys-p3c6-app {
  background:
    linear-gradient(
      180deg,
      #f7fafb 0%,
      #f3f7f8 100%
    ) !important;
}

body.usys-p3c6-app .app-shell,
body.usys-p3c6-app .platform-shell {
  background: transparent !important;
}

body.usys-p3c6-app .app-main,
body.usys-p3c6-app .platform-workspace,
body.usys-p3c6-app .workspace {
  background: transparent !important;
}

/* Main operational content remains light. */
body.usys-p3c6-app main {
  color: var(--usys-ink-900);
}

/* =========================================================
   SIDEBAR / NAVIGATION
   ========================================================= */

body.usys-p3c6-app nav,
body.usys-p3c6-app aside {
  border-color: var(--usys-border) !important;
}

body.usys-p3c6-app nav a,
body.usys-p3c6-app nav button,
body.usys-p3c6-app aside a,
body.usys-p3c6-app aside button {
  transition:
    background-color var(--usys-transition),
    border-color var(--usys-transition),
    color var(--usys-transition);
}

/* Active navigation state */
body.usys-p3c6-app nav [aria-current="page"],
body.usys-p3c6-app aside [aria-current="page"] {
  background: var(--usys-teal-050) !important;
  color: var(--usys-green-900) !important;
  border-color: rgba(12, 164, 170, .20) !important;
}

/* =========================================================
   SURFACES / CARDS
   ========================================================= */

body.usys-p3c6-app section,
body.usys-p3c6-app article {
  border-color: var(--usys-border);
}

body.usys-p3c6-app .client-detail,
body.usys-p3c6-app .client-list {
  border-color: var(--usys-border) !important;
}

/* Keep accepted P3C6C geometry intact. */
body.usys-p3c6-app
.platform-split > .client-list
> button.client-row {
  border-color: var(--usys-border) !important;
  background: var(--usys-surface) !important;
  transition:
    border-color var(--usys-transition),
    background-color var(--usys-transition),
    box-shadow var(--usys-transition);
}

body.usys-p3c6-app
.platform-split > .client-list
> button.client-row:hover {
  background: #fbfdfd !important;
  border-color: #acd9da !important;
  box-shadow: var(--usys-shadow-sm);
}

/* =========================================================
   BUTTONS
   ========================================================= */

body.usys-p3c6-app button {
  font-weight: 500;
}

body.usys-p3c6-app button:not(.client-row) {
  border-radius: var(--usys-radius-sm);
}

body.usys-p3c6-app button:focus-visible,
body.usys-p3c6-app a:focus-visible,
body.usys-p3c6-app input:focus-visible,
body.usys-p3c6-app select:focus-visible,
body.usys-p3c6-app textarea:focus-visible {
  outline: 3px solid rgba(26, 184, 189, .18) !important;
  outline-offset: 1px !important;
}

/* =========================================================
   FORM CONTROLS
   ========================================================= */

body.usys-p3c6-app input,
body.usys-p3c6-app select,
body.usys-p3c6-app textarea {
  color: var(--usys-ink-900);
  background-color: var(--usys-surface);
  border-color: var(--usys-border-strong);
  border-radius: var(--usys-radius-sm);
  transition:
    border-color var(--usys-transition),
    box-shadow var(--usys-transition),
    background-color var(--usys-transition);
}

body.usys-p3c6-app input:focus,
body.usys-p3c6-app select:focus,
body.usys-p3c6-app textarea:focus {
  border-color: var(--usys-teal-600) !important;
  box-shadow: 0 0 0 3px rgba(12, 164, 170, .10) !important;
}

/* =========================================================
   TABLES
   ========================================================= */

body.usys-p3c6-app table {
  border-color: var(--usys-border);
}

body.usys-p3c6-app thead th {
  color: var(--usys-ink-800);
  background: #f1f6f7 !important;
  font-weight: 600 !important;
  border-color: var(--usys-border) !important;
}

body.usys-p3c6-app tbody td {
  border-color: #e7eef0 !important;
}

body.usys-p3c6-app tbody tr:hover {
  background: #f8fbfb !important;
}

/* =========================================================
   STATUS CHIPS
   ========================================================= */

body.usys-p3c6-app .status,
body.usys-p3c6-app [class*="badge"],
body.usys-p3c6-app [class*="chip"] {
  border-radius: 999px;
}

/* =========================================================
   LOGIN + MFA BRAND CONTRAST
   ========================================================= */

/*
 * Login/MFA hero must not use same shade as logo.
 * Deep green -> teal foundation produces brand separation.
 */

body.usys-p3-login {
  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(20, 174, 150, .22),
      transparent 34%
    ),
    linear-gradient(
      118deg,
      #043f33 0%,
      #075b47 51%,
      #0c7760 100%
    ) !important;
}

/* Brand lockup remains transparent — contrast comes from background. */
body.usys-p3-login .usys-p3-lockup,
body.usys-p3-login .usys-p3-logo {
  background: transparent !important;
}

/*
 * Improve logo separation on dark hero.
 * Avoid dark-green wash that hides symbol.
 */
body.usys-p3-login .usys-p3-logo {
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.08))
    drop-shadow(0 8px 20px rgba(0,0,0,.08));
}

/* Product title must remain very clear. */
body.usys-p3-login .usys-p3-product {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
}

body.usys-p3-login .usys-p3-description {
  color: rgba(255,255,255,.95) !important;
}

body.usys-p3-login .usys-p3-corporate {
  color: rgba(255,255,255,.74) !important;
}

/* Login form card */
body.usys-p3-login form {
  border-radius: 18px;
}

/* =========================================================
   RESPONSIVE SAFETY
   ========================================================= */

@media (max-width: 900px) {
  body.usys-p3c6-app {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  body.usys-p3c6-app {
    font-size: 14px;
  }
}

/* END usys-p3c7a.css */

/* BEGIN usys-p3c7b.css */
/*
 * USys LIS P3C7B
 * Login + MFA brand contrast correction
 *
 * Does not change application workspace geometry.
 */

/* More differentiated hero background */
body.usys-p3-login {
  background:
    radial-gradient(
      circle at 78% 27%,
      rgba(17, 159, 139, .20),
      transparent 33%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(18, 129, 109, .17),
      transparent 38%
    ),
    linear-gradient(
      120deg,
      #032f29 0%,
      #054838 45%,
      #08705a 100%
    ) !important;
}

/*
 * Full-color logo receives its own light brand surface.
 * This prevents green-on-green loss while preserving
 * the official USys logo colors.
 */
body.usys-p3-login .usys-p3-logo {
  box-sizing: border-box !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.985),
      rgba(247,252,251,.965)
    ) !important;

  padding: 14px 20px !important;

  border:
    1px solid rgba(255,255,255,.72) !important;

  border-radius: 18px !important;

  box-shadow:
    0 1px 2px rgba(0,0,0,.05),
    0 12px 30px rgba(0,28,22,.13) !important;

  opacity: 1 !important;

  filter:
    saturate(1.08)
    contrast(1.08)
    brightness(1.02) !important;
}

/* Keep the whole lockup comfortably spaced. */
body.usys-p3-login .usys-p3-lockup {
  gap: 10px !important;
  overflow: visible !important;
}

/* Tagline remains separated from the light logo surface. */
body.usys-p3-login .usys-p3-tagline {
  color: rgba(255,255,255,.94) !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.12);

  opacity: 1 !important;
}

/* Product title */
body.usys-p3-login .usys-p3-product {
  color: #ffffff !important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.10);
}

/* Arabic/English descriptor */
body.usys-p3-login .usys-p3-description {
  color: rgba(255,255,255,.96) !important;
}

/* Corporate attribution */
body.usys-p3-login .usys-p3-corporate {
  color: rgba(255,255,255,.76) !important;
}

/* Login/MFA form surface */
body.usys-p3-login form {
  background: rgba(255,255,255,.985) !important;

  box-shadow:
    0 20px 50px rgba(0,33,26,.12) !important;
}

@media (max-width: 800px) {
  body.usys-p3-login .usys-p3-logo {
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
}

/* END usys-p3c7b.css */

/* BEGIN usys-p3c7c.css */
/*
 * USys LIS — P3C7C
 * Internal Shell Cleanup
 *
 * Confirmed DOM target:
 * .app-shell.platform-shell > aside.brand-rail
 *
 * Purpose:
 * - remove redundant internal brand rail
 * - return its width to operational workspace
 *
 * Explicitly protected:
 * - topbar
 * - operational navigation
 * - dashboard cards
 * - client list/detail
 * - login/MFA
 */

/* Remove only the confirmed redundant internal brand rail. */
body.usys-p3c6-app
.app-shell.platform-shell
> aside.brand-rail {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

/*
 * Reclaim the rail track if the desktop shell is grid-based.
 * A single flexible column is the correct post-rail structure.
 */
body.usys-p3c6-app
.app-shell.platform-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Main application region receives the recovered width. */
body.usys-p3c6-app
.app-shell.platform-shell
> main.app-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
}

/*
 * Avoid legacy space reservation on the outer shell.
 */
body.usys-p3c6-app
.app-shell.platform-shell {
  padding-inline-end: 0 !important;
}

/*
 * Keep internal main grid fluid but do NOT change its page geometry.
 */
body.usys-p3c6-app
main.app-main
> .main-grid.platform-main-grid {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Defensive mobile behavior: rail remains absent. */
@media (max-width: 1100px) {
  body.usys-p3c6-app
  .app-shell.platform-shell
  > aside.brand-rail {
    display: none !important;
  }

  body.usys-p3c6-app
  .app-shell.platform-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* END usys-p3c7c.css */

/* BEGIN usys-p3c7d0.css */
/*
 * P3C7D0 scope contract
 *
 * usys-p3-auth = Login / MFA
 * usys-p3-app  = Internal operational application
 */

/*
 * Ensure internal application does not inherit auth hero background
 * even during a transient class reconciliation frame.
 */
body.usys-p3-app {
  background:
    linear-gradient(
      180deg,
      #f7fafb 0%,
      #f3f7f8 100%
    ) !important;
}

/*
 * Auth visual identity remains exactly under auth scope.
 */
body.usys-p3-auth.usys-p3-login {
  min-height: 100vh;
}

/* END usys-p3c7d0.css */

/* BEGIN usys-p3c7d1.css */
/*
 * USys LIS — P3C7D1
 * Verified Core Components Foundation
 *
 * Application scope only.
 * No auth/login styling.
 */

/* =========================================================
   COMPONENT TOKENS
   ========================================================= */

body.usys-p3-app {
  --ui-control-h: 42px;
  --ui-control-radius: 10px;

  --ui-border: #d8e5e8;
  --ui-border-strong: #c7d9dd;

  --ui-primary: #08664f;
  --ui-primary-hover: #075844;
  --ui-primary-active: #064b3b;

  --ui-teal: #0ca4aa;
  --ui-focus: rgba(12,164,170,.16);

  --ui-surface: #ffffff;
  --ui-surface-soft: #f7fafb;

  --ui-text: #17333e;
  --ui-muted: #667e86;
}

/* =========================================================
   BUTTON FOUNDATION
   ========================================================= */

body.usys-p3-app button {
  font-family: inherit !important;
  font-weight: 500 !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}

body.usys-p3-app button.primary,
body.usys-p3-app .primary[type="button"],
body.usys-p3-app .primary[type="submit"] {
  min-height: var(--ui-control-h);
  padding-inline: 18px !important;

  color: #fff !important;
  background: var(--ui-primary) !important;

  border:
    1px solid var(--ui-primary) !important;

  border-radius:
    var(--ui-control-radius) !important;

  box-shadow:
    0 1px 2px rgba(5,55,45,.08) !important;
}

body.usys-p3-app button.primary:hover,
body.usys-p3-app .primary[type="button"]:hover,
body.usys-p3-app .primary[type="submit"]:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

body.usys-p3-app button.primary:active {
  background: var(--ui-primary-active) !important;
  transform: translateY(1px);
}

body.usys-p3-app button.secondary,
body.usys-p3-app .secondary[type="button"] {
  min-height: var(--ui-control-h);
  padding-inline: 16px !important;

  color: var(--ui-text) !important;
  background: #fff !important;

  border:
    1px solid var(--ui-border-strong) !important;

  border-radius:
    var(--ui-control-radius) !important;
}

body.usys-p3-app button.secondary:hover {
  background: #f7fafb !important;
  border-color: #a9c6cb !important;
}

/* Compact toolbar actions remain compact. */
body.usys-p3-app button.compact-action {
  min-width: 40px;
  min-height: 40px;

  border-radius: 10px !important;
}

/* =========================================================
   TEXT / SELECT CONTROLS
   ========================================================= */

body.usys-p3-app input:not([type="checkbox"]):not([type="radio"]),
body.usys-p3-app select,
body.usys-p3-app textarea {
  box-sizing: border-box;

  min-height: var(--ui-control-h);

  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;

  border:
    1px solid var(--ui-border-strong) !important;

  border-radius:
    var(--ui-control-radius) !important;

  padding:
    8px 12px !important;

  font-family: inherit !important;
  font-size: .94rem;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

body.usys-p3-app textarea {
  min-height: 96px;
  line-height: 1.6;
  resize: vertical;
}

body.usys-p3-app input:not([type="checkbox"]):not([type="radio"]):hover,
body.usys-p3-app select:hover,
body.usys-p3-app textarea:hover {
  border-color: #aec8cd !important;
}

body.usys-p3-app input:not([type="checkbox"]):not([type="radio"]):focus,
body.usys-p3-app select:focus,
body.usys-p3-app textarea:focus {
  outline: none !important;

  border-color:
    var(--ui-teal) !important;

  box-shadow:
    0 0 0 3px var(--ui-focus) !important;
}

body.usys-p3-app input::placeholder,
body.usys-p3-app textarea::placeholder {
  color: #8ca0a6;
  opacity: 1;
}

/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

body.usys-p3-app input[type="checkbox"],
body.usys-p3-app input[type="radio"] {
  width: 20px;
  height: 20px;

  margin: 0 4px;

  accent-color: var(--ui-teal);

  cursor: pointer;
}

body.usys-p3-app input[type="checkbox"]:focus-visible,
body.usys-p3-app input[type="radio"]:focus-visible {
  outline:
    3px solid var(--ui-focus) !important;

  outline-offset: 2px;
}

/* =========================================================
   CONTROL PANELS
   ========================================================= */

body.usys-p3-app .control-panel {
  background:
    var(--ui-surface) !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius:
    14px !important;

  box-shadow:
    0 1px 2px rgba(17,48,58,.035),
    0 8px 22px rgba(17,48,58,.035) !important;
}

/* =========================================================
   FEATURE CARDS
   ========================================================= */

body.usys-p3-app .feature-card {
  background:
    var(--ui-surface) !important;

  border:
    1px solid var(--ui-border) !important;

  border-radius:
    13px !important;

  box-shadow:
    0 1px 2px rgba(17,48,58,.03) !important;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 120ms ease;
}

body.usys-p3-app .feature-card:hover {
  border-color:
    #b8d8da !important;

  box-shadow:
    0 7px 20px rgba(17,48,58,.055) !important;
}

/* =========================================================
   CUSTOMER ROW
   ========================================================= */

body.usys-p3-app button.client-row {
  border-radius: 13px !important;

  border-color:
    var(--ui-border) !important;
}

body.usys-p3-app button.client-row:hover {
  border-color:
    #9fd1d4 !important;

  background:
    #fbfdfd !important;
}

/* =========================================================
   LABELS / HELP TEXT
   ========================================================= */

body.usys-p3-app label {
  color: var(--ui-text);
  font-weight: 500;
}

body.usys-p3-app small {
  line-height: 1.45;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

body.usys-p3-app button:focus-visible,
body.usys-p3-app a:focus-visible {
  outline:
    3px solid var(--ui-focus) !important;

  outline-offset: 2px !important;
}

/* Disabled controls */
body.usys-p3-app button:disabled,
body.usys-p3-app input:disabled,
body.usys-p3-app select:disabled,
body.usys-p3-app textarea:disabled {
  opacity: .58;
  cursor: not-allowed;
}

/* =========================================================
   RESPONSIVE CONTROL SAFETY
   ========================================================= */

@media (max-width: 720px) {
  body.usys-p3-app
  input:not([type="checkbox"]):not([type="radio"]),
  body.usys-p3-app select,
  body.usys-p3-app textarea {
    font-size: 16px;
  }
}

/* END usys-p3c7d1.css */

/* BEGIN usys-p3c7d1a.css */
/*
 * USys LIS — P3C7D1A
 * Page Action Consistency
 *
 * Confirmed runtime target:
 * .page-head > button with no class.
 *
 * Scope intentionally narrow.
 */

body.usys-p3-app
.page-head
> button:not([class]),

body.usys-p3-app
.page-head
> button[class=""] {
  box-sizing: border-box !important;

  min-height: 40px !important;

  padding:
    8px 14px !important;

  font-family:
    inherit !important;

  font-size:
    .90rem !important;

  font-weight:
    500 !important;

  line-height:
    1.2 !important;

  color:
    var(--ui-text, #17333e) !important;

  background:
    #ffffff !important;

  border:
    1px solid var(--ui-border-strong, #c7d9dd) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 1px 2px rgba(17,48,58,.04) !important;

  cursor:
    pointer !important;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease !important;
}

body.usys-p3-app
.page-head
> button:not([class]):hover,

body.usys-p3-app
.page-head
> button[class=""]:hover {
  background:
    #f7fafb !important;

  border-color:
    #a9c6cb !important;
}

body.usys-p3-app
.page-head
> button:not([class]):active,

body.usys-p3-app
.page-head
> button[class=""]:active {
  transform:
    translateY(1px);
}

body.usys-p3-app
.page-head
> button:not([class]):focus-visible,

body.usys-p3-app
.page-head
> button[class=""]:focus-visible {
  outline:
    3px solid var(--ui-focus, rgba(12,164,170,.16)) !important;

  outline-offset:
    2px !important;
}

/*
 * Mobile safety:
 * page action remains usable without forcing full width.
 */
@media (max-width: 720px) {
  body.usys-p3-app
  .page-head
  > button:not([class]),

  body.usys-p3-app
  .page-head
  > button[class=""] {
    min-height:
      40px !important;

    padding-inline:
      12px !important;
  }
}

/* END usys-p3c7d1a.css */

/* BEGIN usys-p3c7d2a.css */
/*
 * USys LIS — P3C7D2A
 * Verified Data Presentation Foundation
 *
 * Confirmed runtime scope:
 * - .platform-audit-filters
 * - .table-card.platform-audit-table
 * - table.usys-responsive-table
 * - .usys-column-filter-button
 * - .pagination-row
 */

/* =========================================================
   AUDIT FILTER SURFACE
   ========================================================= */

body.usys-p3-app .platform-audit-filters {
  box-sizing: border-box;

  padding: 14px !important;
  gap: 12px !important;

  background:
    var(--ui-surface, #ffffff) !important;

  border:
    1px solid var(--ui-border, #d8e5e8) !important;

  border-radius:
    14px !important;

  box-shadow:
    0 1px 2px rgba(17,48,58,.025) !important;
}

body.usys-p3-app
.platform-audit-filters
.inline-actions {
  gap: 8px !important;
  align-items: center;
  flex-wrap: wrap;
}

body.usys-p3-app
.platform-audit-filters
.inline-actions
button {
  min-height: 40px !important;
  padding-inline: 14px !important;

  color:
    var(--ui-text, #17333e) !important;

  background:
    #ffffff !important;

  border:
    1px solid var(--ui-border-strong, #c7d9dd) !important;

  border-radius:
    10px !important;
}

body.usys-p3-app
.platform-audit-filters
.inline-actions
button:last-child {
  color: #ffffff !important;

  background:
    var(--ui-primary, #08664f) !important;

  border-color:
    var(--ui-primary, #08664f) !important;
}

/* =========================================================
   TABLE CARD / SAFE HORIZONTAL OVERFLOW
   ========================================================= */

body.usys-p3-app
.table-card.platform-audit-table {
  box-sizing: border-box;

  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: visible;

  border:
    1px solid var(--ui-border, #d8e5e8) !important;

  border-radius:
    14px !important;

  background:
    var(--ui-surface, #ffffff) !important;

  box-shadow:
    0 1px 2px rgba(17,48,58,.025),
    0 8px 24px rgba(17,48,58,.025) !important;

  scrollbar-gutter: stable;
}

/* =========================================================
   TABLE FOUNDATION
   ========================================================= */

body.usys-p3-app
table.usys-responsive-table {
  width: 100%;
  min-width: 1120px;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  color:
    var(--ui-text, #17333e);

  background:
    #ffffff;
}

body.usys-p3-app
table.usys-responsive-table
thead th {
  padding:
    10px 12px !important;

  font-size:
    .82rem !important;

  font-weight:
    600 !important;

  line-height:
    1.35;

  white-space:
    nowrap;

  color:
    #45636d !important;

  background:
    #f3f7f8 !important;

  border-bottom:
    1px solid var(--ui-border-strong, #c7d9dd) !important;
}

body.usys-p3-app
table.usys-responsive-table
tbody td {
  padding:
    10px 12px !important;

  font-size:
    .86rem !important;

  line-height:
    1.45;

  vertical-align:
    top;

  border-bottom:
    1px solid #edf2f3 !important;

  background:
    #ffffff;
}

body.usys-p3-app
table.usys-responsive-table
tbody tr:last-child td {
  border-bottom:
    0 !important;
}

body.usys-p3-app
table.usys-responsive-table
tbody tr:hover td {
  background:
    #f8fbfb !important;
}

/*
 * Preserve long operational values without destructive clipping.
 */
body.usys-p3-app
table.usys-responsive-table
td {
  overflow-wrap:
    anywhere;
}

/* =========================================================
   COLUMN FILTER BUTTON
   ========================================================= */

body.usys-p3-app
.usys-column-filter-button {
  box-sizing:
    border-box !important;

  width:
    30px !important;

  min-width:
    30px !important;

  height:
    30px !important;

  min-height:
    30px !important;

  padding:
    0 !important;

  display:
    inline-grid !important;

  place-items:
    center !important;

  color:
    #58727a !important;

  background:
    #ffffff !important;

  border:
    1px solid #d7e4e7 !important;

  border-radius:
    8px !important;

  box-shadow:
    none !important;
}

body.usys-p3-app
.usys-column-filter-button:hover {
  color:
    var(--ui-primary, #08664f) !important;

  background:
    #f4f9f9 !important;

  border-color:
    #a9ced1 !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */

body.usys-p3-app
.pagination-row {
  box-sizing:
    border-box;

  min-height:
    44px;

  gap:
    8px !important;

  padding:
    8px 10px !important;

  align-items:
    center;

  flex-wrap:
    wrap;

  color:
    var(--ui-muted, #667e86);

  background:
    #fbfdfd;

  border-top:
    1px solid #e6eef0;
}

body.usys-p3-app
.pagination-row
button {
  min-width:
    36px !important;

  min-height:
    36px !important;

  padding:
    6px 10px !important;

  color:
    var(--ui-text, #17333e) !important;

  background:
    #ffffff !important;

  border:
    1px solid var(--ui-border-strong, #c7d9dd) !important;

  border-radius:
    9px !important;
}

body.usys-p3-app
.pagination-row
button:hover:not(:disabled) {
  border-color:
    #9fc7cb !important;

  background:
    #f5fafb !important;
}

body.usys-p3-app
.pagination-row
select {
  min-width:
    72px;
}

/* =========================================================
   GENERIC AUDIT INLINE ACTION GROUP
   Visual spacing only — no global button recoloring.
   ========================================================= */

body.usys-p3-app
.inline-actions {
  gap:
    8px;
}

/* =========================================================
   RESPONSIVE SAFETY
   ========================================================= */

@media (max-width: 900px) {
  body.usys-p3-app
  .table-card.platform-audit-table {
    overflow-x:
      auto !important;

    -webkit-overflow-scrolling:
      touch;
  }

  body.usys-p3-app
  table.usys-responsive-table {
    min-width:
      1040px;
  }

  body.usys-p3-app
  .platform-audit-filters {
    padding:
      12px !important;
  }
}

@media (max-width: 720px) {
  body.usys-p3-app
  .pagination-row {
    padding:
      8px !important;
  }

  body.usys-p3-app
  .usys-column-filter-button {
    width:
      32px !important;

    min-width:
      32px !important;

    height:
      32px !important;
  }
}

/* END usys-p3c7d2a.css */

/* BEGIN usys-p3c7d2b.css */
/*
 * USys LIS — P3C7D2B
 *
 * Confirmed runtime facts:
 * - datetime-local controls are already LTR.
 * - pagination counter DOM text is "1 / 18"
 *   but inherits RTL and renders visually reversed.
 */

/* =========================================================
   PAGINATION BIDI ISOLATION
   ========================================================= */

body.usys-p3-app
.pagination-row > b {
  display: inline-block !important;

  direction: ltr !important;
  unicode-bidi: isolate !important;

  white-space: nowrap !important;

  font-variant-numeric:
    tabular-nums;

  letter-spacing: 0 !important;
}

/* Keep numeric page-size choices visually stable. */
body.usys-p3-app
.pagination-row > select {
  direction: ltr !important;
  text-align: center !important;

  font-variant-numeric:
    tabular-nums;
}

/* =========================================================
   NATIVE DATETIME CONTROLS
   No type/value/locale mutation.
   ========================================================= */

body.usys-p3-app
.platform-audit-filters
input[type="datetime-local"] {
  direction: ltr !important;
  text-align: left !important;

  font-variant-numeric:
    tabular-nums;

  unicode-bidi:
    isolate;

  min-width:
    210px;
}

/*
 * Calendar affordance remains native to browser/OS.
 * We intentionally do not replace datetime-local with text.
 */
body.usys-p3-app
.platform-audit-filters
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .72;
}

body.usys-p3-app
.platform-audit-filters
input[type="datetime-local"]:hover
::-webkit-calendar-picker-indicator {
  opacity: 1;
}

@media (max-width: 720px) {
  body.usys-p3-app
  .platform-audit-filters
  input[type="datetime-local"] {
    width: 100%;
    min-width: 0;
  }
}

/* END usys-p3c7d2b.css */

/* BEGIN usys-p3c7d3a.css */
/*
 * USys LIS — P3C7D3A
 * Audit Detail Modal Foundation
 *
 * Verified runtime selectors only.
 */

/* =========================================================
   BACKDROP
   ========================================================= */

body.usys-p3-app .modal-backdrop {
  box-sizing: border-box;

  padding: 24px !important;

  background:
    rgba(9, 37, 42, .42) !important;

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}

/* =========================================================
   AUDIT MODAL CARD
   ========================================================= */

body.usys-p3-app
.modal-card.platform-audit-detail {
  box-sizing: border-box !important;

  width:
    min(760px, calc(100vw - 48px)) !important;

  max-width:
    100% !important;

  max-height:
    min(86vh, 820px) !important;

  padding:
    0 20px 20px !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  color:
    var(--ui-text, #17333e) !important;

  background:
    #ffffff !important;

  border:
    1px solid var(--ui-border, #d8e5e8) !important;

  border-radius:
    18px !important;

  box-shadow:
    0 24px 70px rgba(8, 35, 42, .20),
    0 4px 18px rgba(8, 35, 42, .08) !important;

  scrollbar-gutter:
    stable;
}

/* =========================================================
   STICKY HEADER
   ========================================================= */

body.usys-p3-app
.platform-audit-detail
.modal-head {
  position:
    sticky !important;

  top:
    0;

  z-index:
    4;

  min-height:
    64px;

  margin:
    0 -20px 16px !important;

  padding:
    14px 20px !important;

  align-items:
    center !important;

  gap:
    12px;

  background:
    rgba(255, 255, 255, .97) !important;

  border-bottom:
    1px solid #e3edef !important;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

body.usys-p3-app
.platform-audit-detail
.modal-head h1,

body.usys-p3-app
.platform-audit-detail
.modal-head h2,

body.usys-p3-app
.platform-audit-detail
.modal-head h3 {
  margin:
    0 !important;

  font-size:
    1.18rem !important;

  font-weight:
    700 !important;

  line-height:
    1.35 !important;
}

/* Confirmed close button has no class. */
body.usys-p3-app
.platform-audit-detail
.modal-head
> button:not([class]),

body.usys-p3-app
.platform-audit-detail
.modal-head
> button[class=""] {
  box-sizing:
    border-box !important;

  width:
    38px !important;

  min-width:
    38px !important;

  height:
    38px !important;

  min-height:
    38px !important;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center !important;

  font-size:
    1.25rem !important;

  line-height:
    1 !important;

  color:
    #47636b !important;

  background:
    #f7fafb !important;

  border:
    1px solid #d6e3e6 !important;

  border-radius:
    10px !important;

  box-shadow:
    none !important;
}

body.usys-p3-app
.platform-audit-detail
.modal-head
> button:not([class]):hover,

body.usys-p3-app
.platform-audit-detail
.modal-head
> button[class=""]:hover {
  color:
    #17333e !important;

  background:
    #edf4f5 !important;

  border-color:
    #b9cfd3 !important;
}

/* =========================================================
   AUDIT IDENTITY GRID
   ========================================================= */

body.usys-p3-app
.platform-audit-detail
.audit-detail-grid {
  box-sizing:
    border-box;

  gap:
    10px 14px !important;

  margin-bottom:
    20px !important;

  padding:
    14px !important;

  background:
    #f8fbfb !important;

  border:
    1px solid #deeaec !important;

  border-radius:
    14px !important;
}

/* Technical identifiers must remain stable in RTL UI. */
body.usys-p3-app
.platform-audit-detail
.audit-detail-grid code,

body.usys-p3-app
.platform-audit-detail
code {
  max-width:
    100%;

  direction:
    ltr !important;

  unicode-bidi:
    isolate !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  word-break:
    break-word !important;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace !important;

  font-size:
    .82rem !important;

  line-height:
    1.45 !important;

  color:
    #164c5a !important;

  background:
    #edf5f6 !important;

  border-radius:
    6px !important;
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */

body.usys-p3-app
.platform-audit-detail
> h3 {
  margin:
    20px 0 8px !important;

  padding-bottom:
    7px;

  font-size:
    1rem !important;

  font-weight:
    700 !important;

  line-height:
    1.4 !important;

  color:
    #17333e !important;

  border-bottom:
    1px solid #e6eef0;
}

/* =========================================================
   STRUCTURED METADATA
   ========================================================= */

body.usys-p3-app
.platform-audit-detail
.audit-structured-metadata {
  box-sizing:
    border-box;

  max-width:
    100%;

  padding:
    12px 14px !important;

  line-height:
    1.6 !important;

  overflow-wrap:
    anywhere;

  word-break:
    normal;

  color:
    #294a54 !important;

  background:
    #fbfdfd !important;

  border:
    1px solid #e1ebed !important;

  border-radius:
    12px !important;
}

/*
 * Preserve long metadata as structured content.
 * No raw JSON conversion and no forced single-line presentation.
 */
body.usys-p3-app
.platform-audit-detail
.audit-structured-metadata
code {
  display:
    inline-block;

  max-width:
    100%;
}

/* =========================================================
   SECURITY / PRIVACY NOTE
   ========================================================= */

body.usys-p3-app
.platform-audit-detail
.audit-structured-note {
  display:
    block !important;

  margin-top:
    12px !important;

  padding:
    10px 12px !important;

  line-height:
    1.55 !important;

  color:
    #58717a !important;

  background:
    #f5f9fa !important;

  border-inline-start:
    3px solid #9bc7c8 !important;

  border-radius:
    8px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {

  body.usys-p3-app
  .modal-backdrop {
    padding:
      10px !important;
  }

  body.usys-p3-app
  .modal-card.platform-audit-detail {
    width:
      calc(100vw - 20px) !important;

    max-height:
      calc(100vh - 20px) !important;

    padding:
      0 14px 14px !important;

    border-radius:
      14px !important;
  }

  body.usys-p3-app
  .platform-audit-detail
  .modal-head {
    margin:
      0 -14px 14px !important;

    padding:
      12px 14px !important;
  }

  body.usys-p3-app
  .platform-audit-detail
  .audit-detail-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}

/* END usys-p3c7d3a.css */

/* BEGIN usys-p3c7d4a.css */
/*
 * USys LIS — P3C7D4A
 * Platform Staff User Status Foundation
 *
 * Verified scope only:
 * .platform-staff-list
 * .platform-staff-card
 * .platform-staff-identity
 * .status.status-active / .status.status-inactive
 */

/* =========================================================
   SHARED STATUS PILL
   ========================================================= */

body.usys-p3-app
.platform-staff-list
.platform-staff-card
.platform-staff-identity
> .status.status-active,

body.usys-p3-app
.platform-staff-list
.platform-staff-card
.platform-staff-identity
> .status.status-inactive {
  box-sizing:
    border-box !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    auto !important;

  min-width:
    52px !important;

  min-height:
    28px !important;

  padding:
    4px 10px !important;

  border-radius:
    999px !important;

  font-size:
    .78rem !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  white-space:
    nowrap !important;

  letter-spacing:
    0 !important;

  box-shadow:
    0 1px 2px rgba(15, 38, 45, .04) !important;
}

/* =========================================================
   ACTIVE
   ========================================================= */

body.usys-p3-app
.platform-staff-list
.platform-staff-card
.platform-staff-identity
> .status.status-active {
  color:
    #166534 !important;

  background:
    #e9f8ef !important;

  border:
    1px solid rgba(22, 101, 52, .16) !important;
}

/* =========================================================
   INACTIVE
   ========================================================= */

body.usys-p3-app
.platform-staff-list
.platform-staff-card
.platform-staff-identity
> .status.status-inactive {
  color:
    #475569 !important;

  background:
    #f3f6f8 !important;

  border:
    1px solid rgba(71, 85, 105, .16) !important;
}

/* =========================================================
   SMALL VIEWPORT
   ========================================================= */

@media (max-width: 720px) {

  body.usys-p3-app
  .platform-staff-list
  .platform-staff-card
  .platform-staff-identity
  > .status.status-active,

  body.usys-p3-app
  .platform-staff-list
  .platform-staff-card
  .platform-staff-identity
  > .status.status-inactive {
    min-width:
      50px !important;

    min-height:
      27px !important;

    padding:
      4px 9px !important;
  }
}

/* END usys-p3c7d4a.css */

/* BEGIN usys-p3c7d5a.css */
/*
 * USys LIS — P3C7D5A
 * Permission / Technical Chip Foundation
 *
 * Verified runtime:
 * .permission-chip-list > span
 * .permission-chip-list.compact > span
 */

/* =========================================================
   CHIP LIST CONTAINER
   ========================================================= */

body.usys-p3-app
.permission-chip-list {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    6px !important;

  min-width:
    0;

  max-width:
    100%;
}

/* =========================================================
   STANDARD BUSINESS PERMISSION CHIP
   ========================================================= */

body.usys-p3-app
.permission-chip-list:not(.compact)
> span {
  box-sizing:
    border-box !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    28px !important;

  max-width:
    100% !important;

  padding:
    4px 10px !important;

  direction:
    rtl !important;

  unicode-bidi:
    isolate !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  font-size:
    .78rem !important;

  font-weight:
    600 !important;

  line-height:
    1.35 !important;

  color:
    #174e61 !important;

  background:
    #edf5f7 !important;

  border:
    1px solid #d3e4ea !important;

  border-radius:
    999px !important;

  box-shadow:
    0 1px 2px rgba(15, 55, 66, .03) !important;
}

/* =========================================================
   COMPACT TECHNICAL PERMISSION CHIP
   ========================================================= */

body.usys-p3-app
.permission-chip-list.compact
> span {
  box-sizing:
    border-box !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    27px !important;

  max-width:
    100% !important;

  padding:
    4px 9px !important;

  direction:
    ltr !important;

  unicode-bidi:
    isolate !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace !important;

  font-size:
    .74rem !important;

  font-weight:
    600 !important;

  line-height:
    1.35 !important;

  color:
    #1b5961 !important;

  background:
    #edf4f5 !important;

  border:
    1px solid #d3e4ea !important;

  border-radius:
    999px !important;

  box-shadow:
    none !important;
}

/* Wildcard remains compact and visually centered. */
body.usys-p3-app
.permission-chip-list.compact
> span:only-child {
  min-width:
    28px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  body.usys-p3-app
  .permission-chip-list {
    gap:
      5px !important;
  }

  body.usys-p3-app
  .permission-chip-list:not(.compact)
  > span,

  body.usys-p3-app
  .permission-chip-list.compact
  > span {
    max-width:
      100% !important;
  }
}

/* END usys-p3c7d5a.css */

/* BEGIN usys-p3c7d6a.css */
/*
 * USys LIS — P3C7D6A
 * Support Availability + Tabs Foundation
 *
 * Verified selectors only.
 */

/* =========================================================
   AVAILABILITY CONTROL GROUP
   ========================================================= */

body.usys-p3-app
.support-agent-bar
.support-presence-actions {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    7px !important;
}

body.usys-p3-app
.support-agent-bar
.support-presence-actions
> button {
  box-sizing:
    border-box !important;

  min-height:
    40px !important;

  padding:
    8px 13px !important;

  font-family:
    inherit !important;

  font-size:
    .9rem !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  color:
    #294b55 !important;

  background:
    #ffffff !important;

  border:
    1px solid #cbdcdf !important;

  border-radius:
    10px !important;

  box-shadow:
    none !important;

  cursor:
    pointer;
}

/*
 * primary here means selected availability option.
 * Keep it semantically neutral rather than positive-green,
 * because the selected value may itself be "غير متصل".
 */
body.usys-p3-app
.support-agent-bar
.support-presence-actions
> button.primary {
  color:
    #ffffff !important;

  background:
    #526b73 !important;

  border-color:
    #526b73 !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

body.usys-p3-app
.support-agent-bar
.support-presence-actions
> button:not(.primary):hover {
  background:
    #f5f9fa !important;

  border-color:
    #a9c2c7 !important;
}

body.usys-p3-app
.support-agent-bar
.support-presence-actions
> button:focus-visible {
  outline:
    3px solid rgba(15,124,122,.18) !important;

  outline-offset:
    2px !important;
}

/* =========================================================
   PRESENCE SUMMARY
   ========================================================= */

body.usys-p3-app
.support-presence.offline {
  box-sizing:
    border-box !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  min-height:
    34px !important;

  padding:
    7px 11px !important;

  font-size:
    .82rem !important;

  font-weight:
    600 !important;

  line-height:
    1.25 !important;

  color:
    #586b73 !important;

  background:
    #f2f5f6 !important;

  border:
    1px solid #dde6e8 !important;

  border-radius:
    999px !important;
}

/* =========================================================
   SUPPORT CENTER TABS
   ========================================================= */

body.usys-p3-app
.support-center.platform-support-console
.tabs.support-tabs {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    6px !important;

  padding:
    4px !important;

  background:
    #f5f8f9 !important;

  border:
    1px solid #e0e9eb !important;

  border-radius:
    12px !important;
}

body.usys-p3-app
.support-center.platform-support-console
.tabs.support-tabs
> button {
  box-sizing:
    border-box !important;

  min-height:
    34px !important;

  padding:
    7px 12px !important;

  font-family:
    inherit !important;

  font-size:
    .88rem !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  color:
    #31525c !important;

  background:
    transparent !important;

  border:
    1px solid transparent !important;

  border-radius:
    9px !important;

  box-shadow:
    none !important;
}

body.usys-p3-app
.support-center.platform-support-console
.tabs.support-tabs
> button:hover:not(.active) {
  color:
    #173f49 !important;

  background:
    #ffffff !important;

  border-color:
    #d4e1e4 !important;
}

body.usys-p3-app
.support-center.platform-support-console
.tabs.support-tabs
> button.active {
  color:
    #ffffff !important;

  background:
    #0f7c7a !important;

  border-color:
    #0f7c7a !important;

  box-shadow:
    0 2px 6px rgba(15,124,122,.14) !important;
}

body.usys-p3-app
.support-center.platform-support-console
.tabs.support-tabs
> button:focus-visible {
  outline:
    3px solid rgba(15,124,122,.18) !important;

  outline-offset:
    2px !important;
}

/* =========================================================
   SMALL VIEWPORT
   ========================================================= */

@media (max-width: 720px) {

  body.usys-p3-app
  .support-agent-bar
  .support-presence-actions {
    width:
      100%;
  }

  body.usys-p3-app
  .support-agent-bar
  .support-presence-actions
  > button {
    flex:
      1 1 auto;
  }

  body.usys-p3-app
  .support-center.platform-support-console
  .tabs.support-tabs {
    gap:
      5px !important;
  }

  body.usys-p3-app
  .support-center.platform-support-console
  .tabs.support-tabs
  > button {
    flex:
      1 1 auto;
  }
}

/* END usys-p3c7d6a.css */