/**
 * Rocad compatibility layer — Phase 3.1–4 shell + Phase 5 forms + Phase 6 tables
 *
 * All new shell styles are scoped to #rocad-app (.rocad-shell).
 * AdminLTE / Bootstrap 3 classes remain authoritative for layout and behavior.
 */

/* -------------------------------------------------------------------------- */
/* Shell scope — design tokens, typography, spacing, responsive foundation    */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell {
  /* Brand */
  --rocad-color-brand: #084fa8;
  --rocad-color-brand-dark: #063d82;
  --rocad-color-brand-light: #3b82f6;

  /* Surfaces */
  --rocad-color-surface: #f8fafc;
  --rocad-color-surface-raised: #ffffff;
  --rocad-color-surface-muted: #f1f5f9;

  /* Text */
  --rocad-color-text: #0f172a;
  --rocad-color-text-muted: #64748b;
  --rocad-color-text-inverse: #ffffff;

  /* Borders & focus */
  --rocad-color-border: #e2e8f0;
  --rocad-color-border-strong: #cbd5e1;
  --rocad-color-focus-ring: rgba(8, 79, 168, 0.35);

  /* Spacing scale (4px base) */
  --rocad-space-0: 0;
  --rocad-space-1: 0.25rem;
  --rocad-space-2: 0.5rem;
  --rocad-space-3: 0.75rem;
  --rocad-space-4: 1rem;
  --rocad-space-5: 1.25rem;
  --rocad-space-6: 1.5rem;
  --rocad-space-8: 2rem;
  --rocad-space-10: 2.5rem;
  --rocad-space-12: 3rem;

  /* Typography — explicit px scale (matches AdminLTE comfort, Inter-friendly) */
  --rocad-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --rocad-font-size-xs: 12px;
  --rocad-font-size-sm: 14px;
  --rocad-font-size-base: 15px;
  --rocad-font-size-lg: 18px;
  --rocad-font-size-xl: 20px;
  --rocad-font-size-page-title: 30px;
  --rocad-font-size-widget-title: 22px;
  --rocad-font-size-sidebar: 15px;
  --rocad-font-size-body: 15px;
  --rocad-line-height-tight: 1.25;
  --rocad-line-height-base: 1.6;
  --rocad-line-height-relaxed: 1.625;
  --rocad-font-weight-normal: 400;
  --rocad-font-weight-medium: 500;
  --rocad-font-weight-semibold: 600;

  /* Layout / responsive shell */
  --rocad-shell-max-width: 100%;
  --rocad-shell-sidebar-width: 230px;
  --rocad-shell-sidebar-mini-width: 50px;
  --rocad-shell-header-height: 56px;
  --rocad-topbar-font-size: 16px;
  --rocad-topbar-font-size-nav: 15px;
  --rocad-topbar-font-size-dropdown: 15px;
  --rocad-topbar-font-size-username: 16px;
  --rocad-shell-content-gutter: var(--rocad-space-4);
  --rocad-shell-breakpoint-sm: 768px;
  --rocad-shell-breakpoint-md: 992px;
  --rocad-shell-breakpoint-lg: 1200px;

  /* Elevation (reserved for Phase 3.2+) */
  --rocad-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --rocad-shadow-md: 0 1px 3px 0 rgb(15 23 42 / 0.08),
    0 1px 2px -1px rgb(15 23 42 / 0.08);
  --rocad-shadow-lg: 0 4px 6px -1px rgb(15 23 42 / 0.08),
    0 2px 4px -2px rgb(15 23 42 / 0.08);
  --rocad-radius-sm: 0.375rem;
  --rocad-radius-md: 0.5rem;
  --rocad-radius-lg: 0.75rem;

  /* Sidebar — Phase 3.3 */
  --rocad-sidebar-bg: #0f1419;
  --rocad-sidebar-bg-elevated: #161b22;
  --rocad-sidebar-bg-hover: rgba(255, 255, 255, 0.05);
  --rocad-sidebar-bg-active: rgba(8, 79, 168, 0.18);
  --rocad-sidebar-border: rgba(255, 255, 255, 0.08);
  --rocad-sidebar-text: #e2e8f0;
  --rocad-sidebar-text-muted: #94a3b8;
  --rocad-sidebar-text-faint: #64748b;
  --rocad-sidebar-accent: var(--rocad-color-brand-light);
  --rocad-sidebar-item-radius: var(--rocad-radius-md);
  --rocad-sidebar-transition: 0.18s ease;

  /* Sidebar footer — fixed SaaS account strip */
  --rocad-sidebar-header-height: 64px;
  --rocad-sidebar-footer-height: 84px;
  --rocad-sidebar-footer-height-collapsed: 52px;
  --rocad-sidebar-footer-account-height: 52px;
  --rocad-sidebar-footer-avatar-size: 36px;
  --rocad-sidebar-footer-logout-size: 36px;

  /* Forms — Phase 5 */
  --rocad-form-field-height: 46px;
  --rocad-form-field-radius: 0.625rem;
  --rocad-form-section-gap: var(--rocad-space-6);
  --rocad-form-max-width: 540px;
  --rocad-form-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
    0 8px 24px rgb(15 23 42 / 0.07), 0 24px 48px rgb(15 23 42 / 0.04);
  --rocad-form-shadow-hover: 0 2px 4px rgb(15 23 42 / 0.05),
    0 12px 32px rgb(15 23 42 / 0.09);
  --rocad-form-accent-gradient: linear-gradient(
    135deg,
    var(--rocad-color-brand) 0%,
    var(--rocad-color-brand-light) 100%
  );
  --rocad-color-success: #15803d;
  --rocad-color-success-bg: rgba(34, 197, 94, 0.12);
  --rocad-color-success-border: rgba(34, 197, 94, 0.35);
  --rocad-color-danger: #b91c1c;
  --rocad-color-danger-bg: rgba(239, 68, 68, 0.1);
  --rocad-color-danger-border: rgba(239, 68, 68, 0.35);
  --rocad-color-info-bg: rgba(8, 79, 168, 0.08);
  --rocad-color-info-border: rgba(8, 79, 168, 0.25);
  --rocad-form-transition: 0.15s ease;

  /* Responsive foundation — flex/grid children shrink correctly */
  min-width: 0;
  max-width: var(--rocad-shell-max-width);
  isolation: isolate;
  color-scheme: light;

  /* Inter font stack — do not set font-size here (avoids global scale regression) */
  font-family: var(--rocad-font-sans);
  line-height: var(--rocad-line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Dark-mode tokens — inactive until html.dark is enabled in a later phase */
html.dark #rocad-app.rocad-shell {
  color-scheme: dark;
  --rocad-color-surface: #0f172a;
  --rocad-color-surface-raised: #1e293b;
  --rocad-color-surface-muted: #334155;
  --rocad-color-text: #f8fafc;
  --rocad-color-text-muted: #94a3b8;
  --rocad-color-text-inverse: #0f172a;
  --rocad-color-border: #334155;
  --rocad-color-border-strong: #475569;
  --rocad-color-focus-ring: rgba(59, 130, 246, 0.4);
}

/* Content area — layout hook + readable body scale */
#rocad-app.rocad-shell .content-wrapper {
  min-width: 0;
  font-family: var(--rocad-font-sans);
  font-size: var(--rocad-font-size-body);
  line-height: var(--rocad-line-height-base);
  color: var(--rocad-color-text);
  background-color: var(--rocad-color-surface);
}

/* -------------------------------------------------------------------------- */
/* Typography restoration — font sizes only (no layout changes)               */
/* -------------------------------------------------------------------------- */

/* Page titles (e.g. Dashboard) — AdminLTE default was 24px */
#rocad-app.rocad-shell .content-header > h1 {
  font-size: var(--rocad-font-size-page-title);
  line-height: 1.25;
  font-weight: var(--rocad-font-weight-normal);
}

#rocad-app.rocad-shell .content-header > h1 > small {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-normal);
}

/* Widget / box titles (e.g. Diesel Trend) — AdminLTE default was 18px */
#rocad-app.rocad-shell .box-header .box-title,
#rocad-app.rocad-shell .box-header > .box-title {
  font-size: var(--rocad-font-size-widget-title);
  line-height: 1.25;
  font-weight: var(--rocad-font-weight-normal);
}

/* Content section body copy */
#rocad-app.rocad-shell .content {
  font-size: var(--rocad-font-size-body);
}

/* In-content headings */
#rocad-app.rocad-shell .content-wrapper h1 {
  font-size: var(--rocad-font-size-page-title);
}

#rocad-app.rocad-shell .content-wrapper h2 {
  font-size: 26px;
}

#rocad-app.rocad-shell .content-wrapper h3 {
  font-size: var(--rocad-font-size-widget-title);
}

#rocad-app.rocad-shell .content-wrapper h4 {
  font-size: var(--rocad-font-size-lg);
}

#rocad-app.rocad-shell .content-wrapper h5 {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .content-wrapper h6 {
  font-size: var(--rocad-font-size-sm);
}

/* Sidebar menu labels — typography only */
#rocad-app.rocad-shell .sidebar-menu > li > a {
  font-size: var(--rocad-font-size-sidebar);
}

#rocad-app.rocad-shell .sidebar-menu .treeview-menu > li > a {
  font-size: var(--rocad-font-size-sidebar);
}

#rocad-app.rocad-shell .sidebar-menu > li.header {
  font-size: var(--rocad-font-size-xs);
}

#rocad-app.rocad-shell .main-sidebar .user-panel .info p,
#rocad-app.rocad-shell .main-sidebar .user-panel .info a {
  font-size: var(--rocad-font-size-sidebar);
}

/* Responsive gutter token — applied at shell breakpoints (foundation only) */
@media (min-width: 768px) {
  #rocad-app.rocad-shell {
    --rocad-shell-content-gutter: var(--rocad-space-5);
  }
}

@media (min-width: 1200px) {
  #rocad-app.rocad-shell {
    --rocad-shell-content-gutter: var(--rocad-space-6);
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 3.2 — Top navigation (scoped overrides on AdminLTE .main-header)     */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .main-header.rocad-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  max-height: none;
  min-height: var(--rocad-shell-header-height);
  overflow: visible;
  font-size: var(--rocad-topbar-font-size);
  background-color: var(--rocad-color-surface-raised);
  border-bottom: 1px solid var(--rocad-color-border);
  box-shadow: var(--rocad-shadow-md);
}

/* Logo block — AdminLTE layout preserved; modern gradient background */
#rocad-app.rocad-shell .main-header.rocad-topbar .logo.rocad-topbar__logo {
  display: block;
  float: left;
  width: var(--rocad-shell-sidebar-width);
  height: var(--rocad-shell-header-height);
  line-height: var(--rocad-shell-header-height);
  padding: 0 15px;
  overflow: visible !important;
  text-align: left;
  background: linear-gradient(
    135deg,
    var(--rocad-color-brand) 0%,
    var(--rocad-color-brand-dark) 100%
  );
  border-bottom: none;
  transition: background 0.2s ease;
}

#rocad-app.rocad-shell .rocad-topbar__logo:hover,
#rocad-app.rocad-shell .rocad-topbar__logo:focus {
  background: linear-gradient(
    135deg,
    var(--rocad-color-brand-dark) 0%,
    #052e5c 100%
  );
}

#rocad-app.rocad-shell .rocad-topbar__logo-mini {
  font-family: var(--rocad-font-sans);
  font-size: 18px;
  font-weight: var(--rocad-font-weight-bold, 700);
  letter-spacing: 0.04em;
}

#rocad-app.rocad-shell .main-header.rocad-topbar .logo > .logo-lg.rocad-topbar__logo-full {
  display: block;
  float: left;
  line-height: normal;
}

body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .main-header.rocad-topbar .logo > .logo-lg.rocad-topbar__logo-full {
  display: none;
}

#rocad-app.rocad-shell .rocad-topbar__logo-img {
  display: inline-block;
  width: 152.5px;
  height: 52.2px;
  max-width: none;
  vertical-align: middle;
  object-fit: contain;
  object-position: left center;
}

/* Navbar row */
#rocad-app.rocad-shell .rocad-topbar__nav {
  background-color: transparent !important;
  min-height: var(--rocad-shell-header-height);
  margin-left: 0;
  border: none;
  box-shadow: none;
}

#rocad-app.rocad-shell .rocad-topbar__nav .nav > li > a {
  font-size: var(--rocad-topbar-font-size-nav);
  line-height: var(--rocad-shell-header-height);
}

#rocad-app.rocad-shell .rocad-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0 var(--rocad-space-1);
  padding: var(--rocad-space-2);
  font-size: var(--rocad-topbar-font-size-nav);
  color: var(--rocad-color-text-muted);
  border-radius: var(--rocad-radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-topbar__toggle:hover,
#rocad-app.rocad-shell .rocad-topbar__toggle:focus {
  color: var(--rocad-color-brand);
  background-color: var(--rocad-color-surface-muted);
  outline: none;
}

/* Right-side actions */
#rocad-app.rocad-shell .rocad-topbar__actions {
  display: flex;
  align-items: center;
}

#rocad-app.rocad-shell .rocad-topbar__nav-list {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-1);
  margin: 0;
  padding: 0 var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-topbar__nav-list > li {
  float: none;
}

/* Notification trigger */
#rocad-app.rocad-shell .rocad-topbar__icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: var(--rocad-space-2) var(--rocad-space-3) !important;
  font-size: var(--rocad-topbar-font-size-nav);
  color: var(--rocad-color-text-muted) !important;
  background: transparent;
  border-radius: var(--rocad-radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-topbar__icon-btn:hover,
#rocad-app.rocad-shell .rocad-topbar__icon-btn:focus {
  color: var(--rocad-color-brand) !important;
  background-color: var(--rocad-color-surface-muted);
  outline: none;
}

#rocad-app.rocad-shell .rocad-topbar__bell-icon {
  font-size: 20px;
}

/* Notification badge */
#rocad-app.rocad-shell .rocad-topbar__badge {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  font-family: var(--rocad-font-sans);
  font-size: 0.625rem;
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.125rem;
  text-align: center;
  border: 2px solid var(--rocad-color-surface-raised);
  border-radius: 9999px;
  box-shadow: var(--rocad-shadow-sm);
}

#rocad-app.rocad-shell .rocad-topbar__badge.label-success {
  background-color: #22c55e;
}

#rocad-app.rocad-shell .rocad-topbar__badge.label-info {
  background-color: #3b82f6;
}

#rocad-app.rocad-shell .rocad-topbar__badge.label-danger {
  background-color: #ef4444;
}

/* Shared dropdown panel */
#rocad-app.rocad-shell .rocad-topbar__dropdown {
  margin-top: var(--rocad-space-2);
  padding: 0;
  font-family: var(--rocad-font-sans);
  background-color: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-lg);
  box-shadow: var(--rocad-shadow-md), 0 12px 32px rgb(15 23 42 / 0.12);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-topbar__dropdown-header {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-topbar-font-size-dropdown);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  background-color: var(--rocad-color-surface-muted);
  border-bottom: 1px solid var(--rocad-color-border);
}

/* Notification dropdown */
#rocad-app.rocad-shell .rocad-topbar__dropdown--notifications {
  width: min(320px, calc(100vw - 2rem));
}

#rocad-app.rocad-shell .rocad-topbar__notification-list {
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: var(--rocad-space-1) 0;
  list-style: none;
}

#rocad-app.rocad-shell .rocad-topbar__notification-item > a {
  display: block;
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-topbar-font-size-dropdown);
  line-height: 1.5;
  color: var(--rocad-color-text);
  white-space: normal;
  border-bottom: 1px solid var(--rocad-color-border);
  transition: background-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-topbar__notification-item:last-child > a {
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-topbar__notification-item > a:hover,
#rocad-app.rocad-shell .rocad-topbar__notification-item > a:focus {
  color: var(--rocad-color-brand);
  background-color: var(--rocad-color-surface-muted);
  text-decoration: none;
}

#rocad-app.rocad-shell .rocad-topbar__notification-item .fa {
  margin-right: var(--rocad-space-2);
  color: var(--rocad-color-brand-light);
}

/* User menu trigger */
#rocad-app.rocad-shell .rocad-topbar__user-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: var(--rocad-space-2);
  min-height: 44px;
  padding: var(--rocad-space-1) var(--rocad-space-2) var(--rocad-space-1) var(--rocad-space-1) !important;
  font-size: var(--rocad-topbar-font-size-username) !important;
  line-height: 1.4 !important;
  border-radius: var(--rocad-radius-lg);
  transition: background-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-topbar__user-toggle:hover,
#rocad-app.rocad-shell .rocad-topbar__user-toggle:focus {
  background-color: var(--rocad-color-surface-muted);
  outline: none;
}

#rocad-app.rocad-shell .rocad-topbar__user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 0;
  border: 2px solid var(--rocad-color-border);
  box-shadow: var(--rocad-shadow-sm);
}

#rocad-app.rocad-shell .rocad-topbar__user-name {
  max-width: 12rem;
  overflow: hidden;
  font-size: var(--rocad-topbar-font-size-username);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* User dropdown */
#rocad-app.rocad-shell .rocad-topbar__dropdown--user {
  width: min(280px, calc(100vw - 2rem));
}

#rocad-app.rocad-shell .rocad-topbar__user-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--rocad-space-6) var(--rocad-space-4) var(--rocad-space-4);
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--rocad-color-brand) 0%,
    var(--rocad-color-brand-dark) 100%
  ) !important;
}

#rocad-app.rocad-shell .rocad-topbar__user-header-avatar {
  width: 72px;
  height: 72px;
  margin-bottom: var(--rocad-space-3);
  border: 3px solid rgb(255 255 255 / 0.35);
  box-shadow: var(--rocad-shadow-md);
}

#rocad-app.rocad-shell .rocad-topbar__user-header-text {
  margin: 0;
  font-size: var(--rocad-topbar-font-size-username);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text-inverse);
}

#rocad-app.rocad-shell .rocad-topbar__user-header-text small {
  display: block;
  margin-top: var(--rocad-space-1);
  font-size: var(--rocad-topbar-font-size-dropdown);
  font-weight: var(--rocad-font-weight-normal);
  color: rgb(255 255 255 / 0.85);
}

#rocad-app.rocad-shell .rocad-topbar__user-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-2);
  padding: var(--rocad-space-3) var(--rocad-space-4);
  background-color: var(--rocad-color-surface-muted);
  border-top: 1px solid var(--rocad-color-border);
}

#rocad-app.rocad-shell .rocad-topbar__user-footer .pull-left,
#rocad-app.rocad-shell .rocad-topbar__user-footer .pull-right {
  float: none !important;
}

#rocad-app.rocad-shell .rocad-topbar__user-btn {
  min-height: 36px;
  padding: var(--rocad-space-2) var(--rocad-space-4);
  font-family: var(--rocad-font-sans);
  font-size: var(--rocad-topbar-font-size-dropdown);
  font-weight: var(--rocad-font-weight-medium);
  border-radius: var(--rocad-radius-md);
  border-color: var(--rocad-color-border-strong);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-topbar__user-btn:hover,
#rocad-app.rocad-shell .rocad-topbar__user-btn:focus {
  color: var(--rocad-color-brand);
  background-color: var(--rocad-color-surface-raised);
  border-color: var(--rocad-color-brand-light);
}

#rocad-app.rocad-shell .rocad-topbar__user-btn--logout:hover,
#rocad-app.rocad-shell .rocad-topbar__user-btn--logout:focus {
  color: #fff;
  background-color: #ef4444;
  border-color: #ef4444;
}

/* Responsive topbar */
@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-topbar__logo-img {
    width: 130px;
    height: auto;
    max-height: 46px;
  }

  #rocad-app.rocad-shell .rocad-topbar__nav-list {
    padding-right: var(--rocad-space-1);
  }

  #rocad-app.rocad-shell .rocad-topbar__dropdown--notifications,
  #rocad-app.rocad-shell .rocad-topbar__dropdown--user {
    right: var(--rocad-space-2);
    left: auto;
  }
}

/* Mobile header — keep hamburger inside fixed 56px topbar (AdminLTE stacks logo+nav at 100% width) */
@media (max-width: 767px) {
  #rocad-app.rocad-shell .main-header.rocad-topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: var(--rocad-shell-header-height);
    min-height: var(--rocad-shell-header-height);
    max-height: var(--rocad-shell-header-height);
    overflow: visible !important;
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .logo.rocad-topbar__logo {
    float: none;
    flex: 0 0 auto;
    width: auto;
    max-width: min(118px, 36vw);
    height: var(--rocad-shell-header-height);
    line-height: var(--rocad-shell-header-height);
    padding: 0 var(--rocad-space-2);
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .logo > .logo-lg.rocad-topbar__logo-full {
    display: none !important;
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .logo > .logo-mini.rocad-topbar__logo-mini {
    display: inline-block !important;
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .rocad-topbar__logo-img {
    display: none !important;
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .rocad-topbar__nav {
    float: none;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 0;
    height: var(--rocad-shell-header-height);
    min-height: var(--rocad-shell-header-height);
    margin: 0;
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .rocad-topbar__toggle {
    float: none;
    flex-shrink: 0;
    position: relative;
    z-index: 1040;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    color: var(--rocad-color-text);
    background-color: var(--rocad-color-surface-muted);
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .sidebar-toggle.rocad-topbar__toggle::before {
    font-size: 18px;
    line-height: 1;
    color: var(--rocad-color-text);
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .rocad-topbar__toggle:hover,
  #rocad-app.rocad-shell .main-header.rocad-topbar .rocad-topbar__toggle:focus {
    color: var(--rocad-color-brand);
    background-color: rgba(8, 79, 168, 0.12);
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .rocad-topbar__actions {
    flex-shrink: 0;
    margin-left: auto;
  }

  #rocad-app.rocad-shell .main-header.rocad-topbar .navbar-custom-menu {
    float: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 2 — Global mobile table horizontal scroll (shell-level)              */
/* Wide tables swipe left/right; columns stay visible; DT controls wrap.      */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .table-responsive,
#rocad-app.rocad-shell .rocad-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#rocad-app.rocad-shell .rocad-table-wrap .dataTables_wrapper,
#rocad-app.rocad-shell .table-responsive .dataTables_wrapper {
  overflow-x: visible;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .content-wrapper > section.content,
  #rocad-app.rocad-shell .rocad-table-panel__body,
  #rocad-app.rocad-shell .box-body {
    max-width: 100%;
    min-width: 0;
  }

  #rocad-app.rocad-shell .box-body > .dataTables_wrapper,
  #rocad-app.rocad-shell .rocad-table-panel__body > .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #rocad-app.rocad-shell .dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #rocad-app.rocad-shell table.table,
  #rocad-app.rocad-shell table.dataTable,
  #rocad-app.rocad-shell table.rocad-table {
    width: max-content !important;
    min-width: 100%;
    max-width: none;
  }

  #rocad-app.rocad-shell .table-responsive table > thead > tr > th,
  #rocad-app.rocad-shell .table-responsive table > tbody > tr > th,
  #rocad-app.rocad-shell .table-responsive table > tfoot > tr > th,
  #rocad-app.rocad-shell .table-responsive table > thead > tr > td,
  #rocad-app.rocad-shell .table-responsive table > tbody > tr > td,
  #rocad-app.rocad-shell .table-responsive table > tfoot > tr > td,
  #rocad-app.rocad-shell .rocad-table-wrap table > thead > tr > th,
  #rocad-app.rocad-shell .rocad-table-wrap table > tbody > tr > th,
  #rocad-app.rocad-shell .rocad-table-wrap table > tfoot > tr > th,
  #rocad-app.rocad-shell .rocad-table-wrap table > thead > tr > td,
  #rocad-app.rocad-shell .rocad-table-wrap table > tbody > tr > td,
  #rocad-app.rocad-shell .rocad-table-wrap table > tfoot > tr > td,
  #rocad-app.rocad-shell .dataTables_wrapper > table.dataTable > thead > tr > th,
  #rocad-app.rocad-shell .dataTables_wrapper > table.dataTable > tbody > tr > td,
  #rocad-app.rocad-shell .dataTables_wrapper .dataTables_scrollBody table > thead > tr > th,
  #rocad-app.rocad-shell .dataTables_wrapper .dataTables_scrollBody table > tbody > tr > td {
    white-space: nowrap;
  }

  #rocad-app.rocad-shell .dataTables_wrapper {
    max-width: 100%;
  }

  #rocad-app.rocad-shell .dataTables_wrapper .row:first-child,
  #rocad-app.rocad-shell .dataTables_wrapper .row:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rocad-space-3);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #rocad-app.rocad-shell .dataTables_wrapper .row:first-child > [class*="col-"],
  #rocad-app.rocad-shell .dataTables_wrapper .row:last-child > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #rocad-app.rocad-shell .dataTables_length label,
  #rocad-app.rocad-shell .dataTables_filter label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rocad-space-2);
    width: 100%;
    margin: 0;
  }

  #rocad-app.rocad-shell .dataTables_filter input {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  #rocad-app.rocad-shell .dataTables_length select {
    max-width: 100%;
  }

  #rocad-app.rocad-shell .dataTables_info {
    width: 100%;
    float: none !important;
    text-align: left;
    padding-top: var(--rocad-space-3) !important;
  }

  #rocad-app.rocad-shell .dataTables_paginate {
    width: 100%;
    float: none !important;
    text-align: left;
    padding-top: var(--rocad-space-3) !important;
  }

  #rocad-app.rocad-shell .dataTables_paginate .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--rocad-space-1);
    margin: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 3 — Global mobile filter dialogs & forms (shell-level)               */
/* Modals fit viewport; controls ≥44px; grid fields stack on phones.           */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell {
  --rocad-mobile-field-min-height: 44px;
  --rocad-mobile-btn-min-height: 44px;
  --rocad-mobile-modal-gutter: var(--rocad-space-3);
}

#rocad-app.rocad-shell .modal-dialog {
  max-width: calc(100vw - 2rem);
}

#rocad-app.rocad-shell .modal-content {
  max-width: 100%;
}

#rocad-app.rocad-shell .select2-container {
  width: 100% !important;
  max-width: 100%;
}

@media (max-width: 767px) {
  /* —— 3A: Bootstrap & custom filter modals —— */
  #rocad-app.rocad-shell .modal,
  body > .modal {
    padding: var(--rocad-mobile-modal-gutter);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #rocad-app.rocad-shell .modal-dialog,
  body > .modal .modal-dialog {
    width: calc(100% - (var(--rocad-mobile-modal-gutter) * 2));
    max-width: 100%;
    margin: var(--rocad-mobile-modal-gutter) auto;
  }

  #rocad-app.rocad-shell .modal-content,
  body > .modal .modal-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    border-radius: 0.75rem;
  }

  #rocad-app.rocad-shell .modal-body,
  body > .modal .modal-body {
    max-height: calc(100dvh - 10rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #rocad-app.rocad-shell #myModal,
  #rocad-app.rocad-shell .rocad-finance-filter-modal,
  #rocad-app.rocad-shell .rocad-history-filter-modal,
  #rocad-app.rocad-shell .rocad-report-modal,
  #rocad-app.rocad-shell #modalInvoice {
    padding: var(--rocad-mobile-modal-gutter);
    align-items: flex-start;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-finance-filter-modal.is-open,
  #rocad-app.rocad-shell #myModal.rocad-finance-filter-modal.is-open {
    display: flex;
  }

  #rocad-app.rocad-shell #myModal .modal-content,
  #rocad-app.rocad-shell .rocad-finance-filter-modal__content,
  #rocad-app.rocad-shell .rocad-history-filter-modal__content,
  #rocad-app.rocad-shell .rocad-report-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - (var(--rocad-mobile-modal-gutter) * 2));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--rocad-space-5) var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-finance-filter-modal__grid {
    grid-template-columns: 1fr;
    gap: var(--rocad-space-3);
  }

  #rocad-app.rocad-shell .rocad-finance-filter-modal__actions,
  #rocad-app.rocad-shell .rocad-report-modal__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
    padding-top: var(--rocad-space-4);
    background: var(--rocad-color-surface-raised);
  }

  #rocad-app.rocad-shell .rocad-finance-filter-modal__actions .rocad-table-page__btn,
  #rocad-app.rocad-shell #myModal button[type="submit"],
  #rocad-app.rocad-shell #myModal button:not(.close),
  #rocad-app.rocad-shell #myModal a.rocad-table-page__btn {
    width: 100%;
    min-width: 0 !important;
    min-height: var(--rocad-mobile-btn-min-height);
    justify-content: center;
  }

  #rocad-app.rocad-shell .modal-footer,
  body > .modal .modal-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rocad-space-2);
  }

  #rocad-app.rocad-shell .modal-footer .btn,
  #rocad-app.rocad-shell .modal-footer .btn + .btn,
  body > .modal .modal-footer .btn,
  body > .modal .modal-footer .btn + .btn {
    width: 100%;
    min-height: var(--rocad-mobile-btn-min-height);
    margin: 0 !important;
  }

  /* Legacy table-layout filter dialogs */
  #rocad-app.rocad-shell .modal-content > table,
  #rocad-app.rocad-shell .modal-body > table,
  body > .modal .modal-content > table,
  body > .modal .modal-body > table {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }

  #rocad-app.rocad-shell .modal-content > table > tbody,
  #rocad-app.rocad-shell .modal-content > table > tbody > tr,
  #rocad-app.rocad-shell .modal-body > table > tbody,
  #rocad-app.rocad-shell .modal-body > table > tbody > tr,
  body > .modal .modal-content > table > tbody,
  body > .modal .modal-content > table > tbody > tr,
  body > .modal .modal-body > table > tbody,
  body > .modal .modal-body > table > tbody > tr {
    display: block;
    width: 100%;
  }

  #rocad-app.rocad-shell .modal-content > table th,
  #rocad-app.rocad-shell .modal-content > table td,
  #rocad-app.rocad-shell .modal-body > table th,
  #rocad-app.rocad-shell .modal-body > table td,
  body > .modal .modal-content > table th,
  body > .modal .modal-content > table td,
  body > .modal .modal-body > table th,
  body > .modal .modal-body > table td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    white-space: normal !important;
    padding: var(--rocad-space-1) 0;
  }

  #rocad-app.rocad-shell #myModal table th,
  #rocad-app.rocad-shell .rocad-finance-filter-modal__field label {
    white-space: normal;
  }

  /* —— 3B: Form controls & grid —— */
  #rocad-app.rocad-shell .form-control,
  #rocad-app.rocad-shell select.form-control,
  #rocad-app.rocad-shell textarea.form-control,
  #rocad-app.rocad-shell input.form-control,
  #rocad-app.rocad-shell input[type="date"].form-control,
  #rocad-app.rocad-shell input[type="datetime-local"].form-control,
  #rocad-app.rocad-shell input[type="time"].form-control,
  body > .modal .form-control {
    min-height: var(--rocad-mobile-field-min-height);
    max-width: 100%;
    font-size: 16px;
  }

  #rocad-app.rocad-shell #myModal .form-control,
  #rocad-app.rocad-shell .rocad-finance-filter-modal__field .form-control,
  #rocad-app.rocad-shell .rocad-history-filter-modal .form-control,
  #rocad-app.rocad-shell .rocad-report-modal .form-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  #rocad-app.rocad-shell textarea.form-control {
    min-height: calc(var(--rocad-mobile-field-min-height) * 2);
  }

  #rocad-app.rocad-shell .form-group {
    margin-bottom: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .form-group > label,
  #rocad-app.rocad-shell .form-group > .control-label,
  #rocad-app.rocad-shell .rocad-label {
    display: block;
    margin-bottom: var(--rocad-space-2);
    line-height: 1.45;
  }

  #rocad-app.rocad-shell .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
  }

  #rocad-app.rocad-shell .form-inline .form-group,
  #rocad-app.rocad-shell .form-inline .form-control {
    display: block;
    width: 100%;
    margin-bottom: var(--rocad-space-3);
  }

  #rocad-app.rocad-shell .row > [class*="col-sm-"]:not([class*="col-xs-"]),
  #rocad-app.rocad-shell .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]),
  #rocad-app.rocad-shell .row > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-sm-"]):not([class*="col-md-"]) {
    width: 100%;
    float: none;
    max-width: 100%;
  }

  #rocad-app.rocad-shell .btn,
  #rocad-app.rocad-shell button.btn,
  #rocad-app.rocad-shell input[type="submit"].btn,
  #rocad-app.rocad-shell input[type="button"].btn,
  #rocad-app.rocad-shell .rocad-table-page__btn {
    min-height: var(--rocad-mobile-btn-min-height);
  }

  /* Select2 — shell-wide mobile touch targets */
  #rocad-app.rocad-shell .select2-container--default .select2-selection--single,
  #rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single,
  #rocad-app.rocad-shell .modal .select2-container--default .select2-selection--single {
    min-height: var(--rocad-mobile-field-min-height);
    height: var(--rocad-mobile-field-min-height) !important;
  }

  #rocad-app.rocad-shell .select2-container--default .select2-selection--single .select2-selection__rendered,
  #rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single .select2-selection__rendered,
  #rocad-app.rocad-shell .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--rocad-mobile-field-min-height) - 2px) !important;
    font-size: 16px;
  }

  #rocad-app.rocad-shell .select2-container--default .select2-selection--single .select2-selection__arrow,
  #rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single .select2-selection__arrow,
  #rocad-app.rocad-shell .modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--rocad-mobile-field-min-height) - 2px) !important;
  }

  body > .select2-container .select2-dropdown {
    max-width: calc(100vw - (var(--rocad-mobile-modal-gutter) * 2));
  }

  body > .select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: var(--rocad-mobile-field-min-height);
    font-size: 16px;
  }

  body > .select2-container--default .select2-results__option {
    padding: var(--rocad-space-3) var(--rocad-space-4);
    font-size: 16px;
    line-height: 1.4;
  }
}

/* Collapsed sidebar: logo column shrinks to mini width (AdminLTE) */
body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .main-header.rocad-topbar .logo.rocad-topbar__logo {
  width: var(--rocad-shell-sidebar-mini-width);
}

/* -------------------------------------------------------------------------- */
/* Sidebar Architecture — Fixed application shell (SaaS navigation layout)    */
/* Topbar fixed, sidebar fixed + independently scrollable nav, content scrolls  */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell.rocad-shell--fixed {
  --rocad-shell-viewport-height: 100vh;
  --rocad-shell-sidebar-height: calc(
    var(--rocad-shell-viewport-height) - var(--rocad-shell-header-height)
  );
}

@supports (height: 100dvh) {
  #rocad-app.rocad-shell.rocad-shell--fixed {
    --rocad-shell-viewport-height: 100dvh;
  }
}

/* Fixed topbar — viewport-locked height (must match sidebar top offset) */
#rocad-app.rocad-shell.rocad-shell--fixed .main-header.rocad-topbar {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--rocad-shell-header-height);
  min-height: var(--rocad-shell-header-height);
  max-height: var(--rocad-shell-header-height);
  z-index: 1030;
  /* visible: fixed 56px header clips Bootstrap dropdown menus when overflow is hidden */
  overflow: visible !important;
}

#rocad-app.rocad-shell.rocad-shell--fixed .main-header.rocad-topbar .navbar,
#rocad-app.rocad-shell.rocad-shell--fixed .main-header.rocad-topbar .navbar-custom-menu,
#rocad-app.rocad-shell.rocad-shell--fixed .main-header.rocad-topbar .rocad-topbar__nav-list,
#rocad-app.rocad-shell.rocad-shell--fixed .main-header.rocad-topbar .rocad-topbar__actions {
  overflow: visible !important;
}

/* Bootstrap dropdown panels must stack above content-wrapper (z-index 820) */
#rocad-app.rocad-shell .navbar-nav > li.dropdown.open > .dropdown-menu {
  z-index: 1051;
}

#rocad-app.rocad-shell.rocad-shell--fixed .main-header.rocad-topbar .rocad-topbar__logo-img {
  max-height: calc(var(--rocad-shell-header-height) - 6px);
  height: auto;
  width: auto;
  max-width: 152.5px;
}

/* Fixed sidebar — viewport top+bottom anchor (not document/wrapper height) */
#rocad-app.rocad-shell.rocad-shell--fixed .main-sidebar.rocad-sidebar {
  position: fixed !important;
  top: var(--rocad-shell-header-height) !important;
  left: 0;
  right: auto;
  bottom: 0 !important;
  width: var(--rocad-shell-sidebar-width);
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 810;
}

/* Neutralize AdminLTE absolute/min-height sidebar contract inside fixed shell */
#rocad-app.rocad-shell.rocad-shell--fixed .main-sidebar.rocad-sidebar,
.skin-blue #rocad-app.rocad-shell.rocad-shell--fixed .main-sidebar.rocad-sidebar {
  min-height: 0 !important;
}

/* Content scrolls in the document; sidebar stays visible */
#rocad-app.rocad-shell.rocad-shell--fixed .content-wrapper {
  padding-top: var(--rocad-shell-header-height);
  min-height: var(--rocad-shell-sidebar-height);
}

#rocad-app.rocad-shell.rocad-shell--fixed .main-footer {
  margin-left: var(--rocad-shell-sidebar-width);
}

@media (min-width: 768px) {
  body.sidebar-mini.sidebar-collapse
    #rocad-app.rocad-shell.rocad-shell--fixed
    .main-sidebar.rocad-sidebar {
    width: var(--rocad-shell-sidebar-mini-width) !important;
  }

  body.sidebar-mini.sidebar-collapse
    #rocad-app.rocad-shell.rocad-shell--fixed
    .content-wrapper,
  body.sidebar-mini.sidebar-collapse
    #rocad-app.rocad-shell.rocad-shell--fixed
    .main-footer {
    margin-left: var(--rocad-shell-sidebar-mini-width) !important;
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell.rocad-shell--fixed .main-sidebar.rocad-sidebar {
    top: var(--rocad-shell-header-height) !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 1050;
  }

  #rocad-app.rocad-shell.rocad-shell--fixed .content-wrapper,
  #rocad-app.rocad-shell.rocad-shell--fixed .main-footer {
    margin-left: 0 !important;
  }
}

/* Three-region sidebar structure — flex column fills viewport-locked aside */
#rocad-app.rocad-shell .rocad-sidebar__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__header {
  flex: 0 0 var(--rocad-sidebar-header-height);
  height: var(--rocad-sidebar-header-height);
  min-height: var(--rocad-sidebar-header-height);
  max-height: var(--rocad-sidebar-header-height);
  box-sizing: border-box;
  padding: var(--rocad-space-2) var(--rocad-space-3);
  border-bottom: 1px solid var(--rocad-sidebar-border);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2);
  height: 100%;
  padding: 0 var(--rocad-space-1);
  color: var(--rocad-sidebar-text);
  text-decoration: none !important;
  border-radius: var(--rocad-radius-md);
  transition: background-color var(--rocad-sidebar-transition);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__brand:hover,
#rocad-app.rocad-shell .rocad-sidebar__brand:focus {
  background: var(--rocad-sidebar-bg-hover);
  outline: none;
}

#rocad-app.rocad-shell .rocad-sidebar__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: var(--rocad-font-weight-bold, 700);
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--rocad-color-brand-light) 0%,
    var(--rocad-color-brand) 100%
  );
  border-radius: var(--rocad-radius-md);
  box-shadow: var(--rocad-shadow-sm);
}

#rocad-app.rocad-shell .rocad-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-sidebar__brand-name {
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.3;
  color: var(--rocad-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rocad-app.rocad-shell .rocad-sidebar__brand-sub {
  font-size: var(--rocad-font-size-xs);
  line-height: 1.3;
  color: var(--rocad-sidebar-text-muted);
}

/* Independently scrollable navigation region — only this area scrolls */
#rocad-app.rocad-shell .rocad-sidebar__nav {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--rocad-space-2) var(--rocad-space-2) var(--rocad-space-3);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

#rocad-app.rocad-shell .rocad-sidebar__nav::-webkit-scrollbar {
  width: 8px;
}

#rocad-app.rocad-shell .rocad-sidebar__nav::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
  border: 2px solid rgba(15, 20, 25, 0.9);
}

#rocad-app.rocad-shell .rocad-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

/* Anchored footer — fixed-height account strip (no layout shift between pages) */
#rocad-app.rocad-shell .rocad-sidebar__footer {
  flex: 0 0 var(--rocad-sidebar-footer-height);
  height: var(--rocad-sidebar-footer-height);
  min-height: var(--rocad-sidebar-footer-height);
  max-height: var(--rocad-sidebar-footer-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: var(--rocad-space-2);
  overflow: hidden;
  margin-top: auto;
  border-top: 1px solid var(--rocad-sidebar-border);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.22) 100%
  );
}

#rocad-app.rocad-shell .rocad-sidebar__account {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2);
  height: var(--rocad-sidebar-footer-account-height);
  min-height: var(--rocad-sidebar-footer-account-height);
  max-height: var(--rocad-sidebar-footer-account-height);
  min-width: 0;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .user-panel.rocad-sidebar__profile {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2);
  min-width: 0;
  height: 100%;
  max-height: var(--rocad-sidebar-footer-account-height);
  margin: 0;
  padding: 0 var(--rocad-space-2) !important;
  overflow: hidden;
  background: var(--rocad-sidebar-bg-elevated);
  border: 1px solid var(--rocad-sidebar-border);
  border-radius: var(--rocad-radius-md);
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .user-panel.rocad-sidebar__profile::before,
#rocad-app.rocad-shell .rocad-sidebar__footer .user-panel.rocad-sidebar__profile::after {
  display: none !important;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-avatar {
  flex-shrink: 0;
  width: var(--rocad-sidebar-footer-avatar-size);
  height: var(--rocad-sidebar-footer-avatar-size);
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-img {
  display: block;
  width: var(--rocad-sidebar-footer-avatar-size);
  height: var(--rocad-sidebar-footer-avatar-size);
  min-width: var(--rocad-sidebar-footer-avatar-size);
  max-width: var(--rocad-sidebar-footer-avatar-size);
  min-height: var(--rocad-sidebar-footer-avatar-size);
  max-height: var(--rocad-sidebar-footer-avatar-size);
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--rocad-shadow-sm);
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-name {
  display: block;
  margin: 0;
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.25;
  height: 1.25em;
  color: var(--rocad-sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-role {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-1);
  min-width: 0;
  margin: 0;
  font-size: var(--rocad-font-size-xs) !important;
  line-height: 1.25;
  height: 1.25em;
  color: var(--rocad-sidebar-text-muted) !important;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-role-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-sidebar__footer .rocad-sidebar__profile-status {
  flex-shrink: 0;
  font-size: 8px;
  line-height: 1;
}

#rocad-app.rocad-shell .rocad-sidebar__footer-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--rocad-sidebar-footer-logout-size);
  width: var(--rocad-sidebar-footer-logout-size);
  height: var(--rocad-sidebar-footer-logout-size);
  min-width: var(--rocad-sidebar-footer-logout-size);
  min-height: var(--rocad-sidebar-footer-logout-size);
  max-width: var(--rocad-sidebar-footer-logout-size);
  max-height: var(--rocad-sidebar-footer-logout-size);
  gap: 0;
  padding: 0;
  font-size: var(--rocad-font-size-xs);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-sidebar-text-muted) !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rocad-sidebar-border);
  border-radius: var(--rocad-radius-md);
  transition: color var(--rocad-sidebar-transition),
    background-color var(--rocad-sidebar-transition),
    border-color var(--rocad-sidebar-transition);
}

#rocad-app.rocad-shell .rocad-sidebar__footer-logout .fa {
  font-size: 14px;
  line-height: 1;
}

#rocad-app.rocad-shell .rocad-sidebar__footer-logout-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#rocad-app.rocad-shell .rocad-sidebar__footer-logout:hover,
#rocad-app.rocad-shell .rocad-sidebar__footer-logout:focus {
  color: #fecaca !important;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
  outline: none;
}

#rocad-app.rocad-shell .rocad-sidebar__footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  margin: 0;
  padding: 0 var(--rocad-space-1);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-sidebar__version {
  display: block;
  font-size: 10px;
  line-height: 14px;
  font-weight: var(--rocad-font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--rocad-sidebar-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------- */
/* Phase 3.3 — Sidebar modernization (scoped; AdminLTE behavior preserved)    */
/* -------------------------------------------------------------------------- */

/* Dark surface + neutralize skin-blue sidebar paint */
.skin-blue #rocad-app.rocad-shell .main-sidebar.rocad-sidebar,
#rocad-app.rocad-shell .main-sidebar.rocad-sidebar {
  background-color: var(--rocad-sidebar-bg) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(255, 255, 255, 0) 55%
  );
  background-repeat: no-repeat;
  border-right: 1px solid var(--rocad-sidebar-border);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

/* User profile card */
#rocad-app.rocad-shell .rocad-sidebar__profile {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3);
  margin: 0;
  padding: var(--rocad-space-3);
  overflow: visible;
  background: var(--rocad-sidebar-bg-elevated);
  border: 1px solid var(--rocad-sidebar-border);
  border-radius: var(--rocad-radius-lg);
  cursor: pointer;
  transition: background-color var(--rocad-sidebar-transition),
    border-color var(--rocad-sidebar-transition),
    box-shadow var(--rocad-sidebar-transition);
}

#rocad-app.rocad-shell .rocad-sidebar__profile:hover,
#rocad-app.rocad-shell .rocad-sidebar__profile:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--rocad-shadow-sm);
  outline: none;
}

#rocad-app.rocad-shell .rocad-sidebar__profile-avatar {
  float: none !important;
  flex-shrink: 0;
}

#rocad-app.rocad-shell .rocad-sidebar__profile-img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--rocad-shadow-sm);
}

#rocad-app.rocad-shell .rocad-sidebar__profile-meta {
  position: static !important;
  left: auto !important;
  flex: 1;
  min-width: 0;
  padding: 0 !important;
  line-height: 1.35;
}

#rocad-app.rocad-shell .rocad-sidebar__profile-name {
  margin: 0 0 var(--rocad-space-1);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rocad-app.rocad-shell .rocad-sidebar__profile-role {
  display: inline-flex;
  align-items: center;
  gap: var(--rocad-space-1);
  font-size: var(--rocad-font-size-xs) !important;
  color: var(--rocad-sidebar-text-muted) !important;
  text-decoration: none !important;
}

#rocad-app.rocad-shell .rocad-sidebar__profile-status {
  font-size: 8px;
}

/* Section labels */
#rocad-app.rocad-shell .rocad-sidebar__section-label,
#rocad-app.rocad-shell .sidebar-menu > li.header.rocad-sidebar__section-label {
  padding: var(--rocad-space-4) var(--rocad-space-3) var(--rocad-space-2);
  margin: 0;
  font-size: 11px !important;
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rocad-sidebar-text-faint) !important;
  background: transparent !important;
}

/* Menu list spacing */
#rocad-app.rocad-shell .rocad-sidebar__menu {
  padding: 0 var(--rocad-space-1);
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li {
  margin-bottom: 2px;
}

/* Top-level links */
#rocad-app.rocad-shell .rocad-sidebar__menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3);
  margin: 0;
  padding: 10px var(--rocad-space-3);
  font-size: var(--rocad-font-size-sidebar);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-sidebar-text-muted) !important;
  border-left: none !important;
  border-radius: var(--rocad-sidebar-item-radius);
  transition: color var(--rocad-sidebar-transition),
    background-color var(--rocad-sidebar-transition);
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li > a > .fa,
#rocad-app.rocad-shell .rocad-sidebar__menu > li > a > .glyphicon,
#rocad-app.rocad-shell .rocad-sidebar__menu > li > a > .ion {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity var(--rocad-sidebar-transition);
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li > a > span:not(.pull-right-container) {
  flex: 1;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li:hover > a {
  color: var(--rocad-sidebar-text) !important;
  background: var(--rocad-sidebar-bg-hover) !important;
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li.active > a,
#rocad-app.rocad-shell .rocad-sidebar__menu > li.menu-open > a {
  color: var(--rocad-sidebar-text) !important;
  background: var(--rocad-sidebar-bg-active) !important;
  box-shadow: inset 3px 0 0 var(--rocad-sidebar-accent);
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li.active:hover > a,
#rocad-app.rocad-shell .rocad-sidebar__menu > li.menu-open:hover > a {
  color: var(--rocad-sidebar-text) !important;
  background: var(--rocad-sidebar-bg-active) !important;
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li.active > a > .fa,
#rocad-app.rocad-shell .rocad-sidebar__menu > li.menu-open > a > .fa {
  opacity: 1;
  color: var(--rocad-sidebar-accent);
}

/* Chevron indicators */
#rocad-app.rocad-shell .rocad-sidebar__menu li > a > .pull-right-container {
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin-left: auto;
}

#rocad-app.rocad-shell .rocad-sidebar__menu li > a > .pull-right-container > .fa-angle-left {
  margin-right: 0;
  font-size: 14px;
  color: var(--rocad-sidebar-text-faint);
  transition: transform var(--rocad-sidebar-transition), color var(--rocad-sidebar-transition);
}

#rocad-app.rocad-shell .rocad-sidebar__menu li.active > a > .pull-right-container > .fa-angle-left,
#rocad-app.rocad-shell .rocad-sidebar__menu li.menu-open > a > .pull-right-container > .fa-angle-left {
  transform: rotate(-90deg);
  color: var(--rocad-sidebar-accent);
}

/* Treeview panels */
#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu {
  margin: var(--rocad-space-1) 0 var(--rocad-space-2) var(--rocad-space-2);
  padding: var(--rocad-space-1) 0 var(--rocad-space-1) var(--rocad-space-3);
  background: transparent !important;
  border-left: 1px solid var(--rocad-sidebar-border);
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li {
  margin-bottom: 1px;
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2);
  padding: 8px var(--rocad-space-3);
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-sidebar-text-muted) !important;
  border-radius: var(--rocad-radius-sm);
  transition: color var(--rocad-sidebar-transition),
    background-color var(--rocad-sidebar-transition);
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li > a > .fa {
  width: 18px;
  min-width: 18px;
  font-size: 13px;
  opacity: 0.75;
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li:hover > a {
  color: var(--rocad-sidebar-text) !important;
  background: var(--rocad-sidebar-bg-hover) !important;
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li.active > a,
#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li.menu-open > a {
  color: var(--rocad-sidebar-text) !important;
  background: var(--rocad-sidebar-bg-active) !important;
  box-shadow: inset 3px 0 0 var(--rocad-sidebar-accent);
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li.active:hover > a,
#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li.menu-open:hover > a {
  color: var(--rocad-sidebar-text) !important;
  background: var(--rocad-sidebar-bg-active) !important;
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li.active > a > .fa,
#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li.menu-open > a > .fa {
  opacity: 1;
  color: var(--rocad-sidebar-accent);
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu .treeview-menu {
  margin-left: var(--rocad-space-2);
  padding-left: var(--rocad-space-2);
}

/* Neutralize skin-blue link colors inside shell */
.skin-blue #rocad-app.rocad-shell .rocad-sidebar a {
  color: inherit;
}

.skin-blue #rocad-app.rocad-shell .rocad-sidebar a:hover {
  text-decoration: none;
}

/* Collapsed sidebar (AdminLTE sidebar-mini) */
@media (min-width: 768px) {
  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__brand-text,
  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__footer-meta {
    display: none !important;
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__footer {
    flex: 0 0 var(--rocad-sidebar-footer-height-collapsed);
    height: var(--rocad-sidebar-footer-height-collapsed);
    min-height: var(--rocad-sidebar-footer-height-collapsed);
    max-height: var(--rocad-sidebar-footer-height-collapsed);
    padding: var(--rocad-space-2) var(--rocad-space-1);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__account {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--rocad-space-2);
    height: var(--rocad-sidebar-footer-avatar-size);
    min-height: var(--rocad-sidebar-footer-avatar-size);
    max-height: var(--rocad-sidebar-footer-avatar-size);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__footer .user-panel.rocad-sidebar__profile {
    flex: 0 0 var(--rocad-sidebar-footer-avatar-size);
    width: var(--rocad-sidebar-footer-avatar-size);
    height: var(--rocad-sidebar-footer-avatar-size);
    min-height: var(--rocad-sidebar-footer-avatar-size);
    max-height: var(--rocad-sidebar-footer-avatar-size);
    justify-content: center;
    padding: 0 !important;
    border-radius: var(--rocad-radius-md);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__profile-meta {
    display: none !important;
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__footer-logout {
    flex: 0 0 var(--rocad-sidebar-footer-logout-size);
    width: var(--rocad-sidebar-footer-logout-size);
    height: var(--rocad-sidebar-footer-logout-size);
    min-width: var(--rocad-sidebar-footer-logout-size);
    min-height: var(--rocad-sidebar-footer-logout-size);
    padding: 0;
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__header {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--rocad-space-2);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__brand {
    justify-content: center;
    padding: var(--rocad-space-1);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__nav {
    overflow: visible;
    padding: var(--rocad-space-1);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__menu > li > a {
    justify-content: center;
    padding-left: var(--rocad-space-2);
    padding-right: var(--rocad-space-2);
  }

  /* Preserve AdminLTE flyout hover panels */
  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__menu > li:hover > a > span:not(.pull-right-container) {
    background-color: var(--rocad-sidebar-bg-elevated) !important;
    color: var(--rocad-sidebar-text) !important;
    border-radius: 0 var(--rocad-radius-md) var(--rocad-radius-md) 0;
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__menu > li:hover > .treeview-menu {
    background-color: var(--rocad-sidebar-bg-elevated) !important;
    border: 1px solid var(--rocad-sidebar-border);
    border-left: none;
    border-radius: 0 var(--rocad-radius-md) var(--rocad-radius-md) 0;
    min-width: 220px;
    box-shadow: var(--rocad-shadow-md);
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li > a {
    white-space: nowrap;
  }
}

/* Mobile offcanvas */
@media (max-width: 767px) {
  #rocad-app.rocad-shell .main-sidebar.rocad-sidebar {
    overflow: hidden;
  }

  #rocad-app.rocad-shell .rocad-sidebar__nav {
    padding-top: var(--rocad-space-1);
  }

  #rocad-app.rocad-shell .rocad-sidebar__menu > li > a {
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------- */
/* Global Shell Modernization — Phase A (baseline rhythm + legacy readability)  */
/* Scoped to #rocad-app.rocad-shell; AdminLTE behavior unchanged.               */
/* -------------------------------------------------------------------------- */

/* Content shell — legacy AdminLTE pages without modern page wrappers */
#rocad-app.rocad-shell .content-wrapper > .content-header:not([class*="rocad-"]) {
  padding: var(--rocad-space-5) var(--rocad-shell-content-gutter) var(--rocad-space-3);
  margin: 0;
}

#rocad-app.rocad-shell .content-wrapper > .content-header:not([class*="rocad-"]) > h1 {
  margin: 0 0 var(--rocad-space-2);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .content-wrapper > .content-header:not([class*="rocad-"]) .breadcrumb {
  margin: 0;
  padding: 0;
  font-size: var(--rocad-font-size-sm);
  line-height: var(--rocad-line-height-base);
  background: transparent;
}

#rocad-app.rocad-shell .content-wrapper > section.content:not([class*="rocad-"]) {
  padding: 0 var(--rocad-shell-content-gutter) var(--rocad-space-8);
}

#rocad-app.rocad-shell .main-footer {
  padding: var(--rocad-space-4) var(--rocad-shell-content-gutter);
  font-size: var(--rocad-font-size-sm);
  line-height: var(--rocad-line-height-base);
  color: var(--rocad-color-text-muted);
  border-top: 1px solid var(--rocad-color-border);
  background-color: var(--rocad-color-surface-raised);
}

/* Legacy form labels — modernized pages keep their own field rules */
#rocad-app.rocad-shell .content-wrapper label.control-label,
#rocad-app.rocad-shell .content-wrapper .form-group > label:not(.rocad-label) {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.45;
  color: var(--rocad-color-text);
}

/* Legacy tables — safe readability without touching DataTables layout */
#rocad-app.rocad-shell .content-wrapper .table:not(.rocad-table) > thead > tr > th,
#rocad-app.rocad-shell .content-wrapper .table:not(.rocad-table) > tbody > tr > th,
#rocad-app.rocad-shell .content-wrapper .table:not(.rocad-table) > tfoot > tr > th {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: var(--rocad-line-height-base);
  color: var(--rocad-color-text-muted);
  vertical-align: middle;
}

#rocad-app.rocad-shell .content-wrapper .table:not(.rocad-table) > tbody > tr > td,
#rocad-app.rocad-shell .content-wrapper .table:not(.rocad-table) > tfoot > tr > td {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-base);
  line-height: var(--rocad-line-height-base);
  color: var(--rocad-color-text);
  vertical-align: middle;
}

/* Sidebar — Phase A spacing and active-state clarity */
#rocad-app.rocad-shell .rocad-sidebar__section-label,
#rocad-app.rocad-shell .sidebar-menu > li.header.rocad-sidebar__section-label {
  padding: var(--rocad-space-4) var(--rocad-space-3) var(--rocad-space-2);
  font-size: var(--rocad-font-size-xs) !important;
  letter-spacing: 0.06em;
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li {
  margin-bottom: 2px;
}

#rocad-app.rocad-shell .rocad-sidebar__menu > li > a {
  padding: 10px var(--rocad-space-3);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu {
  margin-left: 0;
  padding-left: var(--rocad-space-3);
}

#rocad-app.rocad-shell .rocad-sidebar__menu .treeview-menu > li > a {
  padding: 8px var(--rocad-space-3);
  line-height: 1.45;
}

/* Topbar — Phase A rhythm and dropdown readability */
#rocad-app.rocad-shell .rocad-topbar__nav-list {
  gap: var(--rocad-space-2);
  padding: 0 var(--rocad-space-3);
}

#rocad-app.rocad-shell .rocad-topbar__dropdown-header,
#rocad-app.rocad-shell .rocad-topbar__notification-item > a,
#rocad-app.rocad-shell .rocad-topbar__user-btn {
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-topbar__user-toggle {
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-1) var(--rocad-space-3) var(--rocad-space-1) var(--rocad-space-2) !important;
}

/* Collapsed sidebar — flyout label readability */
@media (min-width: 768px) {
  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__menu > li:hover > a > span:not(.pull-right-container) {
    padding: 10px var(--rocad-space-3);
    font-size: var(--rocad-font-size-sidebar);
    line-height: 1.45;
  }

  body.sidebar-mini.sidebar-collapse #rocad-app.rocad-shell .rocad-sidebar__menu > li:hover > .treeview-menu > li > a {
    font-size: var(--rocad-font-size-sm);
    line-height: 1.45;
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .content-wrapper > .content-header:not([class*="rocad-"]),
  #rocad-app.rocad-shell .content-wrapper > section.content:not([class*="rocad-"]) {
    padding-left: var(--rocad-space-4);
    padding-right: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-topbar__nav-list {
    padding-right: var(--rocad-space-2);
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 4 — Dashboard modernization (scoped to dashboard page only)          */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .rocad-dashboard-page {
  padding: var(--rocad-space-4) var(--rocad-shell-content-gutter) var(--rocad-space-8);
  background-color: var(--rocad-color-surface);
}

#rocad-app.rocad-shell .rocad-dashboard-header {
  padding: var(--rocad-space-5) var(--rocad-shell-content-gutter) 0;
  background-color: var(--rocad-color-surface);
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-dashboard-header__title {
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-dashboard-header__breadcrumb {
  margin-top: var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-dashboard__section,
#rocad-app.rocad-shell .rocad-dashboard__kpi-grid,
#rocad-app.rocad-shell .rocad-dashboard__charts,
#rocad-app.rocad-shell .rocad-dashboard__quick-links {
  margin-left: 0;
  margin-right: 0;
}

#rocad-app.rocad-shell .rocad-dashboard__kpi-grid > [class*="col-"],
#rocad-app.rocad-shell .rocad-dashboard__quick-links > [class*="col-"] {
  margin-bottom: var(--rocad-space-4);
}

/* KPI cards */
#rocad-app.rocad-shell .rocad-kpi {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-4);
  height: 100%;
  min-height: 96px;
  padding: var(--rocad-space-4) var(--rocad-space-5);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-lg);
  box-shadow: var(--rocad-shadow-sm);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#rocad-app.rocad-shell .rocad-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--rocad-shadow-md);
  border-color: var(--rocad-color-border-strong);
}

#rocad-app.rocad-shell .rocad-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--rocad-radius-md);
  font-size: 20px;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-kpi--brand .rocad-kpi__icon {
  background: linear-gradient(135deg, var(--rocad-color-brand-light), var(--rocad-color-brand));
}

#rocad-app.rocad-shell .rocad-kpi--danger .rocad-kpi__icon {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

#rocad-app.rocad-shell .rocad-kpi--success .rocad-kpi__icon {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}

#rocad-app.rocad-shell .rocad-kpi--warning .rocad-kpi__icon {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

#rocad-app.rocad-shell .rocad-kpi__body {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-1);
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-kpi__label {
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text-muted);
  line-height: 1.3;
}

#rocad-app.rocad-shell .rocad-kpi__value {
  font-size: var(--rocad-font-size-xl);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shared panel */
#rocad-app.rocad-shell .rocad-panel {
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-lg);
  box-shadow: var(--rocad-shadow-sm);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-panel--insight {
  border-color: rgba(245, 158, 11, 0.25);
  background: linear-gradient(180deg, #fffbeb 0%, var(--rocad-color-surface-raised) 100%);
}

#rocad-app.rocad-shell .rocad-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-4) var(--rocad-space-5);
  border-bottom: 1px solid var(--rocad-color-border);
  background: var(--rocad-color-surface-raised);
}

#rocad-app.rocad-shell .rocad-panel__header--toggle:hover {
  background: var(--rocad-color-surface-muted);
}

#rocad-app.rocad-shell .rocad-panel__header-main {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3);
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--rocad-radius-md);
  background: var(--rocad-color-surface-muted);
  color: var(--rocad-color-brand);
  font-size: 16px;
}

#rocad-app.rocad-shell .rocad-panel__icon--insight {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

#rocad-app.rocad-shell .rocad-panel__title {
  margin: 0;
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  line-height: 1.3;
}

#rocad-app.rocad-shell .rocad-panel__subtitle {
  margin: var(--rocad-space-1) 0 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-panel__chevron {
  color: var(--rocad-color-text-muted);
  font-size: 14px;
}

#rocad-app.rocad-shell .rocad-panel__body {
  padding: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-panel__body--flush {
  padding: 0;
}

#rocad-app.rocad-shell .rocad-panel__body--chart {
  min-height: 280px;
  padding: var(--rocad-space-4) var(--rocad-space-5) var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-panel__footer {
  padding: var(--rocad-space-3) var(--rocad-space-5);
  background: var(--rocad-color-surface-muted);
  border-top: 1px solid var(--rocad-color-border);
}

#rocad-app.rocad-shell .rocad-panel__footer-btn {
  border-radius: var(--rocad-radius-md);
}

#rocad-app.rocad-shell .rocad-dashboard__chart-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-panel--chart-sm {
  margin-bottom: 0;
}

/* AI insight */
#rocad-app.rocad-shell .rocad-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-3);
}

#rocad-app.rocad-shell .rocad-insight-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-3) var(--rocad-space-4);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--rocad-radius-md);
}

#rocad-app.rocad-shell .rocad-insight-list__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 13px;
}

#rocad-app.rocad-shell .rocad-insight-list__text {
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-insight-list__highlight {
  color: #ef4444;
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-insight-empty {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-2) 0;
}

#rocad-app.rocad-shell .rocad-insight-empty__icon {
  font-size: 24px;
  color: #22c55e;
}

#rocad-app.rocad-shell .rocad-insight-empty__text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  color: #15803d;
  font-weight: var(--rocad-font-weight-medium);
}

/* Tables */
#rocad-app.rocad-shell .rocad-table-wrap {
  margin: 0;
}

#rocad-app.rocad-shell .rocad-table {
  margin-bottom: 0;
  border: none !important;
}

#rocad-app.rocad-shell .rocad-table > thead > tr > th {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-xs);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rocad-color-text-muted);
  background: var(--rocad-color-surface-muted);
  border-bottom: 1px solid var(--rocad-color-border) !important;
  border-color: var(--rocad-color-border) !important;
}

#rocad-app.rocad-shell .rocad-table > tbody > tr > td {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text);
  vertical-align: middle;
  border-color: var(--rocad-color-border) !important;
}

#rocad-app.rocad-shell .rocad-table__row--clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-table__row--clickable:hover {
  background-color: rgba(8, 79, 168, 0.04) !important;
}

#rocad-app.rocad-shell .rocad-table__action {
  cursor: pointer;
  color: var(--rocad-color-brand);
  font-size: 16px;
}

#rocad-app.rocad-shell .rocad-table__action:hover {
  color: var(--rocad-color-brand-dark);
}

#rocad-app.rocad-shell .rocad-badge {
  display: inline-block;
  padding: 0.25em 0.65em;
  font-size: 11px;
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.02em;
  border-radius: 9999px;
}

#rocad-app.rocad-shell .rocad-badge--success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #15803d !important;
}

#rocad-app.rocad-shell .rocad-badge--warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #b45309 !important;
}

#rocad-app.rocad-shell .rocad-badge--danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #b91c1c !important;
}

/* Quick links */
#rocad-app.rocad-shell .rocad-quick-link {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3);
  min-height: 72px;
  padding: var(--rocad-space-4);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-lg);
  box-shadow: var(--rocad-shadow-sm);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#rocad-app.rocad-shell .rocad-quick-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--rocad-shadow-md);
}

#rocad-app.rocad-shell .rocad-quick-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rocad-radius-md);
  color: #fff;
  font-size: 18px;
}

#rocad-app.rocad-shell .rocad-quick-link--brand .rocad-quick-link__icon {
  background: var(--rocad-color-brand);
}

#rocad-app.rocad-shell .rocad-quick-link--success .rocad-quick-link__icon {
  background: #22c55e;
}

#rocad-app.rocad-shell .rocad-quick-link--danger .rocad-quick-link__icon {
  background: #ef4444;
}

#rocad-app.rocad-shell .rocad-quick-link--warning .rocad-quick-link__icon {
  background: #f59e0b;
}

#rocad-app.rocad-shell .rocad-quick-link__label {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

/* Override legacy box styles inside dashboard panels */
#rocad-app.rocad-shell .rocad-dashboard .box.rocad-panel {
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-lg);
  box-shadow: var(--rocad-shadow-sm);
}

#rocad-app.rocad-shell .rocad-dashboard .box.rocad-panel > .box-header {
  border-bottom: 1px solid var(--rocad-color-border);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-dashboard-page {
    padding: var(--rocad-space-3);
  }

  #rocad-app.rocad-shell .rocad-kpi {
    min-height: 88px;
    padding: var(--rocad-space-3) var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-kpi__value {
    font-size: var(--rocad-font-size-lg);
  }

  #rocad-app.rocad-shell .rocad-panel__header,
  #rocad-app.rocad-shell .rocad-panel__body {
    padding-left: var(--rocad-space-4);
    padding-right: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-table > thead > tr > th,
  #rocad-app.rocad-shell .rocad-table > tbody > tr > td {
    padding: var(--rocad-space-2) var(--rocad-space-3);
    font-size: var(--rocad-font-size-xs);
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 5.0 — Form design system (scoped to .rocad-form-page)                 */
/* Phase 5.1 — Visual enhancement pass (premium SaaS form styling)            */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .rocad-form-page__breadcrumb {
  padding: var(--rocad-space-4) var(--rocad-shell-content-gutter) 0;
  background: linear-gradient(180deg, #eef2f7 0%, var(--rocad-color-surface) 100%);
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-form-page__breadcrumb .breadcrumb {
  margin-bottom: 0;
  padding: var(--rocad-space-2) 0;
  background: transparent;
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-form-page {
  padding: var(--rocad-space-5) var(--rocad-shell-content-gutter) var(--rocad-space-10);
  background: linear-gradient(180deg, var(--rocad-color-surface) 0%, #eef2f7 100%);
}

#rocad-app.rocad-shell .rocad-form-page__intro {
  max-width: var(--rocad-form-max-width);
  margin: 0 auto var(--rocad-space-6);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-form-page__title {
  margin: 0 0 var(--rocad-space-2);
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--rocad-color-text);
  line-height: 1.2;
}

#rocad-app.rocad-shell .rocad-form-page__lead {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted);
  line-height: 1.55;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

#rocad-app.rocad-shell .rocad-form-page__row {
  margin-left: 0;
  margin-right: 0;
}

#rocad-app.rocad-shell .rocad-form-page__col {
  max-width: var(--rocad-form-max-width);
  margin-left: auto;
  margin-right: auto;
  float: none;
}

@media (min-width: 992px) {
  #rocad-app.rocad-shell .rocad-form-page__col {
    width: 100%;
  }
}

/* Premium form card */
#rocad-app.rocad-shell .rocad-form-panel {
  position: relative;
  margin-bottom: 0;
  background: var(--rocad-color-surface-raised);
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
  overflow: visible;
  transition: box-shadow 0.2s ease;
}

#rocad-app.rocad-shell .rocad-form-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
  background: var(--rocad-form-accent-gradient);
}

#rocad-app.rocad-shell .rocad-form-panel.box {
  border-top-color: transparent;
}

#rocad-app.rocad-shell .rocad-form-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-4);
  padding: var(--rocad-space-6) var(--rocad-space-6) var(--rocad-space-5);
  border-bottom: 1px solid var(--rocad-color-border);
  background: linear-gradient(
    180deg,
    rgb(248 250 252 / 0.9) 0%,
    var(--rocad-color-surface-raised) 100%
  );
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

#rocad-app.rocad-shell .rocad-form-panel__header-brand {
  display: flex;
  align-items: flex-start;
  gap: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-form-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--rocad-radius-md);
  background: var(--rocad-form-accent-gradient);
  color: var(--rocad-color-text-inverse);
  font-size: 20px;
  box-shadow: 0 4px 12px rgb(8 79 168 / 0.25);
}

#rocad-app.rocad-shell .rocad-form-panel__title {
  margin: 0;
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  line-height: 1.3;
  text-decoration: none;
  letter-spacing: -0.01em;
}

#rocad-app.rocad-shell .rocad-form-panel__subtitle {
  margin: var(--rocad-space-1) 0 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-form-panel__body {
  padding: var(--rocad-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-form-block {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-form-section-gap);
}

#rocad-app.rocad-shell .rocad-form-block--details {
  padding-top: var(--rocad-space-5);
  border-top: 1px dashed var(--rocad-color-border);
}

#rocad-app.rocad-shell .rocad-form-panel__footer,
#rocad-app.rocad-shell .rocad-form-page .box-footer.rocad-form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-5) var(--rocad-space-6) var(--rocad-space-6);
  background: linear-gradient(
    180deg,
    var(--rocad-color-surface-muted) 0%,
    rgb(241 245 249 / 0.6) 100%
  );
  border-top: 1px solid var(--rocad-color-border);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

#rocad-app.rocad-shell .rocad-form-actions__hint {
  margin: 0;
  font-size: var(--rocad-font-size-xs);
  color: var(--rocad-color-text-muted);
  text-align: center;
  line-height: 1.45;
}

/* Fields */
#rocad-app.rocad-shell .rocad-form-page .rocad-field,
#rocad-app.rocad-shell .rocad-form-page .form-group.rocad-field {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-form-page .rocad-label,
#rocad-app.rocad-shell .rocad-form-page .rocad-field > label,
#rocad-app.rocad-shell .rocad-form-page .form-group.rocad-field > label {
  display: block;
  margin-bottom: var(--rocad-space-1);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

#rocad-app.rocad-shell .rocad-form-page .rocad-field-hint {
  margin: 0 0 var(--rocad-space-2);
  font-size: var(--rocad-font-size-xs);
  color: var(--rocad-color-text-muted);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-form-page .form-control {
  height: var(--rocad-form-field-height);
  padding: var(--rocad-space-2) var(--rocad-space-4);
  font-family: var(--rocad-font-sans);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text);
  background-color: #fff;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color var(--rocad-form-transition),
    box-shadow var(--rocad-form-transition),
    background-color var(--rocad-form-transition);
}

#rocad-app.rocad-shell .rocad-form-page textarea.form-control {
  height: auto;
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-form-page .form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--rocad-color-border-strong);
}

#rocad-app.rocad-shell .rocad-form-page .form-control:focus {
  border-color: var(--rocad-color-brand-light);
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.02),
    0 0 0 3px var(--rocad-color-focus-ring);
  outline: none;
}

#rocad-app.rocad-shell .rocad-form-page .form-control:disabled {
  background-color: var(--rocad-color-surface-muted);
  border-color: var(--rocad-color-border);
  border-style: dashed;
  color: var(--rocad-color-text-muted);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

#rocad-app.rocad-shell .rocad-form-page .form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* Inline field errors */
#rocad-app.rocad-shell .rocad-form-page #invalidAccount,
#rocad-app.rocad-shell .rocad-form-page .rocad-field-error {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2);
  margin-top: var(--rocad-space-3);
  padding: var(--rocad-space-2) var(--rocad-space-3);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-danger) !important;
  background: var(--rocad-color-danger-bg);
  border: 1px solid var(--rocad-color-danger-border);
  border-radius: var(--rocad-radius-sm);
}

#rocad-app.rocad-shell .rocad-form-page #invalidAccount::before {
  content: "\f071";
  font-family: FontAwesome;
  font-size: 14px;
  flex-shrink: 0;
}

/* Server alerts (#error) */
#rocad-app.rocad-shell .rocad-form-page #error,
#rocad-app.rocad-shell .rocad-form-page .rocad-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--rocad-space-3);
  margin: 0;
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  line-height: 1.5;
  border-radius: var(--rocad-form-field-radius);
  border: 1px solid transparent;
}

#rocad-app.rocad-shell .rocad-form-page #error:empty {
  display: none;
  margin: 0;
  padding: 0;
}

#rocad-app.rocad-shell .rocad-form-page #error font[color="red"],
#rocad-app.rocad-shell .rocad-form-page #error font[color='red'],
#rocad-app.rocad-shell .rocad-form-page .rocad-alert--error {
  color: var(--rocad-color-danger) !important;
}

#rocad-app.rocad-shell .rocad-form-page #error font[color="green"],
#rocad-app.rocad-shell .rocad-form-page #error font[color='green'],
#rocad-app.rocad-shell .rocad-form-page .rocad-alert--success {
  color: var(--rocad-color-success) !important;
}

#rocad-app.rocad-shell .rocad-form-page #error:has(font[color="red"]),
#rocad-app.rocad-shell .rocad-form-page #error:has(font[color='red']) {
  background: var(--rocad-color-danger-bg);
  border-color: var(--rocad-color-danger-border);
}

#rocad-app.rocad-shell .rocad-form-page #error:has(font[color="red"])::before,
#rocad-app.rocad-shell .rocad-form-page #error:has(font[color='red'])::before {
  content: "\f071";
  font-family: FontAwesome;
  font-size: 16px;
  color: var(--rocad-color-danger);
  flex-shrink: 0;
  margin-top: 1px;
}

#rocad-app.rocad-shell .rocad-form-page #error:has(font[color="green"]),
#rocad-app.rocad-shell .rocad-form-page #error:has(font[color='green']) {
  background: var(--rocad-color-success-bg);
  border-color: var(--rocad-color-success-border);
}

#rocad-app.rocad-shell .rocad-form-page #error:has(font[color="green"])::before,
#rocad-app.rocad-shell .rocad-form-page #error:has(font[color='green'])::before {
  content: "\f058";
  font-family: FontAwesome;
  font-size: 16px;
  color: var(--rocad-color-success);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Loader */
#rocad-app.rocad-shell .rocad-form-page #pageloader,
#rocad-app.rocad-shell .rocad-form-page .rocad-form-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-5);
  background: var(--rocad-color-info-bg);
  border: 1px solid var(--rocad-color-info-border);
  border-radius: var(--rocad-form-field-radius);
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-loader__img,
#rocad-app.rocad-shell .rocad-form-page #pageloader img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px;
  opacity: 0.85;
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-loader__text {
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-brand);
}

#rocad-app.rocad-shell .rocad-form-page #verifiedAccountResponse {
  width: 100% !important;
  max-width: 100%;
  margin: 0;
}

/* Phase 5.4 — Form sections, grids, uploads, profile */
#rocad-app.rocad-shell .rocad-form-section {
  margin-bottom: var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-form-section + .rocad-form-section {
  margin-top: var(--rocad-space-6);
  padding-top: var(--rocad-space-6);
  border-top: 1px dashed var(--rocad-color-border);
}

#rocad-app.rocad-shell .rocad-form-section__title {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3);
  margin: 0 0 var(--rocad-space-5);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  line-height: 1.3;
}

#rocad-app.rocad-shell .rocad-form-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--rocad-radius-md);
  background: rgba(8, 79, 168, 0.1);
  color: var(--rocad-color-brand);
  font-size: 14px;
}

#rocad-app.rocad-shell .rocad-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rocad-space-4) var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-form-grid--single {
  grid-template-columns: 1fr;
}

#rocad-app.rocad-shell .rocad-form-grid__full {
  grid-column: 1 / -1;
}

#rocad-app.rocad-shell .rocad-upload-zone {
  padding: var(--rocad-space-5);
  text-align: center;
  border: 2px dashed var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  background: linear-gradient(180deg, #f8fafc 0%, var(--rocad-color-surface-muted) 100%);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#rocad-app.rocad-shell .rocad-upload-zone:hover {
  border-color: var(--rocad-color-brand-light);
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
}

#rocad-app.rocad-shell .rocad-upload-zone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--rocad-space-3);
  border-radius: 50%;
  background: var(--rocad-form-accent-gradient);
  color: var(--rocad-color-text-inverse);
  font-size: 20px;
  box-shadow: 0 4px 12px rgb(8 79 168 / 0.2);
}

#rocad-app.rocad-shell .rocad-upload-zone__label {
  margin: 0 0 var(--rocad-space-1);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-upload-zone__hint {
  margin: 0 0 var(--rocad-space-3);
  font-size: var(--rocad-font-size-xs);
  color: var(--rocad-color-text-muted);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-upload-zone .form-control[type="file"] {
  height: auto;
  padding: var(--rocad-space-2);
  background: #fff;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-image-preview {
  display: none;
  max-width: 160px;
  margin-top: var(--rocad-space-3);
  padding: var(--rocad-space-2);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-md);
  background: #fff;
}

#rocad-app.rocad-shell .rocad-image-preview--visible,
#rocad-app.rocad-shell .rocad-image-preview[src]:not([src="#"]) {
  display: block;
}

#rocad-app.rocad-shell .rocad-current-image {
  margin-top: var(--rocad-space-3);
  padding: var(--rocad-space-4);
  text-align: center;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-md);
  background: var(--rocad-color-surface-muted);
}

#rocad-app.rocad-shell .rocad-current-image img {
  max-width: 150px;
  border-radius: var(--rocad-radius-sm);
}

#rocad-app.rocad-shell .rocad-form-page .rocad-profile-status {
  max-width: var(--rocad-form-max-width);
  margin: 0 auto var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: var(--rocad-space-6);
  max-width: 960px;
  margin: 0 auto;
  align-items: start;
}

#rocad-app.rocad-shell .rocad-profile-card {
  text-align: center;
  padding: var(--rocad-space-6);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
}

#rocad-app.rocad-shell .rocad-profile-card__avatar {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--rocad-space-4);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgb(15 23 42 / 0.12);
}

#rocad-app.rocad-shell .rocad-profile-card__name {
  margin: 0 0 var(--rocad-space-2);
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-profile-card__role {
  display: inline-block;
  margin-bottom: var(--rocad-space-3);
  padding: var(--rocad-space-1) var(--rocad-space-3);
  font-size: var(--rocad-font-size-xs);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-success);
  background: var(--rocad-color-success-bg);
  border-radius: 9999px;
}

#rocad-app.rocad-shell .rocad-profile-card__meta {
  margin: 0 0 var(--rocad-space-1);
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-profile-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-3);
  margin-top: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-profile-card__actions .rocad-btn {
  width: 100%;
}

#rocad-app.rocad-shell .rocad-profile-panel {
  display: none;
}

#rocad-app.rocad-shell .rocad-profile-panel.is-active {
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page .password-group {
  position: relative;
  width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page .password-group input {
  padding-right: 45px !important;
}

#rocad-app.rocad-shell .rocad-form-page .password-toggle {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--rocad-color-text-muted);
  font-size: 16px;
  z-index: 10;
}

#rocad-app.rocad-shell .rocad-form-page .password-toggle:hover {
  color: var(--rocad-color-brand);
}

#rocad-app.rocad-shell .rocad-form-page #status {
  margin-bottom: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-form-page #status:empty {
  display: none;
  margin: 0;
}

#rocad-app.rocad-shell .rocad-form-page #error {
  display: block;
  margin-top: var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-form-page #error:empty {
  display: none;
  margin: 0;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-grid {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-profile-layout {
    grid-template-columns: 1fr;
  }
}

/* Select2 */
#rocad-app.rocad-shell .rocad-form-page .select2-container {
  width: 100% !important;
  font-family: var(--rocad-font-sans);
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single {
  height: var(--rocad-form-field-height);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color var(--rocad-form-transition),
    box-shadow var(--rocad-form-transition);
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single:hover {
  border-color: var(--rocad-color-border-strong);
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default.select2-container--focus .select2-selection--single,
#rocad-app.rocad-shell .rocad-form-page .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rocad-color-brand-light);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.02),
    0 0 0 3px var(--rocad-color-focus-ring);
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: var(--rocad-space-4);
  padding-right: var(--rocad-space-10);
  line-height: calc(var(--rocad-form-field-height) - 2px);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8;
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--rocad-form-field-height) - 2px);
  right: var(--rocad-space-3);
  width: 24px;
}

#rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--rocad-color-text-muted) transparent transparent transparent;
  border-width: 6px 5px 0 5px;
  margin-left: -5px;
  margin-top: -2px;
}

#rocad-app.rocad-shell .select2-container--default .select2-dropdown {
  z-index: 1060;
  margin-top: 4px;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  box-shadow: var(--rocad-form-shadow);
  overflow: hidden;
}

#rocad-app.rocad-shell .select2-container--default .select2-search--dropdown {
  padding: var(--rocad-space-2);
  background: var(--rocad-color-surface-muted);
  border-bottom: 1px solid var(--rocad-color-border);
}

#rocad-app.rocad-shell .select2-container--default .select2-results__option {
  padding: var(--rocad-space-2) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  transition: background-color 0.1s ease;
}

#rocad-app.rocad-shell .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rocad-color-brand);
  color: var(--rocad-color-text-inverse);
}

#rocad-app.rocad-shell .select2-container--default .select2-search--dropdown .select2-search__field {
  padding: var(--rocad-space-2) var(--rocad-space-3);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-sm);
  font-size: var(--rocad-font-size-sm);
  background: #fff;
}

#rocad-app.rocad-shell .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--rocad-color-brand-light);
  outline: none;
}

/* Primary button */
#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .btn,
#rocad-app.rocad-shell .rocad-form-page .rocad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-2);
  min-height: 48px;
  padding: var(--rocad-space-3) var(--rocad-space-6);
  font-family: var(--rocad-font-sans);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.01em;
  border-radius: var(--rocad-form-field-radius);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .btn-primary,
#rocad-app.rocad-shell .rocad-form-page .rocad-btn--primary {
  background: var(--rocad-form-accent-gradient);
  border-color: transparent;
  color: var(--rocad-color-text-inverse);
  box-shadow: 0 4px 14px rgb(8 79 168 / 0.35);
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .btn-primary:hover,
#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .btn-primary:focus,
#rocad-app.rocad-shell .rocad-form-page .rocad-btn--primary:hover,
#rocad-app.rocad-shell .rocad-form-page .rocad-btn--primary:focus {
  background: linear-gradient(
    135deg,
    var(--rocad-color-brand-dark) 0%,
    var(--rocad-color-brand) 100%
  );
  color: var(--rocad-color-text-inverse);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgb(8 79 168 / 0.4);
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .btn-primary:active,
#rocad-app.rocad-shell .rocad-form-page .rocad-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgb(8 79 168 / 0.3);
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .btn-block,
#rocad-app.rocad-shell .rocad-form-page .rocad-form-actions .w-100 {
  width: 100%;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page {
    padding: var(--rocad-space-4) var(--rocad-space-3) var(--rocad-space-8);
  }

  #rocad-app.rocad-shell .rocad-form-page__intro {
    margin-bottom: var(--rocad-space-5);
    text-align: left;
  }

  #rocad-app.rocad-shell .rocad-form-page__lead {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  #rocad-app.rocad-shell .rocad-form-panel {
    border-radius: 0.875rem;
  }

  #rocad-app.rocad-shell .rocad-form-panel::before {
    border-radius: 0.875rem 0.875rem 0 0;
  }

  #rocad-app.rocad-shell .rocad-form-panel__header {
    padding: var(--rocad-space-5) var(--rocad-space-4) var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-form-panel__body,
  #rocad-app.rocad-shell .rocad-form-page .box-footer.rocad-form-actions {
    padding-left: var(--rocad-space-4);
    padding-right: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-form-panel__icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  #rocad-app.rocad-shell .rocad-form-page .form-control,
  #rocad-app.rocad-shell .rocad-form-page .select2-container--default .select2-selection--single {
    font-size: 16px;
  }
}

/* Neutralize legacy form-style-9 shell when used inside premium panels */
#rocad-app.rocad-shell .rocad-form-page .rocad-form-panel form.form-style-9 {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

#rocad-app.rocad-shell .rocad-form-page .rocad-form-panel form.form-style-9 > center {
  display: block;
  text-align: left;
}

#rocad-app.rocad-shell .rocad-form-page #msg:empty {
  display: none;
}

/* Wave 1.1 — Structural asset / tool forms */
#rocad-app.rocad-shell .rocad-form-page--structural-asset input[type="text"],
#rocad-app.rocad-shell .rocad-form-page--structural-asset select,
#rocad-app.rocad-shell .rocad-form-page--stock input[type="text"],
#rocad-app.rocad-shell .rocad-form-page--stock select:not(.select2-hidden-accessible) {
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-plant-field select.rocad-new-supply-plantno-native {
  display: block;
  width: 100%;
  min-height: var(--rocad-form-field-height);
  font-size: var(--rocad-font-size-base);
  text-transform: none;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-plant-field .select2-container {
  display: none !important;
}

body > .select2-container--open {
  z-index: 10060 !important;
}

/* Create stock item form */
#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-site-summary {
  margin-bottom: var(--rocad-space-5, 1.25rem);
}

#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-stock-site-summary__label,
#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-stock-site-summary__value {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-form-panel__subtitle,
#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-field-hint {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  align-items: stretch;
}

#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-form-actions .rocad-table-page__btn,
#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-form-actions .rocad-create-stock-submit {
  flex: 1 1 180px;
  min-height: 44px;
  justify-content: center;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-input--upper {
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-form-actions {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-form-actions .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-form-page--create-stock .rocad-create-stock-form-actions .rocad-create-stock-submit {
    width: 100%;
  }
}

/* New supply form */
#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-site-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-page-alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-stock-site-summary__label,
#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-stock-site-summary__value {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-qty-input {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: var(--rocad-font-weight-semibold);
  min-height: 52px;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-balance-display {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: var(--rocad-font-weight-semibold);
  text-align: center;
  min-height: 52px;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-summary-card__label {
  display: block;
  margin-bottom: var(--rocad-space-2, 0.5rem);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-item-not-found {
  margin: var(--rocad-space-3, 0.75rem) 0 0;
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-danger);
  background: var(--rocad-color-danger-bg);
  border: 1px solid var(--rocad-color-danger-border);
  border-radius: var(--rocad-form-field-radius);
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-loader {
  margin: var(--rocad-space-3, 0.75rem) 0;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-loader img {
  width: 48px;
  height: 48px;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-footer {
  margin-top: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-5, 1.25rem);
  background: linear-gradient(180deg, var(--rocad-color-surface-muted) 0%, rgb(241 245 249 / 0.6) 100%);
  border: 1px solid var(--rocad-color-border);
  border-radius: 1rem;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  align-items: stretch;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions .rocad-table-page__btn,
#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions #submit_item_supply,
#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions .rocad-new-supply-submit {
  flex: 1 1 180px;
  min-height: 44px;
  justify-content: center;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions #submit_item_supply {
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions .rocad-new-supply-submit {
  width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-summary-panel {
  height: 100%;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-summary-panel {
    margin-top: var(--rocad-space-4, 1rem);
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-form-page--new-supply .rocad-new-supply-form-actions #submit_item_supply {
    width: 100%;
  }
}

#rocad-app.rocad-shell .rocad-form-page #msg:not(:empty) {
  margin-bottom: var(--rocad-space-3);
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-danger);
  background: var(--rocad-color-danger-bg);
  border: 1px solid var(--rocad-color-danger-border);
  border-radius: var(--rocad-form-field-radius);
}

/* -------------------------------------------------------------------------- */
/* Phase 6.0 — Table / data view design system (scoped to .rocad-table-page)   */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .rocad-table-page__breadcrumb {
  padding: var(--rocad-space-4) var(--rocad-shell-content-gutter) 0;
  background: linear-gradient(180deg, #eef2f7 0%, var(--rocad-color-surface) 100%);
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-table-page__breadcrumb .breadcrumb {
  margin-bottom: 0;
  padding: var(--rocad-space-2) 0;
  background: transparent;
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page {
  padding: var(--rocad-space-5) var(--rocad-shell-content-gutter) var(--rocad-space-10);
  background: linear-gradient(180deg, var(--rocad-color-surface) 0%, #eef2f7 100%);
}

#rocad-app.rocad-shell .rocad-table-page__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rocad-space-4);
  margin-bottom: var(--rocad-space-6);
}

#rocad-app.rocad-shell .rocad-table-page__intro-text {
  flex: 1 1 240px;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-table-page__title {
  margin: 0 0 var(--rocad-space-2);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--rocad-color-text);
  line-height: 1.2;
}

#rocad-app.rocad-shell .rocad-table-page__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted);
  line-height: 1.55;
}

#rocad-app.rocad-shell .rocad-table-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-3);
}

#rocad-app.rocad-shell .rocad-table-page__count {
  display: inline-flex;
  align-items: center;
  gap: var(--rocad-space-2);
  padding: var(--rocad-space-2) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-brand);
  background: rgba(8, 79, 168, 0.08);
  border: 1px solid rgba(8, 79, 168, 0.15);
  border-radius: 9999px;
}

#rocad-app.rocad-shell .rocad-table-page__count strong {
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-table-page #error,
#rocad-app.rocad-shell .rocad-table-page .rocad-table-page__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--rocad-space-3);
  margin: 0 0 var(--rocad-space-5);
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  line-height: 1.5;
  border-radius: var(--rocad-form-field-radius);
  border: 1px solid transparent;
}

#rocad-app.rocad-shell .rocad-table-page #error:empty {
  display: none;
  margin: 0;
  padding: 0;
}

#rocad-app.rocad-shell .rocad-table-page #error font[color="red"],
#rocad-app.rocad-shell .rocad-table-page #error font[color='red'] {
  color: var(--rocad-color-danger) !important;
}

#rocad-app.rocad-shell .rocad-table-page #error font[color="green"],
#rocad-app.rocad-shell .rocad-table-page #error font[color='green'] {
  color: var(--rocad-color-success) !important;
}

#rocad-app.rocad-shell .rocad-table-page #error:has(font[color="red"]),
#rocad-app.rocad-shell .rocad-table-page #error:has(font[color='red']) {
  background: var(--rocad-color-danger-bg);
  border-color: var(--rocad-color-danger-border);
}

#rocad-app.rocad-shell .rocad-table-page #error:has(font[color="red"])::before,
#rocad-app.rocad-shell .rocad-table-page #error:has(font[color='red'])::before {
  content: "\f071";
  font-family: FontAwesome;
  font-size: 16px;
  color: var(--rocad-color-danger);
  flex-shrink: 0;
  margin-top: 1px;
}

#rocad-app.rocad-shell .rocad-table-page #error:has(font[color="green"]),
#rocad-app.rocad-shell .rocad-table-page #error:has(font[color='green']) {
  background: var(--rocad-color-success-bg);
  border-color: var(--rocad-color-success-border);
}

#rocad-app.rocad-shell .rocad-table-page #error:has(font[color="green"])::before,
#rocad-app.rocad-shell .rocad-table-page #error:has(font[color='green'])::before {
  content: "\f058";
  font-family: FontAwesome;
  font-size: 16px;
  color: var(--rocad-color-success);
  flex-shrink: 0;
  margin-top: 1px;
}

#rocad-app.rocad-shell .rocad-table-page__stats {
  margin-bottom: var(--rocad-space-6);
  margin-left: calc(var(--rocad-space-2) * -1);
  margin-right: calc(var(--rocad-space-2) * -1);
}

#rocad-app.rocad-shell .rocad-table-page__stats > [class*="col-"] {
  padding-left: var(--rocad-space-2);
  padding-right: var(--rocad-space-2);
  margin-bottom: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-table-stat-card {
  position: relative;
  height: 100%;
  padding: var(--rocad-space-5);
  color: var(--rocad-color-text-inverse);
  border-radius: 1rem;
  box-shadow: var(--rocad-shadow-md);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#rocad-app.rocad-shell .rocad-table-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.12) 0%, transparent 55%);
  pointer-events: none;
}

#rocad-app.rocad-shell .rocad-table-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rocad-shadow-lg);
}

#rocad-app.rocad-shell .rocad-table-stat-card--1 {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}

#rocad-app.rocad-shell .rocad-table-stat-card--2 {
  background: linear-gradient(135deg, #fc5c7d, #6a82fb);
}

#rocad-app.rocad-shell .rocad-table-stat-card--3 {
  background: linear-gradient(135deg, #ff9966, #ff5e62);
}

#rocad-app.rocad-shell .rocad-table-stat-card--4 {
  background: linear-gradient(135deg, #56ab2f, #a8e063);
}

#rocad-app.rocad-shell .rocad-table-stat-card--5 {
  background: linear-gradient(135deg, #11998e, #38ef7d);
}

#rocad-app.rocad-shell .rocad-staff-stat-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

#rocad-app.rocad-shell .rocad-staff-stat-link:hover,
#rocad-app.rocad-shell .rocad-staff-stat-link:focus {
  color: inherit;
  text-decoration: none;
}

#rocad-app.rocad-shell .rocad-staff-stat-value {
  position: relative;
  margin: var(--rocad-space-2) 0 0;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.2;
}

#rocad-app.rocad-shell .rocad-staff-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2);
  margin-bottom: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-staff-filter {
  display: inline-flex;
  align-items: center;
  padding: var(--rocad-space-2) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text-muted);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-staff-filter:hover,
#rocad-app.rocad-shell .rocad-staff-filter:focus {
  color: var(--rocad-color-brand);
  border-color: rgba(8, 79, 168, 0.25);
  text-decoration: none;
}

#rocad-app.rocad-shell .rocad-staff-filter.is-active {
  color: #fff;
  background: var(--rocad-form-accent-gradient);
  border-color: transparent;
  box-shadow: 0 2px 8px rgb(8 79 168 / 0.2);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-staff-row--inactive {
  color: var(--rocad-color-danger);
  text-decoration: line-through;
}

#rocad-app.rocad-shell .rocad-table-stat-card__title {
  position: relative;
  margin: 0 0 var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.92;
}

#rocad-app.rocad-shell .rocad-table-stat-card__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

#rocad-app.rocad-shell .rocad-table-stat-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-2) 0;
  font-size: var(--rocad-font-size-sm);
  line-height: 1.4;
  border-bottom: 1px solid rgb(255 255 255 / 0.15);
}

#rocad-app.rocad-shell .rocad-table-stat-card__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-stat-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-stat-card__count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.1em 0.55em;
  font-size: var(--rocad-font-size-xs);
  font-weight: var(--rocad-font-weight-semibold);
  background: rgb(255 255 255 / 0.2);
  border-radius: 9999px;
}

#rocad-app.rocad-shell .rocad-table-stat-card__empty {
  position: relative;
  margin: 0;
  font-size: var(--rocad-font-size-sm);
  opacity: 0.85;
}

#rocad-app.rocad-shell .rocad-table-panel {
  position: relative;
  margin-bottom: 0;
  background: var(--rocad-color-surface-raised);
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
  overflow: visible;
}

#rocad-app.rocad-shell .rocad-table-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
  background: var(--rocad-form-accent-gradient);
}

#rocad-app.rocad-shell .rocad-table-panel.box {
  border-top-color: transparent;
}

#rocad-app.rocad-shell .rocad-table-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-4);
  padding: var(--rocad-space-5) var(--rocad-space-6);
  border-bottom: 1px solid var(--rocad-color-border);
  background: linear-gradient(180deg, rgb(248 250 252 / 0.9) 0%, var(--rocad-color-surface-raised) 100%);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

#rocad-app.rocad-shell .rocad-table-panel__title {
  margin: 0 0 var(--rocad-space-1);
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-table-panel__subtitle {
  margin: 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-table-panel__body {
  padding: var(--rocad-space-5) var(--rocad-space-6) var(--rocad-space-6);
}

#rocad-app.rocad-shell .rocad-table-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rocad-space-3);
}

#rocad-app.rocad-shell .rocad-table-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-2);
  min-height: 40px;
  padding: var(--rocad-space-2) var(--rocad-space-5);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-table-page__btn:hover,
#rocad-app.rocad-shell .rocad-table-page__btn:focus {
  text-decoration: none;
  transform: translateY(-1px);
}

#rocad-app.rocad-shell .rocad-table-page__btn--primary {
  color: #fff;
  background: var(--rocad-form-accent-gradient);
  box-shadow: 0 1px 2px rgb(8 79 168 / 0.2), 0 4px 12px rgb(8 79 168 / 0.18);
}

#rocad-app.rocad-shell .rocad-table-page__btn--primary:hover,
#rocad-app.rocad-shell .rocad-table-page__btn--primary:focus {
  color: #fff;
  box-shadow: 0 2px 4px rgb(8 79 168 / 0.25), 0 8px 20px rgb(8 79 168 / 0.22);
}

#rocad-app.rocad-shell .rocad-table-page__btn--secondary {
  color: var(--rocad-color-text);
  background: var(--rocad-color-surface-raised);
  border-color: var(--rocad-color-border);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}

#rocad-app.rocad-shell .rocad-table-page__btn--secondary:hover,
#rocad-app.rocad-shell .rocad-table-page__btn--secondary:focus {
  color: var(--rocad-color-text);
  background: rgb(248 250 252);
  border-color: rgb(148 163 184 / 0.6);
}

#rocad-app.rocad-shell .rocad-table-page__btn--success {
  color: #fff;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 1px 2px rgb(22 163 74 / 0.2), 0 4px 12px rgb(22 163 74 / 0.16);
}

#rocad-app.rocad-shell .rocad-table-page__btn--success:hover,
#rocad-app.rocad-shell .rocad-table-page__btn--success:focus {
  color: #fff;
  box-shadow: 0 2px 4px rgb(22 163 74 / 0.25), 0 8px 20px rgb(22 163 74 / 0.2);
}

#rocad-app.rocad-shell .rocad-report-stat-value {
  position: relative;
  margin: var(--rocad-space-2) 0 0;
  font-size: var(--rocad-font-size-xl);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.3;
}

#rocad-app.rocad-shell .rocad-report-stat-value--period {
  font-size: var(--rocad-font-size-lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#rocad-app.rocad-shell .rocad-report-stat-value--penalty {
  color: #d97706;
}

#rocad-app.rocad-shell .rocad-report-stat-value--net {
  color: #1d4ed8;
}

#rocad-app.rocad-shell .rocad-penalty-cell--warning {
  color: #d97706;
  font-weight: var(--rocad-font-weight-medium);
}

#rocad-app.rocad-shell .rocad-penalty-cell--net {
  color: #1d4ed8;
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-insight-empty .rocad-table-page__btn {
  margin-top: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-insight-empty .rocad-table-page__btn + .rocad-table-page__btn {
  margin-left: var(--rocad-space-3);
}

/* Maintenance history date-filter modal */
#rocad-app.rocad-shell .rocad-history-filter-modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--rocad-space-4);
  background: rgb(15 23 42 / 0.45);
}

#rocad-app.rocad-shell .rocad-history-filter-modal__content {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: var(--rocad-space-6);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
}

#rocad-app.rocad-shell .rocad-history-filter-modal__title {
  margin: 0 0 var(--rocad-space-4);
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-history-filter-modal .close {
  position: absolute;
  top: var(--rocad-space-4);
  right: var(--rocad-space-4);
  float: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rocad-color-text-muted);
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-history-filter-modal .close:hover {
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-history-filter-modal__submit {
  width: 100%;
  margin-top: var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-report-modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--rocad-space-4);
  background: rgb(15 23 42 / 0.45);
}

#rocad-app.rocad-shell .rocad-report-modal__dialog {
  width: 100%;
  max-width: 28rem;
  padding: var(--rocad-space-6);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
}

#rocad-app.rocad-shell .rocad-report-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  margin-bottom: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-report-modal__title {
  margin: 0;
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-report-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rocad-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-report-modal__close:hover,
#rocad-app.rocad-shell .rocad-report-modal__close:focus {
  color: var(--rocad-color-text);
  background: rgb(248 250 252);
}

#rocad-app.rocad-shell .rocad-report-modal__form .rocad-field {
  margin-bottom: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-report-modal__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--rocad-space-2);
}

/* Phase UI-2 — Penalty report inline filter card */
#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card {
  position: relative;
  margin-top: var(--rocad-space-5);
  margin-bottom: 0;
  background: var(--rocad-color-surface-raised);
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
  background: var(--rocad-form-accent-gradient);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card .rocad-panel__header {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background: linear-gradient(180deg, rgb(248 250 252 / 0.9) 0%, var(--rocad-color-surface-raised) 100%);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) auto;
  gap: var(--rocad-space-4);
  align-items: end;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card .rocad-form-group {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card .rocad-label {
  display: block;
  margin-bottom: var(--rocad-space-2);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card .rocad-form-control {
  width: 100%;
  height: var(--rocad-form-field-height);
  padding: var(--rocad-space-2) var(--rocad-space-4);
  font-family: var(--rocad-font-sans);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text);
  background-color: #fff;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color var(--rocad-form-transition), box-shadow var(--rocad-form-transition);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card .rocad-form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--rocad-color-border-strong);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-card .rocad-form-control:focus {
  border-color: var(--rocad-color-brand-light);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.02), 0 0 0 3px var(--rocad-color-focus-ring);
  outline: none;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-3);
  padding-bottom: 2px;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-form__actions .rocad-btn {
  min-width: 8.5rem;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table-wrap {
  margin: 0;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-lg);
  overflow-x: auto;
  overflow-y: visible;
  background: var(--rocad-color-surface-raised);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table {
  margin-bottom: 0 !important;
  width: 100% !important;
  border: none !important;
  border-collapse: separate;
  border-spacing: 0;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page .rocad-table > tfoot > tr > th {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rocad-color-text-muted);
  background: var(--rocad-color-surface-muted) !important;
  border-bottom: 1px solid var(--rocad-color-border) !important;
  border-color: var(--rocad-color-border) !important;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table > tbody > tr > td {
  padding: var(--rocad-space-3) var(--rocad-space-4);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text);
  vertical-align: middle;
  border-color: var(--rocad-color-border) !important;
  transition: background-color 0.12s ease;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table > tbody > tr:hover > td {
  background-color: rgba(8, 79, 168, 0.04) !important;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table > tbody > tr:nth-child(even) > td {
  background-color: rgb(248 250 252 / 0.65);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table > tbody > tr:nth-child(even):hover > td {
  background-color: rgba(8, 79, 168, 0.06) !important;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-table > tbody > tr > td:last-child {
  overflow: visible;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions {
  position: relative;
  display: inline-block;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions__trigger,
#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions .dropbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 14px;
  color: var(--rocad-color-brand);
  background: rgba(8, 79, 168, 0.08);
  border: 1px solid rgba(8, 79, 168, 0.12);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions:hover .dropbtn,
#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions:hover .rocad-row-actions__trigger {
  color: #fff;
  background: var(--rocad-color-brand);
  border-color: var(--rocad-color-brand);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions__menu,
#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions .dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  min-width: 148px;
  padding: var(--rocad-space-1);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: 0.625rem;
  box-shadow: var(--rocad-shadow-lg);
  z-index: 20;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions:hover .dropdown-content,
#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions:hover .rocad-row-actions__menu {
  display: block;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions__menu a,
#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions .dropdown-content a {
  display: block;
  padding: var(--rocad-space-2) var(--rocad-space-3);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions__menu a:hover,
#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions .dropdown-content a:hover {
  color: var(--rocad-color-brand);
  background: rgba(8, 79, 168, 0.08);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-row-actions .dropdown-content a[href*="delete_id"]:hover {
  color: var(--rocad-color-danger);
  background: var(--rocad-color-danger-bg);
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper {
  padding-top: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper .row:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  margin-bottom: var(--rocad-space-4) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper .row:first-child > [class*="col-"] {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page .dataTables_filter label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2);
  margin: 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_length select,
#rocad-app.rocad-shell .rocad-table-page .dataTables_filter input {
  min-height: 38px;
  padding: var(--rocad-space-2) var(--rocad-space-3);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text);
  background: var(--rocad-color-surface-raised);
  border: 1px solid var(--rocad-color-border);
  border-radius: 0.5rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_filter input {
  min-width: 200px;
  margin-left: 0 !important;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_length select:focus,
#rocad-app.rocad-shell .rocad-table-page .dataTables_filter input:focus {
  outline: none;
  border-color: var(--rocad-color-brand);
  box-shadow: 0 0 0 3px var(--rocad-color-focus-ring);
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_info {
  padding-top: var(--rocad-space-4) !important;
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate {
  padding-top: var(--rocad-space-4) !important;
  text-align: right;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .pagination {
  margin: 0;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  margin-left: 2px;
  padding: var(--rocad-space-1) var(--rocad-space-3);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text) !important;
  background: var(--rocad-color-surface-raised) !important;
  border: 1px solid var(--rocad-color-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .paginate_button:hover {
  color: var(--rocad-color-brand) !important;
  background: rgba(8, 79, 168, 0.06) !important;
  border-color: rgba(8, 79, 168, 0.2) !important;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .paginate_button.current,
#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  background: var(--rocad-color-brand) !important;
  border-color: var(--rocad-color-brand) !important;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .paginate_button.disabled,
#rocad-app.rocad-shell .rocad-table-page .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--rocad-color-text-muted) !important;
  background: var(--rocad-color-surface-muted) !important;
  border-color: var(--rocad-color-border) !important;
  cursor: not-allowed;
  opacity: 0.65;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper .row:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  margin-top: var(--rocad-space-2) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper .row:last-child > [class*="col-"] {
  float: none !important;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page {
    padding: var(--rocad-space-3);
  }

  #rocad-app.rocad-shell .rocad-table-page__intro {
    flex-direction: column;
    align-items: flex-start;
  }

  #rocad-app.rocad-shell .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-table-page__toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page__btn {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-panel__body {
    padding: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-table-page .rocad-table > thead > tr > th,
  #rocad-app.rocad-shell .rocad-table-page .rocad-table > tbody > tr > td,
  #rocad-app.rocad-shell .rocad-table-page .rocad-table > tfoot > tr > th {
    padding: var(--rocad-space-2) var(--rocad-space-3);
    font-size: var(--rocad-font-size-xs);
  }

  #rocad-app.rocad-shell .rocad-table-page .dataTables_filter input {
    min-width: 0;
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper .row:first-child > [class*="col-"],
  #rocad-app.rocad-shell .rocad-table-page .dataTables_wrapper .row:last-child > [class*="col-"] {
    flex: 1 1 100%;
  }

  #rocad-app.rocad-shell .rocad-staff-filters {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-staff-filter {
    justify-content: center;
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page .dataTables_paginate {
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-form__grid {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-form__actions {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page .rocad-penalty-filter-form__actions .rocad-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Wave 2.1 — Clickable filter stat cards (delivery note) */
#rocad-app.rocad-shell a.rocad-table-stat-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

#rocad-app.rocad-shell a.rocad-table-stat-card--link:hover {
  text-decoration: none;
  color: inherit;
}

/* Stock card detail — layout, caption live totals, readability */
#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table-page__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table-stat-card {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table-stat-card__title {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-staff-stat-value {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.25;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table-panel__subtitle {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--stock-detail .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--stock-detail .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--stock-detail .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail table caption {
  caption-side: top;
  padding: var(--rocad-space-3) 0;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail table caption .btn,
#rocad-app.rocad-shell .rocad-table-page--stock-detail table caption .sr-detail-live-total {
  margin-bottom: var(--rocad-space-2);
  font-size: var(--rocad-font-size-sm);
  pointer-events: none;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail table caption .btn strong,
#rocad-app.rocad-shell .rocad-table-page--stock-detail table caption .sr-detail-live-total strong {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-qty.btn {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-period-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2) var(--rocad-space-4);
  margin-bottom: var(--rocad-space-4);
  padding: var(--rocad-space-4) var(--rocad-space-5);
  background: linear-gradient(135deg, rgb(8 79 168 / 0.08) 0%, rgb(37 117 252 / 0.06) 100%);
  border: 1px solid rgb(8 79 168 / 0.18);
  border-radius: var(--rocad-radius-lg, 12px);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-period-badge__label {
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-period-badge__value {
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-brand, #084fa8);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-period-badge__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-card {
  margin-bottom: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--rocad-space-4);
  align-items: end;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form .rocad-label {
  display: block;
  margin-bottom: var(--rocad-space-2);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-3);
  padding-bottom: 2px;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock {
  margin-bottom: var(--rocad-space-4);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-4);
  padding: var(--rocad-space-5) var(--rocad-space-6);
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  border-radius: var(--rocad-radius-lg, 12px);
  box-shadow: var(--rocad-shadow-md);
  color: #fff;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock__title {
  margin: 0 0 var(--rocad-space-2);
  font-size: var(--rocad-font-size-lg);
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock__lead {
  margin: 0;
  max-width: 42ch;
  font-size: var(--rocad-font-size-base);
  opacity: 0.92;
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock__value {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-stat-helper {
  position: relative;
  margin: var(--rocad-space-2) 0 0;
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  opacity: 0.9;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-period-stats {
  margin-bottom: var(--rocad-space-4);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form__actions {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-filter-form__actions .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock__card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-detail-current-stock__value {
    white-space: normal;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail .rocad-stock-toolbar .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-detail table caption .btn,
  #rocad-app.rocad-shell .rocad-table-page--stock-detail table caption .sr-detail-live-total {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    white-space: normal;
  }
}

/* Stock in report — batch + reference modes */
#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table-page__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table-stat-card {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table-stat-card__title {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-staff-stat-value {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-stock-in-report-period-stat {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.35;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table-panel__subtitle {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--stock-in-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--stock-in-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--stock-in-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report table caption .btn {
  margin-bottom: var(--rocad-space-2);
  font-size: var(--rocad-font-size-sm);
  pointer-events: none;
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report table caption .btn strong {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-in-report table caption h1 {
  font-size: var(--rocad-font-size-lg);
  margin: var(--rocad-space-3) 0 0;
}

body > .stock-in-report-filter-modal.modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  padding: var(--rocad-space-6, 1.5rem) var(--rocad-space-3, 0.75rem);
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.45);
}

body.stock-in-report-modal-open > .stock-in-report-filter-modal.modal {
  display: block;
}

body > .stock-in-report-filter-modal.modal .modal-content {
  position: relative;
  z-index: 1;
  background-color: #fff;
  margin: 5vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  width: min(600px, 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body > .stock-in-report-filter-modal.modal .close {
  color: #888;
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

body > .stock-in-report-filter-modal.modal th {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  padding-right: var(--rocad-space-3, 0.75rem);
}

body > .stock-in-report-filter-modal.modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

body > .stock-in-report-filter-modal.modal .btn,
body > .stock-in-report-filter-modal.modal button {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-stock-toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-in-report .rocad-stock-toolbar .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-in-report table caption .btn {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    white-space: normal;
  }
}

/* Stock expenses / stock issue entry — dynamic rows */
#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-site-summary,
#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-site-summary {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-item-card {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem) var(--rocad-space-5, 1.25rem);
  background: var(--rocad-color-surface-raised, #fff);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  border-left: 4px solid var(--rocad-color-brand, #2563eb);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-item-card__label {
  display: block;
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--rocad-space-1, 0.25rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-item-card__value {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-item-card__hint {
  margin: var(--rocad-space-2, 0.5rem) 0 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-row-hint {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border-radius: 0.5rem;
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-footer {
  margin-top: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
  background: linear-gradient(180deg, var(--rocad-color-surface-muted) 0%, rgb(241 245 249 / 0.6) 100%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-footer__hint {
  margin: var(--rocad-space-3, 0.75rem) 0 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
  text-align: center;
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-balance-row {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-table-stat-card__title {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-staff-stat-value {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-detail-stat-helper {
  margin: var(--rocad-space-2) 0 0;
  font-size: var(--rocad-font-size-sm);
  opacity: 0.9;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table > thead > tr > th {
  font-size: var(--rocad-font-size-sm);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table input[name="qty_used[]"] {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table input[name="balance[]"] {
  font-weight: var(--rocad-font-weight-semibold);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table .btn-danger {
  min-width: 42px;
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions #addRowBtn,
#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions #submitAllBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-2, 0.5rem);
  min-height: 44px;
  min-width: 140px;
  font-size: var(--rocad-font-size-base);
  padding: 8px 20px;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions #submitAllBtn.pull-right {
  float: none;
  margin-left: auto;
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses #pageloader {
  margin-top: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-expenses #pageloader img {
  width: 64px;
  height: auto;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions #addRowBtn,
  #rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-actions #submitAllBtn {
    width: 100%;
    margin-left: 0;
  }

  #rocad-app.rocad-shell .rocad-table-page--stock-expenses .rocad-stock-expenses-table {
    min-width: 860px;
  }
}

/* Wave 2.2 — Operations progress reports (paving, grading, borrow, etc.) */
#rocad-app.rocad-shell .rocad-table-page--ops-report .export-area {
  background: var(--rocad-color-surface-raised, #fff);
  padding: var(--rocad-space-2, 0.5rem) 0;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .export-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  justify-content: center;
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .export-totals .btn,
#rocad-app.rocad-shell .rocad-table-page--ops-report .export-totals button {
  margin: 0;
  white-space: normal;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  align-items: center;
  justify-content: center;
  padding: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel select,
#rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel input[type="date"] {
  min-height: 2.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--rocad-color-border, #cbd5e1);
}

#rocad-app.rocad-shell #filterModal.rocad-ops-filter-modal {
  display: none;
  position: fixed;
  z-index: 1050;
  inset: 0;
  padding: var(--rocad-space-6, 1.5rem) var(--rocad-space-3, 0.75rem);
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.45);
}

#rocad-app.rocad-shell #filterModal.rocad-ops-filter-modal .modal-content {
  background: #fff;
  margin: 5vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  width: min(420px, 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#rocad-app.rocad-shell #filterModal.rocad-ops-filter-modal .close {
  color: #888;
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .label-success,
#rocad-app.rocad-shell .rocad-table-page--ops-report .label-warning,
#rocad-app.rocad-shell .rocad-table-page--ops-report .label-danger {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .label-success {
  background: #28a745;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .label-warning {
  background: #ffc107;
  color: #000;
}

#rocad-app.rocad-shell .rocad-table-page--ops-report .label-danger {
  background: #dc3545;
  color: #fff;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--ops-report .export-totals .btn,
  #rocad-app.rocad-shell .rocad-table-page--ops-report .export-totals button {
    width: 100%;
    max-width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel select,
  #rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel input[type="date"],
  #rocad-app.rocad-shell .rocad-table-page--ops-report .rocad-ops-filter-panel button {
    width: 100%;
  }
}

/* Daily Plant Reports — grouped batch view */
#rocad-app.rocad-shell .rocad-table-page--dpr-batches .rocad-dpr-batch-table-wrap,
.rocad-table-page--dpr-batches .rocad-dpr-batch-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-batches .rocad-dpr-batch-table,
.rocad-table-page--dpr-batches .rocad-dpr-batch-table {
  min-width: 880px;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-batches .rocad-dpr-batch-view-link,
.rocad-table-page--dpr-batches .rocad-dpr-batch-view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-batches .rocad-dpr-export-source,
.rocad-table-page--dpr-batches .rocad-dpr-export-source {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--dpr-batches .rocad-dpr-batch-table,
  .rocad-table-page--dpr-batches .rocad-dpr-batch-table {
    min-width: 960px;
  }

  #rocad-app.rocad-shell .rocad-table-page--dpr-batches .rocad-dpr-batch-view-link,
  .rocad-table-page--dpr-batches .rocad-dpr-batch-view-link {
    padding: 0.5rem 0.75rem;
  }
}

/* Daily Plant Reports — date detail page */
#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-card,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-card {
  margin-bottom: 1rem;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-card-inner,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-card-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1rem 1.25rem;
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 8px;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-item,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-label,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-value,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__batch-value {
  font-size: 1rem;
  font-weight: 600;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__stats,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__stats {
  margin-bottom: 0.75rem;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__stats--secondary,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__stats--secondary {
  margin-bottom: 1.25rem;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters .form-control,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters .form-control {
  margin-bottom: 0.75rem;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filter-actions,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__table-wrap,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__table,
.rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__table {
  min-width: 1200px;
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-export-source,
.rocad-table-page--dpr-date-detail .rocad-dpr-export-source {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters .col-md-4,
  .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters .col-md-4,
  #rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters .col-sm-6,
  .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filters .col-sm-6 {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filter-actions .rocad-table-page__btn,
  .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__filter-actions .rocad-table-page__btn {
    width: 100%;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__table,
  .rocad-table-page--dpr-date-detail .rocad-dpr-date-detail__table {
    min-width: 1200px;
  }
}

/* Loading Note list — filter grid + status badges */
#rocad-app.rocad-shell .rocad-badge--info {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #1d4ed8 !important;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rocad-space-4, 1rem);
  align-items: end;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  margin-top: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters .form-group {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-ln-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table {
  min-width: 920px;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > tbody > tr > td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > thead > tr > th {
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  background: var(--rocad-color-surface-muted, #f8fafc);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-staff-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: var(--rocad-space-1, 0.25rem);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-staff-filter {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-page__stats > [class*="col-"] {
    margin-bottom: var(--rocad-space-3, 0.75rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-stat-card {
    padding: var(--rocad-space-4, 1rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-stat-card__title {
    font-size: var(--rocad-font-size-sm, 0.875rem);
    line-height: 1.35;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-staff-stat-value {
    font-size: clamp(1.375rem, 5vw, 1.75rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-staff-filters {
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: var(--rocad-space-4, 1rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-staff-filter {
    width: auto;
    min-height: 44px;
    padding: var(--rocad-space-2, 0.5rem) var(--rocad-space-4, 1rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters .form-control {
    min-height: 44px;
    font-size: var(--rocad-font-size-base, 1rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters .rocad-label {
    font-size: var(--rocad-font-size-sm, 0.875rem);
    margin-bottom: var(--rocad-space-1, 0.25rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__actions {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__actions .rocad-table-page__btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-panel__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rocad-space-3, 0.75rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-page__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-table-page__toolbar .rocad-table-page__btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > thead > tr > th,
  #rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > tbody > tr > td {
    padding: var(--rocad-space-3, 0.75rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > thead > tr > th:first-child,
  #rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rocad-color-surface-raised, #fff);
    box-shadow: 2px 0 6px rgba(15, 23, 42, 0.08);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note #ln_table > thead > tr > th:first-child {
    z-index: 3;
    background: var(--rocad-color-surface-muted, #f8fafc);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-ln-actions {
    flex-wrap: nowrap;
    gap: 0.375rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-ln-actions .btn-xs {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.625rem;
    font-size: var(--rocad-font-size-sm, 0.875rem);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .dataTables_length label,
  #rocad-app.rocad-shell .rocad-table-page--loading-note .dataTables_filter label {
    font-size: var(--rocad-font-size-sm, 0.875rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .dataTables_length select,
  #rocad-app.rocad-shell .rocad-table-page--loading-note .dataTables_filter input {
    min-height: 44px;
    font-size: var(--rocad-font-size-base, 1rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .dataTables_paginate .paginate_button {
    min-height: 44px;
    min-width: 44px;
    line-height: 44px;
    padding: 0 0.75rem;
    margin: 0.125rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-insight-empty .rocad-table-page__btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  #rocad-app.rocad-shell .rocad-table-page--loading-note .rocad-loading-note-filters__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Loading Note view — workflow detail layout */
#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-view-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  align-items: center;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-summary-item {
  padding: var(--rocad-space-3, 0.75rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: var(--rocad-radius-md, 8px);
  background: var(--rocad-color-surface-raised, #f8fafc);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-summary-item__label {
  display: block;
  font-size: var(--rocad-font-size-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
  margin-bottom: 4px;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-summary-item__value {
  font-weight: var(--rocad-font-weight-semibold, 600);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-info-table th {
  width: 180px;
  background: var(--rocad-color-surface-raised, #f8fafc);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-info-table td,
#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-info-table th {
  padding: 8px 12px !important;
  vertical-align: top;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-card {
  width: 140px;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: var(--rocad-radius-md, 8px);
  padding: 8px;
  background: #fff;
  text-align: center;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-card:hover {
  border-color: var(--rocad-color-primary, #305A72);
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-card img {
  max-width: 100%;
  max-height: 110px;
  display: block;
  margin: 0 auto 6px;
  border-radius: 4px;
  object-fit: cover;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-card__name {
  display: block;
  font-size: 11px;
  word-break: break-all;
  line-height: 1.3;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-card__date {
  display: block;
  font-size: 10px;
  color: var(--rocad-color-text-muted, #64748b);
  margin-top: 4px;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-timeline-block {
  padding: 10px 14px;
  border-left: 3px solid #3c8dbc;
  margin-bottom: 10px;
  background: var(--rocad-color-surface-raised, #f8fafc);
  border-radius: 0 var(--rocad-radius-md, 8px) var(--rocad-radius-md, 8px) 0;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-timeline-block.created { border-color: #777; }
#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-timeline-block.submitted { border-color: #f39c12; }
#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-timeline-block.received { border-color: #00c0ef; }
#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-timeline-block.completed { border-color: #00a65a; }
#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-timeline-block.disputed { border-color: #dd4b39; }

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-delete-form {
  display: inline;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view .row-discrepancy td {
  background: #fcf8e3 !important;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view #completeModal .modal-content {
  border-radius: var(--rocad-radius-lg, 12px);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-table-page--loading-note-view #completeModal .modal-header {
  background: linear-gradient(180deg, rgb(248 250 252 / 0.95) 0%, #fff 100%);
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  #rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-view-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  #rocad-app.rocad-shell .rocad-table-page--loading-note-view .ln-attach-card {
    width: calc(50% - 0.5rem);
  }
}

/* Loading Note receive — workflow form layout */
#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--rocad-space-4, 1rem);
  align-items: center;
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-site {
  padding: var(--rocad-space-4, 1rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: var(--rocad-radius-md, 8px);
  background: var(--rocad-color-surface-raised, #f8fafc);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-site__label {
  font-size: var(--rocad-font-size-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
  margin-bottom: 4px;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-site__value {
  font-weight: var(--rocad-font-weight-semibold, 600);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-arrow {
  text-align: center;
  font-size: 1.5rem;
  color: var(--rocad-color-primary, #305A72);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-info-table th {
  width: 160px;
  background: var(--rocad-color-surface-raised, #f8fafc);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-info-table td,
#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-info-table th {
  padding: 8px 12px !important;
  vertical-align: top;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-dispute-notice {
  margin: 0 0 var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  border: 1px solid #fcd34d;
  border-radius: var(--rocad-radius-md, 8px);
  background: #fffbeb;
  color: #92400e;
  font-size: var(--rocad-font-size-sm, 13px);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .qty-mismatch td {
  background: #fef9c3 !important;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-receive-qty-sent {
  font-weight: var(--rocad-font-weight-semibold, 600);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-receive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  justify-content: flex-end;
  width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-uploader {
  padding: 10px;
  border: 2px dashed #d2d6de;
  border-radius: var(--rocad-radius-md, 8px);
  background: #fafafa;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-uploader.dragover {
  border-color: #3c8dbc;
  background: #eef7fc;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item {
  position: relative;
  width: 130px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item .preview-img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 3px;
  background: #f9f9f9;
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item .preview-file {
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 3px;
  font-size: 40px;
  color: #777;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item .file-name {
  display: block;
  font-size: 11px;
  margin-top: 6px;
  word-break: break-all;
  text-align: center;
  line-height: 1.2;
  max-height: 30px;
  overflow: hidden;
  text-transform: none;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item .file-size {
  display: block;
  font-size: 10px;
  color: #999;
  text-align: center;
  margin-top: 2px;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item .remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dd4b39;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-weight: bold;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item .remove-btn:hover {
  background: #c0392b;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-card {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-movement-arrow {
    transform: rotate(90deg);
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-uploader label.btn {
    display: block;
    margin-bottom: 8px;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-uploader #attachment_clear {
    display: block;
    width: 100%;
    margin-top: 6px;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive #attachment_count {
    display: block;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item {
    width: calc(50% - 5px);
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-receive-actions {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .ln-receive-actions .rocad-table-page__btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  #rocad-app.rocad-shell .rocad-form-page--loading-note-receive .attachment-preview-item {
    width: 100%;
  }
}

/* Loading Note create/edit form */
#rocad-app.rocad-shell .rocad-form-page--loading-note .ln-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .ln-route-error {
  color: #c0392b;
  font-size: var(--rocad-font-size-sm, 13px);
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note #dynamic_field.item-row td,
#rocad-app.rocad-shell .rocad-form-page--loading-note #dynamic_field .item-row td {
  vertical-align: top;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note #dynamic_field thead th {
  background: var(--rocad-color-surface-raised, #f8fafc);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note #dynamic_field .btn_remove {
  min-width: 2rem;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .ln-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  justify-content: flex-end;
  width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .ln-draft-btn {
  background: #f39c12;
  border-color: #e08e0b;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .ln-draft-btn:hover,
#rocad-app.rocad-shell .rocad-form-page--loading-note .ln-draft-btn:focus {
  background: #e08e0b;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attach-thumb {
  display: inline-block;
  margin: 4px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attach-thumb img {
  max-width: 80px;
  max-height: 80px;
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-uploader {
  padding: 10px;
  border: 2px dashed #d2d6de;
  border-radius: var(--rocad-radius-md, 8px);
  background: #fafafa;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-uploader.dragover {
  border-color: #3c8dbc;
  background: #eef7fc;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item {
  position: relative;
  width: 130px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item .preview-img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 3px;
  background: #f9f9f9;
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item .preview-file {
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 3px;
  font-size: 40px;
  color: #777;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item .file-name {
  display: block;
  font-size: 11px;
  margin-top: 6px;
  word-break: break-all;
  text-align: center;
  line-height: 1.2;
  max-height: 30px;
  overflow: hidden;
  text-transform: none;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item .file-size {
  display: block;
  font-size: 10px;
  color: #999;
  text-align: center;
  margin-top: 2px;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item .remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dd4b39;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-weight: bold;
}

#rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item .remove-btn:hover {
  background: #c0392b;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-form-page--loading-note .ln-route-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--loading-note .ln-form-actions {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note .ln-form-actions .rocad-table-page__btn {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-uploader label.btn {
    display: block;
    margin-bottom: 8px;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-uploader #attachment_clear {
    display: block;
    width: 100%;
    margin-top: 6px;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note #attachment_count {
    display: block;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  #rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item {
    width: calc(50% - 5px);
  }
}

@media (max-width: 480px) {
  #rocad-app.rocad-shell .rocad-form-page--loading-note .attachment-preview-item {
    width: 100%;
  }
}

/* Loading Note Form — mobile UX (.rocad-loading-note-form) */
#rocad-app.rocad-shell .rocad-loading-note-form .rocad-table-panel,
.rocad-loading-note-form .rocad-table-panel {
  margin-bottom: 1rem;
}

#rocad-app.rocad-shell .rocad-loading-note-form .rocad-label,
.rocad-loading-note-form .rocad-label {
  font-size: var(--rocad-font-size-base, 14px);
  font-weight: var(--rocad-font-weight-semibold, 600);
  margin-bottom: 0.35rem;
}

#rocad-app.rocad-shell .rocad-loading-note-form .rocad-field-hint,
.rocad-loading-note-form .rocad-field-hint {
  font-size: var(--rocad-font-size-sm, 13px);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-loading-note-form .ln-items-table-wrap,
.rocad-loading-note-form .ln-items-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field,
.rocad-loading-note-form #dynamic_field {
  min-width: 1100px;
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field thead th,
.rocad-loading-note-form #dynamic_field thead th {
  font-size: var(--rocad-font-size-sm, 13px);
  font-weight: var(--rocad-font-weight-semibold, 600);
  padding: 0.65rem 0.5rem;
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field tbody td,
.rocad-loading-note-form #dynamic_field tbody td {
  padding: 0.5rem;
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field .form-control,
.rocad-loading-note-form #dynamic_field .form-control,
#rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field select.form-control,
.rocad-loading-note-form #dynamic_field select.form-control {
  min-height: 44px;
  width: 100%;
  min-width: 5.5rem;
}

#rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field .btn_remove,
.rocad-loading-note-form #dynamic_field .btn_remove {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  font-size: var(--rocad-font-size-base, 14px);
  line-height: 1;
}

#rocad-app.rocad-shell .rocad-loading-note-form .ln-form-actions .rocad-table-page__btn,
#rocad-app.rocad-shell .rocad-loading-note-form #add,
.rocad-loading-note-form .ln-form-actions .rocad-table-page__btn,
.rocad-loading-note-form #add {
  min-height: 44px;
}

#rocad-app.rocad-shell .rocad-loading-note-form .attachment-uploader,
.rocad-loading-note-form .attachment-uploader {
  padding: 1rem;
}

#rocad-app.rocad-shell .rocad-loading-note-form .attachment-uploader label.btn,
#rocad-app.rocad-shell .rocad-loading-note-form .attachment-uploader #attachment_clear,
.rocad-loading-note-form .attachment-uploader label.btn,
.rocad-loading-note-form .attachment-uploader #attachment_clear {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#rocad-app.rocad-shell .rocad-loading-note-form .attachment-preview-item .file-name,
.rocad-loading-note-form .attachment-preview-item .file-name {
  font-size: var(--rocad-font-size-sm, 13px);
  line-height: 1.35;
}

#rocad-app.rocad-shell .rocad-loading-note-form .attachment-preview-item .file-size,
.rocad-loading-note-form .attachment-preview-item .file-size {
  font-size: 12px;
}

#rocad-app.rocad-shell .rocad-loading-note-form .attachment-preview-item .remove-btn,
.rocad-loading-note-form .attachment-preview-item .remove-btn {
  min-width: 32px;
  min-height: 32px;
}

#rocad-app.rocad-shell .rocad-loading-note-form .select2-container,
.rocad-loading-note-form .select2-container {
  width: 100% !important;
}

#rocad-app.rocad-shell .rocad-loading-note-form .select2-container .select2-selection--single,
.rocad-loading-note-form .select2-container .select2-selection--single {
  min-height: 44px;
  display: flex;
  align-items: center;
}

#rocad-app.rocad-shell .rocad-loading-note-form .select2-container .select2-selection__rendered,
.rocad-loading-note-form .select2-container .select2-selection__rendered {
  line-height: 44px;
  font-size: 1rem;
  padding-left: 0.75rem;
}

#rocad-app.rocad-shell .rocad-loading-note-form .select2-container .select2-selection__arrow,
.rocad-loading-note-form .select2-container .select2-selection__arrow {
  height: 44px;
}

#rocad-app.rocad-shell .rocad-loading-note-form .select2-dropdown .select2-results__option,
.rocad-loading-note-form .select2-dropdown .select2-results__option {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

#rocad-app.rocad-shell .rocad-loading-note-form .select2-search--dropdown .select2-search__field,
.rocad-loading-note-form .select2-search--dropdown .select2-search__field {
  min-height: 44px;
  font-size: 16px;
  padding: 0.5rem 0.75rem;
}

@media (max-width: 768px) {
  #rocad-app.rocad-shell .rocad-loading-note-form .rocad-form-page__intro,
  .rocad-loading-note-form .rocad-form-page__intro {
    margin-bottom: 1rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .rocad-form-page__title,
  .rocad-loading-note-form .rocad-form-page__title {
    font-size: 1.35rem;
    line-height: 1.3;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .rocad-form-page__lead,
  .rocad-loading-note-form .rocad-form-page__lead {
    font-size: var(--rocad-font-size-base, 14px);
    line-height: 1.5;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .ln-route-grid,
  .rocad-loading-note-form .ln-route-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .rocad-field,
  .rocad-loading-note-form .rocad-field {
    margin-bottom: 0.75rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .form-control,
  #rocad-app.rocad-shell .rocad-loading-note-form select.form-control,
  #rocad-app.rocad-shell .rocad-loading-note-form textarea.form-control,
  .rocad-loading-note-form .form-control,
  .rocad-loading-note-form select.form-control,
  .rocad-loading-note-form textarea.form-control {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form textarea.form-control,
  .rocad-loading-note-form textarea.form-control {
    min-height: 88px;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .rocad-table-panel__header,
  .rocad-loading-note-form .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .rocad-table-panel__header .rocad-table-page__btn,
  .rocad-loading-note-form .rocad-table-panel__header .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field > thead > tr > th:first-child,
  #rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field > tbody > tr > td:first-child,
  .rocad-loading-note-form #dynamic_field > thead > tr > th:first-child,
  .rocad-loading-note-form #dynamic_field > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--rocad-color-surface, #fff);
    box-shadow: 2px 0 4px rgb(15 23 42 / 0.08);
  }

  #rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field > thead > tr > th:first-child,
  .rocad-loading-note-form #dynamic_field > thead > tr > th:first-child {
    z-index: 3;
    background: var(--rocad-color-surface-raised, #f8fafc);
  }

  #rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field tfoot td,
  .rocad-loading-note-form #dynamic_field tfoot td {
    padding: 0.75rem 0.5rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form #add,
  .rocad-loading-note-form #add {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .ln-form-actions,
  .rocad-loading-note-form .ln-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .ln-form-actions .rocad-table-page__btn,
  .rocad-loading-note-form .ln-form-actions .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attachment-uploader,
  .rocad-loading-note-form .attachment-uploader {
    padding: 1.25rem 1rem;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attachment-uploader label.btn,
  .rocad-loading-note-form .attachment-uploader label.btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attachment-uploader #attachment_clear,
  .rocad-loading-note-form .attachment-uploader #attachment_clear {
    width: 100%;
    margin-top: 0.35rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form #attachment_count,
  .rocad-loading-note-form #attachment_count {
    display: block;
    margin-left: 0 !important;
    margin-top: 0.5rem;
    font-size: var(--rocad-font-size-base, 14px);
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attachment-preview-item,
  .rocad-loading-note-form .attachment-preview-item {
    width: calc(50% - 5px);
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attachment-preview-item .file-name,
  .rocad-loading-note-form .attachment-preview-item .file-name {
    max-height: none;
    overflow: visible;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attach-thumb,
  .rocad-loading-note-form .attach-thumb {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0.5rem 0;
    padding: 0.75rem;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form .attach-thumb img,
  .rocad-loading-note-form .attach-thumb img {
    max-width: 100%;
    max-height: 160px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  #rocad-app.rocad-shell .rocad-loading-note-form .attachment-preview-item,
  .rocad-loading-note-form .attachment-preview-item {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-loading-note-form #dynamic_field,
  .rocad-loading-note-form #dynamic_field {
    min-width: 980px;
  }
}

/* Stock Card — site picker + site items hub */
#rocad-app.rocad-shell .rocad-table-page--stock-card .rocad-table--uppercase {
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-table-page--stock-card .rocad-table-row--link {
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--stock-card .rocad-table-row--link:hover td {
  background-color: rgba(212, 237, 218, 0.65) !important;
}

#rocad-app.rocad-shell .rocad-stock-site-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
  background: var(--rocad-surface-elevated, #fff);
  border: 1px solid var(--rocad-border, #e2e8f0);
  border-radius: var(--rocad-radius-md, 8px);
}

#rocad-app.rocad-shell .rocad-stock-site-summary__label {
  display: block;
  font-size: var(--rocad-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-text-muted, #64748b);
  margin-bottom: 0.25rem;
}

#rocad-app.rocad-shell .rocad-stock-site-summary__value {
  display: block;
  font-size: var(--rocad-font-size-base);
  font-weight: 600;
  color: var(--rocad-text, #0f172a);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-stock-toolbar {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-stock-qty {
  display: inline-block;
  min-width: 4.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--rocad-radius-sm, 4px);
  font-size: var(--rocad-font-size-base);
  font-weight: 600;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-stock-qty--in {
  background: rgba(243, 156, 18, 0.15);
  color: #b7791f;
}

#rocad-app.rocad-shell .rocad-stock-qty--balance {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

#rocad-app.rocad-shell .rocad-stock-qty--out {
  background: rgba(231, 76, 60, 0.12);
  color: #c0392b;
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table-page__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table-stat-card {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table-stat-card__title {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-staff-stat-value {
  font-size: clamp(1.625rem, 3.5vw, 2rem);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-stock-detail-stat-helper {
  margin: var(--rocad-space-2) 0 0;
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  opacity: 0.9;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table-panel__subtitle {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-badge {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--stock-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--stock-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--stock-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--stock-report .rocad-stock-toolbar .btn.btn-primary.btn-sm {
  min-height: 42px;
  padding: 8px 16px;
  font-size: var(--rocad-font-size-base);
}

/* Stock report filter modal — stack above Bootstrap backdrop (body-appended) */
body.stock-report-modal-open > .stock-report-filter-modal.modal {
  z-index: 1060 !important;
}

body.stock-report-modal-open > .modal-backdrop {
  z-index: 1050 !important;
}

#rocad-app.rocad-shell .stock-report-filter-modal .modal-title {
  font-size: var(--rocad-font-size-lg);
}

#rocad-app.rocad-shell .stock-report-filter-modal .form-group label {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .stock-report-filter-modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .stock-report-filter-modal .btn-primary {
  min-height: 42px;
  padding: 8px 20px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-stock-item-action {
  white-space: nowrap;
}

/* Supply report — layout, readability, filter modal stacking */
#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table-page__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table-stat-card {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table-stat-card__title {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-staff-stat-value {
  font-size: clamp(1.625rem, 3.5vw, 2rem);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table-panel__subtitle {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--supply-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--supply-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--supply-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--supply-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-supply-report__export-area {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-supply-report__hero-kpi {
  position: relative;
  margin-bottom: var(--rocad-space-5, 1.25rem);
  padding: var(--rocad-space-6, 1.5rem) var(--rocad-space-5, 1.25rem);
  color: var(--rocad-color-text-inverse, #fff);
  text-align: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  box-shadow: var(--rocad-shadow-md);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-supply-report__hero-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.14) 0%, transparent 55%);
  pointer-events: none;
}

#rocad-app.rocad-shell .rocad-supply-report__hero-kpi-label,
#rocad-app.rocad-shell .rocad-supply-report__hero-kpi-value,
#rocad-app.rocad-shell .rocad-supply-report__hero-kpi-meta {
  position: relative;
  z-index: 1;
}

#rocad-app.rocad-shell .rocad-supply-report__hero-kpi-label {
  margin: 0 0 var(--rocad-space-2, 0.5rem);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-supply-report__hero-kpi-value {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#rocad-app.rocad-shell .rocad-supply-report__hero-kpi-meta {
  margin: var(--rocad-space-3, 0.75rem) 0 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: 600;
  opacity: 0.92;
}

/* PDF / print header — inside export container only; hidden on screen */
#rocad-app.rocad-shell .rocad-supply-report__export-area:not(.rocad-supply-report--pdf-capture) .rocad-supply-report__pdf-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#rocad-app.rocad-shell .rocad-supply-report__pdf-header {
  margin: 0 0 1.25rem;
  padding: 0;
  text-align: center;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-supply-report__pdf-title {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
}

#rocad-app.rocad-shell .rocad-supply-report__pdf-subtitle {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #333;
}

#rocad-app.rocad-shell .rocad-supply-report__pdf-kpi-banner {
  padding: 1.25rem 1.5rem;
  text-align: center;
  border-radius: 0.75rem;
  background: #2575fc;
  border: 3px solid #1a5fd4;
}

#rocad-app.rocad-shell .rocad-supply-report__pdf-total-label {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-supply-report__pdf-total-value {
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffe566;
}

#rocad-app.rocad-shell .rocad-supply-report--pdf-capture .rocad-supply-report__pdf-header {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

#rocad-app.rocad-shell .rocad-supply-report--pdf-capture .rocad-supply-report__pdf-total-label {
  font-size: 1.625rem;
}

#rocad-app.rocad-shell .rocad-supply-report--pdf-capture .rocad-supply-report__pdf-total-value {
  font-size: 3.5rem;
}

@media print {
  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-supply-report__hero-kpi {
    display: none !important;
  }

  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-supply-report__export-area .rocad-supply-report__pdf-header {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-supply-report__pdf-total-label {
    font-size: 1.625rem;
    color: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-supply-report__pdf-kpi-banner {
    background: #2575fc;
    border: 3px solid #1a5fd4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-supply-report__pdf-total-value {
    font-size: 3.5rem;
    color: #ffe566;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

body > .supply-report-filter-modal.modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  padding: var(--rocad-space-6, 1.5rem) var(--rocad-space-3, 0.75rem);
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.45);
}

body.supply-report-modal-open > .supply-report-filter-modal.modal {
  display: block;
}

body > .supply-report-filter-modal.modal .modal-content {
  position: relative;
  z-index: 1;
  background-color: #fff;
  margin: 5vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  width: min(600px, 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body > .supply-report-filter-modal.modal .close {
  color: #888;
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

body > .supply-report-filter-modal.modal .close:hover,
body > .supply-report-filter-modal.modal .close:focus {
  color: #000;
  text-decoration: none;
}

body > .supply-report-filter-modal.modal th {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

body > .supply-report-filter-modal.modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

body > .supply-report-filter-modal.modal .btn-primary {
  min-height: 42px;
  padding: 8px 20px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-stock-toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--supply-report .rocad-stock-toolbar .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--stock-card .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-stock-toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-stock-toolbar .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

/* Phase F1-A — Expense category list (Finance master data) */
#rocad-app.rocad-shell .rocad-table-page--category-list .rocad-category-list__panel {
  margin-top: var(--rocad-space-5, 1.25rem);
}

#rocad-app.rocad-shell .rocad-table-page--category-list .rocad-category-list__row > td {
  font-size: var(--rocad-font-size-base);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--category-list .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--category-list .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--category-list .rocad-category-list__row {
  text-transform: uppercase;
  color: #8b0000;
}

#rocad-app.rocad-shell .rocad-table-page--category-list .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--category-list .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--category-list .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--category-list .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--category-list .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--category-list .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--category-list .rocad-table-page__toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--category-list .rocad-table-page__toolbar .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

/* Phase F1-B — Category report (Finance drill-down) */
#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__layout > [class*="col-"] {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__filters-body label {
  display: block;
  margin: var(--rocad-space-3, 0.75rem) 0 var(--rocad-space-2, 0.5rem);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__filters-body label:first-child {
  margin-top: 0;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__filters-body .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__search-btn {
  width: 100%;
  margin-top: var(--rocad-space-4, 1rem);
  justify-content: center;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__drill-list {
  margin: 0;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__drill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  font-size: var(--rocad-font-size-base);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__drill-item:hover {
  background-color: var(--rocad-color-surface-raised, #f1f5f9);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__drill-name {
  flex: 1 1 auto;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__drill-badge {
  flex-shrink: 0;
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__empty,
#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__summary-hint {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__summary-stats {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-1, 0.25rem);
  padding-bottom: var(--rocad-space-3, 0.75rem);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__summary-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__summary-label {
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__summary-value {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--category-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--category-report .rocad-category-report__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F1-C — Loan repayment report (Finance/HR read-only) */
#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-loan-repayment-report__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-loan-repayment-report__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-loan-repayment-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-loan-repayment-report__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: #006400;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .status-paid {
  border-left: 6px solid #28a745;
  background: #f9fffa;
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .status-inprogress {
  border-left: 6px solid #dc3545;
  background: #fff8f8;
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

body > .rocad-loan-repayment-report__modal.modal,
#myModal.rocad-loan-repayment-report__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
}

body > .rocad-loan-repayment-report__modal.modal .modal-content,
#myModal.rocad-loan-repayment-report__modal .modal-content {
  background: #fff;
  margin: 10vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  width: min(520px, 92%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body > .rocad-loan-repayment-report__modal.modal .close,
#myModal.rocad-loan-repayment-report__modal .close {
  float: right;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

body > .rocad-loan-repayment-report__modal.modal .close:hover,
body > .rocad-loan-repayment-report__modal.modal .close:focus,
#myModal.rocad-loan-repayment-report__modal .close:hover,
#myModal.rocad-loan-repayment-report__modal .close:focus {
  color: #000;
}

body > .rocad-loan-repayment-report__modal.modal th,
#myModal.rocad-loan-repayment-report__modal th {
  font-size: var(--rocad-font-size-base);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

body > .rocad-loan-repayment-report__modal.modal .form-control,
#myModal.rocad-loan-repayment-report__modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

body > .rocad-loan-repayment-report__modal.modal .btn-success,
#myModal.rocad-loan-repayment-report__modal .btn-success {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-loan-repayment-report__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--loan-repayment-report .rocad-loan-repayment-report__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F1-D — General expense report (Finance read-only) */
#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: #006400;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__row > td {
  font-size: var(--rocad-font-size-base);
  line-height: 1.45;
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--general-expense-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--general-expense-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--general-expense-report .dataTables_paginate .paginate_button,
#rocad-app.rocad-shell .rocad-table-page--general-expense-report .dt-buttons .btn {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-general-expense-report__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
}

#myModal.rocad-general-expense-report__modal .modal-content {
  background: #fff;
  margin: 10vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  width: min(560px, 92%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#myModal.rocad-general-expense-report__modal .close {
  float: right;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

#myModal.rocad-general-expense-report__modal .close:hover,
#myModal.rocad-general-expense-report__modal .close:focus {
  color: #000;
  text-decoration: none;
}

#myModal.rocad-general-expense-report__modal th {
  font-size: var(--rocad-font-size-base);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

#myModal.rocad-general-expense-report__modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-general-expense-report__modal button[type="submit"] {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--general-expense-report .rocad-general-expense-report__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F2-A — Advance voucher report (Finance) */
#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__table,
#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__row {
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__row > td {
  font-size: var(--rocad-font-size-base);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__row:hover {
  background: #d4edda;
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__link-cell {
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-ad-voucher-report__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
}

#myModal.rocad-ad-voucher-report__modal .modal-content {
  background: #fff;
  margin: 10vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  width: min(520px, 92%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#myModal.rocad-ad-voucher-report__modal .close {
  float: right;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

#myModal.rocad-ad-voucher-report__modal .close:hover,
#myModal.rocad-ad-voucher-report__modal .close:focus {
  color: #000;
  text-decoration: none;
}

#myModal.rocad-ad-voucher-report__modal th {
  font-size: var(--rocad-font-size-base);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

#myModal.rocad-ad-voucher-report__modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-ad-voucher-report__modal button[type="submit"] {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--ad-voucher-report .rocad-ad-voucher-report__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F2-D — Loan payment (Finance write-path) */
#rocad-app.rocad-shell .rocad-form-page--loan .rocad-form-page__intro,
#rocad-app.rocad-shell .rocad-form-page--loan .rocad-form-page__col {
  max-width: none;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-form-page__col.rocad-loan-payment__sidebar {
  max-width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-form-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  align-items: center;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-form-page__count {
  display: inline-flex;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__summary-bar {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__summary-bar-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-outstanding {
  padding: var(--rocad-space-4, 1rem);
  background: linear-gradient(135deg, rgb(48 90 114 / 0.08) 0%, rgb(241 245 249 / 0.9) 100%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-outstanding .form-control[readonly] {
  background: #fff;
  font-size: var(--rocad-font-size-lg, 1.125rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #0f172a);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-card {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-card--summary {
  background: linear-gradient(135deg, rgb(48 90 114 / 0.06) 0%, rgb(248 250 252 / 1) 100%);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-text {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-sm);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: var(--rocad-font-size-sm);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-list li + li {
  margin-top: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-label {
  margin: var(--rocad-space-3, 0.75rem) 0 var(--rocad-space-1, 0.25rem);
  font-size: var(--rocad-font-size-xs);
  font-weight: var(--rocad-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-label:first-of-type {
  margin-top: 0;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-value {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
  line-height: 1.4;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__context-value--balance {
  font-size: var(--rocad-font-size-lg, 1.125rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-history-panel {
  margin-top: var(--rocad-space-5, 1.25rem);
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-history-empty {
  margin: 0;
  padding: var(--rocad-space-5, 1.25rem);
  text-align: center;
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted, #64748b);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px dashed var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--loan .rocad-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--loan #repaymentHistory {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-form-page--loan #repaymentHistory thead th {
  background: var(--rocad-color-surface-muted, #f8fafc);
  color: var(--rocad-color-text, #0f172a);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-form-page--loan #repaymentHistory tbody td {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-form-page--loan #loanRepaymentLoader.rocad-form-loader {
  margin: var(--rocad-space-3, 0.75rem) 0;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-form-page--loan .rocad-loan-payment__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F2-E — Loan history / staff request report (Finance read-only) */
#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__notice {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: rgb(34 197 94 / 0.08);
  border: 1px solid rgb(34 197 94 / 0.25);
  border-radius: 0.5rem;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  align-items: center;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__notify-form {
  display: inline;
  margin: 0;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__bulk-toolbar {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__approve-all {
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__approve-all:hover {
  transform: scale(1.05);
  transition: 0.2s ease;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: #006400;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .approved-row {
  background-color: #f0fff4 !important;
  border-left: 6px solid #38a169;
  box-shadow: inset 0 0 6px rgba(56, 161, 105, 0.3);
  font-weight: 600;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .dropdown-content a {
  color: #000;
  padding: 10px;
  text-decoration: none;
  display: block;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .dropdown-content a:hover {
  background-color: #f1f1f1;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--loan-history .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--loan-history .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--loan-history .dataTables_paginate .paginate_button,
#rocad-app.rocad-shell .rocad-table-page--loan-history .dt-buttons .btn {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-loan-history__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
}

#myModal.rocad-loan-history__modal .modal-content {
  background: #fff;
  margin: 10vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  width: min(560px, 92%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#myModal.rocad-loan-history__modal .close {
  float: right;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

#myModal.rocad-loan-history__modal .close:hover,
#myModal.rocad-loan-history__modal .close:focus {
  color: #000;
  text-decoration: none;
}

#myModal.rocad-loan-history__modal th {
  font-size: var(--rocad-font-size-base);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

#myModal.rocad-loan-history__modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-loan-history__modal button[type="submit"] {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

/* Loan history — approve modal stacking (modal moved to body on show) */
body > #approveModal.rocad-loan-history__approve-modal.modal {
  z-index: 10050;
}

body.loan-history-approve-modal-open > .modal-backdrop {
  z-index: 10040;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--loan-history .rocad-loan-history__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F2-F — Beneficiary management (Finance master data) */
#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-table-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  align-items: center;
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__summary-stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__section-title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__bank-section {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__bank-stats .rocad-table-stat-card__list {
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-table > tbody > tr > td,
#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-table > tbody > tr > td:nth-child(3) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-row-actions {
  position: relative;
  display: inline-block;
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--beneficiary .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--beneficiary .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--beneficiary .dataTables_paginate .paginate_button,
#rocad-app.rocad-shell .rocad-table-page--beneficiary .dt-buttons .btn {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .dataTables_filter {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .dataTables_filter input {
  min-height: 38px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--beneficiary .rocad-beneficiary__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Phase F3-A — All Report / Reports Hub (Finance overview) */
#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-2, 0.5rem);
  min-height: 100%;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-medium);
  color: inherit;
  text-decoration: none;
  opacity: 0.92;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__card-link:hover {
  opacity: 1;
  text-decoration: underline;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__section {
  margin-top: var(--rocad-space-5, 1.25rem);
  margin-bottom: var(--rocad-space-5, 1.25rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__section-header {
  background: var(--rocad-color-surface-raised, #f8fafc);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-align: left;
  font-size: var(--rocad-font-size-base);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  border-left: 5px solid var(--rocad-color-brand, #084fa8);
  margin-bottom: var(--rocad-space-4, 1rem);
  border-radius: 0.375rem;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__muted {
  color: var(--rocad-color-text-muted, #64748b);
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__panel {
  padding: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__panel-title {
  font-weight: var(--rocad-font-weight-semibold, 600);
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__collapse-toggle {
  background: var(--rocad-color-brand, #084fa8);
  color: #fff;
  padding: var(--rocad-space-2, 0.5rem) var(--rocad-space-3, 0.75rem);
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-size: var(--rocad-font-size-sm);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__collapse-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(8 79 168 / 0.25);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-card {
  padding: var(--rocad-space-3, 0.75rem);
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-row {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-2, 0.5rem);
  border-bottom: 1px solid #f1f3f5;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-row:last-child {
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-meta {
  width: 32%;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.125rem;
  flex-shrink: 0;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-name {
  font-weight: var(--rocad-font-weight-semibold, 600);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text, #0f172a);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-balance,
#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-percent {
  color: var(--rocad-color-text-muted, #64748b);
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-progress {
  flex: 1;
  min-width: 220px;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-progress .progress {
  height: 12px;
  background: #f0f0f0;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-progress .progress-bar {
  height: 100%;
  line-height: 12px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
  transition: width 0.8s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-stats {
  width: 260px;
  min-width: 200px;
  display: flex;
  gap: var(--rocad-space-2, 0.5rem);
  justify-content: flex-end;
  align-items: center;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stat-badge {
  background: #f5f7fa;
  border: 1px solid #e8edf2;
  padding: var(--rocad-space-2, 0.5rem);
  border-radius: 0.375rem;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text, #0f172a);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stat-badge--balance {
  background: #e9f7ef;
  border-color: #d6f0df;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stat-label {
  display: block;
  font-size: 10px;
  color: #888;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__panel-footer {
  margin-top: var(--rocad-space-3, 0.75rem);
  text-align: right;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__panel-footer .rocad-all-report__muted {
  margin: var(--rocad-space-2, 0.5rem) 0 0;
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__report-card {
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
  padding: var(--rocad-space-4, 1rem);
  margin-bottom: var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #fff);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__report-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(7, 22, 45, 0.08);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__report-title {
  font-weight: var(--rocad-font-weight-semibold, 600);
  font-size: var(--rocad-font-size-base);
  margin-bottom: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__report-desc {
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.45;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-meta {
    width: 35%;
  }

  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-stats {
    width: 200px;
  }

  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__collapse-header {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 575px) {
  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rocad-space-2, 0.5rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-meta,
  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-progress,
  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-stats {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__stock-stats {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #rocad-app.rocad-shell .rocad-table-page--all-report .rocad-all-report__panel-footer {
    text-align: left;
  }
}

/* Phase F3-B — Invoice gallery (Finance read-only) */
#rocad-app.rocad-shell .rocad-invoices-gallery__loading {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 0.92);
}

#rocad-app.rocad-shell .rocad-invoices-gallery__loading-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__search {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__search-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
  align-items: stretch;
  justify-content: center;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__search-group .form-control {
  flex: 1 1 280px;
  max-width: 480px;
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__grid {
  margin-left: -8px;
  margin-right: -8px;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__col {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__card {
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--rocad-color-surface-raised, #fff);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: rocadInvoicesGalleryFadeIn 0.8s ease-in forwards;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

@keyframes rocadInvoicesGalleryFadeIn {
  to { opacity: 1; }
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__preview {
  flex-shrink: 0;
  background: #f7f7f7;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__image-link {
  display: block;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-3, 0.75rem);
  min-height: 240px;
  padding: var(--rocad-space-4, 1rem);
  text-align: center;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__placeholder .fa-file-image-o {
  font-size: 2.25rem;
  opacity: 0.65;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__placeholder-text {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text, #0f172a);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__placeholder-link {
  margin-top: 0;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__card-body {
  flex: 1 1 auto;
  padding: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__meta-list {
  margin: 0;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__meta-row {
  display: grid;
  grid-template-columns: minmax(88px, 34%) 1fr;
  gap: var(--rocad-space-2, 0.5rem);
  padding: var(--rocad-space-2, 0.5rem) 0;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  font-size: var(--rocad-font-size-base);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__meta-row dt {
  margin: 0;
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__meta-row dd {
  margin: 0;
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text, #0f172a);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__card-footer {
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  border-top: 1px solid var(--rocad-color-border, #e2e8f0);
  background: var(--rocad-color-surface-muted, #f8fafc);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__open-btn {
  width: 100%;
  justify-content: center;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__pagination {
  text-align: center;
  margin-top: var(--rocad-space-5, 1.25rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__pagination .pagination > li > a,
#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__pagination .pagination > li > span {
  color: #3c8dbc;
  font-size: var(--rocad-font-size-base);
  min-width: 2.5rem;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__pagination .pagination > .active > a {
  background-color: #3c8dbc;
  border-color: #3c8dbc;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__search-group {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__search-group .form-control,
  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__search-group .rocad-table-page__btn {
    width: 100%;
    max-width: none;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__meta-row {
    grid-template-columns: 1fr;
    gap: var(--rocad-space-1, 0.25rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__image,
  #rocad-app.rocad-shell .rocad-table-page--invoices-gallery .rocad-invoices-gallery__placeholder {
    min-height: 200px;
    height: 200px;
  }
}

/* Phase F3-C — Invoice detail (invoices_more.php) */
#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__toolbar-wrap {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__layout {
  margin-left: -8px;
  margin-right: -8px;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__details-col,
#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview-col {
  padding-left: 8px;
  padding-right: 8px;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__context-panel {
  margin-top: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__detail-list {
  margin: 0;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem) 0;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  font-size: var(--rocad-font-size-base);
  line-height: 1.45;
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__detail-row dt {
  margin: 0;
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__detail-row dd {
  margin: 0;
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text, #0f172a);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview-body {
  padding: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview-link {
  display: block;
  width: 100%;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview-image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: var(--rocad-space-4, 1rem);
  object-fit: contain;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-3, 0.75rem);
  width: 100%;
  min-height: 320px;
  padding: var(--rocad-space-5, 1.25rem);
  text-align: center;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__placeholder .fa {
  font-size: 2.5rem;
  opacity: 0.65;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__placeholder-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
  color: var(--rocad-color-text, #0f172a);
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview-col {
    margin-top: var(--rocad-space-4, 1rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview {
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__detail-row {
    grid-template-columns: 1fr;
    gap: var(--rocad-space-1, 0.25rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-more .rocad-invoices-more__preview-image {
    max-height: 55vh;
  }
}

/* Phase F3-D — Invoice list (invoices.php) */
#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__pay-all {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-medium);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__pay-all label {
  margin: 0 var(--rocad-space-2, 0.5rem) 0 0;
  font-weight: inherit;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold);
  color: #006400;
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-table > tbody > tr > td,
#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__row:hover {
  background: #d4edda;
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__status .dropbtn {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--invoices-list .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--invoices-list .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--invoices-list .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-invoices-list__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
}

#myModal.rocad-invoices-list__modal .modal-content {
  background: #fff;
  margin: 10vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  width: min(560px, 92%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#myModal.rocad-invoices-list__modal .close {
  float: right;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

#myModal.rocad-invoices-list__modal th {
  font-size: var(--rocad-font-size-base);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

#myModal.rocad-invoices-list__modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-invoices-list__modal button[type="submit"] {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__toolbar {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__bulk-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--invoices-list .rocad-invoices-list__approve-wrap .btn {
    width: 100%;
  }
}

/* F3-E — Denied invoices */
#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--rocad-color-text, #1e293b);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__row > td {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__row:hover {
  background-color: #d4edda !important;
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--denied-invoices .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--denied-invoices .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--denied-invoices .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-denied-invoices__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.45);
}

#myModal.rocad-denied-invoices__modal .modal-content {
  background: #fff;
  margin: 10vh auto 2rem;
  padding: var(--rocad-space-5, 1.25rem);
  width: min(520px, 92%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#myModal.rocad-denied-invoices__modal .close {
  float: right;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

#myModal.rocad-denied-invoices__modal .close:hover,
#myModal.rocad-denied-invoices__modal .close:focus {
  color: #000;
  text-decoration: none;
}

#myModal.rocad-denied-invoices__modal th {
  font-size: var(--rocad-font-size-base);
  padding-right: var(--rocad-space-3, 0.75rem);
  vertical-align: middle;
}

#myModal.rocad-denied-invoices__modal .form-control {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

#myModal.rocad-denied-invoices__modal button[type="submit"] {
  min-height: 42px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--denied-invoices .rocad-denied-invoices__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* F4-A — Salary summary (salary_summary.php) */
#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > tbody > tr > td,
#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > tfoot > tr > th {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > thead > tr > th:nth-child(3),
#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > thead > tr > th:nth-child(4),
#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > tfoot > tr > th:nth-child(3),
#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table > tfoot > tr > th:nth-child(4) {
  text-align: right;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-row-actions {
  position: relative;
  display: inline-block;
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--salary-summary .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--salary-summary .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--salary-summary .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .dataTables_filter input {
  min-height: 36px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-insight-empty__text {
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--salary-summary .rocad-salary-summary__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* F4-B — Payroll report (payroll_report.php) */
#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__batch-card {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__batch-card-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__batch-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__batch-label {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__batch-value {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-form {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding-bottom: var(--rocad-space-4, 1rem);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  align-items: end;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-field .form-control {
  min-height: 38px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-actions {
  display: flex;
  align-items: flex-end;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-table > thead > tr > th {
  background: #0073b7;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__net {
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: #28a745;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__row.selected-row {
  background-color: #d4edda !important;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-row-actions {
  position: relative;
  display: inline-block;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--payroll-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--payroll-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--payroll-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .dataTables_filter input {
  min-height: 36px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-grid {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-report .rocad-payroll-report__filter-actions .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* F4-C — Payroll history (payroll_history.php) */
#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__batch-card {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__batch-card-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__batch-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__batch-label {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__batch-value {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__approved-net-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-form {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding-bottom: var(--rocad-space-4, 1rem);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  align-items: end;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-field .form-control {
  min-height: 38px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-actions {
  display: flex;
  align-items: flex-end;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__approve-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__table-wrap {
  max-height: 600px;
  overflow-y: auto;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-table > thead > tr > th {
  position: sticky;
  top: 0;
  background: #0073b7 !important;
  color: #fff !important;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history #payrollTable tbody td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__net {
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: #28a745;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__row.selected-row {
  background-color: #d4edda !important;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-row-actions {
  position: relative;
  display: inline-block;
}

/* Payroll history — approve modal stacking (modal moved to body on show) */
body > #approveModal.rocad-payroll-history__modal.modal {
  z-index: 10050;
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .spinner-border {
  width: 1rem;
  height: 1rem;
  border: 0.15em solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: rocad-payroll-history-spin 0.75s linear infinite;
  vertical-align: text-bottom;
  margin-right: 6px;
}

@keyframes rocad-payroll-history-spin {
  to { transform: rotate(360deg); }
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--payroll-history .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--payroll-history .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--payroll-history .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .dataTables_filter input {
  min-height: 36px;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-insight-empty {
  margin-top: var(--rocad-space-4, 1rem);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-grid {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-table-page--payroll-history .rocad-payroll-history__filter-actions .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* F4-D — Penalty report polish (penalty.php) */
#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__filter-summary {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__filter-summary-text {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-table > thead > tr > th,
#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-table > tbody > tr > td {
  font-size: var(--rocad-font-size-base);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-table > thead > tr > th:nth-child(4),
#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-table > thead > tr > th:nth-child(5),
#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-table > thead > tr > th:nth-child(7) {
  text-align: right;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__filter-card--highlight {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.35);
  transition: box-shadow 0.2s ease;
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .dataTables_length label,
#rocad-app.rocad-shell .rocad-table-page--penalty-report .dataTables_filter label,
#rocad-app.rocad-shell .rocad-table-page--penalty-report .dataTables_info,
#rocad-app.rocad-shell .rocad-table-page--penalty-report .dataTables_paginate .paginate_button {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--penalty-report .dataTables_filter input {
  min-height: 36px;
  font-size: var(--rocad-font-size-base);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--penalty-report .rocad-penalty-report__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Payroll Slip — payroll_slip.php */
#rocad-app.rocad-shell .rocad-payslip-page__intro {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-payslip-page__title {
  margin: 0 0 var(--rocad-space-2, 0.5rem);
  font-size: var(--rocad-font-size-2xl, 1.5rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-payslip-page__lead {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-payslip-page__error {
  max-width: 720px;
  margin: 0 auto;
}

#rocad-app.rocad-shell .rocad-payslip-page__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-payslip {
  max-width: 900px;
  margin: 0 auto var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-6, 1.5rem);
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 4px 15px rgb(15 23 42 / 0.06);
}

#rocad-app.rocad-shell .rocad-payslip__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-5, 1.25rem);
  padding-bottom: var(--rocad-space-4, 1rem);
  border-bottom: 2px solid var(--rocad-color-border, #e2e8f0);
  text-align: center;
}

#rocad-app.rocad-shell .rocad-payslip__logo {
  max-height: 70px;
  width: auto;
}

#rocad-app.rocad-shell .rocad-payslip__company-name {
  margin: 0;
  font-size: var(--rocad-font-size-xl, 1.25rem);
}

#rocad-app.rocad-shell .rocad-payslip__period {
  margin: var(--rocad-space-2, 0.5rem) 0 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-payslip__section {
  margin-bottom: var(--rocad-space-5, 1.25rem);
}

#rocad-app.rocad-shell .rocad-payslip__section--net {
  padding: var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-payslip__section-title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-2, 0.5rem) var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text, #1e293b);
  background: #f0f8ff;
  border-left: 4px solid #0073b7;
  border-radius: 0.375rem;
}

#rocad-app.rocad-shell .rocad-payslip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-payslip__row {
  display: grid;
  grid-template-columns: minmax(8rem, 40%) 1fr;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-payslip__row:last-child {
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-payslip__row--full {
  grid-column: 1 / -1;
}

#rocad-app.rocad-shell .rocad-payslip__row dt,
#rocad-app.rocad-shell .rocad-payslip__row dd {
  margin: 0;
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-payslip__row dt {
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
  background: #f9fafb;
  border-right: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-payslip__row dd {
  color: var(--rocad-color-text, #1e293b);
  background: #fff;
}

#rocad-app.rocad-shell .rocad-payslip__amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#rocad-app.rocad-shell .rocad-payslip__amount--emphasis {
  font-weight: var(--rocad-font-weight-semibold, 600);
}

#rocad-app.rocad-shell .rocad-payslip__row--net dt,
#rocad-app.rocad-shell .rocad-payslip__row--net dd {
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-payslip__net {
  font-size: 1.125rem;
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: #28a745;
}

#rocad-app.rocad-shell .rocad-payslip__signature {
  margin-top: var(--rocad-space-5, 1.25rem);
  padding-top: var(--rocad-space-4, 1rem);
  border-top: 1px dashed var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-payslip__signature-label {
  margin: 0 0 var(--rocad-space-2, 0.5rem);
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-payslip__signature-name {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-payslip-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rocad-space-3, 0.75rem);
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-payslip-page__btn {
  min-width: 10rem;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-payslip {
    padding: var(--rocad-space-4, 1rem);
  }

  #rocad-app.rocad-shell .rocad-payslip__grid {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-payslip__row {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-payslip__row dt {
    border-right: none;
    border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  }

  #rocad-app.rocad-shell .rocad-payslip-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-payslip-page__btn {
    width: 100%;
  }
}

@media print {
  #rocad-app.rocad-shell .rocad-payslip-page__intro,
  #rocad-app.rocad-shell .rocad-payslip-page__toolbar,
  #rocad-app.rocad-shell .rocad-payslip-page__breadcrumb,
  #rocad-app.rocad-shell .main-header,
  #rocad-app.rocad-shell .main-sidebar,
  #rocad-app.rocad-shell .content-header {
    display: none !important;
  }

  #rocad-app.rocad-shell .rocad-payslip {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
  }
}

/* Payoff deduction entry — payoff_deduction.php */
#rocad-app.rocad-shell .rocad-form-page--payoff .rocad-form-page__intro,
#rocad-app.rocad-shell .rocad-form-page--payoff .rocad-form-page__col {
  max-width: 720px;
}

#rocad-app.rocad-shell .rocad-payoff-period-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--rocad-space-3, 0.75rem);
  max-width: 720px;
  margin: 0 auto var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text, #1e293b);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.625rem;
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-payoff-period-banner .fa {
  margin-top: 0.15rem;
  color: #2563eb;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .rocad-alert--warning {
  margin-top: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem);
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-payoff-staff-context {
  margin-top: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-payoff-staff-context__title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-payoff-staff-context__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  margin: 0;
}

#rocad-app.rocad-shell .rocad-payoff-staff-context__grid dt {
  margin: 0 0 0.15rem;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-payoff-staff-context__grid dd {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-variant-numeric: tabular-nums;
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-form-page--payoff #penalties_container {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding: var(--rocad-space-3, 0.75rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .form-control {
  width: auto !important;
  min-width: 0;
  margin-left: 0 !important;
  flex: 1 1 8rem;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .penalty-type {
  flex: 1 1 10rem;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .absent-days {
  flex: 0 1 6rem;
  max-width: 8rem;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .penalty-amount,
#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group input[name="penalty_amount[]"] {
  flex: 1 1 8rem;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .add_penalty,
#rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .remove_penalty {
  flex: 0 0 auto;
  min-width: 2.25rem;
  min-height: 2.25rem;
  margin-left: 0 !important;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .rocad-payoff-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rocad-space-4, 1rem);
}

@media (min-width: 480px) {
  #rocad-app.rocad-shell .rocad-form-page--payoff .rocad-payoff-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

#rocad-app.rocad-shell .rocad-form-page--payoff .rocad-payoff-summary-field .form-control[readonly] {
  background: var(--rocad-color-surface-muted, #f8fafc);
  font-weight: var(--rocad-font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

#rocad-app.rocad-shell .rocad-form-page--payoff .rocad-form-actions__links {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-2, 0.5rem);
}

@media (min-width: 480px) {
  #rocad-app.rocad-shell .rocad-form-page--payoff .rocad-form-actions__links {
    flex-direction: row;
  }

  #rocad-app.rocad-shell .rocad-form-page--payoff .rocad-form-actions__links .rocad-btn--secondary {
    flex: 1;
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .form-control,
  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .penalty-type,
  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .absent-days,
  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .penalty-amount {
    width: 100% !important;
    max-width: none;
    flex: 1 1 auto;
  }

  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .add_penalty,
  #rocad-app.rocad-shell .rocad-form-page--payoff .penalty-group .remove_penalty {
    width: 100%;
  }
}

/* Payroll generation — payroll.php */
#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-form-page__intro,
#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-form-page__col {
  max-width: 720px;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-alert--warning {
  margin-top: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem);
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-select-all {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  margin: 0;
  font-weight: var(--rocad-font-weight-semibold, 600);
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-select-all input {
  margin: 0;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-count {
  margin: 0;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-list {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--rocad-space-2, 0.5rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-list .checkbox {
  position: static;
  margin-top: 0;
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-list .checkbox + .checkbox {
  margin-top: 0;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-item {
  margin: 0;
  padding: var(--rocad-space-2, 0.5rem) var(--rocad-space-3, 0.75rem);
  border-radius: 0.5rem;
  transition: background 0.15s ease;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-item:hover {
  background: rgb(241 245 249 / 0.8);
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-item label {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-3, 0.75rem);
  margin: 0;
  padding-left: 0;
  min-height: 0;
  font-weight: var(--rocad-font-weight-normal, 400);
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-item input[type="checkbox"] {
  position: static;
  margin: 0;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  flex-shrink: 0;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-cat {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  color: var(--rocad-color-text-muted, #64748b);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-form-page--payroll .rocad-form-actions__links {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-2, 0.5rem);
}

@media (min-width: 480px) {
  #rocad-app.rocad-shell .rocad-form-page--payroll .rocad-form-actions__links {
    flex-direction: row;
  }

  #rocad-app.rocad-shell .rocad-form-page--payroll .rocad-form-actions__links .rocad-btn--secondary {
    flex: 1;
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-item label {
    flex-wrap: wrap;
  }

  #rocad-app.rocad-shell .rocad-form-page--payroll .rocad-payroll-staff-cat {
    flex: 1 1 100%;
    padding-left: calc(1rem + var(--rocad-space-3, 0.75rem));
  }
}

/* Bank bulk transfer pages — access, union, fidelity, uba, zenith */
#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__batch-card,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__batch-card,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__batch-card,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__batch-card,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__batch-card {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__batch-card-inner,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__batch-card-inner,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__batch-card-inner,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__batch-card-inner,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__batch-card-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__batch-item,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__batch-item,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__batch-item,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__batch-item,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__batch-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 10rem;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__batch-label,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__batch-label,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__batch-label,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__batch-label,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__batch-label {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__batch-value,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__batch-value,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__batch-value,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__batch-value,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__batch-value {
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__stats,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__stats,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__stats,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__stats,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__stat-ref,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__stat-ref,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__stat-ref,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__stat-ref,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__stat-ref {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  word-break: break-all;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__toolbar,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__toolbar,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__toolbar,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__toolbar,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__caption,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__caption,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__caption,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__caption,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  text-align: left;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__amount,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__amount,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__amount,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__amount,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__view-link,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__view-link,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__view-link,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__view-link,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #337ab7;
  font-weight: var(--rocad-font-weight-semibold, 600);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__alert,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__alert,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__alert,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__alert,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__table-wrap .dt-buttons,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__table-wrap .dt-buttons,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__table-wrap .dt-buttons,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__table-wrap .dt-buttons,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__table-wrap .dt-buttons {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__table-wrap .dt-buttons .btn,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__table-wrap .dt-buttons .btn,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__table-wrap .dt-buttons .btn,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__table-wrap .dt-buttons .btn,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__table-wrap .dt-buttons .btn {
  margin-right: var(--rocad-space-2, 0.5rem);
  margin-bottom: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__modal,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__modal,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__modal,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__modal,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__modal {
  display: none;
  position: fixed;
  z-index: 10050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0 0 0 / 0.45);
  padding: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__modal-content,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__modal-content,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__modal-content,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__modal-content,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__modal-content {
  background: #fff;
  margin: 10vh auto 0;
  padding: var(--rocad-space-5, 1.25rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  max-width: 28rem;
  box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__modal-close,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__modal-close,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__modal-close,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__modal-close,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__modal-close {
  float: right;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__modal-title,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__modal-title,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__modal-title,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__modal-title,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__modal-title {
  margin: 0 0 var(--rocad-space-4, 1rem);
  font-size: var(--rocad-font-size-lg, 1.125rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
}

#rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__filter-form .form-group,
#rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__filter-form .form-group,
#rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__filter-form .form-group,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__filter-form .form-group,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__filter-form .form-group {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-table-panel__header,
  #rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-table-panel__header,
  #rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-table-panel__header,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-table-panel__header,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__toolbar,
  #rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__toolbar,
  #rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__toolbar,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__toolbar,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__toolbar {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-table-page--access-bank .rocad-access-bank__toolbar .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-table-page--union-bank .rocad-access-bank__toolbar .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-table-page--fidelity-bank .rocad-access-bank__toolbar .rocad-table-page__btn,
#rocad-app.rocad-shell .rocad-table-page--uba-bank .rocad-access-bank__toolbar .rocad-table-page__btn,
#rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--zenith-bank .rocad-access-bank__view-text {
    display: inline;
  }
}

/* Detail page layout — reusable hub/detail pattern */
#rocad-app.rocad-shell .rocad-detail-page__hero {
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
  background: linear-gradient(135deg, var(--rocad-color-surface-muted, #f8fafc) 0%, #fff 100%);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
}

#rocad-app.rocad-shell .rocad-detail-page__hero-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__hero-text {
  flex: 1 1 16rem;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-detail-page__eyebrow {
  margin: 0 0 0.35rem;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-detail-page__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-text, #1e293b);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-detail-page__lead {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.5;
}

#rocad-app.rocad-shell .rocad-detail-page__hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-detail-page__hero-meta {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-detail-page__hero-media {
  position: relative;
  flex: 0 0 auto;
  width: 11rem;
  height: 8rem;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
  background: #fff;
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-detail-page__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#rocad-app.rocad-shell .rocad-detail-page__image-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0.35rem;
  color: var(--rocad-color-text-muted, #64748b);
  background: var(--rocad-color-surface-muted, #f8fafc);
  font-size: var(--rocad-font-size-xs, 0.75rem);
}

#rocad-app.rocad-shell .rocad-detail-page__image-fallback .fa {
  font-size: 2rem;
  opacity: 0.45;
}

#rocad-app.rocad-shell .rocad-detail-page__hero-media.is-fallback .rocad-detail-page__image-fallback,
#rocad-app.rocad-shell .rocad-detail-page__hero-media:not(:has(.rocad-detail-page__hero-image)) .rocad-detail-page__image-fallback {
  display: flex;
}

#rocad-app.rocad-shell .rocad-detail-page__cards {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__cards > [class*="col-"] {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-detail-page__card {
  height: 100%;
  padding: var(--rocad-space-4, 1rem);
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-detail-page__card-title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-base);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-detail-page__card-title .fa {
  margin-right: 0.35rem;
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-detail-page__dl {
  margin: 0;
}

#rocad-app.rocad-shell .rocad-detail-page__dl-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-detail-page__dl-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#rocad-app.rocad-shell .rocad-detail-page__dl-row dt {
  margin: 0;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-detail-page__dl-row dd {
  margin: 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  text-align: right;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-detail-page__stats {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__stat-site {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-detail-page__nav {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__action-btn {
  text-decoration: none;
}

#rocad-app.rocad-shell .rocad-detail-page__section {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__link-grid > [class*="col-"] {
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-detail-page__link {
  text-decoration: none;
  color: inherit;
  height: 100%;
}

#rocad-app.rocad-shell .rocad-detail-page__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__filter .form-group {
  margin-bottom: 0;
  min-width: 10rem;
}

#rocad-app.rocad-shell .rocad-detail-page__caption {
  caption-side: top;
  padding: var(--rocad-space-3, 0.75rem) 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  text-align: left;
}

#rocad-app.rocad-shell .rocad-detail-page__table th,
#rocad-app.rocad-shell .rocad-detail-page__table td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-detail-page__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rocad-space-2, 0.5rem);
  margin-top: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.375rem;
  color: var(--rocad-color-text, #1e293b);
  text-decoration: none;
  font-weight: var(--rocad-font-weight-semibold, 600);
}

#rocad-app.rocad-shell .rocad-detail-page__page-link.is-active,
#rocad-app.rocad-shell .rocad-detail-page__page-link:hover {
  background: var(--rocad-color-brand, #337ab7);
  border-color: var(--rocad-color-brand, #337ab7);
  color: #fff;
}

#rocad-app.rocad-shell .rocad-detail-page__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-detail-page__spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  margin: 0;
}

#rocad-app.rocad-shell .rocad-detail-page__spec-item {
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-left: 3px solid var(--rocad-color-brand, #337ab7);
  border-radius: 0.375rem;
  padding: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-detail-page__spec-item dt {
  margin: 0 0 0.25rem;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#rocad-app.rocad-shell .rocad-detail-page__spec-item dd {
  margin: 0;
  font-size: var(--rocad-font-size-base, 1rem);
  color: var(--rocad-color-text, #1e293b);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-detail-page__spec-item dd a {
  color: var(--rocad-color-brand, #337ab7);
  font-weight: var(--rocad-font-weight-semibold, 600);
}

/* Plant detail hub — more.php */
#rocad-app.rocad-shell .rocad-detail-page--plant-hub .rocad-plant-hub__hero {
  background: linear-gradient(135deg, rgb(48 90 114 / 0.08) 0%, #fff 55%, var(--rocad-color-surface-muted, #f8fafc) 100%);
}

#rocad-app.rocad-shell .rocad-detail-page--plant-hub .rocad-detail-page__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}

#rocad-app.rocad-shell .rocad-plant-hub__plant-no {
  margin: 0 0 0.35rem;
  font-size: var(--rocad-font-size-lg, 1.125rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-plant-hub__plant-no .fa {
  margin-right: 0.25rem;
  opacity: 0.85;
}

#rocad-app.rocad-shell .rocad-plant-hub__description {
  margin: 0 0 0.5rem;
  font-size: var(--rocad-font-size-base, 1rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-plant-hub__media {
  width: 14rem;
  height: 10rem;
}

#rocad-app.rocad-shell .rocad-plant-hub__key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-plant-hub__key-fact {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: var(--rocad-space-3, 0.75rem);
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
  min-height: 100%;
}

#rocad-app.rocad-shell .rocad-plant-hub__key-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: rgb(48 90 114 / 0.1);
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-plant-hub__key-fact-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-plant-hub__key-fact-label {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-plant-hub__key-fact-value {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-plant-hub__action-groups {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-plant-hub__action-group {
  padding-top: var(--rocad-space-3, 0.75rem);
  border-top: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-plant-hub__action-group:first-child {
  padding-top: 0;
  border-top: 0;
}

#rocad-app.rocad-shell .rocad-plant-hub__action-group-title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-plant-hub__action-group-title .fa {
  margin-right: 0.35rem;
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-plant-hub__filter {
  padding: var(--rocad-space-3, 0.75rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-plant-hub__filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
}

/* Equipment profile — more.php */
#rocad-app.rocad-shell .rocad-equipment-profile {
  margin-bottom: var(--rocad-space-4, 1rem);
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
  overflow: hidden;
}

#rocad-app.rocad-shell .rocad-equipment-profile__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
  padding: var(--rocad-space-4, 1rem);
  background: linear-gradient(135deg, rgb(48 90 114 / 0.06) 0%, #fff 58%, var(--rocad-color-surface-muted, #f8fafc) 100%);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-equipment-profile__identity {
  flex: 1 1 16rem;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-equipment-profile__eyebrow {
  margin: 0 0 0.35rem;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-equipment-profile__eyebrow .fa {
  margin-right: 0.35rem;
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-equipment-profile__name {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  line-height: 1.2;
  color: var(--rocad-color-text, #1e293b);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-equipment-profile__number {
  margin: 0.35rem 0 0;
  font-size: var(--rocad-font-size-base, 1rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-equipment-profile__description {
  margin: 0.5rem 0 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  line-height: 1.5;
  color: var(--rocad-color-text-muted, #64748b);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-equipment-profile__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

#rocad-app.rocad-shell .rocad-equipment-profile__site-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 999px;
}

#rocad-app.rocad-shell .rocad-equipment-profile__group {
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem) var(--rocad-space-4, 1rem);
  border-top: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-equipment-profile__group:first-of-type {
  border-top: 0;
}

#rocad-app.rocad-shell .rocad-equipment-profile__group-title {
  margin: 0 0 var(--rocad-space-3, 0.75rem);
  font-size: var(--rocad-font-size-base, 1rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-equipment-profile__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-equipment-profile__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 100%;
  padding: 0.65rem 0.75rem;
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

#rocad-app.rocad-shell .rocad-equipment-profile__label {
  font-size: 0.875rem;
  font-weight: var(--rocad-font-weight-semibold, 600);
  letter-spacing: 0.01em;
  color: #475569;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-equipment-profile__value {
  font-size: var(--rocad-font-size-base, 1rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-text, #1e293b);
  line-height: 1.4;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-equipment-profile__value.is-empty {
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
  font-style: italic;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-equipment-profile__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-equipment-profile__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-equipment-profile__badges {
    justify-content: flex-start;
  }

  #rocad-app.rocad-shell .rocad-equipment-profile__grid {
    grid-template-columns: 1fr;
  }
}

/* Equipment Master Profile — Phase 1A (more.php) */
#rocad-app.rocad-shell .rocad-asset-master-profile {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary-card {
  display: flex;
  align-items: flex-start;
  gap: var(--rocad-space-2, 0.5rem);
  padding: var(--rocad-space-3, 0.75rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--rocad-color-brand, #337ab7);
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.375rem;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__summary-value.is-empty {
  font-weight: 600;
  font-style: italic;
  color: #64748b;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__panel {
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-2, 0.5rem);
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 0;
  background: var(--rocad-color-surface-muted, #f8fafc);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__trigger:hover {
  background: #f1f5f9;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__trigger.is-open {
  background: #eff6ff;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__trigger-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__trigger-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__badge {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 999px;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__chevron {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.2s ease;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__trigger.is-open .rocad-asset-master-profile__chevron {
  transform: rotate(180deg);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__body {
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem) var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-asset-master-profile__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__value {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.45;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-asset-master-profile__value.is-empty {
  font-weight: 600;
  font-style: italic;
  color: #64748b;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-asset-master-profile__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-asset-master-profile__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rocad-app.rocad-shell .rocad-asset-master-profile__grid {
    grid-template-columns: 1fr;
  }
}

#rocad-app.rocad-shell .rocad-plant-hub__activity-panel .rocad-detail-page__table td:nth-child(5) {
  white-space: normal;
  min-width: 12rem;
  max-width: 24rem;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-detail-page__hero-body {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-detail-page__hero-media {
    width: 100%;
    max-width: 16rem;
    margin: 0 auto;
  }

  #rocad-app.rocad-shell .rocad-detail-page__filter {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-detail-page__filter .form-group,
  #rocad-app.rocad-shell .rocad-detail-page__filter .btn,
  #rocad-app.rocad-shell .rocad-plant-hub__filter-actions,
  #rocad-app.rocad-shell .rocad-plant-hub__filter-actions .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-plant-hub__media {
    width: 100%;
    max-width: 18rem;
    height: 11rem;
  }

  #rocad-app.rocad-shell .rocad-plant-hub__key-facts {
    grid-template-columns: 1fr;
  }
}
/* Plant history report — plant_history.php */
#rocad-app.rocad-shell .rocad-table-page--plant-history .rocad-plant-history__table th,
#rocad-app.rocad-shell .rocad-table-page--plant-history .rocad-plant-history__table td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--plant-history .rocad-table-page__toolbar,
  #rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-table-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--plant-history .rocad-table-page__toolbar .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-table-page__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Shared plant report blocks — plant_history.php, maintenance_history.php */
#rocad-app.rocad-shell .rocad-plant-report__equipment-card {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-plant-report__equipment-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0 var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-plant-report__equipment-dl .rocad-detail-page__dl-row {
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-plant-report__filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-plant-report__filter-note {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
}

/* Maintenance history — maintenance_history.php */
#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-maintenance-history__toolbar {
  flex-wrap: wrap;
}

#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-maintenance-history__table th,
#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-maintenance-history__table td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-plant-report__cost-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-plant-report__cost-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 10rem;
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--rocad-color-surface-muted, #f8fafc);
}

#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-plant-report__cost-card--warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-plant-report__cost-label {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--maintenance-history .rocad-plant-report__cost-value {
  font-size: var(--rocad-font-size-lg, 1.125rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-text, #1e293b);
}

/* Plant release list / history — plant_release.php */
#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release-filters__grid,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release-filters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rocad-space-4, 1rem);
  align-items: end;
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release-filters__actions,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  margin-top: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release-filters .form-group,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release-filters .form-group {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__filter-summary,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__filter-note,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__filter-note {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__alert,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__alert {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__table th,
#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__table td,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__table th,
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__table td {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__table td:nth-child(6),
#rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release__table td:nth-child(7),
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__table td:nth-child(6),
#rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release__table td:nth-child(7) {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release-filters__grid,
  #rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-table-page__toolbar,
  #rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-table-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-table-page__toolbar .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-table-page__toolbar .rocad-table-page__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  #rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-plant-release-filters__grid,
  #rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-plant-release-filters__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #rocad-app.rocad-shell .rocad-table-page--plant-release .rocad-table-panel__header,
  #rocad-app.rocad-shell .rocad-table-page--plant-release-history .rocad-table-panel__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rocad-space-3, 0.75rem);
  }
}

/* Plant release sheet form — plant_release_sheet.php */
#rocad-app.rocad-shell .rocad-form-page--plant-release input[type="text"],
#rocad-app.rocad-shell .rocad-form-page--plant-release select,
#rocad-app.rocad-shell .rocad-form-page--plant-release textarea {
  text-transform: uppercase;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__intro-meta {
  margin: var(--rocad-space-3, 0.75rem) 0 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rocad-space-3, 0.75rem);
  margin: 0 var(--rocad-space-6, 1.5rem) var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-4, 1rem);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: var(--rocad-radius-md, 8px);
  background: var(--rocad-color-surface-raised, #f8fafc);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__summary-label {
  display: block;
  font-size: var(--rocad-font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rocad-color-text-muted, #64748b);
  margin-bottom: 2px;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__summary-value {
  display: block;
  font-weight: var(--rocad-font-weight-semibold, 600);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__alert {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-fieldset {
  border: 1px solid var(--rocad-color-border, #d2d6de);
  border-radius: var(--rocad-radius-md, 8px);
  padding: var(--rocad-space-4, 1rem);
  margin: 0 0 var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-raised, #fafafa);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-fieldset legend {
  font-size: var(--rocad-font-size-base, 14px);
  font-weight: var(--rocad-font-weight-semibold, 600);
  padding: 0 var(--rocad-space-2, 0.5rem);
  border: none;
  width: auto;
  margin-bottom: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-table {
  width: 100%;
  border-collapse: collapse;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-table td {
  padding: 4px 6px;
  vertical-align: middle;
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-hint {
  font-size: var(--rocad-font-size-xs, 0.75rem);
  color: #c0392b;
  line-height: 1.4;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-hint--right {
  text-align: right;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-route-error {
  color: #c0392b;
  font-size: var(--rocad-font-size-sm, 13px);
  margin-bottom: var(--rocad-space-3, 0.75rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attach-thumb {
  display: inline-block;
  margin: 4px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attach-thumb img {
  max-width: 80px;
  max-height: 80px;
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-actions__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-3, 0.75rem);
  justify-content: flex-end;
  width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-draft-btn {
  background: #f39c12;
  border-color: #e08e0b;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-draft-btn:hover,
#rocad-app.rocad-shell .rocad-form-page--plant-release .pr-draft-btn:focus {
  background: #e08e0b;
  color: #fff;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-uploader {
  padding: 10px;
  border: 2px dashed #d2d6de;
  border-radius: 4px;
  background: #fafafa;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-uploader.dragover {
  border-color: #3c8dbc;
  background: #eef7fc;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item {
  position: relative;
  width: 130px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item .preview-img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 3px;
  background: #f9f9f9;
  display: block;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item .preview-file {
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 3px;
  font-size: 40px;
  color: #777;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item .file-name {
  display: block;
  font-size: 11px;
  margin-top: 6px;
  word-break: break-all;
  text-align: center;
  line-height: 1.2;
  max-height: 30px;
  overflow: hidden;
  text-transform: none;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item .file-size {
  display: block;
  font-size: 10px;
  color: #999;
  text-align: center;
  margin-top: 2px;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item .remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dd4b39;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-weight: bold;
}

#rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item .remove-btn:hover {
  background: #c0392b;
}

@media (min-width: 768px) {
  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-panel__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 991px) {
  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-fieldset table td input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-fieldset table tr td:nth-of-type(6),
  #rocad-app.rocad-shell .rocad-form-page--plant-release .pr-checklist-fieldset table tr td:nth-of-type(7) {
    display: block;
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-actions__group {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-actions__group .rocad-btn {
    width: 100%;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item {
    width: calc(50% - 5px);
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-uploader label.btn {
    display: block;
    margin-bottom: 8px;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-uploader #attachment_clear {
    display: block;
    width: 100%;
    margin-top: 6px;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release #attachment_count {
    display: block;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-plant-release-sheet__summary {
    grid-template-columns: minmax(0, 1fr);
    margin-left: var(--rocad-space-4, 1rem);
    margin-right: var(--rocad-space-4, 1rem);
  }
}

@media (max-width: 480px) {
  #rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-preview-item {
    width: 100%;
  }
}

@media print {
  #rocad-app.rocad-shell .rocad-form-page--plant-release .main-header,
  #rocad-app.rocad-shell .rocad-form-page--plant-release .main-sidebar,
  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-actions,
  #rocad-app.rocad-shell .rocad-form-page--plant-release .attachment-uploader,
  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-panel__header a {
    display: none !important;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .content-wrapper,
  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-release .rocad-form-panel {
    box-shadow: none !important;
    border: none !important;
  }
}

/* Construction Site module — in-page view navigation */
#rocad-app.rocad-shell .rocad-construction-site-nav {
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-table-page .rocad-construction-site-nav {
  margin-bottom: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page .rocad-construction-site-nav {
  margin-bottom: var(--rocad-space-4, 1rem);
}

/* Daily plant report entry — new-plant-report.php */
#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-form-page__col--wide {
  max-width: none;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-form-page__intro {
  max-width: 42rem;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-panel + .rocad-dpr-panel {
  margin-top: var(--rocad-space-4, 1rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-field--date {
  max-width: 18rem;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3, 0.75rem);
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  background: var(--rocad-color-surface-muted, #f8fafc);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text, #1e293b);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__count strong {
  font-size: var(--rocad-font-size-lg, 1.125rem);
  font-weight: var(--rocad-font-weight-bold, 700);
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__hint {
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: var(--rocad-color-text-muted, #64748b);
  line-height: 1.45;
  max-width: 36rem;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__table-wrap {
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__table {
  min-width: 56rem;
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__table thead th {
  font-size: 0.75rem;
  font-weight: var(--rocad-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--rocad-color-surface-muted, #f8fafc);
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__table td {
  vertical-align: middle;
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__table .form-control {
  min-width: 7.5rem;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__sn {
  width: 3rem;
  text-align: center;
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__site-text {
  display: block;
  min-width: 10rem;
  max-width: 14rem;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-text, #1e293b);
  line-height: 1.4;
  word-break: break-word;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__readonly {
  background: var(--rocad-color-surface-muted, #f8fafc);
  font-weight: var(--rocad-font-weight-semibold, 600);
  color: var(--rocad-color-brand, #337ab7);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-insight-empty {
  margin-top: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-form-actions .btn-success {
  background: linear-gradient(135deg, #3d8b3d 0%, #2f6f2f 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgb(61 139 61 / 0.28);
}

#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-form-actions .btn-success:hover,
#rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-form-actions .btn-success:focus {
  background: linear-gradient(135deg, #357a35 0%, #285f28 100%);
  color: #fff;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-field--date {
    max-width: none;
  }

  #rocad-app.rocad-shell .rocad-form-page--plant-dpr .rocad-dpr-entry__table .form-control {
    min-width: 0;
    width: 100%;
  }
}

/* =============================================================================
   Daily expense report readability standard (benchmark: daily_report.php)
   Shared by daily report, pending, approve, and expense category pages.
   ============================================================================= */

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__lead,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__lead,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #334155;
  max-width: 56ch;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__count,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__count,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__count {
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
  color: #084fa8;
  background: rgba(8, 79, 168, 0.1);
  border-color: rgba(8, 79, 168, 0.22);
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__count strong,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__count strong,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__count strong {
  font-size: 1rem;
  font-weight: 700;
  color: #052e66;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-period,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-period,
#rocad-app.rocad-shell .rocad-table-page--expense-category .dr-period {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: #1e293b;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: rgb(248 250 252 / 0.9);
  border-left: 4px solid var(--rocad-color-brand, #084fa8);
  border-radius: 0 0.5rem 0.5rem 0;
  text-align: left;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-period strong,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-period strong,
#rocad-app.rocad-shell .rocad-table-page--expense-category .dr-period strong {
  font-weight: 700;
  color: #0f172a;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-stat-card__title,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-stat-card__title,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-stat-card__title {
  font-size: 0.9375rem;
  opacity: 1;
  letter-spacing: 0.03em;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-staff-stat-value,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-staff-stat-value,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-staff-stat-value {
  font-size: clamp(1.625rem, 3.5vw, 2.125rem);
  font-weight: 700;
  line-height: 1.25;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report #selectedTotal {
  display: block;
  min-height: 1.5em;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-panel__title,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-panel__title,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-panel__title {
  font-size: clamp(1.875rem, 2.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
  letter-spacing: -0.02em;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-panel__subtitle,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-panel__subtitle,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-panel__subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: #1e293b;
  margin-top: 0.35rem;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report #status,
#rocad-app.rocad-shell .rocad-table-page--finance-daily #status,
#rocad-app.rocad-shell .rocad-table-page--expense-category #status {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  font-size: clamp(1.75rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  color: #052e66;
  text-align: center;
  min-height: 3.25rem;
  letter-spacing: -0.01em;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report #status:not(:empty),
#rocad-app.rocad-shell .rocad-table-page--finance-daily #status:not(:empty),
#rocad-app.rocad-shell .rocad-table-page--expense-category #status:not(:empty) {
  background: linear-gradient(180deg, rgba(8, 79, 168, 0.12) 0%, rgba(8, 79, 168, 0.06) 100%);
  border: 2px solid rgba(8, 79, 168, 0.22);
  border-radius: 0.625rem;
  box-shadow: 0 2px 8px rgba(8, 79, 168, 0.08);
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar,
#rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: rgb(248 250 252 / 0.9);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar__select-all,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar__select-all,
#rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar__select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0f172a;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar__select-all label,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar__select-all label,
#rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar__select-all label {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar__select-all .form-check-input,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar__select-all .form-check-input,
#rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar__select-all .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report #approve_div,
#rocad-app.rocad-shell .rocad-table-page--finance-daily #approve_div {
  float: none;
  text-align: center;
  margin: 0;
  display: block;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report #approve_btn,
#rocad-app.rocad-shell .rocad-table-page--finance-daily #move_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-checkbox-col,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-checkbox-col {
  width: 42px;
  min-width: 42px;
  text-align: center;
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-checkbox-col .form-check-input,
#rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-checkbox-col .form-check-input {
  margin: 0;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-table-page--daily-report .dr-row--nonpending > td {
  color: #b91c1c;
}

#rocad-app.rocad-shell #myModal,
#rocad-app.rocad-shell .rocad-finance-filter-modal {
  display: none;
  position: fixed;
  z-index: 1050;
  inset: 0;
  padding: 5vh 1rem 1rem;
  overflow: auto;
  background-color: rgba(15, 23, 42, 0.45);
}

#rocad-app.rocad-shell .rocad-finance-filter-modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#rocad-app.rocad-shell #myModal .modal-content,
#rocad-app.rocad-shell .rocad-finance-filter-modal__content {
  background: #fff;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  width: min(420px, 100%);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__content {
  position: relative;
  width: min(720px, 100%);
  padding: 1.5rem 1.75rem 1.75rem;
}

#rocad-app.rocad-shell #myModal .close,
#rocad-app.rocad-shell .rocad-finance-filter-modal__close {
  color: #64748b;
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  float: none;
  border: 0;
  background: transparent;
  padding: 0;
}

#rocad-app.rocad-shell #myModal table th,
#rocad-app.rocad-shell .rocad-finance-filter-modal__field label {
  padding: 0.35rem 0;
  font-size: var(--rocad-font-size-base);
  font-weight: 600;
  white-space: nowrap;
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell #myModal .form-control,
#rocad-app.rocad-shell .rocad-finance-filter-modal__field .form-control {
  min-width: 220px;
  font-size: var(--rocad-font-size-base);
  font-family: var(--rocad-font-sans);
  color: var(--rocad-color-text);
}

#rocad-app.rocad-shell #myModal button[type="submit"],
#rocad-app.rocad-shell #myModal button:not(.close),
#rocad-app.rocad-shell .rocad-finance-filter-modal__actions .rocad-table-page__btn {
  min-width: 140px;
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell #modalInvoice {
  display: none;
  position: fixed;
  z-index: 1060;
  inset: 0;
  padding: 5vh 1rem 1rem;
  overflow: auto;
  background-color: rgba(15, 23, 42, 0.45);
}

#rocad-app.rocad-shell #modalInvoice .modal-dialog {
  width: min(480px, 100%);
  margin: 0 auto;
}

#rocad-app.rocad-shell #modalInvoice .modal-content {
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
  overflow: hidden;
}

#rocad-app.rocad-shell #modalInvoice .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  background: linear-gradient(180deg, rgb(248 250 252 / 0.95) 0%, #fff 100%);
}

#rocad-app.rocad-shell #modalInvoice .modal-body {
  padding: 1.25rem;
}

#rocad-app.rocad-shell #modalInvoice #banks,
#rocad-app.rocad-shell #modalInvoice #comment {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.75rem;
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell #modalInvoice #banks {
  min-height: 38px;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rocad-color-border, #cbd5e1);
  border-radius: 0.375rem;
}

#rocad-app.rocad-shell #modalInvoice #comment {
  min-height: 90px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rocad-color-border, #cbd5e1);
  border-radius: 0.375rem;
  resize: vertical;
}

#rocad-app.rocad-shell #modalInvoice #approve_btn2 {
  width: 100%;
  max-width: 220px;
}

#rocad-app.rocad-shell .rocad-form-page--quick-transfer .rocad-form-page__lead,
#rocad-app.rocad-shell .rocad-form-page--loan-request .rocad-form-page__lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #334155;
  max-width: 56ch;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__lead,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__lead,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__lead {
    font-size: 1rem;
    max-width: none;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__count,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__count,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__count {
    width: 100%;
    justify-content: center;
    font-size: 0.9375rem;
    padding: 0.55rem 0.85rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .dr-period,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-period,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .dr-period {
    font-size: 1rem;
    text-align: center;
    border-left: none;
    border-top: 4px solid var(--rocad-color-brand, #084fa8);
    border-radius: 0.5rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-panel__title,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-panel__title,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-panel__title {
    font-size: clamp(1.625rem, 5vw, 1.875rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-panel__subtitle,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-panel__subtitle,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-panel__subtitle {
    font-size: 1.125rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report #status,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily #status,
  #rocad-app.rocad-shell .rocad-table-page--expense-category #status {
    font-size: clamp(1.75rem, 5vw, 1.875rem);
    padding: 0.85rem 1rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar__select-all,
  #rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar__select-all label,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar__select-all,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar__select-all label,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar__select-all,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar__select-all label {
    font-size: 1.125rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-stat-card__title,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-stat-card__title,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-stat-card__title {
    font-size: 0.9375rem;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-staff-stat-value,
  #rocad-app.rocad-shell .rocad-table-page--daily-report #selectedTotal,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-staff-stat-value,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-staff-stat-value {
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__intro,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__intro,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__intro {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__meta,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__meta,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__meta {
    flex-wrap: wrap;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-panel__header,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-panel__header,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__toolbar,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__toolbar,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .rocad-table-page__toolbar .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-table-page__toolbar .rocad-table-page__btn,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-table-page__toolbar .rocad-table-page__btn {
    width: 100%;
    text-align: center;
  }

  #rocad-app.rocad-shell .rocad-table-page--daily-report .dr-approve-bar,
  #rocad-app.rocad-shell .rocad-table-page--finance-daily .dr-approve-bar,
  #rocad-app.rocad-shell .rocad-table-page--expense-category .dr-approve-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell #myModal,
  #rocad-app.rocad-shell #modalInvoice,
  #rocad-app.rocad-shell .rocad-finance-filter-modal {
    padding-top: 1rem;
  }
}

/* Finance UI batch — layout only (typography from daily-report standard above) */

#rocad-app.rocad-shell .rocad-table-page--finance-daily .rocad-row-actions,
#rocad-app.rocad-shell .rocad-table-page--expense-category .rocad-row-actions {
  position: relative;
}

.rocad-expense-category-preview-form {
  display: none;
}

.rocad-expense-category-preview-form__payload {
  display: none;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__toolbar {
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

#rocad-app.rocad-shell .rocad-expense-export-preview__actions-col {
  width: 8.5rem;
  min-width: 8.5rem;
  white-space: nowrap;
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__delete-row-btn {
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  font-size: var(--rocad-font-size-sm, 0.875rem);
}

#rocad-app.rocad-shell .rocad-expense-export-preview__delete-col-btn {
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border: 0;
  background: transparent;
  color: #b91c1c;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__delete-col-btn:hover {
  color: #7f1d1d;
}

#rocad-app.rocad-shell .rocad-table-page--expense-category-preview .rocad-expense-export-preview__notice {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2, 0.5rem);
  margin-bottom: var(--rocad-space-4, 1rem);
  padding: var(--rocad-space-3, 0.75rem) var(--rocad-space-4, 1rem);
  font-size: var(--rocad-font-size-sm, 0.875rem);
  font-weight: 600;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__table-wrap {
  overflow-x: auto;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__table {
  min-width: 1100px;
  margin-bottom: 0;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  white-space: nowrap;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__cell {
  min-width: 9rem;
  min-height: 42px;
  padding: 0.5rem 0.625rem;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  border: 1px solid #dbe3ef;
  border-radius: 0.375rem;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__cell:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
  outline: none;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__table tbody tr:nth-child(even) .rocad-expense-export-preview__cell {
  background: #fbfdff;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__table tbody tr.is-selected .rocad-expense-export-preview__cell {
  background: #eff6ff;
  border-color: #93c5fd;
}

#rocad-app.rocad-shell .rocad-expense-export-preview__table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 #2563eb;
}

#rocad-app.rocad-shell .rocad-expense-preview-modal__help {
  margin: 0.35rem 0 0;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  color: #64748b;
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-expense-preview-modal__quick-actions {
  margin-top: 0.5rem;
}

#rocad-app.rocad-shell .rocad-expense-preview-modal__quick-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2, 0.5rem);
}

body.expense-preview-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-table-page--expense-category-preview .rocad-table-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--expense-category-preview .rocad-table-page__toolbar {
    justify-content: stretch;
  }

  #rocad-app.rocad-shell .rocad-table-page--expense-category-preview .rocad-table-page__toolbar .rocad-table-page__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-expense-export-preview__cell {
    min-width: 7.5rem;
    font-size: 1rem;
  }
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 2rem 1.25rem 0;
  color: #0f172a;
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__group {
  margin-bottom: 1.25rem;
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__group-label {
  margin: 0 0 0.75rem;
  font-size: var(--rocad-font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__field label {
  display: block;
  margin-bottom: 0.5rem;
  white-space: normal;
}

#rocad-app.rocad-shell .rocad-finance-filter-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rocad-color-border, #e2e8f0);
}

@media (max-width: 640px) {
  #rocad-app.rocad-shell .rocad-finance-filter-modal__grid {
    grid-template-columns: 1fr;
  }

  #rocad-app.rocad-shell .rocad-finance-filter-modal__actions .rocad-table-page__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

#rocad-app.rocad-shell .rocad-form-page--loan-request .rocad-loan-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-form-page--loan-request .rocad-loan-section {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background: #f8fafc;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.625rem;
}

#rocad-app.rocad-shell .rocad-form-page--loan-request .rocad-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--loan-request .rocad-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-form-page--loan-request .rocad-form-actions .btn {
    width: 100%;
  }
}

/* Advance voucher form — Finance & HR UI batch */
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-advance-voucher__guide-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto var(--rocad-space-5);
  border-radius: var(--rocad-radius-md);
  opacity: 0.92;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-form-section,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-form-panel__body,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-beneficiary-lookup,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-beneficiary-lookup__field,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-beneficiary-lookup__control {
  overflow: visible !important;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-beneficiary-lookup {
  position: relative;
  z-index: 20;
  max-width: 100%;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-beneficiary-lookup__control {
  position: relative;
  width: 100%;
}

/* Floating dropdown panel — detached from page flow */
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-beneficiary-lookup__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  z-index: 1060;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse:empty {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse > div,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .row,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__list {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Open panel — results or not-found message */
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse:not(:empty) {
  max-height: min(360px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.14), 0 2px 8px rgb(15 23 42 / 0.08);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse:not(:has(table)):not(:empty) {
  padding: var(--rocad-space-4);
  border-color: #fecaca;
  background: #fef2f2;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__table {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0;
  border: none;
  list-style: none;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody {
  display: block;
  width: 100%;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr {
  display: block;
  width: 100%;
  min-height: var(--rocad-mobile-field-min-height, 44px);
  padding: var(--rocad-space-2) var(--rocad-space-3);
  border-bottom: 1px solid var(--rocad-color-border);
  background: #fff;
  list-style: none;
  transition: background-color 0.12s ease;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option:last-child,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr:last-child {
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option:hover,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option:focus-within,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr:hover,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr:focus-within {
  background: rgba(8, 79, 168, 0.08) !important;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option td,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td {
  display: block;
  width: 100% !important;
  max-width: 100%;
  padding: 0;
  border: none !important;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: var(--rocad-font-size-base);
  line-height: 1.4;
  list-style: none;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__name,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:first-child {
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  margin-bottom: var(--rocad-space-1);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__name span,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:first-child span,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse i {
  font-style: normal !important;
  color: inherit !important;
  font-size: inherit !important;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__account::before,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__bank::before,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:nth-child(2)::before,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:nth-child(3)::before {
  display: inline;
  margin-right: var(--rocad-space-1);
  font-size: var(--rocad-font-size-xs);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__account::before,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:nth-child(2)::before {
  content: "Acct:";
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__bank::before,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:nth-child(3)::before {
  content: "Bank:";
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__account,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__bank,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:nth-child(2),
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:nth-child(3) {
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__action,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td:last-child {
  padding-top: var(--rocad-space-2);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .loadUserData {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rocad-mobile-field-min-height, 44px);
  min-width: 5.5rem;
  padding: var(--rocad-space-2) var(--rocad-space-3);
  font-size: var(--rocad-font-size-sm);
  font-weight: var(--rocad-font-weight-semibold);
  line-height: 1.2;
  color: #fff !important;
  background: var(--rocad-color-brand) !important;
  border: none !important;
  border-radius: 0.5rem;
  box-shadow: none;
  transition: background-color 0.12s ease;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .loadUserData:hover,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .loadUserData:focus {
  background: var(--rocad-color-brand-dark) !important;
  outline: none;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .loadUserData:active {
  background: var(--rocad-color-brand-dark) !important;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse > span,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse span[style*="color:red"] {
  display: block;
  max-width: 100%;
  font-size: var(--rocad-font-size-base) !important;
  font-style: normal !important;
  line-height: 1.5;
  word-break: break-word;
  white-space: normal;
  color: #b91c1c !important;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .btn,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rocad-mobile-field-min-height, 44px);
  margin-top: var(--rocad-space-2);
  font-size: var(--rocad-font-size-base);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse ul,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse:not(:empty) {
    max-height: min(320px, 45vh);
  }

  #rocad-app.rocad-shell .rocad-form-page--advance-voucher #userDataResponse .loadUserData {
    width: 100%;
  }
}

/* Resilient fallback — same dropdown rules without #rocad-app shell ancestor */
.rocad-form-page--advance-voucher .rocad-beneficiary-lookup,
.rocad-form-page--advance-voucher .rocad-beneficiary-lookup__field,
.rocad-form-page--advance-voucher .rocad-beneficiary-lookup__control,
.rocad-form-page--advance-voucher .rocad-form-section,
.rocad-form-page--advance-voucher .rocad-form-panel__body {
  overflow: visible !important;
}

.rocad-form-page--advance-voucher .rocad-beneficiary-lookup {
  position: relative;
  z-index: 20;
  max-width: 100%;
  min-width: 0;
}

.rocad-form-page--advance-voucher .rocad-beneficiary-lookup__control {
  position: relative;
  width: 100%;
}

.rocad-form-page--advance-voucher #userDataResponse,
.rocad-form-page--advance-voucher .rocad-beneficiary-lookup__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  z-index: 1060;
  list-style: none !important;
}

.rocad-form-page--advance-voucher #userDataResponse:empty {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

.rocad-form-page--advance-voucher #userDataResponse:not(:empty) {
  max-height: min(360px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-form-field-radius);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.14), 0 2px 8px rgb(15 23 42 / 0.08);
}

.rocad-form-page--advance-voucher #userDataResponse table,
.rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0;
  border: none;
  list-style: none !important;
}

.rocad-form-page--advance-voucher #userDataResponse table > tbody {
  display: block;
  width: 100%;
}

.rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option,
.rocad-form-page--advance-voucher #userDataResponse table > tbody > tr {
  display: block !important;
  width: 100%;
  min-height: var(--rocad-mobile-field-min-height, 44px);
  padding: var(--rocad-space-2) var(--rocad-space-3);
  border-bottom: 1px solid var(--rocad-color-border);
  background: #fff;
  list-style: none !important;
}

.rocad-form-page--advance-voucher #userDataResponse .rocad-beneficiary-dropdown__option td,
.rocad-form-page--advance-voucher #userDataResponse table > tbody > tr > td {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  padding: 0;
  border: none !important;
  list-style: none !important;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rocad-form-page--advance-voucher #userDataResponse ul,
.rocad-form-page--advance-voucher #userDataResponse li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .rocad-form-page--advance-voucher #userDataResponse:not(:empty) {
    max-height: min(320px, 45vh);
  }

  .rocad-form-page--advance-voucher #userDataResponse .loadUserData {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .rocad-form-page--advance-voucher #userDataResponse .loadUserData {
    width: 100%;
  }
}

/* Advance voucher — plant autocomplete (A/C Code) */
.rocad-form-page--advance-voucher .rocad-plant-lookup,
.rocad-form-page--advance-voucher .rocad-plant-lookup__control,
.rocad-form-page--advance-voucher .rocad-plant-autocomplete,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-lookup,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-lookup__control,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete {
  position: relative;
  overflow: visible !important;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__input,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__input {
  width: 100%;
  min-height: var(--rocad-mobile-field-min-height, 44px);
  font-size: 16px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: var(--rocad-form-field-radius, 0.375rem);
  background: #fff;
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__native,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__suggestions,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1060;
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: var(--rocad-form-field-radius, 0.375rem);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.14), 0 2px 8px rgb(15 23 42 / 0.08);
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__suggestions[hidden],
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__suggestions[hidden] {
  display: none !important;
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__option,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__option {
  display: block;
  width: 100%;
  min-height: var(--rocad-mobile-field-min-height, 44px);
  padding: 0.625rem 0.75rem;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  background: #fff;
  color: var(--rocad-color-text, #0f172a);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__option:last-child,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__option:last-child {
  border-bottom: none;
}

.rocad-form-page--advance-voucher .rocad-plant-autocomplete__option:hover,
.rocad-form-page--advance-voucher .rocad-plant-autocomplete__option:focus,
.rocad-form-page--advance-voucher .rocad-plant-autocomplete__option.is-active,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__option:hover,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__option:focus,
#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-plant-autocomplete__option.is-active {
  background: var(--rocad-color-surface-muted, #f1f5f9);
  outline: none;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-form-upload-preview__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  padding: var(--rocad-space-2) var(--rocad-space-3);
  margin-bottom: var(--rocad-space-2);
  background: var(--rocad-color-surface-muted);
  border: 1px solid var(--rocad-color-border);
  border-radius: var(--rocad-radius-md);
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-form-upload-preview__meta {
  display: flex;
  align-items: center;
  gap: var(--rocad-space-2);
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-form-upload-preview__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--rocad-radius-sm);
  flex-shrink: 0;
}

#rocad-app.rocad-shell .rocad-form-page--advance-voucher .rocad-form-upload-preview__name {
  font-size: 16px;
  font-weight: var(--rocad-font-weight-medium);
  word-break: break-word;
}

/* Staff history detail — Finance & HR UI batch */
#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-staff-history__hero {
  margin-bottom: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-staff-history__photo-wrap {
  width: 140px;
  height: 180px;
  border-radius: var(--rocad-radius-lg);
  overflow: hidden;
  border: 3px solid var(--rocad-color-border);
  box-shadow: var(--rocad-shadow-md);
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-staff-history__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-detail-page__action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rocad-space-2);
  margin-bottom: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-detail-page__action-btn {
  font-size: 15px;
  font-weight: var(--rocad-font-weight-semibold);
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-staff-history__net-salary {
  font-size: 18px;
  font-weight: var(--rocad-font-weight-bold);
  color: var(--rocad-color-success);
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history.rocad-table-page--daily-report .rocad-detail-page__table thead th {
  font-size: 16px;
  font-weight: 700;
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history.rocad-table-page--daily-report .rocad-detail-page__table tbody td {
  font-size: 16px;
  font-weight: 500;
}

#rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-badge {
  font-size: 15px;
  font-weight: var(--rocad-font-weight-semibold);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-detail-page__hero-body {
    flex-direction: column;
    align-items: flex-start;
  }

  #rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-staff-history__photo-wrap {
    width: 120px;
    height: 155px;
  }

  #rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-detail-page__action-grid {
    flex-direction: column;
  }

  #rocad-app.rocad-shell .rocad-detail-page--staff-history .rocad-detail-page__action-btn {
    width: 100%;
    text-align: center;
  }
}

/* Loading note view — complete modal stacking (modal moved to body on show) */
body.loading-note-view-modal-open > #completeModal.rocad-loading-note-view__modal.modal {
  z-index: 1060 !important;
}

body.loading-note-view-modal-open > .modal-backdrop {
  z-index: 1050 !important;
}

body > #completeModal.rocad-loading-note-view__modal.modal {
  z-index: 1060;
}

/* Plant release view — complete modal stacking (modal moved to body on show) */
body.plant-release-view-modal-open > #completeModal.rocad-plant-release-view__modal.modal {
  z-index: 1060 !important;
}

body.plant-release-view-modal-open > .modal-backdrop {
  z-index: 1050 !important;
}

body > #completeModal.rocad-plant-release-view__modal.modal {
  z-index: 1060;
}

/* Overtime history — approve modal stacking only (typography: rocad-table-page--daily-report) */
body > #approveModal.rocad-overtime-history__modal.modal {
  z-index: 10050;
}

/* Session timeout warning modal (moved to body on show) */
body > #rocadSessionTimeoutModal.rocad-session-timeout-modal.modal {
  z-index: 10060;
}

body > .modal-backdrop.rocad-session-timeout-backdrop {
  z-index: 10055;
}

/* ==========================================================================
   Login page — enterprise construction platform (pages/sections/login.php)
   ========================================================================== */

.rocad-login-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #e8eef6 0%, #f3f6fb 40%, #eef2f8 100%);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.rocad-login {
  width: 100%;
  max-width: 1120px;
}

.rocad-login__shell {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 24px 64px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* —— Brand panel —— */
.rocad-login__brand {
  position: relative;
  background: linear-gradient(165deg, #053d85 0%, #064fa8 42%, #084fa8 100%);
  color: #fff;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.rocad-login__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.rocad-login__brand-inner,
.rocad-login__highlights {
  position: relative;
  z-index: 2;
}

.rocad-login__brand-identity {
  margin-bottom: 4px;
}

.rocad-login__logo-plate {
  display: inline-block;
  background: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  margin-bottom: 12px;
  line-height: 0;
}

.rocad-login__logo {
  display: block;
  width: min(280px, 78vw);
  max-width: 100%;
  height: auto;
  margin: 0;
}

.rocad-login__wordmark {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #fff;
}

.rocad-login__kicker {
  margin: 20px 0 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.rocad-login__title {
  margin: 16px 0 0;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.rocad-login__description {
  margin: 16px 0 0;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 42rem;
}

.rocad-login__capabilities {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.rocad-login__capabilities-title {
  margin: 0 0 14px;
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.rocad-login__modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.rocad-login__module {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
}

.rocad-login__module-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
}

.rocad-login__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 16px;
}

.rocad-login__highlight {
  padding: 0 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.rocad-login__highlight:first-child {
  padding-left: 0;
}

.rocad-login__highlight:last-child {
  border-right: none;
  padding-right: 0;
}

.rocad-login__highlight-label {
  display: block;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.rocad-login__highlight-desc {
  display: block;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
}

/* —— Login panel —— */
.rocad-login__panel {
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.rocad-login__card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.08);
}

.rocad-login__panel-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.rocad-login__welcome {
  margin: 0 0 10px;
  color: #064fa8;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 800;
  letter-spacing: 0.28em;
}

.rocad-login__heading {
  margin: 0;
  color: #08172d;
  font-size: clamp(1.625rem, 3.5vw, 2rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rocad-login__panel-lead {
  margin: 10px 0 0;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.55;
  color: #64748b;
}

.rocad-login-form-wrap.login-box,
.rocad-login-form-body.login-box-body {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.rocad-login-form-wrap .login-logo,
.rocad-login-form-wrap .login-box-msg {
  display: none !important;
}

.rocad-login-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.45;
}

.rocad-login-alert .fa {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.125rem;
}

.rocad-login-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.rocad-login-field {
  margin-bottom: 20px;
}

.rocad-login-label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.rocad-login-input {
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.4;
  color: #111827;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rocad-login-input:focus {
  border-color: #064fa8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 79, 168, 0.18);
}

.rocad-login-input-wrap {
  position: relative;
}

.rocad-login-input-wrap--password .rocad-login-input {
  padding-right: 3.25rem;
}

.rocad-login-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.rocad-login-password-toggle:hover,
.rocad-login-password-toggle:focus {
  color: #064fa8;
  background: #f1f5f9;
  outline: none;
}

.rocad-login-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 14px 24px;
  border: none !important;
  border-radius: 10px !important;
  background: #064fa8 !important;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(6, 79, 168, 0.28);
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.rocad-login-submit:hover,
.rocad-login-submit:focus {
  background: #053d85 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(6, 79, 168, 0.32);
}

.rocad-login-submit:disabled,
.rocad-login-submit.is-loading {
  opacity: 0.75;
  cursor: wait;
}

.rocad-login-forgot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 16px;
}

.rocad-login-forgot a {
  color: #064fa8;
  font-weight: 600;
  text-decoration: none;
}

.rocad-login-forgot a:hover,
.rocad-login-forgot a:focus {
  text-decoration: underline;
  outline: none;
}

.rocad-login__help {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  font-size: 16px;
  line-height: 1.55;
  color: #64748b;
  text-align: left;
}

.rocad-login__footer {
  width: 100%;
  max-width: 1120px;
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

@media (min-width: 992px) {
  .rocad-login__shell {
    flex-direction: row;
    min-height: 640px;
  }

  .rocad-login__brand {
    flex: 1 1 52%;
    padding: 40px 40px 28px;
  }

  .rocad-login__panel {
    flex: 1 1 48%;
    padding: 40px 36px;
  }

  .rocad-login__title {
    font-size: clamp(2.75rem, 3.8vw, 4rem);
  }

  .rocad-login__description {
    font-size: 1.125rem;
  }

  .rocad-login__modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
  }

  .rocad-login__heading {
    font-size: 2rem;
  }

  .rocad-login-input {
    min-height: 52px;
    font-size: 17px;
  }

  .rocad-login-submit {
    min-height: 56px;
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  .rocad-login__shell {
    flex-direction: column;
  }

  .rocad-login__brand,
  .rocad-login__panel {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .rocad-login-page {
    justify-content: flex-start;
  }

  .rocad-login__shell {
    border-radius: 16px;
  }

  .rocad-login__brand {
    padding: 20px 18px 18px;
  }

  .rocad-login__panel {
    padding: 20px 16px 24px;
  }

  .rocad-login__card {
    padding: 24px 20px 22px;
    border-radius: 14px;
  }

  .rocad-login__logo {
    width: min(240px, 72vw);
  }

  .rocad-login__wordmark {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .rocad-login__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
    max-width: none;
  }

  .rocad-login__description {
    font-size: 16px;
  }

  .rocad-login__modules {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rocad-login__highlights {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rocad-login__highlight {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 12px;
  }

  .rocad-login__highlight:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .rocad-login__heading {
    font-size: clamp(1.625rem, 6vw, 1.875rem);
  }

  .rocad-login__panel-lead {
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------- */
/* Phase A/B — Shared page navigation (back + breadcrumbs + title)             */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .rocad-page-nav {
  padding: var(--rocad-space-4) var(--rocad-shell-content-gutter) var(--rocad-space-3);
  background: linear-gradient(180deg, #eef2f7 0%, var(--rocad-color-surface) 100%);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-page-nav__inner {
  display: flex;
  flex-direction: column;
  gap: var(--rocad-space-3);
  max-width: 100%;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-page-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  margin: 0;
  border: 1px solid var(--rocad-color-border, #cbd5e1);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--rocad-color-text, #0f172a);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#rocad-app.rocad-shell .rocad-page-nav__back:hover,
#rocad-app.rocad-shell .rocad-page-nav__back:focus {
  border-color: var(--rocad-color-primary, #2563eb);
  color: var(--rocad-color-primary, #2563eb);
  background: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

#rocad-app.rocad-shell .rocad-page-nav__trail {
  max-width: 100%;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-page-nav__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: var(--rocad-font-size-sm, 0.875rem);
  line-height: 1.45;
  list-style: none;
}

#rocad-app.rocad-shell .rocad-page-nav__crumbs > li {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-page-nav__crumbs > li + li::before {
  content: "/";
  padding: 0 0.5rem;
  color: var(--rocad-color-text-muted, #94a3b8);
  pointer-events: none;
}

#rocad-app.rocad-shell .rocad-page-nav__crumbs > li > a {
  color: var(--rocad-color-primary, #2563eb);
  text-decoration: none;
  transition: color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-page-nav__crumbs > li > a:hover,
#rocad-app.rocad-shell .rocad-page-nav__crumbs > li > a:focus {
  color: #1d4ed8;
  text-decoration: underline;
  outline: none;
}

#rocad-app.rocad-shell .rocad-page-nav__crumbs > li.active > span,
#rocad-app.rocad-shell .rocad-page-nav__crumbs > li > span[aria-current="page"] {
  color: var(--rocad-color-text, #0f172a);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 18rem);
}

#rocad-app.rocad-shell .rocad-page-nav__heading {
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-page-nav__title {
  margin: 0;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rocad-color-text, #0f172a);
}

#rocad-app.rocad-shell .rocad-page-nav__subtitle {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--rocad-color-text-muted, #64748b);
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-page-nav {
    padding-top: var(--rocad-space-3);
    padding-bottom: var(--rocad-space-2);
  }

  #rocad-app.rocad-shell .rocad-page-nav__back {
    width: 100%;
    justify-content: center;
  }

  #rocad-app.rocad-shell .rocad-page-nav__crumbs > li.active > span,
  #rocad-app.rocad-shell .rocad-page-nav__crumbs > li > span[aria-current="page"] {
    max-width: 100%;
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------- */
/* Road Works Production Entry — .rocad-production-page                         */
/* Pilot: clearing.php                                                        */
/* -------------------------------------------------------------------------- */

#rocad-app.rocad-shell .rocad-production-page__breadcrumb {
  padding: var(--rocad-space-4) var(--rocad-shell-content-gutter) 0;
  background: linear-gradient(180deg, #eef2f7 0%, var(--rocad-color-surface) 100%);
  border-bottom: none;
}

#rocad-app.rocad-shell .rocad-production-page__breadcrumb .breadcrumb {
  margin-bottom: 0;
  padding: var(--rocad-space-2) 0;
  background: transparent;
  font-size: var(--rocad-font-size-sm);
}

#rocad-app.rocad-shell .rocad-production-page {
  padding: var(--rocad-space-5) var(--rocad-shell-content-gutter) var(--rocad-space-10);
  background: linear-gradient(180deg, var(--rocad-color-surface) 0%, #eef2f7 100%);
}

#rocad-app.rocad-shell .rocad-production-page__intro {
  margin-bottom: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-production-page__title {
  margin: 0 0 var(--rocad-space-2);
  font-size: clamp(1.375rem, 2.5vw, 1.625rem);
  font-weight: var(--rocad-font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--rocad-color-text);
  line-height: 1.25;
}

#rocad-app.rocad-shell .rocad-production-page__lead {
  margin: 0;
  font-size: var(--rocad-font-size-base);
  color: var(--rocad-color-text-muted);
  line-height: 1.55;
  max-width: 42rem;
}

#rocad-app.rocad-shell .rocad-production-panel {
  position: relative;
  margin-bottom: 0;
  background: var(--rocad-color-surface-raised);
  border: 1px solid rgb(255 255 255 / 0.8);
  border-radius: 1rem;
  box-shadow: var(--rocad-form-shadow);
  overflow: visible;
}

#rocad-app.rocad-shell .rocad-production-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 1rem 1rem 0 0;
  background: var(--rocad-form-accent-gradient);
}

#rocad-app.rocad-shell .rocad-production-panel.box {
  border-top-color: transparent;
}

#rocad-app.rocad-shell .rocad-production-panel__header {
  padding: var(--rocad-space-5) var(--rocad-space-6) var(--rocad-space-3);
  border-bottom: 1px solid var(--rocad-color-border, #e2e8f0);
  text-align: left;
}

#rocad-app.rocad-shell .rocad-production-panel__header .box-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--rocad-font-weight-semibold);
  color: var(--rocad-color-text);
  line-height: 1.35;
}

#rocad-app.rocad-shell .rocad-production-panel__subtitle {
  margin: 0.35rem 0 0;
  font-size: var(--rocad-font-size-sm);
  color: var(--rocad-color-text-muted);
  line-height: 1.45;
}

#rocad-app.rocad-shell .rocad-production-panel__body {
  padding: var(--rocad-space-5) var(--rocad-space-6) var(--rocad-space-6);
}

#rocad-app.rocad-shell .rocad-production-page__toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rocad-space-4);
  margin-bottom: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-production-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rocad-space-3);
  flex-shrink: 0;
}

#rocad-app.rocad-shell .rocad-production-page__btn-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.75rem 1.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: var(--rocad-form-accent-gradient);
  border: 1px solid #084298;
  border-radius: 0.625rem;
  box-shadow: 0 2px 4px rgb(8 79 168 / 0.2), 0 6px 16px rgb(8 79 168 / 0.18);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

#rocad-app.rocad-shell .rocad-production-page__btn-report .fa {
  font-size: 1.125rem;
}

#rocad-app.rocad-shell .rocad-production-page__btn-report:hover,
#rocad-app.rocad-shell .rocad-production-page__btn-report:focus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgb(8 79 168 / 0.24), 0 10px 22px rgb(8 79 168 / 0.22);
}

#rocad-app.rocad-shell .rocad-production-page__btn-report:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

#rocad-app.rocad-shell .rocad-production-page__kpi-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--rocad-space-4);
  flex: 1 1 18rem;
  min-width: 0;
}

#rocad-app.rocad-shell .rocad-production-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  flex: 1 1 9rem;
  min-width: 8.5rem;
  min-height: 5.5rem;
  padding: 1rem 1.125rem;
  background: #f8fafc;
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

#rocad-app.rocad-shell .rocad-production-kpi__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rocad-color-text-muted, #475569);
  line-height: 1.35;
}

#rocad-app.rocad-shell .rocad-production-kpi__value {
  font-size: clamp(1.375rem, 4.5vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rocad-color-text, #0f172a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rocad-app.rocad-shell .rocad-production-kpi--length {
  border-left: 4px solid #16a34a;
}

#rocad-app.rocad-shell .rocad-production-kpi--width {
  border-left: 4px solid #2563eb;
}

#rocad-app.rocad-shell .rocad-production-kpi--diesel {
  border-left: 4px solid #7c3aed;
}

#rocad-app.rocad-shell .rocad-production-kpi--area {
  border-left: 4px solid #d97706;
}

#rocad-app.rocad-shell .rocad-production-kpi--volume {
  border-left: 4px solid #0891b2;
}

#rocad-app.rocad-shell .rocad-production-kpi--trip {
  border-left: 4px solid #0d9488;
}

#rocad-app.rocad-shell .rocad-production-kpi--bags {
  border-left: 4px solid #db2777;
}

#rocad-app.rocad-shell .rocad-production-kpi--qty {
  border-left: 4px solid #059669;
}

#rocad-app.rocad-shell .rocad-production-table-wrap {
  margin-top: var(--rocad-space-2);
  border: 1px solid var(--rocad-color-border, #e2e8f0);
  border-radius: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

#rocad-app.rocad-shell .rocad-production-table {
  margin-bottom: 0;
  width: 100%;
  min-width: 56rem;
}

#rocad-app.rocad-shell .rocad-production-table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.75rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rocad-color-text-muted, #64748b);
  background: #f1f5f9;
  border-bottom-width: 2px;
  white-space: nowrap;
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-production-table > tbody > tr > td {
  padding: 0.5rem 0.625rem;
  vertical-align: middle;
}

#rocad-app.rocad-shell .rocad-production-table > tbody > tr:hover > td {
  background: #f8fafc;
}

#rocad-app.rocad-shell .rocad-production-page .rocad-production-table input.form-control,
#rocad-app.rocad-shell .rocad-production-page .rocad-production-table select.form-control {
  width: 100%;
  min-width: 5.5rem;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  font-size: 16px;
  line-height: 1.4;
  border-radius: 0.5rem;
  border-color: var(--rocad-color-border, #cbd5e1);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  box-sizing: border-box;
}

#rocad-app.rocad-shell .rocad-production-page .rocad-production-table input.form-control:focus,
#rocad-app.rocad-shell .rocad-production-page .rocad-production-table select.form-control:focus {
  border-color: var(--rocad-color-primary, #2563eb);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
  outline: none;
}

#rocad-app.rocad-shell .rocad-production-page .rocad-production-table input.form-control[readonly] {
  background: #f1f5f9;
  color: var(--rocad-color-text-muted, #64748b);
}

#rocad-app.rocad-shell .rocad-production-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 0.5rem;
}

#rocad-app.rocad-shell .rocad-production-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rocad-space-3);
  margin-top: var(--rocad-space-5);
  padding-top: var(--rocad-space-4);
  border-top: 1px solid var(--rocad-color-border, #e2e8f0);
}

#rocad-app.rocad-shell .rocad-production-page .rocad-production-actions .rocad-table-page__btn {
  min-height: 48px;
  padding-left: var(--rocad-space-5);
  padding-right: var(--rocad-space-5);
}

#rocad-app.rocad-shell .rocad-production-page .rocad-production-actions .rocad-table-page__btn:focus-visible,
#rocad-app.rocad-shell .rocad-production-page .rocad-production-page__toolbar .rocad-table-page__btn:focus-visible,
#rocad-app.rocad-shell .rocad-production-page .rocad-production-page__btn-report:focus-visible {
  outline: 2px solid var(--rocad-color-primary, #2563eb);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  #rocad-app.rocad-shell .rocad-production-page__toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-production-page__toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-production-page__btn-report {
    order: -1;
    width: 100%;
    min-height: 52px;
  }

  #rocad-app.rocad-shell .rocad-production-page__toolbar .rocad-table-page__btn--secondary {
    width: 100%;
    min-height: 48px;
  }

  #rocad-app.rocad-shell .rocad-production-page__kpi-bar {
    width: 100%;
    gap: var(--rocad-space-3);
  }

  #rocad-app.rocad-shell .rocad-production-kpi {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: calc(50% - 0.375rem);
    min-height: 5.75rem;
    padding: 1rem 1rem;
  }

  #rocad-app.rocad-shell .rocad-production-kpi__value {
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }

  #rocad-app.rocad-shell .rocad-production-panel__body {
    padding: var(--rocad-space-4);
  }

  #rocad-app.rocad-shell .rocad-production-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #rocad-app.rocad-shell .rocad-production-actions .rocad-table-page__btn {
    width: 100%;
  }
}

@media (max-width: 374px) {
  #rocad-app.rocad-shell .rocad-production-kpi {
    flex: 1 1 100%;
    min-width: 100%;
    min-height: 5.25rem;
  }
}