/*
 * CaseGo — Pengurusan Kes & Rekod Digital
 * Original system concept and workflow coordination: Frankly F. C.
 * Jabatan Kerja Raya Daerah Tuaran.
 */
/* Reserved for mobile refinements. 018B keeps existing responsive rules from components.css for compatibility. */

/* CG-UI-018 — Smartphone App Density + Unified Dashboard */
/* =========================================================
   CASEGO — UNIFIED DASHBOARD METRIC GRID
   Desktop : maksimum 4 kad sebaris
   3 kad   : kekal 3 kad sebaris
   Mobile  : kekal 3 kad sebaris
   ========================================================= */

.cg-unified-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

/* Jika dashboard hanya mempunyai tepat 6 kad */
.cg-unified-metric-grid:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Jika dashboard hanya mempunyai tepat 3 kad */
.cg-unified-metric-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Smartphone — 3 kad sebaris seperti design semasa */
@media (max-width: 720px) {
    .cg-unified-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .cg-unified-metric-grid:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cg-unified-metric{min-height:110px;border:1px solid var(--line,#d7e1ec);border-left:7px solid #2c92d2;border-radius:18px;background:#fff;text-align:left;padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;color:inherit;cursor:pointer}.cg-unified-metric span{font-weight:600;color:#52657d}.cg-unified-metric strong{font-size:2rem;color:#0b2b58}.cg-unified-metric small{color:#71839a}.cg-info-other-name{margin-top:12px}
@media(max-width:720px){
  .cg-screen{padding:10px!important}.cg-head,.cg-dashboard-head-clean{padding:16px!important;border-radius:16px!important;margin-bottom:12px!important}.cg-head h1,.cg-dashboard-head-clean h1{font-size:1.28rem!important;line-height:1.25!important}.cg-head p,.cg-dashboard-head-clean p{font-size:.78rem!important;line-height:1.45!important}.cg-head-actions .cg-btn{min-height:34px!important;padding:7px 16px!important;font-size:.78rem!important}
  .cg-unified-metric-grid,.cg-kpi-grid,.cg-kpi-grid-compact,.cg-de-summary-grid,.cg-ee-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important}.cg-unified-metric,.cg-kpi,.cg-kpi-compact,.cg-de-summary-card,.cg-ee-summary-card{min-height:94px!important;padding:11px 10px!important;border-radius:13px!important}.cg-unified-metric span,.cg-kpi span,.cg-de-summary-card span,.cg-ee-summary-card span{font-size:.64rem!important;line-height:1.2!important}.cg-unified-metric strong,.cg-kpi strong,.cg-de-summary-card strong,.cg-ee-summary-card strong{font-size:1.35rem!important;line-height:1!important}.cg-unified-metric small,.cg-kpi small,.cg-de-summary-card small,.cg-ee-summary-card small{font-size:.61rem!important;line-height:1.2!important}
  .cg-panel{border-radius:15px!important;padding:14px!important;margin-bottom:12px!important}.cg-panel h2,.cg-panel h3{font-size:1rem!important}.cg-panel-subtitle,.cg-panel p{font-size:.76rem!important}.cg-workflow-task-board{gap:10px!important}.cg-workflow-task-group{padding:10px!important;border-radius:13px!important}
  .cg-record-table thead{display:none!important}.cg-record-table,.cg-record-table tbody,.cg-record-table tr,.cg-record-table td{display:block!important;width:100%!important}.cg-record-table tr{margin:0 0 10px!important;padding:11px!important;border:1px solid #d9e3ed!important;border-radius:13px!important;background:#fff!important}.cg-record-table td{border:0!important;padding:3px 0!important;font-size:.76rem!important;overflow-wrap:anywhere!important}.cg-record-table td.title-col{font-weight:600!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.cg-record-table td:empty{display:none!important}
}


/* CG-UI-018H4 — authoritative non-smartphone dashboard grid.
   Keep smartphone 3-up. Exact 3 desktop cards stay 3-up. */
@media (min-width: 721px) {
  body.cg-route-app .cg-dashboard-lite .cg-unified-metric-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid,
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body.cg-route-app .cg-dashboard-lite .cg-unified-metric-grid:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid:has(> :nth-child(3):last-child),
  body.cg-route-app .cg-dashboard-lite .cg-kpi-grid-compact:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   CG-SEC-002E — Smartphone hamburger drawer FIX
   Overrides legacy CG-UI-018H2 rule that hard-hides #cgSidebar.
   Desktop behaviour is untouched.
   ========================================================= */
@media (max-width: 720px) {
  html body.cg-route-app #cgSidebar,
  html body:not(.cg-public-page) #cgSidebar {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(82vw, 280px) !important;
    min-width: min(82vw, 280px) !important;
    max-width: 280px !important;
    height: 100dvh !important;
    z-index: 1200 !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
  }

  html body.cg-mobile-sidebar-open #cgSidebar {
    transform: translateX(0) !important;
    box-shadow: 18px 0 45px rgba(15,23,42,.22) !important;
  }

  html body.cg-mobile-sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(15,23,42,.28);
  }

  #cgMenuBtn {
    position: relative;
    z-index: 1210;
  }

  #cgSidebarToggle {
    display: none !important;
  }
}

/* =========================================================
   CG-UI-006 — MOBILE TOPBAR COMPACT
   Smartphone only:
   ☰ + Global Search share one row.
   User chip/logout are hidden from topbar because Profile remains
   available through the existing bottom navigation.
   Hamburger/off-canvas behavior is unchanged.
   ========================================================= */
@media (max-width: 720px) {
  body.cg-route-app #cgHeader,
  body.cg-route-app .cg-header,
  body:not(.cg-public-page) #cgHeader,
  body:not(.cg-public-page) .cg-header {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: 42px !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 6px 8px !important;
    min-height: 54px !important;
    height: 54px !important;
  }

  body.cg-route-app #cgMenuBtn,
  body:not(.cg-public-page) #cgMenuBtn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  body.cg-route-app #cgHeader .cg-search,
  body.cg-route-app .cg-header .cg-search,
  body:not(.cg-public-page) #cgHeader .cg-search,
  body:not(.cg-public-page) .cg-header .cg-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  body.cg-route-app #cgHeader .cg-user,
  body.cg-route-app .cg-header .cg-user,
  body:not(.cg-public-page) #cgHeader .cg-user,
  body:not(.cg-public-page) .cg-header .cg-user,
  body.cg-route-app #cgHeaderLogout,
  body.cg-route-app .cg-header-logout,
  body:not(.cg-public-page) #cgHeaderLogout,
  body:not(.cg-public-page) .cg-header-logout {
    display: none !important;
  }
}

/* =========================================================
   CG-UI-007A — SMARTPHONE SIDEBAR FIT / DESKTOP RESTORED
   Scope: horizontal density only.
   Top/bottom spacing, menu vertical rhythm, user footer and
   smartphone drawer behaviour remain unchanged.
   ========================================================= */

/* Desktop: preserve the original full sidebar.
   CG-UI-007A intentionally does not narrow desktop. */

/* Smartphone drawer: fit closer to content horizontally only.
   Keep top/bottom, 100dvh, scrolling, overlay and off-canvas logic intact. */
@media (max-width: 720px) {
  html body.cg-route-app #cgSidebar,
  html body:not(.cg-public-page) #cgSidebar {
    width: min(72vw, 244px) !important;
    min-width: min(72vw, 244px) !important;
    max-width: 244px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-shell,
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-clean,
  body:not(.cg-public-page) .cg-sidebar .cg-logo-wordmark-sidebar-centered {
    width: 184px !important;
    max-width: 184px !important;
  }

  body:not(.cg-public-page) .cg-side-nav button {
    padding-left: 14px !important;
    padding-right: 8px !important;
  }
}

/* =========================================================
   CG-UI-008 — SMARTPHONE BOTTOM NAV ICON ALIGNMENT
   Alignment only. Preserve navigation height, safe-area,
   active state, routes and five-item structure.
   ========================================================= */
@media (max-width: 720px) {
  #cgBottomNav .cg-bottom-nav-item,
  .cg-bottom-nav .cg-bottom-nav-item,
  #cgBottomNav a,
  #cgBottomNav button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #cgBottomNav .cg-bottom-nav-item > svg,
  #cgBottomNav .cg-bottom-nav-item > i,
  #cgBottomNav .cg-bottom-nav-item .cg-nav-icon,
  .cg-bottom-nav .cg-bottom-nav-item > svg,
  .cg-bottom-nav .cg-bottom-nav-item > i,
  .cg-bottom-nav .cg-bottom-nav-item .cg-nav-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #cgBottomNav .cg-bottom-nav-item .cg-nav-label,
  #cgBottomNav .cg-bottom-nav-item span:last-child,
  .cg-bottom-nav .cg-bottom-nav-item .cg-nav-label,
  .cg-bottom-nav .cg-bottom-nav-item span:last-child {
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* CG-ACTIVITY-006 */
.cg-activity-page-head{padding-bottom:.75rem!important;margin-bottom:.75rem!important}.cg-op-activity-panel{margin-top:.75rem!important;padding-top:.75rem!important}

/* =========================================================
   CASEGO-RENEWAL-002 — MODULE 2 PART 1
   Smartphone Responsive Foundation
   Scope: safe-area, touch targets, form stacking and overflow safety.
   No workflow, API, database or permission changes.
   ========================================================= */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body:not(.cg-public-page) {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) #cgHeader {
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  }

  #cgMain,
  .cg-main,
  .cg-screen,
  .cg-panel,
  .cg-card,
  .cg-workspace,
  .cg-form,
  .cg-form-grid,
  .cg-field,
  .cg-field-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cg-form-grid,
  .cg-field-row,
  .cg-grid-2,
  .cg-grid-3,
  .cg-detail-grid,
  .cg-workspace-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 104px;
    resize: vertical;
  }

  button,
  .cg-btn,
  .cg-icon-btn,
  .cg-action-btn,
  .cg-bottom-nav-item,
  .cg-side-nav button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .cg-btn,
  .cg-action-btn,
  .cg-form-actions button,
  .cg-panel-actions button {
    min-height: 44px !important;
  }

  .cg-form-actions,
  .cg-panel-actions,
  .cg-head-actions,
  .cg-toolbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .cg-form-actions > *,
  .cg-panel-actions > * {
    flex: 1 1 140px;
  }

  .cg-table-wrap,
  .cg-record-table-wrap,
  .cg-data-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  img,
  iframe,
  embed,
  object,
  canvas,
  video {
    max-width: 100%;
  }

  #cgBottomNav,
  .cg-bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .cg-toast {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 380px) {
  .cg-unified-metric-grid,
  .cg-kpi-grid,
  .cg-kpi-grid-compact,
  .cg-de-summary-grid,
  .cg-ee-summary-grid {
    gap: 6px !important;
  }

  .cg-unified-metric,
  .cg-kpi,
  .cg-kpi-compact,
  .cg-de-summary-card,
  .cg-ee-summary-card {
    padding: 9px 7px !important;
  }
}

/* =========================================================
   CASEGO-RENEWAL-002 — MODULE 2 PART 2
   Mobile Navigation & Header Polish
   Scope: compact header, stable bottom navigation, keyboard-safe spacing.
   No workflow, API, database or permission changes.
   ========================================================= */
@media (max-width: 720px) {
  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) #cgHeader {
    min-height: 56px !important;
    height: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  #cgHeader .cg-brand,
  #cgHeader .cg-header-brand {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  #cgHeader .cg-brand img,
  #cgHeader .cg-header-brand img,
  #cgHeader .cg-logo-wordmark-shell {
    max-width: 96px !important;
    max-height: 34px !important;
    object-fit: contain !important;
  }

  #cgHeader .cg-search,
  #cgHeader .cg-global-search,
  #cgHeader input[type="search"] {
    min-width: 0 !important;
    width: 100% !important;
    height: 40px !important;
  }

  #cgHeader .cg-header-actions,
  #cgHeader .cg-user-actions {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }

  #cgHeader .cg-icon-btn,
  #cgHeader button[aria-label] {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  body.cg-route-app #cgMain,
  body:not(.cg-public-page) #cgMain {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cg-route-app #cgBottomNav,
  body.cg-route-app .cg-bottom-nav,
  body:not(.cg-public-page) #cgBottomNav,
  body:not(.cg-public-page) .cg-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 6px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  #cgBottomNav .cg-bottom-nav-item,
  .cg-bottom-nav .cg-bottom-nav-item,
  #cgBottomNav button,
  .cg-bottom-nav button {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 4px 2px !important;
    border-radius: 16px !important;
    line-height: 1.1 !important;
  }

  #cgBottomNav .cg-nav-label,
  .cg-bottom-nav .cg-nav-label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  #cgBottomNav .cg-nav-icon,
  .cg-bottom-nav .cg-nav-icon {
    line-height: 1 !important;
  }

  body.cg-keyboard-open #cgBottomNav,
  body.cg-keyboard-open .cg-bottom-nav {
    display: none !important;
  }

  body.cg-keyboard-open #cgMain {
    padding-bottom: 16px !important;
  }
}

@media (max-width: 360px) {
  #cgHeader .cg-logo-wordmark-shell,
  #cgHeader .cg-brand img,
  #cgHeader .cg-header-brand img {
    max-width: 78px !important;
  }

  #cgBottomNav .cg-nav-label,
  .cg-bottom-nav .cg-nav-label {
    font-size: 8.5px !important;
  }
}

/* =========================================================
   CASEGO-RENEWAL-002 — MODULE 2 PART 3
   Mobile Workspace & Form Usability Polish
   Scope: operational cards, forms, upload controls, detail panels and actions.
   No workflow, API, database or permission changes.
   ========================================================= */
@media (max-width: 720px) {
  .cg-screen,
  .cg-workspace,
  .cg-record-screen,
  .cg-pu-workspace,
  .cg-outgoing-register-screen,
  .cg-activity-workspace,
  .cg-file-registry-screen,
  .cg-officer-kpi-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .cg-head,
  .cg-dashboard-head-clean,
  .cg-activity-page-head,
  .cg-panel-head,
  .cg-softcopy-head,
  .cg-pb-inherited-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .cg-head,
  .cg-dashboard-head-clean,
  .cg-activity-page-head {
    flex-direction: column !important;
  }

  .cg-head-actions,
  .cg-activity-toolbar,
  .cg-file-registry-actions,
  .cg-notification-card-actions,
  .cg-pb-activation-actions {
    width: 100% !important;
  }

  .cg-head-actions > *,
  .cg-file-registry-actions > *,
  .cg-pb-activation-actions > * {
    flex: 1 1 132px !important;
  }

  .cg-panel,
  .cg-card,
  .cg-pu-register-card,
  .cg-ee-decision-card,
  .cg-tracking-card,
  .cg-notification-card,
  .cg-file-registry-card,
  .cg-softcopy-panel,
  .cg-qr-slip-panel,
  .cg-password-change-card-008b10i {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  .cg-form,
  .cg-pb-workspace-form,
  .cg-ee-decision-form {
    gap: 14px !important;
  }

  .cg-form-row,
  .cg-info-grid,
  .cg-file-registry-detail-grid,
  .cg-profile-info-grid-008b10i,
  .cg-profile-security-grid-008b10i,
  .cg-receipt-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .cg-input,
  .cg-select,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    border-radius: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  input[type="file"] {
    min-height: 48px !important;
    padding: 8px !important;
    line-height: 1.25 !important;
  }

  input[type="file"]::file-selector-button {
    min-height: 36px;
    margin-right: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .cg-field-help,
  .cg-form-note,
  .cg-muted,
  .cg-muted-text,
  .cg-panel-subtitle {
    line-height: 1.45 !important;
  }

  .cg-officer-checkbox-grid,
  .cg-officer-grid,
  .cg-pb-inherited-grid,
  .cg-division-grid,
  .cg-ee-decision-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cg-officer-card,
  .cg-pb-inherited-person,
  .cg-info-recipient-group {
    min-height: 48px !important;
    padding: 10px 12px !important;
  }

  .cg-status-box,
  .cg-role-focus,
  .cg-role-focus-compact,
  .cg-pu-next-step,
  .cg-activation-note,
  .cg-pj-action-note,
  .cg-decision-note {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .cg-softcopy-item,
  .cg-notification-card,
  .cg-admin-info-row,
  .cg-op-activity-row,
  .cg-activity-compact-list > * {
    min-width: 0 !important;
  }

  .cg-softcopy-link,
  .cg-readable-text,
  .cg-about-text,
  .cg-file-registry-card-detail,
  .cg-notification-card-main {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .cg-pagination,
  .cg-pagination-controls,
  .cg-activity-pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .cg-page-btn,
  .cg-pagination button,
  .cg-pagination-controls button {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .cg-primary-action,
  .cg-login-submit,
  .cg-pu-register-card .cg-btn,
  .cg-outgoing-register-screen .cg-form-actions .cg-btn {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .cg-panel,
  .cg-card,
  .cg-pu-register-card,
  .cg-ee-decision-card,
  .cg-tracking-card,
  .cg-notification-card,
  .cg-file-registry-card,
  .cg-softcopy-panel,
  .cg-qr-slip-panel {
    padding: 12px !important;
  }

  .cg-head-actions > *,
  .cg-form-actions > *,
  .cg-panel-actions > *,
  .cg-pb-activation-actions > * {
    flex-basis: 100% !important;
  }
}

/* =========================================================
   CASEGO-RENEWAL-002 — MODULE 2 PART 4
   Mobile Modal, Detail View & Landscape Stability
   Scope: dialogs, overlays, previews, timelines and compact landscape use.
   No workflow, API, database or permission changes.
   ========================================================= */
@media (max-width: 720px) {
  .cg-modal,
  .cg-dialog,
  .cg-confirm-dialog,
  .cg-preview-dialog,
  .cg-sheet-dialog,
  [role="dialog"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 16px auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .cg-modal-body,
  .cg-dialog-body,
  .cg-preview-body,
  .cg-sheet-dialog-body,
  [role="dialog"] .cg-panel-body {
    max-height: calc(100dvh - 132px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cg-modal-head,
  .cg-dialog-head,
  .cg-preview-head,
  .cg-modal-actions,
  .cg-dialog-actions,
  .cg-preview-actions {
    padding: 12px 14px !important;
  }

  .cg-modal-actions,
  .cg-dialog-actions,
  .cg-preview-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .cg-modal-actions > *,
  .cg-dialog-actions > *,
  .cg-preview-actions > * {
    flex: 1 1 132px !important;
    min-height: 44px !important;
  }

  .cg-document-preview,
  .cg-softcopy-preview,
  .cg-attachment-preview,
  .cg-pdf-preview,
  .cg-image-preview {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 240px !important;
    border-radius: 12px !important;
    overflow: auto !important;
  }

  .cg-document-preview iframe,
  .cg-softcopy-preview iframe,
  .cg-attachment-preview iframe,
  .cg-pdf-preview iframe,
  .cg-document-preview img,
  .cg-softcopy-preview img,
  .cg-attachment-preview img,
  .cg-image-preview img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .cg-timeline,
  .cg-activity-timeline,
  .cg-case-timeline {
    padding-left: 0 !important;
  }

  .cg-timeline-item,
  .cg-activity-item,
  .cg-case-timeline-item {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .cg-table-wrap,
  .cg-data-table-wrap,
  .cg-list-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cg-table-wrap table,
  .cg-data-table-wrap table,
  .cg-list-table-wrap table {
    min-width: 680px;
  }

  .cg-sticky-actions,
  .cg-mobile-sticky-actions {
    position: sticky !important;
    bottom: calc(var(--cg-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 20 !important;
    padding: 10px !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 420px) {
  .cg-modal-actions > *,
  .cg-dialog-actions > *,
  .cg-preview-actions > * {
    flex-basis: 100% !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #cgHeader,
  .cg-header {
    min-height: 48px !important;
  }

  #cgMain,
  .cg-main {
    padding-top: 8px !important;
    padding-bottom: 58px !important;
  }

  #cgBottomNav,
  .cg-bottom-nav {
    min-height: 52px !important;
  }

  .cg-modal,
  .cg-dialog,
  .cg-confirm-dialog,
  .cg-preview-dialog,
  [role="dialog"] {
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }
}

/* DEV-CG-DASH-001B — Mobile spacing/header refinement. */
@media (max-width:720px){
  body.cg-route-app #cgMain,
  body:not(.cg-public-page) #cgMain{
    padding-bottom:calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) #cgHeader{
    padding-left:12px !important;
    padding-right:12px !important;
    gap:10px !important;
  }

  #cgHeader .cg-search,
  #cgHeader .cg-global-search{
    min-height:38px !important;
    height:38px !important;
  }

  #cgHeader .cg-search input,
  #cgHeader .cg-global-search input,
  #cgHeader input[type="search"]{
    font-size:13px !important;
  }
}

@media (max-width:390px){
  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) #cgHeader{
    gap:7px !important;
    padding-left:9px !important;
    padding-right:9px !important;
  }
}


/* DEV-CG-DASH-002C mobile shell refinement */
@media(max-width:720px){
  #cgHeader{grid-template-columns:auto minmax(0,1fr)!important}
  #cgHeader .cg-search{grid-column:2!important}
}

/* =========================================================
   DEV-CG-DARK-002D — Mobile Layout Refinement
   Header, drawer, bottom navigation and dashboard density.
   ========================================================= */
@media (max-width:720px){
  body.cg-route-app #cgHeader,
  body:not(.cg-public-page) #cgHeader,
  body.cg-route-app .cg-header,
  body:not(.cg-public-page) .cg-header{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) 38px!important;
    grid-template-rows:42px!important;
    gap:8px!important;
    padding:6px 10px!important;
    min-height:54px!important;
    height:54px!important;
    overflow:hidden!important;
  }
  #cgMenuBtn{
    grid-column:1!important;
    grid-row:1!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    margin:0!important;
  }
  #cgHeaderSearch,
  #cgHeader .cg-search,
  .cg-header .cg-search{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    margin:0!important;
  }
  #cgHeaderSearch input,
  #cgHeader .cg-search input{
    min-width:0!important;
    padding-left:12px!important;
    font-size:13px!important;
  }
  #cgHeaderSearch button,
  #cgHeader .cg-search button{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
  }
  #cgHeaderClock,
  #cgHeader .cg-header-clock,
  #cgHeader .cg-user,
  #cgHeaderLogout{
    display:none!important;
  }
  #cgHeader .cg-header-actions{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  #cgThemeToggle,
  #cgHeader .cg-theme-toggle{
    display:inline-flex!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    padding:0!important;
    border-radius:12px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #cgThemeToggle .cg-theme-toggle-label{display:none!important;}
  #cgThemeToggle .cg-theme-toggle-icon{font-size:16px!important;}

  html body.cg-route-app #cgSidebar,
  html body:not(.cg-public-page) #cgSidebar{
    width:min(84vw,306px)!important;
    min-width:min(84vw,306px)!important;
    max-width:306px!important;
    height:100dvh!important;
    padding-left:12px!important;
    padding-right:12px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body.cg-mobile-sidebar-open::after{
    background:rgba(2,8,23,.66)!important;
    backdrop-filter:blur(1.5px)!important;
  }
  body.cg-mobile-sidebar-open #cgBottomNav,
  body.cg-mobile-sidebar-open .cg-bottom-nav{
    display:none!important;
  }

  body.cg-route-app #cgBottomNav,
  body.cg-route-app .cg-bottom-nav,
  body:not(.cg-public-page) #cgBottomNav,
  body:not(.cg-public-page) .cg-bottom-nav{
    left:8px!important;
    right:8px!important;
    bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
    min-height:58px!important;
    height:58px!important;
    padding:5px!important;
    border-radius:20px!important;
    gap:2px!important;
  }
  #cgBottomNav button,
  .cg-bottom-nav button,
  #cgBottomNav .cg-bottom-nav-item,
  .cg-bottom-nav .cg-bottom-nav-item{
    min-height:46px!important;
    height:46px!important;
    padding:3px 2px!important;
    border-radius:14px!important;
  }
  #cgBottomNav .cg-nav-icon,
  .cg-bottom-nav .cg-nav-icon{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    flex-basis:18px!important;
  }
  #cgBottomNav .cg-nav-label,
  .cg-bottom-nav .cg-nav-label{
    font-size:8.5px!important;
    line-height:1.05!important;
  }
  body.cg-route-app #cgMain,
  body:not(.cg-public-page) #cgMain{
    padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
  }

  #cgMain .cg-screen,
  #cgMain .cg-dashboard-lite,
  #cgMain .cg-premium-home{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #cgMain .cg-premium-home{
    gap:10px!important;
  }
  #cgMain .cg-premium-welcome,
  #cgMain .cg-premium-insight-card,
  #cgMain .cg-announcement-panel{
    border-radius:18px!important;
  }
  #cgMain .cg-announcement-item p,
  #cgMain .cg-announcement-item .cg-announcement-preview,
  #cgMain .cg-announcement-item [data-announcement-preview]{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
}

/* ========================================================================== 
   CASEGO-PROD-DASHBOARD-LITE-001D
   Mobile / Smartphone Optimization
   Scope: dashboard presentation only. No workflow/API/data changes.
   ========================================================================== */
@media (max-width: 720px) {
  /* Keep the dashboard inside a predictable mobile reading width. */
  body.cg-route-app #cgMain .cg-premium-home,
  body:not(.cg-public-page) #cgMain .cg-premium-home {
    width:100%!important;
    max-width:100%!important;
    margin:0 auto 12px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    gap:10px!important;
  }

  /* Hero: reduce vertical travel while retaining the Production identity. */
  #cgMain .cg-premium-welcome {
    min-height:0!important;
    padding:17px 16px 16px!important;
    border-radius:18px!important;
  }
  #cgMain .cg-premium-welcome-glow {
    width:260px!important;
    height:180px!important;
    right:-76px!important;
    bottom:-88px!important;
    opacity:.82!important;
  }
  #cgMain .cg-premium-role-chip {
    padding:5px 9px!important;
    margin:0 6px 6px 0!important;
    font-size:9px!important;
    line-height:1.15!important;
  }
  #cgMain .cg-premium-kicker {
    display:inline-flex!important;
    margin:0 0 6px!important;
    font-size:9px!important;
    line-height:1.15!important;
  }
  #cgMain .cg-premium-welcome h2 {
    margin:8px 0 4px!important;
    font-size:24px!important;
    line-height:1.12!important;
    letter-spacing:-.03em!important;
  }
  #cgMain .cg-premium-welcome p {
    margin:0!important;
    max-width:34rem!important;
    font-size:12.5px!important;
    line-height:1.45!important;
  }

  /* Insight cards remain visually expressive but no longer dominate the viewport. */
  #cgMain .cg-premium-insight-grid {
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  #cgMain .cg-premium-insight {
    min-height:104px!important;
    grid-template-columns:minmax(0,1fr) 58px!important;
    gap:8px!important;
    padding:14px 15px!important;
    border-radius:18px!important;
  }
  #cgMain .cg-premium-insight-copy span {
    margin-bottom:7px!important;
    font-size:15px!important;
    line-height:1.2!important;
  }
  #cgMain .cg-premium-insight-copy strong {
    font-size:11.5px!important;
    line-height:1.45!important;
  }
  #cgMain .cg-premium-illustration {
    font-size:38px!important;
    transform:none!important;
  }

  /* Announcement area: one readable card per row and larger touch affordance. */
  #cgMain .cg-announcement-panel {
    margin-top:0!important;
    padding:13px!important;
    border-radius:18px!important;
  }
  #cgMain .cg-announcement-panel .cg-op-panel-head {
    margin-bottom:9px!important;
  }
  #cgMain .cg-announcement-list {
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:8px!important;
  }
  #cgMain .cg-announcement-item {
    min-height:0!important;
    padding:12px 12px 11px!important;
    border-radius:15px!important;
  }
  #cgMain .cg-announcement-meta {
    gap:6px!important;
  }
  #cgMain .cg-announcement-meta time {
    font-size:9px!important;
    white-space:normal!important;
    text-align:right!important;
  }
  #cgMain .cg-announcement-item h3 {
    margin:7px 0 5px!important;
    font-size:12.5px!important;
  }
  #cgMain .cg-announcement-item p,
  #cgMain .cg-announcement-item .cg-announcement-preview,
  #cgMain .cg-announcement-item [data-announcement-preview] {
    margin-bottom:8px!important;
    font-size:11px!important;
    line-height:1.42!important;
    -webkit-line-clamp:2!important;
  }
  #cgMain .cg-announcement-foot {
    margin-top:8px!important;
  }
  #cgMain .cg-announcement-foot .cg-btn {
    min-height:36px!important;
    padding:7px 10px!important;
    font-size:10px!important;
  }

  /* Bottom navigation: preserve compactness without dropping below touch target. */
  body.cg-route-app #cgBottomNav,
  body.cg-route-app .cg-bottom-nav,
  body:not(.cg-public-page) #cgBottomNav,
  body:not(.cg-public-page) .cg-bottom-nav {
    left:7px!important;
    right:7px!important;
    bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
    height:62px!important;
    min-height:62px!important;
    padding:6px!important;
    border-radius:20px!important;
  }
  #cgBottomNav button,
  .cg-bottom-nav button,
  #cgBottomNav .cg-bottom-nav-item,
  .cg-bottom-nav .cg-bottom-nav-item {
    height:50px!important;
    min-height:50px!important;
    padding:4px 2px!important;
    border-radius:14px!important;
    touch-action:manipulation!important;
  }
  #cgBottomNav .cg-nav-label,
  .cg-bottom-nav .cg-nav-label {
    font-size:9px!important;
    line-height:1.05!important;
  }
  body.cg-route-app #cgMain,
  body:not(.cg-public-page) #cgMain {
    padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media (max-width: 420px) {
  #cgMain .cg-premium-home {
    padding-left:5px!important;
    padding-right:5px!important;
  }
  #cgMain .cg-premium-welcome {
    padding:15px 14px!important;
  }
  #cgMain .cg-premium-welcome h2 {
    font-size:22px!important;
  }
  #cgMain .cg-premium-insight {
    grid-template-columns:minmax(0,1fr) 50px!important;
    padding:13px!important;
  }
  #cgMain .cg-premium-illustration {
    font-size:34px!important;
  }
  #cgMain .cg-announcement-panel {
    padding:11px!important;
  }
  #cgMain .cg-announcement-meta {
    align-items:flex-start!important;
  }
  #cgMain .cg-announcement-meta time {
    max-width:48%!important;
  }
  #cgBottomNav .cg-nav-label,
  .cg-bottom-nav .cg-nav-label {
    font-size:8.5px!important;
  }
}

/* =========================================================
   CASEGO-PROD-UI-SIDEBAR-002 — Smartphone Navigation
   Drawer always contains the full role-filtered navigation.
   Bottom navigation remains a five-item quick-access subset.
   ========================================================= */
@media (max-width: 720px) {
  html body.cg-route-app #cgSidebar,
  html body:not(.cg-public-page) #cgSidebar {
    width: min(86vw, 300px) !important;
    min-width: min(86vw, 300px) !important;
    max-width: 300px !important;
    padding: 14px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  html body.cg-route-app #cgSidebar .cg-side-nav,
  html body:not(.cg-public-page) #cgSidebar .cg-side-nav {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 1px 8px !important;
    scrollbar-width: thin !important;
  }

  html body.cg-route-app #cgSidebar .cg-side-nav button,
  html body:not(.cg-public-page) #cgSidebar .cg-side-nav button {
    min-height: 46px !important;
    padding: 0 12px !important;
    margin: 2px 0 !important;
    gap: 11px !important;
    font-size: 13.25px !important;
    touch-action: manipulation !important;
  }

  html body.cg-route-app #cgSidebar .cg-nav-group-label,
  html body:not(.cg-public-page) #cgSidebar .cg-nav-group-label {
    margin-top: 17px !important;
    margin-bottom: 7px !important;
    font-size: 9.5px !important;
  }

  html body.cg-route-app #cgSidebar .cg-sidebar-brand,
  html body:not(.cg-public-page) #cgSidebar .cg-sidebar-brand {
    padding-bottom: 15px !important;
    margin-bottom: 7px !important;
  }

  html body.cg-route-app #cgSidebar .cg-sidebar-profile,
  html body:not(.cg-public-page) #cgSidebar .cg-sidebar-profile {
    min-height: 60px !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
  }

  /* Keep bottom navigation as quick access only; full menu stays in drawer. */
  body.cg-route-app #cgBottomNav button,
  body.cg-route-app .cg-bottom-nav button,
  body:not(.cg-public-page) #cgBottomNav button,
  body:not(.cg-public-page) .cg-bottom-nav button {
    min-width: 0 !important;
    padding: 4px 2px !important;
  }
  body.cg-route-app #cgBottomNav .cg-nav-label,
  body.cg-route-app .cg-bottom-nav .cg-nav-label,
  body:not(.cg-public-page) #cgBottomNav .cg-nav-label,
  body:not(.cg-public-page) .cg-bottom-nav .cg-nav-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}
/* CASEGO-PROD-UI-SIDEBAR-002 END */

/* =========================================================
   CASEGO-PROD-UI-TRACKING-GOVGRADE-MOBILE-001R1
   Public QR receipt confirmation — mobile-first refinements
   ========================================================= */
@media (max-width:640px){
  .cg-tracking-public.cg-tracking-official-page{
    align-items:flex-start;
    padding:14px 10px 24px;
  }
  .cg-tracking-official-card{
    padding:20px 16px;
    border-radius:14px;
  }
  .cg-tracking-official-card .cg-tracking-jkr-logo{
    width:66px;
  }
  .cg-tracking-official-header{
    padding-bottom:18px;
  }
  .cg-tracking-official-header h1{
    font-size:24px;
  }
  .cg-tracking-intro{
    font-size:13px;
  }
  .cg-tracking-document-summary{
    margin-top:18px;
    padding:12px;
  }
  .cg-tracking-meta{
    grid-template-columns:1fr;
    gap:8px;
  }
  .cg-tracking-meta>div{
    padding:10px 12px;
  }
  .cg-tracking-form{
    margin-top:18px;
  }
  .cg-tracking-form-heading{
    margin-bottom:15px;
  }
  .cg-tracking-submit{
    min-height:52px;
  }
}
@media (max-width:380px){
  .cg-tracking-official-card{
    padding:18px 14px;
  }
  .cg-tracking-agency strong{
    font-size:12px;
  }
  .cg-tracking-official-header h1{
    font-size:22px;
  }
}