@font-face {
  font-family: "PaperDesk Inter Latin";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("assets/shadcn/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20A0-20CF,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "PaperDesk Inter Latin";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("assets/shadcn/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1EFF,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --pd-font-latin: "PaperDesk Inter Latin", "Inter", "Segoe UI", Arial, sans-serif;
  --pd-font-khmer: "Noto Sans Khmer", "Noto Serif Khmer", "Khmer OS Siemreap", "Khmer OS Battambang", "Khmer OS Content", "Leelawadee UI", "DaunPenh";
  --pd-font-ui: var(--pd-font-khmer), var(--pd-font-latin), system-ui, sans-serif;
  --font-sans: var(--pd-font-ui);
  --font-heading: var(--pd-font-ui);
  --default-font-family: var(--pd-font-ui);
}

html,
body,
.app-shell,
.workspace,
.sidebar,
.detail-panel,
button,
input,
select,
textarea {
  font-family: var(--pd-font-ui) !important;
  letter-spacing: 0 !important;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace) !important;
}

:where([lang="en"], [data-lang="en"], .pd-text-en, .text-en) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

:where(h1[lang="en"], [data-lang="en"] h1, .pd-type-h1) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

:where(h2[lang="en"], [data-lang="en"] h2, .pd-type-h2) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

:where(h3[lang="en"], [data-lang="en"] h3, .pd-type-h3) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

:where(h4[lang="en"], [data-lang="en"] h4, .pd-type-h4) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

:where(p[lang="en"], [data-lang="en"] p, .pd-type-p) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.625 !important;
  letter-spacing: 0 !important;
}

:where(.pd-type-lead) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  color: var(--muted-foreground, #64748b) !important;
  letter-spacing: 0 !important;
}

:where(.pd-type-large) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

:where(small[lang="en"], [data-lang="en"] small, .pd-type-small) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

:where(.pd-type-muted) {
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: var(--muted-foreground, #64748b) !important;
  letter-spacing: 0 !important;
}

/* USER UPDATE: smooth shell interaction guard for heavy table/drawer/sidebar screens. */
body.paperdesk-shell-is-scrolling :where(
  .workspace,
  .content-grid,
  .data-grid-shell,
  .data-grid-scroll,
  .app-data-grid,
  .menu-grid-adapter,
  .documents-grid-adapter,
  .detail-panel,
  .sidebar
) {
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
}

body.paperdesk-shell-is-scrolling :where(
  .workspace *,
  .detail-panel *,
  .sidebar *,
  .app-data-grid *,
  .data-grid-scroll *
) {
  transition-duration: 0ms !important;
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
}

body.paperdesk-shell-is-scrolling :where(
  .officials-carousel-slide,
  .officials-carousel-avatar,
  .documents-grid-summary-chart-card,
  .documents-grid-summary-card,
  .paperdesk-composition-definition-card,
  .paperdesk-composition-assignment-card,
  .inspector-discipline-record,
  .sidebar-account-menu,
  .detail-panel
) {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

:where(
  .app-data-grid,
  .menu-grid-adapter,
  .documents-grid-adapter,
  .paperdesk-composition-assignment-grid
) {
  contain: layout paint;
}

/* USER UPDATE: app-level device view modes for computer, tablet, and phone checks. */
html.paperdesk-device-preview-mode,
html.paperdesk-device-preview-mode body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.paperdesk-device-preview-mode {
  display: grid !important;
  place-items: center !important;
  min-height: 100dvh !important;
  padding: 24px !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0)),
    #eef2f7 !important;
}

html.paperdesk-device-preview-mode .app-shell[data-slot="sidebar-wrapper"],
html.paperdesk-device-preview-mode body[class$="-theme"] .app-shell[data-slot="sidebar-wrapper"] {
  position: relative !important;
  isolation: isolate !important;
  width: min(var(--paperdesk-device-view-width, 820px), calc(100vw - 48px)) !important;
  max-width: min(var(--paperdesk-device-view-width, 820px), calc(100vw - 48px)) !important;
  min-width: 0 !important;
  height: min(var(--paperdesk-device-view-height, 1080px), calc(100dvh - 48px)) !important;
  min-height: 0 !important;
  max-height: min(var(--paperdesk-device-view-height, 1080px), calc(100dvh - 48px)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 24px !important;
  background: var(--pd-sidebar-background, #fafafa) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2), 0 6px 20px rgba(15, 23, 42, 0.12) !important;
  transform: translateZ(0) !important;
}

html[data-paperdesk-device-mode="tablet"] .app-shell[data-slot="sidebar-wrapper"],
html[data-paperdesk-device-mode="tablet"] body[class$="-theme"] .app-shell[data-slot="sidebar-wrapper"] {
  --pd-app-frame-gap: 8px;
  --paperdesk-device-view-width: 820px;
  --paperdesk-device-view-height: 1080px;
}

html[data-paperdesk-device-mode="phone"] .app-shell[data-slot="sidebar-wrapper"],
html[data-paperdesk-device-mode="phone"] body[class$="-theme"] .app-shell[data-slot="sidebar-wrapper"] {
  --pd-app-frame-gap: 6px;
  --pd-responsive-sidebar-column: 0px;
  --paperdesk-device-view-width: 390px;
  --paperdesk-device-view-height: 844px;
  grid-template-columns: 0 minmax(0, 1fr) !important;
  width: min(390px, calc(100vw - 24px)) !important;
  max-width: min(390px, calc(100vw - 24px)) !important;
  height: min(844px, calc(100dvh - 24px)) !important;
  max-height: min(844px, calc(100dvh - 24px)) !important;
  border-radius: 28px !important;
}

html.paperdesk-device-preview-mode .sidebar[data-slot="sidebar"][data-variant="inset"],
html.paperdesk-device-preview-mode body[class$="-theme"] .sidebar[data-slot="sidebar"][data-variant="inset"] {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

html.paperdesk-device-preview-mode .sidebar-gap[data-slot="sidebar-gap"],
html.paperdesk-device-preview-mode body[class$="-theme"] .sidebar-gap[data-slot="sidebar-gap"] {
  min-height: 100% !important;
}

html.paperdesk-device-preview-mode .workspace[data-slot="sidebar-inset"],
html.paperdesk-device-preview-mode body[class$="-theme"] .workspace[data-slot="sidebar-inset"] {
  height: calc(100% - (var(--pd-app-frame-gap, 8px) * 2)) !important;
  max-height: calc(100% - (var(--pd-app-frame-gap, 8px) * 2)) !important;
  min-height: 0 !important;
}

html[data-paperdesk-device-mode="phone"] .sidebar-gap[data-slot="sidebar-gap"],
html[data-paperdesk-device-mode="phone"] body[class$="-theme"] .sidebar-gap[data-slot="sidebar-gap"] {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
}

html[data-paperdesk-device-mode="phone"] .workspace[data-slot="sidebar-inset"],
html[data-paperdesk-device-mode="phone"] body[class$="-theme"] .workspace[data-slot="sidebar-inset"] {
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  height: calc(100% - 12px) !important;
  max-height: calc(100% - 12px) !important;
  min-height: 0 !important;
  margin: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.paperdesk-device-preview-mode .app-shell.sidebar-offcanvas-open[data-slot="sidebar-wrapper"]::before,
html.paperdesk-device-preview-mode body[class$="-theme"] .app-shell.sidebar-offcanvas-open[data-slot="sidebar-wrapper"]::before {
  position: absolute !important;
  inset: 0 !important;
}

html.paperdesk-device-preview-mode .app-shell.sidebar-offcanvas-open .sidebar[data-slot="sidebar"][data-collapsible="offcanvas"],
html.paperdesk-device-preview-mode body[class$="-theme"] .app-shell.sidebar-offcanvas-open .sidebar[data-slot="sidebar"][data-collapsible="offcanvas"],
html.paperdesk-device-preview-mode .app-shell.sidebar-offcanvas-open.sidebar-rail-mode .sidebar[data-slot="sidebar"][data-collapsible="offcanvas"],
html.paperdesk-device-preview-mode body[class$="-theme"] .app-shell.sidebar-offcanvas-open.sidebar-rail-mode .sidebar[data-slot="sidebar"][data-collapsible="offcanvas"] {
  width: min(var(--pd-shadcn-sidebar-width, 288px), calc(100% - 32px)) !important;
  min-width: min(var(--pd-shadcn-sidebar-width, 288px), calc(100% - 32px)) !important;
  max-width: min(var(--pd-shadcn-sidebar-width, 288px), calc(100% - 32px)) !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

#floatingDeviceViewButton {
  --pd-floating-unified-bg: #ffffff;
  --pd-floating-unified-fg: #18181b;
  --pd-floating-unified-border: #e4e4e7;
  --pd-floating-unified-hover-bg: #f4f4f5;
  --pd-floating-unified-ring: rgba(161, 161, 170, 0.5);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(40px * var(--floating-button-scale, 1)) !important;
  min-width: calc(40px * var(--floating-button-scale, 1)) !important;
  max-width: calc(40px * var(--floating-button-scale, 1)) !important;
  height: calc(40px * var(--floating-button-scale, 1)) !important;
  min-height: calc(40px * var(--floating-button-scale, 1)) !important;
  max-height: calc(40px * var(--floating-button-scale, 1)) !important;
  padding: 0 !important;
  border: 1px solid var(--pd-floating-unified-border) !important;
  border-radius: calc(8px * var(--floating-button-scale, 1)) !important;
  background: var(--pd-floating-unified-bg) !important;
  color: var(--pd-floating-unified-fg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

#floatingDeviceViewButton:hover:not(.is-dragging):not(.is-move-locked) {
  background: var(--pd-floating-unified-hover-bg) !important;
  color: var(--pd-floating-unified-fg) !important;
}

#floatingDeviceViewButton:focus-visible {
  outline: none !important;
  border-color: #a1a1aa !important;
  box-shadow: 0 0 0 3px var(--pd-floating-unified-ring) !important;
}

#floatingDeviceViewButton[data-state="tablet"],
#floatingDeviceViewButton[data-state="phone"],
#floatingDeviceViewButton[aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}

#floatingDeviceViewButton .floating-device-view-icon-wrap {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: calc(20px * var(--floating-button-scale, 1)) !important;
  height: calc(20px * var(--floating-button-scale, 1)) !important;
}

#floatingDeviceViewButton .floating-device-view-icon {
  width: calc(18px * var(--floating-button-scale, 1)) !important;
  height: calc(18px * var(--floating-button-scale, 1)) !important;
}

#floatingDeviceViewButton .floating-device-view-glyph {
  position: absolute !important;
  right: -3px !important;
  bottom: -3px !important;
  display: grid !important;
  place-items: center !important;
  width: 12px !important;
  height: 12px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1d4ed8 !important;
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body:has(.app-shell:not(.sidebar-collapsed)) #floatingDeviceViewButton,
body:has(.app-shell.sidebar-collapsed) #floatingDeviceViewButton {
  left: 18px !important;
  right: auto !important;
  bottom: 282px !important;
}

body:has(.app-shell:not(.sidebar-collapsed)) #floatingDeviceViewButton {
  left: max(18px, calc(var(--nav-expanded-width, 340px) - 58px)) !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-settings:empty {
  display: none !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-settings:not(:empty) {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pd-settings-border-soft, #e2e8f0) !important;
  border-radius: 10px !important;
  background: var(--pd-settings-panel, #ffffff) !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-settings-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-settings-header h4 {
  margin: 0 !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-settings-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-option-group {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-option {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--pd-settings-border-soft, #e2e8f0) !important;
  border-radius: 8px !important;
  background: var(--pd-settings-panel-soft, #f8fafc) !important;
  color: var(--pd-settings-text, #0f172a) !important;
  text-align: left !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-option.active,
#settingsDialog.settings-dialog .paperdesk-device-view-option[aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.42) !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 3px 0 0 #2563eb !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-option-icon {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  font-family: var(--pd-font-latin), system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

#settingsDialog.settings-dialog .paperdesk-device-view-option-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
}

@media (max-width: 520px) {
  #settingsDialog.settings-dialog .paperdesk-device-view-option-group {
    grid-template-columns: 1fr !important;
  }
}

/* Login lock readability fallback: keep the secure shell crisp after refresh.
   The underlying app shell is already blurred while locked; avoid applying a
   large backdrop blur to the login card itself because some browser/GPU paths
   render the whole lock surface as washed-out text. */
html.paperdesk-protected-login-required .app-lock-card.app-lock-card-v2,
body.app-is-locked .app-lock-card.app-lock-card-v2,
body:has(#appLockOverlay) .app-lock-card.app-lock-card-v2 {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  background: rgba(255, 255, 255, 0.97) !important;
}

.app-lock-card.app-lock-card-v2,
.app-lock-card.app-lock-card-v2 input,
.app-lock-card.app-lock-card-v2 button {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}