/* MR.SMART Responsive Stylesheet - Persistent Mini-Sidebar & Scaled Content */

/* Mobile & Tablet Viewports */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    min-height: 100vh;
  }

  .app {
    position: relative;
    min-height: 100vh;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Sidebar Drawer - Fully Hidden Off-Screen on Mobile */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: -260px !important; /* Completely off-screen when closed */
    bottom: 0;
    height: 100vh !important;
    width: 260px !important;
    flex: 0 0 260px !important;
    z-index: 1200 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: none !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Slide-out drawer when open */
  html.mrsmart-ready .sidebar.open {
    left: 0 !important;
    box-shadow: 14px 0 28px rgba(10, 24, 150, 0.24) !important;
  }

  /* Logo behavior on mobile */
  .sidebar .logo,
  .sidebar .logo-img {
    display: block !important;
    width: 130px !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Hamburger button floating at top-left of screen when sidebar is closed */
  .sidebar:not(.open) .hamburger-btn,
  .sidebar:not(.open) .hamburger {
    position: fixed !important;
    left: 12px !important;
    top: 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1300 !important;
    background: #0A1896 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(10, 24, 150, 0.24) !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Make sure the hamburger lines are white on mobile when closed */
  .sidebar:not(.open) .hamburger-btn span,
  .sidebar:not(.open) .hamburger span {
    background: #ffffff !important;
  }

  /* Sidebar header default spacing when drawer is open */
  .sidebar-header,
  .sidebar-head {
    display: flex !important;
    align-items: center !important;
    min-height: 82px !important;
    width: 100% !important;
  }

  /* Sidebar nav labels behavior */
  .sidebar .nav-label,
  .sidebar .logout-label,
  .sidebar .label {
    display: inline-block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .main,
  .main-area,
  #mainArea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
  }

  /* Content inner padding minimized */
  .content,
  .page-shell,
  .dashboard-shell {
    padding: 8px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Header / Topbar height auto and responsive */
  .topbar {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Left padding to shift title/folder icon to clear floating hamburger button */
  .title-wrap,
  .topbar > .topbar-title {
    padding-left: 42px !important;
  }

  .title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1;
    min-width: 0;
    width: auto !important;
  }

  .topbar-title {
    display: block !important;
    flex: 1;
    min-width: 0;
    width: auto !important;
    overflow: visible !important;
  }

  .title-wrap .topbar-title {
    padding-left: 0 !important;
  }

  .topbar-title h1 {
    font-size: clamp(16px, 4.6vw, 20px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .topbar-title p {
    display: none !important; /* Hide subtitle to save screen space */
  }

  .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto;
  }

  /* Scaled-down User Badge */
  .user-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    height: 32px !important;
  }

  .user-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Tab Row & Button Styling on Mobile */
  .tab-row {
    display: flex !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--soft-shadow) !important;
    margin-bottom: 14px !important;
  }

  .tab-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    background: #ffffff !important;
    color: #1937b6 !important;
    font-size: clamp(11px, 3.4vw, 12.5px) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    border: 1px solid #1937b6 !important;
  }

  .tab-btn + .tab-btn {
    border-left: 0 !important;
  }

  .tab-btn.active {
    background: #1b2fab !important;
    color: white !important;
  }

  /* Scaled-down Typography */
  .section-title,
  .dashboard-section-title {
    font-size: clamp(17px, 4.4vw, 20px) !important;
    margin-bottom: 10px !important;
  }

  /* Collapsing grids */
  .dashboard-overview,
  .chart-grid,
  .qual-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .stats-grid .stat-card:last-child {
    grid-column: auto !important;
  }

  /* Scaled-down Statistic Cards */
  .stat-card {
    padding: 13px 13px 11px !important;
    border-radius: 14px !important;
    min-height: 118px !important;
  }

  .stat-top {
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  .stat-label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .stat-value {
    font-size: clamp(26px, 8vw, 31px) !important;
    line-height: 1.05 !important;
  }

  .stat-subtext {
    margin-top: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  .stat-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }

  .stat-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .progress-track {
    height: 6px !important;
  }

  /* Scaled-down Chart and qualitative widgets */
  .chart-card,
  .interpret-card,
  .qual-card,
  .bar-card {
    padding: 14px 14px 15px !important;
    border-radius: 14px !important;
  }

  .chart-title {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .pie-wrap {
    min-height: 176px !important;
  }

  .pie-chart {
    width: 160px !important;
    height: 160px !important;
  }

  .pie-label {
    min-width: 48px !important;
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    padding: 2px 5px !important;
  }

  .bar-area {
    height: auto !important;
    min-height: 210px !important;
    padding: 12px 12px 10px !important;
  }

  .bar-scale,
  .bar-group {
    grid-template-columns: 88px minmax(0, 1fr) 46px !important;
    gap: 8px !important;
  }

  .bar-label {
    margin-top: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .bar-value {
    font-size: 11px !important;
  }

  .bar-group {
    min-height: 32px !important;
  }

  .interpret-body h4 {
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }

  .interpret-body p {
    font-size: 11.5px !important;
    line-height: 1.65 !important;
  }

  .interpret-icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* Qualitative Section Mini */
  .qual-score {
    font-size: 14px !important;
  }

  .qual-score strong {
    font-size: 32px !important;
  }

  .qual-caption {
    font-size: 9px !important;
  }

  .qual-illustration {
    width: 74px !important;
    height: 74px !important;
  }

  .qual-progress {
    height: 7px !important;
  }

  .qual-row {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  .qual-row-left {
    gap: 6px !important;
  }

  .qual-check {
    width: 12px !important;
    height: 12px !important;
  }

  .qual-check svg {
    width: 8px !important;
    height: 8px !important;
  }

  .qual-total {
    gap: 16px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .qual-total strong {
    font-size: 16px !important;
  }

  .recommend-list {
    font-size: 11.5px !important;
    line-height: 1.65 !important;
  }

  /* Forms & Filters resizing */
  .dashboard-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 110px !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    align-items: end !important;
  }

  .dashboard-toolbar .dashboard-filter-group:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .dashboard-toolbar .dashboard-toolbar-actions {
    display: contents !important;
  }

  .dashboard-toolbar .tambah-btn,
  .dashboard-toolbar .dashboard-add-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .dashboard-toolbar .dashboard-filter-group:nth-of-type(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .dashboard-toolbar .filter-reset-btn,
  .dashboard-toolbar .dashboard-reset-btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    align-items: end !important;
  }

  .filter-toolbar .filter-group:nth-of-type(1) {
    /* Filter Jenis Pasien */
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .filter-toolbar .filter-group:nth-of-type(3) {
    /* Filter Tanggal */
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .filter-toolbar .filter-group:nth-of-type(2) {
    /* Pencarian */
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .filter-toolbar .filter-actions {
    display: contents !important;
  }

  .filter-toolbar .filter-reset-btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .filter-toolbar .import-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .filter-toolbar .tambah-btn {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .filter-group:nth-of-type(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .filter-group:nth-of-type(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .qualitative-filter-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .qualitative-filter-actions > * {
    width: 100% !important;
    margin: 0 !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .filter-reset-btn {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .tambah-btn {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.qualitative-view .filter-toolbar .search-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
  }

  body.qualitative-view .filter-toolbar .search-wrap .filter-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.qualitative-view .filter-toolbar .search-wrap .filter-reset-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px !important;
  }

  .report-filter-form-quant,
  .report-filter-form-qual {
    display: grid !important;
    grid-template-columns: 1.2fr 1.2fr auto !important;
    gap: 8px !important;
    align-items: end !important;
  }

  .report-filter-form-quant input[type="hidden"],
  .report-filter-form-qual input[type="hidden"],
  .chart-filter-form input[type="hidden"] {
    display: none !important;
  }

  .report-filter-form-quant .report-filter-field:nth-of-type(1),
  .report-filter-form-qual .report-filter-field:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .report-filter-form-quant .report-filter-field:nth-of-type(2),
  .report-filter-form-qual .report-filter-field:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .report-filter-form-quant .report-filter-actions,
  .report-filter-form-qual .report-filter-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: auto !important;
  }

  .report-filter-actions .report-reset-link,
  .report-filter-actions .report-apply-btn {
    min-width: 60px !important;
    width: auto !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Inline section head and export buttons on mobile */
  body.report-page .section-head {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
  }

  .export-actions {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .section-head .export-pill {
    min-height: 28px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .section-head .export-pill svg {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
  }

  .chart-filter-form {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 10px !important;
    align-items: end !important;
  }

  .chart-filter-field {
    grid-column: span 1 !important;
  }

  .chart-filter-actions {
    grid-column: span 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Compact controls for mobile */
  .filter-control,
  .dashboard-filter-control {
    height: 36px !important;
    font-size: 11.5px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
  }

  .filter-group label,
  .dashboard-filter-group label {
    font-size: 11px !important;
    color: #465d95 !important;
    font-weight: 700 !important;
  }

  .filter-reset-btn,
  .import-btn,
  .tambah-btn,
  .dashboard-reset-btn,
  .dashboard-add-btn {
    height: 36px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
  }

  .report-filter-field span,
  .chart-filter-field span {
    font-size: 10.5px !important;
  }

  .report-filter-field select,
  .report-filter-field input,
  .chart-filter-field select {
    min-height: 34px !important;
    font-size: 11px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 8px !important;
  }

  .report-reset-link,
  .report-apply-btn,
  .export-pill,
  .chart-filter-reset,
  .chart-filter-apply {
    min-height: 34px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .export-pill span {
    font-size: 11.5px !important;
  }

  .dashboard-toolbar-actions > *,
  .filter-actions > *,
  .chart-filter-actions > * {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .report-filter-actions > * {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-group label {
    font-size: 11.5px !important;
  }

  .form-control {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 34px !important;
  }

  .consent-line {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .backbar {
    margin: -8px -8px 12px !important;
    padding-left: 64px !important;
  }

  .section-head {
    display: grid !important;
    grid-template-columns: 1fr 80px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 6px 10px !important;
    height: auto !important;
  }

  .section-head > div:first-child {
    grid-column: 1 / span 2 !important;
  }

  .section-head .score-label {
    grid-column: 1 !important;
    justify-self: end !important;
  }

  .section-head .score-box {
    grid-column: 2 !important;
    width: 100% !important;
  }

  /* Compact summary rows on mobile */
  .summary-row {
    display: grid !important;
    grid-template-columns: 1fr auto 48px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 4px 6px !important;
    padding: 4px 10px !important;
    font-size: 10.5px !important;
    min-height: auto !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #f0f0f3 !important;
  }

  .summary-row > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .summary-row > div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    font-weight: 500 !important;
  }

  .summary-row .score-box {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 20px !important;
    padding: 1px 2px !important;
    font-size: 10.5px !important;
    text-align: center !important;
    border-radius: 4px !important;
  }

  .summary-row.total {
    font-size: 12px !important;
    font-weight: 800 !important;
    background: #f8fafc !important;
    padding: 6px 10px !important;
  }

  .summary-row.total .score-box {
    font-size: 11px !important;
    font-weight: 800 !important;
    height: 22px !important;
  }

  .patient-row {
    grid-template-columns: repeat(2, 1fr) !important;
    height: auto !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  /* Table horizontal scrolling and mobile responsive sizing */
  .result-table-wrap,
  .latest-table-wrap,
  .table-scroll,
  .bar-scroll,
  .category-modal-body,
  .detail-modal-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Allow .table-scroll to scroll — parent must NOT clip it */
  .table-card {
    overflow: visible !important;
  }

  .result-table-wrap table,
  .table-scroll table {
    min-width: 480px !important;
    width: max-content !important;
  }

  .latest-table-wrap table,
  .category-modal-body table,
  .checklist-table {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Semua kolom tabel ditampilkan — scroll horizontal untuk melihat seluruh data */


  /* Compact cell styles for mobile tables */
  .result-table-wrap table th,
  .result-table-wrap table td,
  .table-scroll table th,
  .table-scroll table td,
  .category-modal-body table th,
  .category-modal-body table td,
  .latest-table-wrap table th,
  .latest-table-wrap table td {
    padding: 6px 4px !important;
    font-size: 10.5px !important;
  }

  body.qualitative-view .qualitative-result-panel {
    margin-top: 4px !important;
  }

  body.qualitative-view .qualitative-result-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
  }

  body.qualitative-view .qualitative-result-wrap table {
    min-width: 920px !important;
    width: max-content !important;
  }

  body.qualitative-view .qualitative-result-wrap table th:nth-child(4),
  body.qualitative-view .qualitative-result-wrap table td:nth-child(4),
  body.qualitative-view .qualitative-result-wrap table th:nth-child(5),
  body.qualitative-view .qualitative-result-wrap table td:nth-child(5),
  body.qualitative-view .qualitative-result-wrap table th:nth-child(6),
  body.qualitative-view .qualitative-result-wrap table td:nth-child(6),
  body.qualitative-view .qualitative-result-wrap table th:nth-child(7),
  body.qualitative-view .qualitative-result-wrap table td:nth-child(7) {
    display: table-cell !important;
  }

  body.qualitative-view .qualitative-result-wrap table th,
  body.qualitative-view .qualitative-result-wrap table td {
    padding: 6px 5px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  body.qualitative-view .qualitative-result-wrap .result-badge {
    min-width: 64px !important;
    padding: 3px 7px !important;
    font-size: 8.5px !important;
    border-radius: 999px !important;
  }

  body.qualitative-view .qualitative-result-wrap .detail-trigger-btn {
    min-width: 44px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
    border-radius: 999px !important;
  }

  body.qualitative-view .qualitative-result-wrap .result-score {
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  /* Modals Dialog */
  .modal-overlay .modal-header,
  .modal .modal-header,
  .detail-modal-header,
  .category-modal-header {
    padding: 12px 14px 8px !important;
  }

  .modal-overlay .modal-header h2,
  .modal .modal-header h2,
  .detail-modal-header h2,
  .category-modal-header h2 {
    font-size: 13.5px !important;
  }

  .modal-overlay .modal-body,
  .modal .modal-body,
  .detail-modal-body,
  .category-modal-body {
    padding: 12px 14px 10px !important;
  }

  .modal,
  .detail-modal,
  .latest-modal,
  .category-modal {
    width: min(calc(100vw - 16px), 720px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    margin: 0 auto !important;
  }

  .detail-modal-header,
  .latest-modal-header,
  .category-modal-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .detail-modal-actions {
    width: 100%;
    justify-content: space-between;
  }

  .card {
    width: min(calc(100vw - 24px), 380px) !important;
  }

  /* Report page specific polish */
  .page-shell {
    border-radius: 18px !important;
    padding: 10px !important;
  }

  .report-view .report-filter-toolbar {
    margin-bottom: 16px !important;
  }

  .report-view .section-head {
    margin-bottom: 8px !important;
  }

  .report-view .stats-grid,
  .report-view .chart-grid,
  .report-view .qual-grid {
    gap: 14px !important;
  }

  .report-view .stat-card,
  .report-view .chart-card,
  .report-view .bar-card,
  .report-view .qual-card,
  .report-view .interpret-card {
    border-radius: 16px !important;
  }

  .report-view .chart-title {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .report-view .pie-wrap {
    min-height: 188px !important;
  }

  .report-view .pie-chart {
    width: 160px !important;
    height: 160px !important;
  }

  .report-view .pie-label {
    font-size: 10px !important;
  }

  .report-view .bar-scale,
  .report-view .bar-group {
    grid-template-columns: 94px minmax(0, 1fr) 48px !important;
  }

  .report-view .bar-scale-track {
    gap: 4px !important;
    font-size: 9px !important;
  }

  .report-view .bar-label {
    font-size: 11px !important;
  }

  .report-view .bar-value {
    font-size: 11px !important;
  }

  .report-view .qual-card h3,
  .report-view .bar-card h3 {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }

  .report-view .qual-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .report-view .qual-main {
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 6px !important;
  }

  .report-view .qual-score {
    font-size: 11px !important;
  }

  .report-view .qual-score strong {
    font-size: 24px !important;
    margin-top: 2px !important;
  }

  .report-view .qual-caption {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  .report-view .qual-illustration {
    width: 48px !important;
    height: 48px !important;
  }

  .report-view .qual-progress {
    height: 5px !important;
    margin-bottom: 8px !important;
  }

  .report-view .qual-list {
    margin-top: 8px !important;
    gap: 4px !important;
  }

  .report-view .qual-row {
    padding: 3px 0 !important;
    font-size: 9px !important;
  }

  .report-view .qual-row-left {
    gap: 4px !important;
  }

  .report-view .qual-check {
    width: 10px !important;
    height: 10px !important;
  }

  .report-view .qual-check svg {
    width: 6px !important;
    height: 6px !important;
  }

  .report-view .qual-total {
    margin-top: 6px !important;
    padding-top: 6px !important;
    font-size: 10.5px !important;
  }

  .report-view .qual-total strong {
    font-size: 12px !important;
  }

  .report-view .interpret-body p,
  .report-view .recommend-list {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .report-view .recommend-list li {
    margin-bottom: 4px !important;
  }

  .report-view .interpret-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .report-view .recommend-card {
    margin-top: 8px !important;
  }

  .clickable-subtext {
    word-break: break-word !important;
  }

  /* Responsive Detail Modal & Overlay adjustments to prevent overlapping and oversized cards */
  .modal-overlay,
  .detail-modal-overlay {
    z-index: 1500 !important;
  }

  .detail-modal-overlay {
    padding: 16px 8px !important;
  }

  .detail-modal {
    max-height: calc(100vh - 32px) !important;
  }

  .detail-modal-title {
    font-size: 15px !important;
  }

  .detail-modal-meta {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .detail-modal-pdf-btn {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  .detail-modal-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
  }

  .detail-summary-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .detail-summary-item .result-badge {
    align-self: flex-start !important;
    margin-top: 4px !important;
  }

  .detail-summary-title {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .detail-summary-note {
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  .detail-item-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .detail-item-row .badge {
    align-self: flex-start !important;
    margin-top: 4px !important;
  }

  .detail-item-title {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .detail-item-note {
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  /* Compact analysis table on mobile/tablet viewports */
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .analysis-table {
    width: 100% !important;
    min-width: 320px !important;
    font-size: 9px !important;
  }

  .analysis-table th {
    padding: 4px 3px !important;
    font-size: 9px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  .analysis-table td {
    padding: 4px 3px !important;
    font-size: 9px !important;
  }

  .analysis-table td:first-child {
    padding: 5px 6px !important;
    font-size: 9px !important;
    width: auto !important;
  }

  .analysis-table td:first-child::before {
    margin-right: 4px !important;
    width: 3px !important;
    height: 6px !important;
  }

  .analysis-table .choice-control-with-label {
    gap: 2px !important;
  }

  .analysis-table .choice-box {
    width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
  }

  .analysis-table .choice-text {
    display: none !important; /* Hide Lengkap/Konsisten labels inside table rows on mobile */
  }

  .analysis-table .choice-symbol {
    font-size: 8px !important;
  }

  .analysis-table .choice-cell {
    width: auto !important;
  }

  /* Import Modal Responsive Styles */
  .import-modal {
    width: min(calc(100vw - 20px), 520px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .import-modal .modal-body {
    padding: 10px 12px 10px !important;
  }

  .import-source-panel {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .import-panel-title {
    font-size: 12.5px !important;
    margin-bottom: 4px !important;
  }

  .import-panel-desc {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  .import-modal .form-group label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }

  .import-file-input {
    padding: 8px 10px !important;
    font-size: 11px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  .import-file-input::file-selector-button {
    margin-right: 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .import-modal .form-help {
    font-size: 10px !important;
  }

  .import-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px 14px !important;
    box-sizing: border-box !important;
  }

  .import-modal .modal-footer .filter-reset-btn,
  .import-modal .modal-footer .btn-simpan {
    flex: 1 !important;
    width: 50% !important; /* Forces equal width */
    margin: 0 !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* Very Small Screen Viewports */
@media (max-width: 640px) {
  body {
    overflow-y: auto !important;
  }

  .title-icon,
  .topbar-title h1 svg {
    display: none !important;
  }

  .logo-img {
    width: 110px !important;
  }

  .content,
  .page-shell,
  .dashboard-shell {
    padding: 6px !important;
  }

  .topbar {
    padding: 8px 10px !important;
  }

  .topbar-actions {
    gap: 6px !important;
  }

  .report-filter-toolbar,
  .chart-filter-toolbar {
    gap: 8px !important;
  }

  .page-shell {
    padding: 8px !important;
  }

  .title-wrap,
  .topbar > .topbar-title {
    padding-left: 40px !important;
  }

  .topbar-title h1 {
    font-size: clamp(15px, 4.8vw, 18px) !important;
  }

  .tab-btn {
    min-height: 38px !important;
    font-size: 10.5px !important;
  }

  .stat-card,
  .chart-card,
  .interpret-card,
  .qual-card,
  .bar-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .stat-value {
    font-size: clamp(23px, 8vw, 28px) !important;
  }

  .stat-subtext {
    font-size: 10px !important;
  }

  .pie-chart {
    width: 160px !important;
    height: 160px !important;
  }

  .bar-scale,
  .bar-group {
    grid-template-columns: 80px minmax(0, 1fr) 42px !important;
  }

  .bar-label,
  .bar-value,
  .qual-row,
  .interpret-body p,
  .recommend-list {
    font-size: 10.5px !important;
  }

  .report-view .bar-scale,
  .report-view .bar-group {
    grid-template-columns: 82px minmax(0, 1fr) 42px !important;
  }

  .report-view .pie-chart {
    width: 160px !important;
    height: 160px !important;
  }

  .bar-scale {
    min-width: 100% !important;
    width: 100% !important;
  }

  .card {
    padding: 16px 12px 14px !important;
    border-radius: 12px !important;
  }

  .welcome {
    font-size: 15px !important;
  }
}

/* Very small devices - hide user badge name text and shrink stats text */
@media (max-width: 480px) {
  body.qualitative-view .topbar-title h1 {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar {
    gap: 8px !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .qualitative-filter-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.qualitative-view .filter-toolbar.qualitative-filter-toolbar .qualitative-filter-actions > * {
    width: 100% !important;
  }

  body.qualitative-view .qualitative-result-wrap table th,
  body.qualitative-view .qualitative-result-wrap table td {
    padding: 5px 4px !important;
    font-size: 9px !important;
  }

  body.qualitative-view .qualitative-result-wrap .result-badge {
    min-width: 58px !important;
    padding: 2px 6px !important;
    font-size: 7.8px !important;
  }

  body.qualitative-view .qualitative-result-wrap .detail-trigger-btn {
    min-width: 40px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 7.4px !important;
  }

  body.qualitative-view .qualitative-result-wrap .result-score {
    font-size: 8.8px !important;
  }

  body.qualitative-view .filter-toolbar .search-wrap {
    grid-template-columns: minmax(0, 1fr) 106px !important;
    gap: 8px !important;
  }

  body.dashboard-view .topbar {
    padding: 8px 8px !important;
  }

  body.dashboard-view .topbar-actions {
    gap: 4px !important;
  }

  body.dashboard-view .topbar-title h1 {
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  body.dashboard-view .content,
  body.dashboard-view .page-shell,
  body.dashboard-view .dashboard-shell {
    padding: 6px !important;
  }

  body.dashboard-view .stats-grid,
  body.report-page .stats-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.dashboard-view .stats-grid .stat-card:last-child,
  body.report-page .stats-grid .stat-card:last-child,
  .stats-grid .stat-card:last-child {
    grid-column: auto !important;
  }

  body.dashboard-view .stat-card,
  body.report-page .stat-card,
  .stat-card {
    padding: 6px 8px !important;
    min-height: 64px !important;
    border-radius: 8px !important;
  }

  body.dashboard-view .stat-top,
  body.report-page .stat-top,
  .stat-top {
    gap: 2px !important;
    margin-bottom: 3px !important;
    align-items: flex-start !important;
  }

  body.dashboard-view .stat-label,
  body.report-page .stat-label,
  .stat-label {
    font-size: 8px !important;
    line-height: 1.15 !important;
    margin-bottom: 1px !important;
  }

  body.dashboard-view .stat-value,
  body.report-page .stat-value,
  .stat-value {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  body.dashboard-view .stat-subtext,
  body.report-page .stat-subtext,
  .stat-subtext {
    margin-top: 1px !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.dashboard-view .stat-icon,
  body.report-page .stat-icon,
  .stat-icon {
    display: none !important;
  }

  body.dashboard-view .progress-track,
  body.report-page .progress-track,
  .progress-track {
    height: 3px !important;
  }

  /* Compact qualitative card for mobile */
  .qual-card {
    padding: 8px 10px 10px !important;
    border-radius: 10px !important;
  }

  .qual-score {
    font-size: 11px !important;
  }

  .qual-score strong {
    font-size: 24px !important;
  }

  .qual-caption {
    font-size: 8px !important;
    margin-top: 4px !important;
  }

  .qual-illustration {
    width: 48px !important;
    height: 48px !important;
  }

  .qual-progress {
    height: 5px !important;
    margin-bottom: 8px !important;
  }

  .qual-list {
    gap: 4px !important;
  }

  .qual-row {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  .qual-row-left {
    gap: 4px !important;
  }

  .qual-check {
    width: 10px !important;
    height: 10px !important;
  }

  .qual-check svg {
    width: 6px !important;
    height: 6px !important;
  }

  .qual-total {
    margin-top: 6px !important;
    padding-top: 6px !important;
    font-size: 11px !important;
  }

  .qual-total strong {
    font-size: 13px !important;
  }

  .topbar-title h1 {
    font-size: clamp(13px, 4.4vw, 16px) !important;
  }

  .user-btn {
    width: auto !important;
    height: auto !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
    font-size: unset !important;
    white-space: nowrap !important;
  }

  .user-btn svg {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .stat-label,
  .stat-subtext {
    font-size: 10px !important;
  }

  .stat-value {
    font-size: 22px !important;
  }

  /* Compact quantitative modal for very small screens */
  .modal-overlay {
    padding: 66px 6px 8px !important;
  }

  #modal.modal {
    width: min(calc(100vw - 12px), 560px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100vh - 12px) !important;
    border-radius: 12px !important;
  }

  #modal .modal-header {
    padding: 12px 14px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  #modal .modal-header h2 {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    max-width: calc(100% - 44px) !important;
  }

  #modal .modal-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
  }

  #modal .modal-body {
    padding: 12px 12px 10px !important;
  }

  #modal .form-row {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  #modal .form-group {
    gap: 4px !important;
  }

  #modal .form-group label {
    font-size: 10.5px !important;
  }

  #modal .form-control {
    padding: 7px 10px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
  }

  #modal .form-help {
    font-size: 9.5px !important;
    line-height: 1.5 !important;
  }

  #modal .auto-analysis-note {
    padding: 10px 12px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

  #modal .auto-analysis-note strong {
    font-size: 10.5px !important;
  }

  #modal .checklist-groups {
    gap: 16px !important;
    margin: 8px 0 12px !important;
  }

  #modal .checklist-group {
    border: 1.5px solid #c7d2fe !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(10, 24, 150, 0.05) !important;
  }

  #modal .checklist-group-head {
    padding: 8px 10px !important;
    gap: 8px !important;
    align-items: center !important;
    background: linear-gradient(90deg, #eef4ff 0%, #f5f8ff 100%) !important;
    border-bottom: 1.5px solid #c7d2fe !important;
  }

  #modal .checklist-group-title {
    max-width: none !important;
    color: #0A1896 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
  }

  #modal .checklist-head-right {
    gap: 6px !important;
    align-items: flex-end !important;
  }

  #modal .btn-check-all {
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 8.8px !important;
    gap: 4px !important;
  }

  #modal .btn-check-all svg {
    width: 10px !important;
    height: 10px !important;
  }

  #modal .checklist-status {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  #modal .checklist-detail-table,
  #modal .checklist-detail-table tbody {
    display: block !important;
    width: 100% !important;
  }

  #modal .checklist-detail-table tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr) !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  #modal .checklist-detail-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    font-size: 11px !important;
  }

  #modal .checklist-detail-table td:nth-child(1) {
    width: auto !important;
    padding: 8px 6px 8px 10px !important;
    border-right: 1px solid #e2e8f0 !important;
    justify-content: flex-start !important;
    color: #1e293b !important;
    font-weight: 700 !important;
  }

  #modal .checklist-detail-table td:nth-child(2) {
    border-right: 1px solid #e2e8f0 !important;
  }

  #modal .checklist-detail-table td:nth-child(2),
  #modal .checklist-detail-table td:nth-child(3) {
    width: auto !important;
    padding: 6px 4px !important;
    min-height: 34px !important;
  }

  #modal .checklist-detail-name {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  #modal .checklist-choice {
    gap: 4px !important;
    min-height: 30px !important;
    justify-content: center !important;
  }

  #modal .checklist-choice-box {
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
  }

  #modal .checklist-choice-box svg {
    width: 9px !important;
    height: 7px !important;
  }

  #modal .checklist-choice-text {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  #modal .checklist-note-box {
    padding: 8px 10px 10px !important;
  }

  #modal .checklist-note-input {
    min-height: 56px !important;
  }

  #modal .modal-footer {
    padding: 10px 12px 14px !important;
  }

  #modal .btn-simpan {
    width: 100% !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Compact latest report card and table for mobile */
  .latest-card-header {
    min-height: 26px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
  }

  .latest-view-all {
    min-height: 18px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }

  .latest-table-wrap table th,
  .latest-table-wrap table td {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
  }

  /* Compact kuantitatif main table on <= 480px */
  .table-scroll table th,
  .table-scroll table td {
    padding: 5px 3px !important;
    font-size: 9.5px !important;
  }

  /* Compact filter bar inputs and buttons on <= 480px */
  .filter-control {
    height: 34px !important;
    font-size: 11.5px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
  }

  .filter-reset-btn,
  .import-btn,
  .tambah-btn {
    height: 34px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
  }

  .filter-group label {
    font-size: 10.5px !important;
  }

  .status-badge {
    min-width: 70px !important;
    min-height: 14px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
    border-radius: 2px !important;
  }

  /* Compact Login Card for mobile screens <= 480px */
  .card {
    max-width: 340px !important;
    width: 100% !important;
    padding: 20px 24px 16px !important;
    border-radius: 16px !important;
  }

  .logo-img {
    width: 140px !important;
    height: 52px !important;
  }

  .welcome {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .status-wrap {
    min-height: 32px !important;
    margin-bottom: 10px !important;
  }

  .login-status {
    min-height: 20px !important;
    padding: 3px 10px !important;
    font-size: 9px !important;
  }

  .status-detail {
    font-size: 10px !important;
    margin-top: 4px !important;
  }

  .field {
    margin-bottom: 10px !important;
  }

  .field input,
  .field select {
    height: 36px !important;
    padding: 0 34px !important;
    font-size: 12.5px !important;
  }

  .field-icon {
    left: 10px !important;
  }

  .field-icon svg,
  .toggle-pw svg {
    width: 14px !important;
    height: 14px !important;
  }

  .toggle-pw {
    right: 10px !important;
  }

  .row-opts {
    margin-bottom: 14px !important;
    gap: 8px !important;
  }

  .remember,
  .forgot {
    font-size: 11px !important;
  }

  .remember input[type="checkbox"] {
    width: 12px !important;
    height: 12px !important;
  }

  .btn-login {
    height: 36px !important;
    font-size: 14px !important;
  }

  .support {
    margin-top: 18px !important;
    font-size: 11px !important;
  }

  /* Compact Import History Card for mobile <= 480px */
  .import-history-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .import-history-head {
    margin-bottom: 10px !important;
    gap: 8px !important;
  }

  .import-history-title {
    font-size: 14px !important;
  }

  .import-history-subtitle {
    font-size: 10.5px !important;
    margin-top: 2px !important;
  }

  .import-history-badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
    min-height: 24px !important;
    min-width: auto !important;
  }

  .import-history-item {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .import-history-name {
    font-size: 11px !important;
  }

  .import-history-meta {
    font-size: 9px !important;
    margin-top: 2px !important;
  }

  .import-history-actions {
    width: 100% !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .import-history-actions form {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .import-history-open {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
    border-radius: 6px !important;
  }

  .import-history-delete {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 360px) {
  body.qualitative-view .topbar-title h1 {
    font-size: 12px !important;
  }

  body.qualitative-view .qualitative-result-wrap table th,
  body.qualitative-view .qualitative-result-wrap table td {
    padding: 4px 3px !important;
    font-size: 8px !important;
  }

  body.qualitative-view .qualitative-result-wrap .result-badge {
    min-width: 52px !important;
    font-size: 7px !important;
  }

  body.qualitative-view .qualitative-result-wrap .detail-trigger-btn {
    min-width: 36px !important;
    height: 20px !important;
    font-size: 7px !important;
  }

  body.dashboard-view .topbar-title h1 {
    font-size: 11px !important;
  }

  body.dashboard-view .stats-grid,
  body.report-page .stats-grid,
  .stats-grid {
    gap: 5px !important;
  }

  body.dashboard-view .stat-card,
  body.report-page .stat-card,
  .stat-card {
    padding: 4px 6px !important;
    min-height: 56px !important;
  }

  body.dashboard-view .stat-label,
  body.report-page .stat-label,
  .stat-label {
    font-size: 7.5px !important;
  }

  body.dashboard-view .stat-value,
  body.report-page .stat-value,
  .stat-value {
    font-size: 13px !important;
  }

  body.dashboard-view .stat-subtext,
  body.report-page .stat-subtext,
  .stat-subtext {
    font-size: 6.5px !important;
  }

  .qual-card {
    padding: 6px 8px 8px !important;
  }

  .qual-score strong {
    font-size: 20px !important;
  }

  .qual-row {
    font-size: 8px !important;
  }

  #modal .modal-header h2 {
    font-size: 11px !important;
  }

  #modal .checklist-group-title {
    max-width: none !important;
    font-size: 10px !important;
  }

  #modal .checklist-choice-text {
    font-size: 8.5px !important;
  }

  #modal .checklist-choice {
    gap: 3px !important;
  }

  #modal .checklist-detail-table td:nth-child(1) {
    padding: 6px 4px 6px 8px !important;
  }

  #modal .checklist-detail-table td:nth-child(2),
  #modal .checklist-detail-table td:nth-child(3) {
    padding: 4px 2px !important;
  }

  .latest-table-wrap table th,
  .latest-table-wrap table td {
    font-size: 8.5px !important;
    padding: 3px 5px !important;
  }

  /* Ultra-compact kuantitatif main table on <= 360px */
  .table-scroll table th,
  .table-scroll table td {
    padding: 2px 2px !important;
    font-size: 7.5px !important;
  }

  /* Shrink badge and detail button at <= 360px */
  .table-scroll .badge {
    font-size: 7px !important;
    padding: 2px 5px !important;
    border-radius: 10px !important;
  }

  .table-scroll .detail-trigger-btn {
    min-width: 36px !important;
    height: 18px !important;
    font-size: 7px !important;
    padding: 0 5px !important;
  }

  /* Ultra-compact filter bar inputs and buttons on <= 360px */
  .filter-control {
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
  }

  .filter-reset-btn,
  .import-btn,
  .tambah-btn {
    height: 30px !important;
    font-size: 10px !important;
    padding: 0 10px !important;
  }

  .filter-group label {
    font-size: 10px !important;
  }

  .status-badge {
    min-width: 52px !important;
    font-size: 7px !important;
    padding: 0 4px !important;
  }

  /* Ultra-compact Login Card for mobile screens <= 360px */
  .card {
    max-width: 300px !important;
    padding: 16px 18px 12px !important;
    border-radius: 12px !important;
  }

  .logo-img {
    width: 120px !important;
    height: 44px !important;
  }

  .welcome {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .status-wrap {
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .login-status {
    min-height: 18px !important;
    padding: 2px 8px !important;
    font-size: 8.5px !important;
  }

  .status-detail {
    font-size: 9px !important;
    margin-top: 3px !important;
  }

  .field {
    margin-bottom: 8px !important;
  }

  .field input,
  .field select {
    height: 32px !important;
    padding: 0 30px !important;
    font-size: 12px !important;
  }

  .field-icon {
    left: 8px !important;
  }

  .field-icon svg,
  .toggle-pw svg {
    width: 12px !important;
    height: 12px !important;
  }

  .toggle-pw {
    right: 8px !important;
  }

  .row-opts {
    margin-bottom: 12px !important;
  }

  .remember,
  .forgot {
    font-size: 10px !important;
  }

  .remember input[type="checkbox"] {
    width: 11px !important;
    height: 11px !important;
  }

  .btn-login {
    height: 32px !important;
    font-size: 13px !important;
  }

  .support {
    margin-top: 12px !important;
    font-size: 10px !important;
  }

  /* Ultra-compact Import History Card for <= 360px */
  .import-history-card {
    padding: 10px 10px !important;
    border-radius: 10px !important;
  }

  .import-history-title {
    font-size: 12px !important;
  }

  .import-history-subtitle {
    font-size: 9.5px !important;
  }

  .import-history-badge {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  .import-history-item {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .import-history-name {
    font-size: 9.5px !important;
  }

  .import-history-meta {
    font-size: 8px !important;
  }

  .import-history-open {
    padding: 3px 6px !important;
    font-size: 8.5px !important;
  }


  .import-history-delete {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
}

/* ===== 320px and below — extreme compact ===== */
@media (max-width: 320px) {
  /* Table cells */
  .table-scroll table th,
  .table-scroll table td {
    padding: 2px 1px !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
  }

  /* Badge pills (Lengkap / Tidak Lengkap) */
  .table-scroll .badge {
    font-size: 6.5px !important;
    padding: 1px 4px !important;
    border-radius: 8px !important;
  }

  /* Detail button */
  .table-scroll .detail-trigger-btn {
    min-width: 28px !important;
    height: 16px !important;
    font-size: 6.5px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
  }




  /* Filter bar */
  .filter-control {
    height: 28px !important;
    font-size: 10.5px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
  }

  .filter-reset-btn,
  .import-btn,
  .tambah-btn {
    height: 28px !important;
    font-size: 9.5px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
  }

  .filter-group label {
    font-size: 9.5px !important;
  }

  /* status-badge */
  .status-badge {
    min-width: 44px !important;
    font-size: 6.5px !important;
    padding: 0 3px !important;
  }
}